diff --git a/src/App.tsx b/src/App.tsx index 9a85fe2..33bd785 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 ( @@ -36,129 +33,7 @@ function App() { onAuthToggle={() => setIsAuthenticated(!isAuthenticated)} /> - -
-
- - 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

- -
-
- -
-
- - } - /> + } /> + + + + + + + ); +} \ 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..8f265f0 --- /dev/null +++ b/src/features/Home/v1/components/CTA.tsx @@ -0,0 +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. +

+ + + Explore CommDesk + +
+ ); +} \ 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..f55adcc --- /dev/null +++ b/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 ( +
+

+ 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..46f5711 --- /dev/null +++ b/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 ( +
+ CommDesk Hero + +

+ The Modern Platform for Community Management +

+ +
+

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

+
+ +
+ + Get Started + + + + Explore Features + +
+
+ ); +} \ 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..2b3fcfc --- /dev/null +++ b/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 ( +
+
+ {stats.map((item) => ( +
+ +

+ {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..d72f3b8 --- /dev/null +++ b/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 ( +
+

Why CommDesk?

+ +
+ {reasons.map((reason) => ( +
+ ✓ {reason} +
+ ))} +
+
+ ); +} diff --git a/src/features/Nav/v1/components/CommandPalette.tsx b/src/features/Nav/v1/components/CommandPalette.tsx index 48a010b..910772c 100644 --- a/src/features/Nav/v1/components/CommandPalette.tsx +++ b/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 = ({ onSearch, }) => { const navigate = useNavigate(); - const overlayRef = useRef(null); const inputRef = useRef(null); const listRef = useRef(null); const [query, setQuery] = useState(''); 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;