From 228d12b379bbf4e1aedc5b8df128a8af6e367179 Mon Sep 17 00:00:00 2001 From: Felipe Cardoso Date: Wed, 12 Nov 2025 17:36:41 +0100 Subject: [PATCH] Redesign DemoSection with additional layout, content adjustments, and new demos - Added User Dashboard demo with `UserCircle` icon and "NEW" badge. - Introduced "View Complete Demo Tour" CTA linking to the Demo Tour page. - Adjusted grid layout to support 4 columns for better spacing: `md:grid-cols-2 lg:grid-cols-4`. - Enhanced Demo credentials modal with richer content outlining user and admin account capabilities. - Adjusted navigation links: renamed "Components" to "Design System" and added Demo Tour link. - Updated Demo Tour with leisurely paths, feature checklists, and new demo categories (user and admin flows). --- frontend/src/app/demos/page.tsx | 373 ++++++++++++++++++ frontend/src/app/dev/page.tsx | 4 +- frontend/src/app/page.tsx | 26 +- frontend/src/components/dev/DevLayout.tsx | 13 +- .../components/home/DemoCredentialsModal.tsx | 54 ++- frontend/src/components/home/DemoSection.tsx | 58 ++- frontend/src/components/home/Header.tsx | 3 +- 7 files changed, 484 insertions(+), 47 deletions(-) create mode 100644 frontend/src/app/demos/page.tsx diff --git a/frontend/src/app/demos/page.tsx b/frontend/src/app/demos/page.tsx new file mode 100644 index 0000000..594d0b3 --- /dev/null +++ b/frontend/src/app/demos/page.tsx @@ -0,0 +1,373 @@ +/** + * Demo Tour Page + * Comprehensive guide to all template features and demos + */ + +import type { Metadata } from 'next'; +import Link from 'next/link'; +import { + Palette, + ShieldCheck, + UserCircle, + Play, + CheckCircle2, + ArrowRight, + Home, + LogIn, + Settings, + Users, + Lock, + Activity, + UserCog, + BarChart3, +} from 'lucide-react'; +import { Button } from '@/components/ui/button'; +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; +import { Badge } from '@/components/ui/badge'; +import { Separator } from '@/components/ui/separator'; + +export const metadata: Metadata = { + title: 'Demo Tour | FastNext Template', + description: 'Try all features with demo credentials - comprehensive guide to the FastNext template', +}; + +const demoCategories = [ + { + icon: Palette, + title: 'Design System Hub', + description: 'Browse components, layouts, spacing, and forms with live examples', + href: '/dev', + features: ['All UI components', 'Layout patterns', 'Spacing philosophy', 'Form implementations'], + credentials: null, + }, + { + icon: ShieldCheck, + title: 'Authentication System', + description: 'Test login, registration, password reset, and session management', + href: '/login', + features: ['Login & logout', 'Registration', 'Password reset', 'Session tokens'], + credentials: { + email: 'demo@example.com', + password: 'Demo123!', + role: 'Regular User', + }, + }, + { + icon: UserCircle, + title: 'User Features', + description: 'Experience user settings, profile management, and session monitoring', + href: '/settings', + features: ['Profile editing', 'Password changes', 'Active sessions', 'Preferences'], + credentials: { + email: 'demo@example.com', + password: 'Demo123!', + role: 'Regular User', + }, + }, + { + icon: Play, + title: 'Admin Dashboard', + description: 'Explore admin panel with user management and analytics', + href: '/admin', + features: ['User management', 'Analytics charts', 'Bulk operations', 'Organization control'], + credentials: { + email: 'admin@example.com', + password: 'Admin123!', + role: 'Admin', + }, + }, +]; + +const explorationPaths = [ + { + title: 'Quick Tour (5 min)', + steps: [ + { icon: Home, text: 'Browse Design System components', href: '/dev' }, + { icon: LogIn, text: 'Test login flow', href: '/login' }, + { icon: Settings, text: 'View user settings', href: '/settings' }, + ], + }, + { + title: 'Full Experience (15 min)', + steps: [ + { icon: Palette, text: 'Explore all design system pages', href: '/dev' }, + { icon: ShieldCheck, text: 'Try complete auth flow', href: '/login' }, + { icon: UserCog, text: 'Update profile and password', href: '/settings/profile' }, + { icon: Activity, text: 'Check active sessions', href: '/settings/sessions' }, + { icon: Users, text: 'Login as admin and manage users', href: '/admin/users' }, + { icon: BarChart3, text: 'View analytics dashboard', href: '/admin' }, + ], + }, +]; + +const checklist = [ + { label: 'Browse design system components', completed: false }, + { label: 'Test login/logout flow', completed: false }, + { label: 'Register a new account', completed: false }, + { label: 'Reset password', completed: false }, + { label: 'Update user profile', completed: false }, + { label: 'Change password', completed: false }, + { label: 'View active sessions', completed: false }, + { label: 'Login as admin', completed: false }, + { label: 'Manage users (admin)', completed: false }, + { label: 'View analytics (admin)', completed: false }, + { label: 'Perform bulk operations (admin)', completed: false }, + { label: 'Explore organizations (admin)', completed: false }, +]; + +export default function DemoTourPage() { + return ( +
+ {/* Header */} +
+
+
+
+ + +

Demo Tour

+
+ +
+
+
+ + {/* Main Content */} +
+
+ {/* Hero Section */} +
+ + Interactive Demo + +

Explore All Features

+

+ Try everything with our pre-configured demo accounts. All changes are safe to test and + reset automatically. +

+
+ + + + {/* Quick Start Guide */} +
+
+

Quick Start Guide

+

Follow these simple steps to get started

+
+ +
+ + +
+
+ 1 +
+ Choose a Demo +
+ + + Browse the demo categories below and pick what interests you most + + + + + +
+
+ 2 +
+ Use Credentials +
+ + + Copy the demo credentials and login to explore authenticated features + + + + + +
+
+ 3 +
+ Explore Freely +
+ + + Test all features - everything resets automatically, so experiment away! + + +
+
+ + + + {/* Demo Categories */} +
+
+

Demo Categories

+

Explore different areas of the template

+
+ +
+ {demoCategories.map((category) => { + const Icon = category.icon; + return ( + + +
+
+ +
+ {category.credentials && ( + + Login Required + + )} +
+ {category.title} + {category.description} + + + {/* Features List */} +
+ {category.features.map((feature) => ( +
+ + {feature} +
+ ))} +
+ + {/* Credentials */} + {category.credentials && ( +
+

+ {category.credentials.role} Credentials: +

+

{category.credentials.email}

+

{category.credentials.password}

+
+ )} + + {/* CTA */} + + + + ); + })} +
+
+ + + + {/* Suggested Exploration Paths */} +
+
+

Suggested Exploration Paths

+

Choose your adventure based on available time

+
+ +
+ {explorationPaths.map((path) => ( + + + {path.title} + + +
+ {path.steps.map((step, index) => { + const StepIcon = step.icon; + return ( + +
+ {index + 1} +
+ + + {step.text} + + + + ); + })} +
+ + + ))} +
+
+ + + + {/* What to Try Checklist */} +
+
+

What to Try

+

+ Complete checklist of features to explore (for your reference) +

+
+ + + + Feature Checklist + + Try these features to experience the full power of the template + + + +
+ {checklist.map((item, index) => ( +
+
+ {item.completed && } +
+ + {item.label} + +
+ ))} +
+ + +
+ + {/* CTA Section */} +
+
+

Ready to Start?

+

+ Pick a demo category above or jump right into the action +

+
+
+ + +
+
+
+
+
+ ); +} diff --git a/frontend/src/app/dev/page.tsx b/frontend/src/app/dev/page.tsx index 578a4ed..6fe7837 100644 --- a/frontend/src/app/dev/page.tsx +++ b/frontend/src/app/dev/page.tsx @@ -13,8 +13,8 @@ import { Badge } from '@/components/ui/badge'; import { Separator } from '@/components/ui/separator'; export const metadata: Metadata = { - title: 'Design System Hub | Dev', - description: 'Interactive demonstrations and documentation for the FastNext design system', + title: 'Design System Hub | FastNext Template', + description: 'Interactive design system demonstrations with live examples - explore components, layouts, spacing, and forms built with shadcn/ui and Tailwind CSS', }; const demoPages = [ diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx index a493f50..e18f32e 100755 --- a/frontend/src/app/page.tsx +++ b/frontend/src/app/page.tsx @@ -7,6 +7,7 @@ 'use client'; import { useState } from 'react'; +import Link from 'next/link'; import { Header } from '@/components/home/Header'; import { HeroSection } from '@/components/home/HeroSection'; import { ContextSection } from '@/components/home/ContextSection'; @@ -69,30 +70,23 @@ export default function Home() { © {new Date().getFullYear()} FastNext Template. MIT Licensed.
+ + Demo Tour + + + Design System + GitHub - + Documentation - - - Report Issue - +
diff --git a/frontend/src/components/dev/DevLayout.tsx b/frontend/src/components/dev/DevLayout.tsx index bd59ab7..4d64c84 100644 --- a/frontend/src/components/dev/DevLayout.tsx +++ b/frontend/src/components/dev/DevLayout.tsx @@ -10,7 +10,7 @@ import Link from 'next/link'; import { usePathname } from 'next/navigation'; -import { Code2, Palette, LayoutDashboard, Box, FileText, BookOpen, Home } from 'lucide-react'; +import { Code2, Palette, LayoutDashboard, Box, FileText, BookOpen, Home, ArrowLeft, Rocket } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { Badge } from '@/components/ui/badge'; import { ThemeToggle } from '@/components/theme'; @@ -21,6 +21,12 @@ interface DevLayoutProps { } const navItems = [ + { + title: 'Home', + href: '/', + icon: ArrowLeft, + exact: true, + }, { title: 'Hub', href: '/dev', @@ -52,6 +58,11 @@ const navItems = [ href: '/dev/docs', icon: BookOpen, }, + { + title: 'Live Demos', + href: '/demos', + icon: Rocket, + }, ]; export function DevLayout({ children }: DevLayoutProps) { diff --git a/frontend/src/components/home/DemoCredentialsModal.tsx b/frontend/src/components/home/DemoCredentialsModal.tsx index a52fbb0..2c82d58 100644 --- a/frontend/src/components/home/DemoCredentialsModal.tsx +++ b/frontend/src/components/home/DemoCredentialsModal.tsx @@ -86,9 +86,15 @@ export function DemoCredentialsModal({ open, onClose }: DemoCredentialsModalProp Demo123!

-

- Access settings, organizations, and user features -

+
+

What you can access:

+ +
{/* Admin User Credentials */} @@ -120,21 +126,39 @@ export function DemoCredentialsModal({ open, onClose }: DemoCredentialsModalProp Admin123!

-

- Full admin panel access: user management, analytics, bulk operations -

+
+

What you can access:

+ +
- - - + +
+ + + + +
diff --git a/frontend/src/components/home/DemoSection.tsx b/frontend/src/components/home/DemoSection.tsx index 0780b54..7c425b1 100644 --- a/frontend/src/components/home/DemoSection.tsx +++ b/frontend/src/components/home/DemoSection.tsx @@ -7,37 +7,49 @@ import Link from 'next/link'; import { motion } from 'framer-motion'; -import { Play, Layers, ShieldCheck } from 'lucide-react'; +import { Play, Layers, ShieldCheck, UserCircle } from 'lucide-react'; import { Button } from '@/components/ui/button'; +import { Badge } from '@/components/ui/badge'; const demos = [ { icon: Layers, - title: 'Component Showcase', + title: 'Design System Hub', description: - 'Browse the complete design system, UI components, and interactive examples built with shadcn/ui and TailwindCSS', + 'Browse components, layouts, spacing, and forms with live examples built with shadcn/ui and TailwindCSS', href: '/dev', - cta: 'View Components', + cta: 'Explore Design System', variant: 'outline' as const, }, { icon: ShieldCheck, title: 'Authentication Flow', description: - 'Test the complete auth flow: login, session management, password reset. Full security implementation with JWT and refresh tokens', + 'Test login, registration, password reset, and session management with complete JWT security implementation', href: '/login', credentials: 'demo@example.com / Demo123!', - cta: 'Try Auth Demo', + cta: 'Try Auth Flow', variant: 'default' as const, }, + { + icon: UserCircle, + title: 'User Dashboard', + description: + 'Experience user settings, profile management, password changes, and active sessions monitoring', + href: '/settings', + credentials: 'demo@example.com / Demo123!', + cta: 'View User Features', + variant: 'outline' as const, + isNew: true, + }, { icon: Play, title: 'Admin Dashboard', description: - 'Experience the admin panel with user management, real-time analytics charts, bulk operations, and session monitoring', + 'Explore admin panel with user management, real-time analytics charts, bulk operations, and session monitoring', href: '/admin', credentials: 'admin@example.com / Admin123!', - cta: 'Launch Admin', + cta: 'Launch Admin Panel', variant: 'outline' as const, }, ]; @@ -59,7 +71,7 @@ export function DemoSection() {

-
+
{demos.map((demo, index) => ( - {/* Icon */} -
-
+ + {/* See All Demos CTA */} + + + ); } diff --git a/frontend/src/components/home/Header.tsx b/frontend/src/components/home/Header.tsx index bdc1596..3a6b2fb 100644 --- a/frontend/src/components/home/Header.tsx +++ b/frontend/src/components/home/Header.tsx @@ -19,7 +19,8 @@ export function Header({ onOpenDemoModal }: HeaderProps) { const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const navLinks = [ - { href: '/dev', label: 'Components' }, + { href: '/', label: 'Home' }, + { href: '/dev', label: 'Design System' }, { href: '/admin', label: 'Admin Demo' }, ];