Merge version_2 into main #3
165
src/app/page.tsx
165
src/app/page.tsx
@@ -10,9 +10,9 @@ import HeroCentered from '@/components/sections/hero/HeroCentered';
|
||||
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
||||
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
|
||||
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
|
||||
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
||||
import { Building2, CheckCircle, Palette, Scissors, Sparkles, User } from "lucide-react";
|
||||
import { Building2, CheckCircle, Palette, Scissors, Sparkles, User, Calendar, Tag as TagIcon } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -54,38 +54,22 @@ export default function LandingPage() {
|
||||
title="Professional Cuts for Every Style"
|
||||
description="Expert styling, precision haircuts, and the perfect look designed just for you. Visit your neighborhood Supercuts today."
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-black-people-taking-care-afro-hair_23-2149575478.jpg", alt: "Client 1"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/front-view-smiley-woman-getting-haircut_23-2148817196.jpg", alt: "Client 2"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/beautiful-woman-pink-sweater-smiling-vintage-lights_114579-81359.jpg", alt: "Client 3"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/female-wedding-planner-working-with-client_23-2150167196.jpg", alt: "Client 4"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-beautiful-girl-laughing-sitting-floor-white-wall_176420-8539.jpg", alt: "Client 5"},
|
||||
{ src: "http://img.b2bpic.net/free-photo/young-black-people-taking-care-afro-hair_23-2149575478.jpg", alt: "Client 1"},
|
||||
{ src: "http://img.b2bpic.net/free-photo/front-view-smiley-woman-getting-haircut_23-2148817196.jpg", alt: "Client 2"},
|
||||
{ src: "http://img.b2bpic.net/free-photo/beautiful-woman-pink-sweater-smiling-vintage-lights_114579-81359.jpg", alt: "Client 3"},
|
||||
{ src: "http://img.b2bpic.net/free-photo/female-wedding-planner-working-with-client_23-2150167196.jpg", alt: "Client 4"},
|
||||
{ src: "http://img.b2bpic.net/free-photo/young-beautiful-girl-laughing-sitting-floor-white-wall_176420-8539.jpg", alt: "Client 5"},
|
||||
]}
|
||||
avatarText="Trusted by 1M+ customers"
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Appointment", href: "#contact"},
|
||||
{ text: "Book Appointment", href: "#contact" },
|
||||
]}
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text-icon", text: "Precision Styling", icon: Scissors,
|
||||
},
|
||||
{
|
||||
type: "text-icon", text: "Expert Technicians", icon: User,
|
||||
},
|
||||
{
|
||||
type: "text-icon", text: "Affordable Quality", icon: Sparkles,
|
||||
},
|
||||
{
|
||||
type: "text-icon", text: "Modern Atmosphere", icon: Building2,
|
||||
},
|
||||
{
|
||||
type: "text-icon", text: "Consistent Results", icon: CheckCircle,
|
||||
},
|
||||
{ type: "text-icon", text: "Precision Styling", icon: Scissors },
|
||||
{ type: "text-icon", text: "Expert Technicians", icon: User },
|
||||
{ type: "text-icon", text: "Affordable Quality", icon: Sparkles },
|
||||
{ type: "text-icon", text: "Modern Atmosphere", icon: Building2 },
|
||||
{ type: "text-icon", text: "Consistent Results", icon: CheckCircle },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -94,14 +78,11 @@ export default function LandingPage() {
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={true}
|
||||
heading={[
|
||||
{
|
||||
type: "text", content: "The Supercuts Difference"},
|
||||
{
|
||||
type: "image", src: "http://img.b2bpic.net/free-photo/various-hairdressing-equipment-white-background_23-2147711631.jpg", alt: "Salon expertise"},
|
||||
{ type: "text", content: "The Supercuts Difference"},
|
||||
{ type: "image", src: "http://img.b2bpic.net/free-photo/various-hairdressing-equipment-white-background_23-2147711631.jpg", alt: "Salon expertise"},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Learn More"},
|
||||
{ text: "Learn More" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -112,15 +93,9 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Precision Cuts", description: "Classic and trendy cuts for everyone.", bentoComponent: "reveal-icon", icon: Scissors
|
||||
},
|
||||
{
|
||||
title: "Color Services", description: "Vibrant and natural color treatments.", bentoComponent: "reveal-icon", icon: Palette
|
||||
},
|
||||
{
|
||||
title: "Style Refresh", description: "Look your best with our professional styling.", bentoComponent: "reveal-icon", icon: Sparkles
|
||||
},
|
||||
{ title: "Precision Cuts", description: "Classic and trendy cuts for everyone.", bentoComponent: "reveal-icon", icon: Scissors },
|
||||
{ title: "Color Services", description: "Vibrant and natural color treatments.", bentoComponent: "reveal-icon", icon: Palette },
|
||||
{ title: "Style Refresh", description: "Look your best with our professional styling.", bentoComponent: "reveal-icon", icon: Sparkles },
|
||||
]}
|
||||
title="Services You'll Love"
|
||||
description="We offer a range of professional styling services tailored to your needs."
|
||||
@@ -128,38 +103,30 @@ export default function LandingPage() {
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardEight
|
||||
<PricingCardFive
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
tag="Service Booking"
|
||||
tagIcon={Calendar}
|
||||
title="Choose Your Style"
|
||||
description="Select the service that fits your needs and book your session directly."
|
||||
plans={[
|
||||
{
|
||||
id: "1", badge: "Popular", price: "$25", subtitle: "Basic Cut & Style", buttons: [
|
||||
{
|
||||
text: "Book"},
|
||||
],
|
||||
features: [
|
||||
"Precision cut", "Shampoo", "Quick style"],
|
||||
id: "basic", tag: "Essentials", price: "$25", period: "per session", description: "Precision cut, shampoo, and style.", button: { text: "Book Now", href: "#contact" },
|
||||
featuresTitle: "Included", features: ["Consultation", "Precision Cut", "Shampoo & Blow-dry"],
|
||||
},
|
||||
{
|
||||
id: "2", badge: "Value", price: "$45", subtitle: "Cut & Color", buttons: [
|
||||
{
|
||||
text: "Book"},
|
||||
],
|
||||
features: [
|
||||
"Precision cut", "Root color", "Full style"],
|
||||
id: "color", tag: "Color & Style", tagIcon: TagIcon,
|
||||
price: "$45", period: "per session", description: "Full color treatment with professional finish.", button: { text: "Book Now", href: "#contact" },
|
||||
featuresTitle: "Included", features: ["Root Color", "Precision Trim", "Deep Conditioning"],
|
||||
},
|
||||
{
|
||||
id: "3", badge: "Elite", price: "$60", subtitle: "Total Transformation", buttons: [
|
||||
{
|
||||
text: "Book"},
|
||||
],
|
||||
features: [
|
||||
"Precision cut", "Full highlight", "Deep conditioning"],
|
||||
id: "premium", tag: "Elite Experience", tagIcon: Sparkles,
|
||||
price: "$60", period: "per session", description: "Total transformation for complete satisfaction.", button: { text: "Book Now", href: "#contact" },
|
||||
featuresTitle: "Included", features: ["Full Highlight", "Restorative Treatment", "Professional Styling"],
|
||||
},
|
||||
]}
|
||||
title="Simple Pricing"
|
||||
description="Transparent and affordable pricing for our professional services."
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -169,12 +136,9 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1", value: "1M+", title: "Happy Clients", description: "Served this year", imageSrc: "http://img.b2bpic.net/free-photo/abstract-dynamic-textured-wave-background_1048-10491.jpg"},
|
||||
{
|
||||
id: "m2", value: "5k+", title: "Stylists", description: "Across the nation", imageSrc: "http://img.b2bpic.net/free-photo/filling-beer-glass_23-2148111236.jpg"},
|
||||
{
|
||||
id: "m3", value: "98%", title: "Satisfaction", description: "Highly rated service", imageSrc: "http://img.b2bpic.net/free-photo/top-view-arrangement-with-smiley-emoji-card_23-2148860322.jpg"},
|
||||
{ id: "m1", value: "1M+", title: "Happy Clients", description: "Served this year", imageSrc: "http://img.b2bpic.net/free-photo/abstract-dynamic-textured-wave-background_1048-10491.jpg"},
|
||||
{ id: "m2", value: "5k+", title: "Stylists", description: "Across the nation", imageSrc: "http://img.b2bpic.net/free-photo/filling-beer-glass_23-2148111236.jpg"},
|
||||
{ id: "m3", value: "98%", title: "Satisfaction", description: "Highly rated service", imageSrc: "http://img.b2bpic.net/free-photo/top-view-arrangement-with-smiley-emoji-card_23-2148860322.jpg"},
|
||||
]}
|
||||
title="By The Numbers"
|
||||
description="Serving millions with professional excellence."
|
||||
@@ -188,21 +152,9 @@ export default function LandingPage() {
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Jane D.", role: "Client", company: "Local", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/family-car-salon-woman-buying-thecar-seat-little-african-girl-with-mther_1157-45043.jpg"},
|
||||
{
|
||||
id: "2", name: "Mark S.", role: "Client", company: "Local", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-satisfied-bearded-guy-white-shirt-showing-thumbs-up-approval-like-agree-positiv_1258-113975.jpg"},
|
||||
{
|
||||
id: "3", name: "Alice M.", role: "Client", company: "Local", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-having-fun-morning-indoor-shot-spectacular-blonde-woman-red-silk-sleepwear_197531-20967.jpg"},
|
||||
{
|
||||
id: "4", name: "Sam K.", role: "Client", company: "Local", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/women-posing-together-medium-shot_23-2149883718.jpg"},
|
||||
{
|
||||
id: "5", name: "Laura B.", role: "Client", company: "Local", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-girl-laughing-sitting-floor-white-wall_176420-8539.jpg"},
|
||||
{ id: "1", name: "Jane D.", role: "Client", company: "Local", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/family-car-salon-woman-buying-thecar-seat-little-african-girl-with-mther_1157-45043.jpg"},
|
||||
{ id: "2", name: "Mark S.", role: "Client", company: "Local", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/closeup-satisfied-bearded-guy-white-shirt-showing-thumbs-up-approval-like-agree-positiv_1258-113975.jpg"},
|
||||
{ id: "3", name: "Alice M.", role: "Client", company: "Local", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/woman-having-fun-morning-indoor-shot-spectacular-blonde-woman-red-silk-sleepwear_197531-20967.jpg"},
|
||||
]}
|
||||
title="Hear From Clients"
|
||||
description="Real experiences from real people."
|
||||
@@ -214,12 +166,9 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1", title: "Do I need an appointment?", content: "While walk-ins are welcome, we recommend booking online for shorter wait times."},
|
||||
{
|
||||
id: "f2", title: "What services do you offer?", content: "We offer haircuts, styling, color services, and deep conditioning treatments."},
|
||||
{
|
||||
id: "f3", title: "Is my consultation free?", content: "Yes, all stylists provide a free style consultation before every cut."},
|
||||
{ id: "f1", title: "Do I need an appointment?", content: "While walk-ins are welcome, we recommend booking online for shorter wait times."},
|
||||
{ id: "f2", title: "What services do you offer?", content: "We offer haircuts, styling, color services, and deep conditioning treatments."},
|
||||
{ id: "f3", title: "Is my consultation free?", content: "Yes, all stylists provide a free style consultation before every cut."},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/woman-posing-hairdressing-salon_23-2147737029.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
@@ -235,13 +184,11 @@ export default function LandingPage() {
|
||||
title="Get In Touch"
|
||||
description="Ready for your next cut? Book now or send us a message."
|
||||
inputs={[
|
||||
{
|
||||
name: "name", type: "text", placeholder: "Your Name"},
|
||||
{
|
||||
name: "email", type: "email", placeholder: "Your Email"},
|
||||
{ name: "name", type: "text", placeholder: "Your Name"},
|
||||
{ name: "email", type: "email", placeholder: "Your Email"},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message", placeholder: "Your message here..."}}
|
||||
multiSelect={{ name: "service", label: "Select Service", options: ["Precision Cut", "Color & Style", "Total Transformation"] }}
|
||||
textarea={{ name: "message", placeholder: "Your message here..."}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/elderly-couple-talk-about-vacation-plans_482257-81671.jpg"
|
||||
/>
|
||||
</div>
|
||||
@@ -249,22 +196,8 @@ export default function LandingPage() {
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Company", items: [
|
||||
{
|
||||
label: "About Us", href: "#about"},
|
||||
{
|
||||
label: "Careers", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{
|
||||
label: "FAQ", href: "#faq"},
|
||||
{
|
||||
label: "Contact", href: "#contact"},
|
||||
],
|
||||
},
|
||||
{ title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Careers", href: "#" }] },
|
||||
{ title: "Support", items: [{ label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }] },
|
||||
]}
|
||||
logoText="Supercuts"
|
||||
/>
|
||||
@@ -272,4 +205,4 @@ export default function LandingPage() {
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user