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

feat: Add 19 free QR code tools with SEO optimization

Browse Source 
- Added PayPal, Zoom, Teams QR generators
- Added lazy loading for html-to-image (performance)
- Created 19 OG images for social sharing
- Added robots.txt and updated sitemap
- Fixed mobile navigation with accordion menu
- Added 7 color options per generator
- Fixed crypto QR with universal/wallet mode toggle
- Hero QR codes all point to qrmaster.net
This commit is contained in:
Timo Knuth
2026-01-10 00:22:07 +01:00
parent e539aaf9a1
commit eb2faec952
70 changed files with 12803 additions and 592 deletions
Download Patch File Download Diff File Expand all files Collapse all files

315
src/app/(marketing)/tools/sms-qr-code/page.tsx Normal file
View File

@@ -0,0 +1,315 @@
import React from 'react';
import type { Metadata } from 'next';
import SMSGenerator from './SMSGenerator';
import { MessageSquare, Shield, Zap, Smartphone, Send } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
// SEO Optimized Metadata
export const metadata: Metadata = {
title: 'Free SMS QR Code Generator | Pre-filled Texts | QR Master',
description: 'Create a QR code to send an SMS text message instantly. Pre-fill the phone number and message body. Free, private, and works on all phones.',
keywords: ['sms qr code', 'text message qr code', 'send sms qr', 'sms generator', 'text qr'],
alternates: {
canonical: 'https://qrmaster.io/tools/sms-qr-code',
},
openGraph: {
title: 'Free SMS QR Code Generator | QR Master',
description: 'Generate QR codes for instant SMS messages. Pre-fill text and number.',
type: 'website',
url: 'https://qrmaster.io/tools/sms-qr-code',
images: [{ url: '/og-sms-generator.png', width: 1200, height: 630 }],
},
twitter: {
card: 'summary_large_image',
title: 'Free SMS QR Code Generator',
description: 'Create QR codes to send texts. Instant and free.',
},
robots: {
index: true,
follow: true,
},
};
// JSON-LD Structured Data
const jsonLd = {
'@context': 'https://schema.org',
'@graph': [
{
'@type': 'SoftwareApplication',
name: 'SMS QR Code Generator',
applicationCategory: 'UtilitiesApplication',
operatingSystem: 'Web Browser',
offers: {
'@type': 'Offer',
price: '0',
priceCurrency: 'USD',
},
aggregateRating: {
'@type': 'AggregateRating',
ratingValue: '4.8',
ratingCount: '1350',
},
description: 'Generate QR codes that open the user\'s SMS app with a pre-filled message.',
},
{
'@type': 'HowTo',
name: 'How to Create an SMS QR Code',
description: 'Create a QR code that prepares a text message.',
step: [
{
'@type': 'HowToStep',
position: 1,
name: 'Enter Phone Number',
text: 'Type the destination phone number.',
},
{
'@type': 'HowToStep',
position: 2,
name: 'Enter Message',
text: 'Type the message you want pre-filled (e.g., "Send me info!").',
},
{
'@type': 'HowToStep',
position: 3,
name: 'Download',
text: 'Save the QR code and share it.',
},
],
totalTime: 'PT30S',
},
{
'@type': 'FAQPage',
mainEntity: [
{
'@type': 'Question',
name: 'Does the text send automatically?',
acceptedAnswer: {
'@type': 'Answer',
text: 'No. The QR code opens the messaging app with the text typed out. The user must simply tap "Send". This is a security feature of all smartphones.',
},
},
{
'@type': 'Question',
name: 'Is there a cost?',
acceptedAnswer: {
'@type': 'Answer',
text: 'Generating the code is free. Standard SMS rates apply for the person sending the text message, depending on their carrier plan.',
},
},
{
'@type': 'Question',
name: 'Can I change the message later?',
acceptedAnswer: {
'@type': 'Answer',
text: 'No. Static QR codes have the message embedded in them. To change the message, you need a new QR code.',
},
},
{
'@type': 'Question',
name: 'What uses are there for SMS QR codes?',
acceptedAnswer: {
'@type': 'Answer',
text: 'They are great for SMS marketing opt-ins ("Text JOIN to 12345"), customer support requests, or voting via text.',
},
},
],
},
],
};
export default function SMSQRCodePage() {
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<ToolBreadcrumb toolName="SMS QR Code Generator" toolSlug="sms-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: '#ea580c' }}>
<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">
<div className="text-center lg:text-left">
<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-amber-400 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-amber-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">
Make Texting Easy with <br className="hidden lg:block" />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-amber-200 to-orange-100">SMS QR Codes</span>
</h1>
<p className="text-lg md:text-xl text-orange-50 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
Let users send you a pre-written text with one scan. Ideal for opt-ins and support.
<strong className="text-white block sm:inline mt-2 sm:mt-0"> Universal compatibility.</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">
<MessageSquare className="w-4 h-4 text-amber-300" />
Pre-fill Texts
</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-300" />
Instant Open
</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">
<Shield className="w-4 h-4 text-amber-300" />
Zero Friction
</div>
</div>
</div>
{/* Visual Abstract */}
<div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
<div className="absolute w-[500px] h-[500px] bg-orange-500/30 rounded-full blur-[100px] -top-20 -right-20 animate-pulse" />
<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-3 hover:rotate-0 transition-all duration-700 group">
<div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent rounded-3xl" />
<div className="w-full bg-white rounded-xl shadow-lg p-3 mb-6 relative overflow-hidden flex gap-3 items-center">
<div className="w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center shrink-0">
<MessageSquare className="w-5 h-5 text-orange-600" />
</div>
<div className="bg-slate-100 rounded-2xl rounded-tl-none p-3 text-xs text-slate-600 w-full">
Hi, I want to join the club!
</div>
</div>
<div className="w-48 h-48 bg-white rounded-xl p-2 shadow-inner relative overflow-hidden flex items-center justify-center">
<QRCodeSVG value="https://www.qrmaster.net" size={170} fgColor="#0f172a" level="Q" />
</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-orange-100 p-2 rounded-full">
<Send className="w-5 h-5 text-orange-600" />
</div>
<div className="text-left">
<div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">SMS</div>
<div className="text-sm font-bold text-slate-900">Sent!</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* GENERATOR SECTION */}
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
<SMSGenerator />
</section>
{/* HOW IT WORKS */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-slate-900 text-center mb-12">
How SMS QR Codes Work
</h2>
<div className="grid md:grid-cols-3 gap-8">
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-orange-50 flex items-center justify-center mx-auto mb-4">
<MessageSquare className="w-7 h-7 text-orange-600" />
</div>
<h3 className="font-bold text-slate-900 mb-2">1. Compose</h3>
<p className="text-slate-600 text-sm">
Enter the number and the message you want your customers to send.
</p>
</article>
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-orange-50 flex items-center justify-center mx-auto mb-4">
<Smartphone className="w-7 h-7 text-orange-600" />
</div>
<h3 className="font-bold text-slate-900 mb-2">2. Scan</h3>
<p className="text-slate-600 text-sm">
User scans the code. The messages app opens automatically.
</p>
</article>
<article className="text-center">
<div className="w-14 h-14 rounded-2xl bg-orange-50 flex items-center justify-center mx-auto mb-4">
<Send className="w-7 h-7 text-orange-600" />
</div>
<h3 className="font-bold text-slate-900 mb-2">3. Send</h3>
<p className="text-slate-600 text-sm">
User hits "Send" to trigger the text. Perfect for quick sign-ups or votes.
</p>
</article>
</div>
</div>
</section>
{/* FAQ SECTION */}
<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">
Common questions about SMS QR codes.
</p>
<div className="space-y-4">
<FaqItem
question="Does the user need an internet connection?"
answer="No. The QR code contains all the info offline. However, the user needs a cellular signal to actually send the SMS message."
/>
<FaqItem
question="Is it free for the user to send?"
answer="It depends on their mobile plan. Standard SMS rates apply, though most modern plans include unlimited texting."
/>
<FaqItem
question="Can I use shortcodes?"
answer="Yes. You can enter a shortcode (e.g. 55555) in the phone number field instead of a regular number."
/>
<FaqItem
question="Is my phone number visible?"
answer="Yes. Since the user is sending a text to you, they will see your number (or shortcode) in their messaging app."
/>
</div>
</div>
</section>
</div>
</>
);
}
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>
);
}