Merge version_1 into main #1
279
src/app/page.tsx
279
src/app/page.tsx
@@ -31,22 +31,14 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Metrics", id: "metrics" },
|
||||
{ name: "Team", id: "team" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
brandName="MotionStudio"
|
||||
/>
|
||||
@@ -54,63 +46,26 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboard
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
background={{ variant: "plain" }}
|
||||
title="Where Motion Meets Meaning."
|
||||
description="We specialize in crafting immersive, high-energy digital experiences that define the future of interaction."
|
||||
buttons={[
|
||||
{
|
||||
text: "Start Project",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Start Project", href: "#contact" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/3d-rendering-holographic-cube_23-2150979697.jpg"
|
||||
imageAlt="abstract motion background dark"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/3d-shapes-glowing-with-bright-holographic-colors_23-2151037175.jpg",
|
||||
alt: "3d shapes glowing with bright holographic colors",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/3d-shapes-glowing-with-bright-holographic-colors_23-2151037207.jpg",
|
||||
alt: "3d shapes glowing with bright holographic colors",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/abstract-light-painting-dark_23-2149627912.jpg",
|
||||
alt: "Abstract light painting in the dark",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/3d-shapes-glowing-with-bright-holographic-colors_23-2151037180.jpg",
|
||||
alt: "3d shapes glowing with bright holographic colors",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/dark-fantasy-scene_23-2151136086.jpg",
|
||||
alt: "Dark fantasy scene",
|
||||
},
|
||||
{ src: "http://img.b2bpic.net/free-photo/3d-shapes-glowing-with-bright-holographic-colors_23-2151037175.jpg", alt: "3d shapes glowing with bright holographic colors" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/3d-shapes-glowing-with-bright-holographic-colors_23-2151037207.jpg", alt: "3d shapes glowing with bright holographic colors" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/abstract-light-painting-dark_23-2149627912.jpg", alt: "Abstract light painting in the dark" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/3d-shapes-glowing-with-bright-holographic-colors_23-2151037180.jpg", alt: "3d shapes glowing with bright holographic colors" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/dark-fantasy-scene_23-2151136086.jpg", alt: "Dark fantasy scene" }
|
||||
]}
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Motion Design",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "3D Art",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Interactive UI",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Branding",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Data Visualization",
|
||||
},
|
||||
{ type: "text", text: "Motion Design" },
|
||||
{ type: "text", text: "3D Art" },
|
||||
{ type: "text", text: "Interactive UI" },
|
||||
{ type: "text", text: "Branding" },
|
||||
{ type: "text", text: "Data Visualization" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -122,18 +77,9 @@ export default function LandingPage() {
|
||||
title="Innovating Through Motion"
|
||||
description="We blend artistic vision with technical precision. Every pixel is animated to tell a story that resonates with your audience."
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "Fluid Animation",
|
||||
description: "Seamless, performance-optimized motion.",
|
||||
},
|
||||
{
|
||||
title: "Interactive Storytelling",
|
||||
description: "Engagement driven design systems.",
|
||||
},
|
||||
{
|
||||
title: "Modern Architecture",
|
||||
description: "Built for scale and future growth.",
|
||||
},
|
||||
{ title: "Fluid Animation", description: "Seamless, performance-optimized motion." },
|
||||
{ title: "Interactive Storytelling", description: "Engagement driven design systems." },
|
||||
{ title: "Modern Architecture", description: "Built for scale and future growth." }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/developing-photographs-darkroom-job_23-2149893784.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
@@ -143,42 +89,13 @@ export default function LandingPage() {
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "1",
|
||||
title: "UI Motion",
|
||||
author: "Studio",
|
||||
description: "High fidelity interactive interfaces.",
|
||||
tags: [
|
||||
"Motion",
|
||||
"UI",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/liquid-marbling-paint-texture-background-fluid-painting-abstract-texture-intensive-color-mix-wallpaper_1258-90671.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Fluid Identity",
|
||||
author: "Studio",
|
||||
description: "Dynamic branding systems in motion.",
|
||||
tags: [
|
||||
"Branding",
|
||||
"Motion",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/liquid-marbling-paint-texture-background-fluid-painting-abstract-texture-intensive-color-mix-wallpaper_1258-103234.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Data Visualization",
|
||||
author: "Studio",
|
||||
description: "Complex data made visually compelling.",
|
||||
tags: [
|
||||
"Data",
|
||||
"Visual",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-network-connections-background-with-low-poly-plexus-design_1048-12346.jpg",
|
||||
},
|
||||
{ id: "1", title: "UI Motion", author: "Studio", description: "High fidelity interactive interfaces.", tags: ["Motion", "UI"], imageSrc: "http://img.b2bpic.net/free-photo/liquid-marbling-paint-texture-background-fluid-painting-abstract-texture-intensive-color-mix-wallpaper_1258-90671.jpg" },
|
||||
{ id: "2", title: "Fluid Identity", author: "Studio", description: "Dynamic branding systems in motion.", tags: ["Branding", "Motion"], imageSrc: "http://img.b2bpic.net/free-photo/liquid-marbling-paint-texture-background-fluid-painting-abstract-texture-intensive-color-mix-wallpaper_1258-103234.jpg" },
|
||||
{ id: "3", title: "Data Visualization", author: "Studio", description: "Complex data made visually compelling.", tags: ["Data", "Visual"], imageSrc: "http://img.b2bpic.net/free-photo/3d-network-connections-background-with-low-poly-plexus-design_1048-12346.jpg" }
|
||||
]}
|
||||
title="Creative Expertise"
|
||||
description="Our suite of design services delivers impact at every touchpoint."
|
||||
@@ -191,21 +108,9 @@ export default function LandingPage() {
|
||||
title="Impact In Numbers"
|
||||
tag="Trusted By Industry"
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "150+",
|
||||
description: "Projects Delivered",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "99%",
|
||||
description: "Client Satisfaction",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "20+",
|
||||
description: "Design Awards",
|
||||
},
|
||||
{ id: "m1", value: "150+", description: "Projects Delivered" },
|
||||
{ id: "m2", value: "99%", description: "Client Satisfaction" },
|
||||
{ id: "m3", value: "20+", description: "Design Awards" }
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
@@ -213,31 +118,14 @@ export default function LandingPage() {
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="asymmetric-60-wide-40-narrow"
|
||||
useInvertedBackground={false}
|
||||
members={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Sarah Chen",
|
||||
role: "Creative Director",
|
||||
description: "Leading design vision and motion systems.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-serious-handsome-middle-aged-boss_1262-4837.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Alex Riv",
|
||||
role: "Lead Animator",
|
||||
description: "Master of motion dynamics.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-doing-product-photography_23-2148970201.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Jordan Smith",
|
||||
role: "Interaction Designer",
|
||||
description: "Focusing on user-centric motion.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/arab-business-professional-monitoring-project-analytics-digital-tablet_482257-90405.jpg",
|
||||
},
|
||||
{ id: "t1", name: "Sarah Chen", role: "Creative Director", description: "Leading design vision and motion systems.", imageSrc: "http://img.b2bpic.net/free-photo/closeup-serious-handsome-middle-aged-boss_1262-4837.jpg" },
|
||||
{ id: "t2", name: "Alex Riv", role: "Lead Animator", description: "Master of motion dynamics.", imageSrc: "http://img.b2bpic.net/free-photo/man-doing-product-photography_23-2148970201.jpg" },
|
||||
{ id: "t3", name: "Jordan Smith", role: "Interaction Designer", description: "Focusing on user-centric motion.", imageSrc: "http://img.b2bpic.net/free-photo/arab-business-professional-monitoring-project-analytics-digital-tablet_482257-90405.jpg" }
|
||||
]}
|
||||
title="The Creators"
|
||||
description="The passionate minds behind every pixel."
|
||||
@@ -249,46 +137,11 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Transformative",
|
||||
quote: "The motion work was unlike anything we have seen.",
|
||||
name: "Sarah Johnson",
|
||||
role: "CEO",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-shooting-with-projector_23-2149424926.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Incredible",
|
||||
quote: "Seamless animation delivery from start to finish.",
|
||||
name: "Michael Chen",
|
||||
role: "CTO",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/content-creator-holding-recording-v-mount-battery-review-vlog-professional-acumulator-modern-v-lock-type-technology-social-media-star-influencer-online-distribution_482257-3815.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Creative Powerhouse",
|
||||
quote: "Changed our brand perception entirely.",
|
||||
name: "Emily Rodriguez",
|
||||
role: "Marketing",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-entrepreneur-woman-preparing-business-meeting-working-management-strategy-startup-office-executive-manager-analyzing-company-documents-looking-marketing-investment-report_482257-34873.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
title: "Professional",
|
||||
quote: "Detailed, thorough, and highly creative.",
|
||||
name: "David Kim",
|
||||
role: "Product",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-blonde-businesswoman-formal-dressed-standing-with-crossed-arms-isolated-dark-textured-background_613910-18164.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
title: "Exceptional",
|
||||
quote: "They understand the pulse of modern design.",
|
||||
name: "Alex W.",
|
||||
role: "Founder",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-standing-wall_23-2148415941.jpg",
|
||||
},
|
||||
{ id: "1", title: "Transformative", quote: "The motion work was unlike anything we have seen.", name: "Sarah Johnson", role: "CEO", imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-shooting-with-projector_23-2149424926.jpg" },
|
||||
{ id: "2", title: "Incredible", quote: "Seamless animation delivery from start to finish.", name: "Michael Chen", role: "CTO", imageSrc: "http://img.b2bpic.net/free-photo/content-creator-holding-recording-v-mount-battery-review-vlog-professional-acumulator-modern-v-lock-type-technology-social-media-star-influencer-online-distribution_482257-3815.jpg" },
|
||||
{ id: "3", title: "Creative Powerhouse", quote: "Changed our brand perception entirely.", name: "Emily Rodriguez", role: "Marketing", imageSrc: "http://img.b2bpic.net/free-photo/portrait-entrepreneur-woman-preparing-business-meeting-working-management-strategy-startup-office-executive-manager-analyzing-company-documents-looking-marketing-investment-report_482257-34873.jpg" },
|
||||
{ id: "4", title: "Professional", quote: "Detailed, thorough, and highly creative.", name: "David Kim", role: "Product", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-blonde-businesswoman-formal-dressed-standing-with-crossed-arms-isolated-dark-textured-background_613910-18164.jpg" },
|
||||
{ id: "5", title: "Exceptional", quote: "They understand the pulse of modern design.", name: "Alex W.", role: "Founder", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-standing-wall_23-2148415941.jpg" }
|
||||
]}
|
||||
title="Voices of Partners"
|
||||
description="What our clients say about our creative process."
|
||||
@@ -300,21 +153,9 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "How do we start?",
|
||||
content: "Simply reach out via our contact form.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "What tools do you use?",
|
||||
content: "We work with industry-standard design and animation tools.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Do you do consulting?",
|
||||
content: "Yes, we offer design system consultations.",
|
||||
},
|
||||
{ id: "f1", title: "How do we start?", content: "Simply reach out via our contact form." },
|
||||
{ id: "f2", title: "What tools do you use?", content: "We work with industry-standard design and animation tools." },
|
||||
{ id: "f3", title: "Do you do consulting?", content: "Yes, we offer design system consultations." }
|
||||
]}
|
||||
title="Common Inquiries"
|
||||
description="Find answers to our most popular questions."
|
||||
@@ -325,9 +166,7 @@ export default function LandingPage() {
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "rotated-rays-static",
|
||||
}}
|
||||
background={{ variant: "rotated-rays-static" }}
|
||||
tag="Let's Talk"
|
||||
title="Ready to animate your vision?"
|
||||
description="Get in touch today to start creating something extraordinary together."
|
||||
@@ -341,31 +180,17 @@ export default function LandingPage() {
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Studio",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Team",
|
||||
href: "#team",
|
||||
},
|
||||
],
|
||||
title: "Studio", items: [
|
||||
{ label: "About", href: "#about" },
|
||||
{ label: "Team", href: "#team" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy", href: "#" },
|
||||
{ label: "Terms", href: "#" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
bottomLeftText="© 2024 MotionStudio"
|
||||
bottomRightText="All rights reserved."
|
||||
|
||||
Reference in New Issue
Block a user