"*Build a stunning one-page real estate agent website for Maddie* Create a sleek, modern single-page landing site for Maddie, a real estate agent. The design should be polished, upscale, and conversio

.gitignore

@@ -0,0 +1,36 @@
+# Dependencies
+node_modules/
+
+# Build output
+dist/
+build/
+
+# Lock files (generated by package manager)
+package-lock.json
+yarn.lock
+pnpm-lock.yaml
+
+# Environment
+.env
+.env.local
+.env.*.local
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Python
+__pycache__/
+*.pyc
+*.egg-info/
+.venv/
+
+# Vite
+*.local

ARCHITECTURE.md

@@ -0,0 +1,150 @@
+# Maddie | Luxury Real Estate — Architecture Document
+
+## Overview
+
+A single-page luxury real estate landing page built with React, TypeScript,
+Tailwind CSS, and Vite. The design emphasizes elegance through a refined
+color palette, premium typography, and smooth interactions.
+
+---
+
+## File & Folder Structure
+
+```
+├── index.html
+├── package.json
+├── tsconfig.json
+├── tailwind.config.js
+├── postcss.config.js
+├── vite.config.ts
+├── ARCHITECTURE.md
+├── SETUP.md
+├── public/
+│   └── vite.svg
+├── src/
+│   ├── main.tsx              # React entry point
+│   ├── App.tsx               # Root component
+│   ├── index.css             # Global styles & Tailwind directives
+│   ├── components/
+│   │   ├── Header.tsx        # Navigation bar
+│   │   ├── Hero.tsx          # Hero section with CTA
+│   │   ├── About.tsx         # Agent profile / about section
+│   │   ├── RecentSales.tsx   # Property cards grid
+│   │   ├── PropertyCard.tsx  # Individual property card
+│   │   ├── Contact.tsx       # Contact form section
+│   │   └── Footer.tsx        # Site footer
+│   ├── utils/
+│   │   └── scrollTo.ts       # Smooth scroll-to-id utility
+│   └── types/
+│       └── index.ts          # Shared TypeScript interfaces
+└── tests/
+    ├── setup.ts              # Test setup (jsdom, jest-dom)
+    ├── test_index_html.test.ts
+    ├── test_main.test.tsx
+    └── test_index_css.test.ts
+```
+
+---
+
+## Component Tree
+
+```
+App
+├── Header (sticky nav, logo, nav links, CTA button)
+├── Hero (background image, headline, sub-headline, dual CTAs)
+├── About (agent photo, bio, statistics row)
+├── RecentSales (section heading, PropertyCard[] grid)
+│   └── PropertyCard (image, address, price, beds/baths/sqft)
+├── Contact (form: name, email, phone, message, submit)
+└── Footer (logo, links, social icons, copyright)
+```
+
+---
+
+## Design Tokens
+
+### Color Palette
+
+| Token          | Hex       | Usage                          |
+| -------------- | --------- | ------------------------------ |
+| cream          | `#FFFDF7` | Page background                |
+| cream-dark     | `#FFF8F0` | Card backgrounds, alternation  |
+| slate-900      | `#0F172A` | Heading text                   |
+| slate-700      | `#334155` | Body text                      |
+| slate-500      | `#64748B` | Secondary/muted text           |
+| slate-400      | `#94A3B8` | Placeholder, borders           |
+| gold           | `#C8A951` | Primary accent, buttons        |
+| gold-dark      | `#B8963E` | Hover states                   |
+| gold-medium    | `#D4B968` | Gradient mid-point             |
+| gold-light     | `#E8D5A3` | Gradient highlight, decorative |
+
+### Gold Gradient
+
+```css
+background: linear-gradient(135deg, #C8A951 0%, #E8D5A3 50%, #D4B968 100%);
+```
+
+---
+
+## Typography
+
+| Role     | Font Family       | Weights            |
+| -------- | ----------------- | ------------------ |
+| Headings | Playfair Display  | 400, 500, 600, 700 |
+| Body     | Inter             | 300, 400, 500, 600, 700 |
+
+Fonts are loaded via Google Fonts `<link>` in `index.html` with
+`preconnect` hints for optimal loading.
+
+---
+
+## Responsive Breakpoints
+
+| Name | Min Width | Usage                      |
+| ---- | --------- | -------------------------- |
+| sm   | 640px     | Tablet portrait            |
+| md   | 768px     | Tablet landscape           |
+| lg   | 1024px    | Desktop                    |
+| xl   | 1280px    | Large desktop              |
+
+---
+
+## Section Order
+
+1. **Header / Navigation** — Sticky top, glass-morphism effect
+2. **Hero** — Full-viewport, background image, gradient overlay
+3. **About / Profile** — Two-column layout (image + bio)
+4. **Recent Sales** — 3-column responsive grid of property cards
+5. **Contact** — Centered form with gold accent border
+6. **Footer** — Dark background, multi-column links
+
+---
+
+## Smooth Scroll Implementation
+
+1. CSS `scroll-behavior: smooth` on `<html>` element
+2. React utility `scrollTo(id: string)` that calls
+   `document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' })`
+3. Navigation links use `href="#section-id"` with `onClick` calling the
+   scroll utility for enhanced control
+
+---
+
+## Curated Image Sources (Unsplash)
+
+- **Hero**: Luxury home exterior — `https://images.unsplash.com/photo-1600596542815-ffad4c1539a9`
+- **About**: Professional headshot — `https://images.unsplash.com/photo-1573496359142-b8d87734a5a2`
+- **Property 1**: Modern villa — `https://images.unsplash.com/photo-1600585154340-be6161a56a0c`
+- **Property 2**: Penthouse — `https://images.unsplash.com/photo-1600607687939-ce8a6c25118c`
+- **Property 3**: Estate — `https://images.unsplash.com/photo-1600566753086-00f18fb6b3ea`
+
+---
+
+## Tailwind Customizations
+
+See `tailwind.config.js` for full configuration. Key extensions:
+
+- Custom color tokens (cream, gold variants)
+- Font family aliases (`font-playfair`, `font-inter`)
+- `max-w-8xl` (88rem) for wide section containers
+- Custom spacing values for fine-tuned layouts

