src/app/page.tsx

@@ -10,9 +10,16 @@ import PricingCardTwo from "@/components/sections/pricing/PricingCardTwo";
 import FaqBase from "@/components/sections/faq/FaqBase";
 import ContactText from "@/components/sections/contact/ContactText";
 import Link from "next/link";
-import { Sparkles, Music, Award } from "lucide-react";
+import { Sparkles, Music, Award, Wand2, Languages, Zap, Brain, BarChart3 } from "lucide-react";
+import { useState } from "react";
 
 export default function HomePage() {
+  const [selectedGenre, setSelectedGenre] = useState<string>("pop");
+  const [lyricsInput, setLyricsInput] = useState<string>("");
+  const [translationLanguage, setTranslationLanguage] = useState<string>("es");
+  const [singabilityScore, setSingabilityScore] = useState<number>(0);
+  const [voiceStyle, setVoiceStyle] = useState<string>("neutral");
+
   const navItems = [
     { name: "Home", id: "/" },
     { name: "Features", id: "features" },
@@ -21,6 +28,64 @@ export default function HomePage() {
     { name: "Contact", id: "/contact" },
   ];
 
+  const genres = [
+    { id: "pop", name: "Pop", icon: Music },
+    { id: "hiphop", name: "Hip-Hop", icon: Zap },
+    { id: "randb", name: "R&B", icon: Brain },
+    { id: "edm", name: "EDM", icon: BarChart3 },
+    { id: "lofi", name: "Lo-Fi", icon: Music },
+    { id: "cinematic", name: "Cinematic", icon: Wand2 },
+  ];
+
+  const voiceStyles = [
+    { id: "neutral", name: "Neutral" },
+    { id: "warm", name: "Warm" },
+    { id: "bright", name: "Bright" },
+    { id: "deep", name: "Deep" },
+    { id: "ethereal", name: "Ethereal" },
+    { id: "robotic", name: "Robotic" },
+    { id: "vintage", name: "Vintage" },
+    { id: "modern", name: "Modern" },
+  ];
+
+  const languages = [
+    { code: "es", name: "Spanish" },
+    { code: "fr", name: "French" },
+    { code: "de", name: "German" },
+    { code: "it", name: "Italian" },
+    { code: "pt", name: "Portuguese" },
+    { code: "ja", name: "Japanese" },
+    { code: "ko", name: "Korean" },
+    { code: "zh", name: "Mandarin" },
+  ];
+
+  const handleLyricsImprove = () => {
+    console.log("Improving lyrics:", lyricsInput);
+    // AI lyrics improvement logic would be integrated here
+  };
+
+  const handleTranslate = () => {
+    console.log("Translating to:", translationLanguage);
+    // AI translation logic would be integrated here
+  };
+
+  const handleAnalyzeSingability = () => {
+    // Simulate singability analysis
+    const score = Math.floor(Math.random() * 40) + 60; // 60-100 score
+    setSingabilityScore(score);
+    console.log("Singability score:", score);
+  };
+
+  const handleGenerateVoice = () => {
+    console.log("Generating voice with style:", voiceStyle);
+    // AI voice generation logic would be integrated here
+  };
+
+  const handleGenerateSong = () => {
+    console.log("Generating song in genre:", selectedGenre);
+    // AI song generation logic would be integrated here
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="text-shift"
@@ -46,15 +111,12 @@ export default function HomePage() {
       <div id="hero" data-section="hero">
         <HeroSplitKpi
           title="Your AI-Powered Music & Media Studio"
-          description="Create, produce, and monetize professional-quality music entirely in your browser. Write ideas, generate full songs in multiple styles, mix with DAW-style tools, and let AI guide your path to success."
+          description="Create, produce, and monetize professional-quality music entirely in your browser. Write ideas, generate full songs in multiple styles, mix with DAW-style tools, improve lyrics with AI, and let intelligent guidance maximize your success."
           background={{ variant: "glowing-orb" }}
           kpis={[
-            {
-              value: "60s",              label: "Song Generation Time"},
-            {
-              value: "8+",              label: "Voice Styles & Languages"},
-            {
-              value: "Multi-Stem",              label: "Professional Mixing"},
+            { value: "60s", label: "Song Generation Time" },
+            { value: "8+", label: "Voice Styles & Languages" },
+            { value: "Multi-Stem", label: "Professional Mixing" },
           ]}
           enableKpiAnimation={true}
           tag="Future of Music Production"
@@ -64,10 +126,8 @@ export default function HomePage() {
           mediaAnimation="slide-up"
           imagePosition="right"
           buttons={[
-            {
-              text: "Launch Studio",              href: "https://studio.dieter.ai"},
-            {
-              text: "Watch Demo",              href: "#features"},
+            { text: "Launch Studio", href: "https://studio.dieter.ai" },
+            { text: "Watch Demo", href: "#features" },
           ]}
           buttonAnimation="slide-up"
         />
@@ -76,14 +136,14 @@ export default function HomePage() {
       <div id="features" data-section="features">
         <FeatureCardSixteen
           title="Complete Studio in Your Browser"
-          description="Everything you need to create professional music without installing heavy software. Write, generate, mix, and export—all from one intuitive interface."
+          description="Everything you need to create professional music without installing heavy software. Write, generate, mix, improve, translate, and export—all from one intuitive interface."
           negativeCard={{
             items: [
               "Complex DAW software setup",              "Steep learning curve",              "Expensive plugins and licenses",              "Slow rendering times",              "Limited collaboration features"],
           }}
           positiveCard={{
             items: [
-              "Browser-based, instant access",              "AI-assisted songwriting & generation",              "No plugins needed, everything included",              "Real-time preview & playback",              "Integrated marketing guidance"],
+              "Browser-based, instant access",              "AI-assisted songwriting & generation",              "No plugins needed, everything included",              "Real-time preview & playback",              "Integrated AI lyrics, translation & voice generation"],
           }}
           animationType="slide-up"
           textboxLayout="default"
@@ -95,29 +155,184 @@ export default function HomePage() {
       <div id="tools" data-section="tools">
         <MediaAbout
           title="Professional Production Tools Built In"
-          description="From text-to-lyrics to multi-stem mixing with beat detection and visual waveforms. Dieter Studio combines AI power with real studio features for a seamless creative workflow."
+          description="From AI lyrics improvement and multi-language translation to singability analysis, voice generation, and genre-based song creation. Dieter Studio combines cutting-edge AI with real studio features for seamless creative workflow."
           imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ahi2vwDB5Ta9isxbMIvH8BKpyQ/professional-mixing-dashboard-featuring--1773052780322-6a11347b.png?_wi=1"
           imageAlt="Mixing console with faders and controls"
           useInvertedBackground={true}
           buttons={[
-            {
-              text: "Explore Features",              href: "#pricing"},
+            { text: "Explore Features", href: "#ai-features" },
           ]}
           buttonAnimation="opacity"
         />
       </div>
 
+      <div id="ai-features" data-section="ai-features" className="py-20 px-4 bg-background">
+        <div className="max-w-6xl mx-auto">
+          <div className="text-center mb-16">
+            <h2 className="text-4xl font-bold mb-4">Advanced AI Features</h2>
+            <p className="text-xl text-foreground/70 max-w-2xl mx-auto">
+              Harness the power of AI for lyrics improvement, translation, voice generation, and multi-genre song creation.
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+            {/* Lyrics Improvement */}
+            <div className="border border-card rounded-lg p-8 hover:shadow-lg transition-shadow">
+              <div className="flex items-center gap-3 mb-4">
+                <Wand2 className="w-6 h-6 text-primary-cta" />
+                <h3 className="text-xl font-bold">Lyrics Improvement</h3>
+              </div>
+              <p className="text-foreground/70 mb-4">Enhance your lyrics with AI suggestions for better rhyme, flow, and emotional impact.</p>
+              <div className="space-y-3">
+                <textarea
+                  className="w-full h-24 p-3 border border-card rounded bg-background text-foreground placeholder-foreground/50"
+                  placeholder="Paste your lyrics here..."
+                  value={lyricsInput}
+                  onChange={(e) => setLyricsInput(e.target.value)}
+                />
+                <button
+                  onClick={handleLyricsImprove}
+                  className="w-full bg-primary-cta text-background py-2 rounded font-semibold hover:opacity-90 transition"
+                >
+                  Improve Lyrics
+                </button>
+              </div>
+            </div>
+
+            {/* Translation */}
+            <div className="border border-card rounded-lg p-8 hover:shadow-lg transition-shadow">
+              <div className="flex items-center gap-3 mb-4">
+                <Languages className="w-6 h-6 text-primary-cta" />
+                <h3 className="text-xl font-bold">Multi-Language Translation</h3>
+              </div>
+              <p className="text-foreground/70 mb-4">Translate your lyrics and songs to 8+ languages while maintaining rhythm and meaning.</p>
+              <div className="space-y-3">
+                <select
+                  className="w-full p-3 border border-card rounded bg-background text-foreground"
+                  value={translationLanguage}
+                  onChange={(e) => setTranslationLanguage(e.target.value)}
+                >
+                  {languages.map((lang) => (
+                    <option key={lang.code} value={lang.code}>
+                      {lang.name}
+                    </option>
+                  ))}
+                </select>
+                <button
+                  onClick={handleTranslate}
+                  className="w-full bg-primary-cta text-background py-2 rounded font-semibold hover:opacity-90 transition"
+                >
+                  Translate Now
+                </button>
+              </div>
+            </div>
+
+            {/* Singability Analysis */}
+            <div className="border border-card rounded-lg p-8 hover:shadow-lg transition-shadow">
+              <div className="flex items-center gap-3 mb-4">
+                <BarChart3 className="w-6 h-6 text-primary-cta" />
+                <h3 className="text-xl font-bold">Singability Analysis</h3>
+              </div>
+              <p className="text-foreground/70 mb-4">Get detailed analysis on vocal range, breathability, and overall singability of your track.</p>
+              <div className="space-y-3">
+                <button
+                  onClick={handleAnalyzeSingability}
+                  className="w-full bg-primary-cta text-background py-2 rounded font-semibold hover:opacity-90 transition"
+                >
+                  Analyze Singability
+                </button>
+                {singabilityScore > 0 && (
+                  <div className="mt-4 p-4 bg-background border border-accent rounded">
+                    <p className="text-sm text-foreground/70 mb-2">Singability Score</p>
+                    <div className="flex items-end gap-2">
+                      <div className="text-3xl font-bold text-primary-cta">{singabilityScore}</div>
+                      <div className="text-foreground/70">/100</div>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {/* Voice Generation */}
+            <div className="border border-card rounded-lg p-8 hover:shadow-lg transition-shadow">
+              <div className="flex items-center gap-3 mb-4">
+                <Brain className="w-6 h-6 text-primary-cta" />
+                <h3 className="text-xl font-bold">AI Voice Generation</h3>
+              </div>
+              <p className="text-foreground/70 mb-4">Generate natural-sounding vocals in 8+ styles and languages with full emotional control.</p>
+              <div className="space-y-3">
+                <div className="grid grid-cols-2 gap-2">
+                  {voiceStyles.map((style) => (
+                    <button
+                      key={style.id}
+                      onClick={() => setVoiceStyle(style.id)}
+                      className={`p-2 rounded text-sm font-semibold transition ${
+                        voiceStyle === style.id
+                          ? "bg-primary-cta text-background"
+                          : "bg-background border border-card text-foreground hover:border-primary-cta"
+                      }`}
+                    >
+                      {style.name}
+                    </button>
+                  ))}
+                </div>
+                <button
+                  onClick={handleGenerateVoice}
+                  className="w-full bg-primary-cta text-background py-2 rounded font-semibold hover:opacity-90 transition"
+                >
+                  Generate Voice
+                </button>
+              </div>
+            </div>
+          </div>
+
+          {/* Song Generation by Genre */}
+          <div className="mt-12 border border-card rounded-lg p-8 hover:shadow-lg transition-shadow">
+            <div className="flex items-center gap-3 mb-6">
+              <Music className="w-6 h-6 text-primary-cta" />
+              <h3 className="text-2xl font-bold">Genre-Based Song Generation</h3>
+            </div>
+            <p className="text-foreground/70 mb-6">Create full songs tailored to 6 different genres with AI-optimized composition and arrangement.</p>
+            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3 mb-6">
+              {genres.map((genre) => {
+                const IconComponent = genre.icon;
+                return (
+                  <button
+                    key={genre.id}
+                    onClick={() => setSelectedGenre(genre.id)}
+                    className={`p-4 rounded-lg transition flex flex-col items-center gap-2 ${
+                      selectedGenre === genre.id
+                        ? "bg-primary-cta text-background shadow-lg"
+                        : "bg-background border border-card text-foreground hover:border-primary-cta"
+                    }`}
+                  >
+                    <IconComponent className="w-5 h-5" />
+                    <span className="text-sm font-semibold">{genre.name}</span>
+                  </button>
+                );
+              })}
+            </div>
+            <button
+              onClick={handleGenerateSong}
+              className="w-full bg-primary-cta text-background py-3 rounded-lg font-bold text-lg hover:opacity-90 transition"
+            >
+              Generate {genres.find((g) => g.id === selectedGenre)?.name || "Song"} Track
+            </button>
+          </div>
+        </div>
+      </div>
+
       <div id="ai-director" data-section="ai-director">
         <FeatureCardSixteen
           title="AI Director: Your Personal Music Manager"
-          description="Get intelligent suggestions on where to publish, how to promote, and which platforms maximize your reach and income potential."
+          description="Get intelligent suggestions on where to publish, how to promote, and which platforms maximize your reach and income potential. Analyze your finished tracks for optimal distribution strategy."
           negativeCard={{
             items: [
               "Music sits on your hard drive",              "Guess where to distribute",              "Manual metadata entry",              "No promotion strategy",              "Leave money on the table"],
           }}
           positiveCard={{
             items: [
-              "AI analyzes your track",              "Recommends best platforms",              "Auto-generates metadata & tags",              "Suggests promotional strategies",              "Identifies monetization paths"],
+              "AI analyzes your track in real-time",              "Recommends best platforms instantly",              "Auto-generates metadata & tags",              "Suggests promotional strategies",              "Identifies all monetization paths"],
           }}
           animationType="blur-reveal"
           textboxLayout="default"
@@ -147,16 +362,13 @@ export default function HomePage() {
                 "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ahi2vwDB5Ta9isxbMIvH8BKpyQ/professional-headshot-of-a-male-electron-1773052781333-48ae8552.png",              imageAlt: "Alex Thompson - Electronic Artist"},
           ]}
           kpiItems={[
-            {
-              value: "15K+",              label: "Active Creators"},
-            {
-              value: "500K+",              label: "Songs Generated"},
-            {
-              value: "98%",              label: "Satisfaction Rate"},
+            { value: "15K+", label: "Active Creators" },
+            { value: "500K+", label: "Songs Generated" },
+            { value: "98%", label: "Satisfaction Rate" },
           ]}
           animationType="slide-up"
           title="Loved by Creators Worldwide"
-          description="Musicians, producers, and artists trust Dieter Studio to bring their ideas to life."
+          description="Musicians, producers, and artists trust Dieter Studio to bring their ideas to life with AI-powered innovation."
           textboxLayout="default"
           useInvertedBackground={false}
         />
@@ -168,35 +380,31 @@ export default function HomePage() {
             {
               id: "starter",              badge: "Starter",              badgeIcon: Music,
               price: "$9/mo",              subtitle: "Perfect for exploring",              buttons: [
-                {
-                  text: "Start Free",                  href: "https://studio.dieter.ai/signup"},
+                { text: "Start Free", href: "https://studio.dieter.ai/signup" },
               ],
               features: [
-                "5 song generations/month",                "Basic mixing tools",                "MP3 export",                "Community access",                "AI Director suggestions"],
+                "5 song generations/month",                "Basic lyrics improvement",                "Translation to 3 languages",                "Basic singability analysis",                "MP3 export",                "Community access"],
             },
             {
               id: "pro",              badge: "Professional",              badgeIcon: Sparkles,
               price: "$29/mo",              subtitle: "For serious creators",              buttons: [
-                {
-                  text: "Get Started",                  href: "https://studio.dieter.ai/signup"},
-                {
-                  text: "View Details",                  href: "#"},
+                { text: "Get Started", href: "https://studio.dieter.ai/signup" },
+                { text: "View Details", href: "#" },
               ],
               features: [
-                "Unlimited song generations",                "Full mixing suite with EQ",                "WAV + MP3 exports",                "Stem packs for DAWs",                "Priority AI Director guidance",                "Beat detection & sync"],
+                "Unlimited song generations",                "Advanced lyrics improvement with AI",                "Full translation (8+ languages)",                "Advanced singability analysis",                "8+ AI voice styles",                "Full mixing suite with EQ",                "WAV + MP3 exports",                "Stem packs for DAWs"],
             },
             {
               id: "studio",              badge: "Studio Pro",              badgeIcon: Award,
               price: "$79/mo",              subtitle: "For studios & labels",              buttons: [
-                {
-                  text: "Contact Sales",                  href: "https://studio.dieter.ai/contact"},
+                { text: "Contact Sales", href: "https://studio.dieter.ai/contact" },
               ],
               features: [
-                "Unlimited everything",                "Video collaboration page",                "Cloud storage & backups",                "API access for integrations",                "Team collaboration",                "Advanced AI Director",                "White-label options"],
+                "Unlimited everything",                "Priority AI feature access",                "Custom voice training",                "Advanced lyrics & translation API",                "Video collaboration page",                "Cloud storage & backups",                "API access for integrations",                "Team collaboration"],
             },
           ]}
           title="Simple, Transparent Pricing"
-          description="Choose the plan that fits your creative needs. Scale as you grow."
+          description="Choose the plan that fits your creative needs. Scale as you grow with advanced AI features."
           animationType="slide-up"
           textboxLayout="default"
           useInvertedBackground={false}
@@ -208,25 +416,31 @@ export default function HomePage() {
           faqs={[
             {
               id: "1",              title: "What makes Dieter different from traditional DAWs?",              content:
-                "Dieter Studio runs entirely in your browser—no installation needed. It combines AI-powered songwriting and generation with professional mixing tools, making production faster and more intuitive. Plus, the integrated AI Director helps you monetize and promote your work automatically."},
+                "Dieter Studio runs entirely in your browser—no installation needed. It combines AI-powered songwriting, lyrics improvement, voice generation, and multi-language translation with professional mixing tools. The integrated AI Director helps you monetize and promote your work automatically."},
             {
-              id: "2",              title: "Can I import my own audio and stems?",              content:
-                "Yes! Pro and Studio Pro plans support importing audio files and working with existing stems. You can mix your own recordings alongside AI-generated tracks, and export everything as individual stems for use in external DAWs."},
+              id: "2",              title: "How does the lyrics improvement AI work?",              content:
+                "Our AI analyzes your lyrics for rhyme schemes, flow, emotional impact, and singability. It provides real-time suggestions to enhance word choice, add metaphors, improve rhythm, and maintain your artistic voice while making your lyrics more compelling."},
             {
-              id: "3",              title: "What voice styles and languages are supported?",              content:
-                "We support 8+ voice styles including Afrikaans, German, Elf/Fantasy, Robotic, Alien, Country, and more. Each style is fully customizable in pitch, pace, and emotional tone. Additional languages are being added regularly."},
+              id: "3",              title: "What languages does the translation feature support?",              content:
+                "We support 8+ languages including Spanish, French, German, Italian, Portuguese, Japanese, Korean, and Mandarin. The translation preserves the rhythm and rhyme scheme of the original lyrics, making translated songs singable and maintaining the original intent."},
             {
-              id: "4",              title: "How does the AI Director help with monetization?",              content:
-                "The AI Director analyzes your finished track and recommends the best platforms for distribution (Spotify, Apple Music, etc.), suggests social media promotional angles, identifies licensing opportunities, and helps you maximize income through multiple revenue streams."},
+              id: "4",              title: "What does singability analysis measure?",              content:
+                "Singability analysis evaluates vocal range requirements, breath marks, consonant clarity, vowel transitions, and overall ease of performance. It provides scores for different vocal skill levels and suggests modifications if needed to improve performance comfort."},
             {
-              id: "5",              title: "Can I collaborate with other creators?",              content:
-                "Yes, Studio Pro plan includes full collaboration features. You can invite team members, work on projects together in real-time, share stems, and provide feedback directly within the studio. Video collaboration page is also available for visual project planning."},
+              id: "5",              title: "How many voice styles does the AI voice generation offer?",              content:
+                "We offer 8+ voice styles including Neutral, Warm, Bright, Deep, Ethereal, Robotic, Vintage, and Modern. Each style is fully customizable in pitch, pace, emotional tone, and can be applied across all supported languages for maximum creative flexibility."},
             {
-              id: "6",              title: "What file formats can I export?",              content:
-                "All plans support MP3 export. Pro and Studio Pro include WAV, stem packs (individual drum, bass, vocal, chord tracks), and ZIP project exports. High-quality 320kbps MP3 and 24-bit WAV available across all tiers."},
+              id: "6",              title: "What genres are supported for song generation?",              content:
+                "We support 6 genres: Pop, Hip-Hop, R&B, EDM, Lo-Fi, and Cinematic. Each genre has AI-optimized composition, arrangement, and production parameters to ensure authentic genre characteristics while maintaining your unique creative input."},
+            {
+              id: "7",              title: "Can I combine multiple AI features in one project?",              content:
+                "Absolutely! You can generate a song, improve the lyrics, translate it to multiple languages, analyze singability, add different voice styles, and then professionally mix it all within the same project. This seamless workflow is what makes Dieter Studio unique."},
+            {
+              id: "8",              title: "How does the AI Director help with monetization?",              content:
+                "The AI Director analyzes your finished track and recommends the best distribution platforms, suggests social media promotional angles, identifies licensing opportunities, and helps you maximize income through multiple revenue streams."},
           ]}
           title="Frequently Asked Questions"
