Jak na správné klíčení semínek

import React from 'react';

import { motion } from 'framer-motion';

 

 

export default function GerminationGuide() {

const steps = [

{ id: 1, title: 'Krok 1 – Probouzení semínka', body: '[PLACEHOLDER TEXT]' },

{ id: 2, title: 'Krok 2 – První závlaha', body: '[PLACEHOLDER TEXT]' },

{ id: 3, title: 'Krok 3 – Krycí štít', body: '[PLACEHOLDER TEXT]' },

{ id: 4, title: 'Krok 4 – Tajemné útočiště', body: '[PLACEHOLDER TEXT]' },

{ id: 5, title: 'Krok 5 – Čekání na probuzení', body: '[PLACEHOLDER TEXT]' },

{ id: 6, title: 'Krok 6 – Přenos do půdy', body: '[PLACEHOLDER TEXT]' },

{ id: 7, title: 'Krok 7 – Vstup do půdy', body: '[PLACEHOLDER TEXT]' },

{ id: 8, title: 'Krok 8 – První světlo Temné strany', body: '[PLACEHOLDER TEXT]' },

{ id: 9, title: 'Krok 9 – Péče o vyvolené', body: '[PLACEHOLDER TEXT]' }

];

 

return (

<div className="min-h-screen bg-black text-white p-6 font-sans">

<header className="max-w-4xl mx-auto text-center mb-8">

<h1 className="text-4xl font-extrabold tracking-wide text-green-400">Evil Buds — Seeds of the Dark Side</h1>

<p className="mt-2 text-purple-300">Interaktivní průvodce (s vizuálními placeholdery)</p>

</header>

 

<main className="max-w-4xl mx-auto grid gap-6 lg:grid-cols-3">

{steps.map((step) => (

<motion.article

key={step.id}

initial={{ opacity: 0, y: 8 }}

animate={{ opacity: 1, y: 0 }}

whileHover={{ scale: 1.03 }}

className="bg-gray-900/80 ring-1 ring-gray-800 rounded-2xl p-5 relative overflow-hidden shadow-lg"

>

<div className="absolute -top-6 -right-6 w-32 h-32 rounded-full bg-gradient-to-br from-green-700/40 to-purple-700/40 blur-xl pointer-events-none" />

 

<div className="flex items-start gap-4">

<div className="w-12 h-12 flex items-center justify-center rounded-full bg-green-600 text-black font-bold shadow-md">

{step.id}

</div>

<div>

<h3 className="text-lg font-semibold text-green-300">{step.title}</h3>

<p className="mt-2 text-gray-300 text-sm leading-relaxed">{step.body}</p>

 

<details className="mt-3 text-sm text-gray-400">

<summary className="cursor-pointer">Více o této sekci</summary>

<div className="mt-2">

<p>

Tento krok obsahuje pouze placeholder text. Nahraďte ho vlastním legálním obsahem.

</p>

</div>

</details>

</div>

</div>

</motion.article>

))}

</main>

 

<aside className="max-w-4xl mx-auto mt-10 p-4 text-sm text-gray-300 bg-gray-900/60 ring-1 ring-gray-800 rounded-lg">

<strong>Poznámka:</strong> Tento kód ukazuje pouze vizuální a interaktivní design. Obsah kroků je záměrně ponechán jako

placeholder. Doporučujeme doplnit vlastní text, který je v souladu s legislativou.

</aside>

</div>

);

}