/* @component-map
 * App — Main container, phone layout with hero, mascot, and joke card
 * HeroSection — Top branding area with title and subtitle
 * MascotCard — Mascot image display card
 * JokeCard — Joke display, reveal, next, save functionality
 * @end-component-map */

import { HeroSection } from './components/HeroSection.jsx';
import { MascotCard } from './components/MascotCard.jsx';
import { JokeCard } from './components/JokeCard.jsx';

function App() {
  return (
    <div className="phone">
      <div className="notch"></div>
      <HeroSection />
      <MascotCard />
      <JokeCard />
    </div>
  );
}

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