templates/Accueil/boutique_5sur5.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="fr">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta content="width=device-width, initial-scale=1.0" name="viewport">
  6.     <title>Boutique 5sur5séjour - Souvenirs de séjours</title>
  7.     <meta content="Découvrez notre boutique de souvenirs pour immortaliser les séjours de vos enfants. Albums photos, livres souvenirs, tirages et plus encore." name="description">
  8.     
  9.     <!-- Favicons -->
  10.     <link href="{{ asset('Accueil/imagesAccueil/favicon.png') }}" rel="icon">
  11.     <link href="{{ asset('Accueil/imagesAccueil/apple-touch-icon.png') }}" rel="apple-touch-icon">
  12.     
  13.     <!-- Google Fonts -->
  14.     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  15.     
  16.     <!-- Bootstrap 5 -->
  17.     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  18.     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" rel="stylesheet">
  19.     
  20.     <style>
  21.         :root {
  22.             --5sur5-teal: #41A2AA;
  23.             --5sur5-orange: #F56040;
  24.             --5sur5-orange-light: #F09E7A;
  25.             --teal-light: rgba(65, 162, 170, 0.08);
  26.             --teal-hover: rgba(65, 162, 170, 0.12);
  27.             --orange-light: rgba(245, 96, 64, 0.08);
  28.             --text-dark: #1A1A1A;
  29.             --text-secondary: #6B7280;
  30.             --text-muted: #9CA3AF;
  31.             --border-light: #E7F2F3;
  32.             --bg-page: #FAFBFC;
  33.             --bg-white: #FFFFFF;
  34.             --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  35.             --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  36.             --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  37.         }
  39.         body {
  40.             font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  41.             background: var(--bg-page);
  42.             margin: 0;
  43.             padding: 0;
  44.         }
  46.         /* ========== BOUTIQUE PREMIUM - HEADER HERO ========== */
  47.         .boutique-hero {
  48.             background: linear-gradient(135deg, rgba(65, 162, 170, 0.04) 0%, rgba(255, 255, 255, 1) 100%);
  49.             border-radius: 20px;
  50.             padding: 48px 32px;
  51.             margin: 32px auto 40px;
  52.             max-width: 1200px;
  53.             text-align: center;
  54.             border: 1px solid var(--border-light);
  55.             box-shadow: var(--shadow-sm);
  56.             position: relative;
  57.         }
  59.         .boutique-hero-label {
  60.             display: inline-block;
  61.             font-size: 11px;
  62.             font-weight: 700;
  63.             text-transform: uppercase;
  64.             letter-spacing: 1.5px;
  65.             color: var(--5sur5-teal);
  66.             background: var(--teal-light);
  67.             padding: 6px 16px;
  68.             border-radius: 20px;
  69.             margin-bottom: 20px;
  70.         }
  72.         .boutique-hero-title {
  73.             font-size: 36px;
  74.             font-weight: 700;
  75.             color: var(--text-dark);
  76.             margin-bottom: 16px;
  77.             line-height: 1.2;
  78.             letter-spacing: -0.5px;
  79.         }
  81.         .boutique-hero-subtitle {
  82.             font-size: 17px;
  83.             color: var(--text-secondary);
  84.             line-height: 1.6;
  85.             max-width: 700px;
  86.             margin: 0 auto 24px;
  87.         }
  89.         .boutique-hero-badge {
  90.             position: absolute;
  91.             top: 24px;
  92.             right: 24px;
  93.             display: flex;
  94.             align-items: center;
  95.             gap: 8px;
  96.             padding: 8px 16px;
  97.             background: var(--bg-white);
  98.             border: 1px solid var(--border-light);
  99.             border-radius: 12px;
  100.             font-size: 12px;
  101.             color: var(--text-secondary);
  102.         }
  104.         .boutique-hero-badge i {
  105.             color: var(--5sur5-teal);
  106.             font-size: 16px;
  107.         }
  109.         .boutique-hero-cta {
  110.             display: inline-flex;
  111.             align-items: center;
  112.             gap: 8px;
  113.             padding: 14px 28px;
  114.             background: var(--5sur5-teal);
  115.             color: white;
  116.             border-radius: 12px;
  117.             font-size: 16px;
  118.             font-weight: 600;
  119.             text-decoration: none;
  120.             transition: all 0.3s ease;
  121.         }
  123.         .boutique-hero-cta:hover {
  124.             background: #359BA3;
  125.             transform: translateY(-2px);
  126.             box-shadow: 0 4px 12px rgba(65, 162, 170, 0.3);
  127.             color: white;
  128.         }
  130.         /* ========== BARRE DE FILTRES PREMIUM ========== */
  131.         .boutique-filters {
  132.             max-width: 1200px;
  133.             margin: 0 auto 40px;
  134.             padding: 0 24px;
  135.         }
  137.         .boutique-filters-container {
  138.             display: flex;
  139.             justify-content: center;
  140.             gap: 12px;
  141.             flex-wrap: wrap;
  142.             padding: 16px 24px;
  143.             background: var(--bg-white);
  144.             border: 1px solid var(--border-light);
  145.             border-radius: 16px;
  146.             box-shadow: var(--shadow-sm);
  147.         }
  149.         .filter-btn {
  150.             padding: 10px 20px;
  151.             font-size: 14px;
  152.             font-weight: 600;
  153.             color: var(--text-secondary);
  154.             background: transparent;
  155.             border: 1.5px solid var(--border-light);
  156.             border-radius: 24px;
  157.             cursor: pointer;
  158.             transition: all 0.3s ease;
  159.             white-space: nowrap;
  160.         }
  162.         .filter-btn:hover {
  163.             border-color: var(--5sur5-teal);
  164.             color: var(--5sur5-teal);
  165.             background: var(--teal-light);
  166.         }
  168.         .filter-btn.active {
  169.             background: var(--5sur5-teal);
  170.             color: white;
  171.             border-color: var(--5sur5-teal);
  172.             box-shadow: 0 2px 8px rgba(65, 162, 170, 0.2);
  173.         }
  175.         /* ========== GRILLE PRODUITS PREMIUM ========== */
  176.         .boutique-products {
  177.             max-width: 1200px;
  178.             margin: 0 auto;
  179.             padding: 0 24px 80px;
  180.         }
  182.         .products-grid {
  183.             display: grid;
  184.             grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  185.             gap: 32px;
  186.             margin-top: 24px;
  187.         }
  189.         @media (max-width: 768px) {
  190.             .products-grid {
  191.                 grid-template-columns: 1fr;
  192.                 gap: 24px;
  193.             }
  194.         }
  196.         /* ========== CARTE PRODUIT PREMIUM ========== */
  197.         .product-card-premium {
  198.             background: var(--bg-white);
  199.             border: 0;
  200.             border-radius: 16px;
  201.             overflow: hidden;
  202.             box-shadow: var(--shadow-sm);
  203.             transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  204.             display: flex;
  205.             flex-direction: column;
  206.             height: 100%;
  207.         }
  209.         .product-card-premium:hover {
  210.             transform: translateY(-4px);
  211.             box-shadow: var(--shadow-lg);
  212.         }
  214.         .product-card-premium.d-none {
  215.             display: none !important;
  216.         }
  218.         .product-image-wrapper {
  219.             position: relative;
  220.             width: 100%;
  221.             padding-top: 75%; /* Ratio 4:3 */
  222.             overflow: hidden;
  223.             background: linear-gradient(135deg, var(--teal-light) 0%, var(--orange-light) 100%);
  224.         }
  226.         .product-image-wrapper img {
  227.             position: absolute;
  228.             top: 0;
  229.             left: 0;
  230.             width: 100%;
  231.             height: 100%;
  232.             object-fit: cover;
  233.         }
  235.         .product-badge-premium {
  236.             position: absolute;
  237.             top: 12px;
  238.             left: 12px;
  239.             background: var(--5sur5-orange);
  240.             color: white;
  241.             padding: 6px 12px;
  242.             border-radius: 8px;
  243.             font-size: 11px;
  244.             font-weight: 700;
  245.             text-transform: uppercase;
  246.             letter-spacing: 0.5px;
  247.             display: flex;
  248.             align-items: center;
  249.             gap: 4px;
  250.             z-index: 2;
  251.         }
  253.         .product-badge-premium.badge-teal {
  254.             background: var(--5sur5-teal);
  255.         }
  257.         .product-badge-premium i {
  258.             font-size: 12px;
  259.         }
  261.         .product-content {
  262.             padding: 24px;
  263.             flex: 1;
  264.             display: flex;
  265.             flex-direction: column;
  266.         }
  268.         .product-title {
  269.             font-size: 20px;
  270.             font-weight: 700;
  271.             color: var(--text-dark);
  272.             margin-bottom: 8px;
  273.             line-height: 1.3;
  274.         }
  276.         .product-tagline {
  277.             font-size: 14px;
  278.             color: var(--text-secondary);
  279.             margin-bottom: 16px;
  280.             line-height: 1.5;
  281.             font-style: italic;
  282.         }
  284.         .product-benefits {
  285.             list-style: none;
  286.             padding: 0;
  287.             margin: 0 0 20px 0;
  288.             display: flex;
  289.             flex-direction: column;
  290.             gap: 8px;
  291.         }
  293.         .product-benefits li {
  294.             display: flex;
  295.             align-items: center;
  296.             gap: 8px;
  297.             font-size: 13px;
  298.             color: var(--text-secondary);
  299.         }
  301.         .product-benefits li i {
  302.             color: var(--5sur5-teal);
  303.             font-size: 14px;
  304.             flex-shrink: 0;
  305.         }
  307.         .product-price-section {
  308.             margin-top: auto;
  309.             padding-top: 20px;
  310.             border-top: 1px solid var(--border-light);
  311.         }
  313.         .product-price {
  314.             font-size: 28px;
  315.             font-weight: 700;
  316.             color: var(--5sur5-teal);
  317.             margin-bottom: 4px;
  318.         }
  320.         .product-price-note {
  321.             font-size: 12px;
  322.             color: var(--text-muted);
  323.             margin-bottom: 16px;
  324.         }
  326.         .product-info-note {
  327.             display: inline-flex;
  328.             align-items: center;
  329.             gap: 6px;
  330.             padding: 8px 14px;
  331.             background: var(--teal-light);
  332.             color: var(--5sur5-teal);
  333.             border-radius: 8px;
  334.             font-size: 13px;
  335.             font-weight: 600;
  336.             text-decoration: none;
  337.         }
  339.         .product-info-note i {
  340.             font-size: 14px;
  341.         }
  343.         /* ========== CTA SECTION ========== */
  344.         .cta-section {
  345.             max-width: 1200px;
  346.             margin: 60px auto;
  347.             padding: 40px 24px;
  348.             background: linear-gradient(135deg, var(--5sur5-teal) 0%, #359BA3 100%);
  349.             border-radius: 20px;
  350.             text-align: center;
  351.             box-shadow: var(--shadow-lg);
  352.         }
  354.         .cta-section h3 {
  355.             font-size: 28px;
  356.             font-weight: 700;
  357.             color: white;
  358.             margin-bottom: 16px;
  359.         }
  361.         .cta-section p {
  362.             font-size: 17px;
  363.             color: rgba(255, 255, 255, 0.9);
  364.             margin-bottom: 24px;
  365.             max-width: 600px;
  366.             margin-left: auto;
  367.             margin-right: auto;
  368.         }
  370.         .cta-buttons {
  371.             display: flex;
  372.             justify-content: center;
  373.             gap: 16px;
  374.             flex-wrap: wrap;
  375.         }
  377.         .cta-btn-primary {
  378.             display: inline-flex;
  379.             align-items: center;
  380.             gap: 8px;
  381.             padding: 16px 32px;
  382.             background: white;
  383.             color: var(--5sur5-teal);
  384.             border-radius: 12px;
  385.             font-size: 16px;
  386.             font-weight: 600;
  387.             text-decoration: none;
  388.             transition: all 0.3s ease;
  389.         }
  391.         .cta-btn-primary:hover {
  392.             background: var(--bg-page);
  393.             transform: translateY(-2px);
  394.             box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  395.         }
  397.         .cta-btn-secondary {
  398.             display: inline-flex;
  399.             align-items: center;
  400.             gap: 8px;
  401.             padding: 16px 32px;
  402.             background: rgba(255, 255, 255, 0.1);
  403.             color: white;
  404.             border: 2px solid white;
  405.             border-radius: 12px;
  406.             font-size: 16px;
  407.             font-weight: 600;
  408.             text-decoration: none;
  409.             transition: all 0.3s ease;
  410.         }
  412.         .cta-btn-secondary:hover {
  413.             background: rgba(255, 255, 255, 0.2);
  414.             color: white;
  415.         }
  417.         /* Responsive Hero */
  418.         @media (max-width: 768px) {
  419.             .boutique-hero {
  420.                 padding: 32px 24px;
  421.                 margin: 24px 12px;
  422.                 border-radius: 12px;
  423.             }
  425.             .boutique-hero-label {
  426.                 font-size: 9px;
  427.                 padding: 4px 10px;
  428.                 margin-bottom: 12px;
  429.             }
  431.             .boutique-hero-title {
  432.                 font-size: 24px;
  433.                 margin-bottom: 12px;
  434.             }
  436.             .boutique-hero-subtitle {
  437.                 font-size: 14px;
  438.                 margin-bottom: 20px;
  439.             }
  441.             .boutique-hero-badge {
  442.                 display: none;
  443.             }
  445.             .boutique-filters {
  446.                 padding: 0 12px;
  447.                 margin: 0 auto 24px;
  448.             }
  450.             .boutique-filters-container {
  451.                 padding: 12px;
  452.                 gap: 8px;
  453.                 border-radius: 12px;
  454.             }
  456.             .filter-btn {
  457.                 padding: 8px 14px;
  458.                 font-size: 12px;
  459.                 border-radius: 16px;
  460.             }
  462.             .boutique-products {
  463.                 padding: 0 12px 60px;
  464.             }
  466.             .products-grid {
  467.                 margin-top: 12px;
  468.                 gap: 20px;
  469.             }
  471.             .cta-section {
  472.                 margin: 40px 12px;
  473.                 padding: 32px 20px;
  474.             }
  476.             .cta-section h3 {
  477.                 font-size: 22px;
  478.             }
  480.             .cta-section p {
  481.                 font-size: 15px;
  482.             }
  484.             .cta-buttons {
  485.                 flex-direction: column;
  486.                 align-items: stretch;
  487.             }
  489.             .cta-btn-primary,
  490.             .cta-btn-secondary {
  491.                 width: 100%;
  492.                 justify-content: center;
  493.             }
  494.         }
  495.     </style>
  496. </head>
  498. <body style="margin: 0; padding: 0;">
  499.     {% include 'Accueil/header.html.twig' %}
  501.     <main id="main" style="padding-top: 0; margin-top: 0;">
  502.         <div style="background: var(--bg-page); min-height: 100vh; padding-top: 24px;">
  503.             
  504.             {# ========== HEADER HERO PREMIUM ========== #}
  505.             <div class="boutique-hero">
  506.                 <div class="boutique-hero-badge">
  507.                     <i class="bi bi-shield-lock-fill"></i>
  508.                     <span>Paiement sécurisé</span>
  509.                 </div>
  510.                 <span class="boutique-hero-label">Boutique souvenirs 5sur5</span>
  511.                 <h1 class="boutique-hero-title">Les souvenirs des séjours, en quelques clics</h1>
  512.                 <p class="boutique-hero-subtitle">
  513.                     Des albums et packs photos pour prolonger le séjour à la maison. Créez des souvenirs inoubliables grâce à nos produits pensés pour les familles.
  514.                 </p>
  515.                 <a href="/Parent/login" class="boutique-hero-cta">
  516.                     <i class="bi bi-box-arrow-in-right"></i>
  517.                     Accéder à ma boutique
  518.                 </a>
  519.             </div>
  521.             {# ========== BARRE DE FILTRES PREMIUM ========== #}
  522.             <div class="boutique-filters">
  523.                 <div class="boutique-filters-container">
  524.                     <button class="filter-btn active" data-filter="all" onclick="filterProducts('all')">
  525.                         Tous
  526.                     </button>
  527.                     <button class="filter-btn" data-filter="album" onclick="filterProducts('album')">
  528.                         Albums imprimés
  529.                     </button>
  530.                     <button class="filter-btn" data-filter="pack" onclick="filterProducts('pack')">
  531.                         Packs numériques
  532.                     </button>
  533.                     <button class="filter-btn" data-filter="tirage" onclick="filterProducts('tirage')">
  534.                         Tirages photos
  535.                     </button>
  536.                 </div>
  537.             </div>
  539.             {# ========== GRILLE PRODUITS PREMIUM ========== #}
  540.             <div class="boutique-products">
  541.                 <div class="products-grid" id="productsGrid">
  542.                     {% for item in produit %}
  543.                         {% if 'Connexion' not in item.idTypeProduit.labeletype and item.id != 6 %}
  544.                             {# Déterminer la catégorie du produit pour le filtre #}
  545.                             {% set productCategory = 'all' %}
  546.                             {% if item.id == 4 or item.id == 5 %}
  547.                                 {% set productCategory = 'album' %}
  548.                             {% elseif item.id == 12 or item.id == 13 or item.id == 14 %}
  549.                                 {% set productCategory = 'pack' %}
  550.                             {% elseif item.id == 1 or item.id == 2 or item.id == 3 or item.id == 8 or item.id == 9 or item.id == 10 %}
  551.                                 {% set productCategory = 'tirage' %}
  552.                             {% endif %}
  554.                             {# Déterminer le tagline selon le type de produit #}
  555.                             {% set productTagline = '' %}
  556.                             {% if item.id == 4 or item.id == 5 %}
  557.                                 {% set productTagline = 'Idéal pour offrir aux grands-parents' %}
  558.                             {% elseif item.id == 12 or item.id == 13 or item.id == 14 %}
  559.                                 {% set productTagline = 'Souvenir numérique à partager' %}
  560.                             {% elseif item.id == 1 or item.id == 2 or item.id == 3 or item.id == 8 or item.id == 9 or item.id == 10 %}
  561.                                 {% set productTagline = 'Souvenir tangible du séjour' %}
  562.                             {% else %}
  563.                                 {% set productTagline = 'Qualité photo professionnelle' %}
  564.                             {% endif %}
  566.                             <div class="product-card-premium" data-category="{{ productCategory }}">
  567.                                 
  568.                                 {# Badge produit #}
  569.                                 {% if item.id == 4 %}
  570.                                     <span class="product-badge-premium badge-teal">
  571.                                         <i class="bi bi-star-fill"></i> Meilleur choix
  572.                                     </span>
  573.                                 {% elseif item.id == 5 %}
  574.                                     <span class="product-badge-premium">
  575.                                         <i class="bi bi-heart-fill"></i> Premium
  576.                                     </span>
  577.                                 {% endif %}
  579.                                 {# Image produit #}
  580.                                 <div class="product-image-wrapper">
  581.                                     {% if item.typeProduitPhotos is defined and item.typeProduitPhotos|length > 0 %}
  582.                                         <img src="{{ item.typeProduitPhotos[0].idAttachement.path }}" 
  583.                                              alt="{{ item.idTypeProduit.labeletype }} {% if item.sousTitre %} {{ item.sousTitre }} {% endif %}">
  584.                                     {% else %}
  585.                                         <img src="{{ asset('Accueil/imagesAccueil/default-product.png') }}" 
  586.                                              alt="{{ item.idTypeProduit.labeletype }}">
  587.                                     {% endif %}
  588.                                 </div>
  590.                                 {# Contenu produit #}
  591.                                 <div class="product-content">
  592.                                     <h3 class="product-title">
  593.                                         {{ item.idTypeProduit.labeletype }} 
  594.                                         {% if item.sousTitre %} {{ item.sousTitre }} {% endif %}
  595.                                     </h3>
  596.                                     <p class="product-tagline">{{ productTagline }}</p>
  597.                                     
  598.                                     {# Bénéfices #}
  599.                                     <ul class="product-benefits">
  600.                                         {% if item.id == 4 or item.id == 5 %}
  601.                                             <li><i class="bi bi-check-circle-fill"></i> Format premium</li>
  602.                                             <li><i class="bi bi-check-circle-fill"></i> Personnalisation incluse</li>
  603.                                             <li><i class="bi bi-check-circle-fill"></i> Livraison offerte</li>
  604.                                         {% elseif item.id == 12 or item.id == 13 or item.id == 14 %}
  605.                                             <li><i class="bi bi-check-circle-fill"></i> Téléchargement immédiat</li>
  606.                                             <li><i class="bi bi-check-circle-fill"></i> Haute résolution</li>
  607.                                             <li><i class="bi bi-check-circle-fill"></i> Usage illimité</li>
  608.                                         {% else %}
  609.                                             <li><i class="bi bi-check-circle-fill"></i> Papier satiné premium</li>
  610.                                             <li><i class="bi bi-check-circle-fill"></i> Qualité professionnelle</li>
  611.                                             <li><i class="bi bi-check-circle-fill"></i> Format standard</li>
  612.                                         {% endif %}
  613.                                     </ul>
  615.                                     {# Prix et CTA #}
  616.                                     <div class="product-price-section">
  617.                                         <div class="product-price">{{ item.montantTTC|number_format(2) }} €</div>
  618.                                         <div class="product-price-note">par {{ item.idTypeProduit.labeletype|lower }}</div>
  619.                                         
  620.                                         <a href="/Parent/login" class="product-info-note">
  621.                                             <i class="bi bi-info-circle"></i>
  622.                                             Se connecter pour commander
  623.                                         </a>
  624.                                     </div>
  625.                                 </div>
  626.                             </div>
  627.                         {% endif %}
  628.                     {% endfor %}
  629.                 </div>
  630.             </div>
  632.             {# ========== CTA SECTION ========== #}
  633.             <div class="cta-section">
  634.                 <h3>Prêt à immortaliser vos souvenirs ?</h3>
  635.                 <p>Connectez-vous pour commander vos albums, tirages et packs numériques personnalisés. Simple, rapide et sécurisé.</p>
  636.                 <div class="cta-buttons">
  637.                     <a href="/Parent/login" class="cta-btn-primary">
  638.                         <i class="bi bi-box-arrow-in-right"></i>
  639.                         Se connecter
  640.                     </a>
  641.                     <a href="/#contact" class="cta-btn-secondary">
  642.                         <i class="bi bi-envelope"></i>
  643.                         Nous contacter
  644.                     </a>
  645.                 </div>
  646.             </div>
  648.         </div>
  649.     </main>
  651.     {% include 'Accueil/_footer_premium.html.twig' %}
  653.     <!-- Vendor JS Files -->
  654.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
  655.     
  656.     <script>
  657.         // Fonction de filtrage des produits
  658.         function filterProducts(category) {
  659.             // Mettre à jour les boutons actifs
  660.             document.querySelectorAll('.filter-btn').forEach(btn => {
  661.                 btn.classList.remove('active');
  662.             });
  663.             event.target.classList.add('active');
  665.             // Récupérer toutes les cartes produits
  666.             const productCards = document.querySelectorAll('.product-card-premium');
  667.             let visibleCount = 0;
  669.             // Filtrer les cartes
  670.             productCards.forEach(card => {
  671.                 const cardCategory = card.getAttribute('data-category');
  672.                 
  673.                 if (category === 'all' || cardCategory === category) {
  674.                     card.classList.remove('d-none');
  675.                     visibleCount++;
  676.                 } else {
  677.                     card.classList.add('d-none');
  678.                 }
  679.             });
  680.         }
  682.         // Initialisation au chargement de la page
  683.         document.addEventListener('DOMContentLoaded', function() {
  684.             // S'assurer que tous les produits sont visibles par défaut
  685.             const productCards = document.querySelectorAll('.product-card-premium');
  686.             productCards.forEach(card => {
  687.                 card.classList.remove('d-none');
  688.             });
  689.         });
  690.     </script>
  691. </body>
  692. </html>