Merge version_2 into main #2
389
src/app/page.tsx
389
src/app/page.tsx
@@ -2,17 +2,17 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FaqBase from '@/components/sections/faq/FaqBase';
|
||||
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
|
||||
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
||||
import HeroSplit from '@/components/sections/hero/HeroSplit';
|
||||
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
||||
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||||
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
||||
import { Award, Star, Users } from "lucide-react";
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
||||
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
|
||||
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
||||
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||||
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
||||
import { Sparkles, CheckCircle, MapPin, Phone } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -30,364 +30,121 @@ export default function LandingPage() {
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Início",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Serviços",
|
||||
id: "servicos",
|
||||
},
|
||||
{
|
||||
name: "Diferenciais",
|
||||
id: "diferenciais",
|
||||
},
|
||||
{
|
||||
name: "Depoimentos",
|
||||
id: "depoimentos",
|
||||
},
|
||||
{
|
||||
name: "Contato",
|
||||
id: "contato",
|
||||
},
|
||||
{ name: "Início", id: "hero" },
|
||||
{ name: "Serviços", id: "servicos" },
|
||||
{ name: "Diferenciais", id: "diferenciais" },
|
||||
{ name: "Depoimentos", id: "depoimentos" },
|
||||
{ name: "Contato", id: "contato" }
|
||||
]}
|
||||
button={{
|
||||
text: "Agendar via WhatsApp",
|
||||
href: "https://wa.me/5583988767413",
|
||||
}}
|
||||
brandName="Kathyenne Morais"
|
||||
brandName="Pet Feliz"
|
||||
button={{ text: "Agendar via WhatsApp", href: "https://wa.me/5583999999999" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplit
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Realce sua beleza natural com segurança e excelência."
|
||||
description="Na Kathyenne Morais Estética Avançada, unimos tecnologia de ponta e cuidado personalizado para transformar sua autoestima em Campina Grande/PB."
|
||||
buttons={[
|
||||
{
|
||||
text: "Agendar Consulta via WhatsApp",
|
||||
href: "https://wa.me/5583988767413",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/cosmetologist-applying-mask-face-client-beauty-salon_1303-16780.jpg?_wi=1"
|
||||
imageAlt="Clínica de Estética em Campina Grande"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/cosmetologist-applying-mask-face-client-beauty-salon_1303-16786.jpg",
|
||||
alt: "Cliente feliz 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/beautician-spa-beauty-salon-applies-cream-client-s-face-girl-lies-cosmetology-table_343596-4278.jpg",
|
||||
alt: "Cliente feliz 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-beautiful-woman-getting-face-skin-treatment-spa_23-2148825379.jpg",
|
||||
alt: "Cliente feliz 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/cosmetologist-applying-mask-face-client-beauty-salon_1303-16756.jpg",
|
||||
alt: "Cliente feliz 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/cosmetologist-applying-mask-face-client-beauty-salon_1303-16783.jpg",
|
||||
alt: "Cliente feliz 5",
|
||||
},
|
||||
]}
|
||||
avatarText="Mais de 1000 transformações realizadas"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Bioestimuladores",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Preenchimento Labial",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Toxina Botulínica",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Peeling Profundo",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Harmonização Facial",
|
||||
},
|
||||
]}
|
||||
<HeroLogoBillboard
|
||||
logoText="Pet Feliz Campina Grande"
|
||||
description="Cuidado premium para o seu melhor amigo. Oferecemos banho, tosa e tratamentos especializados com todo o amor que eles merecem."
|
||||
buttons={[{ text: "Agendar Banho e Tosa", href: "https://wa.me/5583999999999" }]}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/dog-grooming-salon_23-2149174697.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="servicos" data-section="servicos">
|
||||
<InlineImageSplitTextAbout
|
||||
<TestimonialAboutCard
|
||||
tag="Nossa Missão"
|
||||
icon={Sparkles}
|
||||
title="Amor e Dedicação ao Seu Pet"
|
||||
description="Na Pet Feliz, entendemos que seu animal de estimação é parte da família. Nossa equipe em Campina Grande é treinada para proporcionar um ambiente tranquilo e higiênico."
|
||||
subdescription="Desde 2015 transformando a experiência de cuidado pet com profissionalismo e carinho."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/groomer-trimming-dog-hair_23-2149174706.jpg"
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{
|
||||
type: "text",
|
||||
content: "Sobre a Kathyenne Morais",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/side-view-asian-doctor-with-lab-coat_23-2149870311.jpg",
|
||||
alt: "Clínica de Estética",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
content: "Nossa missão é oferecer tratamentos de alta performance, focados na harmonia facial e corporal. Atendemos no coração de Campina Grande com a qualidade que você merece.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="diferenciais" data-section="diferenciais">
|
||||
<FeatureCardSeven
|
||||
<FeatureCardMedia
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
title="Por que a Pet Feliz?"
|
||||
description="O cuidado que seu pet merece, perto de você."
|
||||
features={[
|
||||
{
|
||||
title: "Tecnologia de Ponta",
|
||||
description: "Tratamentos modernos com segurança máxima.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/male-patient-receiving-massage-from-doctor_107420-65172.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
title: "Atendimento Humanizado",
|
||||
description: "Cuidado personalizado para cada necessidade.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-going-through-microblading-treatment_23-2149102659.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
title: "Localização Privilegiada",
|
||||
description: "No bairro Estação Velha, fácil acesso.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-with-doctor-cosmetology-studio_1157-33838.jpg?_wi=1",
|
||||
},
|
||||
{ id: "1", title: "Ambiente sem Estresse", description: "Espaços projetados para o conforto e calma do seu pet.", tag: "Bem-estar", imageSrc: "http://img.b2bpic.net/free-photo/dog-getting-grooming-service_23-2149174688.jpg" },
|
||||
{ id: "2", title: "Equipe Qualificada", description: "Profissionais experientes em diversas raças e temperamentos.", tag: "Expertise", imageSrc: "http://img.b2bpic.net/free-photo/professional-groomer-working-with-dog_23-2149174712.jpg" },
|
||||
{ id: "3", title: "Localização Central", description: "Estamos no coração de Campina Grande para facilitar o seu dia.", tag: "Praticidade", imageSrc: "http://img.b2bpic.net/free-photo/dog-on-grooming-table_23-2149174699.jpg" }
|
||||
]}
|
||||
title="Por que nos escolher?"
|
||||
description="Compromisso com resultados reais, ética e excelência clínica."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="servicos-catalog" data-section="servicos-catalog">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
<ProductCardFour
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
title="Nossos Serviços"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Preenchimento Facial",
|
||||
price: "Consulte",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-girl-lies-beautician-s-table-receives-procedures-light-facial-massage-using-oil_343596-4184.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Aplicação de Toxina",
|
||||
price: "Consulte",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-cosmetology-studio-procedures_1157-34029.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Bioestimuladores",
|
||||
price: "Consulte",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-lip-filler-procedure_23-2149315536.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Peeling Químico",
|
||||
price: "Consulte",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-using-face-treatment-her-client_23-2149037158.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Limpeza de Pele Profunda",
|
||||
price: "Consulte",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-botox-injection-female-forehead_651396-832.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Harmonização Corporal",
|
||||
price: "Consulte",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-lip-filler-procedure_23-2149315552.jpg",
|
||||
},
|
||||
{ id: "s1", name: "Banho & Tosa Completo", price: "R$ XX", variant: "Essencial", imageSrc: "http://img.b2bpic.net/free-photo/dog-bath-time_23-2149174715.jpg" },
|
||||
{ id: "s2", name: "Hidratação Profunda", price: "R$ XX", variant: "Premium", imageSrc: "http://img.b2bpic.net/free-photo/dog-groomer-care_23-2149174720.jpg" },
|
||||
{ id: "s3", name: "Tosa Higiênica", price: "R$ XX", variant: "Básico", imageSrc: "http://img.b2bpic.net/free-photo/dog-grooming-tools_23-2149174701.jpg" }
|
||||
]}
|
||||
title="Nossos Principais Procedimentos"
|
||||
description="Soluções completas para sua saúde e beleza."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="depoimentos" data-section="depoimentos">
|
||||
<TestimonialCardFive
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
<TestimonialCardThirteen
|
||||
animationType="slide-up"
|
||||
showRating={true}
|
||||
textboxLayout="split"
|
||||
title="O que dizem os clientes"
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Ana Silva",
|
||||
date: "15/09/2023",
|
||||
title: "Excelente atendimento!",
|
||||
quote: "Melhor clínica de Campina Grande. Profissionais muito atenciosas.",
|
||||
tag: "Nota 5/5",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/side-view-woman-holding-lash-curler_23-2149453530.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cosmetologist-applying-mask-face-client-beauty-salon_1303-16780.jpg?_wi=2",
|
||||
imageAlt: "happy woman smile after facial treatment",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Mariana Souza",
|
||||
date: "10/10/2023",
|
||||
title: "Resultados incríveis",
|
||||
quote: "Fiz a harmonização e amei o resultado. Muito natural.",
|
||||
tag: "Nota 5/5",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/young-attractive-woman-holding-hands-together-joyfully-looking-camera-modern-clothes-store_574295-2021.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-asian-doctor-with-lab-coat_23-2149870311.jpg",
|
||||
imageAlt: "happy woman smile after facial treatment",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Camila Dias",
|
||||
date: "22/11/2023",
|
||||
title: "Confiança total",
|
||||
quote: "Clínica muito limpa e organizada. Indico muito!",
|
||||
tag: "Nota 5/5",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-woman-applying-cream_23-2148389885.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/male-patient-receiving-massage-from-doctor_107420-65172.jpg?_wi=2",
|
||||
imageAlt: "happy woman smile after facial treatment",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Fernanda Lima",
|
||||
date: "05/12/2023",
|
||||
title: "Atendimento nota 10",
|
||||
quote: "A Kathyenne é uma profissional exemplar.",
|
||||
tag: "Nota 5/5",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/front-view-woman-wearing-makeup-with-thick-eyebrows_23-2150512475.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-going-through-microblading-treatment_23-2149102659.jpg?_wi=2",
|
||||
imageAlt: "happy woman smile after facial treatment",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Juliana Reis",
|
||||
date: "12/01/2024",
|
||||
title: "Recomendo muito",
|
||||
quote: "Atendimento humanizado e resultados fantásticos.",
|
||||
tag: "Nota 5/5",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/lovely-mixed-race-women-pout-lips-stretch-hands-as-going-embrace-someone-express-their-good-feeling-pose-together-against-white-wall-interracial-female-friends-indoor_273609-16476.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-with-doctor-cosmetology-studio_1157-33838.jpg?_wi=2",
|
||||
imageAlt: "happy woman smile after facial treatment",
|
||||
},
|
||||
{ id: "t1", name: "Maria Oliveira", handle: "@maria.pet", testimonial: "Meus cachorros saem sempre lindos e cheirosos!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-woman-holding-dog_23-2149174725.jpg" },
|
||||
{ id: "t2", name: "João Silva", handle: "@joao.dogs", testimonial: "Serviço impecável e atendimento muito carinhoso.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/man-playing-with-dog_23-2149174730.jpg" }
|
||||
]}
|
||||
title="Resultados Comprovados"
|
||||
description="O que nossas clientes dizem sobre a experiência na Kathyenne Morais."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metricas" data-section="metricas">
|
||||
<MetricCardThree
|
||||
<MetricCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Números que comprovam"
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
icon: Star,
|
||||
title: "Nota Google",
|
||||
value: "5.0",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
icon: Users,
|
||||
title: "Avaliações Reais",
|
||||
value: "24+",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
icon: Award,
|
||||
title: "Anos de Confiança",
|
||||
value: "Referência",
|
||||
},
|
||||
{ id: "m1", value: "1000+", title: "Pets atendidos", description: "Experiência acumulada.", imageSrc: "http://img.b2bpic.net/free-photo/dog-grooming-salon_23-2149174697.jpg" },
|
||||
{ id: "m2", value: "5.0", title: "Avaliação média", description: "Clientes satisfeitos.", imageSrc: "http://img.b2bpic.net/free-photo/dog-groomer-care_23-2149174720.jpg" }
|
||||
]}
|
||||
title="Nossos Números"
|
||||
description="Confiança que gera resultados."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Como agendar?",
|
||||
content: "Pelo nosso WhatsApp oficial (83) 98876-7413.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Onde fica?",
|
||||
content: "R. Paulo de Frontin, 55 - Estação Velha, Campina Grande.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Aceitam cartões?",
|
||||
content: "Sim, facilitamos o pagamento em diversas condições.",
|
||||
},
|
||||
]}
|
||||
title="Perguntas Frequentes"
|
||||
description="Tire suas dúvidas antes de agendar."
|
||||
<FaqSplitText
|
||||
sideTitle="Dúvidas Comuns"
|
||||
faqsAnimation="slide-up"
|
||||
faqs={[
|
||||
{ id: "f1", title: "Como agendar?", content: "Pelo nosso WhatsApp, direto com nossos consultores." },
|
||||
{ id: "f2", title: "Aceitam cartão?", content: "Sim, aceitamos todas as bandeiras." }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contato" data-section="contato">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Entre em Contato"
|
||||
title="Pronta para transformar sua autoestima?"
|
||||
description="Fale com nossa equipe agora mesmo e agende sua consulta."
|
||||
buttonText="Falar no WhatsApp"
|
||||
onSubmit={(e) => window.open('https://wa.me/5583988767413')}
|
||||
<ContactSplitForm
|
||||
title="Agende agora"
|
||||
description="Mande uma mensagem e garanta o horário do seu pet!"
|
||||
inputs={[
|
||||
{ name: "nome", type: "text", placeholder: "Seu nome" },
|
||||
{ name: "pet", type: "text", placeholder: "Nome do seu Pet" }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/groomer-woman-working-with-dog_23-2149174718.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Sobre nós",
|
||||
href: "#servicos",
|
||||
},
|
||||
{
|
||||
label: "Serviços",
|
||||
href: "#servicos-catalog",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "WhatsApp",
|
||||
href: "https://wa.me/5583988767413",
|
||||
},
|
||||
{
|
||||
label: "Localização",
|
||||
href: "#contato",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ title: "Links", items: [{ label: "Início", href: "#" }, { label: "Contato", href: "#contato" }] },
|
||||
{ title: "Contato", items: [{ label: "WhatsApp", href: "#" }] }
|
||||
]}
|
||||
logoText="Kathyenne Morais"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
|
||||
Reference in New Issue
Block a user