mmintel/klz-cables.com
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

wip
Some checks failed
Build & Deploy / deploy (push) Failing after 17s
Details

Browse Source
This commit is contained in:
Marc Mintel
2026-01-17 16:06:16 +01:00
parent f64cb71170
commit e6651761f3
20 changed files with 453 additions and 350 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
components/home/RecentPosts.tsx
View File

@@ -15,22 +15,22 @@ export default async function RecentPosts({ locale }: RecentPostsProps) {
if (recentPosts.length === 0) return null;
return (
<Section className="bg-neutral py-24">
<Section className="bg-neutral py-16 md:py-24">
<Container>
<div className="flex flex-col md:flex-row items-end justify-between mb-16 gap-6">
<div className="flex flex-col md:flex-row items-start md:items-end justify-between mb-12 md:mb-16 gap-6">
<Heading level={2} subtitle="Insights" className="mb-0">
{locale === 'de' ? 'Aktuelle Blogbeiträge' : 'Recent Blog Posts'}
</Heading>
<Link href={`/${locale}/blog`} className="group flex items-center text-primary font-bold text-lg">
<Link href={`/${locale}/blog`} className="group flex items-center text-primary font-bold text-lg touch-target">
{locale === 'de' ? 'Alle Beiträge ansehen' : 'View all posts'}
<span className="ml-2 transition-transform group-hover:translate-x-2">&rarr;</span>
</Link>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-10">
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-10">
{recentPosts.map((post) => (
<Link key={post.slug} href={`/${locale}/blog/${post.slug}`} className="group block">
<Card className="h-full flex flex-col border-none shadow-lg hover:shadow-2xl transition-all duration-500">
<Card className="h-full flex flex-col border-none shadow-lg hover:shadow-2xl transition-all duration-500 rounded-3xl">
{post.frontmatter.featuredImage && (
<div className="relative h-64 overflow-hidden">
<img
@@ -38,7 +38,7 @@ export default async function RecentPosts({ locale }: RecentPostsProps) {
alt={post.frontmatter.title}
className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
/>
<div className="absolute inset-0 bg-gradient-to-t from-primary-dark/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
<div className="absolute inset-0 image-overlay-gradient opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
{post.frontmatter.category && (
<Badge variant="accent" className="absolute top-4 left-4 shadow-md">
{post.frontmatter.category}
@@ -46,16 +46,16 @@ export default async function RecentPosts({ locale }: RecentPostsProps) {
)}
</div>
)}
<div className="p-8 flex flex-col flex-grow">
<div className="text-sm font-medium text-text-light mb-4 flex items-center gap-2">
<span className="w-8 h-px bg-neutral-medium" />
<div className="p-6 md:p-8 flex flex-col flex-grow">
<div className="text-xs md:text-sm font-medium text-text-light mb-3 md:mb-4 flex items-center gap-2">
<span className="w-6 md:w-8 h-px bg-neutral-medium" />
{new Date(post.frontmatter.date).toLocaleDateString(locale, {
year: 'numeric',
month: 'long',
day: 'numeric'
})}
</div>
<h3 className="text-2xl font-bold text-primary group-hover:text-accent-dark transition-colors line-clamp-2 mb-6 leading-tight">
<h3 className="text-xl md:text-2xl font-bold text-primary group-hover:text-accent-dark transition-colors line-clamp-2 mb-4 md:mb-6 leading-tight">
{post.frontmatter.title}
</h3>
<div className="mt-auto flex items-center text-primary font-bold group-hover:underline decoration-2 underline-offset-4">