Merge version_1 into main #3

Merged
bender merged 3 commits from version_1 into main 2026-03-12 05:39:59 +00:00
3 changed files with 102 additions and 222 deletions

View File

@@ -152,4 +152,4 @@ export default function ClothingPage() {
</div>
</ThemeProvider>
);
}
}

View File

@@ -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>
);
}
}

View File

@@ -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;