feat: create CommDesk landing page

src/App.tsx

@@ -1,10 +1,8 @@
 import { useState } from 'react';
 import { Route, Routes } from 'react-router-dom';
 import { Navbar } from './features/Nav/v1/components';
-import reactLogo from './assets/react.svg';
-import viteLogo from './assets/vite.svg';
-import heroImg from './assets/hero.png';
 import './App.css';
+import Home from './features/Home/v1/Home';
 
 function RoutePage({
   title,
@@ -26,7 +24,6 @@ function RoutePage({
 }
 
 function App() {
-  const [count, setCount] = useState(0);
   const [isAuthenticated, setIsAuthenticated] = useState(true);
 
   return (
@@ -36,129 +33,7 @@ function App() {
         onAuthToggle={() => setIsAuthenticated(!isAuthenticated)}
       />
       <Routes>
-        <Route
-          path="/"
-          element={
-            <main className="flex min-w-0 flex-1 flex-col items-center justify-center overflow-x-hidden pt-[72px] text-center">
-              <section id="center" className="py-20">
-                <div className="hero">
-                  <img
-                    src={heroImg}
-                    className="base"
-                    width="170"
-                    height="179"
-                    alt=""
-                  />
-                  <img src={reactLogo} className="framework" alt="React logo" />
-                  <img src={viteLogo} className="vite" alt="Vite logo" />
-                </div>
-                <div>
-                  <h1>Get started</h1>
-                  <p className="hero-copy">
-                    Edit <code>src/App.tsx</code> and save to test{' '}
-                    <code>HMR</code>
-                  </p>
-                </div>
-                <button
-                  type="button"
-                  className="counter"
-                  onClick={() => setCount((count) => count + 1)}
-                >
-                  Count is {count}
-                </button>
-              </section>
-
-              <div className="ticks"></div>
-
-              <section id="next-steps">
-                <div id="docs">
-                  <svg className="icon" role="presentation" aria-hidden="true">
-                    <use href="/icons.svg#documentation-icon"></use>
-                  </svg>
-                  <h2>Documentation</h2>
-                  <p>Your questions, answered</p>
-                  <ul>
-                    <li>
-                      <a href="https://vite.dev/" target="_blank">
-                        <img className="logo" src={viteLogo} alt="" />
-                        Explore Vite
-                      </a>
-                    </li>
-                    <li>
-                      <a href="https://react.dev/" target="_blank">
-                        <img className="button-icon" src={reactLogo} alt="" />
-                        Learn more
-                      </a>
-                    </li>
-                  </ul>
-                </div>
-                <div id="social">
-                  <svg className="icon" role="presentation" aria-hidden="true">
-                    <use href="/icons.svg#social-icon"></use>
-                  </svg>
-                  <h2>Connect with us</h2>
-                  <p>Join the Vite community</p>
-                  <ul>
-                    <li>
-                      <a href="https://github.com/vitejs/vite" target="_blank">
-                        <svg
-                          className="button-icon"
-                          role="presentation"
-                          aria-hidden="true"
-                        >
-                          <use href="/icons.svg#github-icon"></use>
-                        </svg>
-                        GitHub
-                      </a>
-                    </li>
-                    <li>
-                      <a href="https://chat.vite.dev/" target="_blank">
-                        <svg
-                          className="button-icon"
-                          role="presentation"
-                          aria-hidden="true"
-                        >
-                          <use href="/icons.svg#discord-icon"></use>
-                        </svg>
-                        Discord
-                      </a>
-                    </li>
-                    <li>
-                      <a href="https://x.com/vite_js" target="_blank">
-                        <svg
-                          className="button-icon"
-                          role="presentation"
-                          aria-hidden="true"
-                        >
-                          <use href="/icons.svg#x-icon"></use>
-                        </svg>
-                        X.com
-                      </a>
-                    </li>
-                    <li>
-                      <a
-                        href="https://bsky.app/profile/vite.dev"
-                        target="_blank"
-                      >
-                        <svg
-                          className="button-icon"
-                          role="presentation"
-                          aria-hidden="true"
-                        >
-                          <use href="/icons.svg#bluesky-icon"></use>
-                        </svg>
-                        Bluesky
-                      </a>
-                    </li>
-                  </ul>
-                </div>
-              </section>
-
-              <div className="ticks"></div>
-              <section id="spacer"></section>
-            </main>
-          }
-        />
+        <Route path="/" element={<Home />} />
         <Route
           path="/features"
           element={

src/features/Home/v1/Home.tsx

@@ -0,0 +1,17 @@
+import Hero from './components/Hero';
+import Stats from './components/Stats';
+import Features from './components/Features';
+import WhyCommDesk from './components/WhyCommDesk';
+import CTA from './components/CTA';
+
+export default function Home() {
+  return (
+    <main className="min-h-screen bg-white dark:bg-[#0b0f1f] text-gray-900 dark:text-white pt-[72px]">
+      <Hero />
+      <Stats />
+      <Features />
+      <WhyCommDesk />
+      <CTA />
+    </main>
+  );
+}

src/features/Home/v1/components/CTA.tsx

@@ -0,0 +1,23 @@
+import { Link } from 'react-router-dom';
+
+export default function CTA() {
+  return (
+    <section className="max-w-4xl mx-auto px-6 py-16 text-center">
+      <h2 className="text-4xl font-bold mb-6 text-gray-900 dark:text-white">
+        Ready to Transform Community Management?
+      </h2>
+
+      <p className="text-gray-600 dark:text-gray-400 mb-8">
+        Join organizations using CommDesk to streamline collaboration, event
+        management, and resource sharing.
+      </p>
+
+      <Link
+        to="/features"
+        className="inline-block px-8 py-4 rounded-lg bg-purple-600 hover:bg-purple-700 text-white transition-all duration-300"
+      >
+        Explore CommDesk
+      </Link>
+    </section>
+  );
+}

src/features/Home/v1/components/Features.tsx

@@ -0,0 +1,30 @@
+export default function Features() {
+  const features = [
+    { title: 'Communities', desc: 'Build and manage thriving communities.' },
+    { title: 'Events', desc: 'Organize and engage members through events.' },
+    { title: 'Resources', desc: 'Share documents and knowledge efficiently.' },
+    { title: 'Collaboration', desc: 'Work together in one unified platform.' },
+  ];
+
+  return (
+    <section className="max-w-6xl mx-auto px-6 py-12">
+      <h2 className="text-4xl font-bold text-center mb-8 text-gray-900 dark:text-white">
+        Features
+      </h2>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+        {features.map((feature) => (
+          <div
+            key={feature.title}
+            className="bg-gray-100 dark:bg-[#14192c] rounded-xl p-6 hover:bg-gray-200 dark:hover:bg-[#1c2240] transition-all duration-300"
+          >
+            <h3 className="text-2xl font-semibold mb-3 text-gray-900 dark:text-white">
+              {feature.title}
+            </h3>
+            <p className="text-gray-600 dark:text-gray-400">{feature.desc}</p>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

src/features/Home/v1/components/Hero.tsx

@@ -0,0 +1,37 @@
+import { Link } from 'react-router-dom';
+import heroImg from '../../../../assets/hero.png';
+
+export default function Hero() {
+  return (
+    <section className="w-full max-w-7xl mx-auto px-6 pt-24 pb-16 text-center relative z-0">
+      <img src={heroImg} alt="CommDesk Hero" className="mx-auto mb-6 w-64" />
+
+      <h1 className="text-5xl md:text-6xl font-bold mb-6 text-center text-gray-900 dark:text-white">
+        The Modern Platform for Community Management
+      </h1>
+
+      <div className="flex justify-center">
+        <p className="text-lg md:text-xl text-gray-600 dark:text-gray-300 mb-8 text-center leading-relaxed max-w-3xl">
+          Manage communities, events, resources and collaboration from a single
+          unified workspace.
+        </p>
+      </div>
+
+      <div className="flex justify-center items-center gap-4 mt-2">
+        <Link
+          to="/signup"
+          className="px-6 py-3 rounded-lg bg-purple-600 hover:bg-purple-700 text-white transition-colors"
+        >
+          Get Started
+        </Link>
+
+        <Link
+          to="/features"
+          className="px-6 py-3 rounded-lg border border-gray-400 dark:border-gray-600 text-gray-900 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+        >
+          Explore Features
+        </Link>
+      </div>
+    </section>
+  );
+}

src/features/Home/v1/components/Stats.tsx

@@ -0,0 +1,32 @@
+export default function Stats() {
+  const stats = [
+    { icon: '👥', title: 'Community Driven' },
+    { icon: '📅', title: 'Event Management' },
+    { icon: '📚', title: 'Resource Sharing' },
+    { icon: '📱', title: 'Responsive Design' },
+  ];
+
+  return (
+    <section className="max-w-6xl mx-auto px-6 py-10">
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+        {stats.map((item) => (
+          <div
+            key={item.title}
+            className="bg-gray-100 dark:bg-[#14192c] rounded-xl p-6 text-center"
+          >
+            <span
+              role="img"
+              aria-hidden="true"
+              className="block text-3xl mb-3"
+            >
+              {item.icon}
+            </span>
+            <h3 className="font-semibold text-gray-900 dark:text-white">
+              {item.title}
+            </h3>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

src/features/Home/v1/components/WhyCommDesk.tsx

@@ -0,0 +1,27 @@
+export default function WhyCommDesk() {
+  const reasons = [
+    'Modern Interface',
+    'Easy Community Management',
+    'Event Organization',
+    'Resource Sharing',
+    'Responsive Design',
+    'Scalable Architecture',
+  ];
+
+  return (
+    <section className="max-w-6xl mx-auto px-6 py-12">
+      <h2 className="text-4xl font-bold text-center mb-8">Why CommDesk?</h2>
+
+      <div className="grid md:grid-cols-3 gap-6">
+        {reasons.map((reason) => (
+          <div
+  key={reason}
+  className="bg-gray-100 dark:bg-[#14192c] rounded-xl p-5 text-center"
+>
+            ✓ {reason}
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

src/features/Nav/v1/components/CommandPalette.tsx

@@ -15,7 +15,6 @@ import {
   MessageSquare,
   ArrowRight,
 } from 'lucide-react';
-import { navItems } from '../types/navbar.types';
 
 interface CommandPaletteProps {
   isOpen: boolean;
@@ -39,7 +38,6 @@ export const CommandPalette: React.FC<CommandPaletteProps> = ({
   onSearch,
 }) => {
   const navigate = useNavigate();
-  const overlayRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
   const listRef = useRef<HTMLDivElement>(null);
   const [query, setQuery] = useState('');

src/features/Nav/v1/components/MobileMenu.tsx

@@ -131,7 +131,9 @@ export const MobileMenu: React.FC<MobileMenuProps> = ({
             <div className="flex shrink-0 items-center justify-between border-b border-border px-5 py-4">
               <div className="flex items-center gap-2">
                 <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-primary to-purple-600 shadow-md">
-                  <span className="text-white font-black text-sm select-none">C</span>
+                  <span className="text-white font-black text-sm select-none">
+                    C
+                  </span>
                 </div>
                 <span
                   id="mobile-menu-title"