From df9a3f8089e94217168046e72207a18b5c734884 Mon Sep 17 00:00:00 2001
From: 1ilit <lilitmousheghyan@gmail.com>
Date: Thu, 18 Jan 2024 09:21:30 +0200
Subject: [PATCH] Add framer motion

---
 package-lock.json         | 39 +++++++++++++++++++++++++++++++++++++++
 package.json              |  1 +
 src/animations/Reveal.jsx | 30 ++++++++++++++++++++++++++++++
 src/pages/LandingPage.jsx | 30 +++++++++++++++++++-----------
 4 files changed, 89 insertions(+), 11 deletions(-)
 create mode 100644 src/animations/Reveal.jsx

diff --git a/package-lock.json b/package-lock.json
index ec9886b..0449a40 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "dexie": "^3.2.4",
         "dexie-react-hooks": "^1.1.7",
         "file-saver": "^2.0.5",
+        "framer-motion": "^10.18.0",
         "html-to-image": "^1.11.11",
         "jsonschema": "^1.4.1",
         "jspdf": "^2.5.1",
@@ -563,6 +564,21 @@
         "react-dom": ">=16.0.0"
       }
     },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+      "optional": true,
+      "dependencies": {
+        "@emotion/memoize": "0.7.4"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
+      "optional": true
+    },
     "node_modules/@esbuild/android-arm": {
       "version": "0.19.9",
       "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.9.tgz",
@@ -3103,6 +3119,29 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "10.18.0",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.18.0.tgz",
+      "integrity": "sha512-oGlDh1Q1XqYPksuTD/usb0I70hq95OUzmL9+6Zd+Hs4XV0oaISBa/UUMSjYiq6m8EUF32132mOJ8xVZS+I0S6w==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "optionalDependencies": {
+        "@emotion/is-prop-valid": "^0.8.2"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
diff --git a/package.json b/package.json
index 4c3508e..92bc695 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "dexie": "^3.2.4",
     "dexie-react-hooks": "^1.1.7",
     "file-saver": "^2.0.5",
+    "framer-motion": "^10.18.0",
     "html-to-image": "^1.11.11",
     "jsonschema": "^1.4.1",
     "jspdf": "^2.5.1",
diff --git a/src/animations/Reveal.jsx b/src/animations/Reveal.jsx
new file mode 100644
index 0000000..5ef2a40
--- /dev/null
+++ b/src/animations/Reveal.jsx
@@ -0,0 +1,30 @@
+import { useRef, useEffect } from "react";
+import { motion, useInView, useAnimation } from "framer-motion";
+
+export default function Reveal({ children }) {
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: true });
+  const mainControls = useAnimation();
+
+  useEffect(() => {
+    if (isInView) {
+      mainControls.start("visible");
+    }
+  }, [isInView, mainControls]);
+
+  return (
+    <div ref={ref}>
+      <motion.div
+        variants={{
+          hidden: { opacity: 0, y: 75 },
+          visible: { opacity: 1, y: 0 },
+        }}
+        initial="hidden"
+        animate={mainControls}
+        transition={{ duration: 0.6 }}
+      >
+        {children}
+      </motion.div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/pages/LandingPage.jsx b/src/pages/LandingPage.jsx
index 0586f73..fa53b03 100644
--- a/src/pages/LandingPage.jsx
+++ b/src/pages/LandingPage.jsx
@@ -4,6 +4,8 @@ import { IconCrossStroked } from "@douyinfe/semi-icons";
 import SimpleCanvas from "../components/SimpleCanvas"
 import Navbar from "../components/Navbar";
 import { diagram } from "../data/heroDiagram"
+import Reveal from "../animations/Reveal";
+
 export default function LandingPage() {
   const [showSurvey, setShowSurvey] = useState(true);
 
@@ -34,26 +36,32 @@ export default function LandingPage() {
             <SimpleCanvas diagram={diagram} zoom={0.85} />
           </div>
           <div className="absolute left-0 top-[50%] translate-y-[-50%] p-8 text-zinc-800 text-center">
-            <div className="text-4xl font-bold tracking-wide">
-              <h1 className="py-1 bg-gradient-to-r from-slate-700 from-10% via-slate-500 to-slate-700 inline-block text-transparent bg-clip-text">
-                Draw, Copy, and Paste
-              </h1>
-            </div>
-            <div className="text-lg font-semibold mt-3">
-              Free, simple, and intuitive database design tool and SQL generator.
-            </div>
+            <Reveal>
+              <div className="text-4xl font-bold tracking-wide">
+                <h1 className="py-1 bg-gradient-to-r from-slate-700 from-10% via-slate-500 to-slate-700 inline-block text-transparent bg-clip-text">
+                  Draw, Copy, and Paste
+                </h1>
+              </div>
+              <div className="text-lg font-semibold mt-3">
+                Free, simple, and intuitive database design tool and SQL generator.
+              </div>
+            </Reveal>
             <div className="mt-4 flex gap-4 justify-center font-semibold">
-              <button className="bg-white shadow-lg px-9 py-2 rounded border border-zinc-200 hover:bg-zinc-100">
+              <button className="bg-white shadow-lg px-9 py-2 rounded border border-zinc-200 hover:bg-zinc-100 transition-all duration-200" onClick={() => document
+                .getElementById("learn-more")
+                .scrollIntoView({ behavior: "smooth" })}>
                 Learn more
               </button>
-              <Link to="/editor" className="bg-slate-700 text-white px-4 py-2 rounded shadow-lg hover:bg-slate-600">
+              <Link to="/editor" className="bg-slate-700 text-white px-4 py-2 rounded shadow-lg hover:bg-slate-600 transition-all duration-200">
                 Try it for yourself
               </Link>
             </div>
           </div>
         </div>
       </div>
-      <div>hi</div>
+      <div id="learn-more">
+        more stuff
+      </div>
     </div>
   );
 }