Marc/riboneo-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
meisterbusiness
2026-02-24 21:21:39 +01:00
parent 67a58bea3a
commit 132945f4c6
236 changed files with 14774 additions and 5865 deletions
Download Patch File Download Diff File Expand all files Collapse all files

161
pages/Blog.tsx Normal file
View File

@@ -0,0 +1,161 @@
import React from 'react';
import { Page, BlogPost } from '../types';
interface BlogProps {
setPage: (page: Page) => void;
setSelectedPost: (post: BlogPost | null) => void;
}
const Blog: React.FC<BlogProps> = ({ setPage, setSelectedPost }) => {
const posts = [
{
id: '1',
title: 'Der Weg zurück zum Selbst: Die Riboneo-Methode bei ME/CFS',
category: 'Heilung',
date: '12. Mai 2026',
readTime: '8 Min',
image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuByrBTEQ68GG2U1w9wpM1paKgX7T7MGWcy-10i-1OZDOFfZi1Se0gJdS_abuYlQJjp4ejImEOzRPNlIXxIgTX1bO9GxVkESdT-cfzVHNnTVf2eQn7IfxrN76mDIdHXbu9DmWjPPNYo8-AuXsseMc8fmXm5OaVruAKHvhjRYPimKmwOTnWSZzetyL3DrnmH7bmk8WDi3pBsLD7dLR5mgKOKW9oR0NmEHcRrIRyTQTeK36KQvjUSIvjqr9yNFYQGPQhIm7r0jJ4wcqAc',
excerpt: 'Warum herkömmliche Ansätze bei chronischer Erschöpfung oft versagen und wie die Integration von Geist und Körper den Wendepunkt für Ihre Genesung markieren kann.',
highlight: true
},
{
id: '2',
title: 'Neuroplastizität und die Kraft der Gedanken',
category: 'Bewusstsein',
date: '10. Mai 2026',
readTime: '5 Min',
image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuCPnHCW2idhCXh5b2ycwNnkutCSlOS8rPQLCfzF2vxNynjVjdR5tjWxdUTPsktdOHU1BzjbxlhH1RVz-g_Ay_MM-YxZD0OF3BntMhIPktTRbXN1QwijP9-gH6KaBblSS2xhg0ZILrycYqhRdZrgzjTH6f5fdl00TFBB0NSzjX0wnUPM4B7V02nGZpeOrcaS9gubDn4eljMnqNuiXPb8g42zfllXaY2T4vJjLGZzJY1icq1SnCYP1BSOCX-c7cysVtNANcxf5lG45Qc',
excerpt: 'Wie wir durch gezielte Bewusstseinsarbeit die physische Struktur unseres Gehirns beeinflussen können.',
highlight: false
},
{
id: '3',
title: 'Die Zelluläre Intelligenz verstehen',
category: 'Ganzheitlichkeit',
date: '08. Mai 2026',
readTime: '12 Min',
image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuAzd6VEnpTWl-J0lNzblN4G4e3K1IOR595k-q-mwkEGJ1ldHuvsellE8YSFl0BK1VIbWDSnX9T--n2yRmlw9AycDIM8Is4gUBPoWdx5b6Ke-l8MrGfxQH_nQiW_gGvHhb4OdE3TzMka3_9HnmuWSrL7OUXZb9W6QXHYzC3aB_te1CL36KAYouwDgklZ_ITmseq-ib47wpZ2FmEjHiu38cdOviQCXNrMihzyw2oI6guevoitrdhxAnu89L0cWdjn60MUi76sebwqeUo',
excerpt: 'Ein tiefer Einblick in die biologischen Prozesse, die ablaufen, wenn unser Körper vom Überlebensmodus in den Regenerationsmodus wechselt.',
highlight: false
},
{
id: '4',
title: 'Atem als Brücke zur Vitalität',
category: 'Heilung',
date: '05. Mai 2026',
readTime: '6 Min',
image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuBtodqKwkfgRm8yxdzspDZiZhNDEcemsecCM0O2j57w8KKJW2Tn1JLhgV2uj4Wy8a3E8xiFItoKEMSQ-MTnTKeTDEvBTnUzOv45odlhu_L8HPgdtLxwym9pzPvw-9xNjAYS66VuFlfWJnCQTPBDKC5MD5BlCa5hJD2js0HH7BANBXjr_EIkvrazJVQc-2D-lGXHqhARQ_gLhmthG8CDjKZJ-SANRJ7tJF8dHdauJCmipVC_en20pdvBKbvf5Td9gxHYPixVMfKI5Hw',
excerpt: 'Einfache Atemtechniken aus dem Riboneo-Konzept, die sofortige Entlastung für das zentrale Nervensystem bringen.',
highlight: false
},
{
id: '5',
title: 'Die Revolution beginnt im Stillen',
category: 'Bewusstsein',
date: '01. Mai 2026',
readTime: '4 Min',
image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuBHxdpXnZoeXH_k8wLVRbvhEyhFCW_ISbi7n2t4nczdf7j3lhG5hcsqBSjU1u5945vrvOlaEjx8gefWR3P7sXjF7OamCY0g89rtlU8sBzIHQmqj8ovWPqKKlitWt6lYNBndAxjU6npdpHV3r6nzV8rUuiuEtSyvNqxuldwtst1QB04x-8iYl_AHffF9vD0RqLJrncbB6Dq2u8hIh8MSho8CFimEDSTx1PfOsfgqgIBf7WbF-df5KhjSLRyeUH1ninESqnMLPxidz8Q',
excerpt: 'Warum wir die Stille nicht fürchten sollten, sondern als den produktivsten Zustand für wahre Heilung anerkennen müssen.',
highlight: false
}
];
const handlePostClick = (post: any) => {
setSelectedPost(post);
setPage(Page.BLOG_POST);
}
return (
<div className="pt-24 min-h-screen">
<main className="max-w-7xl mx-auto px-6 py-16">
<header className="mb-12 text-center max-w-3xl mx-auto">
<span className="text-primary font-semibold tracking-widest uppercase text-xs mb-4 block">Wissen & Heilung</span>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-display font-bold text-slate-900 dark:text-white mb-6">Einblicke in die Revolution des Bewusstseins</h1>
<p className="text-lg text-slate-600 dark:text-slate-400 font-light leading-relaxed">
Entdecken Sie tiefgreifende Artikel über ganzheitliche Gesundheit, ME/CFS-Heilung und die transformative Kraft des menschlichen Bewusstseins.
</p>
</header>
<div className="flex flex-wrap items-center justify-center gap-3 mb-16">
<button className="px-6 py-2 shape-squircle bg-primary text-white text-sm font-medium transition-all">Alle Beiträge</button>
<button className="px-6 py-2 shape-squircle bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 hover:border-primary text-slate-600 dark:text-slate-300 text-sm font-medium transition-all">Heilung</button>
<button className="px-6 py-2 shape-squircle bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 hover:border-primary text-slate-600 dark:text-slate-300 text-sm font-medium transition-all">Bewusstsein</button>
<button className="px-6 py-2 shape-squircle bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 hover:border-primary text-slate-600 dark:text-slate-300 text-sm font-medium transition-all">ME/CFS</button>
<button className="px-6 py-2 shape-squircle bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 hover:border-primary text-slate-600 dark:text-slate-300 text-sm font-medium transition-all">Ganzheitliche Gesundheit</button>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
{posts.map((post) => (
<article
key={post.id}
className={`group cursor-pointer ${post.highlight ? 'md:col-span-2' : ''}`}
onClick={() => handlePostClick(post)}
>
<div className={`relative overflow-hidden shape-squircle ${post.highlight ? 'aspect-[16/9]' : 'aspect-[4/3]'} mb-6`}>
<img alt={post.title} className="object-cover w-full h-full transition-transform duration-500 group-hover:scale-105" src={post.image} />
{post.highlight && (
<div className="absolute top-4 left-4">
<span className="bg-primary text-white text-[10px] font-bold uppercase tracking-wider px-3 py-1 shape-squircle">Highlight</span>
</div>
)}
</div>
<div className="flex items-center gap-4 mb-3">
<span className="text-primary font-bold text-xs uppercase tracking-tighter">{post.category}</span>
<span className="w-1 h-1 rounded-full bg-slate-300 dark:bg-slate-600"></span>
<span className="text-slate-500 text-xs font-medium">{post.date}</span>
<span className="w-1 h-1 rounded-full bg-slate-300 dark:bg-slate-600"></span>
<span className="text-slate-500 text-xs font-medium flex items-center gap-1">
<span className="material-icons-outlined text-xs">schedule</span> {post.readTime}
</span>
</div>
<h2 className={`${post.highlight ? 'text-3xl' : 'text-xl'} font-display font-bold mb-4 group-hover:text-primary transition-colors leading-tight`}>{post.title}</h2>
<p className="text-slate-600 dark:text-slate-400 line-clamp-2 leading-relaxed mb-4 text-sm">
{post.excerpt}
</p>
{post.highlight && (
<button className="inline-flex items-center text-sm font-bold text-primary group-hover:gap-2 transition-all">
Weiterlesen <span className="material-icons-outlined text-sm ml-1">arrow_forward</span>
</button>
)}
</article>
))}
</div>
<section className="mt-24 border-t border-slate-200 dark:border-slate-800 pt-20 pb-10">
<div className="bg-primary/5 dark:bg-primary/10 shape-squircle p-8 md:p-12 flex flex-col md:flex-row items-center justify-between gap-10">
<div className="max-w-md">
<h2 className="text-2xl md:text-3xl font-display font-bold mb-3">Bleiben Sie informiert</h2>
<p className="text-slate-600 dark:text-slate-400">Erhalten Sie monatliche Einblicke, neue Studienergebnisse und exklusive Tipps von Roberto de Marco direkt in Ihr Postfach.</p>
</div>
<div className="w-full max-w-sm">
<form className="flex flex-col gap-3">
<div className="flex p-1.5 bg-white dark:bg-slate-900 shape-squircle border border-slate-200 dark:border-slate-700 shadow-sm focus-within:border-primary transition-all">
<input type="email" required placeholder="E-Mail Adresse" className="flex-1 bg-transparent border-none focus:ring-0 px-4 text-sm text-slate-800 dark:text-slate-200" />
<button type="submit" className="bg-primary text-white px-6 py-2.5 shape-squircle text-sm font-semibold hover:bg-opacity-90 transition-colors">
Anmelden
</button>
</div>
<label className="flex items-start gap-2 px-4 cursor-pointer">
<input type="checkbox" required className="mt-1 rounded text-primary focus:ring-primary border-slate-300 dark:border-slate-700 dark:bg-slate-800" />
<span className="text-[10px] text-slate-500 leading-tight">Ich stimme der Datenschutzerklärung zu und möchte den Riboneo Newsletter abonnieren. Eine Abmeldung ist jederzeit möglich.</span>
</label>
</form>
</div>
</div>
</section>
<div className="flex items-center justify-center gap-4 mt-16">
<button className="p-2 rounded-full border border-slate-200 dark:border-slate-700 text-slate-400 cursor-not-allowed">
<span className="material-icons-outlined">chevron_left</span>
</button>
<span className="text-sm font-medium">Seite 1 von 12</span>
<button className="p-2 rounded-full border border-slate-200 dark:border-slate-700 text-slate-800 dark:text-slate-200 hover:border-primary hover:text-primary transition-all">
<span className="material-icons-outlined">chevron_right</span>
</button>
</div>
</main>
</div>
);
};
export default Blog;

