14 blog post schedule

src/app/(main)/(marketing)/MarketingLayout.tsx

@@ -74,6 +74,7 @@ export default function MarketingLayout({
             <li><a href="/">Home</a></li>
             <li><Link href="/pricing">{t.nav.pricing}</Link></li>
             <li><Link href="/blog">{t.nav.blog}</Link></li>
+            <li><Link href="/learn">{t.nav.learn}</Link></li>
             <li><Link href="/faq">{t.nav.faq}</Link></li>
             <li><Link href="/about">{t.nav.about}</Link></li>
             <li><Link href="/contact">{t.nav.contact}</Link></li>
@@ -179,6 +180,9 @@ export default function MarketingLayout({
             <Link href="/blog" className="px-3 py-2 text-sm font-medium text-slate-600 hover:text-slate-900 transition-colors">
               {t.nav.blog}
             </Link>
+            <Link href="/learn" className="px-3 py-2 text-sm font-medium text-slate-600 hover:text-slate-900 transition-colors">
+              {t.nav.learn}
+            </Link>
             <Link href="/#faq" className="px-3 py-2 text-sm font-medium text-slate-600 hover:text-slate-900 transition-colors">
               {t.nav.faq}
             </Link>
@@ -265,6 +269,7 @@ export default function MarketingLayout({
                 <Link href="/#pricing" className="block px-4 py-3 text-slate-700 font-medium rounded-xl hover:bg-slate-50" onClick={() => setMobileMenuOpen(false)}>{t.nav.pricing}</Link>
                 <Link href="/about" className="block px-4 py-3 text-slate-700 font-medium rounded-xl hover:bg-slate-50" onClick={() => setMobileMenuOpen(false)}>{t.nav.about}</Link>
                 <Link href="/blog" className="block px-4 py-3 text-slate-700 font-medium rounded-xl hover:bg-slate-50" onClick={() => setMobileMenuOpen(false)}>{t.nav.blog}</Link>
+                <Link href="/learn" className="block px-4 py-3 text-slate-700 font-medium rounded-xl hover:bg-slate-50" onClick={() => setMobileMenuOpen(false)}>{t.nav.learn}</Link>
                 <Link href="/#faq" className="block px-4 py-3 text-slate-700 font-medium rounded-xl hover:bg-slate-50" onClick={() => setMobileMenuOpen(false)}>{t.nav.faq}</Link>
 
                 <div className="grid grid-cols-2 gap-4 pt-4">

src/app/(main)/(marketing)/authors/[slug]/page.tsx

@@ -0,0 +1,93 @@
+import { notFound } from "next/navigation";
+import Link from "next/link";
+import Image from "next/image";
+import Script from "next/script";
+import { getAuthorBySlug, getPostsByAuthor } from "@/lib/content";
+import { authors } from "@/lib/author-data";
+import { authorPageSchema } from "@/lib/schema";
+
+export function generateMetadata({ params }: { params: { slug: string } }) {
+    const author = getAuthorBySlug(params.slug);
+    if (!author) return {};
+    return {
+        title: `${author.name} - ${author.role} | QR Master`,
+        description: author.bio
+    };
+}
+
+export function generateStaticParams() {
+    return authors.map((author) => ({
+        slug: author.slug,
+    }));
+}
+
+export default function AuthorPage({ params }: { params: { slug: string } }) {
+    const author = getAuthorBySlug(params.slug);
+    if (!author) return notFound();
+
+    const posts = getPostsByAuthor(params.slug);
+    const jsonLd = authorPageSchema(author, posts);
+
+    return (
+        <main className="container mx-auto max-w-3xl py-12 px-4 space-y-10">
+            <Script id="ld-author" type="application/ld+json" strategy="afterInteractive"
+                dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
+            <header className="flex flex-col md:flex-row gap-8 items-center md:items-start text-center md:text-left">
+                {author.image ? (
+                    <div className="relative w-32 h-32 flex-shrink-0">
+                        <Image
+                            src={author.image}
+                            alt={author.name}
+                            fill
+                            className="rounded-full object-cover border-4 border-white shadow-lg"
+                        />
+                    </div>
+                ) : (
+                    <div className="w-32 h-32 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold text-4xl shadow-lg">
+                        {author.name.charAt(0)}
+                    </div>
+                )}
+
+                <div className="space-y-3">
+                    <div className="flex items-center gap-3">
+                        <h1 className="text-3xl font-extrabold text-gray-900">{author.name}</h1>
+                        <Image src="/logo.svg" alt="QR Master" width={24} height={24} className="opacity-80" />
+                    </div>
+                    <p className="text-lg text-blue-600 font-medium">{author.role}</p>
+                    <p className="text-gray-600 max-w-xl">{author.bio}</p>
+                    {!!author.sameAs?.length && (
+                        <div className="flex gap-4 justify-center md:justify-start pt-2">
+                            {author.sameAs.map((url) => {
+                                let label = "Profile";
+                                if (url.includes('linkedin')) label = "LinkedIn";
+                                if (url.includes('github')) label = "GitHub";
+                                if (url.includes('instagram')) label = "Instagram";
+                                if (url.includes('twitter') || url.includes('x.com')) label = "Twitter";
+                                return (
+                                    <a key={url} href={url} target="_blank" rel="noreferrer" className="text-sm font-semibold text-gray-500 hover:text-black border-b border-transparent hover:border-black transition-colors">
+                                        {label}
+                                    </a>
+                                );
+                            })}
+                        </div>
+                    )}
+                </div>
+            </header>
+
+            <div className="border-t border-gray-100"></div>
+
+            <section className="space-y-6">
+                <h2 className="text-2xl font-bold text-gray-900">Latest Articles</h2>
+                <div className="space-y-4">
+                    {posts.map(p => (
+                        <Link key={p.slug} href={`/blog/${p.slug}`} className="block group p-6 rounded-xl border border-gray-200 bg-white hover:border-blue-200 hover:shadow-sm transition-all">
+                            <div className="text-sm text-gray-400 mb-1">{p.date}</div>
+                            <h3 className="text-xl font-bold text-gray-900 group-hover:text-blue-700 transition-colors mb-2">{p.title}</h3>
+                            <p className="text-gray-600">{p.description}</p>
+                        </Link>
+                    ))}
+                </div>
+            </section>
+        </main>
+    );
+}

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

@@ -1,157 +1,110 @@
-import React from 'react';
-import type { Metadata } from 'next';
-import Link from 'next/link';
-import Image from 'next/image';
-import { notFound } from 'next/navigation';
-import SeoJsonLd from '@/components/SeoJsonLd';
-import Breadcrumbs from '@/components/Breadcrumbs';
-import { Button } from '@/components/ui/Button';
-import { Badge } from '@/components/ui/Badge';
-import { blogPosts } from '@/lib/blog-data';
+import { notFound } from "next/navigation";
+import Script from "next/script";
+import { getPublishedPostBySlug, getAuthorBySlug, getRelatedPosts, getPublishedPosts } from "@/lib/content";
+import { AnswerBox } from "@/components/aeo/AnswerBox";
+import { StepList } from "@/components/aeo/StepList";
+import { FAQSection } from "@/components/aeo/FAQSection";
+import { AuthorCard } from "@/components/author/AuthorCard";
+import { RelatedPosts } from "@/components/blog/RelatedPosts";
+import { blogPostingSchema, howToSchema, faqPageSchema } from "@/lib/schema";
+import Image from "next/image";
+import Link from "next/link";
 
-interface PageProps {
-  params: {
-    slug: string;
+export function generateMetadata({ params }: { params: { slug: string } }) {
+  const post = getPublishedPostBySlug(params.slug);
+  if (!post) return {};
+  return {
+    title: post.title,
+    description: post.description,
   };
 }
 
 export function generateStaticParams() {
-  return Object.keys(blogPosts).map((slug) => ({
-    slug,
+  // Only generate static params for published posts
+  return getPublishedPosts().map((post) => ({
+    slug: post.slug,
   }));
 }
 
-export function generateMetadata({ params }: PageProps): Metadata {
-  const post = blogPosts[params.slug];
 
-  if (!post) {
-    notFound();
-    return {} as Metadata; // Typescript satisfaction (unreachable)
-  }
+export default function BlogPostPage({ params }: { params: { slug: string } }) {
+  const post = getPublishedPostBySlug(params.slug);
+  if (!post) return notFound(); // STRICT 404 GATE
 
-  return {
-    title: {
-      absolute: `${post.title} | QR Master Blog`,
-    },
-    description: post.excerpt,
-    openGraph: {
-      title: post.title,
-      description: post.excerpt,
-      type: 'article',
-      publishedTime: post.datePublished,
-      modifiedTime: post.dateModified,
-      authors: [post.author],
-      images: [
-        {
-          url: post.image,
-          alt: post.imageAlt,
-        },
-      ],
-    },
-    twitter: {
-      card: 'summary_large_image',
-      title: post.title,
-      description: post.excerpt,
-      images: [post.image],
-    },
-  };
-}
+  const author = getAuthorBySlug(post.authorSlug);
+  const related = getRelatedPosts(post);
 
-export default function BlogPostPage({ params }: PageProps) {
-  const post = blogPosts[params.slug];
-
-  if (!post) {
-    notFound();
-  }
-
-  const jsonLd = {
-    '@context': 'https://schema.org',
-    '@type': 'BlogPosting',
-    headline: post.title,
-    image: post.image,
-    datePublished: post.datePublished,
-    dateModified: post.dateModified,
-    author: {
-      '@type': 'Organization',
-      name: post.author,
-      url: post.authorUrl,
-    },
-  };
-
-  const breadcrumbItems = [
-    { name: 'Home', url: '/' },
-    { name: 'Blog', url: '/blog' },
-    { name: post.title, url: `/blog/${post.slug}` },
-  ];
+  const jsonLd = blogPostingSchema(post, author);
+  const howtoLd = post.keySteps?.length ? howToSchema(post, author) : null;
+  const faqLd = post.faq ? faqPageSchema(post.faq) : null;
 
   return (
-    <>
-      <SeoJsonLd data={[jsonLd]} />
+    <main className="container mx-auto max-w-4xl py-12 px-4">
+      <Script id="ld-blogposting" type="application/ld+json" strategy="afterInteractive"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
+      {howtoLd && (
+        <Script id="ld-howto" type="application/ld+json" strategy="afterInteractive"
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(howtoLd) }} />
+      )}
+      {faqLd && (
+        <Script id="ld-faq" type="application/ld+json" strategy="afterInteractive"
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(faqLd) }} />
+      )}
 
-      <div className="min-h-screen bg-white pb-20">
-        {/* Hero Header */}
-        <div className="bg-gray-50 border-b border-gray-100">
-          <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-12 max-w-4xl">
-            <Breadcrumbs items={breadcrumbItems} className="mb-8" />
+      <header className="space-y-6 text-center max-w-3xl mx-auto mb-10">
+        <div className="flex justify-center gap-2 text-sm text-gray-500 font-medium">
+          <Link href="/learn" className="hover:text-blue-600">Hub</Link>
+          <span>/</span>
+          <Link href={`/learn/${post.pillar}`} className="hover:text-blue-600 capitalize">{post.pillar}</Link>
+        </div>
+        <h1 className="text-3xl md:text-5xl font-extrabold text-gray-900 tracking-tight leading-tight">{post.title}</h1>
+        <p className="text-xl text-gray-600 relaxed">{post.description}</p>
 
-            <Badge variant="info" className="mb-6">
-              {post.category}
-            </Badge>
-
-            <h1 className="text-4xl md:text-5xl font-bold text-gray-900 leading-tight mb-6">
-              {post.title}
-            </h1>
-
-            <div className="flex items-center text-gray-600 mb-8 space-x-6 text-sm">
-              <div className="flex items-center">
-                <span className="font-medium text-gray-900 mr-2">{post.author}</span>
+        {author && (
+          <div className="flex items-center justify-center gap-3 pt-4">
+            {author.image ? (
+              <Image src={author.image} alt={author.name} width={40} height={40} className="rounded-full" />
+            ) : (
+              <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold">
+                {author.name.charAt(0)}
               </div>
-              <div>•</div>
-              <div>{post.date}</div>
-              <div>•</div>
-              <div>{post.readTime} read</div>
+            )}
+            <div className="text-left text-sm">
+              <div className="font-bold text-gray-900">{author.name}</div>
+              <div className="text-gray-500">Updated {post.updatedAt || post.date}</div>
             </div>
           </div>
+        )}
+      </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>
+      )}
 
-        {/* Featured Image */}
-        <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-4xl -mt-8 mb-12">
-          <div className="relative aspect-video w-full overflow-hidden rounded-2xl shadow-xl">
-            <Image
-              src={post.image}
-              alt={post.imageAlt}
-              fill
-              className="object-cover"
-              priority
-            />
-          </div>
+      {/* AEO BLOCK: ANSWER */}
+      <div className="max-w-3xl mx-auto">
+        {post.quickAnswer && <AnswerBox html={post.quickAnswer} />}
+
+        {/* AEO BLOCK: STEPS (If defined separate from body) */}
+        {!!post.keySteps?.length && <StepList steps={post.keySteps} title="Step-by-Step Guide" />}
+
+
+        {/* MAIN CONTENT */}
+        <article className="prose prose-lg prose-blue max-w-none text-gray-800" dangerouslySetInnerHTML={{ __html: post.content }} />
+
+        {/* AEO BLOCK: FAQ */}
+        {!!post.faq?.length && <div className="mt-12"><FAQSection items={post.faq} /></div>}
+
+        <div className="border-t border-gray-100 my-12"></div>
+
+        {author && <AuthorCard author={author} />}
+
+        <div className="mt-12">
+          <RelatedPosts posts={related} />
         </div>
-
-        {/* Content */}
-        <article className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-3xl">
-          <div
-            className="prose prose-lg prose-blue max-w-none hover:prose-a:text-blue-600 transition-colors"
-            dangerouslySetInnerHTML={{ __html: post.content }}
-          />
-
-          {/* Share / CTA */}
-          <div className="mt-16 pt-8 border-t border-gray-200">
-            <div className="bg-blue-50 rounded-2xl p-8 text-center">
-              <h3 className="text-2xl font-bold text-gray-900 mb-4">
-                Enjoyed this article?
-              </h3>
-              <p className="text-gray-600 mb-6 text-lg">
-                Create your first dynamic QR code for free and start tracking your campaigns today.
-              </p>
-              <Link href="/signup">
-                <Button size="lg" className="px-8">
-                  Create Free QR Code
-                </Button>
-              </Link>
-            </div>
-          </div>
-        </article>
       </div>
-    </>
+    </main>
   );
 }

src/app/(main)/(marketing)/blog/page.tsx

@@ -7,6 +7,11 @@ 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';
+import { blogPosts } from '@/lib/blog-data';
+
+// Enable Incremental Static Regeneration (ISR)
+// Revalidate every hour
+export const revalidate = 3600;
 
 function truncateAtWord(text: string, maxLength: number): string {
   if (text.length <= maxLength) return text;
@@ -46,89 +51,27 @@ export async function generateMetadata(): Promise<Metadata> {
   };
 }
 
-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.webp',
-  },
-  {
-    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.webp',
-  },
-  {
-    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/bulk-qr-events-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/qr-code-analytics-hero.webp',
-  },
-];
-
 export default function BlogPage() {
   const breadcrumbItems: BreadcrumbItem[] = [
     { name: 'Home', url: '/' },
     { name: 'Blog', url: '/blog' },
   ];
 
+  // Filter posts to only show those published in the past or today
+  // sort by date descending (newest first)
+  const currentDate = new Date();
+
+  const publishedPosts = blogPosts
+    .filter(post => {
+      const publishDate = post.datePublished ? new Date(post.datePublished) : new Date(post.date);
+      return publishDate <= currentDate;
+    })
+    .sort((a, b) => {
+      const dateA = a.datePublished ? new Date(a.datePublished) : new Date(a.date);
+      const dateB = b.datePublished ? new Date(b.datePublished) : new Date(b.date);
+      return dateB.getTime() - dateA.getTime();
+    });
+
   return (
     <>
       <SeoJsonLd data={[websiteSchema(), breadcrumbSchema(breadcrumbItems)]} />
@@ -146,13 +89,13 @@ export default function BlogPage() {
           </div>
 
           <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
-            {blogPosts.map((post) => (
+            {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.title} - QR code guide showing ${post.category.toLowerCase()} strategies`}
+                      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"

src/app/(main)/(marketing)/learn/[pillar]/page.tsx

@@ -0,0 +1,69 @@
+import { notFound } from "next/navigation";
+import Link from "next/link";
+import Script from "next/script";
+import { pillarMeta } from "@/lib/pillar-data";
+import { getPostsByPillar } from "@/lib/content";
+import type { PillarKey } from "@/lib/types";
+import { pillarPageSchema, faqPageSchema } from "@/lib/schema";
+import { FAQSection } from "@/components/aeo/FAQSection";
+import { AnswerBox } from "@/components/aeo/AnswerBox";
+
+export function generateMetadata({ params }: { params: { pillar: string } }) {
+    const meta = pillarMeta.find(p => p.key === params.pillar);
+    if (!meta) return {};
+    return {
+        title: `${meta.title} - Ultimate Guide | QR Master`,
+        description: meta.description
+    };
+}
+
+export function generateStaticParams() {
+    return pillarMeta.map((pillar) => ({
+        pillar: pillar.key,
+    }));
+}
+
+export default function PillarPage({ params }: { params: { pillar: PillarKey } }) {
+    const meta = pillarMeta.find(p => p.key === params.pillar);
+    if (!meta) return notFound();
+
+    const posts = getPostsByPillar(meta.key);
+    const jsonLd = pillarPageSchema(meta, posts);
+    const faqLd = meta.miniFaq ? faqPageSchema(meta.miniFaq) : null;
+
+    return (
+        <main className="container mx-auto max-w-5xl py-12 px-4 space-y-10">
+            <Script id="ld-pillar" type="application/ld+json" strategy="afterInteractive"
+                dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
+            {faqLd && (
+                <Script id="ld-pillar-faq" type="application/ld+json" strategy="afterInteractive"
+                    dangerouslySetInnerHTML={{ __html: JSON.stringify(faqLd) }} />
+            )}
+
+            <header className="space-y-4 max-w-3xl">
+                <div className="text-sm font-medium text-gray-500 hover:text-gray-700">
+                    <Link href="/learn">Learn</Link> → <span className="text-gray-900">{meta.title}</span>
+                </div>
+                <h1 className="text-4xl md:text-5xl font-extrabold text-gray-900">{meta.title}</h1>
+                <p className="text-xl text-gray-600">{meta.description}</p>
+            </header>
+
+            <AnswerBox html={meta.quickAnswer} />
+
+            <section className="space-y-6">
+                <h2 className="text-2xl font-bold text-gray-900">Guides & Articles</h2>
+                <div className="grid md:grid-cols-2 gap-6">
+                    {posts.map(p => (
+                        <Link key={p.slug} href={`/blog/${p.slug}`} className="group block rounded-xl border border-gray-200 bg-white p-6 shadow-sm hover:shadow-md hover:border-blue-200 transition-all">
+                            <div className="text-xs text-gray-400 mb-2">{p.date}</div>
+                            <div className="text-lg font-bold text-gray-900 mb-2 group-hover:text-blue-700">{p.title}</div>
+                            <div className="text-sm text-gray-600 line-clamp-2">{p.description}</div>
+                        </Link>
+                    ))}
+                </div>
+            </section>
+
+            {!!meta.miniFaq?.length && <FAQSection items={meta.miniFaq} title={`${meta.title} FAQ`} />}
+        </main>
+    );
+}

src/app/(main)/(marketing)/learn/page.tsx

@@ -0,0 +1,54 @@
+import Link from "next/link";
+import { pillarMeta } from "@/lib/pillar-data";
+import { getPublishedPosts } from "@/lib/content";
+
+export const metadata = {
+    title: "Learn QR Code Mastery | QR Master Hub",
+    description: "Guides, use cases, tracking deep-dives, and security best practices for dynamic QR codes.",
+};
+
+export default function LearnHubPage() {
+    const posts = getPublishedPosts();
+    // Sort by date descending
+    const topLatest = [...posts].sort((a, b) => (new Date(a.datePublished).getTime() < new Date(b.datePublished).getTime() ? 1 : -1)).slice(0, 6);
+
+    return (
+        <main className="container mx-auto max-w-5xl py-12 px-4 space-y-12">
+            <header className="space-y-4 max-w-3xl">
+                <h1 className="text-4xl md:text-5xl font-extrabold text-gray-900 tracking-tight">QR Code Knowledge Hub</h1>
+                <p className="text-xl text-gray-600">
+                    Master the art of QR codes. Explore our expert guides on generation, tracking, security, and marketing strategies.
+                </p>
+            </header>
+
+            <section>
+                <h2 className="text-2xl font-bold text-gray-900 mb-6">Topic Pillars</h2>
+                <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+                    {pillarMeta.sort((a, b) => a.order - b.order).map(p => (
+                        <Link key={p.key} href={`/learn/${p.key}`} className="group block h-full rounded-2xl border border-gray-200 bg-white p-6 shadow-sm hover:shadow-md hover:border-blue-200 transition-all">
+                            <div className="text-sm font-semibold text-blue-600 uppercase tracking-wide mb-2 opacity-80 group-hover:opacity-100">Pillar</div>
+                            <div className="text-2xl font-bold text-gray-900 mb-2 group-hover:text-blue-700">{p.title}</div>
+                            <div className="text-gray-600">{p.description}</div>
+                        </Link>
+                    ))}
+                </div>
+            </section>
+
+            <section>
+                <h2 className="text-2xl font-bold text-gray-900 mb-6">Latest Guides</h2>
+                <div className="grid md:grid-cols-2 gap-6">
+                    {topLatest.map(p => (
+                        <Link key={p.slug} href={`/blog/${p.slug}`} className="group block rounded-2xl border border-gray-200 bg-white p-6 shadow-sm hover:shadow-md hover:border-blue-200 transition-all">
+                            <div className="flex justify-between items-center mb-3">
+                                <div className="text-xs font-semibold px-2 py-1 rounded bg-gray-100 text-gray-600">{p.pillar?.toUpperCase() || 'GUIDE'}</div>
+                                <div className="text-xs text-gray-400">{p.date}</div>
+                            </div>
+                            <div className="text-xl font-bold text-gray-900 mb-2 group-hover:text-blue-700 line-clamp-2">{p.title}</div>
+                            <div className="text-gray-600 line-clamp-2">{p.description}</div>
+                        </Link>
+                    ))}
+                </div>
+            </section>
+        </main>
+    );
+}

src/app/(main)/(marketing)/page.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { Metadata } from 'next';
 import SeoJsonLd from '@/components/SeoJsonLd';
-import { organizationSchema, websiteSchema } from '@/lib/schema';
+import { organizationSchema, websiteSchema, softwareApplicationSchema } from '@/lib/schema';
 import HomePageClient from '@/components/marketing/HomePageClient';
 
 function truncateAtWord(text: string, maxLength: number): string {
@@ -54,7 +54,7 @@ export async function generateMetadata(): Promise<Metadata> {
 export default function HomePage() {
   return (
     <>
-      <SeoJsonLd data={[websiteSchema(), organizationSchema()]} />
+      <SeoJsonLd data={[websiteSchema(), organizationSchema(), softwareApplicationSchema()]} />
 
       {/* Server-rendered SEO content for crawlers */}
       <div className="sr-only" aria-hidden="false">