Real Estate Listing

<section style="padding: 50px 20px; background-color: #f4f4f4;">
  <div style="max-width: 1200px; margin: 0 auto;">
    <h1 style="font-size: 48px; font-weight: bold; text-align: center;">Top 9 Cheapest Offers</h1>
    <p style="font-size: 20px; text-align: center; margin-bottom: 40px;">Discover the best affordable offers.</p>


    <!-- Hotels list -->
    <div style="display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px;">
      [mpg project-id="1" order-by="mpg_price_usd" direction="asc" limit="9"]
      <div style="flex: 1 1 calc(33.333% - 20px); background-color: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
        <a href="{{mpg_url}}" style="text-decoration: none; color: inherit;">
          <img src="{{mpg_property_image}}" alt="{{mpg_property_type}}" style="width: 100%; height: 200px; object-fit: cover;">
          <div style="padding: 20px;">
            <h2 style="font-size: 24px; font-weight: bold; margin-bottom: 10px;">{{mpg_property_type}}</h2>
            <p style="font-size: 18px; color: #555;">{{mpg_address}}, {{mpg_city}}, {{mpg_state}} {{mpg_zip_code}}</p>
            <p style="font-size: 20px; font-weight: bold; color: #27ae60;">Price: ${{mpg_formatted_price}}</p>
            <p style="font-size: 16px; color: #888;">Bedrooms: {{mpg_bedrooms}} | Bathrooms: {{mpg_bathrooms}} | Size: {{mpg_square_feet}} sq.ft.</p>
          </div>
        </a>
      </div>
      [/mpg]
    </div>
  </div>
</section><br>
	