167
pages/BlogPost.tsx Normal file
View File

@@ -0,0 +1,167 @@
import React from 'react';
import { Page, BlogPost as BlogPostType } from '../types';
interface BlogPostProps {
setPage: (page: Page) => void;
post: BlogPostType | null;
}
const BlogPost: React.FC<BlogPostProps> = ({ setPage, post }) => {
// If no post is selected, we might want to redirect or show a placeholder.
// For the purpose of the visual demo, I will hardcode the content from the "Single Blog Post" screenshot
// to ensure it looks exactly like the requested design, regardless of which card was clicked.
return (
<div className="pt-24 min-h-screen">
<div className="fixed top-24 left-0 w-full z-40">
<div className="h-1 w-full bg-slate-200 dark:bg-slate-800">
<div className="h-full bg-primary w-[45%]"></div>
</div>
</div>
<header className="relative pt-24 pb-16 md:pt-32 md:pb-24 overflow-hidden">
<div className="absolute inset-0 z-0">
<img alt="Background" className="w-full h-full object-cover opacity-30 dark:opacity-20 grayscale-[0.2]" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDBVkT6X5mLCebkeNRSOzxQnESE-y380hA8ZyB0KshNhGrLNxR7n-GuAvTRMKKI_y_z-N1X1ggdtIJCxPNjRJKnt9AOfzAILVZYt5KNMu1n_FxqMz4RkW2050lFgE-nZ21Y7-IzMJEViB2traoPEERMnyE9K4HJ49wADXwXJVbUd_fMSyludA28aExixj-pUCdZ82OOqN3MHQ5dE2KguQzva2pqSrGmJkv3BcMBIT-WadNz15JBmLUO084NuXdI1qqQmXCvYy861LI" />
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-background-light to-background-light dark:via-background-dark dark:to-background-dark"></div>
</div>
<div className="relative z-10 max-w-4xl mx-auto px-6 text-center">
<span className="inline-block bg-primary/20 text-slate-800 dark:text-primary px-4 py-1 rounded-lg text-sm font-semibold tracking-wider mb-6">
HEILUNG
</span>
<h1 className="text-4xl md:text-6xl lg:text-7xl font-display font-bold text-slate-900 dark:text-white leading-tight mb-8">
Wie Bewusstsein die Zellregeneration beeinflusst
</h1>
<div className="flex items-center justify-center space-x-6 text-slate-500 dark:text-slate-400 font-medium italic">
<span>12. Mai 2026</span>
<span className="w-1.5 h-1.5 rounded-full bg-primary/40"></span>
<span>6 Min. Lesezeit</span>
</div>
</div>
</header>
<main className="max-w-7xl mx-auto px-6 pb-24 grid grid-cols-1 lg:grid-cols-12 gap-12">
<aside className="hidden lg:block lg:col-span-2 pt-4">
<div className="sticky top-40 space-y-8">
<div className="flex flex-col space-y-4">
<span className="text-xs uppercase tracking-widest text-slate-400 font-bold">Teilen</span>
<button className="w-10 h-10 rounded-full bg-slate-200 dark:bg-slate-800 flex items-center justify-center hover:bg-primary hover:text-white transition-colors">
<span className="material-symbols-outlined text-sm">share</span>
</button>
<button className="w-10 h-10 rounded-full bg-slate-200 dark:bg-slate-800 flex items-center justify-center hover:bg-primary hover:text-white transition-colors">
<span className="material-symbols-outlined text-sm">bookmark</span>
</button>
</div>
<button onClick={() => setPage(Page.BLOG)} className="flex items-center gap-2 text-sm text-slate-500 hover:text-primary transition-colors">
<span className="material-symbols-outlined">arrow_back</span> Zurück
</button>
</div>
</aside>
<article className="lg:col-span-8">
<p className="text-2xl text-slate-600 dark:text-slate-300 font-light italic leading-relaxed mb-12 font-display">
In der modernen Medizin betrachten wir den Körper oft als eine komplexe Maschine. Doch was passiert, wenn wir die Perspektive wechseln und die Zelle als Resonanzkörper unseres Bewusstseins begreifen? Die Revolution des Bewusstseins beginnt auf molekularer Ebene.
</p>
<h2 className="text-3xl font-bold mt-16 mb-8 text-slate-900 dark:text-white font-display">Die Epigenetik des Geistes</h2>
<p className="text-lg leading-relaxed text-slate-700 dark:text-slate-300 mb-8">
Lange Zeit galt das Dogma, dass unsere Gene unser Schicksal bestimmen. Wir glaubten, die Blaupause unseres Körpers sei in Stein gemeißelt. Heute wissen wir: Die Epigenetik lehrt uns das Gegenteil. Unsere Gedanken, Emotionen und vor allem unser Bewusstseinszustand fungieren wie Schalter, die bestimmte Gensequenzen aktivieren oder deaktivieren können.
</p>
<p className="text-lg leading-relaxed text-slate-700 dark:text-slate-300 mb-8">
Wenn wir uns in einem Zustand tiefer Kohärenz befinden – ein Kernaspekt des <strong>Riboneo-Konzepts</strong> – senden wir Signale der Sicherheit an unser Nervensystem. Diese Signale sind die Grundvoraussetzung für Zellregeneration. Stress hingegen signalisiert Gefahr und stoppt alle Reparaturvorgänge zugunsten der Fluchtreaktion.
</p>
<div className="my-16 relative py-12 px-8 md:px-16 bg-primary/10 rounded-xl overflow-hidden">
<div className="absolute top-0 left-0 w-1.5 h-full bg-primary"></div>
<blockquote className="text-3xl md:text-4xl italic font-medium text-slate-800 dark:text-slate-100 leading-snug font-display">
"Heilen ist kein Ziel, sondern ein Zustand des Seins, der sich durch die Ausrichtung des Bewusstseins entfaltet."
</blockquote>
<cite className="block mt-6 text-primary font-bold tracking-widest uppercase text-sm">— Roberto de Marco</cite>
</div>
<h3 className="text-2xl font-bold mt-12 mb-6 text-slate-900 dark:text-white font-display">Riboneo: Der holistische Ansatz</h3>
<p className="text-lg leading-relaxed text-slate-700 dark:text-slate-300 mb-8">
Das Riboneo-Konzept basiert auf der Erkenntnis, dass wahre Vitalität nur entstehen kann, wenn wir die Ebenen von Körper, Geist und Seele nicht mehr getrennt voneinander betrachten. Durch gezielte Bewusstseinsschulung und energetische Arbeit schaffen wir ein Milieu, in dem Regeneration nicht mehr erzwungen werden muss, sondern ganz natürlich geschieht.
</p>
<div className="my-12 rounded-2xl overflow-hidden shadow-2xl">
<img alt="Meditation" className="w-full h-auto aspect-video object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAoQPjsZsDaCra1xPAiSk_GkkCv9Omg0Rj9xoQi6sL2NZPdmaFRPfLSj79eVGIoi_7XdoWGb4vzo1FTPsB8STKHOXnpYzKoLpoymXW9dcdQv_hlbaqHZ19Oj_EguVN8LM5tZh464gptq9bzZp_iHd8Wl5HOyVHZcAZlOPDUCG13hfrxhI01IojuwFv4k_PPrbfd123SZdb9agdd2ZWNE7mT_Q_V_i_RDFoKleIER1r8ghtP_bV8LoV_dIhK5ZrYtuNkdW7mK24Gwkw" />
</div>
<p className="text-lg leading-relaxed text-slate-700 dark:text-slate-300 mb-8">
Es geht darum, die Frequenz der Heilung zu halten. In meinen Mentorings und in meinem Buch <em>"Die Revolution des Bewusstseins"</em> beschreibe ich die praktischen Schritte, wie man diese Frequenz im Alltag etabliert. Es ist ein Prozess des Entlernens – das Loslassen alter Konditionierungen, die unseren Körper in einem Zustand chronischer Anspannung halten.
</p>
<footer className="mt-20 pt-10 border-t border-slate-200 dark:border-slate-800">
<div className="flex flex-wrap items-center justify-between gap-6 mb-12">
<div className="flex space-x-2">
<span className="bg-slate-200 dark:bg-slate-800 px-3 py-1 rounded text-xs font-medium">Bewusstsein</span>
<span className="bg-slate-200 dark:bg-slate-800 px-3 py-1 rounded text-xs font-medium">Riboneo</span>
<span className="bg-slate-200 dark:bg-slate-800 px-3 py-1 rounded text-xs font-medium">Regeneration</span>
</div>
</div>
<div className="bg-slate-100 dark:bg-slate-900/50 p-8 rounded-2xl flex flex-col md:flex-row items-center gap-8">
<img alt="Roberto de Marco" className="w-24 h-24 rounded-full object-cover" src="./roberto.jpg" />
<div className="text-center md:text-left">
<h4 className="text-xl font-bold text-slate-900 dark:text-white mb-2 font-display">Roberto de Marco</h4>
<p className="text-slate-600 dark:text-slate-400 text-base leading-relaxed">
Autor, Mentor und Visionär im Bereich holistische Gesundheit. Entwickler des Riboneo-Konzepts und Wegbegleiter für Menschen in tiefgreifenden Transformationsprozessen.
</p>
</div>
</div>
</footer>
</article>
<aside className="hidden lg:block lg:col-span-2">
{/* Right spacer */}
</aside>
</main>
<section className="bg-white dark:bg-slate-900 py-24 border-y border-slate-100 dark:border-slate-800">
<div className="max-w-7xl mx-auto px-6">
<h2 className="text-3xl font-bold mb-12 text-slate-900 dark:text-white font-display">Ähnliche Artikel</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
<a href="#" className="group">
<div className="aspect-video overflow-hidden rounded-xl mb-6">
<img alt="Related 1" className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCqsB4AmuyrWJt8vUCK7HL6qwuyeWHyD27NspksT9vRdxj10TGjyMliZASUCH9XXQQm9pyb9JG9KnUj2QuEQx5RUUxhUTKm9FOF9vjNjAWW8LFHf4bOuu73cyJskT3Ji-c8d801GQ2Pz7fYRLfVzsJBvhxBWMA5AScusz2lZaqE5We6oIZTdJWXRxpdrHO42PnBuwe8z3x-8ZYNN9JUU1hI-3aO8B0x6CJDHENmIXs_DAjvxBI5CVVYGWsIAEMW4Icr_5kah8gdJT4" />
</div>
<span className="text-xs font-bold text-primary uppercase tracking-widest mb-2 block">Mindset</span>
<h3 className="text-xl font-bold text-slate-900 dark:text-white group-hover:text-primary transition-colors font-display">Die Kraft der Stille im digitalen Zeitalter</h3>
</a>
<a href="#" className="group">
<div className="aspect-video overflow-hidden rounded-xl mb-6">
<img alt="Related 2" className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCbB2UnXPjNEdQNSL2oPkiMe2xDjwJQ4zCe2hJllRYV6QZUOxfdvGBf_JQmv2ursziQI0SCknKvtEJPAaLbPNkmxYSiq1-UnyspJB2nzF5RwIF4bTYBMqannS3eZdQkNSHBdrxCN0z_2woti4aJy_r9qeHHWhkdtYHKVYWEWUD8ANNB_Emt_ZR2hdMFf08eeNJ0YG1eUKG-xtGto5m3_kA_MvZLNgfUtrEyMuPfcyU9IVqvICEGDlyACfbMwy-e1aTEI0JBqlG58q8" />
</div>
<span className="text-xs font-bold text-primary uppercase tracking-widest mb-2 block">Riboneo</span>
<h3 className="text-xl font-bold text-slate-900 dark:text-white group-hover:text-primary transition-colors font-display">Zellnahrung: Jenseits der Kalorien</h3>
</a>
<a href="#" className="group">
<div className="aspect-video overflow-hidden rounded-xl mb-6">
<img alt="Related 3" className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD_7pi9-0KDBhabrtFNbc7sFsJCHFXBfUtCsGZvdaUJRgLwTZanR5GH04ut3-eX5BZnJ1Y4Z5G68-uhCJcsuUMVpfEP4QV37KOX5ZtY01Zlyo_agEy6royvLbcCx8i3rV3KxDtMapVFbSSgrw0w2I1tt5F8M04OgWT-5eXcxW0fa3g07pSw87prQfRh3GSOlZ9TdHr-qRd03rWLHLoBCVXks18yAIux78lqofdTblZTJrTiALP94QWR3zjZmp4mJc_1T_d_U4Dp9QE" />
</div>
<span className="text-xs font-bold text-primary uppercase tracking-widest mb-2 block">Heilung</span>
<h3 className="text-xl font-bold text-slate-900 dark:text-white group-hover:text-primary transition-colors font-display">Energiearbeit als Fundament der Vitalität</h3>
</a>
</div>
</div>
</section>
<section className="py-24 bg-background-light dark:bg-background-dark">
<div className="max-w-4xl mx-auto px-6 text-center">
<h2 className="text-4xl font-bold text-slate-900 dark:text-white mb-4 font-display">Deep Dive News</h2>
<p className="text-lg text-slate-600 dark:text-slate-400 mb-10 max-w-xl mx-auto">
Erhalte wöchentliche Impulse zur Revolution deines Bewusstseins und exklusive Einblicke in das Riboneo-System.
</p>
<form className="flex flex-col md:flex-row gap-4 max-w-lg mx-auto">
<input type="email" placeholder="Deine E-Mail Adresse" className="flex-1 bg-white dark:bg-slate-800 border-transparent focus:border-primary focus:ring-primary rounded-full px-6 py-4 text-slate-900 dark:text-white shadow-sm" />
<button type="submit" className="bg-primary text-white font-bold px-8 py-4 rounded-full hover:shadow-xl hover:shadow-primary/30 transition-all">
Abonnieren
</button>
</form>
<p className="mt-4 text-xs text-slate-400">Kein Spam. Abmeldung jederzeit möglich.</p>
</div>
</section>
</div>
);
};
export default BlogPost;

184
pages/Book.tsx Normal file
View File

@@ -0,0 +1,184 @@
import React from 'react';
const Book: React.FC = () => {
return (
<div className="pt-24">
<section className="relative pb-24 overflow-hidden">
<div className="max-w-7xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
<div className="order-2 lg:order-1 space-y-8">
<div className="inline-block px-4 py-1 rounded-full bg-primary/10 text-primary text-xs font-bold tracking-widest uppercase">
Neuerscheinung
</div>
<h1 className="text-5xl lg:text-7xl leading-tight font-display font-bold text-slate-900 dark:text-white">
Die Revolution des <span className="italic text-primary">Bewusstseins</span>
</h1>
<p className="text-lg lg:text-xl text-slate-600 dark:text-slate-400 leading-relaxed max-w-xl">
Entdecken Sie den Weg von der reinen Symptombekämpfung hin zu einer tiefgreifenden, ganzheitlichen Heilung. Roberto de Marco teilt seine bahnbrechenden Erkenntnisse über die Verbindung von Körper, Geist und Natur.
</p>
<div className="flex flex-col sm:flex-row gap-4 pt-4">
<button className="inline-flex items-center justify-center px-8 py-4 bg-primary text-white shape-squircle font-bold drop-shadow-lg shadow-primary/20 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
<span className="material-icons-outlined mr-2">shopping_cart</span>
Jetzt bei Amazon bestellen
</button>
<button className="inline-flex items-center justify-center px-8 py-4 border-2 border-primary/20 dark:border-primary/40 text-primary dark:text-primary hover:bg-primary/5 shape-squircle font-bold transition-all duration-300">
Kostenlose Leseprobe
</button>
</div>
<div className="flex items-center gap-4 text-sm text-slate-500">
<span className="flex -space-x-2">
<span className="w-8 h-8 rounded-full bg-slate-300 border-2 border-white dark:border-background-dark"></span>
<span className="w-8 h-8 rounded-full bg-slate-400 border-2 border-white dark:border-background-dark"></span>
<span className="w-8 h-8 rounded-full bg-slate-500 border-2 border-white dark:border-background-dark"></span>
</span>
<span>Über 5.000+ Leser weltweit</span>
</div>
</div>
<div className="order-1 lg:order-2 flex justify-center relative">
<div className="absolute inset-0 bg-primary/5 rounded-full blur-3xl scale-125 -z-10"></div>
<div className="relative group">
<div className="w-64 h-96 lg:w-80 lg:h-[480px] bg-secondary shadow-2xl rounded-r-lg border-l-8 border-primary/20 transform rotate-[-5deg] transition-transform duration-500 group-hover:rotate-0 overflow-hidden flex flex-col items-center justify-center p-8 text-center relative">
<img alt="Angel Symbol" className="w-32 mb-8 opacity-80" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCN-uaVZvfhOs3AG6HYbv7YZxhCM4WSIdv2Ma-arX3DwYMIkHJmbxSY_WyJ6Y1FAtskBztGj6N1TTwLEGAp2ydIjAsA2RTmrWDBUY2mYMWpkLYAXkamft-wy4unRzp9feQm82UXnBBuDLAy5X8N8R0-fouCnyBoPXJdYMs78KX-Xp-lNrfdNJm98i-DEmwaBzFVG-HxKCgtqVFKEh7DhtOi-XsZZof_yYGllNVL0gNQhjT5C60uydnaiHOpGn6BD0B_wxPkmvAGpmE" />
<div className="space-y-4">
<h2 className="text-primary font-display text-2xl font-bold uppercase tracking-widest">Die Revolution</h2>
<p className="text-xs uppercase tracking-[0.3em] font-sans opacity-60 text-slate-800">des Bewusstseins</p>
<div className="w-12 h-0.5 bg-primary mx-auto"></div>
<p className="text-sm font-display italic text-slate-800">Roberto de Marco</p>
</div>
</div>
<div className="absolute -bottom-8 left-1/2 -translate-x-1/2 w-4/5 h-8 bg-black/10 blur-xl rounded-full"></div>
</div>
</div>
</div>
</section>
<section className="py-24 bg-white dark:bg-slate-900/50">
<div className="max-w-7xl mx-auto px-6">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-32">
<div className="space-y-12">
<div>
<h2 className="text-3xl font-display font-bold mb-6 flex items-center gap-3 text-primary">
<span className="text-5xl opacity-20">01.</span>
Teil 1: Der Crash
</h2>
<div className="prose dark:prose-invert max-w-none text-slate-600 dark:text-slate-400">
<p>Jede Veränderung beginnt oft an einem Tiefpunkt. In diesem ersten Teil beleuchtet Roberto de Marco die psychologischen und physischen Mechanismen des Zusammenbruchs. Es geht nicht nur um Erschöpfung, sondern um das notwendige Ende alter Strukturen, um Platz für Wahres zu schaffen.</p>
<ul className="list-none space-y-4 pl-0 mt-4">
<li className="flex items-start gap-3">
<span className="material-icons-outlined text-primary mt-1">check_circle</span>
<span>Die Illusion der Kontrolle verstehen</span>
</li>
<li className="flex items-start gap-3">
<span className="material-icons-outlined text-primary mt-1">check_circle</span>
<span>Warum Symptome eigentlich Wegweiser sind</span>
</li>
<li className="flex items-start gap-3">
<span className="material-icons-outlined text-primary mt-1">check_circle</span>
<span>Den Mut zur radikalen Ehrlichkeit finden</span>
</li>
</ul>
</div>
</div>
</div>
<div className="space-y-12">
<div>
<h2 className="text-3xl font-display font-bold mb-6 flex items-center gap-3 text-accent1">
<span className="text-5xl opacity-20">02.</span>
Teil 2: Neues Bewusstsein
</h2>
<div className="prose dark:prose-invert max-w-none text-slate-600 dark:text-slate-400">
<p>Der Aufstieg in eine neue Form der Wahrnehmung. Nachdem die alten Hüllen gefallen sind, offenbart sich ein ganzheitlicher Blick auf die Gesundheit. Hier erfahren Sie die Grundlagen des Riboneo-Konzepts und wie Sie Ihre innere Heilkraft aktivieren.</p>
<ul className="list-none space-y-4 pl-0 mt-4">
<li className="flex items-start gap-3">
<span className="material-icons-outlined text-accent1 mt-1">auto_awesome</span>
<span>Integration von Natur und moderner Mentallogik</span>
</li>
<li className="flex items-start gap-3">
<span className="material-icons-outlined text-accent1 mt-1">auto_awesome</span>
<span>Die Entfaltung des wahren Selbst</span>
</li>
<li className="flex items-start gap-3">
<span className="material-icons-outlined text-accent1 mt-1">auto_awesome</span>
<span>Ganzheitliche Routinen für den Alltag</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<section className="relative h-[600px] flex items-center justify-center overflow-hidden">
<img alt="Tranquil Nature Background" className="absolute inset-0 w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDausYLRGza6WUBiuUNsu282KeuuS3oV3uqE5QWqO3IvaUSCRh5LHPLKe2o4q2zhw4DeGjQLP9_QbZ8fIm9lHF0cwwbRm_LXQfR9AzHdEliwqLSXK9obSauSESTMObq7yNyTEBpjMQhEACogPsoPfnOy47vRlXWHvUkiWdUsFThzu_pF_LGvYnkkKqGeVVBOA4mZ9Akj2rY4v8wWfzh9wttI6PytrYBCDLO_79gONLmesI0D1GSipSGvd55Tcc-DoDgw8lX0lEK69I" />
<div className="absolute inset-0 bg-black/40"></div>
<div className="relative z-10 max-w-4xl mx-auto px-6 text-center text-white">
<span className="material-icons-outlined text-6xl mb-8 opacity-50">format_quote</span>
<blockquote className="text-4xl md:text-6xl font-display leading-tight italic">
„Kurieren beendet Symptome, <br className="hidden md:block" />Heilen stiftet <span className="text-accent2">Ganzheit</span>.“
</blockquote>
<div className="mt-12 w-24 h-1 bg-white/30 mx-auto"></div>
<p className="mt-8 text-xl tracking-[0.2em] font-sans opacity-80">ROBERTO DE MARCO</p>
</div>
</section>
<section className="py-24 bg-secondary/30 dark:bg-slate-900" id="leseprobe">
<div className="max-w-4xl mx-auto px-6">
<div className="text-center mb-16">
<h2 className="text-4xl font-display font-bold mb-4">Ein Blick ins Innere</h2>
<p className="text-slate-600 dark:text-slate-400">Lesen Sie ein Fragment aus dem Vorwort</p>
</div>
<div className="bg-white dark:bg-slate-800 p-12 md:p-20 shadow-2xl shape-squircle relative">
<div className="absolute top-0 right-0 p-8">
<img alt="Logo" className="w-12 opacity-5 dark:invert" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAmNJWO7UYMW5F0Cm0VwO-ci5cnQSKqeJBomEvPDegTKjfkRZY_yZx-SI1JD4OT1r5zsVUXKHW4HxKtJK5ZpaKrAnar0iZnVTWAyhdtHFXRU5zkZvSjQwzT_jmPIw8iBK0bm1CFtetF5FZPm5MX2XHofKbrhpvHhs-mfinFSs9GsUyFcNfKR9184hGSzo_z_rFrcrz6kXnE4hXiYKnnuxfAbwdEch4WdewAH9WVNU_4KMqDVUoU7lZT0fXQ7L42IvEomNm32vYaXE4" />
</div>
<div className="prose prose-lg dark:prose-invert max-w-none font-serif leading-relaxed italic text-slate-700 dark:text-slate-300">
<p className="first-letter:text-6xl first-letter:font-bold first-letter:text-primary first-letter:mr-3 first-letter:float-left">
Wir leben in einer Welt der Fragmente. Wir haben gelernt, unseren Körper als Maschine zu betrachten, unsere Psyche als Datensatz und unsere Seele als Relikt vergangener Zeiten. Doch die wahre Revolution findet nicht im Außen statt. Sie ist das Erwachen zu einer vergessenen Einheit...
</p>
<p>
Stellen Sie sich vor, Ihre Krankheit wäre kein Feind, den es zu besiegen gilt, sondern ein Bote, der eine Nachricht von unschätzbarem Wert überbringt. Was wäre, wenn der 'Crash', den Sie vielleicht gerade erleben, der Durchbruch in Ihre wahre Freiheit ist?
</p>
</div>
<div className="mt-12 pt-12 border-t border-slate-100 dark:border-slate-700 flex justify-center">
<button className="text-primary font-bold hover:underline flex items-center gap-2">
Komplette Leseprobe als PDF herunterladen
<span className="material-icons-outlined">download</span>
</button>
</div>
</div>
</div>
</section>
<section className="py-24">
<div className="max-w-5xl mx-auto px-6">
<div className="bg-primary shape-squircle p-12 lg:p-20 text-white flex flex-col lg:flex-row items-center gap-12 relative overflow-hidden">
<div className="absolute top-0 right-0 w-64 h-64 bg-white/5 rounded-full -translate-y-1/2 translate-x-1/2 blur-3xl"></div>
<div className="flex-1 space-y-6 relative z-10">
<h2 className="text-4xl font-display font-bold">Bereit für Ihre Revolution?</h2>
<p className="text-xl text-white/80 leading-relaxed">
Beginnen Sie heute Ihre Reise zu echter Gesundheit und tieferem Bewusstsein.
</p>
<div className="flex flex-wrap gap-4 pt-4">
<button className="bg-white text-primary px-8 py-4 shape-squircle font-bold hover:bg-secondary transition-colors">
Auf Amazon bestellen
</button>
<div className="flex items-center gap-2 text-white/60 text-sm">
<span className="material-icons-outlined">local_shipping</span>
Kostenlose Lieferung für Prime Mitglieder
</div>
</div>
</div>
<div className="w-48 lg:w-64 rotate-12 shadow-2xl relative z-10 hidden md:block">
<div className="w-full aspect-[2/3] bg-secondary rounded-r-md border-l-4 border-black/10 flex flex-col items-center justify-center p-4">
<img alt="Icon" className="w-16 mb-4 opacity-50 grayscale" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC6pboh2ZeRgQdXLznu0Kwe0YP7kdQLarQt2cN605dcVansBxJDumATwH1kp97ZyyREPc22tWuNFB4-0TUpEyrgALUoRUPM_2NJr5ZqylfExAFpT4yj0fQZMiNAIdlplaXXM1n33RAXpb8QaPv6IA9ZgzCDIF7iDH-mHYiLtCNKbUORWkMYYArlK6v9anhfRvV2jamhvqkvI7k-iYh_vfhacbwL2XEgKIg7a8DluQ7-NNMvJLeb9Kxa3Sxhh2uPn9KoEJw0EYslSRk" />
<p className="text-[10px] uppercase font-bold text-primary">RIBONEO</p>
</div>
</div>
</div>
</div>
</section>
</div>
);
};
export default Book;

101
pages/Contact.tsx Normal file
View File

@@ -0,0 +1,101 @@
import React from 'react';
const Contact: React.FC = () => {
return (
<div className="pt-24 min-h-screen">
<div className="max-w-7xl mx-auto md:px-6 py-8 md:py-16">
<div className="flex flex-col lg:flex-row bg-white dark:bg-slate-900 shape-squircle overflow-hidden shadow-xl shadow-slate-200/50 dark:shadow-none min-h-[700px]">
<div className="lg:w-5/12 relative flex flex-col justify-between p-8 md:p-12 text-white overflow-hidden">
<div className="absolute inset-0 z-0">
<img alt="Serene landscape of Southern Italy" className="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC0QQonTpS5B2xofjy_UUfUwywim4_g4y3q7gRj_jr_FZ_ijReCYyf0uxf_O86Ka9Jtx7ljpMN1ZRMrwK9ILhP6QRfhNtUGF3WE1_C3zbeBULyysif9vmshSnUkZ5F1PQK19u32l0g0R3pG5FXs44VTz4vK_2Lqu9EoiPXXKGuiwEcWOzCmvUQNEABSYcEmh46SwRxR-ORcgXLHvcvZOD1KV_CNDCWOgUbAYpGwrVVt_4Xa91aC19e5ncmtVcxxHxnBBvZaVfE00lI" />
<div className="absolute inset-0 bg-primary/40 backdrop-blur-[2px] mix-blend-multiply"></div>
<div className="absolute inset-0 bg-gradient-to-b from-black/40 via-transparent to-black/60"></div>
</div>
<div className="relative z-10">
<h1 className="text-4xl md:text-5xl font-light leading-tight mb-6">
Bereit für den <br />
<span className="font-bold">ersten Schritt?</span>
</h1>
<p className="text-lg text-slate-100/90 font-light max-w-sm">
Entdecken Sie die Revolution Ihres Bewusstseins. Gerne begleite ich Sie auf Ihrem persönlichen Weg zu neuer Lebensqualität.
</p>
</div>
<div className="relative z-10 space-y-8 mt-12 lg:mt-0">
<div className="flex items-start space-x-4">
<div className="bg-white/10 p-2 rounded-lg backdrop-blur-md">
<span className="material-icons-outlined text-white">location_on</span>
</div>
<div>
<h3 className="font-semibold text-sm uppercase tracking-widest mb-1">Büro Süditalien</h3>
<p className="text-slate-200 font-light leading-relaxed">
Via del Benessere 12<br />
84121 Salerno, Italien
</p>
</div>
</div>
<div className="flex items-start space-x-4">
<div className="bg-white/10 p-2 rounded-lg backdrop-blur-md">
<span className="material-icons-outlined text-white">alternate_email</span>
</div>
<div>
<h3 className="font-semibold text-sm uppercase tracking-widest mb-1">E-Mail</h3>
<p className="text-slate-200 font-light">info@robertodemarco.com</p>
</div>
</div>
<div className="pt-8 border-t border-white/20">
<p className="text-xs uppercase tracking-[0.2em] font-medium opacity-70">Folgen Sie mir</p>
<div className="flex space-x-6 mt-4">
<button className="hover:scale-110 transition-transform">
<img alt="Instagram" className="w-8 h-8 invert opacity-80" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB8B8eGQV-1pjt-NsSzv9rhFKJVjRk5QD74LpyUzNbU8kPTt-Qt8-hWJ0dbNMAmh0kXmoTY1fu8miYz5t0tdaFz4PNQU8RmhfGeLXnsTlEfiNMbYq22MGD0PEjy1xASE-_KwHht2wRB7Y1cGDAAFxxba9bauNPDvP-y-5mfhz8GV6g7Ci3iQkQqxnrtwGnG6ouFaJleoMpntdVnkW9w5pPkUnMCW9Oe13XU_R87kg_k3LTWG2eOGS6VAM1ZkPHaxLFEBAdAOXeI0Nw" />
</button>
<button className="hover:scale-110 transition-transform">
<img alt="LinkedIn" className="w-8 h-8 invert opacity-80" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDcLjQfWV5jbvgP3BFN2x9TONNxSICBCUiBRS75U-OFTa0Kq25kfv1PE_BES6MC1RkDq0De1RnaES3RBlHAGEUR7iVi2y8YBrGDV_ykXU6h_GVAA_TdEUv_Fh2svrZvs_fiyeGGjQd8FuJF07JaifN4NxQzQH55la-mA0rzGS5ycvFCrG9-YLrqAt293Ykg8b3kf_csec9LxLb18dTjzyL-yD8z3J7PBCmY3cZZ8ybsskEGBITf_MgdmSY0VddnoLnmp2ME5e-FbLo" />
</button>
<button className="hover:scale-110 transition-transform">
<img alt="Facebook" className="w-8 h-8 invert opacity-80" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAaXkQkfyVWJPQZQpKLSx9_Lcq_jp5iAi6Qd-rxa-aeFZxfsr8P7aIQ7E0tRpdEOqW70sD7Mmta28uFO0qkZFd-LtJ3oTknvkWOtp3tO5TLU0g8ybv1xkar9DUBmbpzsKDspOtp167QJYSoZoLQj_Obw2w_gMk-CCFmEdmdgJMicHAXwW__D4aXLV7vNROAyQa8SXpPqE9lrWEmcVEIHHhiRpFabZZWDRT43BbmfXG8IzlyYsYqOTzGKkL3r5MxGUL9YCNF_az3w_Q" />
</button>
</div>
</div>
</div>
</div>
<div className="lg:w-7/12 p-8 md:p-16 flex flex-col justify-center">
<form className="space-y-8 max-w-xl">
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<div className="space-y-2">
<label htmlFor="name" className="text-sm font-medium text-slate-500 dark:text-slate-400 uppercase tracking-widest">Name</label>
<input type="text" id="name" placeholder="Ihr voller Name" className="w-full bg-transparent border-b border-slate-200 dark:border-slate-700 focus:border-primary py-3 px-0 transition-all text-lg font-light placeholder-slate-300 dark:placeholder-slate-600 focus:ring-0" />
</div>
<div className="space-y-2">
<label htmlFor="email" className="text-sm font-medium text-slate-500 dark:text-slate-400 uppercase tracking-widest">E-Mail Adresse</label>
<input type="email" id="email" placeholder="email@beispiel.de" className="w-full bg-transparent border-b border-slate-200 dark:border-slate-700 focus:border-primary py-3 px-0 transition-all text-lg font-light placeholder-slate-300 dark:placeholder-slate-600 focus:ring-0" />
</div>
</div>
<div className="space-y-2">
<label htmlFor="subject" className="text-sm font-medium text-slate-500 dark:text-slate-400 uppercase tracking-widest">Betreff</label>
<input type="text" id="subject" placeholder="Wie kann ich Ihnen helfen?" className="w-full bg-transparent border-b border-slate-200 dark:border-slate-700 focus:border-primary py-3 px-0 transition-all text-lg font-light placeholder-slate-300 dark:placeholder-slate-600 focus:ring-0" />
</div>
<div className="space-y-2">
<label htmlFor="message" className="text-sm font-medium text-slate-500 dark:text-slate-400 uppercase tracking-widest">Ihre Nachricht</label>
<textarea id="message" rows={5} placeholder="Schreiben Sie hier Ihr Anliegen..." className="w-full bg-transparent border-b border-slate-200 dark:border-slate-700 focus:border-primary py-3 px-0 transition-all text-lg font-light placeholder-slate-300 dark:placeholder-slate-600 focus:ring-0 resize-none"></textarea>
</div>
<div className="flex items-center space-x-3 pt-4">
<input type="checkbox" id="privacy" className="rounded text-primary focus:ring-primary border-slate-300 dark:bg-slate-800 dark:border-slate-700" />
<label htmlFor="privacy" className="text-sm text-slate-500 dark:text-slate-400">
Ich akzeptiere die <a href="#" className="text-primary hover:underline underline-offset-4">Datenschutzbestimmungen</a>.
</label>
</div>
<div className="pt-6">
<button type="submit" className="group relative flex items-center justify-center bg-primary text-white px-10 py-5 shape-squircle font-semibold tracking-widest uppercase text-xs overflow-hidden transition-all hover:bg-primary/90 hover:scale-[1.02] active:scale-95 drop-shadow-lg shadow-primary/30">
Nachricht Senden
<span className="material-icons-outlined ml-2 text-sm group-hover:translate-x-1 transition-transform">send</span>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
);
};
export default Contact;

