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

Seed: services template (18 files)

Browse Source
This commit is contained in:
jyswee
2026-07-23 22:57:37 +00:00
parent 5e08f5da68
commit 8dfeee7108
1 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/Blog.tsx
+3 -3
View File
@@ -49,7 +49,7 @@ export default function BlogPage() {
<div className="mx-auto max-w-7xl px-6"> <div className="mx-auto max-w-7xl px-6">
<Card className="overflow-hidden border hover:shadow-2xl transition-all duration-500"> <Card className="overflow-hidden border hover:shadow-2xl transition-all duration-500">
<div className="grid lg:grid-cols-2"> <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={`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 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" /> <div className="absolute -top-8 -right-8 w-32 h-32 rounded-full bg-white/10 blur-2xl" />
Featured Image Featured Image
@@ -75,7 +75,7 @@ export default function BlogPage() {
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 stagger"> <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 stagger">
{articles.map((article, i) => ( {articles.map((article, i) => (
<Card key={i} className="overflow-hidden border hover:-translate-y-1 hover:shadow-xl transition-all duration-300 group"> <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={`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" }} /> <div className="absolute inset-0 opacity-[0.1]" style={{ backgroundImage: "radial-gradient(circle, white 1px, transparent 1px)", backgroundSize: "16px 16px" }} />
Article Image Article Image
</div> </div>
@@ -84,7 +84,7 @@ export default function BlogPage() {
<h3 className="font-bold text-lg leading-tight group-hover:text-primary transition-colors">{article.title}</h3> <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> <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="mt-4 flex items-center gap-2">
<div className={`w-6 h-6 rounded-full bg-gradient-to-br \${article.gradient} shrink-0`} /> <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> <p className="text-xs text-muted-foreground">{article.date}</p>
</div> </div>
</CardContent> </CardContent>