v1.3.13 - API Landing page

package.json

@@ -1,7 +1,7 @@
 {
   "name": "alphaday",
   "private": true,
-  "version": "1.3.12",
+  "version": "1.3.13",
   "homepage": ".",
   "scripts": {
     "dev": "vite",
@@ -10,6 +10,7 @@
     "build-sitemap": "node scripts/build-sitemap.js"
   },
   "dependencies": {
+    "lucide-react": "^0.400.0",
     "node-fetch": "2",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",

src/App.jsx

@@ -6,6 +6,7 @@ import HomeContainer from "./containers/HomeContainer";
 import { CookieProvider } from "./utils/CookieContext";
 import PrivacyPolicyPage from "./pages/privacy-policy";
 import MobilePage from "./pages/mobile-app";
+import ApiPage from "./pages/api";
 import { useEffect } from "react";
 import { navigateToHash } from "./utils/navigateToHash";
 
@@ -16,6 +17,7 @@ function removeTrailingBackSlash(site) {
 const otherPages = {
   [CONFIG.privacyPolicy]: <PrivacyPolicyPage />,
   [CONFIG.mobile]: <MobilePage />,
+  [CONFIG.api]: <ApiPage />,
 };
 
 function App() {

src/assets/css/alphaday.css

@@ -17,6 +17,54 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer components {
+  .btn-primary {
+    background-color: #faa202;
+    color: #121212;
+    font-weight: 600;
+    transition:
+      transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+      background-color 0.2s ease;
+  }
+  .btn-primary:hover {
+    transform: translateY(-1px);
+    background-color: #ffb84d;
+  }
+}
+
+@layer utilities {
+  .hide-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+  .hide-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+}
+
+/* ---- API landing page scoped styles ---- */
+.api-root {
+  position: relative;
+}
+
+/* Noise overlay — scoped to .api-root so it doesn't affect other pages */
+.api-root::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  pointer-events: none;
+  opacity: 0.04;
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
+}
+
+.api-root .interactive-element {
+  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+.api-root .interactive-element:hover {
+  transform: translateY(-1px);
+}
+
 @font-face {
   font-family: titling;
   font-weight: 400;

src/components/navbar/Navbar.jsx

@@ -89,10 +89,10 @@ function Navbar({ isPrivacyPolicy, isMobile }) {
               </div>
               <div ref={element} className="scroll-hide absolute mb-1 flex">
                 <LaunchAppButton />
-                <div className="flex ml-2 gap-2">
+                {/* <div className="flex ml-2 gap-2">
                   <AppleStoreButton type="sm" disabled />
                   <GooglePlayButton type="sm" disabled />
-                </div>
+                </div> */}
               </div>
             </div>
           </div>

src/components/ui/CodeBlock.jsx

@@ -0,0 +1,93 @@
+import { useState } from "react";
+import { Check, Copy } from "lucide-react";
+
+export function CodeBlock({
+  code,
+  language = "bash",
+  className = "",
+  annotated = false,
+}) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      // no-op
+    }
+  };
+
+  const getHighlightedContent = () => {
+    if (language === "bash") {
+      return code.split("\n").map((line, i) => {
+        const parts = line.split(/(curl|https:\/\/[^\s"'<]+)/g);
+        return (
+          <div key={i} className="leading-relaxed">
+            {line.startsWith("$") && (
+              <span className="text-text-muted mr-3 select-none">$</span>
+            )}
+            {parts.map((part, j) => {
+              if (part === "curl")
+                return (
+                  <span key={j} className="text-primary font-semibold">
+                    {part}
+                  </span>
+                );
+              if (part.startsWith("https://"))
+                return (
+                  <span key={j} className="text-success">
+                    {part}
+                  </span>
+                );
+              return <span key={j}>{part.replace(/^\$ /, "")}</span>;
+            })}
+          </div>
+        );
+      });
+    }
+
+    if (language === "json") {
+      const formatted = code
+        .replace(/"([^"]+)":/g, '<span class="text-primary">"$1"</span>:')
+        .replace(/: ("[^"]+")/g, ': <span class="text-success">$1</span>')
+        .replace(/(true|false|null)/g, '<span class="text-danger">$1</span>')
+        .replace(/: ([0-9]+)/g, ': <span class="text-blue-400">$1</span>');
+
+      return <div dangerouslySetInnerHTML={{ __html: formatted }} />;
+    }
+
+    return <div>{code}</div>;
+  };
+
+  return (
+    <div
+      className={`relative group rounded-2xl overflow-hidden bg-surface-light border border-surface-border text-[13px] font-mono shadow-xl ${className}`}
+    >
+      <div className="absolute right-4 top-4 z-10 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+        <button
+          onClick={handleCopy}
+          className="flex items-center justify-center p-2 rounded-lg bg-surface border border-surface-border text-text-muted hover:text-text hover:bg-surface-light transition-all"
+          title="Copy code"
+        >
+          {copied ? (
+            <Check size={16} className="text-success" />
+          ) : (
+            <Copy size={16} />
+          )}
+        </button>
+      </div>
+
+      <div
+        className={`p-5 overflow-x-auto hide-scrollbar ${annotated ? "mt-2" : ""}`}
+      >
+        <pre className="text-text/90 whitespace-pre-wrap">
+          {getHighlightedContent()}
+        </pre>
+      </div>
+
+      <div className="absolute right-0 top-0 bottom-0 w-8 bg-gradient-to-l from-surface-light to-transparent pointer-events-none md:hidden" />
+    </div>
+  );
+}

src/config.js

@@ -9,6 +9,7 @@ const CONFIG = {
     link: "https://www.youtube.com/embed/ThCd_W3rK_8",
   },
   mobile: "/mobile",
+  api: "/api",
   appStore: {
     apple: "https://apps.apple.com/us/app/alphaday/id1581443943",
     google: "https://play.google.com/store/apps/details?id=com.alphaday",