77
pages/Dashboard.tsx Normal file
View File

@@ -0,0 +1,77 @@
import React, { useEffect, useState } from 'react';
import { Page } from '../types';
import { supabase } from '../supabaseClient';
interface DashboardProps {
setPage: (page: Page) => void;
session: any;
}
const Dashboard: React.FC<DashboardProps> = ({ setPage, session }) => {
const [loading, setLoading] = useState(false);
const handleLogout = async () => {
setLoading(true);
const { error } = await supabase.auth.signOut();
setLoading(false);
if (error) {
alert('Error logging out: ' + error.message);
} else {
setPage(Page.HOME);
}
};
return (
<div className="min-h-screen bg-background-light dark:bg-background-dark pt-32 pb-12 px-6">
<div className="max-w-7xl mx-auto">
<div className="bg-white dark:bg-slate-900 p-8 rounded-3xl shadow-xl border border-slate-100 dark:border-slate-800 mb-8 flex flex-col md:flex-row justify-between items-center gap-6">
<div>
<h1 className="font-display text-3xl text-slate-900 dark:text-white mb-2">Willkommen zurück!</h1>
<p className="text-slate-500 dark:text-slate-400">
Eingeloggt als: <span className="font-medium text-primary">{session?.user?.email}</span>
</p>
</div>
<button
onClick={handleLogout}
disabled={loading}
className="px-6 py-3 bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 font-bold rounded-xl hover:bg-slate-200 dark:hover:bg-slate-700 transition-all"
>
{loading ? 'Logging out...' : 'Abmelden'}
</button>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{/* Example User Content */}
<div className="p-8 bg-white dark:bg-slate-900 shape-squircle border border-slate-100 dark:border-slate-800 shadow-sm hover:shadow-md transition-shadow">
<div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center text-primary mb-6">
<span className="material-symbols-outlined">menu_book</span>
</div>
<h3 className="font-display text-xl mb-2">Meine Kurse</h3>
<p className="text-sm text-slate-500 mb-4">Setze deine Reise fort, wo du aufgehört hast.</p>
<button className="text-primary font-bold text-sm hover:underline">Zum Kurs</button>
</div>
<div className="p-8 bg-white dark:bg-slate-900 shape-squircle border border-slate-100 dark:border-slate-800 shadow-sm hover:shadow-md transition-shadow">
<div className="w-12 h-12 bg-secondary/30 rounded-full flex items-center justify-center text-accent2 mb-6">
<span className="material-symbols-outlined">favorite</span>
</div>
<h3 className="font-display text-xl mb-2">Favoriten</h3>
<p className="text-sm text-slate-500 mb-4">Deine gespeicherten Artikel und Meditationen.</p>
<button className="text-primary font-bold text-sm hover:underline">Ansehen</button>
</div>
<div className="p-8 bg-white dark:bg-slate-900 shape-squircle border border-slate-100 dark:border-slate-800 shadow-sm hover:shadow-md transition-shadow">
<div className="w-12 h-12 bg-slate-100 dark:bg-slate-800 rounded-full flex items-center justify-center text-slate-500 mb-6">
<span className="material-symbols-outlined">settings</span>
</div>
<h3 className="font-display text-xl mb-2">Einstellungen</h3>
<p className="text-sm text-slate-500 mb-4">Verwalte dein Profil und Benachrichtigungen.</p>
<button className="text-primary font-bold text-sm hover:underline">Bearbeiten</button>
</div>
</div>
</div>
</div>
);
};
export default Dashboard;

