Commit everything

frontend/assets/css/tailwind.css

@@ -1,12 +1,10 @@
 @import "tailwindcss";
 
-@import "./typo.utils.css";
 @import "./other.utils.css";
+@import "./typo.utils.css";
 @import "./button.comp.css";
 @import "./input.comp.css";
 
-@config "../../tailwind.config.js";
-
 @theme {
     /* COLORS */
     --color-slate-50: hsl(210, 40%, 98%);
@@ -110,6 +108,7 @@
 
     /* FONT FAMILY */
     --font-lato: "Lato", sans-serif;
+    --font-inter: "Inter", sans-serif;
     --font-dmsans: "DM Sans", sans-serif;
     --font-iran-yekan-x: "IRANYekanXVF, sans-serif";
 

frontend/assets/css/typo.utils.css

@@ -1,96 +1,96 @@
 /* TYPO HERO */
 @utility typo-hero-1 {
-    @apply text-[96px] leading-[96px] font-bold;
+    @apply text-[96px] leading-[96px] font-bold font-dmsans;
 }
 
 @utility typo-hero-2 {
-    @apply text-[72px] leading-[72px] font-bold;
+    @apply text-[72px] leading-[72px] font-bold font-dmsans;
 }
 
 /* TYPE HEADING */
 @utility typo-h-1 {
-    @apply text-[64px] leading-[72px] font-bold;
+    @apply text-[64px] leading-[72px] font-bold font-dmsans;
 }
 
 @utility typo-h-2 {
-    @apply text-[56px] leading-[64px] font-bold;
+    @apply text-[56px] leading-[64px] font-bold font-dmsans;
 }
 
 @utility typo-h-3 {
-    @apply text-[48px] leading-[56px] font-bold;
+    @apply text-[48px] leading-[56px] font-bold font-dmsans;
 }
 
 @utility typo-h-4 {
-    @apply text-[40px] leading-[52px] font-bold;
+    @apply text-[40px] leading-[52px] font-bold font-inter;
 }
 
 @utility typo-h-5 {
-    @apply text-[32px] leading-[40px] font-bold;
+    @apply text-[32px] leading-[40px] font-bold font-inter;
 }
 
 @utility typo-h-6 {
-    @apply text-[24px] leading-[32px] font-bold;
+    @apply text-[24px] leading-[32px] font-bold font-inter;
 }
 
 /* TYPE SUBHEADING */
 @utility typo-sub-h-xl {
-    @apply text-[20px] leading-[24px] font-semibold;
+    @apply text-[20px] leading-[24px] font-semibold font-inter;
 }
 
 @utility typo-sub-h-lg {
-    @apply text-[18px] leading-[24px] font-semibold;
+    @apply text-[18px] leading-[24px] font-semibold font-inter;
 }
 
 @utility typo-sub-h-md {
-    @apply text-[16px] leading-[20px] font-semibold;
+    @apply text-[16px] leading-[20px] font-semibold font-inter;
 }
 
 @utility typo-sub-h-sm {
-    @apply text-[14px] leading-[20px] font-semibold;
+    @apply text-[14px] leading-[20px] font-semibold font-inter;
 }
 
 @utility typo-sub-h-xs {
-    @apply text-[12px] leading-[16px] font-semibold;
+    @apply text-[12px] leading-[16px] font-semibold font-inter;
 }
 
 /* TYPE PARAGRAPH */
 @utility typo-p-2xl {
-    @apply text-[24px] leading-[40px] font-normal;
+    @apply text-[24px] leading-[40px] font-light font-inter;
 }
 
 @utility typo-p-xl {
-    @apply text-[20px] leading-[32px] font-normal;
+    @apply text-[20px] leading-[32px] font-light font-inter;
 }
 
 @utility typo-p-lg {
-    @apply text-[18px] leading-[32px] font-normal;
+    @apply text-[18px] leading-[32px] font-light font-inter;
 }
 
 @utility typo-p-md {
-    @apply text-[16px] leading-[28px] font-normal;
+    @apply text-[16px] leading-[28px] font-light font-inter;
 }
 
 @utility typo-p-sm {
-    @apply text-[14px] leading-[24px] font-normal;
+    @apply text-[14px] leading-[24px] font-light font-inter;
 }
 
 @utility typo-p-xs {
-    @apply text-[12px] leading-[16px] font-normal;
+    @apply text-[12px] leading-[16px] font-light font-inter;
 }
 
 /* TYPO LABEL */
 @utility typo-label-lg {
-    @apply text-[18px] leading-[24px] font-medium;
+    @apply text-[18px] leading-[24px] font-medium font-inter;
 }
 
 @utility typo-label-md {
-    @apply text-[16px] leading-[24px] font-medium;
+    @apply text-[16px] leading-[24px] font-medium font-inter;
 }
 
 @utility typo-label-sm {
-    @apply text-[14px] leading-[20px] font-medium;
+    @apply text-[14px] leading-[20px] font-medium font-inter;
 }
 
 @utility typo-label-xs {
-    @apply text-[12px] leading-[16px] font-medium;
+    @apply text-[12px] leading-[16px] font-medium font-inter;
 }

frontend/components/Button.vue

@@ -41,4 +41,5 @@ const classes = computed(() => {
         <slot />
         <Icon v-if="endIcon" :name="endIcon" class="me-0" />
     </button>
-</template>
+</template>
+

frontend/components/Input.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 
 // types
-import Tooltip from "~/components/ui/Tooltip.vue";
+import Tooltip from "~/components/Tooltip.vue";
 
 type Props = {
     variant?: "solid" | "outlined",
@@ -39,7 +39,7 @@ const classes = computed(() => {
 
 <template>
     <Tooltip :title="message">
-        <div :class="classes" @click="inputRef?.focus()">
+        <div v-bind="$attrs" :class="classes" @click="inputRef?.focus()">
             <Icon v-if="startIcon" :name="startIcon" class="ms-0" size="24px" />
             <input ref="inputRef" class="outline-none" :placeholder="placeholder" />
             <Icon v-if="endIcon" :name="endIcon" class="me-0" size="24px" />

frontend/components/Product.vue

@@ -0,0 +1,63 @@
+<script lang="ts" setup>
+
+// import
+
+import Tag from "~/components/ui/Tag.vue";
+import Rate from "~/components/ui/Rate.vue";
+import ColorCircle from "~/components/ui/ColorCircle.vue";
+
+// types
+
+type Props = {
+    brand: string;
+    title: string;
+    colors: string[];
+    price: number;
+    picture: string;
+    tag?: string;
+    rate?: number;
+}
+
+// props
+
+defineProps<Props>();
+
+</script>
+
+<template>
+    <div class="relative h-[500px] w-[400px] rounded-2xl bg-black/10 overflow-hidden p-6">
+        <img
+            src="~/assets/img/product-2.jpg"
+            class="size-full object-cover absolute inset-0"
+            alt="product-background"
+        />
+        <div class="flex justify-between items-center absolute px-6 pt-6 top-0 w-full inset-x-0">
+            <Rate v-if="rate">
+                {{ rate }}
+            </Rate>
+            <Tag v-if="tag">
+                {{ tag }}
+            </Tag>
+        </div>
+        <div class="absolute inset-x-0 bottom-0 pb-6 px-6 flex justify-between items-center">
+            <span class="typo-p-md">
+                ${{ price }}
+            </span>
+            <div class="flex flex-col gap-2 items-end">
+                <span class="typo-p-md ">
+                    {{ brand }}
+                </span>
+                <span class="typo-sub-h-md">
+                    {{ title }}
+                </span>
+                <div class="flex items-center gap-2 mt-1">
+                    <ColorCircle
+                        v-for="color in colors"
+                        :key="color"
+                        :style="{backgroundColor: color}"
+                    />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>

frontend/components/Tooltip.vue

@@ -6,8 +6,7 @@ type Props = {
 }
 
 // prop
-const props = defineProps<Props>();
+defineProps<Props>();
-const { title } = toRefs(props);
 
 </script>
 

frontend/components/ui/ColorCircle.vue

@@ -0,0 +1,3 @@
+<template>
+    <div class="size-[30px] rounded-full shadow-black/30 shadow-inner"></div>
+</template>

frontend/components/ui/Rate.vue

@@ -0,0 +1,6 @@
+<template>
+    <div class="bg-white flex justify-center items-center gap-2 rounded-full border-[0.5px] border-slate-200 px-4 py-2 typo-p-sm">
+        <slot />
+        <Icon name="ci:star-solid" class="**:fill-warning-500 size-4.5" />
+    </div>
+</template>

frontend/components/ui/Tag.vue

@@ -0,0 +1,5 @@
+<template>
+    <div class="text-white flex items-center justify-center rounded-full px-4 py-2 bg-danger-600 typo-sub-h-sm">
+        <slot />
+    </div>
+</template>

frontend/nuxt.config.ts

@@ -1,6 +1,7 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
     compatibilityDate: "2024-11-01",
+    ssr: false,
     devtools: { enabled: false },
     css: ["~/assets/css/tailwind.css"],
 
@@ -12,27 +13,28 @@ export default defineNuxtConfig({
     },
 
     icon: {
-        mode : "svg",
+        mode: "svg",
         customCollections: [
             {
-                prefix: 'ci',
+                prefix: "ci",
-                dir: './assets/custom-icons'
+                dir: "./assets/custom-icons"
-            },
+            }
-        ],
+        ]
     },
 
-    modules: [[
+    modules: [
-        'reka-ui/nuxt',
         [
             "@nuxtjs/google-fonts",
             {
                 families: {
-                    'DM Sans': true,
+                    "DM Sans": "100..900",
-                    Lato: true,
+                    Inter: "100..900",
                     download: true,
                     inject: false
                 }
             }
-        ]
+        ],
-    ], "@nuxt/icon"]
+        "@nuxt/icon",
+        "reka-ui/nuxt"
+    ]
 });

frontend/pages/index.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <div class="w-full h-screen p-8 flex gap-8 justify-start items-start">
+        <Product
+            brand="Samsung"
+            title="Galaxy S20 Ultra"
+            picture="/assets/img/product-1.jpg"
+            :colors="['#0000ff', '#00ff00','red']"
+            :price="599"
+            :rate="2.4"
+            tag="New"
+        />
+        <Product
+            brand="Samsung"
+            title="Galaxy S20 Ultra"
+            picture="/assets/img/product-1.jpg"
+            :colors="['#0000ff', '#00ff00','red']"
+            :price="599"
+            :rate="2.4"
+            tag="New"
+        />
+    </div>
+</template>

frontend/tailwind.config.js

@@ -1,11 +0,0 @@
-const plugin = require("tailwindcss/plugin");
-
-/** @type {import("tailwindcss").Config} */
-module.exports = {
-    theme: {
-        extend : {
-        }
-    },
-    plugins: [
-    ]
-};