Merge version_2 into main #2
285
src/app/page.tsx
285
src/app/page.tsx
@@ -2,10 +2,10 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import ContactText from '@/components/sections/contact/ContactText';
|
||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
||||
import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
|
||||
import MediaAbout from '@/components/sections/about/MediaAbout';
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
@@ -31,22 +31,10 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
{
|
||||
name: "Team",
|
||||
id: "team",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Team", id: "team" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Hazem's Barber Shop"
|
||||
/>
|
||||
@@ -57,70 +45,10 @@ export default function LandingPage() {
|
||||
title="Crafting Your Style"
|
||||
description="Experience premium grooming and salon services at Hazem's, where traditional technique meets modern precision."
|
||||
testimonials={[
|
||||
{
|
||||
name: "John Doe",
|
||||
handle: "@johnd",
|
||||
testimonial: "Best haircut I've had in years. Professional and welcoming.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/male-barber-sitting-his-shop_23-2149186519.jpg?_wi=1",
|
||||
imageAlt: "barber shop interior modern",
|
||||
},
|
||||
{
|
||||
name: "Sarah Smith",
|
||||
handle: "@sarahs",
|
||||
testimonial: "The salon service is unmatched. Truly personalized experience.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-cutting-man-with-machine_23-2147737071.jpg?_wi=1",
|
||||
imageAlt: "barber shop interior modern",
|
||||
},
|
||||
{
|
||||
name: "Mike Ross",
|
||||
handle: "@miker",
|
||||
testimonial: "Quick, precise, and great conversation. Highly recommended.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-selfcare-products_23-2149313075.jpg?_wi=1",
|
||||
imageAlt: "barber shop interior modern",
|
||||
},
|
||||
{
|
||||
name: "Alex B.",
|
||||
handle: "@alexb",
|
||||
testimonial: "Hazem is a master at his craft. Five stars.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blurred-customer-new-haircut_23-2148257017.jpg?_wi=1",
|
||||
imageAlt: "barber shop interior modern",
|
||||
},
|
||||
{
|
||||
name: "Chris P.",
|
||||
handle: "@chrisp",
|
||||
testimonial: "The attention to detail here is incredible.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/barber-doing-haircut-bearded-aged-client-hair-salon_23-2148182013.jpg?_wi=1",
|
||||
imageAlt: "barber shop interior modern",
|
||||
},
|
||||
{ name: "John Doe", handle: "@johnd", testimonial: "Best haircut I've had in years. Professional and welcoming.", rating: 5 },
|
||||
{ name: "Sarah Smith", handle: "@sarahs", testimonial: "The salon service is unmatched. Truly personalized experience.", rating: 5 },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/male-barber-sitting-his-shop_23-2149186519.jpg?_wi=2"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/side-view-leather-barber-shop-chair_23-2148242807.jpg",
|
||||
alt: "Side view of leather barber shop chair",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-man-getting-his-beard-styled-barber_23-2148985714.jpg",
|
||||
alt: "Young man getting his beard styled at the barber",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/professional-hairdresser-sitting-barber-chair-waiting-customer_613910-3902.jpg",
|
||||
alt: "A professional hairdresser sitting on a barber chair, waiting for the next customer.",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/full-body-portrait-stylish-male-who-himself-shaving-while-sitting-barber-chair-hairdressing-salon_613910-18655.jpg",
|
||||
alt: "Full body portrait of a stylish male who himself shaving while sitting on a barber chair in a hairdressing salon.",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/man-barbershop_1303-5410.jpg",
|
||||
alt: "Man in barbershop",
|
||||
},
|
||||
]}
|
||||
avatarText="Trusted by over 500+ satisfied clients"
|
||||
/>
|
||||
</div>
|
||||
@@ -140,21 +68,9 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Expert Styling",
|
||||
description: "Tailored cuts to fit your personality.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-selfcare-products_23-2149313075.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
title: "Precision Care",
|
||||
description: "Detailed grooming with focus on quality.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blurred-customer-new-haircut_23-2148257017.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
title: "Relaxed Atmosphere",
|
||||
description: "An inviting space to unwind and be cared for.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/barber-doing-haircut-bearded-aged-client-hair-salon_23-2148182013.jpg?_wi=2",
|
||||
},
|
||||
{ title: "Expert Styling", description: "Tailored cuts to fit your personality.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-selfcare-products_23-2149313075.jpg?_wi=2" },
|
||||
{ title: "Precision Care", description: "Detailed grooming with focus on quality.", imageSrc: "http://img.b2bpic.net/free-photo/blurred-customer-new-haircut_23-2148257017.jpg?_wi=2" },
|
||||
{ title: "Relaxed Atmosphere", description: "An inviting space to unwind and be cared for.", imageSrc: "http://img.b2bpic.net/free-photo/barber-doing-haircut-bearded-aged-client-hair-salon_23-2148182013.jpg?_wi=2" },
|
||||
]}
|
||||
title="Why Choose Us?"
|
||||
description="We blend precision, style, and atmosphere to ensure you leave feeling your best."
|
||||
@@ -167,57 +83,8 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{
|
||||
id: "p1",
|
||||
title: "Haircut & Style",
|
||||
price: "$45",
|
||||
period: "per session",
|
||||
features: [
|
||||
"Precision cut",
|
||||
"Hot towel finish",
|
||||
"Styled product",
|
||||
],
|
||||
button: {
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-cutting-hair-client_23-2147778763.jpg",
|
||||
imageAlt: "Hairdresser cutting hair of client",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
title: "Beard Trim",
|
||||
price: "$25",
|
||||
period: "per session",
|
||||
features: [
|
||||
"Line up",
|
||||
"Beard conditioning",
|
||||
"Detailed shaping",
|
||||
],
|
||||
button: {
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/male-barber-sitting-his-shop_23-2149186519.jpg?_wi=3",
|
||||
imageAlt: "Hairdresser cutting hair of client",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
title: "Full Salon Experience",
|
||||
price: "$85",
|
||||
period: "per session",
|
||||
features: [
|
||||
"Haircut",
|
||||
"Beard styling",
|
||||
"Scalp treatment",
|
||||
],
|
||||
button: {
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-cutting-man-with-machine_23-2147737071.jpg?_wi=3",
|
||||
imageAlt: "Hairdresser cutting hair of client",
|
||||
},
|
||||
{ id: "p1", title: "Haircut & Style", price: "$45", period: "per session", features: ["Precision cut", "Hot towel finish", "Styled product"], button: { text: "Book Now", href: "#contact" } },
|
||||
{ id: "p2", title: "Beard Trim", price: "$25", period: "per session", features: ["Line up", "Beard conditioning", "Detailed shaping"], button: { text: "Book Now", href: "#contact" } },
|
||||
]}
|
||||
title="Our Services"
|
||||
description="Transparent pricing for high-quality grooming and styling."
|
||||
@@ -230,24 +97,8 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
team={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Hazem",
|
||||
role: "Head Barber",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/positive-bearded-black-male-with-tattoo-cross-arms-dressed-white-shirt_613910-15917.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Layla",
|
||||
role: "Senior Stylist",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/brutal-bearded-male-with-crossed-arms-dressed-yellow-plaid-shirt_613910-1818.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Omar",
|
||||
role: "Master Barber",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/looking-side-young-male-barber-wearing-uniform-holding-barber-tools-isolated-olive-green-wall_141793-106033.jpg",
|
||||
},
|
||||
{ id: "t1", name: "Hazem", role: "Head Barber" },
|
||||
{ id: "t2", name: "Layla", role: "Senior Stylist" },
|
||||
]}
|
||||
title="Meet the Stylists"
|
||||
description="Our professional team is dedicated to your look and comfort."
|
||||
@@ -260,46 +111,8 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "John D.",
|
||||
handle: "@johnd",
|
||||
testimonial: "Consistent, excellent quality every single visit.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-positive-blond-bearded-male-dressed-red-fleece-shirt-makes-conversation_613910-3727.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Sarah S.",
|
||||
handle: "@sarahs",
|
||||
testimonial: "Layla is amazing, wouldn't go anywhere else.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/serious-powerful-european-male-with-tattoo-bald-head-thick-beard-frowning-having-displeased-dissatisfied-look-expressing-his-negative-attitude-keeping-arms-folded-chest_343059-1675.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Mike R.",
|
||||
handle: "@miker",
|
||||
testimonial: "Great vibes, even better cuts. Solid work.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-getting-ready-their-clients_23-2149205931.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Alex B.",
|
||||
handle: "@alexb",
|
||||
testimonial: "Professionalism at its best.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/professional-hairdresser-washing-clients-hair-barbershop_613910-5471.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Chris P.",
|
||||
handle: "@chrisp",
|
||||
testimonial: "Definitely the best spot in town.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-treatment-hairdresser-shop_23-2149230965.jpg",
|
||||
},
|
||||
{ id: "1", name: "John D.", handle: "@johnd", testimonial: "Consistent, excellent quality every single visit.", rating: 5 },
|
||||
{ id: "2", name: "Sarah S.", handle: "@sarahs", testimonial: "Layla is amazing, wouldn't go anywhere else.", rating: 5 },
|
||||
]}
|
||||
showRating={true}
|
||||
title="Client Stories"
|
||||
@@ -312,23 +125,9 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Do I need an appointment?",
|
||||
content: "Yes, we recommend booking online to ensure your preferred slot.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Do you accept walk-ins?",
|
||||
content: "Walk-ins are welcome if space is available, but booking is preferred.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "What payment methods do you accept?",
|
||||
content: "We accept major cards, cash, and mobile payments.",
|
||||
},
|
||||
{ id: "f1", title: "Do I need an appointment?", content: "Yes, we recommend booking online to ensure your preferred slot." },
|
||||
{ id: "f2", title: "Do you accept walk-ins?", content: "Walk-ins are welcome if space is available, but booking is preferred." },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/lounge-area-hotel-front-desk_482257-76248.jpg"
|
||||
title="Common Questions"
|
||||
description="Everything you need to know about your next visit."
|
||||
faqsAnimation="slide-up"
|
||||
@@ -337,53 +136,19 @@ export default function LandingPage() {
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
<ContactText
|
||||
text="📍 123 Grooming Lane, Beauty City\n⏰ Mon-Sat: 9am - 8pm, Sun: Closed\n📞 Call us at (555) 123-4567 to book your spot!"
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Visit Us"
|
||||
title="Book Your Appointment"
|
||||
description="Ready for a fresh look? Reach out today."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/stylish-room-with-blurred-effect_1203-554.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
<FooterLogoEmphasis
|
||||
logoText="Hazem's Barber Shop & Salon"
|
||||
columns={[
|
||||
{
|
||||
title: "Quick Links",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Services",
|
||||
href: "#services",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ items: [{ label: "About", href: "#about" }, { label: "Services", href: "#services" }, { label: "Contact", href: "#contact" }] },
|
||||
{ items: [{ label: "123 Grooming Lane, Beauty City" }, { label: "(555) 123-4567" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #f5f4ef;
|
||||
--card: #dad6cd;
|
||||
--foreground: #2a2928;
|
||||
--primary-cta: #2a2928;
|
||||
--background: #fbfaf8;
|
||||
--card: #f0ede8;
|
||||
--foreground: #2e2521;
|
||||
--primary-cta: #2e2521;
|
||||
--primary-cta-text: #f5f4ef;
|
||||
--secondary-cta: #ecebea;
|
||||
--secondary-cta: #ffffff;
|
||||
--secondary-cta-text: #2a2928;
|
||||
--accent: #ffffff;
|
||||
--background-accent: #c6b180;
|
||||
--accent: #b2a28b;
|
||||
--background-accent: #e3dccf;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user