Fixed colors and stuff in about page (especially for light mode)

1 files changed, 285 insertions, 129 deletions

diff --git a/src/pages/about.astro b/src/pages/about.astro
index 35cfe8b..79061b2 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -1,184 +1,340 @@
 ---
 import Breadcrumbs from '@/components/Breadcrumbs.astro'
 import PageHead from '@/components/PageHead.astro'
-import ProjectCard from '@/components/ProjectCard.astro'
 import Layout from '@/layouts/Layout.astro'
-import { getAllProjects } from '@/lib/data-utils'
-
-const projects = await getAllProjects()
 ---
 
 <Layout class="max-w-3xl">
   <PageHead slot="head" title="About" />
   <Breadcrumbs items={[{ label: 'About', icon: 'lucide:info' }]} />
-  <div class="max-w-4xl mx-auto">
-    <section class="pt-24 pb-20 px-6">
-    <div class="max-w-6xl mx-auto text-center hero-content">
-      <h1 class="hidden h-full py-4 font-mono leading-none font-medium italic md:block md:text-7xl">
-        foss<span class="text-primary">cet</span>
-      </h1>
-      <p class="text-xl md:text-2xl text-slate-300 max-w-3xl mx-auto mb-12 leading-relaxed text-grey">
-        Free & Open Source revolutionaries at CET - Building software freedom, one commit at a time.
-      </p>
-    </div>
-  </section>
-
-  <!-- Stats -->
-  <section class="py-20 px-6 relative overflow-hidden">
-    <div class="absolute inset-0 bg-gradient-to-r from-emerald-500/5 to-cyan-500/5"></div>
-    <div class="max-w-6xl mx-auto relative">
-      <div class="grid md:grid-cols-4 gap-8 text-center">
-        <div class="fade-in" style="transition-delay: 100ms" style="transition: all 0.1s ease; transform: scale(1);" onmouseover="this.style.transform='scale(1.09)'" onmouseout="this.style.transform='scale(1)'" onclick="window.location.href = '/members'">
-          <div class="stat-number text-emerald-400 font-mono" data-target="50">0</div>
-          <div class="text-slate-400 font-mono uppercase tracking-wider text-sm mt-2">Active Members</div>
-        </div>
-        <div class="fade-in" style="transition-delay: 100ms" style="transition: all 0.1s ease; transform: scale(1);" onmouseover="this.style.transform='scale(1.09)'" onmouseout="this.style.transform='scale(1)'" onclick="window.location.href = '/blog'">
-          <div class="stat-number text-emerald-400 font-mono" data-target="25">0</div>
-          <div class="text-slate-400 font-mono uppercase tracking-wider text-sm mt-2">Projects Live</div>
-        </div>
-        <div class="fade-in" style="transition-delay: 100ms" style="transition: all 0.1s ease; transform: scale(1);" onmouseover="this.style.transform='scale(1.09)'" onmouseout="this.style.transform='scale(1)'" onclick="window.location.href = '/blog'">
-          <div class="stat-number text-emerald-400 font-mono" data-target="150">0</div>
-          <div class="text-slate-400 font-mono uppercase tracking-wider text-sm mt-2">Commits Pushed</div>
-        </div>
-        <div class="fade-in" style="transition-delay: 100ms" style="transition: all 0.1s ease; transform: scale(1);" onmouseover="this.style.transform='scale(1.09)'" onmouseout="this.style.transform='scale(1)'" onclick="window.location.href = '/events'">
-          <div class="stat-number text-emerald-400 font-mono" data-target="8">0</div>
-          <div class="text-slate-400 font-mono uppercase tracking-wider text-sm mt-2">Events Hosted</div>
-        </div>
+  <div class="mx-auto max-w-4xl">
+    <section class="px-6 pt-24 pb-20">
+      <div class="hero-content mx-auto max-w-6xl text-center">
+        <h1
+          class="hidden h-full py-4 font-mono leading-none font-medium italic md:block md:text-7xl"
+        >
+          foss<span class="text-primary">cet</span>
+        </h1>
+        <p
+          class="mx-auto mb-12 max-w-3xl text-xl leading-relaxed text-slate-500 md:text-2xl dark:text-slate-300"
+        >
+          Free & Open Source revolutionaries at CET - Building software freedom,
+          one commit at a time.
+        </p>
       </div>
