BookedUp

Build a high-performance, agency-grade SaaS section called "BookedUp" in React 19, TypeScript, and Tailwind CSS with Framer Motion.

## 1. Overview & Visual Objective
Create a modern Hero Section web application using React (TypeScript), Tailwind CSS v4, motion/react, and lucide-react for icons. Implement the exact layout, CSS variables, mock data, and components as described below.
1. Global CSS & Typography (index.css)
Configure Tailwind CSS and import two specific fonts:
Inter: https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap
SK Reykjavik Rounded Regular: https://db.onlinewebfonts.com/c/16e715573b2b3072037cf4ab26fc8bb8?family=SK+Reykjavik+Rounded+Regular
Define standard CSS configurations:
Make a @theme block defining --font-heading (SK Reykjavik) and --font-sans (Inter).
Add a body block in @layer base that applies: font-sans antialiased text-[#202020] bg-[#F7F7F7].
2. Mock Data & Types