Merge pull request #94 from BacPacNet/v2-landing-page

added footer

src/app/(withLayout)/layout.tsx

@@ -1,6 +1,47 @@
+import UpcomingEvent from '@/components/molecules/UpcomingEvent'
 import LeftNavbar from '@/components/organisms/LeftNavbar'
+import Recommendations from '@/components/Timeline/Recommendations'
 import React, { useState } from 'react'
 
+const recommendations = [
+  {
+    name: 'Roberta Green',
+    university: 'Nagoya University',
+    affilation: '2nd Yr. Undergraduate, Psychology',
+    avatar: '/timeline/avatar.png',
+  },
+  {
+    name: 'Roberta Green',
+    university: 'Nagoya University',
+    affilation: '2nd Yr. Undergraduate, Psychology',
+    avatar: '/timeline/avatar2.png',
+  },
+  {
+    name: 'Roberta Green',
+    university: 'Nagoya University',
+    affilation: '2nd Yr. Undergraduate, Psychology',
+    avatar: '/timeline/avatar.png',
+  },
+  {
+    name: 'Roberta Green',
+    university: 'Nagoya University',
+    affilation: '2nd Yr. Undergraduate, Psychology',
+    avatar: '/timeline/avatar2.png',
+  },
+  {
+    name: 'Roberta Green',
+    university: 'Nagoya University',
+    affilation: '2nd Yr. Undergraduate, Psychology',
+    avatar: '/timeline/avatar.png',
+  },
+  {
+    name: 'Roberta Green',
+    university: 'Nagoya University',
+    affilation: '2nd Yr. Undergraduate, Psychology',
+    avatar: '/timeline/avatar2.png',
+  },
+]
+
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <div className="flex gap-8 bg-surface-primary-50">
@@ -10,7 +51,10 @@ export default function Layout({ children }: { children: React.ReactNode }) {
         </div>
       </div>
       <div className="w-3/5">{children}</div>
-      <div className="w-1/5  shadow-2xl bg-white hidden lg:block mt-1"></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} />
+      </div>
     </div>
   )
 }

src/app/page.tsx

