export default function GroovesAndEmbersWebsite() {
const episodes = [
{
title: "Episode 01 · The Needle Drops",
description:
"An opening conversation on the records that shaped us, the ritual of a good cigar, and why stories always sound better over warm sound.",
tag: "Featured Episode",
},
{
title: "Episode 02 · Smoke, Soul & Storytelling",
description:
"A laid-back session on timeless grooves, unforgettable albums, and the kind of conversation that lingers after the ash settles.",
tag: "New Release",
},
{
title: "Episode 03 · Jazz Rooms & Late Nights",
description:
"Exploring jazz, vinyl culture, and the atmosphere that inspires the smoothest conversations.",
tag: "Coming Soon",
},
];
const highlights = [
{
title: "Good music",
text: "Conversations rooted in vinyl culture, timeless albums, and the soundtracks that stay with us.",
},
{
title: "Great conversation",
text: "Thoughtful guests, easy chemistry, and stories that feel personal, warm, and memorable.",
},
{
title: "One smooth burn",
text: "A refined atmosphere inspired by cigars, lounge culture, and evenings built for connection.",
},
];
const socials = [
{ name: "YouTube", handle: "@Groove_Embers" },
{ name: "Instagram", handle: "@grooveandembers" },
{ name: "Spotify", handle: "Streaming Soon" },
{ name: "Apple Podcasts", handle: "Launching Soon" },
];
return (
<div className="min-h-screen bg-stone-950 text-stone-100">
<section className="relative overflow-hidden border-b border-amber-400/20 bg-gradient-to-b from-stone-950 via-stone-900 to-stone-950">
<div className="absolute inset-0 opacity-20">
<div className="absolute left-[-10%] top-[-10%] h-72 w-72 rounded-full bg-amber-500 blur-3xl" />
<div className="absolute right-[-5%] top-1/3 h-80 w-80 rounded-full bg-orange-400 blur-3xl" />
<div className="absolute bottom-[-10%] left-1/3 h-72 w-72 rounded-full bg-yellow-200 blur-3xl" />
</div>
<div className="relative mx-auto grid max-w-7xl gap-12 px-6 py-20 md:px-10 lg:grid-cols-2 lg:items-center lg:py-28">
<div>
<div className="mb-5 inline-flex items-center rounded-full border border-amber-300/30 bg-amber-400/10 px-4 py-1 text-sm tracking-[0.2em] text-amber-200 uppercase">
Grooves & Embers Podcast
</div>
<h1 className="max-w-2xl text-5xl font-semibold leading-tight tracking-tight md:text-6xl">
Where vinyl warmth and real conversation meet.
</h1>
<p className="mt-6 max-w-xl text-lg leading-8 text-stone-300">
Grooves & Embers is a podcast built around great records, meaningful dialogue, and the lounge-style atmosphere of a smooth evening well spent.
</p>
<p className="mt-4 max-w-xl text-base italic text-amber-200/90">
Good music. Great conversation. One smooth burn.
</p>
<div className="mt-8 flex flex-wrap gap-4">
<a
href="#episodes"
className="rounded-2xl bg-amber-300 px-6 py-3 text-sm font-semibold text-stone-950 shadow-lg shadow-amber-500/20 transition hover:-translate-y-0.5"
>
Explore Episodes
</a>
<a
href="#about"
className="rounded-2xl border border-stone-700 px-6 py-3 text-sm font-semibold text-stone-100 transition hover:border-amber-300 hover:text-amber-200"
>
About the Show
</a>
</div>
</div>
<div className="relative mx-auto w-full max-w-xl">
<div className="rounded-[2rem] border border-amber-300/20 bg-stone-900/80 p-6 shadow-2xl shadow-black/40 backdrop-blur">
<div className="mb-6 flex items-center justify-between">
<div>
<p className="text-xs uppercase tracking-[0.3em] text-stone-400">Now Spinning</p>
<p className="mt-2 text-xl font-medium text-amber-100">Grooves & Embers</p>
</div>
<div className="h-3 w-3 rounded-full bg-amber-300" />
</div>
<div className="grid gap-6 md:grid-cols-[1fr_1.1fr]">
<div className="flex items-center justify-center">
<div className="relative h-64 w-64 rounded-full border border-stone-700 bg-gradient-to-br from-stone-800 to-black shadow-inner">
<div className="absolute inset-5 rounded-full border border-stone-700" />
<div className="absolute inset-10 rounded-full border border-stone-700" />
<div className="absolute inset-16 rounded-full border border-stone-700" />
<div className="absolute inset-0 flex items-center justify-center">
<div className="h-20 w-20 rounded-full border border-amber-200/30 bg-amber-200/10" />
</div>
<div className="absolute right-6 top-1/2 h-1 w-24 -translate-y-1/2 rounded-full bg-amber-200/70" />
</div>
</div>
<div className="flex flex-col justify-center rounded-3xl border border-stone-800 bg-stone-950/70 p-6">
<p className="text-xs uppercase tracking-[0.25em] text-amber-200">Featured Vibe</p>
<h2 className="mt-3 text-2xl font-semibold">The needle drops. The stories flow.</h2>
<p className="mt-4 text-sm leading-7 text-stone-300">
A modern podcast experience inspired by classic listening rooms, warm analog sound, and conversations worth sitting with.
</p>
<div className="mt-6 flex gap-3">
<div className="rounded-xl border border-stone-800 px-4 py-2 text-sm text-stone-200">Vinyl Culture</div>
<div className="rounded-xl border border-stone-800 px-4 py-2 text-sm text-stone-200">Cigar Lounge Energy</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="about" className="mx-auto max-w-7xl px-6 py-20 md:px-10">
<div className="mb-12 max-w-2xl">
<p className="text-sm uppercase tracking-[0.25em] text-amber-200">About the show</p>
<h2 className="mt-3 text-3xl font-semibold md:text-4xl">A refined space for music lovers, storytellers, and slow-burn conversation.</h2>
</div>
<div className="grid gap-6 md:grid-cols-3">
{highlights.map((item) => (
<div
key={item.title}
className="rounded-[1.5rem] border border-stone-800 bg-stone-900 p-6 shadow-lg shadow-black/20"
>
<h3 className="text-xl font-semibold text-amber-100">{item.title}</h3>
<p className="mt-4 leading-7 text-stone-300">{item.text}</p>
</div>
))}
</div>
</section>
<section id="episodes" className="border-y border-stone-800 bg-stone-900/70">
<div className="mx-auto max-w-7xl px-6 py-20 md:px-10">
<div className="mb-12 flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
<div className="max-w-2xl">
<p className="text-sm uppercase tracking-[0.25em] text-amber-200">Episodes</p>
<h2 className="mt-3 text-3xl font-semibold md:text-4xl">Featured conversations and upcoming drops.</h2>
</div>
<a href="#connect" className="text-sm font-medium text-amber-200 hover:text-amber-100">
Follow the journey →
</a>
</div>
<div className="grid gap-6 lg:grid-cols-3">
{episodes.map((episode) => (
<div
key={episode.title}
className="group rounded-[1.75rem] border border-stone-800 bg-stone-950 p-6 transition hover:-translate-y-1 hover:border-amber-300/40"
>
<span className="inline-flex rounded-full border border-amber-300/20 bg-amber-300/10 px-3 py-1 text-xs uppercase tracking-[0.2em] text-amber-200">
{episode.tag}
</span>
<h3 className="mt-5 text-2xl font-semibold leading-snug group-hover:text-amber-100">
{episode.title}
</h3>
<p className="mt-4 leading-7 text-stone-300">{episode.description}</p>
<button className="mt-8 rounded-2xl border border-stone-700 px-5 py-3 text-sm font-semibold text-stone-100 transition hover:border-amber-300 hover:text-amber-200">
Listen Preview
</button>
</div>
))}
</div>
</div>
</section>
<section className="mx-auto max-w-7xl px-6 py-20 md:px-10">
<div className="grid gap-8 rounded-[2rem] border border-amber-300/15 bg-gradient-to-r from-stone-900 to-stone-950 p-8 md:grid-cols-[1.1fr_0.9fr] md:p-10">
<div>
<p className="text-sm uppercase tracking-[0.25em] text-amber-200">Why listeners tune in</p>
<h2 className="mt-3 text-3xl font-semibold md:text-4xl">The atmosphere matters just as much as the conversation.</h2>
<p className="mt-5 max-w-2xl leading-8 text-stone-300">
Grooves & Embers blends the elegance of vinyl listening culture with the intimacy of a late-night lounge. It is designed for listeners who appreciate depth, style, and stories that unfold naturally.
</p>
</div>
<div className="grid gap-4">
{[
"Curated conversations with personality",
"A premium visual identity built for YouTube and social",
"A distinctive brand voice rooted in warmth and sophistication",
"Perfect for guests, music lovers, and cigar culture enthusiasts",
].map((point) => (
<div key={point} className="rounded-2xl border border-stone-800 bg-black/20 px-5 py-4 text-stone-200">
{point}
</div>
))}
</div>
</div>
</section>
<section id="connect" className="border-t border-stone-800 bg-stone-950">
<div className="mx-auto grid max-w-7xl gap-10 px-6 py-20 md:px-10 lg:grid-cols-[1fr_0.9fr]">
<div>
<p className="text-sm uppercase tracking-[0.25em] text-amber-200">Connect</p>
<h2 className="mt-3 text-3xl font-semibold md:text-4xl">Join the Grooves & Embers audience.</h2>
<p className="mt-5 max-w-xl leading-8 text-stone-300">
Subscribe, follow, and stay close to the next release. From new episodes to visual drops and behind-the-scenes moments, this is where the vibe continues.
</p>
</div>
<div className="grid gap-4">
{socials.map((social) => (
<div
key={social.name}
className="flex items-center justify-between rounded-2xl border border-stone-800 bg-stone-900 px-5 py-4"
>
<span className="font-medium text-stone-100">{social.name}</span>
<span className="text-sm text-amber-200">{social.handle}</span>
</div>
))}
</div>
</div>
</section>
<footer className="border-t border-stone-800 px-6 py-8 text-center text-sm text-stone-400">
© 2026 Grooves & Embers Podcast · Crafted for good music, great conversation, and one smooth burn.
</footer>
</div>
);
}