daniel-c-harvey
528f09d96a
Lift the WaveformVisualizer + control popover out of the 120px NowPlayingCard box into NowPlaying as a full-panel background layer; migrate the hero-right wrapper and its scoped styles from Home into NowPlaying.
190 lines
7.8 KiB
Plaintext
190 lines
7.8 KiB
Plaintext
@page "/"
|
|
@using DeepDrftPublic.Client.Controls
|
|
@using DeepDrftPublic.Client.Services
|
|
|
|
<PageTitle>Deep DRFT - Electronic Music Collective</PageTitle>
|
|
|
|
@* Hero - split 50/50 *@
|
|
<section class="hero">
|
|
<MudGrid Spacing="0" Style="height: 100%;">
|
|
<MudItem xs="12" md="6">
|
|
<div class="hero-left">
|
|
<DeepDrftHero />
|
|
</div>
|
|
</MudItem>
|
|
|
|
<MudItem xs="12" md="6">
|
|
<NowPlaying />
|
|
</MudItem>
|
|
</MudGrid>
|
|
<ParallaxImage Image1="img/dd-duo-hero-bw.jpeg"
|
|
Image2="img/dd-duo-hero.jpeg"
|
|
Alt1="Deep DRFT Electronic Music Duo"
|
|
FullWidth
|
|
InvertDirection
|
|
NaturalWidth="2048"
|
|
NaturalHeight="1365"
|
|
WindowHeightFraction="0.45"
|
|
ImageHeight="auto"
|
|
ImageWidth="100%"
|
|
ParallaxSpeed="0.35"
|
|
Class="my-12"/>
|
|
</section>
|
|
|
|
@* Divider *@
|
|
<div class="section-divider">
|
|
<div class="divider-line"></div>
|
|
<div class="divider-tag">The Sound</div>
|
|
<div class="divider-line"></div>
|
|
</div>
|
|
|
|
@* Medium section *@
|
|
<section class="section">
|
|
<div class="section-header-grid">
|
|
<MudGrid Style="margin-bottom: 5rem;">
|
|
<MudItem xs="12" md="4">
|
|
<div class="section-label">Format & Medium</div>
|
|
<h2 class="section-title">Music through<br /><em>Every</em><br />Medium</h2>
|
|
</MudItem>
|
|
<MudItem xs="12" md="8" Class="section-body-item">
|
|
<div class="section-body">
|
|
<p>
|
|
The same hands, three different rooms. A studio cut is built; a live set is risked; a DJ mix is woven. We release in every form the music asks for — each one a different relationship between the moment and the record of it.
|
|
</p>
|
|
</div>
|
|
</MudItem>
|
|
</MudGrid>
|
|
</div>
|
|
|
|
<div class="medium-grid">
|
|
<a class="medium-card" href="/cuts">
|
|
<div class="medium-image" style="background-image: url('img/dd-studio.jpg');">
|
|
<div class="medium-scrim"></div>
|
|
</div>
|
|
<div class="medium-body">
|
|
<div class="medium-type">Studio</div>
|
|
<div class="medium-name">Studio Releases</div>
|
|
<div class="medium-desc">Composed, layered, and finished — tracks built to be returned to.</div>
|
|
</div>
|
|
</a>
|
|
<a class="medium-card" href="/sessions">
|
|
<div class="medium-image" style="background-image: url('img/dd-live.jpeg');">
|
|
<div class="medium-scrim"></div>
|
|
</div>
|
|
<div class="medium-body">
|
|
<div class="medium-type">Live</div>
|
|
<div class="medium-name">Live Releases</div>
|
|
<div class="medium-desc">Performances caught in the moment, unrepeatable and unedited.</div>
|
|
</div>
|
|
</a>
|
|
<a class="medium-card" href="/mixes">
|
|
<div class="medium-image" style="background-image: url('img/dd-dj.jpeg');">
|
|
<div class="medium-scrim"></div>
|
|
</div>
|
|
<div class="medium-body">
|
|
<div class="medium-type">Mix</div>
|
|
<div class="medium-name">DJ Mix Releases</div>
|
|
<div class="medium-desc">Uninterrupted sets — one track bleeding into the next, start to finish.</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
@* Dark features section *@
|
|
<section class="section-dark">
|
|
<div class="section-label section-label-dark">What We Offer</div>
|
|
<h2 class="section-title section-title-dark">
|
|
Built for the<br /><em>Committed Listener</em>
|
|
</h2>
|
|
|
|
<div class="features-grid">
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg viewBox="0 0 24 24"><path d="M9 18V5l12-2v13" /><circle cx="6" cy="18" r="3" /><circle cx="18" cy="16" r="3" /></svg>
|
|
</div>
|
|
<div class="feature-title">Lossless Audio Streaming</div>
|
|
<div class="feature-desc">Crystal-clear sound delivered at full resolution. We don't compress the music — or the experience.</div>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" /><polygon points="10 8 16 12 10 16 10 8" /></svg>
|
|
</div>
|
|
<div class="feature-title">Live Sessions Broadcast</div>
|
|
<div class="feature-desc">Join us in real time. Every session is unrepeatable — a singular moment sculpted between performer and listener.</div>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg viewBox="0 0 24 24"><rect x="2" y="3" width="20" height="14" rx="2" ry="2" /><line x1="8" y1="21" x2="16" y2="21" /><line x1="12" y1="17" x2="12" y2="21" /></svg>
|
|
</div>
|
|
<div class="feature-title">Studio Video Content</div>
|
|
<div class="feature-desc">Behind-the-machine footage. Watch synthesis happen in real time, gear and all — no performance, just process.</div>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg viewBox="0 0 24 24"><path d="M3 3h18v18H3z" /><path d="M3 9h18M9 21V9" /></svg>
|
|
</div>
|
|
<div class="feature-title">Growing Archive</div>
|
|
<div class="feature-desc">A living catalogue of sessions, mixes, and experiments — indexed, searchable, and always expanding.</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
@* Split: origin + connect *@
|
|
<div class="section-split">
|
|
<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 — tradition as tension against the forward pull of electronic sound. The result is music that feels both ancient and unimagined.
|
|
</p>
|
|
</div>
|
|
</MudItem>
|
|
|
|
<MudItem xs="12" md="6">
|
|
<div class="split-right">
|
|
<ParallaxImage Image1="img/kp-shoulder-bw.jpeg"
|
|
InvertDirection
|
|
NaturalWidth="1365"
|
|
NaturalHeight="2048"
|
|
WindowHeightFraction="0.5"
|
|
ImageHeight="auto"
|
|
ImageWidth="100%"
|
|
ParallaxSpeed="0.6" />
|
|
</div>
|
|
</MudItem>
|
|
</MudGrid>
|
|
</div>
|
|
|
|
@* CTA banner *@
|
|
<section class="cta-banner">
|
|
<div class="cta-text">
|
|
<h2 class="cta-headline">Ready to<br /><em>Drift</em> Deeper?</h2>
|
|
<p class="cta-sub">Immerse yourself. The current is always running.</p>
|
|
</div>
|
|
<div class="cta-actions">
|
|
<a class="btn-white" href="/archive">Explore the Archive</a>
|
|
@* TODO: route to /schedule when live-session schedule page exists *@
|
|
<button class="btn-outline-white" type="button">View Live Schedule</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<ParallaxImage Image1="img/mixer-bw.jpg"
|
|
Image2="img/mixer.jpg"
|
|
Alt1="Deep DRFT Electronic Music Duo"
|
|
NaturalWidth="2048"
|
|
NaturalHeight="1365"
|
|
WindowHeightFraction="0.45"
|
|
ImageHeight="auto"
|
|
ImageWidth="100%"
|
|
ParallaxSpeed="0.35" />
|
|
</section>
|
|
|
|
|
|
|
|
@code {
|
|
[CascadingParameter] public IStreamingPlayerService? Player { get; set; }
|
|
}
|