Mamalizz
156 lines
6.0 KiB
Vue
156 lines
6.0 KiB
Vue
<script setup lang="ts">
|
|
// types
|
|
|
|
type Props = {
|
|
// brands: string[];
|
|
};
|
|
|
|
// props
|
|
|
|
const props = defineProps<Props>();
|
|
const {} = toRefs(props);
|
|
</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>
|
|
<div class="-rotate-z-2 z-20">
|
|
<div
|
|
class="bg-black flex items-center pr-20 gap-12 sm:gap-20 w-max animate-marquee-reverse h-[90px] sm:h-[140px]"
|
|
>
|
|
<template v-for="i in 10">
|
|
<div class="text-[30px] lg:text-[40px] text-white whitespace-nowrap font-semibold opacity-85">
|
|
HEYMLZ
|
|
</div>
|
|
<NuxtImg
|
|
src="/img/heymlz/heymlz-logo.png"
|
|
class="h-[25px] sm:h-[45px] invert opacity-85"
|
|
/>
|
|
</template>
|
|
<template v-for="i in 10">
|
|
<div class="text-[30px] lg:text-[40px] text-white whitespace-nowrap font-semibold opacity-85">
|
|
HEYMLZ
|
|
</div>
|
|
<NuxtImg
|
|
src="/img/heymlz/heymlz-logo.png"
|
|
class="h-[25px] sm:h-[45px] invert opacity-85"
|
|
/>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rotate-z-2 z-10">
|
|
<div
|
|
class="bg-slate-100/70 flex items-center pr-20 gap-12 sm:gap-20 w-max animate-marquee h-[90px] sm:h-[140px]"
|
|
>
|
|
<template v-for="i in 1">
|
|
<NuxtImg
|
|
src="/img/brands/brand-1.png"
|
|
class="h-[25px] sm:h-[45px]"
|
|
/>
|
|
<NuxtImg
|
|
src="/img/brands/brand-2.png"
|
|
class="h-[25px] sm:h-[45px]"
|
|
/>
|
|
<NuxtImg
|
|
src="/img/brands/brand-3.png"
|
|
class="h-[25px] sm:h-[45px]"
|
|
/>
|
|
<NuxtImg
|
|
src="/img/brands/brand-4.png"
|
|
class="h-[25px] sm:h-[45px]"
|
|
/>
|
|
<NuxtImg
|
|
src="/img/brands/brand-5.png"
|
|
class="h-[25px] sm:h-[45px]"
|
|
/>
|
|
<NuxtImg
|
|
src="/img/brands/brand-6.png"
|
|
class="h-[25px] sm:h-[45px]"
|
|
/>
|
|
<NuxtImg
|
|
src="/img/brands/brand-1.png"
|
|
class="h-[25px] sm:h-[45px]"
|
|
/>
|
|
<NuxtImg
|
|
src="/img/brands/brand-2.png"
|
|
class="h-[25px] sm:h-[45px]"
|
|
/>
|
|
<NuxtImg
|
|
src="/img/brands/brand-3.png"
|
|
class="h-[25px] sm:h-[45px]"
|
|
/>
|
|
<NuxtImg
|
|
src="/img/brands/brand-4.png"
|
|
class="h-[25px] sm:h-[45px]"
|
|
/>
|
|
<NuxtImg
|
|
src="/img/brands/brand-5.png"
|
|
class="h-[25px] sm:h-[45px]"
|
|
/>
|
|
<NuxtImg
|
|
src="/img/brands/brand-6.png"
|
|
class="h-[25px] sm:h-[45px]"
|
|
/>
|
|
</template>
|
|
<template v-for="i in 1">
|
|
<NuxtImg
|
|
src="/img/brands/brand-1.png"
|
|
class="h-[25px] sm:h-[45px]"
|
|
/>
|
|
<NuxtImg
|
|
src="/img/brands/brand-2.png"
|
|
class="h-[25px] sm:h-[45px]"
|
|
/>
|
|
<NuxtImg
|
|
src="/img/brands/brand-3.png"
|
|
class="h-[25px] sm:h-[45px]"
|
|
/>
|
|
<NuxtImg
|
|
src="/img/brands/brand-4.png"
|
|
class="h-[25px] sm:h-[45px]"
|
|
/>
|
|
<NuxtImg
|
|
src="/img/brands/brand-5.png"
|
|
class="h-[25px] sm:h-[45px]"
|
|
/>
|
|
<NuxtImg
|
|
src="/img/brands/brand-6.png"
|
|
class="h-[25px] sm:h-[45px]"
|
|
/>
|
|
<NuxtImg
|
|
src="/img/brands/brand-1.png"
|
|
class="h-[25px] sm:h-[45px]"
|
|
/>
|
|
<NuxtImg
|
|
src="/img/brands/brand-2.png"
|
|
class="h-[25px] sm:h-[45px]"
|
|
/>
|
|
<NuxtImg
|
|
src="/img/brands/brand-3.png"
|
|
class="h-[25px] sm:h-[45px]"
|
|
/>
|
|
<NuxtImg
|
|
src="/img/brands/brand-4.png"
|
|
class="h-[25px] sm:h-[45px]"
|
|
/>
|
|
<NuxtImg
|
|
src="/img/brands/brand-5.png"
|
|
class="h-[25px] sm:h-[45px]"
|
|
/>
|
|
<NuxtImg
|
|
src="/img/brands/brand-6.png"
|
|
class="h-[25px] sm:h-[45px]"
|
|
/>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|