import { useState } from 'react';
import { ChevronLeft, ChevronRight } from 'lucide-react';
import { ImageWithFallback } from './components/figma/ImageWithFallback';
const slides = [
{
id: 1,
type: 'hook',
title: '7 сторис,',
subtitle: 'которые приводят пациентов',
bgColor: 'bg-neutral-900',
accentColor: 'bg-gradient-to-r from-blue-500 to-purple-500'
},
{
id: 2,
number: '01',
title: 'Ты — живой человек',
description: '(утро, мысли)',
bgColor: 'bg-white',
accentColor: 'from-rose-500 to-pink-500',
emoji: '☕'
},
{
id: 3,
number: '02',
title: 'Работа в процессе',
description: '(без крови и треша)',
bgColor: 'bg-white',
accentColor: 'from-purple-500 to-violet-500',
emoji: '????'
},
{
id: 4,
number: '03',
title: 'Объяснение «зачем это»',
description: 'Образовательный контент ценится больше всего',
bgColor: 'bg-white',
accentColor: 'from-blue-500 to-cyan-500',
emoji: '????'
},
{
id: 5,
number: '04',
title: 'Ответ на страх пациента',
description: 'Закрывай возражения до того, как они появились',
bgColor: 'bg-white',
accentColor: 'from-teal-500 to-emerald-500',
emoji: '????'
},
{
id: 6,
number: '05',
title: 'Отзыв / переписка',
description: 'Социальное доказательство работает всегда',
bgColor: 'bg-white',
accentColor: 'from-amber-500 to-orange-500',
emoji: '⭐'
},
{
id: 7,
number: '06',
title: 'Личное мнение',
description: '(очень важно)',
bgColor: 'bg-white',
accentColor: 'from-orange-500 to-red-500',
emoji: '????'
},
{
id: 8,
type: 'cta',
title: 'Сохрани и делай это',
subtitle: '14 дней подряд',
highlight: 'Результат гарантирован',
bgColor: 'bg-neutral-900',
accentColor: 'from-pink-500 to-purple-500'
}
];
export default function App() {
const [currentSlide, setCurrentSlide] = useState(0);
const nextSlide = () => {
setCurrentSlide((prev) => (prev + 1) % slides.length);
};
const prevSlide = () => {
setCurrentSlide((prev) => (prev - 1 + slides.length) % slides.length);
};
const goToSlide = (index: number) => {
setCurrentSlide(index);
};
const slide = slides[currentSlide];
return (
{/* Main Slide Container */}
{/* Content */}
{slide.type === 'hook' && (
<>
{/* Background Image */}
{/* Dark gradient overlay for text readability */}
{/* Text Content */}
{slide.title}
{slide.subtitle}
)}
{slide.type === 'cta' && (
????
{slide.title}
{slide.highlight} ✨
)}
{!slide.type && (
{/* Top Section with Gradient Block */}
{/* Gradient Header Block */}
{slide.number}
{slide.emoji}
{slide.title}
{/* Description Card */}
{/* Bottom Pattern */}
)}
{/* Slide Counter */}
{currentSlide + 1} / {slides.length}
{/* Navigation Buttons */}
{/* Slide Indicators */}
{slides.map((_, index) => (
{/* Instructions */}
Используйте стрелки для навигации
);
}