bleh

src/pages/Landing/Landing.module.css

@@ -10,18 +10,3 @@
   height: 40vmin;
   pointer-events: none;
 }
-
-@media (prefers-reduced-motion: no-preference) {
-  .app_logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/pages/Landing/index.jsx

@@ -2,27 +2,33 @@ import React, { useEffect } from "react"
 import { useSearchParams } from "react-router-dom";
 import styles from "./Landing.module.css"
 import logo from '../../assets/icons/logo.svg';
-import { showSuccessToastNotification } from "../../components/ToastNotification";
+import { showInfoToastNotification, showSuccessToastNotification } from "../../components/ToastNotification";
+import AnimatedSVG from "../../components/AnimatedSVG";
 
 
 const Landing = () => {
-	// eslint-disable-next-line no-unused-vars
-	const [searchParams, setSearchParams] = useSearchParams();
-	useEffect(() => {
-		if (searchParams.get("login") === "success") {
-			showSuccessToastNotification("Logged in!");
-		}
-	}, [searchParams]);
-	return (
-		<header className={styles.app_header}>
-			<img src={logo} className={styles.app_logo} alt="logo" />
-			<h1>Organize your Spotify playlists as a graph.</h1>
-			<h5>Features:</h5>
-			<ul>
-				<li>blah 1</li>
-			</ul>
-		</header>
-	)
+  // eslint-disable-next-line no-unused-vars
+  const [searchParams, setSearchParams] = useSearchParams();
+  useEffect(() => {
+    if (searchParams.get("login") === "success") {
+      showSuccessToastNotification("Logged in!");
+    } else if (searchParams.get("logout") === "success") {
+      showInfoToastNotification("Logged out.");
+    }
+  }, [searchParams]);
+  return (
+    <>
+      <header className={styles.app_header}>
+        <AnimatedSVG />
+        <h1>organize your Spotify playlists as a graph</h1>
+      </header>
+      <ul>
+        <li>DAG graph of your playlists</li>
+        <li>Link them to sync tracks</li>
+        <li>Periodic syncing</li>
+      </ul>
+    </>
+  )
 }
 
-export default Landing
+export default Landing