206 lines
8.6 KiB
TypeScript
206 lines
8.6 KiB
TypeScript
import { Metadata } from 'next';
|
|
import {
|
|
ArrowRight,
|
|
Braces,
|
|
Chrome,
|
|
Code2,
|
|
ExternalLink,
|
|
Flame,
|
|
Github,
|
|
Package,
|
|
TerminalSquare,
|
|
} from 'lucide-react';
|
|
|
|
export const metadata: Metadata = {
|
|
title: 'Developer Ecosystem | QR Master',
|
|
description:
|
|
'Create QR codes with QR Master in VS Code, Chrome, Firefox, Python, Node.js, GitHub Actions, and your own workflows.',
|
|
alternates: {
|
|
canonical: 'https://www.qrmaster.net/developers',
|
|
},
|
|
};
|
|
|
|
const tools = [
|
|
{
|
|
title: 'VS Code / Cursor / Windsurf Extension',
|
|
icon: Code2,
|
|
description:
|
|
'Generate QR codes directly in VS Code, Cursor, VSCodium, and Windsurf preview tabs.',
|
|
command: 'qrmaster.generate',
|
|
linkLabel: 'Open VSX Registry',
|
|
url: 'https://open-vsx.org/extension/qrmaster/qrmaster-generator',
|
|
},
|
|
{
|
|
title: 'GitHub Action Marketplace',
|
|
icon: Braces,
|
|
description:
|
|
'Automate QR code generation in GitHub Actions workflows and build artifacts.',
|
|
command: 'uses: knuthtimo-lab/qrmaster-cli@v1.0.0',
|
|
linkLabel: 'GitHub Marketplace Action',
|
|
url: 'https://github.com/marketplace/actions/qr-master-code-generator',
|
|
},
|
|
{
|
|
title: 'Node.js CLI & npm Package',
|
|
icon: Package,
|
|
description:
|
|
'Generate vector SVG and PNG QR codes from any terminal or Node.js application.',
|
|
command: 'npx qrmaster-cli generate "https://www.qrmaster.net"',
|
|
linkLabel: 'View on npm',
|
|
url: 'https://www.npmjs.com/package/qrmaster-cli',
|
|
},
|
|
{
|
|
title: 'PyPI Python Package',
|
|
icon: TerminalSquare,
|
|
description:
|
|
'Use QR Master from Python scripts and Django or Flask applications.',
|
|
command: 'pip install qrmaster',
|
|
linkLabel: 'View on PyPI',
|
|
url: 'https://pypi.org/project/qrmaster/',
|
|
},
|
|
{
|
|
title: 'GitHub Repository',
|
|
icon: Github,
|
|
description:
|
|
'Explore the source, clone the CLI, open issues, and build on QR Master.',
|
|
command: 'git clone https://github.com/knuthtimo-lab/qrmaster-cli.git',
|
|
linkLabel: 'Explore on GitHub',
|
|
url: 'https://github.com/knuthtimo-lab/qrmaster-cli',
|
|
},
|
|
{
|
|
title: 'Chrome Web Store Extension',
|
|
icon: Chrome,
|
|
description:
|
|
'Generate instant QR codes for any webpage, active tab, selected text, Wi-Fi, or contact card in Chrome.',
|
|
command: 'Item ID: cieplgkdeempmjknljhabookhfhejgno',
|
|
linkLabel: 'Chrome Web Store',
|
|
url: 'https://chromewebstore.google.com/detail/cieplgkdeempmjknljhabookhfhejgno',
|
|
},
|
|
{
|
|
title: 'Firefox Add-ons Extension',
|
|
icon: Flame,
|
|
description:
|
|
'Generate instant QR codes for any webpage, active tab, selected text, Wi-Fi, or contact card in Firefox.',
|
|
command: 'Add-on ID: qr-master-qr-generator',
|
|
linkLabel: 'Firefox Add-ons',
|
|
url: 'https://addons.mozilla.org/addon/qr-master-qr-generator/',
|
|
},
|
|
];
|
|
|
|
export default function DevelopersPage() {
|
|
return (
|
|
<div className="min-h-screen bg-white text-slate-900">
|
|
<section className="relative overflow-hidden border-b border-slate-200 bg-gradient-to-br from-white via-slate-50 to-blue-50/70">
|
|
<div
|
|
aria-hidden="true"
|
|
className="absolute -right-32 -top-40 h-[32rem] w-[32rem] rounded-full bg-blue-200/30 blur-3xl"
|
|
/>
|
|
<div className="container relative mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8 lg:py-24">
|
|
<nav aria-label="Breadcrumb" className="mb-8 text-sm text-slate-500">
|
|
<a className="transition-colors hover:text-slate-900" href="/">Home</a>
|
|
<span className="mx-2 text-slate-300">/</span>
|
|
<span className="text-slate-700">Developers</span>
|
|
</nav>
|
|
|
|
<div className="max-w-3xl">
|
|
<span className="inline-flex items-center rounded-md border border-blue-100 bg-blue-50 px-3 py-1 text-xs font-semibold uppercase tracking-wider text-blue-700">
|
|
Developer ecosystem
|
|
</span>
|
|
<h1 className="mt-6 max-w-3xl text-4xl font-light leading-[1.1] tracking-[-0.03em] text-slate-900 sm:text-5xl lg:text-6xl">
|
|
QR tools for every workflow.
|
|
</h1>
|
|
<p className="mt-6 max-w-2xl text-base leading-relaxed text-slate-500 sm:text-lg">
|
|
Create, automate, and ship QR codes from the editor, terminal, browser, or CI workflow you already use.
|
|
</p>
|
|
<a
|
|
href="https://github.com/knuthtimo-lab/qrmaster-cli"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="mt-8 inline-flex items-center gap-2 rounded-lg bg-blue-600 px-6 py-3 text-sm font-semibold text-white shadow-sm transition-all hover:bg-blue-700 hover:shadow-md"
|
|
>
|
|
Explore the repository
|
|
<ArrowRight className="h-4 w-4" aria-hidden="true" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="border-b border-slate-200 bg-slate-50/60 py-16 sm:py-20">
|
|
<div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
|
<div className="mb-10 max-w-2xl">
|
|
<span className="text-xs font-semibold uppercase tracking-wider text-blue-600">The toolkit</span>
|
|
<h2 className="mt-3 text-3xl font-semibold tracking-[-0.02em] text-slate-900 sm:text-4xl">
|
|
Choose your environment.
|
|
</h2>
|
|
<p className="mt-4 text-base leading-relaxed text-slate-500">
|
|
Each integration lets you generate QR codes without leaving the tools you already use.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
|
{tools.map((tool) => {
|
|
const Icon = tool.icon;
|
|
|
|
return (
|
|
<article
|
|
key={tool.title}
|
|
className="group flex min-h-[19rem] flex-col rounded-xl border border-slate-200 bg-white p-7 shadow-sm transition-all duration-200 hover:-translate-y-1 hover:border-slate-300 hover:shadow-md"
|
|
>
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div className="flex h-11 w-11 items-center justify-center rounded-lg border border-blue-100 bg-blue-50 text-blue-600">
|
|
<Icon className="h-5 w-5" strokeWidth={1.8} aria-hidden="true" />
|
|
</div>
|
|
{tool.status ? (
|
|
<span className="rounded-md border border-amber-200 bg-amber-50 px-2 py-1 text-[11px] font-semibold text-amber-700">
|
|
{tool.status}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
<h3 className="mt-6 text-xl font-semibold text-slate-900">{tool.title}</h3>
|
|
<p className="mt-3 text-sm leading-6 text-slate-500">{tool.description}</p>
|
|
|
|
<code className="mt-6 block overflow-x-auto rounded-md border border-slate-100 bg-slate-50 px-3 py-2.5 font-mono text-xs leading-5 text-slate-700">
|
|
{tool.command}
|
|
</code>
|
|
|
|
<a
|
|
href={tool.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="mt-auto inline-flex w-fit items-center gap-2 pt-7 text-sm font-semibold text-blue-600 transition-colors hover:text-blue-700"
|
|
>
|
|
{tool.linkLabel}
|
|
<ExternalLink className="h-3.5 w-3.5" aria-hidden="true" />
|
|
</a>
|
|
</article>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="py-16 sm:py-20">
|
|
<div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
|
<div className="rounded-2xl border border-slate-200 bg-slate-50 p-8 sm:p-12">
|
|
<span className="text-xs font-semibold uppercase tracking-wider text-blue-600">Open source</span>
|
|
<h2 className="mt-3 max-w-2xl text-3xl font-semibold tracking-[-0.02em] text-slate-900 sm:text-4xl">
|
|
Start with the CLI, then make it your own.
|
|
</h2>
|
|
<p className="mt-4 max-w-2xl text-base leading-relaxed text-slate-500">
|
|
Browse the repository for the CLI source, command examples, and GitHub Action setup.
|
|
</p>
|
|
<a
|
|
href="https://github.com/knuthtimo-lab/qrmaster-cli"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="mt-7 inline-flex items-center gap-2 rounded-lg bg-blue-600 px-6 py-3 text-sm font-semibold text-white shadow-sm transition-all hover:bg-blue-700 hover:shadow-md"
|
|
>
|
|
View the repository
|
|
<ArrowRight className="h-4 w-4" aria-hidden="true" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|