Use rainbow text

Author: WilliamRagstad

src/components/Features1.jsx

@@ -23,7 +23,7 @@ export const Features1 = () => {
 						<div className="mx-auto lg:mx-auto w-11/12 sm:w-4/5 md:w-3/4 lg:w-unset">
 							<span className="block-subtitle">Embrace Innovation</span>
 							<h2 className="mt-6 mb-8 text-4xl lg:text-5xl block-big-title">
-								Unlike any <span className="retro-text-gradient font-extrabold">tech</span> you used before
+								Unlike any <span className="rainbow-text-gradient font-extrabold">tech</span> you used before
 							</h2>
 							<p className="mb-10 text-secondaryText leading-loose">
 								Discover a new level of data analysis with our innovative and

src/components/Features2.jsx

@@ -38,7 +38,7 @@ export const Features2 = () => (
 							Join the Movement
 						</span>
 						<h2 className="mt-6 mb-8 text-4xl lg:text-5xl block-big-title">
-							Awesome <span className="retro-text-gradient font-extrabold">Open-Source</span> Community
+							Awesome <span className="rainbow-text-gradient font-extrabold">Open-Source</span> Community
 						</h2>
 						<p className="mb-12 text-secondaryText leading-loose">
 							Developers from all over the world contribute to our open-source

src/layouts/Layout.astro

@@ -45,10 +45,10 @@ const { title } = Astro.props;
       }
 
       .rainbow-text-gradient {
-        --scaling: 200%;
+        --scaling: 500%;
         background: linear-gradient(
           90deg,
-          #ff3b3b,
+          /* #ff3b3b,
           #ff803b,
           #ffff3b,
           #80ff3b,
@@ -60,16 +60,24 @@ const { title } = Astro.props;
           #803bff,
           #ff3bff,
           #ff3b80,
-          #ff3b3b
+          #ff3b3b */
+            #ef505c,
+          #9c45e4,
+          #185fee,
+          #2ff5ec,
+          #11d68b,
+          #ffcc16,
+          #ef505c
         );
         background-size: var(--scaling) 100%;
         background-position: 0 0;
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
-        animation: rainbow 10s linear infinite;
+        animation: rainbow 35s linear infinite;
         display: inline-block;
-        filter: drop-shadow(0 0 0.5px #fff) drop-shadow(0 1px 1.5px #fff)
-          brightness(1.5);
+        /* filter: drop-shadow(0 0 0.5px #fff) drop-shadow(0 1px 1.5px #fff)
+          brightness(1.5); */
+        filter: saturate(0.6) brightness(1.3) drop-shadow(0 1px 1.5px #000);
       }
 
       @keyframes rainbow {