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-04-09 17:34:11 +03:30
parent f9da506668
commit 04f5b3134f
23 changed files with 72 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/global/Footer.vue
+4 -9
View File
@@ -10,16 +10,11 @@
class="flex flex-col gap-4 items-center justify-center relative z-20"
>
<div
class="flex items-center flex-col pb-[10px] pt-[80px] lg:py-[150px] justify-center"
class="flex items-center flex-col gap-8 pb-[10px] pt-[80px] lg:py-[150px] justify-center"
>
<video
src="/video/loading.mp4"
autoplay
muted
loop
playsinline
webkit-playsinline
class="size-[150px] lg:size-[220px] rounded-full"
<img
src="/img/heymlz/heymlz-small-idle.gif"
class="size-[150px] lg:size-[220px] rounded-full drop-shadow-2xl"
/>
<span
class="font-bold text-2xl lg:text-5xl text-gradient bg-gradient-to-l from-blue-500 to-blue-700"
frontend/components/global/ServiceHighlights.vue
+5 -5
View File
@@ -11,22 +11,22 @@ type Highlight = {
const highlights = ref<Highlight[]>([
{
icon: "/img/heymlz/footer-support.png",
icon: "/img/heymlz/footer-support.gif",
title: "خدمات مشتری",
description: "پشتیبانی استثنایی، راه‌حل‌های پایدار برای شما",
},
{
icon: "/img/heymlz/footer-send.png",
icon: "/img/heymlz/footer-send.gif",
title: "ارسال سریع و رایگان",
description: "ارسال رایگان برای سفارش‌های بالای ۱۵۰ دلار",
},
{
icon: "/img/heymlz/footer-share.png",
icon: "/img/heymlz/footer-share.gif",
title: "معرفی به دوستان",
description: "ما را به دوستان خود معرفی کنید",
},
{
icon: "/img/heymlz/footer-security.png",
icon: "/img/heymlz/footer-security.gif",
title: "پرداخت امن",
description: "پرداخت شما به‌صورت امن پردازش می‌شود",
},
@@ -43,7 +43,7 @@ const highlights = ref<Highlight[]>([
<div class="size-[70px] md:size-[100px] flex-center">
<NuxtImg
:src="highlight.icon"
class="w-full scale-150"
class="w-full"
/>
</div>
frontend/components/home/Categories.vue
+20 -24
View File
@@ -1,5 +1,4 @@
<script setup lang="ts">
// imports
import { Swiper, SwiperSlide } from "swiper/vue";
@@ -16,7 +15,6 @@ const swiper_instance = ref<SwiperClass | null>(null);
const onSwiper = (swiper: SwiperClass) => {
swiper_instance.value = swiper;
};
</script>
<template>
@@ -24,32 +22,28 @@ const onSwiper = (swiper: SwiperClass) => {
ref="sectionTarget"
class="flex flex-col justify-center gap-4 bg-black h-[150svh] relative overflow-hidden"
>
<div class="w-full relative translate-y-[-200px] z-10">
<div class="flex-col-center gap-6">
<span class="text-white typo-h-6 md:typo-h-5 lg:typo-h-4">
دسته بندی ها
دسته بندی ها
</span>
<p class="text-slate-300 text-center max-w-[750px] typo-p-lg xl:typo-p-xl">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها
و
متون بلکه روزنامه و مجله در ستون و سطرآنچنان که
<p
class="text-slate-300 text-center max-w-[750px] typo-p-lg xl:typo-p-xl"
>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و
با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه
و مجله در ستون و سطرآنچنان که
</p>
</div>
</div>
<div class="w-full my-20 relative">
<video
class="aspect-square w-[450px] translate-[-293px] absolute left-1/2 -translate-x-1/2 z-10"
<img
class="aspect-square w-[450px] translate-[-309px] absolute left-1/2 -translate-x-1/2 z-10"
:style="{
filter: 'drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.4))',
}"
src="/video/heymlz/heymlz-handshake-part-1.webm"
autoplay
playsinline
webkit-playsinline
muted
src="/img/heymlz/heymlz-seat.gif"
/>
<Swiper
:loop="true"
@@ -60,12 +54,12 @@ const onSwiper = (swiper: SwiperClass) => {
:breakpoints="{
640: {
centeredSlides: true,
slidesPerView : 2.65
slidesPerView: 2.65,
},
1024 : {
1024: {
centeredSlides: true,
slidesPerView : 3.65
}
slidesPerView: 3.65,
},
}"
>
<SwiperSlide
@@ -108,12 +102,14 @@ const onSwiper = (swiper: SwiperClass) => {
<div class="w-full flex justify-center items-center">
<NuxtLink to="/category">
<Button variant="primary" class="rounded-full max-xs:typo-label-sm !px-4 xs:!px-8"
end-icon="ci:arrow-left">
<Button
variant="primary"
class="rounded-full max-xs:typo-label-sm !px-4 xs:!px-8"
end-icon="ci:arrow-left"
>
مشاهده همه دسته ها
</Button>
</NuxtLink>
</div>
</section>
</template>
</template>
frontend/components/home/ProductsShowcase.vue
+43 -31
View File
@@ -1,5 +1,4 @@
<script lang="ts" setup>
// import
import useHomeData from "~/composables/api/home/useHomeData";
@@ -21,26 +20,32 @@ onMounted(() => {
setTimeout(() => {
showcaseElements.forEach((element, index) => {
gsapTimeline.fromTo(element, index === 0 ? {
opacity: 1,
scale: 1,
// rotateX: -25,
top: 0,
ease: "none"
} : {
opacity: 0,
scale: 1,
// rotateX: -25,
top: 20,
ease: "none"
}, {
opacity: 1,
scale: 1,
// rotateX: 0,
top: 0,
ease: "none"
}, index === 0 ? "-=0%" : undefined);
gsapTimeline.fromTo(
element,
index === 0
? {
opacity: 1,
scale: 1,
// rotateX: -25,
top: 0,
ease: "none",
}
: {
opacity: 0,
scale: 1,
// rotateX: -25,
top: 20,
ease: "none",
},
{
opacity: 1,
scale: 1,
// rotateX: 0,
top: 0,
ease: "none",
},
index === 0 ? "-=0%" : undefined
);
if (index < showcaseElements.length - 1) {
gsapTimeline.to(element, {
@@ -48,10 +53,9 @@ onMounted(() => {
scale: 1.03,
// rotateX: 25,
top: -20,
ease: "none"
ease: "none",
});
}
});
scrollTrigger = ScrollTrigger.create({
@@ -62,14 +66,13 @@ onMounted(() => {
start: "top top",
anticipatePin: 1,
// markers: true,
end: "bottom top"
end: "bottom top",
});
setTimeout(() => {
scrollTrigger.update();
scrollTrigger.refresh();
}, 1000);
}, 1000);
});
@@ -77,7 +80,6 @@ onUnmounted(() => {
gsapTimeline.progress(1).pause();
gsapTimeline.kill();
});
</script>
<template>
@@ -100,14 +102,24 @@ onUnmounted(() => {
}"
alt=""
/>
<div class="flex flex-col items-center justify-center gap-6 text-center absolute z-20 mt-20">
<span class="text-white typo-h-6 sm:typo-h-5 lg:typo-h-4 xl:typo-h-3">
<div
class="flex flex-col items-center justify-center gap-6 text-center absolute z-20 mt-20"
>
<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-[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">
<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>
<NuxtLink :to="slide.link">
<NuxtLink :to="slide.link" class="relative">
<NuxtImg
src="/img/heymlz/heymlz-falling.gif"
class="absolute top-[134px] left-1/2 -translate-1/2 w-[250px]"
/>
<Button
variant="primary"
end-icon="ci:arrow-left"
@@ -120,4 +132,4 @@ onUnmounted(() => {
</NuxtLink>
</div>
</section>
</template>
</template>