Skip to content

Card ui changes #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Zahnentferner merged 4 commits into from
Aug 28, 2025
Merged

Card ui changes #9

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
dc7d1e5
commit: "uniform card sizes"
0xunLin Aug 27, 2025
a6db2d7
Merge branch 'StabilityNexus:main' into feature/my-contribution
0xunLin Aug 27, 2025
d5996f5
commit: "card change"
0xunLin Aug 27, 2025
65367ec
Merge branch 'feature/my-contribution' of github.com:0xunLin/StableVi…
0xunLin Aug 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 7 additions & 13 deletions components/blog-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,23 +16,19 @@ interface BlogCardProps {
post: BlogPost
}

// Conditionally set BASE_PATH depending on environment
const BASE_PATH = process.env.NODE_ENV === "production" ? "/StableViewpoints" : ""

export default function BlogCard({ post }: BlogCardProps) {


return (
<Link href={`/a/${post.slug}`} className="group">
<article className="bg-white shadow-lg overflow-hidden transition-all duration-300 hover:shadow-2xl hover:-translate-y-2 border border-gradient-to-r from-[#228B22]/10 to-[#FFBF00]/10 relative">
{/* Featured Star - Discrete yellow star in top right */}
<Link href={`/a/${post.slug}`} className="group h-full">
<article className="flex flex-col h-full bg-white shadow-lg overflow-hidden transition-all duration-300 hover:shadow-2xl hover:-translate-y-2 border border-gradient-to-r from-[#228B22]/10 to-[#FFBF00]/10 relative rounded-lg">
Copy link
Contributor

@coderabbitai coderabbitai bot Aug 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Fix non-existent Tailwind class; gradient never renders

border-gradient-to-r is not a valid Tailwind utility, and from/to only work with bg-gradient-to-*. As written, no gradient border is applied.

Quick fix (use a plain border):

-      <article className="flex flex-col h-full bg-white shadow-lg overflow-hidden transition-all duration-300 hover:shadow-2xl hover:-translate-y-2 border border-gradient-to-r from-[#228B22]/10 to-[#FFBF00]/10 relative rounded-lg">
+      <article className="flex flex-col h-full bg-white shadow-lg overflow-hidden transition-all duration-300 hover:shadow-2xl hover:-translate-y-2 border border-gray-200 relative rounded-lg">

If a gradient border is intended, wrap the article (outside this line range) like:

<div className="rounded-lg bg-gradient-to-r from-[#228B22]/20 to-[#FFBF00]/20 p-[1px]">
  <article className="flex flex-col h-full rounded-[inherit] bg-white shadow-lg overflow-hidden transition-all duration-300 hover:shadow-2xl hover:-translate-y-2 relative">
    {/* ... */}
  </article>
</div>
🤖 Prompt for AI Agents 
In components/blog-card.tsx around line 24, the class "border-gradient-to-r" is
invalid so the from/to utilities do nothing; remove the non-existent utility and
either use a plain border (e.g., replace with a valid border class like "border"
or "border border-gray-200") or implement a proper gradient border by wrapping
the <article> in a parent div that has "bg-gradient-to-r from[...] to[...]
p-[1px] rounded-lg" and move the rounded/bg/overflow classes onto the inner
<article> so the gradient shows as the border.


{post.featured && (
<div className="absolute top-3 right-3 z-20">
<Star className="w-5 h-5 fill-[#FFBF00] text-[#FFBF00] drop-shadow-sm" />
</div>
)}

{/* Image - Golden ratio aspect ratio (φ:1 ≈ 1.618:1) */}
<div className="relative w-full">
<Image
src={
Expand All @@ -41,24 +37,22 @@ export default function BlogCard({ post }: BlogCardProps) {
: post.image
}
alt={post.title}
width={1200} // pick a large enough base width
height={630} // aspect ratio will be preserved, height auto-scales
width={1200}
height={630}
className="w-full h-auto object-contain transition-transform duration-500 group-hover:scale-105"
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/30 via-transparent to-transparent" />
<div className="absolute inset-0 bg-gradient-to-br from-[#228B22]/10 via-transparent to-[#FFBF00]/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
</div>

{/* Content */}
<div className="p-6">
<div className="flex flex-col flex-grow p-6">
<h2 className="text-xl font-bold text-gray-900 mb-3 line-clamp-2 group-hover:bg-gradient-to-r group-hover:from-[#228B22] group-hover:to-[#91A511] group-hover:bg-clip-text group-hover:text-transparent transition-all duration-300">
{post.title}
</h2>

<p className="text-gray-600 mb-4 line-clamp-3">{post.excerpt}</p>

{/* Meta */}
<div className="flex items-center justify-between text-sm text-gray-500">
<div className="mt-auto flex items-center justify-between text-sm text-gray-500">
<div className="flex items-center gap-1 group-hover:text-[#228B22] transition-colors">
<User className="w-4 h-4" />
<span>{post.author}</span>
Expand Down