diff --git a/src/app/page.tsx b/src/app/page.tsx index 594b63d..e0c07ff 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -15,9 +15,9 @@ import { Sparkles, Heart, Camera, Users, Award, Instagram, Facebook, Phone } fro export default function HomePage() { const navItems = [ { name: "Home", id: "/" }, - { name: "Services", id: "/services" }, + { name: "Services", id: "services" }, { name: "Transformations", id: "transformations" }, - { name: "About", id: "about" }, + { name: "Team", id: "team" }, { name: "Contact", id: "contact" }, ]; @@ -28,7 +28,7 @@ export default function HomePage() { borderRadius="soft" contentWidth="mediumLarge" sizing="mediumLargeSizeMediumTitles" - background="fluid" + background="circleGradient" cardStyle="soft-shadow" primaryButtonStyle="radial-glow" secondaryButtonStyle="layered" @@ -39,8 +39,7 @@ export default function HomePage() { brandName="Crowned by Him" navItems={navItems} button={{ - text: "Book Appointment", - href: "#booking", + text: "Book Appointment", href: "#booking" }} /> @@ -49,11 +48,11 @@ export default function HomePage() { @@ -80,57 +79,35 @@ export default function HomePage() { tagAnimation="blur-reveal" features={[ { - id: "blonde-colour", - title: "Blonde Specialist Colour", - descriptions: [ - "Expert highlights and balayage techniques for stunning natural-looking blonde results", - "Full blonde transformations tailored to your skin tone and face shape", - "Color corrections and touch-ups using premium professional products", + id: "blonde-colour", title: "Blonde Specialist Colour", descriptions: [ + "Expert highlights and balayage techniques for stunning natural-looking blonde results", "Full blonde transformations tailored to your skin tone and face shape", "Color corrections and touch-ups using premium professional products" ], - imageSrc: "http://img.b2bpic.net/free-photo/hairstylist-cutting-hair-client_23-2147769843.jpg?_wi=1", - imageAlt: "Professional blonde highlights application", + imageSrc: "http://img.b2bpic.net/free-photo/hairstylist-cutting-hair-client_23-2147769843.jpg", imageAlt: "hairstylist applying blonde highlights techniques" }, { - id: "full-colour", - title: "Full Colour Services", - descriptions: [ - "Root colour treatments maintaining your perfect shade between appointments", - "Complete colour changes designed around your unique features and style", - "Colour refresh and refresh treatments to keep your look vibrant and fresh", + id: "full-colour", title: "Full Colour Services", descriptions: [ + "Root colour treatments maintaining your perfect shade between appointments", "Complete colour changes designed around your unique features and style", "Colour refresh and refresh treatments to keep your look vibrant and fresh" ], - imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-hair-salon_23-2150668437.jpg?_wi=1", - imageAlt: "Full colour treatment results", + imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-hair-salon_23-2150668437.jpg", imageAlt: "hair colouring treatment full colour" }, { - id: "keratin-smoothing", - title: "MycroKeratin Smoothing", - descriptions: [ - "Professional keratin treatment that reduces frizz and creates silky smooth hair", - "Improves manageability and shine while maintaining natural movement", - "Perfect for managing humidity and creating effortless styling", + id: "keratin-smoothing", title: "MycroKeratin Smoothing", descriptions: [ + "Professional keratin treatment that reduces frizz and creates silky smooth hair", "Improves manageability and shine while maintaining natural movement", "Perfect for managing humidity and creating effortless styling" ], - imageSrc: "http://img.b2bpic.net/free-photo/black-woman-with-curly-hairs-casual-outfit-posing-beige_273443-3896.jpg?_wi=1", - imageAlt: "Keratin smoothing treatment application", + imageSrc: "http://img.b2bpic.net/free-photo/black-woman-with-curly-hairs-casual-outfit-posing-beige_273443-3896.jpg", imageAlt: "keratin treatment hair smoothing process" }, { - id: "natural-styles", - title: "Natural Style Customisation", - descriptions: [ - "Personalized cuts and styles designed around your face shape and lifestyle", - "Healthy, natural-looking styles that enhance your unique beauty", - "Expert consultation to find the perfect style for you", + id: "natural-styles", title: "Natural Style Customisation", descriptions: [ + "Personalized cuts and styles designed around your face shape and lifestyle", "Healthy, natural-looking styles that enhance your unique beauty", "Expert consultation to find the perfect style for you" ], - imageSrc: "http://img.b2bpic.net/free-photo/young-black-person-taking-care-afro-hair_23-2149575446.jpg?_wi=1", - imageAlt: "Natural hairstyle styling consultation", - }, + imageSrc: "http://img.b2bpic.net/free-photo/young-black-person-taking-care-afro-hair_23-2149575446.jpg", imageAlt: "hairstylist natural haircut styling consultation" + } ]} gridVariant="four-items-2x2-equal-grid" animationType="blur-reveal" textboxLayout="default" useInvertedBackground={false} - buttons={[ - { text: "View All Services", href: "/services" }, - ]} + buttons={[{ text: "View All Services", href: "/services" }]} /> @@ -143,66 +120,28 @@ export default function HomePage() { tagAnimation="blur-reveal" testimonials={[ { - id: "transformation-1", - name: "Blonde Transformation", - role: "Full Colour Change", - testimonial: "A complete blonde transformation that brightens and rejuvenates. This stunning result showcases our expertise in colour matching and application.", - imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-blonde-female-friends-posing_273609-7273.jpg?_wi=1", - imageAlt: "Before and after blonde transformation", - icon: Sparkles, + id: "transformation-1", name: "Blonde Transformation", role: "Full Colour Change", testimonial: "A complete blonde transformation that brightens and rejuvenates. This stunning result showcases our expertise in colour matching and application.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-blonde-female-friends-posing_273609-7273.jpg", imageAlt: "blonde hair before after transformation", icon: Sparkles }, { - id: "transformation-2", - name: "Balayage Highlights", - role: "Dimensional Blonde", - testimonial: "Beautiful balayage highlights adding dimension and movement to natural hair. The perfectly blended blonde tones create a sun-kissed, natural appearance.", - imageSrc: "http://img.b2bpic.net/free-photo/cute-young-woman-with-cocktail-cafe-outdoor_624325-412.jpg?_wi=1", - imageAlt: "Balayage highlights transformation", - icon: Sparkles, + id: "transformation-2", name: "Balayage Highlights", role: "Dimensional Blonde", testimonial: "Beautiful balayage highlights adding dimension and movement to natural hair. The perfectly blended blonde tones create a sun-kissed, natural appearance.", imageSrc: "http://img.b2bpic.net/free-photo/cute-young-woman-with-cocktail-cafe-outdoor_624325-412.jpg", imageAlt: "balayage highlights before after beautiful", icon: Sparkles }, { - id: "transformation-3", - name: "Keratin Results", - role: "Smoothing Treatment", - testimonial: "Dramatic keratin smoothing transformation showing reduced frizz and enhanced shine. Notice the silky, manageable texture and radiant shine.", - imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-with-healthy-long-hair_268835-1510.jpg?_wi=1", - imageAlt: "Keratin smoothing treatment results", - icon: Sparkles, + id: "transformation-3", name: "Keratin Results", role: "Smoothing Treatment", testimonial: "Dramatic keratin smoothing transformation showing reduced frizz and enhanced shine. Notice the silky, manageable texture and radiant shine.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-with-healthy-long-hair_268835-1510.jpg", imageAlt: "keratin treatment before after smooth hair", icon: Sparkles }, { - id: "transformation-4", - name: "Colour Correction", - role: "Professional Correction", - testimonial: "Expert colour correction bringing damaged hair back to beautiful health. This transformation shows our skill in correcting previous colour work.", - imageSrc: "http://img.b2bpic.net/free-photo/laughing-women-near-wall_23-2147784722.jpg?_wi=1", - imageAlt: "Colour correction transformation", - icon: Sparkles, + id: "transformation-4", name: "Colour Correction", role: "Professional Correction", testimonial: "Expert colour correction bringing damaged hair back to beautiful health. This transformation shows our skill in correcting previous colour work.", imageSrc: "http://img.b2bpic.net/free-photo/laughing-women-near-wall_23-2147784722.jpg", imageAlt: "colour correction before after healthy hair", icon: Sparkles }, { - id: "transformation-5", - name: "Natural Style Cut", - role: "Custom Styling", - testimonial: "A personalized cut and style that brings out natural beauty. This custom styling enhances face shape and creates an effortlessly elegant look.", - imageSrc: "http://img.b2bpic.net/free-photo/charming-girl-chair-hairdresser_23-2147769814.jpg?_wi=1", - imageAlt: "Natural style cut and styling", - icon: Sparkles, + id: "transformation-5", name: "Natural Style Cut", role: "Custom Styling", testimonial: "A personalized cut and style that brings out natural beauty. This custom styling enhances face shape and creates an effortlessly elegant look.", imageSrc: "http://img.b2bpic.net/free-photo/charming-girl-chair-hairdresser_23-2147769814.jpg", imageAlt: "natural haircut before after styled", icon: Sparkles }, { - id: "transformation-6", - name: "Complete Makeover", - role: "Full Hair Transformation", - testimonial: "A complete hair transformation combining cutting, colouring, and styling expertise. Notice the dramatic improvement in health, shine, and overall appearance.", - imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-getting-her-hair-brushed-salon-by-beautician_23-2148817184.jpg?_wi=1", - imageAlt: "Complete hair makeover transformation", - icon: Sparkles, - }, + id: "transformation-6", name: "Complete Makeover", role: "Full Hair Transformation", testimonial: "A complete hair transformation combining cutting, colouring, and styling expertise. Notice the dramatic improvement in health, shine, and overall appearance.", imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-getting-her-hair-brushed-salon-by-beautician_23-2148817184.jpg", imageAlt: "complete hair makeover transformation results", icon: Sparkles + } ]} textboxLayout="default" animationType="blur-reveal" useInvertedBackground={false} - buttons={[ - { text: "See More Transformations", href: "/transformations" }, - ]} + buttons={[{ text: "See More Transformations", href: "/transformations" }]} /> @@ -215,26 +154,16 @@ export default function HomePage() { tagAnimation="blur-reveal" team={[ { - id: "nadine", - name: "Nadine Coetzee", - role: "Blonde Specialist", - imageSrc: "http://img.b2bpic.net/free-photo/male-make-up-look-using-flat-iron_23-2148784353.jpg?_wi=1", - imageAlt: "Nadine Coetzee - Blonde Specialist", + id: "nadine", name: "Nadine Coetzee", role: "Blonde Specialist", imageSrc: "http://img.b2bpic.net/free-photo/male-make-up-look-using-flat-iron_23-2148784353.jpg", imageAlt: "professional female hair stylist portrait" }, { - id: "cindy", - name: "Cindy Jacobs", - role: "Experienced Stylist", - imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-stylish-young-woman_158538-4143.jpg?_wi=1", - imageAlt: "Cindy Jacobs - Experienced Stylist", - }, + id: "cindy", name: "Cindy Jacobs", role: "Experienced Stylist", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-stylish-young-woman_158538-4143.jpg", imageAlt: "professional female hairstylist portrait" + } ]} animationType="blur-reveal" textboxLayout="default" useInvertedBackground={false} - buttons={[ - { text: "Book With Us", href: "#booking" }, - ]} + buttons={[{ text: "Book With Us", href: "#booking" }]} /> @@ -247,49 +176,29 @@ export default function HomePage() { tagAnimation="blur-reveal" features={[ { - id: "expertise", - title: "Blonde Specialist Expertise", - descriptions: [ - "Years of experience in blonde transformations", - "Expert colour matching and application techniques", - "Knowledge of the latest blonde trends and styles", + id: "expertise", title: "Blonde Specialist Expertise", descriptions: [ + "Years of experience in blonde transformations", "Expert colour matching and application techniques", "Knowledge of the latest blonde trends and styles" ], - imageSrc: "http://img.b2bpic.net/free-photo/back-view-woman-hair-salon_23-2150668444.jpg?_wi=1", - imageAlt: "Professional colour expertise", + imageSrc: "http://img.b2bpic.net/free-photo/back-view-woman-hair-salon_23-2150668444.jpg", imageAlt: "professional hair colouring expertise technique" }, { - id: "consultation", - title: "Personalized Consultations", - descriptions: [ - "Every client receives a detailed consultation", - "We listen to your hair goals and concerns", - "Custom solutions tailored to your unique needs", + id: "consultation", title: "Personalized Consultations", descriptions: [ + "Every client receives a detailed consultation", "We listen to your hair goals and concerns", "Custom solutions tailored to your unique needs" ], - imageSrc: "http://img.b2bpic.net/free-photo/woman-working-while-pregnant_23-2149248122.jpg?_wi=1", - imageAlt: "Professional consultation session", + imageSrc: "http://img.b2bpic.net/free-photo/woman-working-while-pregnant_23-2149248122.jpg", imageAlt: "hair consultation stylist client discussion" }, { - id: "products", - title: "Professional Products", - descriptions: [ - "We use only premium quality hair products", - "Salon-grade treatments and formulations", - "Products that protect and enhance hair health", + id: "products", title: "Professional Products", descriptions: [ + "We use only premium quality hair products", "Salon-grade treatments and formulations", "Products that protect and enhance hair health" ], - imageSrc: "http://img.b2bpic.net/free-photo/blank-cosmetics-bottles_23-2147787927.jpg?_wi=1", - imageAlt: "Professional hair care products", + imageSrc: "http://img.b2bpic.net/free-photo/blank-cosmetics-bottles_23-2147787927.jpg", imageAlt: "professional hair care products salon" }, { - id: "friendly", - title: "Friendly Local Salon", - descriptions: [ - "Warm, welcoming atmosphere in Thabazimbi", - "Build lasting relationships with our clients", - "Community focused and relationship driven", + id: "friendly", title: "Friendly Local Salon", descriptions: [ + "Warm, welcoming atmosphere in Thabazimbi", "Build lasting relationships with our clients", "Community focused and relationship driven" ], - imageSrc: "http://img.b2bpic.net/free-photo/empty-therapist-office-with-modern-furniture-decorations_482257-108008.jpg?_wi=1", - imageAlt: "Welcoming salon atmosphere", - }, + imageSrc: "http://img.b2bpic.net/free-photo/empty-therapist-office-with-modern-furniture-decorations_482257-108008.jpg", imageAlt: "welcoming salon interior client atmosphere" + } ]} gridVariant="four-items-2x2-equal-grid" animationType="blur-reveal" @@ -307,8 +216,8 @@ export default function HomePage() { description="Book now and leave feeling confident, polished, and beautifully crowned." subdescription="Your journey to beautiful hair starts here" icon={Heart} - imageSrc="http://img.b2bpic.net/free-photo/portrait-happy-young-business-woman-isolated-white-wall_231208-8705.jpg?_wi=1" - imageAlt="Ready to transform your hair" + imageSrc="http://img.b2bpic.net/free-photo/portrait-happy-young-business-woman-isolated-white-wall_231208-8705.jpg" + imageAlt="confident woman beautiful hair portrait" mediaAnimation="blur-reveal" useInvertedBackground={false} /> @@ -319,40 +228,18 @@ export default function HomePage() { title="Get in Touch" description="Have questions about our services or ready to book your transformation? Contact us today or fill out the form below." inputs={[ - { - name: "name", - type: "text", - placeholder: "Your Name", - required: true, - }, - { - name: "phone", - type: "tel", - placeholder: "Your Phone Number", - required: true, - }, - { - name: "email", - type: "email", - placeholder: "Your Email", - required: true, - }, - { - name: "service", - type: "text", - placeholder: "Service Interested In", - required: true, - }, + { name: "name", type: "text", placeholder: "Your Name", required: true }, + { name: "phone", type: "tel", placeholder: "Your Phone Number", required: true }, + { name: "email", type: "email", placeholder: "Your Email", required: true }, + { name: "service", type: "text", placeholder: "Service Interested In", required: true } ]} textarea={{ - name: "message", - placeholder: "Tell us about your hair goals...", - rows: 5, - required: false, + name: "message", placeholder: "Tell us about your hair goals...", rows: 5, + required: false }} useInvertedBackground={false} - imageSrc="http://img.b2bpic.net/free-photo/table-stylist-studio_23-2147784015.jpg?_wi=1" - imageAlt="Professional salon interior" + imageSrc="http://img.b2bpic.net/free-photo/table-stylist-studio_23-2147784015.jpg" + imageAlt="modern salon interior design professional" mediaAnimation="blur-reveal" mediaPosition="right" buttonText="Request Appointment" @@ -364,21 +251,9 @@ export default function HomePage() { logoText="Crowned by Him" copyrightText="© 2025 Crowned by Him – Styled by Cindy & Gracefully Beautiful. All rights reserved." socialLinks={[ - { - icon: Instagram, - href: "https://instagram.com", - ariaLabel: "Instagram", - }, - { - icon: Facebook, - href: "https://facebook.com", - ariaLabel: "Facebook", - }, - { - icon: Phone, - href: "tel:0825572721", - ariaLabel: "Call Us", - }, + { icon: Instagram, href: "https://instagram.com", ariaLabel: "Instagram" }, + { icon: Facebook, href: "https://facebook.com", ariaLabel: "Facebook" }, + { icon: Phone, href: "tel:0825572721", ariaLabel: "Call Us" } ]} /> diff --git a/src/components/shared/SvgTextLogo/SvgTextLogo.tsx b/src/components/shared/SvgTextLogo/SvgTextLogo.tsx index f214190..d872c7b 100644 --- a/src/components/shared/SvgTextLogo/SvgTextLogo.tsx +++ b/src/components/shared/SvgTextLogo/SvgTextLogo.tsx @@ -1,51 +1,32 @@ -"use client"; - -import { memo } from "react"; -import useSvgTextLogo from "./useSvgTextLogo"; -import { cls } from "@/lib/utils"; +import React from "react"; interface SvgTextLogoProps { - logoText: string; - adjustHeightFactor?: number; - verticalAlign?: "top" | "center"; + text: string; className?: string; + textClassName?: string; + dominantBaseline?: SVGAttributes["dominantBaseline"]; } -const SvgTextLogo = memo(function SvgTextLogo({ - logoText, - adjustHeightFactor, - verticalAlign = "top", - className = "", -}) { - const { svgRef, textRef, viewBox, aspectRatio } = useSvgTextLogo(logoText, false, adjustHeightFactor); - +export default function SvgTextLogo({ + text, + className = "", textClassName = "", dominantBaseline = "middle"}: SvgTextLogoProps) { return ( - {logoText} + {text} ); -}); +} -SvgTextLogo.displayName = "SvgTextLogo"; - -export default SvgTextLogo; +import type { SVGAttributes } from "react"; \ No newline at end of file