Hero issue fixes and visual changes

apps/landing/components/SiteMarquee.vue

@@ -1,10 +1,13 @@
 <template>
-  <div class="overflow-hidden" :class="className">
-    <div class="animate-marquee flex w-max" :style="{ '--marquee-duration': `${duration}s` } as any">
-      <div v-for="dup in 2" :key="dup" class="flex shrink-0 items-center">
+  <div class="overflow-hidden" :class="className" dir="ltr">
+    <div
+      class="animate-marquee flex w-max will-change-transform"
+      :style="{ '--marquee-duration': `${duration}s` } as any"
+    >
+      <div v-for="dup in 2" :key="dup" class="flex shrink-0 items-center" :aria-hidden="dup > 1">
         <span v-for="(item, i) in items" :key="`${dup}-${i}`" class="flex items-center">
           <span class="mx-5 whitespace-nowrap md:mx-8" :class="itemClassName">{{ item }}</span>
-          <span class="text-volt/70" :class="separatorClassName">{{ separator }}</span>
+          <span class="text-current/40" :class="separatorClassName">{{ separator }}</span>
         </span>
       </div>
     </div>
@@ -22,7 +25,7 @@ withDefaults(
     separator?: string;
   }>(),
   {
-    duration: 24,
+    duration: 28,
     className: "",
     itemClassName: "",
     separatorClassName: "",