Skip to content

feat: create CommDesk landing page #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
aditi123-hub wants to merge 1 commit into
base: master
Choose a base branch
from
Open

feat: create CommDesk landing page #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
126 changes: 2 additions & 124 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -26,7 +24,6 @@ function RoutePage({
}

function App() {
const [count, setCount] = useState(0);
const [isAuthenticated, setIsAuthenticated] = useState(true);

return (
Expand All @@ -38,126 +35,7 @@ function App() {
<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>
}
element={<Home />}
/>
<Route
path="/features"
Expand Down
17 changes: 17 additions & 0 deletions src/features/Home/v1/Home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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-[#0b0f1f] text-white pt-[72px]">
<Hero />
<Stats />
<Features />
<WhyCommDesk />
<CTA />
</main>
);
}
18 changes: 18 additions & 0 deletions src/features/Home/v1/components/CTA.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
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>

<button className="px-8 py-4 rounded-lg bg-purple-600 hover:bg-purple-700 transition-all duration-300">
Explore CommDesk
</button>
</section>
);
}
Comment on lines +1 to +18

@gemini-code-assist gemini-code-assist Bot Jun 16, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

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>
  );
}

45 changes: 45 additions & 0 deletions src/features/Home/v1/components/Features.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
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">
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-[#14192c] rounded-xl p-6 hover:bg-[#1c2240] transition-all duration-300"
>
<h3 className="text-2xl font-semibold mb-3">
{feature.title}
</h3>

<p className="text-gray-400">
{feature.desc}
</p>
</div>
))}
</div>
</section>
);
}
33 changes: 33 additions & 0 deletions src/features/Home/v1/components/Hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import heroImg from '../../../../assets/hero.png';

export default function Hero() {
return (
<section className="w-full max-w-7xl mx-auto px-6 pt-8 pb-16 text-center">
<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">
The Modern Platform for Community Management
</h1>

<div className="flex justify-center">
<p className="text-lg md:text-xl text-gray-400 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">
<button className="px-6 py-3 rounded-lg bg-purple-600 hover:bg-purple-700">
Get Started
</button>

<button className="px-6 py-3 rounded-lg border border-gray-600">
Explore Features
</button>
</div>
</section>
);
}
Comment thread
aditi123-hub marked this conversation as resolved.
41 changes: 41 additions & 0 deletions src/features/Home/v1/components/Stats.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
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-[#14192c] rounded-xl p-6 text-center"
>
<div className="text-3xl mb-3">
{item.icon}
</div>
Comment on lines +29 to +31

@gemini-code-assist gemini-code-assist Bot Jun 16, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

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>


<h3 className="font-semibold">
{item.title}
</h3>
</div>
))}
</div>
</section>
);
}
29 changes: 29 additions & 0 deletions src/features/Home/v1/components/WhyCommDesk.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
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-[#14192c] rounded-xl p-5 text-center"
>
✓ {reason}
</div>
))}
</div>
</section>
);
}
Comment on lines +1 to +29

@gemini-code-assist gemini-code-assist Bot Jun 16, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

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>
  );
}

3 changes: 1 addition & 2 deletions src/features/Nav/v1/components/CommandPalette.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import {
MessageSquare,
ArrowRight,
} from 'lucide-react';
import { navItems } from '../types/navbar.types';


interface CommandPaletteProps {
isOpen: boolean;
Expand All @@ -39,7 +39,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('');
Expand Down