Merge version_1 into main #1
285
src/app/page.tsx
285
src/app/page.tsx
@@ -20,27 +20,22 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="elastic-effect"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Works",
|
||||
id: "works",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Works", id: "works" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="MotionPixel"
|
||||
/>
|
||||
@@ -48,62 +43,25 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCentered
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Bringing Stories to Life"
|
||||
description="Professional motion graphics and animation studio creating immersive visual experiences for global brands."
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/excited-vlogger-records-video-using-professional-gear-his-social-media-audience-social-media-podcast-review-blogging-vlogging-digital-internet-web-era-influencer-recording-online-distr_482257-3665.jpg",
|
||||
alt: "Creative director portrait",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/positive-shaved-head-male-dressed-grey-suit-dark-grey-background_613910-11352.jpg",
|
||||
alt: "Marketing manager headshot",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/small-business-manager-his-workshop_23-2149094576.jpg",
|
||||
alt: "Brand designer headshot",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/man-black-suit-posing-indoors_23-2148401472.jpg",
|
||||
alt: "Startup founder portrait",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-young-confident-man_176474-85918.jpg",
|
||||
alt: "Portrait of a young confident man",
|
||||
},
|
||||
{ src: "http://img.b2bpic.net/free-photo/excited-vlogger-records-video-using-professional-gear-his-social-media-audience-social-media-podcast-review-blogging-vlogging-digital-internet-web-era-influencer-recording-online-distr_482257-3665.jpg", alt: "Creative director portrait" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/positive-shaved-head-male-dressed-grey-suit-dark-grey-background_613910-11352.jpg", alt: "Marketing manager headshot" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/small-business-manager-his-workshop_23-2149094576.jpg", alt: "Brand designer headshot" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/man-black-suit-posing-indoors_23-2148401472.jpg", alt: "Startup founder portrait" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/portrait-young-confident-man_176474-85918.jpg", alt: "Portrait of a young confident man" },
|
||||
]}
|
||||
avatarText="Trusted by 50+ Global Brands"
|
||||
buttons={[
|
||||
{
|
||||
text: "View Portfolio",
|
||||
href: "#works",
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "View Portfolio", href: "#works" }]}
|
||||
buttonAnimation="slide-up"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "2D Animation",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "3D Motion Graphics",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Visual Effects",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Brand Motion",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Interactive Media",
|
||||
},
|
||||
{ type: "text", text: "2D Animation" },
|
||||
{ type: "text", text: "3D Motion Graphics" },
|
||||
{ type: "text", text: "Visual Effects" },
|
||||
{ type: "text", text: "Brand Motion" },
|
||||
{ type: "text", text: "Interactive Media" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -113,9 +71,7 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
title="Crafting Motion"
|
||||
description={[
|
||||
"We specialize in high-end 2D and 3D motion design that pushes the boundaries of digital storytelling.",
|
||||
"Our process is built on collaboration, creativity, and technical precision to bring your brand to life.",
|
||||
]}
|
||||
"We specialize in high-end 2D and 3D motion design that pushes the boundaries of digital storytelling.", "Our process is built on collaboration, creativity, and technical precision to bring your brand to life."]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -126,60 +82,12 @@ export default function LandingPage() {
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
brand: "Brand",
|
||||
name: "Commercial Promo",
|
||||
price: "Featured",
|
||||
rating: 5,
|
||||
reviewCount: "12",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blue-white-texture-paint-background_23-2148097737.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
brand: "Tech",
|
||||
name: "Data Viz",
|
||||
price: "Featured",
|
||||
rating: 5,
|
||||
reviewCount: "8",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/marbled-blue-abstract-background-liquid-marble-pattern_1258-99750.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
brand: "Studio",
|
||||
name: "Brand Identity",
|
||||
price: "Featured",
|
||||
rating: 5,
|
||||
reviewCount: "15",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/geometrics-arrangement-with-3d-shapes_23-2149049003.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
brand: "Education",
|
||||
name: "Training Series",
|
||||
price: "Featured",
|
||||
rating: 5,
|
||||
reviewCount: "9",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/liquid-marbling-paint-texture-background-fluid-painting-abstract-texture-intensive-color-mix-wallpaper_1258-90715.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
brand: "Music",
|
||||
name: "Music Video",
|
||||
price: "Featured",
|
||||
rating: 5,
|
||||
reviewCount: "22",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-light-painting-dark_23-2149627896.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
brand: "App",
|
||||
name: "UI Animation",
|
||||
price: "Featured",
|
||||
rating: 5,
|
||||
reviewCount: "11",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendered-abstract-design-elements-assortment_23-2148996792.jpg",
|
||||
},
|
||||
{ id: "p1", brand: "Brand", name: "Commercial Promo", price: "Featured", rating: 5, reviewCount: "12", imageSrc: "http://img.b2bpic.net/free-photo/blue-white-texture-paint-background_23-2148097737.jpg" },
|
||||
{ id: "p2", brand: "Tech", name: "Data Viz", price: "Featured", rating: 5, reviewCount: "8", imageSrc: "http://img.b2bpic.net/free-photo/marbled-blue-abstract-background-liquid-marble-pattern_1258-99750.jpg" },
|
||||
{ id: "p3", brand: "Studio", name: "Brand Identity", price: "Featured", rating: 5, reviewCount: "15", imageSrc: "http://img.b2bpic.net/free-photo/geometrics-arrangement-with-3d-shapes_23-2149049003.jpg" },
|
||||
{ id: "p4", brand: "Education", name: "Training Series", price: "Featured", rating: 5, reviewCount: "9", imageSrc: "http://img.b2bpic.net/free-photo/liquid-marbling-paint-texture-background-fluid-painting-abstract-texture-intensive-color-mix-wallpaper_1258-90715.jpg" },
|
||||
{ id: "p5", brand: "Music", name: "Music Video", price: "Featured", rating: 5, reviewCount: "22", imageSrc: "http://img.b2bpic.net/free-photo/abstract-light-painting-dark_23-2149627896.jpg" },
|
||||
{ id: "p6", brand: "App", name: "UI Animation", price: "Featured", rating: 5, reviewCount: "11", imageSrc: "http://img.b2bpic.net/free-photo/3d-rendered-abstract-design-elements-assortment_23-2148996792.jpg" },
|
||||
]}
|
||||
title="Selected Works"
|
||||
description="A curated collection of our most recent motion graphics and animation projects."
|
||||
@@ -193,27 +101,9 @@ export default function LandingPage() {
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "150+",
|
||||
title: "Projects Completed",
|
||||
description: "Successful deliveries worldwide",
|
||||
icon: Award,
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "50+",
|
||||
title: "Happy Clients",
|
||||
description: "Long-term partnerships formed",
|
||||
icon: Users,
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "12",
|
||||
title: "Awards Won",
|
||||
description: "Industry recognition for quality",
|
||||
icon: Trophy,
|
||||
},
|
||||
{ id: "m1", value: "150+", title: "Projects Completed", description: "Successful deliveries worldwide", icon: Award },
|
||||
{ id: "m2", value: "50+", title: "Happy Clients", description: "Long-term partnerships formed", icon: Users },
|
||||
{ id: "m3", value: "12", title: "Awards Won", description: "Industry recognition for quality", icon: Trophy },
|
||||
]}
|
||||
title="By The Numbers"
|
||||
description="Our impact across industries through the power of movement."
|
||||
@@ -227,27 +117,9 @@ export default function LandingPage() {
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Concepting",
|
||||
description: "Brainstorming and visual scripting",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-neon-background_23-2150737847.jpg",
|
||||
titleImageSrc: "http://img.b2bpic.net/free-photo/liquid-marbling-paint-texture-background-fluid-painting-abstract-texture-intensive-color-mix-wallpaper_1258-94962.jpg",
|
||||
buttonText: "Read More",
|
||||
},
|
||||
{
|
||||
title: "Storyboarding",
|
||||
description: "Visualizing your narrative",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/rendering-abstract-futuristic-background-with-glowing-neon-blue-lights_181624-19824.jpg",
|
||||
titleImageSrc: "http://img.b2bpic.net/free-photo/broccoli-silhouette-isolated-black_171337-11068.jpg",
|
||||
buttonText: "Read More",
|
||||
},
|
||||
{
|
||||
title: "Final Render",
|
||||
description: "High fidelity delivery",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/geometrical-shape-table_23-2148569945.jpg",
|
||||
titleImageSrc: "http://img.b2bpic.net/free-vector/minimal-geometric-background-gradient-shapes-composition-applicable-gift-card-poster-wall-poster-template-landing-page-ui-ux-coverbook-baner-social-media-posted_272375-1539.jpg",
|
||||
buttonText: "Read More",
|
||||
},
|
||||
{ title: "Concepting", description: "Brainstorming and visual scripting", imageSrc: "http://img.b2bpic.net/free-photo/abstract-neon-background_23-2150737847.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/liquid-marbling-paint-texture-background-fluid-painting-abstract-texture-intensive-color-mix-wallpaper_1258-94962.jpg", buttonText: "Read More" },
|
||||
{ title: "Storyboarding", description: "Visualizing your narrative", imageSrc: "http://img.b2bpic.net/free-photo/rendering-abstract-futuristic-background-with-glowing-neon-blue-lights_181624-19824.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/broccoli-silhouette-isolated-black_171337-11068.jpg", buttonText: "Read More" },
|
||||
{ title: "Final Render", description: "High fidelity delivery", imageSrc: "http://img.b2bpic.net/free-photo/geometrical-shape-table_23-2148569945.jpg", titleImageSrc: "http://img.b2bpic.net/free-vector/minimal-geometric-background-gradient-shapes-composition-applicable-gift-card-poster-wall-poster-template-landing-page-ui-ux-coverbook-baner-social-media-posted_272375-1539.jpg", buttonText: "Read More" },
|
||||
]}
|
||||
title="Our Creative Process"
|
||||
description="How we turn complex ideas into fluid animations."
|
||||
@@ -260,46 +132,11 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Sarah Johnson",
|
||||
handle: "@sarah",
|
||||
testimonial: "Exceptional work on our product launch video. Highly recommend.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-holding-vinyl-record_23-2149215534.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Michael Chen",
|
||||
handle: "@mike",
|
||||
testimonial: "The animation quality exceeded all of our expectations.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-blonde-businesswoman-formal-dressed-isolated-dark-textured-background_613910-5399.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Emily Rodriguez",
|
||||
handle: "@emily",
|
||||
testimonial: "Professional, fast, and extremely creative throughout.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-entrepreneur-with-corporate-job-looking-camera-business-office-portrait-young-man-preparing-work-planning-development-industry-with-technology-computer_482257-29387.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "David Kim",
|
||||
handle: "@david",
|
||||
testimonial: "They captured our vision perfectly on the first draft.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Jessica Lee",
|
||||
handle: "@jess",
|
||||
testimonial: "Best motion graphic investment we have made this year.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/worker-preparing-work-with-grinding-machine-metal_651396-2846.jpg",
|
||||
},
|
||||
{ id: "t1", name: "Sarah Johnson", handle: "@sarah", testimonial: "Exceptional work on our product launch video. Highly recommend.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-holding-vinyl-record_23-2149215534.jpg" },
|
||||
{ id: "t2", name: "Michael Chen", handle: "@mike", testimonial: "The animation quality exceeded all of our expectations.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-blonde-businesswoman-formal-dressed-isolated-dark-textured-background_613910-5399.jpg" },
|
||||
{ id: "t3", name: "Emily Rodriguez", handle: "@emily", testimonial: "Professional, fast, and extremely creative throughout.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-entrepreneur-with-corporate-job-looking-camera-business-office-portrait-young-man-preparing-work-planning-development-industry-with-technology-computer_482257-29387.jpg" },
|
||||
{ id: "t4", name: "David Kim", handle: "@david", testimonial: "They captured our vision perfectly on the first draft.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg" },
|
||||
{ id: "t5", name: "Jessica Lee", handle: "@jess", testimonial: "Best motion graphic investment we have made this year.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/worker-preparing-work-with-grinding-machine-metal_651396-2846.jpg" },
|
||||
]}
|
||||
showRating={true}
|
||||
title="Client Stories"
|
||||
@@ -312,21 +149,9 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "How long does a project take?",
|
||||
content: "Depending on complexity, between 2 to 6 weeks.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Do you provide source files?",
|
||||
content: "Yes, all source files are delivered upon completion.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "What tools do you use?",
|
||||
content: "We primarily work in After Effects, Cinema 4D, and Blender.",
|
||||
},
|
||||
{ id: "f1", title: "How long does a project take?", content: "Depending on complexity, between 2 to 6 weeks." },
|
||||
{ id: "f2", title: "Do you provide source files?", content: "Yes, all source files are delivered upon completion." },
|
||||
{ id: "f3", title: "What tools do you use?", content: "We primarily work in After Effects, Cinema 4D, and Blender." },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/painter-cute-young-blonde-painter-girl-pretty-looking-up-thinking_140725-163058.jpg"
|
||||
title="Frequently Asked"
|
||||
@@ -339,9 +164,7 @@ export default function LandingPage() {
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
tag="Contact Us"
|
||||
title="Let's Get Moving"
|
||||
description="Ready to discuss your next motion graphic animation project? Reach out today."
|
||||
@@ -353,21 +176,9 @@ export default function LandingPage() {
|
||||
logoText="MotionPixel"
|
||||
copyrightText="© 2025 MotionPixel Studio"
|
||||
socialLinks={[
|
||||
{
|
||||
icon: Twitter,
|
||||
href: "#",
|
||||
ariaLabel: "Twitter",
|
||||
},
|
||||
{
|
||||
icon: Instagram,
|
||||
href: "#",
|
||||
ariaLabel: "Instagram",
|
||||
},
|
||||
{
|
||||
icon: Linkedin,
|
||||
href: "#",
|
||||
ariaLabel: "LinkedIn",
|
||||
},
|
||||
{ icon: Twitter, href: "#", ariaLabel: "Twitter" },
|
||||
{ icon: Instagram, href: "#", ariaLabel: "Instagram" },
|
||||
{ icon: Linkedin, href: "#", ariaLabel: "LinkedIn" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user