tknuth/QR-master
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

weekly seo

Browse Source
This commit is contained in:
Timo Knuth
2026-05-11 11:10:30 +02:00
parent 35e7e77f6b
commit 81d1fdd280
11 changed files with 6520 additions and 4718 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
src/components/marketing/UseCasePageTemplate.tsx
View File

@@ -1,7 +1,8 @@
import type { FAQItem } from "@/lib/types";
import type { Metadata } from "next";
import Link from "next/link";
import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import {
ArrowRight,
CheckCircle2,
@@ -62,10 +63,12 @@ type UseCasePageTemplateProps = {
}[];
checklistTitle: string;
checklist: string[];
supportLinks: LinkCard[];
faq: FAQItem[];
schemaData?: Record<string, unknown>[];
};
supportLinks: LinkCard[];
faq: FAQItem[];
heroImage?: string;
heroImageAlt?: string;
schemaData?: Record<string, unknown>[];
};
export function buildUseCaseMetadata({
title,
@@ -124,10 +127,12 @@ export function UseCasePageTemplate({
workflowCards,
checklistTitle,
checklist,
supportLinks,
faq,
schemaData = [],
}: UseCasePageTemplateProps) {
supportLinks,
faq,
heroImage,
heroImageAlt = "QR code workflow example",
schemaData = [],
}: UseCasePageTemplateProps) {
return (
<>
<SeoJsonLd
@@ -217,45 +222,75 @@ export function UseCasePageTemplate({
</div>
</div>
<Card className="border-white/10 bg-white/10 p-8 text-white shadow-2xl shadow-slate-950/30 backdrop-blur">
<div className="space-y-6">
<div className="flex items-center justify-between border-b border-white/10 pb-4">
<div>
<div className="text-xs uppercase tracking-[0.24em] text-cyan-200/70">
Workflow snapshot
</div>
<div className="mt-2 text-2xl font-semibold text-white">
What matters here
</div>
</div>
<Compass className="h-9 w-9 text-cyan-300" />
</div>
<div className="space-y-4">
{workflowCards.map((card, index) => (
<div
key={card.title}
className="rounded-2xl border border-white/10 bg-slate-950/30 p-4"
>
<div className="mb-2 flex items-center gap-3">
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-cyan-400/15 text-sm font-semibold text-cyan-200">
{index + 1}
</div>
<div className="text-lg font-semibold text-white">
{card.title}
</div>
</div>
<p className="text-sm leading-6 text-blue-50/80">
{card.description}
</p>
</div>
))}
</div>
</div>
</Card>
</div>
</div>
</section>
{heroImage ? (
<div className="rounded-[2rem] border border-white/10 bg-white/10 p-3 shadow-2xl shadow-slate-950/30 backdrop-blur">
<div className="relative aspect-[4/3] overflow-hidden rounded-[1.5rem] border border-white/10 bg-slate-950/40">
<Image
src={heroImage}
alt={heroImageAlt}
fill
priority
sizes="(min-width: 1024px) 38vw, 100vw"
className="object-cover"
/>
</div>
<div className="grid gap-3 px-2 py-4 text-sm text-blue-50/82 sm:grid-cols-3 lg:grid-cols-1 xl:grid-cols-3">
{workflowCards.map((card, index) => (
<div key={card.title} className="flex gap-3">
<div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-cyan-300/15 text-xs font-semibold text-cyan-200">
{index + 1}
</div>
<div>
<div className="font-semibold text-white">
{card.title}
</div>
<p className="mt-1 leading-5">{card.description}</p>
</div>
</div>
))}
</div>
</div>
) : (
<Card className="border-white/10 bg-white/10 p-8 text-white shadow-2xl shadow-slate-950/30 backdrop-blur">
<div className="space-y-6">
<div className="flex items-center justify-between border-b border-white/10 pb-4">
<div>
<div className="text-xs uppercase tracking-[0.24em] text-cyan-200/70">
Workflow snapshot
</div>
<div className="mt-2 text-2xl font-semibold text-white">
What matters here
</div>
</div>
<Compass className="h-9 w-9 text-cyan-300" />
</div>
<div className="space-y-4">
{workflowCards.map((card, index) => (
<div
key={card.title}
className="rounded-2xl border border-white/10 bg-slate-950/30 p-4"
>
<div className="mb-2 flex items-center gap-3">
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-cyan-400/15 text-sm font-semibold text-cyan-200">
{index + 1}
</div>
<div className="text-lg font-semibold text-white">
{card.title}
</div>
</div>
<p className="text-sm leading-6 text-blue-50/80">
{card.description}
</p>
</div>
))}
</div>
</div>
</Card>
)}
</div>
</div>
</section>
<div className="container mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
<AnswerFirstBlock