Merge version_1 into main #1
442
src/app/page.tsx
442
src/app/page.tsx
@@ -16,320 +16,138 @@ import { Award, Star, Zap } from "lucide-react";
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="rounded"
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "#hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "#about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "#services",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
]}
|
||||
brandName="VISUAL LUXURY"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboard
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="VISUAL LUXURY"
|
||||
description="Redefining visual excellence through refined aesthetics and strategic brand clarity. Where sophistication meets digital presence."
|
||||
buttons={[
|
||||
{
|
||||
text: "Inquire Now",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/young-beautiful-woman-nature-with-camera-close-up_23-2148877544.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/abstract-transparent-prism-shadows_23-2148771774.jpg",
|
||||
alt: "Abstract transparent prism",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/top-view-crockery-with-teapot_23-2148798079.jpg",
|
||||
alt: "Tea ceremony detail",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/assortment-abstract-3d-design-elements_23-2148996836.jpg",
|
||||
alt: "Abstract 3D elements",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/high-angle-shot-female-leaning-white-wall-building-with-black-floor_181624-20509.jpg",
|
||||
alt: "Elegant architectural shot",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/view-beautifully-decorated-round-table-with-natural-fir-branch-candle-two-flutes-plates-against-classic-sofa-modern-apartment_132075-11383.jpg",
|
||||
alt: "Modern interior detail",
|
||||
},
|
||||
]}
|
||||
avatarText="Trusted by visionary leaders"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "PRECISION",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "ELEGANCE",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "CLARITY",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "INNOVATION",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "IDENTITY",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
useInvertedBackground={true}
|
||||
title="Crafting Experiences of Distinction"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTwentyEight
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Brand Identity",
|
||||
subtitle: "Visual Strategy",
|
||||
category: "Service",
|
||||
value: "Defined",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Luxury Content",
|
||||
subtitle: "Digital Asset Creation",
|
||||
category: "Service",
|
||||
value: "Elevated",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Art Direction",
|
||||
subtitle: "Curated Visuals",
|
||||
category: "Service",
|
||||
value: "Sophisticated",
|
||||
},
|
||||
]}
|
||||
title="Our Expertise"
|
||||
description="Tailored visual strategies for discerning brands."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="portfolio" data-section="portfolio">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split-description"
|
||||
gridVariant="asymmetric-60-wide-40-narrow"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Brand Campaign A",
|
||||
price: "Featured",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/marble-podium-product-showcase-with-scenery-background_23-2151774792.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Editorial Design",
|
||||
price: "Featured",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/gold-pedestal-cylinder-luxury-premium-podium-background-3d-illustration-empty-display-scene-presentation-product-placement_56104-1845.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Art Installation",
|
||||
price: "Featured",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-mock-up-podium-product-presentation-abstract-minimal-concept-showcase-geometric-background-product-presentation-can-be-used-commercial-advertising_1258-111054.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Digital Concept",
|
||||
price: "Featured",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/wooden-product-display-podium-with-blurred-nature-leaves-background-generative-ai_91128-2262.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Creative Suite",
|
||||
price: "Featured",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/set-quail-eggs-napkin-near-feathers-can_23-2148073847.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Luxury Lookbook",
|
||||
price: "Featured",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/d-rendering-black-background-product-podium-stand-studio_1258-112108.jpg",
|
||||
},
|
||||
]}
|
||||
title="Selected Works"
|
||||
description="A showcase of our commitment to visual luxury."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
icon: Award,
|
||||
title: "Projects Completed",
|
||||
value: "150+",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
icon: Star,
|
||||
title: "Happy Partners",
|
||||
value: "100%",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
icon: Zap,
|
||||
title: "Global Reach",
|
||||
value: "20+",
|
||||
},
|
||||
]}
|
||||
title="Impact by Numbers"
|
||||
description="Tangible growth through visual strategy."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
title: "Visionary Results",
|
||||
quote: "Visual Luxury transformed our brand identity completely.",
|
||||
name: "Client A",
|
||||
role: "CEO",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/elderly-businesswoman-coat-sitting-outside-cafe-reading-magazine_1303-19470.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
title: "Sophisticated Approach",
|
||||
quote: "Their attention to aesthetic detail is unmatched.",
|
||||
name: "Client B",
|
||||
role: "Founder",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-businessman-jumping-celebrating-success_1262-5990.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
title: "Global Standard",
|
||||
quote: "The best creative partnership we have experienced.",
|
||||
name: "Client C",
|
||||
role: "Director",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/business-lady-looking-copyspace-with-interest_1262-2957.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
title: "Highly Recommended",
|
||||
quote: "Exceptional communication and brilliant execution.",
|
||||
name: "Client D",
|
||||
role: "Manager",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-man-choosing-hat-shop_1303-19834.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
title: "A True Partner",
|
||||
quote: "They understand the nuance of luxury.",
|
||||
name: "Client E",
|
||||
role: "Creative Lead",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-couple-holding-each-other-s-hand_23-2147891266.jpg",
|
||||
},
|
||||
]}
|
||||
title="Client Perspectives"
|
||||
description="Testimonials from our satisfied partners."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Inquiries"
|
||||
title="Ready to redefine your presence?"
|
||||
description="Start a conversation with our studio today."
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact Us",
|
||||
href: "mailto:inquiries@visualluxury.com",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Careers",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
bottomLeftText="© 2024 Visual Luxury"
|
||||
bottomRightText="Crafted with excellence"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="VISUAL LUXURY"
|
||||
navItems={[
|
||||
{ name: "Home", id: "#hero" },
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Services", id: "#services" },
|
||||
{ name: "Contact", id: "#contact" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboard
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="VISUAL LUXURY"
|
||||
description="Redefining visual excellence through refined aesthetics and strategic brand clarity. Where sophistication meets digital presence."
|
||||
buttons={[{ text: "Inquire Now", href: "#contact" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/young-beautiful-woman-nature-with-camera-close-up_23-2148877544.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/abstract-transparent-prism-shadows_23-2148771774.jpg", alt: "Abstract transparent prism" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/top-view-crockery-with-teapot_23-2148798079.jpg", alt: "Tea ceremony detail" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/assortment-abstract-3d-design-elements_23-2148996836.jpg", alt: "Abstract 3D elements" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/high-angle-shot-female-leaning-white-wall-building-with-black-floor_181624-20509.jpg", alt: "Elegant architectural shot" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/view-beautifully-decorated-round-table-with-natural-fir-branch-candle-two-flutes-plates-against-classic-sofa-modern-apartment_132075-11383.jpg", alt: "Modern interior detail" }
|
||||
]}
|
||||
avatarText="Trusted by visionary leaders"
|
||||
marqueeItems={[
|
||||
{ type: "text", text: "PRECISION" },
|
||||
{ type: "text", text: "ELEGANCE" },
|
||||
{ type: "text", text: "CLARITY" },
|
||||
{ type: "text", text: "INNOVATION" },
|
||||
{ type: "text", text: "IDENTITY" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout useInvertedBackground={true} title="Crafting Experiences of Distinction" />
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTwentyEight
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ id: "f1", title: "Brand Identity", subtitle: "Visual Strategy", category: "Service", value: "Defined" },
|
||||
{ id: "f2", title: "Luxury Content", subtitle: "Digital Asset Creation", category: "Service", value: "Elevated" },
|
||||
{ id: "f3", title: "Art Direction", subtitle: "Curated Visuals", category: "Service", value: "Sophisticated" }
|
||||
]}
|
||||
title="Our Expertise"
|
||||
description="Tailored visual strategies for discerning brands."
|
||||
/>
|
||||
</div>
|
||||
<div id="portfolio" data-section="portfolio">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split-description"
|
||||
gridVariant="asymmetric-60-wide-40-narrow"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{ id: "p1", name: "Brand Campaign A", price: "Featured", imageSrc: "http://img.b2bpic.net/free-photo/marble-podium-product-showcase-with-scenery-background_23-2151774792.jpg" },
|
||||
{ id: "p2", name: "Editorial Design", price: "Featured", imageSrc: "http://img.b2bpic.net/free-photo/gold-pedestal-cylinder-luxury-premium-podium-background-3d-illustration-empty-display-scene-presentation-product-placement_56104-1845.jpg" },
|
||||
{ id: "p3", name: "Art Installation", price: "Featured", imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-mock-up-podium-product-presentation-abstract-minimal-concept-showcase-geometric-background-product-presentation-can-be-used-commercial-advertising_1258-111054.jpg" },
|
||||
{ id: "p4", name: "Digital Concept", price: "Featured", imageSrc: "http://img.b2bpic.net/free-photo/wooden-product-display-podium-with-blurred-nature-leaves-background-generative-ai_91128-2262.jpg" },
|
||||
{ id: "p5", name: "Creative Suite", price: "Featured", imageSrc: "http://img.b2bpic.net/free-photo/set-quail-eggs-napkin-near-feathers-can_23-2148073847.jpg" },
|
||||
{ id: "p6", name: "Luxury Lookbook", price: "Featured", imageSrc: "http://img.b2bpic.net/free-photo/d-rendering-black-background-product-podium-stand-studio_1258-112108.jpg" }
|
||||
]}
|
||||
title="Selected Works"
|
||||
description="A showcase of our commitment to visual luxury."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", icon: Award, title: "Projects Completed", value: "150+" },
|
||||
{ id: "m2", icon: Star, title: "Happy Partners", value: "100%" },
|
||||
{ id: "m3", icon: Zap, title: "Global Reach", value: "20+" }
|
||||
]}
|
||||
title="Impact by Numbers"
|
||||
description="Tangible growth through visual strategy."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "t1", title: "Visionary Results", quote: "Visual Luxury transformed our brand identity completely.", name: "Client A", role: "CEO", imageSrc: "http://img.b2bpic.net/free-photo/elderly-businesswoman-coat-sitting-outside-cafe-reading-magazine_1303-19470.jpg" },
|
||||
{ id: "t2", title: "Sophisticated Approach", quote: "Their attention to aesthetic detail is unmatched.", name: "Client B", role: "Founder", imageSrc: "http://img.b2bpic.net/free-photo/cheerful-businessman-jumping-celebrating-success_1262-5990.jpg" },
|
||||
{ id: "t3", title: "Global Standard", quote: "The best creative partnership we have experienced.", name: "Client C", role: "Director", imageSrc: "http://img.b2bpic.net/free-photo/business-lady-looking-copyspace-with-interest_1262-2957.jpg" },
|
||||
{ id: "t4", title: "Highly Recommended", quote: "Exceptional communication and brilliant execution.", name: "Client D", role: "Manager", imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-man-choosing-hat-shop_1303-19834.jpg" },
|
||||
{ id: "t5", title: "A True Partner", quote: "They understand the nuance of luxury.", name: "Client E", role: "Creative Lead", imageSrc: "http://img.b2bpic.net/free-photo/happy-couple-holding-each-other-s-hand_23-2147891266.jpg" }
|
||||
]}
|
||||
title="Client Perspectives"
|
||||
description="Testimonials from our satisfied partners."
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Inquiries"
|
||||
title="Ready to redefine your presence?"
|
||||
description="Start a conversation with our studio today."
|
||||
buttons={[{ text: "Contact Us", href: "mailto:inquiries@visualluxury.com" }]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{ title: "Company", items: [{ label: "About", href: "#about" }, { label: "Careers", href: "#" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] }
|
||||
]}
|
||||
bottomLeftText="© 2024 Visual Luxury"
|
||||
bottomRightText="Crafted with excellence"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user