Merge version_1 into main #3
@@ -152,4 +152,4 @@ export default function ClothingPage() {
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
254
src/app/page.tsx
254
src/app/page.tsx
@@ -1,16 +1,16 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
||||
import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
|
||||
import ProductCardThree from "@/components/sections/product/ProductCardThree";
|
||||
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
||||
import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen";
|
||||
import ContactSplit from "@/components/sections/contact/ContactSplit";
|
||||
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
||||
import { Sparkles, Heart, Zap, Award, Star, Mail } from "lucide-react";
|
||||
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
||||
import { Sparkles, Heart, Zap, Award, Mail, Star } from "lucide-react";
|
||||
|
||||
export default function HomePage() {
|
||||
export default function Home() {
|
||||
const handleNewsletterSubscription = (email: string) => {
|
||||
console.log("Newsletter subscription:", email);
|
||||
};
|
||||
@@ -18,50 +18,11 @@ export default function HomePage() {
|
||||
const navItems = [
|
||||
{ name: "Shop", id: "shop" },
|
||||
{ name: "Brands", id: "brands" },
|
||||
{ name: "New Arrivals", id: "new-arrivals" },
|
||||
{ name: "About Us", id: "about" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
{ name: "Blog", id: "blog" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Shop",
|
||||
items: [
|
||||
{ label: "All Products", href: "/shop" },
|
||||
{ label: "Clothing", href: "/clothing" },
|
||||
{ label: "Beauty", href: "/beauty" },
|
||||
{ label: "Tech & Gadgets", href: "/tech" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Blog", href: "/blog" },
|
||||
{ label: "Careers", href: "#" },
|
||||
{ label: "Press", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{ label: "Contact Us", href: "/contact" },
|
||||
{ label: "FAQ", href: "#" },
|
||||
{ label: "Shipping Info", href: "#" },
|
||||
{ label: "Returns", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Accessibility", href: "#" },
|
||||
{ label: "Cookie Settings", href: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="elastic-effect"
|
||||
@@ -69,8 +30,8 @@ export default function HomePage() {
|
||||
borderRadius="rounded"
|
||||
contentWidth="compact"
|
||||
sizing="largeSmallSizeLargeTitles"
|
||||
background="grid"
|
||||
cardStyle="solid"
|
||||
background="sparkles-gradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="extrabold"
|
||||
@@ -83,15 +44,15 @@ export default function HomePage() {
|
||||
{/* Hero Section */}
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
title="Illuminate Your Everyday"
|
||||
description="Curated collection of luxury clothing, beauty, and cutting-edge technology. Experience the radiance of premium lifestyle products crafted for those who appreciate elegance."
|
||||
enableKpiAnimation={true}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
kpis={[
|
||||
{ value: "500+", label: "Premium Brands" },
|
||||
{ value: "10K+", label: "Happy Customers" },
|
||||
{ value: "24/7", label: "Customer Support" },
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
tag="Welcome to Luminance"
|
||||
tagIcon={Sparkles}
|
||||
tagAnimation="slide-up"
|
||||
@@ -100,8 +61,8 @@ export default function HomePage() {
|
||||
{ text: "Explore All", href: "/shop" },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/abstract-blur-bokeh-defocused-shopping-mall-interior-department-store_1203-9449.jpg?_wi=1"
|
||||
imageAlt="Luxury lifestyle hero display with premium products"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/abstract-blur-bokeh-defocused-shopping-mall-interior-department-store_1203-9449.jpg"
|
||||
imageAlt="luxury lifestyle product photography elegant lighting"
|
||||
mediaAnimation="slide-up"
|
||||
imagePosition="right"
|
||||
/>
|
||||
@@ -117,26 +78,11 @@ export default function HomePage() {
|
||||
tagAnimation="slide-up"
|
||||
products={[
|
||||
{
|
||||
id: "cat-1",
|
||||
name: "Premium Clothing",
|
||||
price: "Starting at $89",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-sexy-blond-woman-model-evening-yellow-dress-posing-blue-sky-background_158538-9409.jpg",
|
||||
imageAlt: "Premium luxury clothing collection",
|
||||
},
|
||||
id: "cat-1", name: "Premium Clothing", price: "Starting at $89", imageSrc: "http://img.b2bpic.net/free-photo/young-sexy-blond-woman-model-evening-yellow-dress-posing-blue-sky-background_158538-9409.jpg", imageAlt: "premium clothing collection luxury fashion hoodie"},
|
||||
{
|
||||
id: "cat-2",
|
||||
name: "Luxury Beauty",
|
||||
price: "Starting at $45",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/natural-self-care-product_23-2148989954.jpg?_wi=1",
|
||||
imageAlt: "Luxury beauty and skincare products",
|
||||
},
|
||||
id: "cat-2", name: "Luxury Beauty", price: "Starting at $45", imageSrc: "http://img.b2bpic.net/free-photo/natural-self-care-product_23-2148989954.jpg", imageAlt: "luxury beauty skincare serum bottle gold accent"},
|
||||
{
|
||||
id: "cat-3",
|
||||
name: "Tech & Gadgets",
|
||||
price: "Starting at $149",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-smartphone-with-keyboard-charger_23-2149404178.jpg",
|
||||
imageAlt: "Luxury tech and gadget accessories",
|
||||
},
|
||||
id: "cat-3", name: "Tech & Gadgets", price: "Starting at $149", imageSrc: "http://img.b2bpic.net/free-photo/top-view-smartphone-with-keyboard-charger_23-2149404178.jpg", imageAlt: "luxury tech gadgets wireless earbuds premium design"},
|
||||
]}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
@@ -155,40 +101,15 @@ export default function HomePage() {
|
||||
tagAnimation="slide-up"
|
||||
products={[
|
||||
{
|
||||
id: "bs-1",
|
||||
name: "Luminance x Nike Premium Hoodie",
|
||||
price: "$129.00",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/light-brown-beige-pants-indoors-still-life_23-2150756306.jpg?_wi=1",
|
||||
imageAlt: "Premium luxury hoodie collaboration",
|
||||
},
|
||||
id: "bs-1", name: "Luminance x Nike Premium Hoodie", price: "$129.00", imageSrc: "http://img.b2bpic.net/free-photo/light-brown-beige-pants-indoors-still-life_23-2150756306.jpg", imageAlt: "premium hoodie luxury clothing minimalist white"},
|
||||
{
|
||||
id: "bs-2",
|
||||
name: "Silk Evening Dress",
|
||||
price: "$299.00",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/gorgeous-woman-with-blonde-wavy-hair-wearing-elegant-beige-dress_273443-1774.jpg?_wi=1",
|
||||
imageAlt: "Elegant silk evening dress",
|
||||
},
|
||||
id: "bs-2", name: "Silk Evening Dress", price: "$299.00", imageSrc: "http://img.b2bpic.net/free-photo/gorgeous-woman-with-blonde-wavy-hair-wearing-elegant-beige-dress_273443-1774.jpg", imageAlt: "luxury dress elegant formal wear photography"},
|
||||
{
|
||||
id: "bs-3",
|
||||
name: "Luxury Tailored Blazer",
|
||||
price: "$249.00",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-sexy-handsome-man-dressed-elegant-beige-checkered-suit_158538-4377.jpg?_wi=1",
|
||||
imageAlt: "Premium tailored blazer",
|
||||
},
|
||||
id: "bs-3", name: "Luxury Tailored Blazer", price: "$249.00", imageSrc: "http://img.b2bpic.net/free-photo/portrait-sexy-handsome-man-dressed-elegant-beige-checkered-suit_158538-4377.jpg", imageAlt: "premium blazer luxury clothing designer piece"},
|
||||
{
|
||||
id: "bs-4",
|
||||
name: "Luminance Beauty Serum Pro",
|
||||
price: "$89.00",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-applying-serum_23-2149168563.jpg?_wi=1",
|
||||
imageAlt: "Premium anti-aging serum",
|
||||
},
|
||||
id: "bs-4", name: "Luminance Beauty Serum Pro", price: "$89.00", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-applying-serum_23-2149168563.jpg", imageAlt: "luxury skincare serum anti-aging beauty"},
|
||||
{
|
||||
id: "bs-5",
|
||||
name: "Gold Luxury Lipstick",
|
||||
price: "$55.00",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-item-with-marijuana-leaves_23-2151336398.jpg?_wi=1",
|
||||
imageAlt: "Premium luxury lipstick",
|
||||
},
|
||||
id: "bs-5", name: "Gold Luxury Lipstick", price: "$55.00", imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-item-with-marijuana-leaves_23-2151336398.jpg", imageAlt: "luxury lipstick cosmetics elegant packaging"},
|
||||
]}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
@@ -207,40 +128,15 @@ export default function HomePage() {
|
||||
tagAnimation="slide-up"
|
||||
products={[
|
||||
{
|
||||
id: "tech-1",
|
||||
name: "Premium Wireless Earbuds Pro",
|
||||
price: "$199.00",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/black-cordless-headphones-gray-textile_417767-474.jpg?_wi=1",
|
||||
imageAlt: "Luxury wireless earbuds with premium design",
|
||||
},
|
||||
id: "tech-1", name: "Premium Wireless Earbuds Pro", price: "$199.00", imageSrc: "http://img.b2bpic.net/free-photo/black-cordless-headphones-gray-textile_417767-474.jpg", imageAlt: "luxury wireless earbuds premium tech design"},
|
||||
{
|
||||
id: "tech-2",
|
||||
name: "Smart Mirror Elite",
|
||||
price: "$399.00",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-vr-glasses-earphones-arrangement_23-2148847751.jpg?_wi=1",
|
||||
imageAlt: "Luxury smart mirror with LED lighting",
|
||||
},
|
||||
id: "tech-2", name: "Smart Mirror Elite", price: "$399.00", imageSrc: "http://img.b2bpic.net/free-photo/top-view-vr-glasses-earphones-arrangement_23-2148847751.jpg", imageAlt: "smart mirror luxury tech gadget bathroom"},
|
||||
{
|
||||
id: "tech-3",
|
||||
name: "LED Beauty Ring Light",
|
||||
price: "$159.00",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-girl-recording-her-makeup-routine_23-2150405106.jpg?_wi=1",
|
||||
imageAlt: "Premium LED ring light for beauty",
|
||||
},
|
||||
id: "tech-3", name: "LED Beauty Ring Light", price: "$159.00", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-girl-recording-her-makeup-routine_23-2150405106.jpg", imageAlt: "luxury LED beauty light photography lighting"},
|
||||
{
|
||||
id: "tech-4",
|
||||
name: "Portable Luxury Charger",
|
||||
price: "$89.00",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/usb-charging-gadgets-blurred-background-room-close-up-concept-technology-everyday-life_169016-15480.jpg?_wi=1",
|
||||
imageAlt: "Premium portable power bank",
|
||||
},
|
||||
id: "tech-4", name: "Portable Luxury Charger", price: "$89.00", imageSrc: "http://img.b2bpic.net/free-photo/usb-charging-gadgets-blurred-background-room-close-up-concept-technology-everyday-life_169016-15480.jpg", imageAlt: "luxury portable charger power bank design"},
|
||||
{
|
||||
id: "tech-5",
|
||||
name: "Smart Ring Luxury",
|
||||
price: "$349.00",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/faceless-man-browsing-phone-cafe_23-2147689258.jpg?_wi=1",
|
||||
imageAlt: "Premium smart ring wearable",
|
||||
},
|
||||
id: "tech-5", name: "Smart Ring Luxury", price: "$349.00", imageSrc: "http://img.b2bpic.net/free-photo/faceless-man-browsing-phone-cafe_23-2147689258.jpg", imageAlt: "smart ring luxury wearable tech device"},
|
||||
]}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
@@ -259,12 +155,7 @@ export default function HomePage() {
|
||||
tagAnimation="slide-up"
|
||||
names={["Nike", "Chanel", "Dyson", "Apple", "Sephora", "Zara", "Calvin Klein", "Tom Ford"]}
|
||||
logos={[
|
||||
"http://img.b2bpic.net/free-photo/close-up-football-player-feet-with-ball_23-2147833471.jpg",
|
||||
"http://img.b2bpic.net/free-vector/elegant-capital-letters-logos-with-ornamental-circles_23-2147558070.jpg",
|
||||
"http://img.b2bpic.net/free-vector/gradient-as-logo-template_23-2151182569.jpg",
|
||||
"http://img.b2bpic.net/free-vector/flat-abstract-business-card-template_23-2148206284.jpg",
|
||||
"http://img.b2bpic.net/free-vector/luxury-logos-wedding-monograms-collection-design_1017-25869.jpg",
|
||||
]}
|
||||
"http://img.b2bpic.net/free-photo/close-up-football-player-feet-with-ball_23-2147833471.jpg", "http://img.b2bpic.net/free-vector/elegant-capital-letters-logos-with-ornamental-circles_23-2147558070.jpg", "http://img.b2bpic.net/free-vector/gradient-as-logo-template_23-2151182569.jpg", "http://img.b2bpic.net/free-vector/flat-abstract-business-card-template_23-2148206284.jpg", "http://img.b2bpic.net/free-vector/luxury-logos-wedding-monograms-collection-design_1017-25869.jpg"]}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
speed={40}
|
||||
@@ -282,59 +173,17 @@ export default function HomePage() {
|
||||
tagAnimation="slide-up"
|
||||
testimonials={[
|
||||
{
|
||||
id: "test-1",
|
||||
title: "Elevated My Daily Routine",
|
||||
quote: "Luminance has transformed how I approach luxury shopping. The curation is impeccable, and every piece feels carefully selected. I've never felt more confident in my purchases.",
|
||||
name: "Sarah Mitchell",
|
||||
role: "Fashion Enthusiast",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/female-model-fall-winter-collection-outfits-listening-attentively_114579-17837.jpg",
|
||||
imageAlt: "Sarah Mitchell testimonial",
|
||||
},
|
||||
id: "test-1", title: "Elevated My Daily Routine", quote: "Luminance has transformed how I approach luxury shopping. The curation is impeccable, and every piece feels carefully selected. I've never felt more confident in my purchases.", name: "Sarah Mitchell", role: "Fashion Enthusiast", imageSrc: "http://img.b2bpic.net/free-photo/female-model-fall-winter-collection-outfits-listening-attentively_114579-17837.jpg", imageAlt: "professional portrait headshot woman"},
|
||||
{
|
||||
id: "test-2",
|
||||
title: "Premium Quality, Premium Service",
|
||||
quote: "The attention to detail is extraordinary. From packaging to customer support, Luminance treats every interaction as an opportunity to exceed expectations. This is luxury redefined.",
|
||||
name: "Michael Chen",
|
||||
role: "Tech Executive",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-stylish-sensual-male-with-hairstyle-casual-suit_613910-11078.jpg?_wi=1",
|
||||
imageAlt: "Michael Chen testimonial",
|
||||
},
|
||||
id: "test-2", title: "Premium Quality, Premium Service", quote: "The attention to detail is extraordinary. From packaging to customer support, Luminance treats every interaction as an opportunity to exceed expectations. This is luxury redefined.", name: "Michael Chen", role: "Tech Executive", imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-stylish-sensual-male-with-hairstyle-casual-suit_613910-11078.jpg", imageAlt: "professional portrait headshot man"},
|
||||
{
|
||||
id: "test-3",
|
||||
title: "Finally, A Curated Luxury Experience",
|
||||
quote: "No more endless scrolling through mediocrity. Luminance curates only the best. Their beauty section alone has saved me hundreds by helping me find products that truly work.",
|
||||
name: "Emily Rodriguez",
|
||||
role: "Beauty Influencer",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/successful-senior-businesswoman-eyeglasses_1262-5856.jpg",
|
||||
imageAlt: "Emily Rodriguez testimonial",
|
||||
},
|
||||
id: "test-3", title: "Finally, A Curated Luxury Experience", quote: "No more endless scrolling through mediocrity. Luminance curates only the best. Their beauty section alone has saved me hundreds by helping me find products that truly work.", name: "Emily Rodriguez", role: "Beauty Influencer", imageSrc: "http://img.b2bpic.net/free-photo/successful-senior-businesswoman-eyeglasses_1262-5856.jpg", imageAlt: "professional woman headshot portrait"},
|
||||
{
|
||||
id: "test-4",
|
||||
title: "Luxury That's Actually Accessible",
|
||||
quote: "I expected Luminance to be out of reach, but their range of price points is refreshing. Premium doesn't have to mean unaffordable. Highly recommend to anyone seeking quality.",
|
||||
name: "David Park",
|
||||
role: "Entrepreneur",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-making-photo-with-old-camera_1187-2654.jpg",
|
||||
imageAlt: "David Park testimonial",
|
||||
},
|
||||
id: "test-4", title: "Luxury That's Actually Accessible", quote: "I expected Luminance to be out of reach, but their range of price points is refreshing. Premium doesn't have to mean unaffordable. Highly recommend to anyone seeking quality.", name: "David Park", role: "Entrepreneur", imageSrc: "http://img.b2bpic.net/free-photo/man-making-photo-with-old-camera_1187-2654.jpg", imageAlt: "professional man portrait headshot"},
|
||||
{
|
||||
id: "test-5",
|
||||
title: "The Go-To For Tech Lovers",
|
||||
quote: "Their tech section is a game-changer. Finally a luxury retailer that understands gadgets. The smart mirror is incredible, and customer support helped me choose the perfect setup.",
|
||||
name: "Jessica Wong",
|
||||
role: "Tech Journalist",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-stylish-pretty-young-woman-look-professional-cross-hands-chest-smiling-confident-camera-wear-glasses-standing-near-reception-office-hall-discuss-business_197531-22165.jpg?_wi=1",
|
||||
imageAlt: "Jessica Wong testimonial",
|
||||
},
|
||||
id: "test-5", title: "The Go-To For Tech Lovers", quote: "Their tech section is a game-changer. Finally a luxury retailer that understands gadgets. The smart mirror is incredible, and customer support helped me choose the perfect setup.", name: "Jessica Wong", role: "Tech Journalist", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-stylish-pretty-young-woman-look-professional-cross-hands-chest-smiling-confident-camera-wear-glasses-standing-near-reception-office-hall-discuss-business_197531-22165.jpg", imageAlt: "diverse professional woman portrait"},
|
||||
{
|
||||
id: "test-6",
|
||||
title: "Luminance Is My New Standard",
|
||||
quote: "Once you shop at Luminance, everything else feels mediocre. The experience, the products, the packaging—it all radiates quality. This is how luxury retail should be.",
|
||||
name: "Alexander Hayes",
|
||||
role: "Luxury Consultant",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-fashionable-well-dressed-man-with-beard-posing-outdoors_1328-3269.jpg?_wi=1",
|
||||
imageAlt: "Alexander Hayes testimonial",
|
||||
},
|
||||
id: "test-6", title: "Luminance Is My New Standard", quote: "Once you shop at Luminance, everything else feels mediocre. The experience, the products, the packaging—it all radiates quality. This is how luxury retail should be.", name: "Alexander Hayes", role: "Luxury Consultant", imageSrc: "http://img.b2bpic.net/free-photo/portrait-fashionable-well-dressed-man-with-beard-posing-outdoors_1328-3269.jpg", imageAlt: "diverse professional man portrait"},
|
||||
]}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
@@ -351,8 +200,8 @@ export default function HomePage() {
|
||||
description="Subscribe to our exclusive newsletter and receive early access to new collections, VIP styling tips, and curated luxury recommendations."
|
||||
background={{ variant: "radial-gradient" }}
|
||||
useInvertedBackground={false}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/bouquet-tulips-coffee-candles-book-bed-top-view_169016-35409.jpg?_wi=1"
|
||||
imageAlt="Luxury lifestyle flat lay aesthetic"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/bouquet-tulips-coffee-candles-book-bed-top-view_169016-35409.jpg"
|
||||
imageAlt="luxury lifestyle flat lay products white"
|
||||
mediaAnimation="slide-up"
|
||||
mediaPosition="right"
|
||||
inputPlaceholder="your@email.com"
|
||||
@@ -366,10 +215,43 @@ export default function HomePage() {
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Luminance"
|
||||
columns={footerColumns}
|
||||
columns={[
|
||||
{
|
||||
title: "Shop", items: [
|
||||
{ label: "All Products", href: "/shop" },
|
||||
{ label: "Clothing", href: "/clothing" },
|
||||
{ label: "Beauty", href: "/beauty" },
|
||||
{ label: "Tech & Gadgets", href: "/tech" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Blog", href: "/blog" },
|
||||
{ label: "Careers", href: "#" },
|
||||
{ label: "Press", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "Contact Us", href: "/contact" },
|
||||
{ label: "FAQ", href: "#" },
|
||||
{ label: "Shipping Info", href: "#" },
|
||||
{ label: "Returns", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Accessibility", href: "#" },
|
||||
{ label: "Cookie Settings", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2025 Luminance. All rights reserved. Crafted with radiance and elegance."
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,51 +1,49 @@
|
||||
"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;
|
||||
fontSize?: number;
|
||||
fontWeight?: number | string;
|
||||
letterSpacing?: number;
|
||||
fill?: string;
|
||||
textAnchor?: 'start' | 'middle' | 'end';
|
||||
dominantBaseline?: 'auto' | 'middle' | 'hanging';
|
||||
}
|
||||
|
||||
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,
|
||||
className = '',
|
||||
fontSize = 48,
|
||||
fontWeight = 700,
|
||||
letterSpacing = 0,
|
||||
fill = 'currentColor',
|
||||
textAnchor = 'middle',
|
||||
dominantBaseline = 'middle',
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
ref={svgRef}
|
||||
viewBox={viewBox}
|
||||
className={cls("w-full", className)}
|
||||
style={{ aspectRatio: aspectRatio }}
|
||||
preserveAspectRatio="none"
|
||||
viewBox="0 0 1000 200"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={className}
|
||||
role="img"
|
||||
aria-label={`${logoText} logo`}
|
||||
aria-label={text}
|
||||
>
|
||||
<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="500"
|
||||
y="100"
|
||||
fontSize={fontSize}
|
||||
fontWeight={fontWeight}
|
||||
letterSpacing={letterSpacing}
|
||||
fill={fill}
|
||||
textAnchor={textAnchor}
|
||||
dominantBaseline={dominantBaseline}
|
||||
fontFamily="system-ui, -apple-system, sans-serif"
|
||||
>
|
||||
{logoText}
|
||||
{text}
|
||||
</text>
|
||||
</svg>
|
||||
);
|
||||
});
|
||||
|
||||
SvgTextLogo.displayName = "SvgTextLogo";
|
||||
};
|
||||
|
||||
export default SvgTextLogo;
|
||||
|
||||
Reference in New Issue
Block a user