209 lines
15 KiB
TypeScript
209 lines
15 KiB
TypeScript
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; |