Text carousel added

Workly/src/App.css

@@ -12,6 +12,8 @@
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+
+  --primary-text-color: black;
 }
 
 

Workly/src/pages/Home/Home.Modules.css

@@ -42,9 +42,11 @@
   margin-top: 1rem;
   overflow-wrap: break-word; 
   text-align: center;
-  width: 77%;
+  width: 81%;
+  font-size: 1.2rem;
 }
-.Con2 .Description .bold-text
+
+.bold-text
 {
   font-weight:bold;
 }
@@ -71,10 +73,57 @@
 }
 
 
-.ion--paper-plane {
+.Start .icon {
   width: 1rem;
   height: 1rem;
   background-repeat: no-repeat;
   background-size: 100% 100%;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M473 39.05a24 24 0 0 0-25.5-5.46L47.47 185h-.08a24 24 0 0 0 1 45.16l.41.13l137.3 58.63a16 16 0 0 0 15.54-3.59L422 80a7.07 7.07 0 0 1 10 10L226.66 310.26a16 16 0 0 0-3.59 15.54l58.65 137.38c.06.2.12.38.19.57c3.2 9.27 11.3 15.81 21.09 16.25h1a24.63 24.63 0 0 0 23-15.46L478.39 64.62A24 24 0 0 0 473 39.05'/%3E%3C/svg%3E");
-}
\ No newline at end of file
+}
+
+
+
+
+
+.TrustedCompanies
+{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.TrustedCompanies .Text {
+  color: black;
+}
+
+.TrustedCompanies .Companies
+{
+  background-color: black;
+  width: 80%;
+  height: 3rem;
+  border-radius: 0.4rem;
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+  user-select: none;
+  align-items: center;
+  font-weight: bold;
+  font-size: 0.8rem;
+}
+
+
+.Companies ul {
+  list-style: none;
+  display: flex;
+  justify-content: space-between;
+  flex-shrink: 0;
+  gap: 2rem;
+  min-width: 100%;
+  animation: scroll 35s linear infinite;
+}
+
+@keyframes scroll {
+  to {
+    transform: translateX(-100%);
+  }
+}

Workly/src/pages/Home/Home.tsx

@@ -15,10 +15,56 @@ const Home = () => {
                     <div className="Description">
                         <p><span className="bold-text">WORKLY.</span> streamlines the job application process by bringing everything into one central system, making it easier for both applicants and employers.</p>
                     </div>
-                    <button class="Start">START NOW<span class="ion--paper-plane"></span></button>
+                    <button className="Start">START NOW<span className="icon"></span></button>
                 </div>
                 <div className="Con3"></div>
             </div>
+            <div className="TrustedCompanies">
+                <div className="Text">
+                    <p>Trusted by over <span className="bold-text">500+</span> companies all over the world</p>
+                </div>
+                <div className="Companies">
+                    <ul>
+                        <span className="Company">DANSKE BANK</span>
+                        <span className="Company">SYSTEMATIC</span>
+                        <span className="Company">UBER</span>
+                        <span className="Company">MOBILEPAY</span>
+                        <span className="Company">VERTICA</span>
+                        <span className="Company">BANK DATA</span>
+                        <span className="Company">XFLOW</span>
+                        <span className="Company">DELEGATE</span>
+                        <span className="Company">AFRY</span>
+                        <span className="Company">NORMAL</span>
+                        <span className="Company">SALLING GROUP</span>
+                    </ul>
+                    <ul aria-hidden="true">
+                        <span className="Company">DANSKE BANK</span>
+                        <span className="Company">SYSTEMATIC</span>
+                        <span className="Company">UBER</span>
+                        <span className="Company">MOBILEPAY</span>
+                        <span className="Company">VERTICA</span>
+                        <span className="Company">BANK DATA</span>
+                        <span className="Company">XFLOW</span>
+                        <span className="Company">DELEGATE</span>
+                        <span className="Company">AFRY</span>
+                        <span className="Company">NORMAL</span>
+                        <span className="Company">SALLING GROUP</span>
+                    </ul>
+                    <ul aria-hidden="true">
+                        <span className="Company">DANSKE BANK</span>
+                        <span className="Company">SYSTEMATIC</span>
+                        <span className="Company">UBER</span>
+                        <span className="Company">MOBILEPAY</span>
+                        <span className="Company">VERTICA</span>
+                        <span className="Company">BANK DATA</span>
+                        <span className="Company">XFLOW</span>
+                        <span className="Company">DELEGATE</span>
+                        <span className="Company">AFRY</span>
+                        <span className="Company">NORMAL</span>
+                        <span className="Company">SALLING GROUP</span>
+                    </ul>
+                </div>
+            </div>
         </>
     );
 };