styling changes and removed footer from /pokemon

src/pages/404.astro

@@ -4,6 +4,7 @@ import NavItems from '../components/NavItems.astro';
 import NavBar from '../components/NavBar.astro';
 export const prerender = false;
 import pokedexList from '../data/pokedex.json';
+import Footer from '../components/Footer.astro';
 
 const searchParams = Astro.url.searchParams;
 const query = searchParams.get('q') || '*';
@@ -72,5 +73,5 @@ const pokemonName = pokemon?.Name || "Unknown Pokémon";
     });
     </script>
     </div>
-
+    <Footer slot="footer" />
 </Layout>

src/pages/contact.astro

@@ -2,6 +2,7 @@
 import Layout from '../layouts/Main.astro';
 import NavItems from '../components/NavItems.astro';
 import NavBar from '../components/NavBar.astro';
+import Footer from '../components/Footer.astro';
 export const prerender = false;
 ---
 <Layout>
@@ -36,5 +37,6 @@ export const prerender = false;
             </form>
         </div>
     </div>
+    <Footer slot="footer" />
 </Layout>
 

src/pages/index.astro

@@ -2,6 +2,7 @@
 import Layout from '../layouts/Main.astro';
 import NavItems from '../components/NavItems.astro';
 import NavBar from '../components/NavBar.astro';
+import Footer from '../components/Footer.astro';
 export const prerender = false;
 import { Waitlist as WaitlistAstro } from '@clerk/astro/components'
 ---
@@ -28,4 +29,5 @@ import { Waitlist as WaitlistAstro } from '@clerk/astro/components'
             <WaitlistAstro />
         </div>
     </div>
+    <Footer slot="footer" />
 </Layout>

src/pages/partials/card-modal.astro

@@ -114,7 +114,7 @@ const ebaySearchUrl = (card: any) => {
             <div class="row g-4">
                 <div class="col-sm-12 col-md-3">
                     <p class="text-secondary">{card?.set?.setName}</p>
-                    <div class="position-relative"><img src={`/cards/${card?.productId}.jpg`} class="card-image w-100 img-fluid rounded-3" alt={card?.productName} onerror="this.onerror=null;this.src='/cards/noImage.webp'" onclick="copyImage(this); dataLayer.push({'event': 'copiedImage'});"><span class="position-absolute bottom-0 start-0 d-inline"><SetIcon set={card?.set?.setCode} /></span><span class="position-absolute top-0 end-0 d-inline"><EnergyIcon energy={card?.energyType} /></span><span class="rarity-icon-large position-absolute bottom-0 end-0 d-inline"><RarityIcon rarity={card?.rarityName} /></span></div>
+                    <div class="position-relative"><img src={`/cards/${card?.productId}.jpg`} class="card-image w-100 img-fluid rounded-4" alt={card?.productName} onerror="this.onerror=null;this.src='/cards/default.jpg'" onclick="copyImage(this); dataLayer.push({'event': 'copiedImage'});"><span class="position-absolute bottom-0 start-0 d-inline"><SetIcon set={card?.set?.setCode} /></span><span class="position-absolute top-0 end-0 d-inline"><EnergyIcon energy={card?.energyType} /></span><span class="rarity-icon-large position-absolute bottom-0 end-0 d-inline"><RarityIcon rarity={card?.rarityName} /></span></div>
                     <div class="d-flex flex-row justify-content-between mt-2">
                     <div class="p text-secondary">Illustrator: {card?.Artist}</div>
                     </div>

src/pages/partials/cards.astro

@@ -111,7 +111,7 @@ const facetNames = (name:string) => {
             <div class="inventory-label pt-2">+/-</div>
         </div>
         <div hx-get={`/partials/card-modal?cardId=${card.cardId}`} hx-target="#cardModal" hx-trigger="click" data-bs-toggle="modal" data-bs-target="#cardModal" onclick="const cardTitle = this.querySelector('#cardImage').getAttribute('alt'); dataLayer.push({'event': 'virtualPageview', 'pageUrl': this.getAttribute('hx-get'), 'pageTitle': cardTitle, 'previousUrl': '/pokemon'});">
-            <img src={`/cards/${card.productId}.jpg`} alt={card.productName} id="cardImage" loading="lazy" decoding="async" class="img-fluid rounded-3 mb-2 card-image image-grow w-100" onerror="this.onerror=null;this.src='/cards/noImage.webp'"/>
+            <img src={`/cards/${card.productId}.jpg`} alt={card.productName} id="cardImage" loading="lazy" decoding="async" class="img-fluid rounded-4 mb-2 card-image image-grow w-100" onerror="this.onerror=null;this.src='/cards/default.jpg'"/>
         </div>
         <div class="row row-cols-5 gx-1 price-row mb-2">
         {card.prices