From 702e2710deab32c59d3f8634572453ef113ba1c5 Mon Sep 17 00:00:00 2001
From: Timo Knuth <knuthtimo@gmail.com>
Date: Sun, 25 Jan 2026 18:44:53 +0100
Subject: [PATCH] seo

---
 .../(main)/(marketing)/MarketingLayout.tsx    |  16 +-
 src/app/(main)/(marketing)/about/page.tsx     | 285 ++++++++++++++++++
 src/app/(main)/(marketing)/contact/page.tsx   |  11 +-
 src/app/sitemap.ts                            |   6 +
 src/components/ui/Footer.tsx                  |   1 +
 src/i18n/de.json                              |   3 +
 src/i18n/en.json                              |   3 +
 src/middleware.ts                             |   1 +
 8 files changed, 319 insertions(+), 7 deletions(-)
 create mode 100644 src/app/(main)/(marketing)/about/page.tsx

diff --git a/src/app/(main)/(marketing)/MarketingLayout.tsx b/src/app/(main)/(marketing)/MarketingLayout.tsx
index 9c567f2..1a2e048 100644
--- a/src/app/(main)/(marketing)/MarketingLayout.tsx
+++ b/src/app/(main)/(marketing)/MarketingLayout.tsx
@@ -72,11 +72,13 @@ export default function MarketingLayout({
         <nav aria-label="Site Map">
           <ul>
             <li><a href="/">Home</a></li>
-            <li><a href="/pricing">Pricing</a></li>
-            <li><a href="/blog">Blog</a></li>
-            <li><a href="/faq">FAQ</a></li>
-            <li><a href="/login">Login</a></li>
-            <li><a href="/signup">Sign Up</a></li>
+            <li><Link href="/pricing">{t.nav.pricing}</Link></li>
+            <li><Link href="/blog">{t.nav.blog}</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>
+            <li><Link href="/login">{t.nav.login}</Link></li>
+            <li><Link href="/signup">{t.nav.signup || "Sign Up"}</Link></li>
             {/* Tools */}
             <li><a href="/tools/url-qr-code">URL QR Code</a></li>
             <li><a href="/tools/text-qr-code">Text QR Code</a></li>
@@ -171,6 +173,9 @@ export default function MarketingLayout({
             <Link href="/#pricing" className="px-3 py-2 text-sm font-medium text-slate-600 hover:text-slate-900 transition-colors">
               {t.nav.pricing}
             </Link>
+            <Link href="/about" className="px-3 py-2 text-sm font-medium text-slate-600 hover:text-slate-900 transition-colors">
+              {t.nav.about}
+            </Link>
             <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>
@@ -258,6 +263,7 @@ export default function MarketingLayout({
 
                 <Link href="/#features" className="block px-4 py-3 text-slate-700 font-medium rounded-xl hover:bg-slate-50" onClick={() => setMobileMenuOpen(false)}>{t.nav.features}</Link>
                 <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="/#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>
 
diff --git a/src/app/(main)/(marketing)/about/page.tsx b/src/app/(main)/(marketing)/about/page.tsx
new file mode 100644
index 0000000..f659745
--- /dev/null
+++ b/src/app/(main)/(marketing)/about/page.tsx
@@ -0,0 +1,285 @@
+import React from 'react';
+import Link from 'next/link';
+import { Metadata } from 'next';
+import { Button } from '@/components/ui/Button';
+import SeoJsonLd from '@/components/SeoJsonLd';
+import { organizationSchema } from '@/lib/schema';
+import { CheckCircle2, Shield, Users, BarChart3, Globe, Lock } from 'lucide-react';
+import { ObfuscatedMailto } from '@/components/ui/ObfuscatedMailto';
+
+export const metadata: Metadata = {
+    title: 'About QR Master | The Team & Mission Behind the Platform',
+    description: 'QR Master is built for measurable campaigns and secure QR code operations. Learn about our mission, values, and why businesses trust us.',
+    openGraph: {
+        title: 'About QR Master | Dynamic QR Codes & Analytics',
+        description: 'We help businesses create, manage, and track QR codes at scale. Transparent pricing, privacy-first, and built for reliability.',
+        url: 'https://www.qrmaster.net/about',
+        type: 'website',
+        images: ['/og-image.png'],
+    },
+};
+
+export default function AboutPage() {
+    return (
+        <>
+            <SeoJsonLd data={organizationSchema()} />
+
+            <div className="bg-white">
+                {/* Hero Section */}
+                <section className="relative overflow-hidden bg-gradient-to-br from-blue-50 via-white to-purple-50 py-20 sm:py-24">
+                    <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-5xl text-center">
+                        <h1 className="text-4xl sm:text-5xl font-bold text-gray-900 leading-tight mb-6">
+                            QR codes should be <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600">flexible, measurable, and reliable</span>.
+                        </h1>
+                        <p className="text-xl text-gray-600 max-w-2xl mx-auto mb-10 leading-relaxed">
+                            QR Master helps teams create dynamic QR codes that can be updated after printing—so you can stop reprinting materials every time something changes. Whether you’re running a menu, an event, or a multi-channel campaign, QR Master turns QR codes into a tool you can manage and measure.
+                        </p>
+
+                        <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
+                            <Link href="/signup">
+                                <Button size="lg" className="text-lg px-8 py-6 shadow-lg shadow-blue-500/25">
+                                    Get Started Free
+                                </Button>
+                            </Link>
+                        </div>
+                    </div>
+                </section>
+
+                {/* Mission Statement */}
+                <section className="py-16 border-y border-gray-100 bg-white">
+                    <div className="container mx-auto px-4 max-w-4xl text-center">
+                        <div className="inline-flex items-center justify-center p-3 sm:p-4 mb-6 rounded-full bg-blue-50 text-blue-700 font-medium text-sm sm:text-base">
+                            <Globe className="w-5 h-5 mr-2" />
+                            Our Mission
+                        </div>
+                        <h2 className="text-3xl font-bold text-gray-900 mb-4">
+                            Create QR codes that work everywhere—and make campaigns measurable.
+                        </h2>
+                    </div>
+                </section>
+
+                {/* What We Do */}
+                <section className="py-20 bg-gray-50">
+                    <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
+                        <div className="text-center mb-16">
+                            <h2 className="text-3xl font-bold text-gray-900 mb-4">What we do</h2>
+                            <p className="text-lg text-gray-600 max-w-2xl mx-auto">
+                                QR Master is a QR code platform built for real-world workflows: print, campaigns, and operations.
+                            </p>
+                        </div>
+
+                        <div className="grid md:grid-cols-3 gap-8">
+                            {/* Feature 1 */}
+                            <div className="bg-white p-8 rounded-2xl shadow-sm border border-gray-200 hover:shadow-md transition-shadow">
+                                <div className="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mb-6">
+                                    <Globe className="w-6 h-6 text-blue-600" />
+                                </div>
+                                <h3 className="text-xl font-bold text-gray-900 mb-3">Dynamic QR Codes</h3>
+                                <p className="text-gray-600 leading-relaxed mb-4">
+                                    Change the destination of a QR code after it’s already printed. Keep your printed materials valid—while you update your content anytime.
+                                </p>
+                                <Link href="/dynamic-qr-code-generator" className="text-blue-600 font-medium hover:underline">
+                                    Learn about Dynamic QR &rarr;
+                                </Link>
+                            </div>
+
+                            {/* Feature 2 */}
+                            <div className="bg-white p-8 rounded-2xl shadow-sm border border-gray-200 hover:shadow-md transition-shadow">
+                                <div className="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center mb-6">
+                                    <Users className="w-6 h-6 text-purple-600" />
+                                </div>
+                                <h3 className="text-xl font-bold text-gray-900 mb-3">Bulk QR Creation</h3>
+                                <p className="text-gray-600 leading-relaxed mb-4">
+                                    Generate hundreds of QR codes at once by uploading a CSV/Excel file (up to 1,000 rows per upload). Ideal for packaging, retail labels, inventory, or multi-location marketing.
+                                </p>
+                                <Link href="/bulk-qr-code-generator" className="text-blue-600 font-medium hover:underline">
+                                    Explore Bulk Creation &rarr;
+                                </Link>
+                            </div>
+
+                            {/* Feature 3 */}
+                            <div className="bg-white p-8 rounded-2xl shadow-sm border border-gray-200 hover:shadow-md transition-shadow">
+                                <div className="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center mb-6">
+                                    <BarChart3 className="w-6 h-6 text-green-600" />
+                                </div>
+                                <h3 className="text-xl font-bold text-gray-900 mb-3">Advanced Analytics</h3>
+                                <p className="text-gray-600 leading-relaxed mb-4">
+                                    Understand QR performance with scan analytics—so you can improve placements and campaigns based on real usage over time.
+                                </p>
+                                <Link href="/qr-code-tracking" className="text-blue-600 font-medium hover:underline">
+                                    See Analytics Features &rarr;
+                                </Link>
+                            </div>
+                        </div>
+
+                        <div className="mt-12 text-center">
+                            <Link href="/create-qr">
+                                <Button size="lg">Create QR Code</Button>
+                            </Link>
+                        </div>
+                    </div>
+                </section>
+
+                {/* Who It's For / Not For */}
+                <section className="py-20 bg-white">
+                    <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-6xl">
+                        <div className="grid md:grid-cols-2 gap-16">
+                            {/* Ideal For */}
+                            <div>
+                                <div className="flex items-start mb-6">
+                                    <CheckCircle2 className="w-6 h-6 text-green-500 mr-3 mt-1 flex-shrink-0" />
+                                    <h3 className="text-2xl font-bold text-gray-900">
+                                        Who QR Master is for
+                                    </h3>
+                                </div>
+                                <p className="text-gray-600 mb-6">
+                                    QR Master is built for people who rely on QR codes in the real world:
+                                </p>
+                                <ul className="space-y-4">
+                                    {[
+                                        "Restaurants using QR codes for menus and table experiences",
+                                        "Marketing teams & agencies running measurable print campaigns",
+                                        "Event organizers handling tickets, check-ins, and engagement",
+                                        "Retail & packaging workflows where scale and tracking matter"
+                                    ].map((item, i) => (
+                                        <li key={i} className="flex items-start">
+                                            <div className="flex-shrink-0 w-1.5 h-1.5 rounded-full bg-green-500 mt-2 mr-3" />
+                                            <span className="text-gray-700">{item}</span>
+                                        </li>
+                                    ))}
+                                </ul>
+                            </div>
+
+                            {/* Not Ideal For */}
+                            <div className="bg-gray-50 p-8 rounded-2xl border border-gray-100">
+                                <div className="flex items-start mb-6">
+                                    <Shield className="w-6 h-6 text-gray-400 mr-3 mt-1 flex-shrink-0" />
+                                    <h3 className="text-2xl font-bold text-gray-900">
+                                        When QR Master may <span className="italic">not</span> be the best fit
+                                    </h3>
+                                </div>
+                                <p className="text-gray-600 leading-relaxed mb-6">
+                                    If you require enterprise SSO, on-premise hosting, or deeply customized enterprise integrations, QR Master may not match those requirements today.
+                                </p>
+                                <p className="text-sm text-gray-500 italic">
+                                    (We prefer being transparent so you can choose the right tool.)
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+                {/* Trust & Transparency */}
+                <section className="py-20 bg-gray-900 text-white">
+                    <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-5xl">
+                        <div className="text-center mb-16">
+                            <h2 className="text-3xl font-bold mb-4">Trust & Transparency</h2>
+                            <p className="text-gray-400 text-lg max-w-2xl mx-auto">
+                                We know QR codes often sit at the intersection of marketing, security, and privacy. That’s why we prioritize clear product behavior and straightforward policies.
+                            </p>
+                        </div>
+
+                        <div className="grid md:grid-cols-2 gap-12">
+                            <div>
+                                <div className="flex items-center mb-4">
+                                    <Lock className="w-6 h-6 text-blue-400 mr-3" />
+                                    <h3 className="text-xl font-bold">Security basics</h3>
+                                </div>
+                                <p className="text-gray-400 leading-relaxed mb-4">
+                                    QR Master runs over HTTPS/TLS as standard. We focus on protecting the redirect and management experience with secure access patterns and responsible data handling.
+                                </p>
+                                <p className="text-gray-500 text-sm">
+                                    If you need formal security documentation (controls, subprocessors, incident process), we recommend publishing a dedicated Security page and linking it here.
+                                </p>
+                            </div>
+
+                            <div>
+                                <div className="flex items-center mb-4">
+                                    <Shield className="w-6 h-6 text-purple-400 mr-3" />
+                                    <h3 className="text-xl font-bold">Privacy & data handling</h3>
+                                </div>
+                                <p className="text-gray-400 leading-relaxed mb-6">
+                                    We aim for a privacy-conscious approach and provide a transparent Privacy Policy describing how data is handled and what tools/subprocessors are involved.
+                                </p>
+                                <div className="flex space-x-6 text-sm">
+                                    <Link href="/privacy" className="text-blue-400 hover:text-blue-300 transition-colors">
+                                        Read our Privacy Policy &rarr;
+                                    </Link>
+                                    <Link href="/faq" className="text-blue-400 hover:text-blue-300 transition-colors">
+                                        Explore FAQs &rarr;
+                                    </Link>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+                {/* Support & Contact */}
+                <section className="py-20 bg-white">
+                    <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-5xl">
+                        <div className="grid md:grid-cols-2 gap-12">
+                            {/* Support */}
+                            <div>
+                                <h3 className="text-2xl font-bold text-gray-900 mb-6">Support</h3>
+                                <p className="text-gray-600 mb-6">We keep support simple and responsive.</p>
+
+                                <div className="space-y-4 text-gray-700">
+                                    <div className="flex items-start">
+                                        <span className="font-semibold w-32">Email:</span>
+                                        <ObfuscatedMailto email="support@qrmaster.net" className="text-blue-600 hover:underline" />
+                                    </div>
+                                    <div className="flex items-start">
+                                        <span className="font-semibold w-32">Support hours:</span>
+                                        <span>Monday–Friday, 9:00–17:00 CET</span>
+                                    </div>
+                                    <div className="flex items-start">
+                                        <span className="font-semibold w-32">Languages:</span>
+                                        <span>English (EN) and German (DE)</span>
+                                    </div>
+                                </div>
+
+                                <div className="mt-8 bg-blue-50 p-6 rounded-xl text-sm text-blue-800">
+                                    <p className="font-semibold mb-2">Reaching out with a production issue?</p>
+                                    <p>Please include:</p>
+                                    <ul className="list-disc ml-5 mt-1 space-y-1 text-blue-700">
+                                        <li>The QR code type (static/dynamic)</li>
+                                        <li>Destination URL</li>
+                                        <li>Any relevant campaign context</li>
+                                    </ul>
+                                </div>
+                            </div>
+
+                            {/* Contact Info */}
+                            <div>
+                                <h3 className="text-2xl font-bold text-gray-900 mb-6">Contact</h3>
+                                <div className="bg-gray-50 p-8 rounded-2xl border border-gray-100">
+                                    <div className="space-y-4">
+                                        <p className="font-bold text-gray-900 text-lg">QR Master</p>
+                                        <p className="text-gray-600">
+                                            1001 Blucher Street<br />
+                                            Corpus Christi, Texas, USA
+                                        </p>
+                                        <div className="pt-4 border-t border-gray-200">
+                                            <p className="text-gray-600">
+                                                <span className="font-medium text-gray-900">For general questions:</span><br />
+                                                <ObfuscatedMailto email="support@qrmaster.net" className="text-blue-600 hover:underline" />
+                                            </p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className="mt-20 text-center">
+                            <Link href="/signup">
+                                <Button size="lg" className="text-lg px-8 py-6">
+                                    Get Started Free
+                                </Button>
+                            </Link>
+                        </div>
+                    </div>
+                </section>
+            </div>
+        </>
+    );
+}
diff --git a/src/app/(main)/(marketing)/contact/page.tsx b/src/app/(main)/(marketing)/contact/page.tsx
index b0c27d7..73a52e8 100644
--- a/src/app/(main)/(marketing)/contact/page.tsx
+++ b/src/app/(main)/(marketing)/contact/page.tsx
@@ -4,8 +4,15 @@ import { ObfuscatedMailto } from '@/components/ui/ObfuscatedMailto';
 import { Metadata } from 'next';
 
 export const metadata: Metadata = {
-    title: 'Contact Us | QR Master',
-    description: 'Get in touch with QR Master support.',
+    title: 'Contact Us | QR Master Support & Inquiries',
+    description: 'Get in touch with QR Master support for technical help, billing questions, or partnership inquiries. We are here to help you scale your QR campaigns.',
+    openGraph: {
+        title: 'Contact QR Master | Support & Team',
+        description: 'Need help with your QR codes? Reach out to our support team for assistance with dynamic codes, analytics, and more.',
+        url: 'https://www.qrmaster.net/contact',
+        type: 'website',
+        images: ['/og-image.png'],
+    },
 };
 
 export default function ContactPage() {
diff --git a/src/app/sitemap.ts b/src/app/sitemap.ts
index 717973d..82a44fb 100644
--- a/src/app/sitemap.ts
+++ b/src/app/sitemap.ts
@@ -152,6 +152,12 @@ export default function sitemap(): MetadataRoute.Sitemap {
       changeFrequency: 'yearly',
       priority: 0.5,
     },
+    {
+      url: `${baseUrl}/about`,
+      lastModified: new Date(),
+      changeFrequency: 'yearly',
+      priority: 0.6,
+    },
     {
       url: `${baseUrl}/guide/tracking-analytics`,
       lastModified: new Date(),
diff --git a/src/components/ui/Footer.tsx b/src/components/ui/Footer.tsx
index 9dc2854..75c71c7 100644
--- a/src/components/ui/Footer.tsx
+++ b/src/components/ui/Footer.tsx
@@ -29,6 +29,7 @@ export function Footer({ variant = 'marketing', t }: FooterProps) {
             <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="/about" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>About</Link></li>
               <li><Link href="/#pricing" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>{translations.pricing}</Link></li>
               <li><Link href="/qr-code-tracking" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>QR Analytics</Link></li>
               <li><Link href="/faq" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>{translations.faq}</Link></li>
diff --git a/src/i18n/de.json b/src/i18n/de.json
index fd3d72b..7cc79bc 100644
--- a/src/i18n/de.json
+++ b/src/i18n/de.json
@@ -6,6 +6,9 @@
     "blog": "Blog",
     "login": "Anmelden",
     "dashboard": "Dashboard",
+    "about": "Über uns",
+    "contact": "Kontakt",
+    "signup": "Registrieren",
     "create_qr": "QR erstellen",
     "bulk_creation": "Massen-Erstellung",
     "analytics": "Analytik",
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 8145eb8..14d432c 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -6,6 +6,9 @@
     "blog": "Blog",
     "login": "Login",
     "dashboard": "Dashboard",
+    "about": "About",
+    "contact": "Contact",
+    "signup": "Sign Up",
     "create_qr": "Create QR",
     "bulk_creation": "Bulk Creation",
     "analytics": "Analytics",
diff --git a/src/middleware.ts b/src/middleware.ts
index 5faa79f..4cc7f10 100644
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -30,6 +30,7 @@ export function middleware(req: NextRequest) {
     '/vcard',
     '/display',
     '/contact',
+    '/about',
   ];
 
   // Check if path is public