194 lines
8.6 KiB
TypeScript
194 lines
8.6 KiB
TypeScript
|
import Link from 'next/link'
|
||
|
|
import { Button } from '@/components/ui/button'
|
||
|
|
import { Heart, Users, Shield, MessageCircle, Calendar, Star } from 'lucide-react'
|
||
|
|
|
||
|
|
export default function HomePage() {
|
||
|
|
return (
|
||
|
|
<div className="min-h-screen bg-gradient-to-br from-pink-50 via-purple-50 to-indigo-50 dark:from-gray-900 dark:via-purple-900 dark:to-pink-900">
|
||
|
|
{/* Header */}
|
||
|
|
<header className="fixed top-0 w-full bg-white/80 dark:bg-gray-900/80 backdrop-blur-md z-50 border-b">
|
||
|
|
<div className="container mx-auto px-4 h-16 flex items-center justify-between">
|
||
|
|
<Link href="/" className="flex items-center space-x-2">
|
||
|
|
<Heart className="h-8 w-8 text-primary-500 fill-primary-500" />
|
||
|
|
<span className="text-2xl font-bold bg-gradient-to-r from-primary-500 to-pink-600 bg-clip-text text-transparent">
|
||
|
|
HotWives
|
||
|
|
</span>
|
||
|
|
</Link>
|
||
|
|
|
||
|
|
<nav className="hidden md:flex items-center space-x-6">
|
||
|
|
<Link href="/explore" className="hover:text-primary-500 transition">
|
||
|
|
Explorar
|
||
|
|
</Link>
|
||
|
|
<Link href="/events" className="hover:text-primary-500 transition">
|
||
|
|
Eventos
|
||
|
|
</Link>
|
||
|
|
<Link href="/about" className="hover:text-primary-500 transition">
|
||
|
|
Sobre
|
||
|
|
</Link>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<div className="flex items-center space-x-4">
|
||
|
|
<Link href="/login">
|
||
|
|
<Button variant="ghost">Entrar</Button>
|
||
|
|
</Link>
|
||
|
|
<Link href="/register">
|
||
|
|
<Button className="bg-primary-500 hover:bg-primary-600">
|
||
|
|
Cadastrar
|
||
|
|
</Button>
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
{/* Hero Section */}
|
||
|
|
<section className="pt-32 pb-20 px-4">
|
||
|
|
<div className="container mx-auto text-center">
|
||
|
|
<h1 className="text-5xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-primary-500 via-pink-500 to-purple-600 bg-clip-text text-transparent">
|
||
|
|
Conecte-se com Casais<br />de Forma Segura
|
||
|
|
</h1>
|
||
|
|
<p className="text-xl md:text-2xl text-gray-600 dark:text-gray-300 mb-8 max-w-3xl mx-auto">
|
||
|
|
A plataforma mais completa e discreta para casais que buscam novas experiências e conexões autênticas.
|
||
|
|
</p>
|
||
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||
|
|
<Link href="/register">
|
||
|
|
<Button size="lg" className="bg-primary-500 hover:bg-primary-600 text-lg px-8 py-6">
|
||
|
|
Começar Agora
|
||
|
|
</Button>
|
||
|
|
</Link>
|
||
|
|
<Link href="/explore">
|
||
|
|
<Button size="lg" variant="outline" className="text-lg px-8 py-6">
|
||
|
|
Explorar Perfis
|
||
|
|
</Button>
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
{/* Features */}
|
||
|
|
<section className="py-20 px-4 bg-white/50 dark:bg-gray-800/50">
|
||
|
|
<div className="container mx-auto">
|
||
|
|
<h2 className="text-4xl font-bold text-center mb-16">
|
||
|
|
Por que escolher o HotWives?
|
||
|
|
</h2>
|
||
|
|
|
||
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||
|
|
<div className="p-6 rounded-xl bg-white dark:bg-gray-900 shadow-lg hover:shadow-xl transition">
|
||
|
|
<Users className="h-12 w-12 text-primary-500 mb-4" />
|
||
|
|
<h3 className="text-xl font-bold mb-2">Perfis Verificados</h3>
|
||
|
|
<p className="text-gray-600 dark:text-gray-400">
|
||
|
|
Sistema de verificação rigoroso para garantir perfis autênticos e seguros.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="p-6 rounded-xl bg-white dark:bg-gray-900 shadow-lg hover:shadow-xl transition">
|
||
|
|
<Shield className="h-12 w-12 text-primary-500 mb-4" />
|
||
|
|
<h3 className="text-xl font-bold mb-2">Privacidade Total</h3>
|
||
|
|
<p className="text-gray-600 dark:text-gray-400">
|
||
|
|
Controle completo sobre quem pode ver suas fotos e informações pessoais.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="p-6 rounded-xl bg-white dark:bg-gray-900 shadow-lg hover:shadow-xl transition">
|
||
|
|
<MessageCircle className="h-12 w-12 text-primary-500 mb-4" />
|
||
|
|
<h3 className="text-xl font-bold mb-2">Chat em Tempo Real</h3>
|
||
|
|
<p className="text-gray-600 dark:text-gray-400">
|
||
|
|
Converse instantaneamente com outros casais de forma segura e privada.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="p-6 rounded-xl bg-white dark:bg-gray-900 shadow-lg hover:shadow-xl transition">
|
||
|
|
<Calendar className="h-12 w-12 text-primary-500 mb-4" />
|
||
|
|
<h3 className="text-xl font-bold mb-2">Eventos Exclusivos</h3>
|
||
|
|
<p className="text-gray-600 dark:text-gray-400">
|
||
|
|
Participe de eventos e encontros organizados pela comunidade.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="p-6 rounded-xl bg-white dark:bg-gray-900 shadow-lg hover:shadow-xl transition">
|
||
|
|
<Star className="h-12 w-12 text-primary-500 mb-4" />
|
||
|
|
<h3 className="text-xl font-bold mb-2">Busca Avançada</h3>
|
||
|
|
<p className="text-gray-600 dark:text-gray-400">
|
||
|
|
Encontre exatamente o que você procura com filtros inteligentes.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="p-6 rounded-xl bg-white dark:bg-gray-900 shadow-lg hover:shadow-xl transition">
|
||
|
|
<Heart className="h-12 w-12 text-primary-500 mb-4 fill-primary-500" />
|
||
|
|
<h3 className="text-xl font-bold mb-2">Comunidade Ativa</h3>
|
||
|
|
<p className="text-gray-600 dark:text-gray-400">
|
||
|
|
Milhares de casais conectados e novas oportunidades todos os dias.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
{/* CTA Section */}
|
||
|
|
<section className="py-20 px-4">
|
||
|
|
<div className="container mx-auto text-center">
|
||
|
|
<h2 className="text-4xl md:text-5xl font-bold mb-6">
|
||
|
|
Pronto para começar sua jornada?
|
||
|
|
</h2>
|
||
|
|
<p className="text-xl text-gray-600 dark:text-gray-300 mb-8 max-w-2xl mx-auto">
|
||
|
|
Junte-se a milhares de casais que já estão explorando novas possibilidades de forma segura e discreta.
|
||
|
|
</p>
|
||
|
|
<Link href="/register">
|
||
|
|
<Button size="lg" className="bg-primary-500 hover:bg-primary-600 text-lg px-12 py-6">
|
||
|
|
Criar Conta Grátis
|
||
|
|
</Button>
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
{/* Footer */}
|
||
|
|
<footer className="py-12 px-4 bg-gray-900 text-white">
|
||
|
|
<div className="container mx-auto">
|
||
|
|
<div className="grid md:grid-cols-4 gap-8">
|
||
|
|
<div>
|
||
|
|
<div className="flex items-center space-x-2 mb-4">
|
||
|
|
<Heart className="h-6 w-6 text-primary-500 fill-primary-500" />
|
||
|
|
<span className="text-xl font-bold">HotWives</span>
|
||
|
|
</div>
|
||
|
|
<p className="text-gray-400">
|
||
|
|
A plataforma mais completa para casais.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<h4 className="font-bold mb-4">Plataforma</h4>
|
||
|
|
<ul className="space-y-2 text-gray-400">
|
||
|
|
<li><Link href="/explore" className="hover:text-white">Explorar</Link></li>
|
||
|
|
<li><Link href="/events" className="hover:text-white">Eventos</Link></li>
|
||
|
|
<li><Link href="/premium" className="hover:text-white">Premium</Link></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<h4 className="font-bold mb-4">Suporte</h4>
|
||
|
|
<ul className="space-y-2 text-gray-400">
|
||
|
|
<li><Link href="/help" className="hover:text-white">Ajuda</Link></li>
|
||
|
|
<li><Link href="/safety" className="hover:text-white">Segurança</Link></li>
|
||
|
|
<li><Link href="/contact" className="hover:text-white">Contato</Link></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<h4 className="font-bold mb-4">Legal</h4>
|
||
|
|
<ul className="space-y-2 text-gray-400">
|
||
|
|
<li><Link href="/terms" className="hover:text-white">Termos de Uso</Link></li>
|
||
|
|
<li><Link href="/privacy" className="hover:text-white">Privacidade</Link></li>
|
||
|
|
<li><Link href="/cookies" className="hover:text-white">Cookies</Link></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
|
||
|
|
<p>© 2025 HotWives. Todos os direitos reservados.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|