From 65fe18a71856a522097db60e732df9ff3d141a42 Mon Sep 17 00:00:00 2001 From: Timo Knuth Date: Tue, 14 Apr 2026 19:46:14 +0200 Subject: [PATCH] dynamisch barcode --- .agents/pricing-strategy.md | 234 +++ .codex-temp/awesome-design-md-SKILL.md | 60 + DESIGN.md | 322 ++++ .../dynamic-barcode-generator/page.tsx | 1393 +++++++++++++++++ 4 files changed, 2009 insertions(+) create mode 100644 .agents/pricing-strategy.md create mode 100644 .codex-temp/awesome-design-md-SKILL.md create mode 100644 DESIGN.md create mode 100644 src/app/(main)/(marketing)/dynamic-barcode-generator/page.tsx diff --git a/.agents/pricing-strategy.md b/.agents/pricing-strategy.md new file mode 100644 index 0000000..77816dd --- /dev/null +++ b/.agents/pricing-strategy.md @@ -0,0 +1,234 @@ +# QR Master — Pricing Strategy +*Erstellt: April 2026 | Basiert auf Marktforschung, Competitor-Scraping & SaaS-Benchmarks* + +--- + +## 1. Marktkontext + +### QR-Code-Markt 2025/2026 +| Metrik | Wert | +|--------|------| +| Globale Marktgröße | $15,3 Mrd. (2025) | +| CAGR bis 2030 | 16,1% | +| US-Smartphone-User die QR scannen | 100+ Mio. monatlich | +| Business-Adoption | 50% der Unternehmen nutzen QR-Codes aktiv | + +**Fazit:** Wachstumsmarkt mit noch großem Potenzial, besonders im KMU-Segment. + +--- + +## 2. Wettbewerbs-Pricing-Map + +### Vollständige Marktübersicht (aus Firecrawl-Recherche) + +| Tool | Preis/Monat | Analytics | Dynamic | Bulk | Branding | Positionierung | +|------|------------|-----------|---------|------|----------|----------------| +| TQRCG | $5 | ✅ | ✅ | ❌ | ✅ | Value-Leader | +| QRStuff | $5 | ❌ | ❌ | ✅ | ❌ | Budget | +| ViralQR | $1,49 | ✅ | ✅ | ❌ | ✅ | Ultra-Budget | +| Beaconstac | $5–24 | ✅ | ✅ | ✅ | ✅ | SMB–Enterprise | +| Bitly QR | $10 | ✅ | ✅ | ❌ | ✅ | Mid-Market | +| Unitag | $10 | ❌ | ✅ | ✅ | ✅ | Mid-Market | +| ZebraQR | $9 | ✅ | ✅ | ❌ | ✅ | Hospitality-Nische | +| QR Tiger | $12–15 | ✅ | ✅ | ✅ | ✅ | Mid-Market+ | +| Hovercode | $15 | ✅ | ✅ | ✅ | ✅ | Growth-Fokus | +| Flowcode | $10–15 | ✅ | ✅ | ❌ | ✅ | Design-Fokus | +| Scanova | $20 | ✅ | ✅ | ✅ | ✅ | Premium | +| QR Code Chimp | $20 | ✅ | ✅ | ✅ | ✅ | Premium-Design | +| Uniqode | $10–30 | ✅ | ✅ | ✅ | ✅ | Enterprise | +| QRFY | $25 | ✅ | ✅ | ✅ | ✅ | Premium-Flat | +| QR Code Generator Pro | $15–29 | ✅ | ✅ | ✅ | ✅ | Agency | + +### Marktlücke für QR Master +> **Kein einziges Tool unter $12 bietet Analytics + Bulk + Custom Branding + DSGVO gleichzeitig.** +> Das ist exakt QR Masters Sweet Spot. + +--- + +## 3. SaaS-Benchmark-Daten (Industrie) + +| Metrik | Benchmark | Quelle | +|--------|-----------|--------| +| Median Entry-Level Preis (SaaS) | $29/mo | Monetizely 2025 | +| Free-to-Paid Conversion | ~5% | RevenueCat 2026 | +| Anteil Jahres-Abos (vs. Monatlich) | 68% annual / 32% monthly | RevenueCat 2026 | +| ARPU (Subscription Apps) | ~$30 | RevenueCat 2026 | +| Freemium-Anteil unter SaaS | 38% der Unternehmen | Monetizely 2025 | +| Hybrid-Pricing-Adoption | 61% | Monetizely 2025 | +| SaaS Churn (SMB) | 3–5%/Monat | Benchmark | + +**Key Insight:** 68% der Subscriber wählen Jahrestarife. Das ist der wichtigste Hebel für Cashflow und Churn-Reduktion. + +--- + +## 4. Value Metric Empfehlung + +### Aktuelles Modell: Anzahl dynamischer QR-Codes +**Bewertung: Gut, aber optimierbar.** + +Die Anzahl dynamischer Codes skaliert mit dem wahrgenommenen Wert (mehr Codes = mehr Kampagnen = mehr Wert). Jedoch: +- Limit von 8 FREE / 50 PRO / 500 BUSINESS ist nicht intuitiv kommuniziert +- Kunden denken in "Projekten" oder "Kampagnen", nicht in "Codes" + +### Empfehlung: Hybrid-Metric einführen +Primär-Metric behalten (Dynamic Codes), aber mit Sekundär-Metriken ergänzen: + +| Tier | Primär-Metric | Sekundär-Metriken | +|------|--------------|-------------------| +| FREE | 8 Dynamic Codes | 1 User, Basic Analytics, 30 Tage History | +| PRO | 50 Dynamic Codes | 1–3 User, Full Analytics, 1 Jahr History, Custom Domain | +| BUSINESS | 500 Dynamic Codes | Unlimitierte User, Advanced Analytics, Bulk, API | + +--- + +## 5. Empfohlene Pricing-Struktur + +### Tier-Empfehlung (Monatlich / Jährlich) + +#### FREE — Kostenlos, für immer +- **8 dynamische QR-Codes** (klar kommuniziert als "8 Kampagnen") +- Unlimitierte statische Codes +- Basis-Analytics (Scans, Datum) +- QR Master Branding (nicht entfernbar) +- **Ziel:** Acquisition, Habit-Building, Virality durch Branding + +#### PRO — €9/Monat (monatlich) | **€7/Monat (jährlich = €84/Jahr)** +*Empfohlen für: Restaurants, lokale Unternehmen, Marketing-Einsteiger* +- **50 dynamische QR-Codes** +- Custom Branding (kein QR Master Logo) +- Vollständige Analytics (Device, Location, OS, UTM) +- 1 Jahr Analytics-History +- Custom Domain für Redirects +- Prioritäts-Support +- **Rationale:** $7–9 liegt im bewiesenen Sweet Spot ($5–$10) für diese Zielgruppe. Beaconstac Starter bei $5 hat nur 100 Scans — wir haben keine Scan-Limits. + +#### BUSINESS — €24/Monat (monatlich) | **€19/Monat (jährlich = €228/Jahr)** +*Empfohlen für: Agenturen, Retail-Chains, Event-Organisatoren* +- **500 dynamische QR-Codes** +- Bulk-Upload (Excel/CSV bis 1.000 Zeilen) +- API-Zugriff +- Team-Management (bis 5 User) +- Erweiterte Analytics + Export (CSV, PDF) +- White-Label Option +- DSGVO-Compliance-Report +- **Rationale:** $19–24 ist der Bereich wo Scanova ($20), Hovercode ($15) und QR Code Chimp ($20) spielen — aber keiner hat DSGVO + Bulk + Analytics zusammen. + +#### ENTERPRISE — Auf Anfrage (ab €99/Monat) +*Für: Corporations, Franchise-Ketten* +- Unlimitierte Codes +- Dedizierter Account Manager +- Custom SLA +- SSO / SAML +- On-Premise Option (optional) + +--- + +## 6. Psychologische Preisgestaltung + +### Anchoring-Strategie +Reihenfolge auf Pricing-Page: **BUSINESS → PRO → FREE** (von teuer nach günstig) +→ PRO wirkt dadurch als "vernünftiger Kompromiss" + +### Decoy-Effekt +PRO muss der offensichtliche "Best Deal" sein: +- BUSINESS ist 2,7× teurer als PRO aber hat 10× mehr Codes → Nur für Power-User +- FREE hat 6× weniger Codes als PRO → Upgrade liegt nahe + +### Jahres-Pricing-Push +- Monatlich: €9 / €24 +- Jährlich: €7 / €19 (sparst 22% / 21%) +- **Wichtig:** Jahrespreis prominent anzeigen mit "Spare 2 Monate" statt Prozent +- Default-Toggle: **Jährlich** (da 68% aller Subscriber Jahrestarife wählen) + +### Charm vs. Round Pricing +- PRO: **€9** (nicht €10) → Charm Pricing für Conversion +- BUSINESS: **€24** (nicht €25) → Knapp unter psychologischer Grenze +- Jahrestarife: **€84/Jahr** und **€228/Jahr** (rund → Premium-Signal) + +--- + +## 7. Jahres-Discount-Strategie + +| Tier | Monatlich | Jährlich | Ersparnis | +|------|-----------|----------|-----------| +| PRO | €9/Mo | €84/Jahr (€7/Mo) | 22% / 2 Monate gratis | +| BUSINESS | €24/Mo | €228/Jahr (€19/Mo) | 21% / 2,5 Monate gratis | + +**Kommunikation:** "2 Monate kostenlos bei jährlicher Zahlung" schlägt "20% Rabatt" in A/B-Tests regelmäßig. + +--- + +## 8. Free-Tier-Optimierung + +### Ziel des Free-Tiers +Nicht monetarisieren — **qualifizieren und konvertieren**. + +### Empfohlene Trigger für Upgrade-Prompts +1. **Code-Limit erreicht** → "Du hast 8/8 Codes verwendet. Upgrade auf PRO für 50 Codes." +2. **Analytics-Feature geklickt** → "Detaillierte Location-Analytics nur in PRO." +3. **Custom Branding versucht** → "Entferne das QR Master Logo — upgrade auf PRO." +4. **Bulk-Upload versucht** → "Bulk-Upload ist nur in BUSINESS verfügbar." +5. **Nach 7 Tagen aktive Nutzung** → In-App Prompt: "Du nutzt QR Master aktiv — hole mehr raus." + +### Virality-Mechanismus +- FREE-Codes enthalten subtiles "Made with QR Master" in Metadaten +- QR-Code-Landing-Pages (bei Dynamic Redirects) zeigen "Powered by QR Master" Footer +- Jeder Scan ist eine potenzielle Akquisition + +--- + +## 9. Positioning Statement je Tier + +**FREE:** +> "Starte kostenlos mit 8 professionellen QR-Codes — keine Kreditkarte erforderlich." + +**PRO:** +> "Für Restaurants, lokale Geschäfte und Marketer: Unbegrenzte Änderungen, echte Analytics, dein Branding — für weniger als ein Mittagessen pro Monat." + +**BUSINESS:** +> "Für Agenturen und Retail-Chains: Erstelle 500 Codes auf einmal, per Excel-Upload — DSGVO-konform, skalierbar, professionell." + +--- + +## 10. Pricing Page Struktur (Empfehlung) + +### Elemente above the fold +1. **Toggle: Monatlich / Jährlich** (Default: Jährlich) +2. **3 Tier-Karten** in Reihenfolge: FREE → PRO (highlighted "Beliebteste Wahl") → BUSINESS +3. **CTA je Tier:** "Kostenlos starten" / "14 Tage gratis testen" / "Jetzt upgraden" +4. **Trust-Signal:** "Keine Kreditkarte für Free • DSGVO-konform • Jederzeit kündbar" + +### Weitere Sektionen +- Feature-Vergleichstabelle (vollständig) +- ROI-Rechner: "Wie viel sparst du durch dynamische QR-Codes vs. Neudruck?" +- FAQ (Objections aus Product-Marketing-Context) +- Testimonials-Sektion (Platzhalter für spätere echte Reviews) +- Enterprise-CTA am Ende + +--- + +## 11. Kurzfristige Maßnahmen (Quick Wins) + +| Priorität | Maßnahme | Impact | +|-----------|----------|--------| +| 🔴 Hoch | Jahrestarif als Default auf Pricing-Page setzen | +20–30% ARPU sofort | +| 🔴 Hoch | "2 Monate gratis" Kommunikation (statt %) | +Conversion | +| 🟡 Mittel | Upgrade-Prompts bei Feature-Gates einbauen | +Free-to-Paid | +| 🟡 Mittel | 14-Tage PRO Trial (kreditkartenlos) | +Trial Signups | +| 🟢 Niedrig | BUSINESS Jahrespreis auf €228 festlegen | Cashflow | +| 🟢 Niedrig | Enterprise-Kontaktformular ergänzen | Upmarket | + +--- + +## 12. Risiken & Gegenmaßnahmen + +| Risiko | Wahrscheinlichkeit | Gegenmaßnahme | +|--------|-------------------|---------------| +| ViralQR mit $1,49 unterbietbar | Mittel | Auf Analytics + DSGVO differenzieren, nicht Preis | +| FREE-User konvertieren nicht | Hoch | Smarte Feature-Gates + E-Mail-Nurturing | +| BUSINESS-Preis zu hoch für KMU | Mittel | Jährlich-Preis betonen: €19/mo fühlt sich zugänglich an | +| Konkurrenten senken Preise | Niedrig | Value-Story stärken, nicht mitziehen | + +--- + +*Datenbasis: Firecrawl-Scraping von 5+ Competitor-Seiten, QR Marktstatistiken 2026, RevenueCat State of Subscription Apps 2026, Monetizely SaaS Benchmark 2025, Product Marketing Context QR Master.* diff --git a/.codex-temp/awesome-design-md-SKILL.md b/.codex-temp/awesome-design-md-SKILL.md new file mode 100644 index 0000000..2b5dd74 --- /dev/null +++ b/.codex-temp/awesome-design-md-SKILL.md @@ -0,0 +1,60 @@ +--- +name: awesome-design-md +description: Use VoltAgent's awesome-design-md collection when the user wants UI inspired by a specific brand or asks for a DESIGN.md reference, visual system, or brand-style implementation such as Stripe, Linear, Vercel, Claude, or Supabase. Resolve the brand slug from the installed `design-md/` folder, fetch the matching `getdesign.md` design document for that slug, and apply it as the design-system reference for implementation. +--- + +# Awesome DESIGN.md + +Use this skill to turn the installed `awesome-design-md` collection into a practical design reference workflow. + +The local `design-md/` directory is the index of supported brand slugs. Its per-brand `README.md` files are only pointers. The actual design-system document lives at: + +```text +https://getdesign.md//design-md +``` + +## Workflow + +1. Identify the target brand or closest visual reference. +2. Resolve the brand slug from the local `design-md/` folder. +3. Prefer exact folder names for dotted brands such as `linear.app`, `mistral.ai`, `opencode.ai`, `together.ai`, and `x.ai`. +4. Fetch `https://getdesign.md//design-md`. +5. Use the fetched document in one of two ways: + - write or update the project's root `DESIGN.md` + - keep it as an external design reference while implementing UI +6. Preserve the user's product semantics and content model. Borrow visual language, spacing, typography, motion, and component patterns, not product-specific copy. + +## Local Source Of Truth + +Use the installed folder below to confirm which slugs exist before fetching: + +```text +C:\Users\a931627\.claude\skills\awesome-design-md\design-md +``` + +If needed, list the available slugs with: + +```powershell +Get-ChildItem -Name C:\Users\a931627\.claude\skills\awesome-design-md\design-md +``` + +## Practical Rules + +- Treat `DESIGN.md` as a visual system reference, not as code to mirror verbatim. +- If the user asks for "something like X, but lighter, warmer, or more minimal", adapt the reference instead of cloning it literally. +- If multiple brands fit, choose the closest one and state the choice. +- If a slug is missing locally or the remote fetch fails, pick the nearest available brand or ask the user for a replacement target. +- When working inside an existing design system, merge the borrowed visual cues with the established component structure instead of replacing everything. + +## Common Slug Examples + +- `stripe` +- `vercel` +- `claude` +- `cursor` +- `supabase` +- `linear.app` +- `mistral.ai` +- `opencode.ai` +- `together.ai` +- `x.ai` diff --git a/DESIGN.md b/DESIGN.md new file mode 100644 index 0000000..2e73de5 --- /dev/null +++ b/DESIGN.md @@ -0,0 +1,322 @@ +# Design System Inspired by Stripe + +## 1. Visual Theme & Atmosphere + +Stripe's website is the gold standard of fintech design -- a system that manages to feel simultaneously technical and luxurious, precise and warm. The page opens on a clean white canvas (`#ffffff`) with deep navy headings (`#061b31`) and a signature purple (`#533afd`) that functions as both brand anchor and interactive accent. This isn't the cold, clinical purple of enterprise software; it's a rich, saturated violet that reads as confident and premium. The overall impression is of a financial institution redesigned by a world-class type foundry. + +The custom `sohne-var` variable font is the defining element of Stripe's visual identity. Every text element enables the OpenType `"ss01"` stylistic set, which modifies character shapes for a distinctly geometric, modern feel. At display sizes (48px-56px), sohne-var runs at weight 300 -- an extraordinarily light weight for headlines that creates an ethereal, almost whispered authority. This is the opposite of the "bold hero headline" convention; Stripe's headlines feel like they don't need to shout. The negative letter-spacing (-1.4px at 56px, -0.96px at 48px) tightens the text into dense, engineered blocks. At smaller sizes, the system also uses weight 300 with proportionally reduced tracking, and tabular numerals via `"tnum"` for financial data display. + +What truly distinguishes Stripe is its shadow system. Rather than the flat or single-layer approach of most sites, Stripe uses multi-layer, blue-tinted shadows: the signature `rgba(50,50,93,0.25)` combined with `rgba(0,0,0,0.1)` creates shadows with a cool, almost atmospheric depth -- like elements are floating in a twilight sky. The blue-gray undertone of the primary shadow color (50,50,93) ties directly to the navy-purple brand palette, making even elevation feel on-brand. + +**Key Characteristics:** +- sohne-var with OpenType `"ss01"` on all text -- a custom stylistic set that defines the brand's letterforms +- Weight 300 as the signature headline weight -- light, confident, anti-convention +- Negative letter-spacing at display sizes (-1.4px at 56px, progressive relaxation downward) +- Blue-tinted multi-layer shadows using `rgba(50,50,93,0.25)` -- elevation that feels brand-colored +- Deep navy (`#061b31`) headings instead of black -- warm, premium, financial-grade +- Conservative border-radius (4px-8px) -- nothing pill-shaped, nothing harsh +- Ruby (`#ea2261`) and magenta (`#f96bee`) accents for gradient and decorative elements +- `SourceCodePro` as the monospace companion for code and technical labels + +## 2. Color Palette & Roles + +### Primary +- **Stripe Purple** (`#533afd`): Primary brand color, CTA backgrounds, link text, interactive highlights. A saturated blue-violet that anchors the entire system. +- **Deep Navy** (`#061b31`): `--hds-color-heading-solid`. Primary heading color. Not black, not gray -- a very dark blue that adds warmth and depth to text. +- **Pure White** (`#ffffff`): Page background, card surfaces, button text on dark backgrounds. + +### Brand & Dark +- **Brand Dark** (`#1c1e54`): `--hds-color-util-brand-900`. Deep indigo for dark sections, footer backgrounds, and immersive brand moments. +- **Dark Navy** (`#0d253d`): `--hds-color-core-neutral-975`. The darkest neutral -- almost-black with a blue undertone for maximum depth without harshness. + +### Accent Colors +- **Ruby** (`#ea2261`): `--hds-color-accentColorMode-ruby-icon-solid`. Warm red-pink for icons, alerts, and accent elements. +- **Magenta** (`#f96bee`): `--hds-color-accentColorMode-magenta-icon-gradientMiddle`. Vivid pink-purple for gradients and decorative highlights. +- **Magenta Light** (`#ffd7ef`): `--hds-color-util-accent-magenta-100`. Tinted surface for magenta-themed cards and badges. + +### Interactive +- **Primary Purple** (`#533afd`): Primary link color, active states, selected elements. +- **Purple Hover** (`#4434d4`): Darker purple for hover states on primary elements. +- **Purple Deep** (`#2e2b8c`): `--hds-color-button-ui-iconHover`. Dark purple for icon hover states. +- **Purple Light** (`#b9b9f9`): `--hds-color-action-bg-subduedHover`. Soft lavender for subdued hover backgrounds. +- **Purple Mid** (`#665efd`): `--hds-color-input-selector-text-range`. Range selector and input highlight color. + +### Neutral Scale +- **Heading** (`#061b31`): Primary headings, nav text, strong labels. +- **Label** (`#273951`): `--hds-color-input-text-label`. Form labels, secondary headings. +- **Body** (`#64748d`): Secondary text, descriptions, captions. +- **Success Green** (`#15be53`): Status badges, success indicators (with 0.2-0.4 alpha for backgrounds/borders). +- **Success Text** (`#108c3d`): Success badge text color. +- **Lemon** (`#9b6829`): `--hds-color-core-lemon-500`. Warning and highlight accent. + +### Surface & Borders +- **Border Default** (`#e5edf5`): Standard border color for cards, dividers, and containers. +- **Border Purple** (`#b9b9f9`): Active/selected state borders on buttons and inputs. +- **Border Soft Purple** (`#d6d9fc`): Subtle purple-tinted borders for secondary elements. +- **Border Magenta** (`#ffd7ef`): Pink-tinted borders for magenta-themed elements. +- **Border Dashed** (`#362baa`): Dashed borders for drop zones and placeholder elements. + +### Shadow Colors +- **Shadow Blue** (`rgba(50,50,93,0.25)`): The signature -- blue-tinted primary shadow color. +- **Shadow Dark Blue** (`rgba(3,3,39,0.25)`): Deeper blue shadow for elevated elements. +- **Shadow Black** (`rgba(0,0,0,0.1)`): Secondary shadow layer for depth reinforcement. +- **Shadow Ambient** (`rgba(23,23,23,0.08)`): Soft ambient shadow for subtle elevation. +- **Shadow Soft** (`rgba(23,23,23,0.06)`): Minimal ambient shadow for light lift. + +## 3. Typography Rules + +### Font Family +- **Primary**: `sohne-var`, with fallback: `SF Pro Display` +- **Monospace**: `SourceCodePro`, with fallback: `SFMono-Regular` +- **OpenType Features**: `"ss01"` enabled globally on all sohne-var text; `"tnum"` for tabular numbers on financial data and captions. + +### Hierarchy + +| Role | Font | Size | Weight | Line Height | Letter Spacing | Features | Notes | +|------|------|------|--------|-------------|----------------|----------|-------| +| Display Hero | sohne-var | 56px (3.50rem) | 300 | 1.03 (tight) | -1.4px | ss01 | Maximum size, whisper-weight authority | +| Display Large | sohne-var | 48px (3.00rem) | 300 | 1.15 (tight) | -0.96px | ss01 | Secondary hero headlines | +| Section Heading | sohne-var | 32px (2.00rem) | 300 | 1.10 (tight) | -0.64px | ss01 | Feature section titles | +| Sub-heading Large | sohne-var | 26px (1.63rem) | 300 | 1.12 (tight) | -0.26px | ss01 | Card headings, sub-sections | +| Sub-heading | sohne-var | 22px (1.38rem) | 300 | 1.10 (tight) | -0.22px | ss01 | Smaller section heads | +| Body Large | sohne-var | 18px (1.13rem) | 300 | 1.40 | normal | ss01 | Feature descriptions, intro text | +| Body | sohne-var | 16px (1.00rem) | 300-400 | 1.40 | normal | ss01 | Standard reading text | +| Button | sohne-var | 16px (1.00rem) | 400 | 1.00 (tight) | normal | ss01 | Primary button text | +| Button Small | sohne-var | 14px (0.88rem) | 400 | 1.00 (tight) | normal | ss01 | Secondary/compact buttons | +| Link | sohne-var | 14px (0.88rem) | 400 | 1.00 (tight) | normal | ss01 | Navigation links | +| Caption | sohne-var | 13px (0.81rem) | 400 | normal | normal | ss01 | Small labels, metadata | +| Caption Small | sohne-var | 12px (0.75rem) | 300-400 | 1.33-1.45 | normal | ss01 | Fine print, timestamps | +| Caption Tabular | sohne-var | 12px (0.75rem) | 300-400 | 1.33 | -0.36px | tnum | Financial data, numbers | +| Micro | sohne-var | 10px (0.63rem) | 300 | 1.15 (tight) | 0.1px | ss01 | Tiny labels, axis markers | +| Micro Tabular | sohne-var | 10px (0.63rem) | 300 | 1.15 (tight) | -0.3px | tnum | Chart data, small numbers | +| Nano | sohne-var | 8px (0.50rem) | 300 | 1.07 (tight) | normal | ss01 | Smallest labels | +| Code Body | SourceCodePro | 12px (0.75rem) | 500 | 2.00 (relaxed) | normal | -- | Code blocks, syntax | +| Code Bold | SourceCodePro | 12px (0.75rem) | 700 | 2.00 (relaxed) | normal | -- | Bold code, keywords | +| Code Label | SourceCodePro | 12px (0.75rem) | 500 | 2.00 (relaxed) | normal | uppercase | Technical labels | +| Code Micro | SourceCodePro | 9px (0.56rem) | 500 | 1.00 (tight) | normal | ss01 | Tiny code annotations | + +### Principles +- **Light weight as signature**: Weight 300 at display sizes is Stripe's most distinctive typographic choice. Where others use 600-700 to command attention, Stripe uses lightness as luxury -- the text is so confident it doesn't need weight to be authoritative. +- **ss01 everywhere**: The `"ss01"` stylistic set is non-negotiable. It modifies specific glyphs (likely alternate `a`, `g`, `l` forms) to create a more geometric, contemporary feel across all sohne-var text. +- **Two OpenType modes**: `"ss01"` for display/body text, `"tnum"` for tabular numerals in financial data. These never overlap -- a number in a paragraph uses ss01, a number in a data table uses tnum. +- **Progressive tracking**: Letter-spacing tightens proportionally with size: -1.4px at 56px, -0.96px at 48px, -0.64px at 32px, -0.26px at 26px, normal at 16px and below. +- **Two-weight simplicity**: Primarily 300 (body and headings) and 400 (UI/buttons). No bold (700) in the primary font -- SourceCodePro uses 500/700 for code contrast. + +## 4. Component Stylings + +### Buttons + +**Primary Purple** +- Background: `#533afd` +- Text: `#ffffff` +- Padding: 8px 16px +- Radius: 4px +- Font: 16px sohne-var weight 400, `"ss01"` +- Hover: `#4434d4` background +- Use: Primary CTA ("Start now", "Contact sales") + +**Ghost / Outlined** +- Background: transparent +- Text: `#533afd` +- Padding: 8px 16px +- Radius: 4px +- Border: `1px solid #b9b9f9` +- Font: 16px sohne-var weight 400, `"ss01"` +- Hover: background shifts to `rgba(83,58,253,0.05)` +- Use: Secondary actions + +**Transparent Info** +- Background: transparent +- Text: `#2874ad` +- Padding: 8px 16px +- Radius: 4px +- Border: `1px solid rgba(43,145,223,0.2)` +- Use: Tertiary/info-level actions + +**Neutral Ghost** +- Background: transparent (`rgba(255,255,255,0)`) +- Text: `rgba(16,16,16,0.3)` +- Padding: 8px 16px +- Radius: 4px +- Outline: `1px solid rgb(212,222,233)` +- Use: Disabled or muted actions + +### Cards & Containers +- Background: `#ffffff` +- Border: `1px solid #e5edf5` (standard) or `1px solid #061b31` (dark accent) +- Radius: 4px (tight), 5px (standard), 6px (comfortable), 8px (featured) +- Shadow (standard): `rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px` +- Shadow (ambient): `rgba(23,23,23,0.08) 0px 15px 35px 0px` +- Hover: shadow intensifies, often adding the blue-tinted layer + +### Badges / Tags / Pills +**Neutral Pill** +- Background: `#ffffff` +- Text: `#000000` +- Padding: 0px 6px +- Radius: 4px +- Border: `1px solid #f6f9fc` +- Font: 11px weight 400 + +**Success Badge** +- Background: `rgba(21,190,83,0.2)` +- Text: `#108c3d` +- Padding: 1px 6px +- Radius: 4px +- Border: `1px solid rgba(21,190,83,0.4)` +- Font: 10px weight 300 + +### Inputs & Forms +- Border: `1px solid #e5edf5` +- Radius: 4px +- Focus: `1px solid #533afd` or purple ring +- Label: `#273951`, 14px sohne-var +- Text: `#061b31` +- Placeholder: `#64748d` + +### Navigation +- Clean horizontal nav on white, sticky with blur backdrop +- Brand logotype left-aligned +- Links: sohne-var 14px weight 400, `#061b31` text with `"ss01"` +- Radius: 6px on nav container +- CTA: purple button right-aligned ("Sign in", "Start now") +- Mobile: hamburger toggle with 6px radius + +### Decorative Elements +**Dashed Borders** +- `1px dashed #362baa` (purple) for placeholder/drop zones +- `1px dashed #ffd7ef` (magenta) for magenta-themed decorative borders + +**Gradient Accents** +- Ruby-to-magenta gradients (`#ea2261` to `#f96bee`) for hero decorations +- Brand dark sections use `#1c1e54` backgrounds with white text + +## 5. Layout Principles + +### Spacing System +- Base unit: 8px +- Scale: 1px, 2px, 4px, 6px, 8px, 10px, 11px, 12px, 14px, 16px, 18px, 20px +- Notable: The scale is dense at the small end (every 2px from 4-12), reflecting Stripe's precision-oriented UI for financial data + +### Grid & Container +- Max content width: approximately 1080px +- Hero: centered single-column with generous padding, lightweight headlines +- Feature sections: 2-3 column grids for feature cards +- Full-width dark sections with `#1c1e54` background for brand immersion +- Code/dashboard previews as contained cards with blue-tinted shadows + +### Whitespace Philosophy +- **Precision spacing**: Unlike the vast emptiness of minimalist systems, Stripe uses measured, purposeful whitespace. Every gap is a deliberate typographic choice. +- **Dense data, generous chrome**: Financial data displays (tables, charts) are tightly packed, but the UI chrome around them is generously spaced. This creates a sense of controlled density -- like a well-organized spreadsheet in a beautiful frame. +- **Section rhythm**: White sections alternate with dark brand sections (`#1c1e54`), creating a dramatic light/dark cadence that prevents monotony without introducing arbitrary color. + +### Border Radius Scale +- Micro (1px): Fine-grained elements, subtle rounding +- Standard (4px): Buttons, inputs, badges, cards -- the workhorse +- Comfortable (5px): Standard card containers +- Relaxed (6px): Navigation, larger interactive elements +- Large (8px): Featured cards, hero elements +- Compound: `0px 0px 6px 6px` for bottom-rounded containers (tab panels, dropdown footers) + +## 6. Depth & Elevation + +| Level | Treatment | Use | +|-------|-----------|-----| +| Flat (Level 0) | No shadow | Page background, inline text | +| Ambient (Level 1) | `rgba(23,23,23,0.06) 0px 3px 6px` | Subtle card lift, hover hints | +| Standard (Level 2) | `rgba(23,23,23,0.08) 0px 15px 35px` | Standard cards, content panels | +| Elevated (Level 3) | `rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px` | Featured cards, dropdowns, popovers | +| Deep (Level 4) | `rgba(3,3,39,0.25) 0px 14px 21px -14px, rgba(0,0,0,0.1) 0px 8px 17px -8px` | Modals, floating panels | +| Ring (Accessibility) | `2px solid #533afd` outline | Keyboard focus ring | + +**Shadow Philosophy**: Stripe's shadow system is built on a principle of chromatic depth. Where most design systems use neutral gray or black shadows, Stripe's primary shadow color (`rgba(50,50,93,0.25)`) is a deep blue-gray that echoes the brand's navy palette. This creates shadows that don't just add depth -- they add brand atmosphere. The multi-layer approach pairs this blue-tinted shadow with a pure black secondary layer (`rgba(0,0,0,0.1)`) at a different offset, creating a parallax-like depth where the branded shadow sits farther from the element and the neutral shadow sits closer. The negative spread values (-30px, -18px) ensure shadows don't extend beyond the element's footprint horizontally, keeping elevation vertical and controlled. + +### Decorative Depth +- Dark brand sections (`#1c1e54`) create immersive depth through background color contrast +- Gradient overlays with ruby-to-magenta transitions for hero decorations +- Shadow color `rgba(0,55,112,0.08)` (`--hds-color-shadow-sm-top`) for top-edge shadows on sticky elements + +## 7. Do's and Don'ts + +### Do +- Use sohne-var with `"ss01"` on every text element -- the stylistic set IS the brand +- Use weight 300 for all headlines and body text -- lightness is the signature +- Apply blue-tinted shadows (`rgba(50,50,93,0.25)`) for all elevated elements +- Use `#061b31` (deep navy) for headings instead of `#000000` -- the warmth matters +- Keep border-radius between 4px-8px -- conservative rounding is intentional +- Use `"tnum"` for any tabular/financial number display +- Layer shadows: blue-tinted far + neutral close for depth parallax +- Use `#533afd` purple as the primary interactive/CTA color + +### Don't +- Don't use weight 600-700 for sohne-var headlines -- weight 300 is the brand voice +- Don't use large border-radius (12px+, pill shapes) on cards or buttons -- Stripe is conservative +- Don't use neutral gray shadows -- always tint with blue (`rgba(50,50,93,...)`) +- Don't skip `"ss01"` on any sohne-var text -- the alternate glyphs define the personality +- Don't use pure black (`#000000`) for headings -- always `#061b31` deep navy +- Don't use warm accent colors (orange, yellow) for interactive elements -- purple is primary +- Don't apply positive letter-spacing at display sizes -- Stripe tracks tight +- Don't use the magenta/ruby accents for buttons or links -- they're decorative/gradient only + +## 8. Responsive Behavior + +### Breakpoints +| Name | Width | Key Changes | +|------|-------|-------------| +| Mobile | <640px | Single column, reduced heading sizes, stacked cards | +| Tablet | 640-1024px | 2-column grids, moderate padding | +| Desktop | 1024-1280px | Full layout, 3-column feature grids | +| Large Desktop | >1280px | Centered content with generous margins | + +### Touch Targets +- Buttons use comfortable padding (8px-16px vertical) +- Navigation links at 14px with adequate spacing +- Badges have 6px horizontal padding minimum for tap targets +- Mobile nav toggle with 6px radius button + +### Collapsing Strategy +- Hero: 56px display -> 32px on mobile, weight 300 maintained +- Navigation: horizontal links + CTAs -> hamburger toggle +- Feature cards: 3-column -> 2-column -> single column stacked +- Dark brand sections: maintain full-width treatment, reduce internal padding +- Financial data tables: horizontal scroll on mobile +- Section spacing: 64px+ -> 40px on mobile +- Typography scale compresses: 56px -> 48px -> 32px hero sizes across breakpoints + +### Image Behavior +- Dashboard/product screenshots maintain blue-tinted shadow at all sizes +- Hero gradient decorations simplify on mobile +- Code blocks maintain `SourceCodePro` treatment, may horizontally scroll +- Card images maintain consistent 4px-6px border-radius + +## 9. Agent Prompt Guide + +### Quick Color Reference +- Primary CTA: Stripe Purple (`#533afd`) +- CTA Hover: Purple Dark (`#4434d4`) +- Background: Pure White (`#ffffff`) +- Heading text: Deep Navy (`#061b31`) +- Body text: Slate (`#64748d`) +- Label text: Dark Slate (`#273951`) +- Border: Soft Blue (`#e5edf5`) +- Link: Stripe Purple (`#533afd`) +- Dark section: Brand Dark (`#1c1e54`) +- Success: Green (`#15be53`) +- Accent decorative: Ruby (`#ea2261`), Magenta (`#f96bee`) + +### Example Component Prompts +- "Create a hero section on white background. Headline at 48px sohne-var weight 300, line-height 1.15, letter-spacing -0.96px, color #061b31, font-feature-settings 'ss01'. Subtitle at 18px weight 300, line-height 1.40, color #64748d. Purple CTA button (#533afd, 4px radius, 8px 16px padding, white text) and ghost button (transparent, 1px solid #b9b9f9, #533afd text, 4px radius)." +- "Design a card: white background, 1px solid #e5edf5 border, 6px radius. Shadow: rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px. Title at 22px sohne-var weight 300, letter-spacing -0.22px, color #061b31, 'ss01'. Body at 16px weight 300, #64748d." +- "Build a success badge: rgba(21,190,83,0.2) background, #108c3d text, 4px radius, 1px 6px padding, 10px sohne-var weight 300, border 1px solid rgba(21,190,83,0.4)." +- "Create navigation: white sticky header with backdrop-filter blur(12px). sohne-var 14px weight 400 for links, #061b31 text, 'ss01'. Purple CTA 'Start now' right-aligned (#533afd bg, white text, 4px radius). Nav container 6px radius." +- "Design a dark brand section: #1c1e54 background, white text. Headline 32px sohne-var weight 300, letter-spacing -0.64px, 'ss01'. Body 16px weight 300, rgba(255,255,255,0.7). Cards inside use rgba(255,255,255,0.1) border with 6px radius." + +### Iteration Guide +1. Always enable `font-feature-settings: "ss01"` on sohne-var text -- this is the brand's typographic DNA +2. Weight 300 is the default; use 400 only for buttons/links/navigation +3. Shadow formula: `rgba(50,50,93,0.25) 0px Y1 B1 -S1, rgba(0,0,0,0.1) 0px Y2 B2 -S2` where Y1/B1 are larger (far shadow) and Y2/B2 are smaller (near shadow) +4. Heading color is `#061b31` (deep navy), body is `#64748d` (slate), labels are `#273951` (dark slate) +5. Border-radius stays in the 4px-8px range -- never use pill shapes or large rounding +6. Use `"tnum"` for any numbers in tables, charts, or financial displays +7. Dark sections use `#1c1e54` -- not black, not gray, but a deep branded indigo +8. SourceCodePro for code at 12px/500 with 2.00 line-height (very generous for readability) diff --git a/src/app/(main)/(marketing)/dynamic-barcode-generator/page.tsx b/src/app/(main)/(marketing)/dynamic-barcode-generator/page.tsx new file mode 100644 index 0000000..5945ff3 --- /dev/null +++ b/src/app/(main)/(marketing)/dynamic-barcode-generator/page.tsx @@ -0,0 +1,1393 @@ +import React from 'react'; +import type { Metadata } from 'next'; +import { Button } from '@/components/ui/Button'; +import { Card } from '@/components/ui/Card'; +import SeoJsonLd from '@/components/SeoJsonLd'; +import Breadcrumbs, { BreadcrumbItem } from '@/components/Breadcrumbs'; +import { breadcrumbSchema } from '@/lib/schema'; +import { FAQSection } from '@/components/aeo/FAQSection'; +import { AnswerFirstBlock } from '@/components/marketing/AnswerFirstBlock'; +import { GrowthLinksSection } from '@/components/marketing/GrowthLinksSection'; +import { + MarketingPageTracker, + TrackedCtaLink, +} from '@/components/marketing/MarketingAnalytics'; + +export const metadata: Metadata = { + title: { + absolute: 'Dynamic Barcode Generator – Trackable, Editable Barcodes', + }, + description: + 'Generate dynamic barcodes you can update after printing. Change the redirect URL anytime, track every scan, and manage all barcodes in one dashboard. Free to start.', + keywords: + 'dynamic barcode generator, trackable barcode, editable barcode, barcode redirect, barcode analytics, dynamic barcode, barcode scanner tracking', + alternates: { + canonical: 'https://www.qrmaster.net/dynamic-barcode-generator', + languages: { + 'x-default': 'https://www.qrmaster.net/dynamic-barcode-generator', + en: 'https://www.qrmaster.net/dynamic-barcode-generator', + }, + }, + openGraph: { + title: 'Dynamic Barcode Generator – Trackable, Editable Barcodes', + description: + 'Generate dynamic barcodes that redirect to any URL — and can be updated after printing. Track every scan with device, time, and location data.', + url: 'https://www.qrmaster.net/dynamic-barcode-generator', + type: 'website', + images: ['/og-image.png'], + }, + twitter: { + title: 'Dynamic Barcode Generator – Trackable, Editable Barcodes', + description: + 'Generate dynamic barcodes that redirect to any URL — and can be updated after printing. Track every scan with device, time, and location data.', + }, +}; + +const featureCards = [ + { + title: 'Update destination after print', + description: + 'Keep the same barcode on badges, packaging inserts, or digital displays while changing the URL behind it at any time from your dashboard.', + }, + { + title: 'Track every smartphone scan', + description: + 'See device type, time, country, and referrer for every scan — in the same dashboard as your QR codes.', + }, + { + title: 'CODE128 and CODE39 supported', + description: + 'Dynamic barcodes use URL-capable formats only. CODE128 is the recommended choice for broad scanner compatibility.', + }, + { + title: 'Manage codes in one place', + description: + 'Pause, redirect, or delete any barcode from your dashboard without touching the printed label.', + }, + { + title: 'Download SVG or PNG', + description: + 'Export print-ready barcode assets directly. Use them on labels, event badges, or digital displays.', + }, + { + title: 'Scale by plan', + description: + 'The Free plan includes 3 active dynamic barcodes. Pro includes 50, and Business includes 500.', + }, +]; + +const staticVsDynamic = [ + { + feature: 'Change redirect URL after printing', + static: false, + dynamic: true, + }, + { + feature: 'Track scan analytics (device, country, time)', + static: false, + dynamic: true, + }, + { + feature: 'Pause or deactivate without reprinting', + static: false, + dynamic: true, + }, + { + feature: 'Manage all barcodes in one dashboard', + static: false, + dynamic: true, + }, + { + feature: 'Use across changing campaigns', + static: false, + dynamic: true, + }, +]; + +const useCases = [ + { + title: 'Event badges & access passes', + description: + 'Print CODE128 barcodes on event badges that link to personalized schedules, session recordings, or attendee portals. Update the destination as content changes.', + example: + 'Conference badges with a dynamic barcode redirect to an attendee agenda page — updated in real time as the schedule changes. Scanned with smartphone cameras at check-in kiosks.', + }, + { + title: 'Packaging inserts & product cards', + description: + 'Link physical inserts inside product boxes to setup guides, how-to videos, or support pages. Update the destination when content moves — no reprint needed.', + example: + 'A hardware brand updates the setup guide URL six months post-launch to a new video format — without reprinting a single insert.', + }, + { + title: 'Digital signage & screens', + description: + 'Display a CODE128 barcode on screens or monitors. Visitors scan with their smartphone and land on a current URL — updated from the dashboard without changing the display.', + example: + 'A trade-show monitor shows a barcode linking to the current product demo page — redirected to a post-show recording after the event.', + }, + { + title: 'Internal asset tracking (browser-based)', + description: + 'Use CODE128 barcodes on internal assets where staff scan with smartphones to open web-based inventory or maintenance forms. URLs update as systems change.', + example: + 'IT tags company laptops with dynamic barcodes. Staff scan to open the current helpdesk form — URL updated when the ticketing system moves.', + }, +]; + +const faqItems = [ + { + question: 'What is a dynamic barcode?', + answer: + 'A dynamic barcode (CODE128 or CODE39) encodes a short redirect URL. When scanned with a smartphone camera, it opens a browser and routes through QR Master to your current destination — which you can update without changing the printed barcode. Note: it requires a smartphone scan, not a POS laser scanner.', + }, + { + question: 'How is a dynamic barcode different from a static one?', + answer: + 'A static barcode directly encodes a fixed value — a number, URL, or product code — that cannot be changed after printing. A dynamic barcode encodes a redirect link so the final destination can be updated at any time from your dashboard.', + }, + { + question: + 'Which barcode formats does QR Master support for dynamic barcodes?', + answer: + 'Dynamic barcodes require a format that can encode a URL. QR Master supports CODE128 and CODE39 for dynamic barcodes. Numeric-only formats (EAN-13, UPC, ITF-14, MSI, pharmacode) are available as static barcodes only via the free barcode generator tool.', + }, + { + question: 'Can I track who scanned my barcode?', + answer: + 'Yes. Every scan is logged with device type, operating system, country, and time. Scan data appears in your QR Master analytics dashboard alongside your QR codes.', + }, + { + question: 'How many dynamic barcodes can I create?', + answer: + 'The Free plan includes 3 active dynamic barcodes. Pro includes 50, and Business includes 500. All plans share the same dashboard for barcodes and QR codes.', + }, + { + question: 'Can I change a barcode destination after printing?', + answer: + 'Yes — that is the core value of a dynamic barcode. Log in to your dashboard, find the barcode, and update the redirect URL. Scanners immediately reach the new destination.', + }, + { + question: 'Do I need to reprint if the linked page changes?', + answer: + 'No. Dynamic barcodes decouple the printed label from the destination. Update the URL from your dashboard; the physical label stays unchanged.', + }, + { + question: + 'What is the difference between a dynamic barcode and a dynamic QR code?', + answer: + 'Both use the same redirect mechanism. A barcode uses a linear format (CODE128, EAN-13, etc.) readable by laser scanners and most POS systems. A QR code uses a 2D matrix format readable by smartphone cameras. Use barcodes where laser scanner infrastructure exists; use QR codes for consumer-facing materials.', + }, +]; + +const softwareSchema = { + '@context': 'https://schema.org', + '@type': 'SoftwareApplication', + '@id': 'https://www.qrmaster.net/dynamic-barcode-generator#software', + name: 'QR Master - Dynamic Barcode Generator', + applicationCategory: 'BusinessApplication', + operatingSystem: 'Web Browser', + offers: { + '@type': 'Offer', + price: '0', + priceCurrency: 'EUR', + availability: 'https://schema.org/InStock', + }, + description: + 'Generate dynamic barcodes with redirect URLs you can update after printing. Track every scan and manage all barcodes in one dashboard.', + featureList: [ + 'Update barcode redirect URL after printing', + 'Track scan analytics (device, country, time)', + 'Supports CODE128, EAN-13, UPC, CODE39, ITF-14, MSI, pharmacode', + 'Export print-ready SVG and PNG assets', + 'Manage barcodes and QR codes in one dashboard', + ], +}; + +const howToSchema = { + '@context': 'https://schema.org', + '@type': 'HowTo', + '@id': 'https://www.qrmaster.net/dynamic-barcode-generator#howto', + name: 'How to create a dynamic barcode', + datePublished: '2024-01-01', + dateModified: '2026-04-01', + author: { + '@type': 'Person', + name: 'Timo Knuth', + url: 'https://www.qrmaster.net/authors/timo', + }, + description: + 'Create a dynamic barcode that redirects to a URL you can update anytime — without reprinting the label.', + totalTime: 'PT3M', + step: [ + { + '@type': 'HowToStep', + position: 1, + name: 'Create an account', + text: 'Sign up for a QR Master account and open the Create dashboard.', + url: 'https://www.qrmaster.net/signup', + }, + { + '@type': 'HowToStep', + position: 2, + name: 'Select Barcode type', + text: 'Choose "Barcode" as the content type, select the format (CODE128, EAN-13, etc.), and enter your destination URL.', + url: 'https://www.qrmaster.net/signup', + }, + { + '@type': 'HowToStep', + position: 3, + name: 'Download and apply', + text: 'Export the barcode as SVG or PNG and apply it to labels, packaging, or digital assets.', + }, + { + '@type': 'HowToStep', + position: 4, + name: 'Update anytime', + text: 'Change the destination URL from your dashboard whenever needed — no reprint required.', + }, + ], +}; + +const faqSchema = { + '@context': 'https://schema.org', + '@type': 'FAQPage', + '@id': 'https://www.qrmaster.net/dynamic-barcode-generator#faq', + mainEntity: faqItems.map((item) => ({ + '@type': 'Question', + name: item.question, + acceptedAnswer: { + '@type': 'Answer', + text: item.answer, + }, + })), +}; + +const breadcrumbItems: BreadcrumbItem[] = [ + { name: 'Home', url: '/' }, + { name: 'Dynamic Barcode Generator', url: '/dynamic-barcode-generator' }, +]; + +const relatedLinks = [ + { + href: '/dynamic-qr-code-generator', + title: 'Dynamic QR Code Generator', + description: + 'The same redirect-and-track approach for 2D QR codes — ideal for consumer-facing print materials scanned by smartphones.', + ctaLabel: 'Create dynamic QR codes', + }, + { + href: '/bulk-qr-code-generator', + title: 'Bulk Barcode & QR Generator', + description: + 'Upload a CSV and generate hundreds of dynamic barcodes or QR codes in one batch — with tracking for every code.', + ctaLabel: 'Generate codes in bulk', + }, + { + href: '/qr-code-analytics', + title: 'Barcode & QR Analytics', + description: + 'See device, country, time, and UTM data for every scan across all your barcodes and QR codes in one unified view.', + ctaLabel: 'View analytics features', + }, + { + href: '/use-cases/packaging-qr-codes', + title: 'Packaging Use Case', + description: + 'How brands use dynamic codes on product packaging to keep printed materials useful after URLs, campaigns, or pages change.', + ctaLabel: 'Explore packaging use case', + }, + { + href: '/reprint-calculator', + title: 'Reprint Cost Calculator', + description: + 'Calculate how much static label reprints cost vs. one active dynamic barcode that never needs replacing.', + ctaLabel: 'Calculate your savings', + }, + { + href: '/tools/barcode-generator', + title: 'Free Static Barcode Generator', + description: + 'Need a one-time barcode with no redirect? Use the free static barcode generator — no account required.', + ctaLabel: 'Generate a static barcode', + }, +]; + +export default function DynamicBarcodeGeneratorPage() { + return ( + <> + + +
+ {/* HERO */} +
+