341 lines
20 KiB
TypeScript
341 lines
20 KiB
TypeScript
|
import { motion } from "motion/react";
|
||
|
|
import { ArrowRight, CheckCircle2, Sparkles, Feather, Activity, Target } from "lucide-react";
|
||
|
|
import { Link } from "react-router-dom";
|
||
|
|
import SEO from "../components/SEO";
|
||
|
|
|
||
|
|
const FADE_UP = {
|
||
|
|
hidden: { opacity: 0, y: 40 },
|
||
|
|
visible: { opacity: 1, y: 0, transition: { duration: 0.8, ease: "easeOut" } },
|
||
|
|
};
|
||
|
|
|
||
|
|
const STAGGER = {
|
||
|
|
visible: { transition: { staggerChildren: 0.2 } },
|
||
|
|
};
|
||
|
|
|
||
|
|
export default function Home() {
|
||
|
|
const schema = {
|
||
|
|
"@context": "https://schema.org",
|
||
|
|
"@type": "HealthAndBeautyBusiness",
|
||
|
|
"name": "Aurora Elite Wellness",
|
||
|
|
"image": "https://images.unsplash.com/photo-1518611012118-696072aa579a?q=80&w=2940&auto=format&fit=crop",
|
||
|
|
"description": "Mentoria e bem-estar para mulheres que buscam uma vida leve, saudável e sofisticada.",
|
||
|
|
"url": "https://aurorawellness.com",
|
||
|
|
"priceRange": "$$$"
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="w-full flex flex-col bg-[#FDFBF7]">
|
||
|
|
<SEO
|
||
|
|
title="Aurora Wellness | Elegância e Performance Feminina"
|
||
|
|
description="Mentoria e bem-estar para mulheres que buscam uma vida leve, saudável e sofisticada."
|
||
|
|
schema={schema}
|
||
|
|
/>
|
||
|
|
{/* 1. HERO SECTION */}
|
||
|
|
<section className="relative min-h-screen flex items-center pt-20 overflow-hidden">
|
||
|
|
{/* Background Image with Overlay */}
|
||
|
|
<div className="absolute inset-0 w-full z-0 h-full">
|
||
|
|
<div className="absolute inset-0 bg-gradient-to-r from-[#FDFBF7] from-30% via-[#FDFBF7]/90 via-60% to-transparent z-10 hidden lg:block"></div>
|
||
|
|
<div className="absolute inset-0 bg-[#FDFBF7]/40 z-10"></div>
|
||
|
|
<div className="absolute inset-0 bg-gradient-to-t from-[#FDFBF7] from-20% via-[#FDFBF7]/90 via-60% to-transparent z-10 lg:hidden"></div>
|
||
|
|
<img
|
||
|
|
src="https://images.unsplash.com/photo-1518611012118-696072aa579a?q=80&w=2940&auto=format&fit=crop"
|
||
|
|
alt="Elegância e Bem-estar"
|
||
|
|
className="w-full h-full object-cover object-[70%_top] opacity-70"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<motion.div
|
||
|
|
className="container mx-auto px-6 lg:px-12 flex-1 flex flex-col justify-center relative z-20 mt-12"
|
||
|
|
initial="hidden"
|
||
|
|
animate="visible"
|
||
|
|
variants={STAGGER}
|
||
|
|
>
|
||
|
|
<motion.div variants={FADE_UP} className="max-w-2xl relative">
|
||
|
|
<span className="text-[#D4BAB6] font-medium tracking-[0.2em] text-xs uppercase block mb-6 border-l pl-4 border-[#D4BAB6]">The Aurora Protocol</span>
|
||
|
|
<h1 className="text-5xl sm:text-6xl md:text-[90px] lg:text-[110px] leading-[0.9] font-serif tracking-normal text-[#333333] drop-shadow-sm">
|
||
|
|
Reencontre<br/><span className="text-[#A3918D] italic">Sua Essência.</span>
|
||
|
|
</h1>
|
||
|
|
|
||
|
|
<p className="max-w-md text-lg text-[#666666] font-light mt-8 leading-relaxed">
|
||
|
|
Transformação profunda e leveza para mulheres que desejam saúde, estética e performance, sem perder a elegância da vida.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div className="flex flex-col sm:flex-row items-start sm:items-center space-y-6 sm:space-y-0 sm:space-x-8 mt-12">
|
||
|
|
<Link
|
||
|
|
to="/contato"
|
||
|
|
className="w-full sm:w-auto bg-[#D4BAB6] text-white px-8 sm:px-10 py-4 text-[11px] font-medium uppercase tracking-[0.15em] hover:bg-[#C2A19D] transition-all transform hover:scale-[1.02] shadow-[0_10px_30px_rgba(212,186,182,0.3)] rounded-full text-center"
|
||
|
|
>
|
||
|
|
Inicie Sua Jornada
|
||
|
|
</Link>
|
||
|
|
<div className="flex items-center space-x-6">
|
||
|
|
<div className="flex items-center -space-x-3">
|
||
|
|
<img src="https://images.unsplash.com/photo-1524504388940-b1c1722653e1?w=100&h=100&fit=crop" alt="Client" className="w-10 h-10 rounded-full border-2 border-[#FDFBF7] z-30" />
|
||
|
|
<img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=100&h=100&fit=crop" alt="Client" className="w-10 h-10 rounded-full border-2 border-[#FDFBF7] z-20" />
|
||
|
|
<img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100&h=100&fit=crop" alt="Client" className="w-10 h-10 rounded-full border-2 border-[#FDFBF7] z-10" />
|
||
|
|
</div>
|
||
|
|
<div className="text-[10px] font-medium uppercase tracking-widest text-[#888888] leading-tight">
|
||
|
|
<span className="text-[#333333] text-base font-serif italic block">+200</span>
|
||
|
|
Mulheres Inspiradas
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
</motion.div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
{/* 2. SERVICES SECTION */}
|
||
|
|
<section className="py-32 bg-[#FAF5F0] relative z-10">
|
||
|
|
<div className="container mx-auto px-6 lg:px-12 max-w-7xl">
|
||
|
|
<motion.div
|
||
|
|
initial="hidden"
|
||
|
|
whileInView="visible"
|
||
|
|
viewport={{ once: true, margin: "-100px" }}
|
||
|
|
variants={STAGGER}
|
||
|
|
className="mb-20 text-center max-w-3xl mx-auto"
|
||
|
|
>
|
||
|
|
<h2 className="text-4xl sm:text-5xl md:text-[70px] leading-[1] font-serif tracking-normal text-[#333333] mb-6">
|
||
|
|
Método <span className="text-[#D4BAB6] italic">Aurora</span>
|
||
|
|
</h2>
|
||
|
|
<p className="text-[#666666] text-lg font-light leading-relaxed">
|
||
|
|
Um ecossistema criado para o bem-estar feminino. Cuidamos do seu corpo com a delicadeza e a precisão que ele merece.
|
||
|
|
</p>
|
||
|
|
</motion.div>
|
||
|
|
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||
|
|
{/* Card 1 */}
|
||
|
|
<motion.div variants={FADE_UP} className="bg-white rounded-2xl p-10 flex flex-col items-center text-center shadow-sm border border-[#E8DCC4]/40 hover:shadow-xl transition-all duration-500 group">
|
||
|
|
<div className="w-16 h-16 bg-[#FDFBF7] rounded-full flex items-center justify-center mb-8 group-hover:scale-110 transition-transform duration-500">
|
||
|
|
<Sparkles className="w-6 h-6 text-[#D4BAB6]" strokeWidth={1.5} />
|
||
|
|
</div>
|
||
|
|
<h3 className="text-2xl font-serif text-[#333333] mb-4">Estética Suave</h3>
|
||
|
|
<p className="text-[#666666] font-light text-sm leading-relaxed mb-8 flex-grow">
|
||
|
|
Programas de treino voltados para tonificação, saúde pélvica e fluidez de movimento.
|
||
|
|
</p>
|
||
|
|
</motion.div>
|
||
|
|
|
||
|
|
{/* Card 2 */}
|
||
|
|
<motion.div variants={FADE_UP} className="bg-white rounded-2xl p-10 flex flex-col items-center text-center shadow-sm border border-[#E8DCC4]/40 hover:shadow-xl transition-all duration-500 group">
|
||
|
|
<div className="w-16 h-16 bg-[#FDFBF7] rounded-full flex items-center justify-center mb-8 group-hover:scale-110 transition-transform duration-500">
|
||
|
|
<Feather className="w-6 h-6 text-[#D4BAB6]" strokeWidth={1.5} />
|
||
|
|
</div>
|
||
|
|
<h3 className="text-2xl font-serif text-[#333333] mb-4">Nutrição Leve</h3>
|
||
|
|
<p className="text-[#666666] font-light text-sm leading-relaxed mb-8 flex-grow">
|
||
|
|
Sem restrições extremas. Alimentação baseada em intuição, nutrientes e prazer diário.
|
||
|
|
</p>
|
||
|
|
</motion.div>
|
||
|
|
|
||
|
|
{/* Card 3 */}
|
||
|
|
<motion.div variants={FADE_UP} className="bg-[#D4BAB6] rounded-2xl p-10 flex flex-col items-center text-center shadow-md transform md:-translate-y-4 hover:shadow-xl transition-all duration-500">
|
||
|
|
<div className="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mb-8">
|
||
|
|
<Target className="w-6 h-6 text-white" strokeWidth={1.5} />
|
||
|
|
</div>
|
||
|
|
<h3 className="text-2xl font-serif text-white mb-4">Mentoria Premium</h3>
|
||
|
|
<p className="text-white/90 font-light text-sm leading-relaxed mb-8 flex-grow">
|
||
|
|
Acompanhamento diário (1:1) com nossa equipe para garantir que sua jornada seja perfeita.
|
||
|
|
</p>
|
||
|
|
<Link to="/contato" className="bg-white text-[#D4BAB6] rounded-full px-8 py-3 text-[10px] font-medium uppercase tracking-widest hover:bg-[#FDFBF7] transition-colors w-full">
|
||
|
|
Saber Mais
|
||
|
|
</Link>
|
||
|
|
</motion.div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
{/* 3. TRANSFORMATIONS SECTION */}
|
||
|
|
<section id="historias-reais" className="py-32 bg-[#FDFBF7] relative z-10">
|
||
|
|
|
||
|
|
<div className="container mx-auto px-6 lg:px-12 max-w-7xl">
|
||
|
|
<motion.div
|
||
|
|
initial="hidden"
|
||
|
|
whileInView="visible"
|
||
|
|
viewport={{ once: true, margin: "-100px" }}
|
||
|
|
variants={STAGGER}
|
||
|
|
className="text-center mb-24 max-w-3xl mx-auto"
|
||
|
|
>
|
||
|
|
<span className="text-[#D4BAB6] font-medium tracking-[0.2em] text-xs uppercase block mb-4">Histórias Reais</span>
|
||
|
|
<h2 className="text-4xl sm:text-5xl md:text-[70px] leading-[1] font-serif tracking-normal text-[#333333] mb-6">
|
||
|
|
Elegância é se sentir<br/><span className="text-[#A3918D] italic">bem na própria pele.</span>
|
||
|
|
</h2>
|
||
|
|
</motion.div>
|
||
|
|
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 lg:gap-16">
|
||
|
|
{[
|
||
|
|
{
|
||
|
|
name: "Carolina Soares",
|
||
|
|
stats: "Descobrindo a confiança após a maternidade.",
|
||
|
|
before: "https://images.unsplash.com/photo-1571019614242-c5c5dee9f50b?q=80&w=800&auto=format&fit=crop",
|
||
|
|
after: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=800&auto=format&fit=crop"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "Mariana Lemos",
|
||
|
|
stats: "Bem-estar, leveza e mais energia para o dia a dia.",
|
||
|
|
before: "https://images.unsplash.com/photo-1542596594-649edbc13630?q=80&w=800&auto=format&fit=crop",
|
||
|
|
after: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=800&auto=format&fit=crop"
|
||
|
|
}
|
||
|
|
].map((item, index) => (
|
||
|
|
<motion.div
|
||
|
|
key={index}
|
||
|
|
variants={FADE_UP}
|
||
|
|
initial="hidden"
|
||
|
|
whileInView="visible"
|
||
|
|
viewport={{ once: true }}
|
||
|
|
className="group flex flex-col"
|
||
|
|
>
|
||
|
|
<div className="relative aspect-[3/4] sm:aspect-square bg-[#FAF5F0] overflow-hidden rounded-2xl mb-8 flex group-hover:shadow-2xl transition-all duration-700">
|
||
|
|
<div className="w-1/2 h-full relative border-r border-white/50 opacity-90 transition-all duration-700">
|
||
|
|
<span className="absolute top-4 left-4 text-[9px] uppercase font-medium tracking-widest text-[#666666] bg-white/80 backdrop-blur-sm rounded-full px-3 py-1 shadow-sm">Antes</span>
|
||
|
|
<img src={item.before} className="w-full h-full object-cover" alt="Antes" />
|
||
|
|
</div>
|
||
|
|
<div className="w-1/2 h-full relative transition-all duration-700">
|
||
|
|
<span className="absolute top-4 right-4 text-[9px] uppercase font-medium tracking-widest text-white bg-[#D4BAB6]/90 backdrop-blur-sm rounded-full px-3 py-1 shadow-sm z-10">Depois</span>
|
||
|
|
<img src={item.after} className="w-full h-full object-cover" alt="Depois" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="text-center">
|
||
|
|
<h4 className="text-2xl font-serif text-[#333333] mb-2">{item.name}</h4>
|
||
|
|
<p className="text-[#888888] text-sm font-light italic">{item.stats}</p>
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
{/* 3.B TESTIMONIALS SECTION */}
|
||
|
|
<section className="py-24 bg-[#E8DCC4]/20 relative z-10 border-t border-[#E8DCC4]/30">
|
||
|
|
<div className="container mx-auto px-6 lg:px-12 max-w-5xl">
|
||
|
|
<motion.div
|
||
|
|
initial="hidden"
|
||
|
|
whileInView="visible"
|
||
|
|
viewport={{ once: true, margin: "-100px" }}
|
||
|
|
variants={STAGGER}
|
||
|
|
className="grid grid-cols-1 md:grid-cols-2 gap-12"
|
||
|
|
>
|
||
|
|
{[
|
||
|
|
{
|
||
|
|
quote: "O método não mudou apenas meu corpo, mas a forma como me vejo. Encontrei uma leveza que não sentia há anos.",
|
||
|
|
author: "Juliana T.",
|
||
|
|
role: "Aluna Mentoria Premium"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
quote: "Finalmente um acompanhamento que entende a rotina da mulher real. Resultados incríveis sem perder o prazer de viver.",
|
||
|
|
author: "Fernanda M.",
|
||
|
|
role: "Aluna Essência"
|
||
|
|
}
|
||
|
|
].map((testimonial, index) => (
|
||
|
|
<motion.div key={index} variants={FADE_UP} className="bg-white p-10 rounded-2xl shadow-sm border border-[#E8DCC4]/30 relative">
|
||
|
|
<div className="text-6xl text-[#D4BAB6]/30 absolute top-6 left-6 font-serif leading-none">"</div>
|
||
|
|
<p className="text-[#666666] font-light text-lg italic leading-relaxed relative z-10 pt-6 mb-8">
|
||
|
|
{testimonial.quote}
|
||
|
|
</p>
|
||
|
|
<div className="flex items-center gap-4">
|
||
|
|
<div className="w-10 h-10 rounded-full bg-[#FAF5F0] flex items-center justify-center text-[#D4BAB6] font-serif">
|
||
|
|
{testimonial.author.charAt(0)}
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h5 className="text-[#333333] font-medium text-sm">{testimonial.author}</h5>
|
||
|
|
<span className="text-[#888888] text-[10px] uppercase tracking-wider">{testimonial.role}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
))}
|
||
|
|
</motion.div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
{/* 4. PLANS SECTION */}
|
||
|
|
<section className="py-32 bg-white relative z-10 border-y border-[#E8DCC4]/30">
|
||
|
|
<div className="container mx-auto px-6 lg:px-12 max-w-6xl relative z-10">
|
||
|
|
<div className="text-center mb-20">
|
||
|
|
<h2 className="text-4xl sm:text-5xl md:text-[70px] leading-[1] font-serif tracking-normal text-[#333333] mb-4">
|
||
|
|
Jornadas <span className="text-[#D4BAB6] italic">Exclusivas</span>
|
||
|
|
</h2>
|
||
|
|
<p className="text-[#666666] max-w-xl mx-auto font-light">Selecione o plano ideal para a sua transformação.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
|
||
|
|
{/* Mensal Card */}
|
||
|
|
<motion.div variants={FADE_UP} initial="hidden" whileInView="visible" viewport={{ once: true }} className="bg-[#FDFBF7] border border-[#E8DCC4] rounded-2xl p-10 flex flex-col hover:shadow-xl transition-all duration-500">
|
||
|
|
<span className="text-[#D4BAB6] text-[10px] font-medium uppercase tracking-widest mb-4 block">Essência</span>
|
||
|
|
<h3 className="text-3xl font-serif text-[#333333] mb-4">Acompanhamento</h3>
|
||
|
|
<p className="text-[#666666] text-sm mb-10 font-light leading-relaxed">O início perfeito para construir hábitos contínuos de forma suave.</p>
|
||
|
|
|
||
|
|
<div className="mb-10 pb-8 border-b border-[#E8DCC4]/50">
|
||
|
|
<span className="text-5xl font-serif text-[#333333]">R$ 497</span>
|
||
|
|
<span className="text-[#888888] text-[10px] uppercase font-medium tracking-widest ml-2">/mês</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<ul className="flex flex-col gap-5 mb-12 flex-grow">
|
||
|
|
{[
|
||
|
|
"Treino focado em estética feminina",
|
||
|
|
"Guia nutricional flexível",
|
||
|
|
"Alinhamento mental",
|
||
|
|
"Suporte semanal",
|
||
|
|
].map((feature, i) => (
|
||
|
|
<li key={i} className="flex items-center gap-4 text-[#666666]">
|
||
|
|
<CheckCircle2 className="w-4 h-4 text-[#D4BAB6]" strokeWidth={2} />
|
||
|
|
<span className="text-sm font-light">{feature}</span>
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
<Link to="/contato" className="w-full text-center px-8 py-4 border border-[#D4BAB6] text-[#D4BAB6] rounded-full text-[11px] font-medium uppercase tracking-widest hover:bg-[#D4BAB6] hover:text-white transition-colors">
|
||
|
|
Escolher Essência
|
||
|
|
</Link>
|
||
|
|
</motion.div>
|
||
|
|
|
||
|
|
{/* Premium Card */}
|
||
|
|
<motion.div variants={FADE_UP} initial="hidden" whileInView="visible" viewport={{ once: true }} className="bg-[#D4BAB6] rounded-2xl p-10 flex flex-col relative transform md:-translate-y-4 shadow-2xl z-20">
|
||
|
|
<div className="absolute top-0 right-10 bg-white text-[#D4BAB6] text-[9px] font-medium uppercase tracking-widest px-4 py-1.5 rounded-b-lg shadow-sm">
|
||
|
|
Mais Desejado
|
||
|
|
</div>
|
||
|
|
<span className="text-white/80 text-[10px] font-medium uppercase tracking-widest mb-4 block">Plenitude</span>
|
||
|
|
<h3 className="text-3xl font-serif text-white mb-4">Mentoria Premium</h3>
|
||
|
|
<p className="text-white/90 text-sm mb-10 font-light leading-relaxed">Transformação completa de 3 meses, unindo corpo, mente e rotina.</p>
|
||
|
|
|
||
|
|
<div className="mb-10 pb-8 border-b border-white/20">
|
||
|
|
<span className="text-5xl font-serif text-white">R$ 1.297</span>
|
||
|
|
<span className="text-white/80 text-[10px] uppercase font-medium tracking-widest ml-2">/ciclo</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<ul className="flex flex-col gap-5 mb-12 flex-grow">
|
||
|
|
{[
|
||
|
|
"Tudo do plano Essência",
|
||
|
|
"Dieta personalizada (Nutricionista)",
|
||
|
|
"Acompanhamento diário VIP",
|
||
|
|
"Encontros de mentoria ao vivo",
|
||
|
|
"Material exclusivo mensal",
|
||
|
|
].map((feature, i) => (
|
||
|
|
<li key={i} className="flex items-center gap-4 text-white">
|
||
|
|
<CheckCircle2 className="w-4 h-4 text-white" strokeWidth={2} />
|
||
|
|
<span className="text-sm font-light">{feature}</span>
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
<Link to="/contato" className="w-full text-center px-8 py-4 bg-white text-[#D4BAB6] rounded-full text-[11px] font-medium uppercase tracking-widest hover:bg-[#FDFBF7] transition-colors shadow-sm">
|
||
|
|
Aplicar para Mentoria
|
||
|
|
</Link>
|
||
|
|
</motion.div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
{/* 5. FINAL CTA SECTION */}
|
||
|
|
<section className="py-32 relative overflow-hidden bg-[#FAF5F0] z-10 text-center">
|
||
|
|
<div className="container mx-auto px-6 lg:px-12 max-w-4xl relative z-10 flex flex-col items-center">
|
||
|
|
<h2 className="text-4xl sm:text-5xl md:text-[80px] font-serif tracking-normal text-[#333333] leading-[1] mb-8">
|
||
|
|
Pronta para florescer <br/>
|
||
|
|
<span className="text-[#A3918D] italic">sua melhor versão?</span>
|
||
|
|
</h2>
|
||
|
|
<p className="text-[#666666] font-light text-lg mb-12 max-w-xl">
|
||
|
|
Não espere o momento perfeito. Comece hoje a jornada de autocuidado e sofisticação que você merece.
|
||
|
|
</p>
|
||
|
|
<Link to="/contato" className="bg-[#D4BAB6] text-white px-10 py-5 rounded-full text-[11px] font-medium uppercase tracking-[0.15em] hover:bg-[#C2A19D] transition-transform transform hover:-translate-y-1 shadow-[0_10px_30px_rgba(212,186,182,0.3)] inline-block">
|
||
|
|
Agendar Reunião Estratégica
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|