BIG styling changes/fixes. Additions like slight animations, etc

components/modal.tsx

@@ -1,3 +1,4 @@
+import { forwardRef, MutableRefObject, useEffect, useState } from "react";
 import Image from "next/image";
 import { Pie } from "react-chartjs-2";
 import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
@@ -5,7 +6,6 @@ import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
 ChartJS.register(ArcElement, Tooltip, Legend);
 
 import ClientOnlyPortal from "./ClientOnlyPortal";
-import { forwardRef, MutableRefObject, useEffect } from "react";
 
 interface ModalProps {
   modalOpen: boolean
@@ -14,6 +14,7 @@ interface ModalProps {
 }
 
 const Modal = forwardRef<HTMLDivElement, ModalProps>(({modalOpen, toggleModal, card}, ref) => {
+  const [randomQuote, setRandomQuote] = useState("");
   const data = {
     labels: ["Power", "Toughness"],
     datasets: [
@@ -34,6 +35,7 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(({modalOpen, toggleModal, c
   };
 
   useEffect(() => {
+    fetch('https://api.quotable.io/random').then( res => res.json() ).then( quote => setRandomQuote(`${quote.content} — ${quote.author}`));
     if( (ref as MutableRefObject<HTMLDivElement>).current ) {
       (ref as MutableRefObject<HTMLDivElement>).current.scrollTo(0, 0);
     }
@@ -48,17 +50,17 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(({modalOpen, toggleModal, c
         }`}
       >
         <>
-          <button
-            className="fixed flex justify-center items-center left-1/2 -translate-x-2/4 -translate-y-2/4 top-12 z-50 text-2xl"
-            aria-label="Close the modal"
-            title="Close Modal"
-            onClick={() => {
-              toggleModal(false);
-              document.body.classList.remove("prevent-scroll");
-            }}>
-            <span className="material-symbols-outlined modal-close">cancel</span>
-          </button>
           <div className="flex justify-center items-center relative">
+            <button
+              className={`fixed flex justify-center items-center left-1/2 -translate-x-2/4 -translate-y-2/4 ${ modalOpen ? "top-12" : "top-100" } z-50 text-2xl`}
+              aria-label="Close the modal"
+              title="Close Modal"
+              onClick={() => {
+                toggleModal(false);
+                document.body.classList.remove("prevent-scroll");
+              }}>
+              <span className="material-symbols-outlined modal-close">cancel</span>
+            </button>
             <div
               className="bg-cover bg-no-repeat blur-sm rounded-t-3xl w-full h-96"
               style={{
@@ -67,7 +69,7 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(({modalOpen, toggleModal, c
               }}
             ></div>
             <p className="absolute font-bold italic w-1/2 text-center modal-flavor-text">
-              {card.flavor_text}
+              {card.flavor_text || randomQuote}
             </p>
           </div>
           <div className="container flex p-8">

pages/index.tsx

@@ -7,7 +7,19 @@ import { debounce } from 'lodash';
 
 import Modal from '../components/modal';
 
-export default function Home() {
+export async function getStaticProps(context) {
+
+  const res = await fetch(`https://api.scryfall.com/cards/search?q=${encodeURIComponent('knight')}`);
+  const {data} = await res.json();
+
+  return {
+    props: {
+      initialCards: data
+    }
+  }
+}
+
+export default function Home(props) {
 
   const [search, setSearch] = useState('');
   const [selectedCard, setSelectedCard] = useState({});
@@ -43,10 +55,8 @@ export default function Home() {
       .catch( err => {
         console.log(err);
         setLoading(false);
-        if( err.code === 'not_found' ) {
+        setErrorMessage(err.details);
-          setErrorMessage(err.details);
+        setError(true);
-          setError(true);
-        }
       } );
     }
   };
@@ -55,7 +65,6 @@ export default function Home() {
 
   useEffect(() => {
     invoke('greet', { name: 'World' }).then(console.log).catch(console.error);
-
     return () => {
       debounceSearch.cancel();
     }
@@ -80,7 +89,18 @@ export default function Home() {
 
       <main className="container my-4">
         { cards.length === 0 ?
-          <div>Please search for a card</div>
+          <div className="text-center search-placeholder">
+            <div className="card-container h-48 relative">
+              {props.initialCards.map( (card: any) => 
+              <Image
+                className="card" 
+                key={card.id} 
+                alt={`${card.name} Card`} src={card.image_uris?.png || "https://via.placeholder.com/150" } width={100} height={100} />
+              ).slice(0, 5)
+              }
+            </div>
+            <h2>Please search for a card!</h2>
+          </div>
           :
           <section className="flex flex-wrap justify-center items-center">
             {loading && search !== "" ? 

styles/globals.css

@@ -42,6 +42,71 @@
   top: 0;
 }
 
+.search-placeholder .card-container > .card {
+  @apply rounded-md;
+  position: absolute; 
+  width: 120px;
+  height: auto;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  transition: transform 0.2s ease-in-out;
+}
+
+/*
+  CARD POSITIONING
+*/
+.search-placeholder .card:nth-child(1) {
+  left: 50%;
+  transform: rotate(-2deg) translate(-95%, -55%);
+}
+.search-placeholder .card:nth-child(2) {
+  left: 50%;
+  transform: rotate(-1.2deg) translate(-85%, -55%);
+}
+.search-placeholder .card:nth-child(3) {
+  left: 55%;
+  transform: rotate(-1deg) translate(-90%, -55%);
+}
+.search-placeholder .card:nth-child(4) {
+  left: 60%;
+  transform: translate(-85%, -53%);
+}
+.search-placeholder .card:nth-child(5) {
+  left: 65%;
+  transform: rotate(2deg) translate(-80%, -50%);
+}
+/*
+  END: CARD POSITIONING
+*/
+
+/*
+  CARD POSITIONING ON HOVER OF CONTAINER
+*/
+.card-container:hover .card:nth-child(1) {
+  left: 50%;
+  transform: rotate(-2deg) translate(-105%, -54%);
+}
+.card-container:hover .card:nth-child(2) {
+  left: 50%;
+  transform: rotate(-1.2deg) translate(-90%, -56%);
+}
+.card-container:hover .card:nth-child(3) {
+  left: 55%;
+  transform: rotate(-1deg) translate(-88%, -54%);
+}
+.card-container:hover .card:nth-child(4) {
+  left: 60%;
+  transform: translate(-82%, -55%);
+}
+.card-container:hover .card:nth-child(5) {
+  left: 65%;
+  transform: rotate(2deg) translate(-78%, -55%);
+}
+/*
+  END: CARD POSITIONING ON HOVER OF CONTAINER
+*/
+
 .spinner {
   display: inline-block;
   width: 80px;