Creating Banner component

src/App.css

@@ -27,65 +27,6 @@
     gap: 5rem;
     padding: 3rem 100px;
 }
-.page-banner {
-    position: relative;
-}
-.page-banner-image {
-    max-width: 85%;
-    max-height: 450px;
-    border-radius: 15px;
-}
-.page-banner-content {
-    display: flex;
-    flex-direction: column;
-    position: absolute;
-    max-width: 40%;
-    gap: 15px;
-    top: 50%;
-    right: 0;
-    translate: 0 -50%;
-    padding: 2rem;
-    background: var(--white);
-    border-radius: 15px;
-    box-shadow: var(--shadow);
-}
-.page-banner-header {
-    text-transform: uppercase;
-    font-weight: 700;
-    position: relative;
-    padding-left: 0.8em;
-    &::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 4px;
-        border-radius: 999px;
-        height: 100%;
-        background: var(--main);
-    }
-}
-.page-banner-text {
-    color: var(--darkGray);
-    line-height: 1.3;
-    & u {
-        color: var(--black);
-        text-decoration: underline var(--main) 2px;
-    }
-    & b {
-        color: var(--black);
-    }
-}
-.page-banner-label {
-    background: var(--main);
-    color: var(--white);
-    padding: 0.3em 1em;
-    font-size: 0.8em;
-    width: fit-content;
-    border-radius: 999px;
-    text-transform: uppercase;
-    font-weight: 700;
-}
 .page-title {
     font-weight: 800;
     font-size: 2.5rem;
@@ -116,21 +57,6 @@
     .page {
         padding-inline: 25px;
     }
-    .page-banner {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 2rem;
-    }
-    .page-banner-image {
-        max-width: 100%;
-        max-height: 300px;
-    }
-    .page-banner-content {
-        position: relative;
-        translate: 0;
-        max-width: none;
-    }
     .page-title {
         font-size: 1.75rem;
     }

src/components/banner/banner.css

@@ -0,0 +1,77 @@
+.banner {
+    position: relative;
+}
+.banner-image {
+    max-width: 85%;
+    max-height: 450px;
+    border-radius: 15px;
+}
+.banner-content {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    max-width: 40%;
+    gap: 15px;
+    top: 50%;
+    right: 0;
+    translate: 0 -50%;
+    padding: 2rem;
+    background: var(--white);
+    border-radius: 15px;
+    box-shadow: var(--shadow);
+}
+.banner-header {
+    text-transform: uppercase;
+    font-weight: 700;
+    position: relative;
+    padding-left: 0.8em;
+    &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 4px;
+        border-radius: 999px;
+        height: 100%;
+        background: var(--main);
+    }
+}
+.banner-text {
+    color: var(--darkGray);
+    line-height: 1.3;
+    & u {
+        color: var(--black);
+        text-decoration: underline var(--main) 2px;
+    }
+    & b {
+        color: var(--black);
+    }
+}
+.banner-label {
+    background: var(--main);
+    color: var(--white);
+    padding: 0.3em 1em;
+    font-size: 0.8em;
+    width: fit-content;
+    border-radius: 999px;
+    text-transform: uppercase;
+    font-weight: 700;
+}
+
+@media screen and (max-width: 1100px) {
+    .banner {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 2rem;
+    }
+    .banner-image {
+        max-width: 100%;
+        max-height: 300px;
+    }
+    .banner-content {
+        position: relative;
+        translate: 0;
+        max-width: none;
+    }
+}

src/components/banner/banner.tsx

@@ -0,0 +1,21 @@
+import './banner.css';
+
+interface BannerProps {
+    image: { src: string, alt?: string };
+    header: string;
+    children?: React.ReactNode;
+    label?: string;
+}
+
+export const Banner: React.FC<BannerProps> = ({ image, header, children, label }) => {
+    return (
+        <div className={'banner'}>
+            <img className={'banner-image'} src={image.src} alt={image.alt} />
+            <div className={'banner-content'}>
+                <h3 className={'banner-header'}>{header}</h3>
+                <p className={'banner-text'}>{children}</p>
+                { label && <span className={'banner-label'}>{label}</span> }
+            </div>
+        </div>
+    );
+}

src/pages/home/Home.tsx

@@ -9,27 +9,20 @@ import { Carousel } from '../../components/carousel/carousel.tsx';
 import './Home.css';
 import { Team } from '../../components/team/team.tsx';
 import { Link } from 'react-router-dom';
+import { Banner } from '../../components/banner/banner.tsx';
 
 const Home: React.FC = () => {
   return (
     <>
-      <div className={'page-banner'}>
-        <img
-          className={'page-banner-image'}
-          src={'https://r2.modelec.club/coupe-2024.png'}
-          alt={'Modelec Photo'}
-        />
-        <div className={'page-banner-content'}>
-          <h3 className={'page-banner-header'}>Qui sommes-nous ?</h3>
-          <p className={'page-banner-text'}>
+      <Banner
+        image={{ src: 'https://r2.modelec.club/coupe-2024.png', alt: 'Modelec Photo' }}
+        header={'Qui sommes-nous ?'}
+        label={'Club 100% étudiant'}
+      >
             Nous sommes <u>Modelec</u>, une association étudiante de l'<u>ISEN</u> qui a pour but de promouvoir la <b>robotique</b>, l'<b>électronique</b> et le <b>modélisme</b> auprès des étudiants de notre campus grâce à l'organisation d'ateliers et d'événements.
-          </p>
-          <p className={'page-banner-text'}>
+        <br />
             Nous participons également à la coupe de <u>France de robotique</u> où en 2024, nous avons fini <u>14e</u> sur 82 pour notre <u>première participation</u>.
-          </p>
-          <span className={'page-banner-label'}>Club 100% étudiant</span>
-        </div>
-      </div>
+      </Banner>
       <SocialNetworkList
         networks={[
           { Icon: Instagram, name: 'modelec_isen', link: 'https://www.instagram.com/modelec_isen' },