From fb9058688ee9bb46e7bc0cd2f916583f3bfaf771 Mon Sep 17 00:00:00 2001 From: Timo Knuth Date: Sat, 10 Jan 2026 00:26:05 +0100 Subject: [PATCH] Fix, complete all tool updates --- SIDE_PROJECT_STRATEGY.md | 582 +++++++------- growth_strategies.md | 194 ++--- ideen.md | 80 +- public/robots.txt | 38 +- .../tools/crypto-qr-code/CryptoGenerator.tsx | 742 ++++++++--------- .../(marketing)/tools/crypto-qr-code/page.tsx | 724 ++++++++--------- .../tools/email-qr-code/EmailGenerator.tsx | 594 +++++++------- .../(marketing)/tools/email-qr-code/page.tsx | 546 ++++++------- .../tools/event-qr-code/EventGenerator.tsx | 662 +++++++-------- .../(marketing)/tools/event-qr-code/page.tsx | 706 ++++++++-------- .../facebook-qr-code/FacebookGenerator.tsx | 496 ++++++------ .../tools/facebook-qr-code/page.tsx | 730 ++++++++--------- .../GeolocationGenerator.tsx | 586 +++++++------- .../tools/geolocation-qr-code/page.tsx | 720 ++++++++--------- .../instagram-qr-code/InstagramGenerator.tsx | 506 ++++++------ .../tools/instagram-qr-code/page.tsx | 708 ++++++++-------- .../tools/paypal-qr-code/PayPalGenerator.tsx | 684 ++++++++-------- .../(marketing)/tools/paypal-qr-code/page.tsx | 716 ++++++++--------- .../tools/phone-qr-code/PhoneGenerator.tsx | 496 ++++++------ .../(marketing)/tools/phone-qr-code/page.tsx | 724 ++++++++--------- .../tools/sms-qr-code/SMSGenerator.tsx | 534 ++++++------- .../(marketing)/tools/sms-qr-code/page.tsx | 630 +++++++-------- .../tools/teams-qr-code/TeamsGenerator.tsx | 638 +++++++-------- .../(marketing)/tools/teams-qr-code/page.tsx | 662 +++++++-------- .../tools/text-qr-code/TextGenerator.tsx | 492 ++++++------ .../(marketing)/tools/text-qr-code/page.tsx | 704 ++++++++-------- .../tools/tiktok-qr-code/TikTokGenerator.tsx | 506 ++++++------ .../(marketing)/tools/tiktok-qr-code/page.tsx | 724 ++++++++--------- .../twitter-qr-code/TwitterGenerator.tsx | 506 ++++++------ .../tools/twitter-qr-code/page.tsx | 726 ++++++++--------- .../tools/url-qr-code/URLGenerator.tsx | 492 ++++++------ .../(marketing)/tools/url-qr-code/page.tsx | 614 +++++++------- .../tools/vcard-qr-code/VCardGenerator.tsx | 698 ++++++++-------- .../(marketing)/tools/vcard-qr-code/page.tsx | 640 +++++++-------- .../whatsapp-qr-code/WhatsAppGenerator.tsx | 536 ++++++------- .../tools/whatsapp-qr-code/page.tsx | 726 ++++++++--------- .../tools/wifi-qr-code/WiFiGenerator.tsx | 614 +++++++------- .../(marketing)/tools/wifi-qr-code/page.tsx | 738 ++++++++--------- .../youtube-qr-code/YouTubeGenerator.tsx | 492 ++++++------ .../tools/youtube-qr-code/page.tsx | 716 ++++++++--------- .../tools/zoom-qr-code/ZoomGenerator.tsx | 606 +++++++------- .../(marketing)/tools/zoom-qr-code/page.tsx | 662 +++++++-------- src/app/sitemap.ts | 212 ++--- src/components/marketing/FreeToolsGrid.tsx | 506 ++++++------ src/components/marketing/HomePageClient.tsx | 112 +-- src/components/seo/BreadcrumbSchema.tsx | 162 ++-- src/components/ui/Textarea.tsx | 48 +- src/i18n/en.json | 756 +++++++++--------- src/middleware.ts | 132 +-- 49 files changed, 13409 insertions(+), 13409 deletions(-) diff --git a/SIDE_PROJECT_STRATEGY.md b/SIDE_PROJECT_STRATEGY.md index fd7bcb7..168aa94 100644 --- a/SIDE_PROJECT_STRATEGY.md +++ b/SIDE_PROJECT_STRATEGY.md @@ -1,291 +1,291 @@ -# 🚀 Side Project Marketing Strategy - -> **"Engineering as Marketing"** – Kostenlose Micro-Tools bauen, um SEO-Traffic abzufangen und in zahlende Kunden zu konvertieren. - -**Status:** Planung abgeschlossen, bereit für Implementierung -**Autor:** QR Master Team -**Letzte Aktualisierung:** 2026-01-08 - ---- - -## Executive Summary - -Wir nutzen die bewiesene "Engineering as Marketing" Strategie (bekannt von HubSpot's Website Grader, Ahrefs' Free Tools, Shopify's Business Tools), um organischen Traffic über spezialisierte, kostenlose QR-Generatoren zu gewinnen. - -### Das Konzept in einem Satz - -> Anstatt gegen "QR Code Generator" (DA 90+ Konkurrenz) zu kämpfen, bauen wir 10 spezialisierte Tools für Long-Tail-Keywords wie "WiFi QR Code erstellen" oder "VCard QR Generator". - -### Warum das funktioniert - -1. **Weniger Konkurrenz:** "WiFi QR Code Generator" hat 1/10 der Konkurrenz von "QR Code Generator" -2. **Höhere Kaufabsicht:** Wer "Restaurant Menu QR Code" sucht, ist bereit für ein Premium-Tool -3. **Natürliche Backlinks:** Leute teilen nützliche Tools ("Hier, dieser Generator ist kostenlos") -4. **Zero Marginal Cost:** Client-Side Generierung = 0€ Serverkosten pro User - ---- - -## ROI Projektion (Konservativ) - -| Metrik | Monat 3 | Monat 6 | Monat 12 | -|--------|---------|---------|----------| -| Organischer Traffic (alle Tools) | 2.000 | 10.000 | 25.000 | -| Free Signups (20% Conv.) | 400 | 2.000 | 5.000 | -| Paid Customers (3% der Signups) | 12 | 60 | 150 | -| **Zusätzlicher MRR** | **108€** | **540€** | **1.350€** | - -> **Benchmarks verwendet:** 2-3% Free-to-Paid Conversion (Industry Standard), 20% Tool-to-Signup (optimistisch, aber erreichbar mit gutem UX). - ---- - -## Die Tools-Roadmap - -### Phase 1: Quick Wins (Woche 1-2) - -Fokus auf **hohes Suchvolumen + geringe Komplexität**. - -| Tool | URL | Geschätztes SV | Implementierungs-Aufwand | -|------|-----|----------------|-------------------------| -| **WiFi QR Generator** | `/tools/wifi-qr-code` | 40.000/Monat | 4h | -| **VCard QR Generator** | `/tools/vcard-qr-code` | 15.000/Monat | 4h | -| **WhatsApp QR Generator** | `/tools/whatsapp-qr-code` | 20.000/Monat | 3h | - -### Phase 2: Monetization Focus (Woche 3-4) - -Fokus auf **hohe Conversion-Wahrscheinlichkeit** (B2B Use Cases). - -| Tool | URL | Geschätztes SV | Upsell-Hook | -|------|-----|----------------|-------------| -| **App Store Link QR** | `/tools/app-store-qr-code` | 5.000/Monat | Smart Routing (iOS/Android) | -| **PDF to QR** | `/tools/pdf-qr-code` | 15.000/Monat | PDF Hosting (benötigt Account) | -| **Menu QR Generator** | `/tools/menu-qr-code` | 8.000/Monat | Multi-Sprache, Analytics | - -### Phase 3: Differenzierung (Monat 2+) - -Fokus auf **Unique Features** die Konkurrenten nicht haben. - -| Tool | URL | Differenzierung | -|------|-----|-----------------| -| **Barcode Generator** | `/tools/barcode-generator` | EAN/UPC/ISBN Unterstützung | -| **Bitcoin/Crypto QR** | `/tools/bitcoin-qr-code` | Multi-Wallet Format | -| **AI Art QR (Viral)** | `/tools/ai-qr-code` | Stable Diffusion Integration | - -## Geplantes Portfolio: Kostenlose Statische Generatoren (15 Typen) - -Wir werden die folgenden 15 statischen QR-Code-Typen anbieten. Diese sind **dauerhaft kostenlos** und erfordern keine Server-Infrastruktur für Redirects (im Gegensatz zu dynamischen Codes). - -> **Wichtig:** Alle diese Generatoren stehen sowohl **öffentlich als SEO-Landingpages** zur Verfügung (zur Neukundengewinnung), als auch im **eingeloggten Bereich** für registrierte Nutzer (für Komfort und Zentralisierung). - -1. **URL / Link**: Der Standard. Öffnet eine Webseite. -2. **Text**: Zeigt reinen Text an (bis zu 300 Zeichen). -3. **WiFi**: Verbindet direkt mit einem WLAN-Netzwerk (WPA/WEP/Open). -4. **VCard / Kontakt**: Speichert einen Kontakt direkt im Adressbuch. -5. **WhatsApp**: Startet einen Chat mit einer Nummer (und optionalem Text). -6. **E-Mail**: Öffnet das E-Mail-Programm mit Empfänger, Betreff und Body. -7. **SMS**: Bereitet eine SMS an eine Nummer vor. -8. **Anruf / Tel**: Startet einen Anruf an eine Nummer. -9. **Event / Kalender**: Fügt einen Termin zum Kalender hinzu (.ics). -10. **Geo / Maps**: Öffnet einen Standort in Google Maps/Apple Maps. -11. **Facebook**: Öffnet ein Profil oder eine Seite. -12. **Instagram**: Öffnet ein Instagram-Profil. -13. **Twitter / X**: Öffnet ein Profil oder erstellt einen Tweet. -14. **YouTube**: Öffnet ein Video oder einen Kanal. -15. **TikTok**: Öffnet ein TikTok-Profil. - -Diese Breite deckt 99% der "Everyday Use Cases" ab und maximiert die SEO-Angriffsfläche. - ---- - -## Technische Architektur - -### Warum Client-Side Generierung? - -``` -┌─────────────────────────────────────────────────────────────┐ -│ USER BROWSER │ -│ │ -│ ┌─────────────┐ ┌──────────────┐ ┌────────────────┐ │ -│ │ Form Input │ -> │ qrcode.js │ -> │ Canvas/SVG │ │ -│ │ (SSID, PW) │ │ (generation) │ │ (download) │ │ -│ └─────────────┘ └──────────────┘ └────────────────┘ │ -│ │ -│ KEINE Server-Calls! │ -└─────────────────────────────────────────────────────────────┘ -``` - -**Vorteile:** -- **Privatsphäre:** Passwörter verlassen nie den Browser -- **Speed:** Instant Generation (kein Network Latency) -- **Kosten:** 0€ pro generiertem Code -- **Scale:** Kein Backend-Limit - -### Datei-Struktur (Next.js) - -``` -src/app/(marketing)/tools/ -├── wifi-qr-code/ -│ ├── page.tsx # Server Component (SEO) -│ └── WiFiGenerator.tsx # Client Component (Interaktion) -├── vcard-qr-code/ -│ ├── page.tsx -│ └── VCardGenerator.tsx -└── [weitere tools]/ -``` - -### Shared Components - -```typescript -// src/components/tools/QRDownloadButtons.tsx -// Wiederverwendbare Download-Buttons für alle Tools - -// src/components/tools/UpgradePrompt.tsx -// "Willst du Scans tracken?" CTA Box -``` - ---- - -## SEO-Strategie pro Tool-Page - -Jede Seite folgt dem gleichen bewährten Muster: - -### 1. Above the Fold: Sofort nutzbar - -``` -┌────────────────────────────────────────┐ -│ H1: Free WiFi QR Code Generator │ -│ Subline: Teile dein WLAN in Sekunden │ -│ │ -│ ┌─────────────────────────────────┐ │ -│ │ [SSID] [Password] [WPA▼] │ │ -│ │ │ │ -│ │ [ Generate QR Code ] │ │ -│ └─────────────────────────────────┘ │ -└────────────────────────────────────────┘ -``` - -**Regel:** Der User muss SOFORT interagieren können. Kein langer Intro-Text. - -### 2. Schema Markup (Pflicht!) - -```json -{ - "@context": "https://schema.org", - "@type": "SoftwareApplication", - "name": "WiFi QR Code Generator", - "applicationCategory": "UtilitiesApplication", - "operatingSystem": "Web Browser", - "offers": { - "@type": "Offer", - "price": "0", - "priceCurrency": "EUR" - }, - "aggregateRating": { - "@type": "AggregateRating", - "ratingValue": "4.8", - "ratingCount": "1247" - } -} -``` - -### 3. FAQ Section (Long-Tail Keywords) - -```markdown -## Häufig gestellte Fragen - -### Wie funktioniert ein WiFi QR Code? -Der QR Code enthält deine WLAN-Daten im Format... - -### Ist es sicher, mein WiFi Passwort in einem QR Code zu speichern? -Ja, der QR Code wird nur lokal in deinem Browser generiert... - -### Kann ich den QR Code später bearbeiten? -Dieser Generator erstellt statische Codes. Für editierbare... -``` - -### 4. Conversion Prompt (Der Hook) - -``` -┌─────────────────────────────────────────────────────────┐ -│ ✅ QR Code erfolgreich erstellt! │ -│ │ -│ ⚠️ Hinweis: Dies ist ein statischer Code. │ -│ Wenn du dein Passwort änderst, musst du neu drucken. │ -│ │ -│ → Erstelle einen dynamischen Code (jederzeit änderbar) │ -│ │ -│ Bonus: Sieh wer deinen Code scannt (Datum, Standort) │ -│ │ -│ [ Kostenlos registrieren ] │ -└─────────────────────────────────────────────────────────┘ -``` - ---- - -## Conversion Optimierung - -### Die "Limitation Awareness" Methode - -Jedes Tool zeigt nach der Generierung **sanft** die Limitierungen auf: - -| Tool | Statische Limitation | Upsell-Feature | -|------|---------------------|----------------| -| WiFi | Passwort-Änderung = Neudruck | Dynamischer Code (editierbar) | -| VCard | Kontakt-Update = Neudruck | Immer aktuelle Visitenkarte | -| Menu | Neue Speisekarte = Neudruck | PDF-Hosting + Analytics | -| App Store | Nur ein Store-Link | Smart Device Detection | - -### Email Capture vor Download - -**Optional (A/B testen):** -``` -"Gib deine Email ein, um den QR als hochauflösende PNG zu erhalten" -``` -→ Baut Email-Liste, auch wenn User nicht sofort konvertiert. - ---- - -## Erfolgsmetriken (KPIs) - -| KPI | Tool | Ziel (Monat 3) | -|-----|------|----------------| -| **Organic Sessions** | Google Analytics | 2.000/Monat | -| **QR Generations** | PostHog Event | 500/Monat | -| **Signup Clicks** | PostHog Event | 100/Monat | -| **Actual Signups** | DB Query | 50/Monat | -| **Paid Conversion** | Stripe | 5/Monat | - -### Tracking Events implementieren - -```typescript -// Auf jeder Tool-Page -posthog.capture('tool_qr_generated', { - tool: 'wifi', - format: 'png' -}); - -posthog.capture('tool_signup_cta_clicked', { - tool: 'wifi' -}); -``` - ---- - -## Nächste Schritte - -1. [ ] **Heute:** WiFi QR Generator implementieren (`/tools/wifi-qr-code`) -2. [ ] **Diese Woche:** VCard + WhatsApp Generator -3. [ ] **Nächste Woche:** Google Search Console monitoren für erste Impressions -4. [ ] **Monat 2:** A/B Test Email-Capture vs. Direct Download -5. [ ] **Monat 3:** Phase 2 Tools (App Store, PDF, Menu) - ---- - -## Referenzen & Inspiration - -- [HubSpot Website Grader](https://website.grader.com/) – Das Original "Engineering as Marketing" -- [Ahrefs Free Tools](https://ahrefs.com/free-seo-tools) – 12+ Free Tools als Lead Magnets -- [Shopify Business Tools](https://www.shopify.com/tools) – Logo Maker, Invoice Generator, etc. - ---- - -*Dieses Dokument wird regelmäßig aktualisiert basierend auf Traffic-Daten und Conversion-Rates.* +# 🚀 Side Project Marketing Strategy + +> **"Engineering as Marketing"** – Kostenlose Micro-Tools bauen, um SEO-Traffic abzufangen und in zahlende Kunden zu konvertieren. + +**Status:** Planung abgeschlossen, bereit für Implementierung +**Autor:** QR Master Team +**Letzte Aktualisierung:** 2026-01-08 + +--- + +## Executive Summary + +Wir nutzen die bewiesene "Engineering as Marketing" Strategie (bekannt von HubSpot's Website Grader, Ahrefs' Free Tools, Shopify's Business Tools), um organischen Traffic über spezialisierte, kostenlose QR-Generatoren zu gewinnen. + +### Das Konzept in einem Satz + +> Anstatt gegen "QR Code Generator" (DA 90+ Konkurrenz) zu kämpfen, bauen wir 10 spezialisierte Tools für Long-Tail-Keywords wie "WiFi QR Code erstellen" oder "VCard QR Generator". + +### Warum das funktioniert + +1. **Weniger Konkurrenz:** "WiFi QR Code Generator" hat 1/10 der Konkurrenz von "QR Code Generator" +2. **Höhere Kaufabsicht:** Wer "Restaurant Menu QR Code" sucht, ist bereit für ein Premium-Tool +3. **Natürliche Backlinks:** Leute teilen nützliche Tools ("Hier, dieser Generator ist kostenlos") +4. **Zero Marginal Cost:** Client-Side Generierung = 0€ Serverkosten pro User + +--- + +## ROI Projektion (Konservativ) + +| Metrik | Monat 3 | Monat 6 | Monat 12 | +|--------|---------|---------|----------| +| Organischer Traffic (alle Tools) | 2.000 | 10.000 | 25.000 | +| Free Signups (20% Conv.) | 400 | 2.000 | 5.000 | +| Paid Customers (3% der Signups) | 12 | 60 | 150 | +| **Zusätzlicher MRR** | **108€** | **540€** | **1.350€** | + +> **Benchmarks verwendet:** 2-3% Free-to-Paid Conversion (Industry Standard), 20% Tool-to-Signup (optimistisch, aber erreichbar mit gutem UX). + +--- + +## Die Tools-Roadmap + +### Phase 1: Quick Wins (Woche 1-2) + +Fokus auf **hohes Suchvolumen + geringe Komplexität**. + +| Tool | URL | Geschätztes SV | Implementierungs-Aufwand | +|------|-----|----------------|-------------------------| +| **WiFi QR Generator** | `/tools/wifi-qr-code` | 40.000/Monat | 4h | +| **VCard QR Generator** | `/tools/vcard-qr-code` | 15.000/Monat | 4h | +| **WhatsApp QR Generator** | `/tools/whatsapp-qr-code` | 20.000/Monat | 3h | + +### Phase 2: Monetization Focus (Woche 3-4) + +Fokus auf **hohe Conversion-Wahrscheinlichkeit** (B2B Use Cases). + +| Tool | URL | Geschätztes SV | Upsell-Hook | +|------|-----|----------------|-------------| +| **App Store Link QR** | `/tools/app-store-qr-code` | 5.000/Monat | Smart Routing (iOS/Android) | +| **PDF to QR** | `/tools/pdf-qr-code` | 15.000/Monat | PDF Hosting (benötigt Account) | +| **Menu QR Generator** | `/tools/menu-qr-code` | 8.000/Monat | Multi-Sprache, Analytics | + +### Phase 3: Differenzierung (Monat 2+) + +Fokus auf **Unique Features** die Konkurrenten nicht haben. + +| Tool | URL | Differenzierung | +|------|-----|-----------------| +| **Barcode Generator** | `/tools/barcode-generator` | EAN/UPC/ISBN Unterstützung | +| **Bitcoin/Crypto QR** | `/tools/bitcoin-qr-code` | Multi-Wallet Format | +| **AI Art QR (Viral)** | `/tools/ai-qr-code` | Stable Diffusion Integration | + +## Geplantes Portfolio: Kostenlose Statische Generatoren (15 Typen) + +Wir werden die folgenden 15 statischen QR-Code-Typen anbieten. Diese sind **dauerhaft kostenlos** und erfordern keine Server-Infrastruktur für Redirects (im Gegensatz zu dynamischen Codes). + +> **Wichtig:** Alle diese Generatoren stehen sowohl **öffentlich als SEO-Landingpages** zur Verfügung (zur Neukundengewinnung), als auch im **eingeloggten Bereich** für registrierte Nutzer (für Komfort und Zentralisierung). + +1. **URL / Link**: Der Standard. Öffnet eine Webseite. +2. **Text**: Zeigt reinen Text an (bis zu 300 Zeichen). +3. **WiFi**: Verbindet direkt mit einem WLAN-Netzwerk (WPA/WEP/Open). +4. **VCard / Kontakt**: Speichert einen Kontakt direkt im Adressbuch. +5. **WhatsApp**: Startet einen Chat mit einer Nummer (und optionalem Text). +6. **E-Mail**: Öffnet das E-Mail-Programm mit Empfänger, Betreff und Body. +7. **SMS**: Bereitet eine SMS an eine Nummer vor. +8. **Anruf / Tel**: Startet einen Anruf an eine Nummer. +9. **Event / Kalender**: Fügt einen Termin zum Kalender hinzu (.ics). +10. **Geo / Maps**: Öffnet einen Standort in Google Maps/Apple Maps. +11. **Facebook**: Öffnet ein Profil oder eine Seite. +12. **Instagram**: Öffnet ein Instagram-Profil. +13. **Twitter / X**: Öffnet ein Profil oder erstellt einen Tweet. +14. **YouTube**: Öffnet ein Video oder einen Kanal. +15. **TikTok**: Öffnet ein TikTok-Profil. + +Diese Breite deckt 99% der "Everyday Use Cases" ab und maximiert die SEO-Angriffsfläche. + +--- + +## Technische Architektur + +### Warum Client-Side Generierung? + +``` +┌─────────────────────────────────────────────────────────────┐ +│ USER BROWSER │ +│ │ +│ ┌─────────────┐ ┌──────────────┐ ┌────────────────┐ │ +│ │ Form Input │ -> │ qrcode.js │ -> │ Canvas/SVG │ │ +│ │ (SSID, PW) │ │ (generation) │ │ (download) │ │ +│ └─────────────┘ └──────────────┘ └────────────────┘ │ +│ │ +│ KEINE Server-Calls! │ +└─────────────────────────────────────────────────────────────┘ +``` + +**Vorteile:** +- **Privatsphäre:** Passwörter verlassen nie den Browser +- **Speed:** Instant Generation (kein Network Latency) +- **Kosten:** 0€ pro generiertem Code +- **Scale:** Kein Backend-Limit + +### Datei-Struktur (Next.js) + +``` +src/app/(marketing)/tools/ +├── wifi-qr-code/ +│ ├── page.tsx # Server Component (SEO) +│ └── WiFiGenerator.tsx # Client Component (Interaktion) +├── vcard-qr-code/ +│ ├── page.tsx +│ └── VCardGenerator.tsx +└── [weitere tools]/ +``` + +### Shared Components + +```typescript +// src/components/tools/QRDownloadButtons.tsx +// Wiederverwendbare Download-Buttons für alle Tools + +// src/components/tools/UpgradePrompt.tsx +// "Willst du Scans tracken?" CTA Box +``` + +--- + +## SEO-Strategie pro Tool-Page + +Jede Seite folgt dem gleichen bewährten Muster: + +### 1. Above the Fold: Sofort nutzbar + +``` +┌────────────────────────────────────────┐ +│ H1: Free WiFi QR Code Generator │ +│ Subline: Teile dein WLAN in Sekunden │ +│ │ +│ ┌─────────────────────────────────┐ │ +│ │ [SSID] [Password] [WPA▼] │ │ +│ │ │ │ +│ │ [ Generate QR Code ] │ │ +│ └─────────────────────────────────┘ │ +└────────────────────────────────────────┘ +``` + +**Regel:** Der User muss SOFORT interagieren können. Kein langer Intro-Text. + +### 2. Schema Markup (Pflicht!) + +```json +{ + "@context": "https://schema.org", + "@type": "SoftwareApplication", + "name": "WiFi QR Code Generator", + "applicationCategory": "UtilitiesApplication", + "operatingSystem": "Web Browser", + "offers": { + "@type": "Offer", + "price": "0", + "priceCurrency": "EUR" + }, + "aggregateRating": { + "@type": "AggregateRating", + "ratingValue": "4.8", + "ratingCount": "1247" + } +} +``` + +### 3. FAQ Section (Long-Tail Keywords) + +```markdown +## Häufig gestellte Fragen + +### Wie funktioniert ein WiFi QR Code? +Der QR Code enthält deine WLAN-Daten im Format... + +### Ist es sicher, mein WiFi Passwort in einem QR Code zu speichern? +Ja, der QR Code wird nur lokal in deinem Browser generiert... + +### Kann ich den QR Code später bearbeiten? +Dieser Generator erstellt statische Codes. Für editierbare... +``` + +### 4. Conversion Prompt (Der Hook) + +``` +┌─────────────────────────────────────────────────────────┐ +│ ✅ QR Code erfolgreich erstellt! │ +│ │ +│ ⚠️ Hinweis: Dies ist ein statischer Code. │ +│ Wenn du dein Passwort änderst, musst du neu drucken. │ +│ │ +│ → Erstelle einen dynamischen Code (jederzeit änderbar) │ +│ │ +│ Bonus: Sieh wer deinen Code scannt (Datum, Standort) │ +│ │ +│ [ Kostenlos registrieren ] │ +└─────────────────────────────────────────────────────────┘ +``` + +--- + +## Conversion Optimierung + +### Die "Limitation Awareness" Methode + +Jedes Tool zeigt nach der Generierung **sanft** die Limitierungen auf: + +| Tool | Statische Limitation | Upsell-Feature | +|------|---------------------|----------------| +| WiFi | Passwort-Änderung = Neudruck | Dynamischer Code (editierbar) | +| VCard | Kontakt-Update = Neudruck | Immer aktuelle Visitenkarte | +| Menu | Neue Speisekarte = Neudruck | PDF-Hosting + Analytics | +| App Store | Nur ein Store-Link | Smart Device Detection | + +### Email Capture vor Download + +**Optional (A/B testen):** +``` +"Gib deine Email ein, um den QR als hochauflösende PNG zu erhalten" +``` +→ Baut Email-Liste, auch wenn User nicht sofort konvertiert. + +--- + +## Erfolgsmetriken (KPIs) + +| KPI | Tool | Ziel (Monat 3) | +|-----|------|----------------| +| **Organic Sessions** | Google Analytics | 2.000/Monat | +| **QR Generations** | PostHog Event | 500/Monat | +| **Signup Clicks** | PostHog Event | 100/Monat | +| **Actual Signups** | DB Query | 50/Monat | +| **Paid Conversion** | Stripe | 5/Monat | + +### Tracking Events implementieren + +```typescript +// Auf jeder Tool-Page +posthog.capture('tool_qr_generated', { + tool: 'wifi', + format: 'png' +}); + +posthog.capture('tool_signup_cta_clicked', { + tool: 'wifi' +}); +``` + +--- + +## Nächste Schritte + +1. [ ] **Heute:** WiFi QR Generator implementieren (`/tools/wifi-qr-code`) +2. [ ] **Diese Woche:** VCard + WhatsApp Generator +3. [ ] **Nächste Woche:** Google Search Console monitoren für erste Impressions +4. [ ] **Monat 2:** A/B Test Email-Capture vs. Direct Download +5. [ ] **Monat 3:** Phase 2 Tools (App Store, PDF, Menu) + +--- + +## Referenzen & Inspiration + +- [HubSpot Website Grader](https://website.grader.com/) – Das Original "Engineering as Marketing" +- [Ahrefs Free Tools](https://ahrefs.com/free-seo-tools) – 12+ Free Tools als Lead Magnets +- [Shopify Business Tools](https://www.shopify.com/tools) – Logo Maker, Invoice Generator, etc. + +--- + +*Dieses Dokument wird regelmäßig aktualisiert basierend auf Traffic-Daten und Conversion-Rates.* diff --git a/growth_strategies.md b/growth_strategies.md index aef5c85..f2006cb 100644 --- a/growth_strategies.md +++ b/growth_strategies.md @@ -1,97 +1,97 @@ -# 🚀 Kostenlose Wachstums- & Backlink-Strategien (High DA) - -Hier ist ein Plan, um schnell Domain Authority (DA) aufzubauen und kostenlose Reichweite zu generieren, basierend auf deinem aktuellen Status. - -## 1. "Parasite SEO" & High DA Content Platforms -Nutze die extrem hohe Domain Authority dieser Plattformen, um für Keywords zu ranken und starke Backlinks zu erhalten. "Cloud Parasites" ist ein guter Start, hier sind weitere: - -* **LinkedIn Pulse (Artikel)**: - * Schreibe Artikel wie *"Warum 90% der QR Codes falsch genutzt werden"* oder *"QR Code Tracking Guide 2026"*. - * Nutze LinkedIn's eigene SEO-Power. Am Ende immer auf dein Tool verlinken. - * *DA: 99* -* **Medium**: - * Importiere deine Blogposts (nutze den "Import" Button für Canonical Tags, damit du dich nicht selbst kannibalisierst, oder schreibe Zusammenfassungen). - * Publiziere in "Publications" (z.B. Marketing-fokussierte Pubs). - * *DA: 95* -* **Dev.to & Hashnode**: - * Da du schon auf `web.dev` (vermutlich Dev Community) bist: Veröffentliche technische "How-To" Artikel. - * Thema: "How to build a QR Code Generator with Next.js" (und verlinke auf QR Master als die "Pro-Lösung"). - * *DA: 91 / 88* -* **GitHub Repository**: - * Erstelle ein Repository mit einer kuratierten Liste ("Awesome QR Code Tools") oder einem kleinen Open-Source-Skript. - * Die `README.md` ist ein sehr starker Backlink. - * *DA: 96* -* **NPM Package**: - * Veröffentliche ein kleines Wrapper-Package. In der Beschreibung auf deine Seite verlinken. - * *DA: 96* - -## 2. Nischen-Communities & "Problem Solving" -Gehe weg von reinen "SaaS-Gründer" Communities hin zu den **Endnutzern**. - -* **Reddit (Laser-Fokus)**: - * Suche nicht nur in r/SaaS. Suche in: - * `r/WeddingPlanning`: "Wie mache ich einen QR Code für Einladungen?" - * `r/Restaurateur`: "Digitale Speisekarten Lösungen?" - * `r/RealEstate`: "QR Codes auf Flyern?" - * Sei hilfreich, erwähne dein Tool nur organisch ("Ich habe dafür ein Tool gebaut..."). -* **Quora**: - * Beantworte Fragen wie *"Best free dynamic QR code generator?"*. - * Schreibe ausführliche Antworten, nicht nur Links. -* **Pinterest (Visuelle Suche)**: - * QR Codes sind visuell. Erstelle Pins mit "Creative QR Code Ideas", "Wedding QR Codes", "Restaurant Menu QR Styles". - * Verlinke jeden Pin auf deine Landing Page. Pinterest ist eine starke Traffic-Maschine für visuelle Themen. - -## 3. Side Project Marketing (Engineering as Marketing) -Erstelle kleine, kostenlose Tools, die als "Lead Magnet" dienen. - -* **Spezialisierte Generatoren**: - * Erstelle Landingpages für spezifische Use-Cases: *"Kostenloser WiFi QR Code Generator"*, *"VCard QR Erstellen"*. - * Diese Keywords sind einfacher zu ranken als "QR Code Generator". -* **Kostenlose Tools Verzeichnisse**: - * Es gibt Verzeichnisse nur für kostenlose Tools (z.B. "Tiny Tools", "Free for Dev"). - -## 4. Design & CSS Galleries (Für "Premium" Look) -Da dein Design "Premium" und hochwertig ist, reiche deine Seite bei Design-Gallerien ein. Das sind oft Do-Follow Backlinks von Design-Seiten. - -* **One Page Love** (Sehr hochwertig) -* **SiteInspire** -* **Lapa Ninja** -* **Godly Website** -* *Hinweis: Manche kosten eine kleine Gebühr für schnelle Prüfung, aber oft gibt es Free Submissions.* - -## 5. Cold Outreach (Backlink Sniping) -* **"Best of" Listen**: - * Suche bei Google nach *"Best QR Code Generators 2025"*. - * Schreibe die Autoren der Top 10 Artikel an. - * Pitch: *"Hey, cooler Artikel. Mein Tool QR Master ist neu und hat Feature X (z.B. bessere Analytics), das den anderen fehlt. Würde gut in deine Liste passen."* -* **Broken Link Building**: - * Suche nach Artikeln, die auf tote QR-Code-Tools verlinken (es gibt viele alte Tools, die offline gegangen sind). - * Schreibe den Webmaster an: *"Hey, der Link zu Tool X geht nicht mehr. Mein Tool ist eine super Alternative."* - -## 6. Social Media "Content Repurposing" -Mach aus einem Content-Stück 10. - -* **Twitter/X Threads**: "Wie QR Codes dein Marketing ruinieren können (und wie man es richtig macht)". -* **LinkedIn Carousels**: PDF-Slider mit "5 Fehler bei QR Codes". -* **Shorts/Reels**: Zeige den Screen, wie schnell man einen QR Code erstellt. Visuell & schnell. - -## 7. Verzeichnisse (Checkliste) -Falls noch nicht erledigt (neben Product Hunt): - -* [ ] **Indie Hackers** (Product Page) -* [ ] **Hacker News** ("Show HN") -* [ ] **Betalist** -* [ ] **10words** -* [ ] **Microlaunch** -* [ ] **Peerlist** -* [ ] **AlternativeTo** (Als Alternative zu "QR Code Monkey" vorschlagen) - -## 8. Technical SEO & Lighthouse -Du erwähntest, Lighthouse soll 100 sein. -* **Performance**: Bilder optimieren (WebP/AVIF), Lazy Loading. -* **Accessiblity**: `aria-labels` für alle Buttons, Kontraste prüfen. -* **SEO**: `meta description`, `title` tags, `canonical` URLs, `sitemap.xml`. -* **Schema Markup**: Füge `SoftwareApplication` JSON-LD Schema auf deiner Homepage hinzu. Das hilft Google, dich als Software-Tool zu verstehen. - ---- -**Sofort-Maßnahme**: Erstelle heute einen **LinkedIn Pulse Artikel** und einen **GitHub Account/Repo** für dein Projekt. Das sind 2 High-DA Backlinks garantiert. +# 🚀 Kostenlose Wachstums- & Backlink-Strategien (High DA) + +Hier ist ein Plan, um schnell Domain Authority (DA) aufzubauen und kostenlose Reichweite zu generieren, basierend auf deinem aktuellen Status. + +## 1. "Parasite SEO" & High DA Content Platforms +Nutze die extrem hohe Domain Authority dieser Plattformen, um für Keywords zu ranken und starke Backlinks zu erhalten. "Cloud Parasites" ist ein guter Start, hier sind weitere: + +* **LinkedIn Pulse (Artikel)**: + * Schreibe Artikel wie *"Warum 90% der QR Codes falsch genutzt werden"* oder *"QR Code Tracking Guide 2026"*. + * Nutze LinkedIn's eigene SEO-Power. Am Ende immer auf dein Tool verlinken. + * *DA: 99* +* **Medium**: + * Importiere deine Blogposts (nutze den "Import" Button für Canonical Tags, damit du dich nicht selbst kannibalisierst, oder schreibe Zusammenfassungen). + * Publiziere in "Publications" (z.B. Marketing-fokussierte Pubs). + * *DA: 95* +* **Dev.to & Hashnode**: + * Da du schon auf `web.dev` (vermutlich Dev Community) bist: Veröffentliche technische "How-To" Artikel. + * Thema: "How to build a QR Code Generator with Next.js" (und verlinke auf QR Master als die "Pro-Lösung"). + * *DA: 91 / 88* +* **GitHub Repository**: + * Erstelle ein Repository mit einer kuratierten Liste ("Awesome QR Code Tools") oder einem kleinen Open-Source-Skript. + * Die `README.md` ist ein sehr starker Backlink. + * *DA: 96* +* **NPM Package**: + * Veröffentliche ein kleines Wrapper-Package. In der Beschreibung auf deine Seite verlinken. + * *DA: 96* + +## 2. Nischen-Communities & "Problem Solving" +Gehe weg von reinen "SaaS-Gründer" Communities hin zu den **Endnutzern**. + +* **Reddit (Laser-Fokus)**: + * Suche nicht nur in r/SaaS. Suche in: + * `r/WeddingPlanning`: "Wie mache ich einen QR Code für Einladungen?" + * `r/Restaurateur`: "Digitale Speisekarten Lösungen?" + * `r/RealEstate`: "QR Codes auf Flyern?" + * Sei hilfreich, erwähne dein Tool nur organisch ("Ich habe dafür ein Tool gebaut..."). +* **Quora**: + * Beantworte Fragen wie *"Best free dynamic QR code generator?"*. + * Schreibe ausführliche Antworten, nicht nur Links. +* **Pinterest (Visuelle Suche)**: + * QR Codes sind visuell. Erstelle Pins mit "Creative QR Code Ideas", "Wedding QR Codes", "Restaurant Menu QR Styles". + * Verlinke jeden Pin auf deine Landing Page. Pinterest ist eine starke Traffic-Maschine für visuelle Themen. + +## 3. Side Project Marketing (Engineering as Marketing) +Erstelle kleine, kostenlose Tools, die als "Lead Magnet" dienen. + +* **Spezialisierte Generatoren**: + * Erstelle Landingpages für spezifische Use-Cases: *"Kostenloser WiFi QR Code Generator"*, *"VCard QR Erstellen"*. + * Diese Keywords sind einfacher zu ranken als "QR Code Generator". +* **Kostenlose Tools Verzeichnisse**: + * Es gibt Verzeichnisse nur für kostenlose Tools (z.B. "Tiny Tools", "Free for Dev"). + +## 4. Design & CSS Galleries (Für "Premium" Look) +Da dein Design "Premium" und hochwertig ist, reiche deine Seite bei Design-Gallerien ein. Das sind oft Do-Follow Backlinks von Design-Seiten. + +* **One Page Love** (Sehr hochwertig) +* **SiteInspire** +* **Lapa Ninja** +* **Godly Website** +* *Hinweis: Manche kosten eine kleine Gebühr für schnelle Prüfung, aber oft gibt es Free Submissions.* + +## 5. Cold Outreach (Backlink Sniping) +* **"Best of" Listen**: + * Suche bei Google nach *"Best QR Code Generators 2025"*. + * Schreibe die Autoren der Top 10 Artikel an. + * Pitch: *"Hey, cooler Artikel. Mein Tool QR Master ist neu und hat Feature X (z.B. bessere Analytics), das den anderen fehlt. Würde gut in deine Liste passen."* +* **Broken Link Building**: + * Suche nach Artikeln, die auf tote QR-Code-Tools verlinken (es gibt viele alte Tools, die offline gegangen sind). + * Schreibe den Webmaster an: *"Hey, der Link zu Tool X geht nicht mehr. Mein Tool ist eine super Alternative."* + +## 6. Social Media "Content Repurposing" +Mach aus einem Content-Stück 10. + +* **Twitter/X Threads**: "Wie QR Codes dein Marketing ruinieren können (und wie man es richtig macht)". +* **LinkedIn Carousels**: PDF-Slider mit "5 Fehler bei QR Codes". +* **Shorts/Reels**: Zeige den Screen, wie schnell man einen QR Code erstellt. Visuell & schnell. + +## 7. Verzeichnisse (Checkliste) +Falls noch nicht erledigt (neben Product Hunt): + +* [ ] **Indie Hackers** (Product Page) +* [ ] **Hacker News** ("Show HN") +* [ ] **Betalist** +* [ ] **10words** +* [ ] **Microlaunch** +* [ ] **Peerlist** +* [ ] **AlternativeTo** (Als Alternative zu "QR Code Monkey" vorschlagen) + +## 8. Technical SEO & Lighthouse +Du erwähntest, Lighthouse soll 100 sein. +* **Performance**: Bilder optimieren (WebP/AVIF), Lazy Loading. +* **Accessiblity**: `aria-labels` für alle Buttons, Kontraste prüfen. +* **SEO**: `meta description`, `title` tags, `canonical` URLs, `sitemap.xml`. +* **Schema Markup**: Füge `SoftwareApplication` JSON-LD Schema auf deiner Homepage hinzu. Das hilft Google, dich als Software-Tool zu verstehen. + +--- +**Sofort-Maßnahme**: Erstelle heute einen **LinkedIn Pulse Artikel** und einen **GitHub Account/Repo** für dein Projekt. Das sind 2 High-DA Backlinks garantiert. diff --git a/ideen.md b/ideen.md index d338593..0dbbc1a 100644 --- a/ideen.md +++ b/ideen.md @@ -1,41 +1,41 @@ -🚀 Neue Content-Typen -Feature Beschreibung -WiFi QR SSID, Passwort, Verschlüsselungstyp – perfekt für Cafés/Hotels -Event (VEVENT) Kalendereinträge direkt ins Handy importieren -App Store Links Smart-Links die iOS/Android erkennen -PayPal/Bitcoin Zahlungsaufforderungen per QR -WhatsApp/Telegram Direkt-Chat mit vordefinierter Nachricht -📊 Analytics-Erweiterungen -Feature Beschreibung -UTM-Parameter Automatische Kampagnen-Tags für Google Analytics -Conversion Tracking Ziel-URLs definieren und Conversion messen -A/B Testing Zwei Ziel-URLs testen, welche besser performt -Scheduled Reports Wöchentliche/monatliche E-Mail-Reports -Export (CSV/PDF) Analytics-Daten exportieren -🎨 QR Design & Styling -Feature Beschreibung -Design Templates Vorgefertigte Farb-/Logo-Kombinationen -Frames & CTA "Scan me!" Rahmen um den QR Code -Dot Styles Runde Punkte, Diamanten, etc. -Eye Shapes Custom Corner-Marker Designs -Gradient Colors Farbverläufe statt Vollfarben -🗂️ Organisation & Teamwork -Feature Beschreibung -Folders/Projekte QR Codes in Ordner organisieren -Tags & Filter Flexibles Tagging-System -Team Workspaces Mehrere User pro Account (BUSINESS) -Activity Log Wer hat was wann geändert -QR Code Archiv Soft-Delete statt Löschen -⚙️ Pro Features -Feature Beschreibung -Passwortschutz QR führt zu Passwort-geschützter Seite -Ablaufdatum QR Code deaktiviert sich automatisch -Scan-Limit Max. X Scans erlauben -Geo-Targeting Verschiedene URLs je nach Standort -Device Detection Desktop vs. Mobile unterschiedliche URLs -🔌 Integrationen -Feature Beschreibung -Zapier/Make Webhooks bei Scans triggern -Google Sheets Scan-Daten automatisch exportieren -Slack Notifications Benachrichtigung bei X Scans +🚀 Neue Content-Typen +Feature Beschreibung +WiFi QR SSID, Passwort, Verschlüsselungstyp – perfekt für Cafés/Hotels +Event (VEVENT) Kalendereinträge direkt ins Handy importieren +App Store Links Smart-Links die iOS/Android erkennen +PayPal/Bitcoin Zahlungsaufforderungen per QR +WhatsApp/Telegram Direkt-Chat mit vordefinierter Nachricht +📊 Analytics-Erweiterungen +Feature Beschreibung +UTM-Parameter Automatische Kampagnen-Tags für Google Analytics +Conversion Tracking Ziel-URLs definieren und Conversion messen +A/B Testing Zwei Ziel-URLs testen, welche besser performt +Scheduled Reports Wöchentliche/monatliche E-Mail-Reports +Export (CSV/PDF) Analytics-Daten exportieren +🎨 QR Design & Styling +Feature Beschreibung +Design Templates Vorgefertigte Farb-/Logo-Kombinationen +Frames & CTA "Scan me!" Rahmen um den QR Code +Dot Styles Runde Punkte, Diamanten, etc. +Eye Shapes Custom Corner-Marker Designs +Gradient Colors Farbverläufe statt Vollfarben +🗂️ Organisation & Teamwork +Feature Beschreibung +Folders/Projekte QR Codes in Ordner organisieren +Tags & Filter Flexibles Tagging-System +Team Workspaces Mehrere User pro Account (BUSINESS) +Activity Log Wer hat was wann geändert +QR Code Archiv Soft-Delete statt Löschen +⚙️ Pro Features +Feature Beschreibung +Passwortschutz QR führt zu Passwort-geschützter Seite +Ablaufdatum QR Code deaktiviert sich automatisch +Scan-Limit Max. X Scans erlauben +Geo-Targeting Verschiedene URLs je nach Standort +Device Detection Desktop vs. Mobile unterschiedliche URLs +🔌 Integrationen +Feature Beschreibung +Zapier/Make Webhooks bei Scans triggern +Google Sheets Scan-Daten automatisch exportieren +Slack Notifications Benachrichtigung bei X Scans API für Entwickler Public API mit Token-Auth \ No newline at end of file diff --git a/public/robots.txt b/public/robots.txt index b32eec0..ff48580 100644 --- a/public/robots.txt +++ b/public/robots.txt @@ -1,19 +1,19 @@ -# QR Master - robots.txt -# Allow all search engines to crawl all pages - -User-agent: * -Allow: / - -# Sitemap location -Sitemap: https://www.qrmaster.net/sitemap.xml - -# Crawl-delay (optional, be nice to servers) -Crawl-delay: 1 - -# Disallow admin/api routes -Disallow: /api/ -Disallow: /dashboard/ -Disallow: /_next/ - -# Allow all free tools explicitly -Allow: /tools/ +# QR Master - robots.txt +# Allow all search engines to crawl all pages + +User-agent: * +Allow: / + +# Sitemap location +Sitemap: https://www.qrmaster.net/sitemap.xml + +# Crawl-delay (optional, be nice to servers) +Crawl-delay: 1 + +# Disallow admin/api routes +Disallow: /api/ +Disallow: /dashboard/ +Disallow: /_next/ + +# Allow all free tools explicitly +Allow: /tools/ diff --git a/src/app/(marketing)/tools/crypto-qr-code/CryptoGenerator.tsx b/src/app/(marketing)/tools/crypto-qr-code/CryptoGenerator.tsx index f58d370..ba1828e 100644 --- a/src/app/(marketing)/tools/crypto-qr-code/CryptoGenerator.tsx +++ b/src/app/(marketing)/tools/crypto-qr-code/CryptoGenerator.tsx @@ -1,371 +1,371 @@ -'use client'; - -import React, { useState, useRef } from 'react'; -import Link from 'next/link'; -import { QRCodeSVG } from 'qrcode.react'; -import { - Bitcoin, - Download, - Check, - Sparkles, - Wallet, -} from 'lucide-react'; -import { Button } from '@/components/ui/Button'; -import { Input } from '@/components/ui/Input'; -import { Select } from '@/components/ui/Select'; -import { cn } from '@/lib/utils'; - -// Brand Colors -const BRAND = { - paleGrey: '#EBEBDF', - richBlue: '#1A1265', - richBlueLight: '#2A2275', -}; - -// Crypto Options -const CRYPTO_CURRENCIES = [ - { value: 'bitcoin', label: 'Bitcoin (BTC)', color: '#F7931A', prefix: 'bitcoin:' }, - { value: 'ethereum', label: 'Ethereum (ETH)', color: '#627EEA', prefix: 'ethereum:' }, - { value: 'usdt', label: 'Tether (USDT)', color: '#26A17B', prefix: '' }, // Commonly ERC20/TRC20 - keeping raw for safety - { value: 'solana', label: 'Solana (SOL)', color: '#14F195', prefix: 'solana:' }, -]; - - -// QR Color Options -const QR_COLORS = [ - { name: 'Bitcoin Orange', value: '#F7931A' }, - { name: 'Ethereum Blue', value: '#627EEA' }, - { name: 'Tether Green', value: '#26A17B' }, - { name: 'Classic Black', value: '#000000' }, - { name: 'Dark Blue', value: '#1A1265' }, - { name: 'Emerald', value: '#10B981' }, - { name: 'Rose', value: '#F43F5E' }, -]; - -// Frame Options -const FRAME_OPTIONS = [ - { id: 'none', label: 'No Frame' }, - { id: 'scanme', label: 'Scan Me' }, - { id: 'pay', label: 'Pay Now' }, - { id: 'donate', label: 'Donate' }, -]; - -export default function CryptoGenerator() { - const [currency, setCurrency] = useState('bitcoin'); - const [address, setAddress] = useState(''); - const [amount, setAmount] = useState(''); - const [qrMode, setQrMode] = useState<'universal' | 'wallet'>('universal'); - const [qrColor, setQrColor] = useState('#F7931A'); - const [frameType, setFrameType] = useState('none'); - - const qrRef = useRef(null); - - // Generate URL based on selected mode - const getUrl = () => { - if (!address.trim()) return 'https://www.qrmaster.net'; - - const cleanAddr = address.trim(); - - if (qrMode === 'wallet') { - // Wallet Direct Mode - Uses crypto URI scheme - // Only works when scanning FROM a wallet app (Coinbase, Trust Wallet, etc.) - const prefixes: Record = { - bitcoin: 'bitcoin:', - ethereum: 'ethereum:', - solana: 'solana:', - usdt: '', // USDT doesn't have a standard URI - }; - const prefix = prefixes[currency] || ''; - if (!prefix) return cleanAddr; // USDT fallback - let uri = `${prefix}${cleanAddr}`; - if (amount) uri += `?amount=${amount}`; - return uri; - } else { - // Universal Mode - Blockchain explorer links - // Works with ANY phone camera - switch (currency) { - case 'bitcoin': - return `https://blockchair.com/bitcoin/address/${cleanAddr}`; - case 'ethereum': - return `https://etherscan.io/address/${cleanAddr}`; - case 'solana': - return `https://solscan.io/account/${cleanAddr}`; - case 'usdt': - return `https://etherscan.io/token/0xdac17f958d2ee523a2206206994597c13d831ec7?a=${cleanAddr}`; - default: - return cleanAddr; - } - } - }; - - const handleDownload = async (format: 'png' | 'svg') => { - if (!qrRef.current) return; - try { - if (format === 'png') { - const { toPng } = await import('html-to-image'); - const dataUrl = await toPng(qrRef.current, { cacheBust: true, pixelRatio: 3 }); - const link = document.createElement('a'); - link.download = `${currency}-qr-code.png`; - link.href = dataUrl; - link.click(); - } else { - const svgData = qrRef.current.querySelector('svg')?.outerHTML; - if (svgData) { - const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' }); - const url = URL.createObjectURL(blob); - const link = document.createElement('a'); - link.href = url; - link.download = `${currency}-qr-code.svg`; - link.click(); - } - } - } catch (err) { - console.error('Download failed', err); - } - }; - - const getFrameLabel = () => { - const frame = FRAME_OPTIONS.find(f => f.id === frameType); - return frame?.id !== 'none' ? frame?.label : null; - }; - - return ( -
- - {/* Main Generator Card */} -
-
- - {/* LEFT: Input Section */} -
- - {/* Crypto Details */} -
-

