Update src/app/studio/page.tsx
This commit is contained in:
@@ -1,21 +1,60 @@
|
||||
"use client";
|
||||
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
|
||||
import MediaAbout from "@/components/sections/about/MediaAbout";
|
||||
import ContactText from "@/components/sections/contact/ContactText";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import { Sparkles } from "lucide-react";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import { useState } from "react";
|
||||
import { Music, Volume2, Sliders, Download, Settings, Mic } from "lucide-react";
|
||||
|
||||
interface StemSlider {
|
||||
name: string;
|
||||
value: number;
|
||||
color: string;
|
||||
}
|
||||
|
||||
export default function StudioPage() {
|
||||
const [lyrics, setLyrics] = useState("");
|
||||
const [selectedStyle, setSelectedStyle] = useState("pop");
|
||||
const [selectedVoice, setSelectedVoice] = useState("smooth");
|
||||
const [stems, setStems] = useState<StemSlider[]>([
|
||||
{ name: "Drums", value: 100, color: "#FF0080" },
|
||||
{ name: "Bass", value: 100, color: "#00D9FF" },
|
||||
{ name: "Chords", value: 100, color: "#FFB700" },
|
||||
{ name: "Vocals", value: 100, color: "#00FF41" },
|
||||
]);
|
||||
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Features", id: "/#features" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Pricing", id: "/pricing" },
|
||||
{ name: "Studio", id: "https://studio.dieter.ai" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
];
|
||||
|
||||
const styles = [
|
||||
"Pop", "Hip-Hop", "Electronic", "Ambient", "Rock", "Jazz", "Classical", "Soul"];
|
||||
const voices = ["Smooth", "Energetic", "Deep", "High", "Robotic", "Warm"];
|
||||
|
||||
const handleStemChange = (index: number, value: number) => {
|
||||
const newStems = [...stems];
|
||||
newStems[index].value = value;
|
||||
setStems(newStems);
|
||||
};
|
||||
|
||||
const handleImprove = () => {
|
||||
// Placeholder for improvement functionality
|
||||
console.log("Improving lyrics...");
|
||||
};
|
||||
|
||||
const handleGenerate = () => {
|
||||
// Placeholder for generation functionality
|
||||
console.log("Generating music...");
|
||||
};
|
||||
|
||||
const handleExport = () => {
|
||||
// Placeholder for export functionality
|
||||
console.log("Exporting track...");
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-shift"
|
||||
@@ -38,55 +77,190 @@ export default function StudioPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="studio-hero" data-section="studio-hero">
|
||||
<HeroSplitKpi
|
||||
title="Music Production Inside Your Browser"
|
||||
description="Access your complete music studio instantly. No downloads, no complex setup—just pure creative power at your fingertips. Start producing immediately."
|
||||
tag="Professional Studio Tools"
|
||||
tagIcon={Sparkles}
|
||||
background={{ variant: "glowing-orb" }}
|
||||
kpis={[
|
||||
{ value: "100%", label: "Cloud-Based" },
|
||||
{ value: "24/7", label: "Access Anywhere" },
|
||||
{ value: "Real-Time", label: "Collaboration" },
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ahi2vwDB5Ta9isxbMIvH8BKpyQ/a-modern-sleek-browser-based-music-produ-1773052781984-0301b236.png?_wi=2"
|
||||
imageAlt="Dieter Studio production interface for music creation"
|
||||
mediaAnimation="slide-up"
|
||||
imagePosition="right"
|
||||
buttons={[
|
||||
{ text: "Enter Studio", href: "https://studio.dieter.ai" },
|
||||
{ text: "View Tutorials", href: "/" },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div className="min-h-screen bg-gradient-to-b from-slate-950 via-purple-950 to-slate-900 pt-32 pb-20">
|
||||
<div className="max-w-7xl mx-auto px-4">
|
||||
{/* Studio Grid */}
|
||||
<div className="grid grid-cols-12 gap-6 h-[calc(100vh-200px)]">
|
||||
{/* Left Panel - Lyrics & Improvements */}
|
||||
<div className="col-span-3 bg-slate-900/50 border border-purple-500/20 rounded-xl p-6 backdrop-blur-sm flex flex-col">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<Mic className="w-5 h-5 text-cyan-400" />
|
||||
<h2 className="text-lg font-semibold text-white">Lyrics</h2>
|
||||
</div>
|
||||
<textarea
|
||||
value={lyrics}
|
||||
onChange={(e) => setLyrics(e.target.value)}
|
||||
placeholder="Write or paste your lyrics here..."
|
||||
className="flex-1 bg-slate-800/50 border border-purple-500/20 rounded-lg p-4 text-white placeholder-gray-500 focus:outline-none focus:border-cyan-400/50 focus:ring-1 focus:ring-cyan-400/30 resize-none"
|
||||
/>
|
||||
<div className="flex gap-3 mt-4">
|
||||
<button
|
||||
onClick={handleImprove}
|
||||
className="flex-1 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-semibold py-2 px-4 rounded-lg transition-all duration-300 transform hover:scale-105"
|
||||
>
|
||||
Enhance
|
||||
</button>
|
||||
<button
|
||||
onClick={handleGenerate}
|
||||
className="flex-1 bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-600 hover:to-blue-700 text-white font-semibold py-2 px-4 rounded-lg transition-all duration-300 transform hover:scale-105"
|
||||
>
|
||||
Generate
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="studio-tools" data-section="studio-tools">
|
||||
<MediaAbout
|
||||
title="Complete Multi-Stem Mixing Workstation"
|
||||
description="Control drums, bass, vocals, and effects with dedicated faders. Real-time EQ adjustments, beat detection, and professional-grade mixing—everything a producer needs to create hit records."
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ahi2vwDB5Ta9isxbMIvH8BKpyQ/professional-mixing-dashboard-featuring--1773052780322-6a11347b.png?_wi=2"
|
||||
imageAlt="Professional mixing dashboard with multi-track controls"
|
||||
useInvertedBackground={true}
|
||||
buttons={[{ text: "Start Mixing", href: "https://studio.dieter.ai" }]}
|
||||
buttonAnimation="opacity"
|
||||
/>
|
||||
</div>
|
||||
{/* Center Panel - Waveform & Stem Mixing */}
|
||||
<div className="col-span-6 bg-slate-900/50 border border-purple-500/20 rounded-xl p-6 backdrop-blur-sm flex flex-col">
|
||||
<div className="flex items-center gap-2 mb-6">
|
||||
<Music className="w-5 h-5 text-lime-400" />
|
||||
<h2 className="text-lg font-semibold text-white">Mix</h2>
|
||||
</div>
|
||||
|
||||
<div id="studio-cta" data-section="studio-cta">
|
||||
<ContactText
|
||||
text="Your complete music production studio is ready. Launch now and create your first track in minutes."
|
||||
animationType="entrance-slide"
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{ text: "Launch Studio Now", href: "https://studio.dieter.ai" },
|
||||
{ text: "Learn More", href: "/" },
|
||||
]}
|
||||
/>
|
||||
{/* Waveform Player */}
|
||||
<div className="bg-slate-800/50 border border-cyan-500/20 rounded-lg p-6 mb-6 flex-1 flex flex-col justify-center">
|
||||
<div className="flex items-center justify-center gap-4 mb-4">
|
||||
<button className="bg-cyan-500 hover:bg-cyan-600 text-white p-3 rounded-full transition-all duration-300 transform hover:scale-110">
|
||||
▶
|
||||
</button>
|
||||
<div className="flex-1 h-12 bg-gradient-to-r from-purple-600/20 to-pink-600/20 rounded-lg flex items-center px-4">
|
||||
<div className="w-full h-1 bg-gradient-to-r from-purple-500 via-cyan-400 to-pink-500 rounded-full"></div>
|
||||
</div>
|
||||
<span className="text-sm text-gray-400 w-12 text-right">2:34</span>
|
||||
</div>
|
||||
<p className="text-center text-gray-400 text-sm">Waveform visualization</p>
|
||||
</div>
|
||||
|
||||
{/* Stem Sliders */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<Sliders className="w-4 h-4 text-lime-400" />
|
||||
<span className="text-sm font-semibold text-gray-300">Stems</span>
|
||||
</div>
|
||||
{stems.map((stem, index) => (
|
||||
<div key={index} className="space-y-2">
|
||||
<div className="flex justify-between items-center">
|
||||
<label className="text-sm text-gray-300 font-medium">
|
||||
{stem.name}
|
||||
</label>
|
||||
<span className="text-xs text-gray-400">{stem.value}%</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="100"
|
||||
value={stem.value}
|
||||
onChange={(e) =>
|
||||
handleStemChange(index, parseInt(e.target.value))
|
||||
}
|
||||
className="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer"
|
||||
style={{
|
||||
background: `linear-gradient(to right, ${stem.color} 0%, ${stem.color} ${stem.value}%, rgba(51, 65, 85, 0.5) ${stem.value}%, rgba(51, 65, 85, 0.5) 100%)`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Panel - Settings & Export */}
|
||||
<div className="col-span-3 bg-slate-900/50 border border-purple-500/20 rounded-xl p-6 backdrop-blur-sm flex flex-col">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<Settings className="w-5 h-5 text-amber-400" />
|
||||
<h2 className="text-lg font-semibold text-white">Settings</h2>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 space-y-4 mb-4">
|
||||
{/* Style Selection */}
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-gray-300 mb-2">
|
||||
Genre
|
||||
</label>
|
||||
<select
|
||||
value={selectedStyle}
|
||||
onChange={(e) => setSelectedStyle(e.target.value)}
|
||||
className="w-full bg-slate-800/50 border border-purple-500/20 rounded-lg px-3 py-2 text-white focus:outline-none focus:border-cyan-400/50 focus:ring-1 focus:ring-cyan-400/30"
|
||||
>
|
||||
{styles.map((style) => (
|
||||
<option
|
||||
key={style.toLowerCase()}
|
||||
value={style.toLowerCase()}
|
||||
>
|
||||
{style}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Voice Selection */}
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-gray-300 mb-2">
|
||||
Voice
|
||||
</label>
|
||||
<select
|
||||
value={selectedVoice}
|
||||
onChange={(e) => setSelectedVoice(e.target.value)}
|
||||
className="w-full bg-slate-800/50 border border-purple-500/20 rounded-lg px-3 py-2 text-white focus:outline-none focus:border-cyan-400/50 focus:ring-1 focus:ring-cyan-400/30"
|
||||
>
|
||||
{voices.map((voice) => (
|
||||
<option
|
||||
key={voice.toLowerCase()}
|
||||
value={voice.toLowerCase()}
|
||||
>
|
||||
{voice}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* BPM */}
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-gray-300 mb-2">
|
||||
BPM
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
defaultValue="120"
|
||||
className="w-full bg-slate-800/50 border border-purple-500/20 rounded-lg px-3 py-2 text-white focus:outline-none focus:border-cyan-400/50 focus:ring-1 focus:ring-cyan-400/30"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Key */}
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-gray-300 mb-2">
|
||||
Key
|
||||
</label>
|
||||
<select className="w-full bg-slate-800/50 border border-purple-500/20 rounded-lg px-3 py-2 text-white focus:outline-none focus:border-cyan-400/50 focus:ring-1 focus:ring-cyan-400/30">
|
||||
{[
|
||||
"C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"].map((key) => (
|
||||
<option key={key} value={key}>
|
||||
{key}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Export Buttons */}
|
||||
<div className="space-y-3">
|
||||
<button
|
||||
onClick={handleExport}
|
||||
className="w-full bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white font-semibold py-3 px-4 rounded-lg transition-all duration-300 transform hover:scale-105 flex items-center justify-center gap-2"
|
||||
>
|
||||
<Download className="w-4 h-4" />
|
||||
Export MP3
|
||||
</button>
|
||||
<button className="w-full bg-gradient-to-r from-violet-600 to-purple-600 hover:from-violet-700 hover:to-purple-700 text-white font-semibold py-3 px-4 rounded-lg transition-all duration-300 transform hover:scale-105 flex items-center justify-center gap-2">
|
||||
<Volume2 className="w-4 h-4" />
|
||||
Export Stems
|
||||
</button>
|
||||
<button className="w-full bg-slate-700 hover:bg-slate-600 text-white font-semibold py-2 px-4 rounded-lg transition-all duration-300">
|
||||
Save Project
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user