Update src/app/page.tsx
This commit is contained in:
373
src/app/page.tsx
373
src/app/page.tsx
@@ -15,220 +15,185 @@ import TestimonialCardTwelve from '@/components/sections/testimonial/Testimonial
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="largeSmallSizeLargeTitles"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="outline"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="bold"
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="largeSmallSizeLargeTitles"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="outline"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Início", id: "hero"},
|
||||
{
|
||||
name: "Sobre", id: "about"},
|
||||
{
|
||||
name: "Serviços", id: "features"},
|
||||
{
|
||||
name: "Marcações", id: "contact"},
|
||||
]}
|
||||
brandName="Bety Cabeleireiros"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "Início", id: "hero" },
|
||||
{ name: "Sobre", id: "about" },
|
||||
{ name: "Serviços", id: "features" },
|
||||
{ name: "Marcações", id: "contact" }
|
||||
]}
|
||||
brandName="Bety Cabeleireiros"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboard
|
||||
background={{
|
||||
variant: "gradient-bars"}}
|
||||
title="Cuidado profissional para o seu cabelo"
|
||||
description="Mais de 25 anos a realçar a sua beleza no centro de Famalicão. Atendimento personalizado e requintado."
|
||||
buttons={[
|
||||
{
|
||||
text: "Marcar por Telefone", href: "tel:+351000000000"},
|
||||
{
|
||||
text: "Agendar Atendimento", href: "#contact"},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/side-view-smiley-friends-indoors_23-2149604085.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/armchair-couch_1203-772.jpg", alt: "Client profile 1"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/illuminated-couch-armchair_1203-771.jpg", alt: "Client profile 2"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/blurred-vanity-with-plenty-mirrors_1203-80.jpg", alt: "Client profile 3"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/elegant-hotel-reception-lobby_482257-76206.jpg", alt: "Client profile 4"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/medium-shot-woman-doctor_23-2149311362.jpg", alt: "Client profile 5"},
|
||||
]}
|
||||
avatarText="Junte-se a +5000 clientes satisfeitos"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text", text: "Excelência"},
|
||||
{
|
||||
type: "text", text: "Confiança"},
|
||||
{
|
||||
type: "text", text: "Tradição"},
|
||||
{
|
||||
type: "text", text: "Modernidade"},
|
||||
{
|
||||
type: "text", text: "Estilo"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboard
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Cuidado profissional para o seu cabelo"
|
||||
description="Mais de 25 anos a realçar a sua beleza no centro de Famalicão. Atendimento personalizado e requintado."
|
||||
buttons={[
|
||||
{ text: "Marcar por Telefone", href: "tel:+351000000000" },
|
||||
{ text: "Agendar Atendimento", href: "#contact" }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/side-view-smiley-friends-indoors_23-2149604085.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/armchair-couch_1203-772.jpg", alt: "Client profile 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/illuminated-couch-armchair_1203-771.jpg", alt: "Client profile 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/blurred-vanity-with-plenty-mirrors_1203-80.jpg", alt: "Client profile 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/elegant-hotel-reception-lobby_482257-76206.jpg", alt: "Client profile 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/medium-shot-woman-doctor_23-2149311362.jpg", alt: "Client profile 5" }
|
||||
]}
|
||||
avatarText="Junte-se a +5000 clientes satisfeitos"
|
||||
marqueeItems={[
|
||||
{ type: "text", text: "Excelência" },
|
||||
{ type: "text", text: "Confiança" },
|
||||
{ type: "text", text: "Tradição" },
|
||||
{ type: "text", text: "Modernidade" },
|
||||
{ type: "text", text: "Estilo" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MetricSplitMediaAbout
|
||||
useInvertedBackground={true}
|
||||
title="Confiança, dedicação e 25 anos de história"
|
||||
description="No Bety Cabeleireiros, cuidamos de cada cliente como se fosse única. Nossa experiência é o reflexo da satisfação que entregamos todos os dias."
|
||||
metrics={[
|
||||
{
|
||||
value: "25+", title: "Anos de Experiência"},
|
||||
{
|
||||
value: "5k+", title: "Clientes Satisfeitas"},
|
||||
{
|
||||
value: "100%", title: "Atendimento Personalizado"},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/family-car-salon-woman-buying-thecar-seat-little-african-girl-with-mther_1157-45043.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<MetricSplitMediaAbout
|
||||
useInvertedBackground={true}
|
||||
title="Confiança, dedicação e 25 anos de história"
|
||||
description="No Bety Cabeleireiros, cuidamos de cada cliente como se fosse única. Nossa experiência é o reflexo da satisfação que entregamos todos os dias."
|
||||
metrics={[
|
||||
{ value: "25+", title: "Anos de Experiência" },
|
||||
{ value: "5k+", title: "Clientes Satisfeitas" },
|
||||
{ value: "100%", title: "Atendimento Personalizado" }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/family-car-salon-woman-buying-thecar-seat-little-african-girl-with-mther_1157-45043.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyNine
|
||||
animationType="slide-up"
|
||||
textboxLayout="split-description"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Cortes Modernos", description: "Design personalizado que valoriza o seu rosto.", imageSrc: "http://img.b2bpic.net/free-photo/trimmers-scissors-flat-lay_23-2148352841.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/flat-lay-hairstyle-tools-arrangement_23-2149552391.jpg", buttonText: "Saber Mais"},
|
||||
{
|
||||
title: "Coloração Exclusiva", description: "Técnicas de cor que preservam a saúde capilar.", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-hair-salon_23-2150668436.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/mature-woman-getting-her-hair-dyed-by-hairdresser-home_23-2148817232.jpg", buttonText: "Saber Mais"},
|
||||
{
|
||||
title: "Tratamentos Capilares", description: "Rituais de hidratação intensa com marcas premium.", imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-treatment-hairdresser-shop_23-2149230920.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/crop-stylist-washing-hair-blonde_23-2147769801.jpg", buttonText: "Saber Mais"},
|
||||
]}
|
||||
title="Nossos Serviços Premium"
|
||||
description="Soluções capilares completas para realçar o seu estilo e bem-estar."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyNine
|
||||
animationType="slide-up"
|
||||
textboxLayout="split-description"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Cortes Modernos", description: "Design personalizado que valoriza o seu rosto.", imageSrc: "http://img.b2bpic.net/free-photo/trimmers-scissors-flat-lay_23-2148352841.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/flat-lay-hairstyle-tools-arrangement_23-2149552391.jpg", buttonText: "Saber Mais"
|
||||
},
|
||||
{
|
||||
title: "Coloração Exclusiva", description: "Técnicas de cor que preservam a saúde capilar.", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-hair-salon_23-2150668436.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/mature-woman-getting-her-hair-dyed-by-hairdresser-home_23-2148817232.jpg", buttonText: "Saber Mais"
|
||||
},
|
||||
{
|
||||
title: "Tratamentos Capilares", description: "Rituais de hidratação intensa com marcas premium.", imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-treatment-hairdresser-shop_23-2149230920.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/crop-stylist-washing-hair-blonde_23-2147769801.jpg", buttonText: "Saber Mais"
|
||||
}
|
||||
]}
|
||||
title="Nossos Serviços Premium"
|
||||
description="Soluções capilares completas para realçar o seu estilo e bem-estar."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardFive
|
||||
animationType="slide-up"
|
||||
textboxLayout="split-description"
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{
|
||||
id: "corte", tag: "Essentials", price: "15€", period: "a partir", description: "Corte de manutenção ou novo visual.", button: {
|
||||
text: "Agendar Agora", href: "#contact"},
|
||||
featuresTitle: "O que inclui", features: [
|
||||
"Lavagem profissional", "Corte personalizado", "Brushing de acabamento"],
|
||||
},
|
||||
{
|
||||
id: "cor", tag: "Popular", price: "45€", period: "a partir", description: "Coloração completa com produtos de alta performance.", button: {
|
||||
text: "Agendar Agora", href: "#contact"},
|
||||
featuresTitle: "O que inclui", features: [
|
||||
"Aplicação de cor", "Proteção capilar", "Brushing de brilho"],
|
||||
},
|
||||
{
|
||||
id: "trat", tag: "Premium", price: "30€", period: "a partir", description: "Tratamento de nutrição profunda com ritual de beleza.", button: {
|
||||
text: "Agendar Agora", href: "#contact"},
|
||||
featuresTitle: "O que inclui", features: [
|
||||
"Máscara nutriente", "Massagem craniana", "Finalização premium"],
|
||||
},
|
||||
]}
|
||||
title="Tabela de Serviços"
|
||||
description="Opções flexíveis para o cuidado diário e ocasiões especiais."
|
||||
/>
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardFive
|
||||
animationType="slide-up"
|
||||
textboxLayout="split-description"
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{
|
||||
id: "corte", tag: "Essentials", price: "15€", period: "a partir", description: "Corte de manutenção ou novo visual.", button: { text: "Agendar Agora", href: "#contact" },
|
||||
featuresTitle: "O que inclui", features: ["Lavagem profissional", "Corte personalizado", "Brushing de acabamento"]
|
||||
},
|
||||
{
|
||||
id: "cor", tag: "Popular", price: "45€", period: "a partir", description: "Coloração completa com produtos de alta performance.", button: { text: "Agendar Agora", href: "#contact" },
|
||||
featuresTitle: "O que inclui", features: ["Aplicação de cor", "Proteção capilar", "Brushing de brilho"]
|
||||
},
|
||||
{
|
||||
id: "trat", tag: "Premium", price: "30€", period: "a partir", description: "Tratamento de nutrição profunda com ritual de beleza.", button: { text: "Agendar Agora", href: "#contact" },
|
||||
featuresTitle: "O que inclui", features: ["Máscara nutriente", "Massagem craniana", "Finalização premium"]
|
||||
}
|
||||
]}
|
||||
title="Tabela de Serviços"
|
||||
description="Opções flexíveis para o cuidado diário e ocasiões especiais."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwelve
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Maria Silva", imageSrc: "http://img.b2bpic.net/free-photo/charming-smiling-lady-with-long-wavy-dark-hair-is-touching-hair-looking-camera-home_291650-2384.jpg"},
|
||||
{
|
||||
id: "2", name: "Ana Oliveira", imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-hairdressershowing-how-use-hair-straighntener_259150-60106.jpg"},
|
||||
{
|
||||
id: "3", name: "Beatriz Rocha", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-posing-with-photo-tape-red-background-high-quality-photo_114579-60868.jpg"},
|
||||
{
|
||||
id: "4", name: "Carla Mendes", imageSrc: "http://img.b2bpic.net/free-photo/smiling-blonde-stylish-young-woman_23-2147910286.jpg"},
|
||||
{
|
||||
id: "5", name: "Sofia Costa", imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-home-getting-ready-haircut_23-2148817221.jpg"},
|
||||
],
|
||||
cardTitle="O que as nossas clientes dizem", cardTag="4.4 / 5 Rating", cardAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwelve
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Maria Silva", imageSrc: "http://img.b2bpic.net/free-photo/charming-smiling-lady-with-long-wavy-dark-hair-is-touching-hair-looking-camera-home_291650-2384.jpg" },
|
||||
{ id: "2", name: "Ana Oliveira", imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-hairdressershowing-how-use-hair-straighntener_259150-60106.jpg" },
|
||||
{ id: "3", name: "Beatriz Rocha", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-posing-with-photo-tape-red-background-high-quality-photo_114579-60868.jpg" },
|
||||
{ id: "4", name: "Carla Mendes", imageSrc: "http://img.b2bpic.net/free-photo/smiling-blonde-stylish-young-woman_23-2147910286.jpg" },
|
||||
{ id: "5", name: "Sofia Costa", imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-home-getting-ready-haircut_23-2148817221.jpg" }
|
||||
]}
|
||||
cardTitle="O que as nossas clientes dizem"
|
||||
cardTag="4.4 / 5 Rating"
|
||||
cardAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="socialProof" data-section="socialProof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
names={[
|
||||
"Kérastase", "L'Oréal Professionnel", "Schwarzkopf", "Wella", "ghd", "Olaplex", "Davines"]}
|
||||
title="Parcerias de Excelência"
|
||||
description="Utilizamos marcas de renome para garantir a saúde e beleza dos seus cabelos."
|
||||
/>
|
||||
</div>
|
||||
<div id="socialProof" data-section="socialProof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
names={["Kérastase", "L'Oréal Professionnel", "Schwarzkopf", "Wella", "ghd", "Olaplex", "Davines"]}
|
||||
title="Parcerias de Excelência"
|
||||
description="Utilizamos marcas de renome para garantir a saúde e beleza dos seus cabelos."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "gradient-bars"}}
|
||||
tag="Contacto"
|
||||
title="Marque o seu atendimento hoje mesmo"
|
||||
description="Deixe o seu contacto e entraremos em contacto consigo rapidamente para agendar o seu momento de beleza."
|
||||
buttonText="Agendar Agora"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
tag="Contacto"
|
||||
title="Marque o seu atendimento hoje mesmo"
|
||||
description="Deixe o seu contacto e entraremos em contacto consigo rapidamente para agendar o seu momento de beleza."
|
||||
buttonText="Agendar Agora"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Bety Cabeleireiros"
|
||||
columns={[
|
||||
{
|
||||
title: "Contactos", items: [
|
||||
{
|
||||
label: "Rua Principal, 123, Famalicão", href: "#"},
|
||||
{
|
||||
label: "+351 000 000 000", href: "tel:+351000000000"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Serviços", items: [
|
||||
{
|
||||
label: "Cortes", href: "#features"},
|
||||
{
|
||||
label: "Coloração", href: "#features"},
|
||||
{
|
||||
label: "Tratamentos", href: "#features"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{
|
||||
label: "Política de Privacidade", href: "#"},
|
||||
{
|
||||
label: "Termos de Uso", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Bety Cabeleireiros"
|
||||
columns={[
|
||||
{
|
||||
title: "Contactos", items: [
|
||||
{ label: "Rua Principal, 123, Famalicão", href: "#" },
|
||||
{ label: "+351 000 000 000", href: "tel:+351000000000" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Serviços", items: [
|
||||
{ label: "Cortes", href: "#features" },
|
||||
{ label: "Coloração", href: "#features" },
|
||||
{ label: "Tratamentos", href: "#features" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Política de Privacidade", href: "#" },
|
||||
{ label: "Termos de Uso", href: "#" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user