tknuth/Greenlens
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

SEO

Browse Source
This commit is contained in:
knuthtimo-lab
2026-07-10 13:27:29 +02:00
parent 5c48def4e1
commit 53bac4e2b4
35 changed files with 466 additions and 320 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
greenlns-landing/components/seo/SeoSections.tsx
View File

@@ -8,7 +8,11 @@ interface SectionProps {
copy: SeoTemplateCopy
}
export function SeoHero({ profile, copy }: SectionProps) {
export function SeoHero({
profile,
copy,
secondaryHref = '#methodology',
}: SectionProps & { secondaryHref?: string }) {
return (
<section className="max-w-[1200px] mx-auto px-6 py-16 grid grid-cols-1 lg:grid-cols-12 gap-12 items-start mt-8">
<div className="lg:col-span-6 z-10 flex flex-col justify-center pt-8">
@@ -29,7 +33,7 @@ export function SeoHero({ profile, copy }: SectionProps) {
</a>
<a
className="inline-flex justify-center items-center px-8 py-3 bg-transparent border-2 border-ink text-ink rounded-full font-bold hover:bg-ink hover:text-white transition-colors duration-300"
href="#methodology"
href={secondaryHref}
>
{copy.hero.ctaSecondary}
</a>
@@ -62,20 +66,30 @@ export function SeoHero({ profile, copy }: SectionProps) {
)
}
export function SeoAdvantage({ profile, copy }: SectionProps) {
export function SeoAdvantage({
profile,
copy,
showInsights = false,
}: SectionProps & { showInsights?: boolean }) {
const reviewedAt = {
de: 'Juli 2026',
en: 'July 2026',
es: 'Julio 2026',
}[profile.locale ?? 'en']
return (
<section className="max-w-[1200px] mx-auto px-6 py-16 grid grid-cols-1 lg:grid-cols-3 gap-12 border-t border-surface-container-high" id="advantage">
<div className="lg:col-span-2">
<section className={`max-w-[1200px] mx-auto px-6 py-16 grid grid-cols-1 ${showInsights ? 'lg:grid-cols-3' : ''} gap-12 border-t border-surface-container-high`} id="advantage">
<div className={showInsights ? 'lg:col-span-2' : ''}>
<div className="mb-8">
<span className="text-xs font-semibold tracking-[0.1em] uppercase text-primary">{copy.advantage.eyebrow}</span>
</div>
<h2 className="font-display font-semibold text-[32px] leading-[1.3] text-primary mb-6">{copy.advantage.heading}</h2>
<p className="font-body text-lg text-on-surface-variant mb-6">{profile.definitionBlock}</p>
<div className="text-xs font-semibold tracking-[0.1em] uppercase text-on-surface-variant">
{copy.advantage.updated}: {profile.lastUpdated}
{copy.advantage.updated}: {reviewedAt}
</div>
</div>
<div className="bg-surface-container rounded-xl p-8 seo-card">
{showInsights && <div className="bg-surface-container rounded-xl p-8 seo-card">
<div className="flex items-center gap-3 mb-6">
<SeoIcon name="psychology" className="w-8 h-8 text-primary" />
<h3 className="font-display font-semibold text-2xl text-primary">{copy.didYouKnow.title}</h3>
@@ -88,22 +102,30 @@ export function SeoAdvantage({ profile, copy }: SectionProps) {
</li>
))}
</ul>
</div>
</div>}
</section>
)
}
export function SeoMethodology({ copy }: { copy: SeoTemplateCopy }) {
export function SeoMethodology({
copy,
intent = 'identification',
}: {
copy: SeoTemplateCopy
intent?: 'identification' | 'diagnosis'
}) {
const methodology = intent === 'diagnosis' ? copy.diagnosisMethodology : copy.methodology
return (
<section className="bg-surface-container-low py-16 md:py-[120px]" id="methodology">
<div className="max-w-[1200px] mx-auto px-6">
<div className="text-center mb-16">
<span className="text-xs font-semibold tracking-[0.1em] uppercase text-primary block mb-4">{copy.methodology.eyebrow}</span>
<h2 className="font-display font-semibold text-[32px] md:text-[40px] leading-[1.2] text-primary">{copy.methodology.title}</h2>
<p className="font-body text-on-surface-variant max-w-2xl mx-auto mt-4">{copy.methodology.lead}</p>
<span className="text-xs font-semibold tracking-[0.1em] uppercase text-primary block mb-4">{methodology.eyebrow}</span>
<h2 className="font-display font-semibold text-[32px] md:text-[40px] leading-[1.2] text-primary">{methodology.title}</h2>
<p className="font-body text-on-surface-variant max-w-2xl mx-auto mt-4">{methodology.lead}</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
{copy.methodology.steps.map((step, index) => (
{methodology.steps.map((step, index) => (
<div key={step.title} className="bg-surface p-8 rounded-xl shadow-sm border border-surface-container-high seo-card">
<div className="w-12 h-12 bg-primary-container text-on-primary-container rounded-full flex items-center justify-center font-display font-semibold text-xl mb-6">
{index + 1}
@@ -120,7 +142,11 @@ export function SeoMethodology({ copy }: { copy: SeoTemplateCopy }) {
const comparisonIcons: SeoIconName[] = ['check_circle', 'calendar', 'healing', 'sun']
export function SeoComparison({ profile, copy }: SectionProps) {
export function SeoComparison({
profile,
copy,
intent = 'identification',
}: SectionProps & { intent?: 'identification' | 'diagnosis' | 'care' | 'watering' }) {
const tipLink = profile.relatedLinks[0]
return (
@@ -130,7 +156,7 @@ export function SeoComparison({ profile, copy }: SectionProps) {
<div className="lg:sticky lg:top-32">
<span className="text-xs font-semibold tracking-[0.1em] uppercase text-primary block mb-4">{copy.comparison.eyebrow}</span>
<h2 className="font-display font-semibold text-[32px] leading-[1.3] text-primary mb-6">{profile.featureTable.title}</h2>
<p className="font-body text-on-surface-variant mb-8">{copy.comparison.lead}</p>
<p className="font-body text-on-surface-variant mb-8">{copy.comparison.intentLead[intent]}</p>
{tipLink && (
<div className="bg-primary-container/20 p-6 rounded-lg border border-primary-container/30">
<h4 className="font-display font-semibold text-base text-primary mb-2">{copy.comparison.tipTitle}</h4>