Merge version_1 into main #2

Merged
bender merged 2 commits from version_1 into main 2026-03-12 14:25:42 +00:00
2 changed files with 117 additions and 220 deletions

View File

@@ -6,6 +6,8 @@ import HeroCentered from "@/components/sections/hero/HeroCentered";
import FeatureBorderGlow from "@/components/sections/feature/featureBorderGlow/FeatureBorderGlow";
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
import PricingCardNine from "@/components/sections/pricing/PricingCardNine";
import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
import ContactText from "@/components/sections/contact/ContactText";
import FooterMedia from "@/components/sections/footer/FooterMedia";
import { Sparkles, Palette, Scissors, Zap, Heart, Smile } from "lucide-react";
@@ -36,9 +38,7 @@ export default function HomePage() {
{ name: "Contact", id: "contact" },
]}
button={{
text: "Book Appointment",
href: "contact",
}}
text: "Book Appointment", href: "contact"}}
/>
</div>
@@ -49,32 +49,22 @@ export default function HomePage() {
description="Professional highlights, color, and styling designed to refresh your look. Transform your hair with Cindy Jacobs, your trusted local stylist."
avatars={[
{
src: "http://img.b2bpic.net/free-photo/pretty-woman-wearing-white-dress_1187-3911.jpg",
alt: "woman smiling professional headshot",
},
src: "http://img.b2bpic.net/free-photo/pretty-woman-wearing-white-dress_1187-3911.jpg", alt: "woman smiling professional headshot"},
{
src: "http://img.b2bpic.net/free-photo/curly-female-client-picking-color-hait-toning-beaty-salone_651396-977.jpg",
alt: "beautiful woman blonde hair portrait",
},
src: "http://img.b2bpic.net/free-photo/curly-female-client-picking-color-hait-toning-beaty-salone_651396-977.jpg", alt: "beautiful woman blonde hair portrait"},
{
src: "http://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg",
alt: "professional woman headshot",
},
src: "http://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg", alt: "professional woman headshot"},
]}
avatarText="Trusted by 100+ local clients"
buttons={[
{
text: "Book Appointment",
href: "contact",
},
text: "Book Appointment", href: "contact"},
{
text: "Call Now",
href: "tel:0825572721",
},
text: "Call Now", href: "tel:0825572721"},
]}
buttonAnimation="slide-up"
background={{
variant: "circleGradient" as const,
variant: "radial-gradient" as const,
}}
/>
</div>
@@ -87,34 +77,22 @@ export default function HomePage() {
features={[
{
icon: Sparkles,
title: "Highlights & Blonding",
description: "Full highlights from R700 to R1600. Expert color correction and stunning blonde transformations.",
},
title: "Highlights & Blonding", description: "Full highlights from R700 to R1600. Expert color correction and stunning blonde transformations."},
{
icon: Palette,
title: "Color Services",
description: "Roots color from R550, Full color R700-R1200. Professional color correction and vibrant results.",
},
title: "Color Services", description: "Roots color from R550, Full color R700-R1200. Professional color correction and vibrant results."},
{
icon: Scissors,
title: "Haircuts & Styling",
description: "Precision cuts and styling from R270-R420. Tailored to your unique style and face shape.",
},
title: "Haircuts & Styling", description: "Precision cuts and styling from R270-R420. Tailored to your unique style and face shape."},
{
icon: Zap,
title: "Hair Treatments",
description: "Microkeratin treatments from R1700-R2800. Restore shine and health to your hair.",
},
title: "Hair Treatments", description: "Microkeratin treatments from R1700-R2800. Restore shine and health to your hair."},
{
icon: Heart,
title: "Special Occasion Styling",
description: "Curls, updos, and event styling. Get camera-ready for weddings and celebrations.",
},
title: "Special Occasion Styling", description: "Curls, updos, and event styling. Get camera-ready for weddings and celebrations."},
{
icon: Smile,
title: "Additional Beauty",
description: "Facials, waxing, tinting, and Japanese head spa services for complete beauty.",
},
title: "Additional Beauty", description: "Facials, waxing, tinting, and Japanese head spa services for complete beauty."},
]}
animationType="slide-up"
textboxLayout="default"
@@ -135,65 +113,23 @@ export default function HomePage() {
useInvertedBackground={false}
products={[
{
id: "1",
brand: "Blonde Highlights",
name: "Full Highlights Package",
price: "R700 - R1600",
rating: 5,
reviewCount: "47 clients",
imageSrc: "http://img.b2bpic.net/free-photo/sexy-blond-female-cream-dress-posing-big-hall_613910-2851.jpg?_wi=1",
imageAlt: "blonde highlights hair transformation before after",
},
id: "1", brand: "Blonde Highlights", name: "Full Highlights Package", price: "R700 - R1600", rating: 5,
reviewCount: "47 clients", imageSrc: "http://img.b2bpic.net/free-photo/sexy-blond-female-cream-dress-posing-big-hall_613910-2851.jpg", imageAlt: "blonde highlights hair transformation before after"},
{
id: "2",
brand: "Color Correction",
name: "Color Correction Service",
price: "R700 - R1200",
rating: 5,
reviewCount: "34 clients",
imageSrc: "http://img.b2bpic.net/free-photo/professional-stylist-doing-haircut-salon_23-2147769831.jpg?_wi=1",
imageAlt: "professional hair color correction result",
},
id: "2", brand: "Color Correction", name: "Color Correction Service", price: "R700 - R1200", rating: 5,
reviewCount: "34 clients", imageSrc: "http://img.b2bpic.net/free-photo/professional-stylist-doing-haircut-salon_23-2147769831.jpg", imageAlt: "professional hair color correction result"},
{
id: "3",
brand: "Styling",
name: "Event Styling",
price: "R420 - R800",
rating: 5,
reviewCount: "28 clients",
imageSrc: "http://img.b2bpic.net/free-photo/women-making-preparations-wedding_23-2149184354.jpg?_wi=1",
imageAlt: "professional event hair styling updo",
},
id: "3", brand: "Styling", name: "Event Styling", price: "R420 - R800", rating: 5,
reviewCount: "28 clients", imageSrc: "http://img.b2bpic.net/free-photo/women-making-preparations-wedding_23-2149184354.jpg", imageAlt: "professional event hair styling updo"},
{
id: "4",
brand: "Blonde Specialist",
name: "Bleach & Toner Package",
price: "R800 - R1500",
rating: 5,
reviewCount: "42 clients",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-albino-woman_23-2150520226.jpg?_wi=1",
imageAlt: "blonde hair bleach toner result salon",
},
id: "4", brand: "Blonde Specialist", name: "Bleach & Toner Package", price: "R800 - R1500", rating: 5,
reviewCount: "42 clients", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-albino-woman_23-2150520226.jpg", imageAlt: "blonde hair bleach toner result salon"},
{
id: "5",
brand: "Hair Treatment",
name: "Microkeratin Treatment",
price: "R1700 - R2800",
rating: 5,
reviewCount: "31 clients",
imageSrc: "http://img.b2bpic.net/free-photo/woman-holding-showing-big-old-key_1187-5378.jpg?_wi=1",
imageAlt: "microkeratin hair treatment shiny result",
},
id: "5", brand: "Hair Treatment", name: "Microkeratin Treatment", price: "R1700 - R2800", rating: 5,
reviewCount: "31 clients", imageSrc: "http://img.b2bpic.net/free-photo/woman-holding-showing-big-old-key_1187-5378.jpg", imageAlt: "microkeratin hair treatment shiny result"},
{
id: "6",
brand: "Transformation",
name: "Complete Makeover",
price: "R2000 - R3500",
rating: 5,
reviewCount: "26 clients",
imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-treatment-hairdresser-shop_23-2149230959.jpg?_wi=1",
imageAlt: "complete hair makeover transformation before after",
},
id: "6", brand: "Transformation", name: "Complete Makeover", price: "R2000 - R3500", rating: 5,
reviewCount: "26 clients", imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-treatment-hairdresser-shop_23-2149230959.jpg", imageAlt: "complete hair makeover transformation before after"},
]}
/>
</div>
@@ -209,58 +145,61 @@ export default function HomePage() {
animationType="slide-up"
testimonials={[
{
id: "1",
name: "Veronica",
handle: "Cut & Style",
testimonial: "Cindy always makes me feel special. Her attention to detail and professional approach keep me coming back. Best salon in Thabazimbi!",
imageSrc: "http://img.b2bpic.net/free-photo/pretty-woman-doing-okay-symbol_1187-4123.jpg?_wi=1",
imageAlt: "Veronica",
},
id: "1", name: "Veronica", handle: "Cut & Style", testimonial: "Cindy always makes me feel special. Her attention to detail and professional approach keep me coming back. Best salon in Thabazimbi!", imageSrc: "http://img.b2bpic.net/free-photo/pretty-woman-doing-okay-symbol_1187-4123.jpg", imageAlt: "Veronica"},
{
id: "2",
name: "Susan",
handle: "Highlights & Color",
testimonial: "My highlights turned out absolutely stunning. Cindy knows exactly how to achieve the perfect blonde. Highly recommend!",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-young-woman-against-black-background-looking-camera_23-2148229337.jpg?_wi=1",
imageAlt: "Susan",
},
id: "2", name: "Susan", handle: "Highlights & Color", testimonial: "My highlights turned out absolutely stunning. Cindy knows exactly how to achieve the perfect blonde. Highly recommend!", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-young-woman-against-black-background-looking-camera_23-2148229337.jpg", imageAlt: "Susan"},
{
id: "3",
name: "Nico",
handle: "Gent Cut",
testimonial: "Best of the best! Precision, professionalism, and genuine care. Cindy is the stylist you want for your hair.",
imageSrc: "http://img.b2bpic.net/free-photo/attractive-happy-young-bearded-man-trendy-hat-texting-messages-via-social-networks-browsing-internet-using-free-wifi-his-electronic-device-coffee-break-restaurant_273609-1934.jpg?_wi=1",
imageAlt: "Nico",
},
id: "3", name: "Nico", handle: "Gent Cut", testimonial: "Best of the best! Precision, professionalism, and genuine care. Cindy is the stylist you want for your hair.", imageSrc: "http://img.b2bpic.net/free-photo/attractive-happy-young-bearded-man-trendy-hat-texting-messages-via-social-networks-browsing-internet-using-free-wifi-his-electronic-device-coffee-break-restaurant_273609-1934.jpg", imageAlt: "Nico"},
{
id: "4",
name: "Nikkita",
handle: "Full Highlights Package",
testimonial: "The full highlights package exceeded my expectations. Would recommend without a doubt. Worth every penny!",
imageSrc: "http://img.b2bpic.net/free-photo/baking-time-with-best-grandmother_329181-17830.jpg?_wi=1",
imageAlt: "Nikkita",
},
id: "4", name: "Nikkita", handle: "Full Highlights Package", testimonial: "The full highlights package exceeded my expectations. Would recommend without a doubt. Worth every penny!", imageSrc: "http://img.b2bpic.net/free-photo/baking-time-with-best-grandmother_329181-17830.jpg", imageAlt: "Nikkita"},
{
id: "5",
name: "Nastachia",
handle: "Full Color & Style",
testimonial: "Cindy made me feel beautiful inside and out. Her expertise and warmth make every appointment special. Thank you!",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-charming-young-woman-terrace-taking-selfie-photo-with-smartphone_329181-11566.jpg?_wi=1",
imageAlt: "Nastachia",
},
id: "5", name: "Nastachia", handle: "Full Color & Style", testimonial: "Cindy made me feel beautiful inside and out. Her expertise and warmth make every appointment special. Thank you!", imageSrc: "http://img.b2bpic.net/free-photo/portrait-charming-young-woman-terrace-taking-selfie-photo-with-smartphone_329181-11566.jpg", imageAlt: "Nastachia"},
{
id: "6",
name: "Maria",
handle: "Microkeratin Treatment",
testimonial: "My hair has never looked better. The microkeratin treatment restored my hair's health and shine. Absolutely love it!",
imageSrc: "http://img.b2bpic.net/free-photo/team-bride-celebrating-before-wedding_23-2149329119.jpg?_wi=1",
imageAlt: "Maria",
},
id: "6", name: "Maria", handle: "Microkeratin Treatment", testimonial: "My hair has never looked better. The microkeratin treatment restored my hair's health and shine. Absolutely love it!", imageSrc: "http://img.b2bpic.net/free-photo/team-bride-celebrating-before-wedding_23-2149329119.jpg", imageAlt: "Maria"},
]}
speed={40}
/>
</div>
{/* Pricing Section */}
<div id="pricing" data-section="pricing">
<PricingCardNine
title="Service Pricing"
description="Transparent pricing for all our premium hair services. Book your appointment with confidence."
tag="Pricing"
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
plans={[
{
id: "haircuts", title: "Haircuts & Styling", price: "R270", period: "- R420", imageSrc: "http://img.b2bpic.net/free-photo/confident-young-beautiful-female-barber-uniform-doing-haircut-boy-isolated-pink-wall_141793-105668.jpg", imageAlt: "professional haircut styling salon", button: { text: "Book Now", href: "contact" },
features: ["Professional cut and style", "Consultation with Cindy", "Personalized recommendations", "Wash and dry included"],
},
{
id: "color", title: "Color Services", price: "R550", period: "- R1200", imageSrc: "http://img.b2bpic.net/free-photo/female-client-getting-her-hair-washed-hairdresser_23-2150771292.jpg", imageAlt: "hair coloring salon professional service", button: { text: "Book Now", href: "contact" },
features: ["Roots color from R550", "Full color R700-R1200", "Color consultation", "Premium products used"],
},
{
id: "highlights", title: "Highlights & Blonding", price: "R700", period: "- R1600", imageSrc: "http://img.b2bpic.net/free-photo/back-view-woman-hair-salon_23-2150668444.jpg", imageAlt: "blonde highlights hair salon service", button: { text: "Book Now", href: "contact" },
features: ["Full highlights package", "Expert blonde specialization", "Highlights with toner & style", "Color correction available"],
},
{
id: "treatments", title: "Hair Treatments", price: "R1700", period: "- R2800", imageSrc: "http://img.b2bpic.net/free-photo/woma-washing-man-s-head-barbershop_1157-27168.jpg", imageAlt: "professional hair treatment spa service", button: { text: "Book Now", href: "contact" },
features: ["Microkeratin treatment", "Hair restoration service", "Shine and health restoration", "Results last weeks"],
},
]}
/>
</div>
{/* About Section */}
<div id="about" data-section="about">
<InlineImageSplitTextAbout
heading={[{ type: "text", content: "Meet Cindy Jacobs, Your Expert Stylist" }]}
useInvertedBackground={false}
buttons={[{ text: "Book with Cindy", href: "contact" }]}
/>
</div>
{/* Contact Section */}
<div id="contact" data-section="contact">
<ContactText
@@ -268,13 +207,9 @@ export default function HomePage() {
animationType="entrance-slide"
buttons={[
{
text: "Book Appointment",
href: "#booking",
},
text: "Book Appointment", href: "#booking"},
{
text: "Call 082 557 2721",
href: "tel:0825572721",
},
text: "Call 082 557 2721", href: "tel:0825572721"},
]}
background={{
variant: "plain" as const,
@@ -286,72 +221,45 @@ export default function HomePage() {
{/* Footer Section */}
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/abstract-blur-hotel-interior_1203-8506.jpg?_wi=1"
imageSrc="http://img.b2bpic.net/free-photo/abstract-blur-hotel-interior_1203-8506.jpg"
imageAlt="luxury hair salon interior design"
logoText="Crowned by Him"
copyrightText="© 2025 Crowned by Him. All rights reserved."
columns={[
{
title: "Services",
items: [
title: "Services", items: [
{
label: "Haircuts & Styling",
href: "/services",
},
label: "Haircuts & Styling", href: "/services"},
{
label: "Color Services",
href: "/services",
},
label: "Color Services", href: "/services"},
{
label: "Highlights & Blonding",
href: "/services",
},
label: "Highlights & Blonding", href: "/services"},
{
label: "Hair Treatments",
href: "/services",
},
label: "Hair Treatments", href: "/services"},
],
},
{
title: "Company",
items: [
title: "Company", items: [
{
label: "About Us",
href: "/",
},
label: "About Us", href: "/"},
{
label: "Gallery",
href: "/",
},
label: "Gallery", href: "/"},
{
label: "Contact",
href: "/",
},
label: "Contact", href: "/"},
{
label: "Book Appointment",
href: "/",
},
label: "Book Appointment", href: "/"},
],
},
{
title: "Contact",
items: [
title: "Contact", items: [
{
label: "Call: 082 557 2721",
href: "tel:0825572721",
},
label: "Call: 082 557 2721", href: "tel:0825572721"},
{
label: "Thabazimbi, South Africa",
href: "#",
},
label: "Thabazimbi, South Africa", href: "#"},
{
label: "Hours: 8:00 AM - 5:00 PM",
href: "#",
},
label: "Hours: 8:00 AM - 5:00 PM", href: "#"},
{
label: "Appointments Only",
href: "#",
},
label: "Appointments Only", href: "#"},
],
},
]}