-    </div>
-  </section>
+    </section>
 
-  <!-- Mission -->
-  <section class="py-20 px-6">
-    <div class="max-w-4xl mx-auto">
-      <div class="text-center mb-20 fade-in">
-        <h2 class="text-4xl md:text-5xl font-black bg-gradient-to-r from-slate-200 to-slate-400 bg-clip-text mb-6">Our Mission</h2>
-        <div class="w-24 h-1 bg-gradient-to-r from-emerald-400 to-cyan-400 mx-auto rounded-full"></div>
+    <!-- Stats -->
+    <section class="relative overflow-hidden px-6 py-20">
+      <div
+        class="absolute inset-0 bg-gradient-to-r from-emerald-500/5 to-cyan-500/5"
+      >
       </div>
-      
-      <div class="grid items-center">
-        <div class="space-y-6 fade-in" style="transition-delay: 200ms">
-          <h3 class="text-3xl font-bold text-white mb-6"><span class="text-primary">F</span>ree and <span class="text-primary">O</span>pen <span class="text-primary">S</span>ource <span class="text-primary">S</span>oftware</h3>
-          <p class="text-lg text-slate-300 leading-relaxed">
-            We're bringing FOSS to CET students by replacing proprietary tools with Linux, GitHub workflows, 
-            and community-driven development. From kernel hacking to UI/UX contributions, we're building 
-            the next generation of open source maintainers.
-          </p>
+      <div class="relative mx-auto max-w-6xl">
+        <div class="grid gap-8 text-center md:grid-cols-4">
+          <div
+            class="fade-in"
+            style="transition-delay: 100ms"
+            style="transition: all 0.1s ease; transform: scale(1);"
+            onmouseover="this.style.transform='scale(1.09)'"
+            onmouseout="this.style.transform='scale(1)'"
+            onclick="window.location.href = '/members'"
+          >
+            <div
+              class="stat-number font-mono text-emerald-400"
+              data-target="50"
+            >
+              0
+            </div>
+            <div
+              class="mt-2 font-mono text-sm tracking-wider text-slate-500 uppercase dark:text-slate-400"
+            >
+              Active Members
+            </div>
+          </div>
+          <div
+            class="fade-in"
+            style="transition-delay: 100ms"
+            style="transition: all 0.1s ease; transform: scale(1);"
+            onmouseover="this.style.transform='scale(1.09)'"
+            onmouseout="this.style.transform='scale(1)'"
+            onclick="window.location.href = '/blog'"
+          >
+            <div
+              class="stat-number font-mono text-emerald-400"
+              data-target="25"
+            >
+              0
+            </div>
+            <div
+              class="mt-2 font-mono text-sm tracking-wider text-slate-500 uppercase dark:text-slate-400"
+            >
+              Projects Live
+            </div>
+          </div>
+          <div
+            class="fade-in"
+            style="transition-delay: 100ms"
+            style="transition: all 0.1s ease; transform: scale(1);"
+            onmouseover="this.style.transform='scale(1.09)'"
+            onmouseout="this.style.transform='scale(1)'"
+            onclick="window.location.href = '/blog'"
+          >
+            <div
+              class="stat-number font-mono text-emerald-400"
+              data-target="150"
+            >
+              0
+            </div>
+            <div
+              class="mt-2 font-mono text-sm tracking-wider text-slate-500 uppercase dark:text-slate-400"
+            >
+              Commits Pushed
+            </div>
           </div>
-          <br>
-          <div class="space-y-6 fade-in" style="transition-delay: 200ms">
-          <h3 class="text-3xl font-bold text-white mb-6">Student Awareness and Software Responsibility</h3>
-          <p class="text-lg text-slate-300 leading-relaxed">
-            While addressing the FOSS movement, we also want to raise student awareness and improve anti-piracy and unresponsible software usage tendecies by providing free and open-source alternates.
-          </p>
+          <div
+            class="fade-in"
+            style="transition-delay: 100ms"
+            style="transition: all 0.1s ease; transform: scale(1);"
+            onmouseover="this.style.transform='scale(1.09)'"
+            onmouseout="this.style.transform='scale(1)'"
+            onclick="window.location.href = '/events'"
+          >
+            <div class="stat-number font-mono text-emerald-400" data-target="8">
+              0
+            </div>
+            <div
+              class="mt-2 font-mono text-sm tracking-wider text-slate-500 uppercase dark:text-slate-400"
+            >
+              Events Hosted
+            </div>
           </div>
         </div>
       </div>
