/* @component-map
 * App — Main container, renders aurora background and rainbow card
 * @end-component-map */

function App() {
  return (
    <>
      <div className="aurora"></div>
      <main className="card">
        <div className="sparkle s1"></div>
        <div className="sparkle s2"></div>
        <div className="sparkle s3"></div>
        <div className="sparkle s4"></div>

        <div className="rainbow-wrap" aria-hidden="true">
          <div className="rainbow">
            <div className="arc arc1"></div>
            <div className="arc arc2"></div>
            <div className="arc arc3"></div>
            <div className="arc arc4"></div>
            <div className="arc arc5"></div>
            <div className="arc arc6"></div>
            <div className="cloud left"></div>
            <div className="cloud right"></div>
          </div>
        </div>

        <h1>Hello, world!</h1>
        <p>Wrapped in a soft pastel rainbow.</p>
      </main>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);