Vf 193 om oss mobile view

src/components/Header/Tab.tsx

@@ -4,11 +4,14 @@
 
 export const Tab = () => {
   const tabsRef = useRef<(HTMLElement | null)[]>([]);
-  const [activeTabIndex, setActiveTabIndex] = useState<number | null>(null);
   const [tabUnderlineWidth, setTabUnderlineWidth] = useState(0);
   const [tabUnderlineLeft, setTabUnderlineLeft] = useState(0);
   const navigate = useNavigate();
 
+  const [activeTabIndex, setActiveTabIndex] = useState<number>(
+    () => Number(localStorage.getItem("activeTabIndex")) || 0
+  );
+
   useEffect(() => {
     if (activeTabIndex === null) {
       return;
@@ -21,8 +24,11 @@
     };
 
     setTabPosition();
+
+    localStorage.setItem("activeTabIndex", String(activeTabIndex));
   }, [activeTabIndex]);
 
+
   return (
     <div className="flew-row relative mx-auto flex h-11 rounded-full px-0.5">
       <span
@@ -37,8 +43,8 @@
           <button
             type="button"
             key={route.name}
             ref={(el) => (tabsRef.current[index] = el)}
             className={`${isActive ? `text-black` : `hover:text-black text-neutral-700 dark:text-vektor-blue dark:hover:text-vektor-bg`} z-20 text-sm my-auto cursor-pointer select-none rounded-full px-4 text-center font-medium`}
             onClick={() => {
               setActiveTabIndex(index);
               navigate(route.path ?? "");

src/components/TextPictureCard.tsx

@@ -20,18 +20,18 @@ const TextPictureCard = ({
     <img
       src={imgPath}
       alt={alt}
-      className="flex max-h-96 rounded-lg sm:w-auto md:max-w-md"
+      className="flex max-h-96 rounded-lg sm:w-auto md:max-w-96 md:h-fit"
     />
   );
 
   return (
-    <div className={`flex ${pictureOnLeft ? 'md:flex-row-reverse' : ''} w-full gap-5 md:gap-14 justify-center flex-wrap`}>
+    <div className={`flex ${pictureOnLeft ? 'md:flex-row-reverse' : ''} justify-center md:justify-between items-center gap-5 md:gap-14 flex-wrap md:flex-nowrap`}>
       {image}
-      <div className="flex flex-col max-w-6xl gap-3 md:gap-5 m-auto">
-        <h1 className="text-center text-xl md:text-3xl font-bold text-vektor-DARKblue dark:text-text-dark">
+      <div className="flex flex-col max-w-6xl gap-3 md:gap-5">
+        <h1 className="text-center  text-xl md:text-3xl font-bold text-vektor-DARKblue dark:text-text-dark">
           {title}
         </h1>
-        <p className="max-w-lg text-md md:text-lg dark:text-text-dark">
+        <p className="md:w-full text-md md:text-lg dark:text-text-dark">
           {text}
         </p>
       </div>

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/ForForeldre/components/ForForeldre.tsx

@@ -5,7 +5,7 @@ import Divider from "@/components/Divider";
 const ForForeldre = (): JSX.Element => {
   const { title, ingress, cards, bottomText } = getContent();
   return (
-    <div className="flex flex-col items-center p-5 mt-40 mb-20 mx-auto gap-10 md:gap-40 dark:text-text-dark">
+    <div className="flex flex-col self-center items-center max-w-4xl p-5 mt-20 mb-20 gap-10 md:gap-28 dark:text-text-dark">
       <div className="flex flex-col gap-3 md:gap-5">
         <h1 className="max-w-3xl text-vektor-DARKblue text-2xl md:text-4xl text-center font-bold dark:text-text-dark">
           {title}

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/OmOss/components/Accordion.tsx

@@ -1,55 +1,58 @@
-import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import type React from "react";
-import { useRef, useState } from "react";
-
-interface AccordionProps {
-  title: React.ReactNode;
-  content: React.ReactNode;
-}
-
-const Accordion: React.FC<AccordionProps> = ({ title, content }) => {
-  const [active, setActive] = useState(false);
-  const [height, setHeight] = useState("0px");
-  const [symbol, setSymbol] = useState(faPlus);
-
-  const contentSpace = useRef(null);
-
-  function toggleAccordion() {
-    setActive(active === false);
-    // @ts-ignore
-    setHeight(active ? "0px" : `${contentSpace.current.scrollHeight}px`);
-    setSymbol(active ? faPlus : faMinus);
-    // setRotate(active ? 'transform duration-700 ease' : 'transform duration-700 ease rotate-180')
-  }
-
-  return (
-    <div className="flex flex-col w-full items-center">
-      <button
-        className={`mt-6 py-3 border-b-2 border-gray-300 dark:border-gray-600 dark:hover:bg-gray-500 box-border appearance-none cursor-pointer hover:bg-primary focus:outline-none flex items-center justify-between w-full duration-200 ${
-          active
-            ? "bg-primary dark:bg-gray-500"
-            : "bg-[#c7ecf8] dark:bg-gray-600"
-        }`}
-        onClick={toggleAccordion}
-        type="button"
-      >
-        <h2 className="md:text-xl sm:text-lg pl-6 text-left w-full dark:text-gray-300">
-          {title}
-        </h2>
-        <FontAwesomeIcon className="mr-4" icon={symbol} size="lg" />
-      </button>
-      <div
-        ref={contentSpace}
-        style={{ height: `${height}` }}
-        className="overflow-hidden duration-700 ease-in-out w-full"
-      >
-        <p className="p-3 pl-6 w-full md:text-xl sm:text-lg text-left mx-auto dark:text-gray-300">
-          {content}
-        </p>
-      </div>
-    </div>
-  );
-};
-
-export default Accordion;
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b border-vektor-DARKblue dark:border-vektor-bg border-opacity-10 ", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex ">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 text-md md:text-lg text-vektor-DARKblue items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm md:text-md transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }