Luxury Realty Demo – Tech Overview A high-end, visually immersive real estate website demo built with a modern front-end stack. This project demonstrates advanced UI/UX techniques, smooth animations, and mobile responsiveness, making it a perfect template for luxury property brands or tech demos.

Tech Stack React (with Vite) – Fast, modular component-driven UI development.

CSS Modules – Scoped, maintainable styles.

Custom Animations – CSS keyframes for image transitions and UI polish.

React Router – Client-side navigation and routing.

SVG Icons – Custom icons for brand personality.

Responsive Layout – Adaptive design for desktop and mobile devices.

Modern CSS – clamp, vw, vh units, backdrop-filter, gradients, and more.

Features Luxury Navigation Overlay: Animated menu overlay with:

Large-format left navigation links.

Secondary right-hand menu.

Flying image previews on hover for each main link.

Central animated "Contact" button with SVG maple leaf.

Smooth transitions and blur effects.

Hero Section: Full-width, immersive background image/video, clean headline, and call-to-action area.

Performance: Lightweight build using Vite for fast development and hot reloading.

Accessibility: Keyboard-navigable overlay, semantic HTML, and accessible color contrasts.

Project Structure css Copy Edit src/ components/ MenuOverlay.jsx MenuOverlay.css Hero.jsx Hero.css ... App.jsx main.jsx ... Quick Start Install dependencies

bash Copy Edit npm install Run development server

bash Copy Edit npm run dev Open http://localhost:5173 in your browser.

Customization Update hero images, overlays, and preview image links in the respective component files.

Add or remove menu links in MenuOverlay.jsx.

Tweak brand colors and typography in CSS files.

License For personal, portfolio, or demonstration use. Commercial use may require design/asset review.