App.jsx

 1const ITEMS = [
 2  { id: 'a', title: 'Alpha card' },
 3  { id: 'b', title: 'Beta card' },
 4  { id: 'c', title: 'Gamma card' },
 5];
 6
 7export default function App() {
 8  return (
 9    <main className="page">
10      <p className="hero-hook">Three cards rendered from a single mapped template.</p>
11      <section className="grid">
12        {ITEMS.map((item) => (
13          <article key={item.id} className="card">
14            <h1 className="hero-title">{item.title}</h1>
15            <p>Body for {item.id}.</p>
16          </article>
17        ))}
18      </section>
19    </main>
20  );
21}