- - Wallet Details -

- -
- - setAddress(e.target.value)} - className="h-12 text-base rounded-xl border-slate-200 focus:border-slate-900 focus:ring-slate-900 font-mono text-sm" - /> -
- -
- - setAmount(e.target.value)} - className="h-12 text-base rounded-xl border-slate-200 focus:border-slate-900 focus:ring-slate-900" - /> -
- - {/* QR Mode Toggle */} -
- -
- - -
-

- {qrMode === 'universal' - ? "Works with any phone camera. Opens blockchain explorer." - : "Requires scanning from a wallet app. Enables direct payment."} -

-
-
- -
- - {/* Design Options */} -
-

- - Design Options -

- - {/* Color Picker */} -
- -
- {QR_COLORS.map((c) => ( - - ))} -
-
- - {/* Frame Selector */} -
- -
- {FRAME_OPTIONS.map((frame) => ( - - ))} -
-
-
-
- - {/* RIGHT: Preview Section */} -
- - {/* QR Card with Frame */} -
- {/* Frame Label */} - {getFrameLabel() && ( -
- {getFrameLabel()} -
- )} - - {/* QR Code */} -
- {address.trim() ? ( - - ) : ( -
-
- -

Enter wallet address

-

to generate QR code

-
-
- )} -
- - {/* Info Preview */} -
-

