Add framer motion

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>
+  );
+}

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>
   );
 }