tmiller/pokemon
1
0
Fork 1
Code Issues 4 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

dashboard/inventory styling, fixed contact layout with new branding, consolidated all inline styles to main.scss

Browse Source
This commit is contained in:
Zach Harding
2026-04-10 09:05:22 -04:00
parent 37b9d5c954
commit e7374ad182
8 changed files with 1103 additions and 1118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/Hero.astro
View File

@@ -9,7 +9,7 @@ import type { sign } from 'node:crypto'
<div class="hero-bg" aria-hidden="true"></div>
<div class="container py-5 py-md-6 position-relative">
<div class="row align-items-center g-5">
<div class="col-xl-6">
<div class="col-12 col-xl-6">
<p class="eyebrow text-purple-light mb-3">Pokémon Card Price Aggregator</p>
<h1 class="display-4 fw-bold lh-sm mb-4">
The home of</br>
@@ -39,13 +39,13 @@ import type { sign } from 'node:crypto'
<div class="col-xl-6 d-none d-xl-block" aria-hidden="true">
<div class="hero-cards-mockup">
<div class="mockup-card mockup-card--1 shadow-lg rounded-4">
<img class="img-fluid" src="/static/cards/124125.jpg" alt="Imakuni?'s Doduo - XY - Evolutions (EVO)" />
<img class="img-fluid" src="/static/cards/124125.jpg" alt="Sample Pokémon Card" />
</div>
<div class="mockup-card mockup-card--2 shadow-lg rounded-4">
<img class="img-fluid" src="/static/cards/88875.jpg" alt="Sabrina's Gengar - Gym Challenge (G2)" />
<img class="img-fluid" src="/static/cards/88875.jpg" alt="Sample Pokémon Card" />
</div>
<div class="mockup-card mockup-card--3 shadow-lg rounded-4">
<img class="img-fluid" src="/static/cards/567429.jpg" alt="Squirtle - SV07: Stellar Crown (SCR)" />
<img class="img-fluid" src="/static/cards/567429.jpg" alt="Sample Pokémon Card" />
</div>
<div class="price-chip price-chip--nm">NM <strong>$114.99</strong></div>
<div class="price-chip price-chip--lp">LP <strong>$85.66</strong></div>
@@ -53,4 +53,38 @@ import type { sign } from 'node:crypto'
</div>
</div>
</div>
</div>
</div>
<script is:inline>
// Your product image IDs
const productImages = [
"124125.jpg",
"88875.jpg",
"567429.jpg",
"88788.jpg",
"88789.jpg",
"88996.jpg",
"88997.jpg",
"189659.jpg",
"86745.jpg",
"517025.jpg",
"86911.jpg",
"87456.jpg",
"246733.jpg",
"567418.jpg",
"613917.jpg",
];
function getRandomImages(arr, count) {
const shuffled = [...arr].sort(() => 0.5 - Math.random());
return shuffled.slice(0, count);
}
const images = document.querySelectorAll(".mockup-card img");
const selectedImages = getRandomImages(productImages, images.length);
images.forEach((img, index) => {
img.src = `/static/cards/${selectedImages[index]}`;
});
</script>