<script setup lang="ts"></script>

<template>
    <div class="w-full container flex flex-col">
        <div class="w-full flex justify-between items-center py-[5rem]">
            <div class="flex flex-col items-start gap-[1.5rem] text-black">
                <div class="flex-center gap-[.75rem]">
                    <span>خانه</span>
                    <span>/</span>
                    <span>محصولات</span>
                    <span>/</span>
                    <span>همه</span>
                </div>
                <h1 class="typo-hero-2">همه محصولات</h1>
            </div>

            <FilterButton />
        </div>
        <ul class="w-full grid grid-cols-3 gap-[1.5rem]">
            <li v-for="i in 9" :key="i">
                <ProductCard
                    brand="Samsung"
                    title="Galaxy S20 Ultra"
                    picture="/assets/img/product-1.jpg"
                    :colors="['#0000ff', '#00ff00', 'red']"
                    :price="599"
                    :rate="2.4"
                    tag="New"
                />
            </li>
        </ul>
    </div>
</template>

<style scoped></style>
