Lynkedup-technologies/public/assets/about_section_bodypower.html

<style>
  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');
  .bp-about { font-family: 'Poppins', sans-serif; padding: 60px 0; background: #f8f9fb; }
  .bp-container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
  .bp-row { display: flex; align-items: center; gap: 50px; }
  .bp-left { flex: 0 0 45%; }
  .bp-right { flex: 1; position: relative; }
  .bp-label { color: #c68b2f; font-size: 13px; font-weight: 500; letter-spacing: 1px; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
  .bp-label::before { content: ''; width: 20px; height: 1.5px; background: #c68b2f; display: inline-block; }
  .bp-h2 { font-size: 28px; font-weight: 700; color: #1a1a2e; line-height: 1.3; margin-bottom: 14px; }
  .bp-desc { font-size: 14px; color: #666; line-height: 1.8; margin-bottom: 24px; }
  .bp-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 28px; }
  .bp-card { border: 1px solid #e8e8e8; border-radius: 10px; padding: 18px; background: #fff; }
  .bp-card-icon { width: 34px; height: 34px; border-radius: 50%; background: #fef3e2; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
  .bp-card-icon svg { width: 16px; height: 16px; fill: #c68b2f; }
  .bp-card h6 { font-size: 13px; font-weight: 600; color: #1a1a2e; margin-bottom: 6px; }
  .bp-card p { font-size: 12px; color: #888; line-height: 1.6; margin: 0 0 8px; }
  .bp-card-check { font-size: 11px; color: #c68b2f; display: flex; align-items: center; gap: 5px; }
  .bp-card-check::before { content: '✓'; font-weight: 700; }
  .bp-btn-row { display: flex; align-items: center; gap: 16px; }
  .bp-btn { background: #c68b2f; color: #fff; font-size: 13px; font-weight: 600; padding: 12px 24px; border-radius: 30px; text-decoration: none; display: flex; align-items: center; gap: 8px; }
  .bp-btn-arrow { width: 28px; height: 28px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
  .bp-btn-arrow svg { width: 12px; height: 12px; fill: #c68b2f; }
  .bp-expert { display: flex; align-items: center; gap: 10px; }
  .bp-expert-img { width: 36px; height: 36px; border-radius: 50%; background: #ddd; overflow: hidden; }
  .bp-expert-img img { width: 100%; height: 100%; object-fit: cover; }
  .bp-expert-text p { margin: 0; }
  .bp-expert-text .name { font-size: 13px; font-weight: 600; color: #1a1a2e; }
  .bp-expert-text .role { font-size: 11px; color: #999; }

  /* Right image collage */
  .bp-collage { position: relative; width: 100%; height: 380px; }
  .bp-main-img { position: absolute; left: 0; top: 0; width: 58%; height: 100%; border-radius: 14px; background: #2a2a2a; overflow: hidden; }
  .bp-main-img img { width: 100%; height: 100%; object-fit: cover; }
  .bp-side { position: absolute; right: 0; top: 0; width: 38%; display: flex; flex-direction: column; gap: 12px; height: 100%; }
  .bp-google-card { background: #fff; border-radius: 10px; padding: 12px 14px; border: 1px solid #e5e5e5; }
  .bp-google-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
  .bp-avatars { display: flex; }
  .bp-avatars span { width: 22px; height: 22px; border-radius: 50%; background: #c68b2f; color: #fff; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-left: -5px; border: 1.5px solid #fff; }
  .bp-avatars span:first-child { margin-left: 0; background: #4a90d9; }
  .bp-avatars span:nth-child(2) { background: #e8734a; }
  .bp-avatars span:nth-child(3) { background: #5cb85c; }
  .bp-avatars span:nth-child(4) { background: #c68b2f; }
  .bp-rating-row { display: flex; align-items: center; gap: 8px; }
  .bp-g-logo { font-size: 16px; font-weight: 800; color: #4285f4; letter-spacing: -1px; }
  .bp-stars { color: #f5a623; font-size: 12px; }
  .bp-rating-val { font-size: 13px; font-weight: 600; color: #1a1a2e; }
  .bp-review-count { font-size: 10px; color: #999; margin-top: 2px; }
  .bp-side-img { flex: 1; border-radius: 10px; background: #bbb; overflow: hidden; }
  .bp-side-img img { width: 100%; height: 100%; object-fit: cover; }
  .bp-location-card { position: absolute; bottom: 0; left: 0; width: 56%; background: #1a1a2e; border-radius: 0 0 14px 14px; padding: 16px 18px; display: flex; align-items: center; gap: 12px; }
  .bp-loc-icon { width: 36px; height: 36px; background: #c68b2f; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .bp-loc-icon svg { width: 16px; height: 16px; fill: #fff; }
  .bp-loc-text h5 { margin: 0; font-size: 14px; font-weight: 600; color: #fff; }
  .bp-loc-text p { margin: 0; font-size: 11px; color: #aaa; }
</style>

<div class="bp-about">
  <div class="bp-container">
    <div class="bp-row">

      <!-- LEFT -->
      <div class="bp-left">
        <div class="bp-label">About Our Conference</div>
        <h2 class="bp-h2">One of the most advanced fitness conferences ever created</h2>
        <p class="bp-desc">BodyPower presents a next-generation fitness conference bringing together elite trainers, wellness innovators, and world-class speakers. Creating cutting-edge events since 2008 with unmatched energy, learning, and networking opportunities.</p>

        <div class="bp-cards">
          <div class="bp-card">
            <div class="bp-card-icon">
              <svg viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z"/></svg>
            </div>
            <h6>Since 2008</h6>
            <p>Our mission is to inspire and empower individuals to live healthier, stronger lives through expert fitness</p>
            <div class="bp-card-check">Industry Leading Events</div>
          </div>
          <div class="bp-card">
            <div class="bp-card-icon">
              <svg viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
            </div>
            <h6>World-Class Speakers</h6>
            <p>Learn directly from elite athletes, global coaches, fitness entrepreneurs, and performance experts.</p>
            <div class="bp-card-check">Industry Leading Events</div>
          </div>
        </div>

        <div class="bp-btn-row">
          <a href="#" class="bp-btn">
            More About us
            <div class="bp-btn-arrow">
              <svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
            </div>
          </a>
          <div class="bp-expert">
            <div class="bp-expert-img">
              <div style="width:100%;height:100%;background:linear-gradient(135deg,#c68b2f,#e8a84a);display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700;">FE</div>
            </div>
            <div class="bp-expert-text">
              <p class="name">Fitness Experts</p>
              <p class="role">Global Industry Leaders</p>
            </div>
          </div>
        </div>
      </div>

      <!-- RIGHT COLLAGE -->
      <div class="bp-right">
        <div class="bp-collage">

          <!-- Main speaker image -->
          <div class="bp-main-img">
            <div style="width:100%;height:100%;background:linear-gradient(160deg,#2a2a2a 0%,#3a3a3a 50%,#1a1a1a 100%);display:flex;align-items:center;justify-content:center;">
              <div style="text-align:center;color:#fff;">
                <div style="width:80px;height:80px;background:#444;border-radius:50%;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;font-size:28px;">👤</div>
                <div style="font-size:11px;color:#888;font-family:'Poppins',sans-serif;">Speaker Image</div>
              </div>
            </div>
          </div>

          <!-- Side column -->
          <div class="bp-side">
            <!-- Google review -->
            <div class="bp-google-card">
              <div class="bp-google-top">
                <div class="bp-avatars">
                  <span>A</span><span>B</span><span>C</span><span>D</span>
                </div>
              </div>
              <div class="bp-rating-row">
                <div class="bp-g-logo">G</div>
                <div class="bp-rating-val">4.9/5</div>
                <div class="bp-stars">★★★★★</div>
              </div>
              <div class="bp-review-count">Based on 250 review</div>
            </div>

            <!-- Running image -->
            <div class="bp-side-img">
              <div style="width:100%;height:100%;background:linear-gradient(135deg,#5a8f4a,#3a6f8a);display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-family:'Poppins',sans-serif;text-align:center;">
                <div>🏃‍♂️🏃‍♀️<br><span style="font-size:10px;opacity:0.7;">Fitness Image</span></div>
              </div>
            </div>
          </div>

          <!-- Location card -->
          <div class="bp-location-card">
            <div class="bp-loc-icon">
              <svg viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5S10.62 6.5 12 6.5 14.5 7.62 14.5 9 13.38 11.5 12 11.5z"/></svg>
            </div>
            <div class="bp-loc-text">
              <h5>ExCeL London</h5>
              <p>UK's Premier Conference Venue</p>
            </div>
          </div>

        </div>
      </div>

    </div>
  </div>
</div>