Add ads video section

2024-12-15 22:11:19 +03:30
parent 713373f964
commit b7c8479c7d
3 changed files with 56 additions and 1 deletions
@@ -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>
@@ -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>
@@ -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"