daniel/deepdrft
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 13 Wiki Activity

Merge branch 'p6-w1-home-mobile' into dev

Browse Source
This commit is contained in:
daniel-c-harvey
2026-06-07 07:53:32 -04:00
parent c4e7b49776 8b3e7e0620
commit ec88759b55
2 changed files with 129 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DeepDrftPublic.Client/Pages/Home.razor
+62 -46
View File
@@ -6,13 +6,19 @@
@* Hero - split 50/50 *@
<section class="hero">
<div class="hero-left">
<DeepDrftHero />
</div>
<MudGrid Spacing="0" Style="height: 100%;">
<MudItem xs="12" md="6">
<div class="hero-left">
<DeepDrftHero />
</div>
</MudItem>
<div class="hero-right">
<NowPlaying />
</div>
<MudItem xs="12" md="6">
<div class="hero-right">
<NowPlaying />
</div>
</MudItem>
</MudGrid>
</section>
@* Divider *@
@@ -24,14 +30,18 @@
@* Sound section *@
<section class="section">
<div class="section-header">
<div>
<div class="section-label">Genres &amp; Moods</div>
<h2 class="section-title">Every<br /><em>Frequency</em><br />Explored</h2>
</div>
<p class="section-body">
From the hypnotic pulse of deep house to the fractal complexity of IDM, Deep DRFT refuses to be categorized. We treat genre as a palette &mdash; not a cage. Each session begins as something and ends as something else entirely.
</p>
<div class="section-header-grid">
<MudGrid Style="margin-bottom: 5rem;">
<MudItem xs="12" md="4">
<div class="section-label">Genres &amp; Moods</div>
<h2 class="section-title">Every<br /><em>Frequency</em><br />Explored</h2>
</MudItem>
<MudItem xs="12" md="8">
<p class="section-body">
From the hypnotic pulse of deep house to the fractal complexity of IDM, Deep DRFT refuses to be categorized. We treat genre as a palette &mdash; not a cage. Each session begins as something and ends as something else entirely.
</p>
</MudItem>
</MudGrid>
</div>
<div class="genre-grid">
@@ -104,41 +114,47 @@
@* Split: origin + connect *@
<div class="section-split">
<div class="split-left">
<div class="split-eyebrow">Our Origin</div>
<h2 class="split-title">Where the Holy City<br /><em>Meets the Future</em></h2>
<p class="split-body">
Charleston, South Carolina holds centuries of culture in its streets. We carry that weight into the studio &mdash; tradition as tension against the forward pull of electronic sound. The result is music that feels both ancient and unimagined.
</p>
</div>
<MudGrid Spacing="0" Style="height: 100%;">
<MudItem xs="12" md="6">
<div class="split-left">
<div class="split-eyebrow">Our Origin</div>
<h2 class="split-title">Where the Holy City<br /><em>Meets the Future</em></h2>
<p class="split-body">
Charleston, South Carolina holds centuries of culture in its streets. We carry that weight into the studio &mdash; tradition as tension against the forward pull of electronic sound. The result is music that feels both ancient and unimagined.
</p>
</div>
</MudItem>
<div class="split-right">
<div class="connect-label">Stay Connected</div>
<h2 class="connect-title">Never Miss<br />a <em>Session</em></h2>
<div class="connect-options">
@* TODO: wire to subscription system when newsletter/alerts backend exists *@
<div class="connect-option">
<div class="option-icon">
<svg viewBox="0 0 24 24"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" /><polyline points="22,6 12,13 2,6" /></svg>
</div>
<div>
<div class="option-text-label">Newsletter</div>
<div class="option-text-sub">New releases &amp; studio dispatches</div>
<MudItem xs="12" md="6">
<div class="split-right">
<div class="connect-label">Stay Connected</div>
<h2 class="connect-title">Never Miss<br />a <em>Session</em></h2>
<div class="connect-options">
@* TODO: wire to subscription system when newsletter/alerts backend exists *@
<div class="connect-option">
<div class="option-icon">
<svg viewBox="0 0 24 24"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" /><polyline points="22,6 12,13 2,6" /></svg>
</div>
<div>
<div class="option-text-label">Newsletter</div>
<div class="option-text-sub">New releases &amp; studio dispatches</div>
</div>
</div>
<div class="connect-option">
<div class="option-icon">
<svg viewBox="0 0 24 24"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" /><path d="M13.73 21a2 2 0 0 1-3.46 0" /></svg>
</div>
<div>
<div class="option-text-label">Live Alerts</div>
<div class="option-text-sub">Know the moment we go live</div>
</div>
</div>
</div>
@* TODO: subscription form lives behind this CTA *@
<button class="btn-primary connect-cta" type="button">Subscribe Free</button>
</div>
<div class="connect-option">
<div class="option-icon">
<svg viewBox="0 0 24 24"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" /><path d="M13.73 21a2 2 0 0 1-3.46 0" /></svg>
</div>
<div>
<div class="option-text-label">Live Alerts</div>
<div class="option-text-sub">Know the moment we go live</div>
</div>
</div>
</div>
@* TODO: subscription form lives behind this CTA *@
<button class="btn-primary connect-cta" type="button">Subscribe Free</button>
</div>
</MudItem>
</MudGrid>
</div>
@* CTA banner *@
DeepDrftPublic.Client/Pages/Home.razor.css
+67 -10
View File
@@ -6,8 +6,6 @@
/* ── HERO ── */
.hero {
min-height: 100vh;
display: grid;
grid-template-columns: 1fr 1fr;
overflow: hidden;
}
@@ -18,6 +16,7 @@
padding: 6rem 3rem;
position: relative;
background: var(--deepdrft-white);
height: 100%;
}
.hero-right {
@@ -27,6 +26,13 @@
flex-direction: column;
justify-content: flex-end;
overflow: hidden;
height: 100%;
}
@media (max-width: 960px) {
.hero { min-height: auto; }
.hero-left { padding: 4rem 1.5rem 3rem; }
.hero-right { min-height: 50vh; }
}
/* ── DIVIDER ── */
@@ -59,12 +65,10 @@
background: var(--deepdrft-white);
}
.section-header {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 4rem;
margin-bottom: 5rem;
align-items: end;
@media (min-width: 960px) {
.section-header-grid {
align-items: end;
}
}
.section-label {
@@ -109,6 +113,14 @@
margin-bottom: 4rem;
}
@media (max-width: 960px) {
.genre-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
.genre-grid { grid-template-columns: repeat(2, 1fr); }
}
.genre-card {
background: var(--deepdrft-white);
padding: 2rem 1.5rem;
@@ -191,6 +203,20 @@
.feature-card:hover { background: rgba(250, 250, 248, 0.04); }
/* Below md: per-card border-right leaves dangling hairlines when columns
collapse, so switch to border-bottom dividers instead. */
@media (max-width: 960px) {
.features-grid { grid-template-columns: repeat(2, 1fr); }
.feature-card { border-right: none; border-bottom: 1px solid rgba(250, 250, 248, 0.08); }
.feature-card:last-child { border-bottom: none; }
}
@media (max-width: 600px) {
.features-grid { grid-template-columns: 1fr; }
.feature-card { border-right: none; border-bottom: 1px solid rgba(250, 250, 248, 0.08); }
.feature-card:last-child { border-bottom: none; }
}
.feature-icon {
width: 2.5rem;
height: 2.5rem;
@@ -227,11 +253,13 @@
/* ── SPLIT: ORIGIN + CONNECT ── */
.section-split {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 60vh;
}
@media (max-width: 960px) {
.section-split { min-height: auto; }
}
.split-left {
background: var(--deepdrft-green);
padding: 6rem 4rem;
@@ -240,6 +268,7 @@
justify-content: center;
position: relative;
overflow: hidden;
height: 100%;
}
.split-left::before {
@@ -259,6 +288,7 @@
flex-direction: column;
justify-content: center;
background: var(--deepdrft-white);
height: 100%;
}
.split-eyebrow {
@@ -442,6 +472,7 @@
position: relative;
z-index: 1;
flex-shrink: 0;
flex-wrap: wrap;
}
.btn-white {
@@ -480,3 +511,29 @@
}
.btn-outline-white:hover { border-color: var(--deepdrft-white); }
@media (max-width: 600px) {
.cta-banner {
flex-direction: column;
align-items: flex-start;
gap: 2rem;
padding: 4rem 1.5rem;
}
.cta-actions {
width: 100%;
}
.btn-white,
.btn-outline-white {
flex: 1;
text-align: center;
min-width: 140px;
}
/* At 22rem the "DRFT" watermark forces horizontal scroll on mobile. */
.cta-banner::before {
font-size: 8rem;
right: -0.5rem;
}
}