remopved nested css

src/components/Showcase.tsx

@@ -196,7 +196,7 @@ function Showcase() {
             }
             className="  showcase-5 col-span-full w-full lg:col-span-6  "
           >
-            <div className="showcase-3-width relative gap-3 -mx-10    flex flex-col h-[360px] w-full items-center justify-center bg-transparent ">
+            <div className="showcase-3-width relative gap-3 -mx-10    flex flex-col h-[360px] w-full items-center justify-center z-10">
               <div className="bottom-0 absolute right-0">
                 <div className="">
                   <span className="text-[32px] font-medium leading-7 text-white">

src/components/showcase/CodeTabs.tsx

@@ -14,37 +14,37 @@ const CodeTabs: React.FC<CodeTabsProps> = () => {
     switch (activeTab) {
       case "python":
         return `
-          def trust_authx():
-              # Python code
-              pass
+def trust_authx():
+    # Python code
+    pass
         `;
       case "javascript":
         return `
-          function trustAuth() {
-              // JavaScript code
-          }
+function trustAuth() {
+  //js code
+}
         `;
       case "go":
         return `
-          func TrustAuthX() {
-              // Go code
-          }
+func TrustAuthX() {
+    // Go code
+}
         `;
       default:
         return "";
     }
   };
 
   return (
-    <div className="">
-      <div className="flex space-x-2">
+    <div className=" bg-black z-50 ">
+      <div className="flex space-x-2 pt-2 px-2">
         <button
           className={`px-4 py-2 rounded ${
             activeTab === "python" ? "bg-gray-300" : "bg-gray-200"
           }`}
           onClick={() => handleTabClick("python")}
         >
-          Trustauthx.py
+          TrustAuthx.py
         </button>
         <button
           className={`px-4 py-2 rounded ${
@@ -60,11 +60,11 @@ const CodeTabs: React.FC<CodeTabsProps> = () => {
           }`}
           onClick={() => handleTabClick("go")}
         >
-          Trustauthx.go
+          TrustAuthx.go
         </button>
       </div>
 
-      <div className="mt-4">
+      <div className="p-4">
         <SyntaxHighlighter language="javascript" showLineNumbers>
           {getCode()}
         </SyntaxHighlighter>

src/components/timeline/CarouselSlider.tsx

@@ -11,7 +11,10 @@ export default function Carousel({ children }: { children: React.ReactNode }) {
   return (
     <div className="carousel">
       {active > 0 && (
-        <button className="nav left" onClick={() => setActive((i) => i - 1)}>
+        <button
+          className="nav left-nav-carousel"
+          onClick={() => setActive((i) => i - 1)}
+        >
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="53"
@@ -36,7 +39,7 @@ export default function Carousel({ children }: { children: React.ReactNode }) {
             "--offset": (active - i) / 5,
             "--direction": Math.sign(active - i),
             "--abs-offset": Math.abs(active - i) / 3,
-            "pointerEvents": active === i ? "auto" : "none",
+            pointerEvents: active === i ? "auto" : "none",
             opacity: Math.abs(active - i) >= MAX_VISIBILITY ? "0" : "1",
             display: Math.abs(active - i) > MAX_VISIBILITY ? "none" : "block",
           }}
@@ -45,7 +48,10 @@ export default function Carousel({ children }: { children: React.ReactNode }) {
         </div>
       ))}
       {active < count - 1 && (
-        <button className="nav right" onClick={() => setActive((i) => i + 1)}>
+        <button
+          className="nav right-nav-carousel"
+          onClick={() => setActive((i) => i + 1)}
+        >
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="53"

src/styles/globals.css

@@ -36,16 +36,15 @@
     user-select: none;
     background: unset;
     border: unset;
-    &.left {
-      transform: translateX(-120%) translatey(-50%);
-    }
-
-    &.right {
-      right: 0;
-      transform: translateX(120%) translatey(-50%);
-    }
   }
 
+  .left-nav-carousel {
+    transform: translateX(-120%) translatey(-50%);
+  }
+  .right-nav-carousel {
+    right: 0;
+    transform: translateX(120%) translatey(-50%);
+  }
   :root {
     --background: 0 0% 100%;
     --foreground: 240 10% 3.9%;