Felipe Cardoso
63c171f83e
- Introduced `DemoSection`, showcasing live feature demos with interactive cards and test credentials for admin and auth flows. - Added `FeatureGrid` with dynamic animations, highlighting major application features like RBAC, documentation, and deployment readiness. - Built reusable `FeatureCard` for feature details, including icons, descriptions, and CTAs. - Implemented `TechStackSection` to display modern tools and technologies used in the stack with tooltips. - Updated dependencies: added `framer-motion`, `lucide-react`, and `react-syntax-highlighter`.
98 lines
3.4 KiB
TypeScript
98 lines
3.4 KiB
TypeScript
/**
|
|
* Demo Section
|
|
* Interactive demo cards showing live features with demo credentials
|
|
*/
|
|
|
|
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { motion } from 'framer-motion';
|
|
import { Play, Layers, ShieldCheck } from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
|
|
const demos = [
|
|
{
|
|
icon: Layers,
|
|
title: 'Component Showcase',
|
|
description:
|
|
'Browse the complete design system, UI components, and interactive examples built with shadcn/ui and TailwindCSS',
|
|
href: '/dev',
|
|
cta: 'View Components',
|
|
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',
|
|
href: '/login',
|
|
credentials: 'demo@example.com / Demo123!',
|
|
cta: 'Try Auth Demo',
|
|
variant: 'default' as const,
|
|
},
|
|
{
|
|
icon: Play,
|
|
title: 'Admin Dashboard',
|
|
description:
|
|
'Experience the admin panel with user management, real-time analytics charts, bulk operations, and session monitoring',
|
|
href: '/admin',
|
|
credentials: 'admin@example.com / Admin123!',
|
|
cta: 'Launch Admin',
|
|
variant: 'outline' as const,
|
|
},
|
|
];
|
|
|
|
export function DemoSection() {
|
|
return (
|
|
<section className="container mx-auto px-6 py-16 md:py-24 bg-muted/30">
|
|
<motion.div
|
|
className="text-center mb-12"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true, margin: '-100px' }}
|
|
transition={{ duration: 0.6 }}
|
|
>
|
|
<h2 className="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
|
|
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
|
|
Explore the template's capabilities with live demos. Login with demo credentials to test features.
|
|
</p>
|
|
</motion.div>
|
|
|
|
<div className="grid md:grid-cols-3 gap-6 max-w-6xl mx-auto">
|
|
{demos.map((demo, index) => (
|
|
<motion.div
|
|
key={demo.title}
|
|
className="rounded-lg border bg-card p-6 hover:shadow-lg transition-shadow"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true, margin: '-100px' }}
|
|
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" />
|
|
</div>
|
|
|
|
<h3 className="text-xl font-semibold mb-2">{demo.title}</h3>
|
|
<p className="text-muted-foreground mb-4 leading-relaxed">
|
|
{demo.description}
|
|
</p>
|
|
|
|
{demo.credentials && (
|
|
<div className="mb-4 p-3 rounded-md bg-muted font-mono text-xs border">
|
|
<div className="text-muted-foreground mb-1">Demo Credentials:</div>
|
|
<div className="text-foreground">{demo.credentials}</div>
|
|
</div>
|
|
)}
|
|
|
|
<Button asChild className="w-full" variant={demo.variant}>
|
|
<Link href={demo.href}>{demo.cta} →</Link>
|
|
</Button>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|