98552163a8
Complete frontend implementation with: - Next.js 16 with App Router and TypeScript - Tailwind CSS v4 with custom violet theme - shadcn/ui components with Lucide React icons - Landing page with hero, services, pricing, testimonials, FAQ - Service selection page with toggle - Login/Register pages with social auth UI - Multi-step checkout flow - Client dashboard with stats, projects, support tickets - Billing page with subscription, payment methods, invoices - All mock data and TypeScript types 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
49 lines
1.6 KiB
TypeScript
49 lines
1.6 KiB
TypeScript
import { Rocket } from 'lucide-react'
|
|
import { ReactNode } from 'react'
|
|
|
|
interface AuthLayoutProps {
|
|
children: ReactNode
|
|
title: string
|
|
subtitle: string
|
|
}
|
|
|
|
export function AuthLayout({ children, title, subtitle }: AuthLayoutProps) {
|
|
return (
|
|
<div className="min-h-screen flex flex-col lg:flex-row">
|
|
{/* Left side - Hero */}
|
|
<div className="lg:w-1/2 relative overflow-hidden">
|
|
<div
|
|
className="absolute inset-0 flex flex-col justify-center items-center p-12 bg-black/50"
|
|
style={{
|
|
backgroundImage: 'url("https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1200")',
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center',
|
|
}}
|
|
>
|
|
<div className="relative z-10 max-w-md text-center">
|
|
<div className="inline-flex items-center justify-center gap-3 mb-6">
|
|
<div className="size-12 flex items-center justify-center rounded-xl bg-gradient-to-br from-primary to-primary-glow text-white shadow-lg">
|
|
<Rocket className="w-7 h-7" />
|
|
</div>
|
|
<h1 className="text-white text-3xl font-bold">ScaleSite</h1>
|
|
</div>
|
|
<h2 className="text-white text-2xl md:text-3xl font-bold mb-4">
|
|
{title}
|
|
</h2>
|
|
<p className="text-gray-300 text-lg">
|
|
{subtitle}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right side - Form */}
|
|
<div className="lg:w-1/2 flex items-center justify-center p-8 lg:p-12 bg-background">
|
|
<div className="w-full max-w-md">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|