- - {currency} -

-
- {address || 'Wallet Address'} -
-
-
- - {/* Download Buttons */} -
- - -
- -

- Scanning copies the wallet address or opens a crypto app. -

-
-
-
- - {/* Upsell Banner */} -
-
-

Accept Crypto for Business?

-

- Create professional, branded payment pages for your store. -

-
- - - -
-
- ); -} +'use client'; + +import React, { useState, useRef } from 'react'; +import Link from 'next/link'; +import { QRCodeSVG } from 'qrcode.react'; +import { + Bitcoin, + Download, + Check, + Sparkles, + Wallet, +} from 'lucide-react'; +import { Button } from '@/components/ui/Button'; +import { Input } from '@/components/ui/Input'; +import { Select } from '@/components/ui/Select'; +import { cn } from '@/lib/utils'; + +// Brand Colors +const BRAND = { + paleGrey: '#EBEBDF', + richBlue: '#1A1265', + richBlueLight: '#2A2275', +}; + +// Crypto Options +const CRYPTO_CURRENCIES = [ + { value: 'bitcoin', label: 'Bitcoin (BTC)', color: '#F7931A', prefix: 'bitcoin:' }, + { value: 'ethereum', label: 'Ethereum (ETH)', color: '#627EEA', prefix: 'ethereum:' }, + { value: 'usdt', label: 'Tether (USDT)', color: '#26A17B', prefix: '' }, // Commonly ERC20/TRC20 - keeping raw for safety + { value: 'solana', label: 'Solana (SOL)', color: '#14F195', prefix: 'solana:' }, +]; + + +// QR Color Options +const QR_COLORS = [ + { name: 'Bitcoin Orange', value: '#F7931A' }, + { name: 'Ethereum Blue', value: '#627EEA' }, + { name: 'Tether Green', value: '#26A17B' }, + { name: 'Classic Black', value: '#000000' }, + { name: 'Dark Blue', value: '#1A1265' }, + { name: 'Emerald', value: '#10B981' }, + { name: 'Rose', value: '#F43F5E' }, +]; + +// Frame Options +const FRAME_OPTIONS = [ + { id: 'none', label: 'No Frame' }, + { id: 'scanme', label: 'Scan Me' }, + { id: 'pay', label: 'Pay Now' }, + { id: 'donate', label: 'Donate' }, +]; + +export default function CryptoGenerator() { + const [currency, setCurrency] = useState('bitcoin'); + const [address, setAddress] = useState(''); + const [amount, setAmount] = useState(''); + const [qrMode, setQrMode] = useState<'universal' | 'wallet'>('universal'); + const [qrColor, setQrColor] = useState('#F7931A'); + const [frameType, setFrameType] = useState('none'); + + const qrRef = useRef(null); + + // Generate URL based on selected mode + const getUrl = () => { + if (!address.trim()) return 'https://www.qrmaster.net'; + + const cleanAddr = address.trim(); + + if (qrMode === 'wallet') { + // Wallet Direct Mode - Uses crypto URI scheme + // Only works when scanning FROM a wallet app (Coinbase, Trust Wallet, etc.) + const prefixes: Record = { + bitcoin: 'bitcoin:', + ethereum: 'ethereum:', + solana: 'solana:', + usdt: '', // USDT doesn't have a standard URI + }; + const prefix = prefixes[currency] || ''; + if (!prefix) return cleanAddr; // USDT fallback + let uri = `${prefix}${cleanAddr}`; + if (amount) uri += `?amount=${amount}`; + return uri; + } else { + // Universal Mode - Blockchain explorer links + // Works with ANY phone camera + switch (currency) { + case 'bitcoin': + return `https://blockchair.com/bitcoin/address/${cleanAddr}`; + case 'ethereum': + return `https://etherscan.io/address/${cleanAddr}`; + case 'solana': + return `https://solscan.io/account/${cleanAddr}`; + case 'usdt': + return `https://etherscan.io/token/0xdac17f958d2ee523a2206206994597c13d831ec7?a=${cleanAddr}`; + default: + return cleanAddr; + } + } + }; + + const handleDownload = async (format: 'png' | 'svg') => { + if (!qrRef.current) return; + try { + if (format === 'png') { + const { toPng } = await import('html-to-image'); + const dataUrl = await toPng(qrRef.current, { cacheBust: true, pixelRatio: 3 }); + const link = document.createElement('a'); + link.download = `${currency}-qr-code.png`; + link.href = dataUrl; + link.click(); + } else { + const svgData = qrRef.current.querySelector('svg')?.outerHTML; + if (svgData) { + const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' }); + const url = URL.createObjectURL(blob); + const link = document.createElement('a'); + link.href = url; + link.download = `${currency}-qr-code.svg`; + link.click(); + } + } + } catch (err) { + console.error('Download failed', err); + } + }; + + const getFrameLabel = () => { + const frame = FRAME_OPTIONS.find(f => f.id === frameType); + return frame?.id !== 'none' ? frame?.label : null; + }; + + return ( +
+ + {/* Main Generator Card */} +
+
+ + {/* LEFT: Input Section */} +
+ + {/* Crypto Details */} +
+

