Update landing page

drawdb-io · Aug 7, 2024 · 7ad1059 · 7ad1059
1 parent 9ed89df
commit 7ad1059
Show file tree

Hide file tree

Showing 7 changed files with 351 additions and 184 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
     "react-hotkeys-hook": "^4.4.1",
     "react-i18next": "^14.1.1",
     "react-router-dom": "^6.21.0",
+    "react-tweet": "^3.2.1",
     "url": "^0.11.1",
     "usehooks-ts": "^3.1.0"
   },

diff --git a/src/assets/screenshot.png b/src/assets/screenshot.png
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -9,14 +9,14 @@ export default function Navbar() {
 
   return (
     <>
-      <div className="py-5 px-8 sm:px-4 flex justify-between items-center">
-        <div className="flex items-center">
+      <div className="py-4 px-12 sm:px-4 flex justify-between items-center">
+        <div className="flex items-center justify-between w-full">
           <Link to="/">
-            <img src={logo} alt="logo" className="me-2 h-[48px] sm:h-[32px]" />
+            <img src={logo} alt="logo" className="h-[48px] sm:h-[32px]" />
           </Link>
-          <div className="md:hidden flex space-x-6 ml-6">
+          <div className="md:hidden flex gap-12">
             <Link
-              className="text-lg font-semibold hover:text-indigo-700"
+              className="text-lg font-semibold hover:text-sky-800 transition-colors duration-300"
               onClick={() =>
                 document
                   .getElementById("features")
@@ -27,46 +27,46 @@ export default function Navbar() {
             </Link>
             <Link
               to="/editor"
-              className="text-lg font-semibold hover:text-indigo-700"
+              className="text-lg font-semibold hover:text-sky-800 transition-colors duration-300"
             >
               Editor
             </Link>
             <Link
               to="/templates"
-              className="text-lg font-semibold hover:text-indigo-700"
+              className="text-lg font-semibold hover:text-sky-800 transition-colors duration-300"
             >
               Templates
             </Link>
           </div>
-        </div>
-        <div className="md:hidden block space-x-3">
-          <a
-            title="Jump to Github"
-            className="px-3 py-2 bg-zinc-100 hover:opacity-60 transition-all duration-300 rounded-full text-2xl"
-            href="https://github.com/drawdb-io/drawdb"
-            target="_blank"
-            rel="noreferrer"
-          >
-            <i className="opacity-70 bi bi-github" />
-          </a>
-          <a
-            title="Follow us on X"
-            className="px-3 py-2 bg-zinc-100 hover:opacity-60 transition-all duration-300 rounded-full text-2xl"
-            href="https://x.com/drawDB_"
-            target="_blank"
-            rel="noreferrer"
-          >
-            <i className="opacity-70 bi bi-twitter-x" />
-          </a>
-          <a
-            title="Join the community on Discord"
-            className="px-3 py-2 bg-zinc-100 hover:opacity-60 transition-all duration-300 rounded-full text-2xl"
-            href="https://discord.gg/BrjZgNrmR6"
-            target="_blank"
-            rel="noreferrer"
-          >
-            <i className="opacity-70 bi bi-discord" />
-          </a>
+          <div className="md:hidden block space-x-3 ms-12">
+            <a
+              title="Jump to Github"
+              className="px-2 py-2 hover:opacity-60 transition-all duration-300 rounded-full text-2xl"
+              href="https://github.com/drawdb-io/drawdb"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <i className="opacity-70 bi bi-github" />
+            </a>
+            <a
+              title="Follow us on X"
+              className="px-2 py-2 hover:opacity-60 transition-all duration-300 rounded-full text-2xl"
+              href="https://x.com/drawDB_"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <i className="opacity-70 bi bi-twitter-x" />
+            </a>
+            <a
+              title="Join the community on Discord"
+              className="px-2 py-2 hover:opacity-60 transition-all duration-300 rounded-full text-2xl"
+              href="https://discord.gg/BrjZgNrmR6"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <i className="opacity-70 bi bi-discord" />
+            </a>
+          </div>
         </div>
         <button
           onClick={() => setOpenMenu((prev) => !prev)}

diff --git a/src/components/SimpleCanvas.jsx b/src/components/SimpleCanvas.jsx
@@ -28,7 +28,7 @@ function Table({ table, grab }) {
         // Required for onPointerLeave to trigger when a touch pointer leaves
         // https://stackoverflow.com/a/70976017/1137077
         e.target.releasePointerCapture(e.pointerId);
-        
+
         if (!e.isPrimary) return;
 
         grab(e);
@@ -197,7 +197,7 @@ export default function SimpleCanvas({ diagram, zoom }) {
 
   return (
     <svg
-      className="w-full h-full cursor-grab"
+      className="w-full h-full cursor-grab rounded-3xl"
       onPointerUp={(e) => e.isPrimary && releaseTable()}
       onPointerMove={(e) => e.isPrimary && moveTable(e)}
       onPointerLeave={(e) => e.isPrimary && releaseTable()}

diff --git a/src/index.css b/src/index.css
@@ -18,6 +18,15 @@
   }
 }
 
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+  border-color: #ffffff;
+}
+
 .semi-form-vertical .semi-form-field {
   margin: 0;
   padding-top: 8px !important;
@@ -125,3 +134,51 @@
   background-image: radial-gradient(rgb(118, 118, 209) 1px, white 1px);
   background-size: 20px 20px;
 }
+
+.sliding-vertical span {
+  animation: top-to-bottom 9s linear infinite 0s;
+  -ms-animation: top-to-bottom 9s linear infinite 0s;
+  -webkit-animation: top-to-bottom 9s linear infinite 0s;
+  opacity: 0;
+  overflow: hidden;
+  position: absolute;
+}
+
+.sliding-vertical span:nth-child(2) {
+  animation-delay: 3s;
+  -ms-animation-delay: 3s;
+  -webkit-animation-delay: 3s;
+}
+.sliding-vertical span:nth-child(3) {
+  animation-delay: 6s;
+  -ms-animation-delay: 6s;
+  -webkit-animation-delay: 6s;
+}
+
+@keyframes top-to-bottom {
+  0% {
+    opacity: 0;
+  }
+  5% {
+    opacity: 0;
+    transform: translateY(-18px);
+  }
+  10% {
+    opacity: 1;
+    transform: translateY(0px);
+  }
+  25% {
+    opacity: 1;
+    transform: translateY(0px);
+  }
+  30% {
+    opacity: 0;
+    transform: translateY(18px);
+  }
+  80% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0;
+  }
+}