-  </section>
+    </section>
 
+    <!-- Mission -->
+    <section class="px-6 py-20">
+      <div class="mx-auto max-w-4xl">
+        <div class="fade-in mb-20 text-center">
+          <h2
+            class="mb-6 bg-gradient-to-r from-slate-200 to-slate-400 bg-clip-text text-4xl font-black md:text-5xl"
+          >
+            Our Mission
+          </h2>
+          <div
+            class="mx-auto h-1 w-24 rounded-full bg-gradient-to-r from-emerald-400 to-cyan-400"
+          >
+          </div>
+        </div>
+
+        <div class="grid items-center">
+          <div class="fade-in space-y-6" style="transition-delay: 200ms">
+            <h3 class="mb-3 text-3xl font-bold">
+              <span class="text-primary">F</span>ree and <span
+                class="text-primary">O</span
+              >pen <span class="text-primary">S</span>ource <span
+                class="text-primary">S</span
+              >oftware
+            </h3>
+            <p
+              class="text-lg leading-relaxed text-slate-500 dark:text-slate-300"
+            >
+              We're bringing FOSS to CET students by replacing proprietary tools
+              with Linux, GitHub workflows, and community-driven development.
+              From kernel hacking to UI/UX contributions, we're building the
+              next generation of open source maintainers.
+            </p>
+          </div>
+          <br />
+          <div class="fade-in space-y-6" style="transition-delay: 200ms">
+            <h3 class="mt-5 mb-3 text-3xl font-bold">
+              Student Awareness and Software Responsibility
+            </h3>
+            <p
+              class="text-lg leading-relaxed text-slate-500 dark:text-slate-300"
+            >
+              While addressing the FOSS movement, we also want to raise student
+              awareness and improve anti-piracy and unresponsible software usage
+              tendecies by providing free and open-source alternates.
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
 
     <!-- Header -->
-    <div class="text-center mb-16">
-      <h1 class="text-5xl font-bold bg-clip-text text-transparent mb-4">
-        <span class="text-primary">
-        The FOSS Movement
-        </span>
+    <div class="mb-16 text-center">
+      <h1 class="mb-4 bg-clip-text text-5xl font-bold text-transparent">
+        <span class="text-primary"> The FOSS Movement </span>
       </h1>
     </div>
 
     <!-- Timeline Container -->
     <div class="relative">
       <!-- Vertical Line -->
-      <div class="absolute left-8 top-0 bottom-0 w-0.5 bg-gradient-to-b from-emerald-400 to-cyan-500"></div>
-      
+      <div
+        class="absolute top-0 bottom-0 left-8 w-0.5 bg-gradient-to-b from-emerald-400 to-cyan-500"
+      >
+      </div>
+
       <!-- Timeline Items -->
       <div class="space-y-12">
-        
         <!-- 1983-1985 -->
