Meridian Estates — Premium Real Estate Website

Meridian Estates is a luxury real estate marketing and lead-generation website built with React, Vite, Tailwind CSS, Framer Motion, and Lucide icons. It presents a polished real estate brand with a landing-page architecture for buyer discovery, property browsing, location selection, testimonial marketing, and form-based inquiries.

Project Overview

The project is a static front-end experience that communicates a premium property brand. It includes:

• A cinematic hero section with high-end photography and layered visual styling
• A search/control panel for location, property type, price, and bedroom selection
• Property listing infrastructure with category filters, quick-view actions, and compare drawer behavior
• City/location feature sections and property category surfaces
• Agent profiles and testimonial/carousel sections
• Lead capture components for newsletter sign-ups and contact form submission
• Toast, modal, and immersive UI overlays for interactivity

Technology Stack

The implementation uses a modern front-end workflow built around Vite and React.

• React 19 for component-driven UI rendering
• Vite 8 as the build and local development toolchain
• Tailwind CSS 3 for styling and responsive utility classes
• PostCSS and Autoprefixer for styling pipeline processing
• Framer Motion for scrolling reactivity, transitions, and motion design
• Lucide React for icons across property, navigation, social, and content surfaces
• Oxlint for static linting

Project Structure

src/
  App.jsx                  Main page composition and section registration
  main.jsx                 Application entry point and React mount
  index.css                Global CSS, Tailwind layers, theme styling, responsive helpers
  assets/                  Static image assets
  components/              Page components such as Hero, Navbar, Properties, Contact, Footer
  context/                 App provider and client-side UI state management utilities
  data/content.js          Site text, property data, categories, agents, testimonials, and images
public/
  favicon.svg              Site favicon asset
package.json               Scripts, dependencies, package metadata
vite.config.js            Vite configuration and React plugin setup
tailwind.config.js        Tailwind content detection and custom theme definitions
postcss.config.js         PostCSS configuration

Available Scripts

Install dependencies:

npm install

Run local development server:

npm run dev

Create a production build:

npm run build

Preview the production output locally:

npm run preview

Lint the codebase:

npm run lint

Production Build

The production bundle is generated under the dist folder by Vite. After building, the output can be deployed to any static hosting platform such as Vercel, Netlify, Firebase Hosting, GitHub Pages, or traditional web hosting that serves static assets.

Deployment Notes

• Ensure the host supports Vite static bundle output.
• Build the site using npm run build before deployment.
• Publish the generated dist directory or connect the hosting service directly to the Vite output.
• Replace placeholder contact and listing data with real production data when the site is connected to a CRM or backend API.

Quality and Project Health

The project includes front-end build verification, lint verification, and dependency review. The current build is Vite-driven and is organized for a Vite static deployment workflow.