Seed: saas template (34 files)
This commit is contained in:
@@ -0,0 +1,148 @@
|
|||||||
|
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 { Avatar, AvatarFallback } from "@/components/ui/avatar";
|
||||||
|
import { ArrowRight, Linkedin, Heart, Target, Lightbulb, Users } from "lucide-react";
|
||||||
|
import Header from "@/components/Header";
|
||||||
|
import Footer from "@/components/Footer";
|
||||||
|
|
||||||
|
const team = [
|
||||||
|
{ name: "Alex Kim", role: "Co-Founder & CEO", initials: "AK" },
|
||||||
|
{ name: "Sophia Patel", role: "Co-Founder & CTO", initials: "SP" },
|
||||||
|
{ name: "James Moreno", role: "VP of Engineering", initials: "JM" },
|
||||||
|
{ name: "Lena Chen", role: "Head of Design", initials: "LC" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const values = [
|
||||||
|
{ icon: Target, title: "Customer Obsessed", desc: "Every decision starts with what is best for our users." },
|
||||||
|
{ icon: Lightbulb, title: "Relentlessly Innovative", desc: "We push the boundaries of what project management can be." },
|
||||||
|
{ icon: Heart, title: "People First", desc: "We build for humans, and we treat our team as family." },
|
||||||
|
{ icon: Users, title: "Radically Transparent", desc: "Open roadmaps, public changelogs, and honest communication." },
|
||||||
|
];
|
||||||
|
|
||||||
|
const milestones = [
|
||||||
|
{ year: "2020", event: "Founded in San Francisco by two ex-Google engineers" },
|
||||||
|
{ year: "2021", event: "Launched beta with 500 early adopter teams" },
|
||||||
|
{ year: "2022", event: "Series A: $18M raised, 5,000 teams onboarded" },
|
||||||
|
{ year: "2023", event: "AI Copilot launched, crossed 10,000 teams" },
|
||||||
|
{ year: "2024", event: "Series B: $45M raised, expanded to 150+ countries" },
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function AboutPage() {
|
||||||
|
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-50 to-white">
|
||||||
|
<div className="mx-auto max-w-7xl px-6 text-center">
|
||||||
|
<Badge className="mb-4 bg-indigo-50 text-indigo-600 border-0">About Us</Badge>
|
||||||
|
<h1 className="animate-fade-up text-4xl font-bold tracking-tight sm:text-5xl">We are building the future of work</h1>
|
||||||
|
<p className="mt-4 text-lg text-slate-500 max-w-2xl mx-auto">
|
||||||
|
Nexus was born from a simple belief: teams deserve tools that work as hard as they do. We are a team of engineers, designers, and dreamers on a mission to make work feel effortless.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── MISSION ── */}
|
||||||
|
<section className="py-24 bg-white">
|
||||||
|
<div className="mx-auto max-w-7xl px-6">
|
||||||
|
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
||||||
|
<div>
|
||||||
|
<Badge className="mb-4 bg-cyan-50 text-cyan-600 border-0">Our Mission</Badge>
|
||||||
|
<h2 className="animate-fade-up text-3xl font-bold tracking-tight">Empower every team to do their best work</h2>
|
||||||
|
<p className="mt-6 text-slate-500 leading-relaxed text-lg">We believe that great software should amplify human potential, not replace it. Nexus combines the best of AI with intuitive design so teams can focus on what matters most: building great products.</p>
|
||||||
|
<Button asChild className="active:scale-[0.98] mt-8 rounded-full bg-indigo-600 hover:bg-indigo-500">
|
||||||
|
<Link to="/features">See What We Built <ArrowRight className="ml-2 h-4 w-4" /></Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div className="animate-scale-in aspect-[4/3] rounded-2xl bg-gradient-to-br from-indigo-100 via-cyan-50 to-slate-100 flex items-center justify-center 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-indigo-300/30 blur-3xl" />
|
||||||
|
<div className="absolute -bottom-10 -left-10 w-32 h-32 rounded-full bg-cyan-300/30 blur-3xl" />
|
||||||
|
<span className="relative text-slate-400 text-sm">Mission Image</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── TEAM ── */}
|
||||||
|
<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-indigo-50 text-indigo-600 border-0">Our Team</Badge>
|
||||||
|
<h2 className="animate-fade-up text-3xl font-bold tracking-tight">Meet the people behind Nexus</h2>
|
||||||
|
</div>
|
||||||
|
<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-8 stagger">
|
||||||
|
{team.map((member) => (
|
||||||
|
<Card key={member.name} className="hover-card-lift border-slate-200 text-center hover:shadow-lg transition-all duration-300">
|
||||||
|
<CardContent className="p-8">
|
||||||
|
<Avatar className="h-20 w-20 mx-auto mb-4">
|
||||||
|
<AvatarFallback className="bg-gradient-to-br from-indigo-500 to-cyan-500 text-white text-xl font-bold">{member.initials}</AvatarFallback>
|
||||||
|
</Avatar>
|
||||||
|
<h3 className="font-semibold text-lg">{member.name}</h3>
|
||||||
|
<p className="text-sm text-slate-500 mt-1">{member.role}</p>
|
||||||
|
<a href="#" className="inline-flex items-center gap-1 mt-4 text-indigo-600 hover:text-indigo-700 text-sm">
|
||||||
|
<Linkedin className="h-4 w-4" /> LinkedIn
|
||||||
|
</a>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── VALUES ── */}
|
||||||
|
<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">Our Values</Badge>
|
||||||
|
<h2 className="animate-fade-up text-3xl font-bold tracking-tight">What drives us every day</h2>
|
||||||
|
</div>
|
||||||
|
<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6 stagger">
|
||||||
|
{values.map((v) => (
|
||||||
|
<Card key={v.title} className="hover-card-lift border-slate-200 hover:border-indigo-200 hover:shadow-lg transition-all duration-300">
|
||||||
|
<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">
|
||||||
|
<v.icon className="h-6 w-6 text-white" />
|
||||||
|
</div>
|
||||||
|
<h3 className="font-semibold mb-2">{v.title}</h3>
|
||||||
|
<p className="text-sm text-slate-500">{v.desc}</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── TIMELINE ── */}
|
||||||
|
<section className="py-24 bg-slate-50">
|
||||||
|
<div className="mx-auto max-w-3xl px-6">
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<Badge className="mb-4 bg-indigo-50 text-indigo-600 border-0">Our Journey</Badge>
|
||||||
|
<h2 className="animate-fade-up text-3xl font-bold tracking-tight">Company milestones</h2>
|
||||||
|
</div>
|
||||||
|
<div className="relative">
|
||||||
|
<div className="absolute left-4 top-0 bottom-0 w-px bg-gradient-to-b from-indigo-500 to-cyan-500" />
|
||||||
|
<div className="space-y-10">
|
||||||
|
{milestones.map((m) => (
|
||||||
|
<div key={m.year} className="flex gap-6 items-start">
|
||||||
|
<div className="relative flex-shrink-0 h-9 w-9 rounded-full bg-indigo-600 flex items-center justify-center text-white text-xs font-bold ring-4 ring-white">
|
||||||
|
{m.year.slice(2)}
|
||||||
|
</div>
|
||||||
|
<div className="pt-1">
|
||||||
|
<span className="text-sm font-bold text-indigo-600">{m.year}</span>
|
||||||
|
<p className="text-slate-600 mt-1">{m.event}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user