vibeasite-templates/template-blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Seed: blog template (17 files)

Browse Source
This commit is contained in:
jyswee
2026-07-23 22:56:15 +00:00
parent b5211534da
commit 18c91b26a9
1 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/Index.tsx
+8 -8
View File
@@ -77,15 +77,15 @@ export default function IndexPage() {
{/* ── FEATURED HERO ── */} {/* ── FEATURED HERO ── */}
<section className="py-24 pb-0"> <section className="py-24 pb-0">
<div className="mx-auto max-w-7xl px-6 pt-8"> <div className="mx-auto max-w-7xl px-6 pt-8">
<Link to={`/article/\${featuredArticle.slug}`} className="group block animate-fade-in"> <Link to={`/article/${featuredArticle.slug}`} className="group block animate-fade-in">
<div className="relative overflow-hidden rounded-3xl hover:shadow-2xl transition-all duration-500"> <div className="relative overflow-hidden rounded-3xl hover:shadow-2xl transition-all duration-500">
<div className={`aspect-[21/9] bg-gradient-to-br \${featuredArticle.gradient}`}> <div className={`aspect-[21/9] bg-gradient-to-br ${featuredArticle.gradient}`}>
<div className="absolute inset-0" style={{ backgroundImage: "radial-gradient(circle at 25% 25%, rgba(255,255,255,0.15) 1px, transparent 1px)", backgroundSize: "20px 20px" }} /> <div className="absolute inset-0" style={{ backgroundImage: "radial-gradient(circle at 25% 25%, rgba(255,255,255,0.15) 1px, transparent 1px)", backgroundSize: "20px 20px" }} />
<div className="absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-white/10 blur-3xl" /> <div className="absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-white/10 blur-3xl" />
<div className="absolute bottom-1/3 right-1/4 w-48 h-48 rounded-full bg-white/10 blur-3xl" /> <div className="absolute bottom-1/3 right-1/4 w-48 h-48 rounded-full bg-white/10 blur-3xl" />
</div> </div>
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-black/10" /> <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-black/10" />
<Badge className={`absolute top-6 left-6 border-0 z-10 \${categoryColors[featuredArticle.category] || "bg-emerald-100 text-emerald-700"}`}> <Badge className={`absolute top-6 left-6 border-0 z-10 ${categoryColors[featuredArticle.category] || "bg-emerald-100 text-emerald-700"}`}>
{featuredArticle.category} {featuredArticle.category}
</Badge> </Badge>
<div className="absolute bottom-0 left-0 right-0 p-8 sm:p-12"> <div className="absolute bottom-0 left-0 right-0 p-8 sm:p-12">
@@ -133,12 +133,12 @@ export default function IndexPage() {
<div className="lg:col-span-3"> <div className="lg:col-span-3">
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 stagger"> <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 stagger">
{latestArticles.map((article) => ( {latestArticles.map((article) => (
<Link to={`/article/\${article.slug}`} key={article.id} className="group"> <Link to={`/article/${article.slug}`} key={article.id} className="group">
<Card className="overflow-hidden border-0 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 bg-white"> <Card className="overflow-hidden border-0 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 bg-white">
<div className={`relative aspect-video bg-gradient-to-br \${article.gradient}`}> <div className={`relative aspect-video bg-gradient-to-br ${article.gradient}`}>
<div className="absolute inset-0" style={{ backgroundImage: "radial-gradient(circle at 25% 25%, rgba(255,255,255,0.15) 1px, transparent 1px)", backgroundSize: "20px 20px" }} /> <div className="absolute inset-0" style={{ backgroundImage: "radial-gradient(circle at 25% 25%, rgba(255,255,255,0.15) 1px, transparent 1px)", backgroundSize: "20px 20px" }} />
<div className="absolute top-1/3 left-1/4 w-24 h-24 rounded-full bg-white/10 blur-2xl" /> <div className="absolute top-1/3 left-1/4 w-24 h-24 rounded-full bg-white/10 blur-2xl" />
<Badge className={`absolute top-3 left-3 border-0 text-xs \${categoryColors[article.category] || "bg-emerald-100 text-emerald-700"}`}> <Badge className={`absolute top-3 left-3 border-0 text-xs ${categoryColors[article.category] || "bg-emerald-100 text-emerald-700"}`}>
{article.category} {article.category}
</Badge> </Badge>
</div> </div>
@@ -187,7 +187,7 @@ export default function IndexPage() {
<ul className="space-y-3"> <ul className="space-y-3">
{categories.map((cat) => ( {categories.map((cat) => (
<li key={cat.name}> <li key={cat.name}>
<Link to={`/category/\${cat.name.toLowerCase()}`} className="flex items-center justify-between text-sm text-stone-600 hover:text-emerald-600 transition-colors"> <Link to={`/category/${cat.name.toLowerCase()}`} className="flex items-center justify-between text-sm text-stone-600 hover:text-emerald-600 transition-colors">
<span>{cat.name}</span> <span>{cat.name}</span>
<Badge variant="secondary" className="bg-stone-100 text-stone-500 text-xs">{cat.count}</Badge> <Badge variant="secondary" className="bg-stone-100 text-stone-500 text-xs">{cat.count}</Badge>
</Link> </Link>
@@ -255,7 +255,7 @@ export default function IndexPage() {
<ul className="space-y-4"> <ul className="space-y-4">
{latestArticles.slice(0, 3).map((article, i) => ( {latestArticles.slice(0, 3).map((article, i) => (
<li key={article.id}> <li key={article.id}>
<Link to={`/article/\${article.slug}`} className="flex gap-3 group"> <Link to={`/article/${article.slug}`} className="flex gap-3 group">
<span className="text-2xl font-bold text-stone-200">0{i + 1}</span> <span className="text-2xl font-bold text-stone-200">0{i + 1}</span>
<div> <div>
<p className="text-sm font-medium text-stone-800 group-hover:text-emerald-600 transition-colors line-clamp-2">{article.title}</p> <p className="text-sm font-medium text-stone-800 group-hover:text-emerald-600 transition-colors line-clamp-2">{article.title}</p>