bender/06be4fd2-7273-4da1-acce-ba50cef2876d
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

merge into: bender:version_1
Branches Tags
bender:main bender:version_3 bender:version_2 bender:version_1
...
pull from: bender:version_2
Branches Tags
bender:main bender:version_3 bender:version_2 bender:version_1

2 Commits
version_1 ... version_2

Author SHA1 Message Date
bender
9143b9dc1e Update src/app/styles/variables.css 2026-04-13 05:04:19 +00:00
bender
0b7df9ee2f Update src/app/page.tsx 2026-04-13 05:04:18 +00:00
2 changed files with 46 additions and 138 deletions
Expand all files Collapse all files

170
src/app/page.tsx
View File

@@ -2,9 +2,9 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import TeamCardSix from '@/components/sections/team/TeamCardSix';
@@ -18,71 +18,33 @@ export default function LandingPage() {
borderRadius="soft"
contentWidth="medium"
sizing="largeSmallSizeMediumTitles"
background="floatingGradient"
cardStyle="gradient-radial"
primaryButtonStyle="primary-glow"
background="noise"
cardStyle="solid"
primaryButtonStyle="flat"
secondaryButtonStyle="solid"
headingFontWeight="normal"
headingFontWeight="bold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{
name: "Services",
id: "services",
},
{
name: "Booking",
id: "booking",
},
{ name: "Services", id: "services" },
{ name: "Booking", id: "booking" },
]}
button={{
text: "Book Now",
href: "#booking",
}}
button={{ text: "Book Now", href: "#booking" }}
brandName="Fresh Cut Barbers"
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardCarousel
background={{
variant: "plain",
}}
background={{ variant: "plain" }}
title="Book Your Appointment in Seconds"
description="Experience premium grooming with our expert barbers. Skip the wait and secure your spot online instantly."
buttons={[
{
text: "Book Now",
href: "#booking",
},
]}
description="Premium grooming at your fingertips. Choose your service, pick a time, and secure your spot instantly."
buttons={[{ text: "Book Now", href: "#booking" }]}
mediaItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/close-up-details-hairdresser-salon_23-2149205860.jpg",
imageAlt: "modern barbershop interior professional chair",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/front-view-leather-barber-shop-chair_23-2148256927.jpg",
imageAlt: "modern barbershop interior professional chair",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/professional-hairdresser-sitting-barber-chair-waiting-customer_613910-3902.jpg",
imageAlt: "modern barbershop interior professional chair",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/professional-barber-shop-chairs-close-up_23-2148353478.jpg",
imageAlt: "modern barbershop interior professional chair",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/male-hairdresser-combing-hair-senior-client_23-2148181882.jpg",
imageAlt: "modern barbershop interior professional chair",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/side-view-old-couple-with-cute-dog_23-2149614016.jpg",
imageAlt: "modern barbershop interior professional chair",
},
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-details-hairdresser-salon_23-2149205860.jpg", imageAlt: "modern barbershop interior" },
{ imageSrc: "http://img.b2bpic.net/free-photo/professional-hairdresser-sitting-barber-chair-waiting-customer_613910-3902.jpg", imageAlt: "barber chair" }
]}
/>
</div>
@@ -90,15 +52,10 @@ export default function LandingPage() {
<div id="testimonial" data-section="testimonial">
<TestimonialCardFifteen
useInvertedBackground={false}
testimonial="The best haircut experience in the city. Professional, clean, and always on time."
testimonial="The most seamless booking experience I've ever had. Clean, professional, and sharp cuts."
rating={5}
author="James Peterson"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/young-man-barber-shop-after-getting-haircut_23-2149186513.jpg",
alt: "Happy customer profile",
},
]}
author="Marcus Thorne"
avatars={[{ src: "http://img.b2bpic.net/free-photo/young-man-barber-shop-after-getting-haircut_23-2149186513.jpg", alt: "client" }]}
ratingAnimation="slide-up"
avatarsAnimation="opacity"
/>
@@ -110,22 +67,12 @@ export default function LandingPage() {
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={false}
title="Meet Our Expert Barbers"
description="Our team brings years of experience and a passion for modern grooming to every chair."
tag="Our Experts"
title="Our Grooming Experts"
description="Masters of the fade, beard sculptors, and style perfectionists."
tag="Meet the Crew"
members={[
{
id: "barber-1",
name: "Alex",
role: "Master Barber",
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-barber-hair-salon_23-2148242782.jpg",
},
{
id: "barber-2",
name: "Marcus",
role: "Senior Stylist",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-details-hairdresser-salon_23-2149205856.jpg",
},
{ id: "a", name: "Alex", role: "Head Barber", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-barber-hair-salon_23-2148242782.jpg" },
{ id: "b", name: "Marcus", role: "Lead Stylist", imageSrc: "http://img.b2bpic.net/free-photo/close-up-details-hairdresser-salon_23-2149205856.jpg" },
]}
/>
</div>
@@ -133,77 +80,38 @@ export default function LandingPage() {
<div id="faq" data-section="faq">
<FaqSplitText
useInvertedBackground={false}
sideTitle="Common Questions"
sideDescription="Everything you need to know about our services and booking process."
sideTitle="FAQs"
faqs={[
{
id: "q1",
title: "Do I need an appointment?",
content: "While we accept walk-ins, we highly recommend booking online to guarantee your spot.",
},
{
id: "q2",
title: "What services do you offer?",
content: "We provide classic haircuts, beard trims, shaves, and grooming consultations.",
},
{ id: "1", title: "Services Available", content: "Haircut, Fade, and Beard Trim available for all sessions." },
{ id: "2", title: "Can I reschedule?", content: "Yes, you can modify your appointment online up to 2 hours before the start time." },
]}
faqsAnimation="blur-reveal"
/>
</div>
<div id="booking" data-section="booking">
<ContactSplit
<ContactSplitForm
useInvertedBackground={true}
background={{
variant: "plain",
}}
tag="Instant Booking"
title="Book Your Session"
description="Select your service, preferred date, and share your contact details. We will confirm your visit shortly."
mediaAnimation="none"
inputPlaceholder="Enter your phone number for booking"
buttonText="Book Appointment"
title="Book Your Appointment"
description="Select your service and preferred time. Confirmation will be sent directly to your phone."
inputs={[
{ name: "name", type: "text", placeholder: "Full Name" },
{ name: "phone", type: "tel", placeholder: "Phone Number" }
]}
multiSelect={{ name: "service", label: "Select Service", options: ["Haircut", "Fade", "Beard Trim"] }}
buttonText="Confirm Booking"
imageSrc="http://img.b2bpic.net/free-photo/barber-doing-haircut-bearded-aged-client-hair-salon_23-2148182013.jpg"
imageAlt="Barber doing haircut bearded aged client in hair salon"
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/still-life-eco-products_23-2149371298.jpg"
logoText="Fresh Cut Barbers"
columns={[
{
title: "Visit Us",
items: [
{
label: "123 Barber St, City",
href: "#",
},
{
label: "Mon - Sat: 9am - 7pm",
href: "#",
},
],
},
{
title: "Booking",
items: [
{
label: "Services",
href: "#services",
},
{
label: "Book Now",
href: "#booking",
},
],
},
]}
imageAlt="barbershop branding logo minimalist"
<FooterLogoReveal
logoText="Fresh Cut"
leftLink={{ text: "Privacy Policy", href: "#" }}
rightLink={{ text: "© 2025 Fresh Cut Barbers", href: "#" }}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}

14
src/app/styles/variables.css
View File

@@ -10,15 +10,15 @@
--accent: #ffffff;
--background-accent: #ffffff; */
--background: #f5f5f5;
--card: #ffffff;
--foreground: #1c1c1c;
--primary-cta: #1c1c1c;
--background: #0a0a0a;
--card: #1a1a1a;
--foreground: #ffffff;
--primary-cta: #ffffff;
--primary-cta-text: #f5f5f5;
--secondary-cta: #ffffff;
--secondary-cta: #1a1a1a;
--secondary-cta-text: #1c1c1c;
--accent: #15479c;
--background-accent: #a8cce8;
--accent: #333333;
--background-accent: #222222;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);