Home page: replace Where to Next card grid with a featured-study card plus an Explore list; v2.34.0
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
nmemmertandClaude Sonnet 5.5 committed
1 parent
b04a8b30cd
commit
b48a81a00c
4 files changed
+58
-87
No files matched your search
Generated
+2
-2
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "siteforge",
|
||||
"version": "2.33.2",
|
||||
"version": "2.34.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "siteforge",
|
||||
"version": "2.33.2",
|
||||
"version": "2.34.0",
|
||||
"dependencies": {
|
||||
"@aws-sdk/client-s3": "^3.1135.0",
|
||||
"@dnd-kit/core": "^6.3.1",
|
||||
|
||||
+1
-1
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "siteforge",
|
||||
"private": true,
|
||||
"version": "2.33.2",
|
||||
"version": "2.34.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
|
||||
+37
-68
@@ -1567,70 +1567,6 @@
|
||||
padding: 4.5rem 0;
|
||||
}
|
||||
|
||||
.home-jump-head {
|
||||
text-align: center;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.home-jump-head .section-heading {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.home-jump-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.home-jump-card {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
background: linear-gradient(180deg, rgba(20, 20, 18, 0.95), rgba(11, 11, 10, 0.95));
|
||||
border: 1px solid rgba(201, 168, 76, 0.2);
|
||||
border-radius: 14px;
|
||||
padding: 1.1rem 1.15rem;
|
||||
transition: transform 180ms, border-color 180ms, background 180ms;
|
||||
}
|
||||
|
||||
.home-jump-card:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: rgba(201, 168, 76, 0.45);
|
||||
background: linear-gradient(180deg, rgba(28, 27, 23, 0.98), rgba(14, 14, 12, 0.98));
|
||||
}
|
||||
|
||||
.home-jump-card h3 {
|
||||
margin: 0 0 0.35rem;
|
||||
font-family: var(--brand-font-heading);
|
||||
color: var(--brand-warm-white);
|
||||
font-size: 1.28rem;
|
||||
}
|
||||
|
||||
.home-jump-card p {
|
||||
margin: 0;
|
||||
font-family: var(--brand-font-body);
|
||||
color: var(--brand-muted);
|
||||
line-height: 1.55;
|
||||
font-size: 0.97rem;
|
||||
}
|
||||
|
||||
.home-jump-card--featured {
|
||||
border-color: rgba(201, 168, 76, 0.38);
|
||||
background: linear-gradient(180deg, rgba(201, 168, 76, 0.1), rgba(12, 12, 11, 0.96));
|
||||
}
|
||||
|
||||
.home-jump-card--featured:hover {
|
||||
border-color: rgba(201, 168, 76, 0.55);
|
||||
background: linear-gradient(180deg, rgba(201, 168, 76, 0.16), rgba(14, 14, 12, 0.98));
|
||||
}
|
||||
|
||||
.home-jump-featured-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 0.45rem;
|
||||
}
|
||||
|
||||
.home-jump-new-tag {
|
||||
display: inline-block;
|
||||
padding: 0.12rem 0.48rem;
|
||||
@@ -7645,10 +7581,6 @@ a.study-track-card:hover {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.home-jump-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -13935,3 +13867,40 @@ a.study-track-card:hover {
|
||||
}
|
||||
.btn-primary:focus-visible,
|
||||
.consent-btn:focus-visible { outline: 2px solid #f0d276; outline-offset: 3px; }
|
||||
|
||||
/* ── Home: featured study + ways in ── */
|
||||
.section-home-jump { padding: 3.5rem 0; }
|
||||
.home-ways { max-width: 1100px; display: grid; grid-template-columns: 1.25fr 1fr; gap: 2rem; align-items: stretch; }
|
||||
.home-ways--list-only { grid-template-columns: minmax(0, 560px); justify-content: center; }
|
||||
.home-feature {
|
||||
display: flex; flex-direction: column; justify-content: flex-end; min-height: 320px;
|
||||
padding: 2.2rem; border-radius: 16px; text-decoration: none; color: inherit;
|
||||
border: 1px solid rgba(201, 168, 76, 0.4);
|
||||
background: radial-gradient(circle at 85% 15%, rgba(201, 168, 76, 0.35), transparent 55%), linear-gradient(160deg, #1f1b0e, #0f0e08);
|
||||
transition: border-color 200ms, transform 200ms;
|
||||
}
|
||||
.home-feature:hover { border-color: rgba(201, 168, 76, 0.75); transform: translateY(-2px); }
|
||||
.home-feature:hover .home-feature-btn { background: #f0d276; transform: translateY(-3px); box-shadow: 0 8px 22px rgba(201, 168, 76, 0.55), 0 0 0 3px rgba(240, 210, 118, 0.28); }
|
||||
.home-feature-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.8rem; }
|
||||
.home-feature-eyebrow { font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brand-gold); }
|
||||
.home-feature h3 { font-family: var(--brand-font-heading); font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 0 0 0.6rem; color: #f4e9c6; }
|
||||
.home-feature p { color: var(--brand-muted); margin: 0 0 1.4rem; line-height: 1.55; font-size: 0.97rem; }
|
||||
.home-feature-btn { align-self: flex-start; margin-top: auto; }
|
||||
|
||||
.home-ways-list { display: flex; flex-direction: column; }
|
||||
.home-ways-eyebrow { margin: 0; font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brand-gold); }
|
||||
.home-ways-heading { font-family: var(--brand-font-heading); font-size: 1.5rem; font-weight: 600; color: #e8d9b5; margin: 0.25rem 0 0.6rem; }
|
||||
.home-ways-link {
|
||||
display: flex; justify-content: space-between; align-items: center; gap: 1rem;
|
||||
padding: 0.8rem 0.2rem; border-bottom: 1px solid rgba(201, 168, 76, 0.16);
|
||||
text-decoration: none; color: #e8d9b5; transition: padding 180ms, color 180ms;
|
||||
}
|
||||
.home-ways-link strong { display: block; font-weight: 600; }
|
||||
.home-ways-link small { display: block; color: var(--brand-muted); font-size: 0.82rem; margin-top: 0.1rem; line-height: 1.4; }
|
||||
.home-ways-link:hover { padding-left: 0.7rem; color: #fff4d0; }
|
||||
.home-ways-arrow { color: var(--brand-gold); flex-shrink: 0; }
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.home-ways { grid-template-columns: 1fr; }
|
||||
.home-feature { min-height: 260px; padding: 1.6rem; }
|
||||
}
|
||||
+18
-16
@@ -1360,30 +1360,32 @@ function LandingPage({ content }: { content: SiteContent }) {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── WAYS IN ── */}
|
||||
{/* ── FEATURED STUDY + WAYS IN ── */}
|
||||
<section className="section-home-jump" aria-label="Homepage navigation">
|
||||
<div className="section-inner">
|
||||
<div className="home-jump-head">
|
||||
<p className="eyebrow">{content.whereToNextEyebrow || 'Where to Next'}</p>
|
||||
<h2 className="section-heading">{content.whereToNextHeading || 'Choose the page you need.'}</h2>
|
||||
</div>
|
||||
<div className="home-jump-grid">
|
||||
{[...fixedCards, ...adminCards].map(card => (
|
||||
<Link key={card.id} to={card.path} className="home-jump-card">
|
||||
<h3>{card.title}</h3>
|
||||
<p>{card.description}</p>
|
||||
</Link>
|
||||
))}
|
||||
<div className={`section-inner home-ways${featuredStudy ? '' : ' home-ways--list-only'}`}>
|
||||
{featuredStudy && (
|
||||
<Link to={`/study/${featuredStudy.slug || ''}`} className="home-jump-card home-jump-card--featured">
|
||||
<div className="home-jump-featured-head">
|
||||
<p className="eyebrow">{featuredStudy.homepageEyebrow || 'Study'}</p>
|
||||
<Link to={`/study/${featuredStudy.slug || ''}`} className="home-feature">
|
||||
<div className="home-feature-head">
|
||||
<span className="home-feature-eyebrow">{featuredStudy.homepageEyebrow || 'Study'}</span>
|
||||
{featuredStudy.showNewTag && <span className="home-jump-new-tag">{featuredStudy.newTagLabel || 'NEW'}</span>}
|
||||
</div>
|
||||
<h3>{featuredStudy.title}</h3>
|
||||
<p>{featuredStudy.description || 'Explore this study track with lesson notes, commentary, and guided questions.'}</p>
|
||||
<span className="btn-primary home-feature-btn">Start the study</span>
|
||||
</Link>
|
||||
)}
|
||||
<div className="home-ways-list">
|
||||
<p className="home-ways-eyebrow">{content.whereToNextEyebrow || 'Where to Next'}</p>
|
||||
<h2 className="home-ways-heading">{content.whereToNextHeading || 'Explore the site'}</h2>
|
||||
{[...fixedCards, ...adminCards].map(card => (
|
||||
<Link key={card.id} to={card.path} className="home-ways-link">
|
||||
<span>
|
||||
<strong>{card.title}</strong>
|
||||
<small>{card.description}</small>
|
||||
</span>
|
||||
<span className="home-ways-arrow" aria-hidden="true">→</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in new issue
Block a user