Hero Section with Cards

<div class="hero-section-wrapper bg-gray-100">
  <style>@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&display=swap'); .hero-section{min-height:100vh;background:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)),url('https://images.unsplash.com/photo-1469474968028-56623f02e42e?ixlib=rb-4.0.3&auto=format&fit=crop&w=2074&q=80');background-size:cover;background-position:center;background-repeat:no-repeat;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden} .floating-card{position:absolute;display:flex;align-items:center;font-family:'DM Sans',sans-serif;z-index:10} .floating-card .icon{width:48px;height:48px;background:#BD2E01;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 15px rgba(0,0,0,0.2);margin-right:12px} .floating-card .icon img{width:60%;height:60%;object-fit:contain} .floating-card .text-bar{background:rgba(255,255,255,0.12);backdrop-filter:blur(20px);padding:12px 20px;border-radius:10px 0 0 10px;color:white;font-size:14px;font-weight:500;text-shadow:0 1px 2px rgba(0,0,0,0.2);white-space:nowrap;min-width:100px} .card-one{top:40%;left:15%} .card-two{top:60%;left:5%} .card-three{top:73%;left:15%} .card-four{top:35%;right:17%} .card-five{top:45%;right:5%} .card-six{top:65%;right:15%} @media(max-width:767px){.card-one{top:27%;left:3%} .card-five{top:28%;right:5%} .card-two{top:13%;left:5%} .card-four{top:20%;left:35%} .card-three,.card-six{opacity:0} .floating-card .icon{width:40px;height:40px} .floating-card .text-bar{padding:8px 16px;font-size:12px}}</style>
  <section class="hero-section relative">
    <div class="floating-card card-one">
      <div class="text-bar">Road Trips</div>
      <div class="icon">
        <img src="https://images.unsplash.com/photo-1502780402662-acc01917e949?w=50&h=50&fit=crop&auto=format" alt="Road Trip" />
      </div>
    </div>
    <div class="floating-card card-two">
      <div class="text-bar">New Horizons</div>
      <div class="icon">
        <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=50&h=50&fit=crop&auto=format" alt="Horizon" />
      </div>
    </div>
    <div class="floating-card card-three">
      <div class="text-bar">Camping</div>
      <div class="icon">
        <img src="https://images.unsplash.com/photo-1504280390367-361c6d9f38f4?w=50&h=50&fit=crop&auto=format" alt="Camping" />
      </div>
    </div>
    <div class="floating-card card-four">
      <div class="text-bar">Under the Stars</div>
      <div class="icon">
        <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=50&h=50&fit=crop&auto=format" alt="Stars" />
      </div>
    </div>
    <div class="floating-card card-five">
      <div class="text-bar">Sunrise Spots</div>
      <div class="icon">
        <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=50&h=50&fit=crop&auto=format" alt="Sunrise" />
      </div>
    </div>
    <div class="floating-card card-six">
      <div class="text-bar">Hello Adventure</div>
      <div class="icon">
        <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=50&h=50&fit=crop&auto=format" alt="Adventure" />
      </div>
    </div>
    <div class="text-center text-white px-8 z-20 relative max-w-4xl mx-auto">
      <h1 class="text-4xl md:text-6xl font-semibold uppercase mb-6 leading-tight tracking-tight">
        <br />
      </h1>
      <p class="text-lg md:text-xl mb-8 max-w-2xl mx-auto font-light leading-relaxed opacity-95">Find freedom on the open road, where every sunrise brings a new horizon. Let the stars guide your nights and the silence fill your soul.</p>
    </div>
  </section>
</div>