fixed merge
This commit is contained in:
Mamalizz
@@ -0,0 +1,73 @@
|
||||
@layer base {
|
||||
@font-face {
|
||||
font-family: "Morabba";
|
||||
src: url("/fonts/Morabba/IRANYekanX-UltraLight.woff2");
|
||||
font-weight: 200;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Morabba";
|
||||
src: url("/fonts/Morabba/Morabba-Light.woff2");
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Morabba";
|
||||
src: url("/fonts/Morabba/Morabba-Regular.woff2");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Morabba";
|
||||
src: url("/fonts/Morabba/Morabba-Medium.woff2");
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Morabba";
|
||||
src: url("/fonts/Morabba/Morabba-SemiBold.woff2");
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Morabba";
|
||||
src: url("/fonts/Morabba/Morabba-Bold.woff2");
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Morabba";
|
||||
src: url("/fonts/Morabba/Morabba-ExtraBold.woff2");
|
||||
font-weight: 800;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Morabba";
|
||||
src: url("/fonts/Morabba/Morabba-Black.woff2");
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Morabba";
|
||||
src: url("/fonts/Morabba/Morabba-Heavy.woff2");
|
||||
font-weight: 1000;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
@layer base {
|
||||
@font-face {
|
||||
font-family: "YekanBakh";
|
||||
src: url("/fonts/YekanBakh/YekanBakh-Thin.woff");
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "YekanBakh";
|
||||
src: url("/fonts/YekanBakh/YekanBakh-Light.woff");
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "YekanBakh";
|
||||
src: url("/fonts/YekanBakh/YekanBakh-Regular.woff");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "YekanBakh";
|
||||
src: url("/fonts/YekanBakh/YekanBakh-SemiBold.woff");
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "YekanBakh";
|
||||
src: url("/fonts/YekanBakh/YekanBakh-Bold.woff");
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
@utility persian-number {
|
||||
-moz-font-feature-settings: "ss02";
|
||||
-webkit-font-feature-settings: "ss02";
|
||||
font-feature-settings: "ss02";
|
||||
-moz-font-feature-settings: "ss07";
|
||||
-webkit-font-feature-settings: "ss07";
|
||||
font-feature-settings: "ss07";
|
||||
}
|
||||
|
||||
@utility text-gradient {
|
||||
|
||||
@@ -5,6 +5,8 @@
|
||||
@import "./button.comp.css";
|
||||
@import "./input.comp.css";
|
||||
@import "./fonts/iran-yekan-x.css";
|
||||
@import "./fonts/morabba.css";
|
||||
@import "./fonts/yekan-bakh.css";
|
||||
|
||||
@theme {
|
||||
/* COLORS */
|
||||
@@ -109,6 +111,8 @@
|
||||
--font-inter: "Inter", sans-serif;
|
||||
--font-dmsans: "DM Sans", sans-serif;
|
||||
--font-iran-yekan-x: "IRANYekanXVF", "sans-serif";
|
||||
--font-yekan-bakh: "YekanBakh", "sans-serif";
|
||||
--font-morabba: "Morabba", "sans-serif";
|
||||
|
||||
/* BREAKPOINTS */
|
||||
--breakpoint-3xl: 1700px;
|
||||
@@ -128,6 +132,7 @@
|
||||
/* CONTAINER */
|
||||
|
||||
@utility container {
|
||||
@apply mx-auto;
|
||||
padding-inline: 3rem;
|
||||
@screen xl {
|
||||
padding-inline: 5rem;
|
||||
|
||||
@@ -1,35 +1,35 @@
|
||||
/* TYPO HERO */
|
||||
@utility typo-hero-1 {
|
||||
@apply text-[96px] leading-[96px] font-bold ;
|
||||
@apply text-[96px] leading-[96px] font-semibold ;
|
||||
}
|
||||
|
||||
@utility typo-hero-2 {
|
||||
@apply text-[72px] leading-[72px] font-bold ;
|
||||
@apply text-[72px] leading-[72px] font-semibold ;
|
||||
}
|
||||
|
||||
/* TYPE HEADING */
|
||||
@utility typo-h-1 {
|
||||
@apply text-[64px] leading-[72px] font-bold ;
|
||||
@apply text-[64px] leading-[72px] font-semibold ;
|
||||
}
|
||||
|
||||
@utility typo-h-2 {
|
||||
@apply text-[56px] leading-[64px] font-bold ;
|
||||
@apply text-[56px] leading-[64px] font-semibold ;
|
||||
}
|
||||
|
||||
@utility typo-h-3 {
|
||||
@apply text-[48px] leading-[56px] font-bold ;
|
||||
@apply text-[48px] leading-[56px] font-semibold ;
|
||||
}
|
||||
|
||||
@utility typo-h-4 {
|
||||
@apply text-[40px] leading-[52px] font-bold ;
|
||||
@apply text-[40px] leading-[52px] font-semibold ;
|
||||
}
|
||||
|
||||
@utility typo-h-5 {
|
||||
@apply text-[32px] leading-[40px] font-bold ;
|
||||
@apply text-[32px] leading-[40px] font-semibold ;
|
||||
}
|
||||
|
||||
@utility typo-h-6 {
|
||||
@apply text-[24px] leading-[32px] font-bold ;
|
||||
@apply text-[24px] leading-[32px] font-semibold ;
|
||||
}
|
||||
|
||||
/* TYPE SUBHEADING */
|
||||
|
||||
@@ -9,12 +9,12 @@
|
||||
<Icon name="ci:check" class="size-4 **:stroke-white"/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<span class="typo-label-sm whitespace-nowrap">Pick up from Store</span>
|
||||
<span class="typo-p-sm whitespace-nowrap">Usually ready in 2 hours</span>
|
||||
<span class="typo-label-sm whitespace-nowrap">دریافت حضوری فروشگاه</span>
|
||||
<span class="typo-p-sm whitespace-nowrap">معمولا طی ۲ ساعت اماده میشود</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="typo-p-xs">
|
||||
Check availability at other stores
|
||||
برسی موجودی در فروشگاه های دیگر
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
@@ -4,9 +4,6 @@
|
||||
|
||||
<template>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="typo-p-sm">
|
||||
5.0
|
||||
</span>
|
||||
<div class="flex items-center gap-1">
|
||||
<Icon
|
||||
name="ci:star-solid"
|
||||
@@ -29,5 +26,8 @@
|
||||
class="size-4.5 **:fill-yellow-500"
|
||||
/>
|
||||
</div>
|
||||
<span class="typo-p-sm">
|
||||
5.0
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
@@ -3,6 +3,7 @@
|
||||
// types
|
||||
|
||||
type Props = {
|
||||
maxQuantity: number;
|
||||
quantity: number;
|
||||
}
|
||||
|
||||
@@ -13,16 +14,19 @@ defineProps<Props>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col gap-2 w-full items-end">
|
||||
<div class="flex flex-col gap-2 w-full">
|
||||
<p class="typo-p-sm text-slate-500">
|
||||
Hurry, only
|
||||
سریع باش فقط
|
||||
<span class="text-black">
|
||||
{{ quantity }}
|
||||
{{ maxQuantity }}
|
||||
</span>
|
||||
items left in stock
|
||||
عدد از این محصول باقی مانده
|
||||
</p>
|
||||
<div class="h-2 rounded-full relative bg-slate-200 w-full">
|
||||
<div class="w-[85%] h-full absolute left-0 rounded-full bg-black" />
|
||||
<div
|
||||
:style="{ width: `${quantity * (100 / maxQuantity)}%` }"
|
||||
class="h-full absolute right-0 rounded-full bg-black transition-all ease-out"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="flex items-center gap-6">
|
||||
<span class="typo-p-md text-black">
|
||||
Share:
|
||||
اشتراک گذاری:
|
||||
</span>
|
||||
<div class="flex items-center gap-3">
|
||||
<NuxtLink>
|
||||
|
||||
@@ -0,0 +1,58 @@
|
||||
<script lang="ts" setup>
|
||||
|
||||
// types
|
||||
|
||||
type Props = {
|
||||
selectedSlide: number;
|
||||
slides: {
|
||||
id: number;
|
||||
picture: string;
|
||||
}[]
|
||||
}
|
||||
|
||||
// props
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const { slides, selectedSlide } = toRefs(props);
|
||||
|
||||
// emit
|
||||
const emit = defineEmits(["update:selectedSlide"]);
|
||||
|
||||
// computed
|
||||
|
||||
const selectedSlideDetail = computed(() => {
|
||||
return slides.value.find((item) => {
|
||||
return item.id === selectedSlide.value;
|
||||
})!;
|
||||
});
|
||||
|
||||
// method
|
||||
|
||||
const changeSlide = (id: number) => {
|
||||
emit("update:selectedSlide", id);
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col relative gap-4">
|
||||
<div class="bg-red-300 w-full relative aspect-square overflow-hidden rounded-200">
|
||||
<img
|
||||
class="size-full absolute object-cover"
|
||||
:src="selectedSlideDetail.picture"
|
||||
:alt="String(selectedSlideDetail.id)"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center justify-between gap-4">
|
||||
<div
|
||||
@click="changeSlide(slide.id)"
|
||||
v-for="slide in slides"
|
||||
:class="selectedSlide === slide.id ? 'ring-black' : 'ring-transparent'"
|
||||
class="cursor-pointer aspect-square w-[108px] ring-2 ring-offset-4 rounded-200 w-full overflow-hidden relative"
|
||||
:key="slide.id"
|
||||
>
|
||||
<img class="absolute object-cover size-full" :src="slide.picture" :alt="String(slide.id)" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,23 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full p-12 rounded-150 bg-white border-[0.5px] border-slate-200 flex flex-col gap-6">
|
||||
<div class="flex justify-between items-start w-full">
|
||||
<div class="flex flex-col gap-3">
|
||||
<span class="typo-h-6 text-black">
|
||||
خیلی محصول خوبی بودددد
|
||||
</span>
|
||||
<span class="typo-p-sm text-slate-500">
|
||||
منصور مرزبان در ۱۴۰۳/۱۲/۲ ساعت ۱۲:۳۴
|
||||
</span>
|
||||
</div>
|
||||
<Rating />
|
||||
</div>
|
||||
<div class="typo-p-md">
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون
|
||||
بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرد گذشته.
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -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,29 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="bg-slate-50 p-20">
|
||||
<div class="flex gap-12 my-42 container">
|
||||
<div class="flex flex-col gap-6 min-w-fit">
|
||||
<h3 class="typo-h-3">
|
||||
نظرات کاربران
|
||||
</h3>
|
||||
<div class="flex flex-col gap-2">
|
||||
<Rating />
|
||||
<span class="typo-p-sm">
|
||||
بر اساس ۴ نظر
|
||||
</span>
|
||||
</div>
|
||||
<Button class="rounded-full">
|
||||
نظر بنویسید
|
||||
</Button>
|
||||
</div>
|
||||
<div class="flex flex-col gap-12">
|
||||
<Comment />
|
||||
<Comment />
|
||||
<Comment />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@@ -4,52 +4,71 @@
|
||||
const quantity = ref(1);
|
||||
const maxQuantity = ref(10);
|
||||
|
||||
const selectedSlide = ref(0);
|
||||
const slides = [
|
||||
{
|
||||
id: 0,
|
||||
picture: "/img/product-1.jpg"
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
picture: "/img/product-2.jpg"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
picture: "/img/product-3.jpg"
|
||||
}
|
||||
];
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex gap-12">
|
||||
<div class="w-[800px] flex flex-col items-end gap-3 mt-12">
|
||||
<div class="flex gap-12 container">
|
||||
<Slider
|
||||
class="flex-1"
|
||||
v-model:selectedSlide="selectedSlide"
|
||||
:slides="slides"
|
||||
/>
|
||||
<div class="flex-1 flex flex-col gap-3 mt-12">
|
||||
<span class="typo-label-sm">
|
||||
Nova
|
||||
سامسونگ
|
||||
</span>
|
||||
<h1 class="typo-h-2">
|
||||
Nova
|
||||
موبایل Nova
|
||||
</h1>
|
||||
<div class="flex w-full items-center justify-between">
|
||||
<Rating />
|
||||
<span class="typo-p-2xl">
|
||||
$689.00
|
||||
</span>
|
||||
<Rating />
|
||||
</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 class="typo-p-md text-slate-500 text-justify">
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و
|
||||
متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و
|
||||
کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته.
|
||||
</p>
|
||||
<div class="w-full flex flex-col gap-6 mt-4">
|
||||
<RemainQuantity :quantity="maxQuantity" />
|
||||
<RemainQuantity :maxQuantity="maxQuantity" :quantity="quantity" />
|
||||
<div class="w-full flex gap-3 flex-col">
|
||||
<div class="w-full flex gap-3">
|
||||
<Button
|
||||
class="w-full"
|
||||
class="w-full rounded-full"
|
||||
end-icon="ci:plus"
|
||||
>
|
||||
Add to cart
|
||||
افزودن به سبد خرید
|
||||
</Button>
|
||||
<QuantityCounter v-model="quantity" :max="maxQuantity" />
|
||||
</div>
|
||||
<Button
|
||||
class="w-full"
|
||||
class="w-full rounded-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>
|
||||
@@ -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>
|
||||
@@ -11,9 +11,9 @@
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full flex flex-col-center font-iran-yekan-x" dir="rtl">
|
||||
<div class="w-full flex flex-col-center persian-number font-yekan-bakh" dir="rtl">
|
||||
<Header />
|
||||
<main class="w-full overflow-x-hidden container">
|
||||
<main class="w-full overflow-x-hidden">
|
||||
<slot />
|
||||
</main>
|
||||
<Footer />
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -2,5 +2,7 @@
|
||||
|
||||
<template>
|
||||
<ProductHero />
|
||||
<Video />
|
||||
<Comments />
|
||||
<RelatedProducts title="محصولات مشابه" />
|
||||
</template>
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Reference in New Issue
Block a user