From a65ad9118ca746efa0d5e689b3a2a92f8a1d9f67 Mon Sep 17 00:00:00 2001
From: wheattoast11 <tdesai1994@gmail.com>
Date: Wed, 20 Nov 2024 18:44:44 -0600
Subject: [PATCH] marquee fix

---
 src/pages/Home.jsx | 34 +++++++++++++++-------------------
 style.css          |  5 ++++-
 2 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 4059492..1bffa2e 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -16,26 +16,22 @@ function Home({ onMount }) {
 
       <div className="platforms-marquee">
         <div className="platforms-track">
-          <span className="platform-name platform-terminals">terminals</span>
-          <span className="platform-name platform-radical">radical</span>
-          <span className="platform-name platform-pathfinder">pathfinder</span>
-          <span className="platform-name platform-wuji">wuji</span>
-          <span className="platform-name platform-boom">boom</span>
-          <span className="platform-name platform-journey">journey</span>
-          <span className="platform-name platform-terminals">terminals</span>
-          <span className="platform-name platform-radical">radical</span>
-          <span className="platform-name platform-pathfinder">pathfinder</span>
-          <span className="platform-name platform-wuji">wuji</span>
-          <span className="platform-name platform-boom">boom</span>
-          <span className="platform-name platform-journey">journey</span>
-          <span className="platform-name platform-terminals">terminals</span>
-          <span className="platform-name platform-radical">radical</span>
-          <span className="platform-name platform-pathfinder">pathfinder</span>
-          <span className="platform-name platform-wuji">wuji</span>
-          <span className="platform-name platform-boom">boom</span>
-          <span className="platform-name platform-journey">journey</span>
+            {/* First set */}
+            <span className="platform-name platform-terminals">terminals</span>
+            <span className="platform-name platform-radical">radical</span>
+            <span className="platform-name platform-pathfinder">pathfinder</span>
+            <span className="platform-name platform-wuji">wuji</span>
+            <span className="platform-name platform-boom">boom</span>
+            <span className="platform-name platform-journey">journey</span>
+            {/* Duplicate set for seamless loop */}
+            <span className="platform-name platform-terminals">terminals</span>
+            <span className="platform-name platform-radical">radical</span>
+            <span className="platform-name platform-pathfinder">pathfinder</span>
+            <span className="platform-name platform-wuji">wuji</span>
+            <span className="platform-name platform-boom">boom</span>
+            <span className="platform-name platform-journey">journey</span>
         </div>
-      </div>
+    </div>
 
       <section className="section">
         <h2>Our Vision</h2>
diff --git a/style.css b/style.css
index 194b84d..4cb83e1 100644
--- a/style.css
+++ b/style.css
@@ -178,6 +178,8 @@ h2::before {
     animation: scroll 30s linear infinite;
     white-space: nowrap;
     will-change: transform;
+    width: fit-content;
+    padding-left: 4rem;
     -webkit-mask-image: linear-gradient(
         to right,
         transparent 0%,
@@ -201,6 +203,7 @@ h2::before {
     cursor: pointer;
     padding: 0.5rem 2rem;
     position: relative;
+    display: inline-block;
 }
 
 .platform-name:hover {
@@ -259,7 +262,7 @@ h2::before {
         transform: translateX(0);
     }
     100% {
-        transform: translateX(-100%);
+        transform: translateX(calc(-50% - 2rem));
     }
 }