304 lines
13 KiB
TypeScript
304 lines
13 KiB
TypeScript
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>
|
|
</>
|
|
);
|
|
}
|