Merge version_1 into main

Merge version_1 into main
This commit was merged in pull request #5.
This commit is contained in:
2026-03-12 01:43:40 +00:00
2 changed files with 168 additions and 226 deletions

View File

@@ -1,256 +1,209 @@
"use client"
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
import AboutMetric from '@/components/sections/about/AboutMetric';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { Crown, Droplet, Flower2, Heart, Image, Sparkles, Star, Wand2, Zap } from 'lucide-react';
import { Award, Camera, Calendar, Heart, Sparkles, Star } from 'lucide-react';
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="expand-hover"
defaultTextAnimation="background-highlight"
borderRadius="soft"
contentWidth="smallMedium"
defaultButtonVariant="icon-arrow"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="mediumLarge"
sizing="mediumSizeLargeTitles"
background="none"
cardStyle="glass-depth"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="glass"
headingFontWeight="light"
background="circleGradient"
cardStyle="gradient-bordered"
primaryButtonStyle="gradient"
secondaryButtonStyle="layered"
headingFontWeight="medium"
>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
<NavbarLayoutFloatingInline
brandName="Nail Studio"
navItems={[
{ name: "Home", id: "hero" },
{ name: "Gallery", id: "portfolio" },
{ name: "Services", id: "services" },
{ name: "Portfolio", id: "portfolio" },
{ name: "Reviews", id: "testimonials" },
{ name: "Contact", id: "contact" }
{ name: "Reviews", id: "testimonials" }
]}
brandName="Nail Luxe"
bottomLeftText="Beauty & Self-Care"
bottomRightText="hello@nailluxe.com"
button={{
text: "Book Now", href: "contact"
}}
animateOnLoad={true}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardGallery
title="Your Nails, Perfectly Polished"
description="Discover elegant nail art and luxurious treatments designed to celebrate your beauty. From classic manicures to stunning custom designs, we create nail perfection tailored just for you."
tag="Premium Nail Care"
<HeroSplitDoubleCarousel
title="Gorgeous Nails, Elevated Confidence"
description="Discover the art of luxury nail design. From trendy gel manicures to custom nail art, we create stunning nails that express your unique style and personality."
tag="Welcome to Nail Studio"
tagIcon={Sparkles}
tagAnimation="slide-up"
background={{ variant: "radial-gradient" }}
mediaItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-dark-photo-womans-hand-fingers-with-big-silver-ring-flowers-glowing-lights_343596-3277.jpg?_wi=1", imageAlt: "Beautiful pink gel nail art design"
},
{
imageSrc: "http://img.b2bpic.net/free-photo/side-view-client-worker-wearing-masks-nail-salon_23-2148694577.jpg?_wi=1", imageAlt: "Elegant ombre pink nail manicure"
},
{
imageSrc: "http://img.b2bpic.net/free-photo/close-frame-woman-s-hands-with-orange-manicure-white-sweater-pink-wall_343596-5400.jpg?_wi=1", imageAlt: "Cute pastel pink nail design"
}
background={{ variant: "plain" }}
leftCarouselItems={[
{ imageSrc: "http://img.b2bpic.net/free-photo/stack-red-green-books-with-dry-flowers-pink-warm-knitted-sweater_343596-5085.jpg", imageAlt: "Pink gradient nail art" },
{ imageSrc: "http://img.b2bpic.net/free-photo/still-life-glittery-composition-decoration_23-2149129302.jpg", imageAlt: "Sparkly nail design" },
{ imageSrc: "http://img.b2bpic.net/free-photo/stylish-bride-holds-rose_8353-9480.jpg", imageAlt: "Floral nail art" },
{ imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-female-manicure-pink-t-shirt-with-black-gloves-black-mask-doing-manicure-blue_140725-24218.jpg", imageAlt: "Ombre nail design" }
]}
mediaAnimation="slide-up"
rightCarouselItems={[
{ imageSrc: "http://img.b2bpic.net/free-photo/nail-products-arrangement_23-2149046519.jpg", imageAlt: "Glitter nail art" },
{ imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-female-manicure-pink-t-shirt-with-black-gloves-black-mask-doing-manicure-blue_140725-24226.jpg", imageAlt: "Rose gold nails" },
{ imageSrc: "http://img.b2bpic.net/free-photo/close-shot-woman-feet-hands-woman-sit-edge-blue-swimming-pool-vacation_343596-3579.jpg", imageAlt: "Hot pink nails" },
{ imageSrc: "http://img.b2bpic.net/free-photo/pretty-manicured-womans-hands-knees_343596-718.jpg", imageAlt: "Baby pink nails" }
]}
carouselPosition="right"
buttons={[
{ text: "Book Appointment", href: "#contact" },
{ text: "View Gallery", href: "#portfolio" }
{ text: "Book an Appointment", href: "contact" },
{ text: "View Gallery", href: "portfolio" }
]}
buttonAnimation="slide-up"
/>
</div>
<div id="services" data-section="services">
<FeatureBorderGlow
title="Our Signature Services"
description="Experience our carefully curated selection of nail services, each designed to bring out your natural beauty and personal style."
tag="Services"
tagIcon={Heart}
tagAnimation="slide-up"
features={[
{
icon: Sparkles,
title: "Gel Manicure", description: "Long-lasting gel polish with vibrant colors, perfect shine, and chip-resistant wear for up to three weeks."
},
{
icon: Wand2,
title: "Nail Art Design", description: "Custom artistic designs including patterns, gradients, gems, and hand-painted details tailored to your vision."
},
{
icon: Flower2,
title: "Acrylic Extensions", description: "Beautiful acrylic nails with natural-looking shapes and finishes, perfect for adding length and glamour."
},
{
icon: Droplet,
title: "Classic Manicure", description: "Timeless nail care with filing, shaping, cuticle treatment, and polish in any color you desire."
},
{
icon: Zap,
title: "Pedicure", description: "Luxurious foot care and nail treatment with massage, exfoliation, and beautiful polish application."
},
{
icon: Crown,
title: "Bridal Nails", description: "Special occasion designs for weddings and events, with long-lasting formulas and elegant aesthetics."
}
<div id="about" data-section="about">
<AboutMetric
title="Your Nails, Our Passion. Professional nail care and artistry that brings your vision to life with precision and creativity."
metrics={[
{ icon: Heart, label: "Happy Clients", value: "2,000+" },
{ icon: Star, label: "Designs Created", value: "5,000+" },
{ icon: Sparkles, label: "Years Experience", value: "8+" },
{ icon: Award, label: "5-Star Reviews", value: "99%" }
]}
textboxLayout="default"
animationType="slide-up"
metricsAnimation="slide-up"
useInvertedBackground={false}
/>
</div>
<div id="portfolio" data-section="portfolio">
<ProductCardFour
title="Nail Art Gallery"
description="Browse our stunning collection of recent nail designs and custom creations that showcase our artistry and attention to detail."
<FeatureCardThree
title="Our Nail Art Collection"
description="Explore our latest designs and nail art creations. Each design is carefully crafted to reflect your personal style."
tag="Gallery"
tagIcon={Image}
tagIcon={Camera}
tagAnimation="slide-up"
products={[
features={[
{
id: "1", name: "Blush Pink Ombre", price: "$45", variant: "Gel • 3 weeks", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-dark-photo-womans-hand-fingers-with-big-silver-ring-flowers-glowing-lights_343596-3277.jpg?_wi=2", imageAlt: "Blush pink ombre nail art"
id: "01", title: "Pink Gradient Bliss", description: "Smooth ombre transitions in soft to vibrant pinks. Perfect for that Instagram-worthy look.", imageSrc: "http://img.b2bpic.net/free-photo/nail-products-arrangement_23-2149046519.jpg", imageAlt: "Pink gradient nail design"
},
{
id: "2", name: "Sparkle Rose Gold", price: "$50", variant: "Gel • Glitter accent", imageSrc: "http://img.b2bpic.net/free-photo/side-view-client-worker-wearing-masks-nail-salon_23-2148694577.jpg?_wi=2", imageAlt: "Rose gold sparkle nails"
id: "02", title: "Sparkle & Shine", description: "Glitter-infused pink designs that catch the light beautifully. Ideal for special occasions.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-female-manicure-pink-t-shirt-with-black-gloves-black-mask-doing-manicure-blue_140725-24226.jpg", imageAlt: "Sparkle nail art"
},
{
id: "3", name: "Pastel Dream", price: "$48", variant: "Gel • Minimalist design", imageSrc: "http://img.b2bpic.net/free-photo/close-frame-woman-s-hands-with-orange-manicure-white-sweater-pink-wall_343596-5400.jpg?_wi=2", imageAlt: "Pastel dream nail design"
id: "03", title: "Floral Romance", description: "Delicate flower patterns on pink backgrounds. Elegant and timeless.", imageSrc: "http://img.b2bpic.net/free-photo/close-shot-woman-feet-hands-woman-sit-edge-blue-swimming-pool-vacation_343596-3579.jpg", imageAlt: "Floral nail design"
},
{
id: "4", name: "French Elegance", price: "$40", variant: "Classic • Timeless style", imageSrc: "http://img.b2bpic.net/free-photo/graceful-thin-fingers-girl-with-trendy-pastel-nude-manicure-fluffy-soft-sweater-cute-silver-ring-bow_343596-7953.jpg", imageAlt: "French manicure elegant nails"
},
{
id: "5", name: "Floral Beauty", price: "$52", variant: "Gel • Hand-painted art", imageSrc: "http://img.b2bpic.net/free-photo/close-up-beauty-nail-art-with-flower_23-2149265984.jpg", imageAlt: "Floral nail art design"
},
{
id: "6", name: "Cherry Blossom", price: "$55", variant: "Acrylic • Premium finish", imageSrc: "http://img.b2bpic.net/free-vector/pedicure-manicure-spa-salon-poster_1284-16526.jpg", imageAlt: "Cherry blossom nail design"
id: "04", title: "Baby Pink Chic", description: "Soft, pastel pink designs with minimalist accents. Subtle sophistication.", imageSrc: "http://img.b2bpic.net/free-photo/pretty-manicured-womans-hands-knees_343596-718.jpg", imageAlt: "Baby pink nail art"
}
]}
textboxLayout="default"
animationType="slide-up"
gridVariant="uniform-all-items-equal"
useInvertedBackground={true}
/>
</div>
<div id="services" data-section="services">
<PricingCardOne
title="Our Services"
description="Choose the perfect nail service to match your style and needs"
tag="Services"
tagIcon={Sparkles}
tagAnimation="slide-up"
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={false}
plans={[
{
id: "1", badge: "Popular", badgeIcon: Heart,
price: "$45", subtitle: "Classic Manicure", features: [
"Nail shaping and filing", "Cuticle care", "Color polish application", "Hand and arm massage"
]
},
{
id: "2", badge: "Favorite", badgeIcon: Sparkles,
price: "$65", subtitle: "Gel Manicure", features: [
"Long-lasting gel application", "Chip-resistant finish", "Wide color selection", "UV protection finish", "Up to 3 weeks wear"
]
},
{
id: "3", badge: "Best Value", badgeIcon: Star,
price: "$85", subtitle: "Nail Art Design", features: [
"Custom artistic designs", "Multiple techniques included", "Glitter and embellishments", "Personalized consultation", "Professional finishing"
]
}
]}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwo
title="Love From Our Clients"
description="Read what our beautiful clients have to say about their nail experiences and our exceptional service."
tag="Reviews"
tagIcon={Star}
<TestimonialCardThirteen
title="What Our Clients Say"
description="Real reviews from happy nail lovers who trust us with their nails"
tag="Testimonials"
tagIcon={Heart}
tagAnimation="slide-up"
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={true}
showRating={true}
testimonials={[
{
id: "1", name: "Sarah Mitchell", role: "Bride", testimonial: "The bridal nails were absolutely perfect! The design was elegant, timeless, and lasted through my entire wedding day. I couldn't have asked for better.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-positive-executive-work_1098-519.jpg?_wi=1", imageAlt: "Sarah Mitchell"
id: "1", name: "Sarah Johnson", handle: "@sarah.nails", testimonial: "The nail artist is absolutely incredible! My nails look better than ever. The attention to detail is amazing, and the pink aesthetic of the salon is so cute and welcoming!", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-attractive-caucasian-smiling-woman_93675-135471.jpg", imageAlt: "Sarah Johnson"
},
{
id: "2", name: "Jessica Chen", role: "Regular Client", testimonial: "I've been getting my nails done here for two years. The attention to detail and quality of work is unmatched. Every visit feels like a self-care treat!", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-blonde-young-woman-with-red-lipstick_23-2147910291.jpg?_wi=1", imageAlt: "Jessica Chen"
id: "2", name: "Emma Davis", handle: "@emmad_beauty", testimonial: "I've been coming here for 6 months and I'm obsessed! The custom nail designs are always stunning. Every time I leave, my friends ask me where I got my nails done!", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/studio-shot-attractive-european-model-with-dark-hair-having-dreamy-thoughtful-expression_273609-9520.jpg", imageAlt: "Emma Davis"
},
{
id: "3", name: "Emma Rodriguez", role: "Design Enthusiast", testimonial: "The nail artist brought my wildest design ideas to life! The custom art was stunning and the gel polish held up beautifully for weeks.", imageSrc: "http://img.b2bpic.net/free-photo/side-view-smile-bride-chair_23-2149860772.jpg", imageAlt: "Emma Rodriguez"
id: "3", name: "Jessica Martinez", handle: "@jess_style", testimonial: "Best nail salon in town! The staff is so friendly and the pink gradient nails they did for my wedding were perfection. Highly recommend for any special occasion!", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/pretty-european-woman-casual-peach-sweater-stands-home-by-window-happy-positive-playful-with-curtains_343596-4909.jpg", imageAlt: "Jessica Martinez"
},
{
id: "4", name: "Monica Williams", role: "Beauty Lover", testimonial: "From the moment I walked in, I felt pampered and cared for. The salon is gorgeous, the staff is friendly, and my nails look magazine-worthy!", imageSrc: "http://img.b2bpic.net/free-photo/happy-caucasian-woman-dress-with-view-barcelona-background-spain_1268-18006.jpg", imageAlt: "Monica Williams"
},
{
id: "5", name: "Lily Thompson", role: "Professional", testimonial: "Perfect nails every time. The gel manicures are long-lasting and the colors are always fresh and on-trend. Highly recommend!", imageSrc: "http://img.b2bpic.net/free-photo/close-up-positive-executive-work_1098-519.jpg?_wi=2", imageAlt: "Lily Thompson"
},
{
id: "6", name: "Sophia Martinez", role: "Artist", testimonial: "This is where nail art meets perfection. The creativity and skill are exceptional. My nails have become my favorite accessory!", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-blonde-young-woman-with-red-lipstick_23-2147910291.jpg?_wi=2", imageAlt: "Sophia Martinez"
id: "4", name: "Amanda Chen", handle: "@amandas_nails", testimonial: "I love this place! The nail artists really listen to what you want and bring your vision to life. My gel nails last forever and always look fresh. Worth every penny!", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-beautiful-surprised-woman-looking-with-hands-near-face-trendy-girl-casual-summer-clothes-shocked-female-posing-near-gray-wall_158538-1455.jpg", imageAlt: "Amanda Chen"
}
]}
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={true}
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardThree
title="Transparent Pricing"
description="Quality nail care at every budget. Choose the perfect plan for your beauty needs."
tag="Pricing"
tagIcon={Sparkles}
tagAnimation="slide-up"
plans={[
{
id: "1", price: "$35", name: "Classic Care", buttons: [
{ text: "Book Now", href: "#contact" },
{ text: "Learn More" }
],
features: [
"Basic manicure or pedicure", "Choice of 200+ colors", "Nail shaping & filing", "Cuticle care included"
]
},
{
id: "2", badge: "Most Popular", badgeIcon: Heart,
price: "$50", name: "Gel Luxe", buttons: [
{ text: "Book Now", href: "#contact" },
{ text: "Learn More" }
],
features: [
"Premium gel manicure", "3-week lasting formula", "Glossy or matte finish", "Cuticle treatment", "Hand massage included"
]
},
{
id: "3", price: "$65", name: "Art Edition", buttons: [
{ text: "Book Now", href: "#contact" },
{ text: "Learn More" }
],
features: [
"Custom nail art design", "Gel base with polish", "Hand-painted details", "Rhinestone & gem options", "Professional finishing touches"
]
}
]}
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={false}
/>
</div>
<div id="about" data-section="about">
<MetricSplitMediaAbout
tag="Our Story"
tagIcon={Sparkles}
tagAnimation="slide-up"
title="Crafting Beauty, One Nail at a Time"
description="Founded with a passion for nail artistry and self-care, Nail Luxe is dedicated to creating beautiful, healthy nails in a relaxing and luxurious environment. Our team of certified nail technicians brings creativity, precision, and care to every service. We believe that perfect nails are an expression of personal style and confidence."
metrics={[
{ value: "500+", title: "Happy clients served" },
{ value: "5 years", title: "Industry experience" }
]}
metricsAnimation="slide-up"
imageSrc="http://img.b2bpic.net/free-photo/front-view-young-female-manicure-pink-t-shirt-with-black-gloves-black-mask-sitting-front-table-checking-her-nails-blue_140725-24238.jpg"
imageAlt="Professional nail artist at Nail Luxe salon"
mediaAnimation="slide-up"
useInvertedBackground={true}
/>
</div>
<div id="contact" data-section="contact">
<ContactCTA
tag="Get Beautiful Nails"
tagIcon={Heart}
tagAnimation="slide-up"
title="Ready for Your Perfect Manicure?"
description="Book your appointment today and experience the Nail Luxe difference. Our expert technicians are ready to create stunning nails that make you feel confident and beautiful."
buttons={[
{ text: "Schedule Appointment", href: "https://calendly.com/nailluxe" },
{ text: "Contact Us", href: "mailto:hello@nailluxe.com" }
]}
buttonAnimation="slide-up"
background={{ variant: "sparkles-gradient" }}
<ContactFaq
ctaTitle="Ready for Beautiful Nails?"
ctaDescription="Book your appointment today and let our nail artists create your perfect manicure!"
ctaButton={{ text: "Book Appointment", href: "https://example.com/booking" }}
ctaIcon={Calendar}
useInvertedBackground={false}
animationType="slide-up"
accordionAnimationType="smooth"
showCard={true}
faqs={[
{
id: "1", title: "How long does a gel manicure last?", content: "Gel manicures typically last 2-3 weeks depending on how quickly your nails grow. We recommend touch-ups every 2-3 weeks to keep them looking fresh and perfect!"
},
{
id: "2", title: "Do you offer custom nail art?", content: "Absolutely! We specialize in custom nail art designs. During your consultation, our talented artists will work with you to create exactly the design you're dreaming of."
},
{
id: "3", title: "Can I book same-day appointments?", content: "We do take walk-ins based on availability, but we recommend booking in advance to guarantee your preferred time slot. You can call us or book online!"
},
{
id: "4", title: "What should I do before my appointment?", content: "Keep your nails clean and dry before your appointment. If you have a specific design in mind, feel free to bring inspiration photos. We're happy to help make your vision reality!"
},
{
id: "5", title: "Do you use hygienic tools and products?", content: "Yes! We follow strict hygiene protocols and use high-quality, professional-grade products. All tools are sanitized between clients for your safety and peace of mind."
}
]}
/>
</div>
@@ -259,41 +212,40 @@ export default function LandingPage() {
columns={[
{
title: "Services", items: [
{ label: "Gel Manicure", href: "#services" },
{ label: "Manicures", href: "#services" },
{ label: "Gel Nails", href: "#services" },
{ label: "Nail Art", href: "#services" },
{ label: "Acrylic Extensions", href: "#services" },
{ label: "Pedicure", href: "#services" }
{ label: "Pedicures", href: "#services" }
]
},
{
title: "Explore", items: [
title: "Company", items: [
{ label: "About Us", href: "#about" },
{ label: "Gallery", href: "#portfolio" },
{ label: "Pricing", href: "#pricing" },
{ label: "Reviews", href: "#testimonials" },
{ label: "About Us", href: "#about" }
]
},
{
title: "Connect", items: [
{ label: "Instagram", href: "https://instagram.com/nailluxe" },
{ label: "Facebook", href: "https://facebook.com/nailluxe" },
{ label: "Contact", href: "#contact" },
{ label: "Book Now", href: "#contact" }
]
},
{
title: "Info", items: [
title: "Follow Us", items: [
{ label: "Instagram", href: "https://instagram.com" },
{ label: "Facebook", href: "https://facebook.com" },
{ label: "TikTok", href: "https://tiktok.com" },
{ label: "Pinterest", href: "https://pinterest.com" }
]
},
{
title: "Legal", items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" },
{ label: "Cancellation Policy", href: "#" },
{ label: "Gift Cards", href: "#" }
{ label: "Refund Policy", href: "#" }
]
}
]}
bottomLeftText="© 2025 Nail Luxe. All rights reserved."
bottomRightText="Handcrafted with love for beautiful nails"
bottomLeftText="© 2025 Nail Studio. All rights reserved."
bottomRightText="Crafted with love and pink polish ✨"
/>
</div>
</ThemeProvider>
);
}
}

View File

@@ -2,45 +2,35 @@ import React from 'react';
interface SvgTextLogoProps {
text: string;
className?: string;
textClassName?: string;
fontSize?: number;
fontWeight?: number | string;
fontFamily?: string;
textAnchor?: 'start' | 'middle' | 'end';
dominantBaseline?: 'hanging' | 'middle' | 'auto';
fill?: string;
className?: string;
}
const SvgTextLogo: React.FC<SvgTextLogoProps> = ({
text,
className = '',
textClassName = '',
fontSize = 24,
fontSize = 32,
fontWeight = 'bold',
fontFamily = 'system-ui, -apple-system, sans-serif',
textAnchor = 'middle',
dominantBaseline = 'middle',
fontFamily = 'Arial, sans-serif',
fill = 'currentColor',
className,
}) => {
const svgWidth = Math.max(text.length * (fontSize as number) * 0.6, 200);
const svgHeight = (fontSize as number) * 1.5;
return (
<svg
viewBox={`0 0 ${svgWidth} ${svgHeight}`}
width={svgWidth}
height={svgHeight}
className={className}
viewBox={`0 0 ${text.length * 20} ${fontSize * 1.5}`}
xmlns="http://www.w3.org/2000/svg"
className={className}
>
<text
x={svgWidth / 2}
y={svgHeight / 2}
x="10"
y={fontSize}
fontSize={fontSize}
fontWeight={fontWeight}
fontFamily={fontFamily}
textAnchor={textAnchor}
dominantBaseline={dominantBaseline}
className={textClassName}
fill={fill}
dominantBaseline="auto"
>
{text}
</text>
@@ -48,4 +38,4 @@ const SvgTextLogo: React.FC<SvgTextLogoProps> = ({
);
};
export default SvgTextLogo;
export default SvgTextLogo;