clean up home page (#70)

* clean up home page

* fixed splash dimentions

app/page.tsx

@@ -14,15 +14,24 @@ import { Provider } from 'react-redux';
 const HomePage = () => (
   <Provider store={store}>
     <div className="flex flex-col items-center justify-center h-full">
-      <div className="hidden md:block">
-        <Splash />
-        <ScrollDownIcon />
-      </div>
-      <h1 className="my-4 mt-10 text-2xl md:hidden">Online Fondet</h1>
-      <div id="home-text" className="w-3/4 py-20 text-lg text-justify">
-        {homeText}
+      <Splash />
+      <ScrollDownIcon />
+      <div
+        id="home-text"
+        className="w-full py-16 text-lg bg-gray-950 border-y border-[#293046]"
+      >
+        <div className="max-w-3xl m-auto px-4">
+          {homeText.map((text, index) => (
+            <p
+              key={index}
+              className="mb-4 text-lg leading-relaxed text-gray-200"
+            >
+              {text}
+            </p>
+          ))}
+        </div>
       </div>
-      {<div className="mb-20">Her kommer det straks grafer :)</div>}
+      {<div className="my-64">Her kommer det straks grafer :)</div>}
       {/* <PerformanceDisplay />
       <div className="hidden w-full mb-10 md:block">
         <div className="w-full mt-40 mb-10 text-lg text-center">

app/styret/page.tsx

@@ -14,10 +14,7 @@ const AboutPage = () => (
     <SemiTitle text="Hvem er vi?" />
     <div className="flex flex-col items-center justify-center w-full gap-6 m-auto">
       {aboutUsText.map((paragraph) => (
-        <p
-          key={paragraph}
-          className="text-left text-gray-400 md:leading-7 md:text-lg"
-        >
+        <p key={paragraph} className="text-gray-400 md:leading-7 md:text-lg">
           {paragraph}
         </p>
       ))}

components/all/Footer.tsx

@@ -25,13 +25,13 @@ const footerLinks = [
 ];
 
 const Footer = () => (
-  <footer className="px-4 py-12 text-gray-200 bg-gray-950 md:px-6 lg:px-8">
+  <footer className="px-4 py-12 text-gray-200 bg-gray-950 md:px-6 lg:px-8 border-t border-[#293046]">
     <div className="mx-auto max-w-7xl">
       <div className="flex flex-col items-center justify-between mb-8 space-y-8 md:flex-row md:space-y-0">
         <div className="flex flex-col items-center space-y-4 md:items-start">
           <h2 className="text-2xl font-bold">Onlinefondet</h2>
           <div className="flex items-center space-x-2 transition-colors hover:text-onlineyellow">
-            <Mail size={18} className="" />
+            <Mail size={18} />
             <Link href="mailto:[email protected]">
               [email protected]
             </Link>

components/all/Navbar.tsx

@@ -115,7 +115,7 @@ const MobileNavbar = () => {
         <Image
           src="bekk_white.svg"
           alt="Bekk logo"
-              // unsure if these should the right dimensions
+          // unsure if these should the right dimensions
           height={0}
           width={0}
           className="h-10 w-auto"
@@ -155,7 +155,7 @@ const DesktopNavbar = () => (
       <Image
         src="bekk_white.svg"
         alt="Bekk logo"
-              // unsure if these should the right dimensions
+        // unsure if these should the right dimensions
         height={0}
         width={0}
         className="h-10 w-auto"

components/home/Splash.tsx

@@ -6,12 +6,17 @@ const Splash = () => (
       src="/realfagsbygget.png"
       alt="Realfagsbygget"
       // unsure what the height and width should be
-      height={100000}
-      width={100000}
-      className="w-4/5 animate-fadeIn"
+      height={683}
+      width={616}
+      className="animate-fadeIn w-[200px] sm:w-[300px] xl:w-[400px]"
     />
-    <h1 className="text-[150px] tracking-wider absolute font-playfair animate-spashSlideUp w-min leading-tight [text-shadow:_1px_1px_2px_rgb(0_0_0_/_40%)]">
-      ONLINE FONDET
+    <h1 className="text-center absolute font-playfair animate-spashSlideUp leading-tight [text-shadow:_1px_1px_2px_rgb(0_0_0_/_40%)]">
+      <span className="block text-6xl sm:text-8xl xl:text-9xl tracking-wider">
+        ONLINE
+      </span>
+      <span className="block text-6xl sm:text-8xl xl:text-9xl tracking-wider">
+        FONDET
+      </span>
     </h1>
   </div>
 );

lib/content.ts

@@ -1,7 +1,9 @@
 import { TMember } from './types';
 
-export const homeText =
-  'Et fond er en kollektiv investering der flere går sammen for å plassere penger i verdipapirmarkedet. Dette kalles ofte kollektiv sparing, og man kan se for seg at et fond er en kurv med investeringer. Online har et slikt fond, noe som betyr at ulike parter investerer i Online, noe vi setter stor pris på. Under finner du en graf, som gir en oversikt over utviklingen av Onlines fond. Grafen inkluderer også en oversikt over OSEBX, som er hovedindeksen på Oslo Børs. Disse grafene kan sammenlignes for å se hvordan Onlines fond har utviklet seg i forhold til hovedindeksen på Oslo Børs.';
+export const homeText = [
+  'Et fond er en kollektiv investering der flere går sammen for å plassere penger i verdipapirmarkedet. Dette kalles ofte kollektiv sparing, og man kan se for seg at et fond er en kurv med investeringer. Online har et slikt fond, noe som betyr at ulike parter investerer i Online.',
+  'Under ser du en oversikt over utviklingen av Onlinefondet. Grafen inkluderer også en oversikt over OSEBX, som er hovedindeksen på Oslo Børs. Disse grafene kan sammenlignes for å se hvordan Onlines fond har utviklet seg i forhold til hovedindeksen.',
+];
 
 export const applicationText = [
   'Alle Onlines medlemmer kan søke Onlines fond om penger. Søknaden skal være velbegrunnet og ha som hensikt å komme flest mulig medlemmer av Online til gode. For at Fondstyre skal kunne ta en god avgjørelse trenger vi en helhetlig forståelse av hvem dere er og hva dere gjør.',