205 lines
9.7 KiB
TypeScript
205 lines
9.7 KiB
TypeScript
import Link from 'next/link'
|
|
import type { Lang } from '@/lib/i18n'
|
|
import { getSeoPageBySlug } from '@/lib/seoPages'
|
|
import { spanishSeoPageProfiles } from '@/lib/spanishSeoPages'
|
|
import { seoTemplateCopy } from '@/lib/seoTemplateCopy'
|
|
import { siteConfig, hasIosStoreUrl, hasAndroidStoreUrl } from '@/lib/site'
|
|
|
|
interface SeoFooterProps {
|
|
locale: Lang
|
|
showMethodology?: boolean
|
|
}
|
|
|
|
function slugLinks(slugs: readonly string[]) {
|
|
return slugs
|
|
.map((slug) => getSeoPageBySlug(slug))
|
|
.filter((profile): profile is NonNullable<typeof profile> => Boolean(profile))
|
|
.map((profile) => ({ href: profile.canonical, label: profile.h1 }))
|
|
}
|
|
|
|
const primarySlugs: Record<Exclude<Lang, 'es'>, readonly string[]> = {
|
|
de: [
|
|
'pflanzen-erkennen-app',
|
|
'pflanzen-bestimmen',
|
|
'pflanzen-krankheiten-erkennen',
|
|
'pflanzen-pflege-app',
|
|
'giess-erinnerung-app',
|
|
'pflanzen-erkennen-kostenlos',
|
|
],
|
|
en: [
|
|
'plant-identifier-app',
|
|
'identify-plant-photo',
|
|
'plant-disease-identifier',
|
|
'plant-care-app',
|
|
'plant-health-app',
|
|
'best-plant-identification-app',
|
|
],
|
|
}
|
|
|
|
const languageHubs = [
|
|
{ href: '/', label: 'Deutsch' },
|
|
{ href: '/en', label: 'English' },
|
|
{ href: '/es', label: 'Español' },
|
|
]
|
|
|
|
const languageTitles: Record<Lang, string> = {
|
|
de: 'Sprachen',
|
|
en: 'Languages',
|
|
es: 'Idiomas',
|
|
}
|
|
|
|
export default function SeoFooter({ locale, showMethodology = true }: SeoFooterProps) {
|
|
const copy = seoTemplateCopy[locale].footer
|
|
const primaryLinks = locale === 'es'
|
|
? Object.values(spanishSeoPageProfiles).map((profile) => ({
|
|
href: profile.canonical,
|
|
label: profile.h1,
|
|
}))
|
|
: slugLinks(primarySlugs[locale])
|
|
const primaryTitle = locale === 'de'
|
|
? copy.germanTitle
|
|
: locale === 'es'
|
|
? copy.spanishTitle
|
|
: copy.useCasesTitle
|
|
|
|
return (
|
|
<footer className="bg-ink-deep text-white pt-28 pb-10 font-body overflow-hidden" id="download">
|
|
<div className="max-w-[1280px] mx-auto px-6">
|
|
{/* CTA + Bild */}
|
|
<div className="flex flex-col lg:flex-row gap-12 mb-24 items-center">
|
|
<div className="flex-1">
|
|
<div className="text-primary-fixed font-bold tracking-widest text-xs mb-4 uppercase">{copy.downloadTag}</div>
|
|
<h2 className="text-5xl md:text-6xl font-bold font-display leading-tight mb-6">
|
|
{copy.ctaLine1}
|
|
<br />
|
|
{copy.ctaLine2}
|
|
<br />
|
|
<span className="italic text-primary-fixed">{copy.ctaEm}</span>
|
|
</h2>
|
|
<p className="text-white/80 max-w-md mb-10 text-sm leading-relaxed">{copy.ctaBody}</p>
|
|
<div className="flex flex-col sm:flex-row gap-4 mb-6">
|
|
{hasIosStoreUrl && (
|
|
<a
|
|
href={siteConfig.iosAppStoreUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="hover:opacity-80 transition-opacity"
|
|
>
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img src="/app-store.png" alt="Download on the App Store" className="h-12 w-auto" />
|
|
</a>
|
|
)}
|
|
{hasAndroidStoreUrl && (
|
|
<a
|
|
href={siteConfig.androidPlayStoreUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="hover:opacity-80 transition-opacity"
|
|
>
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img src="/play-store.png" alt="Get it on Google Play" className="h-12 w-auto" />
|
|
</a>
|
|
)}
|
|
</div>
|
|
<p className="text-sm text-white/60">
|
|
{copy.storeNote}{' '}
|
|
<Link href="/support" className="underline hover:text-white">
|
|
{copy.supportLabel}
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
<div className="flex-1 w-full relative h-[300px] lg:h-[400px] rounded-3xl overflow-hidden shadow-2xl">
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img src="/hero.jpg" alt="GreenLens" className="w-full h-full object-cover" />
|
|
<div className="absolute inset-0 bg-gradient-to-r from-ink-deep via-transparent to-transparent"></div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Marken- und Legal-Spalten */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-14 mb-20 border-t border-white/10 pt-14">
|
|
<div>
|
|
<h3 className="font-display font-bold text-2xl tracking-widest mb-5">GREENLENS</h3>
|
|
<p className="text-sm text-white/70 leading-relaxed max-w-xs">{copy.brandBody}</p>
|
|
</div>
|
|
<div>
|
|
<h4 className="text-xs font-bold tracking-widest text-primary-fixed mb-6 uppercase">{copy.productTitle}</h4>
|
|
<ul className="space-y-4 text-sm text-white/80">
|
|
<li><a href="#advantage" className="hover:text-white">{seoTemplateCopy[locale].nav.features}</a></li>
|
|
{showMethodology && <li><a href="#methodology" className="hover:text-white">{seoTemplateCopy[locale].nav.tech}</a></li>}
|
|
<li><a href="#download" className="hover:text-white">{seoTemplateCopy[locale].nav.download}</a></li>
|
|
<li><Link href="/support" className="hover:text-white">{copy.supportLabel}</Link></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 className="text-xs font-bold tracking-widest text-primary-fixed mb-6 uppercase">{copy.companyTitle}</h4>
|
|
<ul className="space-y-4 text-sm text-white/80">
|
|
{showMethodology && <li><a href="#methodology" className="hover:text-white">{seoTemplateCopy[locale].nav.how}</a></li>}
|
|
<li><a href="#faq" className="hover:text-white">FAQ</a></li>
|
|
<li><Link href="/support" className="hover:text-white">{copy.supportLabel}</Link></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 className="text-xs font-bold tracking-widest text-primary-fixed mb-6 uppercase">{copy.legalTitle}</h4>
|
|
<ul className="space-y-4 text-sm text-white/80">
|
|
<li><Link href="/imprint" className="hover:text-white">{copy.imprint}</Link></li>
|
|
<li><Link href="/privacy" className="hover:text-white">{copy.privacy}</Link></li>
|
|
<li><Link href="/terms" className="hover:text-white">{copy.terms}</Link></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
{/* SEO-Link-Spalten (interne Verlinkung) */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-14 mb-28">
|
|
<div>
|
|
<h4 className="text-xs font-bold tracking-widest text-primary-fixed mb-6 uppercase">{primaryTitle}</h4>
|
|
<ul className="space-y-3 text-sm leading-6 text-white/70">
|
|
{primaryLinks.map((link) => (
|
|
<li key={link.href}>
|
|
<Link href={link.href} className="hover:text-white">{link.label}</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 className="text-xs font-bold tracking-widest text-primary-fixed mb-6 uppercase">{languageTitles[locale]}</h4>
|
|
<ul className="space-y-3 text-sm leading-6 text-white/70">
|
|
{languageHubs.map((link) => (
|
|
<li key={link.href}>
|
|
<Link href={link.href} className="hover:text-white">{link.label}</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 className="text-xs font-bold tracking-widest text-primary-fixed mb-6 uppercase">Developer & Open Source</h4>
|
|
<ul className="space-y-3 text-sm leading-6 text-white/70">
|
|
<li><Link href="/developers" className="text-[#00c853] font-bold hover:underline">Developer Suite Hub</Link></li>
|
|
<li><a href="https://marketplace.visualstudio.com/items?itemName=TimoKnuth.greenlens-vscode" target="_blank" rel="noopener noreferrer" className="hover:text-white">VS Code Extension</a></li>
|
|
<li><a href="https://pypi.org/project/greenlens-python/" target="_blank" rel="noopener noreferrer" className="hover:text-white">Python SDK & CLI (PyPI)</a></li>
|
|
<li><a href="https://www.npmjs.com/package/greenlenspro-cli" target="_blank" rel="noopener noreferrer" className="hover:text-white">Node.js CLI (NPM)</a></li>
|
|
<li><a href={siteConfig.chromeWebStoreUrl} target="_blank" rel="noopener noreferrer" className="hover:text-white">Chrome Extension</a></li>
|
|
<li><a href={siteConfig.firefoxAddonUrl} target="_blank" rel="noopener noreferrer" className="hover:text-white">Firefox Add-on</a></li>
|
|
<li><a href="https://github.com/knuthtimo-lab/greenlenspro-cli#github-action" target="_blank" rel="noopener noreferrer" className="hover:text-white">GitHub Action</a></li>
|
|
<li><a href="https://github.com/knuthtimo-lab/greenlenspro-cli" target="_blank" rel="noopener noreferrer" className="hover:text-white">GitHub Repository</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Riesiger Schriftzug */}
|
|
<div className="w-full overflow-hidden flex justify-center mb-12 border-t border-white/10 pt-16">
|
|
<div className="text-[10vw] leading-none font-display font-bold text-white/[0.03] tracking-tighter select-none whitespace-nowrap" aria-hidden="true">
|
|
GREENLENS
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col md:flex-row justify-between items-center text-xs text-white/50 border-t border-white/10 pt-8">
|
|
<p>{copy.copy}</p>
|
|
<div className="mt-4 md:mt-0 opacity-50">
|
|
<span className="font-bold tracking-widest">GREENLENS</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
)
|
|
}
|