Seed: services template (18 files)
This commit is contained in:
@@ -0,0 +1,120 @@
|
||||
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 { Input } from "@/components/ui/input";
|
||||
import { ArrowRight, Clock, Mail } from "lucide-react";
|
||||
import Header from "@/components/Header";
|
||||
import Footer from "@/components/Footer";
|
||||
|
||||
const featuredArticle = {
|
||||
title: "The Future of Design Systems in 2026",
|
||||
excerpt: "How modern design systems are evolving beyond component libraries into intelligent, adaptive frameworks that bridge design and development.",
|
||||
category: "Design",
|
||||
author: "Alex Rivera",
|
||||
date: "Mar 15, 2026",
|
||||
readTime: "8 min read",
|
||||
gradient: "from-violet-400 via-purple-500 to-indigo-600",
|
||||
};
|
||||
|
||||
const articles = [
|
||||
{ title: "Building Performant React Applications", excerpt: "Key strategies for optimizing React apps, from code splitting to server components.", category: "Development", date: "Mar 12, 2026", gradient: "from-sky-400 to-blue-500" },
|
||||
{ title: "The ROI of Great UX Design", excerpt: "Why investing in user experience consistently delivers measurable business results.", category: "Marketing", date: "Mar 10, 2026", gradient: "from-rose-400 to-pink-500" },
|
||||
{ title: "Color Theory for Digital Products", excerpt: "A practical guide to choosing and applying color palettes that convert.", category: "Design", date: "Mar 8, 2026", gradient: "from-emerald-400 to-teal-500" },
|
||||
{ title: "AI-Powered Development Workflows", excerpt: "How AI tools are reshaping the way we write, test, and deploy code.", category: "Technology", date: "Mar 6, 2026", gradient: "from-amber-400 to-orange-500" },
|
||||
{ title: "Content Strategy That Drives Growth", excerpt: "A framework for creating content that attracts, engages, and converts your target audience.", category: "Strategy", date: "Mar 4, 2026", gradient: "from-cyan-400 to-blue-500" },
|
||||
{ title: "How We Rebuilt Acme Corp in 8 Weeks", excerpt: "An inside look at our process for delivering a complete digital transformation on a tight timeline.", category: "Case Study", date: "Mar 2, 2026", gradient: "from-fuchsia-400 to-purple-500" },
|
||||
];
|
||||
|
||||
export default function BlogPage() {
|
||||
const [email, setEmail] = useState("");
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background text-foreground antialiased">
|
||||
<Header />
|
||||
|
||||
{/* ── HERO ── */}
|
||||
<section className="pt-32 pb-20">
|
||||
<div className="mx-auto max-w-7xl px-6 text-center">
|
||||
<h1 className="text-4xl sm:text-5xl font-extrabold tracking-tight animate-fade-up">Insights & Resources</h1>
|
||||
<p className="mt-6 text-lg text-muted-foreground max-w-2xl mx-auto">
|
||||
Thoughts on design, development, marketing, and building great digital products.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── FEATURED ARTICLE ── */}
|
||||
<section className="pb-16">
|
||||
<div className="mx-auto max-w-7xl px-6">
|
||||
<Card className="overflow-hidden border hover:shadow-2xl transition-all duration-500">
|
||||
<div className="grid lg:grid-cols-2">
|
||||
<div className={`relative aspect-video lg:aspect-auto bg-gradient-to-br \${featuredArticle.gradient} flex items-center justify-center text-white/30 text-sm overflow-hidden`}>
|
||||
<div className="absolute inset-0 opacity-[0.1]" style={{ backgroundImage: "radial-gradient(circle, white 1px, transparent 1px)", backgroundSize: "18px 18px" }} />
|
||||
<div className="absolute -top-8 -right-8 w-32 h-32 rounded-full bg-white/10 blur-2xl" />
|
||||
Featured Image
|
||||
</div>
|
||||
<CardContent className="p-8 lg:p-12 flex flex-col justify-center">
|
||||
<Badge variant="secondary" className="w-fit mb-4">{featuredArticle.category}</Badge>
|
||||
<h2 className="text-2xl font-bold tracking-tight">{featuredArticle.title}</h2>
|
||||
<p className="mt-3 text-muted-foreground leading-relaxed">{featuredArticle.excerpt}</p>
|
||||
<div className="mt-6 flex items-center gap-4 text-sm text-muted-foreground">
|
||||
<span className="font-medium text-foreground">{featuredArticle.author}</span>
|
||||
<span>{featuredArticle.date}</span>
|
||||
<span className="flex items-center gap-1"><Clock className="h-3.5 w-3.5" /> {featuredArticle.readTime}</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── ARTICLE GRID ── */}
|
||||
<section className="pb-24">
|
||||
<div className="mx-auto max-w-7xl px-6">
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 stagger">
|
||||
{articles.map((article, i) => (
|
||||
<Card key={i} className="overflow-hidden border hover:-translate-y-1 hover:shadow-xl transition-all duration-300 group">
|
||||
<div className={`relative aspect-video bg-gradient-to-br \${article.gradient} opacity-80 group-hover:opacity-100 transition-opacity flex items-center justify-center text-white/30 text-sm overflow-hidden`}>
|
||||
<div className="absolute inset-0 opacity-[0.1]" style={{ backgroundImage: "radial-gradient(circle, white 1px, transparent 1px)", backgroundSize: "16px 16px" }} />
|
||||
Article Image
|
||||
</div>
|
||||
<CardContent className="p-6">
|
||||
<Badge variant="secondary" className="mb-3">{article.category}</Badge>
|
||||
<h3 className="font-bold text-lg leading-tight group-hover:text-primary transition-colors">{article.title}</h3>
|
||||
<p className="mt-2 text-sm text-muted-foreground leading-relaxed line-clamp-2">{article.excerpt}</p>
|
||||
<div className="mt-4 flex items-center gap-2">
|
||||
<div className={`w-6 h-6 rounded-full bg-gradient-to-br \${article.gradient} shrink-0`} />
|
||||
<p className="text-xs text-muted-foreground">{article.date}</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── NEWSLETTER ── */}
|
||||
<section className="py-24 bg-muted/30">
|
||||
<div className="mx-auto max-w-2xl px-6 text-center">
|
||||
<Mail className="mx-auto h-10 w-10 text-primary mb-4" />
|
||||
<h2 className="text-3xl font-bold tracking-tight animate-fade-up">Stay in the Loop</h2>
|
||||
<p className="mt-4 text-muted-foreground">Get our latest insights delivered to your inbox. No spam, unsubscribe anytime.</p>
|
||||
<p className="mt-2 text-sm text-muted-foreground/70">Join 5,000+ subscribers</p>
|
||||
<div className="mt-8 flex gap-3 max-w-md mx-auto">
|
||||
<Input
|
||||
placeholder="you@email.com"
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="flex-1"
|
||||
/>
|
||||
<Button className="active:scale-[0.98]">Subscribe <ArrowRight className="ml-2 h-4 w-4" /></Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user