-        <div class="flex items-center pl-16 relative group">
-          <div class="absolute -left-12 w-16 h-16 bg-grey-500 rounded-full flex items-center justify-center text-white text-xl font-bold shadow-xl group-hover:scale-110 transition-all">
-            <i class="fas fa-rocket"></i>
-          </div>
-          <div class="bg-slate-800/50 backdrop-blur-sm p-6 rounded-2xl border border-slate-700 shadow-2xl w-full ml-4" style="transition: all 0.3s ease; transform: scale(1);" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
-            <div class="flex items-center mb-2" id='container'>
-              <span class="text-2xl font-mono"><span class="text-primary">1983–1985</span></span>
-              <div class="w-2 h-2 bg-emerald-400 rounded-full mx-3"></div>
-              <span class="text-sm text-slate-400">Global Foundations</span>
+        <div class="group relative flex items-center pl-16">
+          <!-- <div -->
+          <!--   class="bg-grey-500 absolute -left-12 flex h-16 w-16 items-center justify-center rounded-full text-xl font-bold text-white shadow-xl transition-all group-hover:scale-110" -->
+          <!-- > -->
+          <!--   <i class="fas fa-rocket"></i> -->
+          <!-- </div> -->
+          <div
+            class="ml-4 w-full rounded-2xl border border-slate-400 bg-slate-400/50 p-6 shadow-2xl backdrop-blur-sm dark:border-slate-800 dark:bg-slate-800/50"
+            style="transition: all 0.3s ease; transform: scale(1);"
+            onmouseover="this.style.transform='scale(1.05)'"
+            onmouseout="this.style.transform='scale(1)'"
+          >
+            <div class="mb-2 flex items-center" id="container">
+              <span class="font-mono text-2xl"
+                ><span class="text-primary">1983–1985</span></span
+              >
+              <div class="mx-3 h-2 w-2 rounded-full bg-emerald-400"></div>
+              <span class="text-sm text-slate-500 dark:text-slate-400"
+                >Global Foundations</span
+              >
             </div>
-            <h3 class="text-2xl font-bold text-white mb-2">GNU Project & FSF</h3>
-            <p class="text-slate-300">Richard Stallman launches GNU (1983) and Free Software Foundation (1985), creates GPL license. Emacs also released as first product under GNU License.</p>
+            <h3 class="mb-2 text-2xl font-bold">GNU Project & FSF</h3>
+            <p class="text-slate-500 dark:text-slate-300">
+              Richard Stallman launches GNU (1983) and Free Software Foundation
+              (1985), creates GPL license. Emacs also released as first product
+              under GNU License.
+            </p>
           </div>
         </div>
 
         <!-- 1991-1993 -->
-        <div class="flex items-center pl-16 relative group">
-          <div class="absolute -left-12 w-16 h-16 bg-grey-500 rounded-full flex items-center justify-center text-white text-xl font-bold shadow-xl group-hover:scale-110 transition-all">
-            <i class="fab fa-linux"></i>
-          </div>
-          <div class="bg-slate-800/50 backdrop-blur-sm p-6 rounded-2xl border border-slate-700 shadow-2xl w-full ml-4" style="transition: all 0.3s ease; transform: scale(1);" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
-            <div class="flex items-center mb-2">
-              <span class="text-2xl font-mono"><span class="text-primary">1991–1993</span></span>
-              <div class="w-2 h-2 bg-emerald-400 rounded-full mx-3"></div>
-              <span class="text-sm text-slate-400">Kernel Boom</span>
+        <div class="group relative flex items-center pl-16">
+          <!-- <div -->
+          <!--   class="bg-grey-500 absolute -left-12 flex h-16 w-16 items-center justify-center rounded-full text-xl font-bold text-white shadow-xl transition-all group-hover:scale-110" -->
+          <!-- > -->
+          <!--   <i class="fab fa-linux"></i> -->
+          <!-- </div> -->
+          <div
+            class="ml-4 w-full rounded-2xl border border-slate-400 bg-slate-400/50 p-6 shadow-2xl backdrop-blur-sm dark:border-slate-800 dark:bg-slate-800/50"
+            style="transition: all 0.3s ease; transform: scale(1);"
+            onmouseover="this.style.transform='scale(1.05)'"
+            onmouseout="this.style.transform='scale(1)'"
+          >
+            <div class="mb-2 flex items-center">
+              <span class="font-mono text-2xl"
+                ><span class="text-primary">1991–1993</span></span
+              >
+              <div class="mx-3 h-2 w-2 rounded-full bg-emerald-400"></div>
+              <span class="text-sm text-slate-500 dark:text-slate-400"
+                >Kernel Boom</span
+              >
             </div>
