297 lines
18 KiB
TypeScript
297 lines
18 KiB
TypeScript
"use client"
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
|
|
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
|
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
|
|
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
|
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
|
import { Rocket, Zap, TrendingUp, Heart, Users, HelpCircle } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="elastic-effect"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="soft"
|
|
contentWidth="small"
|
|
sizing="mediumLarge"
|
|
background="fluid"
|
|
cardStyle="layered-gradient"
|
|
primaryButtonStyle="primary-glow"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="light"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
brandName="Kadmus"
|
|
navItems={[
|
|
{ name: "Features", id: "features" },
|
|
{ name: "Use Cases", id: "use-cases" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
{ name: "Pricing", id: "pricing" },
|
|
{ name: "Get Started", id: "contact" },
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroOverlay
|
|
title="Build Chrome Extensions in Minutes, Not Months"
|
|
description="Kadmus is the no-code platform that lets you create powerful Chrome extensions without writing a single line of code. Visual builder, auto-generated code, instant deployment."
|
|
tag="Launch Your Extension"
|
|
tagIcon={Rocket}
|
|
tagAnimation="slide-up"
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AbarKDI53aBdqz3kyOReDYs9hq/a-modern-sleek-chrome-extension-builder--1772864104968-04f04af9.png"
|
|
imageAlt="Kadmus Chrome Extension Builder Dashboard"
|
|
textPosition="bottom-left"
|
|
showBlur={true}
|
|
showDimOverlay={false}
|
|
buttons={[
|
|
{ text: "Start Building Free", href: "contact" },
|
|
{ text: "Watch Demo", href: "#features" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
className="w-full"
|
|
containerClassName="w-full"
|
|
titleClassName="text-5xl md:text-6xl font-light"
|
|
descriptionClassName="text-lg md:text-xl"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<InlineImageSplitTextAbout
|
|
heading={[
|
|
{ type: "text", content: "Democratizing extension development for" },
|
|
{ type: "text", content: "everyone" },
|
|
]}
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{ text: "Learn More", href: "#features" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
className="w-full"
|
|
containerClassName="w-full"
|
|
headingClassName="text-4xl md:text-5xl font-light"
|
|
ariaLabel="About Kadmus"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardOne
|
|
title="Powerful Features for Every Developer"
|
|
description="Everything you need to build, test, and deploy Chrome extensions at scale"
|
|
tag="Features"
|
|
tagIcon={Zap}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
features={[
|
|
{
|
|
title: "Visual Builder", description: "Drag-and-drop interface to design your extension UI without coding", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AbarKDI53aBdqz3kyOReDYs9hq/a-screenshot-showing-the-visual-builder--1772864104912-bf02bb19.png?_wi=1", imageAlt: "Visual Builder Interface", button: { text: "Explore", href: "#" },
|
|
},
|
|
{
|
|
title: "Auto-Generated Code", description: "Clean, production-ready JavaScript generated automatically from your design", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AbarKDI53aBdqz3kyOReDYs9hq/a-code-editor-window-showing-auto-genera-1772864105370-c517d9a5.png", imageAlt: "Code Generation Feature", button: { text: "View Code", href: "#" },
|
|
},
|
|
{
|
|
title: "Real-Time Collaboration", description: "Build extensions with your team in real-time with shared editing and version control", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AbarKDI53aBdqz3kyOReDYs9hq/a-split-screen-showing-two-developers-co-1772864104583-6524e25d.png", imageAlt: "Team Collaboration", button: { text: "Collaborate", href: "#" },
|
|
},
|
|
{
|
|
title: "One-Click Publishing", description: "Deploy to Chrome Web Store directly from Kadmus with automatic compliance checks", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AbarKDI53aBdqz3kyOReDYs9hq/a-screenshot-showing-the-visual-builder--1772864104912-bf02bb19.png?_wi=2", imageAlt: "Publishing Feature", button: { text: "Deploy", href: "#" },
|
|
},
|
|
]}
|
|
carouselMode="buttons"
|
|
gridVariant="two-columns-alternating-heights"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{ text: "View All Features", href: "#" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
className="w-full"
|
|
containerClassName="w-full"
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardSeven
|
|
title="Growing Fast"
|
|
description="Kadmus is trusted by developers worldwide to build better Chrome extensions"
|
|
tag="Our Impact"
|
|
tagIcon={TrendingUp}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
metrics={[
|
|
{
|
|
id: "1", value: "10K+", title: "Extensions Built", items: ["By developers worldwide", "In production today", "Processing millions of requests"],
|
|
},
|
|
{
|
|
id: "2", value: "50M+", title: "Monthly Active Users", items: ["Using Kadmus-built extensions", "Across 180+ countries", "Growing 25% month-over-month"],
|
|
},
|
|
{
|
|
id: "3", value: "99.9%", title: "Uptime", items: ["Reliable infrastructure", "Enterprise-grade security", "Zero data breaches since launch"],
|
|
},
|
|
]}
|
|
carouselMode="buttons"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{ text: "Start Building", href: "contact" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
className="w-full"
|
|
containerClassName="w-full"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTen
|
|
title="Loved by Developers"
|
|
description="Hear from developers who've built amazing extensions with Kadmus"
|
|
tag="Testimonials"
|
|
tagIcon={Heart}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1", title: "Built in One Weekend", quote: "I went from idea to published extension in just 48 hours with Kadmus. The visual builder made it so intuitive, and having code generated automatically saved me days of work.", name: "Alex Chen", role: "Independent Developer", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AbarKDI53aBdqz3kyOReDYs9hq/a-professional-headshot-of-a-software-de-1772864103912-368e2fd7.png", imageAlt: "Alex Chen"},
|
|
{
|
|
id: "2", title: "Collaboration Game Changer", quote: "Our team can now build Chrome extensions together in real-time. No more back-and-forth emails with code snippets. Kadmus streamlined our entire workflow.", name: "Sarah Johnson", role: "Tech Lead, StartupXYZ", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AbarKDI53aBdqz3kyOReDYs9hq/a-professional-headshot-of-a-female-prod-1772864103637-6709dab7.png", imageAlt: "Sarah Johnson"},
|
|
{
|
|
id: "3", title: "From Zero to Hero", quote: "I had zero extension development experience. Kadmus made it accessible for me. I built a productivity extension that now has thousands of users. This platform is incredible.", name: "Marcus Rodriguez", role: "Founder, ExtensionCo", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AbarKDI53aBdqz3kyOReDYs9hq/a-professional-headshot-of-a-male-design-1772864103838-2ac8fab6.png", imageAlt: "Marcus Rodriguez"},
|
|
{
|
|
id: "4", title: "Production Ready Code", quote: "The auto-generated code is clean, well-structured, and production-ready. I didn't have to rewrite anything. Kadmus understands what developers need.", name: "Emily Watson", role: "Senior Developer, TechCorp", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AbarKDI53aBdqz3kyOReDYs9hq/a-professional-headshot-of-a-female-soft-1772864103809-b81b2809.png", imageAlt: "Emily Watson"},
|
|
{
|
|
id: "5", title: "Enterprise-Grade Solution", quote: "We're using Kadmus across our enterprise development team. The security, compliance checks, and deployment features are exactly what we needed.", name: "James Mitchell", role: "CTO, FortuneInc", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AbarKDI53aBdqz3kyOReDYs9hq/a-professional-headshot-of-a-male-tech-l-1772864104024-cd320f41.png", imageAlt: "James Mitchell"},
|
|
{
|
|
id: "6", title: "Eliminates Boilerplate", quote: "No more writing manifest files or boilerplate code. Kadmus handles all that automatically. I focus on building features that matter to users.", name: "Lisa Park", role: "Product Manager, InnovateLabs", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AbarKDI53aBdqz3kyOReDYs9hq/a-professional-headshot-of-a-female-tech-1772864103522-f0d2e336.png", imageAlt: "Lisa Park"},
|
|
]}
|
|
buttons={[
|
|
{ text: "Join Our Community", href: "#" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
className="w-full"
|
|
containerClassName="w-full"
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
title="Trusted by the Best"
|
|
description="Used by developers and companies building the next generation of Chrome extensions"
|
|
tag="Partners"
|
|
tagIcon={Users}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
logos={[
|
|
"http://img.b2bpic.net/free-vector/hi-tech-chip-dna-atom-molecule-logo_126523-903.jpg", "http://img.b2bpic.net/free-vector/social-media-logo-collection_23-2148075487.jpg", "http://img.b2bpic.net/free-vector/social-media-logo-collection_23-2148072114.jpg", "http://img.b2bpic.net/free-vector/flat-code-logo-collection_23-2148855323.jpg", "http://img.b2bpic.net/free-vector/gradient-rounded-abstract-business-logotype_23-2148199344.jpg", "http://img.b2bpic.net/free-vector/swirl-logo-made-with-abstract-shapes_1025-569.jpg", "http://img.b2bpic.net/free-vector/abstract-shapes-logo_1025-435.jpg", "http://img.b2bpic.net/free-vector/creative-computer-logo-template_23-2149217522.jpg"]}
|
|
names={["Stripe", "GitHub", "Figma", "Vercel", "Notion", "Slack", "Typeform", "Zapier"]}
|
|
speed={40}
|
|
showCard={true}
|
|
buttons={[
|
|
{ text: "Become a Partner", href: "#" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
className="w-full"
|
|
containerClassName="w-full"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
title="Frequently Asked Questions"
|
|
description="Everything you need to know about building with Kadmus"
|
|
tag="FAQ"
|
|
tagIcon={HelpCircle}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "1", title: "Is Kadmus free to use?", content: "Kadmus offers flexible pricing tiers to suit your needs. Our <strong>Free tier</strong> includes the visual builder, code export, and the ability to build and test up to 3 extensions—perfect for individuals and small projects. Our <strong>Pro tier</strong> ($29/month) unlocks unlimited extensions, real-time team collaboration, advanced deployment features, and priority support. For enterprise needs, we offer custom plans with dedicated support and additional security features. Start with our free tier—no credit card required—and upgrade when you're ready to scale."},
|
|
{
|
|
id: "2", title: "Do I need to know how to code?", content: "No! Kadmus is designed for everyone. Our visual builder lets you create extensions through drag-and-drop without writing any code. However, if you want to customize the generated code, you can export it and edit it directly."},
|
|
{
|
|
id: "3", title: "Can I export my code?", content: "Yes! All extensions built with Kadmus generate clean, production-ready JavaScript code that you can download, modify, and maintain yourself. You're never locked in to our platform."},
|
|
{
|
|
id: "4", title: "How do I publish to the Chrome Web Store?", content: "Kadmus includes one-click publishing to the Chrome Web Store. We handle all the compliance checks, manifest generation, and packaging. Your extension can go live in minutes."},
|
|
{
|
|
id: "5", title: "Is my code secure?", content: "Absolutely. We encrypt all your code and data in transit and at rest. Our infrastructure meets enterprise security standards, and we perform regular security audits."},
|
|
{
|
|
id: "6", title: "What types of extensions can I build?", content: "With Kadmus, you can build any type of Chrome extension: content scripts, background workers, popup extensions, dev tools, and more. Our builder supports all modern Chrome extension APIs."},
|
|
{
|
|
id: "7", title: "Can my team collaborate?", content: "Yes! Kadmus includes real-time collaboration features. Multiple team members can work on the same extension simultaneously, with shared editing, commenting, and version control."},
|
|
]}
|
|
faqsAnimation="slide-up"
|
|
animationType="smooth"
|
|
showCard={true}
|
|
buttons={[
|
|
{ text: "Still Have Questions?", href: "contact" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
className="w-full"
|
|
containerClassName="w-full"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
tag="Ready to Build?"
|
|
tagIcon={Zap}
|
|
tagAnimation="slide-up"
|
|
title="Start Building Your Chrome Extension Today"
|
|
description="Join thousands of developers building powerful Chrome extensions with Kadmus. Get started for free—no credit card required."
|
|
buttons={[
|
|
{ text: "Start Free", href: "https://app.kadmus.dev" },
|
|
{ text: "View Pricing", href: "#" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
background={{ variant: "plain" }}
|
|
useInvertedBackground={false}
|
|
className="w-full"
|
|
containerClassName="w-full"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
columns={[
|
|
{
|
|
title: "Product", items: [
|
|
{ label: "Features", href: "#features" },
|
|
{ label: "Pricing", href: "#" },
|
|
{ label: "Templates", href: "#" },
|
|
{ label: "Documentation", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About", href: "#about" },
|
|
{ label: "Blog", href: "#" },
|
|
{ label: "Careers", href: "#" },
|
|
{ label: "Contact", href: "#contact" },
|
|
],
|
|
},
|
|
{
|
|
title: "Resources", items: [
|
|
{ label: "Community", href: "#" },
|
|
{ label: "API Reference", href: "#" },
|
|
{ label: "Support", href: "#" },
|
|
{ label: "Status", href: "#" },
|
|
],
|
|
},
|
|
]}
|
|
copyrightText="© 2025 Kadmus. All rights reserved."
|
|
className="w-full"
|
|
containerClassName="w-full"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |