From be0a53760ab6e5e166f5c2f21f844df7a7b72dae Mon Sep 17 00:00:00 2001
From: Dex404 <x@keshawa.me>
Date: Tue, 2 Apr 2024 14:15:36 +0000
Subject: [PATCH] fix: Slider Fade

---
 app/page.tsx                 | 34 ++++++++++++++++++++++++++++++++++
 components/Slider/Slider.tsx |  2 +-
 tailwind.config.js           |  2 +-
 3 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index e77023f..ebac0ad 100644
--- a/app/page.tsx
+++ b/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>
diff --git a/components/Slider/Slider.tsx b/components/Slider/Slider.tsx
index 17b688e..27ecdc0 100644
--- a/components/Slider/Slider.tsx
+++ b/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}>
diff --git a/tailwind.config.js b/tailwind.config.js
index cdfd3cd..5adb7fa 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -34,7 +34,7 @@ module.exports = {
         vizoleG2: "#F5887A",
         vizoleG3: "#F5887A",
         homeBg: "#0f172a",
-        homeBg2: "#0c1324"
+        homeBg2: "#111d38"
       },
       fontFamily: {
         body: [