209
pages/Home.tsx Normal file
View File

@@ -0,0 +1,209 @@
import React, { useEffect, useState } from 'react';
import TestimonialCarousel from '../components/TestimonialCarousel';
import { Page } from '../types';
interface HomeProps {
setPage: (page: Page) => void;
}
const Home: React.FC<HomeProps> = ({ setPage }) => {
const [scrollConfig, setScrollConfig] = useState({ scale: 1, borderRadius: 0, opacity: 1 });
useEffect(() => {
const handleScroll = () => {
const scrollY = window.scrollY;
const maxScroll = 600; // Increase scroll distance for smoother animation
const progress = Math.min(scrollY / maxScroll, 1);
// Scale from 1.0 down to 0.7
const newScale = 1 - (progress * 0.3);
// Radius from 0 to 60px
const newRadius = progress * 60;
setScrollConfig({
scale: newScale,
borderRadius: newRadius,
opacity: 1
});
};
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);
return (
<>
{/* Fixed Hero Container that animates */}
<div className="fixed top-0 left-0 w-full h-screen z-0 flex items-center justify-center pointer-events-none md:pointer-events-auto">
<div
className="relative w-full h-full overflow-hidden transition-all duration-100 ease-out origin-top shadow-2xl"
style={{
transform: `scale(${scrollConfig.scale})`,
borderRadius: `${scrollConfig.borderRadius}px`,
// Applying the special corner shape via class if supported, or fallback to border-radius
}}
>
{/* Apply shape-squircle class here so the CSS corner-shape applies to the wrapper */}
<div className={`w-full h-full relative ${scrollConfig.borderRadius > 0 ? 'shape-squircle' : ''}`} style={{ borderRadius: `${scrollConfig.borderRadius}px` }}>
<img
alt="Serene Misty Forest in Calabria"
className="absolute inset-0 w-full h-full object-cover"
src="https://lh3.googleusercontent.com/aida-public/AB6AXuDulIizRZOpnJbqQ1JQYqdKsw4OqCv10oWMS15RVojlu2eUUdu2nPcnnwTx2C5EwumsDhntUTwHKhr7gvIilVAj2ecRIkSdM-3u3Ff4H9DckAoYkQ4-sq3jhz_qMO0SOdUhCnoGHtylxScjSyCqfSvmLtX_qILUVeNAyvvTJyiFzFT2GwX2tvrFpxdxTRr6PaUqjT0IO6CfR7Ff2i1uiSjPbEBg7BgfbKtEdxG-sZd4_lJaoifCIvsDYYmacc745sSnhwYmazxnzD8"
/>
<div className="absolute inset-0 hero-gradient"></div>
<div className="relative z-10 h-full flex flex-col items-center justify-center px-6 text-center text-white pb-20">
<h1 className="font-display text-5xl md:text-7xl lg:text-8xl mb-8 leading-tight drop-shadow-2xl">
Die Revolution des Bewusstseins
</h1>
<p className="text-xl md:text-2xl mb-12 font-light tracking-wide text-slate-100 max-w-2xl mx-auto drop-shadow-lg">
Heilen statt nur Kurieren. Dein Weg zurück zur inneren Kraft.
</p>
<div className="flex flex-col sm:flex-row items-center justify-center gap-6 pointer-events-auto">
<button onClick={() => setPage(Page.BOOK)} className="px-12 py-5 bg-primary text-white shape-squircle font-semibold hover:bg-opacity-95 transition-all drop-shadow-2xl hover:drop-shadow-[0_20px_20px_rgba(46,91,67,0.4)] text-lg">
Zum Buch
</button>
<button onClick={() => setPage(Page.RETREAT)} className="px-12 py-5 bg-white/10 backdrop-blur-md border border-white/40 text-white shape-squircle font-semibold hover:bg-white/20 transition-all text-lg">
Retreat entdecken
</button>
</div>
</div>
<div
className="absolute bottom-10 left-1/2 -translate-x-1/2 animate-bounce text-white/80 transition-opacity duration-300 z-10"
style={{ opacity: Math.max(0, 1 - window.scrollY / 200) }}
>
<span className="material-symbols-outlined text-4xl">expand_more</span>
</div>
</div>
</div>
</div>
{/* Spacer to allow scrolling over the fixed hero */}
<div className="h-[100vh]"></div>
{/* Main Content that scrolls OVER the hero */}
<div className="bg-background-light dark:bg-background-dark relative z-10 shadow-[0_-20px_60px_rgba(0,0,0,0.2)] rounded-t-[3rem] mt-[-2rem]">
<section className="py-24 px-6 max-w-7xl mx-auto" id="buch">
<div className="text-center mb-20">
<h2 className="font-display text-4xl md:text-5xl mb-4">Die Vier Säulen</h2>
<div className="w-20 h-1 bg-primary mx-auto"></div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<div className="group p-8 shape-squircle bg-secondary/30 dark:bg-white/5 border border-transparent hover:border-primary/20 transition-all hover:-translate-y-2">
<div className="w-16 h-16 shape-squircle bg-slate-200 dark:bg-slate-800 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
<span className="material-symbols-outlined text-accent1 text-3xl">air</span>
</div>
<h3 className="font-display text-2xl mb-4">Geist & Fokus</h3>
<p className="text-slate-600 dark:text-slate-400 leading-relaxed">Mentale Klarheit durch bewusste Atemführung und geführte Stille.</p>
</div>
<div className="group p-8 shape-squircle bg-secondary/30 dark:bg-white/5 border border-transparent hover:border-primary/20 transition-all hover:-translate-y-2">
<div className="w-16 h-16 shape-squircle bg-slate-200 dark:bg-slate-800 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
<span className="material-symbols-outlined text-primary text-3xl">nature_people</span>
</div>
<h3 className="font-display text-2xl mb-4">Erdung</h3>
<p className="text-slate-600 dark:text-slate-400 leading-relaxed">Wurzeln schlagen in der Natur und die Kraft der Ernährung nutzen.</p>
</div>
<div className="group p-8 shape-squircle bg-secondary/30 dark:bg-white/5 border border-transparent hover:border-primary/20 transition-all hover:-translate-y-2">
<div className="w-16 h-16 shape-squircle bg-slate-200 dark:bg-slate-800 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
<span className="material-symbols-outlined text-accent1 text-3xl">water_drop</span>
</div>
<h3 className="font-display text-2xl mb-4">Fluss</h3>
<p className="text-slate-600 dark:text-slate-400 leading-relaxed">Emotionale Heilung und Loslassen blockierter Energien.</p>
</div>
<div className="group p-8 shape-squircle bg-secondary/30 dark:bg-white/5 border border-transparent hover:border-primary/20 transition-all hover:-translate-y-2">
<div className="w-16 h-16 shape-squircle bg-slate-200 dark:bg-slate-800 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
<span className="material-symbols-outlined text-accent2 text-3xl">local_fire_department</span>
</div>
<h3 className="font-display text-2xl mb-4">Energie</h3>
<p className="text-slate-600 dark:text-slate-400 leading-relaxed">Deine innere Leidenschaft und Lebenskraft neu entfachen.</p>
</div>
</div>
</section>
<section className="bg-secondary/20 dark:bg-white/5 py-24">
<div className="max-w-7xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
<div className="relative">
<div className="absolute -top-10 -left-10 w-64 h-64 bg-primary/5 rounded-full blur-3xl"></div>
<img alt="Roberto de Marco Portrait" className="relative shape-squircle shadow-2xl z-10 w-full object-cover max-h-[600px]" src="./roberto.jpg" />
<div className="absolute -bottom-6 -right-6 p-6 bg-primary text-white shape-squircle shadow-xl z-20">
<p className="font-display text-xl">Roberto de Marco</p>
<p className="text-sm opacity-80 italic">Mentor & Autor</p>
</div>
</div>
<div className="space-y-8">
<h2 className="font-display text-4xl md:text-5xl leading-tight">Von der Erschöpfung zur <span className="text-primary italic">Erleuchtung.</span></h2>
<p className="text-lg leading-relaxed text-slate-700 dark:text-slate-300">
Als erfolgreicher Unternehmer schien Roberto alles zu haben – bis sein Körper streikte. Die Diagnose ME/CFS veränderte alles. In seiner dunkelsten Stunde entdeckte er den Pfad der ganzheitlichen Heilung.
</p>
<p className="text-lg leading-relaxed text-slate-700 dark:text-slate-300">
Heute teilt Roberto seine Erkenntnisse durch Riboneo, ein Konzept, das moderne Wissenschaft mit spiritueller Tiefe verbindet, um Menschen zurück zu ihrer ureigenen Kraft zu führen.
</p>
<div className="pt-4">
<button className="inline-flex items-center gap-2 font-semibold text-primary dark:text-white hover:gap-4 transition-all">
Erfahre mehr über meine Reise
<span className="material-symbols-outlined">arrow_forward</span>
</button>
</div>
</div>
</div>
</section>
<section className="py-24 relative overflow-hidden">
<div className="max-w-4xl mx-auto px-6 text-center relative z-10">
<span className="material-symbols-outlined text-primary text-6xl mb-8 opacity-40">format_quote</span>
<blockquote className="font-display text-3xl md:text-4xl italic text-slate-800 dark:text-white mb-10 leading-snug">
"Heilung geschieht nicht im Kopf. Sie beginnt im Moment, in dem du aufhörst zu kämpfen und anfängst zu fühlen."
</blockquote>
<p className="font-medium tracking-widest uppercase text-sm text-primary">Roberto de Marco</p>
</div>
<div className="absolute top-0 right-0 w-1/3 h-full bg-slate-100 dark:bg-white/5 -z-10 translate-x-1/2 rounded-full blur-3xl opacity-50"></div>
</section>
<section className="py-24 px-4 w-full" id="retreat">
<div className="w-full">
<div className="grid grid-cols-1 md:grid-cols-2 min-h-[600px] shape-squircle overflow-hidden shadow-2xl">
<div className="relative h-96 md:h-auto overflow-hidden">
<img alt="Wellness Deck" className="absolute inset-0 w-full h-full object-cover hover:scale-105 transition-transform duration-1000" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCexLBJa_j-RdkjvRmwOV-JjQPinq2-qwRaOaQT3FmeiX7JG7udYYwXAfjhz632L2GbVuDI4uNi5Y94LVrpE_5KXcEZa6xzlYno2HKNzcZ7UKOAMv-e3MedfCLxCCFNNQ-jc_K0VJHY1y2asUt2yHEctiIAskGIMSbLi9ygLbIux9vQbh8GWmx8VRj6ibUcJtk7z5k6DVZlfUUhiQFg2jyFcO0WqXc83q-DfyRpH8hdJDKPjRxkQp9AKcUywnE4wevFlExTZq3K7hQ" />
</div>
<div className="bg-primary flex items-center justify-center p-12 md:p-24 text-white">
<div className="max-w-md">
<h2 className="font-display text-4xl mb-6">Riboneo Retreat 2026</h2>
<p className="text-lg mb-10 opacity-90 leading-relaxed">
Tauche ein in eine Woche der Transformation. Inmitten der unberührten Natur Süditaliens findest du den Raum, um tief zu regenerieren und dein Bewusstsein neu auszurichten.
</p>
<ul className="space-y-4 mb-12">
<li className="flex items-center gap-3">
<span className="material-symbols-outlined text-secondary">check_circle</span>
<span>Exklusive Wellness-Anwendungen</span>
</li>
<li className="flex items-center gap-3">
<span className="material-symbols-outlined text-secondary">check_circle</span>
<span>Tägliche Meditationen & Yoga</span>
</li>
<li className="flex items-center gap-3">
<span className="material-symbols-outlined text-secondary">check_circle</span>
<span>Regenerative Pflanzenküche</span>
</li>
</ul>
<button onClick={() => setPage(Page.RETREAT)} className="inline-block px-10 py-4 bg-secondary text-primary shape-squircle font-bold hover:bg-white transition-all drop-shadow-lg">
Sichere dir einen Platz
</button>
</div>
</div>
</div>
</div>
</section>
<section className="py-24 bg-white dark:bg-slate-900 overflow-hidden">
<div className="max-w-7xl mx-auto px-6">
<h2 className="font-display text-center text-4xl mb-16">Stimmen der Leser</h2>
<TestimonialCarousel />
</div>
</section>
</div>
</>
);
};
export default Home;

77
pages/Login.tsx Normal file
View File

@@ -0,0 +1,77 @@
import React, { useState } from 'react';
import { Page } from '../types';
interface LoginProps {
setPage: (page: Page) => void;
}
import { supabase } from '../supabaseClient';
const Login: React.FC<LoginProps> = ({ setPage }) => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [loading, setLoading] = useState(false);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setLoading(true);
const { error } = await supabase.auth.signInWithPassword({
email,
password,
});
setLoading(false);
if (error) {
alert(error.message);
} else {
setPage(Page.DASHBOARD);
}
};
return (
<div className="min-h-screen bg-background-light dark:bg-background-dark pt-32 pb-12 px-6 flex items-center justify-center">
<div className="w-full max-w-md bg-white dark:bg-slate-900 p-8 rounded-3xl shadow-xl border border-slate-100 dark:border-slate-800">
<h2 className="font-display text-3xl mb-8 text-center text-slate-900 dark:text-white">Willkommen zurück</h2>
<form onSubmit={handleSubmit} className="space-y-6">
<div>
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">E-Mail Adresse</label>
<input
type="email"
required
className="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 focus:ring-2 focus:ring-primary outline-none transition-all"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="name@beispiel.de"
/>
</div>
<div>
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Passwort</label>
<input
type="password"
required
className="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 focus:ring-2 focus:ring-primary outline-none transition-all"
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="••••••••"
/>
</div>
<button
type="submit"
disabled={loading}
className="w-full py-4 bg-primary text-white font-bold rounded-xl hover:bg-opacity-90 transition-all shadow-lg hover:shadow-primary/20 disabled:opacity-50 disabled:cursor-not-allowed"
>
{loading ? 'Laden...' : 'Einloggen'}
</button>
</form>
<p className="mt-8 text-center text-sm text-slate-500">
Noch kein Konto?{' '}
<button onClick={() => setPage(Page.REGISTER)} className="text-primary font-bold hover:underline">
Jetzt registrieren
</button>
</p>
</div>
</div>
);
};
export default Login;

