235 lines
10 KiB
TypeScript
235 lines
10 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
|
|
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
|
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
|
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
|
|
|
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"
|
|
>
|
|
<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="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="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="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="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>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|