Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| e60db36177 | |||
| 90d613e2c9 | |||
| cdfb4c80cd |
215
src/app/page.tsx
215
src/app/page.tsx
@@ -30,22 +30,10 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Portfolio",
|
||||
id: "portfolio",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "features" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
brandName="StyledxShantel"
|
||||
/>
|
||||
@@ -53,22 +41,14 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
logoText="StyledxShantel"
|
||||
description="Expert hair services in Waterloo, NE. Specializing in balayage, foils, and vibrant color transformations."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
text: "View Portfolio",
|
||||
href: "#features",
|
||||
},
|
||||
{ text: "Book Now", href: "#contact" },
|
||||
{ text: "View Services", href: "#features" }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/woman-posing-hairdressing-salon_23-2147737029.jpg?_wi=1"
|
||||
imageSrc="https://img.freepik.com/free-photo/hairdresser-working-hair-salon_23-2148817177.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
@@ -78,7 +58,7 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
title="Passionate About Your Hair"
|
||||
description="At 20 years old, I am dedicated to creating modern, stylish hair transformations. With a focus on balayage and dimensional color, I aim to help you feel confident and beautiful."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/woman-wearing-black-costume-lady-with-halloween-makeup_1157-41132.jpg"
|
||||
imageSrc="https://img.freepik.com/free-photo/young-woman-getting-hair-done_23-2147737029.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -88,24 +68,13 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Balayage",
|
||||
description: "Custom hand-painted highlights for a natural, sun-kissed effect.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-dying-her-hair_23-2148817177.jpg",
|
||||
},
|
||||
{
|
||||
title: "Partial Foils",
|
||||
description: "Strategic placement of foils to brighten and add dimension.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-transgender-person-wearing-green-wig-looking-away_23-2148827049.jpg",
|
||||
},
|
||||
{
|
||||
title: "All Over Color",
|
||||
description: "Full coverage or refreshing tint for rich, vibrant hair color.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-hair-salon_23-2150668430.jpg",
|
||||
},
|
||||
{ title: "Balayage", description: "Hand-painted highlights for a natural, sun-kissed effect.", imageSrc: "https://img.freepik.com/free-photo/portrait-woman-having-her-hair-dyed_23-2148108777.jpg" },
|
||||
{ title: "Partial Foils", description: "Strategic foil placement for brightness and dimension.", imageSrc: "https://img.freepik.com/free-photo/hair-stylist-applying-foil-highlights_23-2148827049.jpg" },
|
||||
{ title: "All-Over Color", description: "Refresh your look with deep, rich, or vibrant custom tints.", imageSrc: "https://img.freepik.com/free-photo/woman-with-new-hair-color_23-2150668430.jpg" },
|
||||
{ title: "Gloss & Treatment", description: "Revitalizing treatments to restore shine and health.", imageSrc: "https://img.freepik.com/free-photo/woman-hair-mask_23-2148151722.jpg" }
|
||||
]}
|
||||
title="My Signature Services"
|
||||
description="High-end coloring and styling techniques for an elevated look."
|
||||
description="Tailored hair care experiences designed for your unique style."
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -115,42 +84,12 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "p1",
|
||||
badge: "Color",
|
||||
price: "$120+",
|
||||
subtitle: "Balayage Transformation",
|
||||
features: [
|
||||
"Consultation",
|
||||
"Custom Color",
|
||||
"Styling",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
badge: "Foil",
|
||||
price: "$90+",
|
||||
subtitle: "Partial Foil Highlights",
|
||||
features: [
|
||||
"Consultation",
|
||||
"Foil Placement",
|
||||
"Gloss",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
badge: "Classic",
|
||||
price: "$70+",
|
||||
subtitle: "All Over Color",
|
||||
features: [
|
||||
"Consultation",
|
||||
"Full Color",
|
||||
"Styling",
|
||||
],
|
||||
},
|
||||
{ id: "p1", badge: "Premium", price: "$150+", subtitle: "Full Balayage", features: ["Consultation", "Custom Lightening", "Gloss Treatment", "Style"] },
|
||||
{ id: "p2", badge: "Popular", price: "$100+", subtitle: "Partial Foils", features: ["Consultation", "Strategic Foils", "Gloss", "Style"] },
|
||||
{ id: "p3", badge: "Essential", price: "$85+", subtitle: "All-Over Color", features: ["Consultation", "Root-to-End Color", "Conditioning", "Style"] }
|
||||
]}
|
||||
title="Service Pricing"
|
||||
description="Transparent pricing for all professional hair services."
|
||||
description="Professional hair transformations at transparent rates."
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -160,30 +99,12 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "3",
|
||||
title: "Client Reviews",
|
||||
description: "5-star rating average",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blonde-woman-getting-her-hair-done_23-2148108777.jpg",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "100%",
|
||||
title: "Satisfaction",
|
||||
description: "Dedicated to quality",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/doctor-examining-female-patients-face-clinic_107420-73982.jpg",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "24hr",
|
||||
title: "Policy",
|
||||
description: "Respecting time & art",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/wonderful-young-lady-with-happy-face-expression-smiling-laughing-spectacular-girl-red-dress-standing-purple-wall_197531-15759.jpg",
|
||||
},
|
||||
{ id: "m1", value: "5+", title: "Years Experience", description: "Expertise in modern color", imageSrc: "https://img.freepik.com/free-photo/close-up-professional-hairdresser_23-2148435793.jpg" },
|
||||
{ id: "m2", value: "500+", title: "Clients Served", description: "Building beautiful transformations", imageSrc: "https://img.freepik.com/free-photo/happy-customer-after-hair-salon_23-2148435793.jpg" },
|
||||
{ id: "m3", value: "100%", title: "Quality Focus", description: "Using only the best products", imageSrc: "https://img.freepik.com/free-photo/high-quality-hair-care-products_23-2148151722.jpg" }
|
||||
]}
|
||||
title="Business Highlights"
|
||||
description="Quality service backed by happy clients."
|
||||
description="Setting standards in salon excellence."
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -193,93 +114,33 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Client One",
|
||||
role: "Satisfied Customer",
|
||||
company: "Local",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/lesbian-couple-wearing-white-their-wedding_23-2150835701.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Client Two",
|
||||
role: "Recurring Client",
|
||||
company: "Local",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-being-asked-marry-her-boyfriend_23-2148435793.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Client Three",
|
||||
role: "First-time Visitor",
|
||||
company: "Local",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/funny-joyful-woman-makes-face-palm-laughs-something-wears-hair-curlers-makes-perfect-hairstyle-wears-dressing-gown-poses-against-pink-wall-women-grooming-home-style-concept_273609-40011.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Client Four",
|
||||
role: "Happy Customer",
|
||||
company: "Local",
|
||||
rating: 5,
|
||||
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: "t5",
|
||||
name: "Client Five",
|
||||
role: "Regular Client",
|
||||
company: "Local",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blonde-young-woman-holding-her-boyfriend-s-hand-looking-camera_23-2148151722.jpg",
|
||||
},
|
||||
{ id: "t1", name: "Sarah M.", role: "Regular Client", company: "Local", rating: 5, imageSrc: "https://img.freepik.com/free-photo/woman-smiling-new-hair_23-2148151722.jpg" },
|
||||
{ id: "t2", name: "Jessica L.", role: "First-time Client", company: "Local", rating: 5, imageSrc: "https://img.freepik.com/free-photo/young-woman-happy-with-haircut_23-2148435793.jpg" },
|
||||
{ id: "t3", name: "Emma D.", role: "Wedding Client", company: "Local", rating: 5, imageSrc: "https://img.freepik.com/free-photo/bride-with-beautiful-hair_23-2148108777.jpg" }
|
||||
]}
|
||||
kpiItems={[
|
||||
{
|
||||
value: "5.0",
|
||||
label: "Avg Rating",
|
||||
},
|
||||
{
|
||||
value: "100%",
|
||||
label: "Retention",
|
||||
},
|
||||
{
|
||||
value: "3",
|
||||
label: "Reviews",
|
||||
},
|
||||
{ value: "5.0", label: "Avg Rating" },
|
||||
{ value: "98%", label: "Referral Rate" },
|
||||
{ value: "100+", label: "Happy Clients" }
|
||||
]}
|
||||
title="What Clients Say"
|
||||
description="See why my clients keep coming back for more."
|
||||
title="Client Stories"
|
||||
description="What my wonderful clients have to say about their experience."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={true}
|
||||
title="Ready to Book?"
|
||||
description="Reach out to schedule your next hair transformation. Business Hours: Tuesday-Saturday 9 AM - 8 PM."
|
||||
title="Ready for a Change?"
|
||||
description="Schedule your next appointment and let's bring your vision to life. Open Tues-Sat, 9AM-8PM."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Email",
|
||||
required: true,
|
||||
},
|
||||
{ name: "name", type: "text", placeholder: "Full Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Email Address", required: true },
|
||||
{ name: "phone", type: "tel", placeholder: "Phone Number", required: true }
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Desired services or questions",
|
||||
rows: 4,
|
||||
required: true,
|
||||
}}
|
||||
textarea={{ name: "message", placeholder: "Tell me about your desired look...", rows: 4, required: true }}
|
||||
buttonText="Submit Inquiry"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/woman-posing-hairdressing-salon_23-2147737029.jpg?_wi=2"
|
||||
imageSrc="https://img.freepik.com/free-photo/hair-stylist-tools-salon_23-2148151722.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -292,4 +153,4 @@ export default function LandingPage() {
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user