bruh momentum

src/components/Slider/components/Feature/index.tsx

@@ -5,9 +5,9 @@ export const Feature = (props: IFeature) => {
     return (
         <div className="grid grid-cols-2">
             <div className="details">
-                <h1>{title}</h1>
+                <h1 className="background-clip font-display text-m-h1 sm:text-d-h2 text-3xl md:text-5xl lg:text-[length:64px] xl:text-d-j font-black"><span className="title">{title}</span></h1>
                 <div className="h-5" />
-                <h2>{description}</h2>
+                <h2 className="text-custom-gray-300">{description}</h2>
                 <button onClick={() => console.log(id)}>More Details</button>
             </div>
             <div className="image-holder">

src/components/Slider/index.tsx

@@ -70,7 +70,7 @@ export const Slider = () => {
                 })
                 : <div>Loading...</div>
             }
-            <div className="flex flex-row">
+            <div className="buttons flex flex-row">
                 <button onClick={() => handlePageChange(page - 1)}>
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6">
                         <path fillRule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-4.28 9.22a.75.75 0 000 1.06l3 3a.75.75 0 101.06-1.06l-1.72-1.72h5.69a.75.75 0 000-1.5h-5.69l1.72-1.72a.75.75 0 00-1.06-1.06l-3 3z" clipRule="evenodd" />

src/styles/tailwind.css

@@ -12,6 +12,17 @@
 }
 
 @layer utilities {
+    .background-clip {
+        -webkit-background-clip: text;
+    }
+
+    .title {
+        -webkit-text-fill-color: transparent;
+        background-image: linear-gradient(90deg,#f093fb 0,#f5576c);
+        -webkit-background-clip: text;
+        cursor: auto;
+    }
+
     .slideshow {
         height: 24vw;
         position: relative;
@@ -22,12 +33,19 @@
         flex-direction: row;
         color: white;
         height: 24vw;
-        margin-left: 25vw;
-        margin-right: 25vw;
+        margin-left: 35vw;
+        margin-right: 35vw;
         transition: left 300ms ease-in-out;
         left: 0;
     }
 
+    .buttons {
+        position: absolute;
+        margin-left: 30vw;
+        margin-right: 30vw;
+        bottom: 0;
+    }
+
     .details { 
         margin-top: 3vw;
         width: 23vw;
@@ -44,7 +62,7 @@
         left: -2vw;
         top: -2.5vw;
         position: absolute;
-        width: 30vw;
+        width: 20vw;
     }
 
     .before {