heymlz/hossein-por-shop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated

Browse Source
This commit is contained in:
marzban-dev
2025-03-04 20:42:30 +03:30
parent 5533c37e1e
commit 95c698f357
20 changed files with 1649 additions and 2630 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/app.vue
+9 -1
View File
@@ -1,5 +1,13 @@
<script setup>
<script lang="ts" setup>
// import
import { VueQueryDevtools } from "@tanstack/vue-query-devtools";
// state
useState('showLoadingOverlay', () => true);
</script>
<template>
frontend/components/global/Brands.vue
+6 -6
View File
@@ -15,17 +15,17 @@ const {} = toRefs(props);
<div class="relative w-full flex flex-col justify-center min-h-[700px] h-[80svh]">
<div class="-rotate-z-2 z-20">
<div
class="bg-warning-500 flex pr-20 gap-20 py-2 w-max animate-marquee-reverse"
class="bg-warning-500 flex pr-20 gap-12 sm:gap-20 py-2 w-max animate-marquee-reverse"
>
<span
v-for="i in 10"
class="text-[50px] text-white whitespace-nowrap font-semibold"
class="text-[20px] sm:text-[30px] lg:text-[50px] text-white whitespace-nowrap font-semibold"
>
TEST {{ i }}
</span>
<span
v-for="i in 10"
class="text-[50px] text-white whitespace-nowrap font-semibold"
class="text-[20px] sm:text-[30px] lg:text-[50px] text-white whitespace-nowrap font-semibold"
>
TEST {{ i }}
</span>
@@ -34,17 +34,17 @@ const {} = toRefs(props);
<div class="rotate-z-2 z-10">
<div
class="bg-slate-50 flex pr-20 gap-20 py-2 w-max animate-marquee"
class="bg-slate-50 flex pr-20 gap-12 sm:gap-20 py-2 w-max animate-marquee"
>
<span
v-for="i in 10"
class="text-[50px] text-slate-300 whitespace-nowrap font-semibold"
class="text-[20px] sm:text-[30px] lg:text-[50px] text-slate-300 whitespace-nowrap font-semibold"
>
TEST {{ i }}
</span>
<span
v-for="i in 10"
class="text-[50px] text-slate-300 whitespace-nowrap font-semibold"
class="text-[20px] sm:text-[30px] lg:text-[50px] text-slate-300 whitespace-nowrap font-semibold"
>
TEST {{ i }}
</span>
frontend/components/global/CategoryCard.vue
+11 -12
View File
@@ -24,7 +24,7 @@ const { colorObject } = useImageColor(`#category-image-${id.value}`);
<template>
<NuxtLink :to="`/products?category=${id}`">
<div class="group relative rounded-150 overflow-hidden w-full h-[500px] bg-white brightness-[97%]">
<div class="group relative rounded-150 overflow-hidden w-full aspect-square bg-white brightness-[97%]">
<img
:id="`category-image-${id}`"
class="group-hover:scale-105 transition-transform duration-200 absolute object-contain size-full"
@@ -37,7 +37,7 @@ const { colorObject } = useImageColor(`#category-image-${id.value}`);
/>
<div
class="absolute z-20 bottom-0 p-6 flex items-end justify-between w-full"
class="absolute z-20 bottom-0 p-4 md:p-6 flex items-end justify-between w-full"
>
<div
:class="
@@ -47,24 +47,23 @@ const { colorObject } = useImageColor(`#category-image-${id.value}`);
"
class="flex flex-col gap-2"
>
<div class="typo-s-h-md">
<div class="typo-sub-h-sm md:typo-sub-h-md">
{{ category }}
<span class="typo-p-xs -translate-y-1 inline-block mr-1">
{{ count }}
</span>
{{ count }}
</span>
</div>
<span class="typo-p-md">محصولات ما را مشاهده کنید</span>
<span class="typo-p-sm md:typo-p-md">محصولات ما را مشاهده کنید</span>
</div>
<Icon
size="24"
name="ci:arrow-left"
class="mb-1"
class="mb-1 size-5 md:size-6"
:class="
colorObject?.isLight && !darkLayer
? '**:stroke-black'
: '**:stroke-white'
"
colorObject?.isLight && !darkLayer
? '**:stroke-black'
: '**:stroke-white'
"
/>
</div>
</div>
frontend/components/global/Header.vue
+16 -14
View File
@@ -8,8 +8,8 @@ import { NAV_LINKS } from "~/constants";
// state
const route = useRoute();
const { token } = useAuth();
const isSideDrawerOpen = ref(false);
// queries
@@ -18,6 +18,7 @@ const { data: account } = useGetAccount();
// computed
const isHomePage = computed(() => route.path === "/");
</script>
<template>
@@ -27,10 +28,13 @@ const isHomePage = computed(() => route.path === "/");
:class="isHomePage ? 'fixed top-0 left-0 z-999' : 'z-999'"
>
<div
class="size-full flex items-center justify-between container py-[2.25rem] shrink-0 grow-0"
class="size-full flex items-center justify-between container py-6 lg:py-[2.25rem] shrink-0 grow-0"
>
<div class="flex items-center gap-16">
<div class="flex items-center justify-end gap-[1.5rem]">
<button class="md:hidden" @click="isSideDrawerOpen = true">
<Icon name="humbleicons:bars" size="28"/>
</button>
<div class="max-md:hidden flex items-center gap-8 lg:gap-16">
<div class="flex items-center justify-end gap-4 lg:gap-[1.5rem]">
<Tooltip v-if="!!account && !!token" title="حساب کاربری">
<NuxtLink
:to="{ name: 'profile' }"
@@ -53,8 +57,7 @@ const isHomePage = computed(() => route.path === "/");
<NuxtLink to="/signin" class="flex-center">
<Icon
name="ci:profile"
size="24px"
class="**:stroke-black"
class="**:stroke-black size-5 lg:size-6"
/>
</NuxtLink>
</Tooltip>
@@ -62,8 +65,7 @@ const isHomePage = computed(() => route.path === "/");
<NuxtLink to="/products" class="flex-center">
<Icon
name="ci:search"
size="21px"
class="**:stroke-black"
class="**:stroke-black size-4.5 lg:size-[21px]"
/>
</NuxtLink>
</Tooltip>
@@ -71,15 +73,14 @@ const isHomePage = computed(() => route.path === "/");
<NuxtLink to="/cart" class="flex-center">
<Icon
name="ci:cart"
size="24px"
class="**:stroke-black"
class="**:stroke-black size-5 lg:size-6"
/>
</NuxtLink>
</Tooltip>
</div>
<nav
class="flex-center gap-[2.5rem] typo-label-sm font-light text-black/80"
class="flex-center gap-6 lg:gap-[2.5rem] typo-label-xs lg:typo-label-sm font-light text-black/80"
>
<NuxtLink
v-for="(link, index) in NAV_LINKS"
@@ -94,7 +95,7 @@ const isHomePage = computed(() => route.path === "/");
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
height="23"
class="h-5 lg:h-6"
fill="none"
viewBox="0 0 220 40"
>
@@ -110,6 +111,7 @@ const isHomePage = computed(() => route.path === "/");
</div>
</div>
</header>
</template>
<style lang="scss" scoped></style>
<SideDrawer v-model="isSideDrawerOpen"/>
</template>
frontend/components/global/LoadingOverlay.vue
+2 -10
View File
@@ -1,18 +1,10 @@
<script lang="ts" setup>
// import
import type { LoadingOverlayProvideType } from "~/pages/index.vue";
// provide / inject
const { showLoadingOverlay } = inject("loadingOverlay") as LoadingOverlayProvideType;
// state
const { $gsap: gsap } = useNuxtApp();
const shouldRenderLoadingOverlay = ref(true);
const showLoadingOverlay = useState('showLoadingOverlay');
// lifecycle
@@ -27,7 +19,7 @@ watch(() => showLoadingOverlay.value, (value) => {
.to("#loading-overlay", {
scale: 0.8,
opacity: 0,
delay: 3
delay: 2.5
})
.to("#loading-overlay", {
opacity: 0,
frontend/components/global/Rate.vue
+2 -2
View File
@@ -13,8 +13,8 @@ defineProps<Props>();
</script>
<template>
<div class="bg-white flex justify-center items-center gap-2 rounded-full border-[0.5px] border-slate-300 px-4 py-2 typo-p-sm">
<Icon name="ci:star-solid" class="**:fill-warning-400 size-4.5" />
<div class="bg-white flex justify-center items-center gap-1.5 lg:gap-2 rounded-full border-[0.5px] border-slate-300 px-3 lg:px-4 py-1 lg:py-2 typo-p-xs lg:typo-p-sm">
<Icon name="ci:star-solid" class="**:fill-warning-400 size-3.5 lg:size-4.5" />
<span class="mt-0.5">
{{ rate }}
</span>
frontend/components/global/SideDrawer.vue
+112
View File
@@ -0,0 +1,112 @@
<script lang="ts" setup>
// import
import { NAV_LINKS } from "~/constants";
import { useAuth } from "~/composables/api/auth/useAuth";
import useGetAccount from "~/composables/api/account/useGetAccount";
// type
type Props = {
modelValue: boolean
}
// props
const props = defineProps<Props>();
// state
const { token } = useAuth();
const { data: account } = useGetAccount();
// emit
const emit = defineEmits(["update:modelValue"]);
// method
const closeSideDrawer = () => {
emit("update:modelValue", false);
};
</script>
<template>
<Transition name="fade">
<div
v-if="modelValue"
class="md:hidden fixed inset-0 h-svh z-999 size-full bg-black/50 cursor-pointer"
@click="closeSideDrawer"
/>
</Transition>
<div
@click.stop
:class="modelValue ? 'translate-x-0' : 'translate-x-[100%]'"
class="md:hidden cursor-default flex top-0 right-0 fixed z-999 transition-all flex-col bg-white w-[350px] h-full gap-8 pt-12"
>
<div class="flex items-center flex-col justify-end gap-[1.5rem]">
<Tooltip v-if="!!account && !!token" title="حساب کاربری">
<NuxtLink
:to="{ name: 'profile' }"
class="!size-[1.6rem] flex items-center justify-center relative overflow-hidden rounded-full border-[1.2px] border-black"
>
<Avatar
class="!size-[1.6rem]"
:src="account.profile_photo"
:alt="
account.first_name && account.last_name
? `${account.first_name.charAt(
0
)} ${account.last_name.charAt(0)}`
: 'بدون نام کاربری'
"
/>
</NuxtLink>
</Tooltip>
<Tooltip v-else title="ورود">
<NuxtLink to="/signin" class="flex-center">
<Icon
name="ci:profile"
size="24px"
class="**:stroke-black"
/>
</NuxtLink>
</Tooltip>
<Tooltip title="محصولات">
<NuxtLink to="/products" class="flex-center">
<Icon
name="ci:search"
size="21px"
class="**:stroke-black"
/>
</NuxtLink>
</Tooltip>
<Tooltip title="سبد خرید">
<NuxtLink to="/cart" class="flex-center">
<Icon
name="ci:cart"
size="24px"
class="**:stroke-black"
/>
</NuxtLink>
</Tooltip>
</div>
<nav
class="flex-center flex-col gap-[2.5rem] typo-label-sm font-light text-black/80"
>
<NuxtLink
v-for="(link, index) in NAV_LINKS"
:key="index"
:to="link.path"
>
{{ link.title }}
</NuxtLink>
</nav>
</div>
</template>
frontend/components/home/Categories.vue
+21 -10
View File
@@ -26,14 +26,17 @@ const onSwiper = (swiper: SwiperClass) => {
>
<div class="w-full flex justify-center items-center relative z-10">
<span class="text-white typo-h-4">
<span class="text-white typo-h-6 md:typo-h-5 lg:typo-h-4">
دسته بندی ها
</span>
</div>
<img
src="/img/gradient-2.png"
class="animate-spin [animation-duration:16s] object-cover absolute size-full brightness-45 scale-115"
class="animate-spin [animation-duration:16s] object-cover absolute size-full brightness-45 scale-115 aspect-square"
:style="{
maskImage: 'radial-gradient(black, transparent 50%)'
}"
alt=""
/>
@@ -41,9 +44,19 @@ const onSwiper = (swiper: SwiperClass) => {
<Swiper
:loop="true"
:centered-slides="true"
:slides-per-view="3.65"
:slides-per-view="1.5"
:space-between="20"
@swiper="onSwiper"
:breakpoints="{
640: {
centeredSlides: true,
slidesPerView : 2.65
},
1024 : {
centeredSlides: true,
slidesPerView : 3.65
}
}"
>
<SwiperSlide
v-for="slide in homeData!.sub_categories"
@@ -63,31 +76,29 @@ const onSwiper = (swiper: SwiperClass) => {
<div
v-if="!swiper_instance?.isBeginning"
@click="swiper_instance?.slidePrev()"
class="absolute z-20 right-20 shadow-lg cursor-pointer shadow-black/25 bottom-[50%] bg-white rounded-full size-11.5 flex justify-center items-center"
class="max-xs:hidden absolute z-20 right-10 xs:right-20 shadow-lg cursor-pointer shadow-black/25 bottom-[50%] translate-y-1/2 bg-white rounded-full size-10 xs:size-11.5 flex justify-center items-center"
>
<Icon
name="ci:arrow-right"
class="**:stroke-black"
size="24"
class="**:stroke-black size-5 xs:size-6"
/>
</div>
<div
v-if="!swiper_instance?.isEnd"
@click="swiper_instance?.slideNext()"
class="absolute z-20 left-20 shadow-lg cursor-pointer shadow-black/25 bottom-[50%] bg-white rounded-full size-11.5 flex justify-center items-center"
class="max-xs:hidden absolute z-20 left-10 xs:left-20 shadow-lg cursor-pointer shadow-black/25 bottom-[50%] translate-y-1/2 bg-white rounded-full size-10 xs:size-11.5 flex justify-center items-center"
>
<Icon
name="ci:arrow-left"
class="**:stroke-black"
size="24"
class="**:stroke-black size-5 xs:size-6"
/>
</div>
</div>
<div class="w-full flex justify-center items-center">
<NuxtLink to="/category">
<Button variant="solid" class="invert rounded-full px-8" end-icon="ci:arrow-left">
<Button variant="solid" class="invert rounded-full max-xs:typo-label-sm !px-4 xs:!px-8" end-icon="ci:arrow-left">
مشاهده همه دسته ها
</Button>
</NuxtLink>
frontend/components/home/Hero.vue
+66 -68
View File
@@ -5,17 +5,13 @@
import { Swiper, SwiperSlide } from "swiper/vue";
import type { SwiperClass } from "swiper/react";
import useHomeData from "~/composables/api/home/useHomeData";
import type { LoadingOverlayProvideType } from "~/pages/index.vue";
// provide / inject
const { changeLoadingOverlay } = inject("loadingOverlay") as LoadingOverlayProvideType;
// state
const { data: homeData } = useHomeData();
const { $gsap: gsap, $ScrollTrigger: ScrollTrigger } = useNuxtApp();
const swiper_instance = ref<SwiperClass | null>(null);
const showLoadingOverlay = useState('showLoadingOverlay');
const observerTarget = ref(null);
const shouldPauseVideos = ref(false);
@@ -23,7 +19,6 @@ const shouldPauseVideos = ref(false);
useIntersectionObserver(
observerTarget,
([entry], observerElement) => {
console.log(entry.rootBounds ? !entry.isIntersecting : false, "asdad");
shouldPauseVideos.value = entry.rootBounds ? !entry.isIntersecting : false;
}
);
@@ -36,7 +31,7 @@ let gsapTimeline: gsap.core.Timeline;
// methods
const onSwiper = (swiper: SwiperClass) => {
changeLoadingOverlay(false);
showLoadingOverlay.value = false;
swiper_instance.value = swiper;
};
@@ -99,18 +94,11 @@ onMounted(() => {
marginTop: "0px",
scale: 1.025
}, {
marginTop: "96px",
marginTop: () => {
const navbarEl = document.querySelector("#header-navbar") as HTMLDivElement;
return `${navbarEl.clientHeight}px`;
},
scale: 1
}, "=")
.fromTo("#header-slider-pagination-child", {
padding: "0px 0px"
}, {
padding: "0px 80px"
}, "=")
.fromTo(".header-slider-item-child", {
padding: "0px 80px"
}, {
padding: "0px 40px"
}, "=");
ScrollTrigger.create({
@@ -122,7 +110,6 @@ onMounted(() => {
// markers: true,
end: "bottom top"
});
});
onUnmounted(() => {
@@ -133,15 +120,23 @@ onUnmounted(() => {
</script>
<template>
<div id="header-slider-container" class="w-full mb-20 z-50">
<div
id="header-slider-container"
class="w-full mb-20 z-50"
>
<div id="header-slider-wrapper" class="relative">
<Swiper
ref="observerTarget"
:slides-per-view="slidesPerView"
:loop="true"
:space-between="40"
:space-between="20"
:centered-slides="true"
:breakpoints="{
1024 : {
spaceBetween : 40
}
}"
@swiper="onSwiper"
>
<SwiperSlide
@@ -160,19 +155,26 @@ onUnmounted(() => {
:src="slide.video"
/>
</template>
<img
v-else
class="absolute inset-0 size-full object-cover"
:src="slide.image!"
:alt="slide.title"
/>
<div class="size-full absolute z-10 bg-linear-to-t from-black/50 to-transparent" />
<div class="header-slider-item-child absolute z-10 w-full bottom-36">
<div class="w-full container">
<div class="border-b border-white/10 pb-6 flex flex-col gap-4">
<div class="flex items-center gap-8">
<div
:class="swiper_instance?.realIndex !== index ? 'opacity-0' : ''"
class="w-full transition-opacity pb-6 xs:pb-10 lg:pb-16 px-6 xs:px-10 lg:px-16 gap-6 xs:gap-10 lg:gap-12 container flex flex-col h-full justify-end relative z-10"
>
<div class="header-slider-item-child w-full">
<div class="border-b border-white/10 pb-6 flex flex-col gap-2 md:gap-4">
<div class="flex items-center gap-4 lg:gap-8">
<div
class="hover:scale-110 size-[50px] relative flex items-center justify-center">
class="hover:scale-110 size-[36px] md:size-[42px] lg:size-[50px] relative flex items-center justify-center">
<div
class="size-full scale-75 bg-white absolute rounded-full animate-ping" />
<button
@@ -181,63 +183,59 @@ onUnmounted(() => {
>
<Icon
:name="isMuted ? 'bi:volume-mute-fill' : 'bi:volume-up-fill'"
class="text-black"
size="24px"
class="text-black size-4 md:size-[18px] lg:size-[24px]"
/>
</button>
</div>
<h3 class="typo-h-1 tracking-[-2px] text-white">
<h3 class="typo-h-6 md:typo-h-4 lg:typo-h-1 tracking-[-2px] text-white">
{{ slide.title }}
</h3>
</div>
<div class="flex justify-between items-end">
<span class="typo-p-lg text-white">
{{ slide.description }}
</span>
<Button class="invert rounded-full hover:bg-transparent">
<div class="flex justify-between items-center">
<span class="truncate typo-p-xs md:typo-p-sm lg:typo-p-lg text-white">
{{ slide.description }}
</span>
<Button
class="max-sm:hidden max-lg:typo-label-xs invert rounded-full hover:bg-transparent">
مشاهده
</Button>
</div>
</div>
</div>
<div
id="header-slider-pagination-child"
class="flex items-center justify-between"
>
<button @click="swiper_instance?.slidePrev()">
<Icon
class="**:stroke-white cursor-pointer size-5 md:size-6"
name="ci:arrow-right"
/>
</button>
<div class="flex items-center justify-center gap-3 text-white">
<div
v-for="(_slide, index) in homeData!.sliders"
:class="swiper_instance?.realIndex === index ? 'bg-white' : 'bg-transparent'"
class="border border-white size-2 md:size-3 rounded-full transition-all duration-200"
@click="swiper_instance?.slideTo(index)"
>
</div>
</div>
<button>
<Icon
@click="swiper_instance?.slideNext()"
class="**:stroke-white cursor-pointer size-5 md:size-6"
name="ci:arrow-left"
/>
</button>
</div>
</div>
</div>
</SwiperSlide>
</Swiper>
<div
id="header-slider-pagination"
class="absolute w-full left-1/2 -translate-x-1/2 z-100"
:style="{ bottom : '80px' }"
>
<div class="container h-full">
<div id="header-slider-pagination-child" class="h-full flex items-center justify-between">
<button @click="swiper_instance?.slidePrev()">
<Icon
class="**:stroke-white cursor-pointer"
name="ci:arrow-right"
size="24"
/>
</button>
<div class="flex items-center justify-center gap-3 text-white">
<div
v-for="(_slide, index) in homeData!.sliders"
:class="swiper_instance?.realIndex === index ? 'bg-white' : 'bg-transparent'"
class="border border-white size-3 rounded-full transition-all duration-200"
@click="swiper_instance?.slideTo(index)"
>
</div>
</div>
<button>
<Icon
@click="swiper_instance?.slideNext()"
class="**:stroke-white cursor-pointer"
name="ci:arrow-left"
size="24"
/>
</button>
</div>
</div>
</div>
</div>
</div>
frontend/components/home/LatestStories.vue
+3 -5
View File
@@ -14,19 +14,17 @@ await suspense();
</script>
<template>
<section class="mt-20 px-20">
<section class="mt-20 container">
<div class="flex items-center justify-between mb-20">
<span class="typo-h-4 text-black">
<span class="typo-h-6 md:typo-h-5 lg:typo-h-4 text-black">
مقالات اخیر سایت
</span>
<NuxtLink to="/articles">
<Button variant="outlined" class="rounded-full" start-icon="ci:paper">
<Button variant="outlined" class="rounded-full max-sm:typo-label-sm max-sm:py-2" end-icon="ci:arrow-left">
نمایش همه
</Button>
</NuxtLink>
</div>
<ClientOnly>
<ArticlesList :articles="articles!.results" />
</ClientOnly>
</section>
</template>
frontend/components/home/MostRecentComments.vue
+5 -5
View File
@@ -51,14 +51,14 @@ const onSwiper = (swiper: SwiperClass) => {
<div class="flex justify-center items-center">
<div class="max-w-[900px] px-4 text-white flex flex-col items-center gap-4">
<Icon name="ci:instagram" size="28" class="**:stroke-white" />
<p class="typo-h-5 leading-[150%] text-center">
<p class="text-base xs:text-lg sm:typo-h-6 lg:typo-h-5 !font-medium leading-[150%] lg:leading-[175%] max-sm:px-4 sm:max-w-[600px] lg:max-w-[800px] text-center">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله
در ستون و سطرآنچنان که لازم.
</p>
<span class="typo-p-xl text-center">
- منصور مرزبان
</span>
<span class="typo-p-sm md:typo-p-xl text-center">
- منصور مرزبان
</span>
</div>
</div>
</SwiperSlide>
@@ -68,7 +68,7 @@ const onSwiper = (swiper: SwiperClass) => {
<div
v-for="(i, index) in 6"
:class="swiper_instance?.realIndex === index ? 'bg-white' : 'bg-transparent'"
class="border border-white size-2 rounded-full transition-all duration-200"
class="border border-white size-1.5 md:size-2 rounded-full transition-all duration-200"
>
</div>
</div>
frontend/components/home/Preview.vue
+10 -11
View File
@@ -46,17 +46,16 @@ watch(
</script>
<template>
<div class="container">
<div class="flex flex-col items-center gap-3 mb-16">
<span class="typo-p-md text-slate-500">مقایسه محصولات</span>
<span class="typo-h-3 text-black">
<div class="container max-w-[1000px]">
<div class="flex flex-col items-center gap-3 mb-10 lg:mb-16">
<span class="typo-p-sm md:typo-p-md text-slate-500">مقایسه محصولات</span>
<span class="typo-h-6 md:typo-h-5 lg:typo-h-3 text-black">
تفاوت محصلات ما را ببینید
{{ activeSlideVideo }}
</span>
</div>
<div
ref="previewContainerEl"
class="rounded-200 overflow-hidden h-[90svh] relative"
class="rounded-200 overflow-hidden h-[60svh] md:h-[70svh] relative"
>
<Transition name="fade">
<img
@@ -110,21 +109,21 @@ watch(
</div>
<div
class="absolute bottom-0 p-10 w-full flex justify-between items-end"
class="max-xs:hidden absolute bottom-0 p-6 md:p-10 w-full flex justify-between items-end"
>
<div class="flex flex-col gap-2 text-black">
<span class="typo-p-md">
<span class="typo-p-sm md:typo-p-md">
{{ homeData!.difreance_section.description1 }}
</span>
<span class="typo-h-3">
<span class="typo-h-6 md:typo-h-5 lg:typo-h-3">
{{ homeData!.difreance_section.title1 }}
</span>
</div>
<div class="flex flex-col gap-2 text-black">
<span class="typo-p-md text-end">
<span class="typo-p-sm md:typo-p-md text-end">
{{ homeData!.difreance_section.description2 }}
</span>
<span class="typo-h-3 text-end">
<span class="typo-h-6 md:typo-h-5 lg:typo-h-3 text-end">
{{ homeData!.difreance_section.title2 }}
</span>
</div>
frontend/components/home/ProductsShowcase.vue
+11 -26
View File
@@ -1,29 +1,14 @@
<script lang="ts" setup>
// import
import useHomeData from "~/composables/api/home/useHomeData";
// state
const { $gsap: gsap, $ScrollTrigger: ScrollTrigger } = useNuxtApp();
const { data : homeData } = useHomeData();
const slides = [
{
id: 1,
title: "موبایل iPhone 16 Pro Max",
description: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم.",
image: "/img/showcase-1.png"
},
{
id: 2,
title: "موبایل iPhone 16 Pro Max",
description: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم.",
image: "/img/showcase-2.png"
},
{
id: 3,
title: "موبایل iPhone 16 Pro Max",
description: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم.",
image: "/img/showcase-1.png"
}
];
const { $gsap: gsap, $ScrollTrigger: ScrollTrigger } = useNuxtApp();
let gsapTimeline: gsap.core.Timeline;
@@ -107,15 +92,15 @@ onUnmounted(() => {
class="mt-80 mb-40 perspective-midrange w-full h-[125svh] bg-black flex items-center justify-center"
>
<div
v-for="slide in slides"
v-for="slide in homeData!.show_case_slider"
:key="slide.id"
class="showcase-slide origin-bottom absolute size-full bg-transparent flex items-center justify-center"
>
<div
class="blur-[150px] w-[600px] h-[80px] bg-white/70 absolute z-10"
class="blur-[150px] w-[400px] sm:w-[600px] h-[80px] sm:h-[80px] bg-white/70 absolute z-10"
/>
<img
class="w-[650px] z-20 mb-30"
class="w-[280px] xs:w-[350px] lg:w-[500px] xl:w-[650px] z-20 mb-30 sm:mb-20 lg:mb-30"
:src="slide.image"
:style="{
mask: 'linear-gradient(to bottom, black 0%, rgba(0,0,0,0) 100%)',
@@ -123,10 +108,10 @@ onUnmounted(() => {
alt=""
/>
<div class="flex flex-col items-center justify-center gap-4 text-center absolute z-20 mt-20">
<span class="text-white typo-h-3">
<span class="text-white typo-h-6 sm:typo-h-5 lg:typo-h-4 xl:typo-h-3">
{{ slide.title }}
</span>
<p class="text-white max-w-[750px] typo-p-lg">
<p class="text-white max-w-[320px] xs:max-w-[360px] sm:max-w-[480px] lg:max-w-[550px] xl:max-w-[750px] typo-p-sm lg:typo-p-md xl:typo-p-lg">
{{ slide.description }}
</p>
</div>
frontend/composables/api/home/useHomeData.ts
+8 -1
View File
@@ -25,7 +25,14 @@ export type GetHomeDataResponse = {
"description2": string,
"link1": string,
"link2": string
}
},
"show_case_slider" : {
"id": number,
"title": string,
"description": string,
"link": string,
"image": string,
}[]
};
const useHomeData = () => {
frontend/nuxt.config.ts
+1 -2
View File
@@ -69,8 +69,7 @@ export default defineNuxtConfig({
"@nuxt/icon",
"reka-ui/nuxt",
"@vueuse/nuxt",
"@formkit/auto-animate/nuxt",
"@nuxt/test-utils/module",
"@formkit/auto-animate/nuxt"
],
runtimeConfig: {
frontend/package-lock.json
Generated
+1350 -2409
View File
File diff suppressed because it is too large Load Diff
frontend/package.json
+13 -19
View File
@@ -14,25 +14,25 @@
},
"dependencies": {
"@formkit/auto-animate": "^0.8.2",
"@nuxt/icon": "^1.9.1",
"@nuxt/icon": "^1.10.3",
"@nuxtjs/google-fonts": "^3.2.0",
"@tanstack/vue-query": "^5.62.2",
"@tanstack/vue-query-devtools": "^5.62.3",
"@tanstack/vue-query": "^5.66.9",
"@tanstack/vue-query-devtools": "^5.66.9",
"@vuelidate/core": "^2.0.3",
"@vuelidate/validators": "^2.0.4",
"@vueuse/integrations": "^12.4.0",
"@vueuse/nuxt": "^12.3.0",
"@vueuse/integrations": "^12.7.0",
"@vueuse/nuxt": "^12.7.0",
"animate.css": "^4.1.1",
"axios": "^1.7.9",
"axios": "^1.8.1",
"date-fns-jalali": "^4.1.0-0",
"fast-average-color": "^9.4.0",
"gsap": "^3.12.5",
"isomorphic-dompurify": "^2.21.0",
"gsap": "^3.12.7",
"isomorphic-dompurify": "^2.22.0",
"jalali-ts": "^8.0.0",
"masonry-layout": "^4.2.2",
"nuxt": "^3.14.1592",
"nuxt": "^3.15.4",
"reka-ui": "^1.0.0-alpha.6",
"swiper": "^11.1.15",
"swiper": "^11.2.4",
"universal-cookie": "^7.2.2",
"vue": "latest",
"vue-router": "latest",
@@ -42,16 +42,10 @@
"vue3-persian-datetime-picker": "^1.2.2"
},
"devDependencies": {
"@nuxt/test-utils": "^3.15.4",
"@tailwindcss/postcss": "^4.0.0-beta.5",
"@tailwindcss/postcss": "^4.0.9",
"@types/masonry-layout": "^4.2.8",
"@vue/test-utils": "^2.4.6",
"autoprefixer": "^10.4.20",
"happy-dom": "^16.8.1",
"msw": "^2.7.0",
"playwright-core": "^1.50.1",
"postcss": "^8.4.49",
"tailwindcss": "^4.0.0-beta.5",
"vitest": "^3.0.4"
"postcss": "^8.5.3",
"tailwindcss": "^4.0.9"
}
}
frontend/pages/index.vue
-22
View File
@@ -4,32 +4,10 @@
import useHomeData from "~/composables/api/home/useHomeData";
// type
export type LoadingOverlayProvideType = {
showLoadingOverlay: Ref<boolean>,
changeLoadingOverlay: (value: boolean) => void,
}
// state
const { suspense } = useHomeData();
const showLoadingOverlay = ref(true);
// method
const changeLoadingOverlay = (value: boolean) => {
showLoadingOverlay.value = value;
};
// provide / inject
provide("loadingOverlay", {
showLoadingOverlay,
changeLoadingOverlay
});
// ssr
const response = await suspense();
frontend/tools/logger.ts
-1
View File
@@ -1,5 +1,4 @@
import fs from "fs/promises";
import type { AxiosError } from "axios";
type LogType = {
title: string;
frontend/types/global.d.ts
Vendored
+3 -6
View File
@@ -88,10 +88,7 @@ declare global {
colors: string[];
};
type ProductListItem = Pick<
Product,
"id" | "variants" | "name" | "rating" | "slug" | "category" | "colors"
>;
type ProductListItem = Pick<Product, "id" | "variants" | "name" | "rating" | "slug" | "category" | "colors">
type Article = {
id: number;
@@ -126,7 +123,7 @@ declare global {
name: string;
slug: string;
icon: string;
product_count: string;
product_count: number;
subcategorys: SubCategory[];
};
@@ -136,7 +133,7 @@ declare global {
slug: string;
icon: string;
image: string;
product_count: string;
product_count: number;
parent: string;
show: boolean;
};