Skip to content

Commit

Permalink
Merge pull request #96 from BacPacNet/v2-landing-page
Browse files Browse the repository at this point in the history 
V2 landing page
  • Loading branch information
@Aamil13
Aamil13 authored Oct 7, 2024
2 parents 8b5efe5 + 00510c6 commit 5d62a17
Show file tree
Hide file tree
Showing 16 changed files with 381 additions and 244 deletions.
52 changes: 26 additions & 26 deletions next.config.js
View file
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
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
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
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
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
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
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

0 comments on commit 5d62a17

Please sign in to comment.