Shema
This commit is contained in:
Timo Knuth
@@ -1,247 +1,247 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useRef } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { QRCodeSVG } from 'qrcode.react';
|
||||
import {
|
||||
Facebook,
|
||||
Download,
|
||||
Check,
|
||||
Sparkles,
|
||||
ThumbsUp,
|
||||
Globe
|
||||
} from 'lucide-react';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { Input } from '@/components/ui/Input';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
// Brand Colors
|
||||
const BRAND = {
|
||||
paleGrey: '#EBEBDF',
|
||||
richBlue: '#1A1265',
|
||||
richBlueLight: '#2A2275',
|
||||
};
|
||||
|
||||
// QR Color Options - Facebook Theme
|
||||
const QR_COLORS = [
|
||||
{ name: 'Facebook Blue', value: '#1877F2' },
|
||||
{ name: 'Classic Black', value: '#000000' },
|
||||
{ name: 'Dark Blue', value: '#1A1265' },
|
||||
{ name: 'Teal', value: '#0D9488' },
|
||||
{ name: 'Coral', value: '#F43F5E' },
|
||||
{ name: 'Purple', value: '#7C3AED' },
|
||||
{ name: 'Emerald', value: '#10B981' },
|
||||
{ name: 'Rose', value: '#F43F5E' },
|
||||
];
|
||||
|
||||
// Frame Options
|
||||
const FRAME_OPTIONS = [
|
||||
{ id: 'none', label: 'No Frame' },
|
||||
{ id: 'scanme', label: 'Scan Me' },
|
||||
{ id: 'follow', label: 'Follow Us' },
|
||||
{ id: 'like', label: 'Like Us' },
|
||||
];
|
||||
|
||||
export default function FacebookGenerator() {
|
||||
const [url, setUrl] = useState('');
|
||||
const [qrColor, setQrColor] = useState('#1877F2'); // Default to FB Blue
|
||||
const [frameType, setFrameType] = useState('none');
|
||||
|
||||
const qrRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const handleDownload = async (format: 'png' | 'svg') => {
|
||||
if (!qrRef.current) return;
|
||||
try {
|
||||
if (format === 'png') {
|
||||
const { toPng } = await import('html-to-image');
|
||||
const dataUrl = await toPng(qrRef.current, { cacheBust: true, pixelRatio: 3 });
|
||||
const link = document.createElement('a');
|
||||
link.download = `facebook-qr-code.png`;
|
||||
link.href = dataUrl;
|
||||
link.click();
|
||||
} else {
|
||||
const svgData = qrRef.current.querySelector('svg')?.outerHTML;
|
||||
if (svgData) {
|
||||
const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = `facebook-qr-code.svg`;
|
||||
link.click();
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Download failed', err);
|
||||
}
|
||||
};
|
||||
|
||||
const getFrameLabel = () => {
|
||||
const frame = FRAME_OPTIONS.find(f => f.id === frameType);
|
||||
return frame?.id !== 'none' ? frame?.label : null;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full max-w-5xl mx-auto px-4 md:px-6">
|
||||
|
||||
{/* Main Generator Card */}
|
||||
<div className="bg-white rounded-3xl shadow-2xl shadow-slate-900/10 overflow-hidden border border-slate-100">
|
||||
<div className="grid lg:grid-cols-2">
|
||||
|
||||
{/* LEFT: Input Section */}
|
||||
<div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
|
||||
|
||||
{/* Facebook Details */}
|
||||
<div className="space-y-6">
|
||||
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
|
||||
<Facebook className="w-5 h-5 text-[#1877F2]" />
|
||||
Facebook Page or Profile
|
||||
</h2>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-2">Facebook URL</label>
|
||||
<Input
|
||||
placeholder="https://facebook.com/yourpage"
|
||||
value={url}
|
||||
onChange={(e) => setUrl(e.target.value)}
|
||||
className="h-12 text-base rounded-xl border-slate-200 focus:border-[#1877F2] focus:ring-[#1877F2]"
|
||||
/>
|
||||
<p className="text-xs text-slate-600 mt-2">Paste the full link to your profile, page, group, or post.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-slate-100"></div>
|
||||
|
||||
{/* Design Options */}
|
||||
<div className="space-y-6">
|
||||
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
|
||||
<Sparkles className="w-5 h-5 text-[#1877F2]" />
|
||||
Design Options
|
||||
</h2>
|
||||
|
||||
{/* Color Picker */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-3">QR Code Color</label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{QR_COLORS.map((c) => (
|
||||
<button
|
||||
key={c.name}
|
||||
onClick={() => setQrColor(c.value)}
|
||||
className={cn(
|
||||
"w-9 h-9 rounded-full border-2 flex items-center justify-center transition-all hover:scale-110",
|
||||
qrColor === c.value ? "border-slate-900 ring-2 ring-offset-2 ring-slate-200" : "border-white shadow-md"
|
||||
)}
|
||||
style={{ backgroundColor: c.value }}
|
||||
aria-label={`Select ${c.name}`}
|
||||
title={c.name}
|
||||
>
|
||||
{qrColor === c.value && <Check className="w-4 h-4 text-white" strokeWidth={3} />}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Frame Selector */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
|
||||
{FRAME_OPTIONS.map((frame) => (
|
||||
<button
|
||||
key={frame.id}
|
||||
onClick={() => setFrameType(frame.id)}
|
||||
className={cn(
|
||||
"py-2.5 px-3 rounded-lg text-sm font-medium transition-all border",
|
||||
frameType === frame.id
|
||||
? "bg-[#1877F2] text-white border-[#1877F2]"
|
||||
: "bg-slate-50 text-slate-600 border-slate-200 hover:border-slate-300"
|
||||
)}
|
||||
>
|
||||
{frame.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* RIGHT: Preview Section */}
|
||||
<div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
|
||||
|
||||
{/* QR Card with Frame */}
|
||||
<div
|
||||
ref={qrRef}
|
||||
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
|
||||
>
|
||||
{/* Frame Label */}
|
||||
{getFrameLabel() && (
|
||||
<div
|
||||
className="mb-5 px-8 py-2.5 rounded-full text-white font-bold text-sm tracking-widest uppercase shadow-md"
|
||||
style={{ backgroundColor: qrColor }}
|
||||
>
|
||||
{getFrameLabel()}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* QR Code */}
|
||||
<div className="bg-white">
|
||||
<QRCodeSVG
|
||||
value={url || "https://facebook.com"}
|
||||
size={240}
|
||||
level="M"
|
||||
includeMargin={false}
|
||||
fgColor={qrColor}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Info Preview */}
|
||||
<div className="mt-6 text-center max-w-[260px]">
|
||||
<h3 className="font-bold text-slate-900 text-lg flex items-center justify-center gap-2 truncate">
|
||||
<Facebook className="w-4 h-4 text-slate-400 shrink-0" />
|
||||
<span className="truncate">{url ? url.replace('https://', '') : 'facebook.com/...'}</span>
|
||||
</h3>
|
||||
<div className="text-xs text-slate-600 mt-1">Opens in Facebook App</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Download Buttons */}
|
||||
<div className="flex items-center gap-3 mt-8">
|
||||
<Button
|
||||
onClick={() => handleDownload('png')}
|
||||
className="bg-[#1877F2] hover:bg-[#155ebd] text-white shadow-lg"
|
||||
>
|
||||
<Download className="w-4 h-4 mr-2" />
|
||||
Download PNG
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => handleDownload('svg')}
|
||||
variant="outline"
|
||||
className="border-slate-300 hover:bg-white"
|
||||
>
|
||||
<Download className="w-4 h-4 mr-2" />
|
||||
SVG
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-slate-600 mt-4 text-center">
|
||||
Scanning redirects directly to the Facebook profile or page.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Upsell Banner */}
|
||||
<div className="mt-8 bg-gradient-to-r from-[#1877F2] to-[#155ebd] rounded-2xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
|
||||
<div className="text-white text-center sm:text-left">
|
||||
<h3 className="font-bold text-lg">Running a Social Media Campaign?</h3>
|
||||
<p className="text-white/80 text-sm mt-1">
|
||||
Dynamic QR Codes allow you to track clicks, likes, and engagement rates in real-time.
|
||||
</p>
|
||||
</div>
|
||||
<Link href="/signup">
|
||||
<Button className="bg-white text-[#1877F2] hover:bg-slate-100 shrink-0 shadow-lg">
|
||||
Get Social Analytics
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
'use client';
|
||||
|
||||
import React, { useState, useRef } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { QRCodeSVG } from 'qrcode.react';
|
||||
import {
|
||||
Facebook,
|
||||
Download,
|
||||
Check,
|
||||
Sparkles,
|
||||
ThumbsUp,
|
||||
Globe
|
||||
} from 'lucide-react';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { Input } from '@/components/ui/Input';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
// Brand Colors
|
||||
const BRAND = {
|
||||
paleGrey: '#EBEBDF',
|
||||
richBlue: '#1A1265',
|
||||
richBlueLight: '#2A2275',
|
||||
};
|
||||
|
||||
// QR Color Options - Facebook Theme
|
||||
const QR_COLORS = [
|
||||
{ name: 'Facebook Blue', value: '#1877F2' },
|
||||
{ name: 'Classic Black', value: '#000000' },
|
||||
{ name: 'Dark Blue', value: '#1A1265' },
|
||||
{ name: 'Teal', value: '#0D9488' },
|
||||
{ name: 'Coral', value: '#F43F5E' },
|
||||
{ name: 'Purple', value: '#7C3AED' },
|
||||
{ name: 'Emerald', value: '#10B981' },
|
||||
{ name: 'Rose', value: '#F43F5E' },
|
||||
];
|
||||
|
||||
// Frame Options
|
||||
const FRAME_OPTIONS = [
|
||||
{ id: 'none', label: 'No Frame' },
|
||||
{ id: 'scanme', label: 'Scan Me' },
|
||||
{ id: 'follow', label: 'Follow Us' },
|
||||
{ id: 'like', label: 'Like Us' },
|
||||
];
|
||||
|
||||
export default function FacebookGenerator() {
|
||||
const [url, setUrl] = useState('');
|
||||
const [qrColor, setQrColor] = useState('#1877F2'); // Default to FB Blue
|
||||
const [frameType, setFrameType] = useState('none');
|
||||
|
||||
const qrRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const handleDownload = async (format: 'png' | 'svg') => {
|
||||
if (!qrRef.current) return;
|
||||
try {
|
||||
if (format === 'png') {
|
||||
const { toPng } = await import('html-to-image');
|
||||
const dataUrl = await toPng(qrRef.current, { cacheBust: true, pixelRatio: 3 });
|
||||
const link = document.createElement('a');
|
||||
link.download = `facebook-qr-code.png`;
|
||||
link.href = dataUrl;
|
||||
link.click();
|
||||
} else {
|
||||
const svgData = qrRef.current.querySelector('svg')?.outerHTML;
|
||||
if (svgData) {
|
||||
const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = `facebook-qr-code.svg`;
|
||||
link.click();
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Download failed', err);
|
||||
}
|
||||
};
|
||||
|
||||
const getFrameLabel = () => {
|
||||
const frame = FRAME_OPTIONS.find(f => f.id === frameType);
|
||||
return frame?.id !== 'none' ? frame?.label : null;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full max-w-5xl mx-auto px-4 md:px-6">
|
||||
|
||||
{/* Main Generator Card */}
|
||||
<div className="bg-white rounded-3xl shadow-2xl shadow-slate-900/10 overflow-hidden border border-slate-100">
|
||||
<div className="grid lg:grid-cols-2">
|
||||
|
||||
{/* LEFT: Input Section */}
|
||||
<div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
|
||||
|
||||
{/* Facebook Details */}
|
||||
<div className="space-y-6">
|
||||
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
|
||||
<Facebook className="w-5 h-5 text-[#1877F2]" />
|
||||
Facebook Page or Profile
|
||||
</h2>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-2">Facebook URL</label>
|
||||
<Input
|
||||
placeholder="https://facebook.com/yourpage"
|
||||
value={url}
|
||||
onChange={(e) => setUrl(e.target.value)}
|
||||
className="h-12 text-base rounded-xl border-slate-200 focus:border-[#1877F2] focus:ring-[#1877F2]"
|
||||
/>
|
||||
<p className="text-xs text-slate-600 mt-2">Paste the full link to your profile, page, group, or post.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-slate-100"></div>
|
||||
|
||||
{/* Design Options */}
|
||||
<div className="space-y-6">
|
||||
<h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
|
||||
<Sparkles className="w-5 h-5 text-[#1877F2]" />
|
||||
Design Options
|
||||
</h2>
|
||||
|
||||
{/* Color Picker */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-3">QR Code Color</label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{QR_COLORS.map((c) => (
|
||||
<button
|
||||
key={c.name}
|
||||
onClick={() => setQrColor(c.value)}
|
||||
className={cn(
|
||||
"w-9 h-9 rounded-full border-2 flex items-center justify-center transition-all hover:scale-110",
|
||||
qrColor === c.value ? "border-slate-900 ring-2 ring-offset-2 ring-slate-200" : "border-white shadow-md"
|
||||
)}
|
||||
style={{ backgroundColor: c.value }}
|
||||
aria-label={`Select ${c.name}`}
|
||||
title={c.name}
|
||||
>
|
||||
{qrColor === c.value && <Check className="w-4 h-4 text-white" strokeWidth={3} />}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Frame Selector */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
|
||||
{FRAME_OPTIONS.map((frame) => (
|
||||
<button
|
||||
key={frame.id}
|
||||
onClick={() => setFrameType(frame.id)}
|
||||
className={cn(
|
||||
"py-2.5 px-3 rounded-lg text-sm font-medium transition-all border",
|
||||
frameType === frame.id
|
||||
? "bg-[#1877F2] text-white border-[#1877F2]"
|
||||
: "bg-slate-50 text-slate-600 border-slate-200 hover:border-slate-300"
|
||||
)}
|
||||
>
|
||||
{frame.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* RIGHT: Preview Section */}
|
||||
<div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
|
||||
|
||||
{/* QR Card with Frame */}
|
||||
<div
|
||||
ref={qrRef}
|
||||
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
|
||||
>
|
||||
{/* Frame Label */}
|
||||
{getFrameLabel() && (
|
||||
<div
|
||||
className="mb-5 px-8 py-2.5 rounded-full text-white font-bold text-sm tracking-widest uppercase shadow-md"
|
||||
style={{ backgroundColor: qrColor }}
|
||||
>
|
||||
{getFrameLabel()}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* QR Code */}
|
||||
<div className="bg-white">
|
||||
<QRCodeSVG
|
||||
value={url || "https://facebook.com"}
|
||||
size={240}
|
||||
level="M"
|
||||
includeMargin={false}
|
||||
fgColor={qrColor}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Info Preview */}
|
||||
<div className="mt-6 text-center max-w-[260px]">
|
||||
<h3 className="font-bold text-slate-900 text-lg flex items-center justify-center gap-2 truncate">
|
||||
<Facebook className="w-4 h-4 text-slate-400 shrink-0" />
|
||||
<span className="truncate">{url ? url.replace('https://', '') : 'facebook.com/...'}</span>
|
||||
</h3>
|
||||
<div className="text-xs text-slate-600 mt-1">Opens in Facebook App</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Download Buttons */}
|
||||
<div className="flex items-center gap-3 mt-8">
|
||||
<Button
|
||||
onClick={() => handleDownload('png')}
|
||||
className="bg-[#1877F2] hover:bg-[#155ebd] text-white shadow-lg"
|
||||
>
|
||||
<Download className="w-4 h-4 mr-2" />
|
||||
Download PNG
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => handleDownload('svg')}
|
||||
variant="outline"
|
||||
className="border-slate-300 hover:bg-white"
|
||||
>
|
||||
<Download className="w-4 h-4 mr-2" />
|
||||
SVG
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-slate-600 mt-4 text-center">
|
||||
Scanning redirects directly to the Facebook profile or page.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Upsell Banner */}
|
||||
<div className="mt-8 bg-gradient-to-r from-[#1877F2] to-[#155ebd] rounded-2xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
|
||||
<div className="text-white text-center sm:text-left">
|
||||
<h3 className="font-bold text-lg">Running a Social Media Campaign?</h3>
|
||||
<p className="text-white/80 text-sm mt-1">
|
||||
Dynamic QR Codes allow you to track clicks, likes, and engagement rates in real-time.
|
||||
</p>
|
||||
</div>
|
||||
<Link href="/signup">
|
||||
<Button className="bg-white text-[#1877F2] hover:bg-slate-100 shrink-0 shadow-lg">
|
||||
Get Social Analytics
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,337 +1,337 @@
|
||||
import React from 'react';
|
||||
import type { Metadata } from 'next';
|
||||
import FacebookGenerator from './FacebookGenerator';
|
||||
import { Facebook, Shield, Zap, Smartphone, ThumbsUp, Users, 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 Facebook QR Code Generator | Get Likes & Follows | QR Master',
|
||||
},
|
||||
description: 'Create a QR code for your Facebook Page, Profile, or Group. Facebook QR Code erstellen. Scanners follow you instantly. Free & Easy.',
|
||||
keywords: ['facebook qr code', 'fb qr generator', 'facebook page qr', 'follow qr code', 'social media qr code', 'facebook qr code erstellen', 'facebook seite qr code', 'facebook gruppe qr code', 'facebook profil qr code', 'mehr likes qr code'],
|
||||
alternates: {
|
||||
canonical: 'https://www.qrmaster.net/tools/facebook-qr-code',
|
||||
},
|
||||
openGraph: {
|
||||
title: 'Free Facebook QR Code Generator | QR Master',
|
||||
description: 'Generate QR codes to grow your Facebook audience. Instant app redirect.',
|
||||
type: 'website',
|
||||
url: 'https://www.qrmaster.net/tools/facebook-qr-code',
|
||||
images: [{ url: '/og-facebook-generator.png', width: 1200, height: 630 }],
|
||||
},
|
||||
twitter: {
|
||||
card: 'summary_large_image',
|
||||
title: 'Free Facebook QR Code Generator',
|
||||
description: 'Create QR codes for Facebook. Boost your engagement.',
|
||||
},
|
||||
robots: {
|
||||
index: true,
|
||||
follow: true,
|
||||
},
|
||||
};
|
||||
|
||||
// JSON-LD Structured Data
|
||||
const jsonLd = {
|
||||
'@context': 'https://schema.org',
|
||||
'@graph': [
|
||||
generateSoftwareAppSchema(
|
||||
'Facebook QR Code Generator',
|
||||
'Generate QR codes that direct users to a Facebook page, profile, or post.',
|
||||
'/og-facebook-generator.png'
|
||||
),
|
||||
{
|
||||
'@type': 'HowTo',
|
||||
name: 'How to Create a Facebook QR Code',
|
||||
description: 'Create a QR code that opens a Facebook page.',
|
||||
step: [
|
||||
{
|
||||
'@type': 'HowToStep',
|
||||
position: 1,
|
||||
name: 'Get Link',
|
||||
text: 'Copy the URL of your Facebook Page, Profile, or Group.',
|
||||
},
|
||||
{
|
||||
'@type': 'HowToStep',
|
||||
position: 2,
|
||||
name: 'Paste Link',
|
||||
text: 'Paste the URL into the generator.',
|
||||
},
|
||||
{
|
||||
'@type': 'HowToStep',
|
||||
position: 3,
|
||||
name: 'Customize',
|
||||
text: 'Choose your brand color and add a call-to-action frame.',
|
||||
},
|
||||
{
|
||||
'@type': 'HowToStep',
|
||||
position: 4,
|
||||
name: 'Download',
|
||||
text: 'Save the QR code and print it on your marketing materials.',
|
||||
},
|
||||
{
|
||||
'@type': 'HowToStep',
|
||||
position: 5,
|
||||
name: 'Share',
|
||||
text: 'Distribute it on flyers, business cards, or posters.',
|
||||
},
|
||||
],
|
||||
totalTime: 'PT30S',
|
||||
},
|
||||
generateFaqSchema({
|
||||
'Does it open the Facebook app?': {
|
||||
question: 'Does it open the Facebook app?',
|
||||
answer: 'Yes! On most mobile devices, standard Facebook links are automatically detected and opened in the Facebook app if it is installed.',
|
||||
},
|
||||
'Can I link to a specific post?': {
|
||||
question: 'Can I link to a specific post?',
|
||||
answer: 'Absolutely. Just paste the direct link to the post (click the timestamp on the post to get the link).',
|
||||
},
|
||||
'Does it work for Facebook Events?': {
|
||||
question: 'Does it work for Facebook Events?',
|
||||
answer: 'Yes. Simply copy the full URL of your Facebook Event and paste it into the generator.',
|
||||
},
|
||||
'Is it free?': {
|
||||
question: 'Is it free?',
|
||||
answer: 'Yes, this generator is 100% free to use for personal or business purposes.',
|
||||
},
|
||||
'Can I track scans?': {
|
||||
question: 'Can I track scans?',
|
||||
answer: 'This static QR code does not include analytics. To track how many people scan your code, you should use our Dynamic QR Code service.',
|
||||
},
|
||||
}),
|
||||
],
|
||||
};
|
||||
|
||||
export default function FacebookQRCodePage() {
|
||||
return (
|
||||
<>
|
||||
<script
|
||||
type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
|
||||
/>
|
||||
<ToolBreadcrumb toolName="Facebook QR Code Generator" toolSlug="facebook-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: '#1877F2' }}>
|
||||
<div className="absolute inset-0 opacity-10">
|
||||
{/* Facebook Pattern */}
|
||||
<svg className="w-full h-full" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<pattern id="fb_pattern" width="60" height="60" patternUnits="userSpaceOnUse">
|
||||
<path d="M30 30L35 35M25 35L30 30" stroke="white" strokeWidth="2" strokeOpacity="0.2" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="100%" height="100%" fill="url(#fb_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-blue-300 opacity-75"></span>
|
||||
<span className="relative inline-flex rounded-full h-2 w-2 bg-blue-300"></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">
|
||||
Grow Your Audience with <br className="hidden lg:block" />
|
||||
<span className="text-white drop-shadow-md">Facebook QR Codes</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-lg md:text-xl text-blue-50 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
|
||||
Make it easy for customers to find and follow you. A single scan opens your Page directly in the Facebook app.
|
||||
<strong className="text-white block sm:inline mt-2 sm:mt-0"> Boost likes instantly.</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/10 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
|
||||
<ThumbsUp className="w-4 h-4 text-blue-200" />
|
||||
Get Likes
|
||||
</div>
|
||||
<div className="flex items-center gap-2 bg-white/10 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
|
||||
<Zap className="w-4 h-4 text-yellow-300" />
|
||||
Instant Follow
|
||||
</div>
|
||||
<div className="flex items-center gap-2 bg-white/10 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
|
||||
<Smartphone className="w-4 h-4 text-green-300" />
|
||||
App Friendly
|
||||
</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-blue-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-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" />
|
||||
|
||||
<div className="w-full bg-white rounded-xl shadow-lg p-4 mb-6 relative overflow-hidden flex items-center gap-3">
|
||||
<div className="w-12 h-12 rounded-full bg-gradient-to-tr from-blue-600 to-blue-400 p-0.5">
|
||||
<div className="w-full h-full bg-white rounded-full flex items-center justify-center">
|
||||
<Facebook className="w-6 h-6 text-[#1877F2]" fill="#1877F2" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="h-2.5 w-24 bg-slate-800 rounded-full mb-1.5" />
|
||||
<div className="h-2 w-16 bg-slate-300 rounded-full" />
|
||||
</div>
|
||||
<button className="ml-auto bg-[#1877F2] text-white px-3 py-1 rounded text-xs font-bold">
|
||||
Like
|
||||
</button>
|
||||
</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="#1877F2" level="Q" />
|
||||
</div>
|
||||
|
||||
{/* Floating Badge */}
|
||||
<div className="absolute -bottom-6 -right-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-blue-100 p-2 rounded-full">
|
||||
<Users className="w-5 h-5 text-blue-600" />
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Followers</div>
|
||||
<div className="text-sm font-bold text-slate-900">+1 New</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* GENERATOR SECTION */}
|
||||
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
|
||||
<FacebookGenerator />
|
||||
</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 Facebook QR Codes Work
|
||||
</h2>
|
||||
|
||||
<div className="grid md:grid-cols-3 lg:grid-cols-5 gap-8">
|
||||
<article className="text-center">
|
||||
<div className="w-14 h-14 rounded-2xl bg-[#1877F2]/10 flex items-center justify-center mx-auto mb-4">
|
||||
<Facebook className="w-7 h-7 text-[#1877F2]" />
|
||||
</div>
|
||||
<h3 className="font-bold text-slate-900 mb-2">1. Copy Link</h3>
|
||||
<p className="text-slate-600 text-sm">
|
||||
Go to your Facebook Page or Profile and copy the URL from the browser address bar.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article className="text-center">
|
||||
<div className="w-14 h-14 rounded-2xl bg-[#1877F2]/10 flex items-center justify-center mx-auto mb-4">
|
||||
<Smartphone className="w-7 h-7 text-[#1877F2]" />
|
||||
</div>
|
||||
<h3 className="font-bold text-slate-900 mb-2">2. Scan</h3>
|
||||
<p className="text-slate-600 text-sm">
|
||||
Your customers scan the code using their phone camera.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article className="text-center">
|
||||
<div className="w-12 h-12 rounded-2xl bg-[#1877F2]/10 flex items-center justify-center mx-auto mb-4">
|
||||
<ThumbsUp className="w-6 h-6 text-[#1877F2]" />
|
||||
</div>
|
||||
<h3 className="font-bold text-slate-900 mb-2">3. Engage</h3>
|
||||
<p className="text-slate-600 text-xs leading-relaxed">
|
||||
The Facebook app opens directly.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article className="text-center">
|
||||
<div className="w-12 h-12 rounded-2xl bg-[#1877F2]/10 flex items-center justify-center mx-auto mb-4">
|
||||
<Download className="w-6 h-6 text-[#1877F2]" />
|
||||
</div>
|
||||
<h3 className="font-bold text-slate-900 mb-2">4. Download</h3>
|
||||
<p className="text-slate-600 text-xs leading-relaxed">
|
||||
Save your high-res QR code.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article className="text-center">
|
||||
<div className="w-12 h-12 rounded-2xl bg-[#1877F2]/10 flex items-center justify-center mx-auto mb-4">
|
||||
<Share2 className="w-6 h-6 text-[#1877F2]" />
|
||||
</div>
|
||||
<h3 className="font-bold text-slate-900 mb-2">5. Share</h3>
|
||||
<p className="text-slate-600 text-xs leading-relaxed">
|
||||
Print it and start getting likes.
|
||||
</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 Facebook QR codes.
|
||||
</p>
|
||||
|
||||
<div className="space-y-4">
|
||||
<FaqItem
|
||||
question="Will this work for Facebook Groups?"
|
||||
answer="Yes! You can paste the link to your Facebook Group, and the QR code will direcr users to join."
|
||||
/>
|
||||
<FaqItem
|
||||
question="What if the user doesn't have the Facebook app?"
|
||||
answer="The link will open in their mobile web browser instead, so they can still see your page and log in."
|
||||
/>
|
||||
<FaqItem
|
||||
question="Can I customize the color?"
|
||||
answer="Yes. While Facebook Blue is recommended for recognition, you can choose any color to match your brand."
|
||||
/>
|
||||
<FaqItem
|
||||
question="Is the QR code permanent?"
|
||||
answer="Yes. As long as your Facebook URL doesn't change, this QR code will work forever."
|
||||
/>
|
||||
<FaqItem
|
||||
question="Does it work for Facebook Events?"
|
||||
answer="Yes. Simply copy the full URL of your Facebook Event and paste it into the generator."
|
||||
/>
|
||||
</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 FacebookGenerator from './FacebookGenerator';
|
||||
import { Facebook, Shield, Zap, Smartphone, ThumbsUp, Users, 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 Facebook QR Code Generator | Get Likes & Follows | QR Master',
|
||||
},
|
||||
description: 'Create a QR code for your Facebook Page, Profile, or Group. Facebook QR Code erstellen. Scanners follow you instantly. Free & Easy.',
|
||||
keywords: ['facebook qr code', 'fb qr generator', 'facebook page qr', 'follow qr code', 'social media qr code', 'facebook qr code erstellen', 'facebook seite qr code', 'facebook gruppe qr code', 'facebook profil qr code', 'mehr likes qr code'],
|
||||
alternates: {
|
||||
canonical: 'https://www.qrmaster.net/tools/facebook-qr-code',
|
||||
},
|
||||
openGraph: {
|
||||
title: 'Free Facebook QR Code Generator | QR Master',
|
||||
description: 'Generate QR codes to grow your Facebook audience. Instant app redirect.',
|
||||
type: 'website',
|
||||
url: 'https://www.qrmaster.net/tools/facebook-qr-code',
|
||||
images: [{ url: '/og-facebook-generator.png', width: 1200, height: 630 }],
|
||||
},
|
||||
twitter: {
|
||||
card: 'summary_large_image',
|
||||
title: 'Free Facebook QR Code Generator',
|
||||
description: 'Create QR codes for Facebook. Boost your engagement.',
|
||||
},
|
||||
robots: {
|
||||
index: true,
|
||||
follow: true,
|
||||
},
|
||||
};
|
||||
|
||||
// JSON-LD Structured Data
|
||||
const jsonLd = {
|
||||
'@context': 'https://schema.org',
|
||||
'@graph': [
|
||||
generateSoftwareAppSchema(
|
||||
'Facebook QR Code Generator',
|
||||
'Generate QR codes that direct users to a Facebook page, profile, or post.',
|
||||
'/og-facebook-generator.png'
|
||||
),
|
||||
{
|
||||
'@type': 'HowTo',
|
||||
name: 'How to Create a Facebook QR Code',
|
||||
description: 'Create a QR code that opens a Facebook page.',
|
||||
step: [
|
||||
{
|
||||
'@type': 'HowToStep',
|
||||
position: 1,
|
||||
name: 'Get Link',
|
||||
text: 'Copy the URL of your Facebook Page, Profile, or Group.',
|
||||
},
|
||||
{
|
||||
'@type': 'HowToStep',
|
||||
position: 2,
|
||||
name: 'Paste Link',
|
||||
text: 'Paste the URL into the generator.',
|
||||
},
|
||||
{
|
||||
'@type': 'HowToStep',
|
||||
position: 3,
|
||||
name: 'Customize',
|
||||
text: 'Choose your brand color and add a call-to-action frame.',
|
||||
},
|
||||
{
|
||||
'@type': 'HowToStep',
|
||||
position: 4,
|
||||
name: 'Download',
|
||||
text: 'Save the QR code and print it on your marketing materials.',
|
||||
},
|
||||
{
|
||||
'@type': 'HowToStep',
|
||||
position: 5,
|
||||
name: 'Share',
|
||||
text: 'Distribute it on flyers, business cards, or posters.',
|
||||
},
|
||||
],
|
||||
totalTime: 'PT30S',
|
||||
},
|
||||
generateFaqSchema({
|
||||
'Does it open the Facebook app?': {
|
||||
question: 'Does it open the Facebook app?',
|
||||
answer: 'Yes! On most mobile devices, standard Facebook links are automatically detected and opened in the Facebook app if it is installed.',
|
||||
},
|
||||
'Can I link to a specific post?': {
|
||||
question: 'Can I link to a specific post?',
|
||||
answer: 'Absolutely. Just paste the direct link to the post (click the timestamp on the post to get the link).',
|
||||
},
|
||||
'Does it work for Facebook Events?': {
|
||||
question: 'Does it work for Facebook Events?',
|
||||
answer: 'Yes. Simply copy the full URL of your Facebook Event and paste it into the generator.',
|
||||
},
|
||||
'Is it free?': {
|
||||
question: 'Is it free?',
|
||||
answer: 'Yes, this generator is 100% free to use for personal or business purposes.',
|
||||
},
|
||||
'Can I track scans?': {
|
||||
question: 'Can I track scans?',
|
||||
answer: 'This static QR code does not include analytics. To track how many people scan your code, you should use our Dynamic QR Code service.',
|
||||
},
|
||||
}),
|
||||
],
|
||||
};
|
||||
|
||||
export default function FacebookQRCodePage() {
|
||||
return (
|
||||
<>
|
||||
<script
|
||||
type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
|
||||
/>
|
||||
<ToolBreadcrumb toolName="Facebook QR Code Generator" toolSlug="facebook-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: '#1877F2' }}>
|
||||
<div className="absolute inset-0 opacity-10">
|
||||
{/* Facebook Pattern */}
|
||||
<svg className="w-full h-full" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<pattern id="fb_pattern" width="60" height="60" patternUnits="userSpaceOnUse">
|
||||
<path d="M30 30L35 35M25 35L30 30" stroke="white" strokeWidth="2" strokeOpacity="0.2" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="100%" height="100%" fill="url(#fb_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-blue-300 opacity-75"></span>
|
||||
<span className="relative inline-flex rounded-full h-2 w-2 bg-blue-300"></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">
|
||||
Grow Your Audience with <br className="hidden lg:block" />
|
||||
<span className="text-white drop-shadow-md">Facebook QR Codes</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-lg md:text-xl text-blue-50 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
|
||||
Make it easy for customers to find and follow you. A single scan opens your Page directly in the Facebook app.
|
||||
<strong className="text-white block sm:inline mt-2 sm:mt-0"> Boost likes instantly.</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/10 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
|
||||
<ThumbsUp className="w-4 h-4 text-blue-200" />
|
||||
Get Likes
|
||||
</div>
|
||||
<div className="flex items-center gap-2 bg-white/10 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
|
||||
<Zap className="w-4 h-4 text-yellow-300" />
|
||||
Instant Follow
|
||||
</div>
|
||||
<div className="flex items-center gap-2 bg-white/10 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
|
||||
<Smartphone className="w-4 h-4 text-green-300" />
|
||||
App Friendly
|
||||
</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-blue-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-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" />
|
||||
|
||||
<div className="w-full bg-white rounded-xl shadow-lg p-4 mb-6 relative overflow-hidden flex items-center gap-3">
|
||||
<div className="w-12 h-12 rounded-full bg-gradient-to-tr from-blue-600 to-blue-400 p-0.5">
|
||||
<div className="w-full h-full bg-white rounded-full flex items-center justify-center">
|
||||
<Facebook className="w-6 h-6 text-[#1877F2]" fill="#1877F2" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="h-2.5 w-24 bg-slate-800 rounded-full mb-1.5" />
|
||||
<div className="h-2 w-16 bg-slate-300 rounded-full" />
|
||||
</div>
|
||||
<button className="ml-auto bg-[#1877F2] text-white px-3 py-1 rounded text-xs font-bold">
|
||||
Like
|
||||
</button>
|
||||
</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="#1877F2" level="Q" />
|
||||
</div>
|
||||
|
||||
{/* Floating Badge */}
|
||||
<div className="absolute -bottom-6 -right-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-blue-100 p-2 rounded-full">
|
||||
<Users className="w-5 h-5 text-blue-600" />
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Followers</div>
|
||||
<div className="text-sm font-bold text-slate-900">+1 New</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* GENERATOR SECTION */}
|
||||
<section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
|
||||
<FacebookGenerator />
|
||||
</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 Facebook QR Codes Work
|
||||
</h2>
|
||||
|
||||
<div className="grid md:grid-cols-3 lg:grid-cols-5 gap-8">
|
||||
<article className="text-center">
|
||||
<div className="w-14 h-14 rounded-2xl bg-[#1877F2]/10 flex items-center justify-center mx-auto mb-4">
|
||||
<Facebook className="w-7 h-7 text-[#1877F2]" />
|
||||
</div>
|
||||
<h3 className="font-bold text-slate-900 mb-2">1. Copy Link</h3>
|
||||
<p className="text-slate-600 text-sm">
|
||||
Go to your Facebook Page or Profile and copy the URL from the browser address bar.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article className="text-center">
|
||||
<div className="w-14 h-14 rounded-2xl bg-[#1877F2]/10 flex items-center justify-center mx-auto mb-4">
|
||||
<Smartphone className="w-7 h-7 text-[#1877F2]" />
|
||||
</div>
|
||||
<h3 className="font-bold text-slate-900 mb-2">2. Scan</h3>
|
||||
<p className="text-slate-600 text-sm">
|
||||
Your customers scan the code using their phone camera.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article className="text-center">
|
||||
<div className="w-12 h-12 rounded-2xl bg-[#1877F2]/10 flex items-center justify-center mx-auto mb-4">
|
||||
<ThumbsUp className="w-6 h-6 text-[#1877F2]" />
|
||||
</div>
|
||||
<h3 className="font-bold text-slate-900 mb-2">3. Engage</h3>
|
||||
<p className="text-slate-600 text-xs leading-relaxed">
|
||||
The Facebook app opens directly.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article className="text-center">
|
||||
<div className="w-12 h-12 rounded-2xl bg-[#1877F2]/10 flex items-center justify-center mx-auto mb-4">
|
||||
<Download className="w-6 h-6 text-[#1877F2]" />
|
||||
</div>
|
||||
<h3 className="font-bold text-slate-900 mb-2">4. Download</h3>
|
||||
<p className="text-slate-600 text-xs leading-relaxed">
|
||||
Save your high-res QR code.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article className="text-center">
|
||||
<div className="w-12 h-12 rounded-2xl bg-[#1877F2]/10 flex items-center justify-center mx-auto mb-4">
|
||||
<Share2 className="w-6 h-6 text-[#1877F2]" />
|
||||
</div>
|
||||
<h3 className="font-bold text-slate-900 mb-2">5. Share</h3>
|
||||
<p className="text-slate-600 text-xs leading-relaxed">
|
||||
Print it and start getting likes.
|
||||
</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 Facebook QR codes.
|
||||
</p>
|
||||
|
||||
<div className="space-y-4">
|
||||
<FaqItem
|
||||
question="Will this work for Facebook Groups?"
|
||||
answer="Yes! You can paste the link to your Facebook Group, and the QR code will direcr users to join."
|
||||
/>
|
||||
<FaqItem
|
||||
question="What if the user doesn't have the Facebook app?"
|
||||
answer="The link will open in their mobile web browser instead, so they can still see your page and log in."
|
||||
/>
|
||||
<FaqItem
|
||||
question="Can I customize the color?"
|
||||
answer="Yes. While Facebook Blue is recommended for recognition, you can choose any color to match your brand."
|
||||
/>
|
||||
<FaqItem
|
||||
question="Is the QR code permanent?"
|
||||
answer="Yes. As long as your Facebook URL doesn't change, this QR code will work forever."
|
||||
/>
|
||||
<FaqItem
|
||||
question="Does it work for Facebook Events?"
|
||||
answer="Yes. Simply copy the full URL of your Facebook Event and paste it into the generator."
|
||||
/>
|
||||
</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