1394 lines
58 KiB
TypeScript
1394 lines
58 KiB
TypeScript
import React from 'react';
|
||
import type { Metadata } from 'next';
|
||
import { Button } from '@/components/ui/Button';
|
||
import { Card } from '@/components/ui/Card';
|
||
import SeoJsonLd from '@/components/SeoJsonLd';
|
||
import Breadcrumbs, { BreadcrumbItem } from '@/components/Breadcrumbs';
|
||
import { breadcrumbSchema } from '@/lib/schema';
|
||
import { FAQSection } from '@/components/aeo/FAQSection';
|
||
import { AnswerFirstBlock } from '@/components/marketing/AnswerFirstBlock';
|
||
import { GrowthLinksSection } from '@/components/marketing/GrowthLinksSection';
|
||
import {
|
||
MarketingPageTracker,
|
||
TrackedCtaLink,
|
||
} from '@/components/marketing/MarketingAnalytics';
|
||
|
||
export const metadata: Metadata = {
|
||
title: {
|
||
absolute: 'Dynamic Barcode Generator – Trackable, Editable Barcodes',
|
||
},
|
||
description:
|
||
'Generate dynamic barcodes you can update after printing. Change the redirect URL anytime, track every scan, and manage all barcodes in one dashboard. Free to start.',
|
||
keywords:
|
||
'dynamic barcode generator, trackable barcode, editable barcode, barcode redirect, barcode analytics, dynamic barcode, barcode scanner tracking',
|
||
alternates: {
|
||
canonical: 'https://www.qrmaster.net/dynamic-barcode-generator',
|
||
languages: {
|
||
'x-default': 'https://www.qrmaster.net/dynamic-barcode-generator',
|
||
en: 'https://www.qrmaster.net/dynamic-barcode-generator',
|
||
},
|
||
},
|
||
openGraph: {
|
||
title: 'Dynamic Barcode Generator – Trackable, Editable Barcodes',
|
||
description:
|
||
'Generate dynamic barcodes that redirect to any URL — and can be updated after printing. Track every scan with device, time, and location data.',
|
||
url: 'https://www.qrmaster.net/dynamic-barcode-generator',
|
||
type: 'website',
|
||
images: ['/og-image.png'],
|
||
},
|
||
twitter: {
|
||
title: 'Dynamic Barcode Generator – Trackable, Editable Barcodes',
|
||
description:
|
||
'Generate dynamic barcodes that redirect to any URL — and can be updated after printing. Track every scan with device, time, and location data.',
|
||
},
|
||
};
|
||
|
||
const featureCards = [
|
||
{
|
||
title: 'Update destination after print',
|
||
description:
|
||
'Keep the same barcode on badges, packaging inserts, or digital displays while changing the URL behind it at any time from your dashboard.',
|
||
},
|
||
{
|
||
title: 'Track every smartphone scan',
|
||
description:
|
||
'See device type, time, country, and referrer for every scan — in the same dashboard as your QR codes.',
|
||
},
|
||
{
|
||
title: 'CODE128 and CODE39 supported',
|
||
description:
|
||
'Dynamic barcodes use URL-capable formats only. CODE128 is the recommended choice for broad scanner compatibility.',
|
||
},
|
||
{
|
||
title: 'Manage codes in one place',
|
||
description:
|
||
'Pause, redirect, or delete any barcode from your dashboard without touching the printed label.',
|
||
},
|
||
{
|
||
title: 'Download SVG or PNG',
|
||
description:
|
||
'Export print-ready barcode assets directly. Use them on labels, event badges, or digital displays.',
|
||
},
|
||
{
|
||
title: 'Scale by plan',
|
||
description:
|
||
'The Free plan includes 3 active dynamic barcodes. Pro includes 50, and Business includes 500.',
|
||
},
|
||
];
|
||
|
||
const staticVsDynamic = [
|
||
{
|
||
feature: 'Change redirect URL after printing',
|
||
static: false,
|
||
dynamic: true,
|
||
},
|
||
{
|
||
feature: 'Track scan analytics (device, country, time)',
|
||
static: false,
|
||
dynamic: true,
|
||
},
|
||
{
|
||
feature: 'Pause or deactivate without reprinting',
|
||
static: false,
|
||
dynamic: true,
|
||
},
|
||
{
|
||
feature: 'Manage all barcodes in one dashboard',
|
||
static: false,
|
||
dynamic: true,
|
||
},
|
||
{
|
||
feature: 'Use across changing campaigns',
|
||
static: false,
|
||
dynamic: true,
|
||
},
|
||
];
|
||
|
||
const useCases = [
|
||
{
|
||
title: 'Event badges & access passes',
|
||
description:
|
||
'Print CODE128 barcodes on event badges that link to personalized schedules, session recordings, or attendee portals. Update the destination as content changes.',
|
||
example:
|
||
'Conference badges with a dynamic barcode redirect to an attendee agenda page — updated in real time as the schedule changes. Scanned with smartphone cameras at check-in kiosks.',
|
||
},
|
||
{
|
||
title: 'Packaging inserts & product cards',
|
||
description:
|
||
'Link physical inserts inside product boxes to setup guides, how-to videos, or support pages. Update the destination when content moves — no reprint needed.',
|
||
example:
|
||
'A hardware brand updates the setup guide URL six months post-launch to a new video format — without reprinting a single insert.',
|
||
},
|
||
{
|
||
title: 'Digital signage & screens',
|
||
description:
|
||
'Display a CODE128 barcode on screens or monitors. Visitors scan with their smartphone and land on a current URL — updated from the dashboard without changing the display.',
|
||
example:
|
||
'A trade-show monitor shows a barcode linking to the current product demo page — redirected to a post-show recording after the event.',
|
||
},
|
||
{
|
||
title: 'Internal asset tracking (browser-based)',
|
||
description:
|
||
'Use CODE128 barcodes on internal assets where staff scan with smartphones to open web-based inventory or maintenance forms. URLs update as systems change.',
|
||
example:
|
||
'IT tags company laptops with dynamic barcodes. Staff scan to open the current helpdesk form — URL updated when the ticketing system moves.',
|
||
},
|
||
];
|
||
|
||
const faqItems = [
|
||
{
|
||
question: 'What is a dynamic barcode?',
|
||
answer:
|
||
'A dynamic barcode (CODE128 or CODE39) encodes a short redirect URL. When scanned with a smartphone camera, it opens a browser and routes through QR Master to your current destination — which you can update without changing the printed barcode. Note: it requires a smartphone scan, not a POS laser scanner.',
|
||
},
|
||
{
|
||
question: 'How is a dynamic barcode different from a static one?',
|
||
answer:
|
||
'A static barcode directly encodes a fixed value — a number, URL, or product code — that cannot be changed after printing. A dynamic barcode encodes a redirect link so the final destination can be updated at any time from your dashboard.',
|
||
},
|
||
{
|
||
question:
|
||
'Which barcode formats does QR Master support for dynamic barcodes?',
|
||
answer:
|
||
'Dynamic barcodes require a format that can encode a URL. QR Master supports CODE128 and CODE39 for dynamic barcodes. Numeric-only formats (EAN-13, UPC, ITF-14, MSI, pharmacode) are available as static barcodes only via the free barcode generator tool.',
|
||
},
|
||
{
|
||
question: 'Can I track who scanned my barcode?',
|
||
answer:
|
||
'Yes. Every scan is logged with device type, operating system, country, and time. Scan data appears in your QR Master analytics dashboard alongside your QR codes.',
|
||
},
|
||
{
|
||
question: 'How many dynamic barcodes can I create?',
|
||
answer:
|
||
'The Free plan includes 3 active dynamic barcodes. Pro includes 50, and Business includes 500. All plans share the same dashboard for barcodes and QR codes.',
|
||
},
|
||
{
|
||
question: 'Can I change a barcode destination after printing?',
|
||
answer:
|
||
'Yes — that is the core value of a dynamic barcode. Log in to your dashboard, find the barcode, and update the redirect URL. Scanners immediately reach the new destination.',
|
||
},
|
||
{
|
||
question: 'Do I need to reprint if the linked page changes?',
|
||
answer:
|
||
'No. Dynamic barcodes decouple the printed label from the destination. Update the URL from your dashboard; the physical label stays unchanged.',
|
||
},
|
||
{
|
||
question:
|
||
'What is the difference between a dynamic barcode and a dynamic QR code?',
|
||
answer:
|
||
'Both use the same redirect mechanism. A barcode uses a linear format (CODE128, EAN-13, etc.) readable by laser scanners and most POS systems. A QR code uses a 2D matrix format readable by smartphone cameras. Use barcodes where laser scanner infrastructure exists; use QR codes for consumer-facing materials.',
|
||
},
|
||
];
|
||
|
||
const softwareSchema = {
|
||
'@context': 'https://schema.org',
|
||
'@type': 'SoftwareApplication',
|
||
'@id': 'https://www.qrmaster.net/dynamic-barcode-generator#software',
|
||
name: 'QR Master - Dynamic Barcode Generator',
|
||
applicationCategory: 'BusinessApplication',
|
||
operatingSystem: 'Web Browser',
|
||
offers: {
|
||
'@type': 'Offer',
|
||
price: '0',
|
||
priceCurrency: 'EUR',
|
||
availability: 'https://schema.org/InStock',
|
||
},
|
||
description:
|
||
'Generate dynamic barcodes with redirect URLs you can update after printing. Track every scan and manage all barcodes in one dashboard.',
|
||
featureList: [
|
||
'Update barcode redirect URL after printing',
|
||
'Track scan analytics (device, country, time)',
|
||
'Supports CODE128, EAN-13, UPC, CODE39, ITF-14, MSI, pharmacode',
|
||
'Export print-ready SVG and PNG assets',
|
||
'Manage barcodes and QR codes in one dashboard',
|
||
],
|
||
};
|
||
|
||
const howToSchema = {
|
||
'@context': 'https://schema.org',
|
||
'@type': 'HowTo',
|
||
'@id': 'https://www.qrmaster.net/dynamic-barcode-generator#howto',
|
||
name: 'How to create a dynamic barcode',
|
||
datePublished: '2024-01-01',
|
||
dateModified: '2026-04-01',
|
||
author: {
|
||
'@type': 'Person',
|
||
name: 'Timo Knuth',
|
||
url: 'https://www.qrmaster.net/authors/timo',
|
||
},
|
||
description:
|
||
'Create a dynamic barcode that redirects to a URL you can update anytime — without reprinting the label.',
|
||
totalTime: 'PT3M',
|
||
step: [
|
||
{
|
||
'@type': 'HowToStep',
|
||
position: 1,
|
||
name: 'Create an account',
|
||
text: 'Sign up for a QR Master account and open the Create dashboard.',
|
||
url: 'https://www.qrmaster.net/signup',
|
||
},
|
||
{
|
||
'@type': 'HowToStep',
|
||
position: 2,
|
||
name: 'Select Barcode type',
|
||
text: 'Choose "Barcode" as the content type, select the format (CODE128, EAN-13, etc.), and enter your destination URL.',
|
||
url: 'https://www.qrmaster.net/signup',
|
||
},
|
||
{
|
||
'@type': 'HowToStep',
|
||
position: 3,
|
||
name: 'Download and apply',
|
||
text: 'Export the barcode as SVG or PNG and apply it to labels, packaging, or digital assets.',
|
||
},
|
||
{
|
||
'@type': 'HowToStep',
|
||
position: 4,
|
||
name: 'Update anytime',
|
||
text: 'Change the destination URL from your dashboard whenever needed — no reprint required.',
|
||
},
|
||
],
|
||
};
|
||
|
||
const faqSchema = {
|
||
'@context': 'https://schema.org',
|
||
'@type': 'FAQPage',
|
||
'@id': 'https://www.qrmaster.net/dynamic-barcode-generator#faq',
|
||
mainEntity: faqItems.map((item) => ({
|
||
'@type': 'Question',
|
||
name: item.question,
|
||
acceptedAnswer: {
|
||
'@type': 'Answer',
|
||
text: item.answer,
|
||
},
|
||
})),
|
||
};
|
||
|
||
const breadcrumbItems: BreadcrumbItem[] = [
|
||
{ name: 'Home', url: '/' },
|
||
{ name: 'Dynamic Barcode Generator', url: '/dynamic-barcode-generator' },
|
||
];
|
||
|
||
const relatedLinks = [
|
||
{
|
||
href: '/dynamic-qr-code-generator',
|
||
title: 'Dynamic QR Code Generator',
|
||
description:
|
||
'The same redirect-and-track approach for 2D QR codes — ideal for consumer-facing print materials scanned by smartphones.',
|
||
ctaLabel: 'Create dynamic QR codes',
|
||
},
|
||
{
|
||
href: '/bulk-qr-code-generator',
|
||
title: 'Bulk Barcode & QR Generator',
|
||
description:
|
||
'Upload a CSV and generate hundreds of dynamic barcodes or QR codes in one batch — with tracking for every code.',
|
||
ctaLabel: 'Generate codes in bulk',
|
||
},
|
||
{
|
||
href: '/qr-code-analytics',
|
||
title: 'Barcode & QR Analytics',
|
||
description:
|
||
'See device, country, time, and UTM data for every scan across all your barcodes and QR codes in one unified view.',
|
||
ctaLabel: 'View analytics features',
|
||
},
|
||
{
|
||
href: '/use-cases/packaging-qr-codes',
|
||
title: 'Packaging Use Case',
|
||
description:
|
||
'How brands use dynamic codes on product packaging to keep printed materials useful after URLs, campaigns, or pages change.',
|
||
ctaLabel: 'Explore packaging use case',
|
||
},
|
||
{
|
||
href: '/reprint-calculator',
|
||
title: 'Reprint Cost Calculator',
|
||
description:
|
||
'Calculate how much static label reprints cost vs. one active dynamic barcode that never needs replacing.',
|
||
ctaLabel: 'Calculate your savings',
|
||
},
|
||
{
|
||
href: '/tools/barcode-generator',
|
||
title: 'Free Static Barcode Generator',
|
||
description:
|
||
'Need a one-time barcode with no redirect? Use the free static barcode generator — no account required.',
|
||
ctaLabel: 'Generate a static barcode',
|
||
},
|
||
];
|
||
|
||
export default function DynamicBarcodeGeneratorPage() {
|
||
return (
|
||
<>
|
||
<SeoJsonLd
|
||
data={[
|
||
softwareSchema,
|
||
howToSchema,
|
||
faqSchema,
|
||
breadcrumbSchema(breadcrumbItems),
|
||
]}
|
||
/>
|
||
<MarketingPageTracker pageType="commercial" cluster="dynamic-barcode" />
|
||
<div className="min-h-screen bg-white">
|
||
{/* HERO */}
|
||
<section className="relative overflow-hidden bg-white pb-32 pt-28 sm:pt-40">
|
||
<style dangerouslySetInnerHTML={{__html: `
|
||
@keyframes mesh-blob-1 {
|
||
0% { transform: translate(0px, 0px) scale(1) rotate(0deg); }
|
||
50% { transform: translate(3px, -5px) scale(1.01) rotate(0.5deg); }
|
||
100% { transform: translate(0px, 0px) scale(1) rotate(0deg); }
|
||
}
|
||
@keyframes mesh-blob-2 {
|
||
0% { transform: translate(0px, 0px) scale(1) rotate(0deg); }
|
||
50% { transform: translate(-5px, 4px) scale(1.01) rotate(-0.5deg); }
|
||
100% { transform: translate(0px, 0px) scale(1) rotate(0deg); }
|
||
}
|
||
@keyframes mesh-blob-3 {
|
||
0% { transform: translate(0px, 0px) scale(1) rotate(0deg); }
|
||
50% { transform: translate(5px, 2px) scale(0.99) rotate(0.5deg); }
|
||
100% { transform: translate(0px, 0px) scale(1) rotate(0deg); }
|
||
}
|
||
`}} />
|
||
<div className="absolute inset-0 z-0 overflow-hidden pointer-events-none">
|
||
{/* The signature Stripe diagonal background container */}
|
||
<div className="absolute inset-x-0 -top-40 h-[120%] origin-top-left -skew-y-[6deg] bg-[#f6f9fc] border-b border-[rgba(229,237,245,1)]">
|
||
|
||
{/* Distinct overlapping strands (Schwung) resembling real light ribbons */}
|
||
<div
|
||
className="absolute right-0 top-0 h-full w-full pointer-events-none overflow-hidden [mask-image:linear-gradient(to_right,transparent,black_15%,black_100%)] xl:[mask-image:linear-gradient(to_right,transparent,black_25%,black_100%)]"
|
||
>
|
||
<svg
|
||
className="absolute right-[-10%] top-[-10%] h-[120%] w-[120%] opacity-90"
|
||
viewBox="0 0 1000 1000"
|
||
preserveAspectRatio="xMaxYMax slice"
|
||
>
|
||
<defs>
|
||
<linearGradient id="ribbon1" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
<stop offset="0%" stopColor="#fbac30" />
|
||
<stop offset="50%" stopColor="#ea2261" />
|
||
<stop offset="100%" stopColor="#5f45ff" />
|
||
</linearGradient>
|
||
<linearGradient id="ribbon2" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
<stop offset="0%" stopColor="#ea2261" />
|
||
<stop offset="100%" stopColor="#5f45ff" />
|
||
</linearGradient>
|
||
<linearGradient id="ribbon3" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
<stop offset="0%" stopColor="#5f45ff" />
|
||
<stop offset="100%" stopColor="#e439ca" />
|
||
</linearGradient>
|
||
|
||
<filter id="heavy" x="-50%" y="-50%" width="200%" height="200%">
|
||
<feGaussianBlur stdDeviation="80" />
|
||
</filter>
|
||
<filter id="medium" x="-50%" y="-50%" width="200%" height="200%">
|
||
<feGaussianBlur stdDeviation="40" />
|
||
</filter>
|
||
<filter id="sharp" x="-50%" y="-50%" width="200%" height="200%">
|
||
<feGaussianBlur stdDeviation="15" />
|
||
</filter>
|
||
<filter id="grain">
|
||
<feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4" stitchTiles="stitch"/>
|
||
<feColorMatrix type="saturate" values="0" />
|
||
</filter>
|
||
</defs>
|
||
|
||
{/* Deep blurry purple/pink background shape */}
|
||
<g style={{ animation: 'mesh-blob-3 25s infinite ease-in-out' }} className="origin-center">
|
||
<path
|
||
d="M 600 -200 Q 100 400, 900 1200"
|
||
fill="none"
|
||
stroke="url(#ribbon3)"
|
||
strokeWidth="450"
|
||
filter="url(#heavy)"
|
||
opacity="0.5"
|
||
/>
|
||
</g>
|
||
|
||
{/* Middle wider ribbon (Pink/Purple) */}
|
||
<g style={{ animation: 'mesh-blob-2 22s infinite ease-in-out reverse' }} className="origin-center">
|
||
<path
|
||
d="M 550 -200 Q 50 450, 850 1200"
|
||
fill="none"
|
||
stroke="url(#ribbon2)"
|
||
strokeWidth="350"
|
||
filter="url(#medium)"
|
||
opacity="0.7"
|
||
/>
|
||
</g>
|
||
|
||
{/* Thinner, sharper top strand (Orange/Pink) */}
|
||
<g style={{ animation: 'mesh-blob-1 20s infinite ease-in-out' }} className="origin-center">
|
||
<path
|
||
d="M 500 -200 Q -50 500, 800 1200"
|
||
fill="none"
|
||
stroke="url(#ribbon1)"
|
||
strokeWidth="200"
|
||
filter="url(#sharp)"
|
||
opacity="0.9"
|
||
/>
|
||
</g>
|
||
|
||
{/* Grain/Texture overlay */}
|
||
<rect width="1000" height="1000" filter="url(#grain)" opacity="0.6" style={{ mixBlendMode: 'overlay' }} />
|
||
</svg>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div className="container relative z-10 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||
<Breadcrumbs items={breadcrumbItems} />
|
||
<div className="grid items-center gap-16 lg:grid-cols-2">
|
||
<div className="space-y-8">
|
||
<div className="inline-flex items-center rounded bg-[#e5edf5] px-3 py-1 text-xs font-medium text-[#533afd] uppercase tracking-wider">
|
||
Track every scan · Update anytime
|
||
</div>
|
||
|
||
<div className="space-y-6">
|
||
<h1 className="text-[48px] sm:text-[56px] font-[300] leading-[1.05] tracking-[-1.4px] text-[#061b31]">
|
||
Dynamic Barcode Generator
|
||
</h1>
|
||
<p className="text-[18px] font-[300] leading-[1.6] text-black max-w-lg">
|
||
Create CODE128 or CODE39 barcodes that encode a redirect
|
||
URL. When scanned with a smartphone, they open a browser and
|
||
redirect to your destination — which you can update anytime
|
||
without reprinting.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="space-y-4 pt-2">
|
||
{[
|
||
'Scanned by smartphone cameras — redirect opens in the browser',
|
||
'Update the destination from your dashboard without touching the label',
|
||
'Track every scan — device, country, time, and UTM data',
|
||
'Free plan includes 3 active dynamic barcodes — no credit card required',
|
||
].map((feature) => (
|
||
<div key={feature} className="flex items-start gap-3">
|
||
<div className="mt-1 flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-full bg-[#15be53]/20 border border-[#15be53]/40">
|
||
<svg
|
||
className="h-2.5 w-2.5 text-[#108c3d]"
|
||
fill="currentColor"
|
||
viewBox="0 0 20 20"
|
||
>
|
||
<path
|
||
fillRule="evenodd"
|
||
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
||
clipRule="evenodd"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
<span className="text-[16px] font-[300] text-black">
|
||
{feature}
|
||
</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div className="flex flex-col gap-4 sm:flex-row pt-4">
|
||
<TrackedCtaLink
|
||
href="/signup"
|
||
ctaLabel="Create Dynamic Barcode"
|
||
ctaLocation="hero_primary"
|
||
pageType="commercial"
|
||
cluster="dynamic-barcode"
|
||
>
|
||
<button className="w-full sm:w-auto rounded bg-[#533afd] px-6 py-3 text-[16px] font-[400] text-white shadow-[0_2px_5px_rgba(50,50,93,0.25),0_1px_3px_rgba(0,0,0,0.1)] transition-colors hover:bg-[#4434d4]">
|
||
Create Dynamic Barcode
|
||
</button>
|
||
</TrackedCtaLink>
|
||
<TrackedCtaLink
|
||
href="/tools/barcode-generator"
|
||
ctaLabel="Try Free Static Barcode"
|
||
ctaLocation="hero_secondary"
|
||
pageType="commercial"
|
||
cluster="dynamic-barcode"
|
||
>
|
||
<button className="w-full sm:w-auto rounded bg-transparent border border-[#b9b9f9] px-6 py-3 text-[16px] font-[400] text-[#533afd] transition-colors hover:bg-[#533afd]/5">
|
||
Try Free Static Barcode
|
||
</button>
|
||
</TrackedCtaLink>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Hero visual — barcode mockup */}
|
||
<div className="relative mt-8 lg:mt-0">
|
||
<div className="rounded-[8px] border border-[#e5edf5] bg-white p-8 shadow-[0_30px_45px_-30px_rgba(50,50,93,0.25),0_18px_36px_-18px_rgba(0,0,0,0.1)]">
|
||
{/* Simulated barcode SVG */}
|
||
<div className="mb-8 flex justify-center">
|
||
<div className="rounded-[4px] bg-[#f6f9fc] p-6 border border-[#e5edf5]">
|
||
<svg
|
||
width="280"
|
||
height="100"
|
||
viewBox="0 0 280 100"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
aria-label="Dynamic barcode example"
|
||
>
|
||
{/* Guard bars */}
|
||
<rect
|
||
x="8"
|
||
y="10"
|
||
width="3"
|
||
height="72"
|
||
fill="#061b31"
|
||
/>
|
||
<rect
|
||
x="13"
|
||
y="10"
|
||
width="2"
|
||
height="72"
|
||
fill="#061b31"
|
||
/>
|
||
{/* Data bars pattern */}
|
||
<rect
|
||
x="18"
|
||
y="10"
|
||
width="4"
|
||
height="64"
|
||
fill="#061b31"
|
||
/>
|
||
<rect
|
||
x="24"
|
||
y="10"
|
||
width="2"
|
||
height="64"
|
||
fill="#061b31"
|
||
/>
|
||
<rect
|
||
x="28"
|
||
y="10"
|
||
width="5"
|
||
height="64"
|
||
fill="#061b31"
|
||
/>
|
||
<rect
|
||
x="35"
|
||
y="10"
|
||
width="2"
|
||
height="64"
|
||
fill="#061b31"
|
||
/>
|
||
<rect
|
||
x="39"
|
||
y="10"
|
||
width="3"
|
||
height="64"
|
||
fill="#061b31"
|
||
/>
|
||
<rect
|
||
x="44"
|
||
y="10"
|
||
width="4"
|
||
height="64"
|
||
fill="#061b31"
|
||
/>
|
||
<rect
|
||
x="50"
|
||
y="10"
|
||
width="2"
|
||
height="64"
|
||
fill="#061b31"
|
||
/>
|
||
<rect
|
||
x="54"
|
||
y="10"
|
||
width="5"
|
||
height="64"
|
||
fill="#061b31"
|
||
/>
|
||
<rect
|
||
x="61"
|
||
y="10"
|
||
width="3"
|
||
height="64"
|
||
fill="#061b31"
|
||
/>
|
||
<rect
|
||
x="66"
|
||
y="10"
|
||
width="2"
|
||
height="64"
|
||
fill="#061b31"
|
||
/>
|
||
<rect
|
||
x="70"
|
||
y="10"
|
||
width="4"
|
||
height="64"
|
||
fill="#061b31"
|
||
/>
|
||
<rect
|
||
x="76"
|
||
y="10"
|
||
width="2"
|
||
height="64"
|
||
fill="#061b31"
|
||
/>
|
||
<rect
|
||
x="80"
|
||
y="10"
|
||
width="6"
|
||
height="64"
|
||
fill="#061b31"
|
||
/>
|
||
<rect
|
||
x="88"
|
||
y="10"
|
||
width="2"
|
||
height="64"
|
||
fill="#061b31"
|
||
/>
|
||
<rect
|
||
x="92"
|
||
y="10"
|
||
width="3"
|
||
height="64"
|
||
fill="#061b31"
|
||
/>
|
||
<rect
|
||
x="97"
|
||
y="10"
|
||
width="5"
|
||
height="64"
|
||
fill="#061b31"
|
||
/>
|
||
<rect
|
||
x="104"
|
||
y="10"
|
||
width="2"
|
||
height="64"
|
||
fill="#061b31"
|
||
/>
|
||
<rect
|
||
x="108"
|
||
y="10"
|
||
width="4"
|
||
height="64"
|
||
fill="#061b31"
|
||
/>
|
||
{/* Center guard */}
|
||
<rect
|
||
x="115"
|
||
y="10"
|
||
width="2"
|
||
height="72"
|
||
fill="#061b31"
|
||
/>
|
||
<rect
|
||
x="119"
|
||
y="10"
|
||
width="3"
|
||
height="72"
|
||
fill="#061b31"
|
||
/>
|
||
{/* More data bars */}
|
||
<rect
|
||
x="125"
|
||
y="10"
|
||
width="4"
|
||
height="64"
|
||
fill="#061b31"
|
||
/>
|
||
<rect
|
||
x="131"
|
||
y="10"
|
||
width="2"
|
||
height="64"
|
||
fill="#061b31"
|
||
/>
|
||
<rect
|
||
x="135"
|
||
y="10"
|
||
width="5"
|
||
height="64"
|
||
fill="#061b31"
|
||
/>
|
||
<rect
|
||
x="142"
|
||
y="10"
|
||
width="3"
|
||
height="64"
|
||
fill="#061b31"
|
||
/>
|
||
<rect
|
||
x="147"
|
||
y="10"
|
||
width="2"
|
||
height="64"
|
||
fill="#061b31"
|
||
/>
|
||
<rect
|
||
x="151"
|
||
y="10"
|
||
width="4"
|
||
height="64"
|
||
fill="#061b31"
|
||
/>
|
||
<rect
|
||
x="157"
|
||
y="10"
|
||
width="2"
|
||
height="64"
|
||
fill="#061b31"
|
||
/>
|
||
<rect
|
||
x="161"
|
||
y="10"
|
||
width="6"
|
||
height="64"
|
||
fill="#061b31"
|
||
/>
|
||
<rect
|
||
x="169"
|
||
y="10"
|
||
width="3"
|
||
height="64"
|
||
fill="#061b31"
|
||
/>
|
||
<rect
|
||
x="174"
|
||
y="10"
|
||
width="2"
|
||
height="64"
|
||
fill="#061b31"
|
||
/>
|
||
<rect
|
||
x="178"
|
||
y="10"
|
||
width="5"
|
||
height="64"
|
||
fill="#061b31"
|
||
/>
|
||
<rect
|
||
x="185"
|
||
y="10"
|
||
width="2"
|
||
height="64"
|
||
fill="#061b31"
|
||
/>
|
||
<rect
|
||
x="189"
|
||
y="10"
|
||
width="4"
|
||
height="64"
|
||
fill="#061b31"
|
||
/>
|
||
<rect
|
||
x="195"
|
||
y="10"
|
||
width="3"
|
||
height="64"
|
||
fill="#061b31"
|
||
/>
|
||
<rect
|
||
x="200"
|
||
y="10"
|
||
width="2"
|
||
height="64"
|
||
fill="#061b31"
|
||
/>
|
||
<rect
|
||
x="204"
|
||
y="10"
|
||
width="5"
|
||
height="64"
|
||
fill="#061b31"
|
||
/>
|
||
<rect
|
||
x="211"
|
||
y="10"
|
||
width="4"
|
||
height="64"
|
||
fill="#061b31"
|
||
/>
|
||
<rect
|
||
x="217"
|
||
y="10"
|
||
width="2"
|
||
height="64"
|
||
fill="#061b31"
|
||
/>
|
||
<rect
|
||
x="221"
|
||
y="10"
|
||
width="3"
|
||
height="64"
|
||
fill="#061b31"
|
||
/>
|
||
<rect
|
||
x="226"
|
||
y="10"
|
||
width="5"
|
||
height="64"
|
||
fill="#061b31"
|
||
/>
|
||
<rect
|
||
x="233"
|
||
y="10"
|
||
width="2"
|
||
height="64"
|
||
fill="#061b31"
|
||
/>
|
||
<rect
|
||
x="237"
|
||
y="10"
|
||
width="4"
|
||
height="64"
|
||
fill="#061b31"
|
||
/>
|
||
<rect
|
||
x="243"
|
||
y="10"
|
||
width="3"
|
||
height="64"
|
||
fill="#061b31"
|
||
/>
|
||
<rect
|
||
x="248"
|
||
y="10"
|
||
width="2"
|
||
height="64"
|
||
fill="#061b31"
|
||
/>
|
||
<rect
|
||
x="252"
|
||
y="10"
|
||
width="5"
|
||
height="64"
|
||
fill="#061b31"
|
||
/>
|
||
{/* End guard bars */}
|
||
<rect
|
||
x="260"
|
||
y="10"
|
||
width="2"
|
||
height="72"
|
||
fill="#061b31"
|
||
/>
|
||
<rect
|
||
x="264"
|
||
y="10"
|
||
width="3"
|
||
height="72"
|
||
fill="#061b31"
|
||
/>
|
||
<rect
|
||
x="269"
|
||
y="10"
|
||
width="2"
|
||
height="72"
|
||
fill="#061b31"
|
||
/>
|
||
{/* Number below */}
|
||
<text
|
||
x="140"
|
||
y="96"
|
||
textAnchor="middle"
|
||
fill="#64748d"
|
||
fontSize="12"
|
||
fontFamily="monospace"
|
||
>
|
||
CODE128 · dynamic redirect
|
||
</text>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<div className="space-y-4 font-mono text-[13px]">
|
||
<div className="flex flex-col gap-2 rounded-[4px] border border-[#e5edf5] bg-white p-4 shadow-[0_2px_5px_rgba(50,50,93,0.05),0_1px_3px_rgba(0,0,0,0.02)]">
|
||
<div className="flex items-center justify-between">
|
||
<span className="text-[#273951] uppercase tracking-wider text-[10px] font-bold">
|
||
Encoded redirect
|
||
</span>
|
||
</div>
|
||
<span className="text-[#533afd]">qrmaster.net/r/abc</span>
|
||
</div>
|
||
<div className="flex justify-center -my-2 relative z-10">
|
||
<div className="bg-white rounded-full p-1 border border-[#e5edf5]">
|
||
<svg
|
||
className="h-4 w-4 text-[#15be53]"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M19 14l-7 7m0 0l-7-7m7 7V3"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<div className="flex flex-col gap-2 rounded-[4px] border border-[#15be53]/30 bg-[#15be53]/5 p-4 shadow-[0_2px_5px_rgba(50,50,93,0.05),0_1px_3px_rgba(0,0,0,0.02)]">
|
||
<div className="flex items-center justify-between">
|
||
<span className="text-[#108c3d] uppercase tracking-wider text-[10px] font-bold">
|
||
Current destination
|
||
</span>
|
||
</div>
|
||
<span className="text-[#108c3d]">yourpage.com/v2</span>
|
||
</div>
|
||
</div>
|
||
<p className="mt-6 text-center text-[12px] font-[300] text-[#64748d]">
|
||
Same barcode label, destination changeable anytime.
|
||
</p>
|
||
</div>
|
||
<div className="absolute -right-4 -top-4 rounded bg-[#ea2261] px-3 py-1.5 text-[11px] font-[400] text-white shadow-[0_5px_15px_rgba(234,34,97,0.3)]">
|
||
No reprint needed
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* HOW IT WORKS */}
|
||
<div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||
<h2 className="text-3xl font-bold text-gray-900 pt-12 pb-2">
|
||
How to Create a Dynamic Barcode
|
||
</h2>
|
||
<AnswerFirstBlock
|
||
whatIsIt="A dynamic barcode encodes a short redirect URL into a standard linear format (CODE128, EAN-13, etc.). When scanned, it routes through QR Master — logging the scan and forwarding to your chosen destination, which you can update anytime from the dashboard."
|
||
whenToUse={[
|
||
'Event badges, access passes, or conference materials scanned by smartphone cameras',
|
||
'Product packaging inserts or cards where visitors scan with their phone to reach a web page',
|
||
'Digital signage or screens displaying a barcode for smartphone users to scan',
|
||
'Internal asset tracking where staff use smartphones (not laser scanners) to open web forms',
|
||
]}
|
||
comparison={{
|
||
leftTitle: 'Static Barcode',
|
||
rightTitle: 'Dynamic Barcode',
|
||
items: [
|
||
{
|
||
label: 'URL changeable after print',
|
||
value: true,
|
||
text: 'Fixed at print time',
|
||
},
|
||
{
|
||
label: 'Scan analytics available',
|
||
value: true,
|
||
text: 'Not available',
|
||
},
|
||
{
|
||
label: 'Pause or deactivate remotely',
|
||
value: true,
|
||
text: 'Not possible',
|
||
},
|
||
],
|
||
}}
|
||
howTo={{
|
||
steps: [
|
||
'Create a QR Master account and open the Create dashboard',
|
||
'Select "Barcode" as the content type, pick a format, and enter your destination URL',
|
||
'Download the barcode as SVG or PNG and apply it to your label or packaging',
|
||
'Update the redirect URL anytime from your dashboard — no reprint required',
|
||
],
|
||
}}
|
||
/>
|
||
</div>
|
||
|
||
{/* FAQ */}
|
||
<div className="container mx-auto max-w-5xl px-4 pb-8 sm:px-6 lg:px-8">
|
||
<FAQSection items={faqItems} title="Dynamic barcode questions" />
|
||
</div>
|
||
|
||
{/* STATIC VS DYNAMIC TABLE */}
|
||
<section className="bg-white py-24">
|
||
<div className="container mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
|
||
<div className="mb-16 text-center">
|
||
<h2 className="mb-4 text-[32px] font-[300] tracking-[-0.64px] text-[#061b31]">
|
||
Dynamic vs static barcodes
|
||
</h2>
|
||
<p className="mx-auto max-w-3xl text-[18px] font-[300] leading-[1.6] text-[#64748d]">
|
||
Dynamic barcodes are the better fit when the linked page,
|
||
document, or destination changes after labels are already in
|
||
circulation.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="rounded-[8px] border border-[#e5edf5] bg-white shadow-[0_15px_35px_rgba(50,50,93,0.1),0_5px_15px_rgba(0,0,0,0.07)] overflow-hidden">
|
||
<div className="grid md:grid-cols-3">
|
||
<div className="bg-[#f6f9fc] p-8 border-r border-[#e5edf5] hidden md:block">
|
||
<h3 className="mb-6 text-[14px] uppercase tracking-wider font-bold text-[#273951]">
|
||
Feature
|
||
</h3>
|
||
{staticVsDynamic.map((item) => (
|
||
<div
|
||
key={item.feature}
|
||
className="border-b border-[#e5edf5] py-4 last:border-b-0 h-[72px] flex items-center"
|
||
>
|
||
<p className="text-[16px] font-[400] text-[#061b31]">
|
||
{item.feature}
|
||
</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div className="bg-white p-8 border-r border-[#e5edf5]">
|
||
<h3 className="mb-6 text-[14px] uppercase tracking-wider font-bold text-[#64748d] text-center">
|
||
Static Barcode
|
||
</h3>
|
||
{staticVsDynamic.map((item) => (
|
||
<div
|
||
key={item.feature}
|
||
className="flex flex-col md:flex-row items-center justify-center border-b border-[#e5edf5] py-4 last:border-b-0 md:h-[72px]"
|
||
>
|
||
<span className="text-[14px] font-[400] text-[#061b31] md:hidden mb-2 text-center">
|
||
{item.feature}
|
||
</span>
|
||
<span
|
||
className={
|
||
item.static
|
||
? 'text-[20px] text-[#15be53]'
|
||
: 'text-[20px] text-[#ea2261]'
|
||
}
|
||
>
|
||
{item.static ? '✓' : '—'}
|
||
</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div className="bg-[#f9fafe] p-8">
|
||
<h3 className="mb-6 text-[14px] uppercase tracking-wider font-bold text-[#533afd] text-center">
|
||
Dynamic Barcode
|
||
</h3>
|
||
{staticVsDynamic.map((item) => (
|
||
<div
|
||
key={item.feature}
|
||
className="flex flex-col md:flex-row items-center justify-center border-b border-[#e5edf5] py-4 last:border-b-0 md:h-[72px]"
|
||
>
|
||
<span className="text-[14px] font-[400] text-[#061b31] md:hidden mb-2 text-center">
|
||
{item.feature}
|
||
</span>
|
||
<span
|
||
className={
|
||
item.dynamic
|
||
? 'text-[20px] text-[#15be53] font-bold'
|
||
: 'text-[20px] text-[#ea2261]'
|
||
}
|
||
>
|
||
{item.dynamic ? '✓' : '—'}
|
||
</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* FEATURE CARDS */}
|
||
<section className="bg-[#f6f9fc] py-24 border-t border-b border-[#e5edf5]">
|
||
<div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||
<div className="mb-16 text-center">
|
||
<h2 className="mb-4 text-[32px] font-[300] tracking-[-0.64px] text-[#061b31]">
|
||
What dynamic barcodes give you
|
||
</h2>
|
||
<p className="mx-auto max-w-3xl text-[18px] font-[300] leading-[1.6] text-[#64748d]">
|
||
The same redirect-and-track infrastructure that powers QR
|
||
Master's dynamic QR codes — now available for standard linear
|
||
barcode formats.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
|
||
{featureCards.map((feature) => (
|
||
<div
|
||
key={feature.title}
|
||
className="rounded-[6px] border border-[#e5edf5] bg-white p-8 transition-shadow hover:shadow-[0_15px_35px_rgba(50,50,93,0.1),0_5px_15px_rgba(0,0,0,0.07)]"
|
||
>
|
||
<h3 className="mb-3 text-[22px] font-[300] tracking-[-0.22px] text-[#061b31]">
|
||
{feature.title}
|
||
</h3>
|
||
<p className="text-[16px] font-[300] leading-[1.6] text-[#64748d]">
|
||
{feature.description}
|
||
</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* USE CASES */}
|
||
<section className="bg-white py-24">
|
||
<div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||
<div className="mb-16 text-center">
|
||
<h2 className="mb-4 text-[32px] font-[300] tracking-[-0.64px] text-[#061b31]">
|
||
Where dynamic barcodes fit best
|
||
</h2>
|
||
<p className="mx-auto max-w-3xl text-[18px] font-[300] leading-[1.6] text-[#64748d]">
|
||
Use dynamic barcodes wherever a label, package, or badge must
|
||
stay useful even as the page behind it changes.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid gap-8 md:grid-cols-2">
|
||
{useCases.map((useCase) => (
|
||
<div
|
||
key={useCase.title}
|
||
className="rounded-[6px] border border-[#e5edf5] bg-white p-10 shadow-[0_15px_35px_rgba(23,23,23,0.08)]"
|
||
>
|
||
<h3 className="mb-4 text-[26px] font-[300] tracking-[-0.26px] text-[#061b31]">
|
||
{useCase.title}
|
||
</h3>
|
||
<p className="mb-6 text-[16px] font-[300] leading-[1.6] text-[#64748d]">
|
||
{useCase.description}
|
||
</p>
|
||
<div className="rounded-[4px] border-l-2 border-[#533afd] bg-[#f9fafe] p-5">
|
||
<p className="text-[14px] font-[300] leading-[1.6] text-[#273951]">
|
||
<strong className="font-[400] text-[#061b31]">
|
||
Example:
|
||
</strong>{' '}
|
||
{useCase.example}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* STATS SECTION */}
|
||
<section className="bg-[#1c1e54] py-24">
|
||
<div className="container mx-auto max-w-4xl px-4 sm:px-6 lg:px-8 text-center md:text-left">
|
||
<div className="flex flex-col md:flex-row md:items-end justify-between gap-8 mb-16">
|
||
<div className="max-w-2xl">
|
||
<div className="flex items-center gap-3 mb-6 justify-center md:justify-start">
|
||
<div className="bg-[#ea2261] rounded-full p-1">
|
||
<svg
|
||
className="w-4 h-4 text-white"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
<span className="text-[12px] font-[400] text-[#ffd7ef] uppercase tracking-wider">
|
||
Why dynamic barcodes matter
|
||
</span>
|
||
</div>
|
||
<h2 className="text-[32px] font-[300] tracking-[-0.64px] text-white mb-6">
|
||
The Business Case for Updatable Barcodes
|
||
</h2>
|
||
<p className="text-[18px] font-[300] leading-[1.6] text-[rgba(255,255,255,0.7)]">
|
||
Static barcodes are a liability when the page or document
|
||
behind them changes. Dynamic barcodes eliminate that risk —
|
||
and add scan intelligence to every label.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid md:grid-cols-2 gap-8 mb-12">
|
||
<div className="rounded-[6px] border border-[rgba(255,255,255,0.1)] bg-[rgba(255,255,255,0.03)] p-8 backdrop-blur-sm">
|
||
<div className="text-[48px] font-[300] tracking-[-0.96px] text-[#f96bee] mb-4">
|
||
46%
|
||
</div>
|
||
<p className="text-[16px] font-[300] leading-[1.6] text-white mb-6">
|
||
of small businesses report wasted budget from printing and
|
||
direct-mail errors. Dynamic barcodes eliminate the need to
|
||
reprint when URLs or pages change.
|
||
</p>
|
||
<p className="text-[12px] font-[300] text-[rgba(255,255,255,0.5)]">
|
||
Source:{' '}
|
||
<a
|
||
href="https://thedma.org/"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="underline hover:text-white transition-colors"
|
||
>
|
||
Data & Marketing Association (DMA)
|
||
</a>
|
||
</p>
|
||
</div>
|
||
|
||
<div className="rounded-[6px] border border-[rgba(255,255,255,0.1)] bg-[rgba(255,255,255,0.03)] p-8 backdrop-blur-sm">
|
||
<div className="text-[48px] font-[300] tracking-[-0.96px] text-[#f96bee] mb-4">
|
||
89% vs 33%
|
||
</div>
|
||
<p className="text-[16px] font-[300] leading-[1.6] text-white mb-6">
|
||
Customer retention rate for companies with strong omnichannel
|
||
tracking (offline scan → online analytics) vs. companies
|
||
without it.
|
||
</p>
|
||
<p className="text-[12px] font-[300] text-[rgba(255,255,255,0.5)]">
|
||
Source:{' '}
|
||
<a
|
||
href="https://www.aberdeengroup.com/"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="underline hover:text-white transition-colors"
|
||
>
|
||
Aberdeen Group
|
||
</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<p className="text-[12px] font-[300] text-[rgba(255,255,255,0.4)] italic text-center md:text-left">
|
||
By Timo Knuth, QR Master · Last updated: April 2026
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
{/* FORMAT GUIDE */}
|
||
<section className="bg-[#f6f9fc] py-24 border-t border-b border-[#e5edf5]">
|
||
<div className="container mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
|
||
<div className="mb-12 text-center">
|
||
<h2 className="mb-4 text-[32px] font-[300] tracking-[-0.64px] text-[#061b31]">
|
||
Which barcode format works dynamically?
|
||
</h2>
|
||
<p className="text-[18px] font-[300] leading-[1.6] text-[#64748d] max-w-2xl mx-auto">
|
||
Dynamic barcodes must encode a URL — so only formats that
|
||
support full ASCII strings work. Numeric-only formats like
|
||
EAN-13, UPC, and ITF-14 cannot embed a redirect URL and are
|
||
available as <strong>static barcodes only</strong>.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="mb-12">
|
||
<h3 className="text-[14px] font-[400] text-[#108c3d] uppercase tracking-wider mb-6 text-center md:text-left">
|
||
Dynamic-capable formats
|
||
</h3>
|
||
<div className="grid gap-6 sm:grid-cols-2">
|
||
{[
|
||
{
|
||
format: 'CODE128',
|
||
badge: 'Recommended',
|
||
badgeColor:
|
||
'bg-[rgba(21,190,83,0.2)] text-[#108c3d] border-[rgba(21,190,83,0.4)]',
|
||
description:
|
||
'High-density alphanumeric. Can encode any URL. Best general-purpose choice for event badges, inserts, and digital signage.',
|
||
},
|
||
{
|
||
format: 'CODE39',
|
||
badge: 'Industrial',
|
||
badgeColor:
|
||
'bg-[rgba(21,190,83,0.2)] text-[#108c3d] border-[rgba(21,190,83,0.4)]',
|
||
description:
|
||
'Supports uppercase letters and digits. Can encode short URLs. Common in automotive and defense environments.',
|
||
},
|
||
].map((item) => (
|
||
<div
|
||
key={item.format}
|
||
className="rounded-[6px] border border-[#e5edf5] bg-white p-6 shadow-[0_3px_6px_rgba(23,23,23,0.06)]"
|
||
>
|
||
<div className="flex items-center gap-3 mb-4">
|
||
<span className="font-mono text-[14px] font-[500] text-[#061b31] uppercase">
|
||
{item.format}
|
||
</span>
|
||
<span
|
||
className={`text-[10px] px-2 py-0.5 rounded-[4px] font-[300] border ${item.badgeColor}`}
|
||
>
|
||
{item.badge}
|
||
</span>
|
||
</div>
|
||
<p className="text-[14px] font-[300] leading-[1.6] text-[#64748d]">
|
||
{item.description}
|
||
</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 className="text-[14px] font-[400] text-[#64748d] uppercase tracking-wider mb-6 text-center md:text-left">
|
||
Static only — numeric formats
|
||
</h3>
|
||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||
{[
|
||
{
|
||
format: 'EAN-13',
|
||
description:
|
||
'13-digit retail standard. Used by POS laser scanners. Cannot encode a URL.',
|
||
},
|
||
{
|
||
format: 'UPC',
|
||
description:
|
||
'12-digit North American retail format. Numeric only.',
|
||
},
|
||
{
|
||
format: 'ITF-14',
|
||
description:
|
||
'Shipping carton format. 14 digits, numeric only.',
|
||
},
|
||
{
|
||
format: 'Pharmacode',
|
||
description:
|
||
'Pharmaceutical standard. Single integer only.',
|
||
},
|
||
].map((item) => (
|
||
<div
|
||
key={item.format}
|
||
className="rounded-[4px] border border-[#e5edf5] bg-white p-5 opacity-80"
|
||
>
|
||
<span className="font-mono text-[12px] font-[500] text-[#273951] uppercase">
|
||
{item.format}
|
||
</span>
|
||
<p className="text-[12px] font-[300] leading-[1.4] text-[#64748d] mt-2">
|
||
{item.description}
|
||
</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<p className="text-[13px] font-[300] text-[#64748d] mt-6 text-center md:text-left">
|
||
All numeric formats are available as static barcodes via the{' '}
|
||
<a
|
||
href="/tools/barcode-generator"
|
||
className="text-[#533afd] hover:underline"
|
||
>
|
||
free barcode generator
|
||
</a>
|
||
.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* RELATED LINKS */}
|
||
<GrowthLinksSection
|
||
eyebrow="Best next workflows"
|
||
title="See where dynamic barcodes fit your stack"
|
||
description="Dynamic barcodes work best alongside QR codes, bulk generation, and unified analytics — all available in the same QR Master dashboard."
|
||
links={relatedLinks}
|
||
pageType="commercial"
|
||
cluster="dynamic-barcode"
|
||
/>
|
||
|
||
{/* CTA BANNER */}
|
||
<section className="bg-white py-32 border-t border-[#e5edf5]">
|
||
<div className="container mx-auto max-w-4xl px-4 text-center sm:px-6 lg:px-8">
|
||
<h2 className="mb-6 text-[48px] font-[300] tracking-[-0.96px] text-[#061b31]">
|
||
Start creating dynamic barcodes today
|
||
</h2>
|
||
<p className="mb-10 text-[18px] font-[300] leading-[1.6] text-[#64748d]">
|
||
Free plan includes 3 active dynamic barcodes. No credit card
|
||
required. Upgrade when you need more.
|
||
</p>
|
||
<div className="flex flex-col justify-center gap-4 sm:flex-row">
|
||
<TrackedCtaLink
|
||
href="/signup"
|
||
ctaLabel="Get Started Free"
|
||
ctaLocation="footer_primary"
|
||
pageType="commercial"
|
||
cluster="dynamic-barcode"
|
||
>
|
||
<button className="w-full sm:w-auto rounded-[4px] bg-[#533afd] px-6 py-3 text-[16px] font-[400] text-white shadow-[0_2px_5px_rgba(50,50,93,0.25),0_1px_3px_rgba(0,0,0,0.1)] transition-colors hover:bg-[#4434d4]">
|
||
Get Started Free
|
||
</button>
|
||
</TrackedCtaLink>
|
||
<TrackedCtaLink
|
||
href="/pricing"
|
||
ctaLabel="View Pricing"
|
||
ctaLocation="footer_secondary"
|
||
pageType="commercial"
|
||
cluster="dynamic-barcode"
|
||
>
|
||
<button className="w-full sm:w-auto rounded-[4px] bg-transparent border border-[#b9b9f9] px-6 py-3 text-[16px] font-[400] text-[#533afd] transition-colors hover:bg-[#533afd]/5">
|
||
View Pricing
|
||
</button>
|
||
</TrackedCtaLink>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</>
|
||
);
|
||
}
|