174
pages/Register.tsx Normal file
View File

@@ -0,0 +1,174 @@
import React, { useState } from 'react';
import { Page } from '../types';
interface RegisterProps {
setPage: (page: Page) => void;
}
import { supabase } from '../supabaseClient';
const Register: React.FC<RegisterProps> = ({ setPage }) => {
const [formData, setFormData] = useState({
firstName: '',
lastName: '',
email: '',
phone: '',
password: '',
confirmPassword: '',
privacyAccepted: false
});
const [loading, setLoading] = useState(false);
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const { name, value, type, checked } = e.target;
setFormData(prev => ({
...prev,
[name]: type === 'checkbox' ? checked : value
}));
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (formData.password !== formData.confirmPassword) {
alert('Passwörter stimmen nicht überein.');
return;
}
setLoading(true);
const { error } = await supabase.auth.signUp({
email: formData.email,
password: formData.password,
options: {
data: {
first_name: formData.firstName,
last_name: formData.lastName,
phone: formData.phone,
},
},
});
setLoading(false);
if (error) {
alert(error.message);
} else {
setPage(Page.REGISTER_SUCCESS);
}
};
return (
<div className="min-h-screen bg-background-light dark:bg-background-dark pt-32 pb-12 px-6 flex items-center justify-center">
<div className="w-full max-w-xl bg-white dark:bg-slate-900 p-8 md:p-12 rounded-3xl shadow-xl border border-slate-100 dark:border-slate-800">
<h2 className="font-display text-3xl mb-2 text-center text-slate-900 dark:text-white">Konto erstellen</h2>
<p className="text-center text-slate-500 mb-8">Starten Sie Ihre Reise mit Riboneo.</p>
<form onSubmit={handleSubmit} className="space-y-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Vorname</label>
<input
name="firstName"
type="text"
required
className="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 focus:ring-2 focus:ring-primary outline-none transition-all"
value={formData.firstName}
onChange={handleChange}
/>
</div>
<div>
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Nachname</label>
<input
name="lastName"
type="text"
required
className="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 focus:ring-2 focus:ring-primary outline-none transition-all"
value={formData.lastName}
onChange={handleChange}
/>
</div>
</div>
<div>
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">E-Mail Adresse</label>
<input
name="email"
type="email"
required
className="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 focus:ring-2 focus:ring-primary outline-none transition-all"
value={formData.email}
onChange={handleChange}
/>
</div>
<div>
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Telefonnummer</label>
<input
name="phone"
type="tel"
required
className="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 focus:ring-2 focus:ring-primary outline-none transition-all"
value={formData.phone}
onChange={handleChange}
/>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Passwort</label>
<input
name="password"
type="password"
required
className="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 focus:ring-2 focus:ring-primary outline-none transition-all"
value={formData.password}
onChange={handleChange}
/>
</div>
<div>
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Passwort wiederholen</label>
<input
name="confirmPassword"
type="password"
required
className="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 focus:ring-2 focus:ring-primary outline-none transition-all"
value={formData.confirmPassword}
onChange={handleChange}
/>
</div>
</div>
<div className="flex items-start gap-3 py-2">
<input
id="privacy"
name="privacyAccepted"
type="checkbox"
required
className="mt-1 w-5 h-5 text-primary rounded border-slate-300 focus:ring-primary"
checked={formData.privacyAccepted}
onChange={handleChange}
/>
<label htmlFor="privacy" className="text-sm text-slate-600 dark:text-slate-400">
Ich stimme der Datenschutzerklärung zu und willige ein, dass meine Daten zur Kontaktaufnahme gespeichert werden.
</label>
</div>
<button
type="submit"
disabled={loading}
className="w-full py-4 bg-primary text-white font-bold rounded-xl hover:bg-opacity-90 transition-all shadow-lg hover:shadow-primary/20 bg-secondary text-primary disabled:opacity-50 disabled:cursor-not-allowed"
>
{loading ? 'Senden...' : 'Absenden'}
</button>
</form>
<p className="mt-8 text-center text-sm text-slate-500">
Bereits ein Konto?{' '}
<button onClick={() => setPage(Page.LOGIN)} className="text-primary font-bold hover:underline">
Hier einloggen
</button>
</p>
</div>
</div>
);
};
export default Register;

36
pages/RegisterSuccess.tsx Normal file
View File

@@ -0,0 +1,36 @@
import React from 'react';
import { Page } from '../types';
interface RegisterSuccessProps {
setPage: (page: Page) => void;
}
const RegisterSuccess: React.FC<RegisterSuccessProps> = ({ setPage }) => {
return (
<div className="min-h-screen bg-background-light dark:bg-background-dark pt-32 pb-12 px-6 flex items-center justify-center">
<div className="w-full max-w-md bg-white dark:bg-slate-900 p-12 rounded-3xl shadow-xl border border-slate-100 dark:border-slate-800 text-center">
<div className="w-20 h-20 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center mx-auto mb-6">
<span className="material-symbols-outlined text-4xl text-green-600 dark:text-green-400">check_circle</span>
</div>
<h2 className="font-display text-3xl mb-4 text-slate-900 dark:text-white">Anmeldung erfolgreich!</h2>
<p className="text-slate-600 dark:text-slate-400 mb-8 leading-relaxed">
Vielen Dank für Ihre Anmeldung. Wir haben Ihre Daten erhalten und freuen uns, Sie bei Riboneo begrüßen zu dürfen.
</p>
<button
onClick={() => setPage(Page.LOGIN)}
className="w-full py-4 bg-primary text-white font-bold rounded-xl hover:bg-opacity-90 transition-all shadow-lg hover:shadow-primary/20"
>
Zum Login
</button>
<button
onClick={() => setPage(Page.HOME)}
className="mt-4 text-sm text-slate-500 hover:text-primary transition-colors"
>
Zurück zur Startseite
</button>
</div>
</div>
);
};
export default RegisterSuccess;

