fix: Slider Fade

app/page.tsx

@@ -62,6 +62,40 @@ export default function Web() {
                   <h2 className="bg-gradient-to-r from-slate-400 via-white to-slate-400 text-transparent bg-clip-text" >Our Mission in Motion</h2>
                 </div>
                 <h3 className="mr-90 text-slate-300">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dignissimos, totam culpa officia ad esse</h3>
+                <div>
+                  <ul className="grid w-1/3 md:grid-cols-1">
+                  <div className="pt-2 mt-5">
+                    <li>
+                      <input type="radio" id="item01" name="items" value="item-01" className="hidden peer" required />
+                      <label htmlFor="item01" className="inline-flex items-center justify-between w-full p-2 text-gray-500 bg-transparent border border-gray-200 rounded-lg cursor-pointer dark:hover:text-gray-300 dark:border-gray-700 dark:peer-checked:text-blue-500 peer-checked:border-blue-600 peer-checked:text-blue-600 hover:text-gray-600 hover:bg-homeBg2 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700">
+                      <div className="block">
+                        <div className="w-full">Section 01</div>
+                      </div>
+                      </label> 
+                    </li>
+                    </div>
+                    <div className="pt-2">
+                    <li>
+                      <input type="radio" id="item02" name="items" value="item-02" className="hidden peer" required />
+                      <label htmlFor="item02" className="inline-flex items-center justify-between w-full p-2 text-gray-500 bg-transparent border border-gray-200 rounded-lg cursor-pointer dark:hover:text-gray-300 dark:border-gray-700 dark:peer-checked:text-blue-500 peer-checked:border-blue-600 peer-checked:text-blue-600 hover:text-gray-600 hover:bg-homeBg2 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700">
+                      <div className="block">
+                        <div className="w-full">Section 02</div>
+                      </div>
+                      </label> 
+                    </li>
+                    </div>
+                    <div className="pt-2">
+                    <li>
+                      <input type="radio" id="item03" name="items" value="item-03" className="hidden peer" required />
+                      <label htmlFor="item03" className="inline-flex items-center justify-between w-full p-2 text-gray-500 bg-transparent border border-gray-200 rounded-lg cursor-pointer dark:hover:text-gray-300 dark:border-gray-700 dark:peer-checked:text-blue-500 peer-checked:border-blue-600 peer-checked:text-blue-600 hover:text-gray-600 hover:bg-homeBg2 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700">
+                      <div className="block">
+                        <div className="w-full">Section 03</div>
+                      </div>
+                      </label> 
+                    </li>
+                    </div>
+                  </ul>
+                </div>
               </div>
             </div>
           </div>

components/Slider/Slider.tsx

@@ -28,7 +28,7 @@ export const InfiniteSlider = () => {
   return (
     // bg-gradient-to-r from-black to-transparent
     //   <div className="relative m-auto w-full overflow-hidden bg-transparent before:absolute before:left-0 before:top-0 before:z-[2] before:h-full before:w-[100px] before:bg-[linear-gradient(to_right,homeBg_0%,homeBg_100%)] before:content-[''] after:absolute after:right-0 after:top-0 after:z-[2] after:h-full after:w-[100px] after:-scale-x-100 after:bg-[linear-gradient(to_right,homeBg_0%,transparent)] after:content-['']">
-    <div className="before:opacity relative m-auto w-full overflow-hidden bg-homeBg bg-blend-screen before:absolute before:left-0 before:top-0 before:z-[2] before:h-full before:w-[100px] before:bg-[linear-gradient(to_right,homeBg2,transparent)] before:content-[''] after:absolute after:right-0 after:top-0 after:z-[2] after:h-full after:w-[100px] after:-scale-x-100 after:bg-[linear-gradient(to_right,bg-[#0f172a],transparent)] after:content-['']">
+    <div className="before:opacity relative m-auto w-full overflow-hidden bg-homeBg bg-blend-screen before:absolute before:left-0 before:top-0 before:z-[2] before:h-full before:w-[100px] relative before:bg-gradient-to-r from-homeBg to-transparent before:content-[''] after:absolute after:right-0 after:top-0 after:z-[2] after:h-full after:w-[100px] after:-scale-x-100 after:bg-gradient-to-r from-homeBg to-transparent after:content-['']">
       <div className="flex w-[calc(250px*10)] animate-infinite-slider">
         {LOGOS.map((logo, index) => (
           <div className="slide flex w-[125px] items-center justify-center" key={index}>

tailwind.config.js

@@ -34,7 +34,7 @@ module.exports = {
         vizoleG2: "#F5887A",
         vizoleG3: "#F5887A",
         homeBg: "#0f172a",
-        homeBg2: "#0c1324"
+        homeBg2: "#111d38"
       },
       fontFamily: {
         body: [