bender/edf49c1d-df81-4441-9021-fde7616c0118
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/app/page.tsx

Browse Source
This commit is contained in:
bender
2026-05-09 14:23:42 +00:00
parent a5e799d0e6
commit b06431f85a
1 changed files with 55 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files

339
src/app/page.tsx
View File

@@ -31,127 +31,45 @@ export default function LandingPage() {
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{
name: "Home",
id: "hero",
},
{
name: "Features",
id: "features",
},
{
name: "Demos",
id: "product",
},
{
name: "Tech",
id: "metrics",
},
{ name: "Home", id: "hero" },
{ name: "Features", id: "features" },
{ name: "Demos", id: "product" },
{ name: "Tech", id: "metrics" },
]}
brandName="3D World"
button={{ text: "Get Started", href: "#" }}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardTestimonial
background={{
variant: "gradient-bars",
}}
background={{ variant: "gradient-bars" }}
title="A New Dimension of Interaction"
description="Explore immersive 3D environments built for the modern web."
testimonials={[
{
name: "Alex Riv",
handle: "@ari",
testimonial: "The 3D implementation is truly seamless.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/teenager-light-movie-projector_23-2149489836.jpg",
},
{
name: "Sam K",
handle: "@sam",
testimonial: "Performance is excellent even on mobile.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/side-view-unknown-man-posing_23-2149417578.jpg",
},
{
name: "Jordan P",
handle: "@jordan",
testimonial: "Visuals are next level.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-vector/flat-design-profile-icon-set_23-2149499286.jpg",
},
{
name: "Casey L",
handle: "@case",
testimonial: "Smooth transitions across the site.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/artistic-businessman_23-2147641280.jpg",
},
{
name: "Morgan D",
handle: "@morgan",
testimonial: "Great work on the shaders.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-brutal-bearded-macho-male-dressed-suit-dark-grey-background_613910-1524.jpg",
},
]}
buttons={[
{
text: "Launch 3D Demo",
href: "#product",
},
{
text: "Learn More",
href: "#about",
},
{ name: "Alex Riv", handle: "@ari", testimonial: "The 3D implementation is truly seamless.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/teenager-light-movie-projector_23-2149489836.jpg" },
{ name: "Sam K", handle: "@sam", testimonial: "Performance is excellent even on mobile.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/side-view-unknown-man-posing_23-2149417578.jpg" },
{ name: "Jordan P", handle: "@jordan", testimonial: "Visuals are next level.", rating: 5, imageSrc: "http://img.b2bpic.net/free-vector/flat-design-profile-icon-set_23-2149499286.jpg" },
{ name: "Casey L", handle: "@case", testimonial: "Smooth transitions across the site.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/artistic-businessman_23-2147641280.jpg" },
{ name: "Morgan D", handle: "@morgan", testimonial: "Great work on the shaders.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-brutal-bearded-macho-male-dressed-suit-dark-grey-background_613910-1524.jpg" },
]}
buttons={[{ text: "Launch 3D Demo", href: "#product" }, { text: "Learn More", href: "#about" }]}
imageSrc="http://img.b2bpic.net/free-photo/stylish-couple-wearing-warm-clothes-standing-staircase-underground-nightclub-backlit-signboard-background_613910-21168.jpg"
imageAlt="3d render mockup dark neon"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/cyber-monday-neon-glowing-text-dark-background_23-2152033017.jpg",
alt: "Avatar 1",
},
{
src: "http://img.b2bpic.net/free-photo/cyber-monday-celebration_23-2151835494.jpg",
alt: "Avatar 2",
},
{
src: "http://img.b2bpic.net/free-photo/3d-rendering-vibrant-neon-cactus-desert_23-2151244972.jpg",
alt: "Avatar 3",
},
{
src: "http://img.b2bpic.net/free-photo/atm-neon-lights-changing-money-sign_23-2148283900.jpg",
alt: "Avatar 4",
},
{
src: "http://img.b2bpic.net/free-photo/woman-portrait-with-blue-lights-visual-effects_23-2149419506.jpg",
alt: "Avatar 5",
},
{ src: "http://img.b2bpic.net/free-photo/cyber-monday-neon-glowing-text-dark-background_23-2152033017.jpg", alt: "Avatar 1" },
{ src: "http://img.b2bpic.net/free-photo/cyber-monday-celebration_23-2151835494.jpg", alt: "Avatar 2" },
{ src: "http://img.b2bpic.net/free-photo/3d-rendering-vibrant-neon-cactus-desert_23-2151244972.jpg", alt: "Avatar 3" },
{ src: "http://img.b2bpic.net/free-photo/atm-neon-lights-changing-money-sign_23-2148283900.jpg", alt: "Avatar 4" },
{ src: "http://img.b2bpic.net/free-photo/woman-portrait-with-blue-lights-visual-effects_23-2149419506.jpg", alt: "Avatar 5" },
]}
avatarText="Trusted by 100+ developers"
marqueeItems={[
{
type: "text",
text: "Three.js",
},
{
type: "text",
text: "WebGL",
},
{
type: "text",
text: "Spline",
},
{
type: "text",
text: "React",
},
{
type: "text",
text: "GSAP",
},
{ type: "text", text: "Three.js" },
{ type: "text", text: "WebGL" },
{ type: "text", text: "Spline" },
{ type: "text", text: "React" },
{ type: "text", text: "GSAP" },
]}
/>
</div>
@@ -163,22 +81,10 @@ export default function LandingPage() {
title="What This 3D Project Is"
description="A new standard for immersive web experiences using advanced web technologies."
bulletPoints={[
{
title: "Real-time interaction",
description: "Engage directly with the environment.",
},
{
title: "Smooth animations",
description: "Fluid motions with high frame rates.",
},
{
title: "Lightweight performance",
description: "Built for fast browser loading.",
},
{
title: "Cross-device compatibility",
description: "Works perfectly on any screen size.",
},
{ title: "Real-time interaction", description: "Engage directly with the environment." },
{ title: "Smooth animations", description: "Fluid motions with high frame rates." },
{ title: "Lightweight performance", description: "Built for fast browser loading." },
{ title: "Cross-device compatibility", description: "Works perfectly on any screen size." },
]}
imageSrc="http://img.b2bpic.net/free-photo/freelancer-designer-decorates-apartment-floor-plan-using-blueprints-pc_482257-121059.jpg"
mediaAnimation="blur-reveal"
@@ -193,26 +99,10 @@ export default function LandingPage() {
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
features={[
{
title: "Interactive Objects",
description: "Rotate, zoom, and explore models.",
imageSrc: "http://img.b2bpic.net/free-photo/cybernetic-warrior-neon-lit-server-room_23-2152031312.jpg",
},
{
title: "Cinematic Animations",
description: "Sophisticated sequences and transitions.",
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-background-flowing-lines-particles_1048-12945.jpg",
},
{
title: "Custom Environments",
description: "Tailor the atmosphere and world.",
imageSrc: "http://img.b2bpic.net/free-photo/simple-podium-as-showcase-products-modern-showcase-with-three-marble-cube-podium-sunlight-shadow-white-board-grey-wall-cosmetic-goods-luxury-background-rendering_1258-108627.jpg",
},
{
title: "Fast Loading",
description: "Performance optimized assets.",
imageSrc: "http://img.b2bpic.net/free-photo/burning-tequila-shot-glass-dark-background_23-2147904963.jpg",
},
{ title: "Interactive Objects", description: "Rotate, zoom, and explore models.", imageSrc: "http://img.b2bpic.net/free-photo/cybernetic-warrior-neon-lit-server-room_23-2152031312.jpg" },
{ title: "Cinematic Animations", description: "Sophisticated sequences and transitions.", imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-background-flowing-lines-particles_1048-12945.jpg" },
{ title: "Custom Environments", description: "Tailor the atmosphere and world.", imageSrc: "http://img.b2bpic.net/free-photo/simple-podium-as-showcase-products-modern-showcase-with-three-marble-cube-podium-sunlight-shadow-white-board-grey-wall-cosmetic-goods-luxury-background-rendering_1258-108627.jpg" },
{ title: "Fast Loading", description: "Performance optimized assets.", imageSrc: "http://img.b2bpic.net/free-photo/burning-tequila-shot-glass-dark-background_23-2147904963.jpg" },
]}
title="3D-Inspired Features"
description="Powerful capabilities for your digital creations."
@@ -223,44 +113,15 @@ export default function LandingPage() {
<ProductCardThree
textboxLayout="split-description"
gridVariant="one-large-left-three-stacked-right"
animationType="blur-reveal"
useInvertedBackground={false}
products={[
{
id: "1",
name: "Spline Landscape",
price: "View Demo",
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-data-interface_23-2152011741.jpg",
},
{
id: "2",
name: "Three.js Engine",
price: "View Demo",
imageSrc: "http://img.b2bpic.net/free-photo/rendering-abstract-futuristic-background-with-glowing-neon-blue-lights_181624-26042.jpg",
},
{
id: "3",
name: "Blender Export",
price: "View Demo",
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-geometric-shapes-nature_23-2150697272.jpg",
},
{
id: "4",
name: "Shader Lab",
price: "View Demo",
imageSrc: "http://img.b2bpic.net/free-photo/mockup-computer-used-by-silicon-valley-it-specialist-developing-ai-systems_482257-125072.jpg",
},
{
id: "5",
name: "WebGL Core",
price: "View Demo",
imageSrc: "http://img.b2bpic.net/free-photo/abstract-neon-background_23-2150737846.jpg",
},
{
id: "6",
name: "Interactive Object",
price: "View Demo",
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-time-machines-design_23-2151599374.jpg",
},
{ id: "1", name: "Spline Landscape", price: "View Demo", imageSrc: "http://img.b2bpic.net/free-photo/futuristic-data-interface_23-2152011741.jpg" },
{ id: "2", name: "Three.js Engine", price: "View Demo", imageSrc: "http://img.b2bpic.net/free-photo/rendering-abstract-futuristic-background-with-glowing-neon-blue-lights_181624-26042.jpg" },
{ id: "3", name: "Blender Export", price: "View Demo", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-geometric-shapes-nature_23-2150697272.jpg" },
{ id: "4", name: "Shader Lab", price: "View Demo", imageSrc: "http://img.b2bpic.net/free-photo/mockup-computer-used-by-silicon-valley-it-specialist-developing-ai-systems_482257-125072.jpg" },
{ id: "5", name: "WebGL Core", price: "View Demo", imageSrc: "http://img.b2bpic.net/free-photo/abstract-neon-background_23-2150737846.jpg" },
{ id: "6", name: "Interactive Object", price: "View Demo", imageSrc: "http://img.b2bpic.net/free-photo/futuristic-time-machines-design_23-2151599374.jpg" },
]}
title="Demo Preview"
description="Step into our current prototypes and test environments."
@@ -273,36 +134,9 @@ export default function LandingPage() {
textboxLayout="split-description"
useInvertedBackground={false}
metrics={[
{
id: "m1",
value: "Spline",
title: "Design Tool",
items: [
"Easy export",
"High fidelity",
"Cloud base",
],
},
{
id: "m2",
value: "Three.js",
title: "Core Engine",
items: [
"Performance",
"Flexibility",
"Extensive API",
],
},
{
id: "m3",
value: "Blender",
title: "Modeling",
items: [
"High geometry",
"PBR shaders",
"Fast cycles",
],
},
{ id: "m1", value: "Spline", title: "Design Tool", items: ["Easy export", "High fidelity", "Cloud base"] },
{ id: "m2", value: "Three.js", title: "Core Engine", items: ["Performance", "Flexibility", "Extensive API"] },
{ id: "m3", value: "Blender", title: "Modeling", items: ["High geometry", "PBR shaders", "Fast cycles"] },
]}
title="Behind the Scenes"
description="Powered by industry standard tools."
@@ -312,36 +146,16 @@ export default function LandingPage() {
<div id="testimonial" data-section="testimonial">
<TestimonialCardTwelve
useInvertedBackground={false}
cardAnimation="slide-up"
testimonials={[
{
id: "t1",
name: "User 1",
imageSrc: "http://img.b2bpic.net/free-photo/woman-posing-black-white-medium-shot_23-2149411383.jpg",
},
{
id: "t2",
name: "User 2",
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-young-man-posing-spotlight_23-2151915995.jpg",
},
{
id: "t3",
name: "User 3",
imageSrc: "http://img.b2bpic.net/free-photo/dark-blonde-bearded-man-crosses-his-hands-chest-posing-black-shirt_8353-1116.jpg",
},
{
id: "t4",
name: "User 4",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-man-wearing-formal-clothes_273609-15323.jpg",
},
{
id: "t5",
name: "User 5",
imageSrc: "http://img.b2bpic.net/free-vector/sketchy-user-avatars_23-2147543951.jpg",
},
{ id: "t1", name: "User 1", imageSrc: "http://img.b2bpic.net/free-photo/woman-posing-black-white-medium-shot_23-2149411383.jpg" },
{ id: "t2", name: "User 2", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-young-man-posing-spotlight_23-2151915995.jpg" },
{ id: "t3", name: "User 3", imageSrc: "http://img.b2bpic.net/free-photo/dark-blonde-bearded-man-crosses-his-hands-chest-posing-black-shirt_8353-1116.jpg" },
{ id: "t4", name: "User 4", imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-man-wearing-formal-clothes_273609-15323.jpg" },
{ id: "t5", name: "User 5", imageSrc: "http://img.b2bpic.net/free-vector/sketchy-user-avatars_23-2147543951.jpg" },
]}
cardTitle="Global Feedback"
cardTag="Community"
cardAnimation="slide-up"
/>
</div>
@@ -349,74 +163,31 @@ export default function LandingPage() {
<FaqDouble
textboxLayout="default"
useInvertedBackground={false}
faqsAnimation="blur-reveal"
faqs={[
{
id: "f1",
title: "Is WebGL required?",
content: "No, you can achieve 3D looks without writing WebGL directly.",
},
{
id: "f2",
title: "Can I use Spline?",
content: "Yes, we fully support Spline exports and embedding.",
},
{
id: "f3",
title: "Performance impacts?",
content: "Optimized models ensure low overhead.",
},
{ id: "f1", title: "Is WebGL required?", content: "No, you can achieve 3D looks without writing WebGL directly." },
{ id: "f2", title: "Can I use Spline?", content: "Yes, we fully support Spline exports and embedding." },
{ id: "f3", title: "Performance impacts?", content: "Optimized models ensure low overhead." },
]}
title="Frequently Asked Questions"
description="Common inquiries about 3D project integration."
faqsAnimation="blur-reveal"
/>
</div>
<div id="contact" data-section="contact">
<ContactText
useInvertedBackground={false}
background={{
variant: "rotated-rays-animated",
}}
background={{ variant: "rotated-rays-animated" }}
text="Ready to Step Into 3D?"
buttons={[
{
text: "Start Exploring",
href: "#",
},
]}
buttons={[{ text: "Start Exploring", href: "#" }]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
columns={[
{
title: "Platform",
items: [
{
label: "Demos",
href: "#product",
},
{
label: "About",
href: "#about",
},
],
},
{
title: "Resources",
items: [
{
label: "Spline Docs",
href: "#",
},
{
label: "Three.js API",
href: "#",
},
],
},
{ title: "Platform", items: [{ label: "Demos", href: "#product" }, { label: "About", href: "#about" }] },
{ title: "Resources", items: [{ label: "Spline Docs", href: "#" }, { label: "Three.js API", href: "#" }] },
]}
logoText="3D World"
/>
@@ -424,4 +195,4 @@ export default function LandingPage() {
</ReactLenis>
</ThemeProvider>
);
}
}