Page propose 1

<style>
  .hero-section {
    background-color: #F7F7F7;
    padding: 80px 20px;
    text-align: center;
  }
  .hero-section h1 {
    font-size: 2.5rem;
    color: #000;
    margin-bottom: 10px;
  }
  .hero-section p {
    font-size: 1.2rem;
    color: #555;
  }

  .collection-section {
    background-color: #FFFFFF;
    padding: 60px 20px;
    text-align: center;
  }
  .collection-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
  }
  .collection-item {
    background-color: #F5E9D7;
    padding: 20px;
    border-radius: 10px;
    width: 220px;
    text-align: center;
  }
  .collection-item img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 10px;
  }

  .featured-products {
    background-color: #F7F7F7;
    padding: 60px 20px;
    text-align: center;
  }

  .newsletter-section {
    background-color: #FFFFFF;
    padding: 60px 20px;
    text-align: center;
  }
  .newsletter-section input[type="email"] {
    padding: 10px;
    margin: 10px 0;
    width: 300px;
    max-width: 100%;
    border: 1px solid #CCC;
    border-radius: 5px;
  }
  .newsletter-section button {
    padding: 10px 20px;
    background-color: #000;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  .newsletter-section button:hover {
    background-color: #333;
  }
</style>

<div class="hero-section">
  <h1>Bienvenue dans l'univers doux de SSSMode Kids</h1>
  <p>Des vêtements et accessoires élégants pour vos petits trésors.</p>
</div>

<div class="collection-section">
  <h2>Nos Collections</h2>
  <div class="collection-grid">
    <div class="collection-item">
      <img src="https://via.placeholder.com/300x200.png?text=V%C3%AAtements" alt="Vêtements enfants">
      <h3>Vêtements</h3>
    </div>
    <div class="collection-item">
      <img src="https://via.placeholder.com/300x200.png?text=Chaussures" alt="Chaussures enfants">
      <h3>Chaussures</h3>
    </div>
    <div class="collection-item">
      <img src="https://via.placeholder.com/300x200.png?text=Accessoires" alt="Accessoires enfants">
      <h3>Accessoires</h3>
    </div>
  </div>
</div>

<div class="featured-products">
  <h2>Nouveautés</h2>
  {% comment %} Ici tu pourras insérer un carrousel de produits en vedette {% endcomment %}
  <p>Découvrez nos dernières pépites pour enfants.</p>
</div>

<div class="newsletter-section">
  <h2>Restez informé(e)</h2>
  <p>Abonnez-vous pour découvrir les nouveautés et offres spéciales enfants.</p>
  <form method="post" action="/contact#contact_form">
    <input type="email" name="contact[email]" placeholder="Votre e-mail" required>
    <button type="submit">S'inscrire</button>
  </form>
</div>