336 lines
19 KiB
TypeScript
336 lines
19 KiB
TypeScript
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';
|
|
import { RelatedTools } from '@/components/marketing/RelatedTools';
|
|
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils';
|
|
|
|
// SEO Optimized Metadata
|
|
export const metadata: Metadata = {
|
|
title: {
|
|
absolute: 'Free Crypto QR Code Generator | Krypto QR Code Erstellen | QR Master',
|
|
},
|
|
description: 'Create a QR code for your Crypto wallet address. Erstelle Bitcoin & Ethereum QR Codes für einfache Zahlungen. Supports BTC, ETH, USDT & more.',
|
|
keywords: ['crypto qr code', 'bitcoin qr generator', 'ethereum qr code', 'crypto wallet qr', 'donation qr code', 'krypto qr code', 'bitcoin qr code erstellen', 'kryptowährung qr code', 'wallet adresse qr code'],
|
|
alternates: {
|
|
canonical: 'https://www.qrmaster.net/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://www.qrmaster.net/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': [
|
|
generateSoftwareAppSchema(
|
|
'Crypto QR Code Generator',
|
|
'Generate QR codes that contain your cryptocurrency wallet address for easy payments.',
|
|
'/og-crypto-generator.png',
|
|
'FinanceApplication'
|
|
),
|
|
{
|
|
'@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',
|
|
},
|
|
generateFaqSchema({
|
|
'Is it safe to share my wallet address?': {
|
|
question: 'Is it safe to share my wallet address?',
|
|
answer: 'Yes. Your public wallet address is designed to be shared so you can receive funds. Never share your private key.',
|
|
},
|
|
'Which currencies are supported?': {
|
|
question: 'Which currencies are supported?',
|
|
answer: 'Our generator supports standard URI schemes for Bitcoin, Ethereum, Solana, and can generally store any wallet string for other coins.',
|
|
},
|
|
'Can I add a specific amount?': {
|
|
question: 'Can I add a specific amount?',
|
|
answer: 'Yes, you can pre-fill an amount so when the user scans, their wallet app automatically suggests the correct payment value.',
|
|
},
|
|
'Does it work with all wallets?': {
|
|
question: 'Does it work with all wallets?',
|
|
answer: 'Yes, standard crypto QR codes are universally readable by almost all modern wallet apps (Coinbase, MetaMask, Trust Wallet, etc.).',
|
|
},
|
|
'Are there any fees?': {
|
|
question: 'Are there any fees?',
|
|
answer: '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 (
|
|
<>
|
|
<script
|
|
type="application/ld+json"
|
|
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
|
|
/>
|
|
<ToolBreadcrumb toolName="Crypto QR Code Generator" toolSlug="crypto-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 bg-slate-900">
|
|
<div className="absolute inset-0 opacity-20">
|
|
{/* Circuit Pattern */}
|
|
<svg className="w-full h-full" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<pattern id="circuit_pattern" width="100" height="100" patternUnits="userSpaceOnUse">
|
|
<path d="M10 10 H 90 V 90 H 10 Z" stroke="none" fill="none" />
|
|
<circle cx="20" cy="20" r="2" fill="#F7931A" />
|
|
<circle cx="80" cy="80" r="2" fill="#627EEA" />
|
|
<path d="M20 20 L 50 20 L 50 50" stroke="white" strokeWidth="1" strokeOpacity="0.1" />
|
|
</pattern>
|
|
</defs>
|
|
<rect width="100%" height="100%" fill="url(#circuit_pattern)" />
|
|
</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-orange-400 opacity-75"></span>
|
|
<span className="relative inline-flex rounded-full h-2 w-2 bg-orange-400"></span>
|
|
</span>
|
|
Free Tool — Secure & Private
|
|
</div>
|
|
|
|
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
|
|
Accept Payments with <br className="hidden lg:block" />
|
|
<span className="text-transparent bg-clip-text bg-gradient-to-r from-[#F7931A] to-[#F2A900]">Crypto QR Codes</span>
|
|
</h1>
|
|
|
|
<p className="text-lg md:text-xl text-slate-400 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
|
|
Share your wallet address securely. Supports Bitcoin, Ethereum, USDT, and more.
|
|
<strong className="text-white block sm:inline mt-2 sm:mt-0"> Error-free transfers.</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/10 backdrop-blur-sm">
|
|
<Bitcoin className="w-4 h-4 text-[#F7931A]" />
|
|
Bitcoin
|
|
</div>
|
|
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
|
|
<Coins className="w-4 h-4 text-[#627EEA]" />
|
|
Ethereum & Altcoins
|
|
</div>
|
|
<div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
|
|
<Wallet className="w-4 h-4 text-white" />
|
|
Wallet Connect
|
|
</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/10 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-2 hover:-rotate-1 transition-all duration-700 group">
|
|
<div className="absolute inset-0 bg-gradient-to-br from-white/5 to-transparent rounded-3xl" />
|
|
|
|
<div className="w-full bg-gradient-to-br from-orange-400 to-orange-600 rounded-xl shadow-lg p-5 mb-6 relative overflow-hidden text-white">
|
|
<div className="flex justify-between items-start mb-4">
|
|
<Bitcoin className="w-8 h-8 opacity-80" />
|
|
<div className="bg-white/20 px-2 py-1 rounded text-xs">BTC</div>
|
|
</div>
|
|
<div className="text-2xl font-bold tracking-wider mb-1">0.05 BTC</div>
|
|
<div className="text-xs opacity-70">$3,450.25 USD</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="#333" level="Q" />
|
|
</div>
|
|
|
|
{/* Floating Badge */}
|
|
<div className="absolute -bottom-6 -right-6 bg-slate-900 border border-white/10 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-500/20 p-2 rounded-full">
|
|
<Wallet className="w-5 h-5 text-orange-500" />
|
|
</div>
|
|
<div className="text-left">
|
|
<div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Payment</div>
|
|
<div className="text-sm font-bold text-white">Receive Crypto</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* GENERATOR SECTION */}
|
|
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
|
|
<CryptoGenerator />
|
|
</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 Crypto 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-black flex items-center justify-center mx-auto mb-4">
|
|
<Coins className="w-6 h-6 text-white" />
|
|
</div>
|
|
<h3 className="font-bold text-slate-900 mb-2">1. Select</h3>
|
|
<p className="text-slate-600 text-xs leading-relaxed">
|
|
Choose your crypto currency (BTC, ETH, etc.).
|
|
</p>
|
|
</article>
|
|
|
|
<article className="text-center">
|
|
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
|
|
<Wallet className="w-6 h-6 text-white" />
|
|
</div>
|
|
<h3 className="font-bold text-slate-900 mb-2">2. Paste</h3>
|
|
<p className="text-slate-600 text-xs leading-relaxed">
|
|
Enter your public wallet address.
|
|
</p>
|
|
</article>
|
|
|
|
<article className="text-center">
|
|
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
|
|
<Zap className="w-6 h-6 text-white" />
|
|
</div>
|
|
<h3 className="font-bold text-slate-900 mb-2">3. Amount</h3>
|
|
<p className="text-slate-600 text-xs leading-relaxed">
|
|
Optionally specify an amount to request.
|
|
</p>
|
|
</article>
|
|
|
|
<article className="text-center">
|
|
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
|
|
<Sparkles className="w-6 h-6 text-white" />
|
|
</div>
|
|
<h3 className="font-bold text-slate-900 mb-2">4. Style</h3>
|
|
<p className="text-slate-600 text-xs leading-relaxed">
|
|
Customize colors and add a 'Pay' frame.
|
|
</p>
|
|
</article>
|
|
|
|
<article className="text-center">
|
|
<div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
|
|
<Download className="w-6 h-6 text-white" />
|
|
</div>
|
|
<h3 className="font-bold text-slate-900 mb-2">5. Download</h3>
|
|
<p className="text-slate-600 text-xs leading-relaxed">
|
|
Save your secure QR code image.
|
|
</p>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* RELATED TOOLS */}
|
|
<RelatedTools />
|
|
|
|
{/* 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 Crypto QR codes.
|
|
</p>
|
|
|
|
<div className="space-y-4">
|
|
<FaqItem
|
|
question="Is it safe to share my wallet address?"
|
|
answer="Yes. Your public wallet address is designed to be shared so you can receive funds. Never share your private key."
|
|
/>
|
|
<FaqItem
|
|
question="Which currencies are supported?"
|
|
answer="Our generator supports standard URI schemes for Bitcoin, Ethereum, Solana, and can generally store any wallet string for other coins."
|
|
/>
|
|
<FaqItem
|
|
question="Can I add a specific amount?"
|
|
answer="Yes, you can pre-fill an amount so when the user scans, their wallet app automatically suggests the correct payment value."
|
|
/>
|
|
<FaqItem
|
|
question="Does it work with all wallets?"
|
|
answer="Yes, standard crypto QR codes are universally readable by almost all modern wallet apps (Coinbase, MetaMask, Trust Wallet, etc.)."
|
|
/>
|
|
<FaqItem
|
|
question="Are there any fees?"
|
|
answer="No. This generator is completely free. We do not charge any fees for generating codes or for the transactions made using them."
|
|
/>
|
|
</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>
|
|
);
|
|
}
|