161 lines
10 KiB
TypeScript
161 lines
10 KiB
TypeScript
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; |