SEO + Stripe
This commit is contained in:
Timo Knuth
@@ -1,373 +1,373 @@
|
||||
import React from 'react';
|
||||
import type { Metadata } from 'next';
|
||||
import VCardGenerator from './VCardGenerator';
|
||||
import { User, Shield, Zap, Smartphone, Contact, Share2, Check, UserPlus, TrendingUp } from 'lucide-react';
|
||||
import { QRCodeSVG } from 'qrcode.react';
|
||||
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
|
||||
import { RelatedTools } from '@/components/marketing/RelatedTools';
|
||||
import { GrowthLinksSection } from '@/components/marketing/GrowthLinksSection';
|
||||
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils';
|
||||
|
||||
// SEO Optimized Metadata
|
||||
export const metadata: Metadata = {
|
||||
title: {
|
||||
absolute: 'Free vCard QR Code Generator | QR Master',
|
||||
},
|
||||
description: 'Create a vCard QR code for your business card. Share contact details instantly — customers scan and save with one tap. Free, no signup required.',
|
||||
keywords: ['vcard qr code', 'business card qr code', 'contact qr generator', 'digital business card', 'add to contacts qr', 'visitenkarte qr code', 'digitale visitenkarte erstellen', 'kontakt qr code', 'elektronische visitenkarte', 'vcard erstellen kostenlos'],
|
||||
alternates: {
|
||||
canonical: 'https://www.qrmaster.net/tools/vcard-qr-code',
|
||||
languages: {
|
||||
'x-default': 'https://www.qrmaster.net/tools/vcard-qr-code',
|
||||
en: 'https://www.qrmaster.net/tools/vcard-qr-code',
|
||||
},
|
||||
},
|
||||
openGraph: {
|
||||
title: 'Free vCard QR Code Generator | QR Master',
|
||||
description: 'Turn your contact info into a QR code. The modern way to share your business card.',
|
||||
type: 'website',
|
||||
url: 'https://www.qrmaster.net/tools/vcard-qr-code',
|
||||
images: [{ url: '/og-vcard-generator.png', width: 1200, height: 630 }],
|
||||
},
|
||||
twitter: {
|
||||
card: 'summary_large_image',
|
||||
title: 'Free vCard QR Code Generator',
|
||||
description: 'Create QR codes for contact sharing. Instant and free.',
|
||||
},
|
||||
robots: {
|
||||
index: true,
|
||||
follow: true,
|
||||
},
|
||||
};
|
||||
|
||||
// JSON-LD Structured Data
|
||||
const jsonLd = {
|
||||
'@context': 'https://schema.org',
|
||||
'@graph': [
|
||||
generateSoftwareAppSchema(
|
||||
'vCard QR Code Generator',
|
||||
'Generate vCard (VCF) QR codes for business cards. Scanners can save contact info instantly.',
|
||||
'/og-vcard-generator.png'
|
||||
),
|
||||
{
|
||||
'@type': 'HowTo',
|
||||
name: 'How to Create a vCard QR Code',
|
||||
datePublished: '2024-01-01',
|
||||
dateModified: '2025-06-01',
|
||||
author: {
|
||||
'@type': 'Person',
|
||||
name: 'Timo Knuth',
|
||||
url: 'https://www.qrmaster.net/authors/timo',
|
||||
},
|
||||
description: 'Create a QR code that saves your contact details.',
|
||||
step: [
|
||||
{
|
||||
'@type': 'HowToStep',
|
||||
position: 1,
|
||||
name: 'Enter Details',
|
||||
text: 'Fill in your Name, Phone, Email, Company, and Address.',
|
||||
},
|
||||
{
|
||||
'@type': 'HowToStep',
|
||||
position: 2,
|
||||
name: 'Customize',
|
||||
text: 'Select a color that matches your brand and add a frame.',
|
||||
},
|
||||
{
|
||||
'@type': 'HowToStep',
|
||||
position: 3,
|
||||
name: 'Download',
|
||||
text: 'Download the QR code image and place it on your physical business card.',
|
||||
},
|
||||
],
|
||||
totalTime: 'PT1M',
|
||||
},
|
||||
generateFaqSchema({
|
||||
'How does a vCard QR code work?': {
|
||||
question: 'How does a vCard QR code work?',
|
||||
answer: 'A vCard QR code contains your contact information in a standardized format (VCF). When scanned, the phone recognizes it as a contact card and prompts the user to "Save Contact" to their address book.',
|
||||
},
|
||||
'Is there a limit to how much info I can add?': {
|
||||
question: 'Is there a limit to how much info I can add?',
|
||||
answer: 'Static QR codes hold data directly in the pattern. The more data you add (long addresses, bio), the denser and harder to scan the QR code becomes. We recommend sticking to essential contact info for static codes.',
|
||||
},
|
||||
'Can I update my info later?': {
|
||||
question: 'Can I update my info later?',
|
||||
answer: 'No. This is a static vCard QR code. Once created, the info cannot be changed. If you move jobs or change numbers, you must print a new code. For editable cards, use our Dynamic vCard Plus.',
|
||||
},
|
||||
'Does it work on iPhone and Android?': {
|
||||
question: 'Does it work on iPhone and Android?',
|
||||
answer: 'Yes. Both iOS (Camera app) and Android (Camera or Google Lens) natively support vCard QR codes and correctly import the contact data.',
|
||||
},
|
||||
}),
|
||||
],
|
||||
};
|
||||
|
||||
export default function VCardQRCodePage() {
|
||||
return (
|
||||
<>
|
||||
<script
|
||||
type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
|
||||
/>
|
||||
<ToolBreadcrumb toolName="vCard QR Code Generator" toolSlug="vcard-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: '#9F1239' }}>
|
||||
<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-rose-400 opacity-75"></span>
|
||||
<span className="relative inline-flex rounded-full h-2 w-2 bg-rose-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 Modern Way to <br className="hidden lg:block" />
|
||||
<span className="text-transparent bg-clip-text bg-gradient-to-r from-rose-300 to-pink-300">Share Your Contact</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-lg md:text-xl text-indigo-100 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
|
||||
Create a scannable Digital Business Card. One scan saves your name, phone, email, and address instantly.
|
||||
<strong className="text-white block sm:inline mt-2 sm:mt-0"> Free & Professional.</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">
|
||||
<UserPlus className="w-4 h-4 text-rose-300" />
|
||||
Instant Save
|
||||
</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">
|
||||
<Share2 className="w-4 h-4 text-amber-400" />
|
||||
Easy Share
|
||||
</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-purple-400" />
|
||||
No Data Stored
|
||||
</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-indigo-500/30 rounded-full blur-[100px] -top-20 -right-20 animate-pulse" />
|
||||
|
||||
<div className="relative w-96 h-60 bg-white/10 backdrop-blur-2xl border border-white/30 rounded-2xl shadow-2xl p-6 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" />
|
||||
|
||||
<div className="flex justify-between items-start relative z-10">
|
||||
<div className="space-y-4">
|
||||
<div className="w-16 h-16 rounded-full bg-white/20 border-2 border-white/30 flex items-center justify-center">
|
||||
<Contact className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<div className="h-4 w-32 bg-white/90 rounded-sm" />
|
||||
<div className="h-3 w-20 bg-emerald-400/90 rounded-sm" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-24 h-24 bg-white rounded-lg p-1.5 shadow-lg">
|
||||
<QRCodeSVG value="https://www.qrmaster.net" size={84} fgColor="#1A1265" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-6 left-6 space-y-2 z-10">
|
||||
<div className="h-2 w-48 bg-white/40 rounded-full" />
|
||||
<div className="h-2 w-40 bg-white/30 rounded-full" />
|
||||
</div>
|
||||
|
||||
{/* Floating Badge */}
|
||||
<div className="absolute -bottom-4 -left-4 bg-white py-2 px-4 rounded-lg shadow-xl flex items-center gap-2 transform scale-90">
|
||||
<div className="bg-emerald-100 p-1.5 rounded-full">
|
||||
<Check className="w-3 h-3 text-emerald-600" />
|
||||
</div>
|
||||
<span className="text-xs font-bold text-slate-900">Saved to Contacts</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* GENERATOR SECTION */}
|
||||
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
|
||||
<VCardGenerator />
|
||||
</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 vCard 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-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
|
||||
<Contact className="w-7 h-7 text-[#1A1265]" />
|
||||
</div>
|
||||
<h3 className="font-bold text-slate-900 mb-2">1. Enter Details</h3>
|
||||
<p className="text-slate-600 text-sm">
|
||||
Fill in your professional contact information. Only add what you want to share.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article className="text-center">
|
||||
<div className="w-14 h-14 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
|
||||
<Smartphone className="w-7 h-7 text-[#1A1265]" />
|
||||
</div>
|
||||
<h3 className="font-bold text-slate-900 mb-2">2. Scan</h3>
|
||||
<p className="text-slate-600 text-sm">
|
||||
A potential client or partner scans your card with their phone camera.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article className="text-center">
|
||||
<div className="w-14 h-14 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
|
||||
<UserPlus className="w-7 h-7 text-[#1A1265]" />
|
||||
</div>
|
||||
<h3 className="font-bold text-slate-900 mb-2">3. Save</h3>
|
||||
<p className="text-slate-600 text-sm">
|
||||
They tap "Create New Contact" to save your details instantly. No typing errors.
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* WHY DIGITAL BUSINESS CARDS — STATISTICS */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<TrendingUp className="w-5 h-5 text-rose-500" />
|
||||
<span className="text-sm font-semibold text-rose-600 uppercase tracking-wider">Research-backed</span>
|
||||
</div>
|
||||
<h2 className="text-3xl font-bold text-slate-900 mb-4">
|
||||
Why Digital Contact Sharing Outperforms Paper Cards
|
||||
</h2>
|
||||
<p className="text-slate-600 mb-10 max-w-2xl">
|
||||
A <strong>vCard QR code</strong> solves the single biggest problem with traditional business cards: they get discarded before anyone saves your details.
|
||||
</p>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6 mb-8">
|
||||
<div className="bg-rose-50 border border-rose-100 rounded-2xl p-6">
|
||||
<div className="text-4xl font-extrabold text-rose-600 mb-2">88%</div>
|
||||
<p className="text-slate-700 text-sm leading-relaxed mb-3">
|
||||
of traditional paper business cards are thrown away within a week of being handed out. A vCard QR code on your card saves contact details instantly — no manual typing, no lost connections.
|
||||
</p>
|
||||
<p className="text-xs text-slate-500">
|
||||
Source: <a href="https://www.adobe.com/express/learn/blog/business-card-statistics" target="_blank" rel="noopener noreferrer" className="underline hover:text-slate-700">Adobe Business Research</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-orange-50 border border-orange-100 rounded-2xl p-6">
|
||||
<div className="text-4xl font-extrabold text-orange-600 mb-2">1-tap save</div>
|
||||
<p className="text-slate-700 text-sm leading-relaxed mb-3">
|
||||
Instead of asking someone to manually type your name, phone, and email — a vCard QR code transfers all contact fields (name, phone, email, company, URL) directly into their phone's address book with a single scan.
|
||||
</p>
|
||||
<p className="text-xs text-slate-500">
|
||||
vCard 3.0 / VCF format — supported natively by iOS and Android
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-slate-400 italic">
|
||||
By Timo Knuth, QR Master · Last updated: June 2025 · Based on independent academic and industry research
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* GROWTH LINKS */}
|
||||
<GrowthLinksSection
|
||||
eyebrow="Level up your QR strategy"
|
||||
title="More ways to use QR codes for your brand"
|
||||
description="A vCard QR code is a great start. Add custom design, tracking, and dynamic destinations to get the most out of every print."
|
||||
links={[
|
||||
{
|
||||
href: '/custom-qr-code-generator',
|
||||
title: 'Custom QR Code Generator',
|
||||
description: 'Add your logo, brand colors, and a custom frame to your QR codes.',
|
||||
ctaLabel: 'Custom QR with logo',
|
||||
},
|
||||
{
|
||||
href: '/dynamic-qr-code-generator',
|
||||
title: 'Dynamic QR Code Generator',
|
||||
description: 'Update your contact destination after printing. No new QR code needed.',
|
||||
ctaLabel: 'Dynamic QR with tracking',
|
||||
},
|
||||
]}
|
||||
pageType="commercial"
|
||||
cluster="vcard-qr"
|
||||
/>
|
||||
|
||||
{/* 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 vCard QR codes.
|
||||
</p>
|
||||
|
||||
<div className="space-y-4">
|
||||
<FaqItem
|
||||
question="Can I add a profile picture?"
|
||||
answer="Not on a static vCard QR code. Static codes store data in the pixels, so adding an image would make the code too complex to scan. For profile pictures, social links, and rich media, use our Dynamic vCard Plus solution."
|
||||
/>
|
||||
<FaqItem
|
||||
question="How long does the QR code last?"
|
||||
answer="Forever. Static vCard QR codes do not expire because the data is embedded directly in the image."
|
||||
/>
|
||||
<FaqItem
|
||||
question="What information is required?"
|
||||
answer="Nothing is strictly required, but we recommend at least a First Name and either a Phone Number or Email so the contact is useful."
|
||||
/>
|
||||
<FaqItem
|
||||
question="Is my data safe?"
|
||||
answer="Yes. This tool operates 100% in your browser. We do not store, see, or optimize your contact data. It goes directly from your input to the QR code."
|
||||
/>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
import React from 'react';
|
||||
import type { Metadata } from 'next';
|
||||
import VCardGenerator from './VCardGenerator';
|
||||
import { User, Shield, Zap, Smartphone, Contact, Share2, Check, UserPlus, TrendingUp } from 'lucide-react';
|
||||
import { QRCodeSVG } from 'qrcode.react';
|
||||
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
|
||||
import { RelatedTools } from '@/components/marketing/RelatedTools';
|
||||
import { GrowthLinksSection } from '@/components/marketing/GrowthLinksSection';
|
||||
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils';
|
||||
|
||||
// SEO Optimized Metadata
|
||||
export const metadata: Metadata = {
|
||||
title: {
|
||||
absolute: 'Free vCard QR Code Generator | QR Master',
|
||||
},
|
||||
description: 'Create a vCard QR code for your business card. Share contact details instantly — customers scan and save with one tap. Free, no signup required.',
|
||||
keywords: ['vcard qr code', 'business card qr code', 'contact qr generator', 'digital business card', 'add to contacts qr', 'visitenkarte qr code', 'digitale visitenkarte erstellen', 'kontakt qr code', 'elektronische visitenkarte', 'vcard erstellen kostenlos'],
|
||||
alternates: {
|
||||
canonical: 'https://www.qrmaster.net/tools/vcard-qr-code',
|
||||
languages: {
|
||||
'x-default': 'https://www.qrmaster.net/tools/vcard-qr-code',
|
||||
en: 'https://www.qrmaster.net/tools/vcard-qr-code',
|
||||
},
|
||||
},
|
||||
openGraph: {
|
||||
title: 'Free vCard QR Code Generator | QR Master',
|
||||
description: 'Turn your contact info into a QR code. The modern way to share your business card.',
|
||||
type: 'website',
|
||||
url: 'https://www.qrmaster.net/tools/vcard-qr-code',
|
||||
images: [{ url: '/og-vcard-generator.png', width: 1200, height: 630 }],
|
||||
},
|
||||
twitter: {
|
||||
card: 'summary_large_image',
|
||||
title: 'Free vCard QR Code Generator',
|
||||
description: 'Create QR codes for contact sharing. Instant and free.',
|
||||
},
|
||||
robots: {
|
||||
index: true,
|
||||
follow: true,
|
||||
},
|
||||
};
|
||||
|
||||
// JSON-LD Structured Data
|
||||
const jsonLd = {
|
||||
'@context': 'https://schema.org',
|
||||
'@graph': [
|
||||
generateSoftwareAppSchema(
|
||||
'vCard QR Code Generator',
|
||||
'Generate vCard (VCF) QR codes for business cards. Scanners can save contact info instantly.',
|
||||
'/og-vcard-generator.png'
|
||||
),
|
||||
{
|
||||
'@type': 'HowTo',
|
||||
name: 'How to Create a vCard QR Code',
|
||||
datePublished: '2024-01-01',
|
||||
dateModified: '2026-04-27',
|
||||
author: {
|
||||
'@type': 'Person',
|
||||
name: 'Timo Knuth',
|
||||
url: 'https://www.qrmaster.net/authors/timo',
|
||||
},
|
||||
description: 'Create a QR code that saves your contact details.',
|
||||
step: [
|
||||
{
|
||||
'@type': 'HowToStep',
|
||||
position: 1,
|
||||
name: 'Enter Details',
|
||||
text: 'Fill in your Name, Phone, Email, Company, and Address.',
|
||||
},
|
||||
{
|
||||
'@type': 'HowToStep',
|
||||
position: 2,
|
||||
name: 'Customize',
|
||||
text: 'Select a color that matches your brand and add a frame.',
|
||||
},
|
||||
{
|
||||
'@type': 'HowToStep',
|
||||
position: 3,
|
||||
name: 'Download',
|
||||
text: 'Download the QR code image and place it on your physical business card.',
|
||||
},
|
||||
],
|
||||
totalTime: 'PT1M',
|
||||
},
|
||||
generateFaqSchema({
|
||||
'How does a vCard QR code work?': {
|
||||
question: 'How does a vCard QR code work?',
|
||||
answer: 'A vCard QR code contains your contact information in a standardized format (VCF). When scanned, the phone recognizes it as a contact card and prompts the user to "Save Contact" to their address book.',
|
||||
},
|
||||
'Is there a limit to how much info I can add?': {
|
||||
question: 'Is there a limit to how much info I can add?',
|
||||
answer: 'Static QR codes hold data directly in the pattern. The more data you add (long addresses, bio), the denser and harder to scan the QR code becomes. We recommend sticking to essential contact info for static codes.',
|
||||
},
|
||||
'Can I update my info later?': {
|
||||
question: 'Can I update my info later?',
|
||||
answer: 'No. This is a static vCard QR code. Once created, the info cannot be changed. If you move jobs or change numbers, you must print a new code. For editable cards, use our Dynamic vCard Plus.',
|
||||
},
|
||||
'Does it work on iPhone and Android?': {
|
||||
question: 'Does it work on iPhone and Android?',
|
||||
answer: 'Yes. Both iOS (Camera app) and Android (Camera or Google Lens) natively support vCard QR codes and correctly import the contact data.',
|
||||
},
|
||||
}),
|
||||
],
|
||||
};
|
||||
|
||||
export default function VCardQRCodePage() {
|
||||
return (
|
||||
<>
|
||||
<script
|
||||
type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
|
||||
/>
|
||||
<ToolBreadcrumb toolName="vCard QR Code Generator" toolSlug="vcard-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: '#9F1239' }}>
|
||||
<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-rose-400 opacity-75"></span>
|
||||
<span className="relative inline-flex rounded-full h-2 w-2 bg-rose-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 Modern Way to <br className="hidden lg:block" />
|
||||
<span className="text-transparent bg-clip-text bg-gradient-to-r from-rose-300 to-pink-300">Share Your Contact</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-lg md:text-xl text-indigo-100 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
|
||||
Create a scannable Digital Business Card. One scan saves your name, phone, email, and address instantly.
|
||||
<strong className="text-white block sm:inline mt-2 sm:mt-0"> Free & Professional.</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">
|
||||
<UserPlus className="w-4 h-4 text-rose-300" />
|
||||
Instant Save
|
||||
</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">
|
||||
<Share2 className="w-4 h-4 text-amber-400" />
|
||||
Easy Share
|
||||
</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-purple-400" />
|
||||
No Data Stored
|
||||
</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-indigo-500/30 rounded-full blur-[100px] -top-20 -right-20 animate-pulse" />
|
||||
|
||||
<div className="relative w-96 h-60 bg-white/10 backdrop-blur-2xl border border-white/30 rounded-2xl shadow-2xl p-6 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" />
|
||||
|
||||
<div className="flex justify-between items-start relative z-10">
|
||||
<div className="space-y-4">
|
||||
<div className="w-16 h-16 rounded-full bg-white/20 border-2 border-white/30 flex items-center justify-center">
|
||||
<Contact className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<div className="h-4 w-32 bg-white/90 rounded-sm" />
|
||||
<div className="h-3 w-20 bg-emerald-400/90 rounded-sm" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-24 h-24 bg-white rounded-lg p-1.5 shadow-lg">
|
||||
<QRCodeSVG value="https://www.qrmaster.net" size={84} fgColor="#1A1265" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-6 left-6 space-y-2 z-10">
|
||||
<div className="h-2 w-48 bg-white/40 rounded-full" />
|
||||
<div className="h-2 w-40 bg-white/30 rounded-full" />
|
||||
</div>
|
||||
|
||||
{/* Floating Badge */}
|
||||
<div className="absolute -bottom-4 -left-4 bg-white py-2 px-4 rounded-lg shadow-xl flex items-center gap-2 transform scale-90">
|
||||
<div className="bg-emerald-100 p-1.5 rounded-full">
|
||||
<Check className="w-3 h-3 text-emerald-600" />
|
||||
</div>
|
||||
<span className="text-xs font-bold text-slate-900">Saved to Contacts</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* GENERATOR SECTION */}
|
||||
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
|
||||
<VCardGenerator />
|
||||
</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 vCard 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-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
|
||||
<Contact className="w-7 h-7 text-[#1A1265]" />
|
||||
</div>
|
||||
<h3 className="font-bold text-slate-900 mb-2">1. Enter Details</h3>
|
||||
<p className="text-slate-600 text-sm">
|
||||
Fill in your professional contact information. Only add what you want to share.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article className="text-center">
|
||||
<div className="w-14 h-14 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
|
||||
<Smartphone className="w-7 h-7 text-[#1A1265]" />
|
||||
</div>
|
||||
<h3 className="font-bold text-slate-900 mb-2">2. Scan</h3>
|
||||
<p className="text-slate-600 text-sm">
|
||||
A potential client or partner scans your card with their phone camera.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article className="text-center">
|
||||
<div className="w-14 h-14 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
|
||||
<UserPlus className="w-7 h-7 text-[#1A1265]" />
|
||||
</div>
|
||||
<h3 className="font-bold text-slate-900 mb-2">3. Save</h3>
|
||||
<p className="text-slate-600 text-sm">
|
||||
They tap "Create New Contact" to save your details instantly. No typing errors.
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* WHY DIGITAL BUSINESS CARDS — STATISTICS */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<TrendingUp className="w-5 h-5 text-rose-500" />
|
||||
<span className="text-sm font-semibold text-rose-600 uppercase tracking-wider">Research-backed</span>
|
||||
</div>
|
||||
<h2 className="text-3xl font-bold text-slate-900 mb-4">
|
||||
Why Digital Contact Sharing Outperforms Paper Cards
|
||||
</h2>
|
||||
<p className="text-slate-600 mb-10 max-w-2xl">
|
||||
A <strong>vCard QR code</strong> solves the single biggest problem with traditional business cards: they get discarded before anyone saves your details.
|
||||
</p>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6 mb-8">
|
||||
<div className="bg-rose-50 border border-rose-100 rounded-2xl p-6">
|
||||
<div className="text-4xl font-extrabold text-rose-600 mb-2">88%</div>
|
||||
<p className="text-slate-700 text-sm leading-relaxed mb-3">
|
||||
of traditional paper business cards are thrown away within a week of being handed out. A vCard QR code on your card saves contact details instantly — no manual typing, no lost connections.
|
||||
</p>
|
||||
<p className="text-xs text-slate-500">
|
||||
Source: <a href="https://www.adobe.com/express/learn/blog/business-card-statistics" target="_blank" rel="noopener noreferrer" className="underline hover:text-slate-700">Adobe Business Research</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-orange-50 border border-orange-100 rounded-2xl p-6">
|
||||
<div className="text-4xl font-extrabold text-orange-600 mb-2">1-tap save</div>
|
||||
<p className="text-slate-700 text-sm leading-relaxed mb-3">
|
||||
Instead of asking someone to manually type your name, phone, and email — a vCard QR code transfers all contact fields (name, phone, email, company, URL) directly into their phone's address book with a single scan.
|
||||
</p>
|
||||
<p className="text-xs text-slate-500">
|
||||
vCard 3.0 / VCF format — supported natively by iOS and Android
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-slate-400 italic">
|
||||
By Timo Knuth, QR Master · Last updated: June 2025 · Based on independent academic and industry research
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* GROWTH LINKS */}
|
||||
<GrowthLinksSection
|
||||
eyebrow="Level up your QR strategy"
|
||||
title="More ways to use QR codes for your brand"
|
||||
description="A vCard QR code is a great start. Add custom design, tracking, and dynamic destinations to get the most out of every print."
|
||||
links={[
|
||||
{
|
||||
href: '/custom-qr-code-generator',
|
||||
title: 'Custom QR Code Generator',
|
||||
description: 'Add your logo, brand colors, and a custom frame to your QR codes.',
|
||||
ctaLabel: 'Custom QR with logo',
|
||||
},
|
||||
{
|
||||
href: '/dynamic-qr-code-generator',
|
||||
title: 'Dynamic QR Code Generator',
|
||||
description: 'Update your contact destination after printing. No new QR code needed.',
|
||||
ctaLabel: 'Dynamic QR with tracking',
|
||||
},
|
||||
]}
|
||||
pageType="commercial"
|
||||
cluster="vcard-qr"
|
||||
/>
|
||||
|
||||
{/* 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 vCard QR codes.
|
||||
</p>
|
||||
|
||||
<div className="space-y-4">
|
||||
<FaqItem
|
||||
question="Can I add a profile picture?"
|
||||
answer="Not on a static vCard QR code. Static codes store data in the pixels, so adding an image would make the code too complex to scan. For profile pictures, social links, and rich media, use our Dynamic vCard Plus solution."
|
||||
/>
|
||||
<FaqItem
|
||||
question="How long does the QR code last?"
|
||||
answer="Forever. Static vCard QR codes do not expire because the data is embedded directly in the image."
|
||||
/>
|
||||
<FaqItem
|
||||
question="What information is required?"
|
||||
answer="Nothing is strictly required, but we recommend at least a First Name and either a Phone Number or Email so the contact is useful."
|
||||
/>
|
||||
<FaqItem
|
||||
question="Is my data safe?"
|
||||
answer="Yes. This tool operates 100% in your browser. We do not store, see, or optimize your contact data. It goes directly from your input to the QR code."
|
||||
/>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user