233 lines
12 KiB
TypeScript
233 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
|
import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
|
|
import ProductCardFour from "@/components/sections/product/ProductCardFour";
|
|
import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
|
|
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
|
|
import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
|
|
import FaqBase from "@/components/sections/faq/FaqBase";
|
|
import FooterBase from "@/components/sections/footer/FooterBase";
|
|
import { Sparkles, Package, Lightbulb, HelpCircle, Star } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="directional-hover"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="mediumSmall"
|
|
sizing="largeSmall"
|
|
background="blurBottom"
|
|
cardStyle="soft-shadow"
|
|
primaryButtonStyle="primary-glow"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
brandName="LumaLamp"
|
|
navItems={[
|
|
{ name: "Home", id: "home" },
|
|
{ name: "Products", id: "products" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Request", id: "request" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
bottomLeftText="Premium Light Solutions"
|
|
bottomRightText="hello@lumalamp.com"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitKpi
|
|
title="Illuminate Your Space with Futuristic Design"
|
|
description="Discover premium light lamps crafted with cutting-edge technology and timeless elegance. Transform any room with our carefully curated collection of innovative lighting solutions."
|
|
background={{ variant: "glowing-orb" }}
|
|
kpis={[
|
|
{ value: "500+", label: "Designs Available" },
|
|
{ value: "99.8%", label: "Customer Satisfaction" },
|
|
{ value: "24hr", label: "Custom Delivery" }
|
|
]}
|
|
enableKpiAnimation={true}
|
|
tag="Premium Collection"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "Explore Products", href: "#products" },
|
|
{ text: "Request Custom", href: "#request" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
imageSrc="http://img.b2bpic.net/free-photo/modern-photorealistic-lamp-design_23-2151038994.jpg"
|
|
imageAlt="Premium light lamp showcase"
|
|
mediaAnimation="slide-up"
|
|
imagePosition="right"
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardFour
|
|
title="Featured Light Lamps"
|
|
description="Explore our collection of hand-selected premium lamps. Each product features customizable options with detailed pricing and availability."
|
|
tag="New Arrivals"
|
|
tagIcon={Package}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
products={[
|
|
{
|
|
id: "lamp-1", name: "Aurora Pendant Light", price: "$249", variant: "Brushed Gold · 3 Finishes", imageSrc: "http://img.b2bpic.net/free-photo/lamp_23-2148098570.jpg", imageAlt: "Aurora Pendant Light"
|
|
},
|
|
{
|
|
id: "lamp-2", name: "Zenith Table Lamp", price: "$189", variant: "Matte Black · 2 Colors", imageSrc: "http://img.b2bpic.net/free-photo/white-table-lamp-green-background-copy-space_169016-29397.jpg", imageAlt: "Zenith Table Lamp"
|
|
},
|
|
{
|
|
id: "lamp-3", name: "Stellar Floor Lamp", price: "$329", variant: "Walnut Base · Dimmable", imageSrc: "http://img.b2bpic.net/free-photo/top-reading-lamp_1339-7241.jpg", imageAlt: "Stellar Floor Lamp"
|
|
},
|
|
{
|
|
id: "lamp-4", name: "Nova Wall Sconce", price: "$169", variant: "Copper · Adjustable", imageSrc: "http://img.b2bpic.net/free-photo/vintage-lighting-decoration-with-plant-cement-wall_1232-4329.jpg", imageAlt: "Nova Wall Sconce"
|
|
}
|
|
]}
|
|
buttons={[
|
|
{ text: "View All Products", href: "#products" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MetricSplitMediaAbout
|
|
tag="Our Story"
|
|
tagIcon={Lightbulb}
|
|
tagAnimation="slide-up"
|
|
title="Crafting Light. Creating Experiences."
|
|
description="Since 2015, LumaLamp has been dedicated to revolutionizing how we experience light in our spaces. We combine innovative design with sustainable materials to create lamps that not only illuminate but inspire. Each lamp is customizable, allowing you to add personal images, adjust pricing, and request bespoke designs tailored to your unique vision."
|
|
metrics={[
|
|
{ value: "10K+", title: "Happy Customers Worldwide" },
|
|
{ value: "500+", title: "Custom Designs Created" }
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/craftswoman-working-workshop_107420-65198.jpg"
|
|
imageAlt="LumaLamp design workshop"
|
|
mediaAnimation="slide-up"
|
|
metricsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="request" data-section="request">
|
|
<ContactSplitForm
|
|
title="Request Your Perfect Lamp"
|
|
description="Can't find exactly what you're looking for? Submit your custom request with product details, pricing preferences, and images. Our team will craft your ideal lamp design."
|
|
inputs={[
|
|
{ name: "productName", type: "text", placeholder: "Lamp Name / Title", required: true },
|
|
{ name: "email", type: "email", placeholder: "Your Email", required: true },
|
|
{ name: "price", type: "text", placeholder: "Desired Price Point", required: true },
|
|
{ name: "specifications", type: "text", placeholder: "Lamp Type, Color, Size, Style", required: true }
|
|
]}
|
|
textarea={{ name: "description", placeholder: "Describe your vision. Include any special requirements, images, or design preferences...", rows: 6, required: true }}
|
|
imageSrc="http://img.b2bpic.net/free-photo/nobody-office-desk-with-charts-documents-laptop-used-by-company-employee-plan-financial-growth-empty-business-workplace-with-computers-technology-marketing-statistics-screen_482257-40954.jpg"
|
|
imageAlt="Custom lamp design studio"
|
|
mediaAnimation="slide-up"
|
|
mediaPosition="right"
|
|
useInvertedBackground={false}
|
|
buttonText="Submit Request"
|
|
/>
|
|
</div>
|
|
|
|
<div id="socialProof" data-section="socialProof">
|
|
<TestimonialCardTwelve
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Johnson", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageAlt: "Sarah Johnson"
|
|
},
|
|
{
|
|
id: "2", name: "Michael Chen", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageAlt: "Michael Chen"
|
|
},
|
|
{
|
|
id: "3", name: "Emma Rodriguez", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageAlt: "Emma Rodriguez"
|
|
},
|
|
{
|
|
id: "4", name: "James Wilson", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageAlt: "James Wilson"
|
|
}
|
|
]}
|
|
cardTitle="Over 10,000 customers trust LumaLamp to brighten their homes with premium, customizable lighting"
|
|
cardTag="Trusted by Design Enthusiasts"
|
|
cardTagIcon={Star}
|
|
cardAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
title="Frequently Asked Questions"
|
|
description="Find answers to common questions about our products, customization options, and ordering process."
|
|
tag="Support"
|
|
tagIcon={HelpCircle}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqsAnimation="slide-up"
|
|
animationType="smooth"
|
|
faqs={[
|
|
{
|
|
id: "1", title: "Can I add custom images to my lamp?", content: "Yes! All our lamps support custom image uploads. You can add photos, artwork, or designs during the customization process. Our team will ensure high-quality printing on your chosen lamp base."
|
|
},
|
|
{
|
|
id: "2", title: "How do I adjust pricing for custom orders?", content: "Custom pricing is flexible based on specifications, materials, and complexity. Submit your request through our custom form, and our team will provide a detailed quote tailored to your exact requirements."
|
|
},
|
|
{
|
|
id: "3", title: "What is the typical delivery time for custom lamps?", content: "Standard orders ship within 5-7 business days. Custom lamps typically take 10-14 days. Rush delivery (24-48 hours) is available for orders submitted before 2 PM EST."
|
|
},
|
|
{
|
|
id: "4", title: "Do you offer bulk ordering or wholesale?", content: "Absolutely! We offer special pricing for bulk orders and wholesale partnerships. Contact our sales team at sales@lumalamp.com for volume discounts and corporate solutions."
|
|
},
|
|
{
|
|
id: "5", title: "What warranty do your lamps include?", content: "All LumaLamp products come with a 2-year manufacturer's warranty covering defects in materials and craftsmanship. Extended warranties are available for premium protection."
|
|
},
|
|
{
|
|
id: "6", title: "Can I edit product details after purchase?", content: "Orders can be modified within 24 hours of purchase. After that window, our customer service team can assist with updates. Contact us at support@lumalamp.com with your order details."
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBase
|
|
logoText="LumaLamp"
|
|
copyrightText="© 2025 LumaLamp. All rights reserved."
|
|
columns={[
|
|
{
|
|
title: "Products", items: [
|
|
{ label: "All Lamps", href: "#products" },
|
|
{ label: "Custom Designs", href: "#request" },
|
|
{ label: "Bulk Orders", href: "#contact" },
|
|
{ label: "Gift Cards", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Support", items: [
|
|
{ label: "Help Center", href: "#faq" },
|
|
{ label: "Contact Us", href: "#contact" },
|
|
{ label: "Shipping Info", href: "#" },
|
|
{ label: "Returns", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "#about" },
|
|
{ label: "Blog", href: "#" },
|
|
{ label: "Careers", href: "#" },
|
|
{ label: "Press", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|