import React from "react";
import { CalendarDays, Users, HeartHandshake, BookOpen, Mail, Menu, Search, MapPin, ArrowRight, Camera } from "lucide-react";
import { motion } from "framer-motion";
export default function TreffpunktFeldkirchenRedesign() {
const nav = ["Startseite", "Veranstaltungen", "Vereine & Gruppen", "Menschen & Geschichten", "Mitmachen"];
const cards = [
{
icon: CalendarDays,
title: "Veranstaltungen",
text: "Termine, Feste, Vereinsleben und besondere Ereignisse in Neuwied-Feldkirchen.",
cta: "Termine entdecken",
},
{
icon: Users,
title: "Vereine & Gruppen",
text: "Alles über Initiativen, Ehrenamt, Sport, Kultur und Gemeinschaft vor Ort.",
cta: "Vereine ansehen",
},
{
icon: BookOpen,
title: "Menschen & Geschichten",
text: "Persönliche Einblicke, Dorfgeschichte, Interviews und Erinnerungen.",
cta: "Geschichten lesen",
},
{
icon: HeartHandshake,
title: "Mitmachen",
text: "Termine melden, Beiträge einreichen oder Treffpunkt Feldkirchen unterstützen.",
cta: "Jetzt mitmachen",
},
];
const posts = [
{ tag: "Dorfleben", title: "125 Jahre Bürgerverein Gönnersdorf", text: "Tradition, Gemeinschaft und gelebtes Brauchtum in Feldkirchen.", date: "14. Mai 2026" },
{ tag: "Sport", title: "Boule in Feldkirchen entdecken", text: "Spiel, Spaß und Gemeinschaft auf dem Bouleplatz des SV Feldkirchen.", date: "12. Mai 2026" },
{ tag: "Geschichte", title: "Feldkirchen früher und heute", text: "Erinnerungen, Bilder und kleine Geschichten aus unserem Ort.", date: "10. Mai 2026" },
];
const events = [
{ day: "25", month: "MAI", title: "Pfingstmarkt Feldkirchen", meta: "11:00 – 18:00 Uhr · Ortsmitte" },
{ day: "01", month: "JUN", title: "Boule-Turnier", meta: "14:00 Uhr · Sportplatz Feldkirchen" },
{ day: "09", month: "JUN", title: "Sommerfest der AWO", meta: "15:00 Uhr · AWO Treff" },
];
return (
<div className="min-h-screen bg-[#f7fbf8] text-slate-900">
<header className="sticky top-0 z-50 border-b border-emerald-100 bg-white/85 backdrop-blur-xl">
<div className="mx-auto flex max-w-7xl items-center justify-between px-5 py-4 lg:px-8">
<div className="flex items-center gap-3">
<div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-emerald-50 text-emerald-800 shadow-sm">
<MapPin size={26} />
</div>
<div>
<div className="text-xl font-bold leading-tight tracking-tight">Treffpunkt Feldkirchen</div>
<div className="text-sm text-emerald-800">Neuwied-Feldkirchen</div>
</div>
</div>
<nav className="hidden items-center gap-7 text-sm font-semibold lg:flex">
{nav.map((item) => (
<a key={item} href="#" className="transition hover:text-emerald-700">
{item}
</a>
))}
</nav>
<div className="hidden items-center gap-3 lg:flex">
<button className="rounded-full p-3 transition hover:bg-emerald-50" aria-label="Suche">
<Search size={20} />
</button>
<button className="rounded-full bg-emerald-700 px-5 py-3 text-sm font-semibold text-white shadow-lg shadow-emerald-900/10 transition hover:bg-emerald-800">
Termin melden
</button>
</div>
<button className="rounded-xl p-3 lg:hidden" aria-label="Menü">
<Menu size={26} />
</button>
</div>
</header>
<main>
<section className="relative overflow-hidden">
<div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_20%,rgba(16,185,129,.18),transparent_35%),radial-gradient(circle_at_80%_10%,rgba(59,130,246,.12),transparent_30%),linear-gradient(135deg,#f7fbf8,#ffffff)]" />
<div className="relative mx-auto grid max-w-7xl gap-10 px-5 py-16 lg:grid-cols-[1.05fr_.95fr] lg:px-8 lg:py-24">
<motion.div initial={{ opacity: 0, y: 16 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }} className="flex flex-col justify-center">
<div className="mb-5 inline-flex w-fit items-center gap-2 rounded-full border border-emerald-100 bg-white/80 px-4 py-2 text-sm font-semibold text-emerald-800 shadow-sm">
<HeartHandshake size={17} /> Für unser Dorf. Für unsere Gemeinschaft.
</div>
<h1 className="max-w-3xl text-4xl font-extrabold tracking-tight text-slate-950 sm:text-5xl lg:text-6xl">
Feldkirchen. Unser Ort. <span className="text-emerald-700">Unsere Geschichten.</span>
</h1>
<p className="mt-6 max-w-2xl text-lg leading-8 text-slate-700">
Treffpunkt Feldkirchen bündelt Nachrichten, Veranstaltungen, Vereinsleben und persönliche Geschichten aus Neuwied-Feldkirchen – übersichtlich, lokal und mobilfreundlich.
</p>
<div className="mt-8 flex flex-col gap-3 sm:flex-row">
<button className="inline-flex items-center justify-center gap-2 rounded-2xl bg-emerald-700 px-6 py-4 font-semibold text-white shadow-xl shadow-emerald-900/15 transition hover:bg-emerald-800">
Veranstaltungen entdecken <ArrowRight size={18} />
</button>
<button className="inline-flex items-center justify-center gap-2 rounded-2xl border border-emerald-100 bg-white px-6 py-4 font-semibold text-emerald-800 shadow-sm transition hover:bg-emerald-50">
Beitrag einreichen
</button>
</div>
</motion.div>
<motion.div initial={{ opacity: 0, scale: 0.97 }} animate={{ opacity: 1, scale: 1 }} transition={{ duration: 0.55 }} className="relative">
<div className="absolute -left-8 top-10 h-28 w-28 rounded-full bg-emerald-200/40 blur-2xl" />
<div className="absolute -right-8 bottom-10 h-36 w-36 rounded-full bg-sky-200/40 blur-2xl" />
<div className="relative overflow-hidden rounded-[2rem] border border-white bg-white p-3 shadow-2xl shadow-emerald-900/10">
<div className="h-[420px] rounded-[1.5rem] bg-[linear-gradient(120deg,rgba(4,120,87,.18),rgba(255,255,255,.15)),url('https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1400&q=80')] bg-cover bg-center" />
<div className="absolute bottom-8 left-8 right-8 rounded-3xl bg-white/88 p-6 shadow-xl backdrop-blur">
<div className="text-sm font-semibold text-emerald-800">Lokales Portal</div>
<div className="mt-1 text-2xl font-bold">Alles Wichtige aus Feldkirchen an einem Ort.</div>
</div>
</div>
</motion.div>
</div>
</section>
<section className="mx-auto max-w-7xl px-5 py-10 lg:px-8">
<div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
{cards.map((card) => {
const Icon = card.icon;
return (
<article key={card.title} className="rounded-3xl border border-emerald-100 bg-white p-6 shadow-sm transition hover:-translate-y-1 hover:shadow-xl hover:shadow-emerald-900/10">
<div className="mb-5 flex h-14 w-14 items-center justify-center rounded-2xl bg-emerald-50 text-emerald-800">
<Icon size={29} />
</div>
<h2 className="text-xl font-bold">{card.title}</h2>
<p className="mt-3 min-h-20 leading-7 text-slate-650">{card.text}</p>
<a href="#" className="mt-5 inline-flex items-center gap-2 font-semibold text-emerald-800">
{card.cta} <ArrowRight size={17} />
</a>
</article>
);
})}
</div>
</section>
<section className="mx-auto grid max-w-7xl gap-6 px-5 py-8 lg:grid-cols-[1.2fr_.8fr] lg:px-8">
<div className="rounded-[2rem] border border-emerald-100 bg-white p-6 shadow-sm">
<div className="mb-6 flex items-center justify-between gap-4">
<div>
<h2 className="text-2xl font-extrabold">Aktuelles aus Feldkirchen</h2>
<div className="mt-2 h-1 w-16 rounded-full bg-emerald-700" />
</div>
<a className="hidden font-semibold text-emerald-800 sm:inline-flex" href="#">Alle Beiträge</a>
</div>
<div className="grid gap-5">
{posts.map((post) => (
<article key={post.title} className="grid gap-4 rounded-3xl border border-slate-100 p-4 transition hover:bg-emerald-50/40 sm:grid-cols-[160px_1fr]">
<div className="h-36 rounded-2xl bg-[url('https://images.unsplash.com/photo-1515150144380-bca9f1650ed9?auto=format&fit=crop&w=700&q=80')] bg-cover bg-center" />
<div>
<div className="flex flex-wrap items-center gap-3 text-sm">
<span className="rounded-full bg-emerald-50 px-3 py-1 font-semibold text-emerald-800">{post.tag}</span>
<span className="text-slate-500">{post.date}</span>
</div>
<h3 className="mt-3 text-xl font-bold">{post.title}</h3>
<p className="mt-2 leading-7 text-slate-700">{post.text}</p>
<a className="mt-3 inline-flex items-center gap-2 font-semibold text-emerald-800" href="#">Weiterlesen <ArrowRight size={16} /></a>
</div>
</article>
))}
</div>
</div>
<aside className="rounded-[2rem] border border-emerald-100 bg-white p-6 shadow-sm">
<h2 className="text-2xl font-extrabold">Nächste Veranstaltungen</h2>
<div className="mt-2 h-1 w-16 rounded-full bg-emerald-700" />
<div className="mt-6 space-y-4">
{events.map((event) => (
<div key={event.title} className="flex gap-4 rounded-3xl border border-slate-100 p-4 transition hover:bg-emerald-50/40">
<div className="flex h-16 w-16 shrink-0 flex-col items-center justify-center rounded-2xl bg-emerald-50 text-emerald-800">
<div className="text-2xl font-extrabold leading-none">{event.day}</div>
<div className="text-xs font-bold">{event.month}</div>
</div>
<div>
<h3 className="font-bold">{event.title}</h3>
<p className="mt-1 text-sm leading-6 text-slate-600">{event.meta}</p>
</div>
</div>
))}
</div>
<button className="mt-6 w-full rounded-2xl bg-emerald-700 px-5 py-4 font-semibold text-white transition hover:bg-emerald-800">Alle Termine ansehen</button>
</aside>
</section>
<section className="mx-auto max-w-7xl px-5 py-10 lg:px-8">
<div className="grid overflow-hidden rounded-[2rem] border border-emerald-100 bg-white shadow-sm lg:grid-cols-3">
<div className="min-h-64 bg-[url('https://images.unsplash.com/photo-1529156069898-49953e39b3ac?auto=format&fit=crop&w=900&q=80')] bg-cover bg-center" />
<div className="flex flex-col items-center justify-center p-8 text-center lg:col-span-1">
<HeartHandshake className="text-emerald-800" size={42} />
<h2 className="mt-4 text-2xl font-extrabold">Gemeinsam für unser Dorf</h2>
<p className="mt-3 leading-7 text-slate-700">Treffpunkt Feldkirchen lebt von Menschen, die Termine, Geschichten, Fotos und Ideen beitragen.</p>
<button className="mt-6 rounded-2xl bg-emerald-700 px-6 py-4 font-semibold text-white transition hover:bg-emerald-800">Mitmachen & unterstützen</button>
</div>
<div className="min-h-64 bg-[url('https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=900&q=80')] bg-cover bg-center" />
</div>
</section>
<section className="mx-auto max-w-7xl px-5 py-10 lg:px-8">
<div className="rounded-[2rem] bg-emerald-50 p-6 lg:p-8">
<div className="grid items-center gap-6 lg:grid-cols-[1fr_1.2fr]">
<div>
<div className="flex items-center gap-3 text-emerald-900">
<Mail size={28} />
<h2 className="text-2xl font-extrabold">Nichts mehr verpassen</h2>
</div>
<p className="mt-3 leading-7 text-slate-700">Newsletter für Termine, Dorfgeschichten und neue Beiträge aus Neuwied-Feldkirchen.</p>
</div>
<form className="grid gap-3 sm:grid-cols-[1fr_auto]">
<input className="rounded-2xl border border-emerald-100 bg-white px-5 py-4 outline-none ring-emerald-200 focus:ring-4" placeholder="E-Mail-Adresse eingeben" />
<button className="rounded-2xl bg-emerald-700 px-7 py-4 font-semibold text-white transition hover:bg-emerald-800">Anmelden</button>
</form>
</div>
</div>
</section>
<section className="mx-auto max-w-7xl px-5 py-10 lg:px-8">
<div className="mb-6 flex items-end justify-between">
<div>
<div className="flex items-center gap-3 text-emerald-800"><Camera size={26} /><span className="font-bold">Galerie</span></div>
<h2 className="mt-2 text-3xl font-extrabold">Feldkirchen in Bildern</h2>
</div>
<a className="hidden font-semibold text-emerald-800 sm:inline-flex" href="#">Zur Galerie</a>
</div>
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
{[1,2,3,4].map((i) => (
<div key={i} className="h-48 rounded-3xl bg-[url('https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?auto=format&fit=crop&w=700&q=80')] bg-cover bg-center shadow-sm" />
))}
</div>
</section>
</main>
<footer className="mt-8 bg-emerald-950 text-white">
<div className="mx-auto grid max-w-7xl gap-8 px-5 py-12 lg:grid-cols-4 lg:px-8">
<div className="lg:col-span-2">
<div className="text-2xl font-extrabold">Treffpunkt Feldkirchen</div>
<p className="mt-3 max-w-xl leading-7 text-emerald-50/80">Das lokale Informationsportal für Neuwied-Feldkirchen – unabhängig, ehrenamtlich und überparteilich.</p>
</div>
<div>
<h3 className="font-bold">Schnellzugriff</h3>
<div className="mt-4 grid gap-2 text-emerald-50/80">
{nav.slice(1).map((item) => <a key={item} href="#" className="hover:text-white">{item}</a>)}
</div>
</div>
<div>
<h3 className="font-bold">Kontakt</h3>
<p className="mt-4 text-emerald-50/80">Termine, Hinweise und Beiträge gerne einreichen.</p>
<a className="mt-4 inline-flex font-semibold text-white" href="#">Kontakt aufnehmen</a>
</div>
</div>
<div className="border-t border-white/10 px-5 py-5 text-center text-sm text-emerald-50/70">© 2026 Treffpunkt Feldkirchen · Impressum · Datenschutz</div>
</footer>
</div>
);
}Treffpunkt Feldkirchen
Neuwied-Feldkirchen
Feldkirchen. Unser Ort. Unsere Geschichten.
Treffpunkt Feldkirchen bündelt Nachrichten, Veranstaltungen, Vereinsleben und persönliche Geschichten aus Neuwied-Feldkirchen – übersichtlich, lokal und mobilfreundlich.
Lokales Portal
Alles Wichtige aus Feldkirchen an einem Ort.
{cards.map((card) => {
const Icon = card.icon;
return (
);
})}
{card.title}
{card.text}
{card.cta}Aktuelles aus Feldkirchen
{posts.map((post) => (
))}
Gemeinsam für unser Dorf
Treffpunkt Feldkirchen lebt von Menschen, die Termine, Geschichten, Fotos und Ideen beitragen.
Nichts mehr verpassen
Newsletter für Termine, Dorfgeschichten und neue Beiträge aus Neuwied-Feldkirchen.
Feldkirchen in Bildern
{[1,2,3,4].map((i) => (
))}