From aba081a7cab14bf2667dc32f4c8c9fac95333fd3 Mon Sep 17 00:00:00 2001
From: DEV <121149738+Devmoni@users.noreply.github.com>
Date: Wed, 22 Jan 2025 02:20:52 +0530
Subject: [PATCH] Update About Section UI and Fix Google Summer of Code Link
 (#643)

- Made minor UI adjustments to improve the design of the About section.
- Replaced the existing Google Summer of Code link with the direct GitHub link to eliminate the unnecessary redirection.
---
 about-us.html  | 63 +++++++++++++++++++++++++++++++++------------
 css/custom.css | 70 ++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 116 insertions(+), 17 deletions(-)

diff --git a/about-us.html b/about-us.html
index 9c65ea5a..5dbc5c5d 100755
--- a/about-us.html
+++ b/about-us.html
@@ -171,24 +171,51 @@ <h2 >Community Goals</h2>
 </section>
 
 <!-- "Projects" section -->
-<section id="testimonial">
+<section id="projects">
     <div class="container">
+        <div class="row justify-content-center">
+            <div class="col-md-8">
+                <div class="section-title text-center">
+                    <h2>Projects</h2>
+                    <p class="customParagraphStyle">Sugar Labs is working on a few <a href="https://wiki.sugarlabs.org/go/Category:Project" class="hrefCustomColor">projects</a> focused on delivering specific goals in a defined time period. Below are some of our premier projects:</p>
+                </div>
+            </div>
+        </div>
         <div class="row">
-            <div class="col-md-12" >
-                <div class="row justify-content-center">
-                    <div class="col-md-8 col-md-push-2" >
-                        <div class="section-title text-center">
-                            <h2>Projects</h2>
-                            <p class="customParagraphStyle">Sugar Labs is working on a few <a href="https://wiki.sugarlabs.org/go/Category:Project" class="hrefCustomColor">projects</a> focused on delivering specific goals in a defined time period. The "Projects" panel in the Sugar Labs wiki sidebar holds our premier projects. Please also see these project home pages:
-                            <ul>
-                                <li><a href="https://wiki.sugarlabs.org/go/Sugar_Creation_Kit" class="hrefCustomColor">Sugar Creation Kit</a></li>
-                                <li><a href="https://wiki.sugarlabs.org/go/Sugar_on_a_Stick" class="hrefCustomColor">Sugar on a Stick</a></li>
-                                <li><a href="https://wiki.sugarlabs.org/go/Math4Team" class="hrefCustomColor">Math4 Project</a></li>
-                                <li><a href="https://wiki.sugarlabs.org/go/Summer_of_Code" class="hrefCustomColor">Summer of Code</a></li>
-                            </ul>
-                            </p>  
-                        </div>
-                    </div>
+            <!-- <div class="col-sm-6 col-md-6 mb-4">
+                <div class="project-card">
+                    <h4>Sugar Creation Kit</h4>
+                    <p>A toolkit to empower users to deploy customized and interactive Sugar instances seamlessly.</p>
+                    <a href="https://wiki.sugarlabs.org/go/Sugar_Creation_Kit">
+                        <button type="button" class="btn btn-raised btn-custom">Learn More</button>
+                    </a>
+                </div>
+            </div> -->
+            <div class="col-sm-6 col-md-6 mb-4">
+                <div class="project-card">
+                    <h4>Sugar on a Stick</h4>
+                    <p>A portable version of Sugar that can run from a USB stick without installation.</p>
+                    <a href="https://www.sugarlabs.org/booting-soas/">
+                        <button type="button" class="btn btn-raised btn-custom">Learn More</button>
+                    </a>
+                </div>
+            </div>
+            <!-- <div class="col-sm-6 col-md-6 mb-4">
+                <div class="project-card">
+                    <h4>Math4 Project</h4>
+                    <p>A project aimed at improving math learning with innovative tools and activities.</p>
+                    <a href="https://wiki.sugarlabs.org/go/Math4Team">
+                        <button type="button" class="btn btn-raised btn-custom">Learn More</button>
+                    </a>
+                </div>
+            </div> -->
+            <div class="col-sm-6 col-md-6 mb-4">
+                <div class="project-card">
+                    <h4>Summer of Code</h4>
+                    <p>A program where students collaborate on open-source projects under expert mentorship.</p>
+                    <a href="https://github.com/sugarlabs/GSoC">
+                        <button type="button" class="btn btn-raised btn-custom">Learn More</button>
+                    </a>
                 </div>
             </div>
         </div> 
@@ -233,13 +260,15 @@ <h2>LOCAL LABS</h2>
                         <div class="section-title text-center">
                             <h2>Roadmap</h2>
                             <p class="customParagraphStyle">The <a href="https://wiki.sugarlabs.org/go/Sugar_Labs/Roadmap" class="hrefCustomColor">Sugar Community roadmap</a> is used to guide our community efforts:
-                            <ul>
+                            <div class="roadmap-container">
+                            <ul class="roadmap-list">
                                 <li>Mission, Vision, Values</li>
                                 <li>Distribution</li> 
                                 <li>Deployments</li>
                                 <li>Quality Assurance</li>
                                 <li>Infrastructure</li>
                             </ul>
+                            </div>
                             </p>  
                         </div>
                     </div>
diff --git a/css/custom.css b/css/custom.css
index 76c2e01e..84024010 100644
--- a/css/custom.css
+++ b/css/custom.css
@@ -358,3 +358,73 @@ ul {
   border-radius: 5px;
   transition: background-color 0.3s ease;
 }
+
+/* Specific styles for Roadmap list */
+
+.roadmap-list li {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+    font-size: 16px;
+}
+
+.roadmap-list li::before {
+    content: '';
+    width: 5px;
+    height: 5px;
+    background: #000000;
+    border-radius: 50%;
+    margin-right: 10px;
+}
+
+.roadmap-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* This is for project section in about page */
+
+#projects{
+  padding: 100px 0;
+}
+
+#projects .project-card {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 1.5rem;
+  margin: 1rem;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  background-color: #fff;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+  height: auto;
+  text-align: center; 
+}
+
+#projects .project-card h4 {
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: #333;
+}
+
+#projects .project-card p {
+  font-size: 1rem;
+  color: #666;
+  margin-bottom: 1.5rem;
+}
+
+#projects .project-card .btn-custom {
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+  border-radius: 5px;
+  transition: background-color 0.3s ease;
+}
+
+#projects .btn-custom {
+  margin-top: 1rem; 
+}
+