Seed: saas template (34 files)
This commit is contained in:
@@ -0,0 +1,146 @@
|
|||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { Card, CardContent } from "@/components/ui/card";
|
||||||
|
import {
|
||||||
|
ArrowRight, CheckCircle2, Zap, Shield, BarChart3, Users,
|
||||||
|
Layers, Globe, Workflow, BrainCircuit, GitBranch, Blocks
|
||||||
|
} from "lucide-react";
|
||||||
|
import Header from "@/components/Header";
|
||||||
|
import Footer from "@/components/Footer";
|
||||||
|
|
||||||
|
const featureSections = [
|
||||||
|
{
|
||||||
|
badge: "Automation",
|
||||||
|
title: "Intelligent Automation That Learns",
|
||||||
|
desc: "Our AI engine observes how your team works and continuously optimizes task routing, resource allocation, and sprint planning.",
|
||||||
|
bullets: [
|
||||||
|
"AI-powered task assignment based on team capacity and expertise",
|
||||||
|
"Automated status updates and progress tracking",
|
||||||
|
"Smart deadline predictions using historical sprint data",
|
||||||
|
],
|
||||||
|
icon: BrainCircuit,
|
||||||
|
gradient: "from-indigo-500 to-purple-600",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
badge: "Collaboration",
|
||||||
|
title: "Collaboration Without Boundaries",
|
||||||
|
desc: "Break down silos with real-time collaboration tools that keep remote, hybrid, and in-office teams perfectly in sync.",
|
||||||
|
bullets: [
|
||||||
|
"Real-time document editing with inline comments",
|
||||||
|
"Video huddles and screen sharing built right in",
|
||||||
|
"Cross-team visibility with shared project boards",
|
||||||
|
],
|
||||||
|
icon: Users,
|
||||||
|
gradient: "from-cyan-500 to-blue-600",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
badge: "Analytics",
|
||||||
|
title: "Analytics That Drive Decisions",
|
||||||
|
desc: "Go beyond vanity metrics. Get actionable insights with AI-powered predictions and automated reporting.",
|
||||||
|
bullets: [
|
||||||
|
"Customizable dashboards with drag-and-drop widgets",
|
||||||
|
"Predictive burn-down charts and velocity tracking",
|
||||||
|
"Automated weekly reports delivered to your inbox",
|
||||||
|
],
|
||||||
|
icon: BarChart3,
|
||||||
|
gradient: "from-emerald-500 to-teal-600",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const integrations = [
|
||||||
|
"Slack", "GitHub", "Figma", "Jira", "Google Drive",
|
||||||
|
"Notion", "Zoom", "Linear", "Salesforce", "HubSpot", "Stripe", "Zapier",
|
||||||
|
];
|
||||||
|
|
||||||
|
const stats = [
|
||||||
|
{ value: "10M+", label: "Tasks completed" },
|
||||||
|
{ value: "200+", label: "Integrations" },
|
||||||
|
{ value: "150+", label: "Countries" },
|
||||||
|
{ value: "60%", label: "Faster delivery" },
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function FeaturesPage() {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-white text-slate-900 antialiased">
|
||||||
|
<Header />
|
||||||
|
|
||||||
|
{/* ── HERO ── */}
|
||||||
|
<section className="pt-32 pb-16 bg-gradient-to-b from-slate-950 via-indigo-950 to-slate-900">
|
||||||
|
<div className="mx-auto max-w-7xl px-6 text-center">
|
||||||
|
<Badge className="mb-4 bg-indigo-500/10 text-indigo-300 border border-indigo-500/20">Platform</Badge>
|
||||||
|
<h1 className="animate-fade-up text-4xl font-bold tracking-tight text-white sm:text-5xl">Platform Features</h1>
|
||||||
|
<p className="mt-4 text-lg text-slate-400 max-w-2xl mx-auto">
|
||||||
|
Discover every tool your team needs to plan, build, and ship world-class products.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── FEATURE SECTIONS (Alternating) ── */}
|
||||||
|
{featureSections.map((section, i) => (
|
||||||
|
<section key={section.title} className={`py-24 \${i % 2 === 1 ? "bg-slate-50" : "bg-white"}`}>
|
||||||
|
<div className="mx-auto max-w-7xl px-6">
|
||||||
|
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
||||||
|
<div className={i % 2 === 1 ? "lg:order-2" : ""}>
|
||||||
|
<Badge className="mb-4 bg-indigo-50 text-indigo-600 border-0">{section.badge}</Badge>
|
||||||
|
<h2 className="animate-fade-up text-3xl font-bold tracking-tight">{section.title}</h2>
|
||||||
|
<p className="mt-4 text-lg text-slate-500 leading-relaxed">{section.desc}</p>
|
||||||
|
<ul className="mt-8 space-y-4">
|
||||||
|
{section.bullets.map((b) => (
|
||||||
|
<li key={b} className="flex items-start gap-3">
|
||||||
|
<CheckCircle2 className="h-5 w-5 text-indigo-600 mt-0.5 flex-shrink-0" />
|
||||||
|
<span className="text-slate-600">{b}</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
<Button asChild className="active:scale-[0.98] mt-8 rounded-full bg-indigo-600 hover:bg-indigo-500">
|
||||||
|
<Link to="/pricing">Learn More <ArrowRight className="ml-2 h-4 w-4" /></Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div className={i % 2 === 1 ? "lg:order-1" : ""}>
|
||||||
|
<div className={`animate-scale-in aspect-[4/3] rounded-2xl bg-gradient-to-br \${section.gradient} flex items-center justify-center shadow-2xl shadow-indigo-500/10 relative overflow-hidden`}>
|
||||||
|
<div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC4wMyI+PGNpcmNsZSBjeD0iMSIgY3k9IjEiIHI9IjEiLz48L2c+PC9nPjwvc3ZnPg==')] opacity-60" />
|
||||||
|
<div className="absolute -top-10 -right-10 w-40 h-40 rounded-full bg-white/10 blur-3xl" />
|
||||||
|
<div className="absolute -bottom-10 -left-10 w-32 h-32 rounded-full bg-white/10 blur-3xl" />
|
||||||
|
<section.icon className="relative h-24 w-24 text-white/30" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{/* ── INTEGRATIONS ── */}
|
||||||
|
<section className="py-24 bg-white">
|
||||||
|
<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 your favorite tools</h2>
|
||||||
|
<p className="mt-4 text-slate-500 max-w-2xl mx-auto">Connect Nexus to the tools you already use. 200+ integrations and growing.</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">
|
||||||
|
{integrations.map((name) => (
|
||||||
|
<div key={name} className="flex items-center justify-center h-20 rounded-xl border border-slate-200 hover:border-indigo-200 hover:shadow-md hover:scale-110 transition-all duration-300 bg-white">
|
||||||
|
<span className="text-sm font-medium text-slate-600">{name}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── STATS ── */}
|
||||||
|
<section className="py-20 bg-gradient-to-br from-indigo-600 to-slate-900">
|
||||||
|
<div className="mx-auto max-w-5xl px-6">
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
|
||||||
|
{stats.map((s) => (
|
||||||
|
<div key={s.label}>
|
||||||
|
<div className="text-4xl font-bold text-white">{s.value}</div>
|
||||||
|
<div className="mt-2 text-sm text-indigo-200">{s.label}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user