-            <h3 class="text-2xl font-bold text-white mb-2">Linux Kernel Released</h3>
-            <p class="text-slate-300">Linus Torvalds releases Linux kernel (1991); BSD variants gain traction post-lawsuits.</p>
+            <h3 class="mb-2 text-2xl font-bold">Linux Kernel Released</h3>
+            <p class="text-slate-500 dark:text-slate-300">
+              Linus Torvalds releases Linux kernel (1991); BSD variants gain
+              traction post-lawsuits.
+            </p>
           </div>
         </div>
 
         <!-- 1998 -->
-        <div class="flex items-center pl-16 relative group">
-          <div class="absolute -left-12 w-16 h-16 bg-grey-500 rounded-full flex items-center justify-center text-white text-xl font-bold shadow-xl group-hover:scale-110 transition-all">
-            <i class="fas fa-globe"></i>
-          </div>
-          <div class="bg-slate-800/50 backdrop-blur-sm p-6 rounded-2xl border border-slate-700 shadow-2xl w-full ml-4" style="transition: all 0.3s ease; transform: scale(1);" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
-            <div class="flex items-center mb-2">
-              <span class="text-2xl font-mono"><span class="text-primary">1998</span></span>
-              <div class="w-2 h-2 bg-emerald-400 rounded-full mx-3"></div>
-              <span class="text-sm text-slate-400">Term Coined</span>
+        <div class="group relative flex items-center pl-16">
+          <!-- <div -->
+          <!--   class="bg-grey-500 absolute -left-12 flex h-16 w-16 items-center justify-center rounded-full text-xl font-bold text-white shadow-xl transition-all group-hover:scale-110" -->
+          <!-- > -->
+          <!--   <i class="fas fa-globe"></i> -->
+          <!-- </div> -->
+          <div
+            class="ml-4 w-full rounded-2xl border border-slate-400 bg-slate-400/50 p-6 shadow-2xl backdrop-blur-sm dark:border-slate-800 dark:bg-slate-800/50"
+            style="transition: all 0.3s ease; transform: scale(1);"
+            onmouseover="this.style.transform='scale(1.05)'"
+            onmouseout="this.style.transform='scale(1)'"
+          >
+            <div class="mb-2 flex items-center">
+              <span class="font-mono text-2xl"
+                ><span class="text-primary">1998</span></span
+              >
+              <div class="mx-3 h-2 w-2 rounded-full bg-emerald-400"></div>
+              <span class="text-sm text-slate-500 dark:text-slate-400"
+                >Term Coined</span
+              >
             </div>
-            <h3 class="text-2xl font-bold text-white mb-2">"Open Source" is Born</h3>
-            <p class="text-slate-300">Term coined for broader appeal; Apache/Red Hat commercialize FOSS.</p>
+            <h3 class="mb-2 text-2xl font-bold">"Open Source" is Born</h3>
+            <p class="text-slate-500 dark:text-slate-300">
+              Term coined for broader appeal; Apache/Red Hat commercialize FOSS.
+            </p>
           </div>
         </div>
 
         <!-- 2000-2001 India -->
-        <div class="flex items-center pl-16 relative group">
-          <div class="absolute -left-12 w-16 h-16 bg-grey-500 rounded-full flex items-center justify-center text-white text-xl font-bold shadow-xl group-hover:scale-110 transition-all">
-            <i class="fas fa-flag"></i>
-          </div>
-          <div class="bg-slate-800/50 backdrop-blur-sm p-6 rounded-2xl border border-slate-700 shadow-2xl w-full ml-4" style="transition: all 0.3s ease; transform: scale(1);" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
-            <div class="flex items-center mb-2">
-              <span class="text-2xl font-mono text-orange-400"><span class="text-primary">2000-2001</span></span>
-              <div class="w-2 h-2 bg-emerald-400 rounded-full mx-3"></div>
-              <span class="text-sm text-slate-400">India Awakens</span>
+        <div class="group relative flex items-center pl-16">
+          <!-- <div -->
+          <!--   class="bg-grey-500 absolute -left-12 flex h-16 w-16 items-center justify-center rounded-full text-xl font-bold text-white shadow-xl transition-all group-hover:scale-110" -->
+          <!-- > -->
+          <!--   <i class="fas fa-flag"></i> -->
+          <!-- </div> -->
+          <div
+            class="ml-4 w-full rounded-2xl border border-slate-400 bg-slate-400/50 p-6 shadow-2xl backdrop-blur-sm dark:border-slate-800 dark:bg-slate-800/50"
+            style="transition: all 0.3s ease; transform: scale(1);"
+            onmouseover="this.style.transform='scale(1.05)'"
+            onmouseout="this.style.transform='scale(1)'"
+          >
+            <div class="mb-2 flex items-center">
+              <span class="font-mono text-2xl text-orange-400"
+                ><span class="text-primary">2000-2001</span></span
+              >
+              <div class="mx-3 h-2 w-2 rounded-full bg-emerald-400"></div>
+              <span class="text-sm text-slate-500 dark:text-slate-400"
+                >India Awakens</span
+              >
             </div>
