daniel-c-harvey
171 lines
6.9 KiB
Plaintext
171 lines
6.9 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">
|
|
<div class="hero-right">
|
|
<NowPlaying />
|
|
</div>
|
|
</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-8"/>
|
|
</section>
|
|
|
|
@* Divider *@
|
|
<div class="section-divider">
|
|
<div class="divider-line"></div>
|
|
<div class="divider-tag">The Sound</div>
|
|
<div class="divider-line"></div>
|
|
</div>
|
|
|
|
@* Sound section *@
|
|
<section class="section">
|
|
<div class="section-header-grid">
|
|
<MudGrid Style="margin-bottom: 5rem;">
|
|
<MudItem xs="12" md="4">
|
|
<div class="section-label">Genres & 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 — not a cage. Each session begins as something and ends as something else entirely.
|
|
</p>
|
|
</MudItem>
|
|
</MudGrid>
|
|
</div>
|
|
|
|
<div class="genre-grid">
|
|
@* TODO Phase 2.2: wire each genre to /genres/{slug} *@
|
|
<div class="genre-card">
|
|
<div class="genre-name">House</div>
|
|
<div class="genre-count">Foundation</div>
|
|
</div>
|
|
<div class="genre-card">
|
|
<div class="genre-name">Techno</div>
|
|
<div class="genre-count">Architecture</div>
|
|
</div>
|
|
<div class="genre-card">
|
|
<div class="genre-name">Trance</div>
|
|
<div class="genre-count">Ascension</div>
|
|
</div>
|
|
<div class="genre-card">
|
|
<div class="genre-name">IDM</div>
|
|
<div class="genre-count">Intelligence</div>
|
|
</div>
|
|
<div class="genre-card">
|
|
<div class="genre-name">Progressive</div>
|
|
<div class="genre-count">Journey</div>
|
|
</div>
|
|
<div class="genre-card">
|
|
<div class="genre-name">Ambient</div>
|
|
<div class="genre-count">Atmosphere</div>
|
|
</div>
|
|
</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="/tracks">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>
|
|
|
|
@code {
|
|
[CascadingParameter] public IStreamingPlayerService? Player { get; set; }
|
|
}
|