278 lines
15 KiB
TypeScript
278 lines
15 KiB
TypeScript
"use client";
|
||
|
||
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 FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
|
||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
|
||
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||
import TeamCardOne from '@/components/sections/team/TeamCardOne';
|
||
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
||
import { Award, HelpCircle, Sparkles, Star, Users } from "lucide-react";
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="hover-magnetic"
|
||
defaultTextAnimation="background-highlight"
|
||
borderRadius="soft"
|
||
contentWidth="medium"
|
||
sizing="mediumSizeLargeTitles"
|
||
background="floatingGradient"
|
||
cardStyle="gradient-radial"
|
||
primaryButtonStyle="flat"
|
||
secondaryButtonStyle="layered"
|
||
headingFontWeight="bold"
|
||
>
|
||
<ReactLenis root>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarLayoutFloatingOverlay
|
||
navItems={[
|
||
{
|
||
name: "Home", id: "#home"},
|
||
{
|
||
name: "Serviços", id: "#servicos"},
|
||
{
|
||
name: "Sobre", id: "#sobre"},
|
||
{
|
||
name: "Equipe", id: "#equipe"},
|
||
{
|
||
name: "Depoimentos", id: "#depoimentos"},
|
||
{
|
||
name: "Parceiros", id: "#parceiros"},
|
||
{
|
||
name: "FAQ", id: "#faq"},
|
||
{
|
||
name: "Contato", id: "#contato"},
|
||
]}
|
||
brandName="Barbearia Romão"
|
||
button={{
|
||
text: "Agendar Horário", href: "#contato"}}
|
||
/>
|
||
</div>
|
||
|
||
<div id="home" data-section="home">
|
||
<HeroCarouselLogo
|
||
logoText="Barbearia Romão"
|
||
description="Barbeiros experientes dedicados à sua aparência. Agende seu atendimento agora e descubra a diferença de um corte profissional."
|
||
buttons={[
|
||
{
|
||
text: "Agendar Horário", href: "#contato"},
|
||
]}
|
||
slides={[
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-baber-shop-chiar_23-2148506337.jpg", imageAlt: "Modern barbershop interior with stylish chairs"},
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/mid-section-barber-wiping-clients-face-with-hot-towel_107420-94798.jpg", imageAlt: "Barber professionally cutting a client's hair"},
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-barber-shop-shaving_23-2148298346.jpg", imageAlt: "Close-up of a straight razor shaving a man's beard"},
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/professional-hairdresser-modeling-beard-barbershop-close-up-photo_613910-4293.jpg", imageAlt: "Barber applying a hot towel to a client's face"},
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/beauty-salon-with-cosmetology-equipment-anime-style_23-2151501036.jpg", imageAlt: "Classic barbershop facade with a vintage sign"},
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/from-scissors-rake_23-2147778741.jpg", imageAlt: "Arrangement of professional barber tools on a counter"},
|
||
]}
|
||
autoplayDelay={4000}
|
||
showDimOverlay={true}
|
||
/>
|
||
</div>
|
||
|
||
<div id="sobre" data-section="sobre">
|
||
<InlineImageSplitTextAbout
|
||
useInvertedBackground={false}
|
||
heading={[
|
||
{
|
||
type: "text", content: "Nossa Barbearia – Tradição e Excelência"},
|
||
]}
|
||
buttons={[
|
||
{
|
||
text: "Nossa História", href: "#"},
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="servicos" data-section="servicos">
|
||
<FeatureCardNineteen
|
||
textboxLayout="default"
|
||
useInvertedBackground={true}
|
||
features={[
|
||
{
|
||
tag: "Clássico", title: "Corte Masculino Clássico", subtitle: "Estilo atemporal para o homem moderno.", description: "Um corte preciso e atemporal, adaptado ao seu formato de rosto e estilo pessoal, garantindo um visual impecável.", imageSrc: "http://img.b2bpic.net/free-photo/scissors-towel-beauty-salon_23-2148181999.jpg", imageAlt: "Scissors and comb ready for a classic haircut"},
|
||
{
|
||
tag: "Detalhado", title: "Barba Modelada e Aparada", subtitle: "Contorno perfeito para sua barba.", description: "Modelagem e aparo profissional da barba, com produtos de alta qualidade para um acabamento suave e uma hidratação profunda.", imageSrc: "http://img.b2bpic.net/free-photo/brush-element-shaving-tool-close-up-berber-shop_1303-20672.jpg", imageAlt: "Straight razor used for a clean beard shave"},
|
||
{
|
||
tag: "Cuidado", title: "Tratamentos Capilares", subtitle: "Revitalize seu cabelo e couro cabeludo.", description: "Nossos tratamentos personalizados nutrem e fortalecem o cabelo, combatendo a queda e promovendo um couro cabeludo saudável.", imageSrc: "http://img.b2bpic.net/free-photo/hair-product-bottle-wrapped-beautiful-shiny-brown-hair_23-2152001423.jpg", imageAlt: "Hair product jar on a wooden surface"},
|
||
{
|
||
tag: "Completo", title: "Combo Completo Romão", subtitle: "Experiência premium de corte e barba.", description: "Desfrute do nosso combo exclusivo: corte de cabelo, barba modelada, e massagem relaxante, para um rejuvenescimento total.", imageSrc: "http://img.b2bpic.net/free-photo/bearded-client-just-got-good-beardcare-from-talanted-trendy-barber_613910-21575.jpg", imageAlt: "Barber giving a relaxing head massage to a client"},
|
||
]}
|
||
title="Nossos Serviços – Mais Que Um Corte"
|
||
description="Descubra a gama completa de cuidados que oferecemos, da tradição à inovação, sempre com excelência e atenção aos detalhes."
|
||
tag="Serviços"
|
||
tagIcon={Sparkles}
|
||
/>
|
||
</div>
|
||
|
||
<div id="equipe" data-section="equipe">
|
||
<TeamCardOne
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
gridVariant="three-columns-all-equal-width"
|
||
useInvertedBackground={false}
|
||
members={[
|
||
{
|
||
id: "joao-silva", name: "João Silva", role: "Barbeiro Sênior", imageSrc: "http://img.b2bpic.net/free-photo/impressed-slavic-middle-aged-male-barber-uniform-holding-barber-tools-showing-thumb-up-isolated-purple-wall_141793-90681.jpg", imageAlt: "Portrait of João Silva, senior barber"},
|
||
{
|
||
id: "pedro-mendes", name: "Pedro Mendes", role: "Especialista em Navalha", imageSrc: "http://img.b2bpic.net/free-photo/smiling-middle-aged-male-barber-uniform-holding-hair-clippers-showing-peace-gesture-isolated-pink-wall_141793-103187.jpg", imageAlt: "Portrait of Pedro Mendes, straight razor specialist"},
|
||
{
|
||
id: "carlos-oliveira", name: "Carlos Oliveira", role: "Colorista & Estilista", imageSrc: "http://img.b2bpic.net/free-photo/imposing-bearded-man-is-standing-table-he-is-wearing-shirt-suspender-he-has-tattoes-his-arms-neck-he-is-holding-tablet-cup-coffee-man-is-reading_613910-20730.jpg", imageAlt: "Portrait of Carlos Oliveira, colorist and stylist"},
|
||
{
|
||
id: "rafa-costa", name: "Rafa Costa", role: "Barbeiro Júnior", imageSrc: "http://img.b2bpic.net/free-photo/portrait-hardworking-man-his-own-studio_1153-5359.jpg", imageAlt: "Portrait of Rafa Costa, junior barber"},
|
||
]}
|
||
title="Nossa Equipe de Barbeiros – Artistas do Seu Estilo"
|
||
description="Conheça os profissionais apaixonados e experientes que fazem da Barbearia Romão o seu destino preferido para cuidados masculinos."
|
||
tag="Equipe"
|
||
tagIcon={Users}
|
||
/>
|
||
</div>
|
||
|
||
<div id="depoimentos" data-section="depoimentos">
|
||
<TestimonialCardSixteen
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={true}
|
||
testimonials={[
|
||
{
|
||
id: "1", name: "Ricardo Almeida", role: "Gerente de Marketing", company: "Smart Solutions", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-hair-salon_23-2150665451.jpg", imageAlt: "Ricardo Almeida, satisfied client"},
|
||
{
|
||
id: "2", name: "Felipe Souza", role: "Empreendedor", company: "Inova Tech", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/family-car-salon-woman-buying-thecar-seat-little-african-girl-with-mther_1157-45043.jpg", imageAlt: "Felipe Souza, happy client"},
|
||
{
|
||
id: "3", name: "Gustavo Lima", role: "Advogado", company: "Lima & Associados", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-bearded-man-barbershop-barber-work-washing-head_627829-7234.jpg", imageAlt: "Gustavo Lima, approving client"},
|
||
{
|
||
id: "4", name: "Diego Costa", role: "Arquiteto", company: "Design Urbano", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/young-serious-men-colleagues-office-using-computer_171337-6866.jpg", imageAlt: "Diego Costa, content client with beard"},
|
||
{
|
||
id: "5", name: "Bruno Santos", role: "Consultor Financeiro", company: "Capital Invest", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/thoughtful-young-afro-american-male-barber-wearing-uniform-keeping-hand-chin-isolated-pink-wall-with-copy-space_141793-112904.jpg", imageAlt: "Bruno Santos, stylish client"},
|
||
]}
|
||
kpiItems={[
|
||
{
|
||
value: "10+", label: "Anos de Tradição"},
|
||
{
|
||
value: "5 Estrelas", label: "Avaliação Média"},
|
||
{
|
||
value: "1000+", label: "Clientes Satisfeitos"},
|
||
]}
|
||
title="O Que Nossos Clientes Dizem – A Satisfação É Nossa Prioridade"
|
||
description="Conheça os depoimentos de quem já experimentou a excelência e o cuidado da Barbearia Romão e se tornou um cliente fiel."
|
||
tag="Depoimentos"
|
||
tagIcon={Star}
|
||
/>
|
||
</div>
|
||
|
||
<div id="parceiros" data-section="parceiros">
|
||
<SocialProofOne
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
names={[
|
||
"Local Restaurant", "Men's Fashion Brand", "Local Gym", "Grooming Products", "City Events Organization", "Local Cafe", "Vintage Clothing Brand"
|
||
]}
|
||
title="Nossos Parceiros – Acreditando na Qualidade Local"
|
||
description="Temos orgulho de colaborar com empresas e marcas que compartilham nossos valores de excelência e compromisso com a comunidade."
|
||
tag="Parceiros"
|
||
tagIcon={Award}
|
||
speed={50}
|
||
showCard={false}
|
||
/>
|
||
</div>
|
||
|
||
<div id="faq" data-section="faq">
|
||
<FaqBase
|
||
textboxLayout="default"
|
||
useInvertedBackground={true}
|
||
faqs={[
|
||
{
|
||
id: "1", title: "Como faço para agendar um horário?", content: "Você pode agendar seu horário diretamente pelo nosso site na seção 'Contato e Agendamento' ou ligando para nossa barbearia durante o horário comercial."},
|
||
{
|
||
id: "2", title: "Quais são os horários de funcionamento da barbearia?", content: "Estamos abertos de terça a sábado, das 9h às 19h. Recomendamos verificar nossa página de contato para quaisquer atualizações ou horários especiais."},
|
||
{
|
||
id: "3", title: "Vocês atendem crianças ou adolescentes?", content: "Sim, oferecemos serviços de corte e estilo para todas as idades, incluindo crianças e adolescentes, com preços e abordagens adequadas para cada faixa etária."},
|
||
{
|
||
id: "4", title: "Posso cancelar ou reagendar meu atendimento?", content: "Sim, é possível cancelar ou reagendar seu horário com no mínimo 24 horas de antecedência, através do nosso sistema de agendamento online ou por telefone."},
|
||
]}
|
||
title="Perguntas Frequentes – Tudo o Que Você Precisa Saber"
|
||
description="Encontre respostas para as dúvidas mais comuns sobre nossos serviços, agendamentos e funcionamento da Barbearia Romão."
|
||
tag="Dúvidas"
|
||
tagIcon={HelpCircle}
|
||
faqsAnimation="slide-up"
|
||
/>
|
||
</div>
|
||
|
||
<div id="contato" data-section="contato">
|
||
<ContactCenter
|
||
useInvertedBackground={false}
|
||
background={{
|
||
variant: "radial-gradient"}}
|
||
tag="Agende seu corte"
|
||
title="Visite a Barbearia Romão e Transforme Seu Estilo"
|
||
description="Preencha o formulário e agende seu horário com um de nossos barbeiros experientes para uma experiência de cuidado e estilo incomparável."
|
||
inputPlaceholder="Seu e-mail"
|
||
buttonText="Agendar Agora"
|
||
termsText="Ao clicar em Agendar Agora, você concorda com nossos Termos e Condições."
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterBase
|
||
columns={[
|
||
{
|
||
title: "Serviços", items: [
|
||
{
|
||
label: "Corte Clássico", href: "#servicos"},
|
||
{
|
||
label: "Barba Modelada", href: "#servicos"},
|
||
{
|
||
label: "Tratamentos", href: "#servicos"},
|
||
{
|
||
label: "Combo Romão", href: "#servicos"},
|
||
],
|
||
},
|
||
{
|
||
title: "Barbearia", items: [
|
||
{
|
||
label: "Sobre Nós", href: "#sobre"},
|
||
{
|
||
label: "Nossa Equipe", href: "#equipe"},
|
||
{
|
||
label: "FAQ", href: "#faq"},
|
||
{
|
||
label: "Agendamento", href: "#contato"},
|
||
],
|
||
},
|
||
{
|
||
title: "Social", items: [
|
||
{
|
||
label: "Instagram", href: "https://instagram.com/barbeariaromao"},
|
||
{
|
||
label: "Facebook", href: "https://facebook.com/barbeariaromao"},
|
||
{
|
||
label: "Google Maps", href: "#"},
|
||
],
|
||
},
|
||
]}
|
||
logoText="Barbearia Romão"
|
||
copyrightText="© 2024 Barbearia Romão | Todos os direitos reservados."
|
||
/>
|
||
</div>
|
||
</ReactLenis>
|
||
</ThemeProvider>
|
||
);
|
||
}
|