Vf 188 mobileview for hjem

src/index.css

@@ -28,7 +28,7 @@ body::-webkit-scrollbar-thumb {
 
 .info-background {
   background: rgb(226,244,250);
-  background: linear-gradient(0deg, transparent 0%, #223c70 20%, #223c70 80%, transparent 100%);
+  background: linear-gradient(0deg, transparent 0%, #022346 20%, #022346 80%, transparent 100%);
 }
 
 @layer base {

src/pages/public/ForSkoler/components/ForSkoler.tsx

@@ -5,69 +5,6 @@ import PageTitleCard from "./PageTitleCard";
 const ForSkoler = (): JSX.Element => {
   return (
     <div className="mx-auto p-4">
-      <PageTitleCard
-        title="Vektorassistenter i skolen"
-        text={`Vektorprogrammet er en frivillig organisasjon 
-        som tilbyr ungdomsskoler i Norge hjelpelærere 
-        i matematikktimene. Her kan du enkelt søke om 
-        å få studenter til å hjelpe og motivere elevene 
-        i dine timer.`}
-        imgPath={new URL("https://vektorprogrammet.no/images/teacher2.png")}
-        alt="Lærer med assistenter"
-        link={{
-          text: "Send inn søknad her >",
-          path: new URL("https://example.com"),
-        }}
-      />
-      <div className="max-w-4xl mx-auto block">
-        <PageParagraph
-          key="Vektorassistenter i matteundervisning"
-          title="Vektorassistenter i matteundervisning"
-          text={[
-            `Vektorprogrammet er Norges største organisasjon 
-        som arbeider for å øke interessen for matematikk 
-        og realfag blant elever i grunnskolen. Vi er en 
-        studentorganisasjon som sender ut dyktige og 
-        motiverte studenter til ungdomsskoler i norge.`,
-            `Studentene fungerer som lærerens assistenter 
-        og kan dermed bidra til at elevene raskere får 
-        hjelp i timen, og at undervisningen blir mer 
-        tilpasset de ulike elevgruppene. Vi har erfart 
-        at lærerne ofte har mye å gjøre i timene, og 
-        ofte ikke rekker å hjelpe alle elevene som står 
-        fast. Derfor er vi overbevist om at to assistenter 
-        kan forhindre mye hodebry for både lærere og elever. 
-        Hvert år gjennomfører vi evalueringsundersøkelser, 
-        og i gjennomsnitt sier over 95% av lærerne at de 
-        er fornøyde med prosjektet og ønsker å delta videre.`,
-            `Alle assistentene har vært gjennom en intervjuprossess 
-        som gjør oss sikre på at de vil passe som 
-        assistentlærere og kan være gode forbilder for 
-        elevene. Dette er en unik mulighet til å få inn 
-        rollemodeller i klasserommet som kan være med å 
-        gi elevene mer motivasjon.`,
-          ]}
-        />
-        <PageParagraph
-          key="Enkelt å bruke assistenter i undervisningen"
-          title="Enkelt å bruke assistenter i undervisningen"
-          text={[
-            "Assistentene kan brukes som hjelp i undervisningen. Her er noen forslag vi har gode erfaringer med:",
-          ]}
-        >
-          <ul className="pl-4 ml-4 mb-3 list-disc dark:text-text-dark">
-            {[
-              "Hjelpe til med oppgaveløsing i klasserom",
-              "Utfordre de sterkeste elevene med vanskeligere oppgaver",
-              "Engasjere elever med matteleker, gåter og spill",
-              "Arbeid med elever på grupperom",
-            ].map((listItem) => (
-              <li key={listItem} className=" text-lg">
-                {listItem}
-              </li>
-            ))}
-          </ul>
-        </PageParagraph>
         <BorderContentCard
           title="Søk om å få assistenter til din skole"
           text={[
@@ -132,7 +69,6 @@ const ForSkoler = (): JSX.Element => {
             </p>
           </div>
         </BorderContentCard>
-      </div>
     </div>
   );
 };

src/pages/public/mainPage.tsx

@@ -3,6 +3,7 @@ import CountUp from "react-countup";
 import VisibilitySensor from 'react-visibility-sensor';
 import { Link } from "react-router-dom";
 
+import vektorLogo from "/images/vektor-logo.svg";
 import vektorForsidebilde from "/images/mainPage/vektor-forsidebilde.png";
 import Abelprisen from "/images/mainPage/sponsor/Abelprisen.png";
 import KSBergen from "/images/mainPage/sponsor/KSBergen.png";
@@ -15,9 +16,52 @@ import NTNUIV from "/images/mainPage/sponsor/NTNUIV.png";
 import Samarbeidsforum from "/images/mainPage/sponsor/SamarbeidsForum.png";
 import Matematikksenteret from "/images/mainPage/sponsor/Matematikksenteret.png";
 
+const hovedsponsor = [
+  {
+    name: "Abelprisen",
+    image: Abelprisen,
+  },
+  {
+    name: "Sparebankstiftelsen DNB",
+    image: SparebankstiftelsenDNB,
+  },  
+]
 
+const sponsorer = [
+  {
+    name: "Tekna",
+    image: Tekna,
+  },
+  {
+    name: "NTNU - Fakultet for ingeniørvitenskap",
+    image: NTNUIV,
+  },
+  {
+    name: "NTNU - Fakultet for informasjonsteknologi og elektronikk",
+    image: NTNUIE,
+  },
+  {
+    name: "Samarbeidsforum",
+    image: Samarbeidsforum,
+  },
+  {
+    name: "Universitetet i Bergen - Det matematisk-naturvitenskapelige fakultet",
+    image: UiB,
+  },
+  {
+    name: "Matematikksenteret",
+    image: Matematikksenteret,
+  },
+  {
+    name: "VisionTech",
+    image: VisionTech,
+  },
+  {
+    name: "Kulturstyret Bergen",
+    image: KSBergen,
+  },
+]
 interface MainPageProps {
-  // Props
   number: number;
   title: string;
   text: string;
@@ -53,25 +97,26 @@ const mainPage = (): JSX.Element => {
     <main className="flex-grow">
       {/* Use component when the rendered component needs no props */}
       {/* Getting the routes from the defined route file in pages */}
-      <div className="bg-vektor-index-blue md:flex">
-        {" "}
+      <div className="bg-vektor-index-blue md:h-[80vh] md:pt-14 md:flex">
         {/*Upper start*/}
-        <div className="w-full md:w-1/2 h-[29rem] md:h-[26rem] lg:h-[31rem] xl:h-[35rem] md:p-8 text-center">
-          <h1 className="pt-20 md:p-0 font-bold text-4xl visible md:hidden mx-auto">
-            Vektorprogrammet
-          </h1>
+        <div className="flex flex-col items-center w-full md:w-1/2 md:h-[26rem] lg:h-[31rem] xl:h-[35rem] md:p-8 text-center">
           <img
-            className="pt-10 md:pt-0 mx-auto my-auto md:ml-auto md:mr-0 h-full"
-            src={vektorForsidebilde}
+            className="md:hidden pt-12 pb-14 w-2/4"
+            src={vektorLogo}
             alt="Vektorprogrammet"
           />
+          <img
+            className="p-5 pt-14 md:pt-0 mx-auto my-auto md:ml-auto md:mr-0 w-full md:w-auto h-full"
+            src={vektorForsidebilde}
+            alt="Vektorprogrammet bildet"
+          />
         </div>
-        <div className="mt-16 w-full md:w-1/2 p-10 md:mr-auto md:mt-24 md:text-left text-center">
+        <div className="w-full md:w-1/2 p-6 md:p-10 md:mr-auto md:mt-24 md:text-left text-center">
           <h1 className="hidden md:block text-4xl font-bold mb-4 dark:text-text-dark">
             Vektorprogrammet
           </h1>
-          <div className="mt-6 mb-4 flex md:block justify-center">
-            <p className="text-xl text-left w-4/5 dark:text-text-dark">
+          <div className="mb-4 mt-6 flex md:block justify-center">
+            <p className="text-md md:text-xl text-left md:w-4/5 dark:text-text-dark">
               - sender studenter til ungdomsskoler for å hjelpe til som
               lærerens assistent i matematikkundervisningen
             </p>
@@ -82,10 +127,10 @@ const mainPage = (): JSX.Element => {
         </div>
       </div>
       {/*Upper end*/}
-      <div className="info-background flex flex-row text-center w-full justify-center gap-40 pt-72 pb-72 mt-20 mb-20">
+      <div className="info-background flex flex-wrap flex-row text-center max-w-full justify-center items-center gap-24 md:gap-40 pt-72 pb-72 md:mt-20 mb-0">
         {/*Middle start*/}
         {cards.map(({ number, title, text, route }) => (
-          <div key={title} className="flex flex-col gap-5 text-vektor-bg">
+          <div key={title} className="flex flex-col max-w-96 gap-5 text-vektor-bg">
             <div>
               <VisibilitySensor partialVisibility>
                 {({ isVisible }: { isVisible: boolean }) => (
@@ -94,102 +139,41 @@ const mainPage = (): JSX.Element => {
                   </div>
                 )}
               </VisibilitySensor>
-              <p className="text-2xl">
+              <p className="text-xl md:text-2xl">
                 {title}
               </p>
             </div>
-            <p className="text-lg max-w-96">
+            <p className="text-sm max-w-80 md:text-xl md:max-w-96">
               {text}
             </p>
             <div>
-              <Link className="btn btn-accent text-secondary w-fit" to={route.pathname}>
+              <Link className="btn btn-success text-white w-fit" to={route.pathname}>
                 {route.text}
               </Link>
             </div>
           </div>
         ))}
       </div>
       {/*Middle end*/}
-      <div className="mt-32 mb-32">
-        <div className="text-center font-bold dark:text-gray-200">
-          <h1 className="text-4xl">Hovedsponsorer</h1>
-        </div>
-        <div className="flex mx-96 mt-12">
-          <div className="w-1/2 h-28">
-            <img className="h-full m-auto" 
-              src={Abelprisen} 
-              alt="Abelprisen" />
-          </div>
-          <div className="w-1/2 h-28">
-            <img
-              className="h-full m-auto"
-              src={SparebankstiftelsenDNB}
-              alt="Sparebankstiftelsen DNB"
-            />
-          </div>
-        </div>
-        <div className="text-center mt-32 font-bold dark:text-gray-200">
-          <h1 className="text-4xl">Sponsorer og samarbeidspartnere</h1>
-        </div>
-        <div className="flex mx-96 mt-12">
-          <div className="w-1/2 h-28">
-            <img className="h-full m-auto p-4" 
-              src={Tekna} 
-              alt="Tekna" />
-          </div>
-          <div className="w-1/2 h-28">
-            <img
-              className="m-auto p-4"
-              src={NTNUIV}
-              alt="NTNU - Fakultet for ingeniørvitenskap"
-            />
-          </div>
-        </div>
-        <div className="flex mx-96 mt-12">
-          <div className="w-1/2 h-28">
-            <img
-              className=" m-auto p-4"
-              src={NTNUIE}
-              alt="NTNU - Fakultet for informasjonsteknologi og elektronikk"
-            />
-          </div>
-          <div className="w-1/2 h-28">
-            <img
-              className="h-full m-auto p-4"
-              src={Samarbeidsforum}
-              alt="Samarbeidsforum"
-            />
-          </div>
-        </div>
-        <div className="flex mx-96 mt-12">
-          <div className="w-1/2 h-28">
-            <img
-              className="h-full m-auto p-4"
-              src={UiB}
-              alt="Universitetet i Bergen - Det matematisk-naturvitenskapelige fakultet"
-            />
-          </div>
-          <div className="w-1/2 h-28">
-            <img
-              className="h-full m-auto p-4"
-              src={Matematikksenteret}
-              alt="Matematikksenteret"
-            />
-          </div>
-        </div>
-        <div className="flex mx-96 mt-12">
-          <div className="w-1/2 h-28">
-            <img 
-              className="h-full m-auto p-4" 
-              src={VisionTech} 
-              alt="VisionTech" />
+      <div className="flex justify-center">
+        <div className="flex flex-col max-w-4xl md:gap-32">
+          <div className="flex flex-row flex-wrap justify-around md:justify-between">
+            {hovedsponsor.map((sponsor) => (
+              <div className="flex w-72 h-72 md:w-96 md:h-96 items-center">
+                <img className="w-auto h-auto" 
+                  src={sponsor.image} 
+                  alt={sponsor.name} />
+              </div>
+            ))}
           </div>
-          <div className="w-1/2 h-28">
-            <img
-              className="h-full m-auto p-4"
-              src={KSBergen}
-              alt="Kulturstyret Bergen"
-            />
+          <div className="flex flex-row flex-wrap justify-around md:justify-between">
+            {sponsorer.map((sponsor) => (
+              <div className="flex w-36 h-36 md:w-64 md:h-64 items-center">
+                <img className="w-auto h-auto" 
+                  src={sponsor.image} 
+                  alt={sponsor.name} />
+              </div>
+            ))}
           </div>
         </div>
       </div>

src/pages/public/routes.tsx

@@ -12,13 +12,13 @@ import Utlegg from "./User/components/Utlegg";
 // The route with the corresponding component to render in the route
 const routes: AppRoute[] = [
   { path: "", element: <MainPage />, name: "Hjem"},
+  { path: "/om-oss", element: <OmOss />, name: "Om oss" },
   { path: "/assistenter", element: <Assistenter />, name: "Assistenter" },
-  { path: "/staging", element: <ServerOverview />, name: "Staging" },
+  { path: "/team", name: "Team", children: teamRoutes },
   { path: "/foreldre", element: <ForForeldre />, name: "Foreldre" },
   { path: "/skoler", element: <ForSkoler />, name: "Skoler" },
   { path: "/kontakt", element: <Kontakt />, name: "Kontakt" },
-  { path: "/om-oss", element: <OmOss />, name: "Om oss" },
-  { path: "/team", name: "Team", children: teamRoutes },
+  // { path: "/staging", element: <ServerOverview />, name: "Staging" },
 ];
 
 export default routes;