Initial commit: MSD backend API, docs, mockups, README

2026-08-07 10:40:57 -04:00
commit 2f744811fc
12 changed files with 3159 additions and 0 deletions
@@ -0,0 +1,604 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Moore Sunny Daze — Maravilla 1403 | Miramar Beach, FL</title>
+<style>
+/* ===== RESET & BASE ===== */
+*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
+html{scroll-behavior:smooth;font-size:16px}
+body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;color:#3D3027;background:#FFFAF5;line-height:1.7;overflow-x:hidden}
+img{max-width:100%;height:auto;display:block}
+h1,h2,h3{line-height:1.2}
+a{color:inherit;text-decoration:none}
+
+/* ===== CSS VARIABLES ===== */
+:root{
+  --sand:#F5E6D3;
+  --sand-dark:#D4C4A8;
+  --sand-light:#FDF8F2;
+  --ocean:#6CB4D9;
+  --ocean-dark:#4A9BC5;
+  --ocean-light:#A8D8EA;
+  --palm:#6B8E5A;
+  --palm-dark:#4A6B3A;
+  --palm-light:#8FBC6B;
+  --coral:#E8836E;
+  --coral-dark:#D46A55;
+  --warm-white:#FFFAF5;
+  --brown:#3D3027;
+  --brown-light:#6B5D52;
+  --text-muted:#7A6E63;
+  --gold:#C9A84C;
+  --radius:12px;
+  --radius-sm:8px;
+  --shadow-sm:0 2px 8px rgba(0,0,0,.06);
+  --shadow:0 4px 20px rgba(0,0,0,.08);
+  --shadow-lg:0 8px 40px rgba(0,0,0,.12);
+  --max-width:1200px;
+}
+
+/* ===== UTILITY ===== */
+.container{max-width:var(--max-width);margin:0 auto;padding:0 1.5rem}
+.section{padding:5rem 0}
+.section-label{display:inline-block;font-size:.8rem;text-transform:uppercase;letter-spacing:.15em;color:var(--coral);font-weight:700;margin-bottom:.5rem}
+.section-title{font-size:clamp(2rem,4vw,2.8rem);color:var(--brown);margin-bottom:1rem;font-weight:700}
+.section-subtitle{font-size:1.15rem;color:var(--text-muted);max-width:640px;margin-bottom:2.5rem}
+
+/* ===== NAVIGATION ===== */
+.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;padding:1rem 0;transition:all .35s ease}
+.navbar.scrolled{background:rgba(255,250,245,.97);backdrop-filter:blur(10px);box-shadow:0 2px 20px rgba(0,0,0,.08);padding:.6rem 0}
+.navbar .container{display:flex;align-items:center;justify-content:space-between}
+.nav-logo{display:flex;align-items:center;gap:.5rem}
+.nav-logo .palm-icon{font-size:1.6rem}
+.nav-logo span{font-weight:700;font-size:1.25rem;color:var(--warm-white);transition:color .35s}
+.navbar.scrolled .nav-logo span{color:var(--brown)}
+.nav-btn{display:inline-flex;align-items:center;gap:.35rem;background:var(--coral);color:#fff;padding:.55rem 1.4rem;border-radius:50px;font-weight:700;font-size:.9rem;transition:all .25s;border:none;cursor:pointer;font-family:inherit}
+.nav-btn:hover{background:var(--coral-dark);transform:translateY(-1px);box-shadow:0 4px 15px rgba(232,131,110,.4)}
+.nav-mobile-btn{display:none}
+
+/* ===== HERO PARALLAX ===== */
+.hero{position:relative;height:100vh;min-height:600px;display:flex;align-items:center;justify-content:center;overflow:hidden}
+.hero-bg{position:absolute;inset:0;background:url('https://static.wixstatic.com/media/0a1b51_e07cc4dbb6c74815812ad594235b011e~mv2.jpg') center/cover no-repeat;will-change:transform;z-index:0}
+.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.25) 40%,rgba(0,0,0,.55) 100%);z-index:1}
+.hero-content{position:relative;z-index:2;text-align:center;color:#fff;padding:0 1.5rem;max-width:800px}
+.hero-subtitle{font-size:1.1rem;text-transform:uppercase;letter-spacing:.2em;margin-bottom:.75rem;opacity:.9;font-weight:500}
+.hero-title{font-size:clamp(2.4rem,6vw,4rem);font-weight:800;margin-bottom:1rem;text-shadow:0 2px 10px rgba(0,0,0,.3);line-height:1.15}
+.hero-title em{font-style:normal;color:var(--gold)}
+.hero-desc{font-size:1.2rem;margin-bottom:2rem;opacity:.95;max-width:600px;margin-left:auto;margin-right:auto}
+.hero-cta{display:inline-flex;align-items:center;gap:.5rem;background:var(--coral);color:#fff;padding:.85rem 2.2rem;border-radius:50px;font-weight:700;font-size:1.1rem;transition:all .3s;box-shadow:0 4px 20px rgba(232,131,110,.4);border:none;cursor:pointer;font-family:inherit}
+.hero-cta:hover{background:var(--coral-dark);transform:translateY(-2px);box-shadow:0 6px 28px rgba(232,131,110,.5)}
+.hero-scroll-indicator{position:absolute;bottom:2rem;left:50%;z-index:2;transform:translateX(-50%);animation:bounce 2s infinite;opacity:.8}
+.hero-scroll-indicator .arrow{display:block;width:24px;height:24px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)}
+@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(10px)}}
+
+/* ===== FADE-IN ON SCROLL ===== */
+.fade-up{opacity:0;transform:translateY(40px);transition:opacity .7s ease,transform .7s ease}
+.fade-up.visible{opacity:1;transform:translateY(0)}
+.fade-up-delay-1{transition-delay:.1s}
+.fade-up-delay-2{transition-delay:.2s}
+.fade-up-delay-3{transition-delay:.3s}
+
+/* ===== PROPERTY INTRO ===== */
+.property-intro{background:var(--warm-white)}
+.property-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
+.property-image img{border-radius:var(--radius);box-shadow:var(--shadow-lg);aspect-ratio:4/3;object-fit:cover;width:100%}
+.property-stats{display:flex;gap:1.5rem;flex-wrap:wrap;margin-top:1.5rem}
+.stat-badge{display:flex;align-items:center;gap:.4rem;background:var(--sand-light);padding:.5rem 1rem;border-radius:50px;font-weight:600;font-size:.9rem;color:var(--brown);border:1px solid var(--sand)}
+.stat-badge .icon{font-size:1.1rem}
+
+/* ===== ROOMS SECTION ===== */
+.rooms{background:var(--sand)}
+.rooms-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.8rem}
+.room-card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .3s,box-shadow .3s}
+.room-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
+.room-card img{width:100%;height:220px;object-fit:cover}
+.room-card-body{padding:1.4rem}
+.room-card-body h3{font-size:1.15rem;color:var(--brown);margin-bottom:.3rem}
+.room-card-body .room-badge{display:inline-block;font-size:.75rem;background:var(--ocean-light);color:var(--ocean-dark);padding:.2rem .7rem;border-radius:50px;font-weight:600;margin-bottom:.5rem}
+.room-card-body p{font-size:.9rem;color:var(--text-muted);line-height:1.5}
+
+/* ===== AMENITIES ===== */
+.amenities{background:var(--warm-white)}
+.amenities-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1.5rem}
+.amenity-card{background:#fff;border-radius:var(--radius);padding:1.8rem 1.2rem;text-align:center;box-shadow:var(--shadow-sm);transition:transform .3s,box-shadow .3s;border:1px solid transparent}
+.amenity-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--ocean-light)}
+.amenity-icon{font-size:2.4rem;margin-bottom:.6rem;display:block}
+.amenity-card h4{font-size:.9rem;color:var(--brown);font-weight:600}
+.amenity-card p{font-size:.78rem;color:var(--text-muted);margin-top:.2rem}
+
+/* ===== COMMUNITY BANNER ===== */
+.community{position:relative;padding:6rem 0;overflow:hidden;color:#fff}
+.community-bg{position:absolute;inset:0;background:url('https://static.wixstatic.com/media/0a1b51_6e0326ddac2349b9a62a2a416dcb49e5~mv2.jpg') center/cover no-repeat fixed;z-index:0}
+.community::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.5);z-index:1}
+.community .container{position:relative;z-index:2}
+.community .section-title{color:#fff}
+.community .section-subtitle{color:rgba(255,255,255,.85)}
+.community-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;margin-top:2rem}
+.community-feature{background:rgba(255,255,255,.12);backdrop-filter:blur(8px);border-radius:var(--radius);padding:1.5rem;border:1px solid rgba(255,255,255,.2);transition:transform .3s}
+.community-feature:hover{transform:translateY(-4px);background:rgba(255,255,255,.18)}
+.community-feature .feature-icon{font-size:2rem;margin-bottom:.5rem}
+.community-feature h4{font-size:1rem;margin-bottom:.3rem}
+.community-feature p{font-size:.85rem;opacity:.85}
+
+/* ===== BEACH SERVICE ===== */
+.beach-service{background:var(--ocean);color:#fff;text-align:center}
+.beach-service .section-title,.beach-service .section-subtitle{color:#fff}
+.beach-service-inner{display:flex;align-items:center;justify-content:center;gap:3rem;flex-wrap:wrap;margin-top:2rem}
+.beach-stat{text-align:center}
+.beach-stat .number{font-size:3.5rem;font-weight:800;line-height:1}
+.beach-stat .label{font-size:.95rem;opacity:.85;margin-top:.3rem}
+
+/* ===== NEARBY ===== */
+.nearby{background:var(--sand-light)}
+.nearby-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:2rem}
+.nearby-tab{padding:.55rem 1.4rem;border-radius:50px;border:2px solid var(--sand-dark);background:transparent;font-weight:600;font-size:.9rem;color:var(--brown);cursor:pointer;transition:all .25s;font-family:inherit}
+.nearby-tab:hover,.nearby-tab.active{background:var(--ocean);border-color:var(--ocean);color:#fff}
+.nearby-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.2rem}
+.nearby-item{display:flex;align-items:flex-start;gap:.8rem;background:#fff;border-radius:var(--radius-sm);padding:1rem;box-shadow:var(--shadow-sm);transition:transform .25s,box-shadow .25s}
+.nearby-item:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
+.nearby-item .item-icon{font-size:1.4rem;flex-shrink:0;margin-top:2px}
+.nearby-item .item-info strong{display:block;font-size:.9rem;color:var(--brown)} 
+.nearby-item .item-info span{font-size:.8rem;color:var(--text-muted)}
+
+/* ===== OWNERS ===== */
+.owners{background:var(--warm-white)}
+.owners-grid{display:grid;grid-template-columns:auto 1fr;gap:3rem;align-items:center}
+.owners-photo{width:240px;height:240px;border-radius:50%;object-fit:cover;box-shadow:var(--shadow-lg);border:4px solid var(--sand)}
+.owners-text h2{margin-bottom:.5rem}
+.owners-text .tag{color:var(--coral);font-weight:600;font-size:.95rem;margin-bottom:1rem}
+.owners-text p{color:var(--text-muted);margin-bottom:1rem}
+
+/* ===== BOOK NOW STRIP ===== */
+.book-strip{background:linear-gradient(135deg,var(--ocean-dark),var(--ocean));color:#fff;text-align:center;padding:4rem 0}
+.book-strip h2{color:#fff;font-size:clamp(1.8rem,3vw,2.4rem);margin-bottom:.5rem}
+.book-strip p{opacity:.9;margin-bottom:2rem;font-size:1.1rem}
+.book-strip .hero-cta{font-size:1.15rem;padding:1rem 2.8rem}
+
+/* ===== FOOTER ===== */
+.footer{background:var(--brown);color:#D4C4A8;padding:4rem 0 2rem}
+.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2.5rem;margin-bottom:3rem}
+.footer h4{color:var(--warm-white);margin-bottom:1rem;font-size:1rem}
+.footer a{color:#D4C4A8;transition:color .2s}
+.footer a:hover{color:var(--coral)}
+.footer-links{list-style:none;display:flex;flex-direction:column;gap:.5rem}
+.footer-links li{font-size:.9rem}
+.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:2rem;text-align:center;font-size:.85rem}
+
+/* ===== MOBILE BOOK NOW FAB ===== */
+.fab-book{display:none;position:fixed;bottom:1.5rem;right:1.5rem;z-index:999;background:var(--coral);color:#fff;padding:.8rem 1.5rem;border-radius:50px;font-weight:700;font-size:1rem;box-shadow:0 4px 25px rgba(232,131,110,.5);border:none;cursor:pointer;font-family:inherit;align-items:center;gap:.4rem;transition:transform .25s}
+.fab-book:active{transform:scale(.95)}
+
+/* ===== RESPONSIVE ===== */
+@media(max-width:768px){
+  .section{padding:3rem 0}
+  .hero{min-height:500px}
+  .hero-title br{display:none}
+  .property-grid{grid-template-columns:1fr;gap:2rem}
+  .property-grid .property-text{order:1}
+  .property-grid .property-image{order:2}
+  .rooms-grid{grid-template-columns:1fr}
+  .amenities-grid{grid-template-columns:repeat(2,1fr);gap:1rem}
+  .community-features{grid-template-columns:1fr}
+  .owners-grid{grid-template-columns:1fr;text-align:center}
+  .owners-photo{margin:0 auto;width:180px;height:180px}
+  .nav-desktop-btn{display:none}
+  .fab-book{display:inline-flex}
+}
+
+@media(max-width:480px){
+  .amenities-grid{grid-template-columns:repeat(2,1fr)}
+  .nearby-grid{grid-template-columns:1fr}
+  .beach-stat .number{font-size:2.5rem}
+}
+</style>
+</head>
+<body>
+
+<!-- ===== NAVBAR ===== -->
+<nav class="navbar" id="navbar">
+  <div class="container">
+    <div class="nav-logo">
+      <span class="palm-icon">🌴</span>
+      <span>Moore Sunny Daze</span>
+    </div>
+    <a href="#book" class="nav-btn nav-desktop-btn">🏖️ Book Now</a>
+  </div>
+</nav>
+
+<!-- ===== HERO ===== -->
+<section class="hero" id="hero">
+  <div class="hero-bg" id="hero-bg"></div>
+  <div class="hero-content fade-up visible">
+    <p class="hero-subtitle">Maravilla 1403 · Miramar Beach, Florida</p>
+    <h1 class="hero-title">Your <em>Sunny</em> Beach<br>Escape Awaits</h1>
+    <p class="hero-desc">3BR / 2BA · Sleeps 8 · Gated Beachfront Community<br>2.5 acres of sugar-white sand on the Emerald Coast</p>
+    <a href="#book" class="hero-cta">🏖️ Book Your Stay</a>
+  </div>
+  <div class="hero-scroll-indicator">
+    <span class="arrow"></span>
+  </div>
+</section>
+
+<!-- ===== PROPERTY INTRO ===== -->
+<section class="section property-intro">
+  <div class="container">
+    <div class="property-grid">
+      <div class="property-text fade-up">
+        <span class="section-label">Welcome To</span>
+        <h2 class="section-title">Moore Sunny Daze</h2>
+        <p>Come make family memories at our beautiful beachfront condo in Maravilla — a gated resort community on Miramar Beach. With 3 bedrooms, 2 baths, and room for up to 8 guests, it's the perfect home base for your Emerald Coast getaway.</p>
+        <p style="margin-top:1rem">Wake up to Gulf views from the private balcony, spend your days on our 2.5 acres of private sugar-white sand beach, and unwind in one of two sparkling pools. Whether you're here for the beaches, the dining, or just some quality family time — Moore Sunny Daze delivers.</p>
+        <div class="property-stats">
+          <span class="stat-badge"><span class="icon">🛏️</span> 3 Bedrooms</span>
+          <span class="stat-badge"><span class="icon">🛁</span> 2 Baths</span>
+          <span class="stat-badge"><span class="icon">👨‍👩‍👧‍👦</span> Sleeps 8</span>
+          <span class="stat-badge"><span class="icon">🏖️</span> Beachfront</span>
+          <span class="stat-badge"><span class="icon">🐕</span> Dog Friendly</span>
+        </div>
+      </div>
+      <div class="property-image fade-up fade-up-delay-1">
+        <img src="https://static.wixstatic.com/media/0a1b51_cc8d5a3847bf46ed90d4f801d63ccc47~mv2.jpg" alt="Living room at Moore Sunny Daze" loading="lazy">
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ===== BEDROOMS ===== -->
+<section class="section rooms" id="rooms">
+  <div class="container">
+    <span class="section-label">Sleeping Arrangements</span>
+    <h2 class="section-title">Room to Relax</h2>
+    <p class="section-subtitle">Four comfortable sleeping spaces — perfect for families and groups of up to 8.</p>
+    <div class="rooms-grid">
+      <div class="room-card fade-up">
+        <img src="https://static.wixstatic.com/media/0a1b51_f0ab02b0263d4d9f8deb071af33bf414~mv2.jpg" alt="King suite bedroom" loading="lazy">
+        <div class="room-card-body">
+          <span class="room-badge">🛏️ Primary Suite</span>
+          <h3>King Suite with Private Bath</h3>
+          <p>Spacious king bedroom with en-suite bathroom and private balcony access — wake up to Gulf breezes.</p>
+        </div>
+      </div>
+      <div class="room-card fade-up fade-up-delay-1">
+        <img src="https://static.wixstatic.com/media/0a1b51_f0ab02b0263d4d9f8deb071af33bf414~mv2.jpg" alt="Second king bedroom" loading="lazy">
+        <div class="room-card-body">
+          <span class="room-badge">🛏️ Second Bedroom</span>
+          <h3>King with Bath Access</h3>
+          <p>Comfortable king bedroom with direct access to a full bathroom — restful and private.</p>
+        </div>
+      </div>
+      <div class="room-card fade-up fade-up-delay-2">
+        <img src="https://static.wixstatic.com/media/0a1b51_badbf4f136c741a1b2eae378e1d92787~mv2.jpg" alt="Bunk room" loading="lazy">
+        <div class="room-card-body">
+          <span class="room-badge">👧 Kids' Favorite</span>
+          <h3>Bunk Room</h3>
+          <p>Fun bunk beds with hallway bath access — the kids will love it!</p>
+        </div>
+      </div>
+      <div class="room-card fade-up fade-up-delay-3">
+        <img src="https://static.wixstatic.com/media/0a1b51_cc8d5a3847bf46ed90d4f801d63ccc47~mv2.jpg" alt="Living room with sleeper sofa" loading="lazy">
+        <div class="room-card-body">
+          <span class="room-badge">🛋️ Living Room</span>
+          <h3>Queen Sleeper Sofa</h3>
+          <p>New queen sleeper sofa in the living room — comfortable extra sleeping for two.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ===== KITCHEN & LIVING ===== -->
+<section class="section" style="background:var(--warm-white)">
+  <div class="container">
+    <div class="property-grid">
+      <div class="property-image fade-up">
+        <img src="https://static.wixstatic.com/media/0a1b51_fda7ac3fe55d429393a51b2c1148dbb5~mv2.jpg" alt="Kitchen and dining area" loading="lazy" style="aspect-ratio:16/10">
+      </div>
+      <div class="property-text fade-up fade-up-delay-1">
+        <span class="section-label">Interior</span>
+        <h2 class="section-title">Fully Equipped<br>Kitchen &amp; Living</h2>
+        <p>Cook like you're at home in our fully equipped kitchen with modern appliances, spacious countertops, and a dining area for family meals. The open-concept living room flows seamlessly to the balcony — perfect for gathering after a day at the beach.</p>
+        <div class="property-stats">
+          <span class="stat-badge"><span class="icon">🍳</span> Full Kitchen</span>
+          <span class="stat-badge"><span class="icon">📺</span> WiFi + TV</span>
+          <span class="stat-badge"><span class="icon">❄️</span> Central A/C</span>
+          <span class="stat-badge"><span class="icon">🅿️</span> Free Parking</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ===== AMENITIES ===== -->
+<section class="section amenities" id="amenities">
+  <div class="container">
+    <span class="section-label">Resort Amenities</span>
+    <h2 class="section-title">Everything You Need</h2>
+    <p class="section-subtitle">Maravilla offers resort-style amenities for the whole family — all just steps from your door.</p>
+    <div class="amenities-grid">
+      <div class="amenity-card fade-up">
+        <span class="amenity-icon">🏊</span>
+        <h4>2 Pools</h4>
+        <p>One heated in winter</p>
+      </div>
+      <div class="amenity-card fade-up fade-up-delay-1">
+        <span class="amenity-icon">♨️</span>
+        <h4>Hot Tub</h4>
+        <p>Open year-round</p>
+      </div>
+      <div class="amenity-card fade-up fade-up-delay-2">
+        <span class="amenity-icon">🏖️</span>
+        <h4>Private Beach</h4>
+        <p>2.5 acres of white sand</p>
+      </div>
+      <div class="amenity-card fade-up">
+        <span class="amenity-icon">🎾</span>
+        <h4>Tennis &amp; Pickleball</h4>
+        <p>2 courts, 1 lined for pickleball</p>
+      </div>
+      <div class="amenity-card fade-up fade-up-delay-1">
+        <span class="amenity-icon">🏀</span>
+        <h4>Basketball</h4>
+        <p>Full court</p>
+      </div>
+      <div class="amenity-card fade-up fade-up-delay-2">
+        <span class="amenity-icon">🍖</span>
+        <h4>BBQ Grills</h4>
+        <p>Poolside grilling</p>
+      </div>
+      <div class="amenity-card fade-up">
+        <span class="amenity-icon">💪</span>
+        <h4>Fitness Center</h4>
+        <p>Stay active on vacation</p>
+      </div>
+      <div class="amenity-card fade-up fade-up-delay-1">
+        <span class="amenity-icon">🐕</span>
+        <h4>Dog Friendly</h4>
+        <p>Bring your furry family</p>
+      </div>
+      <div class="amenity-card fade-up fade-up-delay-2">
+        <span class="amenity-icon">🔑</span>
+        <h4>Self Check-In</h4>
+        <p>Keypad entry</p>
+      </div>
+      <div class="amenity-card fade-up">
+        <span class="amenity-icon">🪑</span>
+        <h4>Beach Service</h4>
+        <p>4 chairs + 2 umbrellas</p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ===== POOL & BEACH PHOTOS ===== -->
+<section class="section" style="background:var(--sand)">
+  <div class="container">
+    <span class="section-label">The Views</span>
+    <h2 class="section-title">Pool, Beach &amp; Beyond</h2>
+    <p class="section-subtitle">From the pool deck to the sugar-white shoreline — every angle is postcard-worthy.</p>
+    <div style="display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;">
+      <img src="https://static.wixstatic.com/media/0a1b51_6fe99a65a950470bb4a760ce751d7631~mv2.jpg" alt="Maravilla pool" loading="lazy" class="fade-up" style="border-radius:var(--radius);box-shadow:var(--shadow-lg);aspect-ratio:4/3;object-fit:cover;width:100%">
+      <img src="https://static.wixstatic.com/media/0a1b51_6781033f117e4c78979c2e8dcdeba671~mv2.jpg" alt="Miramar Beach view" loading="lazy" class="fade-up fade-up-delay-1" style="border-radius:var(--radius);box-shadow:var(--shadow-lg);aspect-ratio:4/3;object-fit:cover;width:100%">
+    </div>
+  </div>
+</section>
+
+<!-- ===== BEACH SERVICE ===== -->
+<section class="section beach-service" id="beach-service">
+  <div class="container">
+    <span class="section-label" style="color:rgba(255,255,255,.75)">Included With Your Stay</span>
+    <h2 class="section-title">Beach Service Included</h2>
+    <p class="section-subtitle">Available mid-March through late October — set up and waiting for you every morning.</p>
+    <div class="beach-service-inner">
+      <div class="beach-stat fade-up">
+        <div class="number">4</div>
+        <div class="label">Beach Chairs</div>
+      </div>
+      <div class="beach-stat fade-up fade-up-delay-1">
+        <div class="number">2</div>
+        <div class="label">Umbrellas</div>
+      </div>
+      <div class="beach-stat fade-up fade-up-delay-2">
+        <div class="number">2.5</div>
+        <div class="label">Acres Private Beach</div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ===== COMMUNITY ===== -->
+<section class="community" id="community">
+  <div class="community-bg"></div>
+  <div class="container">
+    <span class="section-label" style="color:rgba(255,255,255,.75)">The Community</span>
+    <h2 class="section-title">Maravilla Resort</h2>
+    <p class="section-subtitle">A gated beachfront community on Miramar Beach — where the Emerald Coast shines brightest.</p>
+    <div class="community-features">
+      <div class="community-feature fade-up">
+        <div class="feature-icon">🏘️</div>
+        <h4>Gated Community</h4>
+        <p>Secure, private access for residents and guests only.</p>
+      </div>
+      <div class="community-feature fade-up fade-up-delay-1">
+        <div class="feature-icon">🏖️</div>
+        <h4>2.5 Acre Private Beach</h4>
+        <p>Sugar-white sand stretching along the Gulf — never crowded.</p>
+      </div>
+      <div class="community-feature fade-up fade-up-delay-2">
+        <div class="feature-icon">📍</div>
+        <h4>Prime Location</h4>
+        <p>On Scenic Gulf Drive between Destin Harbor and 30A — close to everything.</p>
+      </div>
+      <div class="community-feature fade-up fade-up-delay-3">
+        <div class="feature-icon">🌅</div>
+        <h4>Gulf Views</h4>
+        <p>Stunning sunsets from your private balcony — every evening is a show.</p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ===== NEARBY ===== -->
+<section class="section nearby" id="nearby">
+  <div class="container">
+    <span class="section-label">Explore the Area</span>
+    <h2 class="section-title">Nearby Restaurants &amp; Attractions</h2>
+    <p class="section-subtitle">Everything you need within a few miles — from casual beach eats to upscale dining and shopping.</p>
+    <div class="nearby-tabs">
+      <button class="nearby-tab active" onclick="switchTab('dining',this)">🍽️ Dining</button>
+      <button class="nearby-tab" onclick="switchTab('shopping',this)">🛍️ Shopping</button>
+      <button class="nearby-tab" onclick="switchTab('attractions',this)">🎯 Attractions</button>
+    </div>
+    <div class="nearby-grid" id="nearby-dining">
+      <div class="nearby-item"><span class="item-icon">🦞</span><div class="item-info"><strong>Pompano Joe's</strong><span>Beachfront seafood, casual</span></div></div>
+      <div class="nearby-item"><span class="item-icon">🐟</span><div class="item-info"><strong>Captain Dave's</strong><span>Fresh Gulf seafood</span></div></div>
+      <div class="nearby-item"><span class="item-icon">🍔</span><div class="item-info"><strong>Surf Hut</strong><span>Beachside burgers & drinks</span></div></div>
+      <div class="nearby-item"><span class="item-icon">🦀</span><div class="item-info"><strong>Kenny D's</strong><span>Local seafood favorite</span></div></div>
+      <div class="nearby-item"><span class="item-icon">🍝</span><div class="item-info"><strong>Mama Clemenza's</strong><span>Italian breakfast & brunch</span></div></div>
+      <div class="nearby-item"><span class="item-icon">🍷</span><div class="item-info"><strong>Bijoux</strong><span>Upscale New Orleans seafood</span></div></div>
+      <div class="nearby-item"><span class="item-icon">🧀</span><div class="item-info"><strong>Vin'Tij Food & Wine</strong><span>Wine bar at Grand Blvd</span></div></div>
+      <div class="nearby-item"><span class="item-icon">🌺</span><div class="item-info"><strong>Tommy Bahama</strong><span>Island-inspired dining</span></div></div>
+    </div>
+    <div class="nearby-grid" id="nearby-shopping" style="display:none">
+      <div class="nearby-item"><span class="item-icon">🛒</span><div class="item-info"><strong>Winn-Dixie</strong><span>Grocery — 1.5 miles</span></div></div>
+      <div class="nearby-item"><span class="item-icon">🏪</span><div class="item-info"><strong>Wal-Mart</strong><span>Supercenter nearby</span></div></div>
+      <div class="nearby-item"><span class="item-icon">🛍️</span><div class="item-info"><strong>Sandestin Outlet Mall</strong><span>Premium outlet shopping</span></div></div>
+      <div class="nearby-item"><span class="item-icon">✨</span><div class="item-info"><strong>Grand Blvd</strong><span>Upscale shopping district</span></div></div>
+      <div class="nearby-item"><span class="item-icon">👗</span><div class="item-info"><strong>Silver Sands Outlets</strong><span>Designer outlet stores</span></div></div>
+    </div>
+    <div class="nearby-grid" id="nearby-attractions" style="display:none">
+      <div class="nearby-item"><span class="item-icon">🏖️</span><div class="item-info"><strong>James Lee Beach</strong><span>Direct public beach access</span></div></div>
+      <div class="nearby-item"><span class="item-icon">⚓</span><div class="item-info"><strong>Destin Harbor</strong><span>World's Luckiest Fishing Village</span></div></div>
+      <div class="nearby-item"><span class="item-icon">🛣️</span><div class="item-info"><strong>30A</strong><span>Scenic coastal highway & boutique towns</span></div></div>
+      <div class="nearby-item"><span class="item-icon">🌊</span><div class="item-info"><strong>Emerald Coast</strong><span>Stunning green-hued water</span></div></div>
+    </div>
+  </div>
+</section>
+
+<!-- ===== OWNERS ===== -->
+<section class="section owners" id="owners">
+  <div class="container">
+    <div class="owners-grid">
+      <img src="https://static.wixstatic.com/media/0a1b51_5dca81e7c6984df68055636c3ab61015~mv2.jpg" alt="Tim & Ashley Moore" class="owners-photo fade-up" loading="lazy">
+      <div class="owners-text fade-up fade-up-delay-1">
+        <span class="section-label">Your Hosts</span>
+        <h2 class="section-title">Tim &amp; Ashley Moore</h2>
+        <p class="tag">Welcome to our family's beach retreat!</p>
+        <p>We fell in love with Miramar Beach years ago and are thrilled to share our slice of paradise with you. Our goal is simple: give your family the kind of beach vacation that turns into a tradition. We've stocked the condo with everything you need, partnered with the best beach service on the coast, and are always just a message away.</p>
+        <p style="font-style:italic">"Come soak up the sun and make some memories. That's what Moore Sunny Daze is all about."</p>
+        <p style="font-weight:600;color:var(--coral)">— Tim &amp; Ashley</p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ===== BOOK NOW ===== -->
+<section class="book-strip" id="book">
+  <div class="container">
+    <span class="section-label" style="color:rgba(255,255,255,.75)">Ready to Escape?</span>
+    <h2>Book Your Stay at Moore Sunny Daze</h2>
+    <p>Maravilla 1403 · Miramar Beach, FL · 3BR / 2BA · Sleeps 8 · Dog Friendly</p>
+    <a href="https://www.vrbo.com/1313017" class="hero-cta" target="_blank" rel="noopener">🏖️ Check Availability on VRBO</a>
+    <p style="margin-top:1rem;font-size:.9rem;opacity:.75">Also available on <a href="https://airbnb.com/rooms/1387088497032914961" target="_blank" rel="noopener" style="text-decoration:underline;color:#fff">Airbnb</a> — 5.0 ⭐ · 3-night minimum</p>
+  </div>
+</section>
+
+<!-- ===== FOOTER ===== -->
+<footer class="footer">
+  <div class="container">
+    <div class="footer-grid">
+      <div>
+        <h4>🌴 Moore Sunny Daze</h4>
+        <p style="font-size:.9rem">Maravilla 1403<br>Miramar Beach, FL 32550</p>
+      </div>
+      <div>
+        <h4>Quick Links</h4>
+        <ul class="footer-links">
+          <li><a href="#rooms">Bedrooms</a></li>
+          <li><a href="#amenities">Amenities</a></li>
+          <li><a href="#community">Maravilla</a></li>
+          <li><a href="#nearby">Nearby</a></li>
+          <li><a href="#book">Book Now</a></li>
+        </ul>
+      </div>
+      <div>
+        <h4>Book Direct</h4>
+        <ul class="footer-links">
+          <li><a href="https://www.vrbo.com/1313017" target="_blank" rel="noopener">🏖️ VRBO Listing</a></li>
+          <li><a href="https://airbnb.com/rooms/1387088497032914961" target="_blank" rel="noopener">⭐ Airbnb (5.0)</a></li>
+          <li><a href="https://facebook.com/mooresunnydaze" target="_blank" rel="noopener">📘 Facebook</a></li>
+          <li><a href="https://mooresunnydaze.com" target="_blank" rel="noopener">🌐 mooresunnydaze.com</a></li>
+        </ul>
+      </div>
+      <div>
+        <h4>Hosted by</h4>
+        <p style="font-size:.9rem">Tim &amp; Ashley Moore<br>Superhosts · 1 year hosting</p>
+      </div>
+    </div>
+    <div class="footer-bottom">
+      <p>&copy; 2026 Moore Sunny Daze. All rights reserved. | Maravilla 1403, Miramar Beach, FL</p>
+    </div>
+  </div>
+</footer>
+
+<!-- ===== MOBILE BOOK NOW FAB ===== -->
+<a href="#book" class="fab-book">🏖️ Book Now</a>
+
+<script>
+/* ===== PARALLAX HERO ===== */
+const heroBg = document.getElementById('hero-bg');
+const navbar = document.getElementById('navbar');
+
+window.addEventListener('scroll', () => {
+  const scrollY = window.scrollY;
+
+  // Parallax
+  if (scrollY < window.innerHeight) {
+    heroBg.style.transform = `translateY(${scrollY * 0.4}px)`;
+  }
+
+  // Navbar
+  navbar.classList.toggle('scrolled', scrollY > 60);
+});
+
+/* ===== FADE-UP ON SCROLL ===== */
+const observer = new IntersectionObserver((entries) => {
+  entries.forEach(entry => {
+    if (entry.isIntersecting) {
+      entry.target.classList.add('visible');
+    }
+  });
+}, { threshold: 0.15, rootMargin: '0px 0px -40px 0px' });
+
+document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));
+
+/* ===== NEARBY TABS ===== */
+function switchTab(tab, btn) {
+  document.querySelectorAll('.nearby-tab').forEach(b => b.classList.remove('active'));
+  btn.classList.add('active');
+
+  ['dining','shopping','attractions'].forEach(id => {
+    const el = document.getElementById(`nearby-${id}`);
+    if (el) el.style.display = id === tab ? 'grid' : 'none';
+  });
+}
+
+/* ===== SMOOTH SCROLL OFFSET FOR FIXED NAV ===== */
+document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+  anchor.addEventListener('click', function(e) {
+    const href = this.getAttribute('href');
+    if (href === '#') return;
+    const target = document.querySelector(href);
+    if (target) {
+      e.preventDefault();
+      const offset = 80;
+      const top = target.getBoundingClientRect().top + window.pageYOffset - offset;
+      window.scrollTo({ top, behavior: 'smooth' });
+    }
+  });
+});
+</script>
+
+</body>
+</html>