Voodoo2Docker/deepsite-project-2wvaa
0
1<!DOCTYPE html>2<html lang="ru">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Блог — Genealogy AI</title>7 <meta name="description" content="Статьи о генеалогии, семейной истории, психологии и методах исследования.">8 9 <script src="https://cdn.tailwindcss.com"></script>10 <link rel="preconnect" href="https://fonts.googleapis.com">11 <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">12 13 <script>14 tailwind.config = {15 theme: {16 extend: {17 colors: {18 'paper': '#F5F1E8',19 'paper-light': '#FAF7F0',20 'terracotta': '#C65D3B',21 'terracotta-dark': '#A84B2D',22 'ink': '#2C3E50',23 'ink-light': '#5D6D7E',24 'sepia': '#8B7355'25 },26 fontFamily: {27 'serif': ['Cormorant Garamond', 'serif'],28 'sans': ['Inter', 'sans-serif']29 }30 }31 }32 }33 </script>34 35 <style>36 .textured-paper {37 background-color: #F5F1E8;38 background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");39 }40 .vintage-border { border: 2px solid #8B7355; box-shadow: 4px 4px 0px rgba(139, 115, 85, 0.2); }41 .ornament::before, .ornament::after { content: '❦'; color: #C65D3B; margin: 0 1rem; }42 .ornament { text-align: center; }43 .article-card:hover .article-image {44 transform: scale(1.05);45 }46 </style>47</head>48<body class="textured-paper text-ink font-sans">49 50 <!-- Navigation -->51 <nav class="sticky top-0 z-50 bg-paper/95 backdrop-blur-sm border-b border-sepia/20">52 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">53 <div class="flex justify-between items-center h-20">54 <a href="index.html" class="flex items-center space-x-2">55 <i data-lucide="scroll-text" class="w-8 h-8 text-terracotta"></i>56 <span class="font-serif text-2xl font-bold text-ink">Genealogy AI</span>57 </a>58 <div class="hidden md:flex space-x-8">59 <a href="index.html" class="text-ink hover:text-terracotta transition">Главная</a>60 <a href="how-it-works.html" class="text-ink hover:text-terracotta transition">Как это работает</a>61 <a href="pricing.html" class="text-ink hover:text-terracotta transition">Тарифы</a>62 <a href="blog.html" class="text-terracotta font-medium">Блог</a>63 <a href="about.html" class="text-ink hover:text-terracotta transition">О нас</a>64 </div>65 <a href="app/dashboard.html" class="bg-terracotta text-white px-6 py-2.5 rounded-sm hover:bg-terracotta-dark transition">Войти</a>66 </div>67 </div>68 </nav>69 70 <!-- Articles Section -->71 <section class="py-20">72 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">73 <h2 class="font-serif text-4xl font-bold text-ink mb-4 ornament text-center">Статьи и исследования</h2>74 <p class="text-center text-ink-light mb-16 max-w-2xl mx-auto">Генеалогия, психология семьи, методы исследования и истории наших клиентов</p>75 76 <div class="grid md:grid-cols-3 gap-8">77 78 <!-- Article 1 -->79 <article class="article-card bg-white rounded-lg vintage-border overflow-hidden group cursor-pointer">80 <div class="h-48 overflow-hidden">81 <img src="http://static.photos/library/400x300/601" alt="Генеалогия" class="article-image w-full h-full object-cover transition duration-500 sepia-[.1]">82 </div>83 <div class="p-6">84 <div class="flex items-center text-xs text-terracotta mb-3 space-x-2">85 <span class="bg-terracotta/10 px-2 py-1 rounded">Генеалогия</span>86 <span class="text-ink-light">15 мин чтения</span>87 </div>88 <h3 class="font-serif text-xl font-bold text-ink mb-3 group-hover:text-terracotta transition">Как начать исследование своей семьи: пошаговое руководство</h3>89 <p class="text-ink-light text-sm mb-4 line-clamp-3">С чего начать, если вы знаете только фамилию деда? Разбираем базовые источники, методы опроса родственников и первые шаги в архивах.</p>90 <div class="flex items-center text-terracotta text-sm font-medium">91 <span>Читать далее</span>92 <i data-lucide="arrow-right" class="w-4 h-4 ml-2"></i>93 </div>94 </div>95 </article>96 97 <!-- Article 2 -->98 <article class="article-card bg-white rounded-lg vintage-border overflow-hidden group cursor-pointer">99 <div class="h-48 overflow-hidden">100 <img src="http://static.photos/people/400x300/602" alt="Психология" class="article-image w-full h-full object-cover transition duration-500 sepia-[.1]">101 </div>102 <div class="p-6">103 <div class="flex items-center text-xs text-terracotta mb-3 space-x-2">104 <span class="bg-terracotta/10 px-2 py-1 rounded">Психология</span>105 <span class="text-ink-light">12 мин чтения</span>106 </div>107 <h3 class="font-serif text-xl font-bold text-ink mb-3 group-hover:text-terracotta transition">Почему дети должны знать свои корни</h3>108 <p class="text-ink-light text-sm mb-4 line-clamp-3">Исследования показывают: подростки, знающие историю семьи, лучше справляются со стрессом и имеют более высокую самооценку. Разбираем механизмы.</p>109 <div class="flex items-center text-terracotta text-sm font-medium">110 <span>Читать далее</span>111 <i data-lucide="arrow-right" class="w-4 h-4 ml-2"></i>112 </div>113 </div>114 </article>115 116 <!-- Article 3 -->117 <article class="article-card bg-white rounded-lg vintage-border overflow-hidden group cursor-pointer">118 <div class="h-48 overflow-hidden">119 <img src="http://static.photos/office/400x300/603" alt="Архивы" class="article-image w-full h-full object-cover transition duration-500 sepia-[.1]">120 </div>121 <div class="p-6">122 <div class="flex items-center text-xs text-terracotta mb-3 space-x-2">123 <span class="bg-terracotta/10 px-2 py-1 rounded">Методология</span>124 <span class="text-ink-light">18 мин чтения</span>125 </div>126 <h3 class="font-serif text-xl font-bold text-ink mb-3 group-hover:text-terracotta transition">Где искать документы о предках: 10 главных архивов России</h3>127 <p class="text-ink-light text-sm mb-4 line-clamp-3">Обзор федеральных и региональных архивов, которые хранят метрические книги, ревизские сказки и военные документы. Как получить доступ и что искать.</p>128 <div class="flex items-center text-terracotta text-sm font-medium">129 <span>Читать далее</span>130 <i data-lucide="arrow-right" class="w-4 h-4 ml-2"></i>131 </div>132 </div>133 </article>134 135 </div>136 137 <!-- Pagination -->138 <div class="flex justify-center mt-12 space-x-2">139 <button class="w-10 h-10 rounded bg-terracotta text-white font-medium">1</button>140 <button class="w-10 h-10 rounded border border-sepia/30 text-ink hover:bg-terracotta/10 transition">2</button>141 <button class="w-10 h-10 rounded border border-sepia/30 text-ink hover:bg-terracotta/10 transition">3</button>142 <span class="w-10 h-10 flex items-center justify-center text-ink-light">...</span>143 <button class="w-10 h-10 rounded border border-sepia/30 text-ink hover:bg-terracotta/10 transition">144 <i data-lucide="chevron-right" class="w-5 h-5 mx-auto"></i>145 </button>146 </div>147 </div>148 </section>149 150 <!-- Newsletter -->151 <section class="py-20 bg-paper-light border-y border-sepia/10">152 <div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 text-center">153 <h3 class="font-serif text-3xl font-bold text-ink mb-4">Подписаться на новости</h3>154 <p class="text-ink-light mb-8">Раз в месяц отправляем подборку материалов о генеалогии и истории. Без спама.</p>155 156 <form class="flex flex-col sm:flex-row gap-4">157 <input type="email" placeholder="Ваш email" class="flex-1 px-6 py-3 rounded-sm border border-sepia/30 bg-white focus:outline-none focus:border-terracotta">158 <button type="submit" class="bg-terracotta text-white px-8 py-3 rounded-sm hover:bg-terracotta-dark transition font-medium">159 Подписаться160 </button>161 </form>162 </div>163 </section>164 165 <!-- Footer -->166 <footer class="bg-ink text-paper/80 py-12 border-t-4 border-terracotta">167 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">168 <div class="grid md:grid-cols-4 gap-8 mb-8">169 <div class="col-span-2">170 <div class="flex items-center space-x-2 mb-4">171 <i data-lucide="scroll-text" class="w-8 h-8 text-terracotta"></i>172 <span class="font-serif text-2xl font-bold text-paper">Genealogy AI</span>173 </div>174 <p class="text-sm text-paper/60 mb-4">Превращаем семейные истории в наследие. AI-исследования, генеалогические древа и семейные газеты.</p>175 <div class="flex space-x-4 items-center">176 <a href="https://vk.com" target="_blank" class="hover:text-terracotta transition text-paper/80 font-medium text-sm">VK</a>177 <a href="https://telegram.org" target="_blank" class="hover:text-terracotta transition"><i data-lucide="send" class="w-5 h-5"></i></a>178 <a href="https://max.com" target="_blank" class="hover:text-terracotta transition text-paper/80 font-medium text-sm">MAX</a>179 </div>180 </div>181 182 <div>183 <h4 class="font-serif text-lg font-bold text-paper mb-4">Правовая информация</h4>184 <ul class="space-y-2 text-sm">185 <li><a href="privacy.html" class="hover:text-terracotta transition">Положение о конфиденциальности</a></li>186 <li><a href="terms.html" class="hover:text-terracotta transition">Пользовательское соглашение</a></li>187 <li><a href="personal-data.html" class="hover:text-terracotta transition">Работа с персональными данными</a></li>188 </ul>189 </div>190 191 <div>192 <h4 class="font-serif text-lg font-bold text-paper mb-4">Контакты</h4>193 <ul class="space-y-2 text-sm">194 <li class="flex items-center"><i data-lucide="mail" class="w-4 h-4 mr-2 text-terracotta"></i> gen@gen.ru</li>195 <li class="flex items-center"><i data-lucide="map-pin" class="w-4 h-4 mr-2 text-terracotta"></i> Москва, Россия</li>196 </ul>197 </div>198 </div>199 200 <div class="border-t border-paper/20 pt-8 flex flex-col md:flex-row justify-between items-center text-sm text-paper/60">201 <p>© 2024 Genealogy AI. Все права защищены.</p>202 </div>203 </div>204 </footer>205 206 <script src="https://unpkg.com/lucide@latest"></script>207 <script>lucide.createIcons();</script>208</body>209</html>