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

GSC seo

Browse Source
This commit is contained in:
Timo Knuth
2026-05-10 23:00:06 +02:00
parent 8741edc362
commit 35e7e77f6b
14 changed files with 3810 additions and 2106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

548
linear.app/DESIGN.md Normal file
View File

@@ -0,0 +1,548 @@
---
version: alpha
name: Linear
description: "A near-black product-focused marketing canvas built around #010102 (the deepest dark surface of any tool in this collection), light gray text (#f7f8f8), and the signature Linear lavender-blue (#5e6ad2) used as the single chromatic accent. The system reads as software-craft documentation: dense, technical, and quietly luxurious. Display type is set in the Linear custom sans (SF Pro Display fallback) at 500–700 with measured negative tracking. Cards live as charcoal panels (#0f1011) with hairline borders. The accent lavender appears on the brand mark, focus rings, and a few intentional CTAs — never decoratively. Page rhythm leans on product UI screenshots framed in dark panels rather than atmospheric color."
colors:
primary: "#5e6ad2"
on-primary: "#ffffff"
primary-hover: "#828fff"
primary-focus: "#5e69d1"
ink: "#f7f8f8"
ink-muted: "#d0d6e0"
ink-subtle: "#8a8f98"
ink-tertiary: "#62666d"
canvas: "#010102"
surface-1: "#0f1011"
surface-2: "#141516"
surface-3: "#18191a"
surface-4: "#191a1b"
hairline: "#23252a"
hairline-strong: "#34343a"
hairline-tertiary: "#3e3e44"
inverse-canvas: "#ffffff"
inverse-surface-1: "#f5f6f6"
inverse-surface-2: "#f6f7f7"
inverse-ink: "#000000"
brand-secure: "#7a7fad"
semantic-success: "#27a644"
semantic-overlay: "#000000"
typography:
display-xl:
fontFamily: Linear Display
fontSize: 80px
fontWeight: 600
lineHeight: 1.05
letterSpacing: -3.0px
display-lg:
fontFamily: Linear Display
fontSize: 56px
fontWeight: 600
lineHeight: 1.10
letterSpacing: -1.8px
display-md:
fontFamily: Linear Display
fontSize: 40px
fontWeight: 600
lineHeight: 1.15
letterSpacing: -1.0px
headline:
fontFamily: Linear Display
fontSize: 28px
fontWeight: 600
lineHeight: 1.20
letterSpacing: -0.6px
card-title:
fontFamily: Linear Display
fontSize: 22px
fontWeight: 500
lineHeight: 1.25
letterSpacing: -0.4px
subhead:
fontFamily: Linear Display
fontSize: 20px
fontWeight: 400
lineHeight: 1.40
letterSpacing: -0.2px
body-lg:
fontFamily: Linear Text
fontSize: 18px
fontWeight: 400
lineHeight: 1.50
letterSpacing: -0.1px
body:
fontFamily: Linear Text
fontSize: 16px
fontWeight: 400
lineHeight: 1.50
letterSpacing: -0.05px
body-sm:
fontFamily: Linear Text
fontSize: 14px
fontWeight: 400
lineHeight: 1.50
letterSpacing: 0
caption:
fontFamily: Linear Text
fontSize: 12px
fontWeight: 400
lineHeight: 1.40
letterSpacing: 0
button:
fontFamily: Linear Text
fontSize: 14px
fontWeight: 500
lineHeight: 1.20
letterSpacing: 0
eyebrow:
fontFamily: Linear Text
fontSize: 13px
fontWeight: 500
lineHeight: 1.30
letterSpacing: 0.4px
mono:
fontFamily: Linear Mono
fontSize: 13px
fontWeight: 400
lineHeight: 1.50
letterSpacing: 0
rounded:
xs: 4px
sm: 6px
md: 8px
lg: 12px
xl: 16px
xxl: 24px
pill: 9999px
full: 9999px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 24px
xl: 32px
xxl: 48px
section: 96px
components:
button-primary:
backgroundColor: "{colors.primary}"
textColor: "{colors.on-primary}"
typography: "{typography.button}"
rounded: "{rounded.md}"
padding: 8px 14px
button-primary-pressed:
backgroundColor: "{colors.primary-focus}"
textColor: "{colors.on-primary}"
typography: "{typography.button}"
rounded: "{rounded.md}"
button-primary-hover:
backgroundColor: "{colors.primary-hover}"
textColor: "{colors.on-primary}"
typography: "{typography.button}"
rounded: "{rounded.md}"
button-secondary:
backgroundColor: "{colors.surface-1}"
textColor: "{colors.ink}"
typography: "{typography.button}"
rounded: "{rounded.md}"
padding: 8px 14px
button-tertiary:
backgroundColor: "{colors.canvas}"
textColor: "{colors.ink}"
typography: "{typography.button}"
rounded: "{rounded.md}"
padding: 8px 14px
button-inverse:
backgroundColor: "{colors.inverse-canvas}"
textColor: "{colors.inverse-ink}"
typography: "{typography.button}"
rounded: "{rounded.md}"
padding: 8px 14px
pricing-card:
backgroundColor: "{colors.surface-1}"
textColor: "{colors.ink}"
typography: "{typography.body}"
rounded: "{rounded.lg}"
padding: 24px
pricing-card-featured:
backgroundColor: "{colors.surface-2}"
textColor: "{colors.ink}"
typography: "{typography.body}"
rounded: "{rounded.lg}"
padding: 24px
feature-card:
backgroundColor: "{colors.surface-1}"
textColor: "{colors.ink}"
typography: "{typography.body}"
rounded: "{rounded.lg}"
padding: 24px
product-screenshot-card:
backgroundColor: "{colors.surface-1}"
textColor: "{colors.ink}"
typography: "{typography.body}"
rounded: "{rounded.xl}"
padding: 24px
testimonial-card:
backgroundColor: "{colors.surface-1}"
textColor: "{colors.ink}"
typography: "{typography.body-lg}"
rounded: "{rounded.lg}"
padding: 32px
customer-logo-tile:
backgroundColor: "{colors.canvas}"
textColor: "{colors.ink-subtle}"
typography: "{typography.caption}"
rounded: "{rounded.xs}"
padding: 16px
text-input:
backgroundColor: "{colors.surface-1}"
textColor: "{colors.ink}"
typography: "{typography.body}"
rounded: "{rounded.md}"
padding: 8px 12px
text-input-focused:
backgroundColor: "{colors.surface-1}"
textColor: "{colors.ink}"
typography: "{typography.body}"
rounded: "{rounded.md}"
padding: 8px 12px
pricing-tab-default:
backgroundColor: "{colors.canvas}"
textColor: "{colors.ink-subtle}"
typography: "{typography.button}"
rounded: "{rounded.pill}"
padding: 6px 14px
pricing-tab-selected:
backgroundColor: "{colors.surface-2}"
textColor: "{colors.ink}"
typography: "{typography.button}"
rounded: "{rounded.pill}"
padding: 6px 14px
cta-banner:
backgroundColor: "{colors.surface-1}"
textColor: "{colors.ink}"
typography: "{typography.headline}"
rounded: "{rounded.lg}"
padding: 48px
changelog-row:
backgroundColor: "{colors.canvas}"
textColor: "{colors.ink}"
typography: "{typography.body}"
rounded: "{rounded.xs}"
padding: 24px 0
status-badge:
backgroundColor: "{colors.surface-2}"
textColor: "{colors.ink-muted}"
typography: "{typography.caption}"
rounded: "{rounded.pill}"
padding: 2px 8px
top-nav:
backgroundColor: "{colors.canvas}"
textColor: "{colors.ink}"
typography: "{typography.body-sm}"
rounded: "{rounded.xs}"
height: 56px
footer:
backgroundColor: "{colors.canvas}"
textColor: "{colors.ink-subtle}"
typography: "{typography.caption}"
rounded: "{rounded.xs}"
padding: 64px 32px
---
## Overview
Linear's marketing canvas is the deepest dark surface in this collection — `{colors.canvas}` is #010102, essentially pure black with a faint blue tint. On top sits a four-step surface ladder (`{colors.surface-1}` through `{colors.surface-4}`) for cards, panels, and lifted tiles, with hairline borders running from `{colors.hairline}` (#23252a) up through `{colors.hairline-strong}` and `{colors.hairline-tertiary}`. Light gray text (`{colors.ink}` #f7f8f8) carries the body and headlines.
The single chromatic accent is **Linear lavender-blue** `{colors.primary}` (#5e6ad2) — used on the brand mark, focus rings, and the primary CTA button. A lighter hover state (`{colors.primary-hover}` #828fff) and a focus-tinted variant (`{colors.primary-focus}` #5e69d1) extend the same hue. Linear avoids saturated greens, oranges, reds, etc. on the marketing canvas — the only semantic color is `{colors.semantic-success}` (#27a644) for status pills and the rare success indicator.
Display type runs Linear's custom sans (with `SF Pro Display` fallback) at weight 500–700 with negative letter-spacing scaling from -3.0px at 80px down to 0 at body. The body family is Linear's text cut, and a Linear Mono is reserved for code snippets in product screenshots.
The page rhythm is **dense product screenshots** — Linear's marketing leads with high-fidelity captures of the product UI (issue list, project view, dashboard) framed in `{colors.surface-1}` panels with `{rounded.xl}` 16px corners. The chrome is intentionally minimal so the app screenshots can do the heavy lifting.
**Key Characteristics:**
- **Dark-canvas marketing system** — `{colors.canvas}` (#010102) is the deepest dark in this collection.
- **Lavender-blue brand accent** (`{colors.primary}` #5e6ad2) — used scarcely on brand mark, focus, and the primary CTA.
- Four-step surface ladder (canvas → surface-1 → surface-2 → surface-3 → surface-4) carries hierarchy without shadow.
- Display tracking pulls aggressively negative (-3.0px at 80px); body holds at -0.05px.
- Cards use `{rounded.lg}` 12px corners with 1px hairline borders — never pill, rarely 16px.
- **Product UI screenshots** dominate the page. The marketing chrome is a dark frame for the app.
- No second chromatic color. No atmospheric gradients. No spotlight cards.
## Colors
> Source pages: linear.app (home), /intake, /pricing, /contact/sales, /build.
### Brand & Accent
- **Lavender-Blue** ({colors.primary}): The signature Linear accent — primary CTA, brand mark, link emphasis.
- **Lavender Hover** ({colors.primary-hover}): Lighter lavender (#828fff) — hovered state of the primary CTA.
- **Lavender Focus** ({colors.primary-focus}): Focus-ring tint (#5e69d1) — focused inputs, focused buttons.
- **Brand Secure** ({colors.brand-secure}): Muted lavender-gray (#7a7fad) — used in "Linear Security" surfaces.
### Surface
- **Canvas** ({colors.canvas}): Default page background — #010102, near-pure black with a faint blue tint.
- **Surface 1** ({colors.surface-1}): One step above canvas — feature cards, pricing cards, product screenshot panels.
- **Surface 2** ({colors.surface-2}): Two steps above — featured pricing card, hovered cards.
- **Surface 3** ({colors.surface-3}): Three steps above — line-tertiary backgrounds, sub-nav.
- **Surface 4** ({colors.surface-4}): Four steps above — bg-level-3, deepest lifted surface.
- **Hairline** ({colors.hairline}): 1px borders on cards and dividers.
- **Hairline Strong** ({colors.hairline-strong}): Stronger 1px borders — input focus rings.
- **Hairline Tertiary** ({colors.hairline-tertiary}): Tertiary borders for nested surfaces.
- **Inverse Canvas** ({colors.inverse-canvas}): Pure white — surface of the inverse pill CTA on a small set of section openers.
- **Inverse Surface 1** ({colors.inverse-surface-1}): One step above inverse canvas.
- **Inverse Surface 2** ({colors.inverse-surface-2}): Two steps above inverse canvas.
### Text
- **Ink** ({colors.ink}): All headlines and emphasized body type — light gray #f7f8f8.
- **Ink Muted** ({colors.ink-muted}): Secondary type at #d0d6e0 — meta info on hero panels.
- **Ink Subtle** ({colors.ink-subtle}): Tertiary type at #8a8f98 — deselected pricing tabs, footer columns.
- **Ink Tertiary** ({colors.ink-tertiary}): Quaternary at #62666d — disabled, footnotes.
### Semantic
- **Success Green** ({colors.semantic-success}): Status pills, success indicators. The only semantic color on marketing.
- **Overlay** ({colors.semantic-overlay}): Pure black overlay scrim for modals.
## Typography
### Font Family
- **Linear Display** — Linear's custom display sans; fallback `SF Pro Display, -apple-system, system-ui, Segoe UI, Roboto`. Carries display-xl through subhead.
- **Linear Text** — Linear's custom text sans (a slightly different cut tuned for body sizes); same fallback stack. Carries body sizes, button labels, captions.
- **Linear Mono** — Linear's custom mono; fallback `ui-monospace, SF Mono, Menlo`. Used for code snippets in product screenshots and for status / ID tokens.
The marketing surface treats Display and Text as one continuous voice; the family change is silent.
### Hierarchy
| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-xl}` | 80px | 600 | 1.05 | -3.0px | Largest hero headline |
| `{typography.display-lg}` | 56px | 600 | 1.10 | -1.8px | Section opener headlines |
| `{typography.display-md}` | 40px | 600 | 1.15 | -1.0px | Sub-section headlines |
| `{typography.headline}` | 28px | 600 | 1.20 | -0.6px | Pricing tier titles, CTA banner heading |
| `{typography.card-title}` | 22px | 500 | 1.25 | -0.4px | Feature card title |
| `{typography.subhead}` | 20px | 400 | 1.40 | -0.2px | Lead body, intro paragraphs |
| `{typography.body-lg}` | 18px | 400 | 1.50 | -0.1px | Hero subhead, lead paragraphs |
| `{typography.body}` | 16px | 400 | 1.50 | -0.05px | Default body |
| `{typography.body-sm}` | 14px | 400 | 1.50 | 0 | Card body, footer columns |
| `{typography.caption}` | 12px | 400 | 1.40 | 0 | Captions, meta, status |
| `{typography.button}` | 14px | 500 | 1.20 | 0 | All button labels |
| `{typography.eyebrow}` | 13px | 500 | 1.30 | 0.4px | Section eyebrow (slight positive tracking) |
| `{typography.mono}` | 13px | 400 | 1.50 | 0 | Linear Mono for code in product screenshots |
### Principles
- **Aggressive negative tracking on display** (-3.0px at 80px ≈ 4% of size).
- **Single voice from display to body.** Display-xl at 600 → body at 400 — same family, narrower weights.
- **Eyebrow uses positive tracking** (+0.4px) — contrast against the negative-tracked display marks the eyebrow as taxonomy.
- **Mono only in code contexts.** Linear Mono lives inside product screenshots — not on marketing chrome.
### Note on Font Substitutes
Linear's custom typeface isn't publicly distributed; the documented fallback `SF Pro Display, -apple-system, system-ui` is the recommended substitute on macOS. For cross-platform implementation, **Inter** at weight 500 / 600 / 700 is the closest free substitute. **Geist Sans** is also viable. For mono, **JetBrains Mono** or **Geist Mono** at weight 400 closely approximates Linear Mono.
## Layout
### Spacing System
- **Base unit**: 4px.
- **Tokens (front matter)**: `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.md}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px · `{spacing.section}` 96px.
- Card interior padding: `{spacing.lg}` 24px on feature/pricing cards; `{spacing.xl}` 32px on testimonial cards; `{spacing.xxl}` 48px on CTA banners.
- Pill button padding: 8px vertical · 14px horizontal — Linear's compact button spec.
- Form input padding: 8px vertical · 12px horizontal.
### Grid & Container
- Max content width sits around 1280px.
- Card grids are 3-up at desktop, 2-up at tablet, 1-up at mobile.
- Pricing tier grid is 3-up; comparison strip below shows checkmarks per tier.
- Product screenshot panels span full content width — they're the protagonist.
### Whitespace Philosophy
The dark canvas IS the whitespace. Sections separate by lift onto surface-1 panels, not by gaps in white. Within a panel, generous `{spacing.lg}` 24px gaps between content blocks; `{spacing.section}` 96px between sections.
## Elevation & Depth
| Level | Treatment | Use |
|---|---|---|
| 0 (flat) | No shadow, no border | Default for body type, hero text, footer |
| 1 (charcoal lift) | `{colors.surface-1}` background on canvas, 1px `{colors.hairline}` | Default cards, product panels |
| 2 (surface-2 lift) | `{colors.surface-2}` background, 1px `{colors.hairline-strong}` | Featured pricing card, hovered cards |
| 3 (surface-3 lift) | `{colors.surface-3}` background | Sub-nav, dropdown menus |
| 4 (focus ring) | 2px `{colors.primary-focus}` outline at 50% opacity | Focused input, focused button |
Linear's depth is carried by surface ladder + hairline borders. The brand resists drop shadows on dark almost entirely.
### Decorative Depth
- **Product UI screenshots** dominate as decorative depth.
- **No atmospheric gradients, no spotlight cards.**
- **Subtle white edge highlight** on the top edge of lifted panels — gives the dark surface a faint "pixel rendered" feel.
## Shapes
### Border Radius Scale
| Token | Value | Use |
|---|---|---|
| `{rounded.xs}` | 4px | Small chips, status badges |
| `{rounded.sm}` | 6px | Inline tags |
| `{rounded.md}` | 8px | All buttons, form inputs |
| `{rounded.lg}` | 12px | Pricing cards, feature cards, testimonial cards |
| `{rounded.xl}` | 16px | Product screenshot panels |
| `{rounded.xxl}` | 24px | Oversized CTA banners (rare) |
| `{rounded.pill}` | 9999px | Pricing tab toggles, status pills |
| `{rounded.full}` | 9999px | Avatar circles |
### Photography & Illustration Geometry
- Product UI screenshots dominate; they sit in `{rounded.xl}` 16px tiles with `{spacing.lg}` 24px outer padding.
- Customer logo tiles render at small sizes (~24px logo height) on `{colors.canvas}` with no border.
- Avatar circles in testimonial cards use `{rounded.full}` at 32–40px sizes.
## Components
### Buttons
**`button-primary`** — Lavender CTA. The default primary CTA across all pages.
- Background `{colors.primary}`, text `{colors.on-primary}`, type `{typography.button}`, padding 8px 14px, rounded `{rounded.md}`.
- Pressed state lives in `button-primary-pressed` (background shifts to `{colors.primary-focus}`).
- Hover state lives in `button-primary-hover` (background shifts to `{colors.primary-hover}` lighter lavender).
**`button-secondary`** — Charcoal button. Used for secondary CTAs ("Sign in", "Read changelog").
- Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.button}`, padding 8px 14px, rounded `{rounded.md}`. 1px `{colors.hairline}` border.
**`button-tertiary`** — Plain text button.
- Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.button}`, rounded `{rounded.md}`, padding 8px 14px.
**`button-inverse`** — White-on-dark inverse CTA.
- Background `{colors.inverse-canvas}`, text `{colors.inverse-ink}`, type `{typography.button}`, rounded `{rounded.md}`, padding 8px 14px.
### Pricing Tabs
**`pricing-tab-default`** + **`pricing-tab-selected`** — Pill-toggle on `/pricing`.
- Default: `{colors.canvas}` background, `{colors.ink-subtle}` text, rounded `{rounded.pill}`, padding 6px 14px.
- Selected: `{colors.surface-2}` background, `{colors.ink}` text — selected = surface lift.
### Cards & Containers
**`pricing-card`** — Each tier on `/pricing`.
- Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.lg}`, padding 24px. 1px `{colors.hairline}` border.
**`pricing-card-featured`** — Recommended tier — surface lift to surface-2.
- Background `{colors.surface-2}`, otherwise identical structure.
**`feature-card`** — Generic feature highlight tile.
- Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.lg}`, padding 24px.
**`product-screenshot-card`** — The dominant card type — frames a high-fidelity Linear app UI screenshot.
- Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.xl}`, padding 24px.
**`testimonial-card`** — Customer quote with avatar + name + role.
- Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.body-lg}`, rounded `{rounded.lg}`, padding 32px.
**`customer-logo-tile`** — Small tile in the customer marquee.
- Background `{colors.canvas}`, text `{colors.ink-subtle}`, type `{typography.caption}`, rounded `{rounded.xs}`, padding 16px.
**`cta-banner`** — Closing CTA panel near page bottom.
- Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.headline}`, rounded `{rounded.lg}`, padding 48px.
### Inputs & Forms
**`text-input`** + **`text-input-focused`** — Form fields on `/contact/sales` and signup overlays.
- Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.md}`, padding 8px 12px.
- Focused state retains the same surface; the focus ring is a 2px `{colors.primary-focus}` outline at 50% opacity.
### Status & Build Page
**`changelog-row`** — Each row in `/build` (changelog page) listing version, date, and changes.
- Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.xs}`, padding 24px 0. 1px `{colors.hairline}` bottom rule.
**`status-badge`** — Small status pill.
- Background `{colors.surface-2}`, text `{colors.ink-muted}`, type `{typography.caption}`, rounded `{rounded.pill}`, padding 2px 8px.
### Navigation
**`top-nav`** — Sticky dark bar with the Linear wordmark left, primary nav links centered, and a `button-secondary` ("Sign in") + `button-primary` ("Get started") pair right.
- Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body-sm}`, height 56px.
### Footer
**`footer`** — Dense link grid on `{colors.canvas}` with the Linear wordmark left.
- Background `{colors.canvas}`, text `{colors.ink-subtle}`, type `{typography.caption}`, padding 64px 32px.
## Do's and Don'ts
### Do
- Reserve `{colors.canvas}` (#010102) as the system's anchor surface — the faint blue tint is intentional.
- Use `{colors.primary}` lavender ONLY for: brand mark, primary CTA, focus ring, link emphasis.
- Use the four-step surface ladder for hierarchy. Avoid skipping levels.
- Pair display weight 600 with body weight 400 — Linear resists 700+ display weights.
- Apply negative letter-spacing aggressively on display.
- Use product UI screenshots as the protagonist of every section.
- Compose CTAs as `{rounded.md}` 8px corners.
### Don't
- Don't ship a light-mode marketing page.
- Don't use lavender as a section background or card fill.
- Don't introduce a second chromatic accent (orange, pink, green for marketing).
- Don't add atmospheric gradients or spotlight cards.
- Don't pill-round CTAs.
- Don't use `#000000` true black as the canvas.
- Don't combine multiple bright accents in product screenshot mockups.
## Responsive Behavior
### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Desktop-XL | 1440px | Default desktop layout |
| Desktop | 1280px | Card grid 3-up maintained |
| Tablet | 1024px | Card grid 3-up → 2-up |
| Mobile-Lg | 768px | Pricing comparison becomes accordion; nav hamburger |
| Mobile | 480px | Single-column; display-xl scales 80px → ~36px |
### Touch Targets
- CTAs hold ≥40px tap height across viewports.
- Pricing tab pills hold ≥36px tap height; touch viewports grow to ≥44px.
- Form inputs hold ≥44px tap target on touch.
### Collapsing Strategy
- **Top nav**: links collapse to hamburger below 768px.
- **Card grids**: 3-up → 2-up at 1024px → 1-up below 768px.
- **Pricing comparison**: per-tier accordion below 768px.
- **Display type**: `{typography.display-xl}` 80px scales toward `{typography.display-md}` 40px on mobile.
### Image Behavior
- Product UI screenshots maintain aspect ratio and never crop.
- Customer logos in the marquee may collapse from 6-up to 3-up below 768px.
## Iteration Guide
1. Focus on ONE component at a time and reference it by its `components:` token name.
2. When introducing a section, decide first which surface lift it lives on.
3. Default body to `{typography.body}` at weight 400.
4. Run `npx @google/design.md lint DESIGN.md` after edits.
5. Add new variants as separate component entries.
6. Treat lavender as scarce: brand mark, primary CTA, focus, link emphasis.
7. Lead every section with a product UI screenshot.
## Known Gaps
- The four-step surface ladder values are extracted directly from Linear's `--color-bg-level-3`, `--color-line-tint`, etc. CSS variables; they are Linear's canonical surface spec.
- Form-field error and validation styling is not visible on the inspected pages.
- Light mode is not documented because the marketing site does not ship a light theme.
- Linear's actual product UI uses a richer color-tag palette (red, orange, yellow, green, blue, purple) for issue priorities and project labels — those colors live in the in-product surfaces shown in mockups.
- The custom display, text, and mono families are proprietary; an open-source substitute is acceptable.

41
memory/upgrade_nudge_status.md Normal file
View File

@@ -0,0 +1,41 @@
# Upgrade Nudge Status Memory
Last updated: 2026-05-02
Purpose: local memory for upgrade-nudge outreach status when SMTP/Sent-folder evidence is incomplete. `sent_assumed_manual` means the user instructed us to treat the contact as already sent for future filtering, not that a verifiable SMTP/Sent record was found.
## Pending send
These are the two highest-priority upgrade candidates. Do not mark as sent until the upgrade email is actually sent.
| Name | Email | Stage | Lead score | Reason |
| --- | --- | --- | ---: | --- |
| Ishemupenyu Chagonda | info@aldenadvisory.co.uk | Upgrade Candidate | 105 | User confirmed no upgrade email has been sent yet |
| Shreya Hegde | shhegde@linkedin.com | Upgrade Candidate | 95 | User confirmed no upgrade email has been sent yet |
## Marked as sent by manual memory
These contacts should be treated as already sent when filtering future upgrade-nudge batches.
| Name | Email | Stage | Lead score | Status |
| --- | --- | --- | ---: | --- |
| Marcos Pagan | marcos@easternalliancerealty.com | Upgrade Candidate | 80 | sent_assumed_manual |
| katie Loucaides | katie.loucaides@rya.org.uk | Upgrade Candidate | 70 | sent_assumed_manual |
| Lindsey Holtz | lholtz@uwhealth.org | Upgrade Candidate | 70 | sent_assumed_manual |
| Janell Elder | janell.elder@gov.sk.ca | Upgrade Candidate | 70 | sent_assumed_manual |
| Nouf Saud | nouna.1428@gmail.com | Hot | 65 | sent_assumed_manual |
| Richie Shawl | richie.shawl@alfalaval.com | Hot | 60 | sent_assumed_manual |
| Patricia Hartmann | patricia.hartmann@agderfk.no | Hot | 60 | sent_assumed_manual |
| Andreas Knuth | andreas.knuth@gmail.com | Hot | unknown | sent_assumed_manual |
## Excluded
| Name | Email | Stage | Reason |
| --- | --- | --- | --- |
| Profoto Malaysia Sdn Bhd | profotomalaysia@gmail.com | Paid | Already PRO/Paid, not an upgrade-nudge target |
## Notes
- IMAP `Sent` check on 2026-05-02 found no verifiable Day-7 upgrade-nudge email records.
- The currently configured database lacks the `upgradeNudgeSentAt` column, so app-level sent status could not be verified there.
- Future upgrade-nudge sends should prioritize `info@aldenadvisory.co.uk` and `shhegde@linkedin.com`.

18
src/app/(main)/(marketing)/about/page.tsx
View File

@@ -8,11 +8,11 @@ import { CheckCircle2, Shield, Users, BarChart3, Globe, Lock } from 'lucide-reac
import { ObfuscatedMailto } from '@/components/ui/ObfuscatedMailto'; import { ObfuscatedMailto } from '@/components/ui/ObfuscatedMailto';
export const metadata: Metadata = { export const metadata: Metadata = {
title: 'About QR Master | The Team & Mission Behind the Platform', title: 'About QR Master | Free QR Code Generator for Businesses',
description: 'QR Master is built for measurable campaigns and secure QR code operations. Learn about our mission, values, and why businesses trust us.', description: 'QR Master helps businesses create, track, and manage QR codes at scale — free dynamic QR codes, real analytics, and no hidden limits. Learn who we are.',
openGraph: { openGraph: {
title: 'About QR Master | Dynamic QR Codes & Analytics', title: 'About QR Master | Free Dynamic QR Codes & Analytics',
description: 'We help businesses create, manage, and track QR codes at scale. Transparent pricing, privacy-first, and built for reliability.', description: 'Free dynamic QR codes with scan analytics, custom branding, and no reprint headaches. Learn about the team and mission behind QR Master.',
url: 'https://www.qrmaster.net/about', url: 'https://www.qrmaster.net/about',
type: 'website', type: 'website',
images: ['/og-image.png'], images: ['/og-image.png'],
@@ -112,11 +112,11 @@ export default function AboutPage() {
</div> </div>
</div> </div>
<div className="mt-12 text-center"> <div className="mt-12 text-center">
<Link href="/dynamic-qr-code-generator"> <Link href="/dynamic-qr-code-generator">
<Button size="lg">Create QR Code</Button> <Button size="lg">Create QR Code</Button>
</Link> </Link>
</div> </div>
</div> </div>
</section> </section>

2272
src/app/(main)/(marketing)/dynamic-qr-code-generator/page.tsx
View File

File diff suppressed because it is too large Load Diff

4
src/app/(main)/(marketing)/faq/page.tsx
View File

@@ -14,9 +14,9 @@ function truncateAtWord(text: string, maxLength: number): string {
} }
export async function generateMetadata(): Promise<Metadata> { export async function generateMetadata(): Promise<Metadata> {
const title = truncateAtWord('QR Code FAQ: Do QR Codes Expire, Work Through Laminate, and More', 60); const title = truncateAtWord('QR Code FAQ: Expiry, Laminate Scanning & Dynamic QR Explained', 60);
const description = truncateAtWord( const description = truncateAtWord(
'Answers to common QR code questions: do QR codes expire, will they become obsolete, do they work through laminate, and product-specific questions about dynamic QR codes and tracking.', 'Quick answers: do QR codes expire? Do they work through laminate? What\'s the difference between static and dynamic? Get straight answers before you start creating.',
160 160
); );

219
src/app/(main)/(marketing)/page.tsx
View File

@@ -1,93 +1,126 @@
import React from 'react'; import React from 'react';
import type { Metadata } from 'next'; import type { Metadata } from 'next';
import SeoJsonLd from '@/components/SeoJsonLd'; import SeoJsonLd from '@/components/SeoJsonLd';
import { organizationSchema, websiteSchema, softwareApplicationSchema, reviewSchema, aggregateRatingSchema } from '@/lib/schema'; import {
import { getFeaturedTestimonials, getAggregateRating } from '@/lib/testimonial-data'; organizationSchema,
import HomePageClient from '@/components/marketing/HomePageClient'; websiteSchema,
softwareApplicationSchema,
function truncateAtWord(text: string, maxLength: number): string { reviewSchema,
if (text.length <= maxLength) return text; aggregateRatingSchema,
const truncated = text.slice(0, maxLength); } from '@/lib/schema';
const lastSpace = truncated.lastIndexOf(' '); import {
return lastSpace > 0 ? truncated.slice(0, lastSpace) : truncated; getFeaturedTestimonials,
} getAggregateRating,
} from '@/lib/testimonial-data';
export async function generateMetadata(): Promise<Metadata> { import HomePageClient from '@/components/marketing/HomePageClient';
const title = truncateAtWord('QR Master: Dynamic QR Generator', 60);
const description = truncateAtWord( function truncateAtWord(text: string, maxLength: number): string {
'Create dynamic QR codes, track scans, and scale campaigns with secure analytics. Free advanced features, bulk generation, and custom branding available.', if (text.length <= maxLength) return text;
160 const truncated = text.slice(0, maxLength);
); const lastSpace = truncated.lastIndexOf(' ');
return lastSpace > 0 ? truncated.slice(0, lastSpace) : truncated;
return { }
title,
description, export async function generateMetadata(): Promise<Metadata> {
keywords: ['qr generator', 'free qr code generator', 'custom qr code generator', 'qr code maker', 'online qr code generator', 'dynamic qr code', 'qr code with logo'], const title = truncateAtWord('QR Master - Free QR Code Generator', 60);
alternates: { const description = truncateAtWord(
canonical: 'https://www.qrmaster.net/', 'QR Master is a free QR code generator for dynamic QR codes, scan tracking, custom branding, bulk creation, and static QR tools.',
languages: { 160
'x-default': 'https://www.qrmaster.net/', );
en: 'https://www.qrmaster.net/',
de: 'https://www.qrmaster.net/qr-code-erstellen', return {
}, title,
}, description,
openGraph: { keywords: [
title, 'qr generator',
description, 'free qr code generator',
url: 'https://www.qrmaster.net/', 'custom qr code generator',
type: 'website', 'qr code maker',
images: [ 'online qr code generator',
{ 'dynamic qr code',
url: 'https://www.qrmaster.net/og-image.png', 'qr code with logo',
width: 1200, 'barcode generator',
height: 630, 'free barcode generator',
alt: 'QR Master - Dynamic QR Code Generator and Analytics Platform', ],
}, alternates: {
], canonical: 'https://www.qrmaster.net/',
}, languages: {
twitter: { 'x-default': 'https://www.qrmaster.net/',
title, en: 'https://www.qrmaster.net/',
description, de: 'https://www.qrmaster.net/qr-code-erstellen',
}, },
}; },
} openGraph: {
title,
export default function HomePage() { description,
const featuredTestimonials = getFeaturedTestimonials(); url: 'https://www.qrmaster.net/',
const aggregateRating = getAggregateRating(); type: 'website',
const reviewSchemas = featuredTestimonials.map(t => reviewSchema(t)); images: [
{
return ( url: 'https://www.qrmaster.net/og-image.png',
<> width: 1200,
<SeoJsonLd data={[ height: 630,
websiteSchema(), alt: 'QR Master - Dynamic QR Code Generator and Analytics Platform',
organizationSchema(), },
softwareApplicationSchema(aggregateRating), ],
aggregateRatingSchema(aggregateRating), },
...reviewSchemas twitter: {
]} /> title,
description,
{/* Server-rendered SEO content for crawlers */} },
<div className="sr-only" aria-hidden="false"> };
}
<p>
Create professional QR codes for your business with QR Master. Our dynamic QR code generator export default function HomePage() {
lets you create trackable QR codes, edit destinations anytime, and view detailed analytics. const featuredTestimonials = getFeaturedTestimonials();
Perfect for restaurants, retail, events, and marketing campaigns. const aggregateRating = getAggregateRating();
</p> const reviewSchemas = featuredTestimonials.map((t) => reviewSchema(t));
<p>
Features include: Dynamic QR codes with real-time tracking, bulk QR code generation from Excel/CSV, return (
custom branding with colors and logos, advanced scan analytics showing device types and locations, <>
vCard QR codes for digital business cards, restaurant menu QR codes, and a free{' '} <SeoJsonLd
<a href="/tools/barcode-generator">barcode generator</a> for EAN-13, UPC-A, and Code 128 barcodes. data={[
</p> websiteSchema(),
<p> organizationSchema(),
Start free with 3 active dynamic QR codes and unlimited static codes. Upgrade to Pro for 50 codes softwareApplicationSchema(aggregateRating),
with advanced analytics, or Business for 500 codes with bulk creation and priority support. aggregateRatingSchema(aggregateRating),
</p> ...reviewSchemas,
</div> ]}
/>
<HomePageClient />
</> {/* Server-rendered SEO content for crawlers */}
); <div className="sr-only" aria-hidden="false">
} <p>
Create professional QR codes for your business with QR Master. Our
dynamic QR code generator lets you create trackable QR codes, edit
destinations anytime, and view detailed analytics. Perfect for
restaurants, retail, events, and marketing campaigns.
</p>
<p>
Features include: Dynamic QR codes with real-time tracking, bulk QR
code generation from Excel/CSV, custom branding with colors and logos,
advanced scan analytics showing device types and locations, vCard QR
codes for digital business cards, restaurant menu QR codes, and a free{' '}
<a href="/tools/barcode-generator">barcode generator</a> for EAN-13,
UPC-A, and Code 128 barcodes.
</p>
<p>
Popular QR Master workflows include the{' '}
<a href="/dynamic-qr-code-generator">
free dynamic QR code generator
</a>
, <a href="/qr-code-tracking">QR code tracking</a>, and the{' '}
<a href="/custom-qr-code-generator">custom QR code generator</a> for
branded print campaigns.
</p>
<p>
Start free with 3 active dynamic QR codes and unlimited static codes.
Upgrade to Pro for 50 codes with advanced analytics, or Business for
500 codes with bulk creation and priority support.
</p>
</div>
<HomePageClient />
</>
);
}

1368
src/app/(main)/(marketing)/qr-code-tracking/page.tsx
View File

File diff suppressed because it is too large Load Diff

2
src/app/(main)/(marketing)/tools/barcode-generator/BarcodeGuide.tsx
View File

@@ -18,7 +18,7 @@ export function BarcodeGuide() {
</h2> </h2>
</div> </div>
<p className="text-xs text-slate-400 mb-8 not-prose"> <p className="text-xs text-slate-400 mb-8 not-prose">
By <strong className="text-slate-600">Timo Knuth</strong>, QR Master · Last updated: April 2026 · GS1-verified content By <strong className="text-slate-600">Timo Knuth</strong>, QR Master · Last updated: May 2026 · GS1-verified content
</p> </p>
<p className="lead text-xl text-slate-600"> <p className="lead text-xl text-slate-600">

955
src/app/(main)/(marketing)/tools/barcode-generator/page.tsx
View File

@@ -1,382 +1,573 @@
import React from 'react';
import React from 'react'; import type { Metadata } from 'next';
import type { Metadata } from 'next'; import BarcodeGeneratorClient from './BarcodeGeneratorClient';
import BarcodeGeneratorClient from './BarcodeGeneratorClient'; import { BarcodeGuide } from './BarcodeGuide';
import { BarcodeGuide } from './BarcodeGuide'; import {
import { Barcode as BarcodeIcon, Shield, Zap, Printer, Download, Share2, Sparkles, Sliders, Check } from 'lucide-react'; Barcode as BarcodeIcon,
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema'; Shield,
import { RelatedTools } from '@/components/marketing/RelatedTools'; Zap,
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils'; Printer,
Download,
// SEO Optimized Metadata Share2,
export const metadata: Metadata = { Sparkles,
title: { Sliders,
absolute: 'Free Barcode Generator Online – EAN, UPC, Code 128', Check,
}, } from 'lucide-react';
description: 'Free online barcode generator for EAN-13, UPC-A, and Code 128 barcodes. Create scannable labels for retail, inventory, and logistics instantly. Download PNG or SVG — no signup required.', import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
keywords: ['barcode generator', 'online barcode maker', 'create barcode free', 'ean-13 generator', 'upc-a generator', 'code 128 generator', 'barcode creator', 'printable barcodes'], import { RelatedTools } from '@/components/marketing/RelatedTools';
alternates: { import {
canonical: 'https://www.qrmaster.net/tools/barcode-generator', generateSoftwareAppSchema,
languages: { generateFaqSchema,
'x-default': 'https://www.qrmaster.net/tools/barcode-generator', } from '@/lib/schema-utils';
en: 'https://www.qrmaster.net/tools/barcode-generator',
}, // SEO Optimized Metadata
}, export const metadata: Metadata = {
openGraph: { title: {
title: 'Barcode Generator: Create EAN, UPC & Code 128', absolute: 'Free Custom Barcode Generator - EAN, UPC, Code 128',
description: 'Barcode Generator: Create professional labels instantly. Free & Secured.', },
url: 'https://www.qrmaster.net/tools/barcode-generator', description:
siteName: 'QR Master', 'Free custom barcode generator and barcode maker for EAN-13, UPC-A, UPC barcode, and Code 128. Create scannable labels for retail and inventory, then download PNG or SVG.',
locale: 'en_US', keywords: [
type: 'website', 'barcode generator',
images: [{ url: '/barcode-generator-preview.png', width: 1200, height: 630 }], 'custom barcode generator',
}, 'online barcode generator',
twitter: { 'free online barcode generator',
card: 'summary_large_image', 'barcode maker',
title: 'Free Barcode Generator', 'upc barcode generator',
description: 'Create custom barcodes in seconds. Download high-quality PNG/SVG.', 'ean-13 generator',
}, 'upc-a generator',
robots: { 'code 128 generator',
index: true, 'barcode creator',
follow: true, 'create barcode free',
}, 'printable barcodes',
}; ],
alternates: {
// JSON-LD Structured Data canonical: 'https://www.qrmaster.net/tools/barcode-generator',
const jsonLd = { languages: {
'@context': 'https://schema.org', 'x-default': 'https://www.qrmaster.net/tools/barcode-generator',
'@graph': [ en: 'https://www.qrmaster.net/tools/barcode-generator',
generateSoftwareAppSchema( },
'Barcode Generator', },
'Generate custom printable barcodes instantly for EAN, UPC, Code 128 and more.', openGraph: {
'/barcode-generator-preview.png', title: 'Free Custom Barcode Generator - EAN, UPC & Code 128',
'UtilitiesApplication' description:
), 'Free online barcode maker for EAN-13, UPC-A, and Code 128. Create scannable custom barcodes in seconds and download PNG or SVG.',
{ url: 'https://www.qrmaster.net/tools/barcode-generator',
'@type': 'WebPage', siteName: 'QR Master',
'@id': 'https://www.qrmaster.net/tools/barcode-generator', locale: 'en_US',
name: 'Free Barcode Generator Online – EAN, UPC, Code 128', type: 'website',
description: 'A barcode generator converts any number or text into a scannable barcode image for retail labels, inventory, and product packaging. Supports EAN-13, UPC-A, and Code 128.', images: [
speakable: { { url: '/barcode-generator-preview.png', width: 1200, height: 630 },
'@type': 'SpeakableSpecification', ],
cssSelector: ['.bg-blue-50', 'h1'], },
}, twitter: {
author: { card: 'summary_large_image',
'@type': 'Person', title: 'Free Barcode Generator',
name: 'Timo Knuth', description:
url: 'https://www.qrmaster.net/authors/timo', 'Create custom barcodes in seconds. Download high-quality PNG/SVG.',
}, },
dateModified: '2026-04-27', robots: {
}, index: true,
{ follow: true,
'@type': 'HowTo', },
name: 'How to Create a Barcode', };
datePublished: '2024-06-01',
dateModified: '2026-04-27', // JSON-LD Structured Data
author: { const jsonLd = {
'@type': 'Person', '@context': 'https://schema.org',
name: 'Timo Knuth', '@graph': [
url: 'https://www.qrmaster.net/authors/timo', generateSoftwareAppSchema(
}, 'Barcode Generator',
description: 'Create custom barcodes for products or inventory.', 'Generate custom printable barcodes instantly for EAN, UPC, Code 128 and more.',
step: [ '/barcode-generator-preview.png',
{ 'UtilitiesApplication'
'@type': 'HowToStep', ),
position: 1, {
name: 'Enter Content', '@type': 'WebPage',
text: 'Type or paste the numeric or alphanumeric data for your barcode.', '@id': 'https://www.qrmaster.net/tools/barcode-generator',
}, name: 'Free Custom Barcode Generator Online - EAN, UPC, Code 128',
{ description:
'@type': 'HowToStep', 'A barcode generator converts any number or text into a scannable barcode image for retail labels, inventory, and product packaging. Supports EAN-13, UPC-A, and Code 128.',
position: 2, speakable: {
name: 'Select Format', '@type': 'SpeakableSpecification',
text: 'Choose the appropriate barcode type (e.g., Code 128 for general use, EAN-13 for retail).', cssSelector: ['.bg-blue-50', 'h1'],
}, },
{ author: {
'@type': 'HowToStep', '@type': 'Person',
position: 3, name: 'Timo Knuth',
name: 'Customize Design', url: 'https://www.qrmaster.net/authors/timo',
text: 'Adjust the height and width of the barcode to fit your needs.', },
}, dateModified: '2026-05-10',
{ },
'@type': 'HowToStep', {
position: 4, '@type': 'HowTo',
name: 'Toggle Text', name: 'How to Create a Barcode',
text: 'Decide if you want the human-readable value to appear below the barcode.', datePublished: '2024-06-01',
}, dateModified: '2026-05-10',
{ author: {
'@type': 'HowToStep', '@type': 'Person',
position: 5, name: 'Timo Knuth',
name: 'Download & Print', url: 'https://www.qrmaster.net/authors/timo',
text: 'Save your barcode as PNG or SVG and print it for labels or inventory.', },
}, description: 'Create custom barcodes for products or inventory.',
], step: [
totalTime: 'PT20S', {
}, '@type': 'HowToStep',
generateFaqSchema({ position: 1,
'What is a Barcode Generator?': { name: 'Enter Content',
question: 'What is a Barcode Generator?', text: 'Type or paste the numeric or alphanumeric data for your barcode.',
answer: 'A Barcode Generator is an online tool that converts numbers or text into scannable barcode images that can be used for products, labels, and inventory systems.', },
}, {
'Is this barcode generator free to use?': { '@type': 'HowToStep',
question: 'Is this barcode generator free to use?', position: 2,
answer: 'Yes, our online barcode generator is completely free to use with no hidden costs or sign-ups required. You can generate, download, and print barcodes instantly.', name: 'Select Format',
}, text: 'Choose the appropriate barcode type (e.g., Code 128 for general use, EAN-13 for retail).',
'Which barcode format should I use?': { },
question: 'Which barcode format should I use?', {
answer: 'EAN-13 is standard for retail in Europe/Global. UPC-A is standard for retail in USA/Canada. Code 128 is best for logistics and internal tracking as it supports letters and numbers.', '@type': 'HowToStep',
}, position: 3,
'Can I download barcodes in vector format (SVG)?': { name: 'Customize Design',
question: 'Can I download barcodes in vector format (SVG)?', text: 'Adjust the height and width of the barcode to fit your needs.',
answer: 'Yes! We offer SVG downloads. SVG files are vector-based, meaning they can be scaled to any size without losing quality—perfect for professional product packaging.', },
}, {
'How do I generate a barcode online?': { '@type': 'HowToStep',
question: 'How do I generate a barcode online?', position: 4,
answer: 'To generate a barcode online, enter your product number or text, select the desired barcode format (such as EAN-13 or Code 128), and click the generate button. The barcode will be created instantly.', name: 'Toggle Text',
}, text: 'Decide if you want the human-readable value to appear below the barcode.',
'Are generated barcodes scannable?': { },
question: 'Are generated barcodes scannable?', {
answer: 'Yes, barcodes generated with a proper barcode generator are fully scannable. We generate standard-compliant barcodes readable by any standard optical or laser barcode scanner.', '@type': 'HowToStep',
}, position: 5,
'Can I use these barcodes for Amazon (EAN/UPC)?': { name: 'Download & Print',
question: 'Can I use these barcodes for Amazon (EAN/UPC)?', text: 'Save your barcode as PNG or SVG and print it for labels or inventory.',
answer: 'You can generate the image for Amazon here if you already have your EAN/UPC number. However, you cannot "create" a valid global EAN number here—you must purchase those official numbers from GS1 to sell on major platforms like Amazon.', },
}, ],
'What is the difference between a barcode and a QR code?': { totalTime: 'PT20S',
question: 'What is the difference between a barcode and a QR code?', },
answer: 'A barcode stores data horizontally (1D) and is mainly used for product IDs. A QR code stores data in 2D (matrix) and can hold much more information, such as URLs, vCards, or WiFi credentials.', generateFaqSchema({
}, 'What is a Barcode Generator?': {
}), question: 'What is a Barcode Generator?',
], answer:
}; 'A Barcode Generator is an online tool that converts numbers or text into scannable barcode images that can be used for products, labels, and inventory systems.',
},
export default function BarcodeGeneratorPage() { 'Is this barcode generator free to use?': {
return ( question: 'Is this barcode generator free to use?',
<> answer:
<script 'Yes, our online barcode generator is completely free to use with no hidden costs or sign-ups required. You can generate, download, and print barcodes instantly.',
type="application/ld+json" },
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} 'Which barcode format should I use?': {
/> question: 'Which barcode format should I use?',
<ToolBreadcrumb toolName="Barcode Generator" toolSlug="barcode-generator" /> answer:
'EAN-13 is standard for retail in Europe/Global. UPC-A is standard for retail in USA/Canada. Code 128 is best for logistics and internal tracking as it supports letters and numbers.',
<div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}> },
'Can I download barcodes in vector format (SVG)?': {
{/* HERO SECTION */} question: 'Can I download barcodes in vector format (SVG)?',
<section className="relative pt-20 pb-20 lg:pt-32 lg:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden bg-slate-900"> answer:
<div className="absolute inset-0 opacity-10"> 'Yes! We offer SVG downloads. SVG files are vector-based, meaning they can be scaled to any size without losing quality—perfect for professional product packaging.',
{/* Barcode Pattern */} },
<svg className="w-full h-full" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"> 'How do I generate a barcode online?': {
<defs> question: 'How do I generate a barcode online?',
<pattern id="barcode_pattern" width="60" height="60" patternUnits="userSpaceOnUse"> answer:
<path d="M5 0 V 60 M15 0 V 60 M20 0 V 60 M35 0 V 60 M40 0 V 60 M55 0 V 60" stroke="white" strokeWidth="2" strokeOpacity="0.5" /> 'To generate a barcode online, enter your product number or text, select the desired barcode format (such as EAN-13 or Code 128), and click the generate button. The barcode will be created instantly.',
</pattern> },
</defs> 'Are generated barcodes scannable?': {
<rect width="100%" height="100%" fill="url(#barcode_pattern)" /> question: 'Are generated barcodes scannable?',
</svg> answer:
</div> 'Yes, barcodes generated with a proper barcode generator are fully scannable. We generate standard-compliant barcodes readable by any standard optical or laser barcode scanner.',
},
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10"> 'Can I use these barcodes for Amazon (EAN/UPC)?': {
<div className="text-center lg:text-left"> question: 'Can I use these barcodes for Amazon (EAN/UPC)?',
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white/90 text-sm font-medium mb-6 backdrop-blur-sm border border-white/10 hover:bg-white/20 transition-colors cursor-default"> answer:
<span className="flex h-2 w-2 relative"> 'You can generate the image for Amazon here if you already have your EAN/UPC number. However, you cannot "create" a valid global EAN number here—you must purchase those official numbers from GS1 to sell on major platforms like Amazon.',
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span> },
<span className="relative inline-flex rounded-full h-2 w-2 bg-blue-400"></span> 'What is the difference between a barcode and a QR code?': {
</span> question: 'What is the difference between a barcode and a QR code?',
Free Tool — Professional & Fast answer:
</div> 'A barcode stores data horizontally (1D) and is mainly used for product IDs. A QR code stores data in 2D (matrix) and can hold much more information, such as URLs, vCards, or WiFi credentials.',
},
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6"> 'What barcode format do Amazon and Walmart require?': {
Free Online <span className="text-blue-400">Barcode Generator</span> question: 'What barcode format do Amazon and Walmart require?',
</h1> answer:
'Amazon and Walmart require UPC-A (12 digits) for products sold in the United States and Canada, and EAN-13 (13 digits) for products sold internationally. You must purchase official GS1-registered numbers to sell on these platforms — you cannot self-generate valid retail UPC/EAN numbers.',
<p className="text-lg md:text-xl text-slate-400 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed"> },
A <strong>barcode generator</strong> converts any number or text into a scannable barcode image — ready to download, print, and use on products, labels, or inventory systems. 'What is the minimum print size for a scannable barcode?': {
<span className="text-white block sm:inline mt-2 sm:mt-0"> Supports EAN-13, UPC-A, and Code 128. No signup required.</span> question: 'What is the minimum print size for a scannable barcode?',
</p> answer:
'The GS1 standard recommends a minimum width of 25.9mm (1 inch) for EAN-13 barcodes on retail packaging. Smaller sizes increase scan failure rates. For internal inventory labels, Code 128 can be printed as narrow as 15mm wide while remaining reliably scannable with modern handheld scanners.',
<div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm font-medium text-white/80"> },
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm"> 'Can I use Code 128 for inventory management?': {
<Check className="w-4 h-4 text-blue-400" /> question: 'Can I use Code 128 for inventory management?',
Retail Ready answer:
</div> 'Yes. Code 128 is the most widely used barcode format for inventory, logistics, and warehousing because it supports both letters and numbers, has high data density, and is readable by virtually all laser and 2D scanners. It is the recommended format for internal SKU systems, warehouse bin labels, and shipping labels.',
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm"> },
<Check className="w-4 h-4 text-blue-400" /> 'What is the difference between EAN-13 and UPC-A?': {
Vector SVG Export question: 'What is the difference between EAN-13 and UPC-A?',
</div> answer:
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm"> 'EAN-13 (13 digits) is the international retail standard used in Europe, Asia, and globally. UPC-A (12 digits) is the North American retail standard used in the US and Canada. An EAN-13 barcode starting with a 0 is actually a UPC-A code — all UPC-A codes are a subset of EAN-13. Most modern POS scanners read both formats.',
<Check className="w-4 h-4 text-blue-400" /> },
No Registration }),
</div> ],
</div> };
</div>
export default function BarcodeGeneratorPage() {
{/* Visual Abstract */} return (
<div className="hidden lg:flex relative items-center justify-center min-h-[400px]"> <>
<div className="absolute w-[500px] h-[500px] bg-blue-500/10 rounded-full blur-[100px] -top-20 -right-20 animate-pulse" /> <script
type="application/ld+json"
<div className="relative w-80 h-96 bg-white/5 backdrop-blur-xl border border-white/20 rounded-3xl shadow-2xl flex flex-col items-center justify-center p-8 transform rotate-2 hover:-rotate-1 transition-all duration-700 group"> dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
<div className="absolute inset-0 bg-gradient-to-br from-white/5 to-transparent rounded-3xl" /> />
<ToolBreadcrumb
<div className="w-full bg-gradient-to-br from-blue-400 to-indigo-600 rounded-xl shadow-lg p-5 mb-6 relative overflow-hidden text-white"> toolName="Barcode Generator"
<div className="flex justify-between items-start mb-4"> toolSlug="barcode-generator"
<BarcodeIcon className="w-8 h-8 opacity-80" /> />
<div className="bg-white/20 px-2 py-1 rounded text-xs font-bold uppercase tracking-wider">Label</div>
</div> <div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>
<div className="text-xl font-bold tracking-wider mb-1">PROD-98234</div> {/* HERO SECTION */}
<div className="text-xs opacity-70">Inventory ID</div> <section className="relative pt-20 pb-20 lg:pt-32 lg:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden bg-slate-900">
</div> <div className="absolute inset-0 opacity-10">
{/* Barcode Pattern */}
<div className="w-48 h-32 bg-white rounded-xl p-4 shadow-inner relative overflow-hidden flex flex-col items-center justify-center"> <svg
<div className="w-full h-16 bg-black flex gap-1 mb-2"> className="w-full h-full"
{[2, 4, 1, 3, 2, 1, 4, 2, 1, 3].map((w, i) => ( width="100%"
<div key={i} className="bg-black flex-1" style={{ flex: w }} /> height="100%"
))} xmlns="http://www.w3.org/2000/svg"
</div> >
<div className="text-[10px] font-mono font-bold tracking-widest uppercase">98234001A</div> <defs>
</div> <pattern
id="barcode_pattern"
{/* Floating Badge */} width="60"
<div className="absolute -bottom-6 -right-6 bg-slate-900 border border-white/10 py-3 px-5 rounded-xl shadow-xl flex items-center gap-3 transform transition-transform hover:scale-105 duration-300"> height="60"
<div className="bg-blue-500/20 p-2 rounded-full"> patternUnits="userSpaceOnUse"
<Printer className="w-5 h-5 text-blue-500" /> >
</div> <path
<div className="text-left"> d="M5 0 V 60 M15 0 V 60 M20 0 V 60 M35 0 V 60 M40 0 V 60 M55 0 V 60"
<div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Ready</div> stroke="white"
<div className="text-sm font-bold text-white">Print Instantly</div> strokeWidth="2"
</div> strokeOpacity="0.5"
</div> />
</div> </pattern>
</div> </defs>
</div> <rect width="100%" height="100%" fill="url(#barcode_pattern)" />
</section> </svg>
</div>
{/* GENERATOR SECTION */}
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8"> <div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
<BarcodeGeneratorClient /> <div className="text-center lg:text-left">
</section> <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white/90 text-sm font-medium mb-6 backdrop-blur-sm border border-white/10 hover:bg-white/20 transition-colors cursor-default">
<span className="flex h-2 w-2 relative">
{/* AI-EXTRACTABLE DEFINITION + STATS BLOCK */} <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
<section className="py-12 px-4 sm:px-6 lg:px-8 bg-white border-b border-slate-100"> <span className="relative inline-flex rounded-full h-2 w-2 bg-blue-400"></span>
<div className="max-w-4xl mx-auto"> </span>
<div className="bg-blue-50 border-l-4 border-blue-500 rounded-xl p-6 mb-8"> Free Tool — Professional & Fast
<h2 className="text-xl font-bold text-slate-900 mb-2">What is a Barcode Generator?</h2> </div>
<p className="text-slate-700 leading-relaxed">
A <strong>barcode generator</strong> is an online tool that converts a number or text string into a scannable barcode image (EAN-13, UPC-A, or Code 128). The generated barcode can be downloaded as PNG or SVG and printed on product labels, packaging, or inventory stickers for use with any standard barcode scanner. <h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
</p> Free Custom{' '}
</div> <span className="text-blue-400">Barcode Generator</span>
<div className="grid md:grid-cols-3 gap-6 mb-8"> <span className="block text-2xl md:text-3xl font-semibold text-slate-300 mt-2">
<div className="text-center p-5 rounded-xl bg-slate-50 border border-slate-200"> Barcode Maker for EAN, UPC & Code 128
<div className="text-3xl font-extrabold text-blue-600 mb-1">EAN-13</div> </span>
<div className="text-sm font-semibold text-slate-700 mb-1">Global Retail Standard</div> </h1>
<div className="text-xs text-slate-500">Used on over 5 billion product labels worldwide (GS1, 2024)</div>
</div> <p className="text-lg md:text-xl text-slate-400 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
<div className="text-center p-5 rounded-xl bg-slate-50 border border-slate-200"> A <strong>free custom barcode generator</strong> and{' '}
<div className="text-3xl font-extrabold text-blue-600 mb-1">UPC-A</div> <strong>barcode maker</strong> for EAN-13, UPC-A, UPC barcodes,
<div className="text-sm font-semibold text-slate-700 mb-1">North America Standard</div> and Code 128. Convert any number or text into a scannable
<div className="text-xs text-slate-500">Required by Amazon, Walmart, Target for product listings</div> barcode, download PNG or SVG, print instantly, no signup
</div> required.
<div className="text-center p-5 rounded-xl bg-slate-50 border border-slate-200"> </p>
<div className="text-3xl font-extrabold text-blue-600 mb-1">Code 128</div>
<div className="text-sm font-semibold text-slate-700 mb-1">Inventory &amp; Logistics</div> <div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm font-medium text-white/80">
<div className="text-xs text-slate-500">Supports letters + numbers — best for internal SKU systems</div> <div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
</div> <Check className="w-4 h-4 text-blue-400" />
</div> Retail Ready
<div className="bg-amber-50 border border-amber-200 rounded-xl p-5"> </div>
<h3 className="font-bold text-slate-900 mb-2">Barcode vs. QR Code — When to Use Which</h3> <div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<div className="grid md:grid-cols-2 gap-4 text-sm text-slate-700"> <Check className="w-4 h-4 text-blue-400" />
<div> Vector SVG Export
<p className="font-semibold text-slate-800 mb-1">✓ Use a barcode for:</p> </div>
<ul className="space-y-1 list-disc list-inside text-slate-600"> <div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
<li>Product SKUs and retail checkout</li> <Check className="w-4 h-4 text-blue-400" />
<li>Warehouse shelf and bin labels</li> No Registration
<li>Inventory counting and stock control</li> </div>
<li>Order fulfillment and packing verification</li> </div>
</ul> </div>
</div>
<div> {/* Visual Abstract */}
<p className="font-semibold text-slate-800 mb-1">✓ Use a QR code for:</p> <div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
<ul className="space-y-1 list-disc list-inside text-slate-600"> <div className="absolute w-[500px] h-[500px] bg-blue-500/10 rounded-full blur-[100px] -top-20 -right-20 animate-pulse" />
<li>Restaurant menus and digital content</li>
<li>Marketing campaigns and landing pages</li> <div className="relative w-80 h-96 bg-white/5 backdrop-blur-xl border border-white/20 rounded-3xl shadow-2xl flex flex-col items-center justify-center p-8 transform rotate-2 hover:-rotate-1 transition-all duration-700 group">
<li>Review collection and customer feedback</li> <div className="absolute inset-0 bg-gradient-to-br from-white/5 to-transparent rounded-3xl" />
<li>Product setup guides and support pages</li>
</ul> <div className="w-full bg-gradient-to-br from-blue-400 to-indigo-600 rounded-xl shadow-lg p-5 mb-6 relative overflow-hidden text-white">
</div> <div className="flex justify-between items-start mb-4">
</div> <BarcodeIcon className="w-8 h-8 opacity-80" />
</div> <div className="bg-white/20 px-2 py-1 rounded text-xs font-bold uppercase tracking-wider">
</div> Label
</section> </div>
</div>
{/* HOW IT WORKS */} <div className="text-xl font-bold tracking-wider mb-1">
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white"> PROD-98234
<div className="max-w-4xl mx-auto"> </div>
<h2 className="text-3xl font-bold text-slate-900 text-center mb-12"> <div className="text-xs opacity-70">Inventory ID</div>
How Our Barcode Generator Works </div>
</h2>
<div className="w-48 h-32 bg-white rounded-xl p-4 shadow-inner relative overflow-hidden flex flex-col items-center justify-center">
<div className="grid md:grid-cols-3 lg:grid-cols-5 gap-8"> <div className="w-full h-16 bg-black flex gap-1 mb-2">
<article className="text-center"> {[2, 4, 1, 3, 2, 1, 4, 2, 1, 3].map((w, i) => (
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4"> <div
<Sliders className="w-6 h-6 text-white" /> key={i}
</div> className="bg-black flex-1"
<h3 className="font-bold text-slate-900 mb-2">1. Configure</h3> style={{ flex: w }}
<p className="text-slate-600 text-xs leading-relaxed"> />
Enter your data and select the format. ))}
</p> </div>
</article> <div className="text-[10px] font-mono font-bold tracking-widest uppercase">
98234001A
<article className="text-center"> </div>
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4"> </div>
<Sparkles className="w-6 h-6 text-white" />
</div> {/* Floating Badge */}
<h3 className="font-bold text-slate-900 mb-2">2. Customize</h3> <div className="absolute -bottom-6 -right-6 bg-slate-900 border border-white/10 py-3 px-5 rounded-xl shadow-xl flex items-center gap-3 transform transition-transform hover:scale-105 duration-300">
<p className="text-slate-600 text-xs leading-relaxed"> <div className="bg-blue-500/20 p-2 rounded-full">
Adjust height, width and text display. <Printer className="w-5 h-5 text-blue-500" />
</p> </div>
</article> <div className="text-left">
<div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">
<article className="text-center"> Ready
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4"> </div>
<Zap className="w-6 h-6 text-white" /> <div className="text-sm font-bold text-white">
</div> Print Instantly
<h3 className="font-bold text-slate-900 mb-2">3. Preview</h3> </div>
<p className="text-slate-600 text-xs leading-relaxed"> </div>
See your barcode update in real-time. </div>
</p> </div>
</article> </div>
</div>
<article className="text-center"> </section>
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<Download className="w-6 h-6 text-white" /> {/* GENERATOR SECTION */}
</div> <section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
<h3 className="font-bold text-slate-900 mb-2">4. Download</h3> <BarcodeGeneratorClient />
<p className="text-slate-600 text-xs leading-relaxed"> </section>
Save as professional PNG or SVG.
</p> {/* AI-EXTRACTABLE DEFINITION + STATS BLOCK */}
</article> <section className="py-12 px-4 sm:px-6 lg:px-8 bg-white border-b border-slate-100">
<div className="max-w-4xl mx-auto">
<article className="text-center"> <div className="bg-blue-50 border-l-4 border-blue-500 rounded-xl p-6 mb-8">
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4"> <h2 className="text-xl font-bold text-slate-900 mb-2">
<Printer className="w-6 h-6 text-white" /> What is a Barcode Generator?
</div> </h2>
<h3 className="font-bold text-slate-900 mb-2">5. Print</h3> <p className="text-slate-700 leading-relaxed">
<p className="text-slate-600 text-xs leading-relaxed"> A <strong>custom barcode generator</strong> is an online tool
Print labels directly from your browser. that converts a number or text string into a scannable barcode
</p> image (EAN-13, UPC-A, or Code 128). The generated barcode can be
</article> downloaded as PNG or SVG and printed on product labels,
</div> packaging, or inventory stickers for use with any standard
</div> barcode scanner.
</section> </p>
</div>
{/* RELATED TOOLS */} <div className="grid md:grid-cols-3 gap-6 mb-8">
<RelatedTools /> <div className="text-center p-5 rounded-xl bg-slate-50 border border-slate-200">
<div className="text-3xl font-extrabold text-blue-600 mb-1">
{/* SEO GUIDE */} EAN-13
<BarcodeGuide /> </div>
<div className="text-sm font-semibold text-slate-700 mb-1">
</div> Global Retail Standard
</> </div>
); <div className="text-xs text-slate-500">
} Used on over 5 billion product labels worldwide (GS1, 2024)
</div>
</div>
<div className="text-center p-5 rounded-xl bg-slate-50 border border-slate-200">
<div className="text-3xl font-extrabold text-blue-600 mb-1">
UPC-A
</div>
<div className="text-sm font-semibold text-slate-700 mb-1">
North America Standard
</div>
<div className="text-xs text-slate-500">
Required by Amazon, Walmart, Target for product listings
</div>
</div>
<div className="text-center p-5 rounded-xl bg-slate-50 border border-slate-200">
<div className="text-3xl font-extrabold text-blue-600 mb-1">
Code 128
</div>
<div className="text-sm font-semibold text-slate-700 mb-1">
Inventory &amp; Logistics
</div>
<div className="text-xs text-slate-500">
Supports letters + numbers — best for internal SKU systems
</div>
</div>
</div>
<div className="bg-amber-50 border border-amber-200 rounded-xl p-5">
<h3 className="font-bold text-slate-900 mb-2">
Barcode vs. QR Code — When to Use Which
</h3>
<div className="grid md:grid-cols-2 gap-4 text-sm text-slate-700">
<div>
<p className="font-semibold text-slate-800 mb-1">
✓ Use a barcode for:
</p>
<ul className="space-y-1 list-disc list-inside text-slate-600">
<li>Product SKUs and retail checkout</li>
<li>Warehouse shelf and bin labels</li>
<li>Inventory counting and stock control</li>
<li>Order fulfillment and packing verification</li>
</ul>
</div>
<div>
<p className="font-semibold text-slate-800 mb-1">
✓ Use a QR code for:
</p>
<ul className="space-y-1 list-disc list-inside text-slate-600">
<li>Restaurant menus and digital content</li>
<li>Marketing campaigns and landing pages</li>
<li>Review collection and customer feedback</li>
<li>Product setup guides and support pages</li>
</ul>
</div>
</div>
</div>
</div>
</section>
{/* HOW IT WORKS */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-12">
How Our Barcode Generator Works
</h2>
<div className="grid md:grid-cols-3 lg:grid-cols-5 gap-8">
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<Sliders className="w-6 h-6 text-white" />
</div>
<h3 className="font-bold text-slate-900 mb-2">1. Configure</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Enter your data and select the format.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<Sparkles className="w-6 h-6 text-white" />
</div>
<h3 className="font-bold text-slate-900 mb-2">2. Customize</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Adjust height, width and text display.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<Zap className="w-6 h-6 text-white" />
</div>
<h3 className="font-bold text-slate-900 mb-2">3. Preview</h3>
<p className="text-slate-600 text-xs leading-relaxed">
See your barcode update in real-time.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<Download className="w-6 h-6 text-white" />
</div>
<h3 className="font-bold text-slate-900 mb-2">4. Download</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Save as professional PNG or SVG.
</p>
</article>
<article className="text-center">
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
<Printer className="w-6 h-6 text-white" />
</div>
<h3 className="font-bold text-slate-900 mb-2">5. Print</h3>
<p className="text-slate-600 text-xs leading-relaxed">
Print labels directly from your browser.
</p>
</article>
</div>
</div>
</section>
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-slate-50 border-y border-slate-200">
<div className="max-w-5xl mx-auto">
<div className="max-w-3xl mb-10">
<p className="text-sm font-semibold text-blue-600 uppercase tracking-wider mb-3">
Custom barcode generator
</p>
<h2 className="text-3xl font-bold text-slate-900 mb-4">
Create custom barcodes for labels, inventory, and product
workflows
</h2>
<p className="text-lg text-slate-600 leading-relaxed">
Use the barcode maker when you already have a product number,
SKU, inventory ID, or internal reference and need a printable
barcode image. Choose the format, adjust the dimensions, show or
hide the text value, then export a clean PNG or SVG for labels.
</p>
</div>
<div className="grid md:grid-cols-3 gap-6">
<article className="rounded-xl border border-slate-200 bg-white p-6">
<h3 className="font-bold text-slate-900 mb-2">Retail labels</h3>
<p className="text-slate-600 text-sm leading-relaxed">
Generate EAN-13 or UPC-A barcode images for packaging and
shelf labels when you already have valid GS1-issued numbers.
</p>
</article>
<article className="rounded-xl border border-slate-200 bg-white p-6">
<h3 className="font-bold text-slate-900 mb-2">
Inventory codes
</h3>
<p className="text-slate-600 text-sm leading-relaxed">
Use Code 128 for alphanumeric SKUs, warehouse bins, assets,
and internal tracking labels that need scanner-friendly codes.
</p>
</article>
<article className="rounded-xl border border-slate-200 bg-white p-6">
<h3 className="font-bold text-slate-900 mb-2">
Printable exports
</h3>
<p className="text-slate-600 text-sm leading-relaxed">
Download SVG for crisp print layouts or PNG for fast use in
docs, product sheets, and simple label workflows.
</p>
</article>
</div>
<p className="mt-8 text-sm text-slate-600">
Need a code for a web page instead of a retail scanner? Use the{' '}
<a
href="/dynamic-qr-code-generator"
className="font-semibold text-blue-700 underline"
>
dynamic QR code generator
</a>{' '}
if the destination may change later, or the{' '}
<a
href="/qr-code-tracking"
className="font-semibold text-blue-700 underline"
>
QR code tracking
</a>{' '}
workflow when you need scan analytics.
</p>
</div>
</section>
{/* RELATED TOOLS */}
<RelatedTools />
{/* SEO GUIDE */}
<BarcodeGuide />
</div>
</>
);
}

126
src/app/(main)/tools/page.tsx
View File

@@ -1,53 +1,73 @@
import React from 'react'; import React from 'react';
import type { Metadata } from 'next'; import type { Metadata } from 'next';
import { FreeToolsGrid } from '@/components/marketing/FreeToolsGrid'; import { FreeToolsGrid } from '@/components/marketing/FreeToolsGrid';
export const metadata: Metadata = { export const metadata: Metadata = {
title: 'Free QR Code Tools | URL, vCard, WiFi & More | QR Master', title: 'Free QR Code Tools | URL, vCard, WiFi & More | QR Master',
description: 'Access our complete collection of free QR code generators. Create codes for URLs, WiFi, plain text, vCards, and more. No signup required for static codes.', description:
alternates: { 'Access free QR code tools for URLs, WiFi, vCards, barcodes, and more. Use QR Master for static codes, dynamic QR codes, and QR code tracking.',
canonical: 'https://www.qrmaster.net/tools', alternates: {
}, canonical: 'https://www.qrmaster.net/tools',
openGraph: { },
title: 'Free QR Code Tools Collection', openGraph: {
description: 'All your QR code needs in one place. Free forever static codes.', title: 'Free QR Code Tools Collection',
url: 'https://www.qrmaster.net/tools', description:
siteName: 'QR Master', 'All your QR code needs in one place. Free forever static codes.',
type: 'website', url: 'https://www.qrmaster.net/tools',
}, siteName: 'QR Master',
}; type: 'website',
},
export default function ToolsHubPage() { };
return (
<div className="min-h-screen bg-slate-50 pt-20"> export default function ToolsHubPage() {
<section className="bg-white py-20 px-4 border-b border-slate-200"> return (
<div className="container mx-auto text-center max-w-4xl"> <div className="min-h-screen bg-slate-50 pt-20">
<span className="inline-block px-4 py-1.5 rounded-full bg-indigo-50 text-indigo-700 font-semibold text-sm mb-6"> <section className="bg-white py-20 px-4 border-b border-slate-200">
100% Free Forever <div className="container mx-auto text-center max-w-4xl">
</span> <span className="inline-block px-4 py-1.5 rounded-full bg-indigo-50 text-indigo-700 font-semibold text-sm mb-6">
<h1 className="text-4xl md:text-6xl font-extrabold text-slate-900 mb-6 tracking-tight"> 100% Free Forever
Free QR Code Tools </span>
</h1> <h1 className="text-4xl md:text-6xl font-extrabold text-slate-900 mb-6 tracking-tight">
<p className="text-xl text-slate-600 mb-8 leading-relaxed max-w-2xl mx-auto"> Free QR Code Tools
Generate static QR codes for any purpose. No credit card, no expiration, no hidden fees. </h1>
</p> <p className="text-xl text-slate-600 mb-8 leading-relaxed max-w-2xl mx-auto">
</div> Generate static QR codes for any purpose. No credit card, no
</section> expiration, no hidden fees.
</p>
<div className="py-12"> </div>
<FreeToolsGrid /> </section>
</div>
<div className="py-12">
<section className="py-20 px-4"> <FreeToolsGrid />
<div className="container mx-auto max-w-3xl text-center"> </div>
<h2 className="text-2xl font-bold text-slate-900 mb-4">Why are these tools free?</h2>
<p className="text-slate-600 mb-8"> <section className="py-20 px-4">
We believe basic QR codes should be accessible to everyone. Our static QR codes encode your data directly into the image, <div className="container mx-auto max-w-3xl text-center">
meaning we don't need to host tracking servers for them. That's why they are free forever. <h2 className="text-2xl font-bold text-slate-900 mb-4">
If you need tracking and editability, check out our Dynamic QR Codes. Why are these tools free?
</p> </h2>
</div> <p className="text-slate-600 mb-8">
</section> We believe basic QR codes should be accessible to everyone. Our
</div> static QR codes encode your data directly into the image, meaning we
); don't need to host tracking servers for them. That's why they are
} free forever. If you need tracking and editability, use our{' '}
<a
href="/dynamic-qr-code-generator"
className="font-semibold text-indigo-700 underline"
>
dynamic QR code generator
</a>{' '}
or learn how{' '}
<a
href="/qr-code-tracking"
className="font-semibold text-indigo-700 underline"
>
QR code tracking
</a>{' '}
works.
</p>
</div>
</section>
</div>
);
}

22
src/app/sitemap.ts
View File

@@ -34,14 +34,20 @@ export default function sitemap(): MetadataRoute.Sitemap {
// All blog posts // All blog posts
// Filter out future posts so Google doesn't see them // Filter out future posts so Google doesn't see them
const blogPages = blogPosts const blogPages = blogPosts
.filter(post => { .filter((post) => {
const publishDate = post.datePublished ? new Date(post.datePublished) : new Date(post.date); const publishDate = post.datePublished
? new Date(post.datePublished)
: new Date(post.date);
return publishDate <= new Date(); return publishDate <= new Date();
}) })
.map((post) => ({ .map((post) => ({
url: `${baseUrl}/blog/${post.slug}`, url: `${baseUrl}/blog/${post.slug}`,
// Use updatedAt if available, otherwise dateModified or datePublished // Use updatedAt if available, otherwise dateModified or datePublished
lastModified: post.updatedAt ? new Date(post.updatedAt) : (post.dateModified ? new Date(post.dateModified) : new Date()), lastModified: post.updatedAt
? new Date(post.updatedAt)
: post.dateModified
? new Date(post.dateModified)
: new Date(),
changeFrequency: 'monthly' as const, changeFrequency: 'monthly' as const,
priority: 0.8, priority: 0.8,
})); }));
@@ -51,7 +57,7 @@ export default function sitemap(): MetadataRoute.Sitemap {
}; };
const toolLastModified: Record<string, Date> = { const toolLastModified: Record<string, Date> = {
'barcode-generator': new Date('2026-04-27'), 'barcode-generator': new Date('2026-05-10'),
'vcard-qr-code': new Date('2026-04-27'), 'vcard-qr-code': new Date('2026-04-27'),
'instagram-qr-code': new Date('2026-04-27'), 'instagram-qr-code': new Date('2026-04-27'),
'wifi-qr-code': new Date('2026-04-27'), 'wifi-qr-code': new Date('2026-04-27'),
@@ -60,7 +66,8 @@ export default function sitemap(): MetadataRoute.Sitemap {
const toolPages = freeTools.map((slug) => ({ const toolPages = freeTools.map((slug) => ({
url: `${baseUrl}/tools/${slug}`, url: `${baseUrl}/tools/${slug}`,
lastModified: toolLastModified[slug] ?? new Date('2026-01-01'), lastModified: toolLastModified[slug] ?? new Date('2026-01-01'),
changeFrequency: slug === 'barcode-generator' ? 'weekly' as const : 'monthly' as const, changeFrequency:
slug === 'barcode-generator' ? ('weekly' as const) : ('monthly' as const),
priority: highPriorityTools[slug] ?? 0.8, priority: highPriorityTools[slug] ?? 0.8,
})); }));
@@ -197,7 +204,7 @@ export default function sitemap(): MetadataRoute.Sitemap {
}, },
{ {
url: `${baseUrl}/qr-code-tracking`, url: `${baseUrl}/qr-code-tracking`,
lastModified: new Date(), lastModified: new Date('2026-05-10'),
changeFrequency: 'monthly', changeFrequency: 'monthly',
priority: 0.9, priority: 0.9,
}, },
@@ -215,7 +222,7 @@ export default function sitemap(): MetadataRoute.Sitemap {
}, },
{ {
url: `${baseUrl}/dynamic-qr-code-generator`, url: `${baseUrl}/dynamic-qr-code-generator`,
lastModified: new Date('2026-04-27'), lastModified: new Date('2026-05-10'),
changeFrequency: 'weekly', changeFrequency: 'weekly',
priority: 0.95, priority: 0.95,
}, },
@@ -300,7 +307,6 @@ export default function sitemap(): MetadataRoute.Sitemap {
priority: 0.7, priority: 0.7,
}, },
...toolPages, ...toolPages,
...blogPages, ...blogPages,
...learnPages, ...learnPages,

1
src/components/marketing/FreeToolsGrid.tsx
View File

@@ -44,6 +44,7 @@ const TOOLS = [
{ icon: Music, name: 'TikTok', description: 'Open TikTok profile', href: '/tools/tiktok-qr-code', color: 'text-slate-900', bg: 'bg-slate-100' }, { icon: Music, name: 'TikTok', description: 'Open TikTok profile', href: '/tools/tiktok-qr-code', color: 'text-slate-900', bg: 'bg-slate-100' },
{ icon: MapPin, name: 'Location', description: 'Share GPS coordinates', href: '/tools/location-qr-code', color: 'text-emerald-500', bg: 'bg-emerald-50' }, { icon: MapPin, name: 'Location', description: 'Share GPS coordinates', href: '/tools/location-qr-code', color: 'text-emerald-500', bg: 'bg-emerald-50' },
{ icon: Phone, name: 'Call', description: 'Start a phone call', href: '/tools/phone-qr-code', color: 'text-teal-500', bg: 'bg-teal-50' }, { icon: Phone, name: 'Call', description: 'Start a phone call', href: '/tools/phone-qr-code', color: 'text-teal-500', bg: 'bg-teal-50' },
{ icon: Barcode, name: 'Barcode', description: 'Free online barcode generator', href: '/tools/barcode-generator', color: 'text-amber-600', bg: 'bg-amber-50' },
]; ];
const containerVariants: Variants = { const containerVariants: Variants = {

100
src/lib/blog-data.ts
View File

@@ -502,9 +502,9 @@ export const blogPosts: BlogPost[] = [
{ {
slug: "vcard-qr-code-generator", slug: "vcard-qr-code-generator",
title: "Free vCard QR Generator: Digital Cards", title: "vCard QR Code: What It Is, How It Works & Best Practices",
description: "Create professional vCard QR codes for digital business cards. Share contact info instantly with a scan—includes templates and best practices.", description: "Everything you need to know about vCard QR codes: how they work, static vs dynamic, what to include, and how to create one free in seconds.",
excerpt: "Create professional vCard QR codes for digital business cards. Share contact info instantly with a scan—includes templates and best practices.", excerpt: "Everything you need to know about vCard QR codes: how they work, static vs dynamic, what to include, and how to create one free in seconds.",
category: "Business Cards", category: "Business Cards",
pillar: "use-cases", pillar: "use-cases",
published: true, published: true,
@@ -541,12 +541,74 @@ export const blogPosts: BlogPost[] = [
<div class="post-metadata bg-blue-50 p-4 rounded-lg mb-8 border-l-4 border-blue-500"> <div class="post-metadata bg-blue-50 p-4 rounded-lg mb-8 border-l-4 border-blue-500">
<p class="text-sm text-gray-700"> <p class="text-sm text-gray-700">
<strong>Author:</strong> Timo Knuth, QR Code & Marketing Expert<br/> <strong>Author:</strong> Timo Knuth, QR Code & Marketing Expert<br/>
📅 <strong>Published:</strong> January 5, 2026 | <strong>Last updated:</strong> January 26, 2026 📅 <strong>Published:</strong> January 5, 2026 | <strong>Last updated:</strong> May 4, 2026
</p> </p>
</div> </div>
<div class="bg-blue-50 border border-blue-200 rounded-xl p-6 mb-8">
<p class="text-blue-900 font-semibold mb-2">Ready to create one?</p>
<p class="text-blue-800 mb-3">Use the free vCard QR Code Generator — no signup required, works on iPhone and Android.</p>
<a href="/tools/vcard-qr-code" class="inline-block bg-blue-600 text-white font-semibold px-5 py-2.5 rounded-lg hover:bg-blue-700 transition-colors">Create your vCard QR Code →</a>
</div>
<h2>What is a vCard QR Code?</h2> <h2>What is a vCard QR Code?</h2>
<p>A vCard (Virtual Contact File) QR code contains your contact information in a standardized format (.vcf). When someone scans it with their smartphone camera, they can instantly save your details to their contacts—no typing required.</p> <p>A vCard (Virtual Contact File) QR code contains your contact information in a standardized format (.vcf). When someone scans it with their smartphone camera, they can instantly save your details to their contacts — no typing required. It replaces the friction of spelling out a phone number or email at a networking event with a single tap.</p>
<p>The QR code encodes a VCF data string directly. That string includes fields like name, phone, email, company, job title, website, and LinkedIn. When the phone's camera reads the code, it parses the VCF and offers to add the contact in one tap.</p>
<h2>Static vs Dynamic vCard QR Codes</h2>
<p>This is the most important choice you'll make.</p>
<ul>
<li><strong>Static vCard QR codes</strong> embed your contact info directly into the code. They work without any internet connection — the data is in the code itself. The downside: if your phone number or email changes, the code is outdated and needs to be reprinted.</li>
<li><strong>Dynamic vCard QR codes</strong> point to a redirect URL that serves the VCF. You can update your contact info at any time from a dashboard — the printed QR code stays the same. Dynamic codes also give you scan analytics: how many times it was scanned, on which devices, from which locations.</li>
</ul>
<p><strong>Recommendation:</strong> Use dynamic if you might change jobs, switch numbers, or want to track engagement. Use static if you just need a simple one-time contact share.</p>
<p>The <a href="/tools/vcard-qr-code" class="text-blue-600 underline">QR Master vCard generator</a> supports both — static for simplicity, dynamic for flexibility and tracking.</p>
<h2>What to Include in a vCard QR Code</h2>
<p>Less is more. Include the fields people actually need to follow up with you:</p>
<ul>
<li><strong>Full name</strong> — exactly as you want it to appear in contacts</li>
<li><strong>Phone number</strong> — in international format (+49...) for cross-border scanning</li>
<li><strong>Email address</strong> — your primary professional email</li>
<li><strong>Company and job title</strong> — helps recipients remember context</li>
<li><strong>Website or LinkedIn</strong> — one link, whichever drives the most value for you</li>
</ul>
<p>Avoid adding multiple phone numbers or social handles unless you have a specific reason — cluttered vCards confuse the contact save prompt on some phones.</p>
<h2>How to Create a vCard QR Code (Free)</h2>
<ol>
<li>Go to the <a href="/tools/vcard-qr-code" class="text-blue-600 underline">free vCard QR Code Generator</a>.</li>
<li>Enter your contact details: name, phone, email, company, title, and optionally a website or LinkedIn URL.</li>
<li>Choose static (simple) or dynamic (editable + trackable).</li>
<li>Customize the design: add your logo or headshot, pick brand colors, and make sure there's strong contrast.</li>
<li>Download in SVG for print (scales to any size without pixelation) or PNG for digital use.</li>
<li>Test on both iPhone and Android before printing in bulk.</li>
</ol>
<h2>Where to Use a vCard QR Code</h2>
<ul>
<li><strong>Business cards:</strong> Print the QR on the back. Replaces typing out contact info at events.</li>
<li><strong>Email signature:</strong> Embed the QR code image so recipients on mobile can tap to save your contact.</li>
<li><strong>Conference badges and lanyards:</strong> Makes networking frictionless — one scan at a booth saves full contact details.</li>
<li><strong>Trade show materials:</strong> Brochures, flyers, and rollup banners with a QR code so visitors can save your info without collecting paper.</li>
<li><strong>LinkedIn profile:</strong> Share as an image for connections who want to save your contact directly.</li>
</ul>
<h2>Frequently Asked Questions</h2>
<h3>Does a vCard QR code work on iPhone?</h3>
<p>Yes. The native iOS camera app reads QR codes and prompts to add the contact directly via the VCF format. No app needed.</p>
<h3>Does it work on Android?</h3>
<p>Yes. The Google Lens camera and most Android manufacturer camera apps support VCF QR codes natively. The contact save prompt appears automatically after scanning.</p>
<h3>Can I include my photo in a vCard QR code?</h3>
<p>The VCF format supports embedding a photo, but the encoded QR code becomes very large (and harder to scan) with a full photo. It's better to skip the photo in the vCard itself and put your headshot next to the QR code on the business card instead.</p>
<h3>What's the best file format to download?</h3>
<p>SVG for print — it scales to any size with no pixelation. PNG at 300 DPI for digital sharing.</p>
<div class="bg-gray-50 border border-gray-200 rounded-xl p-6 mt-8">
<h3 class="font-bold text-gray-900 mt-0 mb-2">Create your vCard QR Code</h3>
<p class="text-gray-700 mb-4">Free, no signup required. Download in SVG or PNG. Works on iPhone and Android.</p>
<a href="/tools/vcard-qr-code" class="inline-block bg-blue-600 text-white font-semibold px-5 py-2.5 rounded-lg hover:bg-blue-700 transition-colors">Open the free vCard generator →</a>
</div>
</div>`, </div>`,
}, },
@@ -2736,17 +2798,17 @@ Authorization: Bearer YOUR_API_KEY</code></pre>
{ {
slug: "best-qr-code-generator-2026", slug: "best-qr-code-generator-2026",
title: "Best QR Code Generator 2026: Top Tools + Checklist", title: "Best QR Code Generator 2026: Compared + Free Checklist",
description: "Best QR code generator 2026: compare dynamic tracking, design, reliability, API, and pricing. Use this checklist to pick the right tool for your needs.", description: "We compared the top QR code generators in 2026 on dynamic QR, tracking, design, and price. Free checklist to pick the right tool for your exact use case.",
excerpt: "We tested the top tools so you don't have to. See who leads the pack in 2026 for reliability, analytics depth, and design options.", excerpt: "We compared the top QR code generators in 2026 on dynamic QR, tracking, design, and price. See who wins and get a free checklist to pick the right one.",
category: "Reviews", category: "Reviews",
pillar: "basics", pillar: "basics",
published: true, published: true,
publishDate: "2026-03-09", publishDate: "2026-03-09",
date: "March 9, 2026", date: "March 9, 2026",
datePublished: "2026-03-09T09:00:00Z", datePublished: "2026-03-09T09:00:00Z",
dateModified: "2026-01-26T00:00:00Z", dateModified: "2026-05-04T00:00:00Z",
updatedAt: "2026-01-26", updatedAt: "2026-05-04",
authorSlug: "timo", authorSlug: "timo",
readTime: "15 Min", readTime: "15 Min",
image: "/blog/best-qr-generator-2026.png", image: "/blog/best-qr-generator-2026.png",
@@ -2781,15 +2843,19 @@ Authorization: Bearer YOUR_API_KEY</code></pre>
<div class="post-metadata bg-blue-50 p-4 rounded-lg mb-8 border-l-4 border-blue-500"> <div class="post-metadata bg-blue-50 p-4 rounded-lg mb-8 border-l-4 border-blue-500">
<p class="text-sm text-gray-700"> <p class="text-sm text-gray-700">
<strong>Author:</strong> Timo Knuth, QR Code & Marketing Expert<br/> <strong>Author:</strong> Timo Knuth, QR Code & Marketing Expert<br/>
📅 <strong>Published:</strong> March 9, 2026 | <strong>Last updated:</strong> January 26, 2026 📅 <strong>Published:</strong> March 9, 2026 | <strong>Last updated:</strong> May 4, 2026
</p> </p>
</div> </div>
<div class="bg-green-50 border border-green-200 rounded-xl p-5 mb-8">
<p class="font-semibold text-green-900 mt-0 mb-1">Bottom line up front</p>
<p class="text-green-800 mb-0"><strong>QR Master</strong> is the best free option for businesses in 2026 — free dynamic QR codes, real scan analytics, SVG export, and no scan limits. No credit card required. <a href="/create" class="text-green-700 underline font-semibold">Try it free →</a></p>
</div>
<h2>Best QR Code Generator 2026: How to Choose the Right Tool</h2> <h2>Best QR Code Generator 2026: How to Choose the Right Tool</h2>
<p>The best QR code generator 2026 depends on one thing: what you need the QR code to do after it's printed. For casual use, almost any generator works. For marketing and business, the best tools share a set of capabilities: dynamic QR codes, tracking, reliable redirects, branding, and management features.</p> <p>The best QR code generator in 2026 depends on one thing: what you need the QR code to do after it's printed. For casual use, almost any generator works. For marketing and business, the best tools share a core set of capabilities: dynamic QR codes, tracking, reliable redirects, branding, and management features.</p>
<p>This guide gives you a "choose the right tool" checklist and a practical breakdown of common options — without forcing you into one single pick.</p> <p>This guide gives you a side-by-side comparison of the top tools and a practical checklist — so you can pick the right one for your exact use case without having to sign up for five free trials first.</p>
<p>Zapier's QR guide, for example, points out that different generators shine in different areas (business features, design customization, tracking).</p>
<p>According to <a href="https://www.statista.com/topics/1476/qr-codes/">Statista</a>, approx. <strong>45% of shoppers</strong> scanned a QR code in the past month, while QR code generation jumped <strong>238%</strong> from 2021-2023 (Uniqode). With this explosive growth, choosing the right generator is more important than ever.</p> <p>According to <a href="https://www.statista.com/topics/1476/qr-codes/">Statista</a>, approx. <strong>45% of shoppers</strong> scanned a QR code in the past month, while QR code generation jumped <strong>238%</strong> from 2021-2023 (Uniqode). With this explosive growth, choosing the right generator is more important than ever.</p>

240
src/lib/industry-pages.ts
View File

@@ -37,7 +37,7 @@ export const allIndustries: IndustryPage[] = [
name: "Restaurants", name: "Restaurants",
title: "QR Codes for Restaurants", title: "QR Codes for Restaurants",
metaTitle: "QR Codes for Restaurants: Update Your Menu Without Reprinting", metaTitle: "QR Codes for Restaurants: Update Your Menu Without Reprinting",
metaDescription: "Simplify restaurant operations with QR codes for digital menus, contactless ordering, payments, customer feedback, and loyalty offers.", metaDescription: "Simplify restaurant operations with QR codes for digital menus, contactless ordering, payments, customer feedback, and loyalty offers.",
headline: "QR Codes for Restaurants: Update Your Menu Without Reprinting", headline: "QR Codes for Restaurants: Update Your Menu Without Reprinting",
subheadline: "Reduce printing costs by up to $5,000 per year while enabling contactless ordering and real-time menu updates", subheadline: "Reduce printing costs by up to $5,000 per year while enabling contactless ordering and real-time menu updates",
heroImage: "/marketing/industries/restaurants.png", heroImage: "/marketing/industries/restaurants.png",
@@ -75,8 +75,8 @@ export const allIndustries: IndustryPage[] = [
slug: "cafes", slug: "cafes",
name: "Cafes", name: "Cafes",
title: "QR Codes for Cafes", title: "QR Codes for Cafes",
metaTitle: "QR Codes for Cafes: Menus & Loyalty", metaTitle: "QR Codes for Cafes: Menus & Loyalty",
metaDescription: "Enhance the cafe experience with QR codes for digital menus, loyalty programs, takeaway orders, feedback collection, and social engagement.", metaDescription: "Enhance the cafe experience with QR codes for digital menus, loyalty programs, takeaway orders, feedback collection, and social engagement.",
headline: "QR Codes for Cafes: Streamline Orders and Build Customer Loyalty", headline: "QR Codes for Cafes: Streamline Orders and Build Customer Loyalty",
subheadline: "Create seamless ordering experiences while collecting feedback and promoting your social channels - all from one scannable code", subheadline: "Create seamless ordering experiences while collecting feedback and promoting your social channels - all from one scannable code",
heroImage: "/marketing/industries/cafes.png", heroImage: "/marketing/industries/cafes.png",
@@ -99,7 +99,7 @@ export const allIndustries: IndustryPage[] = [
], ],
tools: ["url-qr-code", "wifi-qr-code", "sms-qr-code"], tools: ["url-qr-code", "wifi-qr-code", "sms-qr-code"],
faq: [ faq: [
{ question: "Are QR codes cost-effective for small cafes?", answer: "Yes! They eliminate menu reprinting costs, reduce paper waste, and many generators offer free basic plans." }, { question: "Are QR codes cost-effective for small cafes?", answer: "Yes! They eliminate menu reprinting costs, reduce paper waste, and many generators offer free basic plans. For a step-by-step menu setup, see the <a href=\"/blog/qr-code-restaurant-menu\" class=\"text-blue-600 underline\">Restaurant Menu QR Code Guide →</a>" },
{ question: "Can I use one QR code for multiple purposes?", answer: "Yes, with dynamic QR codes you can easily update the destination URL to serve different purposes over time." }, { question: "Can I use one QR code for multiple purposes?", answer: "Yes, with dynamic QR codes you can easily update the destination URL to serve different purposes over time." },
{ question: "How do cafes engage customers with QR?", answer: "Cafes link QR codes to loyalty sign-ups, Instagram profiles, and feedback forms to build lasting relationships." } { question: "How do cafes engage customers with QR?", answer: "Cafes link QR codes to loyalty sign-ups, Instagram profiles, and feedback forms to build lasting relationships." }
], ],
@@ -114,8 +114,8 @@ export const allIndustries: IndustryPage[] = [
slug: "hotels", slug: "hotels",
name: "Hotels", name: "Hotels",
title: "QR Codes for Hotels", title: "QR Codes for Hotels",
metaTitle: "QR Codes for Hotels: Check-In & Guest Info", metaTitle: "QR Codes for Hotels: Check-In & Guest Info",
metaDescription: "Modernize hotel operations with QR codes for contactless check-in, digital room guides, amenity bookings, WiFi access, and guest feedback.", metaDescription: "Modernize hotel operations with QR codes for contactless check-in, digital room guides, amenity bookings, WiFi access, and guest feedback.",
headline: "QR Codes for Hotels: Contactless Check-In and Guest Services", headline: "QR Codes for Hotels: Contactless Check-In and Guest Services",
subheadline: "Streamline guest experiences from arrival to departure while reducing print costs and enabling instant information updates", subheadline: "Streamline guest experiences from arrival to departure while reducing print costs and enabling instant information updates",
heroImage: "/marketing/industries/hotels.png", heroImage: "/marketing/industries/hotels.png",
@@ -154,7 +154,7 @@ export const allIndustries: IndustryPage[] = [
name: "Real Estate", name: "Real Estate",
title: "QR Codes for Real Estate", title: "QR Codes for Real Estate",
metaTitle: "QR Codes for Real Estate: Yard Signs to Virtual Tours", metaTitle: "QR Codes for Real Estate: Yard Signs to Virtual Tours",
metaDescription: "Transform property marketing with QR codes on yard signs and flyers that link to listings, virtual tours, disclosures, and agent contacts.", metaDescription: "Transform property marketing with QR codes on yard signs and flyers that link to listings, virtual tours, disclosures, and agent contacts.",
headline: "QR Codes for Real Estate: Yard Signs to Virtual Tours Instantly", headline: "QR Codes for Real Estate: Yard Signs to Virtual Tours Instantly",
subheadline: "Connect buyers to property listings, virtual tours, and agent info instantly - then update the destination when the property sells", subheadline: "Connect buyers to property listings, virtual tours, and agent info instantly - then update the destination when the property sells",
heroImage: "/marketing/industries/real-estate.png", heroImage: "/marketing/industries/real-estate.png",
@@ -193,7 +193,7 @@ export const allIndustries: IndustryPage[] = [
name: "Gyms", name: "Gyms",
title: "QR Codes for Gyms", title: "QR Codes for Gyms",
metaTitle: "QR Codes for Gyms: Class Schedules and Tutorials", metaTitle: "QR Codes for Gyms: Class Schedules and Tutorials",
metaDescription: "Enhance member experience with QR codes for check-in, class booking, equipment tutorials, app downloads, and loyalty programs.", metaDescription: "Enhance member experience with QR codes for check-in, class booking, equipment tutorials, app downloads, and loyalty programs.",
headline: "QR Codes for Gyms: Class Schedules and Equipment Guides", headline: "QR Codes for Gyms: Class Schedules and Equipment Guides",
subheadline: "Enable contactless check-in, instant class bookings, and video equipment tutorials to improve member confidence and retention", subheadline: "Enable contactless check-in, instant class bookings, and video equipment tutorials to improve member confidence and retention",
heroImage: "/marketing/industries/gyms.png", heroImage: "/marketing/industries/gyms.png",
@@ -232,7 +232,7 @@ export const allIndustries: IndustryPage[] = [
name: "Doctors & Dentists", name: "Doctors & Dentists",
title: "Doctors & Dentists", title: "Doctors & Dentists",
metaTitle: "QR Codes for Healthcare: HIPAA-Compliant Forms", metaTitle: "QR Codes for Healthcare: HIPAA-Compliant Forms",
metaDescription: "Streamline healthcare visits with QR codes for digital intake forms, appointment booking, waiting room WiFi, and aftercare instructions.", metaDescription: "Streamline healthcare visits with QR codes for digital intake forms, appointment booking, waiting room WiFi, and aftercare instructions.",
headline: "QR Codes for Doctors & Dentists: HIPAA-Compliant Check-In", headline: "QR Codes for Doctors & Dentists: HIPAA-Compliant Check-In",
subheadline: "Reduce paperwork and wait times with digital intake forms, appointment scheduling, and aftercare instructions accessible by scan", subheadline: "Reduce paperwork and wait times with digital intake forms, appointment scheduling, and aftercare instructions accessible by scan",
heroImage: "/marketing/industries/doctors-dentists.png", heroImage: "/marketing/industries/doctors-dentists.png",
@@ -270,7 +270,7 @@ export const allIndustries: IndustryPage[] = [
slug: "retail", slug: "retail",
name: "Retail", name: "Retail",
title: "QR Codes for Retail", title: "QR Codes for Retail",
metaTitle: "QR Codes for Retail: Product Info & Payments", metaTitle: "QR Codes for Retail: Product Info & Payments",
metaDescription: "Boost retail engagement with product details, contactless payments, loyalty programs, and highly interactive window shopping.", metaDescription: "Boost retail engagement with product details, contactless payments, loyalty programs, and highly interactive window shopping.",
headline: "QR Codes for Retail: Product Info & Loyalty Programs", headline: "QR Codes for Retail: Product Info & Loyalty Programs",
subheadline: "Bridge your physical store and digital presence with instant product details, contactless checkout, and shoppable window displays", subheadline: "Bridge your physical store and digital presence with instant product details, contactless checkout, and shoppable window displays",
@@ -372,7 +372,7 @@ export const allIndustries: IndustryPage[] = [
], ],
tools: ["url-qr-code", "wifi-qr-code", "instagram-qr-code"], tools: ["url-qr-code", "wifi-qr-code", "instagram-qr-code"],
faq: [ faq: [
{ question: "How do bars use QR codes for menus?", answer: "Dynamic QR codes on table tents or bar top stickers link to a digital menu page. When you update the page, the code stays the same." }, { question: "How do bars use QR codes for menus?", answer: "Dynamic QR codes on table tents or bar top stickers link to a digital menu page. When you update the page, the code stays the same. See the full setup guide: <a href=\"/blog/qr-code-restaurant-menu\" class=\"text-blue-600 underline\">Restaurant Menu QR Code Guide →</a>" },
{ question: "Can I show different menus for happy hour vs. regular hours?", answer: "Yes, with a dynamic QR code you can schedule URL redirects so the same physical code shows a happy hour menu during those specific hours." }, { question: "Can I show different menus for happy hour vs. regular hours?", answer: "Yes, with a dynamic QR code you can schedule URL redirects so the same physical code shows a happy hour menu during those specific hours." },
{ question: "Where should bars place QR codes?", answer: "Table tents, bar top laminates, and bathroom mirrors are highest-traffic placements. Bathroom mirrors work especially well for event announcements." } { question: "Where should bars place QR codes?", answer: "Table tents, bar top laminates, and bathroom mirrors are highest-traffic placements. Bathroom mirrors work especially well for event announcements." }
], ],
@@ -426,7 +426,7 @@ export const allIndustries: IndustryPage[] = [
slug: "bakeries", slug: "bakeries",
name: "Bakeries", name: "Bakeries",
title: "QR Codes for Bakeries", title: "QR Codes for Bakeries",
metaTitle: "QR Codes for Bakeries: Specials & Allergy Info", metaTitle: "QR Codes for Bakeries: Specials & Allergy Info",
metaDescription: "Share daily specials, allergen information, and loyalty programs with bakery QR codes. Update what's fresh without reprinting signs.", metaDescription: "Share daily specials, allergen information, and loyalty programs with bakery QR codes. Update what's fresh without reprinting signs.",
headline: "QR Codes for Bakeries: Daily Specials Without Daily Reprints", headline: "QR Codes for Bakeries: Daily Specials Without Daily Reprints",
subheadline: "Tell customers what's fresh today, flag allergens clearly, and run a digital loyalty card - all from a single code on the display case", subheadline: "Tell customers what's fresh today, flag allergens clearly, and run a digital loyalty card - all from a single code on the display case",
@@ -465,7 +465,7 @@ export const allIndustries: IndustryPage[] = [
slug: "breweries", slug: "breweries",
name: "Breweries & Tap Rooms", name: "Breweries & Tap Rooms",
title: "QR Codes for Breweries & Tap Rooms", title: "QR Codes for Breweries & Tap Rooms",
metaTitle: "QR Codes for Breweries: Tap List & Events", metaTitle: "QR Codes for Breweries: Tap List & Events",
metaDescription: "Give tap room visitors detailed tasting notes, brewing stories, and events calendars with QR codes. Update your tap list without reprinting menus.", metaDescription: "Give tap room visitors detailed tasting notes, brewing stories, and events calendars with QR codes. Update your tap list without reprinting menus.",
headline: "QR Codes for Breweries: Rotating Taps, Zero Reprinting", headline: "QR Codes for Breweries: Rotating Taps, Zero Reprinting",
subheadline: "Share detailed tasting notes and your current tap list in real time - then use the same code to promote your next release event", subheadline: "Share detailed tasting notes and your current tap list in real time - then use the same code to promote your next release event",
@@ -582,7 +582,7 @@ export const allIndustries: IndustryPage[] = [
slug: "wineries", slug: "wineries",
name: "Wineries & Vineyards", name: "Wineries & Vineyards",
title: "QR Codes for Wineries & Vineyards", title: "QR Codes for Wineries & Vineyards",
metaTitle: "QR Codes for Wineries: Labels & Tastings", metaTitle: "QR Codes for Wineries: Labels & Tastings",
metaDescription: "Enhance the wine experience with QR codes on bottle labels linking to tasting notes, vintage stories, food pairings, and cellar door bookings.", metaDescription: "Enhance the wine experience with QR codes on bottle labels linking to tasting notes, vintage stories, food pairings, and cellar door bookings.",
headline: "QR Codes for Wineries: The Full Story Behind Every Bottle", headline: "QR Codes for Wineries: The Full Story Behind Every Bottle",
subheadline: "Put tasting notes, vintage stories, and cellar door booking links on every bottle label - without crowding the design", subheadline: "Put tasting notes, vintage stories, and cellar door booking links on every bottle label - without crowding the design",
@@ -660,7 +660,7 @@ export const allIndustries: IndustryPage[] = [
slug: "spas", slug: "spas",
name: "Spas & Wellness Centers", name: "Spas & Wellness Centers",
title: "QR Codes for Spas & Wellness Centers", title: "QR Codes for Spas & Wellness Centers",
metaTitle: "QR Codes for Spas: Booking & Gift Cards", metaTitle: "QR Codes for Spas: Booking & Gift Cards",
metaDescription: "Elevate the spa experience with QR codes for digital treatment menus, online booking, gift card purchases, and post-visit reviews.", metaDescription: "Elevate the spa experience with QR codes for digital treatment menus, online booking, gift card purchases, and post-visit reviews.",
headline: "QR Codes for Spas: Treatment Menus and Booking Without Phone Tag", headline: "QR Codes for Spas: Treatment Menus and Booking Without Phone Tag",
subheadline: "Let clients browse treatments, book appointments, and purchase gift cards from their phone - without waiting on hold", subheadline: "Let clients browse treatments, book appointments, and purchase gift cards from their phone - without waiting on hold",
@@ -724,7 +724,7 @@ export const allIndustries: IndustryPage[] = [
tools: ["url-qr-code", "instagram-qr-code", "vcard-qr-code"], tools: ["url-qr-code", "instagram-qr-code", "vcard-qr-code"],
faq: [ faq: [
{ question: "How do beauty salons use QR codes to get more bookings?", answer: "A QR code on the station mirror or checkout counter links directly to the booking platform. Clients rebook while still at the salon, capturing high-intent conversions." }, { question: "How do beauty salons use QR codes to get more bookings?", answer: "A QR code on the station mirror or checkout counter links directly to the booking platform. Clients rebook while still at the salon, capturing high-intent conversions." },
{ question: "Can a QR code replace a printed price list at a salon?", answer: "Yes, link a QR to your service menu page. When prices change, update the page - the physical QR code never needs to be reprinted." }, { question: "Can a QR code replace a printed price list at a salon?", answer: "Yes, link a QR to your service menu page. When prices change, update the page — the physical QR code never needs to be reprinted. The same principle applies across hospitality: <a href=\"/blog/qr-code-restaurant-menu\" class=\"text-blue-600 underline\">see how restaurants handle this →</a>" },
{ question: "What social platform should beauty salon QR codes link to?", answer: "Instagram is the strongest platform for beauty salons because transformation photos and styling reels perform extremely well there." } { question: "What social platform should beauty salon QR codes link to?", answer: "Instagram is the strongest platform for beauty salons because transformation photos and styling reels perform extremely well there." }
], ],
placementTips: [ placementTips: [
@@ -972,7 +972,7 @@ export const allIndustries: IndustryPage[] = [
slug: "florists", slug: "florists",
name: "Florists & Flower Shops", name: "Florists & Flower Shops",
title: "QR Codes for Florists & Flower Shops", title: "QR Codes for Florists & Flower Shops",
metaTitle: "QR Codes for Florists: Care Guides & Orders", metaTitle: "QR Codes for Florists: Care Guides & Orders",
metaDescription: "Grow your florist business with QR codes on delivery packaging linking to flower care guides, seasonal galleries, and repeat order links.", metaDescription: "Grow your florist business with QR codes on delivery packaging linking to flower care guides, seasonal galleries, and repeat order links.",
headline: "QR Codes for Florists: Care Instructions and Same-Day Reorders", headline: "QR Codes for Florists: Care Instructions and Same-Day Reorders",
subheadline: "Every bouquet you deliver becomes a future order - attach a QR linking to care tips, your gallery, and a one-click reorder page", subheadline: "Every bouquet you deliver becomes a future order - attach a QR linking to care tips, your gallery, and a one-click reorder page",
@@ -1245,7 +1245,7 @@ export const allIndustries: IndustryPage[] = [
slug: "schools", slug: "schools",
name: "Schools", name: "Schools",
title: "QR Codes for Schools", title: "QR Codes for Schools",
metaTitle: "QR Codes for Schools: Parent Links & Notices", metaTitle: "QR Codes for Schools: Parent Links & Notices",
metaDescription: "Improve parent communication and student access to resources with QR codes for school parent portals, homework links, event sign-ups, and notices.", metaDescription: "Improve parent communication and student access to resources with QR codes for school parent portals, homework links, event sign-ups, and notices.",
headline: "QR Codes for Schools: Parent Portal Access Without the Password Panic", headline: "QR Codes for Schools: Parent Portal Access Without the Password Panic",
subheadline: "Give parents and students instant access to the school portal, homework, and notices - without lost letters and forgotten links", subheadline: "Give parents and students instant access to the school portal, homework, and notices - without lost letters and forgotten links",
@@ -1284,7 +1284,7 @@ export const allIndustries: IndustryPage[] = [
slug: "museums", slug: "museums",
name: "Museums & Exhibitions", name: "Museums & Exhibitions",
title: "QR Codes for Museums & Exhibitions", title: "QR Codes for Museums & Exhibitions",
metaTitle: "QR Codes for Museums: Audio Guides & Tours", metaTitle: "QR Codes for Museums: Audio Guides & Tours",
metaDescription: "Enrich visitor experience with QR codes for audio guides, detailed exhibit information, interactive content, and membership sign-ups.", metaDescription: "Enrich visitor experience with QR codes for audio guides, detailed exhibit information, interactive content, and membership sign-ups.",
headline: "QR Codes for Museums: Audio Guides and Expert Context for Every Exhibit", headline: "QR Codes for Museums: Audio Guides and Expert Context for Every Exhibit",
subheadline: "Replace expensive printed guides with QR codes that unlock rich exhibit stories, audio commentary, and multi-language support", subheadline: "Replace expensive printed guides with QR codes that unlock rich exhibit stories, audio commentary, and multi-language support",
@@ -1323,7 +1323,7 @@ export const allIndustries: IndustryPage[] = [
slug: "libraries", slug: "libraries",
name: "Public Libraries", name: "Public Libraries",
title: "QR Codes for Public Libraries", title: "QR Codes for Public Libraries",
metaTitle: "QR Codes for Libraries: Search & eBooks", metaTitle: "QR Codes for Libraries: Search & eBooks",
metaDescription: "Help library visitors find books, access digital resources, and discover events with QR codes for catalog search, eBook portals, and notice boards.", metaDescription: "Help library visitors find books, access digital resources, and discover events with QR codes for catalog search, eBook portals, and notice boards.",
headline: "QR Codes for Libraries: Find Any Book Without Asking", headline: "QR Codes for Libraries: Find Any Book Without Asking",
subheadline: "Let visitors search the catalog, access eBooks, and register for events from any shelf or notice board in the building", subheadline: "Let visitors search the catalog, access eBooks, and register for events from any shelf or notice board in the building",
@@ -1362,7 +1362,7 @@ export const allIndustries: IndustryPage[] = [
slug: "theaters", slug: "theaters",
name: "Theaters & Performing Arts", name: "Theaters & Performing Arts",
title: "QR Codes for Theaters & Performing Arts", title: "QR Codes for Theaters & Performing Arts",
metaTitle: "QR Codes for Theaters: Tickets & Programmes", metaTitle: "QR Codes for Theaters: Tickets & Programmes",
metaDescription: "Fill more seats and reduce printing costs with QR codes for theater ticket booking, digital season programmes, cast biographies, and interval offers.", metaDescription: "Fill more seats and reduce printing costs with QR codes for theater ticket booking, digital season programmes, cast biographies, and interval offers.",
headline: "QR Codes for Theaters: From Lobby Poster to Sold-Out Performance", headline: "QR Codes for Theaters: From Lobby Poster to Sold-Out Performance",
subheadline: "Give theatergoers immediate access to ticket booking, digital programmes, and cast bios without a single printed booklet", subheadline: "Give theatergoers immediate access to ticket booking, digital programmes, and cast bios without a single printed booklet",
@@ -1401,7 +1401,7 @@ export const allIndustries: IndustryPage[] = [
slug: "cinemas", slug: "cinemas",
name: "Cinemas & Movie Theaters", name: "Cinemas & Movie Theaters",
title: "QR Codes for Cinemas & Movie Theaters", title: "QR Codes for Cinemas & Movie Theaters",
metaTitle: "QR Codes for Cinemas: Tickets & Loyalty", metaTitle: "QR Codes for Cinemas: Tickets & Loyalty",
metaDescription: "Speed up cinema entry and grow loyalty membership with QR codes for mobile tickets, showtimes, concession pre-ordering, and loyalty program sign-ups.", metaDescription: "Speed up cinema entry and grow loyalty membership with QR codes for mobile tickets, showtimes, concession pre-ordering, and loyalty program sign-ups.",
headline: "QR Codes for Cinemas: Mobile Tickets and No Queue Entry", headline: "QR Codes for Cinemas: Mobile Tickets and No Queue Entry",
subheadline: "Let moviegoers buy tickets, pre-order concessions, and join the loyalty program from a single scan at the foyer", subheadline: "Let moviegoers buy tickets, pre-order concessions, and join the loyalty program from a single scan at the foyer",
@@ -1440,7 +1440,7 @@ export const allIndustries: IndustryPage[] = [
slug: "churches", slug: "churches",
name: "Churches & Places of Worship", name: "Churches & Places of Worship",
title: "QR Codes for Churches & Places of Worship", title: "QR Codes for Churches & Places of Worship",
metaTitle: "QR Codes for Churches: Sermons & Donations", metaTitle: "QR Codes for Churches: Sermons & Donations",
metaDescription: "Engage congregation members and visitors with QR codes for sermon recordings, digital orders of service, online donations, and community event sign-ups.", metaDescription: "Engage congregation members and visitors with QR codes for sermon recordings, digital orders of service, online donations, and community event sign-ups.",
headline: "QR Codes for Churches: Sermons, Donations, and Digital Orders of Service", headline: "QR Codes for Churches: Sermons, Donations, and Digital Orders of Service",
subheadline: "Give visitors a way to access the service, donate, and stay connected without printing bulletins every week", subheadline: "Give visitors a way to access the service, donate, and stay connected without printing bulletins every week",
@@ -1518,7 +1518,7 @@ export const allIndustries: IndustryPage[] = [
slug: "stadiums", slug: "stadiums",
name: "Stadiums & Sports Venues", name: "Stadiums & Sports Venues",
title: "QR Codes for Stadiums & Sports Venues", title: "QR Codes for Stadiums & Sports Venues",
metaTitle: "QR Codes for Stadiums: Seat Maps & Merch", metaTitle: "QR Codes for Stadiums: Seat Maps & Merch",
metaDescription: "Enhance the fan experience at stadiums with QR codes for interactive seat maps, concession ordering, merchandise, and loyalty rewards.", metaDescription: "Enhance the fan experience at stadiums with QR codes for interactive seat maps, concession ordering, merchandise, and loyalty rewards.",
headline: "QR Codes for Stadiums: Concessions, Maps, and Merchandise at Your Seat", headline: "QR Codes for Stadiums: Concessions, Maps, and Merchandise at Your Seat",
subheadline: "Keep fans in their seats and boost per-cap spend with QR codes for ordering, navigation, and matchday information", subheadline: "Keep fans in their seats and boost per-cap spend with QR codes for ordering, navigation, and matchday information",
@@ -1674,8 +1674,8 @@ export const allIndustries: IndustryPage[] = [
slug: "law-firms", slug: "law-firms",
name: "Law Firms", name: "Law Firms",
title: "QR Codes for Law Firms", title: "QR Codes for Law Firms",
metaTitle: "QR Codes for Law Firms: Profiles & Booking", metaTitle: "QR Codes for Law Firms: Profiles & Booking",
metaDescription: "Build client trust with QR codes linking to attorney profiles, consultation booking, contact forms, and legal resource pages.", metaDescription: "Build client trust with QR codes linking to attorney profiles, consultation booking, contact forms, and legal resource pages.",
headline: "QR Codes for Law Firms: Attorney Profiles and Consultation Booking", headline: "QR Codes for Law Firms: Attorney Profiles and Consultation Booking",
subheadline: "Every business card and client letter becomes a booking channel - one scan to attorney profiles, practice areas, and scheduling", subheadline: "Every business card and client letter becomes a booking channel - one scan to attorney profiles, practice areas, and scheduling",
heroImage: "/marketing/industries/law-firms.jpeg", heroImage: "/marketing/industries/law-firms.jpeg",
@@ -1714,7 +1714,7 @@ export const allIndustries: IndustryPage[] = [
name: "Accounting Firms", name: "Accounting Firms",
title: "QR Codes for Accounting Firms", title: "QR Codes for Accounting Firms",
metaTitle: "QR Codes for Accountants: Document Portal & Tax Calendar", metaTitle: "QR Codes for Accountants: Document Portal & Tax Calendar",
metaDescription: "Streamline client communication with QR codes for secure document uploads, tax calendars, consultation booking, and office contact details.", metaDescription: "Streamline client communication with QR codes for secure document uploads, tax calendars, consultation booking, and office contact details.",
headline: "QR Codes for Accounting Firms: Secure Documents and Tax Deadlines", headline: "QR Codes for Accounting Firms: Secure Documents and Tax Deadlines",
subheadline: "Give clients a direct link to your document portal, tax calendar, and booking page - all from a scan on your business card", subheadline: "Give clients a direct link to your document portal, tax calendar, and booking page - all from a scan on your business card",
heroImage: "/marketing/industries/accountants.jpeg", heroImage: "/marketing/industries/accountants.jpeg",
@@ -1908,7 +1908,7 @@ export const allIndustries: IndustryPage[] = [
slug: "airports", slug: "airports",
name: "Airports & Travel Hubs", name: "Airports & Travel Hubs",
title: "QR Codes for Airports & Travel Hubs", title: "QR Codes for Airports & Travel Hubs",
metaTitle: "QR Codes for Airports: Gates, Maps & Check-In", metaTitle: "QR Codes for Airports: Gates, Maps & Check-In",
metaDescription: "Improve passenger experience at airports with QR codes for live flight status, interactive terminal maps, mobile check-in, and retail promotions.", metaDescription: "Improve passenger experience at airports with QR codes for live flight status, interactive terminal maps, mobile check-in, and retail promotions.",
headline: "QR Codes for Airports: Live Flight Status and Gate Maps at Every Sign", headline: "QR Codes for Airports: Live Flight Status and Gate Maps at Every Sign",
subheadline: "Point travelers to live departures, interactive maps, and mobile check-in directly from terminal signage - reducing queue pressure at information desks", subheadline: "Point travelers to live departures, interactive maps, and mobile check-in directly from terminal signage - reducing queue pressure at information desks",
@@ -1943,11 +1943,11 @@ export const allIndustries: IndustryPage[] = [
], ],
germanKeyword: "Flughäfen" germanKeyword: "Flughäfen"
}, },
{ {
slug: "dentists", slug: "dentists",
name: "Dental Practices", name: "Dental Practices",
title: "QR Codes for Dental Practices", title: "QR Codes for Dental Practices",
metaTitle: "QR Codes for Dentists: Booking & Aftercare", metaTitle: "QR Codes for Dentists: Booking & Aftercare",
metaDescription: "Modernize your dental practice with QR codes for appointment booking, treatment information, aftercare guides, and patient review collection.", metaDescription: "Modernize your dental practice with QR codes for appointment booking, treatment information, aftercare guides, and patient review collection.",
headline: "QR Codes for Dental Practices: Appointments and Aftercare Without the Paperwork", headline: "QR Codes for Dental Practices: Appointments and Aftercare Without the Paperwork",
subheadline: "Let patients book appointments, access treatment information, and receive post-procedure care instructions from a single scan", subheadline: "Let patients book appointments, access treatment information, and receive post-procedure care instructions from a single scan",
@@ -1979,94 +1979,94 @@ export const allIndustries: IndustryPage[] = [
"Waiting room table card for digital intake form and WiFi", "Waiting room table card for digital intake form and WiFi",
"Small card given after treatment with aftercare QR", "Small card given after treatment with aftercare QR",
"Checkout counter display for Google review request" "Checkout counter display for Google review request"
], ],
germanKeyword: "Zahnarztpraxen" germanKeyword: "Zahnarztpraxen"
}, },
{ {
slug: "pet-grooming", slug: "pet-grooming",
name: "Pet Groomers", name: "Pet Groomers",
title: "QR Codes for Pet Groomers", title: "QR Codes for Pet Groomers",
metaTitle: "QR Codes for Pet Groomers: Online Booking & Portfolios", metaTitle: "QR Codes for Pet Groomers: Online Booking & Portfolios",
metaDescription: "Grow your pet grooming business with QR codes for appointment booking, before-and-after portfolios, and digital business cards.", metaDescription: "Grow your pet grooming business with QR codes for appointment booking, before-and-after portfolios, and digital business cards.",
headline: "QR Codes for Pet Groomers: Every Groom with a Digital Connection", headline: "QR Codes for Pet Groomers: Every Groom with a Digital Connection",
subheadline: "Let pet owners book appointments and view your portfolio with a simple scan on your card or window", subheadline: "Let pet owners book appointments and view your portfolio with a simple scan on your card or window",
heroImage: "/marketing/industries/pet-grooming.jpeg", heroImage: "/marketing/industries/pet-grooming.jpeg",
statistics: [ statistics: [
{ value: "2x", label: "Higher Discovery-to-Session Conversion" }, { value: "2x", label: "Higher Discovery-to-Session Conversion" },
{ value: "50%", label: "Reduction in Booking Phone Calls" }, { value: "50%", label: "Reduction in Booking Phone Calls" },
{ value: "3x", label: "More Portfolio Views at Check-out" } { value: "3x", label: "More Portfolio Views at Check-out" }
], ],
benefits: [ benefits: [
{ title: "Zero-Hassle Online Booking", description: "Place a QR code on your business cards and window. Clients scan to see your availability and book their next grooming session in seconds." }, { title: "Zero-Hassle Online Booking", description: "Place a QR code on your business cards and window. Clients scan to see your availability and book their next grooming session in seconds." },
{ title: "Before-and-After Portfolios", description: "Show off your best work. Link QR codes in your lobby to a digital gallery of your latest dog and cat grooming transformations to build trust with new owners." }, { title: "Before-and-After Portfolios", description: "Show off your best work. Link QR codes in your lobby to a digital gallery of your latest dog and cat grooming transformations to build trust with new owners." },
{ title: "Pet Parent Resource Guides", description: "Give clients a QR code after their session that links to a PDF guide on home grooming tips and product recommendations between professional visits." } { title: "Pet Parent Resource Guides", description: "Give clients a QR code after their session that links to a PDF guide on home grooming tips and product recommendations between professional visits." }
], ],
useCases: [ useCases: [
"Online appointment booking and rescheduling", "Online appointment booking and rescheduling",
"Digital before-and-after grooming portfolios", "Digital before-and-after grooming portfolios",
"Home grooming care and product guides", "Home grooming care and product guides",
"Digital vCard for instant contact saving", "Digital vCard for instant contact saving",
"Special offer and referral program links" "Special offer and referral program links"
], ],
tools: ["url-qr-code", "vcard-qr-code", "pdf-qr-code"], tools: ["url-qr-code", "vcard-qr-code", "pdf-qr-code"],
faq: [ faq: [
{ question: "How do pet groomers use QR codes for booking?", answer: "They place codes on business cards and their shop window that link directly to their booking software, reducing the need for phone tag." }, { question: "How do pet groomers use QR codes for booking?", answer: "They place codes on business cards and their shop window that link directly to their booking software, reducing the need for phone tag." },
{ question: "Can I show a portfolio using a QR code?", answer: "Yes, you can link to an Instagram page or a dedicated gallery showing the dogs and cats you've groomed." }, { question: "Can I show a portfolio using a QR code?", answer: "Yes, you can link to an Instagram page or a dedicated gallery showing the dogs and cats you've groomed." },
{ question: "Where should groomers place QR codes?", answer: "The shop window, business cards, the checkout counter, and on grooming tags." } { question: "Where should groomers place QR codes?", answer: "The shop window, business cards, the checkout counter, and on grooming tags." }
], ],
placementTips: [ placementTips: [
"Front window for after-hours booking", "Front window for after-hours booking",
"Professional business cards for vCard links", "Professional business cards for vCard links",
"Lobby posters with before-and-after photo links" "Lobby posters with before-and-after photo links"
], ],
germanKeyword: "Hundefrisöre" germanKeyword: "Hundefrisöre"
}, },
{ {
slug: "veterinarians", slug: "veterinarians",
name: "Veterinarians", name: "Veterinarians",
title: "QR Codes for Veterinarians", title: "QR Codes for Veterinarians",
metaTitle: "QR Codes for Veterinarians: Health Records & Booking", metaTitle: "QR Codes for Veterinarians: Health Records & Booking",
metaDescription: "Enhance veterinary care with QR codes for medical record access, appointment booking, emergency clinic details, and aftercare resources.", metaDescription: "Enhance veterinary care with QR codes for medical record access, appointment booking, emergency clinic details, and aftercare resources.",
headline: "QR Codes for Veterinarians: Improving Care and Communication", headline: "QR Codes for Veterinarians: Improving Care and Communication",
subheadline: "Connect pet owners with medical records, booking portals, and emergency contacts instantly", subheadline: "Connect pet owners with medical records, booking portals, and emergency contacts instantly",
heroImage: "/marketing/industries/veterinarians.jpeg", heroImage: "/marketing/industries/veterinarians.jpeg",
statistics: [ statistics: [
{ value: "50%", label: "Faster Access to Emergency Contact Info" }, { value: "50%", label: "Faster Access to Emergency Contact Info" },
{ value: "2x", label: "More Efficient Appointment Scheduling" }, { value: "2x", label: "More Efficient Appointment Scheduling" },
{ value: "40%", label: "Better Digital Pet Health Record Usage" } { value: "40%", label: "Better Digital Pet Health Record Usage" }
], ],
benefits: [ benefits: [
{ title: "Digital Pet Health Records", description: "Give clients a QR code for their pet's collar tag or record folder. Scanning links directly to their up-to-date vaccination and medical history portals." }, { title: "Digital Pet Health Records", description: "Give clients a QR code for their pet's collar tag or record folder. Scanning links directly to their up-to-date vaccination and medical history portals." },
{ title: "Instant Emergency Contacts", description: "Place a QR on your clinic window and business cards. In an emergency, pet owners scan for immediate dial-to-clinic and directions to the nearest 24-hour vet." }, { title: "Instant Emergency Contacts", description: "Place a QR on your clinic window and business cards. In an emergency, pet owners scan for immediate dial-to-clinic and directions to the nearest 24-hour vet." },
{ title: "Seamless Post-Op Care Guides", description: "Replace paper instructions. After a procedure, provide a QR that links to a video or PDF explaining exactly how to care for their pet at home." } { title: "Seamless Post-Op Care Guides", description: "Replace paper instructions. After a procedure, provide a QR that links to a video or PDF explaining exactly how to care for their pet at home." }
], ],
useCases: [ useCases: [
"Digital pet health and vaccination records", "Digital pet health and vaccination records",
"Appointment booking and reminder portal", "Appointment booking and reminder portal",
"Emergency contact and location mapping", "Emergency contact and location mapping",
"Post-operative care and medication guides", "Post-operative care and medication guides",
"Pet insurance information and quote links" "Pet insurance information and quote links"
], ],
tools: ["url-qr-code", "call-qr-code-generator", "vcard-qr-code"], tools: ["url-qr-code", "call-qr-code-generator", "vcard-qr-code"],
faq: [ faq: [
{ question: "How do vets use QR codes for emergencies?", answer: "They print codes that automatically dial the clinic or open a map to the nearest emergency animal hospital when scanned." }, { question: "How do vets use QR codes for emergencies?", answer: "They print codes that automatically dial the clinic or open a map to the nearest emergency animal hospital when scanned." },
{ question: "Can QR codes hold a pet's medical history?", answer: "They link to a secure portal where pet owners and other care providers can see the pet's latest records and vaccines." }, { question: "Can QR codes hold a pet's medical history?", answer: "They link to a secure portal where pet owners and other care providers can see the pet's latest records and vaccines." },
{ question: "Where should vet clinics place QR codes?", answer: "Lobby windows, medical record folders, and as a sticker on the back of the owner's business card." } { question: "Where should vet clinics place QR codes?", answer: "Lobby windows, medical record folders, and as a sticker on the back of the owner's business card." }
], ],
placementTips: [ placementTips: [
"Medical folders for personal record links", "Medical folders for personal record links",
"Front door of the clinic for emergency info", "Front door of the clinic for emergency info",
"Lobby posters for online booking registration" "Lobby posters for online booking registration"
], ],
germanKeyword: "Tierärzte" germanKeyword: "Tierärzte"
}, },
]; ];
export const industryPages = Array.from( export const industryPages = Array.from(
new Map(allIndustries.map((page) => [page.slug, page])).values() new Map(allIndustries.map((page) => [page.slug, page])).values()
); );
export function getIndustryPage(slug: string): IndustryPage | undefined { export function getIndustryPage(slug: string): IndustryPage | undefined {
return industryPages.find((p) => p.slug === slug); return industryPages.find((p) => p.slug === slug);
} }