-            <h3 class="text-2xl font-bold text-white mb-2">Kerala Leads</h3>
-            <p class="text-slate-300">Kerala's IT@School promotes FOSS education; FSF India starts in Trivandrum.</p>
+            <h3 class="mb-2 text-2xl font-bold">Kerala Leads</h3>
+            <p class="text-slate-500 dark:text-slate-300">
+              Kerala's IT@School promotes FOSS education; FSF India starts in
+              Trivandrum.
+            </p>
           </div>
         </div>
 
         <!-- 2025-2026 -->
-        <div class="flex items-center pl-16 relative group">
-          <div class="absolute -left-12 w-16 h-16 rounded-full flex items-center justify-center text-white text-xl font-bold shadow-xl group-hover:scale-110 transition-all">
-            <i class="fas fa-users"></i>
-          </div>
-          <div class="bg-gradient-to-r from-emerald-500/20 to-cyan-500/20 backdrop-blur-sm p-8 rounded-2xl border-2 border-emerald-500/50 shadow-2xl w-full ml-4" style="transition: all 0.3s ease; transform: scale(1);" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
-            <div class="flex items-center mb-3">
-              <span class="text-2xl font-mono text-emerald-400">2025–2026</span>
-              <div class="w-2 h-2 bg-emerald-400 rounded-full mx-3"></div>
-              <span class="text-sm text-slate-400">FOSS@CET</span></span>
+        <div class="group relative flex items-center pl-16">
+          <!-- <div -->
+          <!--   class="absolute -left-12 flex h-16 w-16 items-center justify-center rounded-full text-xl font-bold text-white shadow-xl transition-all group-hover:scale-110" -->
+          <!-- > -->
+          <!--   <i class="fas fa-users"></i> -->
+          <!-- </div> -->
+          <div
+            class="ml-4 w-full rounded-2xl border-2 border-emerald-500/50 bg-gradient-to-r from-emerald-500/20 to-cyan-500/20 p-8 shadow-2xl backdrop-blur-sm"
+            style="transition: all 0.3s ease; transform: scale(1);"
+            onmouseover="this.style.transform='scale(1.05)'"
+            onmouseout="this.style.transform='scale(1)'"
+          >
+            <div class="mb-3 flex items-center">
+              <span class="font-mono text-2xl text-emerald-400">2025–2026</span>
+              <div class="mx-3 h-2 w-2 rounded-full bg-emerald-400"></div>
+              <span class="text-sm text-slate-500 dark:text-slate-400"
+                >FOSS@CET</span
+              >
             </div>
-            <h3 class="text-3xl font-black bg-gradient-to-r from-white to-slate-200 bg-clip-text text-transparent mb-3">
-              <span class="italic">foss<span class="text-primary">cet</span></span> is launched
+
+            <h3
+              class="mb-3 bg-gradient-to-r from-white to-slate-200 bg-clip-text text-3xl font-black"
+            >
+              <span class="italic"
+                >foss<span class="text-primary">cet</span></span
+              > is launched
             </h3>
-            <p class="text-slate-300">The FOSS movement is brought back to our very own CET, stronger than ever.</p>
-            <div class="flex space-x-4 text-sm">
-            </div>
+            <p class="text-slate-500 dark:text-slate-300">
+              The FOSS movement is brought back to our very own CET, stronger
+              than ever.
+            </p>
           </div>
         </div>
-
       </div>
     </div>
-
+  </div>
 </Layout>