106 lines
4.5 KiB
TypeScript
106 lines
4.5 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import Link from 'next/link';
|
|
import { Button } from '@/components/ui/Button';
|
|
import { Badge } from '@/components/ui/Badge';
|
|
import { Card } from '@/components/ui/Card';
|
|
|
|
interface HeroProps {
|
|
t: any; // i18n translation function
|
|
}
|
|
|
|
export const Hero: React.FC<HeroProps> = ({ t }) => {
|
|
const templateCards = [
|
|
{ title: 'URL/Website', color: 'bg-blue-100', icon: '🌐' },
|
|
{ title: 'Contact Card', color: 'bg-purple-100', icon: '👤' },
|
|
{ title: 'Location', color: 'bg-green-100', icon: '📍' },
|
|
{ title: 'Phone Number', color: 'bg-pink-100', icon: '📞' },
|
|
];
|
|
|
|
return (
|
|
<section className="relative overflow-hidden bg-gradient-to-br from-blue-50 via-white to-purple-50 pt-12 pb-20">
|
|
{/* Animated Background Orbs */}
|
|
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
|
{/* Orb 1 - Blue (top-left) */}
|
|
<div className="absolute -top-24 -left-24 w-96 h-96 bg-blue-400/30 rounded-full blur-3xl animate-blob" />
|
|
|
|
{/* Orb 2 - Purple (top-right) */}
|
|
<div className="absolute -top-12 -right-12 w-96 h-96 bg-purple-400/30 rounded-full blur-3xl animate-blob animation-delay-2000" />
|
|
|
|
{/* Orb 3 - Pink (bottom-left) */}
|
|
<div className="absolute -bottom-24 -left-12 w-96 h-96 bg-pink-400/20 rounded-full blur-3xl animate-blob animation-delay-4000" />
|
|
|
|
{/* Orb 4 - Cyan (center-right) */}
|
|
<div className="absolute top-1/2 -right-24 w-80 h-80 bg-cyan-400/20 rounded-full blur-3xl animate-blob animation-delay-6000" />
|
|
</div>
|
|
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl relative z-10">
|
|
<div className="grid lg:grid-cols-2 gap-12 items-center">
|
|
{/* Left Content */}
|
|
<div className="space-y-8">
|
|
<Badge variant="info" className="inline-flex items-center space-x-2">
|
|
<span>{t.hero.badge}</span>
|
|
</Badge>
|
|
|
|
<div className="space-y-6">
|
|
<h1 className="text-5xl lg:text-6xl font-bold text-gray-900 leading-tight">
|
|
{t.hero.title}
|
|
</h1>
|
|
|
|
<p className="text-xl text-gray-600 leading-relaxed">
|
|
{t.hero.subtitle}
|
|
</p>
|
|
|
|
<div className="space-y-3">
|
|
{t.hero.features.map((feature: string, index: number) => (
|
|
<div key={index} className="flex items-center space-x-3">
|
|
<div className="flex-shrink-0 w-5 h-5 bg-success-500 rounded-full flex items-center justify-center">
|
|
<svg className="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
<span className="text-gray-700">{feature}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="flex flex-col sm:flex-row gap-4">
|
|
<Link href="/signup">
|
|
<Button size="lg" className="text-lg px-8 py-4 w-full sm:w-auto">
|
|
{t.hero.cta_primary}
|
|
</Button>
|
|
</Link>
|
|
<Link href="/#pricing">
|
|
<Button variant="outline" size="lg" className="text-lg px-8 py-4 w-full sm:w-auto">
|
|
{t.hero.cta_secondary}
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Preview Widget */}
|
|
<div className="relative">
|
|
<div className="grid grid-cols-2 gap-4">
|
|
{templateCards.map((card, index) => (
|
|
<Card key={index} className={`${card.color} border-0 p-6 text-center hover:scale-105 transition-transform`}>
|
|
<div className="text-3xl mb-2">{card.icon}</div>
|
|
<p className="font-semibold text-gray-800">{card.title}</p>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
|
|
{/* Floating Badge */}
|
|
<div className="absolute -top-4 -right-4 bg-success-500 text-white px-4 py-2 rounded-full text-sm font-semibold shadow-lg">
|
|
{t.hero.engagement_badge}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Smooth Gradient Fade Transition */}
|
|
<div className="absolute bottom-0 left-0 w-full h-32 bg-gradient-to-b from-transparent to-gray-50 pointer-events-none" />
|
|
</section>
|
|
);
|
|
}; |