cardosofelipe/syndarix
1
0
Fork 0
forked from cardosofelipe/fast-next-template
Code Issues 18 Pull Requests Wiki Activity

Redesign DemoSection with additional layout, content adjustments, and new demos

Browse Source 
- 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).
This commit is contained in:
Felipe Cardoso
2025-11-12 17:36:41 +01:00
parent 46ff95d8b9
commit 228d12b379
7 changed files with 484 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/components/dev/DevLayout.tsx
View File

@@ -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) {

54
frontend/src/components/home/DemoCredentialsModal.tsx
View File

@@ -86,9 +86,15 @@ export function DemoCredentialsModal({ open, onClose }: DemoCredentialsModalProp
<span className="text-foreground">Demo123!</span>
</p>
</div>
<p className="text-xs text-muted-foreground">
Access settings, organizations, and user features
</p>
<div className="space-y-1">
<p className="text-xs font-semibold text-muted-foreground">What you can access:</p>
<ul className="text-xs text-muted-foreground space-y-0.5 list-disc list-inside">
<li>User settings & profile</li>
<li>Password management</li>
<li>Active sessions</li>
<li>Personal preferences</li>
</ul>
</div>
</div>
{/* Admin User Credentials */}
@@ -120,21 +126,39 @@ export function DemoCredentialsModal({ open, onClose }: DemoCredentialsModalProp
<span className="text-foreground">Admin123!</span>
</p>
</div>
<p className="text-xs text-muted-foreground">
Full admin panel access: user management, analytics, bulk operations
</p>
<div className="space-y-1">
<p className="text-xs font-semibold text-muted-foreground">What you can access:</p>
<ul className="text-xs text-muted-foreground space-y-0.5 list-disc list-inside">
<li>Full admin dashboard</li>
<li>User management</li>
<li>Analytics & charts</li>
<li>Bulk operations</li>
</ul>
</div>
</div>
</div>
<DialogFooter className="flex flex-col sm:flex-row gap-2">
<Button variant="outline" onClick={onClose} className="w-full sm:w-auto">
Close
</Button>
<Button asChild className="w-full sm:w-auto">
<Link href="/login" onClick={onClose}>
Go to Login →
</Link>
</Button>
<DialogFooter>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2 w-full">
<Button asChild variant="default" className="w-full">
<Link href="/login" onClick={onClose}>
Login as User
</Link>
</Button>
<Button asChild variant="default" className="w-full">
<Link href="/login" onClick={onClose}>
Login as Admin
</Link>
</Button>
<Button asChild variant="outline" className="w-full">
<Link href="/demos" onClick={onClose}>
View Demo Tour
</Link>
</Button>
<Button variant="secondary" onClick={onClose} className="w-full">
Close
</Button>
</div>
</DialogFooter>
</DialogContent>
</Dialog>

58
frontend/src/components/home/DemoSection.tsx
View File

@@ -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() {
</p>
</motion.div>
<div className="grid md:grid-cols-3 gap-6 max-w-6xl mx-auto">
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-7xl mx-auto">
{demos.map((demo, index) => (
<motion.div
key={demo.title}
@@ -70,9 +82,16 @@ export function DemoSection() {
transition={{ duration: 0.5, delay: index * 0.1 }}
whileHover={{ y: -4 }}
>
{/* Icon */}
<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-gradient-to-br from-primary to-primary/60">
<demo.icon className="h-6 w-6 text-primary-foreground" aria-hidden="true" />
{/* Icon and Badge */}
<div className="flex items-start justify-between mb-4">
<div className="inline-flex h-12 w-12 items-center justify-center rounded-lg bg-gradient-to-br from-primary to-primary/60">
<demo.icon className="h-6 w-6 text-primary-foreground" aria-hidden="true" />
</div>
{demo.isNew && (
<Badge variant="default" className="text-xs">
NEW
</Badge>
)}
</div>
<h3 className="text-xl font-semibold mb-2">{demo.title}</h3>
@@ -91,6 +110,21 @@ export function DemoSection() {
</motion.div>
))}
</div>
{/* See All Demos CTA */}
<motion.div
className="text-center mt-12"
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: '-100px' }}
transition={{ duration: 0.6, delay: 0.4 }}
>
<Button asChild variant="outline" size="lg" className="gap-2">
<Link href="/demos">
View Complete Demo Tour →
</Link>
</Button>
</motion.div>
</section>
);
}

3
frontend/src/components/home/Header.tsx
View File

@@ -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' },
];