View File

@@ -1,51 +1,40 @@
"use client";
import React, { SVGProps } from "react";
import { memo } from "react";
import useSvgTextLogo from "./useSvgTextLogo";
import { cls } from "@/lib/utils";
interface SvgTextLogoProps {
logoText: string;
adjustHeightFactor?: number;
verticalAlign?: "top" | "center";
interface SvgTextLogoProps extends SVGProps<SVGSVGElement> {
text?: string;
className?: string;
}
const SvgTextLogo = memo<SvgTextLogoProps>(function SvgTextLogo({
logoText,
adjustHeightFactor,
verticalAlign = "top",
className = "",
}) {
const { svgRef, textRef, viewBox, aspectRatio } = useSvgTextLogo(logoText, false, adjustHeightFactor);
const SvgTextLogo: React.FC<SvgTextLogoProps> = ({
text = "Webild", className,
...props
}) => {
return (
<svg
ref={svgRef}
viewBox={viewBox}
className={cls("w-full", className)}
style={{ aspectRatio: aspectRatio }}
preserveAspectRatio="none"
role="img"
aria-label={`${logoText} logo`}
viewBox="0 0 200 50"
className={className}
{...props}
>
<defs>
<style>{`
.svg-text-logo-text {
font-family: Arial, sans-serif;
font-size: 24px;
font-weight: bold;
fill: currentColor;
}
`}</style>
</defs>
<text
ref={textRef}
x="0"
y={verticalAlign === "center" ? "50%" : "0"}
className="font-bold fill-current"
style={{
fontSize: "20px",
letterSpacing: "-0.02em",
dominantBaseline: verticalAlign === "center" ? "middle" : "text-before-edge"
}}
x="10"
y="32"
className="svg-text-logo-text"
dominantBaseline="middle"
>
{logoText}
{text}
</text>
</svg>
);
});
};
SvgTextLogo.displayName = "SvgTextLogo";
export default SvgTextLogo;
export default SvgTextLogo;