Merge pull request #1 from One-Click-Auth/kdiffin

added card working and WIP code section in showcase

package.json

@@ -10,6 +10,9 @@
   },
   "dependencies": {
     "@radix-ui/react-dropdown-menu": "^2.0.5",
+    "@react-three/drei": "9.32.4",
+    "@react-three/fiber": "8.8.7",
+    "@react-three/postprocessing": "2.6.2",
     "@types/node": "20.6.0",
     "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",
@@ -23,16 +26,15 @@
     "postcss": "8.4.29",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-syntax-highlighter": "^15.5.0",
     "tailwind-merge": "^1.14.0",
     "tailwindcss": "3.3.3",
     "tailwindcss-animate": "^1.0.7",
-    "typescript": "5.2.2",
     "three": "0.145.0",
-    "@react-three/drei": "9.32.4",
-    "@react-three/fiber": "8.8.7",
-    "@react-three/postprocessing": "2.6.2"
+    "typescript": "5.2.2"
   },
   "devDependencies": {
+    "@types/react-syntax-highlighter": "^15.5.7",
     "@types/three": "0.144.0"
   }
 }

src/components/Showcase.tsx

@@ -9,10 +9,11 @@ import {
   RedirectButton,
   ShowcaseSocialConnectionCard,
 } from "./showcase/Components";
+import CodeTabs from "./showcase/CodeTabs";
 
 function Showcase() {
   return (
-    <div className="flex flex-col items-center justify-center p-6 sm:p-12">
+    <div className="flex flex-col  items-center justify-center p-6 sm:p-12">
       <div className="space-between flex max-w-[1110px] flex-col items-center gap-12 lg:flex-row xl:gap-48">
         <div className="flex flex-col gap-6 ">
           <p className="text-5xl sm:text-[80px] ">
@@ -189,24 +190,28 @@ function Showcase() {
               </div>
             }
             description={
-              <div className=" w-72 text-base font-normal leading-snug text-white">
+              <div className="w-[292px] mt-2 h-[38px] text-white text-base font-normal  leading-snug">
                 Complete user Token Management solution all in caching servers.
               </div>
             }
             className="  showcase-5 col-span-full w-full lg:col-span-6  "
           >
-            <div className="showcase-3-width relative -mx-10    flex h-[340px] w-full items-center justify-center bg-transparent ">
-              <div className="h">
-                <span className="text-[32px] font-medium leading-7 text-white">
-                  Never
-                </span>
-                <span className="text-[32px] font-light leading-7 text-white">
-                  {" "}
-                  more than a{" "}
-                </span>
-                <span className="text-[32px] font-medium leading-7 text-white">
-                  Class
-                </span>
+            <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="bottom-0 absolute right-0">
+                <div className="">
+                  <span className="text-[32px] font-medium leading-7 text-white">
+                    Never
+                  </span>
+                  <span className="text-[32px] font-light leading-7 text-white">
+                    {" "}
+                    more than a{" "}
+                  </span>
+                  <span className="text-[32px] font-medium leading-7 text-white">
+                    Class
+                  </span>
+                </div>
+
+                <CodeTabs />
               </div>
             </div>
 

src/components/showcase/CodeTabs.tsx

@@ -0,0 +1,76 @@
+import React, { useState } from "react";
+import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
+
+interface CodeTabsProps {}
+
+const CodeTabs: React.FC<CodeTabsProps> = () => {
+  const [activeTab, setActiveTab] = useState("python");
+
+  const handleTabClick = (tab: string) => {
+    setActiveTab(tab);
+  };
+
+  const getCode = () => {
+    switch (activeTab) {
+      case "python":
+        return `
+          def trust_authx():
+              # Python code
+              pass
+        `;
+      case "javascript":
+        return `
+          function trustAuth() {
+              // JavaScript code
+          }
+        `;
+      case "go":
+        return `
+          func TrustAuthX() {
+              // Go code
+          }
+        `;
+      default:
+        return "";
+    }
+  };
+
+  return (
+    <div className="">
+      <div className="flex space-x-2">
+        <button
+          className={`px-4 py-2 rounded ${
+            activeTab === "python" ? "bg-gray-300" : "bg-gray-200"
+          }`}
+          onClick={() => handleTabClick("python")}
+        >
+          Trustauthx.py
+        </button>
+        <button
+          className={`px-4 py-2 rounded ${
+            activeTab === "javascript" ? "bg-gray-300" : "bg-gray-200"
+          }`}
+          onClick={() => handleTabClick("javascript")}
+        >
+          Auth.js
+        </button>
+        <button
+          className={`px-4 py-2 rounded ${
+            activeTab === "go" ? "bg-gray-300" : "bg-gray-200"
+          }`}
+          onClick={() => handleTabClick("go")}
+        >
+          Trustauthx.go
+        </button>
+      </div>
+
+      <div className="mt-4">
+        <SyntaxHighlighter language="javascript" showLineNumbers>
+          {getCode()}
+        </SyntaxHighlighter>
+      </div>
+    </div>
+  );
+};
+
+export default CodeTabs;

src/pages/demo-code.tsx

@@ -0,0 +1,12 @@
+import CodeTabs from "../components/showcase/CodeTabs";
+import React from "react";
+
+function REAL() {
+  return (
+    <div>
+      <CodeTabs />
+    </div>
+  );
+}
+
+export default REAL;