Initial: saas template via tAI
This commit is contained in:
Joe Wee
@@ -0,0 +1,278 @@
|
||||
import { Link } from "react-router-dom";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
ArrowRight, Zap, Shield, BarChart3, Users, Layers, Globe,
|
||||
Star, CheckCircle2, Sparkles, ChevronRight, Play, Quote, Lock
|
||||
} from "lucide-react";
|
||||
import Header from "@/components/Header";
|
||||
import Footer from "@/components/Footer";
|
||||
|
||||
const metrics = [
|
||||
{ value: "10,000+", label: "Teams worldwide" },
|
||||
{ value: "99.9%", label: "Uptime SLA" },
|
||||
{ value: "4.9/5", label: "User rating" },
|
||||
];
|
||||
|
||||
const logos = [
|
||||
"Acme Corp", "TechFlow", "Quantum",
|
||||
"Synapse", "NovaBuild", "Orbitix",
|
||||
];
|
||||
|
||||
const features = [
|
||||
{ icon: Zap, title: "AI Task Automation", desc: "Automatically prioritize, assign, and schedule tasks using machine learning trained on your team habits." },
|
||||
{ icon: Shield, title: "Enterprise Security", desc: "SOC 2 Type II compliant with end-to-end encryption, SSO, and role-based access controls." },
|
||||
{ icon: BarChart3, title: "Advanced Analytics", desc: "Real-time dashboards with predictive insights to spot bottlenecks before they happen." },
|
||||
{ icon: Users, title: "Team Collaboration", desc: "Real-time editing, threaded comments, and @mentions keep everyone aligned." },
|
||||
{ icon: Layers, title: "Custom Workflows", desc: "Build automation workflows with a drag-and-drop builder. No code required." },
|
||||
{ icon: Globe, title: "Global Scale", desc: "Multi-region deployment with 99.99% uptime guarantee and <100ms response times." },
|
||||
];
|
||||
|
||||
const steps = [
|
||||
{ num: "01", title: "Create your workspace", desc: "Sign up in seconds and invite your team. Import existing projects from Jira, Asana, or Trello." },
|
||||
{ num: "02", title: "Set up your workflows", desc: "Choose from 50+ templates or build custom workflows. Our AI suggests the best setup for your team." },
|
||||
{ num: "03", title: "Ship with confidence", desc: "Track progress with real-time dashboards. Get AI-powered predictions on delivery timelines." },
|
||||
];
|
||||
|
||||
const testimonials = [
|
||||
{ name: "Sarah Chen", role: "VP Engineering, TechFlow", quote: "Nexus cut our sprint planning time by 60%. The AI suggestions are scarily accurate.", stars: 5 },
|
||||
{ name: "Marcus Rivera", role: "CTO, BuildScale", quote: "We migrated from three different tools to Nexus. Best decision we made all year.", stars: 5 },
|
||||
{ name: "Emily Watson", role: "Product Lead, Orbitix", quote: "The predictive analytics alone are worth the price. We ship 2x faster now.", stars: 5 },
|
||||
];
|
||||
|
||||
export default function IndexPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-white text-slate-900 antialiased">
|
||||
<Header />
|
||||
|
||||
{/* ── HERO ── */}
|
||||
<section className="relative overflow-hidden bg-gradient-to-br from-slate-950 via-indigo-950 to-slate-900 pt-32 pb-24 sm:pt-40 sm:pb-32">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-indigo-900/20 via-transparent to-transparent" />
|
||||
<div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC4wMyI+PGNpcmNsZSBjeD0iMSIgY3k9IjEiIHI9IjEiLz48L2c+PC9nPjwvc3ZnPg==')] opacity-40" />
|
||||
{/* Floating gradient blur circles */}
|
||||
<div className="absolute top-20 left-1/4 w-72 h-72 rounded-full bg-indigo-600/15 blur-[100px] pointer-events-none" />
|
||||
<div className="absolute top-40 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[100px] pointer-events-none" />
|
||||
<div className="absolute bottom-10 left-1/3 w-80 h-80 rounded-full bg-violet-500/20 blur-[100px] pointer-events-none" />
|
||||
<div className="absolute -top-10 right-1/3 w-64 h-64 rounded-full bg-blue-500/15 blur-[100px] pointer-events-none" />
|
||||
<div className="relative mx-auto max-w-7xl px-6 text-center">
|
||||
<Badge className="animate-fade-up mb-6 bg-primary/10 text-primary border-primary/20 px-4 py-1.5 text-sm font-medium inline-flex items-center">
|
||||
<Sparkles className="mr-1.5 h-3.5 w-3.5" /> Now with AI Copilot
|
||||
</Badge>
|
||||
<h1 className="mx-auto max-w-4xl text-4xl font-bold tracking-tight text-white sm:text-5xl lg:text-7xl">
|
||||
<span className="bg-gradient-to-r from-white via-indigo-200 to-cyan-200 bg-clip-text text-transparent">
|
||||
Manage Projects with the Power of AI
|
||||
</span>
|
||||
</h1>
|
||||
<p className="mx-auto mt-6 max-w-2xl text-lg text-slate-400 leading-relaxed">
|
||||
Streamline your workflow with intelligent automation, real-time collaboration, and predictive analytics that keep your team ahead of every deadline.
|
||||
</p>
|
||||
<div className="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||
<Button asChild size="lg" className="active:scale-[0.98] bg-indigo-600 hover:bg-indigo-500 text-white px-8 rounded-full shadow-lg shadow-indigo-500/25 text-base">
|
||||
<Link to="/signup">Start Free Trial <ArrowRight className="ml-2 h-4 w-4" /></Link>
|
||||
</Button>
|
||||
<Button asChild variant="outline" size="lg" className="active:scale-[0.98] rounded-full border-slate-700 text-slate-300 hover:bg-slate-800 hover:text-white text-base">
|
||||
<Link to="/features"><Play className="mr-2 h-4 w-4" /> Watch Demo</Link>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Metrics */}
|
||||
<div className="mt-16 flex flex-wrap justify-center gap-6">
|
||||
{metrics.map((m) => (
|
||||
<div key={m.label} className="text-center px-8 py-4 rounded-2xl bg-white/5 backdrop-blur-sm border border-white/10">
|
||||
<div className="text-3xl font-bold text-white">{m.value}</div>
|
||||
<div className="mt-1 text-sm text-slate-400">{m.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Trust / Security Badges */}
|
||||
<div className="flex flex-wrap justify-center gap-4 mt-8">
|
||||
<Badge variant="outline" className="text-xs gap-1.5 text-slate-400 border-slate-700 px-3 py-1.5">
|
||||
<Shield className="h-3 w-3" /> SOC 2 Certified
|
||||
</Badge>
|
||||
<Badge variant="outline" className="text-xs gap-1.5 text-slate-400 border-slate-700 px-3 py-1.5">
|
||||
<Lock className="h-3 w-3" /> GDPR Compliant
|
||||
</Badge>
|
||||
<Badge variant="outline" className="text-xs gap-1.5 text-slate-400 border-slate-700 px-3 py-1.5">
|
||||
<CheckCircle2 className="h-3 w-3" /> 99.9% Uptime SLA
|
||||
</Badge>
|
||||
<Badge variant="outline" className="text-xs gap-1.5 text-slate-400 border-slate-700 px-3 py-1.5">
|
||||
<Lock className="h-3 w-3" /> 256-bit Encryption
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── LOGO CLOUD ── */}
|
||||
<section className="py-14 bg-slate-50 border-b border-slate-100">
|
||||
<div className="mx-auto max-w-7xl px-6">
|
||||
<p className="text-center text-sm font-medium text-slate-400 mb-8">Trusted by industry-leading teams worldwide</p>
|
||||
<div className="flex flex-wrap items-center justify-center gap-x-12 gap-y-6">
|
||||
{logos.map((logo) => (
|
||||
<div key={logo} className="text-lg font-bold text-slate-300 tracking-wider uppercase">{logo}</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── VIDEO DEMO ── */}
|
||||
<section className="py-24 bg-white">
|
||||
<div className="mx-auto max-w-7xl px-6">
|
||||
<div className="aspect-video max-w-4xl mx-auto rounded-2xl bg-gradient-to-br from-indigo-900 via-slate-900 to-cyan-900 relative overflow-hidden group cursor-pointer shadow-2xl shadow-indigo-500/10">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-indigo-500/10 via-transparent to-transparent" />
|
||||
<div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC4wMyI+PGNpcmNsZSBjeD0iMSIgY3k9IjEiIHI9IjEiLz48L2c+PC9nPjwvc3ZnPg==')] opacity-40" />
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center gap-4">
|
||||
<div className="h-20 w-20 rounded-full bg-white/10 backdrop-blur-sm flex items-center justify-center group-hover:scale-110 group-hover:bg-white/20 transition-all duration-300 ring-1 ring-white/20 animate-pulse">
|
||||
<Play className="h-8 w-8 text-white ml-1" />
|
||||
</div>
|
||||
<span className="text-white/80 text-sm font-medium backdrop-blur-sm bg-white/10 px-4 py-1.5 rounded-full border border-white/10">See it in action</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-center mt-6 text-slate-500 text-sm">Watch how teams ship 3x faster with Nexus</p>
|
||||
<p className="text-center mt-2 text-xs text-slate-400">Trusted by teams at Google, Stripe, Vercel</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── FEATURES GRID ── */}
|
||||
<section className="py-24 bg-white">
|
||||
<div className="mx-auto max-w-7xl px-6">
|
||||
<div className="text-center mb-16">
|
||||
<Badge className="mb-4 bg-indigo-50 text-indigo-600 border-0">Features</Badge>
|
||||
<h2 className="animate-fade-up text-3xl font-bold tracking-tight sm:text-4xl">Everything you need to ship faster</h2>
|
||||
<p className="mt-4 text-lg text-slate-500 max-w-2xl mx-auto">Powerful tools designed to help your team collaborate, automate, and deliver results.</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 stagger">
|
||||
{features.map((f) => (
|
||||
<Card key={f.title} className="hover-card-lift border-slate-200 hover:border-indigo-200 hover:shadow-lg hover:shadow-indigo-50 hover:bg-gradient-to-b hover:from-primary/5 hover:to-transparent transition-all duration-300 group">
|
||||
<CardContent className="p-6">
|
||||
<div className="h-12 w-12 rounded-xl bg-gradient-to-br from-indigo-500 to-cyan-500 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform shadow-lg shadow-primary/10">
|
||||
<f.icon className="h-6 w-6 text-white" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold mb-2">{f.title}</h3>
|
||||
<p className="text-slate-500 text-sm leading-relaxed">{f.desc}</p>
|
||||
<span className="inline-flex items-center gap-1 mt-4 text-sm font-medium text-indigo-600 group-hover:translate-x-1 transition-transform cursor-pointer">
|
||||
Learn more <ArrowRight className="h-3.5 w-3.5" />
|
||||
</span>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-12 text-center">
|
||||
<Button asChild variant="outline" className="active:scale-[0.98] rounded-full">
|
||||
<Link to="/features">Explore All Features <ChevronRight className="ml-1 h-4 w-4" /></Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── HOW IT WORKS ── */}
|
||||
<section className="py-24 bg-slate-50">
|
||||
<div className="mx-auto max-w-7xl px-6">
|
||||
<div className="text-center mb-16">
|
||||
<Badge className="mb-4 bg-cyan-50 text-cyan-600 border-0">How It Works</Badge>
|
||||
<h2 className="animate-fade-up text-3xl font-bold tracking-tight sm:text-4xl">Get started in minutes</h2>
|
||||
</div>
|
||||
<div className="relative max-w-3xl mx-auto">
|
||||
{/* Connecting line */}
|
||||
<div className="absolute left-8 top-12 bottom-12 w-px bg-gradient-to-b from-indigo-500 via-cyan-500 to-indigo-500 hidden md:block" />
|
||||
<div className="space-y-12">
|
||||
{steps.map((step) => (
|
||||
<div key={step.num} className="flex gap-6 items-start">
|
||||
<div className="relative flex-shrink-0 h-16 w-16 rounded-2xl bg-gradient-to-br from-indigo-600 to-cyan-500 flex items-center justify-center text-white font-bold text-lg shadow-lg shadow-indigo-500/20">
|
||||
{step.num}
|
||||
</div>
|
||||
<div className="pt-2">
|
||||
<h3 className="text-xl font-semibold mb-2">{step.title}</h3>
|
||||
<p className="text-slate-500 leading-relaxed">{step.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── TESTIMONIALS ── */}
|
||||
<section className="py-24 bg-white">
|
||||
<div className="mx-auto max-w-7xl px-6">
|
||||
<div className="text-center mb-16">
|
||||
<Badge className="mb-4 bg-amber-50 text-amber-600 border-0">Testimonials</Badge>
|
||||
<h2 className="animate-fade-up text-3xl font-bold tracking-tight sm:text-4xl">Loved by teams everywhere</h2>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-3 gap-6 stagger">
|
||||
{testimonials.map((t) => (
|
||||
<Card key={t.name} className="backdrop-blur-sm bg-card/80 border-border/50 hover-card-lift transition-all duration-300 group">
|
||||
<CardContent className="p-6">
|
||||
<Quote className="h-5 w-5 text-indigo-300/50 mb-3" />
|
||||
<div className="flex gap-0.5 mb-4">
|
||||
{Array.from({ length: t.stars }, (_, i) => (
|
||||
<Star key={i} className="h-4 w-4 fill-amber-400 text-amber-400" />
|
||||
))}
|
||||
</div>
|
||||
<p className="text-slate-600 leading-relaxed mb-6">"{t.quote}"</p>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-10 w-10 rounded-full bg-gradient-to-br from-indigo-400 to-cyan-400 flex items-center justify-center text-white font-semibold text-sm">
|
||||
{t.name.split(" ").map((n) => n[0]).join("")}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="font-semibold text-sm">{t.name}</div>
|
||||
<div className="text-xs text-slate-400">{t.role}</div>
|
||||
</div>
|
||||
<div className="h-8 w-8 rounded-full bg-gradient-to-br from-slate-200 to-slate-300 flex items-center justify-center text-slate-500 font-bold text-[10px]">
|
||||
{t.role.split(" at ").pop()?.slice(0, 2).toUpperCase() || "Co"}
|
||||
</div>
|
||||
</div>
|
||||
<span className="inline-flex items-center gap-1 mt-4 text-xs font-medium text-indigo-600 group-hover:translate-x-1 transition-transform cursor-pointer">
|
||||
Read case study <ArrowRight className="h-3 w-3" />
|
||||
</span>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── INTEGRATIONS ── */}
|
||||
<section className="py-24 bg-slate-50">
|
||||
<div className="mx-auto max-w-7xl px-6 text-center">
|
||||
<Badge className="mb-4 bg-cyan-50 text-cyan-600 border-0">Integrations</Badge>
|
||||
<h2 className="animate-fade-up text-3xl font-bold tracking-tight sm:text-4xl">Works with tools you already love</h2>
|
||||
<p className="mt-4 text-slate-500 max-w-2xl mx-auto">Connect with 200+ tools your team relies on every day.</p>
|
||||
<div className="mt-12 grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-4 max-w-4xl mx-auto stagger">
|
||||
{logos.map((logo) => (
|
||||
<div key={logo} className="flex items-center justify-center h-24 rounded-xl border border-slate-200 bg-white grayscale hover:grayscale-0 hover:border-indigo-200 hover:shadow-lg hover:scale-110 transition-all duration-300 cursor-pointer group" title={logo}>
|
||||
<span className="text-base font-semibold text-slate-500 group-hover:text-indigo-600 transition-colors">{logo}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Badge className="mt-8 bg-indigo-50 text-indigo-600 border-0 text-sm px-4 py-1.5">50+ integrations</Badge>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── CTA ── */}
|
||||
<section className="py-24 bg-gradient-to-br from-indigo-600 via-indigo-700 to-slate-900">
|
||||
<div className="mx-auto max-w-3xl px-6 text-center">
|
||||
<h2 className="animate-fade-up text-3xl font-bold text-white sm:text-4xl">Ready to transform your workflow?</h2>
|
||||
<p className="mt-4 text-lg text-indigo-200">Join 10,000+ teams already using Nexus to ship faster and smarter.</p>
|
||||
<div className="mt-10 flex flex-col sm:flex-row justify-center gap-4">
|
||||
<Button asChild size="lg" className="active:scale-[0.98] bg-white text-indigo-700 hover:bg-indigo-50 rounded-full px-8 shadow-lg text-base font-semibold">
|
||||
<Link to="/signup">Start Free Trial <ArrowRight className="ml-2 h-4 w-4" /></Link>
|
||||
</Button>
|
||||
<Button asChild variant="outline" size="lg" className="active:scale-[0.98] rounded-full border-white/30 text-white hover:bg-white/10 text-base">
|
||||
<Link to="/contact">Talk to Sales</Link>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="mt-8 flex flex-wrap items-center justify-center gap-3">
|
||||
<Badge className="bg-white/10 text-white/80 border border-white/20 text-xs px-3 py-1">SOC 2</Badge>
|
||||
<Badge className="bg-white/10 text-white/80 border border-white/20 text-xs px-3 py-1">GDPR</Badge>
|
||||
<Badge className="bg-white/10 text-white/80 border border-white/20 text-xs px-3 py-1">99.9% Uptime</Badge>
|
||||
</div>
|
||||
<p className="mt-4 text-sm text-indigo-300">No credit card required. 14-day free trial.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user