diff --git a/SIDE_PROJECT_STRATEGY.md b/SIDE_PROJECT_STRATEGY.md new file mode 100644 index 0000000..0bf4d85 --- /dev/null +++ b/SIDE_PROJECT_STRATEGY.md @@ -0,0 +1,268 @@ +# πŸš€ 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 | +| **Calendar Event QR** | `/tools/calendar-qr-code` | iCal + Google Cal Support | +| **AI Art QR (Viral)** | `/tools/ai-qr-code` | Stable Diffusion Integration | + +--- + +## 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 new file mode 100644 index 0000000..aef5c85 --- /dev/null +++ b/growth_strategies.md @@ -0,0 +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. diff --git a/package-lock.json b/package-lock.json index a6c7161..b1931fa 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,7 @@ "exceljs": "^4.4.0", "file-saver": "^2.0.5", "framer-motion": "^12.24.10", + "html-to-image": "^1.11.13", "i18next": "^23.7.6", "ioredis": "^5.3.2", "jszip": "^3.10.1", @@ -5576,6 +5577,12 @@ "void-elements": "3.1.0" } }, + "node_modules/html-to-image": { + "version": "1.11.13", + "resolved": "https://registry.npmjs.org/html-to-image/-/html-to-image-1.11.13.tgz", + "integrity": "sha512-cuOPoI7WApyhBElTTb9oqsawRvZ0rHhaHwghRLlTuffoD1B2aDemlCruLeZrUIIdvG7gs9xeELEPm6PhuASqrg==", + "license": "MIT" + }, "node_modules/i18next": { "version": "23.16.8", "resolved": "https://registry.npmjs.org/i18next/-/i18next-23.16.8.tgz", diff --git a/package.json b/package.json index 8305a0e..a4b0c9d 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "exceljs": "^4.4.0", "file-saver": "^2.0.5", "framer-motion": "^12.24.10", + "html-to-image": "^1.11.13", "i18next": "^23.7.6", "ioredis": "^5.3.2", "jszip": "^3.10.1", diff --git a/src/app/(marketing)/tools/wifi-qr-code/WiFiGenerator.tsx b/src/app/(marketing)/tools/wifi-qr-code/WiFiGenerator.tsx new file mode 100644 index 0000000..e593e4e --- /dev/null +++ b/src/app/(marketing)/tools/wifi-qr-code/WiFiGenerator.tsx @@ -0,0 +1,245 @@ +"use client"; + +import React, { useState, useRef } from "react"; +import { QRCodeSVG } from "qrcode.react"; +import { Wifi, Lock, Eye, EyeOff, Check, AlertTriangle, Download, Printer } from "lucide-react"; +import * as htmlToImage from "html-to-image"; + +export default function WiFiGenerator() { + const [ssid, setSsid] = useState(""); + const [password, setPassword] = useState(""); + const [encryption, setEncryption] = useState("WPA"); + const [hidden, setHidden] = useState(false); + const [showPassword, setShowPassword] = useState(false); + + // For QR generation string + const qrValue = `WIFI:S:${ssid};T:${encryption};P:${password};H:${hidden};;`; + + const qrRef = useRef(null); + + const handleDownload = (format: "png" | "svg") => { + if (!qrRef.current) return; + + if (format === "svg") { + const svg = qrRef.current.querySelector("svg"); + if (svg) { + const svgData = new XMLSerializer().serializeToString(svg); + const blob = new Blob([svgData], { type: "image/svg+xml" }); + const url = URL.createObjectURL(blob); + const link = document.createElement("a"); + link.href = url; + link.download = `wifi-qr-${ssid || "network"}.svg`; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + } + } else { + htmlToImage + .toPng(qrRef.current) + .then(function (dataUrl) { + const link = document.createElement("a"); + link.download = `wifi-qr-${ssid || "network"}.png`; + link.href = dataUrl; + link.click(); + }) + .catch(function (error) { + console.error("oops, something went wrong!", error); + }); + } + }; + + return ( +
+
+
+ + {/* LEFT COLUMN - FORM */} +
+
+

+ Network Details +

+

+ Enter your WiFi credentials to create a QR code. +

+
+ +
+ + {/* SSID Input */} +
+ +
+
+ +
+ setSsid(e.target.value)} + placeholder="e.g. Office_Guest_5G" + className="block w-full pl-10 pr-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 transition-all shadow-sm" + /> +
+
+ + {/* Password Input */} +
+ +
+
+ +
+ setPassword(e.target.value)} + placeholder="Your WiFi Password" + className="block w-full pl-10 pr-12 py-3 bg-slate-50 border border-slate-200 rounded-xl text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 transition-all shadow-sm font-mono" + /> + +
+
+ + {/* Encryption & Hidden */} +
+
+ +
+ +
+ +
+
+
+ +
+
+ setHidden(e.target.checked)} + className="h-5 w-5 text-indigo-600 border-slate-300 rounded focus:ring-indigo-500 cursor-pointer" + /> +
+ +
+
+ +
+ +
+ +

+ All data stays on your device +

+
+
+ + {/* RIGHT COLUMN - PREVIEW */} +
+ {/* Background Pattern */} +
+ +
+
+

Live Preview

+ + {/* QR Card */} +
+
+ +
+
+
+ + {/* Download Actions */} +
+ + + +
+ + + +
+
+
+
+ + {/* UPSELL BOX */} +
+
+
+ +
+
+

Change passwords often?

+

+ Note: This is a static QR Code. If you update your WiFi password, you'll need to reprint this code. +

+
+
+ + Try Dynamic Codes + +
+
+ ); +} diff --git a/src/app/(marketing)/tools/wifi-qr-code/page.tsx b/src/app/(marketing)/tools/wifi-qr-code/page.tsx new file mode 100644 index 0000000..2205039 --- /dev/null +++ b/src/app/(marketing)/tools/wifi-qr-code/page.tsx @@ -0,0 +1,113 @@ +import React from 'react'; +import type { Metadata } from 'next'; +import WiFiGenerator from './WiFiGenerator'; +import { Wifi, Shield, Zap } from 'lucide-react'; + +export const metadata: Metadata = { + title: 'Free WiFi QR Code Generator | Connect Instantly & Securely', + description: 'Create a free QR code for your WiFi network. Instant connection for guests, 100% client-side security (your password never leaves your browser). No app needed.', + alternates: { + canonical: 'https://qrmaster.com/tools/wifi-qr-code', + }, + openGraph: { + title: 'Free WiFi QR Code Generator | Connect Instantly', + description: 'Share your WiFi without sharing your password. Generate a secure QR code in seconds.', + type: 'website', + } +}; + +export default function WiFiQRCodePage() { + return ( +
+ + {/* HERO SECTION */} +
+ {/* Background Decorative Elements */} +
+
+
+
+ +
+
+ + + + + Free Tool +
+ +

+ Secure WiFi QR Code
Generator +

+

+ Connect guests instantly without typing passwords.
+ 100% Client-side & Private. +

+ +
+
+ + 100% Private +
+
+ + Instant Generation +
+
+ + Always Free +
+
+
+
+ + {/* GENERATOR APP SECTION */} + + + {/* FAQ SECTION */} +
+
+

Frequently Asked Questions

+

Everything you need to know about WiFi QR codes.

+
+ +
+ + + + +
+
+ +
+ ); +} + +function FaqItem({ question, answer }: { question: string, answer: string }) { + return ( +
+ + {question} + + + + +
+ {answer} +
+
+ ); +}