Merge version_1 into main #2
228
src/app/page.tsx
228
src/app/page.tsx
@@ -21,7 +21,7 @@ export default function HomePage() {
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="medium"
|
||||
background="aurora"
|
||||
background="circleGradient"
|
||||
cardStyle="gradient-radial"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="solid"
|
||||
@@ -49,7 +49,7 @@ export default function HomePage() {
|
||||
tag="Professional Auto Care"
|
||||
tagAnimation="slide-up"
|
||||
tagIcon={Sparkles}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193155.jpg?_wi=1"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193155.jpg"
|
||||
imageAlt="Perfectly polished luxury car exterior"
|
||||
videoSrc="http://img.b2bpic.net/free-photo/beautiful-car-washing-service_23-2149212219.jpg"
|
||||
videoAriaLabel="Professional car detailing service video"
|
||||
@@ -61,37 +61,25 @@ export default function HomePage() {
|
||||
buttonAnimation="slide-up"
|
||||
testimonials={[
|
||||
{
|
||||
name: "Javohir A.",
|
||||
handle: "Lexus Owner",
|
||||
testimonial: "Outstanding service! My car looks brand new. The attention to detail is incredible.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/selfie-portrait-videocall_23-2149186122.jpg?_wi=1"
|
||||
name: "Javohir A.", handle: "Lexus Owner", testimonial: "Outstanding service! My car looks brand new. The attention to detail is incredible.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/selfie-portrait-videocall_23-2149186122.jpg"
|
||||
},
|
||||
{
|
||||
name: "Diyor M.",
|
||||
handle: "BMW Enthusiast",
|
||||
testimonial: "Best detailing service in Tashkent. Highly professional and affordable.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg?_wi=1"
|
||||
name: "Diyor M.", handle: "BMW Enthusiast", testimonial: "Best detailing service in Tashkent. Highly professional and affordable.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg"
|
||||
},
|
||||
{
|
||||
name: "Shakhzoda K.",
|
||||
handle: "Mercedes Owner",
|
||||
testimonial: "They treat your car like their own. Exceptional work and great customer service.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-afroamerican-man-smiling_23-2148508920.jpg?_wi=1"
|
||||
name: "Shakhzoda K.", handle: "Mercedes Owner", testimonial: "They treat your car like their own. Exceptional work and great customer service.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-afroamerican-man-smiling_23-2148508920.jpg"
|
||||
},
|
||||
{
|
||||
name: "Akmal R.",
|
||||
handle: "Audi Owner",
|
||||
testimonial: "Fast, reliable, and they actually care about your vehicle. I'm a returning customer.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-waitress_107420-12307.jpg?_wi=1"
|
||||
name: "Akmal R.", handle: "Audi Owner", testimonial: "Fast, reliable, and they actually care about your vehicle. I'm a returning customer.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-waitress_107420-12307.jpg"
|
||||
}
|
||||
]}
|
||||
testimonialRotationInterval={5000}
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "aurora" }}
|
||||
background={{ variant: "plain" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -106,7 +94,7 @@ export default function HomePage() {
|
||||
{ value: "500+", title: "Vehicles Detailed" },
|
||||
{ value: "5 Years", title: "Industry Experience" }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/man-polishing-car-inside-car-service_1303-26884.jpg?_wi=1"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/man-polishing-car-inside-car-service_1303-26884.jpg"
|
||||
imageAlt="Professional detailing workshop"
|
||||
mediaAnimation="slide-up"
|
||||
metricsAnimation="slide-up"
|
||||
@@ -123,78 +111,54 @@ export default function HomePage() {
|
||||
tagIcon={Zap}
|
||||
features={[
|
||||
{
|
||||
title: "Exterior Detailing",
|
||||
description: "Complete exterior cleaning and restoration",
|
||||
bentoComponent: "media-stack",
|
||||
items: [
|
||||
title: "Exterior Detailing", description: "Complete exterior cleaning and restoration", bentoComponent: "media-stack", items: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/car-wrapping-with-foil-car-service_1303-32335.jpg?_wi=1",
|
||||
imageAlt: "Paint correction before and after"
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/car-wrapping-with-foil-car-service_1303-32335.jpg", imageAlt: "Paint correction before and after"
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/senior-man-car-showroom-choosing-car_1303-18981.jpg?_wi=1",
|
||||
imageAlt: "Polished car exterior detail"
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/senior-man-car-showroom-choosing-car_1303-18981.jpg", imageAlt: "Polished car exterior detail"
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/senior-man-car-showroom-choosing-car_1303-18981.jpg?_wi=2",
|
||||
imageAlt: "Shiny vehicle finish result"
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/senior-man-car-showroom-choosing-car_1303-18981.jpg", imageAlt: "Shiny vehicle finish result"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Interior Cleaning",
|
||||
description: "Deep interior detailing and restoration",
|
||||
bentoComponent: "media-stack",
|
||||
items: [
|
||||
title: "Interior Cleaning", description: "Deep interior detailing and restoration", bentoComponent: "media-stack", items: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/attractive-bearded-man-leaning-soft-chair-back-while-exploring-linear-pattern-before-buying_7502-10002.jpg?_wi=1",
|
||||
imageAlt: "Interior detailing transformation"
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/attractive-bearded-man-leaning-soft-chair-back-while-exploring-linear-pattern-before-buying_7502-10002.jpg", imageAlt: "Interior detailing transformation"
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/headlight-lamp-car_74190-1952.jpg?_wi=1",
|
||||
imageAlt: "Clean car interior result"
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/headlight-lamp-car_74190-1952.jpg", imageAlt: "Clean car interior result"
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-sexy-fashion-blond-girl-model-with-bright-makeup-curly-hairstyle-retro-style-sitting-old-car_158538-9285.jpg?_wi=1",
|
||||
imageAlt: "Professional interior detail"
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-sexy-fashion-blond-girl-model-with-bright-makeup-curly-hairstyle-retro-style-sitting-old-car_158538-9285.jpg", imageAlt: "Professional interior detail"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Paint Protection",
|
||||
description: "Ceramic coatings and protective treatments",
|
||||
bentoComponent: "media-stack",
|
||||
items: [
|
||||
title: "Paint Protection", description: "Ceramic coatings and protective treatments", bentoComponent: "media-stack", items: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/car-wrapping-with-foil-car-service_1303-32339.jpg?_wi=1",
|
||||
imageAlt: "Ceramic coating before and after"
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/car-wrapping-with-foil-car-service_1303-32339.jpg", imageAlt: "Ceramic coating before and after"
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-leather-card-holder-isolated-pink_140725-12400.jpg?_wi=1",
|
||||
imageAlt: "Protected paint surface shine"
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-leather-card-holder-isolated-pink_140725-12400.jpg", imageAlt: "Protected paint surface shine"
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-vacuum-cleaner-robot-flat-surface-floor_23-2151736855.jpg?_wi=1",
|
||||
imageAlt: "Professional protection products"
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-vacuum-cleaner-robot-flat-surface-floor_23-2151736855.jpg", imageAlt: "Professional protection products"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Polishing & Restoration",
|
||||
description: "Professional paint correction and polishing",
|
||||
bentoComponent: "media-stack",
|
||||
items: [
|
||||
title: "Polishing & Restoration", description: "Professional paint correction and polishing", bentoComponent: "media-stack", items: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-wiping-car-with-microfiber-after-wash_1303-29061.jpg?_wi=1",
|
||||
imageAlt: "Professional polishing process"
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-wiping-car-with-microfiber-after-wash_1303-29061.jpg", imageAlt: "Professional polishing process"
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193155.jpg?_wi=2",
|
||||
imageAlt: "Beautifully polished car"
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193155.jpg", imageAlt: "Beautifully polished car"
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/preparing-car-before-spray-painting_1157-36583.jpg?_wi=1",
|
||||
imageAlt: "Expert detailing specialist"
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/preparing-car-before-spray-painting_1157-36583.jpg", imageAlt: "Expert detailing specialist"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -215,56 +179,32 @@ export default function HomePage() {
|
||||
tagIcon={Award}
|
||||
plans={[
|
||||
{
|
||||
id: "basic",
|
||||
badge: "Standard",
|
||||
price: "250,000 UZS",
|
||||
subtitle: "Perfect for regular maintenance",
|
||||
buttons: [
|
||||
id: "basic", badge: "Standard", price: "250,000 UZS", subtitle: "Perfect for regular maintenance", buttons: [
|
||||
{ text: "Select Plan", href: "#contact" },
|
||||
{ text: "Learn More", href: "#features" }
|
||||
],
|
||||
features: [
|
||||
"Exterior washing and drying",
|
||||
"Window cleaning",
|
||||
"Tire and rim cleaning",
|
||||
"Basic interior vacuuming"
|
||||
"Exterior washing and drying", "Window cleaning", "Tire and rim cleaning", "Basic interior vacuuming"
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "premium",
|
||||
badge: "Premium",
|
||||
badgeIcon: Star,
|
||||
price: "500,000 UZS",
|
||||
subtitle: "Most popular choice",
|
||||
buttons: [
|
||||
id: "premium", badge: "Premium", badgeIcon: Star,
|
||||
price: "500,000 UZS", subtitle: "Most popular choice", buttons: [
|
||||
{ text: "Select Plan", href: "#contact" },
|
||||
{ text: "Learn More", href: "#features" }
|
||||
],
|
||||
features: [
|
||||
"Complete exterior detailing",
|
||||
"Paint polishing and protection",
|
||||
"Interior deep cleaning",
|
||||
"Carpet shampooing",
|
||||
"Dashboard restoration"
|
||||
"Complete exterior detailing", "Paint polishing and protection", "Interior deep cleaning", "Carpet shampooing", "Dashboard restoration"
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "elite",
|
||||
badge: "Elite",
|
||||
badgeIcon: Sparkles,
|
||||
price: "800,000 UZS",
|
||||
subtitle: "Ultimate car care experience",
|
||||
buttons: [
|
||||
id: "elite", badge: "Elite", badgeIcon: Sparkles,
|
||||
price: "800,000 UZS", subtitle: "Ultimate car care experience", buttons: [
|
||||
{ text: "Select Plan", href: "#contact" },
|
||||
{ text: "Learn More", href: "#features" }
|
||||
],
|
||||
features: [
|
||||
"Full professional restoration",
|
||||
"Ceramic coating application",
|
||||
"Paint correction and polishing",
|
||||
"Premium leather conditioning",
|
||||
"Engine bay detailing",
|
||||
"Headlight restoration"
|
||||
"Full professional restoration", "Ceramic coating application", "Paint correction and polishing", "Premium leather conditioning", "Engine bay detailing", "Headlight restoration"
|
||||
]
|
||||
}
|
||||
]}
|
||||
@@ -284,36 +224,16 @@ export default function HomePage() {
|
||||
tagIcon={Shield}
|
||||
metrics={[
|
||||
{
|
||||
id: "equipment",
|
||||
value: "Premium",
|
||||
title: "Equipment",
|
||||
description: "State-of-the-art professional detailing tools",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-vacuum-cleaner-robot-flat-surface-floor_23-2151736855.jpg?_wi=2",
|
||||
imageAlt: "Professional detailing equipment"
|
||||
id: "equipment", value: "Premium", title: "Equipment", description: "State-of-the-art professional detailing tools", imageSrc: "http://img.b2bpic.net/free-photo/view-vacuum-cleaner-robot-flat-surface-floor_23-2151736855.jpg", imageAlt: "Professional detailing equipment"
|
||||
},
|
||||
{
|
||||
id: "expertise",
|
||||
value: "5+",
|
||||
title: "Years Experience",
|
||||
description: "Trusted specialists in automotive care",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/preparing-car-before-spray-painting_1157-36583.jpg?_wi=2",
|
||||
imageAlt: "Expert detailing specialist at work"
|
||||
id: "expertise", value: "5+", title: "Years Experience", description: "Trusted specialists in automotive care", imageSrc: "http://img.b2bpic.net/free-photo/preparing-car-before-spray-painting_1157-36583.jpg", imageAlt: "Expert detailing specialist at work"
|
||||
},
|
||||
{
|
||||
id: "products",
|
||||
value: "100%",
|
||||
title: "Premium Products",
|
||||
description: "Only the finest automotive care solutions",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193155.jpg?_wi=3",
|
||||
imageAlt: "Premium detailing products results"
|
||||
id: "products", value: "100%", title: "Premium Products", description: "Only the finest automotive care solutions", imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193155.jpg", imageAlt: "Premium detailing products results"
|
||||
},
|
||||
{
|
||||
id: "attention",
|
||||
value: "Meticulous",
|
||||
title: "Detail Focused",
|
||||
description: "Every surface treated with precision",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-wiping-car-with-microfiber-after-wash_1303-29061.jpg?_wi=2",
|
||||
imageAlt: "Close-up detailing work"
|
||||
id: "attention", value: "Meticulous", title: "Detail Focused", description: "Every surface treated with precision", imageSrc: "http://img.b2bpic.net/free-photo/man-wiping-car-with-microfiber-after-wash_1303-29061.jpg", imageAlt: "Close-up detailing work"
|
||||
}
|
||||
]}
|
||||
textboxLayout="default"
|
||||
@@ -332,28 +252,16 @@ export default function HomePage() {
|
||||
tagIcon={CheckCircle}
|
||||
features={[
|
||||
{
|
||||
title: "Step 1: Inspection",
|
||||
description: "We thoroughly assess your vehicle's condition",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Eye
|
||||
title: "Step 1: Inspection", description: "We thoroughly assess your vehicle's condition", bentoComponent: "reveal-icon", icon: Eye
|
||||
},
|
||||
{
|
||||
title: "Step 2: Washing",
|
||||
description: "Professional cleaning with premium products",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Droplet
|
||||
title: "Step 2: Washing", description: "Professional cleaning with premium products", bentoComponent: "reveal-icon", icon: Droplet
|
||||
},
|
||||
{
|
||||
title: "Step 3: Polishing",
|
||||
description: "Expert polishing for brilliant shine",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Sparkles
|
||||
title: "Step 3: Polishing", description: "Expert polishing for brilliant shine", bentoComponent: "reveal-icon", icon: Sparkles
|
||||
},
|
||||
{
|
||||
title: "Step 4: Protection",
|
||||
description: "Apply protective coating for lasting results",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Shield
|
||||
title: "Step 4: Protection", description: "Apply protective coating for lasting results", bentoComponent: "reveal-icon", icon: Shield
|
||||
}
|
||||
]}
|
||||
textboxLayout="default"
|
||||
@@ -366,12 +274,12 @@ export default function HomePage() {
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwelve
|
||||
testimonials={[
|
||||
{ id: "1", name: "Javohir A.", imageSrc: "http://img.b2bpic.net/free-photo/selfie-portrait-videocall_23-2149186122.jpg?_wi=2" },
|
||||
{ id: "2", name: "Diyor M.", imageSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg?_wi=2" },
|
||||
{ id: "3", name: "Shakhzoda K.", imageSrc: "http://img.b2bpic.net/free-photo/handsome-afroamerican-man-smiling_23-2148508920.jpg?_wi=2" },
|
||||
{ id: "4", name: "Akmal R.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-waitress_107420-12307.jpg?_wi=2" },
|
||||
{ id: "5", name: "Farida T.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-modern-male_23-2148514900.jpg?_wi=1" },
|
||||
{ id: "6", name: "Rustam K.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-posing-indoors_23-2149927558.jpg?_wi=1" }
|
||||
{ id: "1", name: "Javohir A.", imageSrc: "http://img.b2bpic.net/free-photo/selfie-portrait-videocall_23-2149186122.jpg" },
|
||||
{ id: "2", name: "Diyor M.", imageSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg" },
|
||||
{ id: "3", name: "Shakhzoda K.", imageSrc: "http://img.b2bpic.net/free-photo/handsome-afroamerican-man-smiling_23-2148508920.jpg" },
|
||||
{ id: "4", name: "Akmal R.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-waitress_107420-12307.jpg" },
|
||||
{ id: "5", name: "Farida T.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-modern-male_23-2148514900.jpg" },
|
||||
{ id: "6", name: "Rustam K.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-posing-indoors_23-2149927558.jpg" }
|
||||
]}
|
||||
cardTitle="Trusted by over 500+ satisfied customers in Tashkent"
|
||||
cardTag="Customer Love"
|
||||
@@ -389,34 +297,22 @@ export default function HomePage() {
|
||||
ctaIcon={Phone}
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "How long does a detailing service take?",
|
||||
content: "Standard detailing typically takes 2-3 hours. Premium services with ceramic coating can take 4-6 hours. We always provide an estimate upfront."
|
||||
id: "1", title: "How long does a detailing service take?", content: "Standard detailing typically takes 2-3 hours. Premium services with ceramic coating can take 4-6 hours. We always provide an estimate upfront."
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "What areas of Tashkent do you service?",
|
||||
content: "We provide services throughout Tashkent and surrounding areas. We can also arrange mobile detailing for your location."
|
||||
id: "2", title: "What areas of Tashkent do you service?", content: "We provide services throughout Tashkent and surrounding areas. We can also arrange mobile detailing for your location."
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Do you offer ceramic coating?",
|
||||
content: "Yes! Our ceramic coating provides long-lasting paint protection lasting 2-5 years, depending on maintenance."
|
||||
id: "3", title: "Do you offer ceramic coating?", content: "Yes! Our ceramic coating provides long-lasting paint protection lasting 2-5 years, depending on maintenance."
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
title: "What is your booking process?",
|
||||
content: "Call us or fill out the form to schedule an appointment. We'll confirm your service details and provide a price quote."
|
||||
id: "4", title: "What is your booking process?", content: "Call us or fill out the form to schedule an appointment. We'll confirm your service details and provide a price quote."
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
title: "Can you detail exotic or luxury cars?",
|
||||
content: "Absolutely! We specialize in luxury and exotic vehicles. Our team is experienced with all high-end brands."
|
||||
id: "5", title: "Can you detail exotic or luxury cars?", content: "Absolutely! We specialize in luxury and exotic vehicles. Our team is experienced with all high-end brands."
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
title: "Do you offer payment plans?",
|
||||
content: "Yes, we offer flexible payment options for our premium service packages. Contact us for details."
|
||||
id: "6", title: "Do you offer payment plans?", content: "Yes, we offer flexible payment options for our premium service packages. Contact us for details."
|
||||
}
|
||||
]}
|
||||
useInvertedBackground={false}
|
||||
@@ -430,8 +326,7 @@ export default function HomePage() {
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Services",
|
||||
items: [
|
||||
title: "Services", items: [
|
||||
{ label: "Exterior Detailing", href: "#features" },
|
||||
{ label: "Interior Cleaning", href: "#features" },
|
||||
{ label: "Paint Protection", href: "#features" },
|
||||
@@ -439,8 +334,7 @@ export default function HomePage() {
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Gallery", href: "/gallery" },
|
||||
{ label: "Contact", href: "#contact" },
|
||||
@@ -448,8 +342,7 @@ export default function HomePage() {
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Contact",
|
||||
items: [
|
||||
title: "Contact", items: [
|
||||
{ label: "Phone", href: "tel:+998901234567" },
|
||||
{ label: "WhatsApp", href: "https://wa.me/998901234567" },
|
||||
{ label: "Location", href: "#contact" },
|
||||
@@ -457,8 +350,7 @@ export default function HomePage() {
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Cookie Policy", href: "#" }
|
||||
|
||||
@@ -1,51 +1,40 @@
|
||||
"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;
|
||||
fontSize?: number;
|
||||
fontWeight?: string | number;
|
||||
fill?: string;
|
||||
dominantBaseline?: 'auto' | 'middle' | 'hanging' | 'mathematical';
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const SvgTextLogo = memo<SvgTextLogoProps>(function SvgTextLogo({
|
||||
logoText,
|
||||
adjustHeightFactor,
|
||||
verticalAlign = "top",
|
||||
className = "",
|
||||
}) {
|
||||
const { svgRef, textRef, viewBox, aspectRatio } = useSvgTextLogo(logoText, false, adjustHeightFactor);
|
||||
|
||||
export const SvgTextLogo: React.FC<SvgTextLogoProps> = ({
|
||||
text,
|
||||
fontSize = 24,
|
||||
fontWeight = 'bold',
|
||||
fill = 'currentColor',
|
||||
dominantBaseline = 'middle',
|
||||
className,
|
||||
}) => {
|
||||
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 ${text.length * fontSize} ${fontSize * 1.5}`}
|
||||
className={className}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<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"
|
||||
}}
|
||||
y={fontSize / 2}
|
||||
fontSize={fontSize}
|
||||
fontWeight={fontWeight}
|
||||
fill={fill}
|
||||
dominantBaseline={dominantBaseline}
|
||||
>
|
||||
{logoText}
|
||||
{text}
|
||||
</text>
|
||||
</svg>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
SvgTextLogo.displayName = "SvgTextLogo";
|
||||
|
||||
export default SvgTextLogo;
|
||||
export default SvgTextLogo;
|
||||
Reference in New Issue
Block a user