Initial commit - QR Master application

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

@@ -0,0 +1,157 @@
+'use client';
+
+import React from 'react';
+import { useParams } from 'next/navigation';
+import Link from 'next/link';
+import { Button } from '@/components/ui/Button';
+import { Badge } from '@/components/ui/Badge';
+
+const blogContent = {
+  'qr-codes-im-restaurant': {
+    title: 'QR-Codes im Restaurant: Die digitale Revolution der Speisekarte',
+    date: '2024-01-15',
+    readTime: '5 Min',
+    category: 'Gastronomie',
+    content: `
+      <p>Die Gastronomie hat sich in den letzten Jahren stark digitalisiert, und QR-Codes spielen dabei eine zentrale Rolle. Von kontaktlosen Speisekarten bis hin zu digitalen Zahlungssystemen – QR-Codes revolutionieren die Art und Weise, wie Restaurants mit ihren Gästen interagieren.</p>
+      
+      <h2>Vorteile für Restaurants</h2>
+      <ul>
+        <li>Kostenersparnis durch digitale Speisekarten</li>
+        <li>Einfache Aktualisierung von Preisen und Angeboten</li>
+        <li>Hygienische, kontaktlose Lösung</li>
+        <li>Mehrsprachige Menüs ohne zusätzliche Druckkosten</li>
+      </ul>
+      
+      <h2>Vorteile für Gäste</h2>
+      <ul>
+        <li>Schneller Zugriff auf aktuelle Informationen</li>
+        <li>Detaillierte Produktbeschreibungen und Allergeninformationen</li>
+        <li>Einfache Bestellung und Bezahlung</li>
+        <li>Personalisierte Empfehlungen</li>
+      </ul>
+      
+      <p>Die Implementierung von QR-Codes in Ihrem Restaurant ist einfacher als Sie denken. Mit QR Master können Sie in wenigen Minuten professionelle QR-Codes erstellen, die perfekt zu Ihrem Branding passen.</p>
+    `,
+  },
+  'dynamische-vs-statische-qr-codes': {
+    title: 'Dynamische vs. Statische QR-Codes: Was ist der Unterschied?',
+    date: '2024-01-10',
+    readTime: '3 Min',
+    category: 'Grundlagen',
+    content: `
+      <p>Bei der Erstellung von QR-Codes stehen Sie vor der Wahl zwischen statischen und dynamischen Codes. Beide haben ihre Vor- und Nachteile, und die richtige Wahl hängt von Ihrem spezifischen Anwendungsfall ab.</p>
+      
+      <h2>Statische QR-Codes</h2>
+      <p>Statische QR-Codes enthalten die Informationen direkt im Code selbst. Einmal erstellt, können sie nicht mehr geändert werden.</p>
+      <ul>
+        <li>Kostenlos und unbegrenzt nutzbar</li>
+        <li>Funktionieren für immer ohne Server</li>
+        <li>Ideal für permanente Informationen</li>
+        <li>Keine Tracking-Möglichkeiten</li>
+      </ul>
+      
+      <h2>Dynamische QR-Codes</h2>
+      <p>Dynamische QR-Codes verweisen auf eine URL, die Sie jederzeit ändern können.</p>
+      <ul>
+        <li>Inhalt kann nachträglich geändert werden</li>
+        <li>Detaillierte Scan-Statistiken</li>
+        <li>Kürzere, sauberere QR-Codes</li>
+        <li>Perfekt für Marketing-Kampagnen</li>
+      </ul>
+      
+      <p>Mit QR Master können Sie beide Arten von QR-Codes erstellen und verwalten. Unsere Plattform bietet Ihnen die Flexibilität, die Sie für Ihre Projekte benötigen.</p>
+    `,
+  },
+  'qr-code-marketing-strategien': {
+    title: 'QR-Code Marketing-Strategien für 2024',
+    date: '2024-01-05',
+    readTime: '7 Min',
+    category: 'Marketing',
+    content: `
+      <p>QR-Codes sind zu einem unverzichtbaren Werkzeug im modernen Marketing geworden. Hier sind die effektivsten Strategien für 2024.</p>
+      
+      <h2>1. Personalisierte Kundenerlebnisse</h2>
+      <p>Nutzen Sie dynamische QR-Codes, um personalisierte Landingpages basierend auf Standort, Zeit oder Kundenverhalten zu erstellen.</p>
+      
+      <h2>2. Social Media Integration</h2>
+      <p>Verbinden Sie QR-Codes mit Ihren Social-Media-Kampagnen für nahtlose Cross-Channel-Erlebnisse.</p>
+      
+      <h2>3. Event-Marketing</h2>
+      <p>Von Tickets bis zu Networking – QR-Codes machen Events interaktiver und messbar.</p>
+      
+      <h2>4. Loyalty-Programme</h2>
+      <p>Digitale Treuekarten und Rabattaktionen lassen sich perfekt mit QR-Codes umsetzen.</p>
+      
+      <h2>5. Analytics und Optimierung</h2>
+      <p>Nutzen Sie die Tracking-Funktionen, um Ihre Kampagnen kontinuierlich zu verbessern.</p>
+      
+      <p>Mit QR Master haben Sie alle Tools, die Sie für erfolgreiches QR-Code-Marketing benötigen. Starten Sie noch heute mit Ihrer ersten Kampagne!</p>
+    `,
+  },
+};
+
+export default function BlogPostPage() {
+  const params = useParams();
+  const slug = params?.slug as string;
+  const post = blogContent[slug as keyof typeof blogContent];
+
+  if (!post) {
+    return (
+      <div className="py-20">
+        <div className="container mx-auto px-4 text-center">
+          <h1 className="text-4xl font-bold text-gray-900 mb-4">Post not found</h1>
+          <p className="text-xl text-gray-600 mb-8">The blog post you're looking for doesn't exist.</p>
+          <Link href="/blog">
+            <Button>Back to Blog</Button>
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="py-20">
+      <div className="container mx-auto px-4">
+        <div className="max-w-4xl mx-auto">
+          <Link href="/blog" className="inline-flex items-center text-primary-600 hover:text-primary-700 mb-8">
+            <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+            </svg>
+            Back to Blog
+          </Link>
+
+          <article>
+            <header className="mb-8">
+              <div className="flex items-center space-x-4 mb-4">
+                <Badge variant="info">{post.category}</Badge>
+                <span className="text-gray-500">{post.readTime}</span>
+                <span className="text-gray-500">{post.date}</span>
+              </div>
+              <h1 className="text-4xl lg:text-5xl font-bold text-gray-900 mb-4">
+                {post.title}
+              </h1>
+            </header>
+
+            <div 
+              className="prose prose-lg max-w-none"
+              dangerouslySetInnerHTML={{ __html: post.content }}
+            />
+
+            <div className="mt-12 p-8 bg-primary-50 rounded-xl text-center">
+              <h2 className="text-2xl font-bold text-gray-900 mb-4">
+                Ready to create your QR codes?
+              </h2>
+              <p className="text-gray-600 mb-6">
+                Start creating professional QR codes with advanced tracking and analytics.
+              </p>
+              <Link href="/dashboard">
+                <Button size="lg">Get Started Free</Button>
+              </Link>
+            </div>
+          </article>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,76 @@
+'use client';
+
+import React from 'react';
+import Link from 'next/link';
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card';
+import { Badge } from '@/components/ui/Badge';
+
+const blogPosts = [
+  {
+    slug: 'qr-codes-im-restaurant',
+    title: 'QR-Codes im Restaurant: Die digitale Revolution der Speisekarte',
+    excerpt: 'Erfahren Sie, wie QR-Codes die Gastronomie revolutionieren und welche Vorteile sie für Restaurants und Gäste bieten.',
+    date: '2024-01-15',
+    readTime: '5 Min',
+    category: 'Gastronomie',
+    image: '🍽️',
+  },
+  {
+    slug: 'dynamische-vs-statische-qr-codes',
+    title: 'Dynamische vs. Statische QR-Codes: Was ist der Unterschied?',
+    excerpt: 'Ein umfassender Vergleich zwischen dynamischen und statischen QR-Codes und wann Sie welchen Typ verwenden sollten.',
+    date: '2024-01-10',
+    readTime: '3 Min',
+    category: 'Grundlagen',
+    image: '📊',
+  },
+  {
+    slug: 'qr-code-marketing-strategien',
+    title: 'QR-Code Marketing-Strategien für 2024',
+    excerpt: 'Die besten Marketing-Strategien mit QR-Codes für Ihr Unternehmen im Jahr 2024.',
+    date: '2024-01-05',
+    readTime: '7 Min',
+    category: 'Marketing',
+    image: '📈',
+  },
+];
+
+export default function BlogPage() {
+  return (
+    <div className="py-20">
+      <div className="container mx-auto px-4">
+        <div className="text-center mb-12">
+          <h1 className="text-4xl lg:text-5xl font-bold text-gray-900 mb-4">
+            Blog & Resources
+          </h1>
+          <p className="text-xl text-gray-600">
+            Learn about QR codes, best practices, and industry insights
+          </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">
+                <CardHeader>
+                  <div className="text-4xl mb-4 text-center bg-gray-100 rounded-lg py-8">
+                    {post.image}
+                  </div>
+                  <div className="flex items-center justify-between mb-2">
+                    <Badge variant="info">{post.category}</Badge>
+                    <span className="text-sm text-gray-500">{post.readTime}</span>
+                  </div>
+                  <CardTitle className="text-xl">{post.title}</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <p className="text-gray-600 mb-4">{post.excerpt}</p>
+                  <p className="text-sm text-gray-500">{post.date}</p>
+                </CardContent>
+              </Card>
+            </Link>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,15 @@
+'use client';
+
+import React from 'react';
+import { FAQ } from '@/components/marketing/FAQ';
+import { useTranslation } from '@/hooks/useTranslation';
+
+export default function FAQPage() {
+  const { t } = useTranslation();
+
+  return (
+    <div className="py-20">
+      <FAQ t={t} />
+    </div>
+  );
+}

src/app/(marketing)/layout.tsx

@@ -0,0 +1,165 @@
+'use client';
+
+import React, { useState } from 'react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { Button } from '@/components/ui/Button';
+import { useTranslation } from '@/hooks/useTranslation';
+
+export default function MarketingLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const pathname = usePathname();
+  const { t, locale, setLocale } = useTranslation();
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+  const navigation = [
+    { name: t('nav.features'), href: '/#features' },
+    { name: t('nav.pricing'), href: '/pricing' },
+    { name: t('nav.faq'), href: '/faq' },
+    { name: t('nav.blog'), href: '/blog' },
+  ];
+
+  return (
+    <div className="min-h-screen bg-white">
+      {/* Header */}
+      <header className="sticky top-0 z-50 bg-white border-b border-gray-200">
+        <nav className="container mx-auto px-4 py-4">
+          <div className="flex items-center justify-between">
+            {/* Logo */}
+            <Link href="/" className="flex items-center space-x-2">
+              <img src="/logo.svg" alt="QR Master" className="w-8 h-8" />
+              <span className="text-xl font-bold text-gray-900">QR Master</span>
+            </Link>
+
+            {/* Desktop Navigation */}
+            <div className="hidden md:flex items-center space-x-8">
+              {navigation.map((item) => (
+                <Link
+                  key={item.name}
+                  href={item.href}
+                  className="text-gray-600 hover:text-gray-900 font-medium transition-colors"
+                >
+                  {item.name}
+                </Link>
+              ))}
+            </div>
+
+            {/* Right Actions */}
+            <div className="hidden md:flex items-center space-x-4">
+              {/* Language Switcher */}
+              <button
+                onClick={() => setLocale(locale === 'en' ? 'de' : 'en')}
+                className="text-gray-600 hover:text-gray-900 font-medium"
+              >
+                {locale === 'en' ? '🇩🇪 DE' : '🇬🇧 EN'}
+              </button>
+              
+              <Link href="/login">
+                <Button variant="outline">{t('nav.login')}</Button>
+              </Link>
+              
+              <Link href="/dashboard">
+                <Button>{t('nav.dashboard')}</Button>
+              </Link>
+            </div>
+
+            {/* Mobile Menu Button */}
+            <button
+              className="md:hidden"
+              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+            >
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                {mobileMenuOpen ? (
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                ) : (
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+                )}
+              </svg>
+            </button>
+          </div>
+
+          {/* Mobile Menu */}
+          {mobileMenuOpen && (
+            <div className="md:hidden mt-4 pb-4 border-t border-gray-200 pt-4">
+              <div className="flex flex-col space-y-4">
+                {navigation.map((item) => (
+                  <Link
+                    key={item.name}
+                    href={item.href}
+                    className="text-gray-600 hover:text-gray-900 font-medium"
+                    onClick={() => setMobileMenuOpen(false)}
+                  >
+                    {item.name}
+                  </Link>
+                ))}
+                <Link href="/login" onClick={() => setMobileMenuOpen(false)}>
+                  <Button variant="outline" className="w-full">{t('nav.login')}</Button>
+                </Link>
+                <Link href="/dashboard" onClick={() => setMobileMenuOpen(false)}>
+                  <Button className="w-full">{t('nav.dashboard')}</Button>
+                </Link>
+              </div>
+            </div>
+          )}
+        </nav>
+      </header>
+
+      {/* Main Content */}
+      <main>{children}</main>
+
+      {/* Footer */}
+      <footer className="bg-gray-900 text-white py-12 mt-20">
+        <div className="container mx-auto px-4">
+          <div className="grid md:grid-cols-4 gap-8">
+            <div>
+              <div className="flex items-center space-x-2 mb-4">
+                <img src="/logo.svg" alt="QR Master" className="w-8 h-8 brightness-0 invert" />
+                <span className="text-xl font-bold">QR Master</span>
+              </div>
+              <p className="text-gray-400">
+                Create custom QR codes in seconds with advanced tracking and analytics.
+              </p>
+            </div>
+            
+            <div>
+              <h3 className="font-semibold mb-4">Product</h3>
+              <ul className="space-y-2 text-gray-400">
+                <li><Link href="/#features" className="hover:text-white">Features</Link></li>
+                <li><Link href="/pricing" className="hover:text-white">Pricing</Link></li>
+                <li><Link href="/faq" className="hover:text-white">FAQ</Link></li>
+                <li><Link href="/blog" className="hover:text-white">Blog</Link></li>
+              </ul>
+            </div>
+            
+            <div>
+              <h3 className="font-semibold mb-4">Company</h3>
+              <ul className="space-y-2 text-gray-400">
+                <li><a href="#" className="hover:text-white">About</a></li>
+                <li><a href="#" className="hover:text-white">Careers</a></li>
+                <li><a href="#" className="hover:text-white">Contact</a></li>
+                <li><a href="#" className="hover:text-white">Partners</a></li>
+              </ul>
+            </div>
+            
+            <div>
+              <h3 className="font-semibold mb-4">Legal</h3>
+              <ul className="space-y-2 text-gray-400">
+                <li><a href="#" className="hover:text-white">Privacy Policy</a></li>
+                <li><a href="#" className="hover:text-white">Terms of Service</a></li>
+                <li><a href="#" className="hover:text-white">Cookie Policy</a></li>
+                <li><a href="#" className="hover:text-white">GDPR</a></li>
+              </ul>
+            </div>
+          </div>
+          
+          <div className="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
+            <p>&copy; 2024 QR Master. All rights reserved.</p>
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+}

src/app/(marketing)/page.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import React from 'react';
+import { Hero } from '@/components/marketing/Hero';
+import { StatsStrip } from '@/components/marketing/StatsStrip';
+import { TemplateCards } from '@/components/marketing/TemplateCards';
+import { InstantGenerator } from '@/components/marketing/InstantGenerator';
+import { StaticVsDynamic } from '@/components/marketing/StaticVsDynamic';
+import { Features } from '@/components/marketing/Features';
+import { Pricing } from '@/components/marketing/Pricing';
+import { FAQ } from '@/components/marketing/FAQ';
+import { Button } from '@/components/ui/Button';
+import { useTranslation } from '@/hooks/useTranslation';
+
+export default function HomePage() {
+  const { t } = useTranslation();
+
+  const industries = [
+    'Restaurant Chain',
+    'Tech Startup',
+    'Real Estate',
+    'Event Agency',
+    'Retail Store',
+    'Healthcare',
+  ];
+
+  return (
+    <>
+      <Hero t={t} />
+      <StatsStrip t={t} />
+      
+      {/* Industry Buttons */}
+      <section className="py-8">
+        <div className="container mx-auto px-4">
+          <div className="flex flex-wrap justify-center gap-3">
+            {industries.map((industry) => (
+              <Button key={industry} variant="outline" size="sm">
+                {industry}
+              </Button>
+            ))}
+          </div>
+        </div>
+      </section>
+      
+      <TemplateCards t={t} />
+      <InstantGenerator t={t} />
+      <StaticVsDynamic t={t} />
+      <Features t={t} />
+      
+      {/* Pricing Teaser */}
+      <section className="py-16 bg-primary-50">
+        <div className="container mx-auto px-4 text-center">
+          <h2 className="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">
+            Ready to get started?
+          </h2>
+          <p className="text-xl text-gray-600 mb-8">
+            Choose the perfect plan for your needs
+          </p>
+          <Button size="lg">View Pricing Plans</Button>
+        </div>
+      </section>
+      
+      {/* FAQ Teaser */}
+      <section className="py-16">
+        <div className="container mx-auto px-4 text-center">
+          <h2 className="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">
+            Have questions?
+          </h2>
+          <p className="text-xl text-gray-600 mb-8">
+            Check out our frequently asked questions
+          </p>
+          <Button variant="outline" size="lg">View FAQ</Button>
+        </div>
+      </section>
+    </>
+  );
+}

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

@@ -0,0 +1,15 @@
+'use client';
+
+import React from 'react';
+import { Pricing } from '@/components/marketing/Pricing';
+import { useTranslation } from '@/hooks/useTranslation';
+
+export default function PricingPage() {
+  const { t } = useTranslation();
+
+  return (
+    <div className="py-20">
+      <Pricing t={t} />
+    </div>
+  );
+}