Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

V2 landing page #96

Merged
merged 2 commits into from
Oct 7, 2024
Merged

V2 landing page #96

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6a66277
fix: landing page added search func
bacpactech Oct 7, 2024
00510c6
fix: lint
bacpactech Oct 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 26 additions & 26 deletions next.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,37 +5,37 @@ require('dotenv').config();
// Import PWA plugin
// eslint-disable-next-line @typescript-eslint/no-var-requires
const withPWA = require("next-pwa")({
dest: "public", // Destination directory for the PWA files
disable: process.env.NODE_ENV === "development", // Disable PWA in development mode
register: true, // Register the PWA service worker
skipWaiting: true, // Skip waiting for service worker activation
dest: "public", // Destination directory for the PWA files
disable: process.env.NODE_ENV === "development", // Disable PWA in development mode
register: true, // Register the PWA service worker
skipWaiting: true, // Skip waiting for service worker activation
});

// Next.js configuration
const nextConfig = {
// Allow images from external domains
images: {
domains: ['cdn.pixabay.com',"res.cloudinary.com","upload.wikimedia.org"],
},
// Allow images from external domains
images: {
domains: ['cdn.pixabay.com', "res.cloudinary.com", "upload.wikimedia.org", 'www.servizisegreti.com'],
},

// Custom headers for API routes
async headers() {
return [
{
// Matching all API routes
source: "/api/:path*",
headers: [
{ key: "Access-Control-Allow-Credentials", value: "true" },
{ key: "Access-Control-Allow-Origin", value: "*" }, // Be cautious with "*"
{ key: "Access-Control-Allow-Methods", value: "GET,OPTIONS,PATCH,DELETE,POST,PUT" },
{
key: "Access-Control-Allow-Headers",
value: "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version",
},
],
},
];
},
// Custom headers for API routes
async headers() {
return [
{
// Matching all API routes
source: "/api/:path*",
headers: [
{key: "Access-Control-Allow-Credentials", value: "true"},
{key: "Access-Control-Allow-Origin", value: "*"}, // Be cautious with "*"
{key: "Access-Control-Allow-Methods", value: "GET,OPTIONS,PATCH,DELETE,POST,PUT"},
{
key: "Access-Control-Allow-Headers",
value: "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version",
},
],
},
];
},
};


Expand Down
2 changes: 1 addition & 1 deletion src/app/(withLayout)/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
<LeftNavbar />
</div>
</div>
<div className="w-3/5">{children}</div>
<div className="lg:w-3/5 md:w-4/5 w-full ">{children}</div>
<div className="w-1/5 py-9 px-4 shadow-2xl bg-white hidden lg:block mt-1 h-auto">
<UpcomingEvent />
<Recommendations people={recommendations} />
Expand Down
198 changes: 12 additions & 186 deletions src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,195 +1,21 @@
'use client'
import Image from 'next/image'
import React from 'react'
import bannerImage from '@assets/landing-mobile.svg'
import section3 from '@assets/section-3.svg'
import section4 from '@assets/section-4.svg'
import section5 from '@assets/section-5.svg'
import lightningIcon from '@assets/lightningIcon.svg'
import Title from '@/components/atoms/Title'
import { FaCheckCircle } from 'react-icons/fa'
import { motion } from 'framer-motion'
import LoginButtons from '@/components/atoms/LoginButtons'
import Footer from '@/components/Footer/Footer'
import SectionFirst from '@/components/molecules/LandingPage/SectionFirst/Index'
import SectionTwo from '@/components/molecules/LandingPage/SectionTwo'
import SectionThree from '@/components/molecules/LandingPage/SectionThree'
import SectionFour from '@/components/molecules/LandingPage/SectionFour'
import SectionFive from '@/components/molecules/LandingPage/SectionFive'
import SectionSix from '@/components/molecules/LandingPage/SectionSix'

