Merge version_2 into main
Merge version_2 into main
This commit was merged in pull request #2.
This commit is contained in:
315
src/app/page.tsx
315
src/app/page.tsx
@@ -2,223 +2,138 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||||
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
||||
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
|
||||
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
||||
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
|
||||
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
|
||||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||||
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
|
||||
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
||||
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
||||
import { Award, Clock, ThumbsUp } from "lucide-react";
|
||||
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
||||
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||||
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
||||
import { Scissors, Clock, MapPin, MessageCircle } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="pill"
|
||||
contentWidth="small"
|
||||
sizing="largeSmallSizeLargeTitles"
|
||||
background="circleGradient"
|
||||
cardStyle="outline"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="normal"
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="large"
|
||||
background="noise"
|
||||
cardStyle="outline"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Início", id: "#hero"},
|
||||
{
|
||||
name: "Serviços", id: "#servicos"},
|
||||
{
|
||||
name: "Galeria", id: "#galeria"},
|
||||
{
|
||||
name: "Contato", id: "#contato"},
|
||||
]}
|
||||
brandName="Jair Barbearia"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "Início", id: "#hero" },
|
||||
{ name: "Serviços", id: "#servicos" },
|
||||
{ name: "Galeria", id: "#galeria" },
|
||||
{ name: "Sobre", id: "#sobre" },
|
||||
{ name: "Avaliações", id: "#avaliacoes" },
|
||||
{ name: "Contato", id: "#contato" }
|
||||
]}
|
||||
brandName="Jair Barbearia"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Corte de Respeito e Estilo"
|
||||
description="Atendimento profissional, qualidade premium e o ambiente que você merece em União dos Palmares."
|
||||
buttons={[
|
||||
{
|
||||
text: "Agendar Agora", href: "https://wa.me/5582987487495"},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/full-shot-man-getting-haircut_23-2150665413.jpg"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-man-barber-shop-after-getting-haircut_23-2149186513.jpg", alt: "Cliente satisfeito"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/hairdresser-cutting-man-s-hair-barber-shop_23-2149186474.jpg", alt: "Cliente satisfeito"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/brush-element-shaving-tool-close-up-berber-shop_1303-20672.jpg", alt: "Cliente satisfeito"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/men-looking-out-window-cafe_23-2147775903.jpg", alt: "Cliente satisfeito"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/handsome-tattooed-young-man-talking-phone-close-up-portrait-outdoors_1321-15.jpg", alt: "Cliente satisfeito"},
|
||||
]}
|
||||
avatarText="Mais de 500 clientes atendidos"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Jair Barbearia: Onde o Estilo Encontra a Tradição"
|
||||
description="Excelência em cortes e barbas em União dos Palmares - AL. Agende seu horário e sinta a diferença."
|
||||
buttons={[{ text: "Agendar pelo WhatsApp", href: "https://wa.me/5582987487495" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/handsome-tattooed-young-man-talking-phone-close-up-portrait-outdoors_1321-15.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="servicos" data-section="servicos">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "1", name: "Corte Simples", price: "R$ 20", imageSrc: "http://img.b2bpic.net/free-photo/close-up-priest-his-lunch-time_23-2149284677.jpg"},
|
||||
{
|
||||
id: "2", name: "Barba Completa", price: "R$ 15", imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-grooming-their-client_23-2149205870.jpg"},
|
||||
{
|
||||
id: "3", name: "Combo Corte + Barba", price: "R$ 30", imageSrc: "http://img.b2bpic.net/free-photo/barber-wallpaper-black-marble-background_53876-145654.jpg"},
|
||||
{
|
||||
id: "4", name: "Corte Premium", price: "R$ 35", imageSrc: "http://img.b2bpic.net/free-photo/young-man-talking-phone-studio_23-2147717303.jpg"},
|
||||
{
|
||||
id: "5", name: "Barba Desenho", price: "R$ 20", imageSrc: "http://img.b2bpic.net/free-photo/crop-hairdresser-holding-mousse-near-customer_23-2147778807.jpg"},
|
||||
{
|
||||
id: "6", name: "Corte Infantil", price: "R$ 18", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-bearded-male-grey-vignette-background_613910-8472.jpg"},
|
||||
]}
|
||||
title="Nossos Serviços"
|
||||
description="Qualidade garantida em cada tesourada."
|
||||
/>
|
||||
</div>
|
||||
<div id="servicos" data-section="servicos">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
title="Nossos Serviços"
|
||||
description="Serviços especializados para o homem moderno."
|
||||
products={[
|
||||
{ id: "1", name: "Corte + Pigmentação", price: "R$ 50", imageSrc: "http://img.b2bpic.net/free-photo/man-getting-his-beard-shaved-with-razor_107420-94800.jpg" },
|
||||
{ id: "2", name: "Corte Americano", price: "R$ 25", imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-grooming-their-client_23-2149205870.jpg" },
|
||||
{ id: "3", name: "Degradê Navalhado", price: "R$ 25", imageSrc: "http://img.b2bpic.net/free-photo/barber-wallpaper-black-marble-background_53876-145654.jpg" },
|
||||
{ id: "4", name: "Corte + Barba", price: "R$ 40", imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-selfcare-products_23-2149313038.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="galeria" data-section="galeria">
|
||||
<FeatureCardTwentyFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "f1", title: "Cortes Modernos", author: "Jair", description: "Fades, cortes clássicos e tendências atuais.", tags: [
|
||||
"fade", "estilo"],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/comfortable-black-white-home-interior-design-generated-by-ai_188544-29099.jpg"},
|
||||
{
|
||||
id: "f2", title: "Barba de Respeito", author: "Jair", description: "Design de barba com toalha quente e finalização.", tags: [
|
||||
"barba", "design"],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-getting-his-beard-shaved-with-razor_107420-94800.jpg"},
|
||||
{
|
||||
id: "f3", title: "Atendimento VIP", author: "Jair", description: "Ambiente confortável e ambiente relaxante.", tags: [
|
||||
"atendimento", "conforto"],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-selfcare-products_23-2149313038.jpg"},
|
||||
]}
|
||||
title="Estilo em Foco"
|
||||
description="Trabalho feito com técnica e dedicação."
|
||||
/>
|
||||
</div>
|
||||
<div id="galeria" data-section="galeria">
|
||||
<FeatureCardTwentyFour
|
||||
title="Galeria de Estilo"
|
||||
description="Veja os resultados impecáveis que entregamos diariamente."
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
animationType="blur-reveal"
|
||||
features={[
|
||||
{ id: "g1", title: "Degradê Perfeito", author: "Jair", description: "Foco total nos detalhes.", tags: ["fade", "estilo"], imageSrc: "http://img.b2bpic.net/free-photo/young-man-barber-shop-after-getting-haircut_23-2149186513.jpg" },
|
||||
{ id: "g2", title: "Barba Esculpida", author: "Jair", description: "Design e precisão máxima.", tags: ["barba", "classic"], imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-cutting-man-s-hair-barber-shop_23-2149186474.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrica" data-section="metrica">
|
||||
<MetricCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1", icon: Award,
|
||||
title: "Clientes Satisfeitos", value: "500+"},
|
||||
{
|
||||
id: "m2", icon: Clock,
|
||||
title: "Anos de Experiência", value: "10+"},
|
||||
{
|
||||
id: "m3", icon: ThumbsUp,
|
||||
title: "Avaliações 5 Estrelas", value: "100%"},
|
||||
]}
|
||||
title="Nossos Números"
|
||||
description="Experiência que faz a diferença."
|
||||
/>
|
||||
</div>
|
||||
<div id="sobre" data-section="sobre">
|
||||
<MetricCardThree
|
||||
title="Sobre Nós"
|
||||
description="Localizada em União dos Palmares, a Jair Barbearia é referência em atendimento de qualidade e ambiente acolhedor. Nossa missão é elevar sua autoestima."
|
||||
animationType="depth-3d"
|
||||
textboxLayout="split"
|
||||
metrics={[
|
||||
{ id: "h1", icon: Clock, title: "Horário Seg-Sáb", value: "08h-20h" },
|
||||
{ id: "h2", icon: Clock, title: "Horário Dom", value: "08h-14h" },
|
||||
{ id: "h3", icon: MapPin, title: "Local", value: "União dos Palmares - AL" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="avaliacoes" data-section="avaliacoes">
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Carlos Silva", handle: "@carlos", testimonial: "O melhor corte da cidade, recomendo demais!", imageSrc: "http://img.b2bpic.net/free-photo/blond-man-happy-expression_1194-2921.jpg"},
|
||||
{
|
||||
id: "2", name: "Pedro Souza", handle: "@pedro", testimonial: "Atendimento nota 10 e preço muito justo.", imageSrc: "http://img.b2bpic.net/free-photo/side-view-senior-man-laughing_23-2151203948.jpg"},
|
||||
{
|
||||
id: "3", name: "Lucas Lima", handle: "@lucas", testimonial: "Ambiente show e profissional super qualificado.", imageSrc: "http://img.b2bpic.net/free-photo/bearded-hipster-male-purple-suit-isolated-grey-vignette-background_613910-2989.jpg"},
|
||||
{
|
||||
id: "4", name: "Marcos Andrade", handle: "@marcos", testimonial: "Finalmente achei um barbeiro que entende o que quero.", imageSrc: "http://img.b2bpic.net/free-photo/excited-young-male-barber-wearing-glasses-red-shirt-barber-apron-holding-barbering-tools-looking-camera-showing-thumb-up-isolated-blue-background_141793-138548.jpg"},
|
||||
{
|
||||
id: "5", name: "João Vítor", handle: "@joao", testimonial: "Serviço excelente, virei cliente fiel.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-baber-shop-chiar_23-2148506337.jpg"},
|
||||
]}
|
||||
title="O que dizem de nós"
|
||||
description="Sua satisfação é nossa prioridade."
|
||||
/>
|
||||
</div>
|
||||
<div id="avaliacoes" data-section="avaliacoes">
|
||||
<TestimonialCardSix
|
||||
title="O Que Nossos Clientes Dizem"
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
testimonials={[
|
||||
{ id: "1", name: "João Silva", handle: "@joao", testimonial: "Profissional nota 10, melhor corte da região!", imageSrc: "http://img.b2bpic.net/free-photo/handsome-tattooed-young-man-talking-phone-close-up-portrait-outdoors_1321-15.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1", title: "Como agendar?", content: "Clique no botão de WhatsApp em qualquer lugar do site para falar diretamente conosco."},
|
||||
{
|
||||
id: "q2", title: "Quais os horários?", content: "Segunda a Sábado, das 8h às 19h."},
|
||||
{
|
||||
id: "q3", title: "Aceita cartão?", content: "Sim, aceitamos cartões, pix e dinheiro."},
|
||||
]}
|
||||
title="Dúvidas Frequentes"
|
||||
description="Saiba mais sobre como agendar."
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
title="Dúvidas Frequentes"
|
||||
faqs={[
|
||||
{ id: "q1", title: "Como agendar?", content: "Envie uma mensagem pelo botão do WhatsApp." },
|
||||
{ id: "q2", title: "Qual a localização?", content: "Estamos situados em União dos Palmares, alinhados à sua conveniência." }
|
||||
]}
|
||||
faqsAnimation="blur-reveal"
|
||||
textboxLayout="split"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contato" data-section="contato">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "sparkles-gradient"}}
|
||||
tag="Contato"
|
||||
title="Pronto para um novo visual?"
|
||||
description="Agende agora e não perca tempo esperando."
|
||||
buttons={[
|
||||
{
|
||||
text: "Agendar no WhatsApp", href: "https://wa.me/5582987487495"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contato" data-section="contato">
|
||||
<ContactCTA
|
||||
tag="Agende Agora"
|
||||
title="Pronto para um corte de respeito?"
|
||||
description="Entre em contato pelo WhatsApp e reserve seu horário hoje mesmo."
|
||||
buttons={[{ text: "WhatsApp", href: "https://wa.me/5582987487495" }]}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Início", href: "#hero"},
|
||||
{
|
||||
label: "Serviços", href: "#servicos"},
|
||||
{
|
||||
label: "Contato", href: "#contato"},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Privacidade", href: "#"},
|
||||
{
|
||||
label: "Termos", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="Jair Barbearia"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
logoText="Jair Barbearia"
|
||||
columns={[{ items: [{ label: "Início", href: "#hero" }, { label: "Serviços", href: "#servicos" }] }]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
@@ -13,11 +13,11 @@
|
||||
--background: #000000;
|
||||
--card: #1c1c1c;
|
||||
--foreground: #ffffff;
|
||||
--primary-cta: #facc15;
|
||||
--primary-cta: #D4AF37;
|
||||
--primary-cta-text: #000000;
|
||||
--secondary-cta: #ffffff;
|
||||
--secondary-cta-text: #000000;
|
||||
--accent: #facc15;
|
||||
--accent: #D4AF37;
|
||||
--background-accent: #262626;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
|
||||
Reference in New Issue
Block a user