add card and card list

src/App.vue

@@ -1,10 +1,17 @@
 <script setup>
   import Header from '@/components/Header.vue'
+  import CardList from '@/components/CardList.vue'
 </script>
 <template>
   <div
-    class="mt-14 w-4/5 mx-auto bg-white h-screen rounded-xl shadow-xl"
+    class="mt-14 w-4/5 mx-auto bg-white rounded-xl shadow-xl"
   >
     <Header/>
+
+    <div class="p-10">
+      <h2 class="text-3xl font-bold mb-8">Все кроссовки</h2>
+
+      <CardList/>
+    </div>
   </div>
 </template>

src/components/Card.vue

@@ -0,0 +1,39 @@
+<script setup>
+  defineProps({
+    imageUrl: String,
+    title: String,
+    price: Number,
+    isAdded: Boolean,
+    isFavorite: Boolean,
+    onClickAdd: Function,
+    onClickFavorite: Function,
+  });
+
+  const formatter = new Intl.NumberFormat('ru-RU', { style: 'decimal' });
+</script>
+
+<template>
+  <div class="relative border bg-white border-slate-100 rounded-3xl p-8 cursor-pointer transition hover:-translate-y-2 hover:shadow-xl">
+    <img
+      :src="isFavorite ? '/like-2.svg' : '/like-1.svg'"
+      alt="Like"
+      class="absolute top-8 left-8"
+      @click="onClickFavorite"
+    >
+
+    <img :src="imageUrl" alt="Sneaker">
+    <p class="mt-2">{{title}}</p>
+
+    <div class="flex justify-between mt-5">
+      <div class="flex flex-col">
+        <span class="text-slate-400 uppercase">Цена:</span>
+        <b>{{formatter.format(price)}} руб.</b>
+      </div>
+
+      <img @click="onClickAdd" :src="isAdded ? '/checked.svg' : '/plus.svg'" alt="Add">
+    </div>
+  </div>
+</template>
+
+
+

src/components/CardList.vue

@@ -0,0 +1,23 @@
+<script setup>
+  import Card from './Card.vue'
+
+  const onClickAdd = () => {
+    alert('Добавлено в корзину')
+  }
+
+  const onClickFavorite = () => {
+    alert('Добавлено в Избранное')
+  }
+</script>
+
+<template>
+  <div class="grid grid-cols-4 gap-5">
+    <Card
+      image-url="/sneakers/sneakers-1.jpg"
+      title="Мужские кроссовки Nike Blazer Mid Suede"
+      :price="12999"
+      :on-click-add="onClickAdd"
+      :on-click-favorite="onClickFavorite"
+    />
+  </div>
+</template>

src/components/Header.vue

@@ -1,6 +1,6 @@
 <template>
   <header
-    class="flex justify-between border-b border-slate-300 px-11 py-10"
+    class="flex justify-between border-b border-slate-100 px-11 py-10"
   >
     <div class="flex items-center gap-4">
       <img src="/logo.png" alt="Logo" class="w-10">