581 lines
20 KiB
TypeScript
581 lines
20 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
|
import HeroBillboardRotatedCarousel from "@/components/sections/hero/HeroBillboardRotatedCarousel";
|
|
import TextAbout from "@/components/sections/about/TextAbout";
|
|
import FeatureBento from "@/components/sections/feature/FeatureBento";
|
|
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
|
|
import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
|
|
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
|
|
import PricingCardOne from "@/components/sections/pricing/PricingCardOne";
|
|
import BlogCardTwo from "@/components/sections/blog/BlogCardTwo";
|
|
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
|
import Link from "next/link";
|
|
import {
|
|
Zap,
|
|
Rocket,
|
|
Cloud,
|
|
GitBranch,
|
|
Brain,
|
|
Sparkles,
|
|
Cpu,
|
|
Database,
|
|
Code,
|
|
Server,
|
|
CheckCircle,
|
|
AlertCircle,
|
|
Smartphone,
|
|
Apple,
|
|
Globe,
|
|
Shield,
|
|
Users,
|
|
TrendingUp,
|
|
Heart,
|
|
Star,
|
|
DollarSign,
|
|
Crown,
|
|
Newspaper,
|
|
} from "lucide-react";
|
|
|
|
export default function HomePage() {
|
|
const navItems = [
|
|
{ name: "Home", id: "home" },
|
|
{ name: "Features", id: "features" },
|
|
{ name: "Pricing", id: "pricing" },
|
|
{ name: "Docs", id: "docs" },
|
|
{ name: "Contact", id: "contact" },
|
|
];
|
|
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="shift-hover"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="rounded"
|
|
contentWidth="medium"
|
|
sizing="large"
|
|
background="circleGradient"
|
|
cardStyle="outline"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="semibold"
|
|
>
|
|
{/* Navigation */}
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={navItems}
|
|
brandName="DevPlatform"
|
|
bottomLeftText="Open Source Community"
|
|
bottomRightText="hello@devplatform.dev"
|
|
/>
|
|
</div>
|
|
|
|
{/* Hero Section */}
|
|
<div id="hero" data-section="hero" className="mx-auto px-4 md:px-6">
|
|
<HeroBillboardRotatedCarousel
|
|
title="The All-in-One Development Platform"
|
|
description="Streamline your entire development workflow with our unified platform. Build, deploy, and scale applications faster with integrated tools for portability, AI-powered development, and enterprise-grade infrastructure management."
|
|
tag="Innovation"
|
|
tagIcon={Zap}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "Get Started", href: "/auth/signup" },
|
|
{ text: "View Demo", href: "#demo" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
background={{ variant: "rotated-rays-static" }}
|
|
carouselItems={[
|
|
{
|
|
id: "carousel-1",
|
|
imageSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B2QgD03BGzZCcdct8OQoSGmHLm/a-sleek-modern-software-development-plat-1773685170875-ebd384df.png",
|
|
imageAlt: "DevPlatform Dashboard Interface",
|
|
},
|
|
{
|
|
id: "carousel-2",
|
|
imageSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B2QgD03BGzZCcdct8OQoSGmHLm/an-abstract-visualization-showing-a-port-1773685170493-2c9cd943.png",
|
|
imageAlt: "Portable Environment",
|
|
},
|
|
{
|
|
id: "carousel-3",
|
|
imageSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B2QgD03BGzZCcdct8OQoSGmHLm/a-futuristic-visualization-of-ai-and-mac-1773685169729-91524a57.png",
|
|
imageAlt: "Multi-LLM Integration",
|
|
},
|
|
{
|
|
id: "carousel-4",
|
|
imageSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B2QgD03BGzZCcdct8OQoSGmHLm/a-technical-stack-visualization-showing--1773685170525-e4e231c0.png",
|
|
imageAlt: "Full-Stack Capabilities",
|
|
},
|
|
{
|
|
id: "carousel-5",
|
|
imageSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B2QgD03BGzZCcdct8OQoSGmHLm/a-modern-mobile-app-generation-tool-inte-1773685170394-a4b3434d.png",
|
|
imageAlt: "Mobile App Generation",
|
|
},
|
|
{
|
|
id: "carousel-6",
|
|
imageSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B2QgD03BGzZCcdct8OQoSGmHLm/an-infrastructure-management-dashboard-s-1773685172051-eb50a6c6.png",
|
|
imageAlt: "Infrastructure Tools",
|
|
},
|
|
]}
|
|
autoPlay={true}
|
|
autoPlayInterval={5000}
|
|
/>
|
|
</div>
|
|
|
|
{/* About Section */}
|
|
<div id="about" data-section="about" className="mx-auto px-4 md:px-6">
|
|
<TextAbout
|
|
tag="Platform"
|
|
tagIcon={Rocket}
|
|
tagAnimation="slide-up"
|
|
title="What is DevPlatform?"
|
|
useInvertedBackground={false}
|
|
buttons={[{ text: "Learn More", href: "/features" }]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
{/* Features Section */}
|
|
<div id="features" data-section="features" className="mx-auto px-4 md:px-6">
|
|
<FeatureBento
|
|
title="Powerful Features"
|
|
description="Everything you need to build, deploy, and manage your applications at scale."
|
|
tag="Capabilities"
|
|
tagIcon={Zap}
|
|
tagAnimation="slide-up"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "Portable Environment",
|
|
description:
|
|
"Develop anywhere, deploy everywhere. Your environment travels with you.",
|
|
bentoComponent: "icon-info-cards",
|
|
items: [
|
|
{
|
|
icon: Cloud,
|
|
label: "Cloud Ready",
|
|
value: "Instant Setup",
|
|
},
|
|
{
|
|
icon: GitBranch,
|
|
label: "Version Control",
|
|
value: "Git Native",
|
|
},
|
|
{
|
|
icon: Zap,
|
|
label: "Quick Start",
|
|
value: "Zero Config",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Multi-LLM Integration",
|
|
description:
|
|
"Leverage multiple AI models for intelligent code generation and assistance.",
|
|
bentoComponent: "orbiting-icons",
|
|
centerIcon: Brain,
|
|
items: [
|
|
{
|
|
icon: Sparkles,
|
|
ring: 1,
|
|
duration: 3,
|
|
},
|
|
{
|
|
icon: Zap,
|
|
ring: 1,
|
|
duration: 4,
|
|
},
|
|
{
|
|
icon: Cpu,
|
|
ring: 2,
|
|
duration: 5,
|
|
},
|
|
{
|
|
icon: Database,
|
|
ring: 2,
|
|
duration: 6,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Full-Stack Capabilities",
|
|
description:
|
|
"Build complete applications without context switching between tools.",
|
|
bentoComponent: "3d-stack-cards",
|
|
items: [
|
|
{
|
|
icon: Code,
|
|
title: "Frontend",
|
|
subtitle: "React, Vue, Svelte",
|
|
detail: "Modern UI frameworks",
|
|
},
|
|
{
|
|
icon: Server,
|
|
title: "Backend",
|
|
subtitle: "Node, Python, Go",
|
|
detail: "Powerful servers",
|
|
},
|
|
{
|
|
icon: Database,
|
|
title: "Database",
|
|
subtitle: "SQL, NoSQL, Graph",
|
|
detail: "Any data store",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Mobile App Generation",
|
|
description: "Create native mobile apps from a single codebase instantly.",
|
|
bentoComponent: "phone",
|
|
statusIcon: CheckCircle,
|
|
alertIcon: AlertCircle,
|
|
alertTitle: "App Status",
|
|
alertMessage: "Build successful",
|
|
apps: [
|
|
{
|
|
name: "React Native",
|
|
icon: Smartphone,
|
|
},
|
|
{
|
|
name: "Flutter",
|
|
icon: Smartphone,
|
|
},
|
|
{
|
|
name: "Swift",
|
|
icon: Apple,
|
|
},
|
|
{
|
|
name: "Kotlin",
|
|
icon: Smartphone,
|
|
},
|
|
{
|
|
name: "PWA",
|
|
icon: Globe,
|
|
},
|
|
{
|
|
name: "Expo",
|
|
icon: Smartphone,
|
|
},
|
|
{
|
|
name: "Capacitor",
|
|
icon: Smartphone,
|
|
},
|
|
{
|
|
name: "NativeScript",
|
|
icon: Smartphone,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Infrastructure Tools",
|
|
description:
|
|
"Deploy and manage infrastructure with enterprise-grade tooling.",
|
|
bentoComponent: "timeline",
|
|
heading: "Deployment Pipeline",
|
|
subheading: "From code to production",
|
|
items: [
|
|
{
|
|
label: "Build",
|
|
detail: "Compile and test",
|
|
},
|
|
{
|
|
label: "Deploy",
|
|
detail: "Push to servers",
|
|
},
|
|
{
|
|
label: "Monitor",
|
|
detail: "Real-time metrics",
|
|
},
|
|
],
|
|
completedLabel: "All systems ready",
|
|
},
|
|
{
|
|
title: "Security Features",
|
|
description: "Enterprise-grade security for peace of mind.",
|
|
bentoComponent: "reveal-icon",
|
|
icon: Shield,
|
|
},
|
|
]}
|
|
carouselMode="buttons"
|
|
/>
|
|
</div>
|
|
|
|
{/* Metrics Section */}
|
|
<div id="metrics" data-section="metrics" className="mx-auto px-4 md:px-6">
|
|
<MetricCardThree
|
|
title="Trusted by Teams Worldwide"
|
|
description="Join thousands of developers using DevPlatform to accelerate their development."
|
|
tag="Impact"
|
|
tagIcon={TrendingUp}
|
|
tagAnimation="slide-up"
|
|
animationType="blur-reveal"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "metric-1",
|
|
icon: Users,
|
|
title: "Active Users",
|
|
value: "50K+",
|
|
},
|
|
{
|
|
id: "metric-2",
|
|
icon: Zap,
|
|
title: "Deployments Daily",
|
|
value: "100K+",
|
|
},
|
|
{
|
|
id: "metric-3",
|
|
icon: Globe,
|
|
title: "Countries",
|
|
value: "120+",
|
|
},
|
|
{
|
|
id: "metric-4",
|
|
icon: Zap,
|
|
title: "Avg Build Time",
|
|
value: "2min",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
{/* Testimonials Section */}
|
|
<div id="testimonials" data-section="testimonials" className="mx-auto px-4 md:px-6">
|
|
<TestimonialCardTwo
|
|
title="What Developers Say"
|
|
description="Hear from teams who have transformed their development workflow with DevPlatform."
|
|
tag="Community"
|
|
tagIcon={Heart}
|
|
tagAnimation="slide-up"
|
|
animationType="blur-reveal"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "testimonial-1",
|
|
name: "Alex Johnson",
|
|
role: "Lead Developer",
|
|
testimonial:
|
|
"DevPlatform revolutionized how we develop. We cut our deployment time in half and our team productivity skyrocketed.",
|
|
imageSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B2QgD03BGzZCcdct8OQoSGmHLm/a-professional-headshot-of-a-software-de-1773685169826-0e87a6fd.png",
|
|
icon: Star,
|
|
},
|
|
{
|
|
id: "testimonial-2",
|
|
name: "Sarah Chen",
|
|
role: "CTO",
|
|
testimonial:
|
|
"The multi-LLM integration alone is worth it. Our developers write better code, faster than ever before.",
|
|
imageSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B2QgD03BGzZCcdct8OQoSGmHLm/a-professional-headshot-of-a-female-cto--1773685169773-0c5a4cce.png",
|
|
icon: Star,
|
|
},
|
|
{
|
|
id: "testimonial-3",
|
|
name: "Michael Roberts",
|
|
role: "Product Manager",
|
|
testimonial:
|
|
"From frontend to backend to mobile, everything in one platform. No more context switching between tools.",
|
|
imageSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B2QgD03BGzZCcdct8OQoSGmHLm/a-professional-headshot-of-a-product-man-1773685169529-2cb7f80f.png",
|
|
icon: Star,
|
|
},
|
|
{
|
|
id: "testimonial-4",
|
|
name: "Emily Zhang",
|
|
role: "Startup Founder",
|
|
testimonial:
|
|
"As a founder, DevPlatform lets me focus on building, not managing infrastructure. Game changer.",
|
|
imageSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B2QgD03BGzZCcdct8OQoSGmHLm/a-professional-headshot-of-a-startup-fou-1773685171884-d6a614fb.png",
|
|
icon: Star,
|
|
},
|
|
{
|
|
id: "testimonial-5",
|
|
name: "David Kim",
|
|
role: "Engineering Director",
|
|
testimonial:
|
|
"Enterprise-grade security, scalability, and support. Exactly what we needed for our growing team.",
|
|
imageSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B2QgD03BGzZCcdct8OQoSGmHLm/a-professional-headshot-of-an-engineerin-1773685169886-167fc062.png",
|
|
icon: Star,
|
|
},
|
|
{
|
|
id: "testimonial-6",
|
|
name: "Lisa Anderson",
|
|
role: "Solutions Architect",
|
|
testimonial:
|
|
"The infrastructure tools are incredible. We went from months of setup to days. Highly recommended.",
|
|
imageSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B2QgD03BGzZCcdct8OQoSGmHLm/a-professional-headshot-of-a-solutions-a-1773685170117-8d88e1d7.png",
|
|
icon: Star,
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
{/* FAQ Section */}
|
|
<div id="faq" data-section="faq" className="mx-auto px-4 md:px-6">
|
|
<FaqSplitText
|
|
sideTitle="Common Questions"
|
|
sideDescription="Everything you need to know about DevPlatform, answered."
|
|
faqsAnimation="blur-reveal"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "faq-1",
|
|
title: "What is DevPlatform?",
|
|
content:
|
|
"DevPlatform is an all-in-one development platform that combines portable environments, multi-LLM integration, full-stack capabilities, mobile app generation, and enterprise infrastructure tools in one unified interface.",
|
|
},
|
|
{
|
|
id: "faq-2",
|
|
title: "How does the portable environment work?",
|
|
content:
|
|
"Your entire development environment is containerized and can run anywhere. Deploy to any cloud provider, on-premises, or locally without configuration changes.",
|
|
},
|
|
{
|
|
id: "faq-3",
|
|
title: "What LLMs are supported?",
|
|
content:
|
|
"We support integration with OpenAI, Google's Gemini, Claude, and open-source models like Llama. You can mix and match models based on your needs.",
|
|
},
|
|
{
|
|
id: "faq-4",
|
|
title: "Can I use DevPlatform for full-stack development?",
|
|
content:
|
|
"Yes! Build frontend with React/Vue/Svelte, backend with Node/Python/Go, databases with SQL/NoSQL/Graph, and all from a single integrated environment.",
|
|
},
|
|
{
|
|
id: "faq-5",
|
|
title: "How do I generate mobile apps?",
|
|
content:
|
|
"Our mobile app generator uses your codebase to automatically create native Android, iOS, and progressive web apps without writing platform-specific code.",
|
|
},
|
|
{
|
|
id: "faq-6",
|
|
title: "What security features are included?",
|
|
content:
|
|
"We provide end-to-end encryption, multi-factor authentication, role-based access control, audit logging, SOC 2 compliance, and dedicated security infrastructure for enterprise users.",
|
|
},
|
|
{
|
|
id: "faq-7",
|
|
title: "Is there a free trial?",
|
|
content:
|
|
"Yes, our Free tier includes basic tools and limited features. Start building immediately with no credit card required. Upgrade anytime.",
|
|
},
|
|
{
|
|
id: "faq-8",
|
|
title: "What support is available?",
|
|
content:
|
|
"Free users get community support, Pro users get priority email support, and Enterprise users get 24/7 dedicated support with a dedicated account manager.",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseCard
|
|
logoText="DevPlatform"
|
|
copyrightText="© 2025 DevPlatform. All rights reserved."
|
|
columns={[
|
|
{
|
|
title: "Product",
|
|
items: [
|
|
{
|
|
label: "Features",
|
|
href: "/features",
|
|
},
|
|
{
|
|
label: "Pricing",
|
|
href: "/pricing",
|
|
},
|
|
{
|
|
label: "Security",
|
|
href: "#security",
|
|
},
|
|
{
|
|
label: "Roadmap",
|
|
href: "#roadmap",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Developers",
|
|
items: [
|
|
{
|
|
label: "Documentation",
|
|
href: "/docs",
|
|
},
|
|
{
|
|
label: "API Reference",
|
|
href: "/docs/api",
|
|
},
|
|
{
|
|
label: "GitHub",
|
|
href: "https://github.com/devplatform",
|
|
},
|
|
{
|
|
label: "Community",
|
|
href: "#community",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Company",
|
|
items: [
|
|
{
|
|
label: "About",
|
|
href: "/about",
|
|
},
|
|
{
|
|
label: "Blog",
|
|
href: "/blog",
|
|
},
|
|
{
|
|
label: "Careers",
|
|
href: "/careers",
|
|
},
|
|
{
|
|
label: "Contact",
|
|
href: "/contact",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Legal",
|
|
items: [
|
|
{
|
|
label: "Privacy Policy",
|
|
href: "/privacy",
|
|
},
|
|
{
|
|
label: "Terms of Service",
|
|
href: "/terms",
|
|
},
|
|
{
|
|
label: "Cookie Policy",
|
|
href: "/cookies",
|
|
},
|
|
{
|
|
label: "Status",
|
|
href: "https://status.devplatform.dev",
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |