Дистанційний освітній центр "Поруч"
menu
person
РеєстраціяВхід
Головна » Файли » Підручники » Українська література
Тарас Григорович Шевченко Подорож в Україну 1843 року
2025-10-12, 2:20 PM
import React, { useState } from 'react';
import { Book, Ship, Palette, Users, Home, Feather, MapPin, Mountain, Church, Heart } from 'lucide-react';

const TimelineEvent = ({ year, date, title, description, icon: Icon, isActive, onClick }) => {
return (
<div className="relative flex flex-col items-center">
<div
onClick={onClick}
className={`cursor-pointer transition-all duration-300 transform hover:scale-110 ${
isActive ? 'scale-110' : ''
}`}
>
<div
className={`w-16 h-16 rounded-full flex items-center justify-center shadow-lg transition-all duration-300 ${
isActive
? 'bg-gradient-to-br from-yellow-400 to-amber-600 ring-4 ring-yellow-300'
: 'bg-gradient-to-br from-blue-400 to-blue-600 hover:from-blue-500 hover:to-blue-700'
}`}
>
<Icon className="w-8 h-8 text-white" />
</div>
</div>
<div className="mt-2 text-center">
<div className="text-sm font-bold text-gray-800">{year}</div>
{date && <div className="text-xs text-gray-600">{date}</div>}
</div>
{isActive && (
<div className="absolute top-20 left-1/2 transform -translate-x-1/2 w-64 bg-white rounded-lg shadow-2xl p-4 border-2 border-yellow-400 z-10 animate-fade-in">
<h3 className="font-bold text-lg text-amber-800 mb-2">{title}</h3>
<p className="text-sm text-gray-700 leading-relaxed">{description}</p>
</div>
)}
</div>
);
};

const Timeline = () => {
const [activeIndex, setActiveIndex] = useState(null);

const events = [
{
year: '1831',
date: '',
title: 'Приїзд до Петербурга',
description: '15-річний Тарас Шевченко приїжджає до Петербурга як кріпак свого пана Павла Енгельгардта. Починається новий етап його життя у столиці Російської імперії.',
icon: Ship
},
{
year: '1838',
date: '',
title: 'Знайомство з Сошенком',
description: 'Доленосна зустріч з художником Іваном Сошенком, який став близьким другом. Сошенко познайомив Шевченка з відомими митцями та допоміг організувати викуп з кріпацтва.',
icon: Users
},
{
year: '1838',
date: '22 квітня',
title: 'Викуп з кріпацтва',
description: 'Завдяки зусиллям друзів, зокрема Карла Брюллова, який намалював портрет Жуковського для лотереї, Шевченко викуплений з кріпацтва за 2500 карбованців. Починається вільне життя.',
icon: Heart
},
{
year: '1838-1845',
date: '',
title: 'Навчання в Академії',
description: 'Шевченко навчається в Петербурзькій Академії мистецтв, удосконалює свій талант художника. Одночасно пише українською мовою, створюючи свої перші поетичні твори.',
icon: Palette
},
{
year: '1840',
date: '',
title: 'Перше видання "Кобзаря"',
description: 'У Петербурзі виходить перша збірка поезій Шевченка "Кобзар", яка містить вісім творів. Це видання стало визначною подією в українській літературі.',
icon: Book
},
{
year: '1843',
date: 'травень',
title: 'Початок подорожі Україною',
description: 'Шевченко вирушає в довгоочікувану подорож до рідної України. Це перша поїздка на батьківщину після отримання волі. Подорож глибоко вразила поета.',
icon: Home
},
{
year: '1843',
date: 'червень',
title: 'Відвідини Києва',
description: 'Перебування в Києві, відвідини святинь, знайомство з українською інтелігенцією. Шевченко вражений красою Дніпра та давніх храмів.',
icon: Church
},
{
year: '1843',
date: 'липень',
title: 'Подорож Наддніпрянщиною',
description: 'Шевченко мандрує селами і містами України, спостерігає за життям народу, відвідує козацькі могили та курганні поховання. Ці враження стають основою для майбутніх творів.',
icon: MapPin
},
{
year: '1843',
date: 'серпень',
title: 'Розкопки курганів',
description: 'Поет стає свідком археологічних розкопок давніх курганів. Бачить, як руйнуються могили предків, як розкрадаються скарби. Ці події глибоко обурюють Шевченка.',
icon: Mountain
},
{
year: '1843',
date: 'осінь',
title: 'Створення "Розритої могили"',
description: 'Під враженням від подорожі та побаченого осквернення могил Шевченко пише поему "Розрита могила" - гнівний протест проти руйнування історичної пам\'яті та поневолення народу.',
icon: Feather
}
];

return (
<div className="min-h-screen bg-gradient-to-br from-blue-50 via-amber-50 to-blue-100 p-8">
<div className="max-w-6xl mx-auto">
<div className="text-center mb-12">
<h1 className="text-4xl font-bold text-gray-800 mb-2">
Тарас Григорович Шевченко
</h1>
<h2 className="text-2xl text-amber-700 mb-4">
Подорож в Україну 1843 року
</h2>
<p className="text-gray-600 max-w-2xl mx-auto">
Історія життя великого поета від кріпацтва до вільного митця та його подорож Україною,
що надихнула на створення поеми "Розрита могила"
</p>
</div>

<div className="bg-white rounded-xl shadow-2xl p-8 mb-8">
<div className="relative">
<div className="absolute top-8 left-0 right-0 h-1 bg-gradient-to-r from-blue-400 via-amber-400 to-blue-400"></div>

<div className="grid grid-cols-2 md:grid-cols-5 gap-8 relative">
{events.map((event, index) => (
<TimelineEvent
key={index}
{...event}
isActive={activeIndex === index}
onClick={() => setActiveIndex(activeIndex === index ? null : index)}
/>
))}
</div>
</div>
</div>

<div className="bg-gradient-to-r from-amber-100 to-yellow-100 rounded-lg p-6 shadow-lg">
<p className="text-center text-gray-700 italic">
"Оце моя Україна, / За неї я молюсь..."
</p>
<p className="text-center text-sm text-gray-600 mt-2">
Натисніть на дату, щоб дізнатися більше про подію
</p>
</div>
</div>

<style jsx>{`
@keyframes fade-in {
from {
opacity: 0;
transform: translateX(-50%) translateY(-10px);
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
.animate-fade-in {
animation: fade-in 0.3s ease-out;
}
`}</style>
</div>
);
};

export default Timeline;
Категорія: Українська література | Додав: NANA
Переглядів: 18 | Завантажень: 0 | Рейтинг: 0.0/0
Криголам  
Всього коментарів: 0
Увійдіть:
avatar