tknuth/entscheidomat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

SEO blogpost V2

Browse Source
This commit is contained in:
knuthtimo-lab
2026-08-05 20:17:01 +02:00
parent 529a95cba2
commit b423c4502a
26 changed files with 173 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
app/ratgeber/page.tsx
View File

@@ -1,4 +1,5 @@
import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import Nav from "@/components/nav";
import Footer from "@/components/footer";
@@ -28,14 +29,19 @@ export default function GuideIndexPage() {
</header>
<section className="mt-14 grid gap-5 md:grid-cols-3" aria-label="Ratgeberartikel">
{GUIDES.map((guide) => (
<article key={guide.slug} className="flex flex-col rounded-3xl border border-line bg-surface p-6 shadow-soft transition-transform duration-200 hover:-translate-y-1">
<p className="text-xs font-semibold uppercase tracking-[0.14em] text-[#0d7a57]">{guide.readingTime}</p>
<h2 className="mt-4 font-display text-3xl font-semibold leading-tight text-ink">{guide.title}</h2>
<p className="mt-4 flex-1 leading-relaxed text-ink-soft">{guide.excerpt}</p>
<p className="mt-6 text-sm text-ink-soft">Veröffentlicht am {guide.published}</p>
<Link href={`/ratgeber/${guide.slug}`} className="mt-5 font-semibold text-[#0d7a57] underline decoration-[#0d7a57]/30 underline-offset-4 transition-colors hover:text-[#095c41]">
Artikel lesen <span aria-hidden>→</span>
<article key={guide.slug} className="flex flex-col overflow-hidden rounded-3xl border border-line bg-surface shadow-soft transition-transform duration-200 hover:-translate-y-1">
<Link href={`/ratgeber/${guide.slug}`} className="relative block aspect-[3/2] overflow-hidden" tabIndex={-1} aria-hidden="true">
<Image src={guide.image.src} alt="" fill sizes="(min-width: 768px) 33vw, 100vw" className="object-cover transition-transform duration-500 hover:scale-105" />
</Link>
<div className="flex flex-1 flex-col p-6">
<p className="text-xs font-semibold uppercase tracking-[0.14em] text-[#0d7a57]">{guide.readingTime}</p>
<h2 className="mt-4 font-display text-3xl font-semibold leading-tight text-ink">{guide.title}</h2>
<p className="mt-4 flex-1 leading-relaxed text-ink-soft">{guide.excerpt}</p>
<p className="mt-6 text-sm text-ink-soft">Veröffentlicht am {guide.published}</p>
<Link href={`/ratgeber/${guide.slug}`} className="mt-5 font-semibold text-[#0d7a57] underline decoration-[#0d7a57]/30 underline-offset-4 transition-colors hover:text-[#095c41]">
Artikel lesen <span aria-hidden>→</span>
</Link>
</div>
</article>
))}
</section>