183 lines
7.1 KiB
TypeScript
183 lines
7.1 KiB
TypeScript
import React from 'react';
|
|
import type { Metadata } from 'next';
|
|
import Link from 'next/link';
|
|
import Image from 'next/image';
|
|
import SeoJsonLd from '@/components/SeoJsonLd';
|
|
import { websiteSchema, breadcrumbSchema } from '@/lib/schema';
|
|
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card';
|
|
import { Badge } from '@/components/ui/Badge';
|
|
import Breadcrumbs, { BreadcrumbItem } from '@/components/Breadcrumbs';
|
|
|
|
function truncateAtWord(text: string, maxLength: number): string {
|
|
if (text.length <= maxLength) return text;
|
|
const truncated = text.slice(0, maxLength);
|
|
const lastSpace = truncated.lastIndexOf(' ');
|
|
return lastSpace > 0 ? truncated.slice(0, lastSpace) : truncated;
|
|
}
|
|
|
|
export async function generateMetadata(): Promise<Metadata> {
|
|
const title = truncateAtWord('QR Insights: Latest QR Strategies', 60);
|
|
const description = truncateAtWord(
|
|
'Expert guides on QR analytics, dynamic codes & smart marketing uses.',
|
|
160
|
|
);
|
|
|
|
return {
|
|
title,
|
|
description,
|
|
alternates: {
|
|
canonical: 'https://www.qrmaster.net/blog',
|
|
languages: {
|
|
'x-default': 'https://www.qrmaster.net/blog',
|
|
en: 'https://www.qrmaster.net/blog',
|
|
},
|
|
},
|
|
openGraph: {
|
|
title,
|
|
description,
|
|
url: 'https://www.qrmaster.net/blog',
|
|
type: 'website',
|
|
},
|
|
twitter: {
|
|
title,
|
|
description,
|
|
},
|
|
};
|
|
}
|
|
|
|
const blogPosts = [
|
|
// NEW POSTS (January 2026)
|
|
{
|
|
slug: 'qr-code-restaurant-menu',
|
|
title: 'How to Create a QR Code for Restaurant Menu',
|
|
excerpt: 'Step-by-step guide to creating digital menu QR codes for your restaurant. Learn best practices for touchless menus, placement tips, and tracking.',
|
|
date: 'January 5, 2026',
|
|
readTime: '12 Min',
|
|
category: 'Restaurant',
|
|
image: '/blog/restaurant-qr-menu.png',
|
|
},
|
|
{
|
|
slug: 'vcard-qr-code-generator',
|
|
title: 'Free vCard QR Code Generator: Digital Business Cards',
|
|
excerpt: 'Create professional vCard QR codes for digital business cards. Share contact info instantly with a scan—includes templates and best practices.',
|
|
date: 'January 5, 2026',
|
|
readTime: '10 Min',
|
|
category: 'Business Cards',
|
|
image: '/blog/vcard-qr-code.png',
|
|
},
|
|
{
|
|
slug: 'qr-code-small-business',
|
|
title: 'Best QR Code Generator for Small Business: 2025 Guide',
|
|
excerpt: 'Find the best QR code solution for your small business. Compare features, pricing, and use cases for marketing, payments, and operations.',
|
|
date: 'January 5, 2026',
|
|
readTime: '14 Min',
|
|
category: 'Business',
|
|
image: '/blog/small-business-qr.png',
|
|
},
|
|
{
|
|
slug: 'qr-code-print-size-guide',
|
|
title: 'QR Code Print Size Guide: Minimum Sizes for Every Use Case',
|
|
excerpt: 'Complete guide to QR code print sizes. Learn minimum dimensions for business cards, posters, banners, and more to ensure reliable scanning.',
|
|
date: 'January 5, 2026',
|
|
readTime: '8 Min',
|
|
category: 'Printing',
|
|
image: '/blog/qr-print-sizes.png',
|
|
},
|
|
// EXISTING POSTS
|
|
{
|
|
slug: 'qr-code-tracking-guide-2025',
|
|
title: 'QR Code Tracking: Complete Guide 2025',
|
|
excerpt: 'Learn how to track QR code scans with real-time analytics. Compare free vs paid tracking tools, setup Google Analytics, and measure ROI.',
|
|
date: 'October 18, 2025',
|
|
readTime: '12 Min',
|
|
category: 'Tracking & Analytics',
|
|
image: '/blog/1-hero.png',
|
|
},
|
|
{
|
|
slug: 'dynamic-vs-static-qr-codes',
|
|
title: 'Dynamic vs Static QR Codes: Which Should You Use?',
|
|
excerpt: 'Understand the difference between static and dynamic QR codes. Learn when to use each type, pros/cons, and how dynamic QR codes save money.',
|
|
date: 'October 17, 2025',
|
|
readTime: '10 Min',
|
|
category: 'QR Code Basics',
|
|
image: '/blog/2-hero.png',
|
|
},
|
|
{
|
|
slug: 'bulk-qr-code-generator-excel',
|
|
title: 'How to Generate Bulk QR Codes from Excel',
|
|
excerpt: 'Generate hundreds of QR codes from Excel or CSV files in minutes. Step-by-step guide with templates, best practices, and free tools.',
|
|
date: 'October 16, 2025',
|
|
readTime: '13 Min',
|
|
category: 'Bulk Generation',
|
|
image: '/blog/3-hero.png',
|
|
},
|
|
{
|
|
slug: 'qr-code-analytics',
|
|
title: 'QR Code Analytics: Track, Measure & Optimize Campaigns',
|
|
excerpt: 'Learn how to leverage scan analytics, campaign tracking, and dashboard insights to maximize QR code ROI.',
|
|
date: 'October 16, 2025',
|
|
readTime: '15 Min',
|
|
category: 'Analytics',
|
|
image: '/blog/4-hero.png',
|
|
},
|
|
];
|
|
|
|
export default function BlogPage() {
|
|
const breadcrumbItems: BreadcrumbItem[] = [
|
|
{ name: 'Home', url: '/' },
|
|
{ name: 'Blog', url: '/blog' },
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<SeoJsonLd data={[websiteSchema(), breadcrumbSchema(breadcrumbItems)]} />
|
|
<div className="py-20 bg-gradient-to-b from-gray-50 to-white">
|
|
<div className="container mx-auto px-4">
|
|
<Breadcrumbs items={breadcrumbItems} />
|
|
<div className="text-center mb-16">
|
|
<h1 className="text-4xl lg:text-5xl font-bold text-gray-900 mb-6">
|
|
QR Code Insights
|
|
</h1>
|
|
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
|
|
Expert guides on dynamic QR codes, campaign tracking, UTM analytics, and smart marketing use cases.
|
|
Discover how-to tutorials and best practices for QR code analytics.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
|
|
{blogPosts.map((post) => (
|
|
<Link key={post.slug} href={`/blog/${post.slug}`}>
|
|
<Card hover className="h-full overflow-hidden shadow-md hover:shadow-xl transition-all duration-300">
|
|
<div className="relative h-56 overflow-hidden">
|
|
<Image
|
|
src={post.image}
|
|
alt={`${post.title} - QR code guide showing ${post.category.toLowerCase()} strategies`}
|
|
width={800}
|
|
height={600}
|
|
className="w-full h-full object-cover transition-transform duration-500 hover:scale-110"
|
|
/>
|
|
</div>
|
|
<CardHeader className="pb-3">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<Badge variant="info">{post.category}</Badge>
|
|
<span className="text-sm text-gray-500 font-medium">{post.readTime} read</span>
|
|
</div>
|
|
<CardTitle className="text-xl leading-tight mb-3">{post.title}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="pt-0">
|
|
<p className="text-gray-600 mb-4 leading-relaxed">{post.excerpt}</p>
|
|
<div className="flex items-center justify-between pt-4 border-t border-gray-100">
|
|
<p className="text-sm text-gray-500">{post.date}</p>
|
|
<span className="text-primary-600 text-sm font-medium">Read more →</span>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|