120
pages/Retreat.tsx Normal file
View File

@@ -0,0 +1,120 @@
import React from 'react';
const Retreat: React.FC = () => {
return (
<div className="pt-24">
<section className="relative h-[80vh] flex items-center justify-center overflow-hidden">
<div className="absolute inset-0 z-0">
<img alt="Kalabrien Villa" className="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAfjP5xGejLEjOg4L7tSychYlliJjV73kRboD07AMUvf78tFJepwGMxdmIPEucXAXz7_6_ygrgnflVn9Wp3OrtC9_qc_7jd_8VVoNrDeCU2IAdjSWmDbNvaElyzoBoGRhqTJsBMutCZmF0W6Y-_f9jAvBhmdKB4EQu3WO_GKOoM7Y40Arguafm9JXER1e5xUrBcZQMcSSrCHsNYiRrrvdN3cQg6mV0XV6QwHPalhQ1bD7gEtgqqikuqO3TghB-p8NtMxafXHyJLF1Y" />
<div className="absolute inset-0 bg-black/30 dark:bg-black/50"></div>
</div>
<div className="relative z-10 text-center text-white px-4 max-w-4xl">
<h1 className="font-display text-5xl md:text-7xl mb-6 leading-tight drop-shadow-lg">2 Wochen Regeneration in Kalabrien</h1>
<p className="text-xl md:text-2xl font-light mb-10 text-gray-100 italic drop-shadow-md">Die Revolution des Bewusstseins im Herzen Süditaliens erleben.</p>
<a href="#warteliste" className="inline-block bg-primary hover:bg-opacity-90 text-white px-10 py-4 shape-squircle transition-all transform hover:scale-105 uppercase tracking-widest text-sm font-semibold shadow-xl">
Jetzt Platz anfragen
</a>
</div>
<div className="absolute bottom-10 left-1/2 -translate-x-1/2 animate-bounce">
<span className="material-icons-outlined text-white text-4xl">expand_more</span>
</div>
</section>
<section className="py-24 px-6 max-w-7xl mx-auto">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
<div className="relative">
<img alt="Gartenszene Kalabrien" className="shape-squircle shadow-2xl relative z-10 w-full h-[600px] object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBpjYP_Vnoll9q_YSvXbgYnI4H8rUjDALk9qatOk7qM0ZtCswyXwfWn6JOsDevVf2XQ4oo6l0LAkXW7ixpZWftl6mAeqFPB6Yrm7D-osJmi16dGhQ465NTqLC6ZqP8BrRKVHohXkSsSQeZSfI-C1Ua1kUiJa1MCCMb8drX8g6nrrwlbwuwl6dvq9Ch8LzwboqhWpyYHpSl3JcWFWJhUKqHp1zOiiRf0bZJluzazpWh6_3xVF13tHalm3pdCWVZC73o5jGTmt43POVA" />
<div className="absolute -top-6 -left-6 w-full h-full border-2 border-primary/20 shape-squircle -z-0"></div>
</div>
<div>
<span className="text-primary font-bold uppercase tracking-widest text-sm mb-4 block">Holistisches Health Konzept</span>
<h2 className="font-display text-4xl md:text-5xl mb-8 dark:text-white">Praktische Anwendung der 4 Säulen</h2>
<div className="space-y-6 text-lg text-gray-600 dark:text-gray-300">
<p>In der idyllischen Abgeschiedenheit Kalabriens finden wir den Raum, um die Theorie der <i>Revolution des Bewusstseins</i> in gelebte Realität zu transformieren.</p>
<p>Dieses Retreat ist nicht einfach ein Urlaub. Es ist eine tiefgreifende Re-Kalibrierung Ihres Nervensystems, Ihres Körpers und Ihres Geistes, basierend auf dem Riboneo-Konzept von Roberto de Marco.</p>
<ul className="space-y-4 mt-8">
<li className="flex items-start gap-4">
<span className="material-icons-outlined text-accent1">energy_savings_leaf</span>
<span><strong>Ernährung:</strong> Regionale, bio-dynamische Kost direkt aus dem Garten der Villa.</span>
</li>
<li className="flex items-start gap-4">
<span className="material-icons-outlined text-accent1">self_improvement</span>
<span><strong>Bewusstsein:</strong> Tägliche Meditation und Mentoring-Sessions am Meer.</span>
</li>
<li className="flex items-start gap-4">
<span className="material-icons-outlined text-accent1">fitness_center</span>
<span><strong>Bewegung:</strong> Funktionelle Regeneration in der Natur.</span>
</li>
<li className="flex items-start gap-4">
<span className="material-icons-outlined text-accent1">nights_stay</span>
<span><strong>Erholung:</strong> Optimierter Biorhythmus in mediterraner Stille.</span>
</li>
</ul>
</div>
</div>
</div>
</section>
<section className="py-24 bg-secondary/30 dark:bg-zinc-900 transition-colors">
<div className="max-w-7xl mx-auto px-6">
<div className="relative">
<div className="grid grid-cols-12 gap-0 md:gap-4 items-center">
<div className="col-span-12 md:col-span-8 overflow-hidden shape-squircle shadow-xl">
<img alt="Sauna und Spa" className="w-full h-[500px] object-cover hover:scale-105 transition-transform duration-700" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC7RRkwIZ2G72C5korM2gPnwZaF8-ABfeaPxzutNu9d78k-dpXOJFSkLD-6eLRpuyXLgVhvOIJvigzeu1g-d_vp_9Tn6Z1l0EAj0Wspspobn-95bIfEs2mgfcwHvY82tJQ1leQJWcnGMYCCkHq7Lx8lc8mpUh7vqc9ODf3pCma9bllMuqMNed99MaBFk96N54temdPO-2bPVHj9Sk7bOkyl52gDxQF5RWXVyLVmarShHcd1vAlduPxJdw0mwsrFhCe_p2Lrlgyws-s" />
</div>
<div className="col-span-12 md:col-span-5 md:absolute md:right-0 bg-white dark:bg-background-dark p-8 md:p-12 shadow-2xl shape-squircle mt-[-50px] md:mt-0 z-20">
<h3 className="font-display text-3xl mb-6 dark:text-white">Ein Ort der Stille</h3>
<p className="text-gray-600 dark:text-gray-400 mb-6 leading-relaxed">
Unsere exklusive Stein-Villa thront über dem azurblauen Meer Kalabriens. Umgeben von Olivenhainen und blühenden Gärten bietet sie den perfekten Rahmen für Ihre persönliche Transformation.
</p>
<p className="text-gray-600 dark:text-gray-400 mb-8 leading-relaxed italic">
"Nur wer die Stille im Außen findet, kann den Lärm im Inneren bändigen." — Roberto de Marco
</p>
<div className="flex gap-4">
<div className="flex flex-col items-center p-3 border border-gray-100 dark:border-gray-800 rounded">
<span className="text-2xl font-display text-primary">12</span>
<span className="text-[10px] uppercase tracking-tighter opacity-70">Plätze</span>
</div>
<div className="flex flex-col items-center p-3 border border-gray-100 dark:border-gray-800 rounded">
<span className="text-2xl font-display text-primary">14</span>
<span className="text-[10px] uppercase tracking-tighter opacity-70">Tage</span>
</div>
<div className="flex flex-col items-center p-3 border border-gray-100 dark:border-gray-800 rounded">
<span className="text-2xl font-display text-primary">1</span>
<span className="text-[10px] uppercase tracking-tighter opacity-70">Ziel</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section className="py-32 px-6 flex justify-center" id="warteliste">
<div className="max-w-2xl w-full text-center">
<div className="mb-12">
<img alt="Riboneo Symbol" className="h-20 mx-auto mb-8 opacity-40 dark:invert" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB-MM7-3n8RaA1Iu1Nz7I9ABAglIoZOhP8ctlKDh62t1C2QE0-kItxVYdU0xsyA5TZ0WJsL4sX247P8tLLszWlBhFtT5AensaqnrZtS78k77A3G0_s2mFz1QAnkzc6BT5B6LBytOE7R7H_Vvd5zCDuouTTHXcDVbWxJURwoHSA2YjSbclkByg3ruEh0nMb7tUdh6cnj7Abbi4zOpRJpwZo9k9SaJSdLoP02PjfqQHw_AxS3TbtUdB2UW-9yClAuCT0SkgYiMCJLj_Q" />
<h2 className="font-display text-4xl mb-4 dark:text-white">Interesse wecken?</h2>
<p className="text-gray-600 dark:text-gray-400">Tragen Sie sich in die exklusive Warteliste ein. Die Plätze für das kommende Jahr sind streng limitiert und werden nach dem First-Come-Prinzip vergeben.</p>
</div>
<form className="space-y-6">
<div className="relative group">
<input type="email" placeholder="Ihre E-Mail Adresse" className="w-full bg-transparent border-b-2 border-gray-300 dark:border-gray-700 focus:border-primary py-4 px-2 outline-none transition-all duration-300 text-lg" />
<div className="absolute bottom-0 left-0 w-0 h-[2px] bg-primary group-hover:w-full transition-all duration-500"></div>
</div>
<div className="flex items-center gap-3 text-sm text-gray-500 dark:text-gray-400 text-left px-2">
<input type="checkbox" id="privacy" className="rounded border-gray-300 text-primary focus:ring-primary" />
<label htmlFor="privacy">Ich stimme zu, Informationen zum Retreat und den Riboneo-Inhalten zu erhalten.</label>
</div>
<button type="submit" className="w-full bg-primary hover:bg-opacity-90 text-white font-semibold py-5 shape-squircle uppercase tracking-[0.2em] text-sm transition-all shadow-lg hover:shadow-xl">
In Warteliste eintragen
</button>
</form>
<p className="mt-8 text-xs text-gray-400 dark:text-zinc-600 italic">Keine Sorge, wir schätzen Ihre Privatsphäre so sehr wie die kalabrische Ruhe. Kein Spam.</p>
</div>
</section>
</div>
);
};
export default Retreat;