Update main page display sections

.gitignore

@@ -22,10 +22,9 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
-*.env
 
 # Coverage
 Coverage/
 
 #Env file
-.env
+.env

src/components/passivegamecard.tsx

@@ -9,14 +9,20 @@ import type { PassiveGameData } from '../types/game'
 
 type Props = {
     game: PassiveGameData
+    rank?: number
 }
 
-export default function PassiveGameCard({ game }: Props) {
+export default function PassiveGameCard({ game, rank }: Props) {
     const isOnSale =
         game.salePercent !== undefined && game.salePercent > 0 && game.salePercent <= 100
 
     return (
-        <Card className="passiveGameCard">
+        <Card className={`passiveGameCard${rank === undefined ? '' : ' rankedPassiveGameCard'}`}>
+            {rank !== undefined && (
+                <span className="passiveGameCardRank" aria-label={`Rank ${rank}`}>
+                    #{rank}
+                </span>
+            )}
             <CardActionArea
                 className="passiveGameCardAction"
                 component={Link}
@@ -37,7 +43,7 @@ export default function PassiveGameCard({ game }: Props) {
                     <div className="GamePrice">
                         <div className="GameSale">{isOnSale ? `-${game.salePercent}%` : ''}</div>
                         <Typography className="passiveGameCardPrice" component="p">
-                            {game.price.toFixed(2)}
+                            {game.price.toFixed(2)} $
                         </Typography>
                     </div>
                 </CardContent>

src/css/mainpage.css

@@ -5,38 +5,324 @@
 }
 
 .main-page {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: 2rem;
     width: min(calc(100% - 3rem), 68rem);
     margin: 0 auto;
     padding: 1.75rem 0 clamp(2rem, 8vh, 4rem);
 }
 
-.featured-games-title {
+.main-page-section-heading {
     display: flex;
-    align-items: center;
     min-height: 2.5rem;
-    margin: 0 0 1.5rem;
+    align-items: center;
+    margin-bottom: 0.9rem;
+}
+
+.main-page-section {
+    margin-inline: 3.25rem;
+}
+
+.main-page-section-heading h1,
+.main-page-section-heading h2 {
+    margin: 0;
     font-size: 2rem;
     line-height: 1.2;
 }
 
+.main-page-section-content.MuiCard-root {
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    padding: clamp(1rem, 3vw, 1.75rem);
+}
+
 .featured-games-grid {
+    display: grid;
+    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
+    grid-template-rows: repeat(2, auto);
+    align-items: stretch;
+    column-gap: 1.25rem;
+    row-gap: 0.875rem;
+}
+
+.featured-games-primary {
+    grid-row: span 2;
+    min-height: 0;
+}
+
+.featured-game-card {
+    position: relative;
+    width: 100%;
+    min-width: 0;
+}
+
+.featured-game-card > .passiveGameCard {
+    width: 100%;
+}
+
+.featured-games-primary > .passiveGameCard {
+    height: 100%;
+    min-height: 0;
+}
+
+.featured-games-primary.featured-game-card .passiveGameCardAction {
+    flex: 1 1 auto;
+    height: 100%;
+    min-height: 0;
+}
+
+.featured-games-primary.featured-game-card .passiveGameCardMedia {
+    flex: 1 1 auto;
+    min-height: 0;
+    height: auto;
+}
+
+.featured-game-card .passiveGameCardContent.MuiCardContent-root {
+    padding-bottom: 0.25rem;
+}
+
+.genre-controls {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 1.25rem;
+}
+
+.genre-autocomplete {
+    width: min(100%, var(--genre-filter-width, 11rem));
+}
+
+.genre-autocomplete .MuiOutlinedInput-root {
+    background-color: var(--primary-background-color);
+}
+
+.genre-autocomplete .MuiOutlinedInput-notchedOutline {
+    border-color: var(--primary-component-color);
+}
+
+.genre-autocomplete .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline,
+.genre-autocomplete .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
+    border-color: var(--primary-accent-color);
+}
+
+.genre-games-row {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
+    align-items: stretch;
+    gap: 1.25rem;
+}
+
+.genre-see-more {
+    display: flex;
+    justify-content: flex-end;
+    margin: -0.5rem 0 0.5rem;
+}
+
+.genre-see-more .MuiButton-root {
+    color: var(--primary-text-color);
+}
+
+.genre-carousel-controls {
+    display: flex;
+    width: 100%;
+    gap: 1rem;
+    margin-top: 1.5rem;
+}
+
+.genre-carousel-controls .MuiButton-root {
+    flex: 1 1 0;
+    min-width: 0;
+    min-height: 3.5rem;
+    background-color: var(--primary-component-color);
+    color: var(--primary-text-color);
+    font-size: 1.125rem;
+}
+
+.genre-carousel-controls .MuiButton-root:hover {
+    background-color: var(--primary-accent-color);
+}
+
+.genre-carousel-controls .MuiButton-root.Mui-disabled {
+    background-color: var(--secondary-component-color);
+    color: rgb(0 0 0 / 45%);
+}
+
+.popular-reviews-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    align-items: stretch;
     gap: 1.25rem;
 }
 
+.popular-review {
+    display: flex;
+    flex-direction: column;
+    min-height: 10rem;
+    padding: 1.1rem;
+    border: 1px solid var(--primary-component-color);
+    border-radius: 0.75rem;
+    background-color: var(--primary-background-color);
+    box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
+}
+
+.popular-review-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 1rem;
+}
+
+.popular-review-game,
+.popular-review-author {
+    display: block;
+}
+
+.popular-review-game {
+    font-size: 1.1rem;
+    font-weight: 700;
+}
+
+.popular-review-author {
+    margin-top: 0.25rem;
+    color: #46545b;
+    font-size: 0.85rem;
+}
+
+.popular-review-rating {
+    flex: 0 0 auto;
+    padding: 0.35rem 0.55rem;
+    border-radius: 0.5rem;
+    background-color: var(--secondary-component-color);
+    font-size: 0.85rem;
+    font-weight: 700;
+}
+
+.popular-review-text {
+    margin: 1rem 0;
+    line-height: 1.55;
+}
+
+.popular-review-link {
+    width: fit-content;
+    margin-top: auto;
+    color: #005d8c;
+    font-weight: 700;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 0.2em;
+}
+
+.popular-review-link:focus-visible {
+    outline: 2px solid var(--secondary-background-color);
+    outline-offset: 3px;
+}
+
+@media (max-width: 56rem) {
+    .genre-games-row {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .featured-games-grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        grid-template-rows: auto;
+        row-gap: 1.25rem;
+    }
+
+    .featured-games-primary {
+        grid-column: 1 / -1;
+        grid-row: auto;
+        height: auto;
+    }
+
+    .featured-games-primary > .passiveGameCard {
+        height: auto;
+    }
+
+    .featured-games-primary.featured-game-card .passiveGameCardAction {
+        flex: 0 0 auto;
+        height: auto;
+        min-height: 0;
+    }
+
+    .featured-games-primary.featured-game-card .passiveGameCardMedia {
+        flex: 0 0 auto;
+        aspect-ratio: 16 / 9;
+    }
+
+    .featured-games-primary.featured-game-card .passiveGameCardAction {
+        flex: 0 0 auto;
+        height: auto;
+        min-height: 0;
+    }
+
+    .featured-games-primary.featured-game-card .passiveGameCardMedia {
+        flex: 0 0 auto;
+    }
+}
+
+@media (min-width: 56.01rem) {
+    .featured-game-secondary .passiveGameCardMedia {
+        aspect-ratio: 2 / 1;
+    }
+
+    .featured-game-secondary .passiveGameCardContent.MuiCardContent-root {
+        flex-basis: 3.5rem;
+        padding-inline: 0.75rem;
+    }
+
+    .featured-game-secondary .GameTitle {
+        height: 1.8em;
+        font-size: 1rem;
+    }
+
+    .featured-game-secondary .passiveGameCardTitle {
+        font-size: 1rem;
+    }
+
+    .featured-game-secondary .GamePrice {
+        flex-direction: row;
+        align-items: center;
+        gap: 0.5rem;
+    }
+}
+
 @media (max-width: 43.75rem) {
     .main-page {
         width: min(calc(100% - 2rem), 32rem);
-        padding: 1.25rem 0 clamp(1.5rem, 6vh, 2.5rem);
+        padding: clamp(1.5rem, 6vh, 2.5rem) 0;
+    }
+
+    .main-page-section {
+        margin-inline: 0;
     }
 
-    .featured-games-title {
+    .main-page-section-heading h1,
+    .main-page-section-heading h2 {
         font-size: 1.75rem;
     }
 
     .featured-games-grid {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .featured-game-card > .passiveGameCard {
+        width: min(100%, 22rem);
+        margin-inline: auto;
+    }
+
+    .genre-games-row {
+        grid-template-columns: 1fr;
+    }
+
+    .popular-reviews-grid {
         grid-template-columns: 1fr;
-        gap: 0.875rem;
+    }
+}
+
+@media (max-width: 30rem) {
+    .genre-autocomplete {
+        width: 100%;
     }
 }