Create brands component

2024-12-21 12:08:19 +03:30
parent fe3dff9841
commit f293c6364e
1 changed files with 73 additions and 0 deletions
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+
+// types
+
+type Props = {
+    // brands: string[];
+}
+
+// props
+
+const props = defineProps<Props>();
+const {} = toRefs(props);
+
+// state
+
+const { $gsap: gsap } = useNuxtApp();
+
+// lifecycle
+
+onMounted(() => {
+    gsap.to("#marquee-text-container", {
+        xPercent: -50, // Adjust based on content width
+        duration: 10,  // Adjust for desired speed
+        ease: "none",
+        repeat: -1
+    });
+});
+
+</script>
+
+<template>
+    <div class="relative w-full flex flex-col justify-center h-[350px]">
+
+        <div class="-rotate-z-2 z-20">
+            <div
+                class="bg-warning-500 flex pr-20 gap-20 py-2 w-max animate-marquee-reverse"
+            >
+            <span
+                v-for="i in 10"
+                class="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"
+                >
+                TEST {{ i }}
+            </span>
+            </div>
+        </div>
+
+        <div class="rotate-z-2 z-10">
+            <div
+                class="bg-slate-50 flex pr-20 gap-20 py-2 w-max animate-marquee"
+            >
+                <span
+                    v-for="i in 10"
+                    class="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"
+                    >
+                    TEST {{ i }}
+                </span>
+            </div>
+        </div>
+
+    </div>
+</template>