Merge version_1 into main #1
482
src/app/page.tsx
482
src/app/page.tsx
@@ -20,353 +20,163 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="elastic-effect"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
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: "Features",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Pricing",
|
||||
id: "pricing",
|
||||
},
|
||||
{
|
||||
name: "FAQ",
|
||||
id: "faq",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="AI Step"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="AI Step"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitTestimonial
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "glowing-orb",
|
||||
}}
|
||||
title="Master the Future of AI Development"
|
||||
description="Our step-by-step platform guides you from prototype to production, simplifying AI implementation for modern teams."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Alice Chen",
|
||||
handle: "@alice",
|
||||
testimonial: "AI Step transformed our pipeline.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg",
|
||||
},
|
||||
{
|
||||
name: "Bob Smith",
|
||||
handle: "@bob",
|
||||
testimonial: "Intuitive and powerful platform.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-man-model-with-smile-black-fashionable-leather-jacket-colorful-pink-neon-lights_231208-14379.jpg",
|
||||
},
|
||||
{
|
||||
name: "Charlie Day",
|
||||
handle: "@char",
|
||||
testimonial: "The best step-by-step AI tool.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-african-american-man-posing-library_74855-1619.jpg",
|
||||
},
|
||||
{
|
||||
name: "Diana Ross",
|
||||
handle: "@diana",
|
||||
testimonial: "Unmatched guidance for AI teams.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-joyful-woman-with-dark-curly-hair-standing-near-table-happily-showing-fashion-sketches-laptop-while-spending-time-modern-cozy-workshop-with-big-windows_574295-496.jpg",
|
||||
},
|
||||
{
|
||||
name: "Elena V.",
|
||||
handle: "@elena",
|
||||
testimonial: "Incredible acceleration for our AI models.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-working-business-with-computer_482257-20185.jpg",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/3d-abstract-network-communications-technology-background-with-flowing-particles_1048-16830.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/businesswoman-glasses-portrait_1262-1461.jpg",
|
||||
alt: "Person 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",
|
||||
alt: "Person 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/positive-confident-businessman-posing-outside_74855-1183.jpg",
|
||||
alt: "Person 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/grayscale-photo-smiling-woman-wearing-turtleneck-top_250224-182.jpg",
|
||||
alt: "Person 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-portrait-attractive-male-model-color-flash-light_158595-5105.jpg",
|
||||
alt: "Person 5",
|
||||
},
|
||||
]}
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Deploy Faster",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Secure Infrastructure",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Scalable Models",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Automated Workflows",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Enterprise Ready",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitTestimonial
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "glowing-orb" }}
|
||||
title="Master the Future of AI Development"
|
||||
description="Our step-by-step platform guides you from prototype to production, simplifying AI implementation for modern teams."
|
||||
testimonials={[
|
||||
{ name: "Alice Chen", handle: "@alice", testimonial: "AI Step transformed our pipeline.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg" },
|
||||
{ name: "Bob Smith", handle: "@bob", testimonial: "Intuitive and powerful platform.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-man-model-with-smile-black-fashionable-leather-jacket-colorful-pink-neon-lights_231208-14379.jpg" },
|
||||
{ name: "Charlie Day", handle: "@char", testimonial: "The best step-by-step AI tool.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiling-african-american-man-posing-library_74855-1619.jpg" },
|
||||
{ name: "Diana Ross", handle: "@diana", testimonial: "Unmatched guidance for AI teams.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-joyful-woman-with-dark-curly-hair-standing-near-table-happily-showing-fashion-sketches-laptop-while-spending-time-modern-cozy-workshop-with-big-windows_574295-496.jpg" },
|
||||
{ name: "Elena V.", handle: "@elena", testimonial: "Incredible acceleration for our AI models.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-working-business-with-computer_482257-20185.jpg" },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/3d-abstract-network-communications-technology-background-with-flowing-particles_1048-16830.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/businesswoman-glasses-portrait_1262-1461.jpg", alt: "Person 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", alt: "Person 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/positive-confident-businessman-posing-outside_74855-1183.jpg", alt: "Person 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/grayscale-photo-smiling-woman-wearing-turtleneck-top_250224-182.jpg", alt: "Person 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/close-up-portrait-attractive-male-model-color-flash-light_158595-5105.jpg", alt: "Person 5" },
|
||||
]}
|
||||
marqueeItems={[{ type: "text", text: "Deploy Faster" }, { type: "text", text: "Secure Infrastructure" }, { type: "text", text: "Scalable Models" }, { type: "text", text: "Automated Workflows" }, { type: "text", text: "Enterprise Ready" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SplitAbout
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
title="Built for AI Excellence"
|
||||
description="We believe every business can become an AI business. Our methodology breaks down complex machine learning deployment into simple, repeatable steps."
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "Data Readiness",
|
||||
description: "Prepare and clean datasets automatically.",
|
||||
},
|
||||
{
|
||||
title: "Model Training",
|
||||
description: "Fine-tune models for custom requirements.",
|
||||
},
|
||||
{
|
||||
title: "Automated Deployment",
|
||||
description: "Push to production in record time.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/business-economics-financial-transaction-investment-graphic-computer_53876-132148.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<SplitAbout
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
title="Built for AI Excellence"
|
||||
description="We believe every business can become an AI business. Our methodology breaks down complex machine learning deployment into simple, repeatable steps."
|
||||
bulletPoints={[
|
||||
{ title: "Data Readiness", description: "Prepare and clean datasets automatically." },
|
||||
{ title: "Model Training", description: "Fine-tune models for custom requirements." },
|
||||
{ title: "Automated Deployment", description: "Push to production in record time." },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/business-economics-financial-transaction-investment-graphic-computer_53876-132148.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardNineteen
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
tag: "Data",
|
||||
title: "Data Pipelines",
|
||||
subtitle: "Automate data collection.",
|
||||
description: "Seamlessly integrate diverse data sources into your training pipelines.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/public-speaker-ceo-hosting-business-presentation-share-vision_482257-126544.jpg",
|
||||
},
|
||||
{
|
||||
tag: "Training",
|
||||
title: "Model Studio",
|
||||
subtitle: "Visual model builder.",
|
||||
description: "Train and test models within our intuitive web-based interface.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/empty-business-office-with-cubicles-used-organizational-activity-efficiency_482257-125697.jpg",
|
||||
},
|
||||
{
|
||||
tag: "Scaling",
|
||||
title: "Cloud Scale",
|
||||
subtitle: "Auto-scaling infrastructure.",
|
||||
description: "Deploy to massive cloud clusters with just one click.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/book-pc-tablet-low-poly-wireframe-online-education-blue-background-concept-with-opened-book-digital-illustration-online-reading-courses-abstract-polygonal-image-notebook-pc_493343-29977.jpg",
|
||||
},
|
||||
]}
|
||||
title="Powerful AI Modules"
|
||||
description="Comprehensive tools for the entire AI lifecycle."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardNineteen
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ tag: "Data", title: "Data Pipelines", subtitle: "Automate data collection.", description: "Seamlessly integrate diverse data sources into your training pipelines.", imageSrc: "http://img.b2bpic.net/free-photo/public-speaker-ceo-hosting-business-presentation-share-vision_482257-126544.jpg" },
|
||||
{ tag: "Training", title: "Model Studio", subtitle: "Visual model builder.", description: "Train and test models within our intuitive web-based interface.", imageSrc: "http://img.b2bpic.net/free-photo/empty-business-office-with-cubicles-used-organizational-activity-efficiency_482257-125697.jpg" },
|
||||
{ tag: "Scaling", title: "Cloud Scale", subtitle: "Auto-scaling infrastructure.", description: "Deploy to massive cloud clusters with just one click.", imageSrc: "http://img.b2bpic.net/free-photo/book-pc-tablet-low-poly-wireframe-online-education-blue-background-concept-with-opened-book-digital-illustration-online-reading-courses-abstract-polygonal-image-notebook-pc_493343-29977.jpg" },
|
||||
]}
|
||||
title="Powerful AI Modules"
|
||||
description="Comprehensive tools for the entire AI lifecycle."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
icon: Zap,
|
||||
title: "Deployment Time",
|
||||
value: "80% Faster",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
icon: Shield,
|
||||
title: "Accuracy Rate",
|
||||
value: "99.9%",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
icon: Award,
|
||||
title: "Projects Completed",
|
||||
value: "5,000+",
|
||||
},
|
||||
]}
|
||||
title="Measurable Impact"
|
||||
description="Drive results with our proven AI frameworks."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{ id: "m1", icon: Zap, title: "Deployment Time", value: "80% Faster" },
|
||||
{ id: "m2", icon: Shield, title: "Accuracy Rate", value: "99.9%" },
|
||||
{ id: "m3", icon: Award, title: "Projects Completed", value: "5,000+" },
|
||||
]}
|
||||
title="Measurable Impact"
|
||||
description="Drive results with our proven AI frameworks."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "basic",
|
||||
badge: "Starter",
|
||||
price: "$49",
|
||||
subtitle: "For individuals and hobbyists.",
|
||||
buttons: [
|
||||
{
|
||||
text: "Get Started",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"1 Dataset",
|
||||
"Basic Models",
|
||||
"Email Support",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "pro",
|
||||
badge: "Pro",
|
||||
price: "$199",
|
||||
subtitle: "For growing AI teams.",
|
||||
buttons: [
|
||||
{
|
||||
text: "Go Pro",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"10 Datasets",
|
||||
"Custom Models",
|
||||
"Priority Support",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Flexible AI Plans"
|
||||
description="Choose the right plan to scale your development."
|
||||
/>
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{ id: "basic", badge: "Starter", price: "$49", subtitle: "For individuals and hobbyists.", buttons: [{ text: "Get Started", href: "#" }], features: ["1 Dataset", "Basic Models", "Email Support"] },
|
||||
{ id: "pro", badge: "Pro", price: "$199", subtitle: "For growing AI teams.", buttons: [{ text: "Go Pro", href: "#" }], features: ["10 Datasets", "Custom Models", "Priority Support"] },
|
||||
]}
|
||||
title="Flexible AI Plans"
|
||||
description="Choose the right plan to scale your development."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Do I need coding experience?",
|
||||
content: "Our platform is designed to be accessible for non-coders and engineers alike.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Can I export models?",
|
||||
content: "Yes, you can export to all major formats including TensorFlow and PyTorch.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Is my data secure?",
|
||||
content: "Security is our top priority with enterprise-grade encryption.",
|
||||
},
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Get clarity on our AI step-by-step process."
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{ id: "q1", title: "Do I need coding experience?", content: "Our platform is designed to be accessible for non-coders and engineers alike." },
|
||||
{ id: "q2", title: "Can I export models?", content: "Yes, you can export to all major formats including TensorFlow and PyTorch." },
|
||||
{ id: "q3", title: "Is my data secure?", content: "Security is our top priority with enterprise-grade encryption." },
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Get clarity on our AI step-by-step process."
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
useInvertedBackground={false}
|
||||
testimonial="The structured step-by-step AI deployment process finally made our team productive."
|
||||
rating={5}
|
||||
author="Sarah Miller"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/experienced-senior-female-executive-eyeglasses_1262-5027.jpg",
|
||||
alt: "Person 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/video-editor-worker-standing-front-camera-smiling-working-creative-agency-office-holding-la_482257-3426.jpg",
|
||||
alt: "Person 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/smiling-confident-manager-cafeteria_1098-20954.jpg",
|
||||
alt: "Person 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/closeup-beautiful-strict-woman-glasses_1262-1732.jpg",
|
||||
alt: "Person 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/pretty-attractive-young-mixed-race-model-with-large-afro-wearing-navy-jacket-her-naked-body-shorts_633478-1216.jpg",
|
||||
alt: "Person 5",
|
||||
},
|
||||
]}
|
||||
ratingAnimation="blur-reveal"
|
||||
avatarsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
useInvertedBackground={false}
|
||||
testimonial="The structured step-by-step AI deployment process finally made our team productive."
|
||||
rating={5}
|
||||
author="Sarah Miller"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/experienced-senior-female-executive-eyeglasses_1262-5027.jpg", alt: "Person 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/video-editor-worker-standing-front-camera-smiling-working-creative-agency-office-holding-la_482257-3426.jpg", alt: "Person 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/smiling-confident-manager-cafeteria_1098-20954.jpg", alt: "Person 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/closeup-beautiful-strict-woman-glasses_1262-1732.jpg", alt: "Person 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/pretty-attractive-young-mixed-race-model-with-large-afro-wearing-navy-jacket-her-naked-body-shorts_633478-1216.jpg", alt: "Person 5" },
|
||||
]}
|
||||
ratingAnimation="blur-reveal"
|
||||
avatarsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={true}
|
||||
title="Get Started Today"
|
||||
description="Ready to streamline your AI journey? Send us a message and we'll help you get started."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Your Email",
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Tell us about your AI project",
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/laptop_23-2148155401.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={true}
|
||||
title="Get Started Today"
|
||||
description="Ready to streamline your AI journey? Send us a message and we'll help you get started."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Your Email", required: true },
|
||||
]}
|
||||
textarea={{ name: "message", placeholder: "Tell us about your AI project" }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/laptop_23-2148155401.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="AI Step"
|
||||
copyrightText="© 2025 AI Step Inc."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard logoText="AI Step" copyrightText="© 2025 AI Step Inc." />
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user