243 lines
15 KiB
TypeScript
243 lines
15 KiB
TypeScript
"use client"
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
|
|
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
|
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
|
|
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
|
|
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
|
|
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FooterCard from '@/components/sections/footer/FooterCard';
|
|
import { Award, Shield, Sparkles, Twitter, Linkedin, Github, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="icon-arrow"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="medium"
|
|
sizing="medium"
|
|
background="none"
|
|
cardStyle="solid"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="medium"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="MotionAdmin"
|
|
navItems={[
|
|
{ name: "Home", id: "home" },
|
|
{ name: "Features", id: "features" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Testimonials", id: "testimonials" }
|
|
]}
|
|
button={{ text: "Get Started", href: "#contact" }}
|
|
animateOnLoad={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroCarouselLogo
|
|
logoText="MotionAdmin"
|
|
description="Experience seamless motion control. Customize every animation with precision—easing curves, timing delays, and transition effects fully under your command. Create sophisticated, smooth animations that elevate your digital experience."
|
|
buttons={[
|
|
{ text: "Explore Now", href: "#features" },
|
|
{ text: "Learn More", href: "#about" }
|
|
]}
|
|
slides={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/entrepreneur-having-remote-discussion-with-company-team_482257-77571.jpg", imageAlt: "smooth motion animation interface"
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-vector/antigravity-people-background_23-2148072019.jpg", imageAlt: "elegant motion transitions UI"
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-vector/user-panel-infographic-template-dashboard_23-2148378205.jpg", imageAlt: "custom animation controls panel"
|
|
}
|
|
]}
|
|
autoplayDelay={5000}
|
|
showDimOverlay={false}
|
|
ariaLabel="Hero carousel showcasing motion customization platform"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<InlineImageSplitTextAbout
|
|
heading={[
|
|
{ type: "text", content: "Professional Motion Control at Your Fingertips" },
|
|
{
|
|
type: "image", src: "http://img.b2bpic.net/free-vector/dashboard-admin-panel-template_23-2148372587.jpg", alt: "motion customization platform"
|
|
}
|
|
]}
|
|
buttons={[
|
|
{ text: "Get Started Free", href: "#contact" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
ariaLabel="About section describing motion control capabilities"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features-primary" data-section="features-primary">
|
|
<FeatureCardOne
|
|
title="Powerful Motion Customization"
|
|
description="Adjust every aspect of your animations with intuitive controls. Modify easing functions, timing parameters, and transition effects in real-time."
|
|
tag="Core Features"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="opacity"
|
|
features={[
|
|
{
|
|
title: "Easing Control", description: "Choose from predefined easing curves or create custom functions. Fine-tune animations with ease-in, ease-out, and custom bezier curves.", imageSrc: "http://img.b2bpic.net/free-vector/flat-design-ui-sliders-collection_23-2149196609.jpg", imageAlt: "smooth easing animation effects"
|
|
},
|
|
{
|
|
title: "Timing Management", description: "Precise control over animation duration and delays. Synchronize multiple animations for complex, coordinated sequences.", imageSrc: "http://img.b2bpic.net/free-vector/gradient-ui-ux-elements-collection_23-2149047009.jpg", imageAlt: "admin panel motion settings"
|
|
},
|
|
{
|
|
title: "Real-time Preview", description: "See your animations update instantly. Preview changes before deployment across your entire application.", imageSrc: "http://img.b2bpic.net/free-photo/abstract-vaporwave-portrait-man_23-2148950762.jpg", imageAlt: "real-time animation preview interface"
|
|
}
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
ariaLabel="Primary feature cards for motion customization"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features-mobile" data-section="features-mobile">
|
|
<FeatureCardNine
|
|
title="Responsive Animation Experience"
|
|
description="Optimize animations for every device. Our platform ensures smooth, consistent motion across desktop, tablet, and mobile platforms."
|
|
tag="Mobile First"
|
|
tagIcon={Zap}
|
|
tagAnimation="blur-reveal"
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "Desktop Excellence", description: "High-performance animations on desktop with full feature access and maximum customization.", buttons: [{ text: "View Desktop Features" }],
|
|
phoneOne: {
|
|
imageSrc: "http://img.b2bpic.net/free-vector/augmented-reality-background-flat-style_23-2147800834.jpg?_wi=1", imageAlt: "mobile animation showcase"
|
|
},
|
|
phoneTwo: {
|
|
imageSrc: "http://img.b2bpic.net/free-vector/workout-tracker-app-interface_23-2148661909.jpg?_wi=1", imageAlt: "mobile admin controls"
|
|
}
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Mobile Optimization", description: "Lightweight, efficient animations optimized for mobile devices. Maintain performance while delivering premium motion experiences.", buttons: [{ text: "Explore Mobile" }],
|
|
phoneOne: {
|
|
imageSrc: "http://img.b2bpic.net/free-vector/augmented-reality-background-flat-style_23-2147800834.jpg?_wi=2", imageAlt: "mobile animation interface"
|
|
},
|
|
phoneTwo: {
|
|
imageSrc: "http://img.b2bpic.net/free-vector/workout-tracker-app-interface_23-2148661909.jpg?_wi=2", imageAlt: "mobile control panel"
|
|
}
|
|
}
|
|
]}
|
|
showStepNumbers={true}
|
|
animationType="scale-rotate"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
ariaLabel="Mobile and desktop feature comparison"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features-advanced" data-section="features-advanced">
|
|
<FeatureCardMedia
|
|
title="Advanced Motion Capabilities"
|
|
description="Unlock the full potential of animation technology with sophisticated tools and comprehensive controls for professional developers and designers."
|
|
tag="Enterprise Ready"
|
|
tagIcon={Shield}
|
|
tagAnimation="slide-up"
|
|
features={[
|
|
{
|
|
id: "advanced-1", title: "Motion Composition", description: "Build complex animation sequences by composing simple movements. Layer effects and create sophisticated transitions.", tag: "Composition", imageSrc: "http://img.b2bpic.net/free-vector/top-view-flat-person-sleep-position-pack_23-2148158344.jpg", imageAlt: "advanced motion composition"
|
|
},
|
|
{
|
|
id: "advanced-2", title: "Animation Library", description: "Access a comprehensive library of pre-built animations. Save and reuse custom motion patterns across projects.", tag: "Library", imageSrc: "http://img.b2bpic.net/free-vector/popular-video-bloggers-icons-set-with-cooking-painting-travel-fitness-meditation-topics_1284-27423.jpg", imageAlt: "motion library showcase"
|
|
},
|
|
{
|
|
id: "advanced-3", title: "Performance Optimization", description: "Built-in performance monitoring and optimization suggestions. Ensure smooth 60fps animations across all devices.", tag: "Performance", imageSrc: "http://img.b2bpic.net/free-photo/fantastic-light-effect-with-many-sparkles-near-water_181624-57469.jpg", imageAlt: "performance motion optimization"
|
|
}
|
|
]}
|
|
animationType="blur-reveal"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
ariaLabel="Advanced motion capabilities and enterprise features"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFive
|
|
title="Trusted by Industry Leaders"
|
|
description="Discover how forward-thinking companies use MotionAdmin to create exceptional animated experiences."
|
|
tag="Success Stories"
|
|
tagIcon={Award}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Johnson", date: "2 months ago", title: "Creative Director", quote: "MotionAdmin transformed how we approach animation. The customization options are unparalleled. Our projects now have the polish and sophistication our clients demand.", tag: "Design", avatarSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1597.jpg", avatarAlt: "Sarah Johnson, Creative Director"
|
|
},
|
|
{
|
|
id: "2", name: "Michael Chen", date: "3 weeks ago", title: "Lead Developer", quote: "The smooth transitions and admin controls are exactly what we needed. Our developers spend less time tweaking animations and more time building features.", tag: "Development", avatarSrc: "http://img.b2bpic.net/free-photo/attractive-blond-business-woman-white-shirt-grey-background_613910-11739.jpg", avatarAlt: "Michael Chen, Lead Developer"
|
|
},
|
|
{
|
|
id: "3", name: "Emily Rodriguez", date: "1 month ago", title: "Product Manager", quote: "Real-time customization makes user testing and iteration seamless. We delivered our animation overhaul 40% faster than expected.", tag: "Product", avatarSrc: "http://img.b2bpic.net/free-photo/smiling-redhead-man-with-laptop-looking-camera-cafe_1163-5162.jpg", avatarAlt: "Emily Rodriguez, Product Manager"
|
|
},
|
|
{
|
|
id: "4", name: "David Kim", date: "1 week ago", title: "Marketing Manager", quote: "The animations created with MotionAdmin significantly increased our engagement rates. It's an investment that paid for itself within weeks.", tag: "Marketing", avatarSrc: "http://img.b2bpic.net/free-photo/man-portrait-posing-loft-modern-space_158595-5368.jpg", avatarAlt: "David Kim, Marketing Manager"
|
|
},
|
|
{
|
|
id: "5", name: "Jessica Lee", date: "5 days ago", title: "UI/UX Designer", quote: "Finally, a tool that lets designers control motion without coding. The interface is intuitive and powerful. Highly recommend.", tag: "Design", avatarSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-man-with-copy-space_23-2148612949.jpg", avatarAlt: "Jessica Lee, UI/UX Designer"
|
|
},
|
|
{
|
|
id: "6", name: "Alex Martinez", date: "10 days ago", title: "Technical Lead", quote: "MotionAdmin integrates seamlessly into our workflow. The performance metrics dashboard gives us confidence in every animation deployment.", tag: "Engineering", avatarSrc: "http://img.b2bpic.net/free-photo/outdoor-construction-worker-wearing-protection-gear_23-2148784050.jpg", avatarAlt: "Alex Martinez, Technical Lead"
|
|
}
|
|
]}
|
|
ariaLabel="Customer testimonials and success stories"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
title="Start Your Motion Journey"
|
|
description="Get in touch with our team. We're here to help you create stunning, smooth animations tailored to your needs."
|
|
inputs={[
|
|
{ name: "fullName", type: "text", placeholder: "Your Full Name", required: true },
|
|
{ name: "email", type: "email", placeholder: "your@email.com", required: true },
|
|
{ name: "company", type: "text", placeholder: "Company Name", required: false }
|
|
]}
|
|
textarea={{
|
|
name: "message", placeholder: "Tell us about your project and animation goals...", rows: 5,
|
|
required: true
|
|
}}
|
|
useInvertedBackground={false}
|
|
imageSrc="http://img.b2bpic.net/free-vector/user-friendly-login-page-form-template-registration-signup_1017-49649.jpg"
|
|
imageAlt="Contact us interface"
|
|
mediaAnimation="slide-up"
|
|
mediaPosition="right"
|
|
buttonText="Send Message"
|
|
ariaLabel="Contact form for motion customization inquiries"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="MotionAdmin"
|
|
copyrightText="© 2025 MotionAdmin. All rights reserved."
|
|
socialLinks={[
|
|
{ icon: Twitter, href: "https://twitter.com", ariaLabel: "Follow us on Twitter" },
|
|
{ icon: Linkedin, href: "https://linkedin.com", ariaLabel: "Connect on LinkedIn" },
|
|
{ icon: Github, href: "https://github.com", ariaLabel: "View on GitHub" }
|
|
]}
|
|
ariaLabel="Site footer with links and social media"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |