Parsa Nazer
141 lines
4.0 KiB
Vue
141 lines
4.0 KiB
Vue
<script setup lang="ts">
|
||
import { useImage } from "@vueuse/core";
|
||
import { useRatio } from "~/composables/global/useRatio";
|
||
|
||
// types
|
||
type Props = {
|
||
// brands?: string[];
|
||
};
|
||
|
||
// props
|
||
|
||
const { isMobile } = useRatio();
|
||
|
||
const props = defineProps<Props>();
|
||
const {} = toRefs(props);
|
||
|
||
const brandsList = ref([
|
||
"acer.png",
|
||
"adidas.png",
|
||
"aeg.png",
|
||
"anker.png",
|
||
"apple.webp",
|
||
"asus.png",
|
||
"canon.png",
|
||
"cat.png",
|
||
"deawoo.png",
|
||
"dell.png",
|
||
"greenlion.webp",
|
||
"gucci.png",
|
||
"hp.png",
|
||
"huawei.webp",
|
||
"jbl.png",
|
||
"jordan.png",
|
||
"lg.png",
|
||
"microsoft.png",
|
||
"msi.png",
|
||
"nike.png",
|
||
"ninja.png",
|
||
"philips.png",
|
||
"playstation.png",
|
||
"reebok.png",
|
||
"samsung.png",
|
||
"sencor.png",
|
||
"sony.png",
|
||
"tefal.png",
|
||
"uwell.png",
|
||
"westinghous.png",
|
||
"xbox.png",
|
||
"xiaomi.png",
|
||
"xvision.png",
|
||
"zara.png",
|
||
]);
|
||
|
||
const brands = computed(() => {
|
||
return brandsList.value.map(i => `/img/brands/${i}`)
|
||
})
|
||
// preload images using vueuse
|
||
const isReady = ref(false);
|
||
|
||
onMounted(async () => {
|
||
const loaders = brands.value.map((src) => useImage({ src }));
|
||
await Promise.all(loaders.map((l) => (l.isLoading.value ? l.promise : Promise.resolve())));
|
||
isReady.value = true;
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<div class="relative w-full flex flex-col justify-center py-32 lg:py-48">
|
||
<div class="flex-col-center gap-6 mb-24 sm:mb-32 container">
|
||
<span class="typo-h-6 max-sm:text-xl md:typo-h-5 lg:typo-h-4 text-black"> بهترین برندهای موجود در فروشگاه </span>
|
||
<p class="text-slate-500 text-center max-w-[750px] typo-p-sm md:typo-p-lg xl:typo-p-xl">
|
||
گلچینی از برندهای شناختهشده که کیفیت و اصالت رو تضمین میکنن.
|
||
انتخابهایی مطمئن برای خریدی راحت، هوشمندانه و بدون دغدغه.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- TOP MARQUEE -->
|
||
<div class="-rotate-z-2 z-20 w-[110%] shadow-2xl shadow-black/7">
|
||
<Marquee
|
||
class="bg-blue-500 will-change-transform"
|
||
:clone="true"
|
||
dir="ltr"
|
||
:duration="14"
|
||
>
|
||
<div
|
||
v-for="i in 6"
|
||
:key="i"
|
||
class="flex items-center gap-12 sm:gap-20 px-6 sm:px-10 h-[70px] sm:h-[140px] shrink-0 grow-0"
|
||
>
|
||
<div class="text-[30px] text-white lg:text-[40px] mt-2 whitespace-nowrap font-semibold opacity-85">
|
||
HEYMLZ
|
||
</div>
|
||
<div class="size-[25px] sm:size-[45px] flex-center">
|
||
<NuxtImg
|
||
loading="lazy"
|
||
fetch-priority="low"
|
||
src="/img/heymlz/heymlz-logo.png"
|
||
class="w-full object-contain invert"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</Marquee>
|
||
</div>
|
||
|
||
<!-- BOTTOM MARQUEE -->
|
||
<div class="rotate-z-2 z-10 w-[110%]">
|
||
<Marquee
|
||
v-if="isReady"
|
||
class="bg-slate-100/70 will-change-transform"
|
||
direction="reverse"
|
||
:clone="true"
|
||
dir="ltr"
|
||
:duration="48"
|
||
>
|
||
<div
|
||
v-for="brand in brands"
|
||
:key="brand"
|
||
class="flex items-center px-6 sm:px-10 h-[70px] sm:h-[140px] shrink-0 grow-0"
|
||
>
|
||
<NuxtImg
|
||
fetch-priority="low"
|
||
:src="brand"
|
||
class="opacity-25 object-contain w-[120px] sm:w-[200px] h-[45px] sm:h-[90px]"
|
||
/>
|
||
</div>
|
||
</Marquee>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.fade-enter-active,
|
||
.fade-leave-active {
|
||
transition: opacity 0.4s ease;
|
||
}
|
||
.fade-enter-from,
|
||
.fade-leave-to {
|
||
opacity: 0;
|
||
}
|
||
</style>
|