Create a React block for the image gallery on a landscape

import { motion, useReducedMotion } from "motion/react";import "@fontsource/newsreader/latin-400.css";import "@fontsource/instrument-sans/latin-400.css";import "@fontsource/instrument-sans/latin-500.css";import "./gallery.css";export default function Block() { const reduceMotion = useReducedMotion(); const settle = reduceMotion ? false : { opacity: 0.92, y: 8 }; const transition = { duration: 0.45, ease: "easeOut" as const }; return ( <section className="gallery-shell bg-white text-neutral-900 dark:bg-neutral-950 dark:text-neutral-100" aria-labelledby="gallery-title"> <div className="gallery-inner"> <header className="gallery-heading"> <div className="gallery-name">Mara Ellery <span aria-hidden="true">/</span> Landscapes</div> <div className="gallery-title-row"> <h1 id="gallery-title">Coast & high country</h1> <p>Photographs made slowly, in the weather.</p> </div> </header> <div className="gallery-grid" aria-label="Landscape photographs"> <motion.figure className="gallery-item gallery-item-1" initial={settle} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true, amount: 0.12 }} transition={transition}> <img className="gallery-photo" src="https://res.cloudinary.com/ddjovluur/image/upload/genblocks/images/7d762c73297cb5db" alt="White surf running between dark basalt ledges on an Oregon headland beneath low cloud." loading="eager" /> <figcaption><span className="photo-title">Last light on the headland</span><span className="photo-place text-teal-800 dark:text-teal-300">Cape Perpetua, Oregon</span></figcaption> </motion.figure> <motion.figure className="gallery-item gallery-item-2" initial={settle} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true, amount: 0.12 }} transition={transition}> <img className="gallery-photo" src="https://res.cloudinary.com/ddjovluur/image/upload/genblocks/images/207fd17a288d2899" alt="Mist lifting from slate-colored peaks around a small alpine tarn in the North Cascades." loading="eager" /> <figcaption><span className="photo-title">Cloud moving through the pass</span><span className="photo-place text-teal-800 dark:text-teal-300">North Cascades, Washington</span></figcaption> </motion.figure> <motion.figure className="gallery-item gallery-item-3" initial={settle} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true, amount: 0.12 }} transition={transition}> <img className="gallery-photo" src="https://res.cloudinary.com/ddjovluur/image/upload/genblocks/images/8fa759bba5147051" alt="Still tide pools among black coastal rocks reflecting a pale sky, with sea stacks in the mist." loading="lazy" /> <figcaption><span className="photo-title">Tide pools at low water</span><span className="photo-place text-teal-800 dark:text-teal-300">Ruby Beach, Washington</span></figcaption> </motion.figure> <motion.figure className="gallery-item gallery-item-4" initial={settle} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true, amount: 0.12 }} transition={transition}> <img className="gallery-photo" src="https://res.cloudinary.com/ddjovluur/image/upload/genblocks/images/5346ee703a5350ca" alt="A green alpine meadow and a long Wallowa ridge beneath broken rain clouds." loading="lazy" /> <figcaption><span className="photo-title">The long ridge after rain</span><span className="photo-place text-teal-800 dark:text-teal-300">Wallowa Mountains, Oregon</span></figcaption> </motion.figure> <motion.figure className="gallery-item gallery-item-5" initial={settle} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true, amount: 0.12 }} transition={transition}> <img className="gallery-photo" src="https://res.cloudinary.com/ddjovluur/image/upload/genblocks/images/4b5edd62e736a813" alt="A still mountain lake reflecting snow-dusted granite peaks and the dark evergreen shore." loading="lazy" /> <figcaption><span className="photo-title">Still water, first snow</span><span className="photo-place text-teal-800 dark:text-teal-300">Alpine Lakes Wilderness, Washington</span></figcaption> </motion.figure> <motion.figure className="gallery-item gallery-item-6" initial={settle} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true, amount: 0.12 }} transition={transition}> <img className="gallery-photo" src="https://res.cloudinary.com/ddjovluur/image/upload/genblocks/images/d92523e2e4693232" alt="Pale surf and driftwood on the Olympic coast as a distant headland disappears into fog." loading="lazy" /> <figcaption><span className="photo-title">Fog along the outer shore</span><span className="photo-place text-teal-800 dark:text-teal-300">Olympic Coast, Washington</span></figcaption> </motion.figure> </div> </div> </section> );}