From 9004905d5de782d43aaed540028501991990bd69 Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Sun, 15 Dec 2024 22:14:50 +0330
Subject: [PATCH] new changes

---
 frontend/components/product/ProductHero.vue | 55 +++++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 frontend/components/product/ProductHero.vue

diff --git a/frontend/components/product/ProductHero.vue b/frontend/components/product/ProductHero.vue
new file mode 100644
index 0000000..9aa13ab
--- /dev/null
+++ b/frontend/components/product/ProductHero.vue
@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+
+// state
+const quantity = ref(1);
+const maxQuantity = ref(10);
+
+</script>
+
+<template>
+    <div class="flex gap-12">
+        <div class="w-[800px] flex flex-col items-end gap-3 mt-12">
+            <span class="typo-label-sm">
+                Nova
+            </span>
+            <h1 class="typo-h-2">
+                Nova
+            </h1>
+            <div class="flex w-full items-center justify-between">
+                <Rating />
+                <span class="typo-p-2xl">
+                    $689.00
+                </span>
+            </div>
+            <p class="typo-p-md text-slate-500 text-left">
+                Compact, stylish, and engineered for the future, Eco Tunes are more than just headphones; they're a
+                statement. Hear the future, save the planet.
+            </p>
+            <div class="w-full flex flex-col gap-6 mt-4">
+                <RemainQuantity :quantity="maxQuantity" />
+                <div class="w-full flex gap-3 flex-col">
+                    <div class="w-full flex gap-3">
+                        <Button
+                            class="w-full"
+                            end-icon="ci:plus"
+                        >
+                            Add to cart
+                        </Button>
+                        <QuantityCounter v-model="quantity" :max="maxQuantity" />
+                    </div>
+                    <Button
+                        class="w-full"
+                        variant="outlined"
+                    >
+                        Buy it now
+                    </Button>
+                </div>
+                <InfoCard />
+                <Share />
+            </div>
+        </div>
+        <div class="bg-red-300 w-full h-[500px] rounded-200">
+
+        </div>
+    </div>
+</template>
\ No newline at end of file