Загрузка...
Секция с карточками функций для SaaS и лендингов. Адаптивный дизайн, темная тема, иконки, статистика, CTA. TailwindCSS.
<section class="relative z-10 bg-gradient-to-b from-[#000000] to-[#0A0A11]">
<div class="max-w-6xl sm:px-6 lg:px-8 mr-auto ml-auto pt-20 pr-4 pb-20 pl-4">
<div class="text-center mb-16">
<h2 class="sm:text-4xl text-3xl font-semibold text-white tracking-tight">Everything you need to create amazing stories</h2>
<p class="mt-4 text-zinc-300 max-w-2xl mx-auto">From AI-generated plots to custom illustrations, bring your children's stories to life with professional-quality results.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 items-stretch">
<!-- AI Storytelling -->
<div class="relative h-full ring-1 ring-white/10 max-w-xl flex flex-col bg-neutral-900/30 rounded-3xl backdrop-blur">
<div class="sm:p-8 flex-1 pt-6 pr-6 pb-6 pl-6 space-y-4">
<div class="flex items-center gap-3">
<div class="h-10 w-10 flex ring-1 ring-white/20 bg-gradient-to-t from-slate-900/20 to-slate-700/30 rounded-xl items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="brain" class="lucide lucide-brain w-[20px] h-[20px]" style="stroke-width: 1.5; width: 20px; height: 20px; color: rgb(255, 255, 255);" data-icon-replaced="true"><path d="M12 18V5" class=""></path><path d="M15 13a4.17 4.17 0 0 1-3-4 4.17 4.17 0 0 1-3 4" class=""></path><path d="M17.598 6.5A3 3 0 1 0 12 5a3 3 0 1 0-5.598 1.5" class=""></path><path d="M17.997 5.125a4 4 0 0 1 2.526 5.77" class=""></path><path d="M18 18a4 4 0 0 0 2-7.464" class=""></path><path d="M19.967 17.483A4 4 0 1 1 12 18a4 4 0 1 1-7.967-.517" class=""></path><path d="M6 18a4 4 0 0 1-2-7.464" class=""></path><path d="M6.003 5.125a4 4 0 0 0-2.526 5.77" class=""></path></svg>
</div>
<span class="text-sm font-medium text-slate-400">AI Storytelling</span>
</div>
<h3 class="text-2xl font-semibold tracking-tight text-white">Smart Story Generation</h3>
<p class="text-sm leading-relaxed text-neutral-300">
Our advanced AI creates engaging, age-appropriate stories with compelling characters, meaningful lessons, and educational values that children love. Each story is uniquely crafted to spark imagination while teaching important life skills.
</p>
<!-- Story Features -->
<div class="space-y-3">
<div class="flex items-start gap-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check-circle" class="lucide lucide-check-circle w-4 h-4 text-blue-300 mt-0.5 flex-shrink-0" style="stroke-width: 1.5;"><path d="M21.801 10A10 10 0 1 1 17 3.335" class=""></path><path d="m9 11 3 3L22 4" class=""></path></svg>
<div class="text-xs text-neutral-300">
<span class="font-medium text-white">Personalized Characters:</span> Create unique protagonists based on your child's interests and personality
</div>
</div>
<div class="flex items-start gap-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check-circle" class="lucide lucide-check-circle w-4 h-4 text-blue-300 mt-0.5 flex-shrink-0" style="stroke-width: 1.5;"><path d="M21.801 10A10 10 0 1 1 17 3.335" class=""></path><path d="m9 11 3 3L22 4" class=""></path></svg>
<div class="text-xs text-neutral-300">
<span class="font-medium text-white">Educational Themes:</span> Stories that teach friendship, courage, kindness, and problem-solving
</div>
</div>
<div class="flex items-start gap-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check-circle" class="lucide lucide-check-circle flex-shrink-0 mt-0.5 w-[16px] h-[16px]" style="stroke-width: 1.5; width: 16px; height: 16px; color: rgb(147, 197, 253);" data-icon-replaced="true"><path d="M21.801 10A10 10 0 1 1 17 3.335" class=""></path><path d="m9 11 3 3L22 4" class=""></path></svg>
<div class="text-xs text-neutral-300">
<span class="font-medium text-white">Multiple Lengths:</span> Short bedtime tales to longer chapter books for different attention spans
</div>
</div>
</div>
<div class="flex flex-wrap gap-2 mt-4">
<span class="inline-flex items-center gap-1.5 ring-1 ring-stone-400/20 text-xs text-slate-50 bg-slate-400/10 rounded-md pt-1 pr-2 pb-1 pl-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="zap" class="lucide lucide-zap w-3 h-3" style="stroke-width: 1.5;"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z" class=""></path></svg>
Fast Generation
</span>
<span class="inline-flex items-center gap-1.5 ring-1 ring-stone-400/20 text-xs text-slate-50 bg-slate-400/10 rounded-md pt-1 pr-2 pb-1 pl-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="heart" class="lucide lucide-heart w-3 h-3" style="stroke-width: 1.5;"><path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5" class=""></path></svg>
Age-Appropriate
</span>
<span class="inline-flex items-center gap-1.5 ring-1 ring-stone-400/20 text-xs text-slate-50 bg-slate-400/10 rounded-md pt-1 pr-2 pb-1 pl-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="globe" class="lucide lucide-globe w-3 h-3" style="stroke-width: 1.5;"><circle cx="12" cy="12" r="10" class=""></circle><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" class=""></path><path d="M2 12h20" class=""></path></svg>
Multi-Language
</span>
</div>
<!-- Story Statistics -->
<div class="pt-4 border-t border-white/10">
<div class="grid grid-cols-3 gap-4 text-center">
<div>
<div class="text-lg font-semibold text-white">500+</div>
<div class="text-xs text-neutral-400">Story Templates</div>
</div>
<div class="">
<div class="text-lg font-semibold text-white">50+</div>
<div class="text-xs text-neutral-400">Character Types</div>
</div>
<div class="">
<div class="text-lg font-semibold text-white">15</div>
<div class="text-xs text-neutral-400">Languages</div>
</div>
</div>
</div>
</div>
</div>
<!-- Custom Illustrations -->
<div class="relative ring-1 ring-white/5 max-w-xl h-full flex flex-col bg-neutral-900/40 border-neutral-800/70 border rounded-3xl shadow-2xl backdrop-blur">
<div class="relative sm:p-6 lg:p-8 flex-1 flex flex-col pt-5 pr-5 pb-5 pl-5">
<div class="flex items-center gap-3 mb-4">
<div class="h-10 w-10 flex ring-1 ring-white/20 bg-gradient-to-t from-slate-900/20 to-slate-700/30 rounded-xl items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="palette" class="lucide lucide-palette w-5 h-5 text-white" style="stroke-width: 1.5;"><path d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z" class=""></path><circle cx="13.5" cy="6.5" r=".5" fill="currentColor" class=""></circle><circle cx="17.5" cy="10.5" r=".5" fill="currentColor" class=""></circle><circle cx="6.5" cy="12.5" r=".5" fill="currentColor" class=""></circle><circle cx="8.5" cy="7.5" r=".5" fill="currentColor" class=""></circle></svg>
</div>
<span class="text-sm font-medium text-slate-400">Custom Artwork</span>
</div>
<h3 class="text-2xl font-semibold tracking-tight text-white mb-4">Beautiful Illustrations</h3>
<p class="text-sm leading-relaxed text-neutral-300 mb-6">
Every story comes with unique, colorful illustrations that match your narrative perfectly.
</p>
<!-- Illustration Preview -->
<div class="grid grid-cols-2 gap-2 mb-4">
<div class="aspect-square flex bg-gradient-to-br from-pink-200 to-orange-200 bg-[url(https://cdn.midjourney.com/1486a48c-9a3e-45a2-907b-95cc2b1c5f6d/0_0.png?w=800&q=80)] bg-cover rounded-lg items-center justify-center" style="">
<span class="inline-flex h-9 w-9 items-center justify-center shadow-[inset_0_0_0_2px_rgba(255,255,255,0.06)] text-white bg-gray-50/50 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="sun" class="lucide lucide-sun w-[18px] h-[18px] text-slate-950" aria-hidden="true" data-icon-replaced="true" style="width: 18px; height: 18px;"><circle cx="12" cy="12" r="4" class=""></circle><path d="M12 2v2" class=""></path><path d="M12 20v2" class=""></path><path d="m4.93 4.93 1.41 1.41" class=""></path><path d="m17.66 17.66 1.41 1.41" class=""></path><path d="M2 12h2" class=""></path><path d="M20 12h2" class=""></path><path d="m6.34 17.66-1.41 1.41" class=""></path><path d="m19.07 4.93-1.41 1.41" class=""></path></svg>
</span>
</div>
<div class="aspect-square flex bg-gradient-to-br from-blue-200 to-purple-200 bg-[url(https://cdn.midjourney.com/988c48a8-3d68-40b7-8b55-026340f2d195/0_0.png?w=800&q=80)] bg-cover rounded-lg items-center justify-center">
<span class="inline-flex h-9 w-9 items-center justify-center shadow-[inset_0_0_0_2px_rgba(255,255,255,0.06)] text-white bg-gray-50/50 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="moon" class="lucide lucide-moon lucide-sun w-[18px] h-[18px] text-slate-950" aria-hidden="true" data-icon-replaced="true" style="width: 18px; height: 18px;"><path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401" class=""></path></svg>
</span>
</div>
<div class="aspect-square flex bg-gradient-to-br from-green-200 to-emerald-200 bg-cover rounded-lg items-center justify-center bg-[url(https://cdn.midjourney.com/0e29691d-e0cf-4acc-9544-d6013e7223dd/0_0.png?w=800&q=80)] bg-center">
<span class="inline-flex h-9 w-9 items-center justify-center shadow-[inset_0_0_0_2px_rgba(255,255,255,0.06)] text-white bg-gray-50/50 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="hop-off" class="lucide lucide-hop-off lucide-sun w-[18px] h-[18px] text-slate-950" aria-hidden="true" data-icon-replaced="true" style="width: 18px; height: 18px;"><path d="M10.82 16.12c1.69.6 3.91.79 5.18.85.28.01.53-.09.7-.27" class=""></path><path d="M11.14 20.57c.52.24 2.44 1.12 4.08 1.37.46.06.86-.25.9-.71.12-1.52-.3-3.43-.5-4.28" class=""></path><path d="M16.13 21.05c1.65.63 3.68.84 4.87.91a.9.9 0 0 0 .7-.26" class=""></path><path d="M17.99 5.52a20.83 20.83 0 0 1 3.15 4.5.8.8 0 0 1-.68 1.13c-1.17.1-2.5.02-3.9-.25" class=""></path><path d="M20.57 11.14c.24.52 1.12 2.44 1.37 4.08.04.3-.08.59-.31.75" class=""></path><path d="M4.93 4.93a10 10 0 0 0-.67 13.4c.35.43.96.4 1.17-.12.69-1.71 1.07-5.07 1.07-6.71 1.34.45 3.1.9 4.88.62a.85.85 0 0 0 .48-.24" class=""></path><path d="M5.52 17.99c1.05.95 2.91 2.42 4.5 3.15a.8.8 0 0 0 1.13-.68c.2-2.34-.33-5.3-1.57-8.28" class=""></path><path d="M8.35 2.68a10 10 0 0 1 9.98 1.58c.43.35.4.96-.12 1.17-1.5.6-4.3.98-6.07 1.05" class=""></path><path d="m2 2 20 20" class=""></path></svg>
</span>
</div>
<div class="aspect-square flex bg-gradient-to-br from-yellow-200 to-amber-200 bg-[url(https://cdn.midjourney.com/f163e230-a688-4d0b-9455-a8704cc6b17a/0_0.png?w=800&q=80)] bg-cover rounded-lg items-center justify-center">
<span class="inline-flex h-9 w-9 items-center justify-center shadow-[inset_0_0_0_2px_rgba(255,255,255,0.06)] text-white bg-gray-50/50 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="sun" class="lucide lucide-sun w-[18px] h-[18px] text-slate-950" aria-hidden="true" data-icon-replaced="true" style="width: 18px; height: 18px;"><circle cx="12" cy="12" r="4" class=""></circle><path d="M12 2v2" class=""></path><path d="M12 20v2" class=""></path><path d="m4.93 4.93 1.41 1.41" class=""></path><path d="m17.66 17.66 1.41 1.41" class=""></path><path d="M2 12h2" class=""></path><path d="M20 12h2" class=""></path><path d="m6.34 17.66-1.41 1.41" class=""></path><path d="m19.07 4.93-1.41 1.41" class=""></path></svg>
</span>
</div>
</div>
<div class="flex gap-2">
<button class="flex-1 inline-flex hover:bg-neutral-100 active:bg-neutral-200 transition text-sm font-medium text-neutral-900 tracking-tight bg-white rounded-lg pt-2 pr-3.5 pb-2 pl-3.5 items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="wand-2" class="lucide lucide-wand-2 w-4 h-4 mr-2" style="stroke-width: 1.5;"><path d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72" class=""></path><path d="m14 7 3 3" class=""></path><path d="M5 6v4" class=""></path><path d="M19 14v4" class=""></path><path d="M10 2v2" class=""></path><path d="M7 8H3" class=""></path><path d="M21 16h-4" class=""></path><path d="M11 3H9" class=""></path></svg>
Customize Style
</button>
</div>
</div>
</div>
<!-- Publishing Options -->
<div class="relative ring-1 ring-white/5 bg-neutral-900/40 border-neutral-800/70 border rounded-3xl shadow-2xl backdrop-blur max-w-xl h-full flex flex-col">
<div class="relative sm:p-6 flex-1 border-white/10 border-b pt-5 pr-5 pb-5 pl-5">
<div class="flex items-center gap-3 mb-4">
<div class="h-10 w-10 flex ring-1 ring-white/20 bg-gradient-to-t from-slate-900/20 to-slate-700/30 rounded-xl items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="book" class="lucide lucide-book w-5 h-5 text-white" style="stroke-width: 1.5;"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20" class=""></path></svg>
</div>
<span class="text-sm font-medium text-slate-400">Publishing</span>
</div>
<h3 class="text-[20px] sm:text-[22px] font-semibold tracking-tight text-white mb-4">
Multiple Formats
</h3>
<div class="space-y-3 mb-6">
<div class="flex items-center gap-3 rounded-xl border border-white/10 bg-white/[0.03] px-3.5 py-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="file-text" class="lucide lucide-file-text w-[16px] h-[16px]" style="stroke-width: 1.5; width: 16px; height: 16px; color: rgb(147, 197, 253);" data-icon-replaced="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" class=""></path><path d="M14 2v4a2 2 0 0 0 2 2h4" class=""></path><path d="M10 9H8" class=""></path><path d="M16 13H8" class=""></path><path d="M16 17H8" class=""></path></svg>
<div class="flex-1">
<p class="text-sm text-white/90 font-medium">PDF Download</p>
<p class="text-[13px] text-white/60">Print-ready format</p>
</div>
</div>
<div class="flex items-center gap-3 rounded-xl border border-white/10 bg-white/[0.02] px-3.5 py-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="tablet" class="lucide lucide-tablet w-[16px] h-[16px]" style="stroke-width: 1.5; width: 16px; height: 16px; color: rgb(147, 197, 253);" data-icon-replaced="true"><rect width="16" height="20" x="4" y="2" rx="2" ry="2" class=""></rect><line x1="12" x2="12.01" y1="18" y2="18" class=""></line></svg>
<div class="flex-1">
<p class="text-sm text-white/80 font-medium">Interactive eBook</p>
<p class="text-[13px] text-white/55">With animations</p>
</div>
</div>
<div class="flex items-center gap-3 rounded-xl border border-white/10 bg-white/[0.02] px-3.5 py-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="volume-2" class="lucide lucide-volume-2 w-[16px] h-[16px]" style="stroke-width: 1.5; width: 16px; height: 16px; color: rgb(147, 197, 253);" data-icon-replaced="true"><path d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z" class=""></path><path d="M16 9a5 5 0 0 1 0 6" class=""></path><path d="M19.364 18.364a9 9 0 0 0 0-12.728" class=""></path></svg>
<div class="flex-1">
<p class="text-sm text-white/80 font-medium">Audio Narration</p>
<p class="text-[13px] text-white/55">AI voice reading</p>
</div>
</div>
</div>
<div class="flex flex-wrap gap-3 items-center">
<button class="flex-1 inline-flex hover:bg-neutral-100 active:bg-neutral-200 transition text-sm font-medium text-neutral-900 tracking-tight bg-white rounded-lg pt-2 pr-3.5 pb-2 pl-3.5 items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="download" class="lucide lucide-download w-4 h-4" style="stroke-width: 1.5;"><path d="M12 15V3" class=""></path><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path><path d="m7 10 5 5 5-5" class=""></path></svg>
Export Options
</button>
</div>
</div>
</div>
</div>
</div>
</section>