export default function FundedTradingLandingPage() {
const benefits = [
{
title: „Video Academy“,
text: „Über 70 Lektionen, in denen du Expert Advisors verstehst, korrekt einsetzt und wiederholt abrufen kannst.“,
},
{
title: „Gratis Tools“,
text: „Mehrere im Kurs vorgestellte Bots und Tools, die du im passenden Setup direkt nutzen kannst.“,
},
{
title: „Community“,
text: „Austausch mit Coaches und Tradern, regelmäßige Marktanalysen und Support bei Fragen.“,
},
];
const learnItems = [
„EA Grundlagen“,
„Verschiedene Trading-Systeme“,
„Mindset & Risikomanagement“,
„Funded-Konten sinnvoll nutzen“,
];
const bots = [
{
title: „Samurai EA“,
text: „Trendbasierter Grid-Ansatz mit intelligenten Entrys, Filtern und klaren Setups.“,
tags: [„Trendfilter“, „Intelligente Entrys“, „TMA Closing“],
},
{
title: „Open Range Breakout EA“,
text: „Breakout-Strategie rund um relevante Handelszonen, besonders spannend zum US Open.“,
tags: [„Breakout“, „Trendfilter“, „Setfiles“],
},
{
title: „PreDay Breakout EA“,
text: „Robuste Strategie auf Basis von Hoch und Tief des Vortags, ergänzt um Filter und klare Regeln.“,
tags: [„Swing Setup“, „Robuste Tests“, „Trendfilter“],
},
{
title: „Range Raptor“,
text: „Breakout-Ansatz mit Hedge-Funktionen und automatisierter Trade-Verwaltung.“,
tags: [„Hedge“, „Breakout“, „Guidelines“],
},
{
title: „Hedging Panel“,
text: „Semi-manuelles Tool für Entries, Trailing, Gegenpositionen und flexibles Trade-Management.“,
tags: [„Semi-manuel“, „Trade Management“, „Hedge“],
},
{
title: „Hedge Beast“,
text: „Automatisierte Reversal-Strategie mit Hedge-Logik und umfangreichen Filtern.“,
tags: [„Intraday Reversal“, „Trendfilter“, „Hedge“],
},
];
const faqs = [
{
q: „Ist der Kurs wirklich kostenlos?“,
a: „Die Ausbildung wird über das Partner-Setup finanziert. Nach Kontoerstellung und Freischaltung erhältst du Zugriff auf den Kurs.“,
},
{
q: „Ist das eine Blackbox?“,
a: „Nein. Im Kurs wird erklärt, wie die Bots funktionieren, welche Einstellungen wichtig sind und wie du Systeme sinnvoll einsetzt.“,
},
{
q: „Für wen ist der Kurs geeignet?“,
a: „Für Trader, die strukturierter arbeiten wollen, weniger emotional handeln möchten und automatisierte Systeme verstehen und nutzen wollen.“,
},
{
q: „Brauche ich Vorkenntnisse?“,
a: „Grundkenntnisse helfen, aber der Kurs startet mit den Grundlagen und führt Schritt für Schritt in die Umsetzung.“,
},
];
return (
<div className=“min-h-screen bg-slate-950 text-white“>
<section className=“relative overflow-hidden border-b border-white/10 bg-[radial-gradient(circle_at_top_right,_rgba(59,130,246,0.22),_transparent_30%),linear-gradient(135deg,#020617_0%,#0f172a_45%,#111827_100%)]“>
<div className=“absolute inset-0 opacity-20″>
<div className=“absolute left-10 top-20 h-40 w-40 rounded-full bg-amber-400 blur-3xl“ />
<div className=“absolute right-10 top-10 h-56 w-56 rounded-full bg-blue-500 blur-3xl“ />
<div className=“absolute bottom-0 left-1/3 h-48 w-48 rounded-full bg-emerald-500 blur-3xl“ />
</div>
<div className=“relative mx-auto grid max-w-7xl gap-10 px-6 py-20 md:px-10 lg:grid-cols-[1.15fr_0.85fr] lg:px-12 lg:py-24″>
<div className=“flex flex-col justify-center“>
<div className=“mb-6 inline-flex w-fit items-center rounded-full border border-amber-400/30 bg-amber-400/10 px-4 py-2 text-sm font-medium text-amber-300″>
Funded Trading • Expert Advisors • Community
</div>
<h1 className=“max-w-3xl text-4xl font-black leading-tight tracking-tight md:text-6xl“>
Lerne automatisiertes Trading mit <span className=“text-amber-400″>Expert Advisors</span> – strukturiert, modern und praxisnah.
</h1>
<p className=“mt-6 max-w-2xl text-lg leading-8 text-slate-300 md:text-xl“>
Eine Landingpage für Interessenten, die verstehen wollen, wie automatisiertes Trading funktioniert, welche Systeme enthalten sind und wie sie mit einem klaren Setup starten können.
</p>
<div className=“mt-8 grid gap-3 sm:grid-cols-2″>
{[
„Über 70 Lektionen“,
„Mehrere Bots & Tools“,
„Live-Trackrecord seit 2020“,
„Community & Support“,
].map((item) => (
<div key={item} className=“flex items-center gap-3 rounded-2xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-slate-200 backdrop-blur“>
<div className=“h-2.5 w-2.5 rounded-full bg-emerald-400″ />
<span>{item}</span>
</div>
))}
</div>
<div className=“mt-10 flex flex-col gap-4 sm:flex-row“>
<a
href=“#start“
className=“rounded-2xl bg-amber-400 px-7 py-4 text-center text-base font-bold text-slate-950 shadow-lg shadow-amber-500/20 transition hover:-translate-y-0.5″
>
Jetzt kostenlos starten
</a>
<a
href=“#bots“
className=“rounded-2xl border border-white/15 bg-white/5 px-7 py-4 text-center text-base font-semibold text-white transition hover:bg-white/10″
>
Inhalte ansehen
</a>
</div>
</div>
<div className=“flex items-center justify-center“>
<div className=“w-full max-w-xl rounded-[28px] border border-white/10 bg-white/5 p-4 shadow-2xl backdrop-blur-xl“>
<div className=“rounded-[24px] border border-white/10 bg-slate-900 p-6″>
<div className=“mb-6 flex items-center justify-between“>
<div>
<p className=“text-sm uppercase tracking-[0.25em] text-slate-400″>Live Setup</p>
<h3 className=“mt-2 text-2xl font-bold“>Funded EA Kurs</h3>
</div>
<div className=“rounded-xl bg-emerald-400/15 px-3 py-2 text-sm font-semibold text-emerald-300″>
Trackrecord aktiv
</div>
</div>
<div className=“grid gap-4 md:grid-cols-2″>
<div className=“rounded-2xl border border-white/10 bg-slate-950 p-5″>
<p className=“text-sm text-slate-400″>Fokus</p>
<p className=“mt-2 text-lg font-semibold“>Automatisiertes Trading</p>
<p className=“mt-3 text-sm leading-6 text-slate-300″>
Weniger Emotionen, mehr Systematik und klare Regeln für Umsetzung und Management.
</p>
</div>
<div className=“rounded-2xl border border-white/10 bg-slate-950 p-5″>
<p className=“text-sm text-slate-400″>Ziel</p>
<p className=“mt-2 text-lg font-semibold“>Strukturierter Start</p>
<p className=“mt-3 text-sm leading-6 text-slate-300″>
Bots verstehen, Setups auswählen und ein individuelles Portfolio aufbauen.
</p>
</div>
</div>
<div className=“mt-5 rounded-2xl border border-white/10 bg-gradient-to-r from-blue-500/10 to-emerald-500/10 p-5″>
<div className=“flex items-end justify-between gap-4″>
<div>
<p className=“text-sm text-slate-400″>Vertrauenssignal</p>
<p className=“mt-2 text-3xl font-black“>Live-Statistik</p>
<p className=“mt-2 text-sm text-slate-300″>Performance-Nachweis und transparente Darstellung der Entwicklung.</p>
</div>
<div className=“h-24 w-32 rounded-2xl border border-white/10 bg-slate-950 p-3″>
<div className=“flex h-full items-end gap-2″>
<div className=“h-8 w-3 rounded-full bg-slate-700″ />
<div className=“h-12 w-3 rounded-full bg-slate-600″ />
<div className=“h-16 w-3 rounded-full bg-slate-500″ />
<div className=“h-14 w-3 rounded-full bg-slate-400″ />
<div className=“h-20 w-3 rounded-full bg-emerald-400″ />
<div className=“h-24 w-3 rounded-full bg-amber-400″ />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section className=“mx-auto max-w-7xl px-6 py-18 md:px-10 lg:px-12″>
<div className=“grid gap-8 lg:grid-cols-[0.9fr_1.1fr]“>
<div>
<p className=“text-sm font-semibold uppercase tracking-[0.25em] text-amber-400″>Warum dieses Angebot?</p>
<h2 className=“mt-4 text-3xl font-black md:text-5xl“>Automatisierung statt emotionalem Hin und Her.</h2>
<p className=“mt-6 max-w-xl text-lg leading-8 text-slate-300″>
Viele Trader scheitern nicht an Informationen, sondern an Zeitmangel, fehlender Struktur und emotionalen Entscheidungen. Genau hier setzt diese Landingpage an: klarer Nutzen, nachvollziehbare Inhalte und ein konkreter Einstieg.
</p>
</div>
<div className=“grid gap-4 md:grid-cols-3″>
{benefits.map((item) => (
<div key={item.title} className=“rounded-[24px] border border-white/10 bg-white/5 p-6 shadow-xl shadow-black/10″>
<div className=“mb-4 flex h-12 w-12 items-center justify-center rounded-2xl bg-amber-400/15 text-xl text-amber-300″>✦</div>
<h3 className=“text-xl font-bold“>{item.title}</h3>
<p className=“mt-3 text-sm leading-7 text-slate-300″>{item.text}</p>
</div>
))}
</div>
</div>
</section>
<section className=“border-y border-white/10 bg-white/[0.03]“>
<div className=“mx-auto max-w-7xl px-6 py-18 md:px-10 lg:px-12″>
<div className=“grid gap-12 lg:grid-cols-[1fr_1fr] lg:items-center“>
<div>
<p className=“text-sm font-semibold uppercase tracking-[0.25em] text-amber-400″>Kursinhalte</p>
<h2 className=“mt-4 text-3xl font-black md:text-5xl“>Was Interessenten auf einen Blick verstehen sollen</h2>
<p className=“mt-6 max-w-2xl text-lg leading-8 text-slate-300″>
Die Seite erklärt nicht nur, was im Kurs enthalten ist, sondern macht deutlich, dass die Systeme verstanden und nicht blind eingesetzt werden sollen.
</p>
<div className=“mt-8 grid gap-4 sm:grid-cols-2″>
{learnItems.map((item) => (
<div key={item} className=“rounded-2xl border border-white/10 bg-slate-950 px-5 py-4 text-base font-semibold text-slate-100″>
{item}
</div>
))}
</div>
</div>
<div className=“rounded-[28px] border border-white/10 bg-slate-950 p-7″>
<div className=“grid gap-5″>
{[
{
t: „Keine Blackbox“,
d: „Funktionsweise der Bots, Einstellungen und Einsatzbereiche werden verständlich erklärt.“,
},
{
t: „Individuelles Portfolio“,
d: „Nutzer können auswählen, welche Systeme am besten zu ihrer Handelsweise passen.“,
},
{
t: „Mindset & Risiko“,
d: „Automatisierung soll emotionale Fehler reduzieren und strukturierteres Handeln fördern.“,
},
].map((row) => (
<div key={row.t} className=“rounded-2xl border border-white/10 bg-white/5 p-5″>
<h3 className=“text-lg font-bold“>{row.t}</h3>
<p className=“mt-2 text-sm leading-7 text-slate-300″>{row.d}</p>
</div>
))}
</div>
</div>
</div>
</div>
</section>
<section id=“bots“ className=“mx-auto max-w-7xl px-6 py-18 md:px-10 lg:px-12″>
<div className=“max-w-3xl“>
<p className=“text-sm font-semibold uppercase tracking-[0.25em] text-amber-400″>Bots & Tools</p>
<h2 className=“mt-4 text-3xl font-black md:text-5xl“>Die Systeme, die auf der Landingpage verkauft werden</h2>
<p className=“mt-6 text-lg leading-8 text-slate-300″>
Statt alles in langen Textblöcken zu verstecken, sind die wichtigsten Systeme als klare Angebotskarten aufbereitet – verständlich, hochwertig und vertrauensbildend.
</p>
</div>
<div className=“mt-10 grid gap-6 md:grid-cols-2 xl:grid-cols-3″>
{bots.map((bot) => (
<div key={bot.title} className=“group rounded-[28px] border border-white/10 bg-gradient-to-b from-white/5 to-white/[0.03] p-6 transition hover:-translate-y-1 hover:border-amber-400/40 hover:shadow-2xl hover:shadow-amber-500/5″>
<div className=“flex items-center justify-between gap-4″>
<h3 className=“text-2xl font-bold leading-tight“>{bot.title}</h3>
<div className=“rounded-xl bg-slate-900 px-3 py-2 text-xs font-semibold uppercase tracking-[0.2em] text-slate-300″>EA</div>
</div>
<p className=“mt-4 text-sm leading-7 text-slate-300″>{bot.text}</p>
<div className=“mt-6 flex flex-wrap gap-2″>
{bot.tags.map((tag) => (
<span key={tag} className=“rounded-full border border-white/10 bg-slate-900 px-3 py-2 text-xs font-semibold text-slate-200″>
{tag}
</span>
))}
</div>
</div>
))}
</div>
</section>
<section className=“border-y border-white/10 bg-[linear-gradient(135deg,rgba(245,158,11,0.08),rgba(59,130,246,0.06))]“>
<div className=“mx-auto grid max-w-7xl gap-8 px-6 py-18 md:px-10 lg:grid-cols-[1.1fr_0.9fr] lg:px-12 lg:items-center“>
<div>
<p className=“text-sm font-semibold uppercase tracking-[0.25em] text-amber-400″>Proof & Vertrauen</p>
<h2 className=“mt-4 text-3xl font-black md:text-5xl“>Transparenz durch Trackrecord und klare Prozesse</h2>
<p className=“mt-6 max-w-2xl text-lg leading-8 text-slate-200″>
Eine gute Landingpage für diesen Markt braucht Vertrauen. Deshalb hebt diese Vorlage Live-Statistik, Tools, Community und einen klaren Startprozess deutlich hervor.
</p>
<div className=“mt-8 grid gap-4 sm:grid-cols-2″>
{[
„Live Trackrecord“,
„TradingView Indikator“,
„Telegram Community“,
„Klare Freischaltungsschritte“,
].map((item) => (
<div key={item} className=“rounded-2xl border border-white/10 bg-slate-950/70 px-5 py-4 font-semibold text-slate-100 backdrop-blur“>
{item}
</div>
))}
</div>
</div>
<div className=“rounded-[28px] border border-white/10 bg-slate-950 p-6 shadow-2xl“>
<div className=“rounded-[22px] border border-white/10 bg-white/5 p-5″>
<div className=“mb-5 flex items-center justify-between“>
<h3 className=“text-xl font-bold“>Start in 3 Schritten</h3>
<div className=“rounded-full bg-amber-400/15 px-3 py-1 text-xs font-bold uppercase tracking-[0.2em] text-amber-300″>Onboarding</div>
</div>
<div className=“space-y-4″>
{[
[„1“, „Konto erstellen“, „Registrierung über den vorgesehenen Partnerlink.“],
[„2“, „Konto kapitalisieren“, „Empfohlen wird ein passendes Funded-Setup als Grundlage.“],
[„3“, „Freischaltung erhalten“, „Nach Prüfung der Daten wird der Kurs freigegeben.“],
].map(([nr, title, text]) => (
<div key={nr} className=“flex gap-4 rounded-2xl border border-white/10 bg-slate-950 p-4″>
<div className=“flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-amber-400 text-base font-black text-slate-950″>{nr}</div>
<div>
<h4 className=“font-bold“>{title}</h4>
<p className=“mt-1 text-sm leading-6 text-slate-300″>{text}</p>
</div>
</div>
))}
</div>
</div>
</div>
</div>
</section>
<section className=“mx-auto max-w-7xl px-6 py-18 md:px-10 lg:px-12″>
<div className=“grid gap-8 lg:grid-cols-[0.95fr_1.05fr] lg:items-start“>
<div>
<p className=“text-sm font-semibold uppercase tracking-[0.25em] text-amber-400″>FAQ</p>
<h2 className=“mt-4 text-3xl font-black md:text-5xl“>Einwände vor dem Klick direkt auflösen</h2>
<p className=“mt-6 max-w-xl text-lg leading-8 text-slate-300″>
Gerade im Trading-Bereich senkt eine gute FAQ die Hürde für Interessenten deutlich. Deshalb ist sie hier bereits eingebaut.
</p>
</div>
<div className=“space-y-4″>
{faqs.map((item) => (
<div key={item.q} className=“rounded-[24px] border border-white/10 bg-white/5 p-6″>
<h3 className=“text-lg font-bold“>{item.q}</h3>
<p className=“mt-3 text-sm leading-7 text-slate-300″>{item.a}</p>
</div>
))}
</div>
</div>
</section>
<section id=“start“ className=“pb-20″>
<div className=“mx-auto max-w-7xl px-6 md:px-10 lg:px-12″>
<div className=“overflow-hidden rounded-[32px] border border-white/10 bg-[linear-gradient(135deg,#f59e0b_0%,#facc15_18%,#0f172a_18%,#020617_100%)] p-[1px] shadow-2xl shadow-amber-500/10″>
<div className=“grid gap-8 rounded-[31px] bg-slate-950 px-6 py-10 md:px-10 lg:grid-cols-[1.1fr_0.9fr] lg:items-center lg:px-12 lg:py-14″>
<div>
<p className=“text-sm font-semibold uppercase tracking-[0.25em] text-amber-400″>Finaler CTA</p>
<h2 className=“mt-4 max-w-3xl text-3xl font-black leading-tight md:text-5xl“>
Starte jetzt mit einer Landingpage, die dein Angebot klar, hochwertig und vertrauenswürdig verkauft.
</h2>
<p className=“mt-6 max-w-2xl text-lg leading-8 text-slate-300″>
Diese Vorlage ist bereits fertig aufgebaut und kann direkt weiter angepasst werden – mit echten Links, Formularen, Testimonials oder einem eingebetteten Video.
</p>
</div>
<div className=“rounded-[28px] border border-white/10 bg-white/5 p-6 backdrop-blur“>
<div className=“space-y-4″>
<input
className=“w-full rounded-2xl border border-white/10 bg-slate-950 px-4 py-4 text-sm text-white outline-none placeholder:text-slate-500″
placeholder=“Vorname“
/>
<input
className=“w-full rounded-2xl border border-white/10 bg-slate-950 px-4 py-4 text-sm text-white outline-none placeholder:text-slate-500″
placeholder=“E-Mail-Adresse“
/>
<button className=“w-full rounded-2xl bg-amber-400 px-5 py-4 text-base font-black text-slate-950 transition hover:-translate-y-0.5″>
Jetzt Zugang anfragen
</button>
<p className=“text-center text-xs leading-6 text-slate-400″>
Platzhalter-Formular für Leadgenerierung, Beratungsgespräch oder Kursfreischaltung.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
);
}