Step up landing page

zuplo · Aug 20, 2024 · 6da9bd9 · 6da9bd9
1 parent be4fad6
commit 6da9bd9
Show file tree

Hide file tree

Showing 4 changed files with 172 additions and 4 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/website/package.json b/website/package.json
@@ -9,18 +9,19 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "next": "14.2.5",
     "react": "^18",
     "react-dom": "^18",
-    "next": "14.2.5"
+    "react-simple-typewriter": "5.0.1"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.5",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
-    "eslint": "^8",
-    "eslint-config-next": "14.2.5"
+    "typescript": "^5"
   }
 }
diff --git a/website/src/app/globals.css b/website/src/app/globals.css
@@ -2,6 +2,11 @@
 @tailwind components;
 @tailwind utilities;
 
+html,
+body {
+  height: 100%;
+}
+
 :root {
   --foreground-rgb: 0, 0, 0;
   --background-start-rgb: 255, 240, 251;

diff --git a/website/src/app/test/page.tsx b/website/src/app/test/page.tsx
@@ -0,0 +1,147 @@
+"use client";
+
+import Image from "next/image";
+import { useEffect, useState } from "react";
+import { Typewriter } from "react-simple-typewriter";
+import "../globals.css";
+
+const Test = () => {
+  const [state, setState] = useState(false);
+
+  useEffect(() => {
+    document.onclick = (e) => {
+      if (e.target instanceof HTMLElement && !e.target.closest(".menu-btn")) {
+        setState(false);
+      }
+    };
+  }, []);
+
+  const Brand = () => (
+    <div className="flex items-center justify-between py-5 md:block">
+      <a href="#">
+        <img
+          src="/zudoku-logo-full-dark.svg"
+          width={120}
+          height={50}
+          alt="Float UI logo"
+        />
+      </a>
+    </div>
+  );
+
+  return (
+    <div className="h-full bg-gray-900">
+      <header>
+        <nav
+          className={`pb-5 md:text-sm ${state ? "absolute z-20 top-0 inset-x-0 bg-gray-800 rounded-xl mx-2 mt-2 md:mx-0 md:mt-0 md:relative md:bg-transparent" : ""}`}
+        >
+          <div className="gap-x-14 items-center max-w-screen-xl mx-auto px-4 md:flex md:px-8 flex justify-between">
+            <Brand />
+            <div className="flex gap-2">
+              <div className="flex gap-1">
+                <Image
+                  src="/zuplo.svg"
+                  alt="Zuplo Logo"
+                  className="invert dark:invert-0"
+                  width={100}
+                  height={16}
+                  priority
+                />
+              </div>
+              <div>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width={24}
+                  height={24}
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    fill="currentColor"
+                    d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"
+                  ></path>
+                </svg>
+              </div>
+              <div>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width={24}
+                  height={24}
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    fill="currentColor"
+                    d="M19.27 5.33C17.94 4.71 16.5 4.26 15 4a.1.1 0 0 0-.07.03c-.18.33-.39.76-.53 1.09a16.1 16.1 0 0 0-4.8 0c-.14-.34-.35-.76-.54-1.09c-.01-.02-.04-.03-.07-.03c-1.5.26-2.93.71-4.27 1.33c-.01 0-.02.01-.03.02c-2.72 4.07-3.47 8.03-3.1 11.95c0 .02.01.04.03.05c1.8 1.32 3.53 2.12 5.24 2.65c.03.01.06 0 .07-.02c.4-.55.76-1.13 1.07-1.74c.02-.04 0-.08-.04-.09c-.57-.22-1.11-.48-1.64-.78c-.04-.02-.04-.08-.01-.11c.11-.08.22-.17.33-.25c.02-.02.05-.02.07-.01c3.44 1.57 7.15 1.57 10.55 0c.02-.01.05-.01.07.01c.11.09.22.17.33.26c.04.03.04.09-.01.11c-.52.31-1.07.56-1.64.78c-.04.01-.05.06-.04.09c.32.61.68 1.19 1.07 1.74c.03.01.06.02.09.01c1.72-.53 3.45-1.33 5.25-2.65c.02-.01.03-.03.03-.05c.44-4.53-.73-8.46-3.1-11.95c-.01-.01-.02-.02-.04-.02M8.52 14.91c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.84 2.12-1.89 2.12m6.97 0c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.83 2.12-1.89 2.12"
+                  ></path>
+                </svg>
+              </div>
+            </div>
+          </div>
+        </nav>
+      </header>
+      <section className="relative">
+        <div className="relative z-10 max-w-screen-xl mx-auto px-4 py-28 md:px-8">
+          <div className="space-y-8 max-w-4xl mx-auto text-center">
+            <h2 className="text-4xl text-white font-extrabold mx-auto md:text-5xl">
+              API documentation
+              <br />
+              should be{" "}
+              <span className="text-[#ff00bd]">
+                <Typewriter
+                  cursor
+                  loop
+                  words={[
+                    "free",
+                    "simple",
+                    "adaptable",
+                    "open source",
+                    "flexible",
+                    "pluggable",
+                  ]}
+                />
+              </span>
+            </h2>
+            <p className="max-w-2xl mx-auto text-gray-400">
+              Zudoku is an open-source, OpenAPI powered, highly customizable API
+              documentation framework for building quality developer
+              experiences.
+            </p>
+            <form
+              onSubmit={(e) => e.preventDefault()}
+              className="justify-center items-center gap-x-3 sm:flex"
+            >
+              <input
+                type="text"
+                placeholder="https://example.io/openapi.json"
+                className="w-full max-w-[500px] px-3 py-2.5 text-gray-400 bg-gray-700 outline-none rounded-lg shadow"
+              />
+              <button className="flex items-center justify-center gap-x-2 py-2.5 px-4 mt-3 w-full text-sm text-white font-medium bg-[#ff00bd] hover:bg-[#ff00bd]/90 active:bg-[#ff00bd]/90 duration-150 rounded-lg sm:mt-0 sm:w-auto">
+                Get started
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                  className="w-5 h-5"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M2 10a.75.75 0 01.75-.75h12.59l-2.1-1.95a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1l2.1-1.95H2.75A.75.75 0 012 10z"
+                    clipRule="evenodd"
+                  />
+                </svg>
+              </button>
+            </form>
+          </div>
+        </div>
+        <div
+          className="absolute inset-0 m-auto max-w-xs h-[400px] blur-[118px] sm:max-w-md md:max-w-lg"
+          style={{
+            background:
+              "linear-gradient(106.89deg, rgba(192, 132, 252, 0.11) 15.73%, rgba(14, 165, 233, 0.41) 15.74%, rgba(232, 121, 249, 0.26) 56.49%, rgba(79, 70, 229, 0.4) 115.91%)",
+          }}
+        ></div>
+      </section>
+    </div>
+  );
+};
+
+export default Test;