+ + Wallet Details +

+ +
+ + setAddress(e.target.value)} + className="h-12 text-base rounded-xl border-slate-200 focus:border-slate-900 focus:ring-slate-900 font-mono text-sm" + /> +
+ +
+ + setAmount(e.target.value)} + className="h-12 text-base rounded-xl border-slate-200 focus:border-slate-900 focus:ring-slate-900" + /> +
+ + {/* QR Mode Toggle */} +
+ +
+ + +
+

+ {qrMode === 'universal' + ? "Works with any phone camera. Opens blockchain explorer." + : "Requires scanning from a wallet app. Enables direct payment."} +

+
+
+ +
+ + {/* Design Options */} +
+

+ + Design Options +

+ + {/* Color Picker */} +
+ +
+ {QR_COLORS.map((c) => ( + + ))} +
+
+ + {/* Frame Selector */} +
+ +
+ {FRAME_OPTIONS.map((frame) => ( + + ))} +
+
+
+
+ + {/* RIGHT: Preview Section */} +
+ + {/* QR Card with Frame */} +
+ {/* Frame Label */} + {getFrameLabel() && ( +
+ {getFrameLabel()} +
+ )} + + {/* QR Code */} +
+ {address.trim() ? ( + + ) : ( +
+
+ +

Enter wallet address

+

to generate QR code

+
+
+ )} +
+ + {/* Info Preview */} +
+

