bender/4bb82cc3-c0f7-460f-9036-4b42a38f9bb0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_3 into main #5

Merged
bender merged 2 commits from version_3 into main 2026-03-05 04:03:52 +00:00
Conversation 0 Commits 2 Files Changed 2 +48 -23
2 changed files with 48 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/layout.tsx
View File

@@ -23,11 +23,13 @@ const lato = Lato({
export const metadata: Metadata = {
title: "Motion Design Studio - Fluid Digital Experiences", description: "Experience design in motion. Explore our portfolio of smooth animations, fluid interactions, and immersive digital journeys that transform storytelling.", keywords: "motion design, animation, interaction design, digital experience, creative studio, smooth scrolling, UI animation", metadataBase: new URL("https://motiondesignstudio.com"),
alternates: {
canonical: "https://motiondesignstudio.com"},
canonical: "https://motiondesignstudio.com"
},
openGraph: {
title: "Motion Design Studio - Design in Motion", description: "Discover how smooth interactions transform storytelling into unforgettable experiences.", url: "https://motiondesignstudio.com", siteName: "Motion Design Studio", type: "website", images: [
{
url: "http://img.b2bpic.net/free-photo/neon-lights-swirling_23-2147785920.jpg", alt: "Motion Design Studio Portfolio"},
url: "http://img.b2bpic.net/free-photo/neon-lights-swirling_23-2147785920.jpg", alt: "Motion Design Studio Portfolio"
},
],
},
twitter: {

65
src/app/page.tsx
View File

@@ -2,7 +2,7 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import HeroSplitDualMedia from "@/components/sections/hero/HeroSplitDualMedia";
import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
import FeatureCardSix from "@/components/sections/feature/FeatureCardSix";
import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
@@ -40,9 +40,9 @@ export default function LandingPage() {
</div>
<div id="hero" data-section="hero">
<HeroSplitDualMedia
<HeroBillboardGallery
title="Experience Design in Motion"
description="Scroll horizontally through a seamlessly animated journey. Discover how smooth interactions transform storytelling into unforgettable experiences."
description="Scroll through our gallery of stunning motion design work. Discover how smooth interactions transform storytelling into unforgettable experiences."
tag="Digital Experiences"
tagIcon={Sparkles}
tagAnimation="slide-up"
@@ -54,13 +54,22 @@ export default function LandingPage() {
buttonAnimation="slide-up"
mediaItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/neon-lights-swirling_23-2147785920.jpg", imageAlt: "Motion design animation showcase"},
imageSrc: "http://img.b2bpic.net/free-photo/neon-lights-swirling_23-2147785920.jpg", imageAlt: "Motion design animation showcase"
},
{
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-items-redecorating-house-with-color-palette_23-2148815774.jpg", imageAlt: "Creative studio workspace with design tools"},
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-items-redecorating-house-with-color-palette_23-2148815774.jpg", imageAlt: "Creative studio workspace with design tools"
},
{
imageSrc: "http://img.b2bpic.net/free-vector/gradient-ui-ux-landing-page_52683-69729.jpg", imageAlt: "Gradient UI design inspiration"
},
{
imageSrc: "http://img.b2bpic.net/free-photo/painting-watercolors-high-angle_23-2149386335.jpg", imageAlt: "Artistic design elements"
},
{
imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169842.jpg", imageAlt: "UX interface design mockup"
}
]}
mediaAnimation="slide-up"
rating={5}
ratingText="Trusted by 150+ brands worldwide"
/>
</div>
@@ -74,13 +83,16 @@ export default function LandingPage() {
features={[
{
id: 1,
title: "Brand Identity & Motion", description: "Complete rebrand with custom animation systems for a tech startup. Smooth transitions between brand touchpoints create a cohesive visual language.", imageSrc: "http://img.b2bpic.net/free-vector/gradient-ui-ux-landing-page_52683-69729.jpg", imageAlt: "Brand identity motion design project"},
title: "Brand Identity & Motion", description: "Complete rebrand with custom animation systems for a tech startup. Smooth transitions between brand touchpoints create a cohesive visual language.", imageSrc: "http://img.b2bpic.net/free-vector/gradient-ui-ux-landing-page_52683-69729.jpg", imageAlt: "Brand identity motion design project"
},
{
id: 2,
title: "Interactive Product Experience", description: "Full product redesign with micro-interactions and scroll-triggered animations. Users engage with every element through thoughtful motion design.", imageSrc: "http://img.b2bpic.net/free-photo/painting-watercolors-high-angle_23-2149386335.jpg", imageAlt: "Interactive product experience design"},
title: "Interactive Product Experience", description: "Full product redesign with micro-interactions and scroll-triggered animations. Users engage with every element through thoughtful motion design.", imageSrc: "http://img.b2bpic.net/free-photo/painting-watercolors-high-angle_23-2149386335.jpg", imageAlt: "Interactive product experience design"
},
{
id: 3,
title: "Website Animation Suite", description: "Custom animation library for e-commerce platform. Parallax effects and scroll animations increase engagement by 45% and time-on-site by 3x.", imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169842.jpg", imageAlt: "Website animation and interaction design"},
title: "Website Animation Suite", description: "Custom animation library for e-commerce platform. Parallax effects and scroll animations increase engagement by 45% and time-on-site by 3x.", imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169842.jpg", imageAlt: "Website animation and interaction design"
},
]}
textboxLayout="default"
useInvertedBackground={true}
@@ -96,9 +108,11 @@ export default function LandingPage() {
tagAnimation="opacity"
metrics={[
{
id: "1", value: "+45%", title: "Engagement Increase", description: "Average boost in user interaction metrics", imageSrc: "http://img.b2bpic.net/free-photo/business-graphs-figures-laptop-left-open-desk-empty-office_482257-84546.jpg", imageAlt: "Engagement analytics dashboard"},
id: "1", value: "+45%", title: "Engagement Increase", description: "Average boost in user interaction metrics", imageSrc: "http://img.b2bpic.net/free-photo/business-graphs-figures-laptop-left-open-desk-empty-office_482257-84546.jpg", imageAlt: "Engagement analytics dashboard"
},
{
id: "2", value: "4.9/5", title: "Client Satisfaction", description: "Average rating across all completed projects", imageSrc: "http://img.b2bpic.net/free-photo/collage-customer-experience-concept_23-2149367144.jpg", imageAlt: "Client satisfaction metrics"},
id: "2", value: "4.9/5", title: "Client Satisfaction", description: "Average rating across all completed projects", imageSrc: "http://img.b2bpic.net/free-photo/collage-customer-experience-concept_23-2149367144.jpg", imageAlt: "Client satisfaction metrics"
},
]}
animationType="slide-up"
textboxLayout="default"
@@ -115,17 +129,23 @@ export default function LandingPage() {
tagAnimation="blur-reveal"
testimonials={[
{
id: "1", name: "Sarah Chen", handle: "@sarahchen_design", testimonial: "Their motion design completely transformed how our users interact with our platform. The animations feel natural and enhance every user journey beautifully.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=1", imageAlt: "Sarah Chen"},
id: "1", name: "Sarah Chen", handle: "@sarahchen_design", testimonial: "Their motion design completely transformed how our users interact with our platform. The animations feel natural and enhance every user journey beautifully.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=1", imageAlt: "Sarah Chen"
},
{
id: "2", name: "Marcus Rodriguez", handle: "@mrodriguez_brand", testimonial: "Exceptional attention to detail in every animation frame. They truly understand how motion can elevate a brand experience to the next level.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-businessman-holding-bottle-beer-after-work-office-fun-activity-with-colleagues-cheerful-person-drinking-alcoholic-beverage-while-celebrating-with-friends-after-hours_482257-27455.jpg", imageAlt: "Marcus Rodriguez"},
id: "2", name: "Marcus Rodriguez", handle: "@mrodriguez_brand", testimonial: "Exceptional attention to detail in every animation frame. They truly understand how motion can elevate a brand experience to the next level.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-businessman-holding-bottle-beer-after-work-office-fun-activity-with-colleagues-cheerful-person-drinking-alcoholic-beverage-while-celebrating-with-friends-after-hours_482257-27455.jpg", imageAlt: "Marcus Rodriguez"
},
{
id: "3", name: "Elena Volkova", handle: "@elenavolkova_co", testimonial: "Working with them was seamless. They delivered smooth, performant animations that delighted our users and increased our conversion rates significantly.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=2", imageAlt: "Elena Volkova"},
id: "3", name: "Elena Volkova", handle: "@elenavolkova_co", testimonial: "Working with them was seamless. They delivered smooth, performant animations that delighted our users and increased our conversion rates significantly.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=2", imageAlt: "Elena Volkova"
},
{
id: "4", name: "James Park", handle: "@jpark_creative", testimonial: "Their motion design approach is innovative and thoughtful. Every animation serves a purpose and enhances the overall user experience.", imageSrc: "http://img.b2bpic.net/free-photo/inspiring-new-boss_1098-93.jpg?_wi=1", imageAlt: "James Park"},
id: "4", name: "James Park", handle: "@jpark_creative", testimonial: "Their motion design approach is innovative and thoughtful. Every animation serves a purpose and enhances the overall user experience.", imageSrc: "http://img.b2bpic.net/free-photo/inspiring-new-boss_1098-93.jpg?_wi=1", imageAlt: "James Park"
},
{
id: "5", name: "Amelia Thompson", handle: "@ameliathompson_", testimonial: "Outstanding portfolio of work. The horizontal scrolling experience they created for us became our most engaging feature. Highly recommended.", imageSrc: "http://img.b2bpic.net/free-photo/inspiring-new-boss_1098-93.jpg?_wi=2", imageAlt: "Amelia Thompson"},
id: "5", name: "Amelia Thompson", handle: "@ameliathompson_", testimonial: "Outstanding portfolio of work. The horizontal scrolling experience they created for us became our most engaging feature. Highly recommended.", imageSrc: "http://img.b2bpic.net/free-photo/inspiring-new-boss_1098-93.jpg?_wi=2", imageAlt: "Amelia Thompson"
},
{
id: "6", name: "David Kim", handle: "@davidkim_design", testimonial: "The way they bring motion design concepts to life is truly inspiring. Our stakeholders were amazed by the final result.", imageSrc: "http://img.b2bpic.net/free-photo/smiley-tattoo-artist-indoors-side-view_23-2149445974.jpg", imageAlt: "David Kim"},
id: "6", name: "David Kim", handle: "@davidkim_design", testimonial: "The way they bring motion design concepts to life is truly inspiring. Our stakeholders were amazed by the final result.", imageSrc: "http://img.b2bpic.net/free-photo/smiley-tattoo-artist-indoors-side-view_23-2149445974.jpg", imageAlt: "David Kim"
},
]}
animationType="opacity"
textboxLayout="default"
@@ -143,11 +163,14 @@ export default function LandingPage() {
tagAnimation="blur-reveal"
blogs={[
{
id: "1", category: "Design Principles", title: "The Psychology of Smooth Animations", excerpt: "Discover how easing functions and motion timing influence user perception and engagement across digital experiences.", imageSrc: "http://img.b2bpic.net/free-photo/back-view-image-concentrated-young-lady-designer_171337-15698.jpg", imageAlt: "Animation principles and easing functions", authorName: "Alex Bennett", authorAvatar: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", date: "15 Jan 2025"},
id: "1", category: "Design Principles", title: "The Psychology of Smooth Animations", excerpt: "Discover how easing functions and motion timing influence user perception and engagement across digital experiences.", imageSrc: "http://img.b2bpic.net/free-photo/back-view-image-concentrated-young-lady-designer_171337-15698.jpg", imageAlt: "Animation principles and easing functions", authorName: "Alex Bennett", authorAvatar: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", date: "15 Jan 2025"
},
{
id: "2", category: "Interaction Design", title: "Horizontal Scrolling: Beyond the Ordinary", excerpt: "Why horizontal scroll layouts are perfect for storytelling and how to implement them for maximum engagement.", imageSrc: "http://img.b2bpic.net/free-photo/unrecognizable-colleagues-looking-tablet-trying-different-icons_1098-20485.jpg", imageAlt: "Horizontal scrolling interface design", authorName: "Jordan Lee", authorAvatar: "http://img.b2bpic.net/free-photo/portrait-businessman-holding-bottle-beer-after-work-office-fun-activity-with-colleagues-cheerful-person-drinking-alcoholic-beverage-while-celebrating-with-friends-after-hours_482257-27455.jpg", date: "12 Jan 2025"},
id: "2", category: "Interaction Design", title: "Horizontal Scrolling: Beyond the Ordinary", excerpt: "Why horizontal scroll layouts are perfect for storytelling and how to implement them for maximum engagement.", imageSrc: "http://img.b2bpic.net/free-photo/unrecognizable-colleagues-looking-tablet-trying-different-icons_1098-20485.jpg", imageAlt: "Horizontal scrolling interface design", authorName: "Jordan Lee", authorAvatar: "http://img.b2bpic.net/free-photo/portrait-businessman-holding-bottle-beer-after-work-office-fun-activity-with-colleagues-cheerful-person-drinking-alcoholic-beverage-while-celebrating-with-friends-after-hours_482257-27455.jpg", date: "12 Jan 2025"
},
{
id: "3", category: "Technical Innovation", title: "Performance-Optimized Motion Design", excerpt: "Best practices for creating beautiful animations without sacrificing performance or accessibility.", imageSrc: "http://img.b2bpic.net/free-vector/web-design-concept_23-2147839744.jpg", imageAlt: "Motion design performance optimization", authorName: "Casey Morrison", authorAvatar: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", date: "08 Jan 2025"},
id: "3", category: "Technical Innovation", title: "Performance-Optimized Motion Design", excerpt: "Best practices for creating beautiful animations without sacrificing performance or accessibility.", imageSrc: "http://img.b2bpic.net/free-vector/web-design-concept_23-2147839744.jpg", imageAlt: "Motion design performance optimization", authorName: "Casey Morrison", authorAvatar: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", date: "08 Jan 2025"
},
]}
animationType="scale-rotate"
textboxLayout="default"