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>
58 lines
2.6 KiB
TypeScript
58 lines
2.6 KiB
TypeScript
import { Button } from '@/components/ui/button'
|
|
|
|
export function HeroSection() {
|
|
return (
|
|
<section className="relative w-full flex justify-center py-12 md:py-20 lg:py-28 overflow-hidden">
|
|
{/* Background glow effect */}
|
|
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-[600px] bg-primary/20 rounded-full blur-[120px] -z-10 pointer-events-none" />
|
|
|
|
<div className="w-full max-w-[1280px] px-4 md:px-10 flex flex-col items-center z-10">
|
|
<div className="@container w-full max-w-[1000px]">
|
|
<div className="flex flex-col gap-8 items-center text-center">
|
|
{/* Hero image with gradient overlay */}
|
|
<div className="w-full h-[300px] md:h-[420px] rounded-xl overflow-hidden relative mb-4 shadow-2xl border border-border group">
|
|
<div
|
|
className="absolute inset-0 flex flex-col justify-center items-center p-6 bg-black/40 backdrop-blur-[2px]"
|
|
style={{
|
|
backgroundImage: 'linear-gradient(rgba(11, 11, 11, 0.3) 0%, rgba(11, 11, 11, 0.9) 100%), url("https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1200")',
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center',
|
|
}}
|
|
>
|
|
<h1 className="text-foreground text-4xl md:text-6xl lg:text-7xl font-black leading-tight tracking-tight mb-4 drop-shadow-lg">
|
|
Scale Your Business <br />
|
|
<span className="text-gradient">
|
|
with AI & Web
|
|
</span>
|
|
</h1>
|
|
<h2 className="text-gray-300 text-base md:text-xl font-normal leading-relaxed max-w-2xl drop-shadow-md">
|
|
Premium websites and intelligent automations starting at just 50€.{' '}
|
|
<br className="hidden md:block" />
|
|
Built for growth, designed for the future.
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
|
|
{/* CTA buttons */}
|
|
<div className="flex flex-wrap gap-4 justify-center mt-2">
|
|
<Button
|
|
size="lg"
|
|
className="glow-button bg-primary hover:bg-primary-glow text-white text-base font-bold h-12 px-8 rounded-lg"
|
|
>
|
|
Start Scaling
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="lg"
|
|
className="bg-card border border-border hover:border-gray-500 text-foreground text-base font-bold h-12 px-8 rounded-lg"
|
|
>
|
|
View Portfolio
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|