From f293c6364ef2e4a1b788165625ded53d54221842 Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Sat, 21 Dec 2024 12:08:19 +0330
Subject: [PATCH] Create brands component

---
 frontend/components/global/Brands.vue | 73 +++++++++++++++++++++++++++
 1 file changed, 73 insertions(+)
 create mode 100644 frontend/components/global/Brands.vue

diff --git a/frontend/components/global/Brands.vue b/frontend/components/global/Brands.vue
new file mode 100644
index 0000000..5fa82ef
--- /dev/null
+++ b/frontend/components/global/Brands.vue
@@ -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>
\ No newline at end of file