From b7c8479c7daeadfc87e229bf80ee00c3cb6c5206 Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Sun, 15 Dec 2024 22:11:19 +0330
Subject: [PATCH] Add ads video section

---
 .../components/global/product/StickyCard.vue  | 35 +++++++++++++++++++
 frontend/components/product/Video.vue         | 20 +++++++++++
 frontend/pages/index.vue                      |  2 +-
 3 files changed, 56 insertions(+), 1 deletion(-)
 create mode 100644 frontend/components/global/product/StickyCard.vue
 create mode 100644 frontend/components/product/Video.vue

diff --git a/frontend/components/global/product/StickyCard.vue b/frontend/components/global/product/StickyCard.vue
new file mode 100644
index 0000000..1a183ae
--- /dev/null
+++ b/frontend/components/global/product/StickyCard.vue
@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+
+// types
+
+type Props = {
+    picture: string;
+    title: string;
+    color: string;
+    price: number;
+}
+
+// props
+
+const props = defineProps<Props>();
+const { picture, price, title, color } = toRefs(props);
+
+</script>
+
+<template>
+    <div class="max-w-[500px] w-full h-[116px] flex items-center justify-between py-2 pe-6 ps-2 bg-white rounded-150">
+        <div class="flex items-center gap-4">
+            <div class="relative size-[100px] rounded-100 overflow-hidden border-[0.5px] border-slate-200">
+                <img :src="picture" :alt="title" class="object-cover absolute" />
+            </div>
+            <div class="flex flex-col gap-1">
+                <span class="typo-sub-h-md text-black">{{ title }}</span>
+                <span class="typo-p-sm text-slate-500">{{ color }}</span>
+                <span class="typo-p-md text-black">{{ price }}</span>
+            </div>
+        </div>
+        <Button class="rounded-full">
+            افزودن به سبد
+        </Button>
+    </div>
+</template>
\ No newline at end of file
diff --git a/frontend/components/product/Video.vue b/frontend/components/product/Video.vue
new file mode 100644
index 0000000..e9ec60e
--- /dev/null
+++ b/frontend/components/product/Video.vue
@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+    <div class="h-[95svh] w-full relative bg-black my-20">
+        <img
+            src="/img/product-3.jpg"
+            class="object-cover absolute size-full"
+        />
+        <div class="size-full absolute inset-0 bg-black/60"/>
+        <StickyCard
+            color="سبز"
+            :price="240000"
+            picture="/img/product-1.jpg"
+            title="نام محصول"
+            class="absolute right-6 bottom-6"
+        />
+    </div>
+</template>
\ No newline at end of file
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index 57e9091..9aac14e 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -3,7 +3,7 @@
 </script>
 
 <template>
-    <div class="w-full h-screen p-8 flex gap-8 justify-start items-start">
+    <div class="w-full h-screen p-8 flex gap-8 justify-start items-start container">
         <Product
             brand="Samsung"
             title="Galaxy S20 Ultra"