Seed: saas template (34 files)
This commit is contained in:
@@ -0,0 +1,142 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
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 Header from "@/components/Header";
|
||||||
|
import Footer from "@/components/Footer";
|
||||||
|
|
||||||
|
const categories = ["All", "Product", "Engineering", "Company", "Guides"];
|
||||||
|
|
||||||
|
const articles = [
|
||||||
|
{
|
||||||
|
title: "How AI is Reshaping Project Management in 2025",
|
||||||
|
excerpt: "Discover how machine learning is automating the mundane and freeing teams to focus on creative work.",
|
||||||
|
category: "Product",
|
||||||
|
author: "Alex Kim",
|
||||||
|
initials: "AK",
|
||||||
|
date: "Mar 15, 2025",
|
||||||
|
gradient: "from-indigo-500 to-purple-600",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Building a Culture of Asynchronous Collaboration",
|
||||||
|
excerpt: "Why the best distributed teams invest in async-first workflows and how you can too.",
|
||||||
|
category: "Guides",
|
||||||
|
author: "Sophia Patel",
|
||||||
|
initials: "SP",
|
||||||
|
date: "Mar 8, 2025",
|
||||||
|
gradient: "from-cyan-500 to-blue-600",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Our Journey to SOC 2 Type II Compliance",
|
||||||
|
excerpt: "A behind-the-scenes look at how we achieved enterprise-grade security certification.",
|
||||||
|
category: "Engineering",
|
||||||
|
author: "James Moreno",
|
||||||
|
initials: "JM",
|
||||||
|
date: "Feb 28, 2025",
|
||||||
|
gradient: "from-emerald-500 to-teal-600",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Introducing Custom Workflow Automations",
|
||||||
|
excerpt: "Build powerful no-code automations that save your team hours every week.",
|
||||||
|
category: "Product",
|
||||||
|
author: "Lena Chen",
|
||||||
|
initials: "LC",
|
||||||
|
date: "Feb 20, 2025",
|
||||||
|
gradient: "from-amber-500 to-orange-600",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Scaling from 10 to 10,000 Teams: Lessons Learned",
|
||||||
|
excerpt: "The architectural decisions and trade-offs we made during our hyper-growth phase.",
|
||||||
|
category: "Engineering",
|
||||||
|
author: "Sophia Patel",
|
||||||
|
initials: "SP",
|
||||||
|
date: "Feb 12, 2025",
|
||||||
|
gradient: "from-rose-500 to-pink-600",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "The Future of Work is Hybrid: Our Playbook",
|
||||||
|
excerpt: "How we keep our own team productive across 12 time zones and 4 continents.",
|
||||||
|
category: "Company",
|
||||||
|
author: "Alex Kim",
|
||||||
|
initials: "AK",
|
||||||
|
date: "Feb 5, 2025",
|
||||||
|
gradient: "from-violet-500 to-indigo-600",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function BlogPage() {
|
||||||
|
const [activeCategory, setActiveCategory] = useState("All");
|
||||||
|
|
||||||
|
const filtered = activeCategory === "All" ? articles : articles.filter((a) => a.category === activeCategory);
|
||||||
|
|
||||||
|
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">Blog</Badge>
|
||||||
|
<h1 className="animate-fade-up text-4xl font-bold tracking-tight sm:text-5xl">Insights & Updates</h1>
|
||||||
|
<p className="mt-4 text-lg text-slate-500 max-w-2xl mx-auto">
|
||||||
|
Product news, engineering deep-dives, and guides from the Nexus team.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── CONTENT ── */}
|
||||||
|
<section className="py-24">
|
||||||
|
<div className="mx-auto max-w-7xl px-6">
|
||||||
|
<div className="flex flex-wrap gap-2 mb-12 justify-center">
|
||||||
|
{categories.map((cat) => (
|
||||||
|
<Button
|
||||||
|
key={cat}
|
||||||
|
variant={activeCategory === cat ? "default" : "outline"}
|
||||||
|
size="sm"
|
||||||
|
className={`rounded-full \${activeCategory === cat ? "bg-indigo-600 hover:bg-indigo-500" : ""}`}
|
||||||
|
onClick={() => setActiveCategory(cat)}
|
||||||
|
>
|
||||||
|
{cat}
|
||||||
|
</Button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 stagger">
|
||||||
|
{filtered.map((article) => (
|
||||||
|
<Card key={article.title} className="overflow-hidden border-slate-200 hover:-translate-y-1 hover:shadow-xl hover:border-indigo-200 transition-all duration-300 group cursor-pointer">
|
||||||
|
<div className={`aspect-[16/9] bg-gradient-to-br \${article.gradient} 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-8 -right-8 w-32 h-32 rounded-full bg-white/10 blur-3xl" />
|
||||||
|
<div className="absolute -bottom-8 -left-8 w-24 h-24 rounded-full bg-white/10 blur-3xl" />
|
||||||
|
<span className="relative text-white/40 text-sm">Article Image</span>
|
||||||
|
</div>
|
||||||
|
<CardContent className="p-6">
|
||||||
|
<Badge className="mb-3 bg-slate-100 text-slate-600 border-0 text-xs">{article.category}</Badge>
|
||||||
|
<h3 className="font-semibold text-lg leading-tight group-hover:text-indigo-600 transition-colors">{article.title}</h3>
|
||||||
|
<p className="mt-2 text-sm text-slate-500 line-clamp-2">{article.excerpt}</p>
|
||||||
|
<div className="mt-4 flex items-center gap-3">
|
||||||
|
<Avatar className="h-8 w-8">
|
||||||
|
<AvatarFallback className="bg-gradient-to-br from-indigo-400 to-cyan-400 text-white text-xs">{article.initials}</AvatarFallback>
|
||||||
|
</Avatar>
|
||||||
|
<div>
|
||||||
|
<div className="text-sm font-medium">{article.author}</div>
|
||||||
|
<div className="text-xs text-slate-400">{article.date}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-12 text-center">
|
||||||
|
<Button variant="outline" className="active:scale-[0.98] rounded-full px-8">Load More Articles</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user