PRODUK YANG SATU DOANG vid 4

<!-- Produk Section Start -->

<section class="products" id="products" x-data="products">
<h2><span>Our</span> Products</h2>
<p>
Apart from providing several menus, we also sell several
birthday cake
products and various cup cakes!
</p>

<div class="row">
<template x-for="(item, index) in items" x-key="index">
<div class="product-card">
<div class="product-icons">
<a href="#"><i data-feather="shopping-
cart"></i></a>
<a href="#" class="item-detail-button"
><i data-feather="eye"></i
></a>
</div>
<div class="product-image">
<img :src="`img/products/$(item.img)`"
:alt="item.name" />
</div>
<div class="product-content">
<h3 x-text="item.name"></h3>
<div class="product-stars">
<i data-feather="star" class="star-full"></i>
<i data-feather="star" class="star-full"></i>
<i data-feather="star" class="star-full"></i>
<i data-feather="star" class="star-full"></i>
<i data-feather="star" class="star-full"></i>
</div>
<div class="product-price"></div>
</div>
</div>
</template>
 </div>
</section>
<!-- Produk Section End -->

Sama kayak di atas Cuma dari chatgpt

<!-- Produk Section Start -->

<section class="products" id="products" x-data="products" x-
cloak>
<h2><span>Our</span> Products</h2>
<p>
Apart from providing several menus, we also sell several
birthday cake
products and various cup cakes!
</p>

<div class="row" x-data="products">

<template x-for="item in items" :key="item.id">
<div class="product-card">
<div class="product-icons">
<a href="#"><i data-feather="shopping-
cart"></i></a>
<a href="#" class="item-detail-button"
><i data-feather="eye"></i
></a>
</div>
<div class="product-image">
<img :src="'img/products/' + item.img"
:alt="item.name" />
</div>
<div class="product-content">
<h3 x-text="item.name"></h3>
<div class="product-stars">
<i data-feather="star" class="star-full"></i>
<i data-feather="star" class="star-full"></i>
<i data-feather="star" class="star-full"></i>
<i data-feather="star" class="star-full"></i>
 <i data-feather="star" class="star-full"></i>
</div>
<div
class="product-price"
x-text="'IDR ' + item.price + 'K'"
></div>
</div>
</div>
</template>
</div>
</section>
<!-- Produk Section End -->