180 lines
8.4 KiB
TypeScript
180 lines
8.4 KiB
TypeScript
import { mdiAlbum, mdiChevronRight, mdiLogin, mdiMusic, mdiRobot, mdiShieldAccount } from '@mdi/js';
|
|
import Head from 'next/head';
|
|
import Link from 'next/link';
|
|
import React, { ReactElement } from 'react';
|
|
import BaseIcon from '../components/BaseIcon';
|
|
import LayoutGuest from '../layouts/Guest';
|
|
import { getPageTitle } from '../config';
|
|
|
|
const genreHighlights = [
|
|
'Amapiano',
|
|
'Gqom',
|
|
'Maskandi',
|
|
'Kwaito',
|
|
'Afro House',
|
|
'SA Gospel',
|
|
'Motswako',
|
|
'Lekompo',
|
|
'Cape Jazz',
|
|
'Afro Soul',
|
|
];
|
|
|
|
const workflowPillars = [
|
|
{
|
|
title: 'Create the beat',
|
|
body: 'Start from a text prompt and shape BPM, key, vibe, and South African genre DNA in seconds.',
|
|
icon: mdiRobot,
|
|
},
|
|
{
|
|
title: 'Bring in vocals',
|
|
body: 'Plan for uploads or recording sessions, with language-aware vocal workflows for multilingual artists.',
|
|
icon: mdiMusic,
|
|
},
|
|
{
|
|
title: 'Ship release-ready audio',
|
|
body: 'Queue mix, mastering, metadata, artwork, and export for streaming, radio, or club delivery.',
|
|
icon: mdiAlbum,
|
|
},
|
|
];
|
|
|
|
function HomePage() {
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>{getPageTitle('SA AI Music Studio')}</title>
|
|
<meta
|
|
name="description"
|
|
content="A South African-first AI music production studio for beat generation, vocal workflows, mixing, mastering, and export."
|
|
/>
|
|
</Head>
|
|
|
|
<div className="min-h-screen bg-[#07070C] text-white">
|
|
<div className="mx-auto max-w-7xl px-6 pb-16 pt-6 sm:px-8 lg:px-10">
|
|
<header className="flex flex-wrap items-center justify-between gap-4 rounded-full border border-white/10 bg-white/5 px-5 py-4 backdrop-blur">
|
|
<div>
|
|
<div className="text-xs uppercase tracking-[0.28em] text-violet-300">SA AI Music Studio</div>
|
|
<div className="mt-1 text-lg font-semibold text-white">Browser-based studio workflow</div>
|
|
</div>
|
|
|
|
<nav className="flex flex-wrap items-center gap-3">
|
|
<Link
|
|
href="/login"
|
|
className="inline-flex items-center rounded-full border border-white/15 px-4 py-2 text-sm font-medium text-white transition hover:border-violet-300/40 hover:bg-white/5"
|
|
>
|
|
<BaseIcon path={mdiLogin} size={16} className="mr-2" />
|
|
Login
|
|
</Link>
|
|
<Link
|
|
href="/dashboard"
|
|
className="inline-flex items-center rounded-full bg-violet-500 px-4 py-2 text-sm font-medium text-white transition hover:bg-violet-400"
|
|
>
|
|
<BaseIcon path={mdiShieldAccount} size={16} className="mr-2" />
|
|
Admin interface
|
|
</Link>
|
|
</nav>
|
|
</header>
|
|
|
|
<main className="mt-10 grid gap-8 xl:grid-cols-[1.4fr_0.9fr] xl:items-center">
|
|
<section>
|
|
<div className="inline-flex items-center rounded-full border border-violet-400/20 bg-violet-500/10 px-4 py-2 text-xs uppercase tracking-[0.24em] text-violet-200">
|
|
South African genres · Vocal workflows · Mix & master
|
|
</div>
|
|
<h1 className="mt-6 max-w-4xl text-5xl font-semibold leading-tight sm:text-6xl">
|
|
Build modern South African records with an AI-powered studio workflow.
|
|
</h1>
|
|
<p className="mt-6 max-w-3xl text-lg leading-8 text-slate-300">
|
|
Generate genre-aware beats, stage multilingual vocal sessions, queue mixing and mastering, and organize exports for release — all from one dark, studio-first workspace.
|
|
</p>
|
|
|
|
<div className="mt-8 flex flex-wrap gap-4">
|
|
<Link
|
|
href="/studio"
|
|
className="inline-flex items-center rounded-full bg-white px-6 py-3 text-sm font-semibold text-slate-950 transition hover:bg-violet-100"
|
|
>
|
|
Open Studio Launchpad
|
|
<BaseIcon path={mdiChevronRight} size={18} className="ml-2" />
|
|
</Link>
|
|
<Link
|
|
href="/login"
|
|
className="inline-flex items-center rounded-full border border-white/15 px-6 py-3 text-sm font-semibold text-white transition hover:border-violet-300/40 hover:bg-white/5"
|
|
>
|
|
Sign in to continue
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="mt-10 flex flex-wrap gap-3">
|
|
{genreHighlights.map((genre) => (
|
|
<span key={genre} className="rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm text-slate-200">
|
|
{genre}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<section className="relative overflow-hidden rounded-[2rem] border border-white/10 bg-gradient-to-br from-violet-600/20 via-slate-900 to-slate-950 p-6 shadow-2xl shadow-violet-950/20">
|
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,_rgba(168,85,247,0.22),_transparent_45%),radial-gradient(circle_at_bottom_left,_rgba(34,211,238,0.16),_transparent_40%)]" />
|
|
<div className="relative">
|
|
<div className="flex items-center justify-between rounded-3xl border border-white/10 bg-white/5 px-4 py-3">
|
|
<div>
|
|
<div className="text-xs uppercase tracking-[0.22em] text-violet-200">Launch-ready slice</div>
|
|
<div className="mt-1 text-lg font-semibold">Generate → Vocal prep → Master</div>
|
|
</div>
|
|
<div className="rounded-full border border-emerald-400/30 bg-emerald-500/10 px-3 py-1 text-xs uppercase tracking-[0.16em] text-emerald-200">
|
|
live MVP
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-6 space-y-4">
|
|
{workflowPillars.map((pillar) => (
|
|
<div key={pillar.title} className="rounded-3xl border border-white/10 bg-black/30 p-5 backdrop-blur">
|
|
<div className="flex items-start gap-4">
|
|
<div className="rounded-2xl border border-white/10 bg-white/10 p-3 text-violet-200">
|
|
<BaseIcon path={pillar.icon} size={22} />
|
|
</div>
|
|
<div>
|
|
<div className="text-lg font-medium text-white">{pillar.title}</div>
|
|
<p className="mt-2 text-sm leading-7 text-slate-300">{pillar.body}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<section className="mt-14 grid gap-6 lg:grid-cols-3">
|
|
<div className="rounded-[1.75rem] border border-white/10 bg-white/5 p-6">
|
|
<div className="text-xs uppercase tracking-[0.22em] text-violet-300">Genre engine</div>
|
|
<h2 className="mt-3 text-2xl font-semibold">SA-first sound design</h2>
|
|
<p className="mt-4 text-sm leading-7 text-slate-300">
|
|
Start sessions for Amapiano, Kwaito, Gqom, Maskandi, Gospel, Cape Jazz, Lekompo, and more with BPM-aware workflow presets.
|
|
</p>
|
|
</div>
|
|
<div className="rounded-[1.75rem] border border-white/10 bg-white/5 p-6">
|
|
<div className="text-xs uppercase tracking-[0.22em] text-violet-300">Vocal path</div>
|
|
<h2 className="mt-3 text-2xl font-semibold">Artists move faster</h2>
|
|
<p className="mt-4 text-sm leading-7 text-slate-300">
|
|
Stage vocal uploads or recording-ready sessions, keep language context attached, and prepare the mix chain without leaving the browser.
|
|
</p>
|
|
</div>
|
|
<div className="rounded-[1.75rem] border border-white/10 bg-white/5 p-6">
|
|
<div className="text-xs uppercase tracking-[0.22em] text-violet-300">Release prep</div>
|
|
<h2 className="mt-3 text-2xl font-semibold">From idea to export</h2>
|
|
<p className="mt-4 text-sm leading-7 text-slate-300">
|
|
Queue mastering, metadata, artwork, and exports as part of the same workflow so the first version already feels like a product.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
HomePage.getLayout = function getLayout(page: ReactElement) {
|
|
return <LayoutGuest>{page}</LayoutGuest>;
|
|
};
|
|
|
|
export default HomePage;
|