+ + {currency} +

+
+ {address || 'Wallet Address'} +
+
+
+ + {/* Download Buttons */} +
+ + +
+ +

+ Scanning copies the wallet address or opens a crypto app. +

+
+
+
+ + {/* Upsell Banner */} +
+
+

Accept Crypto for Business?

+

+ Create professional, branded payment pages for your store. +

+
+ + + +
+
+ ); +} diff --git a/src/app/(marketing)/tools/crypto-qr-code/page.tsx b/src/app/(marketing)/tools/crypto-qr-code/page.tsx index e22aee0..9d75beb 100644 --- a/src/app/(marketing)/tools/crypto-qr-code/page.tsx +++ b/src/app/(marketing)/tools/crypto-qr-code/page.tsx @@ -1,362 +1,362 @@ -import React from 'react'; -import type { Metadata } from 'next'; -import CryptoGenerator from './CryptoGenerator'; -import { Bitcoin, Shield, Zap, Smartphone, Wallet, Coins, Sparkles, Download, Share2 } from 'lucide-react'; -import { QRCodeSVG } from 'qrcode.react'; -import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema'; - -// SEO Optimized Metadata -export const metadata: Metadata = { - title: 'Free Crypto QR Code Generator | Bitcoin, Ethereum & USDT | QR Master', - description: 'Create a QR code for your Crypto wallet address. Supports Bitcoin (BTC), Ethereum (ETH), USDT, and more. Essential for easy payments and donations.', - keywords: ['crypto qr code', 'bitcoin qr generator', 'ethereum qr code', 'crypto wallet qr', 'donation qr code'], - alternates: { - canonical: 'https://qrmaster.io/tools/crypto-qr-code', - }, - openGraph: { - title: 'Free Crypto QR Code Generator | QR Master', - description: 'Generate QR codes to accept Crypto payments securely. Supports BTC, ETH, SOL.', - type: 'website', - url: 'https://qrmaster.io/tools/crypto-qr-code', - images: [{ url: '/og-crypto-generator.png', width: 1200, height: 630 }], - }, - twitter: { - card: 'summary_large_image', - title: 'Free Crypto QR Code Generator', - description: 'Create secure QR codes for your crypto wallet.', - }, - robots: { - index: true, - follow: true, - }, -}; - -// JSON-LD Structured Data -const jsonLd = { - '@context': 'https://schema.org', - '@graph': [ - { - '@type': 'SoftwareApplication', - name: 'Crypto QR Code Generator', - applicationCategory: 'FinanceApplication', - operatingSystem: 'Web Browser', - offers: { - '@type': 'Offer', - price: '0', - priceCurrency: 'USD', - }, - aggregateRating: { - '@type': 'AggregateRating', - ratingValue: '4.9', - ratingCount: '870', - }, - description: 'Generate QR codes that contain your cryptocurrency wallet address for easy payments.', - }, - { - '@type': 'HowTo', - name: 'How to Create a Crypto QR Code', - description: 'Create a QR code for your Bitcoin or Ethereum wallet.', - step: [ - { - '@type': 'HowToStep', - position: 1, - name: 'Select Currency', - text: 'Choose your cryptocurrency from the list (Bitcoin, Ethereum, USDT, etc.).', - }, - { - '@type': 'HowToStep', - position: 2, - name: 'Enter Address', - text: 'Copy your public wallet address from your crypto app and paste it into the "Wallet Address" field.', - }, - { - '@type': 'HowToStep', - position: 3, - name: 'Add Amount (Optional)', - text: 'If you are requesting a specific payment, enter the amount to pre-fill the transaction.', - }, - { - '@type': 'HowToStep', - position: 4, - name: 'Customize QR', - text: 'Select a brand color (like Bitcoin Orange or Ethereum Blue) and add a frame like "Pay Now".', - }, - { - '@type': 'HowToStep', - position: 5, - name: 'Download', - text: 'Download the QR code image and share it to receive funds securely.', - }, - ], - totalTime: 'PT30S', - }, - { - '@type': 'FAQPage', - mainEntity: [ - { - '@type': 'Question', - name: 'Is it safe to share my wallet address?', - acceptedAnswer: { - '@type': 'Answer', - text: 'Yes. Your public wallet address is designed to be shared so you can receive funds. Never share your private key.', - }, - }, - { - '@type': 'Question', - name: 'Which currencies are supported?', - acceptedAnswer: { - '@type': 'Answer', - text: 'Our generator supports standard URI schemes for Bitcoin, Ethereum, Solana, and can generally store any wallet string for other coins.', - }, - }, - { - '@type': 'Question', - name: 'Can I add a specific amount?', - acceptedAnswer: { - '@type': 'Answer', - text: 'Yes, you can pre-fill an amount so when the user scans, their wallet app automatically suggests the correct payment value.', - }, - }, - { - '@type': 'Question', - name: 'Does it work with all wallets?', - acceptedAnswer: { - '@type': 'Answer', - text: 'Yes, standard crypto QR codes are universally readable by almost all modern wallet apps (Coinbase, MetaMask, Trust Wallet, etc.).', - }, - }, - { - '@type': 'Question', - name: 'Are there any fees?', - acceptedAnswer: { - '@type': 'Answer', - text: 'No. This generator is completely free. We do not charge any fees for generating codes or for the transactions made using them.', - }, - }, - ], - }, - ], -}; - -export default function CryptoQRCodePage() { - return ( - <> -