Comprehensive Repository Overhaul: Add Logo Design, Real Team/Project Data Integration, Theme System, UI/UX Improvements, and Production Fixes (#26)

Author: rezwana-karim

package-lock.json

@@ -20,6 +20,7 @@
     "@radix-ui/react-toast": "^1.2.15",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "gray-matter": "^4.0.3",
     "next": "15.5.4",
     "react": "19.1.0",
     "react-dom": "19.1.0",

package.json

@@ -3,6 +3,7 @@ import { Container } from "@/components/ui/container"
 import { Typography } from "@/components/ui/typography"
 import { Grid } from "@/components/ui/grid"
 import { Stack } from "@/components/ui/stack"
+import { Logo } from "@/components/ui/logo"
 import { ArrowRightIcon, GitHubLogoIcon } from "@radix-ui/react-icons"
 import ProjectsSection from "@/components/home/projects-section"
 import TeamMembersSection from "@/components/home/team-members-section"
@@ -17,6 +18,7 @@ export default function Home() {
           <Stack align="center" gap={8} className="text-center">
             {/* Logo/Brand */}
             <Stack gap={4} align="center">
+              <Logo size="lg" variant="icon" className="mb-2" />
               <Typography variant="h1">
                 <span className="text-foreground">Code</span>
                 <span className="text-primary">Storm</span>
@@ -43,40 +45,46 @@ export default function Home() {
             </Stack>
 
             {/* Features Grid */}
-            <div className="mt-16 w-full max-w-5xl">
-              <Grid cols={3} gap={8}>
-                <Stack align="center" gap={3} className="text-center">
-                  <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
-                    <GitHubLogoIcon className="h-6 w-6 text-primary" />
+            <div className="mt-20 w-full max-w-5xl">
+              <Grid cols={3} gap={8} className="items-start">
+                <Stack align="center" gap={4} className="text-center">
+                  <div className="w-14 h-14 bg-primary/10 rounded-xl flex items-center justify-center shadow-sm">
+                    <GitHubLogoIcon className="h-7 w-7 text-primary" />
+                  </div>
+                  <div className="space-y-2">
+                    <Typography variant="h5" className="font-semibold">Open Source</Typography>
+                    <Typography variant="muted" className="text-sm leading-relaxed max-w-sm">
+                      Building transparent, accessible solutions for the community
+                    </Typography>
                   </div>
-                  <Typography variant="h5">Open Source</Typography>
-                  <Typography variant="muted">
-                    Building transparent, accessible solutions for the community
-                  </Typography>
                 </Stack>
 
-                <Stack align="center" gap={3} className="text-center">
-                  <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
-                    <svg className="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                <Stack align="center" gap={4} className="text-center">
+                  <div className="w-14 h-14 bg-primary/10 rounded-xl flex items-center justify-center shadow-sm">
+                    <svg className="h-7 w-7 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                     </svg>
                   </div>
-                  <Typography variant="h5">Community</Typography>
-                  <Typography variant="muted">
-                    Connecting passionate developers and researchers worldwide
-                  </Typography>
+                  <div className="space-y-2">
+                    <Typography variant="h5" className="font-semibold">Community</Typography>
+                    <Typography variant="muted" className="text-sm leading-relaxed max-w-sm">
+                      Connecting passionate developers and researchers worldwide
+                    </Typography>
+                  </div>
                 </Stack>
 
-                <Stack align="center" gap={3} className="text-center">
-                  <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
-                    <svg className="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                <Stack align="center" gap={4} className="text-center">
+                  <div className="w-14 h-14 bg-primary/10 rounded-xl flex items-center justify-center shadow-sm">
+                    <svg className="h-7 w-7 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
                     </svg>
                   </div>
-                  <Typography variant="h5">Innovation</Typography>
-                  <Typography variant="muted">
-                    Pushing boundaries with cutting-edge research and development
-                  </Typography>
+                  <div className="space-y-2">
+                    <Typography variant="h5" className="font-semibold">Innovation</Typography>
+                    <Typography variant="muted" className="text-sm leading-relaxed max-w-sm">
+                      Pushing boundaries with cutting-edge research and development
+                    </Typography>
+                  </div>
                 </Stack>
               </Grid>
             </div>