add: sustainability images and description

app/(site)/baerekraft/page.tsx

@@ -1,10 +1,12 @@
 import Footer from '@/components/footer/footer';
-import SustainabilityMain from '@/components/jumbotron/sustainabilityMain';
+import SustainabilityImageContainer from '@/components/sustainability/sustainabilityGoalsContainer';
+import SustainabilityMainText from '@/components/sustainability/sustainabilityMain';
 export default function BaerekraftPage() {
     return (
-        <div className='flex flex-col min-h-screen bg-gradient-to-tl from-gradient-end via-gradient-mid to-gradient-start'>
-            <main className='flex justify-center min-h-screen'>
-                <SustainabilityMain />
+        <div className='bg-gradient-to-tl from-gradient-end via-gradient-mid to-gradient-start'>
+            <main className='mx-auto my-0 max-w-4xl px-3  min-h-screen'>
+                <SustainabilityMainText />
+                <SustainabilityImageContainer />
             </main>
             <Footer />
         </div>

components/sustainability/sustainabilityGoal.tsx

@@ -0,0 +1,23 @@
+import Image from 'next/image';
+import Link from 'next/link';
+
+interface SustainabilityImageProps {
+    title: string;
+    description: string;
+    imageSrc: string;
+    linkUrl: string;
+}
+
+export default function SustainabilityGoal({ title, description, imageSrc, linkUrl }: SustainabilityImageProps) {
+    return (
+        <div className='flex flex-col items-center justify-center hover:scale-105 transition-transform duration-300'>
+            <Link href={linkUrl} target='_blank' rel='noopener noreferrer' aria-label={`Read more about ${title}`}>
+                <div className='relative overflow-hidden rounded-xl max-w-fit'>
+                    <Image src={imageSrc} width={280} height={280} alt={`Bilde av bærekraftsmål: ${title}`} className=' transition-opacity duration-1000' />
+                    <div className='absolute inset-0 bg-black bg-opacity-0 hover:bg-opacity-10 transition-opacity duration-1000'></div>
+                </div>
+            </Link>
+            <p className='flex-1 max-w-[280px] text-center md:text-start mx-1 overflow-x-clip text-lg'>{description}</p>
+        </div>
+    );
+}

components/sustainability/sustainabilityGoalsContainer.tsx

@@ -0,0 +1,32 @@
+import SustainabilityGoal from './sustainabilityGoal';
+
+const sustainabilityGoals = [
+    {
+        title: 'Mål 9',
+        description: 'Fremme bærekraftig industriell vekst, utvikle infrastruktur og oppmuntre til innovasjon.',
+        imageSrc: '/images/sustainability/goal9.png',
+        linkUrl: 'https://www.fn.no/om-fn/fns-baerekraftsmaal/industri-innovasjon-og-infrastruktur',
+    },
+    {
+        title: 'Mål 13',
+        description: 'Handle raskt for å bekjempe klimaendringene og deres virkninger.',
+        imageSrc: '/images/sustainability/goal13.png',
+        linkUrl: 'https://www.fn.no/om-fn/fns-baerekraftsmaal/stoppe-klimaendringene',
+    },
+    {
+        title: 'Mål 17',
+        description: 'Forbedre globale partnerskap for å støtte og nå bærekraftsmålene.',
+        imageSrc: '/images/sustainability/goal17.png',
+        linkUrl: 'https://www.fn.no/om-fn/fns-baerekraftsmaal/samarbeid-for-aa-naa-maalene',
+    },
+];
+
+export default function SustainabilityImageContainer() {
+    return (
+        <div className='grid grid-cols-[repeat(auto-fit,minmax(210px,1fr))] min-w-full gap-4 mt-10 '>
+            {sustainabilityGoals.map((goal, index) => {
+                return <SustainabilityGoal key={index} title={goal.title} linkUrl={goal.linkUrl} description={goal.description} imageSrc={goal.imageSrc} />;
+            })}
+        </div>
+    );
+}

components/jumbotron/sustainabilityMain.tsx → components/sustainability/sustainabilityMain.tsx

@@ -1,8 +1,8 @@
-export default function SustainabilityMain() {
+export default function SustainabilityMainText() {
     return (
-        <section className='w-full md:w-3/5 h-fit'>
-            <h2 className='text-7xl text-center'>Bærekraft</h2>
-            <article className='text-xl text-start px-7 md:px-0 mt-5'>
+        <section>
+            <h2 className='text-5xl md:text-7xl text-center'>Bærekraft</h2>
+            <article className='text-lg md:text-xl text-center md:text-start mt-5'>
                 <p>
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce fermentum magna erat, at accumsan est finibus quis. Fusce dapibus viverra
                     arcu, vel mollis purus commodo nec. Phasellus nulla nulla, accumsan ac massa quis, tempor sollicitudin elit. Suspendisse facilisis risus