bender/7bcd2d75-9e3f-464a-adde-bf68c18490d3
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-04-05 19:10:58 +00:00
parent 64333edafb
commit 8849735be2
1 changed files with 107 additions and 252 deletions
Download Patch File Download Diff File Expand all files Collapse all files

359
src/app/page.tsx
View File

@@ -25,264 +25,119 @@ export default function LandingPage() {
headingFontWeight="extrabold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{
name: "Home",
id: "hero",
},
{
name: "About",
id: "about",
},
{
name: "Process",
id: "process",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="Motion3D Studio"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ name: "Home", id: "hero" },
{ name: "About", id: "about" },
{ name: "Process", id: "process" },
{ name: "Team", id: "team" },
{ name: "Contact", id: "contact" },
]}
brandName="Motion3D Studio"
/>
</div>
<div id="hero" data-section="hero">
<HeroOverlayTestimonial
title="Bring Your Ideas to Life in 3D"
description="We specialize in cinematic 3D animation and motion graphics that captivate audiences and elevate your brand narrative."
testimonials={[
{
name: "Sarah Jenkins",
handle: "@sarah_j",
testimonial: "The work delivered was absolutely breathtaking, the attention to detail in the motion graphics is top-tier.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/fairy-tale-world-with-delicious-candy_23-2150799048.jpg?_wi=1",
imageAlt: "abstract 3d motion graphics red neon",
},
{
name: "Mark Sterling",
handle: "@mark_s",
testimonial: "Motion3D Studio redefined our brand video with stunning 3D elements. Fast communication and professional results.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/computer-screen-office-workspace_23-2148821931.jpg?_wi=1",
imageAlt: "modern 3d animation design workspace",
},
{
name: "Elena Ross",
handle: "@elena_r",
testimonial: "Highly recommended for any company needing high-end 3D character animation. Truly talented artists.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/liquid-marbling-paint-texture-background-fluid-painting-abstract-texture-intensive-color-mix-wallpaper_1258-99209.jpg?_wi=1",
imageAlt: "abstract geometric 3d animation concept",
},
{
name: "David Chen",
handle: "@d_chen",
testimonial: "They captured the exact vision of our project and brought it to life with incredible motion quality.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-optical-fiber-detail_23-2149182564.jpg?_wi=1",
imageAlt: "3d character rigging process visual",
},
{
name: "Linda Wu",
handle: "@linda_w",
testimonial: "Game-changing visuals. Working with the team was seamless and the final deliverable was beyond expectations.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/cropped-portrait-young-joyful-man-white-shirt-posing-camera-with-broad-smile-isolated-dark-gray-wall_171337-457.jpg?_wi=1",
imageAlt: "professional portrait of creative agency client",
},
]}
buttons={[
{
text: "See Our Work",
href: "#contact",
},
{
text: "Get a Quote",
href: "#contact",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/fairy-tale-world-with-delicious-candy_23-2150799048.jpg?_wi=2"
imageAlt="Cinematic 3D animation reel scene"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/cropped-portrait-young-joyful-man-white-shirt-posing-camera-with-broad-smile-isolated-dark-gray-wall_171337-457.jpg",
alt: "Sarah Jenkins",
},
{
src: "http://img.b2bpic.net/free-photo/portrait-stylish-serious-bearded-male-wearing-elegant-suit-dark-background_613910-11332.jpg",
alt: "Mark Sterling",
},
{
src: "http://img.b2bpic.net/free-photo/studio-portrait-serious-plump-male-eyeglasses-grey-background_613910-13551.jpg",
alt: "Elena Ross",
},
{
src: "http://img.b2bpic.net/free-photo/front-view-boy-posing-with-neon-light_23-2149596328.jpg",
alt: "David Chen",
},
{
src: "http://img.b2bpic.net/free-photo/solar-panels-industry-technician-high-tech-factory-inspection-quality-control-production_482257-132256.jpg",
alt: "Linda Wu",
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroOverlayTestimonial
title="Bring Your Ideas to Life in 3D"
description="We specialize in cinematic 3D animation and motion graphics that captivate audiences and elevate your brand narrative."
testimonials={[
{ name: "Sarah Jenkins", handle: "@sarah_j", testimonial: "The work delivered was absolutely breathtaking, the attention to detail in the motion graphics is top-tier.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/fairy-tale-world-with-delicious-candy_23-2150799048.jpg", imageAlt: "abstract 3d motion graphics red neon" },
{ name: "Mark Sterling", handle: "@mark_s", testimonial: "Motion3D Studio redefined our brand video with stunning 3D elements. Fast communication and professional results.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/computer-screen-office-workspace_23-2148821931.jpg", imageAlt: "modern 3d animation design workspace" },
{ name: "Elena Ross", handle: "@elena_r", testimonial: "Highly recommended for any company needing high-end 3D character animation. Truly talented artists.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/liquid-marbling-paint-texture-background-fluid-painting-abstract-texture-intensive-color-mix-wallpaper_1258-99209.jpg", imageAlt: "abstract geometric 3d animation concept" },
{ name: "David Chen", handle: "@d_chen", testimonial: "They captured the exact vision of our project and brought it to life with incredible motion quality.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/beautiful-optical-fiber-detail_23-2149182564.jpg", imageAlt: "3d character rigging process visual" },
{ name: "Linda Wu", handle: "@linda_w", testimonial: "Game-changing visuals. Working with the team was seamless and the final deliverable was beyond expectations.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/cropped-portrait-young-joyful-man-white-shirt-posing-camera-with-broad-smile-isolated-dark-gray-wall_171337-457.jpg", imageAlt: "professional portrait of creative agency client" },
]}
buttons={[
{ text: "See Our Work", href: "#contact" },
{ text: "Get a Quote", href: "#contact" },
]}
imageSrc="http://img.b2bpic.net/free-photo/fairy-tale-world-with-delicious-candy_23-2150799048.jpg"
imageAlt="Cinematic 3D animation reel scene"
avatars={[
{ src: "http://img.b2bpic.net/free-photo/cropped-portrait-young-joyful-man-white-shirt-posing-camera-with-broad-smile-isolated-dark-gray-wall_171337-457.jpg", alt: "Sarah Jenkins" },
{ src: "http://img.b2bpic.net/free-photo/portrait-stylish-serious-bearded-male-wearing-elegant-suit-dark-background_613910-11332.jpg", alt: "Mark Sterling" },
{ src: "http://img.b2bpic.net/free-photo/studio-portrait-serious-plump-male-eyeglasses-grey-background_613910-13551.jpg", alt: "Elena Ross" },
{ src: "http://img.b2bpic.net/free-photo/front-view-boy-posing-with-neon-light_23-2149596328.jpg", alt: "David Chen" },
{ src: "http://img.b2bpic.net/free-photo/solar-panels-industry-technician-high-tech-factory-inspection-quality-control-production_482257-132256.jpg", alt: "Linda Wu" },
]}
/>
</div>
<div id="about" data-section="about">
<TextSplitAbout
useInvertedBackground={true}
title="Crafting Motion with Precision"
description={[
"At Motion3D Studio, we blend artistry with cutting-edge technology to produce high-impact 3D animations.",
"Our team consists of industry-leading motion designers, animators, and technical artists dedicated to your project's success.",
"From dynamic product commercials to character-driven storytelling, we thrive on challenges that push the boundaries of CGI.",
]}
/>
</div>
<div id="about" data-section="about">
<TextSplitAbout
useInvertedBackground={true}
title="Crafting Motion with Precision"
description={[
"At Motion3D Studio, we blend artistry with cutting-edge technology to produce high-impact 3D animations.", "Our team consists of industry-leading motion designers, animators, and technical artists dedicated to your project's success.", "From dynamic product commercials to character-driven storytelling, we thrive on challenges that push the boundaries of CGI."]}
/>
</div>
<div id="process" data-section="process">
<FeatureCardNine
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
features={[
{
title: "Conceptual Storyboarding",
description: "Defining the narrative and visuals before starting the build phase.",
phoneOne: {
imageSrc: "http://img.b2bpic.net/free-photo/liquid-marbling-paint-texture-background-fluid-painting-abstract-texture-intensive-color-mix-wallpaper_1258-99209.jpg?_wi=2",
imageAlt: "Conceptual phase",
},
phoneTwo: {
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-optical-fiber-detail_23-2149182564.jpg?_wi=2",
imageAlt: "Character phase",
},
imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-serious-bearded-male-wearing-elegant-suit-dark-background_613910-11332.jpg?_wi=1",
imageAlt: "business person portrait professional studio",
},
{
title: "3D Asset Creation",
description: "Meticulous modeling, texturing, and rigging to create photorealistic assets.",
phoneOne: {
imageSrc: "http://img.b2bpic.net/free-photo/liquid-marbling-paint-texture-background-fluid-painting-abstract-texture-intensive-color-mix-wallpaper_1258-99209.jpg?_wi=3",
imageAlt: "3D Modeling",
},
phoneTwo: {
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-optical-fiber-detail_23-2149182564.jpg?_wi=3",
imageAlt: "Texturing",
},
imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-serious-plump-male-eyeglasses-grey-background_613910-13551.jpg?_wi=1",
imageAlt: "branding specialist portrait cinematic",
},
{
title: "Final Render & Polish",
description: "Advanced rendering and post-production coloring for a flawless final look.",
phoneOne: {
imageSrc: "http://img.b2bpic.net/free-photo/liquid-marbling-paint-texture-background-fluid-painting-abstract-texture-intensive-color-mix-wallpaper_1258-99209.jpg?_wi=4",
imageAlt: "Final Render",
},
phoneTwo: {
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-optical-fiber-detail_23-2149182564.jpg?_wi=4",
imageAlt: "Polishing",
},
imageSrc: "http://img.b2bpic.net/free-photo/front-view-boy-posing-with-neon-light_23-2149596328.jpg?_wi=1",
imageAlt: "creative lead professional studio portrait",
},
]}
showStepNumbers={true}
title="Our Animation Process"
description="A streamlined workflow ensuring top-quality results from initial concept to the final frame render."
/>
</div>
<div id="process" data-section="process">
<FeatureCardNine
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
showStepNumbers={true}
title="Our Animation Process"
description="A streamlined workflow ensuring top-quality results from initial concept to the final frame render."
features={[
{
title: "Conceptual Storyboarding", description: "Defining the narrative and visuals before starting the build phase.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/liquid-marbling-paint-texture-background-fluid-painting-abstract-texture-intensive-color-mix-wallpaper_1258-99209.jpg", imageAlt: "Conceptual phase" },
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/beautiful-optical-fiber-detail_23-2149182564.jpg", imageAlt: "Character phase" },
},
{
title: "3D Asset Creation", description: "Meticulous modeling, texturing, and rigging to create photorealistic assets.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/liquid-marbling-paint-texture-background-fluid-painting-abstract-texture-intensive-color-mix-wallpaper_1258-99209.jpg", imageAlt: "3D Modeling" },
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/beautiful-optical-fiber-detail_23-2149182564.jpg", imageAlt: "Texturing" },
},
{
title: "Final Render & Polish", description: "Advanced rendering and post-production coloring for a flawless final look.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/liquid-marbling-paint-texture-background-fluid-painting-abstract-texture-intensive-color-mix-wallpaper_1258-99209.jpg", imageAlt: "Final Render" },
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/beautiful-optical-fiber-detail_23-2149182564.jpg", imageAlt: "Polishing" },
},
]}
/>
</div>
<div id="team" data-section="team">
<TeamCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={false}
title="Meet the Minds Behind the Motion"
description="Our studio is home to elite 3D artists, technical directors, and visionary storytellers dedicated to pushing the limits of digital art."
members={[
{
id: "m1",
name: "Marcus Vane",
role: "Lead Animator",
imageSrc: "http://img.b2bpic.net/free-photo/cropped-portrait-young-joyful-man-white-shirt-posing-camera-with-broad-smile-isolated-dark-gray-wall_171337-457.jpg?_wi=2",
},
{
id: "m2",
name: "Elena Thorne",
role: "Creative Director",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-serious-bearded-male-wearing-elegant-suit-dark-background_613910-11332.jpg?_wi=2",
},
{
id: "m3",
name: "Jaxen Ryle",
role: "Technical Lead",
imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-serious-plump-male-eyeglasses-grey-background_613910-13551.jpg?_wi=2",
},
{
id: "m4",
name: "Sofia Conti",
role: "3D Generalist",
imageSrc: "http://img.b2bpic.net/free-photo/front-view-boy-posing-with-neon-light_23-2149596328.jpg?_wi=2",
},
{
id: "m5",
name: "Liam Brooks",
role: "CGI Artist",
imageSrc: "http://img.b2bpic.net/free-photo/solar-panels-industry-technician-high-tech-factory-inspection-quality-control-production_482257-132256.jpg",
},
]}
/>
</div>
<div id="team" data-section="team">
<TeamCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={false}
title="Meet the Minds Behind the Motion"
description="Our studio is home to elite 3D artists, technical directors, and visionary storytellers dedicated to pushing the limits of digital art."
members={[
{ id: "m1", name: "Marcus Vane", role: "Lead Animator", imageSrc: "http://img.b2bpic.net/free-photo/cropped-portrait-young-joyful-man-white-shirt-posing-camera-with-broad-smile-isolated-dark-gray-wall_171337-457.jpg" },
{ id: "m2", name: "Elena Thorne", role: "Creative Director", imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-serious-bearded-male-wearing-elegant-suit-dark-background_613910-11332.jpg" },
{ id: "m3", name: "Jaxen Ryle", role: "Technical Lead", imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-serious-plump-male-eyeglasses-grey-background_613910-13551.jpg" },
{ id: "m4", name: "Sofia Conti", role: "3D Generalist", imageSrc: "http://img.b2bpic.net/free-photo/front-view-boy-posing-with-neon-light_23-2149596328.jpg" },
{ id: "m5", name: "Liam Brooks", role: "CGI Artist", imageSrc: "http://img.b2bpic.net/free-photo/solar-panels-industry-technician-high-tech-factory-inspection-quality-control-production_482257-132256.jpg" },
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={true}
title="Ready to Start Your Project?"
description="Send us a message and let's discuss your next 3D animation requirements."
inputs={[
{
name: "name",
type: "text",
placeholder: "Your Name",
required: true,
},
{
name: "email",
type: "email",
placeholder: "Your Email",
required: true,
},
]}
textarea={{
name: "message",
placeholder: "Tell us about your project...",
required: true,
}}
imageSrc="http://img.b2bpic.net/free-photo/computer-screen-office-workspace_23-2148821931.jpg?_wi=2"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={true}
title="Ready to Start Your Project?"
description="Send us a message and let's discuss your next 3D animation requirements."
inputs={[
{ name: "name", type: "text", placeholder: "Your Name", required: true },
{ name: "email", type: "email", placeholder: "Your Email", required: true },
]}
textarea={{ name: "message", placeholder: "Tell us about your project...", required: true }}
imageSrc="http://img.b2bpic.net/free-photo/computer-screen-office-workspace_23-2148821931.jpg"
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="Motion3D"
leftLink={{
text: "Terms of Service",
href: "#",
}}
rightLink={{
text: "Privacy Policy",
href: "#",
}}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="Motion3D"
leftLink={{ text: "Terms of Service", href: "#" }}
rightLink={{ text: "Privacy Policy", href: "#" }}
/>
</div>
</ReactLenis>
</ThemeProvider>
);