Merge version_2 into main #4
198
src/app/page.tsx
198
src/app/page.tsx
@@ -3,13 +3,13 @@
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||||
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
|
||||
import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
||||
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
||||
import { Coffee, Palette, Scissors } from "lucide-react";
|
||||
import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
|
||||
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
||||
import { Palette, Scissors } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -29,14 +29,10 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "About", id: "about"},
|
||||
{
|
||||
name: "Services", id: "services"},
|
||||
{
|
||||
name: "Reviews", id: "reviews"},
|
||||
{
|
||||
name: "Contact", id: "contact"},
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Reviews", id: "reviews" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Ernesto's"
|
||||
/>
|
||||
@@ -46,158 +42,86 @@ export default function LandingPage() {
|
||||
<HeroOverlayTestimonial
|
||||
title="Ernesto's Hairstyling"
|
||||
description="Expert haircuts and coloring in a comfortable, neighborhood atmosphere. Serving Washington, DC with professional care since 1994."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Jackson P.", handle: "Washington, DC", testimonial: "You can't get a better haircut for a better price anywhere. Comfortable and wonderful people.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-african-american-woman-talking-smartphone-armchair-office_23-2148042626.jpg?_wi=1", imageAlt: "elegant hair salon interior"},
|
||||
{
|
||||
name: "Heidi M.", handle: "Northwest, DC", testimonial: "Ernesto is quick, methodical and gives an excellent cut at a fair price. Hard to find vibe!", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/adult-hairdresser-shaving-customers-beard-hair-salon_23-2148181971.jpg", imageAlt: "professional barber at work"},
|
||||
{
|
||||
name: "Sarah L.", handle: "Capitol Hill, DC", testimonial: "The best neighborhood salon I've ever visited. Truly personal service.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-washing-woman-s-hair_23-2148940880.jpg?_wi=1", imageAlt: "professional hair coloring service"},
|
||||
{
|
||||
name: "David W.", handle: "Dupont Circle, DC", testimonial: "Consistent, professional, and friendly. I wouldn't go anywhere else.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-cuts-hair-barbershop_1157-15500.jpg?_wi=1", imageAlt: "precision hair trim"},
|
||||
{
|
||||
name: "Maria G.", handle: "Georgetown, DC", testimonial: "Exquisite coloring skills and such a warm, inviting environment.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/mirror-hairdressing-salon_23-2147670185.jpg?_wi=1", imageAlt: "happy customer after hair service"},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Appointment", href: "#contact"},
|
||||
]}
|
||||
testimonials={[]}
|
||||
buttons={[{ text: "Book Appointment", href: "#contact" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/smiling-african-american-woman-talking-smartphone-armchair-office_23-2148042626.jpg?_wi=2"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-black-people-taking-care-afro-hair_23-2149575478.jpg", alt: "Customer 1"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/hairdresser-cutting-man-s-hair-barber-shop_23-2149186462.jpg", alt: "Customer 2"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/excited-girlfriends-sharing-with-news_23-2147762524.jpg", alt: "Customer 3"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-happy-young-man-bed_23-2147862652.jpg", alt: "Customer 4"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/woman-getting-treatment-hairdresser-shop_23-2149230961.jpg", alt: "Customer 5"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
useInvertedBackground={false}
|
||||
title="A Community Staple"
|
||||
description={[
|
||||
"Located in the heart of Washington, DC, Ernesto's has been a community favorite for decades. We pride ourselves on providing high-quality, professional services in a friendly, relaxed setting.", "Whether you need a precise cut, expert coloring, or just a friendly conversation, our neighborhood salon is the place for you. We offer convenient access by metro or car, and always strive to make your visit a positive, refreshing experience."]}
|
||||
/>
|
||||
<TeamCardEleven
|
||||
title="Our Stylists"
|
||||
description="Meet the experts behind your perfect look. Ernesto and Adriana bring decades of professional passion to every client visit."
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
groups={[
|
||||
{
|
||||
id: "team", groupTitle: "The Team", members: [
|
||||
{ id: "ernesto", title: "Ernesto", subtitle: "Lead Stylist", detail: "With over 30 years of experience, Ernesto specializes in precision cuts and classic styling." },
|
||||
{ id: "adriana", title: "Adriana", subtitle: "Color Expert", detail: "Adriana brings artistic flair to all coloring services, ensuring vibrant and healthy results." }
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTwentyFive
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Expert Coloring", description: "Customized color treatments using high-quality products for long-lasting vibrancy.", icon: Palette,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-washing-woman-s-hair_23-2148940880.jpg?_wi=2", imageAlt: "Coloring service"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-washing-woman-s-hair_23-2148940880.jpg?_wi=3", imageAlt: "Coloring service"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Precision Cutting", description: "Methodical, professional cuts adapted to your personal style and preferences.", icon: Scissors,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-cuts-hair-barbershop_1157-15500.jpg?_wi=2", imageAlt: "Hair cutting"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-cuts-hair-barbershop_1157-15500.jpg?_wi=3", imageAlt: "Hair cutting"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Relaxed Atmosphere", description: "A comfortable, neighborhood vibe that makes your salon visit a truly positive break.", icon: Coffee,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/mirror-hairdressing-salon_23-2147670185.jpg?_wi=2", imageAlt: "Salon vibe"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/mirror-hairdressing-salon_23-2147670185.jpg?_wi=3", imageAlt: "Salon vibe"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Our Services"
|
||||
description="Professional hair services tailored to your needs by our experienced staff."
|
||||
/>
|
||||
<FeatureCardTwentyNine
|
||||
title="Our Services"
|
||||
description="Professional hair care tailored to you."
|
||||
textboxLayout="split"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ title: "Precision Cuts", description: "Tailored haircuts for every style.", imageSrc: "http://img.b2bpic.net/free-photo/man-cuts-hair-barbershop_1157-15500.jpg?_wi=1", titleIconSrc: "", buttonText: "Book Now", buttonHref: "#contact" },
|
||||
{ title: "Expert Color", description: "High-quality professional color treatments.", imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-washing-woman-s-hair_23-2148940880.jpg?_wi=1", titleIconSrc: "", buttonText: "Book Now", buttonHref: "#contact" },
|
||||
{ title: "Styling", description: "Professional blowouts and styling.", imageSrc: "http://img.b2bpic.net/free-photo/mirror-hairdressing-salon_23-2147670185.jpg?_wi=1", titleIconSrc: "", buttonText: "Book Now", buttonHref: "#contact" },
|
||||
{ title: "Treatments", description: "Nourishing hair health treatments.", imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-treatment-hairdresser-shop_23-2149230961.jpg?_wi=1", titleIconSrc: "", buttonText: "Book Now", buttonHref: "#contact" },
|
||||
{ title: "Consultation", description: "Personalized style assessments.", imageSrc: "http://img.b2bpic.net/free-photo/adult-hairdresser-shaving-customers-beard-hair-salon_23-2148181971.jpg", titleIconSrc: "", buttonText: "Book Now", buttonHref: "#contact" },
|
||||
{ title: "Maintenance", description: "Keep your look fresh and vibrant.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-young-man-bed_23-2147862652.jpg", titleIconSrc: "", buttonText: "Book Now", buttonHref: "#contact" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="reviews" data-section="reviews">
|
||||
<TestimonialCardFifteen
|
||||
useInvertedBackground={false}
|
||||
testimonial="I have been going to Ernesto's for several years. The services are very professionally rendered and the shop is always very pleasant and clean. It is a community fixture."
|
||||
rating={5}
|
||||
author="Lea N."
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-black-people-taking-care-afro-hair_23-2149575478.jpg", alt: "Reviewer"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/hairdresser-cutting-man-s-hair-barber-shop_23-2149186462.jpg", alt: "Reviewer"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/excited-girlfriends-sharing-with-news_23-2147762524.jpg", alt: "Reviewer"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-happy-young-man-bed_23-2147862652.jpg", alt: "Reviewer"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/woman-getting-treatment-hairdresser-shop_23-2149230961.jpg", alt: "Reviewer"},
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
/>
|
||||
<TestimonialCardTen
|
||||
title="Customer Experiences"
|
||||
description="See why our neighborhood loves us."
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", title: "Excellent Service", quote: "Truly the best neighborhood salon.", name: "Sarah L.", role: "Local Resident" },
|
||||
{ id: "2", title: "Professional", quote: "Ernesto is incredibly methodical and skilled.", name: "Heidi M.", role: "Local Resident" },
|
||||
{ id: "3", title: "Consistent", quote: "I wouldn't go anywhere else.", name: "David W.", role: "Local Resident" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "plain"}}
|
||||
tag="Visit Us"
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
tag="Ready to visit?"
|
||||
title="Book Your Appointment"
|
||||
description="Experience our professional hairstyling today. Call us to schedule your visit or find out about our current services."
|
||||
buttons={[
|
||||
{
|
||||
text: "Call to Book", href: "tel:+12025550199"},
|
||||
]}
|
||||
description="Call us at 202-686-0580 to schedule your next visit. We have dedicated parking available behind the building for your convenience."
|
||||
buttons={[{ text: "Call 202-686-0580", href: "tel:+12026860580" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Ernesto's Hairstyling", items: [
|
||||
{
|
||||
label: "Washington, DC", href: "#"},
|
||||
{
|
||||
label: "Phone: (202) 555-0199", href: "tel:+12025550199"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Links", items: [
|
||||
{
|
||||
label: "About", href: "#about"},
|
||||
{
|
||||
label: "Services", href: "#services"},
|
||||
{
|
||||
label: "Reviews", href: "#reviews"},
|
||||
{
|
||||
label: "Contact", href: "#contact"},
|
||||
],
|
||||
},
|
||||
{ title: "Location", items: [{ label: "Washington, DC" }, { label: "Parking Available" }] },
|
||||
{ title: "Contact", items: [{ label: "(202) 686-0580", href: "tel:+12026860580" }, { label: "Get Directions" }] },
|
||||
{ title: "Quick Links", items: [{ label: "About", href: "#about" }, { label: "Services", href: "#services" }, { label: "Reviews", href: "#reviews" }, { label: "Contact", href: "#contact" }] },
|
||||
]}
|
||||
bottomLeftText="© 2025 Ernesto's Hairstyling"
|
||||
bottomRightText="Built with passion in Washington, DC"
|
||||
bottomRightText="Serving DC Since 1994"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #f5f4ef;
|
||||
--card: #dad6cd;
|
||||
--foreground: #2a2928;
|
||||
--primary-cta: #2a2928;
|
||||
--background: #f6f0e9;
|
||||
--card: #efe7dd;
|
||||
--foreground: #2b180a;
|
||||
--primary-cta: #2b180a;
|
||||
--primary-cta-text: #f5f4ef;
|
||||
--secondary-cta: #ecebea;
|
||||
--secondary-cta: #efe7dd;
|
||||
--secondary-cta-text: #2a2928;
|
||||
--accent: #ffffff;
|
||||
--background-accent: #c6b180;
|
||||
--accent: #94877c;
|
||||
--background-accent: #afa094;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user