From b217e50d9f057b764de925bbc08ed00da9234c32 Mon Sep 17 00:00:00 2001
From: Timo <timo@example.com>
Date: Wed, 7 Jan 2026 14:33:06 +0100
Subject: [PATCH] feat: Add core application and marketing layouts, including
 navigation, user management, and a shared footer component.

---
 src/app/(app)/layout.tsx       | 16 ++++-----
 src/app/(marketing)/layout.tsx |  7 ++--
 src/components/ui/Footer.tsx   | 65 +++++++++++++++++++---------------
 3 files changed, 45 insertions(+), 43 deletions(-)

diff --git a/src/app/(app)/layout.tsx b/src/app/(app)/layout.tsx
index bbf4363..b1e5ffd 100644
--- a/src/app/(app)/layout.tsx
+++ b/src/app/(app)/layout.tsx
@@ -161,9 +161,8 @@ export default function AppLayout({
 
       {/* Sidebar */}
       <aside
-        className={`fixed top-0 left-0 z-50 h-full w-64 bg-white border-r border-gray-200 transform transition-transform lg:translate-x-0 ${
-          sidebarOpen ? 'translate-x-0' : '-translate-x-full'
-        }`}
+        className={`fixed top-0 left-0 z-50 h-full w-64 bg-white border-r border-gray-200 transform transition-transform lg:translate-x-0 ${sidebarOpen ? 'translate-x-0' : '-translate-x-full'
+          }`}
       >
         <div className="flex items-center justify-between p-4 border-b border-gray-200">
           <Link href="/" className="flex items-center space-x-2">
@@ -187,11 +186,10 @@ export default function AppLayout({
               <Link
                 key={item.name}
                 href={item.href}
-                className={`flex items-center space-x-3 px-3 py-2 rounded-lg transition-colors ${
-                  isActive
-                    ? 'bg-primary-50 text-primary-600'
-                    : 'text-gray-700 hover:bg-gray-100'
-                }`}
+                className={`flex items-center space-x-3 px-3 py-2 rounded-lg transition-colors ${isActive
+                  ? 'bg-primary-50 text-primary-600'
+                  : 'text-gray-700 hover:bg-gray-100'
+                  }`}
               >
                 {item.icon}
                 <span className="font-medium">{item.name}</span>
@@ -249,7 +247,7 @@ export default function AppLayout({
         </main>
 
         {/* Footer */}
-        <Footer />
+        <Footer variant="dashboard" />
       </div>
     </div>
   );
diff --git a/src/app/(marketing)/layout.tsx b/src/app/(marketing)/layout.tsx
index cd54449..e7e2a80 100644
--- a/src/app/(marketing)/layout.tsx
+++ b/src/app/(marketing)/layout.tsx
@@ -150,12 +150,9 @@ export default function MarketingLayout({
           <div className="border-t border-gray-800 mt-8 pt-8 flex items-center justify-between text-gray-400">
             <Link
               href="/newsletter"
-              className="text-xs hover:text-white transition-colors flex items-center gap-1.5 opacity-50 hover:opacity-100"
+              className="text-[6px] text-gray-700 opacity-[0.25] hover:opacity-100 hover:text-white transition-opacity duration-300"
             >
-              <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
-              </svg>
-              Admin
+              •
             </Link>
             <p>&copy; 2025 QR Master. All rights reserved.</p>
             <div className="w-12"></div>
diff --git a/src/components/ui/Footer.tsx b/src/components/ui/Footer.tsx
index 5d85d7a..5e77b2b 100644
--- a/src/components/ui/Footer.tsx
+++ b/src/components/ui/Footer.tsx
@@ -1,59 +1,66 @@
 import Link from 'next/link';
 
-export function Footer() {
+interface FooterProps {
+  variant?: 'marketing' | 'dashboard';
+}
+
+export function Footer({ variant = 'marketing' }: FooterProps) {
+  const isDashboard = variant === 'dashboard';
+
   return (
-    <footer className="bg-gray-900 text-white py-12 mt-20">
+    <footer className={`${isDashboard ? 'bg-gray-50 text-gray-600 border-t border-gray-200 mt-12' : 'bg-gray-900 text-white mt-20'} py-12`}>
       <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
         <div className="grid md:grid-cols-4 gap-8">
           <div>
             <Link href="/" className="flex items-center space-x-2 mb-4 hover:opacity-80 transition-opacity">
               <img src="/logo.svg" alt="QR Master" className="w-10 h-10" />
-              <span className="text-xl font-bold">QR Master</span>
+              <span className={`text-xl font-bold ${isDashboard ? 'text-gray-900' : ''}`}>QR Master</span>
             </Link>
-            <p className="text-gray-400">
+            <p className={isDashboard ? 'text-gray-500' : '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>
+            <h3 className={`font-semibold mb-4 ${isDashboard ? 'text-gray-900' : ''}`}>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'}>Features</Link></li>
+              <li><Link href="/#pricing" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>Pricing</Link></li>
+              <li><Link href="/#faq" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>FAQ</Link></li>
+              <li><Link href="/blog" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>Blog</Link></li>
             </ul>
           </div>
 
           <div>
-            <h3 className="font-semibold mb-4">Resources</h3>
-            <ul className="space-y-2 text-gray-400">
-              <li><Link href="/pricing" className="hover:text-white">Full Pricing</Link></li>
-              <li><Link href="/faq" className="hover:text-white">All Questions</Link></li>
-              <li><Link href="/blog" className="hover:text-white">Blog</Link></li>
-              <li><Link href="/signup" className="hover:text-white">Get Started</Link></li>
+            <h3 className={`font-semibold mb-4 ${isDashboard ? 'text-gray-900' : ''}`}>Resources</h3>
+            <ul className={`space-y-2 ${isDashboard ? 'text-gray-500' : 'text-gray-400'}`}>
+              <li><Link href="/pricing" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>Full Pricing</Link></li>
+              <li><Link href="/faq" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>All Questions</Link></li>
+              <li><Link href="/blog" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>Blog</Link></li>
+              <li><Link href="/signup" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>Get Started</Link></li>
             </ul>
           </div>
 
           <div>
-            <h3 className="font-semibold mb-4">Legal</h3>
-            <ul className="space-y-2 text-gray-400">
-              <li><Link href="/privacy" className="hover:text-white">Privacy Policy</Link></li>
+            <h3 className={`font-semibold mb-4 ${isDashboard ? 'text-gray-900' : ''}`}>Legal</h3>
+            <ul className={`space-y-2 ${isDashboard ? 'text-gray-500' : 'text-gray-400'}`}>
+              <li><Link href="/privacy" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>Privacy Policy</Link></li>
             </ul>
           </div>
 
         </div>
 
-        <div className="border-t border-gray-800 mt-8 pt-8 flex items-center justify-between text-gray-400">
-          <Link
-            href="/newsletter"
-            className="text-xs hover:text-white transition-colors flex items-center gap-1.5 opacity-50 hover:opacity-100"
-          >
-            <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
-            </svg>
-            Admin
-          </Link>
+        <div className={`border-t mt-8 pt-8 flex items-center justify-between ${isDashboard ? 'border-gray-200 text-gray-500' : 'border-gray-800 text-gray-400'}`}>
+          {!isDashboard ? (
+            <Link
+              href="/newsletter"
+              className="text-[6px] text-gray-700 opacity-[0.03] hover:opacity-100 hover:text-white transition-opacity duration-300"
+            >
+              •
+            </Link>
+          ) : (
+            <div></div>
+          )}
           <p>&copy; 2025 QR Master. All rights reserved.</p>
           <div className="w-12"></div>
         </div>