patx/miadruck
initial commit, mias website
Commit ea16362 · patx · 2026-01-09T03:38:48-05:00
Comments
No comments yet.
Diff
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..b1ac0d4
--- /dev/null
+++ b/index.html
@@ -0,0 +1,1000 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width,initial-scale=1" />
+ <title>Mia Druck | Fort Lauderdale Real Estate</title>
+
+ <!-- Fonts (optional, remove if you want fully offline) -->
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+
+ <style>
+ :root{
+ --text:#0b1220;
+ --muted:rgba(11,18,32,.68);
+ --line:rgba(11,18,32,.12);
+ --card:#ffffff;
+ --shadow:0 24px 70px rgba(0,0,0,.18);
+
+ /* Ocean Glass palette (blue + green) */
+ --accent:#0b78b6; /* ocean blue */
+ --accent2:#66b83d; /* fresh green */
+ --accent-dark:#075a8a; /* deeper blue for hover/contrast */
+
+ /* RGB helpers so you can do rgba() without hard-coding */
+ --accent-rgb: 11, 120, 182;
+ --accent2-rgb: 102, 184, 61;
+
+ --wrap:1120px;
+ --radius:28px;
+ }
+
+ *{ box-sizing:border-box; }
+ html,body{ margin:0; padding:0; }
+ body{
+ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
+ color:var(--text);
+ background:#fff;
+ }
+ a{ color:inherit; text-decoration:none; }
+ .wrap{ width:min(var(--wrap), calc(100% - 36px)); margin:0 auto; }
+
+ /* Top bar */
+ .topbar{
+ position: sticky;
+ top: 0;
+ z-index: 50;
+
+ /* Frosted glass */
+ background: rgba(255, 255, 255, 0.65);
+ backdrop-filter: blur(18px) saturate(1.4);
+ -webkit-backdrop-filter: blur(18px) saturate(1.4);
+
+ /* Subtle separation */
+ border-bottom: 1px solid rgba(255, 255, 255, 0.35);
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
+ }
+ .topbar-inner{
+ width:min(var(--wrap), calc(100% - 36px));
+ margin:0 auto;
+ padding:14px 0;
+ display:flex;
+ align-items:center;
+ justify-content:space-between;
+ gap:14px;
+ }
+ .brand{
+ font-family:Poppins, Inter, system-ui;
+ font-weight:800;
+ letter-spacing:.2px;
+ }
+ .navlinks{ display:flex; gap:18px; align-items:center; }
+ .navlinks a{
+ color:var(--muted);
+ font-weight:700;
+ padding:10px 12px;
+ border-radius:999px;
+ }
+ .navlinks a:hover{ color:var(--text); background:rgba(0,0,0,.04); }
+ .nav-cta{
+ border:0;
+ background:linear-gradient(90deg, var(--accent), var(--accent2));
+ color:#fff !important;
+ }
+ .nav-cta:hover{ filter:brightness(1.03); }
+
+ /* Hero */
+ .hero{
+ position:relative;
+ min-height:78vh;
+ overflow:hidden;
+ display:flex;
+ align-items:stretch;
+ }
+ .hero-bg{
+ position:absolute; inset:0;
+ background-size:cover;
+ background-position:center;
+ transform:scale(1.03);
+ filter:saturate(1.05) contrast(1.05);
+ }
+ .hero-overlay{
+ position:absolute; inset:0;
+ background:linear-gradient(90deg,
+ rgba(0,0,0,.56) 0%,
+ rgba(0,0,0,.24) 44%,
+ rgba(0,0,0,.12) 100%);
+ }
+ .hero-inner{
+ position:relative;
+ width:min(var(--wrap), calc(100% - 36px));
+ margin:0 auto;
+ padding:48px 0;
+ display:grid;
+ grid-template-columns: 1.05fr .95fr;
+ gap:28px;
+ align-items:center;
+ }
+ @media (max-width: 980px){
+ .hero{ min-height:unset; }
+ .hero-inner{ grid-template-columns:1fr; padding:26px 0; }
+ }
+
+ .kicker{
+ color:rgba(255,255,255,.78);
+ font-weight:800;
+ letter-spacing:.12em;
+ text-transform:uppercase;
+ font-size:12px;
+ margin-bottom:14px;
+ }
+ .hero-left h1{
+ margin:0;
+ color:#fff;
+ font-family:Poppins, Inter, system-ui;
+ font-size: clamp(44px, 5vw, 76px);
+ line-height: .95;
+ letter-spacing:-.02em;
+ }
+ .hero-left h1 span{ color:rgba(255,255,255,.92); }
+ .subhead{
+ margin:14px 0 0;
+ color:rgba(255,255,255,.78);
+ max-width:60ch;
+ font-size:15px;
+ line-height:1.55;
+ }
+ .hero-actions{
+ margin-top:18px;
+ display:flex;
+ gap:12px;
+ flex-wrap:wrap;
+ align-content: right;
+ }
+ .pill{
+ display:inline-flex;
+ align-items:center;
+ justify-content:center;
+ height:55px;
+ padding:0 18px;
+ border-radius:999px;
+ background:linear-gradient(90deg, var(--accent), var(--accent2));
+ color:#fff;
+ font-family:Poppins, Inter, system-ui;
+ font-weight:800;
+ font-size:2em;
+ box-shadow:0 18px 40px rgba(var(--accent-rgb), .28);
+ transition:transform .12s ease, filter .12s ease;
+ }
+ .pill:hover{ filter:brightness(1.02); transform:translateY(-1px); }
+ .pill:active{ transform:scale(.985); }
+ .pill.ghost{
+ background:rgba(255,255,255,.14);
+ border:1px solid rgba(255,255,255,.28);
+ box-shadow:none;
+ }
+
+ /* Right card */
+ .hero-right{ display:flex; justify-content:flex-end; }
+ .contact-card{
+ width:min(520px, 100%);
+ background-color: rgba(255, 255, 255, 0.8);
+ border-radius:var(--radius);
+ box-shadow:var(--shadow);
+ padding:26px;
+ }
+ .card-title{
+ font-family:Poppins, Inter, system-ui;
+ font-weight:900;
+ font-size:32px;
+ letter-spacing:-.02em;
+ text-align:center;
+ margin:0 0 12px;
+ }
+ .tabs{
+ display:flex;
+ gap:10px;
+ justify-content:center;
+ margin: 0 0 14px;
+ }
+ .tab{
+ border:1px solid rgba(0,0,0,.10);
+ background:#fff;
+ color:rgba(11,18,32,.78);
+ padding:10px 12px;
+ border-radius:999px;
+ font-weight:800;
+ font-size:13px;
+ cursor:pointer;
+ transition:background .12s ease;
+ user-select:none;
+ }
+ .tab.active{
+ background:rgba(var(--accent-rgb), .10);
+ border-color:rgba(var(--accent-rgb), .22);
+ color:rgba(11,18,32,.92);
+ }
+
+ .form{ display:grid; gap:12px; }
+ .row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
+ @media (max-width:560px){ .row2{ grid-template-columns:1fr; } }
+
+ label{
+ font-size:12px;
+ font-weight:800;
+ color:rgba(11,18,32,.70);
+ display:grid;
+ gap:6px;
+ }
+ input, textarea, select{
+ border-radius:12px;
+ border:1px solid rgba(0,0,0,.18);
+ padding:12px 12px;
+ font: inherit;
+ outline:none;
+ background:#fff;
+ }
+ input:focus, textarea:focus, select:focus{
+ border-color:rgba(var(--accent-rgb), .55);
+ box-shadow:0 0 0 4px rgba(var(--accent-rgb), .14);
+ }
+ .req{ color:var(--accent); font-weight:900; }
+
+ .send{
+ height:44px;
+ border:0;
+ border-radius:12px;
+ background:var(--accent);
+ color:#fff;
+ font-weight:900;
+ cursor:pointer;
+ width:140px;
+ justify-self:end;
+ transition:filter .12s ease, transform .12s ease;
+ }
+ .send:hover{ filter:brightness(1.03); }
+ .send:active{ transform:scale(.985); }
+
+ .micro{
+ margin-top:10px;
+ color:rgba(11,18,32,.60);
+ font-size:13px;
+ text-align:center;
+ }
+ .micro a{ color:var(--accent); font-weight:900; }
+
+ /* Sections */
+ .section{ padding: 54px 0; }
+ .section-head{
+ display:flex;
+ align-items:end;
+ justify-content:space-between;
+ gap:12px;
+ margin-bottom:16px;
+ }
+ .section-head h2{
+ margin:0;
+ font-family:Poppins, Inter, system-ui;
+ font-weight:900;
+ letter-spacing:-.02em;
+ font-size:26px;
+ }
+ .section-head .hint{
+ color:var(--muted);
+ font-weight:600;
+ font-size:14px;
+ }
+
+ /* Grid/cards */
+ .grid{
+ display:grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap:14px;
+ }
+ @media (max-width: 980px){ .grid{ grid-template-columns: repeat(2, 1fr); } }
+ @media (max-width: 640px){ .grid{ grid-template-columns: 1fr; } }
+
+ .card{
+ background:#fff;
+ border:1px solid rgba(0,0,0,.08);
+ border-radius:18px;
+ overflow:hidden;
+ box-shadow:0 16px 46px rgba(0,0,0,.08);
+ transition: transform .14s ease, box-shadow .14s ease;
+ }
+ .card:hover{ transform: translateY(-2px); box-shadow:0 22px 64px rgba(0,0,0,.10); }
+ .card-img{
+ height: 190px;
+ background-size: cover;
+ background-position: center;
+ background-color: rgba(0,0,0,.06);
+ }
+ .card-pad{ padding: 14px; }
+ .price{
+ font-family:Poppins, Inter, system-ui;
+ font-weight:900;
+ letter-spacing:-.01em;
+ margin-bottom:4px;
+ }
+ .title{
+ margin:0;
+ font-family:Poppins, Inter, system-ui;
+ font-weight:800;
+ letter-spacing:-.01em;
+ font-size:16px;
+ }
+ .meta{
+ margin-top:6px;
+ color:rgba(11,18,32,.62);
+ font-size:13px;
+ line-height:1.35;
+ }
+ .tags{
+ display:flex;
+ gap:6px;
+ flex-wrap:wrap;
+ margin-top:10px;
+ }
+ .tag{
+ font-size:12px;
+ font-weight:800;
+ padding:6px 8px;
+ border-radius:999px;
+ border:1px solid rgba(0,0,0,.08);
+ background:rgba(var(--accent2-rgb), .14);
+ color:rgba(11,18,32,.82);
+ }
+ .card-actions{
+ margin-top:12px;
+ display:flex;
+ justify-content:right; /* <-- center */
+ }
+ .btn-mini{
+ display:inline-flex;
+ align-items:center;
+ justify-content:center;
+ height:38px;
+ padding:0 12px;
+ border-radius:999px;
+ border:1px solid rgba(0,0,0,.10);
+ background:#fff;
+ font-weight:900;
+ color:rgba(11,18,32,.90);
+ cursor:pointer;
+ transition:background .12s ease;
+ }
+ .btn-mini:hover{ background:rgba(0,0,0,.04); }
+
+ /* --- add this CSS (near your other button styles) --- */
+ .btn-split{
+ display:flex;
+ overflow:hidden;
+ height:38px; /* matches .btn-mini */
+ border-radius:999px;
+ background:linear-gradient(90deg, var(--accent), var(--accent2));
+ border:0;
+ }
+ .btn-split a{
+ flex:1;
+ display:flex;
+ align-items:center;
+ justify-content:center;
+ padding:0 12px;
+ font-weight:900;
+ color:#fff;
+ text-decoration:none;
+ white-space:nowrap;
+ }
+ .btn-split a + a{
+ border-left:1px solid rgba(255,255,255,.28);
+ }
+ .btn-split a:hover{ filter:brightness(1.04); }
+ .btn-split a:active{ transform:scale(.985); }
+
+ .btn-mini.primary{
+ background:linear-gradient(90deg, var(--accent), var(--accent2));
+ border:0;
+ color:#fff;
+ }
+
+ /* Reviews */
+ .review-card{
+ border-radius:18px;
+ border:1px solid rgba(0,0,0,.08);
+ box-shadow:0 16px 46px rgba(0,0,0,.08);
+ background:#fff;
+ padding:18px;
+ }
+ .reviews-top{
+ display:flex;
+ align-items:center;
+ justify-content:space-between;
+ gap:12px;
+ margin-bottom:12px;
+ flex-wrap:wrap;
+ }
+ .rating{
+ display:flex;
+ align-items:center;
+ gap:10px;
+ font-weight:900;
+ font-family:Poppins, Inter, system-ui;
+ }
+ .stars{ letter-spacing:2px; color: rgba(var(--accent2-rgb), .95); }
+ .reviews-grid{
+ display:grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap:12px;
+ }
+ @media (max-width: 980px){ .reviews-grid{ grid-template-columns: repeat(2, 1fr);} }
+ @media (max-width: 640px){ .reviews-grid{ grid-template-columns: 1fr;} }
+ .review{
+ border:1px solid rgba(0,0,0,.08);
+ border-radius:14px;
+ padding:14px;
+ background:rgba(0,0,0,.01);
+ }
+ .review .name{ font-weight:900; margin-bottom:6px; }
+ .review .text{ color:rgba(11,18,32,.70); font-size:13px; line-height:1.5; }
+
+ /* About */
+ .about{
+ display:grid;
+ grid-template-columns: 1.1fr .9fr;
+ gap:14px;
+ align-items:stretch;
+ }
+ @media (max-width: 980px){ .about{ grid-template-columns:1fr; } }
+ .about-box{
+ border-radius:18px;
+ border:1px solid rgba(0,0,0,.08);
+ box-shadow:0 16px 46px rgba(0,0,0,.08);
+ background:#fff;
+ padding:20px;
+ }
+ .about-box h3{
+ margin:0 0 10px;
+ font-family:Poppins, Inter, system-ui;
+ font-weight:900;
+ letter-spacing:-.02em;
+ }
+ .about-box p{
+ margin:0;
+ color:rgba(11,18,32,.70);
+ line-height:1.6;
+ }
+ .about-list{
+ margin:12px 0 0;
+ padding-left:18px;
+ color:rgba(11,18,32,.68);
+ line-height:1.6;
+ font-weight:600;
+ }
+ /* Shared height for logo + socials */
+ .about-brand-row{
+ --brand-size: 80px;
+ margin-top:50px;
+ display:flex;
+ align-items:center;
+ justify-content:center;
+ gap:18px;
+ flex-wrap:nowrap;
+ }
+
+ /* Logo */
+ .about-brand-row img{
+ height:var(--brand-size);
+ width:auto;
+ display:block;
+ object-fit:contain;
+ }
+
+ /* Social icons */
+ .social-row{
+ display:flex;
+ align-items:center;
+ gap:16px;
+ }
+
+ .social-btn{
+ display:inline-flex;
+ align-items:center;
+ justify-content:center;
+ width:var(--brand-size);
+ height:var(--brand-size);
+ padding:0;
+ background:none;
+ border:0;
+ color:var(--accent-dark);
+ transition:transform .12s ease, filter .12s ease;
+ }
+
+ .social-btn:hover{
+ filter:brightness(1.1);
+ transform:translateY(-1px);
+ }
+
+ .social-btn:active{ transform:scale(.96); }
+
+ /* Make SVG fill the full button box */
+ .social-btn svg{
+ width:100%;
+ height:100%;
+ }
+
+ /* Footer */
+ footer{
+ padding:30px 0;
+ border-top:1px solid rgba(0,0,0,.06);
+ color:rgba(11,18,32,.55);
+ }
+ .footer-inner{
+ display:flex;
+ justify-content:space-between;
+ gap:12px;
+ flex-wrap:wrap;
+ font-weight:700;
+ font-size:13px;
+ }
+
+ /* Small utility */
+ .hide{ display:none !important; }
+ .muted{ color:var(--muted); }
+
+ /* Optional: mobile sticky quick actions */
+ .mobile-bar{
+ position:fixed;
+ left:12px; right:12px; bottom:12px;
+ display:none;
+ gap:10px;
+ z-index:60;
+ }
+ .mobile-bar a{
+ flex:1;
+ height:48px;
+ border-radius:999px;
+ display:flex;
+ align-items:center;
+ justify-content:center;
+ font-weight:900;
+ border:1px solid rgba(0,0,0,.10);
+ background:#fff;
+ box-shadow:0 18px 48px rgba(0,0,0,.14);
+ }
+ .mobile-bar a.primary{
+ border:0;
+ background:linear-gradient(90deg, var(--accent), var(--accent2));
+ color:#fff;
+ }
+ @media (max-width: 740px){
+ .mobile-bar{ display:flex; }
+ }
+ </style>
+</head>
+
+<body>
+
+ <!-- Top nav -->
+ <header class="topbar">
+ <div class="topbar-inner">
+ <div class="brand">
+ <a href="#top">Mia Druck</a> | <a class="brand" target="_blank" href="https://www.zillow.com/profile/Andrew%20West">Ocean Glades Realty</a>
+ </div>
+ <nav class="navlinks">
+ <a href="#active-listings">Active Listings</a>
+ <a href="#previous-sales">Previous Sales</a>
+ <a class="nav-cta" href="#contact">Contact</a>
+ </nav>
+ </div>
+ </header>
+
+ <!-- Hero -->
+ <section class="hero" id="top">
+ <!-- Replace this URL with your chosen Fort Lauderdale image path or remote URL -->
+ <div class="hero-bg"
+ style="background-image:url('https://i.postimg.cc/ZqVd7Zs5/Chat-GPT-Image-Jan-9-2026-03-20-31-AM.png');">
+ </div>
+ <div class="hero-overlay"></div>
+
+ <div class="hero-inner">
+ <div class="hero-left">
+ <div class="kicker">South Florida's Top Rated Agent</div>
+ <h1>Move with Mia</h1>
+ <p class="subhead">
+ Buying · Selling · Rentals
+ </p>
+
+ <div class="hero-actions">
+ <a href="tel:9545527330" class="pill">(954) 552-7330</a>
+ </div>
+ </div>
+
+ <div class="hero-right" id="mls">
+ <div class="contact-card">
+
+ <!-- CONTACT PANEL -->
+ <div id="panel-contact">
+ <form class="form" action="https://formspree.io/f/mpqqaadn" method="POST">
+ <div class="row2">
+ <label>
+ First Name
+ <input name="first_name" autocomplete="given-name" />
+ </label>
+ <label>
+ Last Name
+ <input name="last_name" autocomplete="family-name" />
+ </label>
+ </div>
+
+ <label>
+ Email
+ <input name="email" type="email" required autocomplete="email" />
+ </label>
+
+ <label>
+ Phone
+ <input name="phone" type="tel" autocomplete="tel" />
+ </label>
+
+ <label>
+ Message
+ <textarea name="message" rows="4" placeholder="Buying, selling, or just exploring?"></textarea>
+ </label>
+
+ <input type="hidden" name="source_page" value="home" />
+ <input type="hidden" id="listing_context" name="listing_context" value="" />
+
+ <button class="send" type="submit">Send</button>
+ </form>
+
+ </div>
+
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- Reviews -->
+ <section class="section" id="reviews">
+ <div class="wrap">
+ <div class="section-head">
+ <h2>What My Past Clients Are Saying</h2>
+ <div class="hint">Trusted by clients</div>
+ </div>
+
+ <div class="review-card">
+ <div class="reviews-top">
+ <div class="rating">
+ <span class="stars">★★★★★</span>
+ <span>5.0</span>
+ <span class="muted" style="font-weight:700;">(28 reviews)</span>
+ </div>
+
+ <!-- Put your Google reviews widget embed here OR link to the share URL -->
+ <a class="btn-mini primary" href="https://share.google/sgExBQ7qvd5iWNHKI" target="_blank" rel="noopener">View on Google</a>
+ </div>
+
+ <!-- If you have a widget snippet, paste it here and remove the sample reviews below -->
+ <div class="reviews-grid" id="reviewsGrid">
+ <div class="review">
+ <div class="name">Jennifer Colson</div>
+ <div class="text">Mia is absolutely wonderful to work with. She's professional, knowledgeable and incredibly responsive. Her expertise and honesty are invaluable traits. If your looking to buy, sell, rent- your in excellent hands</div>
+ </div>
+ <div class="review">
+ <div class="name">Jesse Haven</div>
+ <div class="text">I had the pleasure of working with Mia to purchase my first rental property, and I couldn't have asked for a better experience! Her expertise in the local market and understanding of my investment goals made the entire process smooth and stress-free. She was patient, responsive, and always available to answer my questions. Thanks to Mia, I was able to find the perfect property and start my real estate investment journey. Highly recommend!</div>
+ </div>
+ <div class="review">
+ <div class="name">Curt Lane</div>
+ <div class="text">Without a doubt the hardest working person I've ever had the pleasure of working with! Anytime of day 24/7 Mia was available and immediately responds to any questions or concerns. If things were not getting done, Mia had the issue resolved immediately. She made the process very easy and stress free from many viewings all the way to closing. I strongly recommend her if you are ever searching for your new home!</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- Featured Active Listings -->
+ <section class="section" id="active-listings">
+ <div class="wrap">
+ <div class="section-head">
+ <h2>Featured Active Listings</h2>
+ <div class="hint">Curated highlights</div>
+ </div>
+
+ <div id="featuredGrid" class="grid"></div>
+ </div>
+ </section>
+
+ <!-- Previous Sales -->
+ <section class="section" id="previous-sales">
+ <div class="wrap">
+ <div class="section-head">
+ <h2>Previous Sales</h2>
+ <div class="hint">Proven execution</div>
+ </div>
+
+ <div id="soldGrid" class="grid"></div>
+ </div>
+ </section>
+
+ <!-- About + Contact -->
+ <section class="section" id="about">
+ <div class="wrap">
+ <div class="section-head">
+ <h2>Contact Me</h2>
+ <div class="hint">Local expertise • fast execution</div>
+ </div>
+
+ <div class="about">
+ <div class="about-box">
+ <h3>About Mia - Real Estate Made Easy</h3>
+ <p>
+ Mia Druck helps buyers and sellers in South Florida with effective, confident guidance.
+ From condos and rentals to waterfront and luxury homes, she makes the process smooth with
+ fast communication and strong negotiation. When she’s not working, Mia is enjoying the
+ South Florida lifestyle—boat days, great dinners and happy hours. She brings that same relaxed,
+ result driven energy to every client experience.
+ </p>
+ <div class="about-brand-row">
+ <a href="https://www.zillow.com/profile/Andrew%20West" target="_blank">
+ <img src="https://i.postimg.cc/rs2FgrJX/broker-logo.png" alt="Ocean Glades Realty logo" />
+ </a>
+ <div class="social-row">
+ <!-- Instagram -->
+ <a class="social-btn" href="https://instagram.com/miadruck" target="_blank" rel="noopener" aria-label="Instagram">
+ <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
+ <path d="M7.5 2h9A5.5 5.5 0 0 1 22 7.5v9A5.5 5.5 0 0 1 16.5 22h-9A5.5 5.5 0 0 1 2 16.5v-9A5.5 5.5 0 0 1 7.5 2Z" stroke="currentColor" stroke-width="1.8"/>
+ <path d="M12 16.2a4.2 4.2 0 1 0 0-8.4 4.2 4.2 0 0 0 0 8.4Z" stroke="currentColor" stroke-width="1.8"/>
+ <path d="M17.3 6.9h.01" stroke="currentColor" stroke-width="3.2" stroke-linecap="round"/>
+ </svg>
+ </a>
+
+ <!-- Facebook -->
+ <a class="social-btn" href="https://facebook.com/YOUR_PAGE" target="_blank" rel="noopener" aria-label="Facebook">
+ <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
+ <path d="M14 8.7V7.3c0-.8.3-1.3 1.5-1.3H17V3h-2.3C12.1 3 11 4.5 11 7v1.7H9v3h2V21h3v-9.3h2.2l.3-3H14Z" fill="currentColor"/>
+ </svg>
+ </a>
+ </div>
+ </div>
+ </div>
+
+<div class="about-box" id="contact">
+ <div style="display:grid; gap:16px; text-align:center;">
+
+ <!-- Headshot -->
+ <div
+ style="
+ width:180px;
+ height:180px;
+ margin:0 auto;
+ border-radius:50%;
+ background-image:url('https://lh3.googleusercontent.com/p/AF1QipOsCr_6xoDSkLUG33nLrJ9QwA2n9Q4NUIPw0qkt=s680-w680-h510-rw');
+ background-size:cover;
+ background-position:center;
+ box-shadow:0 18px 50px rgba(0,0,0,.18);
+ ">
+ </div>
+
+ <!-- Name + Title -->
+ <div>
+ <div style="
+ font-family:Poppins,Inter,system-ui;
+ font-weight:900;
+ font-size:26px;
+ letter-spacing:-.02em;
+ ">
+ Mia Druck
+ </div>
+ <div class="muted" style="font-weight:700;">
+ Fort Lauderdale Real Estate
+ </div>
+ </div>
+
+ <!-- Contact Info -->
+ <div style="display:grid; gap:10px;">
+ <a href="tel:9545527330" class="pill" style="height:46px; font-size:15px;">
+ (954) 552-7330
+ </a>
+
+ <a
+ href="mailto:[email protected]"
+ class="btn-mini"
+ style="justify-content:center; height:42px;"
+ >
+ Send me an email
+ </a>
+ </div>
+
+ <!-- Trust line -->
+ <div class="micro">
+ ⭐⭐⭐⭐⭐ <br />
+ <a href="https://share.google/sgExBQ7qvd5iWNHKI" target="_blank" rel="noopener">
+ Read Google Reviews
+ </a>
+ </div>
+
+ </div>
+</div>
+
+ </div>
+ </div>
+ </section>
+
+ <footer>
+ <div class="wrap footer-inner">
+ <div>© <span id="y"></span> Mia Druck</div>
+ <div>275 Commercial Blvd. Suite 212, Lauderdale-by-the-Sea, FL 33308</div>
+ </div>
+ </footer>
+
+ <script>
+ // ---------------------------
+ // EDITABLE DATA (no JSON files needed)
+ // ---------------------------
+ const FEATURED = [
+ {
+ id: "boca-600-nw-12",
+ title: "Single Family Home • No HOA",
+ price: "$800,000",
+ meta: "4 bd • 3 ba • 1,857 sqft",
+ area: "600 NW 12th Avenue, Boca Raton",
+ image: "https://photos.zillowstatic.com/fp/7dd047b2aca2c1453c99e73f2f1c8c02-uncropped_scaled_within_1536_1152.webp",
+ link: "https://www.zillow.com/homedetails/600-NW-12th-Ave-Boca-Raton-FL-33486/46704709_zpid/",
+ tags: ["Nearby schools", "No HOA", "Single Family"]
+ },
+ {
+ id: "pno-1433-ne-27",
+ title: "Seasonal • Cozy single family",
+ price: "$3,000/month",
+ meta: "2 bd • 1 ba • 816 sqft",
+ area: "1433 NE 27th St, Pompano Beach, FL 33064",
+ image: "https://photos.zillowstatic.com/fp/5462a7a2d52ad214991c75a8d924b2a5-cc_ft_768.webp",
+ link: "https://www.zillow.com/homedetails/1433-NE-27th-St-Pompano-Beach-FL-33064/42906647_zpid/",
+ tags: ["Single Family", "Pompano", "Prime Area"]
+ },
+ {
+ id: "deerfield-868-crystal-lake",
+ title: "Modern Townhome • Low Taxes",
+ price: "COMING SOON",
+ meta: "2 bd • 2.1 ba • 1,024 sqft",
+ area: "868 Crystal Lake Dr Pompano Beach, FL 33064",
+ image: "https://i.postimg.cc/zGx3C7Px/green.jpg",
+ link: "mailto:[email protected]",
+ tags: ["Ready-to-Rent", "Low HOA"]
+ }
+ ];
+
+ const SOLD = [
+ {
+ title: "Single Family • Pool",
+ sold_price: "$611,700",
+ meta: "3 bd • 2 ba • 1,895 sqft",
+ area: "581 SE 11th St, Pompano Beach, FL 33060",
+ sold_date: "10/7/2025",
+ image: "https://ap.rdcpix.com/f1566ac53f3bae6dbff03b78b5432ac5l-m1956488123rd-w1280_h960.webp"
+ },
+ {
+ title: "Duplex • Investor Friendly",
+ sold_price: "$830,500",
+ meta: "2 bd • 2 ba (each side)",
+ area: "2018 NE 15th St, Fort Lauderdale, FL 33304",
+ sold_date: "2/24/2025",
+ image: "https://photos.zillowstatic.com/fp/1f3e9d572304d368d549714ca1b8942c-cc_ft_384.webp"
+ },
+ {
+ title: "Townhome • Fort Lauderdale",
+ sold_price: "$835,000",
+ meta: "6 bd • 4 ba • 3,728 sqft",
+ area: "6862 Houlton Circle, Lake Worth, FL 33467",
+ sold_date: "12/18/2023",
+ image: "https://photos.zillowstatic.com/fp/bd98950809113ed0de276afe6256847c-cc_ft_576.webp"
+ }
+ ];
+
+ // ---------------------------
+ // Rendering
+ // ---------------------------
+ function esc(s){ return String(s ?? "").replace(/[&<>"']/g, m => ({'&':'&','<':'<','>':'>','"':'"',"'":'''}[m])); }
+
+ function listingCard(x){
+ const tags = (x.tags || []).slice(0,3).map(t => `<span class="tag">${esc(t)}</span>`).join("");
+ const link = (x.link || "#").toString();
+ const newTab = link.startsWith("http") ? `target="_blank" rel="noopener"` : "";
+
+ return `
+ <article class="card">
+ <div class="card-img" style="background-image:url('${esc(x.image || "")}')"></div>
+ <div class="card-pad">
+ <div class="price">${esc(x.price || "")}</div>
+ <h3 class="title">${esc(x.title || "")}</h3>
+ <div class="meta">${esc(x.meta || "")}</div>
+ <div class="meta">${esc(x.area || "")}</div>
+ <div class="tags">${tags}</div>
+ <div class="card-actions">
+ <div class="btn-split">
+ <a href="${esc(link)}" ${newTab}>See More</a>
+ <a href="#contact" onclick="prefillListing('${esc(x.id || x.title)}'); switchToContact();">Contact</a>
+ </div>
+ </div>
+ </div>
+ </article>
+ `;
+ }
+
+ function soldCard(x){
+ return `
+ <article class="card">
+ <div class="card-img" style="background-image:url('${esc(x.image || "")}')"></div>
+ <div class="card-pad">
+ <div class="price">${esc(x.sold_price || "Sold")}</div>
+ <h3 class="title">${esc(x.title || "")}</h3>
+ <div class="meta">${esc(x.meta || "")}</div>
+ <div class="meta">${esc(x.area || "")}</div>
+ <div class="meta">${x.sold_date ? `Sold: ${esc(x.sold_date)}` : ""}</div>
+ </div>
+ </article>
+ `;
+ }
+
+ function render(){
+ document.getElementById("featuredGrid").innerHTML = FEATURED.map(listingCard).join("");
+ document.getElementById("soldGrid").innerHTML = SOLD.map(soldCard).join("");
+ document.getElementById("y").textContent = new Date().getFullYear();
+
+ // If URL has ?listing=..., auto-prefill
+ const p = new URLSearchParams(location.search);
+ const listing = p.get("listing");
+ if (listing) prefillListing(listing);
+ }
+
+ // ---------------------------
+ // Tabs: MLS vs Contact
+ // ---------------------------
+ const tabMLS = () => {
+ document.getElementById("tab-mls").classList.add("active");
+ document.getElementById("tab-contact").classList.remove("active");
+ document.getElementById("panel-mls").classList.remove("hide");
+ document.getElementById("panel-contact").classList.add("hide");
+ document.getElementById("tab-mls").setAttribute("aria-selected","true");
+ document.getElementById("tab-contact").setAttribute("aria-selected","false");
+ };
+
+ const tabContact = () => {
+ document.getElementById("tab-contact").classList.add("active");
+ document.getElementById("tab-mls").classList.remove("active");
+ document.getElementById("panel-contact").classList.remove("hide");
+ document.getElementById("panel-mls").classList.add("hide");
+ document.getElementById("tab-contact").setAttribute("aria-selected","true");
+ document.getElementById("tab-mls").setAttribute("aria-selected","false");
+ };
+
+ document.addEventListener("click", (e) => {
+ if (e.target && e.target.id === "tab-mls") tabMLS();
+ if (e.target && e.target.id === "tab-contact") tabContact();
+ });
+
+ function switchToContact(){ tabContact(); }
+
+ // ---------------------------
+ // Prefill listing context in both forms
+ // ---------------------------
+ function prefillListing(id){
+ const v = String(id || "");
+ const a = document.getElementById("listing_context");
+ const b = document.getElementById("listing_context_2");
+ if (a) a.value = v;
+ if (b) b.value = v;
+ }
+
+ // expose for inline onclick
+ window.switchToContact = switchToContact;
+ window.prefillListing = prefillListing;
+
+ render();
+ </script>
+</body>
+</html>
+