File: //tmp/bewertemich-HomePage-hubs.jsx
import React, { useEffect, useMemo, useState } from 'react';
import { Link } from 'react-router-dom';
import { Hero } from './Hero.jsx';
import { HomePageMeta } from './HomePageMeta.jsx';
import { SeoLandingTeaser } from './SeoLandingTeaser.jsx';
import { SeoGrowthWidget } from './SeoGrowthWidget.jsx';
import { getPhotoUrl } from '../../utils/imageUrl.js';
import { buildUploadPath, trackEvent } from '../../utils/tracking.js';
import { featuredSeoLinks } from '../seo/catalog.js';
const routeCards = [
{
title: 'Dating',
text: 'Teste, welches Foto im Dating-Kontext sympathisch und offen wirkt.',
image: '/landing-media/community-dating.webp',
slug: 'dating-foto-ratgeber',
entry: 'dating',
accent: 'text-coral-600',
cta: 'Dating-Foto testen'
},
{
title: 'Business',
text: 'Finde ein Profilbild, das kompetent, nahbar und professionell ankommt.',
image: '/landing-media/community-business.webp',
slug: 'business-foto-ratgeber',
entry: 'business',
accent: 'text-emerald-700',
cta: 'Business-Foto testen'
},
{
title: 'Social',
text: 'Optimiere dein Foto für Social-Profile, Storys und öffentliche Auftritte.',
image: '/landing-media/community-social.webp',
slug: 'social-profilbild-ratgeber',
entry: 'social',
accent: 'text-amber-700',
cta: 'Social-Foto testen'
}
];
const toManifestEntries = (seoManifest) => {
const pages = Array.isArray(seoManifest?.landingPages) ? seoManifest.landingPages : [];
if (pages.length === 0) return featuredSeoLinks.slice(0, 4);
return pages
.map((entry) => {
const slug = String(entry?.slug || '').trim();
if (!slug) return null;
const featured = featuredSeoLinks.find((item) => item.slug === slug);
return {
slug,
title: String(entry.title || featured?.title || slug),
tags: Array.isArray(entry.tags) ? entry.tags : [],
faqCount: Number(entry.faqCount || 0)
};
})
.filter(Boolean)
.slice(0, 6);
};
const toEntryToken = (value) => String(value || '').replace(/-/g, '_');
const isProfileLikeItem = (item) => {
if (!item) return false;
if (String(item.title || '').trim()) return true;
const score = Number(item.avg_score || 0);
if (Number.isFinite(score) && score >= 5) return true;
const fileName = String(item.file_name || '').toLowerCase();
return fileName.includes('nano') || fileName.includes('portrait') || fileName.includes('profil');
};
const CommunityFeed = ({ items, loading }) => (
<section className="mt-10">
<div className="flex flex-wrap items-end justify-between gap-4">
<div>
<h2 className="text-2xl font-black text-slate-950">Gerade in der Community</h2>
<p className="mt-2 max-w-2xl text-slate-600">Neue Fotos, echte Stimmen und direkte Routen zum Mitbewerten.</p>
</div>
<Link to={buildUploadPath('home_feed')} className="btn border-0 bg-coral-500 text-white hover:bg-coral-600">Foto hochladen</Link>
</div>
<div className="mt-5 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
{loading && Array.from({ length: 4 }).map((_, index) => (
<div key={index} className="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
<div className="skeleton aspect-[4/5] w-full rounded-none" />
<div className="space-y-3 p-4">
<div className="skeleton h-4 w-2/3" />
<div className="skeleton h-2 w-full" />
</div>
</div>
))}
{!loading && (items || []).slice(0, 4).map((item, index) => {
const score = Number(item.avg_score || 0) > 0 ? Math.round(Number(item.avg_score) * 10) : 72 + index * 4;
const votes = Number(item.votes || 0);
return (
<Link
key={item.id}
to={`/rate/${item.id}`}
className="group overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm transition hover:-translate-y-0.5 hover:shadow-md"
onClick={() => trackEvent('home_feed_card_click', {
source: 'home',
surface: 'community_feed',
entryPoint: String(item.id)
})}
>
<div className="relative aspect-[4/5] overflow-hidden bg-slate-100">
<img src={getPhotoUrl(item)} alt={item.title || 'Profilfoto bewerten'} loading="lazy" decoding="async" className="h-full w-full object-cover transition duration-500 group-hover:scale-105" />
<span className="absolute bottom-3 left-3 rounded-md bg-coral-500 px-2.5 py-1 text-xs font-bold text-white shadow">{votes > 0 ? votes : 'Neu'} Stimmen</span>
</div>
<div className="space-y-3 p-4">
<div className="flex items-center justify-between gap-3">
<h3 className="truncate font-black text-slate-950">{item.title || 'Neuer Fototest'}</h3>
<span className="font-black text-emerald-600">{score}%</span>
</div>
<div className="h-2 rounded-full bg-slate-100">
<div className="h-full rounded-full bg-emerald-500" style={{ width: `${Math.max(38, Math.min(96, score))}%` }} />
</div>
<p className="text-sm text-slate-500">Jetzt bewerten und der Person beim Entscheiden helfen.</p>
</div>
</Link>
);
})}
{!loading && (!items || items.length === 0) ? (
<div className="rounded-xl border border-slate-200 bg-white p-6 text-slate-600 sm:col-span-2 lg:col-span-4">
Noch keine neuen Fotos im Feed. Starte den ersten Community-Test.
</div>
) : null}
</div>
</section>
);
const AudienceRoutes = () => (
<section className="mt-10 rounded-2xl border border-slate-200 bg-white p-4 shadow-sm sm:p-6">
<div className="text-center">
<h2 className="text-2xl font-black text-slate-950">Finde das richtige Foto für deinen Zweck</h2>
<p className="mx-auto mt-2 max-w-2xl text-slate-600">Jede Situation braucht andere Signale. Wähle deinen Kontext und starte direkt passend.</p>
</div>
<div className="mt-6 grid gap-4 lg:grid-cols-3">
{routeCards.map((card) => (
<article key={card.entry} className="overflow-hidden rounded-xl border border-slate-200 bg-white">
<img src={card.image} alt={`${card.title} Foto-Feedback`} loading="lazy" decoding="async" className="aspect-[4/3] w-full object-cover" />
<div className="p-4">
<h3 className={`text-xl font-black ${card.accent}`}>{card.title}</h3>
<p className="mt-2 min-h-12 text-sm leading-6 text-slate-600">{card.text}</p>
<div className="mt-4 flex flex-wrap gap-2">
<Link
to={buildUploadPath(`audience_${card.entry}`)}
className="btn btn-sm border-0 bg-slate-950 text-white hover:bg-slate-800"
onClick={() => trackEvent('home_audience_upload_click', {
source: 'home',
surface: 'audience_routes',
entryPoint: card.entry
})}
>
{card.cta}
</Link>
<Link
to={`/${card.slug}/`}
className="btn btn-sm border-slate-200 bg-white text-slate-700 hover:bg-slate-50"
onClick={() => trackEvent('home_audience_landing_click', {
source: 'home',
surface: 'audience_routes',
entryPoint: card.slug
})}
>
Ratgeber
</Link>
</div>
</div>
</article>
))}
</div>
</section>
);
const IntentSearch = ({ intentQuery, setIntentQuery, intentMatches }) => (
<section className="mt-10 rounded-2xl border border-slate-200 bg-white p-4 shadow-sm sm:p-6">
<div className="flex flex-wrap items-center justify-between gap-4">
<div>
<h2 className="text-xl font-black text-slate-950">Direkt zur passenden Suchintention</h2>
<p className="mt-1 text-sm text-slate-600">Profilbild, Bewerbung, Dating oder Social: Longtail-Seiten führen direkt in den Upload.</p>
</div>
<form
className="w-full md:w-auto"
onSubmit={(event) => {
event.preventDefault();
const entry = intentMatches[0];
if (!entry) return;
trackEvent('home_intent_search_submit', {
source: 'home',
surface: 'intent_search',
entryPoint: 'intent_search_form',
meta: {
query: intentQuery.trim().toLowerCase(),
matchedCount: String(intentMatches.length)
}
});
window.location.assign('/' + entry.slug + '/');
}}
>
<div className="join w-full md:w-96">
<input
className="join-item input input-bordered w-full"
value={intentQuery}
onChange={(event) => setIntentQuery(event.target.value)}
placeholder="z. B. Profilbild für LinkedIn"
aria-label="Suchintention"
/>
<button className="btn join-item bg-coral-500 text-white hover:bg-coral-600" type="submit">Los</button>
</div>
</form>
</div>
<div className="mt-4 flex flex-wrap gap-2">
{intentMatches.map((item) => (
<button
key={item.slug}
type="button"
className="btn btn-sm border-slate-200 bg-slate-50 text-slate-700 hover:bg-slate-100"
onClick={() => {
trackEvent('home_intent_chip_click', {
source: 'home',
surface: 'intent_search',
entryPoint: item.slug,
meta: { slug: item.slug }
});
window.location.assign('/' + item.slug + '/');
}}
>
{item.title}
</button>
))}
</div>
</section>
);
const SeoRouteStrip = ({ manifestCards, manifestLoading }) => (
<section className="mt-10 rounded-2xl border border-slate-200 bg-slate-950 p-5 text-white shadow-sm sm:p-6">
<div className="flex flex-wrap items-center justify-between gap-4">
<div>
<h2 className="text-xl font-black">Organische Einstiege, die direkt zum Test führen</h2>
<p className="mt-1 text-sm text-slate-300">SEO bleibt sichtbar, aber die Community-Erfahrung bleibt der erste Eindruck.</p>
</div>
<Link to="/profilbild-ratgeber/" className="btn btn-sm border-white/20 bg-white text-slate-950 hover:bg-slate-100">SEO-Hub öffnen</Link>
</div>
<div className="mt-5 grid gap-3 md:grid-cols-2 lg:grid-cols-3">
{manifestLoading ? Array.from({ length: 3 }).map((_, index) => (
<div key={index} className="skeleton h-24 rounded-xl bg-white/10" />
)) : manifestCards.slice(0, 6).map((item) => (
<div key={item.slug} className="rounded-xl border border-white/10 bg-white/10 p-4">
<h3 className="font-black">{item.title}</h3>
<p className="mt-1 text-xs text-slate-300">{item.tags?.length ? item.tags.join(' · ') : item.slug}</p>
<div className="mt-3 flex gap-2">
<Link
to={`/${item.slug}/`}
className="btn btn-xs border-white/20 bg-white text-slate-950 hover:bg-slate-100"
onClick={() => trackEvent('home_manifest_tile_click', {
source: 'home',
surface: 'seo_manifest',
entryPoint: item.slug,
meta: { position: 'strip', type: 'landing_page' }
})}
>
Landingpage
</Link>
<a
href={`/upload?entry=seo_manifest_${toEntryToken(item.slug)}`}
className="btn btn-xs border-white/20 bg-transparent text-white hover:bg-white/10"
onClick={() => trackEvent('home_manifest_upload_click', {
source: 'home',
surface: 'seo_manifest',
entryPoint: item.slug,
meta: { step: 'upload_cta' }
})}
>
Upload
</a>
</div>
</div>
))}
</div>
</section>
);
export const HomePage = () => {
const [items, setItems] = useState([]);
const [online, setOnline] = useState(0);
const [feedLoading, setFeedLoading] = useState(true);
const [intentQuery, setIntentQuery] = useState('');
const [seoManifest, setSeoManifest] = useState(null);
const [manifestLoading, setManifestLoading] = useState(true);
const intentMatches = useMemo(() => {
const query = intentQuery.trim().toLowerCase();
if (!query) return featuredSeoLinks.slice(0, 5);
return featuredSeoLinks.filter((item) => {
const haystack = (item.slug + ' ' + item.title).toLowerCase();
return haystack.includes(query);
}).slice(0, 6);
}, [intentQuery]);
const manifestCards = useMemo(() => toManifestEntries(seoManifest), [seoManifest]);
const profileItems = useMemo(() => {
const filtered = (items || []).filter(isProfileLikeItem);
return filtered.length > 0 ? filtered : items;
}, [items]);
useEffect(() => {
let cancelled = false;
setFeedLoading(true);
setManifestLoading(true);
fetch('/api/photos/feed')
.then(r => r.json())
.then(d => {
if (cancelled) return;
setItems(d.items || []);
})
.catch(() => {})
.finally(() => {
if (cancelled) return;
setFeedLoading(false);
});
const wsProto = location.protocol === 'https:' ? 'wss' : 'ws';
const ws = new WebSocket(`${wsProto}://${location.host}/ws`);
ws.addEventListener('open', () => {
ws.send(JSON.stringify({ type: 'subscribe', channel: 'leaderboard:all' }));
});
ws.addEventListener('message', (ev) => {
try {
const m = JSON.parse(ev.data);
if (m.type === 'presence') setOnline(m.online || 0);
} catch {}
});
fetch('/seo-manifest.json')
.then((res) => (res.ok ? res.json() : null))
.then((json) => {
if (cancelled) return;
if (json) {
setSeoManifest(json);
trackEvent('home_seo_manifest_view', {
source: 'home',
surface: 'seo_manifest',
entryPoint: 'home_intent_surface',
meta: {
count: String(Array.isArray(json.landingPages) ? json.landingPages.length : 0)
}
});
}
})
.catch(() => {
if (!cancelled) setSeoManifest(null);
})
.finally(() => {
if (!cancelled) setManifestLoading(false);
});
return () => {
cancelled = true;
try { ws.close(); } catch {}
};
}, []);
return (
<div className="mx-auto max-w-7xl px-4 py-5 sm:px-6 md:py-8">
<HomePageMeta />
<Hero items={profileItems} online={online} />
<AudienceRoutes />
<CommunityFeed items={profileItems} loading={feedLoading} />
<IntentSearch intentQuery={intentQuery} setIntentQuery={setIntentQuery} intentMatches={intentMatches} />
<SeoRouteStrip manifestCards={manifestCards} manifestLoading={manifestLoading} />
<div className="mt-10 grid gap-6 xl:grid-cols-[0.95fr_1.05fr]">
<SeoGrowthWidget />
<SeoLandingTeaser />
</div>
</div>
);
};