prakash/codenuk_frontend_mine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated codebase

Browse Source
This commit is contained in:
tejas.prakash 2025-08-18 14:40:50 +05:30
parent 82b4fc9464
commit 5ffce5392a
7 changed files with 189 additions and 547 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/layout.tsx
View File

@ -32,7 +32,7 @@ html {
} }
`}</style> `}</style>
</head> </head>
<body className="font-sans antialiased"> <body className="font-sans antialiased dark bg-black text-white">
<AuthProvider> <AuthProvider>
<AppLayout> <AppLayout>
<main>{children}</main> <main>{children}</main>

8
src/components/auth/auth-page.tsx
View File

@ -12,7 +12,7 @@ export function AuthPage() {
<div className="w-full max-w-6xl grid grid-cols-1 lg:grid-cols-2 gap-10"> <div className="w-full max-w-6xl grid grid-cols-1 lg:grid-cols-2 gap-10">
{/* Left: Gradient panel with steps */} {/* Left: Gradient panel with steps */}
<div className="hidden lg:block"> <div className="hidden lg:block">
<div className="relative h-full rounded-3xl overflow-hidden border border-white/10 bg-gradient-to-b from-purple-500 via-purple-600 to-black p-10"> <div className="relative h-full rounded-3xl overflow-hidden border border-white/10 bg-gradient-to-b from-orange-400 via-orange-500 to-black p-10">
{/* subtle grain */} {/* subtle grain */}
<div className="pointer-events-none absolute inset-0 opacity-20 [mask-image:radial-gradient(ellipse_at_center,black_70%,transparent_100%)]"> <div className="pointer-events-none absolute inset-0 opacity-20 [mask-image:radial-gradient(ellipse_at_center,black_70%,transparent_100%)]">
<div className="w-full h-full bg-[radial-gradient(circle_at_1px_1px,rgba(255,255,255,0.12)_1px,transparent_0)] bg-[length:18px_18px]"></div> <div className="w-full h-full bg-[radial-gradient(circle_at_1px_1px,rgba(255,255,255,0.12)_1px,transparent_0)] bg-[length:18px_18px]"></div>
@ -25,10 +25,10 @@ export function AuthPage() {
<div className="relative z-10 flex h-full flex-col justify-center"> <div className="relative z-10 flex h-full flex-col justify-center">
<div className="mb-12"> <div className="mb-12">
<p className="text-4xl font-bold text-white/80">Codenuk</p> <p className="text-5xl font-bold text-center text-white/80">Codenuk</p>
</div> </div>
<h2 className="text-4xl font-bold mb-3">Get Started with Us</h2> <h2 className="text-3xl text-center font-bold mb-3">Get Started with Us</h2>
<p className="text-white/80 mb-10">Complete these easy steps to register your account.</p> <p className="text-white/80 text-center mb-10">Complete these easy steps to register your account.</p>
<div className="space-y-4"> <div className="space-y-4">
{/* Step 1 */} {/* Step 1 */}

4
src/components/layout/app-layout.tsx
View File

@ -18,8 +18,8 @@ export function AppLayout({ children }: AppLayoutProps) {
// Show loading state while checking auth // Show loading state while checking auth
if (isLoading) { if (isLoading) {
return ( return (
<div className="min-h-screen flex items-center justify-center"> <div className="min-h-screen flex items-center justify-center bg-black">
<div className="animate-spin rounded-full h-32 w-32 border-b-2 border-blue-600"></div> <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-orange-500"></div>
</div> </div>
) )
} }

586
src/components/main-dashboard.tsx
View File

@ -27,386 +27,46 @@ function TemplateSelectionStep({ onNext }: { onNext: (template: Template) => voi
const templates: Template[] = [ const templates: Template[] = [
// Marketing Templates (10) // Marketing Templates (10)
{ { id: "marketing-website", title: "Marketing Website", description: "Professional marketing site with CMS and lead generation", category: "marketing", features: ["Content Management", "Contact Forms", "SEO Optimization", "Analytics Integration"], complexity: 2, timeEstimate: "1-2 weeks", techStack: ["Next.js", "Sanity CMS", "Tailwind CSS", "Vercel"], popularity: 95, lastUpdated: "2024-01-15" },
id: "marketing-website", { id: "landing-page", title: "Landing Page", description: "High-converting landing page with A/B testing capabilities", category: "marketing", features: ["A/B Testing", "Conversion Tracking", "Lead Capture", "Mobile Optimization"], complexity: 2, timeEstimate: "3-5 days", techStack: ["Next.js", "Tailwind CSS", "Google Analytics", "Mailchimp"], popularity: 88, lastUpdated: "2024-01-10" },
title: "Marketing Website", { id: "blog-platform", title: "Blog Platform", description: "Content-rich blog with SEO optimization and social sharing", category: "marketing", features: ["Content Management", "SEO Tools", "Social Sharing", "Comment System"], complexity: 3, timeEstimate: "1-2 weeks", techStack: ["Next.js", "MDX", "Tailwind CSS", "Disqus"], popularity: 82, lastUpdated: "2024-01-12" },
description: "Professional marketing site with CMS and lead generation", { id: "portfolio-site", title: "Portfolio Website", description: "Personal or agency portfolio with project showcase", category: "marketing", features: ["Project Gallery", "Contact Forms", "Blog", "Responsive Design"], complexity: 2, timeEstimate: "1-2 weeks", techStack: ["Next.js", "MDX", "Tailwind CSS", "Framer Motion"], popularity: 79, lastUpdated: "2024-01-08" },
category: "marketing", { id: "agency-website", title: "Agency Website", description: "Full-service agency site with team profiles and case studies", category: "marketing", features: ["Team Profiles", "Case Studies", "Service Pages", "Client Testimonials"], complexity: 3, timeEstimate: "2-3 weeks", techStack: ["Next.js", "Strapi", "Tailwind CSS", "Framer Motion"], popularity: 76, lastUpdated: "2024-01-14" },
features: ["Content Management", "Contact Forms", "SEO Optimization", "Analytics Integration"], { id: "event-website", title: "Event Website", description: "Event promotion site with registration and ticketing", category: "marketing", features: ["Event Registration", "Ticketing", "Speaker Profiles", "Schedule Management"], complexity: 4, timeEstimate: "2-3 weeks", techStack: ["Next.js", "Stripe", "Calendar API", "Email Integration"], popularity: 73, lastUpdated: "2024-01-11" },
complexity: 2, { id: "restaurant-website", title: "Restaurant Website", description: "Restaurant site with menu, reservations, and online ordering", category: "marketing", features: ["Menu Display", "Online Reservations", "Order System", "Location Info"], complexity: 3, timeEstimate: "1-2 weeks", techStack: ["Next.js", "Reservation API", "Payment Processing", "Google Maps"], popularity: 70, lastUpdated: "2024-01-09" },
timeEstimate: "1-2 weeks", { id: "nonprofit-website", title: "Nonprofit Website", description: "Nonprofit organization site with donation and volunteer management", category: "marketing", features: ["Donation Processing", "Volunteer Registration", "Event Management", "Impact Tracking"], complexity: 3, timeEstimate: "2-3 weeks", techStack: ["Next.js", "Stripe", "Volunteer API", "Analytics"], popularity: 67, lastUpdated: "2024-01-13" },
techStack: ["Next.js", "Sanity CMS", "Tailwind CSS", "Vercel"], { id: "real-estate-website", title: "Real Estate Website", description: "Property listing site with search and contact features", category: "marketing", features: ["Property Listings", "Search Filters", "Contact Forms", "Virtual Tours"], complexity: 4, timeEstimate: "2-4 weeks", techStack: ["Next.js", "Property API", "Map Integration", "Image Gallery"], popularity: 64, lastUpdated: "2024-01-07" },
popularity: 95, { id: "personal-brand", title: "Personal Brand Site", description: "Personal branding site for professionals and creators", category: "marketing", features: ["About Page", "Services", "Testimonials", "Contact Integration"], complexity: 2, timeEstimate: "1 week", techStack: ["Next.js", "Tailwind CSS", "Contact Forms", "Social Links"], popularity: 61, lastUpdated: "2024-01-06" },
lastUpdated: "2024-01-15",
},
{
id: "landing-page",
title: "Landing Page",
description: "High-converting landing page with A/B testing capabilities",
category: "marketing",
features: ["A/B Testing", "Conversion Tracking", "Lead Capture", "Mobile Optimization"],
complexity: 2,
timeEstimate: "3-5 days",
techStack: ["Next.js", "Tailwind CSS", "Google Analytics", "Mailchimp"],
popularity: 88,
lastUpdated: "2024-01-10",
},
{
id: "blog-platform",
title: "Blog Platform",
description: "Content-rich blog with SEO optimization and social sharing",
category: "marketing",
features: ["Content Management", "SEO Tools", "Social Sharing", "Comment System"],
complexity: 3,
timeEstimate: "1-2 weeks",
techStack: ["Next.js", "MDX", "Tailwind CSS", "Disqus"],
popularity: 82,
lastUpdated: "2024-01-12",
},
{
id: "portfolio-site",
title: "Portfolio Website",
description: "Personal or agency portfolio with project showcase",
category: "marketing",
features: ["Project Gallery", "Contact Forms", "Blog", "Responsive Design"],
complexity: 2,
timeEstimate: "1-2 weeks",
techStack: ["Next.js", "MDX", "Tailwind CSS", "Framer Motion"],
popularity: 79,
lastUpdated: "2024-01-08",
},
{
id: "agency-website",
title: "Agency Website",
description: "Full-service agency site with team profiles and case studies",
category: "marketing",
features: ["Team Profiles", "Case Studies", "Service Pages", "Client Testimonials"],
complexity: 3,
timeEstimate: "2-3 weeks",
techStack: ["Next.js", "Strapi", "Tailwind CSS", "Framer Motion"],
popularity: 76,
lastUpdated: "2024-01-14",
},
{
id: "event-website",
title: "Event Website",
description: "Event promotion site with registration and ticketing",
category: "marketing",
features: ["Event Registration", "Ticketing", "Speaker Profiles", "Schedule Management"],
complexity: 4,
timeEstimate: "2-3 weeks",
techStack: ["Next.js", "Stripe", "Calendar API", "Email Integration"],
popularity: 73,
lastUpdated: "2024-01-11",
},
{
id: "restaurant-website",
title: "Restaurant Website",
description: "Restaurant site with menu, reservations, and online ordering",
category: "marketing",
features: ["Menu Display", "Online Reservations", "Order System", "Location Info"],
complexity: 3,
timeEstimate: "1-2 weeks",
techStack: ["Next.js", "Reservation API", "Payment Processing", "Google Maps"],
popularity: 70,
lastUpdated: "2024-01-09",
},
{
id: "nonprofit-website",
title: "Nonprofit Website",
description: "Nonprofit organization site with donation and volunteer management",
category: "marketing",
features: ["Donation Processing", "Volunteer Registration", "Event Management", "Impact Tracking"],
complexity: 3,
timeEstimate: "2-3 weeks",
techStack: ["Next.js", "Stripe", "Volunteer API", "Analytics"],
popularity: 67,
lastUpdated: "2024-01-13",
},
{
id: "real-estate-website",
title: "Real Estate Website",
description: "Property listing site with search and contact features",
category: "marketing",
features: ["Property Listings", "Search Filters", "Contact Forms", "Virtual Tours"],
complexity: 4,
timeEstimate: "2-4 weeks",
techStack: ["Next.js", "Property API", "Map Integration", "Image Gallery"],
popularity: 64,
lastUpdated: "2024-01-07",
},
{
id: "personal-brand",
title: "Personal Brand Site",
description: "Personal branding site for professionals and creators",
category: "marketing",
features: ["About Page", "Services", "Testimonials", "Contact Integration"],
complexity: 2,
timeEstimate: "1 week",
techStack: ["Next.js", "Tailwind CSS", "Contact Forms", "Social Links"],
popularity: 61,
lastUpdated: "2024-01-06",
},
// Software Templates (10) // Software Templates (10)
{ { id: "saas-platform", title: "SaaS Platform", description: "Complete SaaS application with user management, billing, and analytics", category: "software", features: ["User Authentication", "Payment Processing", "Analytics Integration", "API Management"], complexity: 5, timeEstimate: "4-6 weeks", techStack: ["Next.js", "PostgreSQL", "Stripe", "NextAuth.js"], popularity: 92, lastUpdated: "2024-01-15" },
id: "saas-platform", { id: "dashboard-app", title: "Analytics Dashboard", description: "Data visualization dashboard with real-time updates", category: "software", features: ["Data Visualization", "Real-time Updates", "User Authentication", "Export Features"], complexity: 4, timeEstimate: "3-4 weeks", techStack: ["Next.js", "Chart.js", "WebSockets", "PostgreSQL"], popularity: 89, lastUpdated: "2024-01-14" },
title: "SaaS Platform", { id: "mobile-app", title: "Mobile App (PWA)", description: "Progressive web app with mobile-first design", category: "software", features: ["Offline Support", "Push Notifications", "Mobile Optimization", "App Install"], complexity: 4, timeEstimate: "2-3 weeks", techStack: ["Next.js", "PWA", "Service Workers", "Push API"], popularity: 86, lastUpdated: "2024-01-13" },
description: "Complete SaaS application with user management, billing, and analytics", { id: "project-management", title: "Project Management Tool", description: "Team collaboration and project tracking application", category: "software", features: ["Task Management", "Team Collaboration", "Time Tracking", "Reporting"], complexity: 5, timeEstimate: "4-5 weeks", techStack: ["Next.js", "PostgreSQL", "Real-time Updates", "File Upload"], popularity: 83, lastUpdated: "2024-01-12" },
category: "software", { id: "crm-system", title: "CRM System", description: "Customer relationship management with sales pipeline", category: "software", features: ["Contact Management", "Sales Pipeline", "Email Integration", "Reporting"], complexity: 5, timeEstimate: "3-5 weeks", techStack: ["Next.js", "PostgreSQL", "Email API", "Calendar Integration"], popularity: 80, lastUpdated: "2024-01-11" },
features: ["User Authentication", "Payment Processing", "Analytics Integration", "API Management"], { id: "inventory-management", title: "Inventory Management", description: "Stock tracking and warehouse management system", category: "software", features: ["Stock Tracking", "Barcode Scanning", "Supplier Management", "Reports"], complexity: 4, timeEstimate: "3-4 weeks", techStack: ["Next.js", "PostgreSQL", "Barcode API", "PDF Generation"], popularity: 77, lastUpdated: "2024-01-10" },
complexity: 5, { id: "learning-platform", title: "Learning Management System", description: "Online education platform with courses and assessments", category: "software", features: ["Course Management", "Video Streaming", "Assessments", "Progress Tracking"], complexity: 5, timeEstimate: "4-6 weeks", techStack: ["Next.js", "Video API", "PostgreSQL", "Payment Processing"], popularity: 74, lastUpdated: "2024-01-09" },
timeEstimate: "4-6 weeks", { id: "booking-system", title: "Booking System", description: "Appointment and reservation management platform", category: "software", features: ["Calendar Integration", "Payment Processing", "Notifications", "Customer Management"], complexity: 4, timeEstimate: "2-4 weeks", techStack: ["Next.js", "Calendar API", "Stripe", "Email Integration"], popularity: 71, lastUpdated: "2024-01-08" },
techStack: ["Next.js", "PostgreSQL", "Stripe", "NextAuth.js"], { id: "chat-application", title: "Chat Application", description: "Real-time messaging platform with file sharing", category: "software", features: ["Real-time Messaging", "File Sharing", "Group Chats", "User Presence"], complexity: 4, timeEstimate: "2-3 weeks", techStack: ["Next.js", "WebSockets", "File Storage", "Real-time DB"], popularity: 68, lastUpdated: "2024-01-07" },
popularity: 92, { id: "api-platform", title: "API Platform", description: "RESTful API with documentation and rate limiting", category: "software", features: ["API Documentation", "Rate Limiting", "Authentication", "Monitoring"], complexity: 4, timeEstimate: "2-3 weeks", techStack: ["Next.js", "Swagger", "Redis", "Monitoring Tools"], popularity: 65, lastUpdated: "2024-01-06" },
lastUpdated: "2024-01-15",
},
{
id: "dashboard-app",
title: "Analytics Dashboard",
description: "Data visualization dashboard with real-time updates",
category: "software",
features: ["Data Visualization", "Real-time Updates", "User Authentication", "Export Features"],
complexity: 4,
timeEstimate: "3-4 weeks",
techStack: ["Next.js", "Chart.js", "WebSockets", "PostgreSQL"],
popularity: 89,
lastUpdated: "2024-01-14",
},
{
id: "mobile-app",
title: "Mobile App (PWA)",
description: "Progressive web app with mobile-first design",
category: "software",
features: ["Offline Support", "Push Notifications", "Mobile Optimization", "App Install"],
complexity: 4,
timeEstimate: "2-3 weeks",
techStack: ["Next.js", "PWA", "Service Workers", "Push API"],
popularity: 86,
lastUpdated: "2024-01-13",
},
{
id: "project-management",
title: "Project Management Tool",
description: "Team collaboration and project tracking application",
category: "software",
features: ["Task Management", "Team Collaboration", "Time Tracking", "Reporting"],
complexity: 5,
timeEstimate: "4-5 weeks",
techStack: ["Next.js", "PostgreSQL", "Real-time Updates", "File Upload"],
popularity: 83,
lastUpdated: "2024-01-12",
},
{
id: "crm-system",
title: "CRM System",
description: "Customer relationship management with sales pipeline",
category: "software",
features: ["Contact Management", "Sales Pipeline", "Email Integration", "Reporting"],
complexity: 5,
timeEstimate: "3-5 weeks",
techStack: ["Next.js", "PostgreSQL", "Email API", "Calendar Integration"],
popularity: 80,
lastUpdated: "2024-01-11",
},
{
id: "inventory-management",
title: "Inventory Management",
description: "Stock tracking and warehouse management system",
category: "software",
features: ["Stock Tracking", "Barcode Scanning", "Supplier Management", "Reports"],
complexity: 4,
timeEstimate: "3-4 weeks",
techStack: ["Next.js", "PostgreSQL", "Barcode API", "PDF Generation"],
popularity: 77,
lastUpdated: "2024-01-10",
},
{
id: "learning-platform",
title: "Learning Management System",
description: "Online education platform with courses and assessments",
category: "software",
features: ["Course Management", "Video Streaming", "Assessments", "Progress Tracking"],
complexity: 5,
timeEstimate: "4-6 weeks",
techStack: ["Next.js", "Video API", "PostgreSQL", "Payment Processing"],
popularity: 74,
lastUpdated: "2024-01-09",
},
{
id: "booking-system",
title: "Booking System",
description: "Appointment and reservation management platform",
category: "software",
features: ["Calendar Integration", "Payment Processing", "Notifications", "Customer Management"],
complexity: 4,
timeEstimate: "2-4 weeks",
techStack: ["Next.js", "Calendar API", "Stripe", "Email Integration"],
popularity: 71,
lastUpdated: "2024-01-08",
},
{
id: "chat-application",
title: "Chat Application",
description: "Real-time messaging platform with file sharing",
category: "software",
features: ["Real-time Messaging", "File Sharing", "Group Chats", "User Presence"],
complexity: 4,
timeEstimate: "2-3 weeks",
techStack: ["Next.js", "WebSockets", "File Storage", "Real-time DB"],
popularity: 68,
lastUpdated: "2024-01-07",
},
{
id: "api-platform",
title: "API Platform",
description: "RESTful API with documentation and rate limiting",
category: "software",
features: ["API Documentation", "Rate Limiting", "Authentication", "Monitoring"],
complexity: 4,
timeEstimate: "2-3 weeks",
techStack: ["Next.js", "Swagger", "Redis", "Monitoring Tools"],
popularity: 65,
lastUpdated: "2024-01-06",
},
// SEO Templates (10) // SEO Templates (10)
{ { id: "seo-optimized-blog", title: "SEO-Optimized Blog", description: "Blog platform with advanced SEO features and schema markup", category: "seo", features: ["Schema Markup", "Meta Optimization", "Sitemap Generation", "Performance Optimization"], complexity: 3, timeEstimate: "2-3 weeks", techStack: ["Next.js", "SEO Tools", "Schema.org", "Google Search Console"], popularity: 90, lastUpdated: "2024-01-15" },
id: "seo-optimized-blog", { id: "local-business-site", title: "Local Business Website", description: "Local SEO optimized site with Google My Business integration", category: "seo", features: ["Local SEO", "Google My Business", "Review Management", "Location Pages"], complexity: 3, timeEstimate: "1-2 weeks", techStack: ["Next.js", "Google APIs", "Review APIs", "Local Schema"], popularity: 87, lastUpdated: "2024-01-14" },
title: "SEO-Optimized Blog", { id: "ecommerce-seo", title: "E-commerce SEO Site", description: "Product-focused e-commerce with advanced SEO optimization", category: "seo", features: ["Product Schema", "Category Optimization", "Review Rich Snippets", "Performance"], complexity: 4, timeEstimate: "3-4 weeks", techStack: ["Next.js", "Product APIs", "Review Systems", "CDN"], popularity: 84, lastUpdated: "2024-01-13" },
description: "Blog platform with advanced SEO features and schema markup", { id: "news-website", title: "News Website", description: "News platform with article SEO and AMP support", category: "seo", features: ["Article Schema", "AMP Support", "Breaking News", "Social Sharing"], complexity: 4, timeEstimate: "2-4 weeks", techStack: ["Next.js", "AMP", "News APIs", "Social APIs"], popularity: 81, lastUpdated: "2024-01-12" },
category: "seo", { id: "directory-website", title: "Business Directory", description: "Local business directory with search and listings", category: "seo", features: ["Business Listings", "Search Optimization", "Category Pages", "Review System"], complexity: 4, timeEstimate: "3-4 weeks", techStack: ["Next.js", "Search APIs", "Location Services", "Review APIs"], popularity: 78, lastUpdated: "2024-01-11" },
features: ["Schema Markup", "Meta Optimization", "Sitemap Generation", "Performance Optimization"], { id: "recipe-website", title: "Recipe Website", description: "Recipe platform with rich snippets and cooking schema", category: "seo", features: ["Recipe Schema", "Nutrition Info", "Cooking Times", "User Ratings"], complexity: 3, timeEstimate: "2-3 weeks", techStack: ["Next.js", "Recipe APIs", "Nutrition APIs", "Rating System"], popularity: 75, lastUpdated: "2024-01-10" },
complexity: 3, { id: "job-board", title: "Job Board", description: "Job listing platform with structured data for search engines", category: "seo", features: ["Job Schema", "Search Filters", "Application Tracking", "Company Profiles"], complexity: 4, timeEstimate: "3-4 weeks", techStack: ["Next.js", "Job APIs", "Application System", "Company APIs"], popularity: 72, lastUpdated: "2024-01-09" },
timeEstimate: "2-3 weeks", { id: "review-website", title: "Review Website", description: "Product/service review platform with rich snippets", category: "seo", features: ["Review Schema", "Rating System", "Comparison Tools", "User Profiles"], complexity: 4, timeEstimate: "2-4 weeks", techStack: ["Next.js", "Review APIs", "Rating System", "Comparison Tools"], popularity: 69, lastUpdated: "2024-01-08" },
techStack: ["Next.js", "SEO Tools", "Schema.org", "Google Search Console"], { id: "travel-website", title: "Travel Website", description: "Travel guide with location-based SEO and booking integration", category: "seo", features: ["Location Schema", "Travel Guides", "Booking Integration", "Photo Galleries"], complexity: 4, timeEstimate: "3-4 weeks", techStack: ["Next.js", "Travel APIs", "Booking APIs", "Map Integration"], popularity: 66, lastUpdated: "2024-01-07" },
popularity: 90, { id: "healthcare-website", title: "Healthcare Website", description: "Medical practice website with health-focused SEO", category: "seo", features: ["Medical Schema", "Appointment Booking", "Health Articles", "Doctor Profiles"], complexity: 3, timeEstimate: "2-3 weeks", techStack: ["Next.js", "Medical APIs", "Booking System", "Content Management"], popularity: 63, lastUpdated: "2024-01-06" },
lastUpdated: "2024-01-15",
},
{
id: "local-business-site",
title: "Local Business Website",
description: "Local SEO optimized site with Google My Business integration",
category: "seo",
features: ["Local SEO", "Google My Business", "Review Management", "Location Pages"],
complexity: 3,
timeEstimate: "1-2 weeks",
techStack: ["Next.js", "Google APIs", "Review APIs", "Local Schema"],
popularity: 87,
lastUpdated: "2024-01-14",
},
{
id: "ecommerce-seo",
title: "E-commerce SEO Site",
description: "Product-focused e-commerce with advanced SEO optimization",
category: "seo",
features: ["Product Schema", "Category Optimization", "Review Rich Snippets", "Performance"],
complexity: 4,
timeEstimate: "3-4 weeks",
techStack: ["Next.js", "Product APIs", "Review Systems", "CDN"],
popularity: 84,
lastUpdated: "2024-01-13",
},
{
id: "news-website",
title: "News Website",
description: "News platform with article SEO and AMP support",
category: "seo",
features: ["Article Schema", "AMP Support", "Breaking News", "Social Sharing"],
complexity: 4,
timeEstimate: "2-4 weeks",
techStack: ["Next.js", "AMP", "News APIs", "Social APIs"],
popularity: 81,
lastUpdated: "2024-01-12",
},
{
id: "directory-website",
title: "Business Directory",
description: "Local business directory with search and listings",
category: "seo",
features: ["Business Listings", "Search Optimization", "Category Pages", "Review System"],
complexity: 4,
timeEstimate: "3-4 weeks",
techStack: ["Next.js", "Search APIs", "Location Services", "Review APIs"],
popularity: 78,
lastUpdated: "2024-01-11",
},
{
id: "recipe-website",
title: "Recipe Website",
description: "Recipe platform with rich snippets and cooking schema",
category: "seo",
features: ["Recipe Schema", "Nutrition Info", "Cooking Times", "User Ratings"],
complexity: 3,
timeEstimate: "2-3 weeks",
techStack: ["Next.js", "Recipe APIs", "Nutrition APIs", "Rating System"],
popularity: 75,
lastUpdated: "2024-01-10",
},
{
id: "job-board",
title: "Job Board",
description: "Job listing platform with structured data for search engines",
category: "seo",
features: ["Job Schema", "Search Filters", "Application Tracking", "Company Profiles"],
complexity: 4,
timeEstimate: "3-4 weeks",
techStack: ["Next.js", "Job APIs", "Application System", "Company APIs"],
popularity: 72,
lastUpdated: "2024-01-09",
},
{
id: "review-website",
title: "Review Website",
description: "Product/service review platform with rich snippets",
category: "seo",
features: ["Review Schema", "Rating System", "Comparison Tools", "User Profiles"],
complexity: 4,
timeEstimate: "2-4 weeks",
techStack: ["Next.js", "Review APIs", "Rating System", "Comparison Tools"],
popularity: 69,
lastUpdated: "2024-01-08",
},
{
id: "travel-website",
title: "Travel Website",
description: "Travel guide with location-based SEO and booking integration",
category: "seo",
features: ["Location Schema", "Travel Guides", "Booking Integration", "Photo Galleries"],
complexity: 4,
timeEstimate: "3-4 weeks",
techStack: ["Next.js", "Travel APIs", "Booking APIs", "Map Integration"],
popularity: 66,
lastUpdated: "2024-01-07",
},
{
id: "healthcare-website",
title: "Healthcare Website",
description: "Medical practice website with health-focused SEO",
category: "seo",
features: ["Medical Schema", "Appointment Booking", "Health Articles", "Doctor Profiles"],
complexity: 3,
timeEstimate: "2-3 weeks",
techStack: ["Next.js", "Medical APIs", "Booking System", "Content Management"],
popularity: 63,
lastUpdated: "2024-01-06",
},
] ]
const categories = [ const categories = [
{ id: "all", name: "All Templates", icon: Globe, count: templates.length }, { id: "all", name: "All Templates", icon: Globe, count: templates.length },
{ { id: "marketing", name: "Marketing & Branding", icon: Zap, count: templates.filter((t) => t.category === "marketing").length },
id: "marketing", { id: "software", name: "Software & Tools", icon: Code, count: templates.filter((t) => t.category === "software").length },
name: "Marketing & Branding",
icon: Zap,
count: templates.filter((t) => t.category === "marketing").length,
},
{
id: "software",
name: "Software & Tools",
icon: Code,
count: templates.filter((t) => t.category === "software").length,
},
{ id: "seo", name: "SEO & Content", icon: BarChart3, count: templates.filter((t) => t.category === "seo").length }, { id: "seo", name: "SEO & Content", icon: BarChart3, count: templates.filter((t) => t.category === "seo").length },
] ]
@ -420,9 +80,9 @@ function TemplateSelectionStep({ onNext }: { onNext: (template: Template) => voi
}) })
const getComplexityColor = (complexity: number) => { const getComplexityColor = (complexity: number) => {
if (complexity <= 2) return "bg-green-100 text-green-800" if (complexity <= 2) return "bg-emerald-900/40 text-emerald-300 border border-emerald-800"
if (complexity <= 3) return "bg-yellow-100 text-yellow-800" if (complexity <= 3) return "bg-amber-900/40 text-amber-300 border border-amber-800"
return "bg-red-100 text-red-800" return "bg-rose-900/40 text-rose-300 border border-rose-800"
} }
const getComplexityLabel = (complexity: number) => { const getComplexityLabel = (complexity: number) => {
@ -435,8 +95,8 @@ function TemplateSelectionStep({ onNext }: { onNext: (template: Template) => voi
<div className="max-w-7xl mx-auto space-y-6"> <div className="max-w-7xl mx-auto space-y-6">
{/* Header */} {/* Header */}
<div className="text-center space-y-3"> <div className="text-center space-y-3">
<h1 className="text-4xl font-bold text-gray-900">Choose Your Project Template</h1> <h1 className="text-4xl font-bold text-white">Choose Your Project Template</h1>
<p className="text-xl text-gray-600 max-w-3xl mx-auto"> <p className="text-xl text-white/60 max-w-3xl mx-auto">
Select from our comprehensive library of professionally designed templates Select from our comprehensive library of professionally designed templates
</p> </p>
</div> </div>
@ -444,12 +104,12 @@ function TemplateSelectionStep({ onNext }: { onNext: (template: Template) => voi
{/* Search and Filter */} {/* Search and Filter */}
<div className="space-y-4"> <div className="space-y-4">
<div className="max-w-2xl mx-auto relative"> <div className="max-w-2xl mx-auto relative">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5" /> <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-white/40 h-5 w-5" />
<Input <Input
placeholder="Search templates, features, or technologies..." placeholder="Search templates, features, or technologies..."
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
className="pl-10 h-12 text-lg border-2 border-gray-200 hover:border-blue-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 rounded-xl shadow-sm transition-all duration-300" className="pl-10 h-12 text-lg border border-white/10 bg-white/5 text-white placeholder:text-white/40 focus:border-white/30 focus:ring-white/30 rounded-xl"
/> />
</div> </div>
@ -457,26 +117,23 @@ function TemplateSelectionStep({ onNext }: { onNext: (template: Template) => voi
<div className="flex flex-wrap justify-center gap-3"> <div className="flex flex-wrap justify-center gap-3">
{categories.map((category) => { {categories.map((category) => {
const Icon = category.icon const Icon = category.icon
const active = selectedCategory === category.id
return ( return (
<button <button
key={category.id} key={category.id}
onClick={() => setSelectedCategory(category.id)} onClick={() => setSelectedCategory(category.id)}
className={`flex items-center space-x-3 px-6 py-4 rounded-xl border-2 transition-all duration-300 hover:scale-105 ${ className={`flex items-center space-x-3 px-6 py-3 rounded-xl border transition-all ${
selectedCategory === category.id active
? "bg-gradient-to-r from-blue-600 to-blue-700 text-white border-blue-600 shadow-lg" ? "bg-orange-500 text-black border-orange-500"
: "bg-white text-gray-700 border-gray-200 hover:border-blue-300 hover:shadow-md hover:bg-blue-50" : "bg-white/5 text-white/80 border-white/10 hover:bg-white/10"
}`} }`}
> >
<div className={`p-2 rounded-lg ${ <div className={`p-2 rounded-lg ${active ? "bg-black" : "bg-white/10"}`}>
selectedCategory === category.id
? "bg-white/20"
: "bg-blue-100 text-blue-600"
}`}>
<Icon className="h-5 w-5" /> <Icon className="h-5 w-5" />
</div> </div>
<div className="text-left"> <div className="text-left">
<div className="font-semibold">{category.name}</div> <div className="font-semibold">{category.name}</div>
<div className={`text-sm ${selectedCategory === category.id ? "opacity-90" : "opacity-75"}`}> <div className={`text-sm ${active ? "text-black/80" : "text-white/60"}`}>
{category.count} templates {category.count} templates
</div> </div>
</div> </div>
@ -489,82 +146,73 @@ function TemplateSelectionStep({ onNext }: { onNext: (template: Template) => voi
{/* Templates Grid */} {/* Templates Grid */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{filteredTemplates.map((template) => ( {filteredTemplates.map((template) => (
<Card <Card key={template.id} className="group bg-white/5 border-white/10 hover:border-white/20 rounded-xl shadow-sm hover:shadow-md transition-all">
key={template.id} <div className="bg-white/5 px-4 py-4 border-b border-white/10">
className="group cursor-pointer transition-all duration-300 hover:scale-[1.02] bg-white border border-gray-300 hover:border-blue-400 rounded-xl shadow-md hover:shadow-xl overflow-hidden"
>
{/* Card Header with gradient background */}
<div className="bg-white px-4 py-4 border-b border-gray-100">
<div className="flex items-start justify-between mb-2"> <div className="flex items-start justify-between mb-2">
<div className="space-y-2 flex-1"> <div className="space-y-2 flex-1">
<CardTitle className="text-xl font-bold text-gray-900 group-hover:text-blue-700 transition-colors line-clamp-2"> <CardTitle className="text-xl font-bold text-white group-hover:text-orange-400 transition-colors line-clamp-2">
{template.title} {template.title}
</CardTitle> </CardTitle>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<Badge className={`${getComplexityColor(template.complexity)} font-medium px-3 py-1 rounded-full`}> <Badge className={`${getComplexityColor(template.complexity)} font-medium px-3 py-1 rounded-full`}>{getComplexityLabel(template.complexity)}</Badge>
{getComplexityLabel(template.complexity)}
</Badge>
{template.popularity && ( {template.popularity && (
<div className="flex items-center space-x-1 bg-white/70 px-2 py-1 rounded-full"> <div className="flex items-center space-x-1 bg-white/10 px-2 py-1 rounded-full text-white/80">
<Star className="h-4 w-4 text-yellow-500 fill-current" /> <Star className="h-4 w-4 text-amber-400 fill-current" />
<span className="text-sm font-semibold text-gray-700">{template.popularity}%</span> <span className="text-sm font-semibold">{template.popularity}%</span>
</div> </div>
)} )}
</div> </div>
</div> </div>
</div> </div>
<p className="text-gray-700 text-sm leading-relaxed font-medium">{template.description}</p> <p className="text-white/80 text-sm leading-relaxed">{template.description}</p>
</div> </div>
<CardContent className="p-4 flex flex-col h-full"> <CardContent className="p-4 flex flex-col h-full text-white/80">
<div className="flex-1 space-y-4"> <div className="flex-1 space-y-4">
{/* Stats Row */} <div className="flex items-center justify-between text-sm bg-white/5 px-3 py-2 rounded-lg">
<div className="flex items-center justify-between text-sm text-gray-600 bg-gray-50 px-3 py-2 rounded-lg">
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<Clock className="h-4 w-4 text-blue-500" /> <Clock className="h-4 w-4 text-orange-400" />
<span className="font-medium">{template.timeEstimate}</span> <span className="font-medium">{template.timeEstimate}</span>
</div> </div>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<Layers className="h-4 w-4 text-green-500" /> <Layers className="h-4 w-4 text-emerald-400" />
<span className="font-medium">{template.features.length} features</span> <span className="font-medium">{template.features.length} features</span>
</div> </div>
</div> </div>
{/* Features Section */}
<div className="space-y-2"> <div className="space-y-2">
<div> <div>
<h4 className="font-semibold text-sm text-gray-800 mb-1 flex items-center"> <h4 className="font-semibold text-sm text-white mb-1 flex items-center">
<span className="w-2 h-2 bg-blue-500 rounded-full mr-2"></span> <span className="w-2 h-2 bg-orange-500 rounded-full mr-2"></span>
Key Features Key Features
</h4> </h4>
<div className="flex flex-wrap gap-1"> <div className="flex flex-wrap gap-1">
{template.features.slice(0, 3).map((feature, index) => ( {template.features.slice(0, 3).map((feature, index) => (
<Badge key={index} variant="outline" className="text-xs bg-blue-50 border-blue-200 text-blue-700 px-3 py-2 rounded-full"> <Badge key={index} variant="outline" className="text-xs bg-white/5 border-white/10 text-white/80 px-3 py-2 rounded-full">
{feature} {feature}
</Badge> </Badge>
))} ))}
{template.features.length > 3 && ( {template.features.length > 3 && (
<Badge variant="outline" className="text-xs bg-gray-50 border-gray-200 text-gray-600 px-3 py-2 rounded-full"> <Badge variant="outline" className="text-xs bg-white/5 border-white/10 text-white/70 px-3 py-2 rounded-full">
+{template.features.length - 3} more +{template.features.length - 3} more
</Badge> </Badge>
)} )}
</div> </div>
</div> </div>
{/* Tech Stack Section */}
<div> <div>
<h4 className="font-semibold text-sm text-gray-800 mb-1 flex items-center"> <h4 className="font-semibold text-sm text-white mb-1 flex items-center">
<span className="w-2 h-2 bg-green-500 rounded-full mr-2"></span> <span className="w-2 h-2 bg-emerald-500 rounded-full mr-2"></span>
Tech Stack Tech Stack
</h4> </h4>
<div className="flex flex-wrap gap-1"> <div className="flex flex-wrap gap-1">
{template.techStack.slice(0, 3).map((tech, index) => ( {template.techStack.slice(0, 3).map((tech, index) => (
<Badge key={index} variant="secondary" className="text-xs bg-green-50 text-green-700 px-3 py-1 rounded-full font-medium"> <Badge key={index} variant="secondary" className="text-xs bg-white/10 text-white px-3 py-1 rounded-full font-medium">
{tech} {tech}
</Badge> </Badge>
))} ))}
{template.techStack.length > 3 && ( {template.techStack.length > 3 && (
<Badge variant="secondary" className="text-xs bg-gray-50 text-gray-600 px-3 py-1 rounded-full"> <Badge variant="secondary" className="text-xs bg-white/10 text-white px-3 py-1 rounded-full">
+{template.techStack.length - 3} +{template.techStack.length - 3}
</Badge> </Badge>
)} )}
@ -573,15 +221,11 @@ function TemplateSelectionStep({ onNext }: { onNext: (template: Template) => voi
</div> </div>
</div> </div>
{/* Action Button - Always at bottom */}
<div className="mt-4"> <div className="mt-4">
<Button <Button onClick={() => onNext(template)} className="w-full bg-orange-500 hover:bg-orange-400 text-black font-semibold py-2 rounded-lg shadow">
onClick={() => onNext(template)}
className="w-full bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white font-semibold py-2 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 group-hover:shadow-2xl"
>
<span className="flex items-center justify-center cursor-pointer"> <span className="flex items-center justify-center cursor-pointer">
Select Template Select Template
<ArrowRight className="ml-2 h-4 w-4 group-hover:translate-x-1 transition-transform" /> <ArrowRight className="ml-2 h-4 w-4" />
</span> </span>
</Button> </Button>
</div> </div>
@ -591,19 +235,16 @@ function TemplateSelectionStep({ onNext }: { onNext: (template: Template) => voi
</div> </div>
{/* Custom Template Option */} {/* Custom Template Option */}
<Card className="group border-dashed border-2 border-gray-300 hover:border-blue-400 transition-all duration-300 hover:scale-[1.02] bg-gradient-to-br from-gray-50 to-blue-50 overflow-hidden"> <Card className="group border-dashed border-2 border-white/15 bg-white/5 hover:border-white/25 transition-all">
<CardContent className="text-center py-16 px-8"> <CardContent className="text-center py-16 px-8 text-white/80">
<div className="w-20 h-20 bg-gradient-to-br from-blue-100 to-indigo-100 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:from-blue-200 group-hover:to-indigo-200 transition-all duration-300"> <div className="w-20 h-20 bg-white/10 rounded-full flex items-center justify-center mx-auto mb-6">
<Plus className="h-10 w-10 text-blue-600 group-hover:text-blue-700 transition-colors" /> <Plus className="h-10 w-10 text-orange-400" />
</div> </div>
<h3 className="text-2xl font-bold text-gray-800 mb-3 group-hover:text-blue-700 transition-colors">Create Custom Template</h3> <h3 className="text-2xl font-bold text-white mb-3">Create Custom Template</h3>
<p className="text-gray-600 mb-8 max-w-md mx-auto text-lg leading-relaxed"> <p className="mb-8 max-w-md mx-auto text-lg leading-relaxed">
Don&apos;t see what you need? Create a custom project type with your specific requirements and tech stack. Don&apos;t see what you need? Create a custom project type with your specific requirements and tech stack.
</p> </p>
<Button <Button variant="outline" className="border-white/20 text-white hover:bg-white/10">
variant="outline"
className="border-2 border-blue-300 text-blue-700 hover:bg-blue-50 bg-white hover:border-blue-400 px-8 py-3 text-lg font-semibold rounded-lg shadow-md hover:shadow-lg transition-all duration-300 group-hover:shadow-xl"
>
<Plus className="mr-2 h-5 w-5" /> <Plus className="mr-2 h-5 w-5" />
Create Custom Template Create Custom Template
</Button> </Button>
@ -613,7 +254,7 @@ function TemplateSelectionStep({ onNext }: { onNext: (template: Template) => voi
{/* Results Summary */} {/* Results Summary */}
{searchQuery && ( {searchQuery && (
<div className="text-center py-4"> <div className="text-center py-4">
<p className="text-gray-600"> <p className="text-white/70">
Showing {filteredTemplates.length} template{filteredTemplates.length !== 1 ? "s" : ""} Showing {filteredTemplates.length} template{filteredTemplates.length !== 1 ? "s" : ""}
{searchQuery && ` matching "${searchQuery}"`} {searchQuery && ` matching "${searchQuery}"`}
</p> </p>
@ -633,8 +274,8 @@ function FeatureSelectionStep({
<div className="max-w-7xl mx-auto space-y-8"> <div className="max-w-7xl mx-auto space-y-8">
{/* Header */} {/* Header */}
<div className="text-center space-y-4"> <div className="text-center space-y-4">
<h1 className="text-4xl font-bold text-gray-900">Select Features for {template.title}</h1> <h1 className="text-4xl font-bold text-white">Select Features for {template.title}</h1>
<p className="text-xl text-gray-600 max-w-3xl mx-auto"> <p className="text-xl text-white/60 max-w-3xl mx-auto">
Choose the features that best fit your project requirements. Choose the features that best fit your project requirements.
</p> </p>
</div> </div>
@ -642,18 +283,15 @@ function FeatureSelectionStep({
{/* Features List */} {/* Features List */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{template.features.map((feature, index) => ( {template.features.map((feature, index) => (
<Card <Card key={index} className="hover:shadow-xl transition-all duration-300 cursor-pointer group border-2 hover:border-orange-200 bg-white/5">
key={index}
className="hover:shadow-xl transition-all duration-300 cursor-pointer group border-2 hover:border-blue-200"
>
<CardHeader className="pb-4"> <CardHeader className="pb-4">
<CardTitle className="text-xl group-hover:text-blue-600 transition-colors line-clamp-2"> <CardTitle className="text-xl group-hover:text-orange-400 transition-colors line-clamp-2 text-white">
{feature} {feature}
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-4 text-white/80">
<p className="text-gray-600 text-sm leading-relaxed"> <p className="text-white/80 text-sm leading-relaxed">
This feature enhances your project with {feature} capabilities. This feature enhances your project with {feature} capabilities.
</p> </p>
</CardContent> </CardContent>
@ -664,10 +302,12 @@ function FeatureSelectionStep({
{/* Navigation Buttons */} {/* Navigation Buttons */}
<div className="text-center py-4"> <div className="text-center py-4">
<div className="space-x-4"> <div className="space-x-4">
<Button variant="outline" onClick={onBack}> <Button variant="outline" onClick={onBack} className="border-white/20 text-white hover:bg-white/10">
Back Back
</Button> </Button>
<Button onClick={onNext}>Continue</Button> <Button onClick={onNext} className="bg-orange-500 hover:bg-orange-400 text-black font-semibold py-2 rounded-lg shadow">
Continue
</Button>
</div> </div>
</div> </div>
</div> </div>
@ -708,40 +348,46 @@ export function MainDashboard() {
) : null ) : null
case 3: case 3:
return ( return (
<div className="text-center py-20"> <div className="text-center py-20 bg-white/5">
<h2 className="text-2xl font-bold mb-4">Business Context Step</h2> <h2 className="text-2xl font-bold mb-4 text-white">Business Context Step</h2>
<p className="text-gray-600 mb-8">Coming soon - Define your business requirements and scaling needs</p> <p className="text-white/60 mb-8">Coming soon - Define your business requirements and scaling needs</p>
<div className="space-x-4"> <div className="space-x-4">
<Button variant="outline" onClick={() => setCurrentStep(2)}> <Button variant="outline" onClick={() => setCurrentStep(2)} className="border-white/20 text-white hover:bg-white/10">
Back Back
</Button> </Button>
<Button onClick={() => setCurrentStep(4)}>Continue</Button> <Button onClick={() => setCurrentStep(4)} className="bg-orange-500 hover:bg-orange-400 text-black font-semibold py-2 rounded-lg shadow">
Continue
</Button>
</div> </div>
</div> </div>
) )
case 4: case 4:
return ( return (
<div className="text-center py-20"> <div className="text-center py-20 bg-white/5">
<h2 className="text-2xl font-bold mb-4">Generate Step</h2> <h2 className="text-2xl font-bold mb-4 text-white">Generate Step</h2>
<p className="text-gray-600 mb-8">Coming soon - Generate your project architecture and code</p> <p className="text-white/60 mb-8">Coming soon - Generate your project architecture and code</p>
<div className="space-x-4"> <div className="space-x-4">
<Button variant="outline" onClick={() => setCurrentStep(3)}> <Button variant="outline" onClick={() => setCurrentStep(3)} className="border-white/20 text-white hover:bg-white/10">
Back Back
</Button> </Button>
<Button onClick={() => setCurrentStep(5)}>Continue</Button> <Button onClick={() => setCurrentStep(5)} className="bg-orange-500 hover:bg-orange-400 text-black font-semibold py-2 rounded-lg shadow">
Continue
</Button>
</div> </div>
</div> </div>
) )
case 5: case 5:
return ( return (
<div className="text-center py-20"> <div className="text-center py-20 bg-white/5">
<h2 className="text-2xl font-bold mb-4">Architecture Step</h2> <h2 className="text-2xl font-bold mb-4 text-white">Architecture Step</h2>
<p className="text-gray-600 mb-8">Coming soon - Review architecture and deploy your project</p> <p className="text-white/60 mb-8">Coming soon - Review architecture and deploy your project</p>
<div className="space-x-4"> <div className="space-x-4">
<Button variant="outline" onClick={() => setCurrentStep(4)}> <Button variant="outline" onClick={() => setCurrentStep(4)} className="border-white/20 text-white hover:bg-white/10">
Back Back
</Button> </Button>
<Button>Deploy Project</Button> <Button className="bg-orange-500 hover:bg-orange-400 text-black font-semibold py-2 rounded-lg shadow">
Deploy Project
</Button>
</div> </div>
</div> </div>
) )
@ -751,24 +397,24 @@ export function MainDashboard() {
} }
return ( return (
<div className="min-h-screen bg-white"> <div className="min-h-screen bg-black">
{/* Progress Steps */} {/* Progress Steps */}
<div className="bg-white border-b border-gray-200"> <div className="bg-white/5 border-b border-white/10">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="py-4"> <div className="py-4">
<nav className="flex justify-center"> <nav className="flex justify-center">
<ol className="flex items-center space-x-8"> <ol className="flex items-center space-x-8 text-white/60">
{steps.map((step, index) => ( {steps.map((step, index) => (
<li key={step.id} className="flex items-center"> <li key={step.id} className="flex items-center">
<div className="flex items-center"> <div className="flex items-center">
<div <div
className={`flex items-center justify-center w-10 h-10 rounded-full border-2 transition-all ${ className={`flex items-center justify-center w-10 h-10 rounded-full border-2 transition-all ${
currentStep >= step.id currentStep >= step.id
? "bg-blue-600 border-blue-600 text-white shadow-lg" ? "bg-orange-500 border-orange-500 text-white shadow-lg"
: currentStep === step.id - 1 : currentStep === step.id - 1
? "border-blue-300 text-blue-600" ? "border-orange-300 text-orange-400"
: "border-gray-300 text-gray-500" : "border-white/30 text-white/40"
}`} }`}
> >
<span className="text-sm font-semibold">{step.id}</span> <span className="text-sm font-semibold">{step.id}</span>
@ -776,17 +422,17 @@ export function MainDashboard() {
<div className="ml-4"> <div className="ml-4">
<p <p
className={`text-sm font-semibold ${ className={`text-sm font-semibold ${
currentStep >= step.id ? "text-blue-600" : "text-gray-500" currentStep >= step.id ? "text-orange-400" : "text-white/60"
}`} }`}
> >
{step.name} {step.name}
</p> </p>
<p className="text-xs text-gray-500">{step.description}</p> <p className="text-xs text-white/40">{step.description}</p>
</div> </div>
</div> </div>
{index < steps.length - 1 && ( {index < steps.length - 1 && (
<ArrowRight <ArrowRight
className={`ml-8 h-5 w-5 ${currentStep > step.id ? "text-blue-600" : "text-gray-400"}`} className={`ml-8 h-5 w-5 ${currentStep > step.id ? "text-orange-400" : "text-white/40"}`}
/> />
)} )}
</li> </li>

44
src/components/navigation/header.tsx
View File

@ -31,29 +31,29 @@ export default function Header() {
const { user, logout } = useAuth() const { user, logout } = useAuth()
return ( return (
<header className="bg-white shadow-sm border-b"> <header className="bg-black/80 text-white border-b border-white/10 backdrop-blur">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="flex h-16 justify-between items-center"> <div className="flex h-16 justify-between items-center">
{/* Logo */} {/* Logo */}
<div className="flex items-center"> <div className="flex items-center">
<Link href="/" className="flex items-center space-x-2"> <Link href="/" className="flex items-center space-x-2">
<div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center"> <div className="w-8 h-8 bg-orange-500 rounded-lg flex items-center justify-center">
<span className="text-white font-bold text-sm">C</span> <span className="text-black font-bold text-sm">C</span>
</div> </div>
<span className="text-xl font-bold text-gray-900">Codenuk</span> <span className="text-xl font-bold">Codenuk</span>
</Link> </Link>
</div> </div>
{/* Desktop Navigation */} {/* Desktop Navigation */}
<nav className="hidden md:flex space-x-8"> <nav className="hidden md:flex space-x-2">
{navigation.map((item) => ( {navigation.map((item) => (
<Link <Link
key={item.name} key={item.name}
href={item.href} href={item.href}
className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${ className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
pathname === item.href pathname === item.href
? "bg-blue-100 text-blue-700" ? "bg-orange-500 text-black"
: "text-gray-600 hover:text-gray-900 hover:bg-gray-50" : "text-white/70 hover:text-white hover:bg-white/5"
}`} }`}
> >
{item.name} {item.name}
@ -62,20 +62,18 @@ export default function Header() {
</nav> </nav>
{/* Right side */} {/* Right side */}
<div className="flex items-center space-x-4"> <div className="flex items-center space-x-4 cursor-pointer">
{/* Auth Button or User Menu */} {/* Auth Button or User Menu */}
{!user ? ( {!user ? (
<Link href="/auth"> <Link href="/auth">
<Button variant="outline" size="sm"> <Button size="sm" className="cursor-pointer">Sign In</Button>
Sign In
</Button>
</Link> </Link>
) : ( ) : (
<> <>
{/* Notifications */} {/* Notifications */}
<Button variant="ghost" size="sm" className="relative"> <Button variant="ghost" size="sm" className="relative text-white/80 hover:text-white hover:bg-white/5">
<Bell className="h-5 w-5" /> <Bell className="h-5 w-5" />
<Badge className="absolute -top-1 -right-1 h-5 w-5 rounded-full p-0 flex items-center justify-center text-xs"> <Badge className="absolute -top-1 -right-1 h-5 w-5 rounded-full p-0 flex items-center justify-center text-xs bg-orange-500 text-black">
3 3
</Badge> </Badge>
</Button> </Button>
@ -86,31 +84,31 @@ export default function Header() {
{user && ( {user && (
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button variant="ghost" className="relative h-8 w-8 rounded-full cursor-pointer"> <Button variant="ghost" className="relative h-8 w-8 rounded-full cursor-pointer hover:bg-white/5">
<Avatar className="h-8 w-8"> <Avatar className="h-8 w-8">
<AvatarImage src={user.avatar || "/avatars/01.png"} alt={user.name} /> <AvatarImage src={user.avatar || "/avatars/01.png"} alt={user.name} />
<AvatarFallback>{user.name.charAt(0).toUpperCase()}</AvatarFallback> <AvatarFallback>{user.name.charAt(0).toUpperCase()}</AvatarFallback>
</Avatar> </Avatar>
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent className="w-56" align="end" forceMount> <DropdownMenuContent className="w-56 bg-black text-white border-white/10" align="end" forceMount>
<DropdownMenuLabel className="font-normal"> <DropdownMenuLabel className="font-normal">
<div className="flex flex-col space-y-1"> <div className="flex flex-col space-y-1">
<p className="text-sm font-medium leading-none">{user.name}</p> <p className="text-sm font-medium leading-none">{user.name}</p>
<p className="text-xs leading-none text-muted-foreground">{user.email}</p> <p className="text-xs leading-none text-white/60">{user.email}</p>
</div> </div>
</DropdownMenuLabel> </DropdownMenuLabel>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<DropdownMenuItem> <DropdownMenuItem className="hover:bg-white/5 cursor-pointer">
<User className="mr-2 h-4 w-4" /> <User className="mr-2 h-4 w-4" />
<span>Profile</span> <span>Profile</span>
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem> <DropdownMenuItem className="hover:bg-white/5 cursor-pointer">
<Settings className="mr-2 h-4 w-4" /> <Settings className="mr-2 h-4 w-4" />
<span>Settings</span> <span>Settings</span>
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<DropdownMenuItem onClick={logout}> <DropdownMenuItem onClick={logout} className="hover:bg-white/5 cursor-pointer">
<LogOut className="mr-2 h-4 w-4" /> <LogOut className="mr-2 h-4 w-4" />
<span>Log out</span> <span>Log out</span>
</DropdownMenuItem> </DropdownMenuItem>
@ -119,7 +117,7 @@ export default function Header() {
)} )}
{/* Mobile menu button */} {/* Mobile menu button */}
<Button variant="ghost" size="sm" className="md:hidden" onClick={() => setMobileMenuOpen(!mobileMenuOpen)}> <Button variant="ghost" size="sm" className="md:hidden text-white/80 hover:text-white hover:bg-white/5" onClick={() => setMobileMenuOpen(!mobileMenuOpen)}>
{mobileMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />} {mobileMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
</Button> </Button>
</div> </div>
@ -128,15 +126,15 @@ export default function Header() {
{/* Mobile Navigation */} {/* Mobile Navigation */}
{mobileMenuOpen && ( {mobileMenuOpen && (
<div className="md:hidden"> <div className="md:hidden">
<div className="px-2 pt-2 pb-3 space-y-1 sm:px-3 border-t"> <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3 border-t border-white/10">
{navigation.map((item) => ( {navigation.map((item) => (
<Link <Link
key={item.name} key={item.name}
href={item.href} href={item.href}
className={`block px-3 py-2 rounded-md text-base font-medium transition-colors ${ className={`block px-3 py-2 rounded-md text-base font-medium transition-colors ${
pathname === item.href pathname === item.href
? "bg-blue-100 text-blue-700" ? "bg-orange-500 text-black"
: "text-gray-600 hover:text-gray-900 hover:bg-gray-50" : "text-white/70 hover:text-white hover:bg-white/5"
}`} }`}
onClick={() => setMobileMenuOpen(false)} onClick={() => setMobileMenuOpen(false)}
> >

88
src/components/templates/template-page.tsx
View File

@ -194,9 +194,9 @@ export function TemplatesPage() {
}) })
const getComplexityColor = (complexity: number) => { const getComplexityColor = (complexity: number) => {
if (complexity <= 2) return "bg-green-100 text-green-800" if (complexity <= 2) return "bg-emerald-900/40 text-emerald-300 border border-emerald-800"
if (complexity <= 3) return "bg-yellow-100 text-yellow-800" if (complexity <= 3) return "bg-amber-900/40 text-amber-300 border border-amber-800"
return "bg-red-100 text-red-800" return "bg-rose-900/40 text-rose-300 border border-rose-800"
} }
const getComplexityLabel = (complexity: number) => { const getComplexityLabel = (complexity: number) => {
@ -206,7 +206,7 @@ export function TemplatesPage() {
} }
const TemplateCard = ({ template }: { template: Template }) => ( const TemplateCard = ({ template }: { template: Template }) => (
<Card className="group hover:shadow-xl transition-all duration-300 border-2 hover:border-blue-200"> <Card className="group hover:shadow-md transition-all bg-white/5 border border-white/10">
<div className="relative"> <div className="relative">
<Image <Image
src={template.preview || "/placeholder.svg"} src={template.preview || "/placeholder.svg"}
@ -216,10 +216,10 @@ export function TemplatesPage() {
className="w-full h-48 object-cover rounded-t-lg" className="w-full h-48 object-cover rounded-t-lg"
/> />
<div className="absolute top-3 right-3 flex space-x-2"> <div className="absolute top-3 right-3 flex space-x-2">
<Button size="sm" variant="secondary" className="opacity-0 group-hover:opacity-100 transition-opacity"> <Button size="sm" variant="secondary" className="opacity-0 group-hover:opacity-100 transition-opacity bg-white/10 text-white hover:bg-white/20">
<Eye className="h-4 w-4" /> <Eye className="h-4 w-4" />
</Button> </Button>
<Button size="sm" variant="secondary" className="opacity-0 group-hover:opacity-100 transition-opacity"> <Button size="sm" variant="secondary" className="opacity-0 group-hover:opacity-100 transition-opacity bg-white/10 text-white hover:bg-white/20">
<Heart className="h-4 w-4" /> <Heart className="h-4 w-4" />
</Button> </Button>
</div> </div>
@ -228,25 +228,23 @@ export function TemplatesPage() {
<CardHeader className="pb-3"> <CardHeader className="pb-3">
<div className="flex items-start justify-between"> <div className="flex items-start justify-between">
<div className="space-y-2 flex-1"> <div className="space-y-2 flex-1">
<CardTitle className="text-lg group-hover:text-blue-600 transition-colors">{template.title}</CardTitle> <CardTitle className="text-lg text-white group-hover:text-orange-400 transition-colors">{template.title}</CardTitle>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<Badge className={getComplexityColor(template.complexity)}> <Badge className={getComplexityColor(template.complexity)}>{getComplexityLabel(template.complexity)}</Badge>
{getComplexityLabel(template.complexity)} <div className="flex items-center space-x-1 text-sm text-white/60">
</Badge> <Star className="h-4 w-4 text-amber-400 fill-current" />
<div className="flex items-center space-x-1 text-sm text-gray-500">
<Star className="h-4 w-4 text-yellow-500 fill-current" />
<span>{template.popularity}%</span> <span>{template.popularity}%</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<p className="text-gray-600 text-sm">{template.description}</p> <p className="text-white/70 text-sm">{template.description}</p>
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-4 text-white/80">
<div className="flex items-center justify-between text-sm text-gray-500"> <div className="flex items-center justify-between text-sm">
<div className="flex items-center space-x-1"> <div className="flex items-center space-x-1">
<Clock className="h-4 w-4" /> <Clock className="h-4 w-4 text-orange-400" />
<span>{template.timeEstimate}</span> <span>{template.timeEstimate}</span>
</div> </div>
<div className="flex items-center space-x-1"> <div className="flex items-center space-x-1">
@ -257,15 +255,15 @@ export function TemplatesPage() {
<div className="space-y-3"> <div className="space-y-3">
<div> <div>
<h4 className="font-medium text-sm text-gray-700 mb-2">Features:</h4> <h4 className="font-medium text-sm text-white mb-2">Features:</h4>
<div className="flex flex-wrap gap-1"> <div className="flex flex-wrap gap-1">
{template.features.slice(0, 2).map((feature, index) => ( {template.features.slice(0, 2).map((feature, index) => (
<Badge key={index} variant="outline" className="text-xs"> <Badge key={index} variant="outline" className="text-xs bg-white/5 border-white/10 text-white/80">
{feature} {feature}
</Badge> </Badge>
))} ))}
{template.features.length > 2 && ( {template.features.length > 2 && (
<Badge variant="outline" className="text-xs"> <Badge variant="outline" className="text-xs bg-white/5 border-white/10 text-white/70">
+{template.features.length - 2} more +{template.features.length - 2} more
</Badge> </Badge>
)} )}
@ -273,10 +271,10 @@ export function TemplatesPage() {
</div> </div>
<div> <div>
<h4 className="font-medium text-sm text-gray-700 mb-2">Tech Stack:</h4> <h4 className="font-medium text-sm text-white mb-2">Tech Stack:</h4>
<div className="flex flex-wrap gap-1"> <div className="flex flex-wrap gap-1">
{template.techStack.slice(0, 3).map((tech, index) => ( {template.techStack.slice(0, 3).map((tech, index) => (
<Badge key={index} variant="secondary" className="text-xs"> <Badge key={index} variant="secondary" className="text-xs bg-white/10 text-white">
{tech} {tech}
</Badge> </Badge>
))} ))}
@ -285,19 +283,19 @@ export function TemplatesPage() {
</div> </div>
<div className="flex space-x-2 pt-2"> <div className="flex space-x-2 pt-2">
<Button className="flex-1 bg-blue-600 hover:bg-blue-700"> <Button className="flex-1">
Use Template Use Template
<ArrowRight className="ml-2 h-4 w-4" /> <ArrowRight className="ml-2 h-4 w-4" />
</Button> </Button>
<Button variant="outline" size="sm"> <Button variant="outline" size="sm" className="border-white/20 text-white hover:bg-white/10">
<Copy className="h-4 w-4" /> <Copy className="h-4 w-4" />
</Button> </Button>
<Button variant="outline" size="sm"> <Button variant="outline" size="sm" className="border-white/20 text-white hover:bg-white/10">
<Share2 className="h-4 w-4" /> <Share2 className="h-4 w-4" />
</Button> </Button>
</div> </div>
<div className="flex items-center justify-between text-xs text-gray-500 pt-2 border-t"> <div className="flex items-center justify-between text-xs text-white/60 pt-2 border-t border-white/10">
<span>by {template.author}</span> <span>by {template.author}</span>
<span>{template.lastUpdated}</span> <span>{template.lastUpdated}</span>
</div> </div>
@ -306,12 +304,11 @@ export function TemplatesPage() {
) )
return ( return (
<div className="min-h-screen bg-gray-50"> <div className="min-h-screen bg-black">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 text-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-8"> <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-8">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<TabsList className="grid w-full max-w-md grid-cols-3"> <TabsList className="grid w-full max-w-md grid-cols-3 bg-white/5 border border-white/10">
<TabsTrigger value="browse">Browse Templates</TabsTrigger> <TabsTrigger value="browse">Browse Templates</TabsTrigger>
<TabsTrigger value="my-templates">My Templates</TabsTrigger> <TabsTrigger value="my-templates">My Templates</TabsTrigger>
<TabsTrigger value="favorites">Favorites</TabsTrigger> <TabsTrigger value="favorites">Favorites</TabsTrigger>
@ -319,18 +316,18 @@ export function TemplatesPage() {
<div className="flex items-center space-x-4"> <div className="flex items-center space-x-4">
<div className="relative"> <div className="relative">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" /> <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/40 h-4 w-4" />
<Input <Input
placeholder="Search templates..." placeholder="Search templates..."
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
className="pl-10 w-80" className="pl-10 w-80 bg-white/5 border-white/10 text-white placeholder:text-white/40"
/> />
</div> </div>
<select <select
value={sortBy} value={sortBy}
onChange={(e) => setSortBy(e.target.value)} onChange={(e) => setSortBy(e.target.value)}
className="px-3 py-2 border border-gray-300 rounded-md text-sm" className="px-3 py-2 border border-white/10 bg-white/5 rounded-md text-sm text-white"
> >
<option value="popularity">Most Popular</option> <option value="popularity">Most Popular</option>
<option value="downloads">Most Downloaded</option> <option value="downloads">Most Downloaded</option>
@ -345,19 +342,20 @@ export function TemplatesPage() {
<div className="flex flex-wrap gap-4"> <div className="flex flex-wrap gap-4">
{categories.map((category) => { {categories.map((category) => {
const Icon = category.icon const Icon = category.icon
const active = selectedCategory === category.id
return ( return (
<button <button
key={category.id} key={category.id}
onClick={() => setSelectedCategory(category.id)} onClick={() => setSelectedCategory(category.id)}
className={`flex items-center space-x-2 px-4 py-2 rounded-lg border transition-all ${ className={`flex items-center space-x-2 px-4 py-2 rounded-lg border transition-all ${
selectedCategory === category.id active
? "bg-blue-600 text-white border-blue-600" ? "bg-orange-500 text-black border-orange-500"
: "bg-white text-gray-700 border-gray-200 hover:border-blue-300" : "bg-white/5 text-white/80 border-white/10 hover:bg-white/10"
}`} }`}
> >
<Icon className="h-4 w-4" /> <Icon className="h-4 w-4" />
<span className="font-medium">{category.name}</span> <span className="font-medium">{category.name}</span>
<Badge variant="secondary" className="ml-1"> <Badge variant="secondary" className="ml-1 bg-white/10 text-white">
{category.count} {category.count}
</Badge> </Badge>
</button> </button>
@ -374,7 +372,7 @@ export function TemplatesPage() {
{/* Results Summary */} {/* Results Summary */}
<div className="text-center py-8"> <div className="text-center py-8">
<p className="text-gray-600"> <p className="text-white/70">
Showing {sortedTemplates.length} template{sortedTemplates.length !== 1 ? "s" : ""} Showing {sortedTemplates.length} template{sortedTemplates.length !== 1 ? "s" : ""}
{searchQuery && ` matching "${searchQuery}"`} {searchQuery && ` matching "${searchQuery}"`}
</p> </p>
@ -383,12 +381,12 @@ export function TemplatesPage() {
<TabsContent value="my-templates" className="space-y-8"> <TabsContent value="my-templates" className="space-y-8">
<div className="text-center py-20"> <div className="text-center py-20">
<Plus className="h-16 w-16 text-gray-400 mx-auto mb-6" /> <Plus className="h-16 w-16 text-white/40 mx-auto mb-6" />
<h3 className="text-2xl font-semibold text-gray-700 mb-3">No Templates Yet</h3> <h3 className="text-2xl font-semibold text-white mb-3">No Templates Yet</h3>
<p className="text-gray-500 mb-6 max-w-md mx-auto"> <p className="text-white/60 mb-6 max-w-md mx-auto">
Create your first template to get started. Templates you create will appear here. Create your first template to get started. Templates you create will appear here.
</p> </p>
<Button className="bg-blue-600 hover:bg-blue-700"> <Button>
<Plus className="mr-2 h-5 w-5" /> <Plus className="mr-2 h-5 w-5" />
Create Your First Template Create Your First Template
</Button> </Button>
@ -397,12 +395,12 @@ export function TemplatesPage() {
<TabsContent value="favorites" className="space-y-8"> <TabsContent value="favorites" className="space-y-8">
<div className="text-center py-20"> <div className="text-center py-20">
<Heart className="h-16 w-16 text-gray-400 mx-auto mb-6" /> <Heart className="h-16 w-16 text-white/40 mx-auto mb-6" />
<h3 className="text-2xl font-semibold text-gray-700 mb-3">No Favorites Yet</h3> <h3 className="text-2xl font-semibold text-white mb-3">No Favorites Yet</h3>
<p className="text-gray-500 mb-6 max-w-md mx-auto"> <p className="text-white/60 mb-6 max-w-md mx-auto">
Heart templates you like to save them here for quick access later. Heart templates you like to save them here for quick access later.
</p> </p>
<Button variant="outline" onClick={() => setActiveTab("browse")}> <Button variant="outline" onClick={() => setActiveTab("browse")} className="text-white border-white/20 hover:bg-white/10">
Browse Templates Browse Templates
</Button> </Button>
</div> </div>

4
src/components/ui/button.tsx
View File

@ -10,7 +10,7 @@ const buttonVariants = cva(
variants: { variants: {
variant: { variant: {
default: default:
"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90", "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 dark:bg-orange-500 dark:text-black dark:hover:bg-orange-400",
destructive: destructive:
"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60", "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
outline: outline:
@ -19,7 +19,7 @@ const buttonVariants = cva(
"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80", "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
ghost: ghost:
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50", "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
link: "text-primary underline-offset-4 hover:underline", link: "text-primary underline-offset-4 hover:underline dark:text-orange-400",
}, },
size: { size: {
default: "h-9 px-4 py-2 has-[>svg]:px-3", default: "h-9 px-4 py-2 has-[>svg]:px-3",