370 lines
20 KiB
TypeScript
370 lines
20 KiB
TypeScript
import React from 'react';
|
|
import type { Metadata } from 'next';
|
|
import WiFiGenerator from './WiFiGenerator';
|
|
import { Wifi, Shield, Zap, Smartphone, Lock, QrCode, 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 WiFi QR Code Generator | Instant & Secure | QR Master',
|
|
description: 'Create a WiFi QR code in seconds. Guests scan to connect instantly—no typing passwords. 100% private: your credentials never leave your browser. Free forever.',
|
|
keywords: ['wifi qr code', 'qr code generator', 'wifi qr code generator', 'share wifi', 'wifi password qr', 'guest wifi'],
|
|
alternates: {
|
|
canonical: 'https://qrmaster.io/tools/wifi-qr-code',
|
|
},
|
|
openGraph: {
|
|
title: 'Free WiFi QR Code Generator | QR Master',
|
|
description: 'Share your WiFi without sharing your password. Guests scan the QR code to connect instantly.',
|
|
type: 'website',
|
|
url: 'https://qrmaster.io/tools/wifi-qr-code',
|
|
images: [{ url: '/og-wifi-generator.png', width: 1200, height: 630 }],
|
|
},
|
|
twitter: {
|
|
card: 'summary_large_image',
|
|
title: 'Free WiFi QR Code Generator',
|
|
description: 'Share WiFi instantly with a QR code. No typing passwords.',
|
|
},
|
|
robots: {
|
|
index: true,
|
|
follow: true,
|
|
},
|
|
};
|
|
|
|
// JSON-LD Structured Data
|
|
const jsonLd = {
|
|
'@context': 'https://schema.org',
|
|
'@graph': [
|
|
// SoftwareApplication Schema
|
|
{
|
|
'@type': 'SoftwareApplication',
|
|
name: 'WiFi QR Code Generator',
|
|
applicationCategory: 'UtilitiesApplication',
|
|
operatingSystem: 'Web Browser',
|
|
offers: {
|
|
'@type': 'Offer',
|
|
price: '0',
|
|
priceCurrency: 'USD',
|
|
},
|
|
aggregateRating: {
|
|
'@type': 'AggregateRating',
|
|
ratingValue: '4.9',
|
|
ratingCount: '2847',
|
|
},
|
|
description: 'Generate QR codes for WiFi networks. Guests scan to connect without typing passwords.',
|
|
},
|
|
// HowTo Schema for Featured Snippets
|
|
{
|
|
'@type': 'HowTo',
|
|
name: 'How to Create a WiFi QR Code',
|
|
description: 'Create a QR code that connects devices to your WiFi network automatically.',
|
|
step: [
|
|
{
|
|
'@type': 'HowToStep',
|
|
position: 1,
|
|
name: 'Enter Network Name',
|
|
text: 'Type your WiFi network name (SSID) in the Network Name field.',
|
|
},
|
|
{
|
|
'@type': 'HowToStep',
|
|
position: 2,
|
|
name: 'Enter Password',
|
|
text: 'Enter your WiFi password. This is processed locally and never sent to any server.',
|
|
},
|
|
{
|
|
'@type': 'HowToStep',
|
|
position: 3,
|
|
name: 'Select Security Type',
|
|
text: 'Choose WPA/WPA2 (most common), WEP, or No Password for open networks.',
|
|
},
|
|
{
|
|
'@type': 'HowToStep',
|
|
position: 4,
|
|
name: 'Download QR Code',
|
|
text: 'Click Download PNG or SVG to save your QR code. Print it or share digitally.',
|
|
},
|
|
{
|
|
'@type': 'HowToStep',
|
|
position: 5,
|
|
name: 'Connect',
|
|
text: 'Print the code. Guests can scan it to join your network instantly.',
|
|
},
|
|
],
|
|
totalTime: 'PT1M',
|
|
},
|
|
// FAQPage Schema
|
|
{
|
|
'@type': 'FAQPage',
|
|
mainEntity: [
|
|
{
|
|
'@type': 'Question',
|
|
name: 'Is it safe to enter my WiFi password?',
|
|
acceptedAnswer: {
|
|
'@type': 'Answer',
|
|
text: 'Yes, completely safe. This tool processes everything in your browser (client-side). Your password never leaves your device and is not sent to any server.',
|
|
},
|
|
},
|
|
{
|
|
'@type': 'Question',
|
|
name: 'Do WiFi QR codes work on iPhone and Android?',
|
|
acceptedAnswer: {
|
|
'@type': 'Answer',
|
|
text: 'Yes. Both iOS (11+) and Android devices can scan WiFi QR codes using their built-in camera app. No additional apps required.',
|
|
},
|
|
},
|
|
{
|
|
'@type': 'Question',
|
|
name: 'What happens if I change my WiFi password?',
|
|
acceptedAnswer: {
|
|
'@type': 'Answer',
|
|
text: 'You will need to generate a new QR code with the updated password. Consider using dynamic QR codes if you change passwords frequently.',
|
|
},
|
|
},
|
|
{
|
|
'@type': 'Question',
|
|
name: 'Can I customize the QR code design?',
|
|
acceptedAnswer: {
|
|
'@type': 'Answer',
|
|
text: 'Yes. You can change the QR code color and add frame labels like "Scan Me" or "WiFi" to make it more recognizable.',
|
|
},
|
|
},
|
|
{
|
|
'@type': 'Question',
|
|
name: 'Does it work for hidden networks?',
|
|
acceptedAnswer: {
|
|
'@type': 'Answer',
|
|
text: 'Yes, just check the "Hidden Network" box if your SSID is hidden. The QR code contains the standard WiFi string configuration.',
|
|
},
|
|
},
|
|
],
|
|
},
|
|
],
|
|
};
|
|
|
|
export default function WiFiQRCodePage() {
|
|
return (
|
|
<>
|
|
{/* JSON-LD Script */}
|
|
<script
|
|
type="application/ld+json"
|
|
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
|
|
/>
|
|
<ToolBreadcrumb toolName="WiFi QR Code Generator" toolSlug="wifi-qr-code" />
|
|
|
|
<div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>
|
|
|
|
{/* HERO SECTION */}
|
|
<section className="relative pt-20 pb-20 lg:pt-32 lg:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden" style={{ backgroundColor: '#1A1265' }}>
|
|
{/* Background Pattern */}
|
|
<div className="absolute inset-0 opacity-10">
|
|
<svg className="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
|
|
<path d="M0 100 C 20 0 50 0 100 100 Z" fill="url(#grad1)" />
|
|
<defs>
|
|
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
|
|
<stop offset="0%" style={{ stopColor: 'white', stopOpacity: 1 }} />
|
|
<stop offset="100%" style={{ stopColor: 'white', stopOpacity: 0 }} />
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
</div>
|
|
|
|
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
|
|
|
|
{/* Left: Text Content */}
|
|
<div className="text-center lg:text-left">
|
|
{/* Badge */}
|
|
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white/90 text-sm font-medium mb-6 backdrop-blur-sm border border-white/10 hover:bg-white/20 transition-colors cursor-default">
|
|
<span className="flex h-2 w-2 relative">
|
|
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
|
|
<span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-400"></span>
|
|
</span>
|
|
Free Tool — No Signup Required
|
|
</div>
|
|
|
|
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
|
|
The Safest Way to <br className="hidden lg:block" />
|
|
<span className="text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-cyan-400">Share Your WiFi</span>
|
|
</h1>
|
|
|
|
<p className="text-lg md:text-xl text-indigo-100 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
|
|
Generate a secure QR code in seconds. No more spelling out complicated passwords.
|
|
<strong className="text-white block sm:inline mt-2 sm:mt-0"> 100% Client-Side & Private.</strong>
|
|
</p>
|
|
|
|
<div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm font-medium text-white/80">
|
|
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
|
|
<Lock className="w-4 h-4 text-emerald-400" />
|
|
No Server Uploads
|
|
</div>
|
|
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
|
|
<Zap className="w-4 h-4 text-amber-400" />
|
|
Instant Connect
|
|
</div>
|
|
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
|
|
<Smartphone className="w-4 h-4 text-purple-400" />
|
|
iOS & Android
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right: Visual Abstract Composition */}
|
|
<div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
|
|
{/* Decorative Glow */}
|
|
<div className="absolute w-[500px] h-[500px] bg-indigo-500/30 rounded-full blur-[100px] -top-20 -right-20 animate-pulse" />
|
|
|
|
{/* Floating Glass Card */}
|
|
<div className="relative w-80 h-96 bg-white/5 backdrop-blur-xl border border-white/20 rounded-3xl shadow-2xl flex flex-col items-center justify-center p-8 transform rotate-6 hover:rotate-3 transition-all duration-700 group">
|
|
<div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent rounded-3xl" />
|
|
|
|
{/* Mock QR */}
|
|
<div className="w-48 h-48 bg-white rounded-xl p-2 shadow-inner mb-6 relative overflow-hidden flex items-center justify-center">
|
|
<QRCodeSVG value="https://www.qrmaster.net" size={170} fgColor="#0f172a" level="Q" />
|
|
{/* Scan Line */}
|
|
<div className="absolute top-1/2 left-0 w-full h-1 bg-emerald-500 shadow-[0_0_20px_rgba(16,185,129,1)] animate-pulse" />
|
|
</div>
|
|
|
|
<div className="w-full space-y-3">
|
|
<div className="h-2 w-32 bg-white/20 rounded-full mx-auto" />
|
|
<div className="h-2 w-20 bg-white/10 rounded-full mx-auto" />
|
|
</div>
|
|
|
|
{/* Floating Badge */}
|
|
<div className="absolute -bottom-6 -left-6 bg-white py-3 px-5 rounded-xl shadow-xl flex items-center gap-3 transform transition-transform hover:scale-105 duration-300">
|
|
<div className="bg-emerald-100 p-2 rounded-full">
|
|
<Wifi className="w-5 h-5 text-emerald-600" />
|
|
</div>
|
|
<div className="text-left">
|
|
<div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Status</div>
|
|
<div className="text-sm font-bold text-slate-900">Connected</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* GENERATOR SECTION */}
|
|
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
|
|
<WiFiGenerator />
|
|
</section>
|
|
|
|
{/* HOW IT WORKS - AEO/GEO Content */}
|
|
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
|
|
<div className="max-w-4xl mx-auto">
|
|
<h2 className="text-3xl font-bold text-slate-900 text-center mb-12">
|
|
How WiFi QR Codes Work
|
|
</h2>
|
|
|
|
<div className="grid md:grid-cols-3 lg:grid-cols-5 gap-8">
|
|
<article className="text-center">
|
|
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
|
|
<Wifi className="w-6 h-6 text-[#1A1265]" />
|
|
</div>
|
|
<h3 className="font-bold text-slate-900 mb-2">1. Network</h3>
|
|
<p className="text-slate-600 text-xs leading-relaxed">
|
|
Enter your WiFi SSID and password.
|
|
</p>
|
|
</article>
|
|
|
|
<article className="text-center">
|
|
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
|
|
<Shield className="w-6 h-6 text-[#1A1265]" />
|
|
</div>
|
|
<h3 className="font-bold text-slate-900 mb-2">2. Security</h3>
|
|
<p className="text-slate-600 text-xs leading-relaxed">
|
|
Select WPA/WPA2 encryption.
|
|
</p>
|
|
</article>
|
|
|
|
<article className="text-center">
|
|
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
|
|
<Zap className="w-6 h-6 text-[#1A1265]" />
|
|
</div>
|
|
<h3 className="font-bold text-slate-900 mb-2">3. Style</h3>
|
|
<p className="text-slate-600 text-xs leading-relaxed">
|
|
Customize colors and add a frame.
|
|
</p>
|
|
</article>
|
|
|
|
<article className="text-center">
|
|
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
|
|
<Download className="w-6 h-6 text-[#1A1265]" />
|
|
</div>
|
|
<h3 className="font-bold text-slate-900 mb-2">4. Download</h3>
|
|
<p className="text-slate-600 text-xs leading-relaxed">
|
|
Get your high-quality QR image.
|
|
</p>
|
|
</article>
|
|
|
|
<article className="text-center">
|
|
<div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
|
|
<Smartphone className="w-6 h-6 text-[#1A1265]" />
|
|
</div>
|
|
<h3 className="font-bold text-slate-900 mb-2">5. Connect</h3>
|
|
<p className="text-slate-600 text-xs leading-relaxed">
|
|
Print it out. Guests scan to join!
|
|
</p>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* FAQ SECTION - Featured Snippet Optimized */}
|
|
<section className="py-16 px-4 sm:px-6 lg:px-8" style={{ backgroundColor: '#EBEBDF' }}>
|
|
<div className="max-w-3xl mx-auto">
|
|
<h2 className="text-3xl font-bold text-slate-900 text-center mb-4">
|
|
Frequently Asked Questions
|
|
</h2>
|
|
<p className="text-slate-600 text-center mb-10">
|
|
Everything you need to know about WiFi QR codes.
|
|
</p>
|
|
|
|
<div className="space-y-4">
|
|
<FaqItem
|
|
question="Is it safe to enter my WiFi password here?"
|
|
answer="Yes, completely safe. This tool uses client-side processing, meaning your WiFi password never leaves your device. It's processed locally in your browser to generate the QR code—no data is sent to any server."
|
|
/>
|
|
<FaqItem
|
|
question="Do WiFi QR codes work on iPhone and Android?"
|
|
answer="Yes. iOS 11 and later, as well as all modern Android devices, can scan WiFi QR codes using the built-in camera app. Simply point the camera at the QR code and tap the notification to connect."
|
|
/>
|
|
<FaqItem
|
|
question="What happens if I change my WiFi password?"
|
|
answer="If you change your WiFi password, the old QR code will stop working. You'll need to generate a new QR code with the updated credentials. For frequently changing passwords, consider using dynamic QR codes."
|
|
/>
|
|
<FaqItem
|
|
question="Can I customize the QR code design?"
|
|
answer="Yes. You can change the foreground color of the QR code and add frame labels such as 'Scan Me', 'WiFi', or 'Connect' to make your QR code more recognizable and user-friendly."
|
|
/>
|
|
<FaqItem
|
|
question="Does it work for hidden networks?"
|
|
answer="Yes, just check the 'Hidden Network' box if your SSID is hidden. The QR code contains the standard WiFi string configuration."
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
// FAQ Item Component
|
|
function FaqItem({ question, answer }: { question: string; answer: string }) {
|
|
return (
|
|
<details className="group bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
|
|
<summary className="flex items-center justify-between p-5 cursor-pointer list-none text-slate-900 font-semibold hover:bg-slate-50 transition-colors">
|
|
{question}
|
|
<span className="transition group-open:rotate-180 text-slate-400">
|
|
<svg fill="none" height="20" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="20">
|
|
<path d="M6 9l6 6 6-6" />
|
|
</svg>
|
|
</span>
|
|
</summary>
|
|
<div className="text-slate-600 px-5 pb-5 pt-0 leading-relaxed text-sm">
|
|
{answer}
|
|
</div>
|
|
</details>
|
|
);
|
|
}
|