export default function LandingPage() {
const contentVariants = {
hidden: { x: '-100vw', opacity: 0 },
visible: {
x: 0,
opacity: 1,
transition: { type: 'twin', stiffness: 50 },
},
}

return (
<div className="bg-white w-[95%] lg:w-[85%] mx-auto ">
<div className="flex flex-col-reverse lg:flex-row items-center justify-between mb-10">
<motion.div
initial="hidden"
animate="visible"
variants={contentVariants}
className="flex flex-col text-center lg:text-left justify-start h-full lg:w-1/2"
>
<p className="text-primary-500 text-xs lg:text-sm mb-4">YOU&apos;RE ALMOST THERE</p>
<Title className="mb-4">Search your university!</Title>
<p className="text-neutral-600 text-xs lg:text-sm mb-5">
University not listed? Send us feedback and we will add your university to the database, along with extra perks for you
</p>
<div style={{ width: '-webkit-fill-available' }}>
<input
style={{ width: '-webkit-fill-available' }}
className="py-2 px-4 border-2 border-neutral-300 rounded-full focus:outline-none focus:border-gray-500"
type="text"
placeholder="Search Institute"
/>
</div>
</motion.div>
<motion.div
initial={{ x: '100vw' }} // Start from the right
animate={{ x: 0 }} // Move to the center
transition={{ type: 'twin', stiffness: 50 }}
>
<Image width={650} height={650} src={bannerImage} alt={bannerImage} />
</motion.div>
</div>
{/*Section 2*/}
<div className="text-center mb-20">
<Title className="w-[95%] lg:w-1/2 mx-auto">Connect, Collaborate, and Elevate with Unibuzz</Title>
<p className="text-neutral-600 text-xs lg:text-sm mt-3 mb-5">Familiarize yourself with Unibuzz’s mission and purpose. </p>
</div>
{/*Section 3 Connect*/}
<div className="flex flex-col-reverse lg:flex-row items-center justify-between my-20 gap-14">
<div className="lg:w-1/2 flex flex-col items-center lg:items-start text-center lg:text-left justify-start h-full gap-6">
<div className="flex gap-1 bg-surface-primary-50 rounded-full py-1 px-4 w-fit ">
<Image width={18} height={18} src={lightningIcon} alt={lightningIcon} />
<p className="text-primary-500">Connect</p>
</div>
<div>
<p className="font-poppins text-sm lg:text-[32px] font-normal tracking-tighter ">
Courses, clubs, circles and more. Join all the groups imaginable.
</p>
<ul className="font-normal text-left text-xs lg:text-sm">
<li className="flex items-center gap-3 my-6">
<div>
<FaCheckCircle className="text-[#22C55E] text-md" />
</div>
<p>Join university groups or create your own</p>
</li>
<li className="flex gap-3 my-5">
<div>
<FaCheckCircle className="text-[#22C55E] text-md" />
</div>
<p>Distinguish between university approved groups and casual groups</p>
</li>
<li className="flex gap-3 my-5">
<div>
<FaCheckCircle className="text-[#22C55E] text-md" />
</div>
<p>All social networking done within these groups</p>
</li>
</ul>
</div>
</div>
<div className="lg:w-1/2">
<Image width={650} height={650} src={section3} alt={section3} className="shadow-xl" />
</div>
</div>
{/*Section 4*/}
<div className="flex flex-col lg:flex-row items-center justify-between my-20 gap-14">
<div className="lg:w-1/2">
<Image className="shadow-xl" width={650} height={650} src={section4} alt={section4} />
</div>
<div className="lg:w-1/2 flex flex-col items-center lg:items-start text-center lg:text-left justify-start h-full gap-6">
<div className="flex gap-1 bg-surface-primary-50 rounded-full py-1 px-4 w-fit ">
<Image width={18} height={18} src={lightningIcon} alt={lightningIcon} />
<p className="text-primary-500">Collaborate</p>
</div>
<div>
<p className="font-poppins text-sm lg:text-[32px] font-normal tracking-tighter ">
Create new connections and freely message with others.
</p>
<ul className="font-normal text-left text-xs lg:text-sm">
<li className="flex items-center gap-3 my-6">
<div>
<FaCheckCircle className="text-[#22C55E] text-md" />
</div>
<p>Private messages, group messages, and forum posts</p>
</li>
<li className="flex gap-3 my-5">
<div>
<FaCheckCircle className="text-[#22C55E] text-md" />
</div>
<p>Connect with people you know and keep up with their university life</p>
</li>
<li className="flex gap-3 my-5">
<div>
<FaCheckCircle className="text-[#22C55E] text-md" />
</div>
<p>Edit your profile to your liking; university life is a fresh start</p>
</li>
</ul>
</div>
</div>
</div>

{/*Section 5 Connect*/}
<div className="flex flex-col-reverse lg:flex-row items-center justify-between my-20 gap-14">
<div className="lg:w-1/2 flex flex-col items-center lg:items-start text-center lg:text-left justify-start h-full gap-6">
<div className="flex gap-1 bg-surface-primary-50 rounded-full py-1 px-4 w-fit ">
<Image width={18} height={18} src={lightningIcon} alt={lightningIcon} />
<p className="text-primary-500">Elevate</p>
</div>
<div>
<p className="font-poppins text-sm lg:text-[32px] font-normal tracking-tighter ">
Use our AI assistant among other features to enrich your university life.
</p>
<ul className="font-normal text-left text-xs lg:text-sm">
<li className="flex items-center gap-3 my-6">
<div>
<FaCheckCircle className="text-[#22C55E] text-md" />
</div>
<p>AI assistant that answers all questions related to your university</p>
</li>
<li className="flex gap-3 my-5">
<div>
<FaCheckCircle className="text-[#22C55E] text-md" />
</div>
<p>LaTeX syntax for academic for communication of scientific documents and technical note-taking</p>
</li>
<li className="flex gap-3 my-5">
<div>
<FaCheckCircle className="text-[#22C55E] text-md" />
</div>
<p>Move up to 5gb of files within platform for ebooks, research data, etc</p>
</li>
</ul>
</div>
</div>
<div className="lg:w-1/2">
<Image className="shadow-xl" width={650} height={650} src={section5} alt={section5} />
</div>
</div>
{/*section 6*/}
<div className="flex flex-col gap-3 text-center">
<div>
<p className="text-primary-500 text-xs lg:text-sm">BECOME A PART OF YOUR UNIVERSITY</p>
</div>
<div>
<p className="text-md lg:text-xl font-poppins text-neutral-900 font-bold">
Create an <span className="text-primary-500">Account</span> to Get Started
</p>
</div>
<div>
<p className="text-neutral-700 text-xs lg:text-[18px] font-normal">
Search universities worldwide and become part of their online communities{' '}
</p>
</div>
<div className="flex gap-4 justify-center">
<LoginButtons>Get Started</LoginButtons>
<LoginButtons variant="shade">Get Started</LoginButtons>
</div>
</div>
<SectionFirst />
<SectionTwo />
<SectionThree />
<SectionFour />
<SectionFive />
<SectionSix />
<Footer />
</div>
)
Expand Down
Binary file added src/assets/unibuzz-orange.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
19 changes: 11 additions & 8 deletions src/components/CollegeResult.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,25 @@
import './CollegeResult.css'

import Link from 'next/link'
import ImagePlaceholder from '@assets/unibuzz-orange.png'

interface CollegeProps {
serialNo: number
info: {
university: {
id: string
name: string
score: string
}
}
const CollegeResult: React.FC<CollegeProps> = (props) => {
const CollegeResult: React.FC<CollegeProps> = ({ university }: any) => {
console.log(university, 'universityuniversity')
return (
<div className="college-result">
<Link href={{ pathname: '/college', query: { id: props?.info?.id } }} className="h-10 flex justify-center align-middle">
<div className="no w-1/6 flex justify-center align-middle text-black">{props?.serialNo + 1}</div>
<div className="name w-4/5 flex justify-center align-middle text-black">{props?.info?.name}</div>
<div className="score w-1/6 flex justify-center align-middle text-black">{props?.info?.score}</div>
<div className="">
<Link href={{ pathname: '/college', query: { id: university?.id } }} className="py-2 px-4 flex items-center w-full justify-start">
<div className="no w-1/6 flex justify-center align-middle text-black">
<img width={40} height={40} alt="logo" src={university?.logos[0] || ImagePlaceholder} />
</div>
<div className=" w-4/5 text-black">{university?.name}</div>
{/*<div className="score w-1/6 flex justify-center align-middle text-black">{university?.score}</div>*/}
</Link>
</div>
)
Expand Down
5 changes: 4 additions & 1 deletion src/components/SearchBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,10 @@ const SearchBar = () => {
searchHistoryShown ? (
<SearchHistoryBox info={item} serialNo={index} key={index} />
) : (
<CollegeResult info={item} serialNo={index} key={index} />
<div key={index}>
{' '}
<CollegeResult university={item} />
</div>
)
)
: []
Expand Down
14 changes: 9 additions & 5 deletions src/components/atoms/LogoNavbar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,13 @@ import { MdInfoOutline, MdOutlineLock, MdOutlineSettings } from 'react-icons/md'
import { PiChatsBold, PiChatTextBold, PiPaintBrushDuotone } from 'react-icons/pi'
import { HiCubeTransparent } from 'react-icons/hi'
import { TbLogout } from 'react-icons/tb'
import MobileViewNavbar from '@/components/organism/MobileViewNavbar'

interface Props {
showOnlyLogo?: boolean
}

const nonPaddingUrls = ['/', '/login', '/register']
const nonPaddingUrls = ['/', '/login', '/register', '/college']

export default function LogoNavbar({ showOnlyLogo = false }: Props) {
const pathname = usePathname()
Expand All @@ -38,7 +39,7 @@ export default function LogoNavbar({ showOnlyLogo = false }: Props) {
}, [userProfileData])
useEffect(() => {
isUserLoggedIn()
}, [userProfileData])
}, [userProfileData, isUserLoggedIn])

const renderProfile = () => {
switch (isLogin) {
Expand Down Expand Up @@ -109,7 +110,7 @@ export default function LogoNavbar({ showOnlyLogo = false }: Props) {
)
case false:
return (
<div className="pl-8 gap-4">
<div className="pl-8 gap-4 flex">
<LoginButtons variant="border" className="text-xs">
Sign Up
</LoginButtons>
Expand All @@ -124,15 +125,18 @@ export default function LogoNavbar({ showOnlyLogo = false }: Props) {
return (
<div className="w-full h-[68px]">
<div
className={`${shouldPadding ? 'px-28' : 'px-4'} w-ful w-full h-[68px] mx-auto py-3 flex items-center justify-between bg-white fixed top-0`}
className={`${
shouldPadding ? 'px-4 lg:px-28' : 'px-4'
} w-ful w-full h-[68px] mx-auto py-3 flex items-center justify-between bg-white fixed top-0`}
>
<div>
<Link className="flex gap-4 center-v" href="/">
<Image src={unibuzzLogo} alt="BACPAC LOGO" width={84} height={21} className="h-full cursor-pointer" />
</Link>
</div>
<MobileViewNavbar />
{!showOnlyLogo && (
<div className="flex items-center justify-between">
<div className="items-center justify-between hidden lg:flex ">
<div className="flex gap-16 px-8">
{MENU_LIST.map((menu, index) => {
if (menu.name === 'UPGRADE') {
Expand Down
Loading
Loading