151 lines
10 KiB
TypeScript
151 lines
10 KiB
TypeScript
import Link from 'next/link';
|
|
import en from '@/i18n/en.json';
|
|
import { Instagram, Twitter, Linkedin, Facebook } from 'lucide-react';
|
|
import { allUseCases } from '@/lib/growth-pages';
|
|
import { industryPages } from '@/lib/industry-pages';
|
|
|
|
interface FooterProps {
|
|
variant?: 'marketing' | 'dashboard';
|
|
t?: typeof en; // Optional translation object
|
|
}
|
|
|
|
export function Footer({ variant = 'marketing', t }: FooterProps) {
|
|
const isDashboard = variant === 'dashboard';
|
|
// Fallback to English if no translation is provided or if keys are missing
|
|
const translations = t?.footer || en.footer;
|
|
|
|
return (
|
|
<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 grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8">
|
|
<div>
|
|
<Link href="/" className="flex items-center space-x-2 mb-4 hover:opacity-80 transition-opacity">
|
|
<img src="/favicon1.png" alt="QR Master Logo" className="w-[68px] h-[68px] rounded-full object-cover" />
|
|
<span className={`text-xl font-bold ${isDashboard ? 'text-gray-900' : ''}`}>QR Master</span>
|
|
</Link>
|
|
<p className={isDashboard ? 'text-gray-500' : 'text-gray-400'}>
|
|
{translations.tagline}
|
|
</p>
|
|
{!isDashboard && (
|
|
<div className="flex space-x-4 mt-6">
|
|
<a href="https://www.linkedin.com/in/qr-master-44b6863a2/" target="_blank" rel="noopener noreferrer" className="text-gray-400 hover:text-white transition-colors">
|
|
<Linkedin className="w-5 h-5" />
|
|
</a>
|
|
<a href="https://x.com/TIMO_QRMASTER" target="_blank" rel="noopener noreferrer" className="text-gray-400 hover:text-white transition-colors">
|
|
<Twitter className="w-5 h-5" />
|
|
</a>
|
|
<a href="https://www.instagram.com/qrmaster_net/" target="_blank" rel="noopener noreferrer" className="text-gray-400 hover:text-white transition-colors">
|
|
<Instagram className="w-5 h-5" />
|
|
</a>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<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="/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>
|
|
<li><Link href="/authors/timo" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>Timo Knuth (Author)</Link></li>
|
|
<li><Link href="/#pricing" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>{translations.pricing}</Link></li>
|
|
<li><Link href="/qr-code-analytics" 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>
|
|
<li><Link href="/blog" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>{translations.blog}</Link></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 className={`font-semibold mb-4 ${isDashboard ? 'text-gray-900' : ''}`}>{translations.resources}</h3>
|
|
<ul className={`space-y-2 ${isDashboard ? 'text-gray-500' : 'text-gray-400'}`}>
|
|
<li><Link href="/learn" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>{translations.learn}</Link></li>
|
|
<li><Link href="/#pricing" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>{translations.full_pricing}</Link></li>
|
|
<li><Link href="/faq" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>{translations.all_questions}</Link></li>
|
|
<li><Link href="/blog" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>{translations.all_articles}</Link></li>
|
|
<li><Link href="/tools/barcode-generator" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>Barcode Generator</Link></li>
|
|
<li><Link href="/dynamic-qr-code-generator" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>Dynamic QR Code Generator</Link></li>
|
|
<li><Link href="/bulk-qr-code-generator" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>Bulk QR Generator</Link></li>
|
|
<li><Link href="/dynamic-barcode-generator" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>Dynamic Barcode Generator</Link></li>
|
|
|
|
<li>
|
|
<Link href="/qr-code-for" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>
|
|
{translations.industries}
|
|
</Link>
|
|
</li>
|
|
{industryPages.slice(0, 6).map((ind) => (
|
|
<li key={ind.slug} className="pl-3">
|
|
<Link href={`/qr-code-for/${ind.slug}`} className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white text-sm'}>
|
|
{ind.title}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
|
|
<li className="pt-3"><Link href="/reprint-calculator" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>Reprint Cost Calculator</Link></li>
|
|
<li><Link href="/manage-qr-codes" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>Manage QR Codes</Link></li>
|
|
<li><Link href="/custom-qr-code-generator" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>Custom QR</Link></li>
|
|
<li><Link href="/qr-code-for-marketing-campaigns" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>Campaign QR Codes</Link></li>
|
|
<li><Link href="/guide/tracking-analytics" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>Tracking Guide</Link></li>
|
|
<li><Link href="/guide/qr-code-best-practices" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>Best Practices</Link></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 className={`font-semibold mb-4 ${isDashboard ? 'text-gray-900' : ''}`}>Use Cases</h3>
|
|
<ul className={`space-y-2 ${isDashboard ? 'text-gray-500' : 'text-gray-400'}`}>
|
|
{allUseCases.map((uc) => (
|
|
<li key={uc.slug}>
|
|
<Link href={uc.href} className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>
|
|
{uc.title}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 className={`font-semibold mb-4 ${isDashboard ? 'text-gray-900' : ''}`}>Compare</h3>
|
|
<ul className={`space-y-2 ${isDashboard ? 'text-gray-500' : 'text-gray-400'}`}>
|
|
<li><Link href="/alternatives" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>All Alternatives</Link></li>
|
|
<li><Link href="/vs" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>All Comparisons</Link></li>
|
|
<li><Link href="/alternatives/qr-code-generator" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>QR-Code-Generator Alt.</Link></li>
|
|
<li><Link href="/alternatives/flowcode" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>Flowcode Alternative</Link></li>
|
|
<li><Link href="/alternatives/beaconstac" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>Beaconstac Alternative</Link></li>
|
|
<li><Link href="/alternatives/bitly" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>Bitly Alternative</Link></li>
|
|
<li><Link href="/vs/beaconstac" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>QR Master vs Uniqode</Link></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 className={`font-semibold mb-4 ${isDashboard ? 'text-gray-900' : ''}`}>{translations.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'}>{translations.privacy_policy}</Link></li>
|
|
<li><Link href="/contact" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>Contact</Link></li>
|
|
<li><Link href="/qr-code-erstellen" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>QR Code Erstellen (DE)</Link></li>
|
|
<li><Link href="/barcode-generator" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>Barcode Generator (DE)</Link></li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<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"
|
|
>
|
|
<span className="sr-only">{translations.newsletter}</span>
|
|
•
|
|
</Link>
|
|
) : (
|
|
<div></div>
|
|
)}
|
|
<p>© 2026 {translations.rights_reserved}</p>
|
|
<div className="w-12"></div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|
|
|