feat: create CommDesk landing page

[aditi123-hub]

Summary

Implemented a CommDesk-branded landing page and replaced the default Vite starter content.

Additionally removed unused imports/variables in CommandPalette to restore a successful production build.

Related Issue

Closes #1

Changes Made

• Replaced Vite starter page
• Added Hero section
• Added Features section
• Added Why CommDesk section
• Added CTA section
• Refactored Home page into reusable components
• Improved responsive design
• Removed unused CommandPalette code causing TypeScript build errors

Testing

• Tested manually
• Verified production build passes (npm run build)
• Added unit/integration tests

Screenshots

[gemini-code-assist]

Code Review

This pull request refactors the landing page by extracting the inline content from App.tsx into a modular Home component and its sub-components (Hero, Stats, Features, WhyCommDesk, and CTA). It also cleans up unused state, refs, and imports in App.tsx and CommandPalette.tsx. The review feedback recommends converting static buttons in Hero and CTA to functional React Router <Link> components, wrapping raw emojis in Stats with accessible <span> tags, and replacing raw text checkmarks in WhyCommDesk with the Check icon from lucide-react.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[gemini-code-assist]

Rendering raw emojis inside a div without accessibility attributes can cause issues for screen readers. It is a best practice to wrap emojis in a <span> with role="img" and aria-hidden="true" (since the text label is already provided directly below it) to ensure a good experience for users relying on assistive technologies.

Suggested change

	<div className="text-3xl mb-3">
	{item.icon}
	</div>
	<span
	role="img"
	aria-hidden="true"
	className="block text-3xl mb-3"
	>
	{item.icon}
	</span>

[gemini-code-assist]

Instead of using a raw text checkmark character (✓), we can leverage the Check icon from lucide-react (which is already a dependency in this project). This improves the visual design, consistency, and accessibility of the list.

import { Check } from 'lucide-react';

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="flex items-center justify-center gap-2 bg-[#14192c] rounded-xl p-5 text-center"
          >
            <Check className="h-5 w-5 text-green-500 shrink-0" />
            <span>{reason}</span>
          </div>
        ))}
      </div>
    </section>
  );
}

[gemini-code-assist]

The 'Explore CommDesk' button in the CTA section is currently a static <button> element. It should be converted to a functional <Link> component from react-router-dom to allow users to navigate to the features page.

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">
        Ready to Transform Community Management?
      </h2>

      <p className="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 transition-all duration-300"
      >
        Explore CommDesk
      </Link>
    </section>
  );
}

[abhishek-nexgen-dev]

Go with light and dark them both