@@ -10,6 +10,7 @@ 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'
 
 export default function LandingPage() {
   const contentVariants = {
@@ -175,16 +176,21 @@ export default function LandingPage() {
           <p className="text-primary-500 text-xs lg:text-sm">BECOME A PART OF YOUR UNIVERSITY</p>
         </div>
         <div>
-          <Title>Create an Account to Get Started</Title>
+          <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>Search universities worldwide and become part of their online communities </p>
+          <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>
+      <Footer />
     </div>
   )
 }

src/components/Footer/Footer.tsx

@@ -3,10 +3,11 @@ import './Footer.css'
 
 import Image from 'next/image'
 import React from 'react'
-import facebook from '@assets/facebook.svg'
-import insta from '@assets/instagram.svg'
-import linkedin from '@assets/linkedin.svg'
-import x from '@assets/X.svg'
+//import facebook from '@assets/facebook.svg'
+//import insta from '@assets/instagram.svg'
+//import linkedin from '@assets/linkedin.svg'
+//import x from '@assets/X.svg'
+import unibuzzLogo from '@assets/unibuzz_logo.svg'
 
 const Footer: React.FC = () => {
   const handleRedirect = (platform: number) => {
@@ -36,19 +37,24 @@ const Footer: React.FC = () => {
     window.open(url, '_blank')
   }
   return (
-    <div className="w-[90%] mx-auto relative flex flex-col center-v py-2 lg:pt-8 ">
+    <div className="w-[90%] mx-auto relative flex flex-col center-v py-2 lg:pt-8 mt-20">
       <div className="w-full text-gray-dark text-sm lg:text-lg">
-        <div className="flex justify-between md:justify-start gap-2 md:gap-16 text-sm">
+        {/*<div className="flex justify-between md:justify-start gap-2 md:gap-16 text-sm">
           <a href="#">Privacy Policy</a>
           <a href="#">Terms and Conditions</a>
           <a href="#">Contact Us</a>
-        </div>
+        </div>*/}
         <div className="flex flex-col-reverse md:flex-row items-center justify-center md:justify-between my-4 gap-4 text-sm">
-          <div>
-            <p>Copyright © 2024, Unibuzz Networks</p>
+          <div className="flex gap-4 items-start">
+            <Image width={84} height={21} src={unibuzzLogo} alt="logo" />
+            <p className="text-neutral-500 text-xs font-normal">Copyright © 2024, Unibuzz Networks</p>
           </div>
-          <div className="flex gap-4">
-            <div className="icons instagram center" onClick={() => handleRedirect(1)}>
+          <div className="flex gap-4 text-neutral-500 text-xs font-normal">
+            <a href="#">Privacy Policy</a>
+            <a href="#">Terms and Conditions</a>
+            <a href="#">Contact Us</a>
+            <a href="#">Business Service</a>
+            {/*<div className="icons instagram center" onClick={() => handleRedirect(1)}>
               <Image src={facebook} className="icon" alt="facebook" />
             </div>
             <div className="icons facebook center" onClick={() => handleRedirect(2)}>
@@ -59,7 +65,7 @@ const Footer: React.FC = () => {
             </div>
             <div className="icons discord center" onClick={() => handleRedirect(4)}>
               <Image src={insta} className="icon" alt="instagram" />
-            </div>
+            </div>*/}
           </div>
         </div>
       </div>

src/components/Timeline/Recommendations.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable @next/next/no-img-element */
 import { cn } from '@/lib/utils'
 import React from 'react'
+import LoginButtons from '../atoms/LoginButtons'
 
 interface User {
   name: string
@@ -15,9 +16,9 @@ interface Props {
   itemStyle?: string
 }
 
-const UserCard = ({ user, buttonStyle, itemStyle }: { user: User; buttonStyle?: string; itemStyle?: string }) => {
+const UserCard = ({ user }: { user: User }) => {
   return (
-    <div className={cn('flex justify-between sm:pr-7 lg:pr-0', itemStyle)}>
+    <div className="flex justify-between items-center">
       <div className="flex gap-2 items-center">
         <img src={user.avatar} alt={`${user.name}'s avatar`} width={14} height={14} className="rounded-full w-10 h-10" />
         <div>
@@ -26,25 +27,25 @@ const UserCard = ({ user, buttonStyle, itemStyle }: { user: User; buttonStyle?:
           <p className="text-[10px] text-gray-1">{user.affilation}</p>
         </div>
       </div>
-      <button
-        className={cn(
-          'bg-primary-50 text-primary text-center align-middle font-semibold text-xs px-3 rounded-xl hidden sm:block lg:hidden my-2',
-          buttonStyle
-        )}
-      >
-        Visit Profile
-      </button>
+      <div>
+        {/*<LoginButtons variant="border" size="extra_small">
+          Following
+        </LoginButtons>*/}
+        <LoginButtons variant="shade" size="extra_small">
+          Follow
+        </LoginButtons>
+      </div>
     </div>
   )
 }
 
 const Recommendations: React.FC<Props> = ({ people, userItemButtonStyle, containerStyle, itemStyle }) => {
   return (
-    <div className={cn('bg-white border-2 border-gray-dark rounded-lg py-5 px-7 shadow-md', containerStyle)}>
-      <h1 className="text-sm font-semibold mb-4">Recommendations</h1>
+    <div className="py-4">
+      <p className="text-neutral-700 text-xs font-semibold py-4">Recommendations</p>
       <div className="flex flex-col gap-6">
         {people.map((user) => (
-          <UserCard user={user} key={`${user?.avatar}${user?.name}`} buttonStyle={userItemButtonStyle} itemStyle={itemStyle} />
+          <UserCard user={user} key={`${user?.avatar}${user?.name}`} />
         ))}
       </div>
     </div>

src/components/atoms/LoginButtons/index.tsx

@@ -3,9 +3,10 @@ import React from 'react'
 interface LoginButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   className?: string
   variant?: 'primary' | 'secondary' | 'danger' | 'shade' | 'border' | 'border_primary'
+  size?: 'small' | 'medium' | 'large' | 'extra_small'
 }
 
-const LoginButtons: React.FC<LoginButtonProps> = ({ className = '', variant = 'primary', children, ...props }) => {
+const LoginButtons: React.FC<LoginButtonProps> = ({ className = '', variant = 'primary', size = 'small', children, ...props }) => {
   const variantClasses = {
     primary: 'bg-primary-500 text-white',
     secondary: 'bg-gray-500 text-white',
@@ -14,10 +15,17 @@ const LoginButtons: React.FC<LoginButtonProps> = ({ className = '', variant = 'p
     danger: 'bg-red-500 text-white',
     shade: 'bg-secondary border border-shade-button-border text-primary-500 drop-shadow-sm',
   }
+  const variantSizes = {
+    small: 'text-sm py-2 px-4 ',
+    medium: 'text-md py-2 px-4 ',
+    large: 'text-lg py-2 px-4 ',
+    extra_small: 'text-2xs py-1 px-2',
+  }
 
   const variantClass = variantClasses[variant]
+  const variantSize = variantSizes[size]
   return (
-    <button className={`${variantClass} py-2 px-4 rounded-md active:scale-95 transition-transform duration-150 ${className}`} {...props}>
+    <button className={`${variantClass} ${variantSize} rounded-md active:scale-95 transition-transform duration-150 ${className}`} {...props}>
       {children}
     </button>
   )

src/components/molecules/UpcomingEvent/index.tsx

@@ -0,0 +1,31 @@
+import Image from 'next/image'
+import React from 'react'
+import eventImage from '@assets/event-image.jpg'
+import format from 'date-fns/format'
+import LoginButtons from '@/components/atoms/LoginButtons'
+
+export default function UpcomingEvent({ eventDate = '29/07/2024' }) {
+  return (
+    <div>
+      <p className="text-neutral-700 text-xs font-semibold">Upcoming Event</p>
+      <div className="pt-6 pb-4">
+        <Image src={eventImage} alt="eventImage" />
+      </div>
+      <div className="flex gap-3 items-center pb-4">
+        <div className="shadow-medium w-[50px] h-[50px] rounded-lg border-[1px] border-neutral-200 flex flex-col justify-center items-center">
+          <p className="text-neutral-400 text-xs font-extrabold">{format(new Date(2024, 1, 11), 'MMM')}</p>
+          <p className="text-primary-500 text-sm font-extrabold">{format(new Date(2024, 8, 29), 'dd')}</p>
+        </div>
+        <div>
+          <p className="text-xs font-normal text-neutral-700">TECHNO FEST 2024 Live </p>
+          <p className="text-[10px] font-normal text-neutral-700">Lorem University</p>
+        </div>
+      </div>
+      <div className="text-right">
+        <LoginButtons variant="primary" size="extra_small">
+          Check Post
+        </LoginButtons>
+      </div>
+    </div>
+  )
+}

src/utils/Provider.tsx

@@ -12,7 +12,7 @@ export const ReactQueryClientProvider = ({ children }: ReactQueryClientProviderP
       new QueryClient({
         defaultOptions: {
           queries: {
-            refetchOnWindowFocus: true,
+            refetchOnWindowFocus: false,
           },
         },
       })

tailwind.config.js

@@ -53,6 +53,7 @@ module.exports = {
                 'warning-500': '#F59E0B'
             },
             boxShadow: {
+                'medium': '0px 6px 15px -2px rgba(16, 24, 40, 0.08), 0px 6px 15px -2px rgba(16, 24, 40, 0.08);',
                 'card': '0px 6px 15px -2px rgba(16, 24, 40, 0.08)',
                 'button': '0px 1px 2px 0px rgba(16, 24, 40, 0.04), 0px 1px 2px 0px rgba(16, 24, 40, 0.04);',
                 'popper': '0px 8px 24px -3px rgba(16, 24, 40, 0.05), 0px 8px 24px -3px rgba(16, 24, 40, 0.10);'