ready for initial launch

styling fixes, info pages, screencaps,

src/pages/Landing/Landing.module.css

@@ -1,12 +1,35 @@
-.app_header {
+.landing_wrapper {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   margin-right: 10vw;
+  gap: var(--mb-2);
 }
 
-.app_logo {
-  height: 40vmin;
-  pointer-events: none;
+.landing_header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.landing_content_wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: var(--mb-2);
+}
+
+.landing_content {
+  text-align: justify;
+  list-style-type: none;
+}
+
+.landing_links {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
 }

src/pages/Landing/index.tsx

@@ -1,11 +1,12 @@
 import React, { useEffect } from "react";
-import { useSearchParams } from "react-router-dom";
+import { Link, useSearchParams } from "react-router-dom";
 import styles from "./Landing.module.css";
 import {
   showInfoToastNotification,
   showSuccessToastNotification,
 } from "../../components/ToastNotification/index.tsx";
-import AnimatedSVG from "../../components/AnimatedSVG/index.tsx";
+// import AnimatedSVG from "../../components/AnimatedSVG/index.tsx";
+import { FaGithub } from "react-icons/fa";
 
 const Landing = (): React.ReactNode => {
   const [searchParams] = useSearchParams();
@@ -17,17 +18,41 @@ const Landing = (): React.ReactNode => {
     }
   }, [searchParams]);
   return (
-    <>
-      <header className={styles.app_header}>
-        <AnimatedSVG />
-        <h1>organize your Spotify playlists as a graph</h1>
+    <div className={styles.landing_wrapper}>
+      <header className={styles.landing_header}>
+        {/* <AnimatedSVG size={192} /> */}
+        <div className={styles.landing_content_wrapper}>
+          <video height={320} width={320} autoPlay loop muted playsInline>
+            <source
+              src={`${process.env["PUBLIC_URL"]}/landing-gifc.mp4`}
+              type="video/mp4"
+            />
+          </video>
+          <video height={320} width={480} autoPlay loop muted playsInline>
+            <source
+              src={`${process.env["PUBLIC_URL"]}/landing-gif-2c.mp4`}
+              type="video/mp4"
+            />
+          </video>
+        </div>
+        <h2>organize your Spotify playlists as a graph</h2>
       </header>
-      <ul>
-        <li>DAG graph of your playlists</li>
-        <li>Link them to sync tracks</li>
-        <li>Periodic syncing</li>
-      </ul>
-    </>
+      <div className={styles.landing_content_wrapper}>
+        <ul className={styles.landing_content}>
+          <li>📊 Visualize your playlists as a connected graph</li>
+          <li>🔗 Link playlists together to keep them in sync</li>
+          <li>🔄 Fill songs from linked playlists</li>
+          <li>✂️ Prune songs that don't belong</li>
+          <li>🔜 More features on the way!</li>
+        </ul>
+      </div>
+      <div className={styles.landing_links}>
+        Check it out - &nbsp;
+        <Link to="https://github.com/20kaushik02/spotify-manager-web">
+          <FaGithub size={36} />
+        </Link>
+      </div>
+    </div>
   );
 };