Learn page content thumbnails at default breakpoint
This commit is contained in:
@@ -76,14 +76,14 @@ const ContentThumbnailTemplate = ({
|
|||||||
href={`/blog/${post.slug}`}
|
href={`/blog/${post.slug}`}
|
||||||
className={`block transition-transform duration-200 hover:scale-[1.02] ${className}`}
|
className={`block transition-transform duration-200 hover:scale-[1.02] ${className}`}
|
||||||
>
|
>
|
||||||
<div className="relative w-[320px] h-[225.5px] overflow-hidden pt-[13.75px] pr-[76px] pb-[73.75px] pl-[14px]">
|
<div className="relative min-w-[320px] h-[225.5px] overflow-hidden pt-[13.75px] pr-[76px] pb-[73.75px] pl-[14px]">
|
||||||
{/* Background SVG - sized to fit the 320x225.5 container exactly */}
|
{/* Background SVG - sized to fit the 320x225.5 container exactly */}
|
||||||
<div className="absolute inset-0 z-0">
|
<div className="absolute inset-0 z-0">
|
||||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||||
<img
|
<img
|
||||||
src={backgroundImage}
|
src={backgroundImage}
|
||||||
alt={`Background for ${post.frontmatter.title}`}
|
alt={`Background for ${post.frontmatter.title}`}
|
||||||
className="w-[320px] h-[225.5px] object-cover"
|
className="w-full h-[225.5px] object-cover object-bottom"
|
||||||
/>
|
/>
|
||||||
{/* Gradient overlay */}
|
{/* Gradient overlay */}
|
||||||
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-transparent to-black/70 z-10" />
|
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-transparent to-black/70 z-10" />
|
||||||
|
|||||||
@@ -22,13 +22,6 @@ export default function LearnPage() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
||||||
<div className="space-y-12">
|
|
||||||
{/* More Articles */}
|
|
||||||
<section>
|
|
||||||
<h2 className="text-2xl font-semibold text-[var(--color-content-inverse-primary)] mb-6">
|
|
||||||
More Articles
|
|
||||||
</h2>
|
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
{allPosts.slice(0, 3).map((post, index) => (
|
{allPosts.slice(0, 3).map((post, index) => (
|
||||||
<ContentThumbnailTemplate
|
<ContentThumbnailTemplate
|
||||||
@@ -39,21 +32,6 @@ export default function LearnPage() {
|
|||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Coming Soon */}
|
|
||||||
<section className="bg-[var(--color-surface-default-secondary)] p-6 rounded-lg shadow">
|
|
||||||
<h2 className="text-xl font-semibold text-[var(--color-content-inverse-primary)] mb-4">
|
|
||||||
More Content Coming Soon
|
|
||||||
</h2>
|
|
||||||
<p className="text-[var(--color-content-inverse-secondary)]">
|
|
||||||
We're working on adding more educational content to help you
|
|
||||||
build better communities. Check back soon for new articles and
|
|
||||||
resources.
|
|
||||||
</p>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user