RUNNING.md

@@ -0,0 +1,104 @@
+# Running the Project
+
+**Maddie — Luxury Real Estate Agent Landing Page built with React + Vite + Tailwind CSS.**
+
+---
+
+## Prerequisites
+
+Before you begin, ensure you have the following installed on your system:
+
+- **Node.js** (v18 or later recommended) — [https://nodejs.org/](https://nodejs.org/)
+- **npm** (v9 or later, bundled with Node.js)
+
+You can verify your installation by running:
+
+```bash
+node --version
+npm --version
+```
+
+---
+
+## Install Dependencies
+
+From the project root directory, install all required packages:
+
+```bash
+npm install
+```
+
+This will read `package.json` and install both production dependencies (React, React DOM) and development dependencies (Vite, Tailwind CSS, PostCSS, Autoprefixer, and the Vite React plugin).
+
+---
+
+## Run the Development Server
+
+Start the local development server with hot module replacement (HMR):
+
+```bash
+npm run dev
+```
+
+Once started, the application will be available at:
+
+```
+http://localhost:3000
+```
+
+The dev server watches for file changes and automatically reloads the browser. Tailwind CSS classes are processed on the fly via PostCSS.
+
+---
+
+## Build for Production
+
+Create an optimized, minified production build:
+
+```bash
+npm run build
+```
+
+The output is written to the `dist/` directory. This bundle is ready for deployment to any static hosting provider (Vercel, Netlify, AWS S3, GitHub Pages, etc.).
+
+---
+
+## Preview the Production Build
+
+After building, you can preview the production bundle locally:
+
+```bash
+npm run preview
+```
+
+This starts a local static file server that serves the contents of `dist/`, allowing you to verify the production build before deploying.
+
+---
+
+## Project Structure Overview
+
+```
+.
+├── index.html            # Root HTML entry point with Google Fonts
+├── package.json          # Project manifest and scripts
+├── vite.config.js        # Vite configuration with React plugin
+├── tailwind.config.js    # Tailwind CSS design tokens and customizations
+├── postcss.config.js     # PostCSS plugin configuration
+├── src/
+│   ├── main.jsx          # React entry point
+│   ├── index.css         # Global styles and Tailwind directives
+│   └── ...               # React components and assets
+├── dist/                 # Production build output (generated)
+└── RUNNING.md            # This file
+```
+
+---
+
+## Tech Stack
+
+| Technology      | Purpose                        |
+| --------------- | ------------------------------ |
+| React           | UI component library           |
+| Vite            | Build tool and dev server      |
+| Tailwind CSS    | Utility-first CSS framework    |
+| PostCSS         | CSS processing pipeline        |
+| Autoprefixer    | Vendor prefix management       |

SETUP.md

@@ -0,0 +1,43 @@
+# Setup Instructions
+
+## Prerequisites
+
+- Node.js >= 18
+- npm >= 9
+
+## Install Dependencies
+
+```bash
+npm install
+```
+
+This will generate `package-lock.json` and `node_modules/` — both are
+git-ignored and must not be hand-written.
+
+## Development Server
+
+```bash
+npm run dev
+```
+
+Opens the dev server at `http://localhost:3000`.
+
+## Run Tests
+
+```bash
+npm test
+```
+
+## Production Build
+
+```bash
+npm run build
+```
+
+Output is written to `dist/`.
+
+## Preview Production Build
+
+```bash
+npm run preview
+```