Add src/app/services/page.tsx
This commit is contained in:
367
src/app/services/page.tsx
Normal file
367
src/app/services/page.tsx
Normal file
@@ -0,0 +1,367 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
||||
import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
|
||||
import PricingCardTwo from "@/components/sections/pricing/PricingCardTwo";
|
||||
import ContactText from "@/components/sections/contact/ContactText";
|
||||
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
|
||||
import { Sparkles } from "lucide-react";
|
||||
|
||||
export default function ServicesPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-bubble"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
contentWidth="small"
|
||||
sizing="mediumLargeSizeMediumTitles"
|
||||
background="circleGradient"
|
||||
cardStyle="gradient-radial"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
brandName="Sekelbossie @ Sononder"
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Services", id: "/services" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
title="Our Premium Services"
|
||||
description="Quality firewood and fresh homemade cupcakes tailored to your needs"
|
||||
tag="Services"
|
||||
tagIcon={Sparkles}
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "plain" }}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/photo-wood-texture-pattern_58702-15599.jpg", imageAlt: "Quality stacked firewood"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/delicious-rainbow-cupcake-still-life_23-2150423818.jpg?_wi=1", imageAlt: "Fresh homemade cupcakes"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-view-daisy-mountain-landscape-with-green-grass-park-foreground_181624-50333.jpg?_wi=1", imageAlt: "Sekelbossie farm"},
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
buttons={[
|
||||
{
|
||||
text: "Call to Order: 083 261 9619", href: "tel:0832619619"},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="haircuts" data-section="haircuts">
|
||||
<PricingCardTwo
|
||||
title="Haircuts"
|
||||
description="Professional haircut services for all hair types and styles"
|
||||
tag="Hair Services"
|
||||
tagIcon={Sparkles}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "1", badge: "Gentleman's Cut", badgeIcon: Sparkles,
|
||||
price: "$25-35", subtitle: "Classic and contemporary cuts", buttons: [
|
||||
{ text: "Book Appointment", href: "contact" },
|
||||
],
|
||||
features: [
|
||||
"Professional styling", "Quality grooming tools", "Personalized attention"],
|
||||
},
|
||||
{
|
||||
id: "2", badge: "Ladies' Cut", badgeIcon: Sparkles,
|
||||
price: "$35-50", subtitle: "Trendy and elegant cuts", buttons: [
|
||||
{ text: "Book Appointment", href: "contact" },
|
||||
],
|
||||
features: [
|
||||
"Latest trends & styles", "Expert styling consultation", "Premium hair care"],
|
||||
},
|
||||
{
|
||||
id: "3", badge: "Kids' Cut", badgeIcon: Sparkles,
|
||||
price: "$15-25", subtitle: "Fun and safe haircuts", buttons: [
|
||||
{ text: "Book Appointment", href: "contact" },
|
||||
],
|
||||
features: [
|
||||
"Gentle and patient service", "Age-appropriate styles", "Quick and comfortable"],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="color-services" data-section="color-services">
|
||||
<PricingCardTwo
|
||||
title="Color Services"
|
||||
description="Professional hair coloring and tinting services"
|
||||
tag="Color & Tinting"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{
|
||||
id: "1", badge: "Single Color", badgeIcon: Sparkles,
|
||||
price: "$40-60", subtitle: "Solid color application", buttons: [
|
||||
{ text: "Book Appointment", href: "contact" },
|
||||
],
|
||||
features: [
|
||||
"Professional color matching", "Quality color products", "Long-lasting results"],
|
||||
},
|
||||
{
|
||||
id: "2", badge: "Highlights & Lowlights", badgeIcon: Sparkles,
|
||||
price: "$50-80", subtitle: "Dimensional color effects", buttons: [
|
||||
{ text: "Book Appointment", href: "contact" },
|
||||
],
|
||||
features: [
|
||||
"Custom color placement", "Dimensional styling", "Expert color blending"],
|
||||
},
|
||||
{
|
||||
id: "3", badge: "Root Touch-Up", badgeIcon: Sparkles,
|
||||
price: "$30-45", subtitle: "Maintain your color", buttons: [
|
||||
{ text: "Book Appointment", href: "contact" },
|
||||
],
|
||||
features: [
|
||||
"Perfect color match", "Quick service", "Affordable maintenance"],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="highlights-blonding" data-section="highlights-blonding">
|
||||
<PricingCardTwo
|
||||
title="Highlights & Blonding"
|
||||
description="Premium highlighting and professional blonding services"
|
||||
tag="Blonde Services"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "1", badge: "Partial Highlights", badgeIcon: Sparkles,
|
||||
price: "$50-75", subtitle: "Face-framing highlights", buttons: [
|
||||
{ text: "Book Appointment", href: "contact" },
|
||||
],
|
||||
features: [
|
||||
"Strategic placement", "Brightening effect", "Low maintenance"],
|
||||
},
|
||||
{
|
||||
id: "2", badge: "Full Highlights", badgeIcon: Sparkles,
|
||||
price: "$75-120", subtitle: "Complete dimensional color", buttons: [
|
||||
{ text: "Book Appointment", href: "contact" },
|
||||
],
|
||||
features: [
|
||||
"All-over highlights", "Professional toning", "Luxurious finish"],
|
||||
},
|
||||
{
|
||||
id: "3", badge: "Blonde Bliss Package", badgeIcon: Sparkles,
|
||||
price: "$100-150", subtitle: "Premium blonde service", buttons: [
|
||||
{ text: "Book Appointment", href: "contact" },
|
||||
],
|
||||
features: [
|
||||
"Expert blonding", "Toning included", "Hair care treatment"],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="bleach-toner" data-section="bleach-toner">
|
||||
<PricingCardTwo
|
||||
title="Bleach & Toner Services"
|
||||
description="Professional bleaching and toning for desired hair color"
|
||||
tag="Advanced Services"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{
|
||||
id: "1", badge: "Bleaching Service", badgeIcon: Sparkles,
|
||||
price: "$60-90", subtitle: "Professional lightening", buttons: [
|
||||
{ text: "Book Appointment", href: "contact" },
|
||||
],
|
||||
features: [
|
||||
"Gentle bleaching process", "Hair health protection", "Professional expertise"],
|
||||
},
|
||||
{
|
||||
id: "2", badge: "Toning Service", badgeIcon: Sparkles,
|
||||
price: "$30-50", subtitle: "Perfect color tone", buttons: [
|
||||
{ text: "Book Appointment", href: "contact" },
|
||||
],
|
||||
features: [
|
||||
"Custom tone selection", "Brassiness elimination", "Vibrant results"],
|
||||
},
|
||||
{
|
||||
id: "3", badge: "Bleach + Tone Combo", badgeIcon: Sparkles,
|
||||
price: "$80-130", subtitle: "Complete lightening & toning", buttons: [
|
||||
{ text: "Book Appointment", href: "contact" },
|
||||
],
|
||||
features: [
|
||||
"Professional combo service", "Optimal color result", "Hair care included"],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hair-treatments" data-section="hair-treatments">
|
||||
<PricingCardTwo
|
||||
title="Hair Treatments"
|
||||
description="Restorative and protective treatments for healthy, beautiful hair"
|
||||
tag="Hair Care"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "1", badge: "Deep Conditioning", badgeIcon: Sparkles,
|
||||
price: "$25-40", subtitle: "Intensive moisture treatment", buttons: [
|
||||
{ text: "Book Appointment", href: "contact" },
|
||||
],
|
||||
features: [
|
||||
"Intensive hydration", "Repair damaged hair", "Restores shine"],
|
||||
},
|
||||
{
|
||||
id: "2", badge: "Keratin Treatment", badgeIcon: Sparkles,
|
||||
price: "$50-80", subtitle: "Smoothing & strengthening", buttons: [
|
||||
{ text: "Book Appointment", href: "contact" },
|
||||
],
|
||||
features: [
|
||||
"Frizz reduction", "Hair strengthening", "Smooth, sleek finish"],
|
||||
},
|
||||
{
|
||||
id: "3", badge: "Scalp Treatment", badgeIcon: Sparkles,
|
||||
price: "$35-50", subtitle: "Healthy scalp & hair growth", buttons: [
|
||||
{ text: "Book Appointment", href: "contact" },
|
||||
],
|
||||
features: [
|
||||
"Scalp cleansing", "Hair growth promotion", "Scalp health improvement"],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="special-styling" data-section="special-styling">
|
||||
<PricingCardTwo
|
||||
title="Special Styling"
|
||||
description="Expert styling for special occasions and everyday elegance"
|
||||
tag="Styling Services"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{
|
||||
id: "1", badge: "Bridal Hair", badgeIcon: Sparkles,
|
||||
price: "$75-120", subtitle: "Wedding day perfection", buttons: [
|
||||
{ text: "Book Appointment", href: "contact" },
|
||||
],
|
||||
features: [
|
||||
"Custom bridal design", "Consultation included", "Trial session available"],
|
||||
},
|
||||
{
|
||||
id: "2", badge: "Event Styling", badgeIcon: Sparkles,
|
||||
price: "$50-90", subtitle: "Elegant event hairstyles", buttons: [
|
||||
{ text: "Book Appointment", href: "contact" },
|
||||
],
|
||||
features: [
|
||||
"Professional updo styles", "Trendy designs", "Long-lasting hold"],
|
||||
},
|
||||
{
|
||||
id: "3", badge: "Blow-Dry Service", badgeIcon: Sparkles,
|
||||
price: "$25-40", subtitle: "Professional blow-dry styling", buttons: [
|
||||
{ text: "Book Appointment", href: "contact" },
|
||||
],
|
||||
features: [
|
||||
"Expert styling", "Volumizing technique", "Salon-quality finish"],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="additional-services" data-section="additional-services">
|
||||
<PricingCardTwo
|
||||
title="Additional Beauty Services"
|
||||
description="Complete beauty services beyond hair care"
|
||||
tag="Beauty Services"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "1", badge: "Makeup Application", badgeIcon: Sparkles,
|
||||
price: "$30-60", subtitle: "Professional makeup artistry", buttons: [
|
||||
{ text: "Book Appointment", href: "contact" },
|
||||
],
|
||||
features: [
|
||||
"Custom makeup design", "Professional products", "Long-lasting application"],
|
||||
},
|
||||
{
|
||||
id: "2", badge: "Eyebrow & Lash Service", badgeIcon: Sparkles,
|
||||
price: "$20-45", subtitle: "Brow shaping and lash services", buttons: [
|
||||
{ text: "Book Appointment", href: "contact" },
|
||||
],
|
||||
features: [
|
||||
"Expert eyebrow shaping", "Lash tinting options", "Natural enhancement"],
|
||||
},
|
||||
{
|
||||
id: "3", badge: "Package Deals", badgeIcon: Sparkles,
|
||||
price: "$100-200", subtitle: "Full beauty transformation", buttons: [
|
||||
{ text: "Book Appointment", href: "contact" },
|
||||
],
|
||||
features: [
|
||||
"Haircut + color service", "Styling included", "Special discount applied"],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact-cta" data-section="contact-cta">
|
||||
<ContactText
|
||||
text="Ready to book your appointment? Contact us today at 083 261 9619 to schedule your service. We're open until 17:00 daily."
|
||||
animationType="entrance-slide"
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{
|
||||
text: "Call Now", href: "tel:0832619619"},
|
||||
{
|
||||
text: "Contact Us", href: "contact"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
columns={[
|
||||
{
|
||||
title: "Services", items: [
|
||||
{ label: "Hair Services", href: "/services" },
|
||||
{ label: "Color Services", href: "/services" },
|
||||
{ label: "Treatments", href: "/services" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "Contact", href: "contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Contact", items: [
|
||||
{ label: "Phone: 083 261 9619", href: "tel:0832619619" },
|
||||
{ label: "Doornhoek, Thabazimbi 0380", href: "#" },
|
||||
{ label: "Open until 17:00 daily", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2025 Sekelbossie @ Sononder | Local Farm Business"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user