Update first section (#110)

* Lint

* fix tweaks first saction to fit mobile

* fix import error

* feat: tweaks login button color and animates first section

* fix overflow issue first section

---------

Co-authored-by: Stian Sulebak <stianjsu@gmail.com>

application/next-frontend/pages/index.tsx

@@ -1,10 +1,8 @@
 import { Landing } from '@/Landing'
-import { Header } from '@/Landing/scenarios/Header'
 
 export default function Home() {
     return (
         <div className="h-full">
-            <Header />
             <Landing />
         </div>
     )

application/next-frontend/src/Landing/components/AddToSlackButtons.tsx

@@ -36,4 +36,17 @@ const AddToSlackButtonWhite = () => {
     )
 }
 
-export { AddToSlackButton, AddToSlackButtonWhite }
+const AddToSlackButtonWhiteRounded = () => {
+    return (
+        <button
+            className="flex w-[270px] justify-center rounded-full
+            bg-white py-8 font-workSans font-bold italic text-black hover:bg-green-secondary "
+            onClick={addToSlack}
+        >
+            <Image src={SlackLogo} width={30} alt="slack logo" />
+            <span className="my-auto ml-3 text-2xl font-bold">Add to Slack</span>
+        </button>
+    )
+}
+
+export { AddToSlackButton, AddToSlackButtonWhite, AddToSlackButtonWhiteRounded }

application/next-frontend/src/Landing/components/firstSection/madeByBlank.tsx

@@ -0,0 +1,27 @@
+import Image from 'next/image'
+import BlankTextWhite from '@/Landing/assets/blank/BlankTextWhite.svg'
+import BlankTextYellow from '@/Landing/assets/blank/BlankTextYellow.svg'
+import BlankLogoWhite from '@/Landing/assets/blank/BlankLogoWhite.svg'
+import BlankLogoYellow from '@/Landing/assets/blank/BlankLogoYellow.svg'
+
+import { useState } from 'react'
+
+const MadeByBlank = () => {
+    const [hover, setHover] = useState(false)
+
+    return (
+        <div
+            className="mb-8 flex min-h-[70px] flex-row gap-3 text-xl text-white hover:text-yellow"
+            onMouseEnter={() => setHover(true)}
+            onMouseLeave={() => setHover(false)}
+        >
+            <Image src={hover ? BlankLogoYellow : BlankLogoWhite} alt="Blank"></Image>
+            <div className="flex flex-col gap-3">
+                <span>Created by</span>
+                <Image src={hover ? BlankTextYellow : BlankTextWhite} alt="Blank"></Image>
+            </div>
+        </div>
+    )
+}
+
+export { MadeByBlank }

application/next-frontend/src/Landing/components/firstSection/quotesBubbles.tsx

@@ -0,0 +1,20 @@
+import MathildeRound from '@/Landing/assets/MathildeRound.svg'
+import AmalieRound from '@/Landing/assets/AmalieRound.svg'
+import Image from 'next/image'
+
+const QuoteBubbles = () => {
+    return (
+        <div className="flex flex-col gap-8">
+            <div className="relative flex flex-col pr-12">
+                <Image src={AmalieRound} alt="Citation pic" className="absolute -top-8 right-0 z-10 rounded-full" />
+                <span className="rounded-full bg-green-primary p-4 text-xl text-white"> Yes!!</span>
+            </div>
+            <div className="relative flex flex-col pr-12">
+                <Image src={MathildeRound} alt="Citation pic" className="absolute -top-8 right-0 z-10 rounded-full" />
+                <span className="rounded-full bg-green-primary p-4 text-xl text-white "> Woooo⭐️ </span>
+            </div>
+        </div>
+    )
+}
+
+export { QuoteBubbles }

application/next-frontend/src/Landing/index.tsx

@@ -1,3 +1,4 @@
+import { Header } from './scenarios/Header'
 import { FirstSection } from './scenarios/FirstSection'
 import { SecondSection } from './scenarios/SecondSection'
 import { ThirdSection } from './scenarios/ThirdSection'
@@ -9,7 +10,10 @@ import { Footer } from './scenarios/Footer'
 const Landing = () => {
     return (
         <>
-            <FirstSection />
+            <div className="custom-cursor">
+                <Header />
+                <FirstSection />
+            </div>
             <SecondSection />
             <ThirdSection />
             <FourthSection />

application/next-frontend/src/Landing/scenarios/FirstSection.tsx

@@ -1,18 +1,49 @@
 import Image from 'next/image'
-import Line from 'Landing/assets/Line.svg'
-import { AddToSlackButton } from '@/Landing/components/AddToSlackButtons'
+import { AddToSlackButtonWhiteRounded } from '@/Landing/components/AddToSlackButtons'
+import Mascot from '@/Landing/assets/illustrations/MascotWithFourArmsGreen.svg'
+import SpeachBubble from '@/Landing/assets/illustrations/SpeachBubble.svg'
+import { MadeByBlank } from '../components/firstSection/madeByBlank'
+import { QuoteBubbles } from '../components/firstSection/quotesBubbles'
+
+const RightSideMascot = () => {
+    return (
+        <div className="flex w-full min-w-[360px] flex-col items-center justify-center">
+            <div className="relative min-w-[24rem] max-w-[32rem]">
+                <Image src={SpeachBubble} className="w-full" alt="Speachbubble" />
+                <div className="absolute top-[10%] z-10 flex flex-col justify-center px-8 font-workSans text-green-light">
+                    <span className="text-2xl">Buongiorno!</span>
+                    <span className="text-xl">You 5 have been selected to go out to eat 🍕pizza!🍕</span>
+                </div>
+            </div>
+            <div className="relative flex min-w-[16rem] max-w-[32rem] justify-center">
+                <Image src={Mascot} alt="Mascot" className="animate-bobber px-8" />
+                <div className="absolute bottom-0 right-0">
+                    <QuoteBubbles />
+                </div>
+            </div>
+        </div>
+    )
+}
 
 const FirstSection = () => {
     return (
-        <section className="flex min-h-[50rem] flex-col items-center bg-green-light">
-            <span className="mt-12 text-center font-queensMedium text-9xl text-green-primary">
-                A slice to <i>socialise</i>
-            </span>
-            <Image height={5.5} src={Line} alt="dotted line" />
-            <span className="mb-5 mt-16 w-1/3 text-center text-3xl font-medium leading-9 text-green-tertiary">
-                Download the PizzaBot to build better work environments.
-            </span>
-            <AddToSlackButton />
+        <section className="flex min-h-[50rem] flex-col items-center justify-center gap-14 overflow-x-hidden bg-green-tertiary">
+            <div className="flex flex-row flex-wrap gap-16 lg:flex-nowrap lg:gap-8">
+                <div className="flex flex-col items-center gap-8 p-16">
+                    <span className="text-center font-queensMedium text-7xl text-green-secondary lg:text-9xl">
+                        A slice to <i>socialise</i>
+                    </span>
+                    <span className="text-center font-workSans text-2xl text-green-light lg:text-3xl">
+                        <span>The PizzaBot invites 5 random people from your slack team out to eat Pizza. </span>
+                        <span className="font-bold">Building friendships over shared love for great food {':)'}</span>
+                    </span>
+                    <AddToSlackButtonWhiteRounded />
+                </div>
+                <div className="flex w-full flex-col items-center justify-center overflow-hidden px-8">
+                    <RightSideMascot />
+                </div>
+            </div>
+            <MadeByBlank />
         </section>
     )
 }

application/next-frontend/src/Landing/scenarios/Header/index.tsx

@@ -12,7 +12,7 @@ const Header = () => {
 
     return (
         <>
-            <div className="top-0 z-50 flex h-[10vh] w-full items-center gap-4 overflow-hidden bg-green-tertiary py-4">
+            <div className="top-0 z-50 flex h-[10vh] w-full items-center gap-4 overflow-hidden bg-green-tertiary py-4 after:top-0">
                 <div className="ml-16 flex-1">
                     <Image
                         priority
@@ -23,10 +23,10 @@ const Header = () => {
                         className="hover:cursor-pointer hover:outline-dashed hover:outline-green-secondary"
                     />
                 </div>
-                <LoginButton />
+                <LoginButton className="text-green-light" />
             </div>
-            {/* This is a placeholder for the header so that the content doesn't get hidden behind the header */}
-            <div className="h-16 w-full bg-green-light"></div>
+            {/* This is a placeholder for the header so that the content doesn't get hidden behind the header
+            <div className="h-16 w-full bg-green-tertiary"></div> */}
         </>
     )
 }

application/next-frontend/src/Shared/components/LoginButton.tsx

@@ -17,7 +17,9 @@ const LoginButton = ({ className }: { className?: string }) => {
 
     return (
         <button
-            className={`mx-12 flex items-center justify-center text-base font-black text-dark ${className ?? ''}`}
+            className={`mx-12 flex items-center font-workSans text-base font-black text-dark first-letter:justify-center ${
+                className ?? ''
+            }`}
             onClick={loginRedirect}
         >
             <span>Login</span>