diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx new file mode 100644 index 0000000..62a61d3 --- /dev/null +++ b/src/pages/Index.tsx @@ -0,0 +1,363 @@ +import { useState } from "react"; +import { Link } from "react-router-dom"; +import { Button } from "@/components/ui/button"; +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; +import { Badge } from "@/components/ui/badge"; +import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; +import { + ArrowRight, Terminal, Zap, Shield, Globe, BarChart3, Lock, + Star, CheckCircle2, ChevronRight, Code2, Quote +} from "lucide-react"; +import Header from "@/components/Header"; +import Footer from "@/components/Footer"; +import { useSaasMutation } from "@/hooks/use-tygarun"; +import { toast } from "sonner"; + +const languages = ["Python", "Node.js", "Go", "Ruby"]; + +const codeExamples: Record = { + curl: `curl -X POST https://api.devstack.io/v1/deploy \\ + -H 'Authorization: Bearer sk_live_...' \\ + -H 'Content-Type: application/json' \\ + -d '{"project": "my-app", "env": "production"}'`, + javascript: `import { DevStack } from '@devstack/sdk'; + +const client = new DevStack('sk_live_...'); + +const deploy = await client.deploys.create({ + project: 'my-app', + env: 'production', +}); + +console.log(deploy.url);`, + python: `import devstack + +client = devstack.Client("sk_live_...") + +deploy = client.deploys.create( + project="my-app", + env="production", +) + +print(deploy.url)`, +}; + +const features = [ + { icon: Terminal, title: "CLI-First Workflow", desc: "Deploy from your terminal with a single command. No dashboards required." }, + { icon: Zap, title: "Blazing Fast APIs", desc: "Sub-50ms response times globally with edge functions and smart caching." }, + { icon: Shield, title: "Enterprise Security", desc: "SOC 2 compliant with end-to-end encryption and role-based access controls." }, + { icon: Globe, title: "Global Edge Network", desc: "Deploy to 30+ regions worldwide with automatic failover and load balancing." }, + { icon: BarChart3, title: "Real-Time Analytics", desc: "Monitor API usage, latency, and errors in real time with built-in dashboards." }, + { icon: Lock, title: "API Key Management", desc: "Fine-grained API keys with scopes, rate limits, and automatic rotation." }, +]; + +const integrations = ["React", "Next.js", "Node.js", "Python", "Go", "Ruby", "Docker", "AWS"]; + +const tiers = [ + { + name: "Free", + price: "0", + desc: "For side projects and experiments", + calls: "10,000 API calls/mo", + features: ["10k requests/month", "Community support", "1 project", "Basic analytics"], + cta: "Start Free", + popular: false, + plan: "free", + }, + { + name: "Pro", + price: "29", + desc: "For growing teams and startups", + calls: "1M API calls/mo", + features: ["1M requests/month", "Priority support", "Unlimited projects", "Advanced analytics", "Custom domains", "Team seats (5)"], + cta: "Start Trial", + popular: true, + plan: "pro", + }, + { + name: "Enterprise", + price: "Custom", + desc: "For large-scale deployments", + calls: "Unlimited API calls", + features: ["Unlimited requests", "24/7 dedicated support", "SLA guarantee", "SSO & SAML", "On-premise option", "Custom integrations"], + cta: "Contact Sales", + popular: false, + plan: null, + }, +]; + +const testimonials = [ + { name: "Sarah Chen", role: "CTO at Raycast", quote: "DevStack cut our API development time by 70%. The DX is unmatched.", stars: 5 }, + { name: "Marcus Rivera", role: "Lead Engineer at Vercel", quote: "Finally an API platform that thinks like a developer. Shipping is effortless now.", stars: 5 }, + { name: "Ava Patel", role: "Founder at Deno Labs", quote: "We migrated our entire backend in a weekend. The SDK is beautifully designed.", stars: 5 }, +]; + +export default function IndexPage() { + const [codeTab, setCodeTab] = useState("curl"); + const { mutate: createCheckout, loading: checkingOut } = useSaasMutation("billing", "/checkout"); + + const handlePlan = async (tier) => { + if (!tier.plan) return; // Enterprise → Contact Sales link + try { + const res = await createCheckout({ plan: tier.plan }); + if (res?.url && res.url.indexOf("#") !== 0) { window.location.href = res.url; return; } + toast.success("Checkout started for the " + tier.name + " plan."); + } catch { + toast.error("Could not start checkout. Please try again."); + } + }; + + return ( +
+
+ + {/* ── HERO ── */} +
+
+
+
+
+
+
+
+ {languages.map((lang) => ( + + {lang} + + ))} +
+

+ + Build Faster with DevStack + +

+

+ The API platform that lets you ship production-ready backends in minutes. Authentication, databases, deployments, and monitoring out of the box. +

+
+ + +
+
+ + {/* Code preview */} +
+
+
+ + + + terminal +
+ 
+                  
+                    ${" "}
+                    npm{" "}
+                    install @devstack/sdk
+                    {"\n\n"}
+                    ${" "}
+                    devstack{" "}
+                    deploy{" "}
+                    --prod
+                    {"\n\n"}
+                    {">"}{" "}
+                    Deployed to{" "}
+                    https://my-app.devstack.io
+                  
+
+
+
+
+
+
+ + {/* ── QUICK START CODE BLOCK ── */} +
+
+
+ Quick Start +

Up and running in seconds

+

Choose your language and make your first API call.

+
+ +
+ +
+ + {Object.keys(codeExamples).map((key) => ( + + {key} + + ))} + + +
+ {Object.entries(codeExamples).map(([key, code]) => ( + + 
+                    {code}
+
+ + ))} + +
+
+
+ + {/* ── FEATURES ── */} +
+
+
+ Features +

Built for developers, by developers

+

+ Everything you need to build, deploy, and monitor production applications. +

+
+
+ {features.map((f) => ( + + +
+ +
+

{f.title}

+

{f.desc}

+ + + ))} +
+
+
+ + {/* ── INTEGRATIONS ── */} +
+
+ Integrations +

Works with your stack

+

First-class SDKs and integrations for every major platform.

+
+ {integrations.map((tech) => ( +
+ + {tech} +
+ ))} +
+
+
+ + {/* ── PRICING ── */} +
+
+
+ Pricing +

Simple, transparent pricing

+

Start free. Scale when you are ready.

+
+
+ {tiers.map((tier) => ( + + {tier.popular && ( +
+ Most Popular +
+ )} + + {tier.name} +

{tier.desc}

+
+ {tier.price === "Custom" ? ( + Custom + ) : ( + <> + \${tier.price} + /mo + + )} +
+

{tier.calls}

+ + +
    + {tier.features.map((f) => ( +
  • + + {f} +
    • + ))} +
+ {tier.plan ? ( + + ) : ( + + )} + + + ))} +
+
+
+ + {/* ── TESTIMONIALS ── */} +
+
+
+ Testimonials +

Loved by developers

+
+
+ {testimonials.map((t) => ( + + +
+ {Array.from({ length: t.stars }).map((_, i) => ( + + ))} +
+ +

{t.quote}

+
+
+ {t.name.charAt(0)} +
+
+

{t.name}

+

{t.role}

+
+
+ + + ))} +
+
+
+ +
+ ); +}