From 80a3d15d090595af72283972c9b47b2cee2c93c1 Mon Sep 17 00:00:00 2001
From: Oumeima El Isbihani
 <31712244+oumeimaelisbihani@users.noreply.github.com>
Date: Fri, 19 Apr 2024 09:49:28 +0200
Subject: [PATCH] Be the change section looks more like the webdesign (#4)

---
 src/app/page.tsx   | 20 +++++++++++---------
 tailwind.config.ts |  1 +
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 07a8d8ed2..693bb0855 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,16 +1,16 @@
 'use client';
 
+import clsx from 'clsx';
+import Image from 'next/image';
 import Link from 'next/link';
 import * as React from 'react';
-import Image from 'next/image';
 import '@/lib/env';
-import clsx from 'clsx';
-
-import IconCard from '@/components/IconCard';
-import Edito from '@/components/Edito';
 
 import '../styles/page.css';
 
+import Edito from '@/components/Edito';
+import IconCard from '@/components/IconCard';
+
 /**
  * SVGR Support
  * Caveat: No React Props Type.
@@ -169,10 +169,12 @@ const SocialSection = () => {
 
 const BeTheChangeSection = () => {
   return (
-    <div className= 'relative grid grid-cols-1 grid-rows-[repeat (3, 1fr)] list-none bg-darkblue1 text-lightblue1 px-6 pb-6 md:pb-16 lg:px-12 md:pt-32'>
-      <div className='relative pb-6 md:pb-16 z-10 mix-blend-difference'><h2 className='uppercase text-2xl md:text-6xl lg:text-7xl'>Be the change .</h2></div>
-      <div className='relative pb-6 md:pb-16 z-10 mix-blend-difference justify-self-end md:right-52 '><p className='max-w-60 md:max-w-96 md:text-xl lg:text-2xl font-secondary'>There are alternatives to salmon in our way of eating, selling, and producing.</p></div>
-      <div className='relative justify-self-center z-10'><img src='/images/saumon.jpg' alt='' className='max-w-64 md:max-w-2xl'></img></div>
+    <div className= 'relative grid grid-cols-1 grid-rows-[repeat (3, 1fr)] list-none bg-darkblue1 text-lightblue1 px-6 pb-6 md:pb-16 lg:px-12 md:pt-8 lg:pt-28 2xl:pt-[10rem]'>
+      <div className='relative pt-10 pl-10 pb-12 md:py-18 md:pl-36 md:pt-2 2xl:pt-10 z-10 mix-blend-difference'>
+        <h2 className='uppercase text-2xl md:text-6xl lg:text-7xl'>Be the change .</h2>
+        </div>
+      <div className='relative pb-6 md:pb-16 z-10 mix-blend-difference justify-self-center md:right-52 '><p className='max-w-64 md:max-w-[30rem] md:text-xl lg:text-2xl font-secondary'>There are alternatives to salmon in our way of eating, selling, and producing.</p></div>
+      <div className='relative justify-self-center z-10'><img src='/images/saumon.jpg' alt='' className='max-w-64 md:max-w-[68rem]'></img></div>
       <div className='absolute z-0'><img src='/svg/wave.svg' alt=''></img></div>
     </div>
   );
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 4ea512570..70a2b8443 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -37,6 +37,7 @@ export default {
       screens: {
         'xs': '500px',
         '2xl': '1515px',
+        '3xl': '2000px'
       },
       keyframes: {
         flicker: {