C.E.O

<style>
  /* General Styling */
  .container {
    max-width: 1440px;
    margin: auto;
    padding: 20px;
    font-family: sans-serif;
  }
  h2 { text-align: center; font-size: 28px; margin-bottom: 20px; }
  .section { padding: 50px 0; }

  /* Hero Section */
  .hero { display: flex; gap: 30px; align-items: center; }
  .hero img { width: 50%; border-radius: 10px; }
  .product-info { width: 50%; }

  /* Ingredients Section */
  .ingredients { display: flex; justify-content: space-between; }
  .ingredient-box { width: 48%; text-align: center; }

  /* Customer Reviews */
  .reviews { background: #f8f8f8; padding: 40px; }
  .review-card { background: white; padding: 20px; margin: 10px; border-radius: 10px; }

  /* Before & After Section */
  .before-after { display: flex; gap: 20px; }
  .before-after img { width: 50%; border-radius: 10px; }

  /* How to Use */
  .how-to-use { text-align: center; }

  /* FAQ Section */
  .faq { background: #fff8e1; padding: 30px; border-radius: 10px; }
  .faq-item { margin-bottom: 10px; cursor: pointer; }
</style>

<div class="container">

  <!-- Hero Section -->
  <div class="section hero">
    <img src="{{ product.featured_image | img_url: 'large' }}" alt="{{ product.title }}">
    <div class="product-info">
      <h1>{{ product.title }}</h1>
      <p>{{ product.description }}</p>
      <button>Add to Cart</button>
    </div>
  </div>

  <!-- Key Ingredients Section -->
  <div class="section">
    <h2>Key Ingredients</h2>
    <div class="ingredients">
      {% for block in section.blocks %}
        <div class="ingredient-box">
          <img src="{{ block.settings.image | img_url: 'medium' }}" alt="{{ block.settings.title }}">
          <p>{{ block.settings.title }}</p>
        </div>
      {% endfor %}
    </div>
  </div>

  <!-- Customer Reviews -->
  <div class="section reviews">
    <h2>Let Customers Speak for Us</h2>
    {% for review in product.metafields.reviews %}
      <div class="review-card">
        <p><strong>{{ review.name }}</strong></p>
        <p>⭐ {{ review.rating }}/5</p>
        <p>{{ review.text }}</p>
      </div>
    {% endfor %}
  </div>

  <!-- Before & After Section -->
  <div class="section">
    <h2>See it in Action</h2>
    <div class="before-after">
      <img src="{{ section.settings.before_image | img_url: 'large' }}" alt="Before">
      <img src="{{ section.settings.after_image | img_url: 'large' }}" alt="After">
    </div>
  </div>

  <!-- How to Use -->
  <div class="section how-to-use">
    <h2>How to Use</h2>
    <p>{{ section.settings.how_to_use }}</p>
  </div>

  <!-- FAQ Section -->
  <div class="section faq">
    <h2>Frequently Asked Questions</h2>
    {% for faq in section.blocks %}
      <div class="faq-item">
        <strong>{{ faq.settings.question }}</strong>
        <p>{{ faq.settings.answer }}</p>
      </div>
    {% endfor %}
  </div>

</div>