-          description="Everything you need to know about Dieter Studio."
+          description="Everything you need to know about Dieter Studio's AI-powered features."
           textboxLayout="default"
           useInvertedBackground={false}
           faqsAnimation="slide-up"
@@ -235,15 +449,13 @@ export default function HomePage() {
 
       <div id="contact" data-section="contact">
         <ContactText
-          text="Ready to revolutionize your music creation? Start making professional tracks today. No credit card required."
+          text="Ready to revolutionize your music creation? Start making professional tracks with AI-powered lyrics, translation, voice generation, and more. Begin your creative journey today. No credit card required."
           animationType="entrance-slide"
           background={{ variant: "sparkles-gradient" }}
           useInvertedBackground={false}
           buttons={[
-            {
-              text: "Launch Dieter Studio",              href: "https://studio.dieter.ai"},
-            {
-              text: "Book a Demo",              href: "mailto:hello@dieter.studio"},
+            { text: "Launch Dieter Studio", href: "https://studio.dieter.ai" },
+            { text: "Book a Demo", href: "mailto:hello@dieter.studio" },
           ]}
         />
       </div>
@@ -254,7 +466,7 @@ export default function HomePage() {
             <div>
               <h3 className="font-bold text-lg mb-4">Dieter Studio</h3>
               <p className="text-gray-400 text-sm">
-                AI-powered music production for creators worldwide.
+                AI-powered music production with lyrics improvement, translation, voice generation, and intelligent monetization guidance.
               </p>
             </div>
             <div>
@@ -353,4 +565,4 @@ export default function HomePage() {
       </footer>
     </ThemeProvider>
   );
-}
+}

src/app/studio/page.tsx

@@ -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>
   );
-}
+}