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>
</head>
<body className="font-sans antialiased">
<body className="font-sans antialiased dark bg-black text-white">
<AuthProvider>
<AppLayout>
<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">
{/* Left: Gradient panel with steps */}
<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 */}
<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>
@ -25,10 +25,10 @@ export function AuthPage() {
<div className="relative z-10 flex h-full flex-col justify-center">
<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>
<h2 className="text-4xl 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>
<h2 className="text-3xl text-center font-bold mb-3">Get Started with Us</h2>
<p className="text-white/80 text-center mb-10">Complete these easy steps to register your account.</p>
<div className="space-y-4">
{/* 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
if (isLoading) {
return (
<div className="min-h-screen flex items-center justify-center">
<div className="animate-spin rounded-full h-32 w-32 border-b-2 border-blue-600"></div>
<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-orange-500"></div>
</div>
)
}

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

@ -27,386 +27,46 @@ function TemplateSelectionStep({ onNext }: { onNext: (template: Template) => voi
const templates: Template[] = [
// 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: "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",
},
{ 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: "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)
{
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: "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",
},
{ 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: "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)
{
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: "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",
},
{ 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: "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 = [
{ 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: "software",
name: "Software & Tools",
icon: Code,
count: templates.filter((t) => t.category === "software").length,
},
{ id: "marketing", 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 },
]
@ -420,9 +80,9 @@ function TemplateSelectionStep({ onNext }: { onNext: (template: Template) => voi
})
const getComplexityColor = (complexity: number) => {
if (complexity <= 2) return "bg-green-100 text-green-800"
if (complexity <= 3) return "bg-yellow-100 text-yellow-800"
return "bg-red-100 text-red-800"
if (complexity <= 2) return "bg-emerald-900/40 text-emerald-300 border border-emerald-800"
if (complexity <= 3) return "bg-amber-900/40 text-amber-300 border border-amber-800"
return "bg-rose-900/40 text-rose-300 border border-rose-800"
}
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">
{/* Header */}
<div className="text-center space-y-3">
<h1 className="text-4xl font-bold text-gray-900">Choose Your Project Template</h1>
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
<h1 className="text-4xl font-bold text-white">Choose Your Project Template</h1>
<p className="text-xl text-white/60 max-w-3xl mx-auto">
Select from our comprehensive library of professionally designed templates
</p>
</div>
@ -444,12 +104,12 @@ function TemplateSelectionStep({ onNext }: { onNext: (template: Template) => voi
{/* Search and Filter */}
<div className="space-y-4">
<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
placeholder="Search templates, features, or technologies..."
value={searchQuery}
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>
@ -457,26 +117,23 @@ function TemplateSelectionStep({ onNext }: { onNext: (template: Template) => voi
<div className="flex flex-wrap justify-center gap-3">
{categories.map((category) => {
const Icon = category.icon
const active = selectedCategory === category.id
return (
<button
key={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 ${
selectedCategory === category.id
? "bg-gradient-to-r from-blue-600 to-blue-700 text-white border-blue-600 shadow-lg"
: "bg-white text-gray-700 border-gray-200 hover:border-blue-300 hover:shadow-md hover:bg-blue-50"
className={`flex items-center space-x-3 px-6 py-3 rounded-xl border transition-all ${
active
? "bg-orange-500 text-black border-orange-500"
: "bg-white/5 text-white/80 border-white/10 hover:bg-white/10"
}`}
>
<div className={`p-2 rounded-lg ${
selectedCategory === category.id
? "bg-white/20"
: "bg-blue-100 text-blue-600"
}`}>
<div className={`p-2 rounded-lg ${active ? "bg-black" : "bg-white/10"}`}>
<Icon className="h-5 w-5" />
</div>
<div className="text-left">
<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
</div>
</div>
@ -489,82 +146,73 @@ function TemplateSelectionStep({ onNext }: { onNext: (template: Template) => voi
{/* Templates Grid */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{filteredTemplates.map((template) => (
<Card
key={template.id}
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">
<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">
<div className="bg-white/5 px-4 py-4 border-b border-white/10">
<div className="flex items-start justify-between mb-2">
<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}
</CardTitle>
<div className="flex items-center space-x-2">
<Badge className={`${getComplexityColor(template.complexity)} font-medium px-3 py-1 rounded-full`}>
{getComplexityLabel(template.complexity)}
</Badge>
<Badge className={`${getComplexityColor(template.complexity)} font-medium px-3 py-1 rounded-full`}>{getComplexityLabel(template.complexity)}</Badge>
{template.popularity && (
<div className="flex items-center space-x-1 bg-white/70 px-2 py-1 rounded-full">
<Star className="h-4 w-4 text-yellow-500 fill-current" />
<span className="text-sm font-semibold text-gray-700">{template.popularity}%</span>
<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-amber-400 fill-current" />
<span className="text-sm font-semibold">{template.popularity}%</span>
</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>
<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">
{/* Stats Row */}
<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 justify-between text-sm bg-white/5 px-3 py-2 rounded-lg">
<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>
</div>
<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>
</div>
</div>
{/* Features Section */}
<div className="space-y-2">
<div>
<h4 className="font-semibold text-sm text-gray-800 mb-1 flex items-center">
<span className="w-2 h-2 bg-blue-500 rounded-full mr-2"></span>
<h4 className="font-semibold text-sm text-white mb-1 flex items-center">
<span className="w-2 h-2 bg-orange-500 rounded-full mr-2"></span>
Key Features
</h4>
<div className="flex flex-wrap gap-1">
{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}
</Badge>
))}
{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
</Badge>
)}
</div>
</div>
{/* Tech Stack Section */}
<div>
<h4 className="font-semibold text-sm text-gray-800 mb-1 flex items-center">
<span className="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
<h4 className="font-semibold text-sm text-white mb-1 flex items-center">
<span className="w-2 h-2 bg-emerald-500 rounded-full mr-2"></span>
Tech Stack
</h4>
<div className="flex flex-wrap gap-1">
{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}
</Badge>
))}
{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}
</Badge>
)}
@ -573,15 +221,11 @@ function TemplateSelectionStep({ onNext }: { onNext: (template: Template) => voi
</div>
</div>
{/* Action Button - Always at bottom */}
<div className="mt-4">
<Button
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"
>
<Button onClick={() => onNext(template)} className="w-full bg-orange-500 hover:bg-orange-400 text-black font-semibold py-2 rounded-lg shadow">
<span className="flex items-center justify-center cursor-pointer">
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>
</Button>
</div>
@ -591,19 +235,16 @@ function TemplateSelectionStep({ onNext }: { onNext: (template: Template) => voi
</div>
{/* 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">
<CardContent className="text-center py-16 px-8">
<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">
<Plus className="h-10 w-10 text-blue-600 group-hover:text-blue-700 transition-colors" />
<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 text-white/80">
<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-orange-400" />
</div>
<h3 className="text-2xl font-bold text-gray-800 mb-3 group-hover:text-blue-700 transition-colors">Create Custom Template</h3>
<p className="text-gray-600 mb-8 max-w-md mx-auto text-lg leading-relaxed">
<h3 className="text-2xl font-bold text-white mb-3">Create Custom Template</h3>
<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.
</p>
<Button
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"
>
<Button variant="outline" className="border-white/20 text-white hover:bg-white/10">
<Plus className="mr-2 h-5 w-5" />
Create Custom Template
</Button>
@ -613,7 +254,7 @@ function TemplateSelectionStep({ onNext }: { onNext: (template: Template) => voi
{/* Results Summary */}
{searchQuery && (
<div className="text-center py-4">
<p className="text-gray-600">
<p className="text-white/70">
Showing {filteredTemplates.length} template{filteredTemplates.length !== 1 ? "s" : ""}
{searchQuery && ` matching "${searchQuery}"`}
</p>
@ -633,8 +274,8 @@ function FeatureSelectionStep({
<div className="max-w-7xl mx-auto space-y-8">
{/* Header */}
<div className="text-center space-y-4">
<h1 className="text-4xl font-bold text-gray-900">Select Features for {template.title}</h1>
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
<h1 className="text-4xl font-bold text-white">Select Features for {template.title}</h1>
<p className="text-xl text-white/60 max-w-3xl mx-auto">
Choose the features that best fit your project requirements.
</p>
</div>
@ -642,18 +283,15 @@ function FeatureSelectionStep({
{/* Features List */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{template.features.map((feature, index) => (
<Card
key={index}
className="hover:shadow-xl transition-all duration-300 cursor-pointer group border-2 hover:border-blue-200"
>
<Card key={index} className="hover:shadow-xl transition-all duration-300 cursor-pointer group border-2 hover:border-orange-200 bg-white/5">
<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}
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<p className="text-gray-600 text-sm leading-relaxed">
<CardContent className="space-y-4 text-white/80">
<p className="text-white/80 text-sm leading-relaxed">
This feature enhances your project with {feature} capabilities.
</p>
</CardContent>
@ -664,10 +302,12 @@ function FeatureSelectionStep({
{/* Navigation Buttons */}
<div className="text-center py-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
</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>
@ -708,40 +348,46 @@ export function MainDashboard() {
) : null
case 3:
return (
<div className="text-center py-20">
<h2 className="text-2xl font-bold mb-4">Business Context Step</h2>
<p className="text-gray-600 mb-8">Coming soon - Define your business requirements and scaling needs</p>
<div className="text-center py-20 bg-white/5">
<h2 className="text-2xl font-bold mb-4 text-white">Business Context Step</h2>
<p className="text-white/60 mb-8">Coming soon - Define your business requirements and scaling needs</p>
<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
</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>
)
case 4:
return (
<div className="text-center py-20">
<h2 className="text-2xl font-bold mb-4">Generate Step</h2>
<p className="text-gray-600 mb-8">Coming soon - Generate your project architecture and code</p>
<div className="text-center py-20 bg-white/5">
<h2 className="text-2xl font-bold mb-4 text-white">Generate Step</h2>
<p className="text-white/60 mb-8">Coming soon - Generate your project architecture and code</p>
<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
</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>
)
case 5:
return (
<div className="text-center py-20">
<h2 className="text-2xl font-bold mb-4">Architecture Step</h2>
<p className="text-gray-600 mb-8">Coming soon - Review architecture and deploy your project</p>
<div className="text-center py-20 bg-white/5">
<h2 className="text-2xl font-bold mb-4 text-white">Architecture Step</h2>
<p className="text-white/60 mb-8">Coming soon - Review architecture and deploy your project</p>
<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
</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>
)
@ -751,24 +397,24 @@ export function MainDashboard() {
}
return (
<div className="min-h-screen bg-white">
<div className="min-h-screen bg-black">
{/* 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="py-4">
<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) => (
<li key={step.id} className="flex items-center">
<div className="flex items-center">
<div
className={`flex items-center justify-center w-10 h-10 rounded-full border-2 transition-all ${
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
? "border-blue-300 text-blue-600"
: "border-gray-300 text-gray-500"
? "border-orange-300 text-orange-400"
: "border-white/30 text-white/40"
}`}
>
<span className="text-sm font-semibold">{step.id}</span>
@ -776,17 +422,17 @@ export function MainDashboard() {
<div className="ml-4">
<p
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}
</p>
<p className="text-xs text-gray-500">{step.description}</p>
<p className="text-xs text-white/40">{step.description}</p>
</div>
</div>
{index < steps.length - 1 && (
<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>

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

@ -31,29 +31,29 @@ export default function Header() {
const { user, logout } = useAuth()
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="flex h-16 justify-between items-center">
{/* Logo */}
<div className="flex items-center">
<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">
<span className="text-white font-bold text-sm">C</span>
<div className="w-8 h-8 bg-orange-500 rounded-lg flex items-center justify-center">
<span className="text-black font-bold text-sm">C</span>
</div>
<span className="text-xl font-bold text-gray-900">Codenuk</span>
<span className="text-xl font-bold">Codenuk</span>
</Link>
</div>
{/* Desktop Navigation */}
<nav className="hidden md:flex space-x-8">
<nav className="hidden md:flex space-x-2">
{navigation.map((item) => (
<Link
key={item.name}
href={item.href}
className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
pathname === item.href
? "bg-blue-100 text-blue-700"
: "text-gray-600 hover:text-gray-900 hover:bg-gray-50"
? "bg-orange-500 text-black"
: "text-white/70 hover:text-white hover:bg-white/5"
}`}
>
{item.name}
@ -62,20 +62,18 @@ export default function Header() {
</nav>
{/* 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 */}
{!user ? (
<Link href="/auth">
<Button variant="outline" size="sm">
Sign In
</Button>
<Button size="sm" className="cursor-pointer">Sign In</Button>
</Link>
) : (
<>
{/* 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" />
<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
</Badge>
</Button>
@ -86,31 +84,31 @@ export default function Header() {
{user && (
<DropdownMenu>
<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">
<AvatarImage src={user.avatar || "/avatars/01.png"} alt={user.name} />
<AvatarFallback>{user.name.charAt(0).toUpperCase()}</AvatarFallback>
</Avatar>
</Button>
</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">
<div className="flex flex-col space-y-1">
<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>
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>
<DropdownMenuItem className="hover:bg-white/5 cursor-pointer">
<User className="mr-2 h-4 w-4" />
<span>Profile</span>
</DropdownMenuItem>
<DropdownMenuItem>
<DropdownMenuItem className="hover:bg-white/5 cursor-pointer">
<Settings className="mr-2 h-4 w-4" />
<span>Settings</span>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem onClick={logout}>
<DropdownMenuItem onClick={logout} className="hover:bg-white/5 cursor-pointer">
<LogOut className="mr-2 h-4 w-4" />
<span>Log out</span>
</DropdownMenuItem>
@ -119,7 +117,7 @@ export default function Header() {
)}
{/* 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" />}
</Button>
</div>
@ -128,15 +126,15 @@ export default function Header() {
{/* Mobile Navigation */}
{mobileMenuOpen && (
<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) => (
<Link
key={item.name}
href={item.href}
className={`block px-3 py-2 rounded-md text-base font-medium transition-colors ${
pathname === item.href
? "bg-blue-100 text-blue-700"
: "text-gray-600 hover:text-gray-900 hover:bg-gray-50"
? "bg-orange-500 text-black"
: "text-white/70 hover:text-white hover:bg-white/5"
}`}
onClick={() => setMobileMenuOpen(false)}
>

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

@ -194,9 +194,9 @@ export function TemplatesPage() {
})
const getComplexityColor = (complexity: number) => {
if (complexity <= 2) return "bg-green-100 text-green-800"
if (complexity <= 3) return "bg-yellow-100 text-yellow-800"
return "bg-red-100 text-red-800"
if (complexity <= 2) return "bg-emerald-900/40 text-emerald-300 border border-emerald-800"
if (complexity <= 3) return "bg-amber-900/40 text-amber-300 border border-amber-800"
return "bg-rose-900/40 text-rose-300 border border-rose-800"
}
const getComplexityLabel = (complexity: number) => {
@ -206,7 +206,7 @@ export function TemplatesPage() {
}
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">
<Image
src={template.preview || "/placeholder.svg"}
@ -216,10 +216,10 @@ export function TemplatesPage() {
className="w-full h-48 object-cover rounded-t-lg"
/>
<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" />
</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" />
</Button>
</div>
@ -228,25 +228,23 @@ export function TemplatesPage() {
<CardHeader className="pb-3">
<div className="flex items-start justify-between">
<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">
<Badge className={getComplexityColor(template.complexity)}>
{getComplexityLabel(template.complexity)}
</Badge>
<div className="flex items-center space-x-1 text-sm text-gray-500">
<Star className="h-4 w-4 text-yellow-500 fill-current" />
<Badge className={getComplexityColor(template.complexity)}>{getComplexityLabel(template.complexity)}</Badge>
<div className="flex items-center space-x-1 text-sm text-white/60">
<Star className="h-4 w-4 text-amber-400 fill-current" />
<span>{template.popularity}%</span>
</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>
<CardContent className="space-y-4">
<div className="flex items-center justify-between text-sm text-gray-500">
<CardContent className="space-y-4 text-white/80">
<div className="flex items-center justify-between text-sm">
<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>
</div>
<div className="flex items-center space-x-1">
@ -257,15 +255,15 @@ export function TemplatesPage() {
<div className="space-y-3">
<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">
{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}
</Badge>
))}
{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
</Badge>
)}
@ -273,10 +271,10 @@ export function TemplatesPage() {
</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">
{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}
</Badge>
))}
@ -285,19 +283,19 @@ export function TemplatesPage() {
</div>
<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
<ArrowRight className="ml-2 h-4 w-4" />
</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" />
</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" />
</Button>
</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>{template.lastUpdated}</span>
</div>
@ -306,12 +304,11 @@ export function TemplatesPage() {
)
return (
<div className="min-h-screen bg-gray-50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<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">
<Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-8">
<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="my-templates">My Templates</TabsTrigger>
<TabsTrigger value="favorites">Favorites</TabsTrigger>
@ -319,18 +316,18 @@ export function TemplatesPage() {
<div className="flex items-center space-x-4">
<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
placeholder="Search templates..."
value={searchQuery}
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>
<select
value={sortBy}
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="downloads">Most Downloaded</option>
@ -345,19 +342,20 @@ export function TemplatesPage() {
<div className="flex flex-wrap gap-4">
{categories.map((category) => {
const Icon = category.icon
const active = selectedCategory === category.id
return (
<button
key={category.id}
onClick={() => setSelectedCategory(category.id)}
className={`flex items-center space-x-2 px-4 py-2 rounded-lg border transition-all ${
selectedCategory === category.id
? "bg-blue-600 text-white border-blue-600"
: "bg-white text-gray-700 border-gray-200 hover:border-blue-300"
active
? "bg-orange-500 text-black border-orange-500"
: "bg-white/5 text-white/80 border-white/10 hover:bg-white/10"
}`}
>
<Icon className="h-4 w-4" />
<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}
</Badge>
</button>
@ -374,7 +372,7 @@ export function TemplatesPage() {
{/* Results Summary */}
<div className="text-center py-8">
<p className="text-gray-600">
<p className="text-white/70">
Showing {sortedTemplates.length} template{sortedTemplates.length !== 1 ? "s" : ""}
{searchQuery && ` matching "${searchQuery}"`}
</p>
@ -383,12 +381,12 @@ export function TemplatesPage() {
<TabsContent value="my-templates" className="space-y-8">
<div className="text-center py-20">
<Plus className="h-16 w-16 text-gray-400 mx-auto mb-6" />
<h3 className="text-2xl font-semibold text-gray-700 mb-3">No Templates Yet</h3>
<p className="text-gray-500 mb-6 max-w-md mx-auto">
<Plus className="h-16 w-16 text-white/40 mx-auto mb-6" />
<h3 className="text-2xl font-semibold text-white mb-3">No Templates Yet</h3>
<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.
</p>
<Button className="bg-blue-600 hover:bg-blue-700">
<Button>
<Plus className="mr-2 h-5 w-5" />
Create Your First Template
</Button>
@ -397,12 +395,12 @@ export function TemplatesPage() {
<TabsContent value="favorites" className="space-y-8">
<div className="text-center py-20">
<Heart className="h-16 w-16 text-gray-400 mx-auto mb-6" />
<h3 className="text-2xl font-semibold text-gray-700 mb-3">No Favorites Yet</h3>
<p className="text-gray-500 mb-6 max-w-md mx-auto">
<Heart className="h-16 w-16 text-white/40 mx-auto mb-6" />
<h3 className="text-2xl font-semibold text-white mb-3">No Favorites Yet</h3>
<p className="text-white/60 mb-6 max-w-md mx-auto">
Heart templates you like to save them here for quick access later.
</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
</Button>
</div>

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

@ -10,7 +10,7 @@ const buttonVariants = cva(
variants: {
variant: {
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:
"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:
@ -19,7 +19,7 @@ const buttonVariants = cva(
"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
ghost:
"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: {
default: "h-9 px-4 py-2 has-[>svg]:px-3",