Redesign logo with Radix Icons and improve layout spacing

Co-authored-by: rezwana-karim <126201034+rezwana-karim@users.noreply.github.com>

Author: Copilot

src/app/page.tsx

@@ -45,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>

src/components/ui/logo.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { LightningBoltIcon, CubeIcon } from '@radix-ui/react-icons'
+import { LightningBoltIcon, ChevronLeftIcon, ChevronRightIcon } from '@radix-ui/react-icons'
 import { cn } from '@/lib/utils'
 
 interface LogoProps {
@@ -11,19 +11,22 @@ interface LogoProps {
 const sizeClasses = {
   sm: {
     container: 'h-6',
-    icon: 'h-4 w-4',
+    icon: 'h-3 w-3',
+    lightning: 'h-4 w-4',
     text: 'text-lg font-bold',
-    spacing: 'gap-1.5'
+    spacing: 'gap-2'
   },
   md: {
     container: 'h-8',
-    icon: 'h-5 w-5', 
+    icon: 'h-4 w-4',
+    lightning: 'h-5 w-5', 
     text: 'text-xl font-bold',
-    spacing: 'gap-2'
+    spacing: 'gap-2.5'
   },
   lg: {
     container: 'h-12',
-    icon: 'h-8 w-8',
+    icon: 'h-6 w-6',
+    lightning: 'h-7 w-7',
     text: 'text-3xl font-bold',
     spacing: 'gap-3'
   }
@@ -34,25 +37,30 @@ export function Logo({ className, size = 'md', variant = 'full' }: LogoProps) {
 
   const IconComponent = () => (
     <div className={cn(
-      "relative inline-flex items-center justify-center",
+      "inline-flex items-center justify-center",
       sizes.container,
-      "bg-gradient-to-br from-primary via-primary/80 to-primary/60",
-      "rounded-lg shadow-sm"
+      "relative"
     )}>
-      {/* Lightning bolt as main icon */}
-      <LightningBoltIcon 
+      {/* Left Chevron */}
+      <ChevronLeftIcon 
         className={cn(
           sizes.icon,
-          "text-primary-foreground drop-shadow-sm z-10"
+          "text-primary/60"
         )} 
       />
-      {/* Subtle cube in background for "Hub" concept */}
-      <CubeIcon 
+      {/* Central Lightning Bolt - The main focus */}
+      <LightningBoltIcon 
         className={cn(
-          "absolute top-0 right-0 h-2 w-2",
-          size === 'lg' ? 'h-3 w-3' : 'h-2 w-2',
-          "text-primary-foreground/40"
-        )}
+          sizes.lightning,
+          "text-primary mx-0.5 relative z-10"
+        )} 
+      />
+      {/* Right Chevron */}
+      <ChevronRightIcon 
+        className={cn(
+          sizes.icon,
+          "text-primary/60"
+        )} 
       />
     </div>
   )