280 lines
16 KiB
TypeScript
280 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import Link from "next/link";
|
|
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
|
|
import HeroSplitDualMedia from "@/components/sections/hero/HeroSplitDualMedia";
|
|
import ProductCardFour from "@/components/sections/product/ProductCardFour";
|
|
import TestimonialAboutCard from "@/components/sections/about/TestimonialAboutCard";
|
|
import FeatureHoverPattern from "@/components/sections/feature/featureHoverPattern/FeatureHoverPattern";
|
|
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
|
|
import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
|
|
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
|
|
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
|
import FooterBase from "@/components/sections/footer/FooterBase";
|
|
import { Sparkles, Package, Award, Star, Zap, Camera, Palette, Lightbulb, Shield, Mail, TrendingUp } from "lucide-react";
|
|
|
|
export default function HomePage() {
|
|
const navItems = [
|
|
{ name: "Home", id: "home" },
|
|
{ name: "Products", id: "products" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Gallery", id: "gallery" },
|
|
{ name: "Contact", id: "contact" },
|
|
];
|
|
|
|
const footerColumns = [
|
|
{
|
|
title: "Product", items: [
|
|
{ label: "Services", href: "/products" },
|
|
{ label: "Portfolio", href: "/gallery" },
|
|
{ label: "Pricing", href: "#" },
|
|
{ label: "Testimonials", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "/about" },
|
|
{ label: "Blog", href: "#" },
|
|
{ label: "Careers", href: "#" },
|
|
{ label: "Press", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "Support", items: [
|
|
{ label: "Contact", href: "/contact" },
|
|
{ label: "FAQ", href: "#" },
|
|
{ label: "Documentation", href: "#" },
|
|
{ label: "Privacy Policy", href: "#" },
|
|
],
|
|
},
|
|
];
|
|
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="shift-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="soft"
|
|
contentWidth="compact"
|
|
sizing="largeSmallSizeLargeTitles"
|
|
background="fluid"
|
|
cardStyle="inset"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
navItems={navItems}
|
|
button={{ text: "Shop Now", href: "/products" }}
|
|
brandName="Luxe Studio"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDualMedia
|
|
background={{ variant: "plain" }}
|
|
tag="Premium 3D Renders"
|
|
tagIcon={Sparkles}
|
|
title="Luxury Products Elevated"
|
|
description="Experience hyper-realistic 3D product renders with cinematic studio lighting. Each piece meticulously crafted with ultra-detailed textures, perfect reflections, and dramatic shadows for commercial photography-grade e-commerce imagery."
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARawWeCmXnBIZlDDpbh1gsYWj7/ultra-realistic-3d-product-render-featur-1772558351234-ce0cde87.png", imageAlt: "Premium 3D product render on luxury pedestal"},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARawWeCmXnBIZlDDpbh1gsYWj7/hyper-detailed-3d-luxury-handbag-render--1772558351189-895ef502.png?_wi=1", imageAlt: "Luxury handbag 3D render"},
|
|
]}
|
|
rating={5}
|
|
ratingText="Trusted by Premium Brands"
|
|
buttons={[
|
|
{ text: "Browse Collection", href: "/products" },
|
|
{ text: "Request Custom Render", href: "/contact" },
|
|
]}
|
|
buttonAnimation="blur-reveal"
|
|
mediaAnimation="slide-up"
|
|
tagAnimation="opacity"
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardFour
|
|
products={[
|
|
{
|
|
id: "1", name: "Artisan Leather Handbag", price: "$2,850", variant: "Premium Cognac • Hand-Stitched", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARawWeCmXnBIZlDDpbh1gsYWj7/hyper-detailed-3d-luxury-handbag-render--1772558351189-895ef502.png?_wi=2", imageAlt: "Luxury handbag", isFavorited: false,
|
|
},
|
|
{
|
|
id: "2", name: "Precision Smart Watch", price: "$1,950", variant: "Titanium • Sapphire Crystal", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARawWeCmXnBIZlDDpbh1gsYWj7/premium-smart-watch-3d-render-on-minimal-1772558350948-fca14d69.png?_wi=1", imageAlt: "Luxury smartwatch", isFavorited: false,
|
|
},
|
|
{
|
|
id: "3", name: "Performance Athletic Sneaker", price: "$1,245", variant: "Carbon Black • Limited Edition", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARawWeCmXnBIZlDDpbh1gsYWj7/ultra-realistic-3d-sneaker-render-elevat-1772558352788-39ba5158.png?_wi=1", imageAlt: "Premium sneaker", isFavorited: false,
|
|
},
|
|
{
|
|
id: "4", name: "Essence Luxury Fragrance", price: "$385", variant: "100ml • Crystal Bottle", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARawWeCmXnBIZlDDpbh1gsYWj7/luxury-fragrance-bottle-3d-render-on-gla-1772558352532-9bc0e752.png", imageAlt: "Premium perfume", isFavorited: false,
|
|
},
|
|
{
|
|
id: "5", name: "Studio Reference Headphones", price: "$1,650", variant: "Matte Black • Wireless", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARawWeCmXnBIZlDDpbh1gsYWj7/premium-headphones-3d-render-on-minimali-1772558351041-326cbee0.png", imageAlt: "Luxury headphones", isFavorited: false,
|
|
},
|
|
]}
|
|
title="Featured Collection"
|
|
description="Each product is a masterpiece of 3D rendering excellence. Ultra-realistic textures, cinematic lighting, and premium composition for e-commerce impact."
|
|
tag="Premium Selection"
|
|
tagIcon={Package}
|
|
tagAnimation="opacity"
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TestimonialAboutCard
|
|
tag="Our Philosophy"
|
|
tagIcon={Award}
|
|
title="Where Luxury Meets Technology"
|
|
description="Founded in 2020, Luxe Studio specializes in ultra-realistic 3D product renders for premium brands worldwide."
|
|
subdescription="Trusted by leading luxury retailers and e-commerce platforms"
|
|
icon={Sparkles}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARawWeCmXnBIZlDDpbh1gsYWj7/luxury-brand-studio-setup-showing-premiu-1772558352336-7d1c372d.png"
|
|
imageAlt="Luxury studio workspace"
|
|
mediaAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureHoverPattern
|
|
title="Why Choose Luxe Studio"
|
|
description="Premium 3D rendering with studio-grade lighting and hyper-realistic material textures"
|
|
tag="Excellence"
|
|
tagIcon={Star}
|
|
features={[
|
|
{
|
|
icon: Zap,
|
|
title: "4K Resolution", description:
|
|
"Ultra-HD renders optimized for all e-commerce platforms with exceptional clarity and detail."},
|
|
{
|
|
icon: Sparkles,
|
|
title: "Photorealistic Textures", description:
|
|
"Hyper-detailed material rendering including fabric stitching, metal shine, glass reflections, and matte finishes."},
|
|
{
|
|
icon: Camera,
|
|
title: "Cinematic Lighting", description:
|
|
"Professional studio lighting with soft shadows, dramatic highlights, and realistic depth of field effects."},
|
|
{
|
|
icon: Palette,
|
|
title: "Gradient Backgrounds", description:
|
|
"Premium soft gradient backgrounds in beige, off-white, and pastel tones with floating abstract elements."},
|
|
{
|
|
icon: Lightbulb,
|
|
title: "Abstract Elements", description:
|
|
"Futuristic floating glass spheres, soft particles, and light effects for contemporary visual appeal."},
|
|
{
|
|
icon: Shield,
|
|
title: "E-Commerce Ready", description:
|
|
"Clean composition with strategic white space for text placement. Perfect for homepage banners and product listings."},
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
tagAnimation="opacity"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFifteen
|
|
testimonial="The 3D renders from Luxe Studio completely transformed our e-commerce experience. Our product conversion rates increased by 43% after implementing their hyper-realistic renders. The attention to detail and cinematic lighting is unmatched in the industry."
|
|
rating={5}
|
|
author="Victoria Chen, CEO of Luxe Ventures"
|
|
avatars={[
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARawWeCmXnBIZlDDpbh1gsYWj7/professional-headshot-portrait-of-confid-1772558351331-8c3d54aa.png", alt: "Victoria Chen"},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARawWeCmXnBIZlDDpbh1gsYWj7/professional-headshot-portrait-of-male-e-1772558350643-58964b9f.png", alt: "James Morrison"},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARawWeCmXnBIZlDDpbh1gsYWj7/professional-headshot-portrait-of-female-1772558352898-7981ae3e.png", alt: "Sarah Williams"},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARawWeCmXnBIZlDDpbh1gsYWj7/professional-headshot-portrait-of-male-l-1772558350903-cf7470c7.png", alt: "Marcus Johnson"},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARawWeCmXnBIZlDDpbh1gsYWj7/professional-headshot-portrait-of-female-1772558350617-70bf3b42.png", alt: "Emma Davis"},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARawWeCmXnBIZlDDpbh1gsYWj7/professional-headshot-portrait-of-male-e-1772558353597-98c5e341.png", alt: "Oliver Smith"},
|
|
]}
|
|
ratingAnimation="blur-reveal"
|
|
avatarsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardEleven
|
|
title="Our Impact"
|
|
description="Delivering exceptional results for premium brands globally"
|
|
tag="Results"
|
|
tagIcon={TrendingUp}
|
|
metrics={[
|
|
{
|
|
id: "1", value: "500+", title: "Luxury Brands", description: "Premium retailers trusting our 3D renders", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARawWeCmXnBIZlDDpbh1gsYWj7/hyper-detailed-3d-luxury-handbag-render--1772558351189-895ef502.png?_wi=3", imageAlt: "Premium product collection"},
|
|
{
|
|
id: "2", value: "2.5M+", title: "Renders Delivered", description: "Successfully completed projects worldwide", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARawWeCmXnBIZlDDpbh1gsYWj7/premium-smart-watch-3d-render-on-minimal-1772558350948-fca14d69.png?_wi=2", imageAlt: "3D render showcase"},
|
|
{
|
|
id: "3", value: "43%", title: "Avg. Conversion Increase", description: "Improvement in e-commerce performance", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARawWeCmXnBIZlDDpbh1gsYWj7/ultra-realistic-3d-sneaker-render-elevat-1772558352788-39ba5158.png?_wi=2", imageAlt: "E-commerce success"},
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
tagAnimation="opacity"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitText
|
|
sideTitle="Frequently Asked Questions"
|
|
sideDescription="Everything you need to know about our premium 3D rendering services"
|
|
faqs={[
|
|
{
|
|
id: "1", title: "What is the typical turnaround time for renders?", content: "Most projects are completed within 5-7 business days. Rush orders are available with expedited pricing. Complex projects with extensive customization may require additional time."},
|
|
{
|
|
id: "2", title: "Do you provide unlimited revisions?", content: "Yes, we provide up to 3 rounds of revisions per project at no additional cost. Additional revisions are available at our standard hourly rate."},
|
|
{
|
|
id: "3", title: "What file formats and resolutions do you deliver?", content: "We deliver in 4K (3840x2160), 2K (2560x1440), and Full HD (1920x1080) resolutions. Formats include PNG, JPG, TIFF, and PSD for editing flexibility."},
|
|
{
|
|
id: "4", title: "Can you match our existing brand colors and aesthetics?", content: "Absolutely. We customize every render to match your brand guidelines, including color palettes, lighting preferences, and visual style requirements."},
|
|
{
|
|
id: "5", title: "Do you offer bulk project discounts?", content: "Yes, we provide volume discounts for projects with 10+ renders. Please contact our sales team to discuss your specific requirements and pricing."},
|
|
{
|
|
id: "6", title: "What about licensing and usage rights?", content: "All renders come with full commercial licensing for e-commerce use. Clients retain rights to use renders for marketing, advertising, and online sales without additional fees."},
|
|
]}
|
|
useInvertedBackground={false}
|
|
faqsAnimation="blur-reveal"
|
|
textPosition="left"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
tag="Get Started"
|
|
tagIcon={Mail}
|
|
title="Ready to Transform Your Products?"
|
|
description="Let's create stunning 3D renders that elevate your brand and drive conversions. Contact our team today to discuss your luxury product rendering needs."
|
|
buttons={[
|
|
{ text: "Request a Quote", href: "/contact" },
|
|
{ text: "Schedule Consultation", href: "/contact" },
|
|
]}
|
|
background={{ variant: "plain" }}
|
|
useInvertedBackground={false}
|
|
tagAnimation="opacity"
|
|
buttonAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBase
|
|
columns={footerColumns}
|
|
logoText="Luxe Studio"
|
|
copyrightText="© 2025 Luxe Studio. Premium 3D Product Renders."
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |