fix: correct metadata dates, remove draft note, remove duplicate section
- Fixed all 'undefined NaN, NaN' dates in metadata divs across all 22 posts - Removed draft instruction from qr-code-scan-statistics-2026 - Removed duplicate 'Trackable / dynamic QR code' section from trackable-qr-codes - All posts now have proper 'Last updated' dates showing January 26, 2026
This commit is contained in:
Timo Knuth
303
src/app/(main)/(marketing)/use-cases/page.tsx
Normal file
303
src/app/(main)/(marketing)/use-cases/page.tsx
Normal file
@@ -0,0 +1,303 @@
|
||||
import type { Metadata } from "next";
|
||||
|
||||
import Link from "next/link";
|
||||
import {
|
||||
ArrowRight,
|
||||
Compass,
|
||||
LibraryBig,
|
||||
Link2,
|
||||
Route,
|
||||
Sparkles,
|
||||
} from "lucide-react";
|
||||
|
||||
import Breadcrumbs, { BreadcrumbItem } from "@/components/Breadcrumbs";
|
||||
import SeoJsonLd from "@/components/SeoJsonLd";
|
||||
import {
|
||||
MarketingPageTracker,
|
||||
TrackedCtaLink,
|
||||
} from "@/components/marketing/MarketingAnalytics";
|
||||
import { Button } from "@/components/ui/Button";
|
||||
import { Card } from "@/components/ui/Card";
|
||||
import {
|
||||
commercialPages,
|
||||
featuredUseCases,
|
||||
supportResources,
|
||||
upcomingUseCaseIdeas,
|
||||
} from "@/lib/growth-pages";
|
||||
import { breadcrumbSchema } from "@/lib/schema";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: {
|
||||
absolute: "QR Code Use Cases for Business | QR Master",
|
||||
},
|
||||
description:
|
||||
"Explore QR code use cases for restaurants, events, business cards, and campaign workflows built around dynamic updates and tracking.",
|
||||
alternates: {
|
||||
canonical: "https://www.qrmaster.net/use-cases",
|
||||
languages: {
|
||||
"x-default": "https://www.qrmaster.net/use-cases",
|
||||
en: "https://www.qrmaster.net/use-cases",
|
||||
},
|
||||
},
|
||||
openGraph: {
|
||||
title: "QR Code Use Cases for Business | QR Master",
|
||||
description:
|
||||
"Explore QR code use cases for restaurants, events, business cards, and campaign workflows built around dynamic updates and tracking.",
|
||||
url: "https://www.qrmaster.net/use-cases",
|
||||
type: "website",
|
||||
images: ["/og-image.png"],
|
||||
},
|
||||
twitter: {
|
||||
title: "QR Code Use Cases for Business | QR Master",
|
||||
description:
|
||||
"Explore QR code use cases for restaurants, events, business cards, and campaign workflows built around dynamic updates and tracking.",
|
||||
},
|
||||
};
|
||||
|
||||
export default function UseCasesHubPage() {
|
||||
const breadcrumbItems: BreadcrumbItem[] = [
|
||||
{ name: "Home", url: "/" },
|
||||
{ name: "Use Cases", url: "/use-cases" },
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<SeoJsonLd data={[breadcrumbSchema(breadcrumbItems)]} />
|
||||
<MarketingPageTracker pageType="use_case_hub" cluster="all-use-cases" />
|
||||
|
||||
<div className="min-h-screen bg-white">
|
||||
<section className="relative overflow-hidden bg-gradient-to-br from-slate-950 via-blue-950 to-cyan-950 text-white">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(125,211,252,0.18),transparent_34%),radial-gradient(circle_at_right,rgba(255,255,255,0.06),transparent_28%)]" />
|
||||
<div className="relative container mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:px-8">
|
||||
<Breadcrumbs
|
||||
items={breadcrumbItems}
|
||||
className="[&_a]:text-blue-100/80 [&_a:hover]:text-white [&_span]:text-blue-100/80 [&_[aria-current=page]]:text-white"
|
||||
/>
|
||||
|
||||
<div className="grid gap-12 lg:grid-cols-[minmax(0,1.2fr)_minmax(320px,0.8fr)] lg:items-center">
|
||||
<div className="space-y-8">
|
||||
<div className="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/10 px-4 py-2 text-sm font-semibold text-cyan-100 shadow-lg shadow-cyan-950/30 backdrop-blur">
|
||||
<Sparkles className="h-4 w-4" />
|
||||
<span>Commercial use-case hub</span>
|
||||
</div>
|
||||
|
||||
<div className="space-y-5">
|
||||
<h1 className="max-w-4xl text-4xl font-bold tracking-tight text-white md:text-5xl lg:text-6xl">
|
||||
QR code use cases that fit real business workflows
|
||||
</h1>
|
||||
<p className="max-w-3xl text-lg leading-8 text-blue-50/88 md:text-xl">
|
||||
This hub focuses on workflows where dynamic updates and
|
||||
measurement matter. It is not a list of random QR ideas. It
|
||||
is the commercial layer between QR Master's product pages,
|
||||
tools, and editorial content.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-3 text-sm text-blue-50/80 sm:grid-cols-2">
|
||||
{[
|
||||
"Use-case pages map back to a clear commercial parent.",
|
||||
"Each workflow is written for practical deployment, not filler traffic.",
|
||||
"Support resources reinforce the wedge around dynamic and trackable QR flows.",
|
||||
"The next cluster expansion will build on measurable routing and internal links.",
|
||||
].map((line) => (
|
||||
<div
|
||||
key={line}
|
||||
className="flex items-start gap-3 rounded-2xl border border-white/10 bg-white/5 px-4 py-3 backdrop-blur-sm"
|
||||
>
|
||||
<Route className="mt-0.5 h-4 w-4 shrink-0 text-cyan-300" />
|
||||
<span>{line}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-4 sm:flex-row">
|
||||
<TrackedCtaLink
|
||||
href={featuredUseCases[0].href}
|
||||
ctaLabel="Explore restaurant menu QR codes"
|
||||
ctaLocation="hero_primary"
|
||||
pageType="use_case_hub"
|
||||
cluster="all-use-cases"
|
||||
>
|
||||
<Button size="lg" className="w-full bg-white px-8 py-4 text-slate-950 hover:bg-slate-100 sm:w-auto">
|
||||
Explore featured workflows
|
||||
</Button>
|
||||
</TrackedCtaLink>
|
||||
|
||||
<TrackedCtaLink
|
||||
href="/qr-code-for-marketing-campaigns"
|
||||
ctaLabel="View marketing campaign QR page"
|
||||
ctaLocation="hero_secondary"
|
||||
pageType="use_case_hub"
|
||||
cluster="all-use-cases"
|
||||
>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="lg"
|
||||
className="w-full border-white/30 bg-white/5 px-8 py-4 text-white hover:bg-white/10 sm:w-auto"
|
||||
>
|
||||
See campaign workflows
|
||||
</Button>
|
||||
</TrackedCtaLink>
|
||||
</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-5">
|
||||
<div className="flex items-center gap-3">
|
||||
<Compass className="h-5 w-5 text-cyan-300" />
|
||||
<h2 className="text-2xl font-bold">How to use this hub</h2>
|
||||
</div>
|
||||
<div className="space-y-4 text-sm leading-6 text-blue-50/82">
|
||||
<p>
|
||||
Start with the workflow problem, not the QR format. If the
|
||||
printed code needs to survive destination changes or you
|
||||
need proof of performance, begin with the use case that
|
||||
matches that job.
|
||||
</p>
|
||||
<p>
|
||||
Each page below links back to the best product parent,
|
||||
forward to related workflows, and sideways to educational
|
||||
resources that help you deploy the QR well.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||
<div className="mb-10 max-w-3xl">
|
||||
<div className="text-sm font-semibold uppercase tracking-[0.22em] text-blue-700">
|
||||
Featured use cases
|
||||
</div>
|
||||
<h2 className="mt-3 text-3xl font-bold text-slate-900">
|
||||
First workflows in the growth rollout
|
||||
</h2>
|
||||
<p className="mt-4 text-lg leading-8 text-slate-600">
|
||||
These are the first routes worth surfacing because they connect
|
||||
cleanly to QR Master's strongest product angles and existing
|
||||
supporting content.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 lg:grid-cols-3">
|
||||
{featuredUseCases.map((page) => (
|
||||
<Link key={page.slug} href={page.href} className="group block">
|
||||
<Card className="flex h-full flex-col rounded-3xl border-slate-200 bg-white p-7 shadow-sm transition-all hover:-translate-y-1 hover:shadow-lg">
|
||||
<div className="text-sm font-semibold uppercase tracking-[0.18em] text-blue-700">
|
||||
{page.cluster}
|
||||
</div>
|
||||
<h3 className="mt-4 text-2xl font-bold text-slate-900">
|
||||
{page.title}
|
||||
</h3>
|
||||
<p className="mt-4 flex-1 text-base leading-7 text-slate-600">
|
||||
{page.summary}
|
||||
</p>
|
||||
<div className="mt-6 flex items-center justify-between rounded-2xl bg-slate-50 px-4 py-3 text-sm text-slate-600">
|
||||
<span>Primary parent: {page.parentTitle}</span>
|
||||
<ArrowRight className="h-4 w-4 text-blue-700 transition-transform group-hover:translate-x-1" />
|
||||
</div>
|
||||
</Card>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="bg-slate-50 py-16">
|
||||
<div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_minmax(0,0.95fr)]">
|
||||
<Card className="rounded-3xl border-slate-200 bg-white p-8 shadow-sm">
|
||||
<div className="flex items-center gap-3">
|
||||
<LibraryBig className="h-5 w-5 text-blue-700" />
|
||||
<h2 className="text-2xl font-bold text-slate-900">
|
||||
Commercial pages that anchor the hub
|
||||
</h2>
|
||||
</div>
|
||||
<div className="mt-6 grid gap-4 md:grid-cols-2">
|
||||
{commercialPages.map((page) => (
|
||||
<Link
|
||||
key={page.href}
|
||||
href={page.href}
|
||||
className="rounded-2xl border border-slate-200 p-4 transition-colors hover:border-blue-200 hover:bg-blue-50/60"
|
||||
>
|
||||
<div className={`h-1.5 rounded-full bg-gradient-to-r ${page.accent}`} />
|
||||
<div className="mt-4 text-lg font-semibold text-slate-900">
|
||||
{page.title}
|
||||
</div>
|
||||
<p className="mt-2 text-sm leading-6 text-slate-600">
|
||||
{page.description}
|
||||
</p>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="rounded-3xl border-slate-200 bg-slate-950 p-8 text-white shadow-xl shadow-slate-200">
|
||||
<div className="flex items-center gap-3">
|
||||
<Link2 className="h-5 w-5 text-cyan-300" />
|
||||
<h2 className="text-2xl font-bold">Support resources</h2>
|
||||
</div>
|
||||
<div className="mt-6 space-y-4">
|
||||
{supportResources.map((resource) => (
|
||||
<Link
|
||||
key={resource.href}
|
||||
href={resource.href}
|
||||
className="block rounded-2xl border border-white/10 bg-white/5 p-4 transition-colors hover:bg-white/10"
|
||||
>
|
||||
<div className="text-lg font-semibold text-white">
|
||||
{resource.title}
|
||||
</div>
|
||||
<p className="mt-2 text-sm leading-6 text-blue-50/78">
|
||||
{resource.description}
|
||||
</p>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||
<div className="mb-10 max-w-3xl">
|
||||
<div className="text-sm font-semibold uppercase tracking-[0.22em] text-blue-700">
|
||||
Next cluster candidates
|
||||
</div>
|
||||
<h2 className="mt-3 text-3xl font-bold text-slate-900">
|
||||
What follows after the first use-case wave
|
||||
</h2>
|
||||
<p className="mt-4 text-lg leading-8 text-slate-600">
|
||||
These are not published use-case routes yet. They are the next
|
||||
practical cluster expansions once the first hub and CTA layer are
|
||||
established.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-3">
|
||||
{upcomingUseCaseIdeas.map((item) => (
|
||||
<Card
|
||||
key={item.title}
|
||||
className="rounded-3xl border-dashed border-slate-300 bg-slate-50 p-7"
|
||||
>
|
||||
<div className="text-xl font-semibold text-slate-900">
|
||||
{item.title}
|
||||
</div>
|
||||
<p className="mt-3 text-base leading-7 text-slate-600">
|
||||
{item.description}
|
||||
</p>
|
||||
<div className="mt-5 text-sm font-semibold text-blue-700">
|
||||
Anchored by {item.href.replace("/", "")}
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user