Merge branch 'main' of https://github.com/RecyLife/recytech-website

index.html

@@ -40,7 +40,34 @@ <h1 class="buy-title">Lorem ipsum dolor sit amet consectetur.</h1>
                 <button class="buy-button">Acheter</button>
             </div>
         </section>
-        <section id="about" class="main-section about"></section>
+        <section id="about" class="main-section about">
+
+            <div class="about-icon-wrapper">
+                <img src="./imgs/la_feuille.png" alt="Icône RecyTech" class="about-icon">
+            </div>
+
+            <div class="about-text-content">
+                <h2 class="about-title">À propos</h2>
+                <p class="about-text">
+                    Nous sommes un groupe d'étudiants en informatique, et notre projet consiste à récupérer des pièces d'ordinateurs usagées auprès des écoles de la région, les restaurer et les revendre à prix abordables.
+                    Nous proposons également des PC complets, réassemblés et remis à neuf, avec un choix de distributions Linux adaptées à différents besoins.
+                </p>
+                <p class="about-text">
+                    L'objectif est de rendre l'informatique accessible tout en contribuant à la réduction des déchets électroniques. 
+                    Chaque machine est soigneusement vérifiée et remise en état, offrant une solution économique et durable pour les étudiants, les petites entreprises, et toute personne à la recherche d'un PC fiable à petit prix.
+                </p>
+            </div>
+
+            <div class="about-image-content">
+                <img src="./imgs/template.jpg" alt="Reconditionnement d'ordinateurs" class="about-image">
+            </div>
+
+        </section>
+
+
+
+
+
         <section id="team" class="main-section team"></section>
         <section id="contact" class="main-section contact"></section>
     </main>

styles/main.css

@@ -71,7 +71,65 @@ main {
     border: 1px solid black;
 }
 
-.about, .contact {
+.contact {
     background-color: var(--secondary-color); 
 }
 
+.about {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: calc(100vh - var(--header-height));
+    background-color: var(--secondary-color);
+    padding: 50px;
+    position: relative;
+}
+
+.about-icon-wrapper {
+    position: absolute;
+    top: 50px;
+    left: 50px;
+    transform: scale(2);
+    overflow: hidden;
+}
+
+.about-icon {
+    width: 80px;
+    height: auto;
+}
+
+.about-text-content {
+    flex: 1;
+    max-width: 50%;
+    text-align: left;
+    padding-right: 20px;
+}
+
+.about-title {
+    font-family: "Raleway-SemiBold";
+    color: var(--primary-color);
+    font-size: 40px;
+    margin-bottom: 20px;
+}
+
+.about-text {
+    font-family: "Raleway-SemiBold";
+    color: var(--primary-color);
+    font-size: 18px;
+    line-height: 1.6;
+    margin-bottom: 20px;
+}
+
+.about-image-content {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    max-width: 50%;
+}
+
+.about-image {
+    width: 100%;
+    height: auto;
+    border-radius: var(--border-radius);
+}