Zenith Realty

Build a luxury real estate landing page called "ZENITH REALTY" with the exact design, components, and animations described below. Do not include a footer.

**Core Setup:**
* **Font:** Use Google Font 'Lato' (weights 300, 400, 500, 700, 900). Configure it in tailwind by setting `@theme { --font-lato: "Lato", sans-serif; }` in `index.css` and apply `font-lato` globally. 
* **Global Style:** The main wrapper should use `bg-[#F8F8F8]` and `text-[#141414]`.
* **Libraries:** Use `lucide-react` for icons, `motion/react` for animations, and `recharts` for charts.

**Section 1: Hero & Navbar**
* Full screen height (`h-screen`), overflow hidden, relative positioning.
* **Background Video:** Absolutely positioned, covering the full area: `<video src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260503_144509_89e2d612-8af2-45c3-90f4-4831bc60715d.mp4" autoPlay muted loop playsInline className="absolute top-0 left-0 w-full h-full object-cover z-0" />`
* **Content Overlay:** Over the video, use a relative wrapper with `z-10` and `bg-white/10`.
* **Navbar:**
  * **Logo:** Stacked text "ZENITH" over "REALTY" with `text-xl font-black leading-[0.85] tracking-tighter text-[#141414]`.
  * **Links (Desktop):** "Properties" (with `ChevronDown`), "Mortgage" (with a New badge: `bg-black text-[white] text-[9px] px-1.5 py-0.5 rounded-xs leading-none`), "Company", "Careers" (with `ChevronDown`), "Blog". Style: `text-[13px] font-medium tracking-tight text-[#141414] hover:opacity-60`.
  * **Action Button:** "Post a property" (with `Home` icon). Style: `border border-black/10 bg-white/80 backdrop-blur-md px-6 py-2.5 rounded-none text-[13px] font-medium hover:bg-white`.
  * **Mobile Menu:** Implement a functional slide-in mobile menu using `AnimatePresence` and `motion.div` from the right (`x: '100%'` to `x: 0`) containing nav links and a dark "Post a property" button at the bottom.
* **Hero Content:** Grid layout `grid-cols-1 md:grid-cols-12` in the main container.
  * **Headline:** "Discover space you truly belong in" (animate fading up `y: 30`, duration 0.9). Style: `text-4xl md:text-5xl lg:text-7xl font-medium tracking-tight leading-[1.05] text-[#141414]`.
  * **Button:** "Book a call" (animate fade in with delay 0.6). Style: `bg-[#141414] text-white px-9 py-4 text-[13px] font-medium uppercase tracking-wider shadow-2xl`.
  * **Subtext:** "Experience more than a house; find a sanctuary where your journey unfolds, rich with comfort and endless opportunities." (animate fade in with delay 0.4). Position this on the right side of the grid (`md:col-span-4 md:col-start-9`). Style: `text-[#A5A5A5] text-[15px] md:text-[18px] leading-[1.4]`.

**Section 2: Properties**
* **Header:** "Guiding you toward the residence of your dreams" (`text-3xl md:text-5xl font-medium tracking-tight leading-[1.1] text-[#141414]`). To its right (`md:col-start-9`), place subtext: "Our vision bridges balance, design, and attention so that every client resides in a space reflecting their values." (`text-[#A5A5A5] text-[14px] leading-relaxed`).
* **Grid:** 3 property cards that fade and slide up (`motion.div` with staggered delays, `viewport={{ once: true }}`). Use `bg-white`, group class, and image wrappers with `aspect-[4/3] md:aspect-square overflow-hidden group-hover:scale-105 duration-700`.
* **Property Data:**
  1. Title: "Aether Heights", Price: "$345,000", Location: "USA/California/Malibu", Stats: 300 m², 1 floor, 6 beds, 2 baths, Image: `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260503_145701_de344c15-5eac-4c64-8bd6-19a2811bba4a.png&w=1280&q=85`
  2. Title: "Azure Sanctuary", Price: "$225,000", Location: "Caribbean/Bahamas/Bimini", Stats: 250 m², 1 floor, 4 beds, 1 bath, Image: `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260503_145923_c1a9880c-0fab-4a76-8289-bd650d5e5dce.png&w=1280&q=85`
  3. Title: "Summit Pavilion", Price: "$510,000", Location: "USA/Colorado/Vail", Stats: 400 m², 3 floors, 6 beds, 3 baths, Image: `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260503_150022_cdda0eaa-1c17-4f59-8188-4f98b328619f.png&w=1280&q=85`
* **Card Formatting:** In each card details section, place the stats inline in a flex wrap row. Use Lucide icons: `Square` for area, `Layers` for floors, `Bed` for beds, `Bath` for baths. Stat styling: `text-[#141414] text-[11px] font-medium`, icon styling: `text-[#A5A5A5] size={13} strokeWidth={2.5}`.

**Section 3: How it Works**
* **Header:** "Explore our service and the process" with right-aligned subtext "Digital walk-throughs, select portfolios, and professional insight — all the tools to search and secure with ease."
* **Layout:** 12-column grid. Left 4 columns for a custom menu block, right 8 columns for an image (`aspect-video md:aspect-square`).
* **Content Block (Left):** White background (`bg-white p-8 md:p-16`). Include:
  * Title "Exclusive collection", desc "Consultants curate custom lists of vetted homes. Featuring media, VR walk-ins, and private physical tours."
  * Button: "Free consult" (border, transparent bg hover:bg-gray-50).
  * Navigation list at the bottom: 4 text buttons vertically stacked — "Market Analysis", "Exclusive collection" (active mode, `text-[#141414]`), "Policy Support", "Closing Deal". The inactive items should be `text-[#A5A5A5] hover:text-[#141414]`. All `text-[13px] font-medium`.
* **Image (Right):** `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260503_150112_2b0e700f-7af4-4459-b326-7d9e2f468daa.png&w=1280&q=85`

**Section 4: Investment / Analytics**
* **Header:** "Trusted frameworks for secure growth" with two paragraphs of right-aligned subtext: "Our holdings go beyond floor plans; they represent a vehicle for your wealth to thrive consistently." and "We meticulously vet the premier market offerings for our valued partners."
* **Charts Grid:** 3 cards side by side (`bg-white p-6 flex flex-col justify-between aspect-video md:aspect-[1.8/1]`).
  1. Title: "Annual growth", Value: "19%". Data array: `[35, 60, 45, 40, 55, 75, 60, 80, 55, 30]`.
  2. Title: "Aggregate yield profit", Value: "$820,000". Data array: `[8, 12, 18, 28, 32, 38, 55, 70, 85]`.
  3. Title: "Median returns", Value: "14%". Data array: `[10, 75, 20, 35, 30, 65, 55, 25, 40]`.
* **Chart Implementation:** Titles use `text-[#141414]/40 text-[12px] font-medium tracking-tight uppercase`. Values use `text-4xl font-medium text-[#141414]`. Below the values, create an `h-24` container with a `ResponsiveContainer` and `BarChart`. Use a custom `shape` function on the `Bar` that renders two rectangles per bar to simulate a transparent bar with a solid top line:
  * A light background `rect` where `fill="#141414"` and `fillOpacity={0.05}`.
  * A solid top cap `rect` where `height={2}` and `fill="#141414"`.