Merge version_1 into main #2
432
src/app/page.tsx
432
src/app/page.tsx
@@ -28,317 +28,143 @@ export default function LandingPage() {
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "home",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Works",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="3D Interactive"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Works", id: "features" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="3D Interactive"
|
||||
button={{ text: "Get Started", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="home" data-section="home">
|
||||
<HeroBillboardTestimonial
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "canvas-reveal",
|
||||
}}
|
||||
title="Crafting Interactive 3D Realities"
|
||||
description="Experience digital design like never before with high-performance 3D elements and fluid interactive motion."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Sarah J.",
|
||||
handle: "@sarahj",
|
||||
testimonial: "The 3D interactions on this site are incredibly smooth and responsive.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/crystal-ball-still-life_52683-115506.jpg?_wi=1",
|
||||
imageAlt: "3d abstract sculpture dark background",
|
||||
},
|
||||
{
|
||||
name: "Marc L.",
|
||||
handle: "@mlux",
|
||||
testimonial: "A masterclass in minimalist design with high-impact digital art.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/red-violet-ribbons-background-illustration-background-stage-as-template-your-showcase_211682-205.jpg?_wi=1",
|
||||
imageAlt: "3d abstract sculpture dark background",
|
||||
},
|
||||
{
|
||||
name: "Elena K.",
|
||||
handle: "@elenak",
|
||||
testimonial: "Everything feels so premium and well-integrated. Truly impressive.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-creative-sphere_23-2150885397.jpg?_wi=1",
|
||||
imageAlt: "3d abstract sculpture dark background",
|
||||
},
|
||||
{
|
||||
name: "Tom B.",
|
||||
handle: "@tomb",
|
||||
testimonial: "Interactive design that doesn't sacrifice performance. Amazing work.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-abstract-metallic-cube_23-2150979678.jpg?_wi=1",
|
||||
imageAlt: "3d abstract sculpture dark background",
|
||||
},
|
||||
{
|
||||
name: "Chloe M.",
|
||||
handle: "@cmart",
|
||||
testimonial: "I love how the elements react to my movement. Totally immersive.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/swirling-glass-liquid-abstract-art_23-2151991181.jpg?_wi=1",
|
||||
imageAlt: "3d abstract sculpture dark background",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/crystal-ball-still-life_52683-115506.jpg?_wi=2"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/side-view-beautiful-woman-posing_23-2149735827.jpg",
|
||||
alt: "Creative Lead portrait",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/medium-shot-young-man-posing-studio_23-2149417568.jpg",
|
||||
alt: "Developer portrait",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-handsome-man-orange-background_23-2149020028.jpg",
|
||||
alt: "Manager portrait",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/side-view-woman-shooting-with-projector_23-2149424926.jpg",
|
||||
alt: "Designer portrait",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/elegant-businessman-black-white_1098-2651.jpg",
|
||||
alt: "Founder portrait",
|
||||
},
|
||||
]}
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "High Performance",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Interactive 3D",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Minimalist Design",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Fluid Motion",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Modern Web",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="home" data-section="home">
|
||||
<HeroBillboardTestimonial
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "canvas-reveal" }}
|
||||
title="Crafting Interactive 3D Realities"
|
||||
description="Experience digital design like never before with high-performance 3D elements and fluid interactive motion."
|
||||
testimonials={[
|
||||
{ name: "Sarah J.", handle: "@sarahj", testimonial: "The 3D interactions on this site are incredibly smooth and responsive.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/crystal-ball-still-life_52683-115506.jpg", imageAlt: "3d abstract sculpture dark background" },
|
||||
{ name: "Marc L.", handle: "@mlux", testimonial: "A masterclass in minimalist design with high-impact digital art.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/red-violet-ribbons-background-illustration-background-stage-as-template-your-showcase_211682-205.jpg", imageAlt: "3d abstract sculpture dark background" },
|
||||
{ name: "Elena K.", handle: "@elenak", testimonial: "Everything feels so premium and well-integrated. Truly impressive.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-creative-sphere_23-2150885397.jpg", imageAlt: "3d abstract sculpture dark background" },
|
||||
{ name: "Tom B.", handle: "@tomb", testimonial: "Interactive design that doesn't sacrifice performance. Amazing work.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-abstract-metallic-cube_23-2150979678.jpg", imageAlt: "3d abstract sculpture dark background" },
|
||||
{ name: "Chloe M.", handle: "@cmart", testimonial: "I love how the elements react to my movement. Totally immersive.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/swirling-glass-liquid-abstract-art_23-2151991181.jpg", imageAlt: "3d abstract sculpture dark background" }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/crystal-ball-still-life_52683-115506.jpg"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/side-view-beautiful-woman-posing_23-2149735827.jpg", alt: "Creative Lead portrait" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/medium-shot-young-man-posing-studio_23-2149417568.jpg", alt: "Developer portrait" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/portrait-handsome-man-orange-background_23-2149020028.jpg", alt: "Manager portrait" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/side-view-woman-shooting-with-projector_23-2149424926.jpg", alt: "Designer portrait" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/elegant-businessman-black-white_1098-2651.jpg", alt: "Founder portrait" }
|
||||
]}
|
||||
marqueeItems={[
|
||||
{ type: "text", text: "High Performance" },
|
||||
{ type: "text", text: "Interactive 3D" },
|
||||
{ type: "text", text: "Minimalist Design" },
|
||||
{ type: "text", text: "Fluid Motion" },
|
||||
{ type: "text", text: "Modern Web" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={false}
|
||||
tag="Our Philosophy"
|
||||
title="Blurring lines between art & tech"
|
||||
description="We specialize in high-fidelity 3D assets that are optimized for the web, ensuring that beauty never compromises speed."
|
||||
subdescription="Our workflow integrates advanced web animation with cinematic 3D rendering to create unforgettable digital experiences."
|
||||
icon={Sparkles}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/red-violet-ribbons-background-illustration-background-stage-as-template-your-showcase_211682-205.jpg?_wi=2"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={false}
|
||||
tag="Our Philosophy"
|
||||
title="Blurring lines between art & tech"
|
||||
description="We specialize in high-fidelity 3D assets that are optimized for the web, ensuring that beauty never compromises speed."
|
||||
subdescription="Our workflow integrates advanced web animation with cinematic 3D rendering to create unforgettable digital experiences."
|
||||
icon={Sparkles}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/red-violet-ribbons-background-illustration-background-stage-as-template-your-showcase_211682-205.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardThree
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="split"
|
||||
gridVariant="one-large-left-three-stacked-right"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Interactive 3D",
|
||||
description: "Dynamic elements that respond to cursor movement.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-creative-sphere_23-2150885397.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
title: "Ultra-Fast Load",
|
||||
description: "Optimized shaders and assets for peak performance.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-abstract-metallic-cube_23-2150979678.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
title: "Cinematic Motion",
|
||||
description: "Fluid animations tuned for modern devices.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/swirling-glass-liquid-abstract-art_23-2151991181.jpg?_wi=2",
|
||||
},
|
||||
]}
|
||||
title="What We Deliver"
|
||||
description="From concepts to deployment, we build interactive environments."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardThree
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="split"
|
||||
gridVariant="one-large-left-three-stacked-right"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{ title: "Interactive 3D", description: "Dynamic elements that respond to cursor movement.", imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-creative-sphere_23-2150885397.jpg" },
|
||||
{ title: "Ultra-Fast Load", description: "Optimized shaders and assets for peak performance.", imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-abstract-metallic-cube_23-2150979678.jpg" },
|
||||
{ title: "Cinematic Motion", description: "Fluid animations tuned for modern devices.", imageSrc: "http://img.b2bpic.net/free-photo/swirling-glass-liquid-abstract-art_23-2151991181.jpg" }
|
||||
]}
|
||||
title="What We Deliver"
|
||||
description="From concepts to deployment, we build interactive environments."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
animationType="depth-3d"
|
||||
textboxLayout="inline-image"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
icon: Zap,
|
||||
title: "Load Speed",
|
||||
value: "99%",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
icon: Award,
|
||||
title: "User Retention",
|
||||
value: "2.5x",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
icon: Star,
|
||||
title: "Satisfaction",
|
||||
value: "5.0/5",
|
||||
},
|
||||
]}
|
||||
title="Performance Impact"
|
||||
description="Quantifiable results from our 3D integrations."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
animationType="depth-3d"
|
||||
textboxLayout="inline-image"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", icon: Zap, title: "Load Speed", value: "99%" },
|
||||
{ id: "m2", icon: Award, title: "User Retention", value: "2.5x" },
|
||||
{ id: "m3", icon: Star, title: "Satisfaction", value: "5.0/5" }
|
||||
]}
|
||||
title="Performance Impact"
|
||||
description="Quantifiable results from our 3D integrations."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Alice M.",
|
||||
role: "Creative Lead",
|
||||
testimonial: "Exceptional integration of 3D assets.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-posing-black-white_23-2149735214.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "David R.",
|
||||
role: "Developer",
|
||||
testimonial: "Best performance I have seen in a 3D site.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-young-man-posing-spotlight_23-2151916009.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Sophia P.",
|
||||
role: "Director",
|
||||
testimonial: "Visionary approach to digital design.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/gradient-blue-abstract-background-smooth-dark-blue-with-black-vignette-studio_1258-79732.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "James W.",
|
||||
role: "Designer",
|
||||
testimonial: "Simple to use yet visually complex.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-developing-photographs_23-2149894009.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Lena G.",
|
||||
role: "Founder",
|
||||
testimonial: "The interaction is flawless.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-brutal-bearded-macho-male-dressed-suit-dark-grey-background_613910-9486.jpg",
|
||||
},
|
||||
]}
|
||||
title="Trusted by Creators"
|
||||
description="Hear what our clients say about our immersive work."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Alice M.", role: "Creative Lead", testimonial: "Exceptional integration of 3D assets.", imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-posing-black-white_23-2149735214.jpg" },
|
||||
{ id: "t2", name: "David R.", role: "Developer", testimonial: "Best performance I have seen in a 3D site.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-young-man-posing-spotlight_23-2151916009.jpg" },
|
||||
{ id: "t3", name: "Sophia P.", role: "Director", testimonial: "Visionary approach to digital design.", imageSrc: "http://img.b2bpic.net/free-photo/gradient-blue-abstract-background-smooth-dark-blue-with-black-vignette-studio_1258-79732.jpg" },
|
||||
{ id: "t4", name: "James W.", role: "Designer", testimonial: "Simple to use yet visually complex.", imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-developing-photographs_23-2149894009.jpg" },
|
||||
{ id: "t5", name: "Lena G.", role: "Founder", testimonial: "The interaction is flawless.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-brutal-bearded-macho-male-dressed-suit-dark-grey-background_613910-9486.jpg" }
|
||||
]}
|
||||
title="Trusted by Creators"
|
||||
description="Hear what our clients say about our immersive work."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"TechCorp",
|
||||
"DesignLab",
|
||||
"CreativeStudio",
|
||||
"InnovateXYZ",
|
||||
"StudioDigital",
|
||||
"DataDynamics",
|
||||
"WebPresence",
|
||||
]}
|
||||
title="Global Partners"
|
||||
description="Collaborating with industry leaders in interactive technology."
|
||||
/>
|
||||
</div>
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={["TechCorp", "DesignLab", "CreativeStudio", "InnovateXYZ", "StudioDigital", "DataDynamics", "WebPresence"]}
|
||||
title="Global Partners"
|
||||
description="Collaborating with industry leaders in interactive technology."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Let's connect"
|
||||
title="Start your 3D Journey"
|
||||
description="Ready to build your interactive vision? Reach out and let's create something extraordinary."
|
||||
buttons={[
|
||||
{
|
||||
text: "Get In Touch",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Let's connect"
|
||||
title="Start your 3D Journey"
|
||||
description="Ready to build your interactive vision? Reach out and let's create something extraordinary."
|
||||
buttons={[{ text: "Get In Touch", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/top-view-black-regular-spaghetti-with-copy-space_23-2148461646.jpg"
|
||||
logoText="3D Interactive"
|
||||
columns={[
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Works",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2025 3D Interactive Design Studio"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/top-view-black-regular-spaghetti-with-copy-space_23-2148461646.jpg"
|
||||
logoText="3D Interactive"
|
||||
columns={[
|
||||
{ title: "Company", items: [{ label: "About", href: "#" }, { label: "Works", href: "#" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] }
|
||||
]}
|
||||
copyrightText="© 2025 3D Interactive Design Studio"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user