306 lines
15 KiB
TypeScript
306 lines
15 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState } from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import { ChevronDown, ChevronUp, Code, Users, CreditCard, BarChart, Share } from 'lucide-react';
|
|
import Navbar from '@/components/Navbar/navbar';
|
|
import HowItWorks from './how-it-works';
|
|
import Footer from '@/components/footer';
|
|
|
|
const MicroSAASLanding = () => {
|
|
const [expandedIndex, setExpandedIndex] = useState(null);
|
|
const [expandedFaq, setExpandedFaq] = useState(null);
|
|
|
|
const features = [
|
|
{
|
|
icon: <Code className="w-6 h-6" />,
|
|
title: "No-Code, Fast Deployment",
|
|
description: "Our drag-and-drop builder allows you to convert your services into an AI-powered solution in minutes—no technical skills required.",
|
|
gradient: "from-pink-500/20 to-purple-500/20"
|
|
},
|
|
{
|
|
icon: <CreditCard className="w-6 h-6" />,
|
|
title: "Monetization Made Simple",
|
|
description: "Integrate subscription billing and unlock recurring revenue streams from day one.",
|
|
gradient: "from-blue-500/20 to-cyan-500/20"
|
|
},
|
|
{
|
|
icon: <Users className="w-6 h-6" />,
|
|
title: "Community-Centric Growth",
|
|
description: "Build and nurture a dedicated community around your MicroSAAS, boosting customer loyalty and creating opportunities for upselling.",
|
|
gradient: "from-green-500/20 to-emerald-500/20"
|
|
},
|
|
{
|
|
icon: <BarChart className="w-6 h-6" />,
|
|
title: "All-in-One Platform",
|
|
description: "Manage your AI agents, community interactions, and monetization strategies from a single, easy-to-use dashboard.",
|
|
gradient: "from-orange-500/20 to-yellow-500/20"
|
|
}
|
|
];
|
|
|
|
const steps = [
|
|
{
|
|
title: "Convert Your Expertise",
|
|
description: "Use our intuitive no-code tools to transform your existing service into a fully functional AI agent."
|
|
},
|
|
{
|
|
title: "Launch Your MicroSAAS",
|
|
description: "Deploy your AI agent with integrated subscription management and analytics."
|
|
},
|
|
{
|
|
title: "Grow Your Community",
|
|
description: "Engage your audience with community forums, newsletters, and in-app engagement tools."
|
|
}
|
|
];
|
|
|
|
const testimonials = [
|
|
{
|
|
quote: "I turned my consulting expertise into an AI-powered MicroSAAS, and my community has grown exponentially.",
|
|
author: "Samantha T.",
|
|
role: "Business Strategist"
|
|
},
|
|
{
|
|
quote: "The no-code builder made it incredibly easy to launch my MicroSAAS. Now, I generate consistent revenue through my engaged community.",
|
|
author: "Marcus L.",
|
|
role: "Digital Marketer"
|
|
}
|
|
];
|
|
|
|
const faqs = [
|
|
{
|
|
question: "What exactly is a MicroSAAS?",
|
|
answer: "A MicroSAAS is a lean, specialized software service delivered on a subscription basis, often powered by AI to automate tasks and provide personalized solutions."
|
|
},
|
|
{
|
|
question: "Do I need technical skills to build my MicroSAAS?",
|
|
answer: "Not at all! Our platform is designed for non-technical users with an intuitive, drag-and-drop interface and comprehensive support resources."
|
|
},
|
|
{
|
|
question: "How can I grow my community?",
|
|
answer: "Use our built-in community tools—forums, chat, newsletters—to engage your users, gather feedback, and offer premium content that drives loyalty and additional revenue."
|
|
}
|
|
];
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#080E12] text-white">
|
|
<Navbar />
|
|
{/* Hero Section */}
|
|
<div className="min-h-screen flex flex-col justify-center p-6 md:p-12 lg:p-24 relative overflow-hidden">
|
|
<div className="max-w-7xl mx-auto w-full z-10">
|
|
<h1 className="text-5xl md:text-7xl lg:text-8xl mb-6 bg-clip-text text-transparent bg-gradient-to-r from-white to-gray-400">
|
|
Build Your MicroSAAS & Grow Your Community
|
|
</h1>
|
|
<h2 className="text-2xl md:text-3xl lg:text-4xl max-w-4xl mb-12">
|
|
Transform your expertise into a dynamic, AI-powered MicroSAAS and build a thriving community around your niche offering. Our platform equips you with everything you need—from a no-code builder to integrated community tools—to launch, grow, and monetize your MicroSAAS with ease.
|
|
</h2>
|
|
<div className="flex flex-wrap gap-4">
|
|
<button className="px-8 py-3 bg-gradient-to-r from-sky-500 to-indigo-600 rounded-lg text-lg font-medium hover:from-sky-600 hover:to-indigo-700 transition-all">
|
|
Get Started
|
|
</button>
|
|
<button className="px-8 py-3 bg-gray-800 rounded-lg text-lg font-medium hover:bg-gray-700 transition-all border border-gray-700">
|
|
Book Demo
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="absolute right-0 bottom-0 w-full md:w-1/2 h-1/2 opacity-20 md:opacity-30">
|
|
<div className="w-full h-full bg-gradient-to-tr from-indigo-500 via-purple-500 to-pink-500 rounded-full blur-3xl"></div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* What is MicroSAAS Section */}
|
|
<motion.div
|
|
className="relative py-20"
|
|
initial={{ opacity: 0, scale: 0.95 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.8, ease: "easeOut" }}
|
|
>
|
|
<div className="absolute inset-0 bg-gradient-to-r from-blue-500/30 to-purple-500/30 backdrop-blur-lg rounded-xl shadow-lg" />
|
|
<div className="container w-70%] mx-auto px-6 relative text-center">
|
|
<motion.h2
|
|
className="text-5xl font-extrabold mb-6 text-white drop-shadow-lg"
|
|
initial={{ y: 20, opacity: 0 }}
|
|
animate={{ y: 0, opacity: 1 }}
|
|
transition={{ duration: 0.6, delay: 0.2 }}
|
|
>
|
|
What Is MicroSAAS?
|
|
</motion.h2>
|
|
<motion.p
|
|
className="text-lg text-gray-200 max-w-2xl mx-auto"
|
|
initial={{ y: 20, opacity: 0 }}
|
|
animate={{ y: 0, opacity: 1 }}
|
|
transition={{ duration: 0.6, delay: 0.4 }}
|
|
>
|
|
MicroSAAS is the next evolution in software services: a lean, hyper-focused, subscription-based solution that leverages AI to solve specific problems for targeted audiences.
|
|
</motion.p>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* How it Works Section */}
|
|
{/* <div className="container mx-auto px-4 py-16">
|
|
<h2 className="text-4xl font-bold mb-12">How It Works</h2>
|
|
<div className="space-y-12">
|
|
{steps.map((step, index) => (
|
|
<motion.div
|
|
key={index}
|
|
className="flex gap-8 items-start"
|
|
initial={{ opacity: 0, x: -20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ delay: index * 0.3 }}
|
|
>
|
|
<div className="flex-shrink-0 w-12 h-12 rounded-full bg-blue-600 flex items-center justify-center text-xl font-bold">
|
|
{index + 1}
|
|
</div>
|
|
<div>
|
|
<h3 className="text-2xl font-bold mb-2">{step.title}</h3>
|
|
<p className="text-gray-300">{step.description}</p>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div> */}
|
|
|
|
<HowItWorks steps={steps} />
|
|
|
|
{/* Features Section */}
|
|
<div className="max-w-6xl mx-auto space-y-4">
|
|
<h2 className="text-4xl mb-6">Features</h2>
|
|
<p className="mb-12">Everything You Need to Create, Manage, and Monetize Your AI Offerings </p>
|
|
{features.map((vertical, index) => (
|
|
<div
|
|
key={index}
|
|
className="group"
|
|
>
|
|
{/* Main row - always visible */}
|
|
<div
|
|
className={`
|
|
relative overflow-hidden
|
|
px-6 py-4 rounded-xl
|
|
cursor-pointer
|
|
transition-all duration-300
|
|
border border-purple-500/10
|
|
${expandedIndex === index ? 'bg-purple-900/20' : 'hover:bg-purple-900/10'}
|
|
`}
|
|
onClick={() => setExpandedIndex(expandedIndex === index ? null : index)}
|
|
>
|
|
<div className="flex items-center gap-6">
|
|
{/* Icon */}
|
|
<div className={`
|
|
w-10 h-10 rounded-lg
|
|
flex items-center justify-center
|
|
bg-gradient-to-br ${vertical.gradient}
|
|
transition-transform duration-300 text-white
|
|
${expandedIndex === index ? 'rotate-3' : 'group-hover:scale-105'}
|
|
`}>
|
|
{vertical.icon}
|
|
</div>
|
|
|
|
{/* Title */}
|
|
<h3 className="flex-1 text-xl text-white">{vertical.title}</h3>
|
|
|
|
{/* Expand/Collapse icon */}
|
|
<ChevronDown
|
|
className={`
|
|
w-5 h-5 text-purple-400
|
|
transition-transform duration-300
|
|
${expandedIndex === index ? 'rotate-180' : ''}
|
|
`}
|
|
/>
|
|
</div>
|
|
|
|
{/* Expanded content */}
|
|
<div className={`
|
|
grid grid-rows-[0fr]
|
|
transition-all duration-300
|
|
${expandedIndex === index ? 'grid-rows-[1fr] mt-4' : ''}
|
|
`}>
|
|
<div className="overflow-hidden">
|
|
<div className="pl-16 text-gray-400 leading-relaxed">
|
|
{vertical.description}
|
|
</div>
|
|
|
|
{/* Action button */}
|
|
<div className="pl-16 mt-4">
|
|
<button className="
|
|
px-4 py-2 rounded-lg
|
|
bg-purple-500/20 hover:bg-purple-500/30
|
|
text-purple-300 text-sm
|
|
transition-colors duration-300
|
|
">
|
|
Explore Solutions
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Testimonials Section */}
|
|
<div className="container mx-auto px-4 py-16">
|
|
<h2 className="text-4xl mb-12">Success Stories</h2>
|
|
<div className="grid md:grid-cols-2 gap-8">
|
|
{testimonials.map((testimonial, index) => (
|
|
<motion.div
|
|
key={index}
|
|
className="bg-white/5 p-6 rounded-lg hover:bg-gray-700 transition duration-100"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: index * 0.2 }}
|
|
>
|
|
<p className="text-xl mb-4">"{testimonial.quote}"</p>
|
|
<div>
|
|
<p className="font-semibold">{testimonial.author}</p>
|
|
<p className="text-gray-400">{testimonial.role}</p>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* CTA Section */}
|
|
<div className="container mx-auto px-4 py-16 text-center">
|
|
<h2 className="text-4xl mb-6">Ready to Monetize Your Expertise?</h2>
|
|
<p className="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
|
|
Unlock the power of AI and community building to create a sustainable, recurring revenue model with your very own MicroSAAS.
|
|
</p>
|
|
<button className="bg-blue-600 px-8 py-4 rounded-lg text-lg font-semibold hover:bg-blue-700 transition">
|
|
Get Started Today
|
|
</button>
|
|
</div>
|
|
|
|
{/* FAQ Section */}
|
|
<div className="container max-w-6xl mx-auto px-4 py-16">
|
|
<h2 className="text-4xl text-center mb-12">Frequently Asked Questions</h2>
|
|
<div className="space-y-4 max-w-3xl mx-auto">
|
|
{faqs.map((faq, index) => (
|
|
<div key={index} className="border border-gray-700 rounded-lg overflow-hidden">
|
|
<button
|
|
className="w-full px-6 py-4 text-left flex items-center justify-between hover:bg-white/5 transition"
|
|
onClick={() => setExpandedFaq(expandedFaq === index ? null : index)}
|
|
>
|
|
<span className="text-lg font-semibold">{faq.question}</span>
|
|
{expandedFaq === index ? <ChevronUp /> : <ChevronDown />}
|
|
</button>
|
|
{expandedFaq === index && (
|
|
<motion.div
|
|
initial={{ height: 0 }}
|
|
animate={{ height: "auto" }}
|
|
exit={{ height: 0 }}
|
|
className="px-6 py-4 bg-white/5"
|
|
>
|
|
<p className="text-gray-300">{faq.answer}</p>
|
|
</motion.div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<Footer />
|
|
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MicroSAASLanding; |