From 5eaa2a756977838a9d39170dfcd4cb6f65ffcf59 Mon Sep 17 00:00:00 2001 From: Aditi Date: Wed, 17 Jun 2026 03:58:41 +0530 Subject: [PATCH 1/2] feat: create CommDesk landing page --- src/App.tsx | 126 +----------------- src/features/Home/v1/Home.tsx | 17 +++ src/features/Home/v1/components/CTA.tsx | 18 +++ src/features/Home/v1/components/Features.tsx | 45 +++++++ src/features/Home/v1/components/Hero.tsx | 33 +++++ src/features/Home/v1/components/Stats.tsx | 41 ++++++ .../Home/v1/components/WhyCommDesk.tsx | 29 ++++ .../Nav/v1/components/CommandPalette.tsx | 3 +- 8 files changed, 186 insertions(+), 126 deletions(-) create mode 100644 src/features/Home/v1/components/CTA.tsx create mode 100644 src/features/Home/v1/components/Features.tsx create mode 100644 src/features/Home/v1/components/Hero.tsx create mode 100644 src/features/Home/v1/components/Stats.tsx create mode 100644 src/features/Home/v1/components/WhyCommDesk.tsx diff --git a/src/App.tsx b/src/App.tsx index 9a85fe2..8264a10 100644 --- a/src/App.tsx +++ b/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 ( @@ -38,126 +35,7 @@ function App() { -
-
- - React logo - Vite logo -
-
-

Get started

-

- Edit src/App.tsx and save to test{' '} - HMR -

-
- -
- -
- -
-
- -

Documentation

-

Your questions, answered

- -
-
- -

Connect with us

-

Join the Vite community

- -
-
- -
-
- - } + element={} /> + + + + + + + ); +} \ No newline at end of file diff --git a/src/features/Home/v1/components/CTA.tsx b/src/features/Home/v1/components/CTA.tsx new file mode 100644 index 0000000..199da67 --- /dev/null +++ b/src/features/Home/v1/components/CTA.tsx @@ -0,0 +1,18 @@ +export default function CTA() { + return ( +
+

+ Ready to Transform Community Management? +

+ +

+ Join organizations using CommDesk to streamline collaboration, + event management, and resource sharing. +

+ + +
+ ); +} \ No newline at end of file diff --git a/src/features/Home/v1/components/Features.tsx b/src/features/Home/v1/components/Features.tsx new file mode 100644 index 0000000..47a82d4 --- /dev/null +++ b/src/features/Home/v1/components/Features.tsx @@ -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 ( +
+

+ Features +

+ +
+ {features.map((feature) => ( +
+

+ {feature.title} +

+ +

+ {feature.desc} +

+
+ ))} +
+
+ ); +} \ No newline at end of file diff --git a/src/features/Home/v1/components/Hero.tsx b/src/features/Home/v1/components/Hero.tsx new file mode 100644 index 0000000..f574e94 --- /dev/null +++ b/src/features/Home/v1/components/Hero.tsx @@ -0,0 +1,33 @@ +import heroImg from '../../../../assets/hero.png'; + +export default function Hero() { + return ( +
+ CommDesk Hero + +

+ The Modern Platform for Community Management +

+ +
+

+ Manage communities, events, resources and collaboration from a single unified workspace. +

+
+ +
+ + + +
+
+ ); +} \ No newline at end of file diff --git a/src/features/Home/v1/components/Stats.tsx b/src/features/Home/v1/components/Stats.tsx new file mode 100644 index 0000000..0d3b246 --- /dev/null +++ b/src/features/Home/v1/components/Stats.tsx @@ -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 ( +
+
+ {stats.map((item) => ( +
+
+ {item.icon} +
+ +

+ {item.title} +

+
+ ))} +
+
+ ); +} \ No newline at end of file diff --git a/src/features/Home/v1/components/WhyCommDesk.tsx b/src/features/Home/v1/components/WhyCommDesk.tsx new file mode 100644 index 0000000..76caabf --- /dev/null +++ b/src/features/Home/v1/components/WhyCommDesk.tsx @@ -0,0 +1,29 @@ +export default function WhyCommDesk() { + const reasons = [ + 'Modern Interface', + 'Easy Community Management', + 'Event Organization', + 'Resource Sharing', + 'Responsive Design', + 'Scalable Architecture', + ]; + + return ( +
+

+ Why CommDesk? +

+ +
+ {reasons.map((reason) => ( +
+ ✓ {reason} +
+ ))} +
+
+ ); +} \ No newline at end of file diff --git a/src/features/Nav/v1/components/CommandPalette.tsx b/src/features/Nav/v1/components/CommandPalette.tsx index 48a010b..63b8c85 100644 --- a/src/features/Nav/v1/components/CommandPalette.tsx +++ b/src/features/Nav/v1/components/CommandPalette.tsx @@ -15,7 +15,7 @@ import { MessageSquare, ArrowRight, } from 'lucide-react'; -import { navItems } from '../types/navbar.types'; + interface CommandPaletteProps { isOpen: boolean; @@ -39,7 +39,6 @@ export const CommandPalette: React.FC = ({ onSearch, }) => { const navigate = useNavigate(); - const overlayRef = useRef(null); const inputRef = useRef(null); const listRef = useRef(null); const [query, setQuery] = useState(''); From fbff138350769b6bcced7eae0111f0bcd2f6e850 Mon Sep 17 00:00:00 2001 From: Aditi Date: Tue, 23 Jun 2026 23:44:22 +0530 Subject: [PATCH 2/2] feat: add theme support and improve landing page UI --- src/App.tsx | 5 +-- src/features/Home/v1/Home.tsx | 2 +- src/features/Home/v1/components/CTA.tsx | 17 ++++++--- src/features/Home/v1/components/Features.tsx | 31 ++++----------- src/features/Home/v1/components/Hero.tsx | 38 ++++++++++--------- src/features/Home/v1/components/Stats.tsx | 33 ++++++---------- .../Home/v1/components/WhyCommDesk.tsx | 12 +++--- .../Nav/v1/components/CommandPalette.tsx | 1 - src/features/Nav/v1/components/MobileMenu.tsx | 4 +- src/features/Nav/v1/components/Navbar.tsx | 32 +++++----------- src/features/Nav/v1/components/UserMenu.tsx | 22 ++++++++--- src/index.css | 3 +- 12 files changed, 91 insertions(+), 109 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 8264a10..33bd785 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -33,10 +33,7 @@ function App() { onAuthToggle={() => setIsAuthenticated(!isAuthenticated)} /> - } - /> + } /> +
diff --git a/src/features/Home/v1/components/CTA.tsx b/src/features/Home/v1/components/CTA.tsx index 199da67..8f265f0 100644 --- a/src/features/Home/v1/components/CTA.tsx +++ b/src/features/Home/v1/components/CTA.tsx @@ -1,18 +1,23 @@ +import { Link } from 'react-router-dom'; + export default function CTA() { return (
-

+

Ready to Transform Community Management?

-

- Join organizations using CommDesk to streamline collaboration, - event management, and resource sharing. +

+ Join organizations using CommDesk to streamline collaboration, event + management, and resource sharing.

- +
); } \ No newline at end of file diff --git a/src/features/Home/v1/components/Features.tsx b/src/features/Home/v1/components/Features.tsx index 47a82d4..f55adcc 100644 --- a/src/features/Home/v1/components/Features.tsx +++ b/src/features/Home/v1/components/Features.tsx @@ -1,26 +1,14 @@ 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.', - }, + { 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 (
-

+

Features

@@ -28,15 +16,12 @@ export default function Features() { {features.map((feature) => (
-

+

{feature.title}

- -

- {feature.desc} -

+

{feature.desc}

))} diff --git a/src/features/Home/v1/components/Hero.tsx b/src/features/Home/v1/components/Hero.tsx index f574e94..46f5711 100644 --- a/src/features/Home/v1/components/Hero.tsx +++ b/src/features/Home/v1/components/Hero.tsx @@ -1,32 +1,36 @@ +import { Link } from 'react-router-dom'; import heroImg from '../../../../assets/hero.png'; export default function Hero() { return ( -
- CommDesk Hero +
+ CommDesk Hero -

+

The Modern Platform for Community Management

- -
-

- Manage communities, events, resources and collaboration from a single unified workspace. -

-
+ +
+

+ Manage communities, events, resources and collaboration from a single + unified workspace. +

+
- + - +
); diff --git a/src/features/Home/v1/components/Stats.tsx b/src/features/Home/v1/components/Stats.tsx index 0d3b246..2b3fcfc 100644 --- a/src/features/Home/v1/components/Stats.tsx +++ b/src/features/Home/v1/components/Stats.tsx @@ -1,21 +1,9 @@ export default function Stats() { const stats = [ - { - icon: '👥', - title: 'Community Driven', - }, - { - icon: '📅', - title: 'Event Management', - }, - { - icon: '📚', - title: 'Resource Sharing', - }, - { - icon: '📱', - title: 'Responsive Design', - }, + { icon: '👥', title: 'Community Driven' }, + { icon: '📅', title: 'Event Management' }, + { icon: '📚', title: 'Resource Sharing' }, + { icon: '📱', title: 'Responsive Design' }, ]; return ( @@ -24,13 +12,16 @@ export default function Stats() { {stats.map((item) => (
-
+
- -

+ +

{item.title}

diff --git a/src/features/Home/v1/components/WhyCommDesk.tsx b/src/features/Home/v1/components/WhyCommDesk.tsx index 76caabf..d72f3b8 100644 --- a/src/features/Home/v1/components/WhyCommDesk.tsx +++ b/src/features/Home/v1/components/WhyCommDesk.tsx @@ -10,20 +10,18 @@ export default function WhyCommDesk() { return (
-

- Why CommDesk? -

+

Why CommDesk?

{reasons.map((reason) => (
+ key={reason} + className="bg-gray-100 dark:bg-[#14192c] rounded-xl p-5 text-center" +> ✓ {reason}
))}
); -} \ No newline at end of file +} diff --git a/src/features/Nav/v1/components/CommandPalette.tsx b/src/features/Nav/v1/components/CommandPalette.tsx index 63b8c85..910772c 100644 --- a/src/features/Nav/v1/components/CommandPalette.tsx +++ b/src/features/Nav/v1/components/CommandPalette.tsx @@ -16,7 +16,6 @@ import { ArrowRight, } from 'lucide-react'; - interface CommandPaletteProps { isOpen: boolean; onClose: () => void; diff --git a/src/features/Nav/v1/components/MobileMenu.tsx b/src/features/Nav/v1/components/MobileMenu.tsx index 521b70d..3e836a1 100644 --- a/src/features/Nav/v1/components/MobileMenu.tsx +++ b/src/features/Nav/v1/components/MobileMenu.tsx @@ -131,7 +131,9 @@ export const MobileMenu: React.FC = ({
- C + + C +
= ({ onAuthToggle, onSearch, }) => { - const { - isScrolled, - isMobileMenuOpen, - toggleMobileMenu, - isSearchOpen, - toggleSearch + const { + isScrolled, + isMobileMenuOpen, + toggleMobileMenu, } = useNavbar(); const [shouldFocusMobileSearch, setShouldFocusMobileSearch] = useState(false); - // Mock user data const user = { name: 'Alex Johnson', avatar: '' }; useEffect(() => { @@ -43,7 +39,6 @@ export const Navbar: React.FC = ({ return; } - // Check if mobile view const desktopSearch = document.querySelector( '[data-desktop-search]', ); @@ -83,10 +78,12 @@ export const Navbar: React.FC = ({ )} >
- {/* Logo Section */} + {/* Logo */}
- C + + C +
CommDesk @@ -96,7 +93,7 @@ export const Navbar: React.FC = ({ {/* Navigation Links */} - {/* Actions Section */} + {/* Actions */}
@@ -110,7 +107,6 @@ export const Navbar: React.FC = ({ onAuthToggle={onAuthToggle} /> - {/* Mobile Menu Button */}
- {/* Command Palette Search Overlay */} - - - {/* Mobile Menu Drawer */} = ({ /> ); -}; +}; \ No newline at end of file diff --git a/src/features/Nav/v1/components/UserMenu.tsx b/src/features/Nav/v1/components/UserMenu.tsx index 3ac8001..f3127b7 100644 --- a/src/features/Nav/v1/components/UserMenu.tsx +++ b/src/features/Nav/v1/components/UserMenu.tsx @@ -84,18 +84,24 @@ export const UserMenu: React.FC = ({ className="absolute right-0 top-12 z-50 w-80 overflow-hidden rounded-2xl border border-border/80 bg-background/95 dark:bg-background/85 backdrop-blur-xl shadow-2xl" >
-

Notifications

+

+ Notifications +

-

New community message

+

+ New community message +

Your team replied to the latest post in General.

-

Event reminder

+

+ Event reminder +

CommDesk Sync starts in 30 minutes. Join the link!

@@ -118,7 +124,11 @@ export const UserMenu: React.FC = ({ {/* Avatar circle */}
{user?.avatar ? ( - {user.name} + {user.name} ) : ( user?.name.charAt(0) )} @@ -144,7 +154,9 @@ export const UserMenu: React.FC = ({ className="absolute right-0 mt-2.5 w-56 bg-background/95 dark:bg-background/85 border border-border/80 rounded-2xl shadow-2xl z-50 overflow-hidden backdrop-blur-xl" >
-

{user?.name}

+

+ {user?.name} +

alex.johnson@commdesk.com

diff --git a/src/index.css b/src/index.css index 2bd21e5..3c5bb86 100644 --- a/src/index.css +++ b/src/index.css @@ -1,5 +1,6 @@ @import 'tailwindcss'; - +@variant dark (&:where(.dark, .dark *)); +@custom-variant dark (&:where(html.dark *, html[data-theme='dark'] *)); @theme { --color-primary: #aa3bff; --color-primary-foreground: #ffffff;