TTikotok V4
This commit is contained in:
171
greenlns-landing/components/seo/SeoFooter.tsx
Normal file
171
greenlns-landing/components/seo/SeoFooter.tsx
Normal file
@@ -0,0 +1,171 @@
|
||||
import Link from 'next/link'
|
||||
import type { Lang } from '@/lib/i18n'
|
||||
import { englishSeoPageSlugs, germanSeoPageSlugs, 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
|
||||
}
|
||||
|
||||
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 }))
|
||||
}
|
||||
|
||||
export default function SeoFooter({ locale }: SeoFooterProps) {
|
||||
const copy = seoTemplateCopy[locale].footer
|
||||
|
||||
const useCaseLinks = [
|
||||
...slugLinks(englishSeoPageSlugs),
|
||||
{ href: '/vs/picturethis', label: 'vs PictureThis' },
|
||||
{ href: '/vs/plantum', label: 'vs Plantum' },
|
||||
{ href: '/vs/inaturalist', label: 'vs iNaturalist' },
|
||||
{ href: '/vs/google-lens', label: 'vs Google Lens' },
|
||||
]
|
||||
const germanLinks = slugLinks(germanSeoPageSlugs)
|
||||
const spanishLinks = Object.values(spanishSeoPageProfiles).map((profile) => ({
|
||||
href: profile.canonical,
|
||||
label: profile.h1,
|
||||
}))
|
||||
|
||||
return (
|
||||
<footer className="bg-ink-deep text-white pt-24 pb-8 font-body overflow-hidden" id="download">
|
||||
<div className="max-w-[1200px] 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-xs 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-12 mb-16 border-t border-white/10 pt-12">
|
||||
<div>
|
||||
<h3 className="font-display font-bold text-xl tracking-widest mb-4">GREENLENS</h3>
|
||||
<p className="text-xs text-white/70 leading-relaxed max-w-xs">{copy.brandBody}</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-[10px] font-bold tracking-widest text-primary-fixed mb-6 uppercase">{copy.productTitle}</h4>
|
||||
<ul className="space-y-4 text-xs text-white/80">
|
||||
<li><a href="#advantage" className="hover:text-white">{seoTemplateCopy[locale].nav.features}</a></li>
|
||||
<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-[10px] font-bold tracking-widest text-primary-fixed mb-6 uppercase">{copy.companyTitle}</h4>
|
||||
<ul className="space-y-4 text-xs text-white/80">
|
||||
<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-[10px] font-bold tracking-widest text-primary-fixed mb-6 uppercase">{copy.legalTitle}</h4>
|
||||
<ul className="space-y-4 text-xs 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-12 mb-24">
|
||||
<div>
|
||||
<h4 className="text-[10px] font-bold tracking-widest text-primary-fixed mb-6 uppercase">{copy.useCasesTitle}</h4>
|
||||
<ul className="space-y-3 text-xs text-white/70">
|
||||
{useCaseLinks.map((link) => (
|
||||
<li key={link.href}>
|
||||
<Link href={link.href} className="hover:text-white">{link.label}</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-[10px] font-bold tracking-widest text-primary-fixed mb-6 uppercase">{copy.germanTitle}</h4>
|
||||
<ul className="space-y-3 text-xs text-white/70">
|
||||
{germanLinks.map((link) => (
|
||||
<li key={link.href}>
|
||||
<Link href={link.href} className="hover:text-white">{link.label}</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-[10px] font-bold tracking-widest text-primary-fixed mb-6 uppercase">{copy.spanishTitle}</h4>
|
||||
<ul className="space-y-3 text-xs text-white/70">
|
||||
{spanishLinks.map((link) => (
|
||||
<li key={link.href}>
|
||||
<Link href={link.href} className="hover:text-white">{link.label}</Link>
|
||||
</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-[10px] 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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user