Merge version_1 into main #2

Merged
bender merged 1 commits from version_1 into main 2026-05-22 20:42:50 +00:00

View File

@@ -28,356 +28,145 @@ export default function LandingPage() {
headingFontWeight="extrabold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{
name: "Work",
id: "about",
},
{
name: "Approach",
id: "features",
},
{
name: "Studio",
id: "team",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="STUDIO"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ name: "Work", id: "about" },
{ name: "Approach", id: "features" },
{ name: "Studio", id: "team" },
{ name: "Contact", id: "contact" },
]}
brandName="STUDIO"
/>
</div>
<div id="hero" data-section="hero">
<HeroOverlayTestimonial
title="Where vision becomes motion"
description="Explore bold design through immersive scroll experiences."
testimonials={[
{
name: "Alex Rivet",
handle: "@studio",
testimonial: "Truly immersive design experience.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/black-liquid-with-blue-foam_23-2147934189.jpg?_wi=1",
imageAlt: "abstract minimalist black background",
},
{
name: "Jamie Lee",
handle: "@design",
testimonial: "Motion design redefined in this portfolio.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-psd/lifestyle-inspiration-landing-page-template-with-photo_23-2149064868.jpg",
imageAlt: "abstract minimalist black background",
},
{
name: "Sam Thorne",
handle: "@creative",
testimonial: "Sophisticated, minimalist, and powerful.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/abstract-background-with-purple-blue-sphere_23-2148235866.jpg?_wi=1",
imageAlt: "abstract minimalist black background",
},
{
name: "Blake Ross",
handle: "@media",
testimonial: "The best scroll reveal work I've seen.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/black-tagliatelle-pasta-close-up_23-2148469884.jpg?_wi=1",
imageAlt: "abstract minimalist black background",
},
{
name: "Casey Kent",
handle: "@art",
testimonial: "Visual storytelling at its peak.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-background-with-digital-particle-design_1048-12790.jpg?_wi=1",
imageAlt: "abstract minimalist black background",
},
]}
buttons={[
{
text: "Scroll to discover",
href: "#about",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/black-liquid-with-blue-foam_23-2147934189.jpg?_wi=2"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/spooky-skull-plastic-material-illuminated-by-purple-light_23-2147905885.jpg",
alt: "Portrait 1",
},
{
src: "http://img.b2bpic.net/free-photo/portrait-fantasy-sea-creature_23-2151626061.jpg",
alt: "Portrait 2",
},
{
src: "http://img.b2bpic.net/free-photo/concept-portrait-overstimulated-person_23-2151235302.jpg",
alt: "Portrait 3",
},
{
src: "http://img.b2bpic.net/free-photo/portrait-person-with-visual-metaphor-memory_23-2151240886.jpg",
alt: "Portrait 4",
},
{
src: "http://img.b2bpic.net/free-photo/portrait-sceptical-creative-man-green-blazer-dark-background_613910-3829.jpg",
alt: "Portrait 5",
},
]}
avatarText="Trusted by visionary creators"
/>
</div>
<div id="hero" data-section="hero">
<HeroOverlayTestimonial
title="Where vision becomes motion"
description="Explore bold design through immersive scroll experiences."
testimonials={[
{ name: "Alex Rivet", handle: "@studio", testimonial: "Truly immersive design experience.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/black-liquid-with-blue-foam_23-2147934189.jpg", imageAlt: "abstract minimalist black background" },
{ name: "Jamie Lee", handle: "@design", testimonial: "Motion design redefined in this portfolio.", rating: 5, imageSrc: "http://img.b2bpic.net/free-psd/lifestyle-inspiration-landing-page-template-with-photo_23-2149064868.jpg", imageAlt: "abstract minimalist black background" },
{ name: "Sam Thorne", handle: "@creative", testimonial: "Sophisticated, minimalist, and powerful.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/abstract-background-with-purple-blue-sphere_23-2148235866.jpg", imageAlt: "abstract minimalist black background" },
{ name: "Blake Ross", handle: "@media", testimonial: "The best scroll reveal work I've seen.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/black-tagliatelle-pasta-close-up_23-2148469884.jpg", imageAlt: "abstract minimalist black background" },
{ name: "Casey Kent", handle: "@art", testimonial: "Visual storytelling at its peak.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-background-with-digital-particle-design_1048-12790.jpg", imageAlt: "abstract minimalist black background" }
]}
buttons={[{ text: "Scroll to discover", href: "#about" }]}
imageSrc="http://img.b2bpic.net/free-photo/black-liquid-with-blue-foam_23-2147934189.jpg"
avatars={[
{ src: "http://img.b2bpic.net/free-photo/spooky-skull-plastic-material-illuminated-by-purple-light_23-2147905885.jpg", alt: "Portrait 1" },
{ src: "http://img.b2bpic.net/free-photo/portrait-fantasy-sea-creature_23-2151626061.jpg", alt: "Portrait 2" },
{ src: "http://img.b2bpic.net/free-photo/concept-portrait-overstimulated-person_23-2151235302.jpg", alt: "Portrait 3" },
{ src: "http://img.b2bpic.net/free-photo/portrait-person-with-visual-metaphor-memory_23-2151240886.jpg", alt: "Portrait 4" },
{ src: "http://img.b2bpic.net/free-photo/portrait-sceptical-creative-man-green-blazer-dark-background_613910-3829.jpg", alt: "Portrait 5" }
]}
avatarText="Trusted by visionary creators"
/>
</div>
<div id="about" data-section="about">
<TextAbout
useInvertedBackground={false}
title="Crafting digital experiences where form meets function in every frame."
/>
</div>
<div id="about" data-section="about">
<TextAbout useInvertedBackground={false} title="Crafting digital experiences where form meets function in every frame." />
</div>
<div id="features" data-section="features">
<FeatureCardTwentyNine
textboxLayout="default"
gridVariant="bento-grid"
useInvertedBackground={false}
features={[
{
title: "Motion Design",
description: "Dynamic movement that brings static ideas to life.",
imageSrc: "http://img.b2bpic.net/free-photo/abstract-background-with-purple-blue-sphere_23-2148235866.jpg?_wi=2",
titleImageSrc: "http://img.b2bpic.net/free-photo/ribbed-glass-background-with-abstract-waves-glossy-gradient-textures-black-white_474888-8026.jpg",
buttonText: "View",
},
{
title: "Interactive Art",
description: "Engaging experiences that respond to user intent.",
imageSrc: "http://img.b2bpic.net/free-photo/black-tagliatelle-pasta-close-up_23-2148469884.jpg?_wi=2",
titleImageSrc: "http://img.b2bpic.net/free-photo/3d-geometric-abstract-background_1048-16927.jpg",
buttonText: "View",
},
{
title: "Visual Storytelling",
description: "Narratives told through high-impact imagery.",
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-background-with-digital-particle-design_1048-12790.jpg?_wi=2",
titleImageSrc: "http://img.b2bpic.net/free-photo/abstract-life-unreal-dunes_23-2148231669.jpg",
buttonText: "View",
},
]}
title="Our Core Disciplines"
description="We specialize in motion, interaction, and visual storytelling."
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyNine
animationType="slide-up"
textboxLayout="default"
gridVariant="bento-grid"
useInvertedBackground={false}
title="Our Core Disciplines"
description="We specialize in motion, interaction, and visual storytelling."
features={[
{ title: "Motion Design", description: "Dynamic movement that brings static ideas to life.", imageSrc: "http://img.b2bpic.net/free-photo/abstract-background-with-purple-blue-sphere_23-2148235866.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/ribbed-glass-background-with-abstract-waves-glossy-gradient-textures-black-white_474888-8026.jpg", buttonText: "View" },
{ title: "Interactive Art", description: "Engaging experiences that respond to user intent.", imageSrc: "http://img.b2bpic.net/free-photo/black-tagliatelle-pasta-close-up_23-2148469884.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/3d-geometric-abstract-background_1048-16927.jpg", buttonText: "View" },
{ title: "Visual Storytelling", description: "Narratives told through high-impact imagery.", imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-background-with-digital-particle-design_1048-12790.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/abstract-life-unreal-dunes_23-2148231669.jpg", buttonText: "View" }
]}
/>
</div>
<div id="product" data-section="product">
<ProductCardFour
animationType="slide-up"
textboxLayout="default"
gridVariant="bento-grid"
useInvertedBackground={false}
products={[
{
id: "1",
name: "Ethereal Flow",
price: "Concept",
variant: "Interactive",
imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169842.jpg",
},
{
id: "2",
name: "Dark Symmetry",
price: "Design",
variant: "Identity",
imageSrc: "http://img.b2bpic.net/free-photo/cyber-monday-text-with-gift-it_23-2148285098.jpg",
},
{
id: "3",
name: "Motion Waves",
price: "Animation",
variant: "Motion",
imageSrc: "http://img.b2bpic.net/free-photo/woman-looks-through-botany-images_8353-11360.jpg",
},
{
id: "4",
name: "Geometric Shift",
price: "Concept",
variant: "UI Design",
imageSrc: "http://img.b2bpic.net/free-photo/abstract-dynamic-textured-wave-background_1048-10490.jpg",
},
{
id: "5",
name: "Depth Reveal",
price: "Design",
variant: "Branding",
imageSrc: "http://img.b2bpic.net/free-photo/group-rimmel-dark-blackboard_23-2148210801.jpg",
},
{
id: "6",
name: "Minimal Form",
price: "Concept",
variant: "Art",
imageSrc: "http://img.b2bpic.net/free-photo/illustration-several-golden-brown-lights-motion-flowing-into-one-direction_181624-24937.jpg",
},
]}
title="Selected Works"
description="A curated collection of our recent design explorations."
/>
</div>
<div id="product" data-section="product">
<ProductCardFour
animationType="slide-up"
textboxLayout="default"
gridVariant="bento-grid"
useInvertedBackground={false}
title="Selected Works"
description="A curated collection of our recent design explorations."
products={[
{ id: "1", name: "Ethereal Flow", price: "Concept", variant: "Interactive", imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169842.jpg" },
{ id: "2", name: "Dark Symmetry", price: "Design", variant: "Identity", imageSrc: "http://img.b2bpic.net/free-photo/cyber-monday-text-with-gift-it_23-2148285098.jpg" },
{ id: "3", name: "Motion Waves", price: "Animation", variant: "Motion", imageSrc: "http://img.b2bpic.net/free-photo/woman-looks-through-botany-images_8353-11360.jpg" },
{ id: "4", name: "Geometric Shift", price: "Concept", variant: "UI Design", imageSrc: "http://img.b2bpic.net/free-photo/abstract-dynamic-textured-wave-background_1048-10490.jpg" },
{ id: "5", name: "Depth Reveal", price: "Design", variant: "Branding", imageSrc: "http://img.b2bpic.net/free-photo/group-rimmel-dark-blackboard_23-2148210801.jpg" },
{ id: "6", name: "Minimal Form", price: "Concept", variant: "Art", imageSrc: "http://img.b2bpic.net/free-photo/illustration-several-golden-brown-lights-motion-flowing-into-one-direction_181624-24937.jpg" }
]}
/>
</div>
<div id="team" data-section="team">
<TeamCardOne
animationType="depth-3d"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
members={[
{
id: "t1",
name: "Sarah Chen",
role: "Creative Director",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-bearded-man-suit_23-2149705921.jpg",
},
{
id: "t2",
name: "Mark Evans",
role: "Lead Animator",
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-young-man-posing-studio_23-2149411430.jpg",
},
{
id: "t3",
name: "Luna Park",
role: "Visual Designer",
imageSrc: "http://img.b2bpic.net/free-photo/bearded-black-man-wearing-suit-felt-hat_613910-16012.jpg",
},
]}
title="The Creative Minds"
description="Meet the team driving our motion design vision."
/>
</div>
<div id="team" data-section="team">
<TeamCardOne
animationType="depth-3d"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
title="The Creative Minds"
description="Meet the team driving our motion design vision."
members={[
{ id: "t1", name: "Sarah Chen", role: "Creative Director", imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-bearded-man-suit_23-2149705921.jpg" },
{ id: "t2", name: "Mark Evans", role: "Lead Animator", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-young-man-posing-studio_23-2149411430.jpg" },
{ id: "t3", name: "Luna Park", role: "Visual Designer", imageSrc: "http://img.b2bpic.net/free-photo/bearded-black-man-wearing-suit-felt-hat_613910-16012.jpg" }
]}
/>
</div>
<div id="testimonial" data-section="testimonial">
<TestimonialCardTwo
animationType="scale-rotate"
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{
id: "1",
name: "Sophia G",
role: "CEO",
testimonial: "Exceptional motion graphics and design.",
imageSrc: "http://img.b2bpic.net/free-photo/decor-dirty-cracked-distressed-grain_1194-9488.jpg",
},
{
id: "2",
name: "Liam H",
role: "CTO",
testimonial: "The animations feel like magic.",
imageSrc: "http://img.b2bpic.net/free-photo/vertical-grey-scale-shot-patterns-black-painted-wall_181624-7227.jpg",
},
{
id: "3",
name: "Elena R",
role: "Founder",
testimonial: "Precise, sophisticated, and professional.",
imageSrc: "http://img.b2bpic.net/free-photo/photo-ground-texture-pattern_58702-15820.jpg",
},
{
id: "4",
name: "Noah J",
role: "Director",
testimonial: "They truly understand motion storytelling.",
imageSrc: "http://img.b2bpic.net/free-photo/edge-retro-grunge-chalk-dirty_1194-9593.jpg",
},
{
id: "5",
name: "Ava M",
role: "Manager",
testimonial: "Delivered high-impact work on time.",
imageSrc: "http://img.b2bpic.net/free-photo/dark-abstract-background-with-geometric-curves-texture_84443-83760.jpg",
},
]}
title="Voices of Visionaries"
description="What partners and clients say about our creative approach."
/>
</div>
<div id="testimonial" data-section="testimonial">
<TestimonialCardTwo
animationType="scale-rotate"
textboxLayout="default"
useInvertedBackground={false}
title="Voices of Visionaries"
description="What partners and clients say about our creative approach."
testimonials={[
{ id: "1", name: "Sophia G", role: "CEO", testimonial: "Exceptional motion graphics and design.", imageSrc: "http://img.b2bpic.net/free-photo/decor-dirty-cracked-distressed-grain_1194-9488.jpg" },
{ id: "2", name: "Liam H", role: "CTO", testimonial: "The animations feel like magic.", imageSrc: "http://img.b2bpic.net/free-photo/vertical-grey-scale-shot-patterns-black-painted-wall_181624-7227.jpg" },
{ id: "3", name: "Elena R", role: "Founder", testimonial: "Precise, sophisticated, and professional.", imageSrc: "http://img.b2bpic.net/free-photo/photo-ground-texture-pattern_58702-15820.jpg" },
{ id: "4", name: "Noah J", role: "Director", testimonial: "They truly understand motion storytelling.", imageSrc: "http://img.b2bpic.net/free-photo/edge-retro-grunge-chalk-dirty_1194-9593.jpg" },
{ id: "5", name: "Ava M", role: "Manager", testimonial: "Delivered high-impact work on time.", imageSrc: "http://img.b2bpic.net/free-photo/dark-abstract-background-with-geometric-curves-texture_84443-83760.jpg" }
]}
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
useInvertedBackground={false}
faqs={[
{
id: "f1",
title: "How long is the design process?",
content: "Processes vary but usually span 4-8 weeks.",
},
{
id: "f2",
title: "Do you offer branding?",
content: "Yes, we specialize in cohesive brand identity.",
},
{
id: "f3",
title: "Can we work remotely?",
content: "Absolutely, we collaborate globally.",
},
]}
sideTitle="Questions & Insight"
faqsAnimation="slide-up"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
faqsAnimation="slide-up"
useInvertedBackground={false}
sideTitle="Questions & Insight"
faqs={[
{ id: "f1", title: "How long is the design process?", content: "Processes vary but usually span 4-8 weeks." },
{ id: "f2", title: "Do you offer branding?", content: "Yes, we specialize in cohesive brand identity." },
{ id: "f3", title: "Can we work remotely?", content: "Absolutely, we collaborate globally." }
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactText
useInvertedBackground={false}
background={{
variant: "canvas-reveal",
}}
text="Ready to move your vision forward?"
buttons={[
{
text: "Start Project",
href: "#",
},
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactText
useInvertedBackground={false}
background={{ variant: "canvas-reveal" }}
text="Ready to move your vision forward?"
buttons={[{ text: "Start Project", href: "#" }]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseReveal
logoText="STUDIO"
columns={[
{
title: "Explore",
items: [
{
label: "Work",
href: "#product",
},
{
label: "Approach",
href: "#features",
},
],
},
{
title: "Legal",
items: [
{
label: "Privacy",
href: "#",
},
{
label: "Terms",
href: "#",
},
],
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseReveal
logoText="STUDIO"
columns={[
{ title: "Explore", items: [{ label: "Work", href: "#product" }, { label: "Approach", href: "#features" }] },
{ title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] }
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);