797 lines
33 KiB
TypeScript
797 lines
33 KiB
TypeScript
'use client'
|
||
import React, { useEffect, useMemo, useState } from "react"
|
||
import { motion } from "framer-motion"
|
||
import { Check, Star, BadgeCheck, Sparkles, Play, Mail, Phone, Calendar, Building2, ShieldCheck, Clock4, Users2, Zap, Award, Heart } from "lucide-react"
|
||
import Image from 'next/image'
|
||
import {
|
||
FadeUp,
|
||
StaggerContainer,
|
||
StaggerItem,
|
||
ScaleIn,
|
||
SlideInLeft,
|
||
SlideInRight,
|
||
HoverCard,
|
||
MagneticButton,
|
||
CountUp,
|
||
ParallaxElement
|
||
} from '@/components/ScrollAnimations'
|
||
import { AnimatedFAQ } from '@/components/AnimatedFAQ'
|
||
import { VideoPlayer } from '@/components/VideoPlayer'
|
||
|
||
// ---- Main Component ----
|
||
export default function MagicianLandingPage() {
|
||
const [active, setActive] = useState("home")
|
||
|
||
// Simple scroll function
|
||
const scrollToSection = (sectionId: string) => {
|
||
console.log('Scrolling to:', sectionId) // Debug log
|
||
const element = document.getElementById(sectionId)
|
||
if (element) {
|
||
const headerOffset = 100
|
||
const elementPosition = element.getBoundingClientRect().top
|
||
const offsetPosition = elementPosition + window.pageYOffset - headerOffset
|
||
|
||
window.scrollTo({
|
||
top: offsetPosition,
|
||
behavior: 'smooth'
|
||
})
|
||
} else {
|
||
console.log('Element not found:', sectionId) // Debug log
|
||
}
|
||
}
|
||
|
||
// Observe sections to highlight active link
|
||
useEffect(() => {
|
||
const ids = ["home", "proof", "showreel", "acts", "usecases", "testimonials", "about", "faq", "contact"]
|
||
const obs = new IntersectionObserver(
|
||
(entries) => {
|
||
const visible = entries
|
||
.filter((e) => e.isIntersecting)
|
||
.sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0]
|
||
if (visible) setActive(visible.target.id)
|
||
},
|
||
{ rootMargin: "-50% 0px -45% 0px", threshold: [0.15, 0.35, 0.6] }
|
||
)
|
||
|
||
ids.forEach((id) => {
|
||
const el = document.getElementById(id)
|
||
if (el) obs.observe(el)
|
||
})
|
||
|
||
return () => obs.disconnect()
|
||
}, [])
|
||
|
||
// Data
|
||
const proof = useMemo(
|
||
() => ({
|
||
rating: 5,
|
||
reviews: 12,
|
||
bookings: 20,
|
||
travel: ">1000 km",
|
||
logos: ["SAT.1", "WDR", "ZDF", "Amazon Prime Video"],
|
||
clients: [
|
||
"Mercedes-Benz AG",
|
||
"Materna TMT",
|
||
"VIVA Cruises",
|
||
"AMADA",
|
||
"IHK",
|
||
"Lexus",
|
||
],
|
||
}),
|
||
[]
|
||
)
|
||
|
||
const acts = [
|
||
{
|
||
title: "Close-up Magic (Walking)",
|
||
desc: "Hautnah am Tisch – perfekter Eisbrecher & Gesprächszünder für Empfänge und Dinner.",
|
||
points: ["Interaktiv mit Gästen", "Flexibel zwischen den Gängen", "Keine Technik nötig"],
|
||
icon: <Sparkles className="w-8 h-8 text-blue-300" />,
|
||
gradient: "from-blue-500/20 to-purple-500/20"
|
||
},
|
||
{
|
||
title: "Bühnenshow",
|
||
desc: "Humorvoll, modern und gemeinschaftsstiftend – ideal für Kickoffs, Galas & Weihnachtsfeiern.",
|
||
points: ["20–40 Minuten", "Publikumsbeteiligung", "Skalierbar für kleine & große Bühnen"],
|
||
icon: <Zap className="w-8 h-8 text-yellow-300" />,
|
||
gradient: "from-yellow-500/20 to-orange-500/20"
|
||
},
|
||
{
|
||
title: "Taschendieb-Act",
|
||
desc: "Respektvoll, sicher und spektakulär: scheinbarer Diebstahl von Uhr, Krawatte oder Handy – mit Lerneffekt.",
|
||
points: ["Publikum lacht & lernt", "Immer mit Einverständnis", "Sofortige Wow-Momente"],
|
||
icon: <Award className="w-8 h-8 text-green-300" />,
|
||
gradient: "from-green-500/20 to-emerald-500/20"
|
||
},
|
||
{
|
||
title: "Signature: Gabelbiegen",
|
||
desc: "Metall wird zur Erinnerung – bleibende Souvenirs für Ihre Gäste.",
|
||
points: ["Starkes visuelles Finale", "Mitnahme-Souvenir", "Perfekt für Fotos"],
|
||
icon: <Heart className="w-8 h-8 text-pink-300" />,
|
||
gradient: "from-pink-500/20 to-rose-500/20"
|
||
},
|
||
]
|
||
|
||
const testimonials = [
|
||
{
|
||
name: "Corporate Event",
|
||
quote: "Perfekter Eisbrecher, professionell und absolut verblüffend – unsere Gäste sprechen heute noch davon.",
|
||
avatar: "🏢"
|
||
},
|
||
{
|
||
name: "Hochzeit",
|
||
quote: "Familienfreundlich, charmant und mega eindrucksvoll. Die Fotos vom Gabelbiegen lieben wir!",
|
||
avatar: "💒"
|
||
},
|
||
{
|
||
name: "Weihnachtsfeier",
|
||
quote: "Zero Cringe, 100% Wow. Super zuverlässig, großartige Kommunikation und pünktlich auf die Minute.",
|
||
avatar: "🎄"
|
||
},
|
||
]
|
||
|
||
const faqs = [
|
||
{
|
||
q: "Welche Programmlängen sind möglich?",
|
||
a: "Close-up 60–90 Minuten (walking/tischweise) je nach Gästezahl; Bühne 20–40 Minuten – wir planen es passend zur Agenda.",
|
||
},
|
||
{ q: "Welche Technik wird benötigt?", a: "Close-up: keine. Bühne: Licht/PA nach Raumgröße – kann organisiert werden." },
|
||
{ q: "Wo trittst du auf?", a: "NRW, deutschlandweit und international – Reise >1000 km möglich." },
|
||
{ q: "Ist der Taschendieb-Act sicher?", a: "Ja – immer respektvoll, nur mit Einverständnis, haftpflichtversichert." },
|
||
]
|
||
|
||
return (
|
||
<div className="min-h-screen">
|
||
<div className="site-bg" aria-hidden="true" />
|
||
|
||
{/* NAVBAR */}
|
||
<nav className="onepage-nav">
|
||
<div className="onepage-nav-row">
|
||
<motion.button
|
||
onClick={() => scrollToSection("home")}
|
||
className="onepage-brand"
|
||
whileHover={{ scale: 1.05 }}
|
||
whileTap={{ scale: 0.95 }}
|
||
style={{ background: 'none', border: 'none', cursor: 'pointer' }}
|
||
>
|
||
<motion.div
|
||
className="onepage-brand-logo"
|
||
whileHover={{ rotate: 360 }}
|
||
transition={{ duration: 0.8, ease: "easeInOut" }}
|
||
>
|
||
<Image src="/icon.png" alt="Michael Peskov Magic Logo" width={20} height={20} />
|
||
</motion.div>
|
||
<span>Michael Peskov Magic</span>
|
||
</motion.button>
|
||
|
||
<div className="onepage-nav-links">
|
||
{[
|
||
["Proof", "proof"],
|
||
["Showreel", "showreel"],
|
||
["Acts", "acts"],
|
||
["Use Cases", "usecases"],
|
||
["Testimonials", "testimonials"],
|
||
["About", "about"],
|
||
["FAQ", "faq"],
|
||
].map(([label, id]) => (
|
||
<motion.button
|
||
key={id}
|
||
onClick={() => {
|
||
const element = document.getElementById(id)
|
||
if (element) {
|
||
const y = element.getBoundingClientRect().top + window.scrollY - 88
|
||
window.scrollTo({ top: y, behavior: "smooth" })
|
||
}
|
||
}}
|
||
className={`onepage-link ${active === id ? "active" : ""}`}
|
||
whileHover={{ y: -2 }}
|
||
transition={{ duration: 0.2 }}
|
||
style={{
|
||
background: 'none',
|
||
border: 'none',
|
||
cursor: 'pointer',
|
||
color: 'inherit',
|
||
font: 'inherit',
|
||
padding: '8px 16px'
|
||
}}
|
||
>
|
||
{label}
|
||
</motion.button>
|
||
))}
|
||
</div>
|
||
|
||
<div className="onepage-nav-cta">
|
||
<MagneticButton>
|
||
<button
|
||
onClick={() => {
|
||
const element = document.getElementById('contact')
|
||
if (element) {
|
||
const y = element.getBoundingClientRect().top + window.scrollY - 88
|
||
window.scrollTo({ top: y, behavior: "smooth" })
|
||
}
|
||
}}
|
||
className="onepage-btn onepage-btn--primary"
|
||
style={{
|
||
background: 'none',
|
||
border: 'none',
|
||
cursor: 'pointer',
|
||
color: 'inherit',
|
||
font: 'inherit'
|
||
}}
|
||
>
|
||
Verfügbarkeit prüfen
|
||
</button>
|
||
</MagneticButton>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
{/* HERO */}
|
||
<section id="home" className="onepage-hero">
|
||
<ParallaxElement speed={0.3} className="spotlight" />
|
||
<div className="onepage-container">
|
||
<div className="onepage-hero-grid">
|
||
<div>
|
||
<motion.div
|
||
initial={{opacity:0,y:50}}
|
||
animate={{opacity:1,y:0}}
|
||
transition={{duration:0.8, ease: "easeOut"}}
|
||
>
|
||
<motion.span
|
||
className="onepage-eyebrow"
|
||
initial={{ opacity: 0, scale: 0.8 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
transition={{ delay: 0.2, duration: 0.5 }}
|
||
>
|
||
Premium • Modern • Live
|
||
</motion.span>
|
||
<motion.h1
|
||
className="onepage-h1"
|
||
initial={{ opacity: 0, y: 30 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ delay: 0.4, duration: 0.8 }}
|
||
>
|
||
Moderne Magie, die Menschen verbindet.
|
||
</motion.h1>
|
||
<motion.p
|
||
className="onepage-lead"
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ delay: 0.6, duration: 0.6 }}
|
||
>
|
||
Bekannt aus {proof.logos.join(" • ")}. <CountUp end={proof.rating} />★ bewertet, <CountUp end={proof.bookings} />+ erfolgreiche Buchungen. Europaweit im Einsatz.
|
||
</motion.p>
|
||
<motion.div
|
||
className="onepage-flex onepage-flex-wrap onepage-gap-3 onepage-mt-6"
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ delay: 0.8, duration: 0.6 }}
|
||
>
|
||
<MagneticButton>
|
||
<button
|
||
onClick={() => scrollToSection("contact")}
|
||
className="onepage-btn onepage-btn--primary"
|
||
style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'inherit', font: 'inherit' }}
|
||
>
|
||
Verfügbarkeit prüfen
|
||
</button>
|
||
</MagneticButton>
|
||
<MagneticButton>
|
||
<button
|
||
onClick={() => scrollToSection("showreel")}
|
||
className="onepage-btn onepage-btn--ghost"
|
||
style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'inherit', font: 'inherit', display: 'flex', alignItems: 'center', gap: '8px' }}
|
||
>
|
||
<Play className="w-4 h-4"/> Showreel ansehen
|
||
</button>
|
||
</MagneticButton>
|
||
</motion.div>
|
||
<StaggerContainer className="onepage-flex onepage-flex-wrap onepage-gap-2 onepage-mt-6" staggerDelay={0.1}>
|
||
{proof.clients.map((c) => (
|
||
<StaggerItem key={c}>
|
||
<motion.span
|
||
className="onepage-badge"
|
||
whileHover={{ scale: 1.1, y: -2 }}
|
||
transition={{ duration: 0.2 }}
|
||
>
|
||
<Building2 className="w-3 h-3"/> {c}
|
||
</motion.span>
|
||
</StaggerItem>
|
||
))}
|
||
</StaggerContainer>
|
||
</motion.div>
|
||
</div>
|
||
|
||
<SlideInRight delay={0.4}>
|
||
<HoverCard className="onepage-card">
|
||
<VideoPlayer
|
||
posterImage="/michael-peskov-magier-taschendieb-453624.jpeg"
|
||
videoUrl="https://www.youtube-nocookie.com/embed/BGAXMeIzu3Q?autoplay=1"
|
||
title="SAT.1 Showreel"
|
||
/>
|
||
<motion.div
|
||
className="onepage-flex onepage-gap-2 onepage-mt-4 onepage-text"
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
transition={{ delay: 1, duration: 0.5 }}
|
||
>
|
||
<Star className="w-4 h-4 text-yellow-300"/>
|
||
<span><CountUp end={proof.rating} />.0 / 5 · <CountUp end={proof.reviews} />+ Bewertungen · <CountUp end={proof.bookings} />+ Buchungen</span>
|
||
</motion.div>
|
||
<motion.div
|
||
className="onepage-flex onepage-gap-2 onepage-mt-4 onepage-text"
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
transition={{ delay: 1.2, duration: 0.5 }}
|
||
>
|
||
<ShieldCheck className="w-4 h-4"/> <span>Haftpflicht · Vertrag · Pünktlich</span>
|
||
</motion.div>
|
||
</HoverCard>
|
||
</SlideInRight>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* PROOF */}
|
||
<section id="proof" className="onepage-section">
|
||
<div className="onepage-container">
|
||
<FadeUp>
|
||
<span className="onepage-eyebrow">As seen on & trusted by</span>
|
||
<h2 className="onepage-h2">TV & Marken, die Vertrauen schaffen</h2>
|
||
</FadeUp>
|
||
<StaggerContainer className="onepage-grid onepage-grid--3" staggerDelay={0.1}>
|
||
{proof.logos.map((l) => (
|
||
<StaggerItem key={l}>
|
||
<HoverCard className="onepage-card onepage-text-center">
|
||
<div className="onepage-h3">{l}</div>
|
||
</HoverCard>
|
||
</StaggerItem>
|
||
))}
|
||
{proof.clients.map((l) => (
|
||
<StaggerItem key={l}>
|
||
<HoverCard className="onepage-card onepage-text-center">
|
||
<div className="onepage-h3">{l}</div>
|
||
</HoverCard>
|
||
</StaggerItem>
|
||
))}
|
||
</StaggerContainer>
|
||
</div>
|
||
</section>
|
||
|
||
{/* SHOWREEL */}
|
||
<section id="showreel" className="onepage-section">
|
||
<div className="onepage-container">
|
||
<FadeUp>
|
||
<span className="onepage-eyebrow">Erleben</span>
|
||
<h2 className="onepage-h2">Showreel & Momente des Staunens</h2>
|
||
</FadeUp>
|
||
<ScaleIn delay={0.2}>
|
||
<HoverCard className="onepage-card">
|
||
<VideoPlayer
|
||
posterImage="/michael-peskov-magier-taschendieb-453624.jpeg"
|
||
videoUrl="https://www.youtube-nocookie.com/embed/BGAXMeIzu3Q?autoplay=1"
|
||
title="SAT.1 Showreel"
|
||
/>
|
||
</HoverCard>
|
||
</ScaleIn>
|
||
<StaggerContainer className="onepage-grid onepage-grid--3 onepage-mt-4" staggerDelay={0.1}>
|
||
<StaggerItem>
|
||
<motion.div
|
||
className="onepage-flex onepage-gap-3 onepage-text"
|
||
whileHover={{ x: 5 }}
|
||
transition={{ duration: 0.2 }}
|
||
>
|
||
<BadgeCheck className="w-5 h-5 text-blue-300"/> Eisbrecher für Gespräche
|
||
</motion.div>
|
||
</StaggerItem>
|
||
<StaggerItem>
|
||
<motion.div
|
||
className="onepage-flex onepage-gap-3 onepage-text"
|
||
whileHover={{ x: 5 }}
|
||
transition={{ duration: 0.2 }}
|
||
>
|
||
<BadgeCheck className="w-5 h-5 text-blue-300"/> Null Fremdscham, 100% Wow
|
||
</motion.div>
|
||
</StaggerItem>
|
||
<StaggerItem>
|
||
<motion.div
|
||
className="onepage-flex onepage-gap-3 onepage-text"
|
||
whileHover={{ x: 5 }}
|
||
transition={{ duration: 0.2 }}
|
||
>
|
||
<BadgeCheck className="w-5 h-5 text-blue-300"/> Planbar & professionell
|
||
</motion.div>
|
||
</StaggerItem>
|
||
</StaggerContainer>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ACTS / PACKAGES */}
|
||
<section id="acts" className="onepage-section">
|
||
<div className="onepage-container">
|
||
<FadeUp>
|
||
<span className="onepage-eyebrow">Programme</span>
|
||
<h2 className="onepage-h2">Acts & Pakete</h2>
|
||
</FadeUp>
|
||
<StaggerContainer className="onepage-grid onepage-grid--4" staggerDelay={0.15}>
|
||
{acts.map((a, index) => (
|
||
<StaggerItem key={a.title}>
|
||
<HoverCard className={`onepage-card onepage-card-hover bg-gradient-to-br ${a.gradient}`}>
|
||
<motion.div
|
||
initial={{ scale: 0 }}
|
||
animate={{ scale: 1 }}
|
||
transition={{ delay: 0.5 + index * 0.1, duration: 0.5, type: "spring" }}
|
||
className="onepage-mb-4"
|
||
>
|
||
{a.icon}
|
||
</motion.div>
|
||
<h3 className="onepage-h3">{a.title}</h3>
|
||
<p className="onepage-text onepage-mb-4">{a.desc}</p>
|
||
<ul className="onepage-mb-6" style={{listStyle: 'none', padding: 0}}>
|
||
{a.points.map((p, i) => (
|
||
<motion.li
|
||
key={p}
|
||
className="onepage-flex onepage-gap-2 onepage-text"
|
||
style={{marginBottom: '8px'}}
|
||
initial={{ opacity: 0, x: -20 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
transition={{ delay: 0.8 + index * 0.1 + i * 0.1 }}
|
||
>
|
||
<Check className="w-4 h-4 text-blue-300 flex-shrink-0" style={{marginTop: '2px'}}/> {p}
|
||
</motion.li>
|
||
))}
|
||
</ul>
|
||
<MagneticButton
|
||
className="onepage-btn onepage-btn--ghost"
|
||
style={{width: '100%', justifyContent: 'center'}}
|
||
>
|
||
<button
|
||
onClick={() => scrollToSection("contact")}
|
||
style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'inherit', font: 'inherit' }}
|
||
>
|
||
Termin anfragen
|
||
</button>
|
||
</MagneticButton>
|
||
</HoverCard>
|
||
</StaggerItem>
|
||
))}
|
||
</StaggerContainer>
|
||
</div>
|
||
</section>
|
||
|
||
{/* USE CASES */}
|
||
<section id="usecases" className="onepage-section">
|
||
<div className="onepage-container">
|
||
<FadeUp>
|
||
<span className="onepage-eyebrow">Für welche Anlässe?</span>
|
||
<h2 className="onepage-h2">Corporate · Hochzeit · Private Feiern</h2>
|
||
</FadeUp>
|
||
<StaggerContainer className="onepage-grid onepage-grid--3" staggerDelay={0.2}>
|
||
{[{
|
||
title: "Corporate Events",
|
||
points: ["Kickoff, Gala, Kunden-Dinner", "Bühne + Close-up kombinierbar", "Seriös, vertraglich & pünktlich"],
|
||
emoji: "🏢"
|
||
}, {
|
||
title: "Hochzeiten",
|
||
points: ["Sektempfang & zwischen den Gängen", "Foto-Momente für das Paar", "Familienfreundlich"],
|
||
emoji: "💒"
|
||
}, {
|
||
title: "Private Feiern",
|
||
points: ["30./40./50. Geburtstag", "Packages & WhatsApp-Kontakt", "Schnelle Antwort <24h"],
|
||
emoji: "🎉"
|
||
}].map((u) => (
|
||
<StaggerItem key={u.title}>
|
||
<HoverCard className="onepage-card">
|
||
<motion.div
|
||
className="text-4xl onepage-mb-4"
|
||
animate={{ rotate: [0, 10, -10, 0] }}
|
||
transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
|
||
>
|
||
{u.emoji}
|
||
</motion.div>
|
||
<h3 className="onepage-h3">{u.title}</h3>
|
||
<ul style={{listStyle: 'none', padding: 0}}>
|
||
{u.points.map((p) => (
|
||
<motion.li
|
||
key={p}
|
||
className="onepage-flex onepage-gap-2 onepage-text"
|
||
style={{marginBottom: '8px'}}
|
||
whileHover={{ x: 5 }}
|
||
transition={{ duration: 0.2 }}
|
||
>
|
||
<Check className="w-4 h-4 text-blue-300 flex-shrink-0" style={{marginTop: '2px'}}/> {p}
|
||
</motion.li>
|
||
))}
|
||
</ul>
|
||
</HoverCard>
|
||
</StaggerItem>
|
||
))}
|
||
</StaggerContainer>
|
||
</div>
|
||
</section>
|
||
|
||
{/* TESTIMONIALS */}
|
||
<section id="testimonials" className="onepage-section">
|
||
<div className="onepage-container">
|
||
<FadeUp>
|
||
<span className="onepage-eyebrow">Bewertungen</span>
|
||
<h2 className="onepage-h2">Vertrauen, das man lesen kann</h2>
|
||
</FadeUp>
|
||
<StaggerContainer className="onepage-grid onepage-grid--3" staggerDelay={0.2}>
|
||
{testimonials.map((t, i) => (
|
||
<StaggerItem key={i}>
|
||
<HoverCard className="onepage-testimonial">
|
||
<div className="quote">"</div>
|
||
<motion.div
|
||
className="text-4xl onepage-mb-4"
|
||
animate={{ scale: [1, 1.1, 1] }}
|
||
transition={{ duration: 2, repeat: Infinity, delay: i * 0.5 }}
|
||
>
|
||
{t.avatar}
|
||
</motion.div>
|
||
<div className="onepage-flex onepage-gap-1 onepage-mb-4">
|
||
{Array.from({length:5}).map((_,j)=>(
|
||
<motion.div
|
||
key={j}
|
||
initial={{ opacity: 0, scale: 0 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
transition={{ delay: 0.5 + j * 0.1 }}
|
||
>
|
||
<Star className="w-4 h-4 onepage-stars" fill="currentColor"/>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
<p className="onepage-text" style={{fontStyle: 'italic'}}>"{t.quote}"</p>
|
||
<div className="onepage-mt-4 onepage-text" style={{fontWeight: '600'}}>— {t.name}</div>
|
||
</HoverCard>
|
||
</StaggerItem>
|
||
))}
|
||
</StaggerContainer>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ABOUT */}
|
||
<section id="about" className="onepage-section">
|
||
<div className="onepage-container">
|
||
<FadeUp>
|
||
<span className="onepage-eyebrow">Über Michael</span>
|
||
<h2 className="onepage-h2">Jung, modern, TV-bekannt</h2>
|
||
</FadeUp>
|
||
<div className="onepage-grid onepage-grid--2">
|
||
<SlideInLeft delay={0.2}>
|
||
<p className="onepage-text" style={{lineHeight: '1.7'}}>
|
||
Michael Peskov gehört zu den jüngsten professionellen Magiern Deutschlands. Seine Auftritte verbinden modernes
|
||
Entertainment mit interaktiver Zauberei und einem einzigartigen Taschendieb-Act – immer respektvoll und sicher.
|
||
Er ist europaweit im Einsatz ({proof.travel}) und wurde u. a. bei {proof.logos.join(", ")} gezeigt.
|
||
</p>
|
||
</SlideInLeft>
|
||
<SlideInRight delay={0.4}>
|
||
<HoverCard className="onepage-card">
|
||
<ul style={{listStyle: 'none', padding: 0}}>
|
||
{[
|
||
{ icon: <ShieldCheck className="w-4 h-4 flex-shrink-0" />, text: "Vertrag & Haftpflicht inklusive" },
|
||
{ icon: <Clock4 className="w-4 h-4 flex-shrink-0" />, text: "Pünktlich, sauberer Ablauf" },
|
||
{ icon: <Users2 className="w-4 h-4 flex-shrink-0" />, text: "Kleine & große Events" }
|
||
].map((item, i) => (
|
||
<motion.li
|
||
key={i}
|
||
className="onepage-flex onepage-gap-2 onepage-text"
|
||
style={{marginBottom: '12px'}}
|
||
initial={{ opacity: 0, x: -20 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
transition={{ delay: 0.6 + i * 0.2 }}
|
||
whileHover={{ x: 5, color: 'var(--primary-400)' }}
|
||
>
|
||
<motion.div style={{marginTop: '2px'}} whileHover={{ scale: 1.2 }}>
|
||
{item.icon}
|
||
</motion.div>
|
||
{item.text}
|
||
</motion.li>
|
||
))}
|
||
</ul>
|
||
</HoverCard>
|
||
</SlideInRight>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* FAQ */}
|
||
<section id="faq" className="onepage-section">
|
||
<div className="onepage-container">
|
||
<FadeUp>
|
||
<span className="onepage-eyebrow">FAQ</span>
|
||
<h2 className="onepage-h2">Häufige Fragen</h2>
|
||
</FadeUp>
|
||
<FadeUp delay={0.2}>
|
||
<AnimatedFAQ faqs={faqs} />
|
||
</FadeUp>
|
||
</div>
|
||
</section>
|
||
|
||
{/* CONTACT / CTA */}
|
||
<section id="contact" className="onepage-section">
|
||
<div className="onepage-container">
|
||
<FadeUp>
|
||
<span className="onepage-eyebrow">Jetzt anfragen</span>
|
||
<h2 className="onepage-h2">Verfügbarkeit & Angebot</h2>
|
||
</FadeUp>
|
||
<ScaleIn delay={0.3}>
|
||
<HoverCard className="onepage-card">
|
||
<form className="onepage-grid onepage-grid--2" onSubmit={(e)=>{e.preventDefault(); alert("Danke! Wir melden uns i. d. R. innerhalb von 24 Stunden.");}}>
|
||
<StaggerContainer className="contents" staggerDelay={0.1}>
|
||
<StaggerItem className="onepage-form-group">
|
||
<label className="onepage-label">Datum</label>
|
||
<motion.input
|
||
required
|
||
type="date"
|
||
className="onepage-input"
|
||
whileFocus={{ scale: 1.02, borderColor: 'var(--primary-400)' }}
|
||
/>
|
||
</StaggerItem>
|
||
<StaggerItem className="onepage-form-group">
|
||
<label className="onepage-label">Ort</label>
|
||
<motion.input
|
||
required
|
||
placeholder="Stadt / Location"
|
||
className="onepage-input"
|
||
whileFocus={{ scale: 1.02, borderColor: 'var(--primary-400)' }}
|
||
/>
|
||
</StaggerItem>
|
||
<StaggerItem className="onepage-form-group">
|
||
<label className="onepage-label">Anlass</label>
|
||
<motion.select
|
||
className="onepage-select"
|
||
whileFocus={{ scale: 1.02, borderColor: 'var(--primary-400)' }}
|
||
>
|
||
<option>Corporate Event</option>
|
||
<option>Hochzeit</option>
|
||
<option>Private Feier</option>
|
||
</motion.select>
|
||
</StaggerItem>
|
||
<StaggerItem className="onepage-form-group">
|
||
<label className="onepage-label">Gästezahl</label>
|
||
<motion.input
|
||
type="number"
|
||
min={1}
|
||
placeholder="z. B. 120"
|
||
className="onepage-input"
|
||
whileFocus={{ scale: 1.02, borderColor: 'var(--primary-400)' }}
|
||
/>
|
||
</StaggerItem>
|
||
<StaggerItem className="onepage-form-group" style={{gridColumn: '1 / -1'}}>
|
||
<label className="onepage-label">Programm</label>
|
||
<div className="onepage-grid onepage-grid--2">
|
||
{acts.map((a)=> (
|
||
<motion.label
|
||
key={a.title}
|
||
className="onepage-flex onepage-gap-2"
|
||
style={{padding: '12px', background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: '12px', cursor: 'pointer'}}
|
||
whileHover={{ scale: 1.02, backgroundColor: 'rgba(255,255,255,0.08)' }}
|
||
whileTap={{ scale: 0.98 }}
|
||
>
|
||
<input type="checkbox" className="onepage-checkbox"/> <span className="onepage-text">{a.title}</span>
|
||
</motion.label>
|
||
))}
|
||
</div>
|
||
</StaggerItem>
|
||
<StaggerItem className="onepage-form-group">
|
||
<label className="onepage-label">Budget (Richtwert)</label>
|
||
<motion.select
|
||
className="onepage-select"
|
||
whileFocus={{ scale: 1.02, borderColor: 'var(--primary-400)' }}
|
||
>
|
||
<option>auf Anfrage</option>
|
||
<option>bis 1.000 €</option>
|
||
<option>1.000 – 2.000 €</option>
|
||
<option>2.000 – 4.000 €</option>
|
||
<option>4.000 € +</option>
|
||
</motion.select>
|
||
</StaggerItem>
|
||
<StaggerItem className="onepage-form-group">
|
||
<label className="onepage-label">Firma (optional)</label>
|
||
<motion.input
|
||
placeholder="Firmenname"
|
||
className="onepage-input"
|
||
whileFocus={{ scale: 1.02, borderColor: 'var(--primary-400)' }}
|
||
/>
|
||
</StaggerItem>
|
||
<StaggerItem className="onepage-form-group">
|
||
<label className="onepage-label">E-Mail</label>
|
||
<motion.input
|
||
required
|
||
type="email"
|
||
placeholder="name@firma.de"
|
||
className="onepage-input"
|
||
whileFocus={{ scale: 1.02, borderColor: 'var(--primary-400)' }}
|
||
/>
|
||
</StaggerItem>
|
||
<StaggerItem className="onepage-form-group">
|
||
<label className="onepage-label">Telefon / WhatsApp</label>
|
||
<motion.input
|
||
placeholder="+49 …"
|
||
className="onepage-input"
|
||
whileFocus={{ scale: 1.02, borderColor: 'var(--primary-400)' }}
|
||
/>
|
||
</StaggerItem>
|
||
<StaggerItem style={{gridColumn: '1 / -1'}}>
|
||
<motion.label
|
||
className="onepage-flex onepage-gap-2 onepage-text"
|
||
whileHover={{ x: 5 }}
|
||
>
|
||
<input type="checkbox" className="onepage-checkbox"/> Rückruf per WhatsApp gewünscht
|
||
</motion.label>
|
||
</StaggerItem>
|
||
<StaggerItem className="onepage-flex onepage-flex-wrap onepage-gap-3" style={{gridColumn: '1 / -1'}}>
|
||
<MagneticButton>
|
||
<button type="submit" className="onepage-btn onepage-btn--primary onepage-flex onepage-gap-2" style={{border: 'none', background: 'none', color: 'inherit'}}>
|
||
<Calendar className="w-4 h-4"/> Anfrage senden
|
||
</button>
|
||
</MagneticButton>
|
||
<MagneticButton>
|
||
<a href="mailto:booking@michaelpeskov.de" className="onepage-btn onepage-btn--ghost onepage-flex onepage-gap-2">
|
||
<Mail className="w-4 h-4"/> booking@michaelpeskov.de
|
||
</a>
|
||
</MagneticButton>
|
||
<MagneticButton>
|
||
<a href="tel:+491234567890" className="onepage-btn onepage-btn--ghost onepage-flex onepage-gap-2">
|
||
<Phone className="w-4 h-4"/> +49 123 456 7890
|
||
</a>
|
||
</MagneticButton>
|
||
</StaggerItem>
|
||
</StaggerContainer>
|
||
</form>
|
||
</HoverCard>
|
||
</ScaleIn>
|
||
<FadeUp delay={0.5}>
|
||
<p className="onepage-text" style={{fontSize: '0.75rem', marginTop: '12px', opacity: 0.7}}>
|
||
Antwort in der Regel innerhalb von 24 Stunden. Ihre Daten werden nur zur Bearbeitung der Anfrage verwendet.
|
||
</p>
|
||
</FadeUp>
|
||
</div>
|
||
</section>
|
||
|
||
{/* FOOTER */}
|
||
<footer className="onepage-footer">
|
||
<div className="onepage-container">
|
||
<FadeUp>
|
||
<div className="onepage-footer-content">
|
||
<motion.div
|
||
className="onepage-flex onepage-gap-2"
|
||
whileHover={{ scale: 1.05 }}
|
||
>
|
||
<motion.div
|
||
whileHover={{ rotate: 360 }}
|
||
transition={{ duration: 0.8, ease: "easeInOut" }}
|
||
>
|
||
<Image src="/icon.png" alt="Michael Peskov Magic Logo" width={16} height={16} />
|
||
</motion.div>
|
||
<span>Michael Peskov Magic</span>
|
||
</motion.div>
|
||
<div className="onepage-footer-text">© {new Date().getFullYear()} – All rights reserved.</div>
|
||
</div>
|
||
</FadeUp>
|
||
</div>
|
||
</footer>
|
||
|
||
{/* JSON-LD */}
|
||
<script
|
||
type="application/ld+json"
|
||
dangerouslySetInnerHTML={{
|
||
__html: JSON.stringify({
|
||
"@context": "https://schema.org",
|
||
"@type": "Organization",
|
||
name: "Michael Peskov Magic",
|
||
url: "https://michaelpeskov.de",
|
||
sameAs: ["https://instagram.com/", "https://www.youtube.com/"],
|
||
aggregateRating: {
|
||
"@type": "AggregateRating",
|
||
ratingValue: proof.rating,
|
||
reviewCount: proof.reviews,
|
||
},
|
||
areaServed: "Europe",
|
||
}),
|
||
}}
|
||
/>
|
||
</div>
|
||
)
|
||
} |