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

feat: implement blog infrastructure, add SEO keyword planning, and create footer component

Browse Source
This commit is contained in:
Timo Knuth
2026-04-04 23:50:45 +02:00
parent 3143561d27
commit 8408159a96
7 changed files with 622 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/app/(main)/(marketing)/blog/[slug]/page.tsx
View File

@@ -115,11 +115,17 @@ export default function BlogPostPage({ params }: { params: { slug: string } }) {
)}
</header>
{post.heroImage && (
<div className="relative aspect-video w-full rounded-2xl overflow-hidden shadow-lg mb-10">
<Image src={post.heroImage} alt={post.imageAlt || post.title} fill className="object-cover" />
</div>
)}
{post.heroImage && (
<div className="relative aspect-video w-full rounded-2xl overflow-hidden shadow-lg mb-10">
<Image
src={post.heroImage}
alt={post.imageAlt || post.title}
fill
unoptimized={post.heroImage.endsWith('.svg')}
className="object-cover"
/>
</div>
)}
{/* AEO BLOCK: ANSWER */}
<div className="max-w-3xl mx-auto">

19
src/app/(main)/(marketing)/blog/page.tsx
View File

@@ -92,15 +92,16 @@ export default function BlogPage() {
{publishedPosts.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.imageAlt || `${post.title} - QR code guide`}
width={800}
height={600}
className="w-full h-full object-cover transition-transform duration-500 hover:scale-110"
/>
</div>
<div className="relative h-56 overflow-hidden">
<Image
src={post.image}
alt={post.imageAlt || `${post.title} - QR code guide`}
width={800}
height={600}
unoptimized={post.image.endsWith('.svg')}
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>

2
src/components/ui/Footer.tsx
View File

@@ -44,7 +44,7 @@ export function Footer({ variant = 'marketing', t }: FooterProps) {
<div>
<h3 className={`font-semibold mb-4 ${isDashboard ? 'text-gray-900' : ''}`}>{translations.product}</h3>
<ul className={`space-y-2 ${isDashboard ? 'text-gray-500' : 'text-gray-400'}`}>
<li><Link href="/#features" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>{translations.features}</Link></li>
<li><Link href="/features" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>{translations.features}</Link></li>
<li><Link href="/about" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>About</Link></li>
<li><Link href="/press" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>Press</Link></li>
<li><Link href="/testimonials" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>Testimonials</Link></li>

4
src/lib/blog-data.ts
View File

@@ -22,8 +22,8 @@ export const blogPosts: BlogPost[] = [
authorName: "Timo Knuth",
authorTitle: "QR Code & Marketing Expert",
readTime: "8 Min",
image: "/blog/teams-qr-code.png",
heroImage: "/blog/teams-qr-code.png",
image: "/blog/teams-qr-code.svg",
heroImage: "/blog/teams-qr-code.svg",
imageAlt: "Microsoft Teams meeting room with QR code displayed on screen",
keywords: ["microsoft teams qr code", "teams meeting qr code", "teams qr code", "join teams meeting qr", "teams besprechung qr code"],
quickAnswer: `<p>Copy your Teams meeting URL → paste it into <a href="/tools/teams-qr-code">QR Master's free Teams QR generator</a> → download the code → display it in your meeting room or invitation. Attendees scan once to join instantly — no link typing needed.</p>`,