|
|
|
|
@@ -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?_wi=1", imageAlt: "Gradient UI design inspiration"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
imageSrc: "http://img.b2bpic.net/free-photo/painting-watercolors-high-angle_23-2149386335.jpg?_wi=1", imageAlt: "Artistic design elements"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169842.jpg?_wi=1", 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?_wi=2", 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?_wi=2", 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?_wi=2", 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"
|
|
|
|
|
@@ -158,7 +181,7 @@ export default function LandingPage() {
|
|
|
|
|
|
|
|
|
|
<div id="contact" data-section="contact">
|
|
|
|
|
<ContactText
|
|
|
|
|
text="Ready to transform your digital presence with fluid motion design? Let's create something extraordinary together that captivates your audience."
|
|
|
|
|
text="Transform your digital presence with fluid motion design."
|
|
|
|
|
animationType="background-highlight"
|
|
|
|
|
buttons={[
|
|
|
|
|
{ text: "Begin Your Journey", href: "#" },
|
|
|
|
|
|
