mtzdgtlab · mtzdgtlab · Jun 30, 2025 · Jun 30, 2025
diff --git a/README.md b/README.md
@@ -1,47 +1,190 @@
-# Astro Starter Kit: Minimal
+# MAC Paving and Sealcoating - Official Website
 
-```sh
-npm create astro@latest -- --template minimal
-```
+![MAC Paving Logo](public/assets/logo.png)
+
+Professional asphalt paving, sealcoating, concrete, and paver services across New Jersey. Built with Astro for optimal performance and SEO.
+
+## 🌐 Live Website
+
+**Production:** [https://macpavingandsealcoating.com](https://macpavingandsealcoating.com)
+
+## 🏗️ About the Project
 
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/minimal)
-[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/minimal)
-[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/minimal/devcontainer.json)
+This is the official website for MAC Paving and Sealcoating LLC, a New Jersey-based company specializing in:
 
-> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+- **Asphalt Paving** - Driveways, parking lots, resurfacing
+- **Sealcoating** - Protective coating and maintenance
+- **Concrete Work** - Sidewalks, curbs, aprons
+- **Paver Installation** - Decorative driveways and patios
+- **Landscaping** - Drainage solutions and outdoor improvements
 
-## 🚀 Project Structure
+### 🎯 Key Features
 
-Inside of your Astro project, you'll see the following folders and files:
+- **SEO Optimized** - Comprehensive meta tags, structured data, and sitemap
+- **Mobile Responsive** - Optimized for all devices
+- **Fast Performance** - Built with Astro for lightning-fast loading
+- **Service Area Coverage** - 60+ cities across North Jersey
+- **Contact Forms** - Multiple conversion-optimized contact forms
+- **Video Backgrounds** - Professional video content showcasing work quality
+- **Schema Markup** - Rich snippets for better search visibility
+
+## 🚀 Tech Stack
+
+- **Framework:** [Astro 5.10.0](https://astro.build)
+- **Language:** TypeScript
+- **Styling:** Custom CSS with Bootstrap grid
+- **Testing:** Vitest
+- **Linting:** ESLint with Astro plugin
+- **Build Tool:** Vite
+
+## 📁 Project Structure
 
 ```text
 /
-├── public/
+├── public/                  # Static assets
+│   ├── assets/
+│   │   ├── css/            # Stylesheets
+│   │   ├── js/             # JavaScript files
+│   │   ├── imgs/           # Images organized by sections
+│   │   └── fonts/          # Web fonts
+│   └── robots.txt
 ├── src/
-│   └── pages/
-│       └── index.astro
+│   ├── assets/             # Processed assets
+│   ├── components/         # Reusable Astro components
+│   │   ├── About.astro
+│   │   ├── Footer.astro
+│   │   ├── Navbar.astro
+│   │   ├── LargeForm.astro
+│   │   ├── TestimonialsSlider.astro
+│   │   └── ...
+│   └── pages/              # Route-based pages
+│       ├── index.astro     # Homepage
+│       ├── contact.astro   # Contact page
+│       ├── services.astro  # Services overview
+│       └── services/       # Individual service pages
+│           ├── asphalt-paving.astro
+│           ├── concrete.astro
+│           ├── landscaping.astro
+│           ├── pavers.astro
+│           └── sealer.astro
+├── tests/                  # Test files
+├── astro.config.mjs        # Astro configuration
 └── package.json
 ```
 
-Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
-
-There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
-
-Any static assets, like images, can be placed in the `public/` directory.
+## 🧞 Development Commands
 
-## 🧞 Commands
-
-All commands are run from the root of the project, from a terminal:
+All commands are run from the root of the project:
 
 | Command                   | Action                                           |
 | :------------------------ | :----------------------------------------------- |
-| `npm install`             | Installs dependencies                            |
-| `npm run dev`             | Starts local dev server at `localhost:4321`      |
-| `npm run build`           | Build your production site to `./dist/`          |
-| `npm run preview`         | Preview your build locally, before deploying     |
+| `npm install`             | Install dependencies                             |
+| `npm run dev`             | Start dev server at `localhost:4321`            |
+| `npm run build`           | Build production site to `./dist/`              |
+| `npm run preview`         | Preview build locally before deploying          |
+| `npm run lint`            | Run ESLint on TypeScript, JavaScript, and Astro files |
+| `npm run test`            | Run Vitest tests                                 |
 | `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
-| `npm run astro -- --help` | Get help using the Astro CLI                     |
 
-## 👀 Want to learn more?
+## 🛠️ Setup & Installation
+
+1. **Clone the repository**
+   ```bash
+   git clone [repository-url]
+   cd astro-mac-repository
+   ```
+
+2. **Install dependencies**
+   ```bash
+   npm install
+   ```
+
+3. **Start development server**
+   ```bash
+   npm run dev
+   ```
+
+4. **Open browser**
+   Navigate to `http://localhost:4321`
+
+## 🔧 Configuration
+
+### Astro Config (`astro.config.mjs`)
+
+- **Site URL:** `https://macpavingandsealcoating.com`
+- **Trailing Slash:** Always (prevents duplicate URLs)
+- **Sitemap:** Auto-generated with custom filtering
+- **Port:** 4321 with host access enabled
+
+### SEO Features
+
+- Comprehensive meta tags on all pages
+- Structured data (JSON-LD) for local business
+- Service area coverage (60+ NJ cities)
+- Canonical URLs for all pages
+- Open Graph and Twitter meta tags
+
+## 📱 Responsive Design
+
+The website is fully responsive with:
+
+- **Desktop:** Full-featured experience with video backgrounds
+- **Mobile:** Optimized layouts and touch-friendly navigation
+- **Tablet:** Adaptive grid systems and appropriate scaling
+
+## 🎨 Styling Architecture
+
+- **CSS Framework:** Custom CSS with Bootstrap grid system
+- **Animations:** AOS (Animate On Scroll) library
+- **Sliders:** Swiper.js for carousels
+- **Icons:** Custom icon font (Icomoon)
+- **Responsive Images:** Astro's optimized image processing
+
+## � Performance Features
+
+- **Image Optimization:** WebP format with fallbacks
+- **Code Splitting:** Automatic with Astro
+- **CSS/JS Minification:** Production builds
+- **Lazy Loading:** Images and components
+- **Preconnect:** External resources (fonts, CDNs)
+
+## 🧪 Testing
+
+- **Framework:** Vitest
+- **Test Files:** Located in `/tests/` directory
+- **Coverage:** Basic component and functionality tests
+
+## 📈 SEO & Analytics
+
+- **Local Business Schema:** Complete structured data
+- **Service Pages:** Individual pages for each service
+- **Area Coverage:** Dedicated content for service areas
+- **Contact Information:** Consistent NAP (Name, Address, Phone)
+- **Call-to-Action:** Strategic placement throughout site
+
+## 🚀 Deployment
+
+The site is configured for static site deployment and can be deployed to:
+
+- **Netlify** (recommended for Astro)
+- **Vercel**
+- **GitHub Pages**
+- **Traditional web hosting**
+
+Build command: `npm run build`
+Output directory: `dist/`
+
+## 📞 Contact Information
+
+**MAC Paving and Sealcoating LLC**
+- **Phone:** (201) 755-7836
+- **Website:** [macpavingandsealcoating.com](https://macpavingandsealcoating.com)
+- **Service Area:** Northern New Jersey
+
+## 📄 License
+
+© 2025 MAC Paving and Sealcoating LLC. All rights reserved.
+
+---
 
-Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
+For technical support or development questions, please refer to the [Astro documentation](https://docs.astro.build) or contact the development team.
diff --git a/public/assets/css/map-fix.css b/public/assets/css/map-fix.css
@@ -0,0 +1,128 @@
+/* Estilos específicos para resolver el problema de z-index del mapa con el menú */
+
+/* Asegurar que el contenedor del mapa tenga z-index bajo */
+.map-container {
+  position: relative;
+  z-index: 1 !important;
+}
+
+/* Todos los elementos dentro del mapa deben tener z-index bajo */
+.map-container *,
+.map-container .leaflet-container,
+.map-container .leaflet-map-pane,
+.map-container .leaflet-tile-pane,
+.map-container .leaflet-overlay-pane,
+.map-container .leaflet-shadow-pane,
+.map-container .leaflet-marker-pane,
+.map-container .leaflet-tooltip-pane,
+.map-container .leaflet-popup-pane {
+  z-index: 1 !important;
+}
+
+/* Los controles del mapa pueden tener un z-index ligeramente mayor pero aún bajo */
+.map-container .leaflet-control-container,
+.map-container .leaflet-control {
+  z-index: 10 !important;
+}
+
+/* Asegurar que los popups y tooltips no interfieran con el menú */
+.map-container .leaflet-popup,
+.map-container .leaflet-tooltip {
+  z-index: 50 !important;
+}
+
+/* Estilos específicos para popups de Leaflet */
+.leaflet-popup-content {
+  font-size: 16px !important;
+  font-weight: 600 !important;
+  color: #333 !important;
+  line-height: 1.4 !important;
+  margin: 8px 12px !important;
+  min-width: 120px !important;
+}
+
+.leaflet-popup-content-wrapper {
+  background: white !important;
+  border-radius: 8px !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
+  border: 2px solid #007bff !important;
+}
+
+.leaflet-popup-tip {
+  background: white !important;
+  border: 2px solid #007bff !important;
+  border-top: none !important;
+  border-right: none !important;
+}
+
+/* Estilos para el botón de cerrar */
+.leaflet-popup-close-button {
+  font-size: 18px !important;
+  font-weight: bold !important;
+  color: #666 !important;
+  padding: 4px 8px !important;
+}
+
+.leaflet-popup-close-button:hover {
+  color: #007bff !important;
+  background: transparent !important;
+}
+
+/* Estilos específicos para nuestros popups personalizados */
+.custom-popup .leaflet-popup-content {
+  font-family: 'Inter', 'Roboto', 'Montserrat', sans-serif !important;
+  font-size: 16px !important;
+  text-align: center !important;
+}
+
+.custom-popup .leaflet-popup-content-wrapper {
+  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
+  border: 2px solid #007bff !important;
+  border-radius: 12px !important;
+  box-shadow: 0 6px 20px rgba(0, 123, 255, 0.2) !important;
+}
+
+.custom-popup .leaflet-popup-tip {
+  background: #ffffff !important;
+  border: 2px solid #007bff !important;
+  border-top: none !important;
+  border-right: none !important;
+}
+
+/* Para el componente embebido específicamente */
+.embedded-map {
+  height: 100%;
+  width: 100%;
+  border-top: 2px solid #007bff;
+  position: relative;
+  z-index: 1 !important;
+}
+
+/* Media query para impresión */
+@media print {
+  .embedded-map {
+    height: 400px;
+  }
+}
+
+/* Asegurar que cuando el header es sticky, mantenga prioridad */
+.sticky {
+  z-index: 111 !important;
+}
+
+/* Estilos globales para mejorar la legibilidad de todos los elementos de Leaflet */
+.leaflet-container {
+  font-family: 'Inter', 'Roboto', 'Montserrat', sans-serif !important;
+  font-size: 14px !important;
+}
+
+.leaflet-control-zoom a {
+  font-size: 18px !important;
+  line-height: 30px !important;
+  color: #333 !important;
+}
+
+.leaflet-control-attribution {
+  font-size: 11px !important;
+  background-color: rgba(255, 255, 255, 0.8) !important;
+}
diff --git a/public/assets/css/map.css b/public/assets/css/map.css
@@ -59,6 +59,8 @@ h1 {
     height: 100vh;
     width: 100vw;
     border-top: 2px solid #007bff;
+    position: relative;
+    z-index: 1; /* Asegurar z-index bajo */
   }
 
   @media print {