<section style="padding: 40px 20px; background-color: #f7f7f7;">
  <div style="max-width: 1200px; margin: 0 auto; background-color: white; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); border-radius: 8px; overflow: hidden;">
    
    <!-- Property Image -->
    <div style="width: 100%; height: 350px; background-color: #eaeaea; position: relative;">
      <img src="{{mpg_property_image}}" alt="{{mpg_property_type}}" style="width: 100%; height: 100%; object-fit: cover;">
    </div>


    <!-- Property Price and Details -->
    <div style="padding: 20px 30px; display: flex; justify-content: space-between; align-items: flex-start; background-color: #f9f9f9; border-bottom: 1px solid #ddd;">
      <!-- Left Side: Price and Property Info -->
      <div>
        <h1 style="font-size: 36px; font-weight: bold; color: #2c3e50;">Price: ${{mpg_formatted_price}}</h1>
        <p style="font-size: 18px; color: #555;">{{mpg_address}}, {{mpg_city}}, {{mpg_state}} {{mpg_zip_code}}</p>
    <!-- Google Map Integration -->
    <div style="padding: 20px 0;">
      <iframe 
        src="https://www.google.com/maps/embed/v1/place?key=AIzaSyAFhkRu83ULL3n4fdaWqQnuWg2mIULx6HQ&q={{mpg_address}},{{mpg_city}},{{mpg_state}},{{mpg_zip_code}}" 
        width="100%" height="350" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
    </div>
      </div>
      
      <!-- Right Side: Agent Info -->
      <div style="text-align: center; background-color: #f0f4f7; padding: 5%; border-radius: 8px;">
        <img src="{{mpg_agent_image}}" alt="Agent {{mpg_agent_name}}" style="width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 2px solid #3498db;">
        <p style="font-size: 16px; margin-top: 10px;">Listed by</p>
        <p style="font-size: 18px; font-weight: bold;">{{mpg_agent_name}}</p>
        <a href="tel:{{mpg_agent_contact}}" style="text-decoration: none; font-size: 16px; color: #3498db;">Contact {{mpg_agent_name}}</a>
      </div>
    </div>


    <!-- Property Features -->
    <div style="padding: 20px 30px;">
      <div style="display: flex; gap: 20px;">
        <div style="flex: 1; text-align: center; background-color: #f9f9f9; padding: 15px; border-radius: 8px;">
          <span style="font-size: 24px; color: #34495e;font-weight:bold;">{{mpg_bedrooms}}</span>
          <span style="font-size: 16px; color: #7f8c8d;">Beds</span>
        </div>
        <div style="flex: 1; text-align: center; background-color: #f9f9f9; padding: 15px; border-radius: 8px;">
          <span style="font-size: 24px; color: #34495e;font-weight:bold;">{{mpg_bathrooms}}</span>
          <span style="font-size: 16px; color: #7f8c8d;">Baths</span>
        </div>
        <div style="flex: 1; text-align: center; background-color: #f9f9f9; padding: 15px; border-radius: 8px;">
          <span style="font-size: 24px; color: #34495e;font-weight:bold;">{{mpg_square_feet}} sq.ft</span>
          <span style="font-size: 16px; color: #7f8c8d;">Size</span>
        </div>
      </div>
    </div>


    <!-- Property Description -->
    <div style="padding: 20px 30px; background-color: #fafafa; border-top: 1px solid #ddd;">
      <h3 style="font-size: 22px; font-weight: bold; color: #2c3e50;">What's Special</h3>
  [mpg_spintax  project_id="1" block_id="643"]<p>{This <strong>{beautiful|stunning|gorgeous|exquisite|breathtaking}</strong> {{mpg_property_type}} in <strong>{{mpg_city}}</strong> is {perfect for|ideal for|a great fit for|designed with|tailored for} {families who seek spacious living|singles looking for modern comfort|couples dreaming of a cozy retreat} {with its|thanks to its|boasting} <strong>{{mpg_bedrooms}}</strong> {spacious|cozy|elegant|airy|welcoming} bedrooms, where you can {relax and unwind|enjoy quiet moments|retreat from the day’s hustle}, and <strong>{{mpg_bathrooms}}</strong> {modern|luxurious|well-equipped|tastefully designed|sleek} bathrooms that provide a {private spa-like experience|touch of serenity|refined atmosphere}.|With <strong>{{mpg_bedrooms}}</strong> generously-sized bedrooms and <strong>{{mpg_bathrooms}}</strong> elegant bathrooms, this {{mpg_property_type}} {offers|provides|features} {plenty of room|ample space|more than enough space} for {comfortable living|family gatherings|personal relaxation and enjoyment|hosting guests with ease}.|This {{mpg_property_type}} in <strong>{{mpg_city}}</strong> {stands out for|is known for|offers} its {beautiful design|thoughtful layout|elegant architecture} that includes <strong>{{mpg_bedrooms}}</strong> bedrooms and <strong>{{mpg_bathrooms}}</strong> {bathrooms|bath spaces|luxurious en-suite retreats}, {making it perfect for|making it suitable for|a great fit for} {growing families in need of extra space|home buyers who love open spaces and bright interiors|homeowners who frequently entertain guests or host events}.}</p><p>{The {property's|home's|residence’s|estate's} <strong>{{mpg_square_feet}} sq.ft.</strong> of living space {gives you plenty of room to spread out and enjoy every corner of the home|allows for spacious living in every area, giving you the opportunity to truly make it your own|offers an {open|bright|airy|inviting} layout, perfect for both casual living and formal entertaining}.|With <strong>{{mpg_square_feet}} sq.ft.</strong> of {well-thought-out|carefully designed|beautifully appointed} space, you will {have ample room|enjoy plenty of room|find endless possibilities} for {both relaxation and entertainment|family activities and cozy moments|hosting weekend gatherings and quiet evening retreats}.|The {impressive|generous|ample|expansive} <strong>{{mpg_square_feet}} sq.ft.</strong> allows for {creative living arrangements|a flexible layout that accommodates any lifestyle|custom interior designs that fit your unique taste and needs}, {making this home versatile for any lifestyle|allowing you to design your dream home with endless possibilities|giving you the flexibility to create spaces that fit your family’s evolving needs}.}</p><p>{Located in the heart of <strong>{{mpg_city}}</strong>, this home {is conveniently close to|is situated near|offers easy access to|is nestled within minutes of} {shops, restaurants, and schools|local parks, cafes, and top-rated schools|the best amenities the city has to offer, from gourmet dining to charming boutiques}.|Situated in <strong>{{mpg_city}}</strong>, you’ll love the {friendly and welcoming atmosphere of the neighborhood|vibrant culture that surrounds you|quiet streets that provide a peaceful escape from the city’s hustle and bustle}.|Living in <strong>{{mpg_city}}</strong> means {being close to all the local hotspots|having access to everything the city has to offer while being able to retreat to your private haven|enjoying the balance between urban excitement and suburban tranquility}, {while enjoying the privacy and comfort of your own home|without sacrificing the peace and quiet that comes with living in this tranquil neighborhood}.}</p><p>{This {home|property|residence|house} also {features|comes with|boasts|is enhanced by} a <strong>{private|spacious|well-kept|landscaped}</strong> yard, {perfect for|ideal for|designed for} {outdoor gatherings under the stars|gardening enthusiasts who love to cultivate their own space|relaxing in the sunshine with a book and a cool drink}.|Outside, the {large|manicured|beautifully landscaped} yard offers a {peaceful retreat|relaxing escape|quiet oasis away from the city’s noise} with {ample space for outdoor activities like barbecues and family picnics|plenty of room for gardening, outdoor fun, or even the potential for a pool or patio area}.|Step outside and {enjoy the beautiful backyard with its lush greenery and well-maintained grounds|take in the fresh air from the comfort of your private yard, complete with a patio perfect for entertaining guests}, {ideal for BBQs, summer parties, or peaceful evenings spent under the stars|perfect for creating memorable moments with friends and family, or simply relaxing in your own private paradise}.}</p><p>{Whether you're looking for {a quiet space to relax at the end of the day|a spacious home to entertain family and friends year-round}, this <strong>{{mpg_property_type}}</strong> has {everything you need and more|all the features to meet your needs and exceed your expectations}.|Don’t miss out on this {wonderful|rare|fantastic|once-in-a-lifetime} opportunity to own a <strong>{{mpg_property_type}}</strong> in the {sought-after|desirable|popular|prestigious} <strong>{{mpg_city}}</strong> area.|This is {the perfect home|a rare find|an incredible opportunity} for anyone looking to enjoy the best of <strong>{{mpg_city}}</strong> living, where comfort, style, and convenience meet in perfect harmony.}</p>[/mpg_spintax]
    </div>
  </div>
</section>


    <!-- Listings Container by State -->
<section style="padding: 40px 20px; background-color: #f9f9f9;">
  <div style="max-width: 1200px; margin: 0 auto; text-align: center;">
    <h2 style="font-size: 32px; font-weight: bold; color: #333;">Other Listings in {{mpg_state}} state</h2>
    <p style="font-size: 18px; color: #555; margin-bottom: 30px;">Explore more properties available in {{mpg_state}} state.</p>


    <div style="display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;">
      [mpg project-id="1" limit="6" where="mpg_state={{mpg_state}};"]


        <div style="width: 100%; max-width: 300px; background-color: white; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease;">
                <a href="{{mpg_url}}" style="text-decoration: none; color: inherit;"><img src="{{mpg_property_image}}" alt="Image of {{mpg_property_type}}" style="width: 100%; height: 200px; object-fit: cover;">
          <div style="padding: 20px;">
            <h3 style="font-size: 20px; color: #2c3e50; font-weight: bold;">{{mpg_address}}</h3>
            <p style="font-size: 16px; color: #888;">{{mpg_bedrooms}} Beds, {{mpg_bathrooms}} Baths</p>
            <p style="font-size: 18px; font-weight: bold; color: #3498db;">${{mpg_formatted_price}}</p>
          </div></a>
        </div>
      [/mpg]
    </div>
  </div>
</section>


    <!-- Listings Container by Bedrooms -->
<section style="padding: 40px 20px; background-color: #f9f9f9;">
  <div style="max-width: 1200px; margin: 0 auto; text-align: center;">
    <h2 style="font-size: 32px; font-weight: bold; color: #333;">Other Listings with {{mpg_bedrooms}} bedrooms</h2>
    <p style="font-size: 18px; color: #555; margin-bottom: 30px;">Explore more properties available with {{mpg_bedrooms}} bedrooms.</p>


    <div style="display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;">
      [mpg project-id="1" limit="6" where="mpg_bedrooms={{mpg_bedrooms}};"]


        <div style="width: 100%; max-width: 300px; background-color: white; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease;">
                <a href="{{mpg_url}}" style="text-decoration: none; color: inherit;"><img src="{{mpg_property_image}}" alt="Image of {{mpg_property_type}}" style="width: 100%; height: 200px; object-fit: cover;">
          <div style="padding: 20px;">
            <h3 style="font-size: 20px; color: #2c3e50; font-weight: bold;">{{mpg_address}}</h3>
            <p style="font-size: 16px; color: #888;">{{mpg_bedrooms}} Beds, {{mpg_bathrooms}} Baths</p>
            <p style="font-size: 18px; font-weight: bold; color: #3498db;">${{mpg_formatted_price}}</p>
          </div></a>
        </div>
      [/mpg]
    </div>
  </div>
</section><br>