347 lines
17 KiB
TypeScript
347 lines
17 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 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,
|
|
} from "lucide-react";
|
|
|
|
export default function HomePage() {
|
|
const navItems = [
|
|
{ name: "Home", id: "home" },
|
|
{ name: "Features", id: "features" },
|
|
{ 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>
|
|
|
|
{/* Features Overview Section */}
|
|
<div id="features" data-section="features" className="mx-auto px-4 md:px-6">
|
|
<FeatureBento
|
|
title="Core Value Propositions"
|
|
description="Three powerful capabilities that work together to transform your development workflow."
|
|
tag="Features"
|
|
tagIcon={Rocket}
|
|
tagAnimation="slide-up"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "Portable Environment", description:
|
|
"Your entire development environment travels with you. Deploy anywhere—cloud, on-premises, or locally—without any configuration changes. Work from any machine, any location.", 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 the best AI models for your needs. Seamlessly integrate OpenAI, Google's Gemini, Claude, and open-source models like Llama. Mix and match models for optimal results.", 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: "Complete Full-Stack Development", description:
|
|
"Build entire applications in one unified environment. Frontend, backend, database, and mobile all together. No context switching, no tool fragmentation, pure productivity.", 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"},
|
|
],
|
|
},
|
|
]}
|
|
carouselMode="buttons"
|
|
/>
|
|
</div>
|
|
|
|
{/* Call-to-Action Section - Metrics */}
|
|
<div id="metrics" data-section="metrics" className="mx-auto px-4 md:px-6">
|
|
<MetricCardThree
|
|
title="Trusted by Thousands"
|
|
description="Join developers and teams worldwide who are accelerating their development with DevPlatform."
|
|
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>
|
|
);
|
|
}
|