אתר סטודיו למשחקי פיקסל

Build a "Pixel Pals Game Studio Site" React component.

CONCEPT: The website of a three-person indie studio that makes cozy pixel-art games. It should feel like booting up a console.

LAYOUT & CONTENT:
- Top bar: 'PIXEL PALS' logo, menu GAMES / TEAM / PRESS / SHOP, '1UP' coin counter.
- Hero: starfield background, big title 'WE MAKE TINY WORLDS.', blinking 'PRESS START', pixel character made of squares bouncing.
- Games: three cartridge-shaped cards (Moss Knight, Tide Pool Tycoon, Lantern Post), each with its own pixel sprite on the label, platform tags and a 'PLAY DEMO' button.
- Team: three pixel avatars built from grids, each in its own colour, name and role, health-bar style skill meters.
- Newsletter: styled as a HIGH SCORES table with an 'ENTER YOUR EMAIL' input.
- Footer: '(C) 2026 PIXEL PALS, HAIFA' and 'CONTINUE? 9'.

INTERACTIONS & MOTION:
- Stars twinkle with stepped opacity; the character bounces with steps easing.
- Clicking the hero (or the 'PRESS START' button) makes the sprite jump 70px in steps, a coin flies up and fades, and a 'COINS 00' counter in the corner goes up (aria-live).
- Cartridge sprites bounce in steps while the card is hovered.
- Buttons press exactly 4px down-right and lose their shadow.

DESIGN SYSTEM — 8-bit Arcade:
- Black #111 screen, PICO-8-like palette: red #FF004D, orange #FFA300, yellow #FFEC27, green #00E436, blue #29ADFF, lavender #83769C, white.
- Square pixels only, no radius, hard 4px shadows, stepped/blinking animation.
- Press Start 2P for headings and UI, a plain mono for long copy.

CRAFT RULES:
- Motion: Framer Motion with spring physics (type: "spring") for anything interactive; ease-out cubic-bezier(0.23, 1, 0.32, 1) for entrances, under 300ms for UI feedback, exits faster than entrances. Animate transform, opacity, clip-path and SVG attributes only. Respect prefers-reduced-motion via useReducedMotion() (loops and cursor effects become static).
- Copy: real, specific names, prices and times; no em-dashes, no lorem ipsum, no claims the business cannot back up.
- Icons: lucide-react where icons are needed; illustrations are inline SVG or CSS, no external images.
- Accessibility: real <button>/<a>/<label> elements, visible focus ring, keyboard operable, aria attributes where state changes, tabular numerals for times and prices.

OUTPUT: one self-contained React component file (Tailwind CSS v4 utility classes, framer-motion, lucide-react), no external images, default export, ready to paste into a Next.js App Router page with "use client". Load any Google Font it needs with next/font/google.