Replace the remaining homepage placeholder illustrations with the final screenshot images that now exist in /wwwroot/images/home/.

This commit is contained in:
Nick Beckley 2026-06-15 20:24:38 +01:00
parent 53a3d31544
commit 63d7dcc87f
3 changed files with 25 additions and 24 deletions

View File

@ -178,11 +178,13 @@
</div> </div>
<div class="problem-section reveal-section"> <div class="problem-section reveal-section">
<div class="problem-visual visual-threads" aria-hidden="true"> <div class="problem-visual problem-visual--image visual-threads">
<span>Set up</span> <img class="home-feature-image"
<span>Complicate</span> src="~/images/home/plot-thread-map.webp"
<span>Reveal</span> width="1200"
<span>Pay off</span> height="434"
loading="lazy"
alt="Plot threads visualised across scenes in PlotDirector" />
</div> </div>
<div class="problem-copy"> <div class="problem-copy">
<p class="marketing-eyebrow">Keeping plot threads organised</p> <p class="marketing-eyebrow">Keeping plot threads organised</p>
@ -192,11 +194,13 @@
</div> </div>
<div class="problem-section problem-section--reverse reveal-section"> <div class="problem-section problem-section--reverse reveal-section">
<div class="problem-visual visual-series" aria-hidden="true"> <div class="problem-visual problem-visual--image visual-series">
<span>Book I</span> <img class="home-feature-image"
<span>Book II</span> src="~/images/home/series-dashboard.webp"
<span>Book III</span> width="1200"
<span>Prequel</span> height="596"
loading="lazy"
alt="Series dashboard showing books, progress and writing statistics" />
</div> </div>
<div class="problem-copy"> <div class="problem-copy">
<p class="marketing-eyebrow">Managing series and multiple books</p> <p class="marketing-eyebrow">Managing series and multiple books</p>
@ -206,12 +210,13 @@
</div> </div>
<div class="problem-section reveal-section"> <div class="problem-section reveal-section">
<div class="problem-visual visual-flow" aria-hidden="true"> <div class="problem-visual problem-visual--image visual-flow">
<div class="flow-line"></div> <img class="home-feature-image"
<span style="--pos: 12%">Quiet</span> src="~/images/home/story-timeline.webp"
<span style="--pos: 34%">Tension</span> width="1200"
<span style="--pos: 61%">Break</span> height="660"
<span style="--pos: 84%">Climax</span> loading="lazy"
alt="Story pacing and emotional timeline visualisation in PlotDirector" />
</div> </div>
<div class="problem-copy"> <div class="problem-copy">
<p class="marketing-eyebrow">Understanding pacing and emotional flow</p> <p class="marketing-eyebrow">Understanding pacing and emotional flow</p>

View File

@ -2357,17 +2357,12 @@ a:focus-visible {
.home-image-card img, .home-image-card img,
.home-feature-image { .home-feature-image {
display: block; display: block;
max-width: 100%;
width: 100%; width: 100%;
height: auto; height: auto;
} }
.home-hero-image {
aspect-ratio: 4 / 3;
}
.home-hero-image img { .home-hero-image img {
height: 100%;
object-fit: contain;
background: #f8f1e7; background: #f8f1e7;
} }
@ -2732,9 +2727,10 @@ a:focus-visible {
} }
.problem-visual--image .home-feature-image { .problem-visual--image .home-feature-image {
grid-column: 1 / -1;
justify-self: center;
border-radius: 18px; border-radius: 18px;
box-shadow: 0 18px 42px rgba(31, 42, 68, 0.12); box-shadow: 0 18px 42px rgba(31, 42, 68, 0.12);
object-fit: contain;
} }
.visual-plot { .visual-plot {

File diff suppressed because one or more lines are too long