Merge pull request #327 from IT-Start-Gjovik/herothing

fixed home/front page

app/(site)/page.tsx

@@ -3,20 +3,21 @@
 import { getEventCards } from '@/backend/sanity-utils';
 import Logo from '@/components/UI/logo';
 import NoEvents from '@/components/UI/noEventsFound';
+import EventSection from '@/components/eventSection/eventSection';
 import EventCardList from '@/components/events/eventCardList';
 import Footer from '@/components/footer/footer';
+import FrontPage from '@/components/frontPage/frontPage';
 import Header from '@/components/header/page';
 import Hero from '@/components/heroSection/hero';
 import HeaderJumbotron from '@/components/jumbotron/jumbotron';
 import LoadingPage from '@/components/loadingPage/loadingPage';
 import MiddleSection from '@/components/middleSection/middleSection';
+import SustainabilitySection from '@/components/sustainabilitySection/sustainabilitySection';
 import { EventCardType } from '@/types/EventCardType';
 import { useRouter } from 'next/navigation';
 import { NextResponse } from 'next/server';
 import { useEffect, useState } from 'react';
 import ErrorPage from './feilside/page';
-import EventSection from '@/components/eventSection/eventSection';
-import SustainabilitySection from '@/components/sustainabilitySection/sustainabilitySection';
 
 export default function Home() {
     const [events, setEvents] = useState<EventCardType[]>();
@@ -43,15 +44,8 @@ export default function Home() {
             {/** Header */}
             <Header />
             <main className='min-h-screen'>
-                <Logo />
-                {/** Paragraph for introduction */}
-                <HeaderJumbotron />
-                {/**Cards with info about Start Gjøvik */}
-                <Hero />
-                {/** Line Breaker */}
-                <hr className='w-4/5 h-1 mx-auto my-20 bg-gray-100 border-0 rounded md:my-10' />
-
-                {/** Events */}
+                <FrontPage />
+                {/**List of events */}
                 <EventSection events={events}></EventSection>
 
                 {/** Middle Section */}

components/UI/logo.tsx

@@ -12,8 +12,10 @@ export default function Logo({ className }: LogoProps) {
         <Image
             alt='Start Logo'
             src={'/images/startLogo.png'}
-            className={`flex justify-center mx-auto py-5 pt-16 ${className ? className : ' '}`}
-            width={900}
+            className={`flex justify-center mx-auto py-5 ${
+                className ? className : ' '
+            }`}
+            width={600}
             height={200}
         />
     );

components/frontPage/frontPage.tsx

@@ -0,0 +1,50 @@
+import Logo from '@/components/UI/logo';
+import Button from '@/components/Button/button';
+
+export default function FrontPage() {
+    return (
+        <div
+            className='flex flex-col items-center bg-cover bg-center relative'
+            style={{
+                backgroundImage: `url('/images/start_casebreaker.png')`,
+                height: '100vh',
+            }}>
+            <div className='flex flex-col items-center justify-center pt-40 md:pt-60 px-10'>
+                <h2 className='font-bold text-[32px] md:text-[52px] text-center'>
+                    VELKOMMEN TIL
+                </h2>
+                <div className='flex justify-center md:mb-8'>
+                    <Logo />
+                </div>
+            </div>
+
+            <div
+                className='w-full absolute bottom-0'
+                style={{
+                    height: '35%',
+                }}>
+                <div
+                    className='bg-[#132D4E] text-center w-full absolute overflow-hidden opacity-50'
+                    style={{
+                        height: '100%',
+                        clipPath: 'ellipse(70% 100% at 50% 100%)',
+                    }}></div>
+
+                <div
+                    className='bg-[#132D4E] text-center w-full flex flex-col justify-end items-center relative overflow-hidden'
+                    style={{
+                        height: '100%',
+                        clipPath: 'ellipse(70% 90% at 50% 100%)',
+                    }}>
+                    <div className='flex flex-col items-center justify-center pb-8 md:pb-26 md:mb-8 lg:pb-28'>
+                        <p className='text-[18px] md:text-[28px]'>
+                            En studentorganisasjon med lidenskap for entreprenørskap
+                            og bærekraftig utvikling
+                        </p>
+                        <Button text='LES MER OM OSS' link='/om-oss' />
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}