297 lines
16 KiB
TypeScript
297 lines
16 KiB
TypeScript
"use client"
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
|
|
import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
|
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
import MediaAbout from '@/components/sections/about/MediaAbout';
|
|
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
|
import { Sparkles, Award, Star, HelpCircle, Calendar } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="icon-arrow"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="pill"
|
|
contentWidth="mediumSmall"
|
|
sizing="mediumLargeSizeLargeTitles"
|
|
background="aurora"
|
|
cardStyle="subtle-shadow"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
brandName="BARBERSHOP ELITE"
|
|
navItems={[
|
|
{ name: "Início", id: "hero-section" },
|
|
{ name: "Serviços", id: "services-section" },
|
|
{ name: "Agenda", id: "schedule-section" },
|
|
{ name: "Sobre", id: "about-section" },
|
|
{ name: "Contato", id: "schedule-section" }
|
|
]}
|
|
button={{ text: "Agendar", href: "#schedule-section" }}
|
|
className="border-b border-black bg-white"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero-section" data-section="hero-section">
|
|
<HeroLogoBillboard
|
|
logoText="BARBERSHOP ELITE"
|
|
description="Estilo, precisão e tradição. Seu visual perfeito em cada detalhe."
|
|
buttons={[
|
|
{ text: "Agendar Agora", href: "#schedule-section" },
|
|
{ text: "Conhecer Serviços", href: "#services-section" }
|
|
]}
|
|
background={{ variant: "plain" }}
|
|
buttonAnimation="blur-reveal"
|
|
mediaAnimation="blur-reveal"
|
|
imageSrc="http://img.b2bpic.net/free-photo/barber-working-with-aged-client-salon_23-2148181989.jpg"
|
|
imageAlt="Interior da Barbearia Elite"
|
|
frameStyle="card"
|
|
className="min-h-screen flex items-center justify-center"
|
|
containerClassName="text-center"
|
|
logoClassName="text-6xl font-bold text-black mb-6"
|
|
descriptionClassName="text-xl text-black mb-12 max-w-2xl"
|
|
buttonContainerClassName="flex gap-6 justify-center flex-wrap"
|
|
buttonClassName="px-8 py-3 rounded-full font-semibold transition-all"
|
|
mediaWrapperClassName="mt-12 max-w-2xl mx-auto"
|
|
/>
|
|
</div>
|
|
|
|
<div id="services-section" data-section="services-section">
|
|
<FeatureCardTwentySeven
|
|
title="Nossos Serviços"
|
|
description="Oferecemos uma experiência completa de cuidados e estilo para o homem moderno."
|
|
tag="SERVIÇOS PREMIUM"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="blur-reveal"
|
|
features={[
|
|
{
|
|
id: "haircut", title: "Corte Premium", descriptions: [
|
|
"Técnica clássica e contemporânea", "Produtos de qualidade internacional", "Consulta de estilo personalizado"
|
|
],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-man-getting-groomed_23-2149220517.jpg", imageAlt: "Serviço de Corte de Cabelo"
|
|
},
|
|
{
|
|
id: "beard", title: "Design de Barba", descriptions: [
|
|
"Modelagem e design profissional", "Cuidados especializados", "Produtos específicos para barba"
|
|
],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/european-brutal-man-with-beard-cut-barbershop_343596-4701.jpg", imageAlt: "Serviço de Design de Barba"
|
|
},
|
|
{
|
|
id: "shave", title: "Barbear Tradicional", descriptions: [
|
|
"Barbear com navalha quente", "Toalha quente relaxante", "Acabamento perfeito e suave"
|
|
],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/man-cuts-his-beard-barbershop_1157-16157.jpg", imageAlt: "Serviço de Barbear Tradicional"
|
|
}
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="blur-reveal"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
buttons={[{ text: "Ver Todas", href: "#schedule-section" }]}
|
|
buttonAnimation="none"
|
|
cardDescriptionClassName="text-lg text-gray-700 mb-12"
|
|
cardClassName="p-8 border-2 border-black rounded-3xl bg-white hover:shadow-lg transition-all"
|
|
cardTitleClassName="text-2xl font-bold text-black mb-4"
|
|
/>
|
|
</div>
|
|
|
|
<div id="schedule-section" data-section="schedule-section">
|
|
<ContactSplit
|
|
tag="AGENDE SUA VISITA"
|
|
title="Sistema de Agendamento Interativo"
|
|
description="Escolha o dia, hora e serviço. Visualize a disponibilidade em tempo real com nossa agenda 3D interativa."
|
|
tagIcon={Calendar}
|
|
tagAnimation="none"
|
|
background={{ variant: "animated-grid" }}
|
|
useInvertedBackground={true}
|
|
inputPlaceholder="seu@email.com"
|
|
buttonText="Agendar"
|
|
termsText="Ao agendar, você concorda com nossa política de confirmação."
|
|
mediaPosition="right"
|
|
mediaAnimation="none"
|
|
imageSrc="http://img.b2bpic.net/free-vector/vintage-label-design-with-lettering-composition-dark_1284-43729.jpg"
|
|
imageAlt="Agenda Barbershop"
|
|
className="py-20"
|
|
containerClassName="max-w-6xl mx-auto px-6"
|
|
titleClassName="text-5xl font-bold text-white mb-6"
|
|
descriptionClassName="text-xl text-gray-200 mb-12"
|
|
tagClassName="text-white font-semibold"
|
|
formClassName="flex flex-col gap-4"
|
|
inputClassName="px-6 py-4 rounded-full border-2 border-white bg-transparent text-white placeholder-gray-300"
|
|
buttonClassName="px-8 py-4 rounded-full bg-white text-black font-bold hover:bg-gray-200 transition-all"
|
|
termsClassName="text-sm text-gray-300"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about-section" data-section="about-section">
|
|
<MediaAbout
|
|
title="Tradição Encontra Modernidade"
|
|
description="Desde 2010, a Barbershop Elite oferece mais que um corte de cabelo. Oferecemos uma experiência de cuidado, estilo e confiança. Nossos mestres barbeiros combinam técnicas clássicas com tendências contemporâneas para criar o visual perfeito para você."
|
|
tag="NOSSA HISTÓRIA"
|
|
tagIcon={Award}
|
|
tagAnimation="none"
|
|
useInvertedBackground={false}
|
|
imageSrc="http://img.b2bpic.net/free-photo/full-body-portrait-stylish-male-who-himself-shaving-while-sitting-barber-chair-hairdressing-salon_613910-18655.jpg"
|
|
imageAlt="Equipe Barbershop Elite"
|
|
buttons={[{ text: "Conhecer Equipe", href: "#team" }]}
|
|
buttonAnimation="none"
|
|
className="py-20"
|
|
titleClassName="text-5xl font-bold text-black mb-6"
|
|
descriptionClassName="text-lg text-gray-700 mb-12 leading-relaxed"
|
|
tagClassName="text-black font-semibold mb-4"
|
|
buttonClassName="px-8 py-3 rounded-full bg-black text-white font-bold hover:bg-gray-800 transition-all"
|
|
mediaWrapperClassName="rounded-3xl overflow-hidden shadow-2xl"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials-section" data-section="testimonials-section">
|
|
<TestimonialCardOne
|
|
title="O Que Nossos Clientes Dizem"
|
|
description="Satisfação garantida em cada visita. Confira as experiências de quem já confiou em nós."
|
|
tag="AVALIAÇÕES"
|
|
tagIcon={Star}
|
|
tagAnimation="none"
|
|
testimonials={[
|
|
{
|
|
id: "testimonial-1", name: "Carlos Silva", role: "Empresário", company: "Tech Solutions", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-getting-haircut_23-2149220585.jpg", imageAlt: "Carlos Silva"
|
|
},
|
|
{
|
|
id: "testimonial-2", name: "Ricardo Santos", role: "Designer", company: "Creative Studio", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-bearded-male-wearing-black-leather-jacket_613910-2732.jpg", imageAlt: "Ricardo Santos"
|
|
},
|
|
{
|
|
id: "testimonial-3", name: "Fernando Costa", role: "Advogado", company: "Costa & Associados", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/pov-entrepreneur-videocall_482257-85294.jpg", imageAlt: "Fernando Costa"
|
|
},
|
|
{
|
|
id: "testimonial-4", name: "Pedro Oliveira", role: "Empresário", company: "Inovação Digital", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-67191.jpg", imageAlt: "Pedro Oliveira"
|
|
},
|
|
{
|
|
id: "testimonial-5", name: "André Martins", role: "Fotógrafo", company: "Martins Photography", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-toweling-hair-senior-male-client_23-2148181920.jpg", imageAlt: "André Martins"
|
|
},
|
|
{
|
|
id: "testimonial-6", name: "Bruno Alves", role: "Consultor", company: "Business Advisors", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/blond-businessman-happy-expression_1194-3633.jpg", imageAlt: "Bruno Alves"
|
|
}
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="blur-reveal"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
carouselMode="buttons"
|
|
titleClassName="text-5xl font-bold text-white mb-6"
|
|
descriptionClassName="text-xl text-gray-200 mb-12"
|
|
tagClassName="text-white font-semibold"
|
|
cardClassName="p-8 bg-white rounded-3xl shadow-lg hover:shadow-2xl transition-all"
|
|
nameClassName="text-xl font-bold text-black"
|
|
roleClassName="text-gray-700"
|
|
companyClassName="text-sm text-gray-600"
|
|
ratingClassName="flex gap-1 text-yellow-400 mt-2"
|
|
textBoxClassName=""
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq-section" data-section="faq-section">
|
|
<FaqBase
|
|
title="Perguntas Frequentes"
|
|
description="Dúvidas comuns sobre nossos serviços, agendamento e políticas."
|
|
tag="DÚVIDAS"
|
|
tagIcon={HelpCircle}
|
|
tagAnimation="none"
|
|
faqs={[
|
|
{
|
|
id: "faq-1", title: "Como funciona o agendamento?", content: "Você pode agendar através do nosso formulário online, visualizando os horários disponíveis em tempo real. Também aceitamos agendamentos por telefone e WhatsApp."
|
|
},
|
|
{
|
|
id: "faq-2", title: "Qual é o tempo médio de um atendimento?", content: "Um corte de cabelo leva em média 45 minutos. Barbear tradicional ou design de barba levam cerca de 30 a 40 minutos. Serviços combinados podem levar até 1 hora."
|
|
},
|
|
{
|
|
id: "faq-3", title: "Vocês aceitam cartão de crédito?", content: "Sim! Aceitamos cartão de crédito, débito, PIX e dinheiro. Também oferecemos opções de parcelamento para clientes VIP."
|
|
},
|
|
{
|
|
id: "faq-4", title: "Posso remarcar meu agendamento?", content: "Claro! Você pode remarcar com até 24 horas de antecedência sem custos. Remarcações com menos de 24 horas podem ter taxa conforme política."
|
|
},
|
|
{
|
|
id: "faq-5", title: "Vocês oferecem pacotes especiais?", content: "Sim! Oferecemos pacotes mensais, semestrais e anuais com descontos progressivos. Consulte nossos planos VIP para mais informações."
|
|
},
|
|
{
|
|
id: "faq-6", title: "Qual é a política de cancelamento?", content: "Cancelamentos devem ser feitos com 24 horas de antecedência. Cancelamentos com aviso prévio são gratuitos. Sem aviso há cobrança de 50% do valor agendado."
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqsAnimation="blur-reveal"
|
|
showCard={true}
|
|
titleClassName="text-5xl font-bold text-black mb-6"
|
|
descriptionClassName="text-lg text-gray-700 mb-12"
|
|
tagClassName="text-black font-semibold"
|
|
accordionClassName="border-b-2 border-black"
|
|
accordionTitleClassName="py-6 font-bold text-black text-lg"
|
|
accordionContentClassName="pb-6 text-gray-700 leading-relaxed"
|
|
textBoxClassName=""
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer-section" data-section="footer-section">
|
|
<FooterMedia
|
|
logoText="BARBERSHOP ELITE"
|
|
imageSrc="http://img.b2bpic.net/free-vector/vintage-label-design-with-lettering-composition-dark_1284-43729.jpg"
|
|
imageAlt="Logo Barbershop Elite"
|
|
copyrightText="© 2025 Barbershop Elite | Todos os direitos reservados"
|
|
columns={[
|
|
{
|
|
title: "Navegação", items: [
|
|
{ label: "Início", href: "#hero-section" },
|
|
{ label: "Serviços", href: "#services-section" },
|
|
{ label: "Agenda", href: "#schedule-section" },
|
|
{ label: "Sobre", href: "#about-section" }
|
|
]
|
|
},
|
|
{
|
|
title: "Contato", items: [
|
|
{ label: "Telefone: (11) 3000-1234", href: "tel:+551130001234" },
|
|
{ label: "WhatsApp: (11) 99999-5678", href: "https://wa.me/5511999995678" },
|
|
{ label: "Email: contato@barbershopelite.com", href: "mailto:contato@barbershopelite.com" },
|
|
{ label: "Rua Premium, 123 - São Paulo, SP", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Redes Sociais", items: [
|
|
{ label: "Instagram", href: "https://instagram.com" },
|
|
{ label: "Facebook", href: "https://facebook.com" },
|
|
{ label: "TikTok", href: "https://tiktok.com" },
|
|
{ label: "YouTube", href: "https://youtube.com" }
|
|
]
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Política de Privacidade", href: "#" },
|
|
{ label: "Termos de Serviço", href: "#" },
|
|
{ label: "Política de Cancelamento", href: "#" },
|
|
{ label: "Contato Administrativo", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
className="bg-black text-white py-16"
|
|
containerClassName="max-w-6xl mx-auto px-6"
|
|
logoTextClassName="text-3xl font-bold text-white mb-4"
|
|
columnsClassName="grid grid-cols-4 gap-12 mb-12"
|
|
columnTitleClassName="font-bold text-white text-lg mb-4"
|
|
columnItemClassName="text-gray-300 hover:text-white transition-colors"
|
|
copyrightTextClassName="text-gray-500 text-center text-sm"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |