refactor(major): logo bigger + jumbotron + linting in main page layout

app/(site)/page.tsx

@@ -1,13 +1,14 @@
 "use client";
 
 import { getEventCards } from '@/backend/sanity-utils';
-import Logo from '@/components/logo';
 import { EventCardType } from '@/types/EventCardType';
 import { Suspense, useState } from 'react';
 import dynamic from 'next/dynamic';
 import Spinner from '@/components/UI/Spinner';
 import Footer from '@/components/footer/footer';
 import Hero from '@/components/heroSection/hero';
+import HeaderJumbotron from '@/components/jumbotron/jumbotron';
+import Logo from '@/components/UI/logo';
 
 
 // Spinner element that has been standard 
@@ -33,24 +34,17 @@ export default async function Home() {
         <Logo />
 
         {/** Paragraph for introduction */}
-        <p className="font-sans text-xl flex justify-center mx-auto whitespace-pre-line break-words">
-          En studentorganisasjon med lidenskap for
-          entreprenørskap og bærekraftig utvikling 🚀
-        </p>
-
-        {/** Line Breaker */}
-        <hr className="w-96 h-1 mx-auto my-4 bg-gray-100 border-0 rounded md:my-10" />
+        <HeaderJumbotron />
 
         {/**Cards with info about Start Gjøvik */}
         <Hero />
 
-
         {/** Line Breaker */}
         <hr className="w-96 h-1 mx-auto my-4 bg-gray-100 border-0 rounded md:my-10" />
 
         {/**List of events */}
         <div className="flex justify-center items-center">
-          <h3 className="font-sans font-bold text-2xl">Kommende Arrangementer</h3>
+          <h3 className="font-sans font-bold text-4xl px-10 sm:text-5xl">📅 Kommende Arrangementer</h3>
         </div>
 
         {/** Using Suspense and the dynamically loaded list.  */}

components/logo.tsx → components/UI/logo.tsx

@@ -9,8 +9,8 @@ export default function Logo(){
         <Image
             alt="Start Logo"
             src={"/images/startLogo.png"}
-            className="flex justify-center mx-auto py-20"
-            width={700}
+            className="flex justify-center mx-auto py-5"
+            width={900}
             height={200}
         />
     );

components/heroSection/hero.tsx

@@ -1,67 +1,67 @@
 import { useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { Item } from '@/types/Item';
+import Image from 'next/image';
 
-// List with each item and what they contain. 
-// List of type item, see types folder. 
 const items: Item[] = [
     {
         id: 1,
         subtitle: '📸 Instagram',
         title: '@startgjovik',
         content: '700+ følgere',
         color: 'bg-blue-500',
-        description: 'Følg oss på instagram, @startgjovik ! \n\n Der legger vi ut mer innlegg fra konkurranser og diverse annet! \n\n Det er den SoMe kanalen vi er mest aktiv i!',
+        description: 'Følg oss på Instagram, @startgjovik! Der legger vi ut flere innlegg fra konkurranser og annet spennende. Det er den sosiale mediekanalen vi er mest aktive på!',
         figure: '📷',
+        link: 'https://www.instagram.com/startgjovik/',
+        buttonText: 'Besøk Instagram'
     },
     {
         id: 2,
         subtitle: '👥 Organisasjonen',
         title: 'Start Gjøvik',
         content: '20 medlemmer',
         color: 'bg-green-500',
-        description: 'Start Gjøvik er et lokallag under Start Norge, \n\n som fremmer entreprenørskap blant studentene. \n Vi jobber for å gi muligheter for studentene her i Gjøvik, og hjelpe dei komme i gang med sin ide.',
+        description: 'Start Gjøvik er et lokallag under Start Norge som jobber med å fremme entreprenørskap blant studenter. Vi ønsker å gi muligheter for studenter her i Gjøvik og hjelpe dem med å realisere sine ideer.',
         figure: '🤝',
+        link: 'https://www.startnorge.no/',
+        buttonText: 'Les mer om Start Norge her'
     },
     {
         id: 3,
         subtitle: '🌍 Bærekraft',
-        title: 'FNs Mål',
+        title: 'FNs Bærekraftsmål',
         content: 'For en bedre fremtid',
         color: 'bg-yellow-500',
-        description: 'Vi i Start Gjøvik støtter FNs Bærekraft Mål.\n\n FNs mål for bærekraftig utvikling er "De forente nasjoners" felles arbeidsplan for å utrydde fattigdom, bekjempe ulikhet og stoppe klimaendringene innen 2030. De består av 17 hovedmål og 169 delmål. ',
+        description: 'Vi i Start Gjøvik støtter FNs bærekraftsmål. FNs mål for bærekraftig utvikling er en felles arbeidsplan for å utrydde fattigdom, bekjempe ulikhet og stoppe klimaendringene innen 2030. De består av 17 hovedmål og 169 delmål.',
         figure: '🌱',
+        link: 'https://www.fn.no/fns-baerekraftsmaal',
+        buttonText: 'Les mer'
     },
 ];
 
-
-// Hero section component 
 export default function Hero() {
-
-    // Use State for the selected item to showcase using framer motion.
     const [selectedId, setSelectedId] = useState<number | null>(null);
 
-    // Function for changing the item selected on click.
     const handleCardClick = (itemId: number) => {
         setSelectedId(selectedId === itemId ? null : itemId);
     };
-    
+
     return (
         <div className="flex flex-wrap justify-center">
             {items.map(item => (
                 <motion.div
                     key={item.id}
                     layoutId={`item-${item.id}`}
                     onClick={() => handleCardClick(item.id)}
-                    className={`flex flex-col items-center justify-center p-6 m-4 rounded-lg cursor-pointer shadow-lg w-64 h-64 ${item.color}`}
+                    className={`flex flex-col items-center justify-center p-6 m-4 rounded-lg cursor-pointer shadow-lg w-72 h-72 ${item.color}`}
                     whileHover={{ scale: 1.05 }}
                     whileTap={{ scale: 0.95 }}
                     initial={{ opacity: 0 }}
                     animate={{ opacity: 1 }}
                     exit={{ opacity: 0 }}
                     transition={{ duration: 0.3 }}
                 >
-                    <motion.h5 className="text-gray-100 text-2xl">{item.subtitle}</motion.h5>
+                    <motion.h5 className="text-gray-100 text-xl">{item.subtitle}</motion.h5>
                     <motion.h2 className="text-white text-3xl font-bold mt-2">{item.title}</motion.h2>
                     <p className="text-gray-200 mt-4">{item.content}</p>
                 </motion.div>
@@ -96,6 +96,28 @@ export default function Hero() {
                                     <span className="text-2xl mr-2">{items[selectedId - 1].figure}</span>
                                     <span className="text-gray-500">{items[selectedId - 1].figure}</span>
                                 </div>
+                                <a
+                                    href={items[selectedId - 1].link}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    className="mt-6 px-4 py-2 text-white bg-purple-500 rounded-lg hover:bg-purple-600 flex items-center"
+                                >
+                                    <svg
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        className="h-5 w-5 mr-2"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        strokeWidth="2"
+                                        strokeLinecap="round"
+                                        strokeLinejoin="round"
+                                    >
+                                        <path d="M5 12h14" />
+                                        <path d="M12 5l7 7-7 7" />
+                                    </svg>
+                                    {items[selectedId - 1].buttonText}
+                                </a>
+
                                 <motion.button
                                     onClick={() => handleCardClick(selectedId)}
                                     className="mt-6 px-4 py-2 text-white bg-blue-500 rounded-lg hover:bg-blue-600 flex items-center"
@@ -112,7 +134,7 @@ export default function Hero() {
                                             clipRule="evenodd"
                                         />
                                     </svg>
-                                    Close
+                                    Lukk
                                 </motion.button>
                             </div>
                         </motion.div>

components/jumbotron/jumbotron.tsx

@@ -0,0 +1,21 @@
+export default function HeaderJumbotron() {
+    return (
+        <section className="bg-white dark:bg-gray-900 my-10">
+            <div className="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16">
+                <h1 className="mb-4 text-4xl font-extrabold tracking-tight leading-none text-gray-900 md:text-5xl lg:text-6xl dark:text-white">Vi gir unge gründere muligheter!</h1>
+                <p className="mb-8 text-lg font-normal text-gray-500 lg:text-xl sm:px-16 lg:px-48 dark:text-gray-400">En studentorganisasjon med lidenskap for
+                    entreprenørskap og bærekraftig utvikling 🚀 <br></br> <br></br> Start Gjøvik fokuserer på å skape en kultur for innovasjon og entreprenørskap blant studenter, slik at de kan realisere sine ideer og skape verdifulle nettverk.</p>
+                <div className="flex flex-col space-y-4 sm:flex-row sm:justify-center sm:space-y-0 sm:space-x-4">
+                    <a href="#" className="inline-flex justify-center items-center py-3 px-5 text-base font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-900">
+                        Bli med
+                        <svg aria-hidden="true" className="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clipRule="evenodd"></path></svg>
+                    </a>
+                    <a href="#" className="inline-flex justify-center items-center py-3 px-5 text-base font-medium text-center text-gray-900 rounded-lg border border-gray-300 hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 dark:text-white dark:border-gray-700 dark:hover:bg-gray-700 dark:focus:ring-gray-800">
+                        Les mer
+                    </a>
+                </div>
+            </div>
+        </section>
+
+    );
+}

types/Item.ts

@@ -1,10 +1,12 @@
 // Type that represents an Item for the main cards
 export type Item = {
     id: number;
-    subtitle: string;
+    subtitle: string
     title: string;
-    content: string;
-    color: string;
-    description: string;
-    figure: string;
+    content: string
+    color: string
+    description: string
+    figure: string
+    link: string
+    buttonText: string 
 }