Add src/components/LanguageSwitcher.tsx

src/app/about/page.tsx

@@ -6,6 +6,7 @@ import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatin
 import HeroLogoBillboard from "@/components/sections/hero/HeroLogoBillboard";
 import FeatureCardTwentyOne from "@/components/sections/feature/FeatureCardTwentyOne";
 import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
+import LanguageSwitcher from "@/components/LanguageSwitcher";
 
 export default function AboutPage() {
   const navItems = [
@@ -17,8 +18,7 @@ export default function AboutPage() {
 
   const footerColumns = [
     {
-      title: "Product",
+      title: "Product",      items: [
-      items: [
         { label: "Create Music", href: "/create" },
         { label: "Features", href: "/" },
         { label: "Pricing", href: "/pricing" },
@@ -26,8 +26,7 @@ export default function AboutPage() {
       ],
     },
     {
-      title: "Company",
+      title: "Company",      items: [
-      items: [
         { label: "About Us", href: "/about" },
         { label: "Blog", href: "#" },
         { label: "Careers", href: "#" },
@@ -35,8 +34,7 @@ export default function AboutPage() {
       ],
     },
     {
-      title: "Legal",
+      title: "Legal",      items: [
-      items: [
         { label: "Privacy Policy", href: "#" },
         { label: "Terms of Service", href: "#" },
         { label: "License Agreement", href: "#" },
@@ -58,14 +56,14 @@ export default function AboutPage() {
       secondaryButtonStyle="solid"
       headingFontWeight="semibold"
     >
+      <LanguageSwitcher />
+      
       <div id="nav" data-section="nav">
         <NavbarLayoutFloatingOverlay
           brandName="Beatcraft"
           navItems={navItems}
           button={{
-            text: "Create Now",
+            text: "Create Now",            href: "/create"}}
-            href: "/create",
-          }}
         />
       </div>
 
@@ -93,23 +91,14 @@ export default function AboutPage() {
           description="Beatcraft exists to remove barriers to creative expression. We believe everyone should have access to professional-grade music and video creation tools."
           accordionItems={[
             {
-              id: "1",
+              id: "1",              title: "Our Mission",              content:
-              title: "Our Mission",
+                "Democratize music and video creation by providing free, unlimited access to AI-powered creative tools. We're breaking down the barriers that prevent talented people from sharing their art with the world."},
-              content:
-                "Democratize music and video creation by providing free, unlimited access to AI-powered creative tools. We're breaking down the barriers that prevent talented people from sharing their art with the world.",
-            },
             {
-              id: "2",
+              id: "2",              title: "Our Values",              content:
-              title: "Our Values",
+                "Creativity for all: No barriers based on skill, budget, or background. Transparency: Honest pricing, clear policies, user-first decisions. Sustainability: Building for the long term, supporting creators and artists ethically."},
-              content:
-                "Creativity for all: No barriers based on skill, budget, or background. Transparency: Honest pricing, clear policies, user-first decisions. Sustainability: Building for the long term, supporting creators and artists ethically.",
-            },
             {
-              id: "3",
+              id: "3",              title: "Our Impact",              content:
-              title: "Our Impact",
+                "Millions of people have created music and videos with Beatcraft. We've removed the equipment and software barriers that once kept creative expression out of reach. Our community is growing daily."},
-              content:
-                "Millions of people have created music and videos with Beatcraft. We've removed the equipment and software barriers that once kept creative expression out of reach. Our community is growing daily.",
-            },
           ]}
           imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARFZ7g38KXQEv5oxCwRxl4r5e3/a-modern-sleek-ai-music-generation-dashb-1772547717750-67b37221.png?_wi=3"
           imageAlt="Beatcraft Platform"
@@ -128,23 +117,14 @@ export default function AboutPage() {
           description="Beatcraft started as a passion project and has grown into a community of millions of creators worldwide."
           accordionItems={[
             {
-              id: "1",
+              id: "1",              title: "The Beginning",              content:
-              title: "The Beginning",
+                "Founded in 2024 by a team of musicians, engineers, and designers frustrated by expensive, complicated music creation software. We decided to build something different - powerful, free, and intuitive."},
-              content:
-                "Founded in 2024 by a team of musicians, engineers, and designers frustrated by expensive, complicated music creation software. We decided to build something different - powerful, free, and intuitive.",
-            },
             {
-              id: "2",
+              id: "2",              title: "Rapid Growth",              content:
-              title: "Rapid Growth",
+                "In just 12 months, over 2 million songs have been created on Beatcraft. Our community spans 150+ countries. We've reached 500,000 active creators monthly. The response has been incredible."},
-              content:
-                "In just 12 months, over 2 million songs have been created on Beatcraft. Our community spans 150+ countries. We've reached 500,000 active creators monthly. The response has been incredible.",
-            },
             {
-              id: "3",
+              id: "3",              title: "Our Future",              content:
-              title: "Our Future",
+                "We're expanding into new creative tools, building advanced API capabilities, and deepening our creator partnerships. The future of music and video production is collaborative, accessible, and creative. That's Beatcraft."},
-              content:
-                "We're expanding into new creative tools, building advanced API capabilities, and deepening our creator partnerships. The future of music and video production is collaborative, accessible, and creative. That's Beatcraft.",
-            },
           ]}
           imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARFZ7g38KXQEv5oxCwRxl4r5e3/a-dynamic-music-creation-workflow-visual-1772547718312-07587ebb.png?_wi=3"
           imageAlt="Platform Growth"
@@ -163,4 +143,4 @@ export default function AboutPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/create/page.tsx

@@ -6,6 +6,7 @@ import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatin
 import HeroLogoBillboard from "@/components/sections/hero/HeroLogoBillboard";
 import FeatureCardTwentyOne from "@/components/sections/feature/FeatureCardTwentyOne";
 import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
+import LanguageSwitcher from "@/components/LanguageSwitcher";
 
 export default function CreatePage() {
   const navItems = [
@@ -17,8 +18,7 @@ export default function CreatePage() {
 
   const footerColumns = [
     {
-      title: "Product",
+      title: "Product",      items: [
-      items: [
         { label: "Create Music", href: "/create" },
         { label: "Features", href: "/" },
         { label: "Pricing", href: "/pricing" },
@@ -26,8 +26,7 @@ export default function CreatePage() {
       ],
     },
     {
-      title: "Company",
+      title: "Company",      items: [
-      items: [
         { label: "About Us", href: "/about" },
         { label: "Blog", href: "#" },
         { label: "Careers", href: "#" },
@@ -35,8 +34,7 @@ export default function CreatePage() {
       ],
     },
     {
-      title: "Legal",
+      title: "Legal",      items: [
-      items: [
         { label: "Privacy Policy", href: "#" },
         { label: "Terms of Service", href: "#" },
         { label: "License Agreement", href: "#" },
@@ -58,14 +56,14 @@ export default function CreatePage() {
       secondaryButtonStyle="solid"
       headingFontWeight="semibold"
     >
+      <LanguageSwitcher />
+      
       <div id="nav" data-section="nav">
         <NavbarLayoutFloatingOverlay
           brandName="Beatcraft"
           navItems={navItems}
           button={{
-            text: "Create Now",
+            text: "Create Now",            href: "/create"}}
-            href: "/create",
-          }}
         />
       </div>
 
@@ -93,23 +91,14 @@ export default function CreatePage() {
           description="Everything you need to create professional-quality music and videos without any experience."
           accordionItems={[
             {
-              id: "1",
+              id: "1",              title: "Advanced Music Customization",              content:
-              title: "Advanced Music Customization",
+                "Fine-tune every aspect of your music. Adjust tempo, key, instrumentation, and effects. Real-time preview lets you hear changes instantly. Mix multiple tracks together for complex compositions."},
-              content:
-                "Fine-tune every aspect of your music. Adjust tempo, key, instrumentation, and effects. Real-time preview lets you hear changes instantly. Mix multiple tracks together for complex compositions.",
-            },
             {
-              id: "2",
+              id: "2",              title: "Video Synchronization",              content:
-              title: "Video Synchronization",
+                "Our AI automatically synchronizes your music with dynamic visuals. Choose from multiple visual styles and effects. Add text, animations, and branding. Create social media content in seconds."},
-              content:
-                "Our AI automatically synchronizes your music with dynamic visuals. Choose from multiple visual styles and effects. Add text, animations, and branding. Create social media content in seconds.",
-            },
             {
-              id: "3",
+              id: "3",              title: "Collaboration & Sharing",              content:
-              title: "Collaboration & Sharing",
+                "Save your projects and come back anytime. Share drafts with collaborators for feedback. Direct export to YouTube, TikTok, and other platforms. Collaborate in real-time with team members."},
-              content:
-                "Save your projects and come back anytime. Share drafts with collaborators for feedback. Direct export to YouTube, TikTok, and other platforms. Collaborate in real-time with team members.",
-            },
           ]}
           imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARFZ7g38KXQEv5oxCwRxl4r5e3/a-dynamic-music-creation-workflow-visual-1772547718312-07587ebb.png?_wi=2"
           imageAlt="Advanced Creation Tools"
@@ -128,23 +117,14 @@ export default function CreatePage() {
           description="Start with professionally designed templates that match your vision. Customize and create in minutes."
           accordionItems={[
             {
-              id: "1",
+              id: "1",              title: "Genre-Specific Templates",              content:
-              title: "Genre-Specific Templates",
+                "Choose from templates for pop, hip-hop, electronic, orchestral, ambient, and 45+ other genres. Each template comes with suggested customizations. Perfect for different moods and use cases."},
-              content:
-                "Choose from templates for pop, hip-hop, electronic, orchestral, ambient, and 45+ other genres. Each template comes with suggested customizations. Perfect for different moods and use cases.",
-            },
             {
-              id: "2",
+              id: "2",              title: "Platform-Optimized Formats",              content:
-              title: "Platform-Optimized Formats",
+                "Templates optimized for YouTube, TikTok, Instagram Reels, and more. Automatic sizing and format adjustment. Built-in captions and effect recommendations for each platform."},
-              content:
-                "Templates optimized for YouTube, TikTok, Instagram Reels, and more. Automatic sizing and format adjustment. Built-in captions and effect recommendations for each platform.",
-            },
             {
-              id: "3",
+              id: "3",              title: "Business & Professional Templates",              content:
-              title: "Business & Professional Templates",
+                "Corporate background music, podcast intros, commercial jingles, and promotional tracks. Brand-safe music templates. Perfect for business and marketing content."},
-              content:
-                "Corporate background music, podcast intros, commercial jingles, and promotional tracks. Brand-safe music templates. Perfect for business and marketing content.",
-            },
           ]}
           imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARFZ7g38KXQEv5oxCwRxl4r5e3/three-step-workflow-diagram-showing-1-te-1772547720090-d8cb9c4c.png?_wi=2"
           imageAlt="Template Library"
@@ -163,4 +143,4 @@ export default function CreatePage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/page.tsx

@@ -10,7 +10,8 @@ import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCar
 import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
 import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
 import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
-import { Sparkles, Zap, Award } from "lucide-react";
+import { Sparkles, Zap, Award, Globe } from "lucide-react";
+import LanguageSwitcher from "@/components/LanguageSwitcher";
 
 export default function HomePage() {
   const navItems = [
@@ -60,6 +61,8 @@ export default function HomePage() {
       secondaryButtonStyle="solid"
       headingFontWeight="semibold"
     >
+      <LanguageSwitcher />
+      
       <div id="nav" data-section="nav">
         <NavbarLayoutFloatingOverlay
           brandName="Beatcraft"
@@ -74,7 +77,7 @@ export default function HomePage() {
           logoText="Beatcraft"
           description="Create stunning AI-generated music from 10 seconds to 3.5 minutes on any theme. Then generate professional music videos instantly, all completely free."
           buttons={[
-            { text: "Create Free Music Now", href: "/create" },
+            { text: "Start Creating", href: "/create" },
             { text: "Watch Demo", href: "#features" },
           ]}
           background={{ variant: "sparkles-gradient" }}

src/app/pricing/page.tsx

@@ -6,6 +6,7 @@ import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatin
 import PricingCardTwo from "@/components/sections/pricing/PricingCardTwo";
 import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
 import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
+import LanguageSwitcher from "@/components/LanguageSwitcher";
 import { Sparkles, Zap, Award } from "lucide-react";
 
 export default function PricingPage() {
@@ -18,8 +19,7 @@ export default function PricingPage() {
 
   const footerColumns = [
     {
-      title: "Product",
+      title: "Product",      items: [
-      items: [
         { label: "Create Music", href: "/create" },
         { label: "Features", href: "/" },
         { label: "Pricing", href: "/pricing" },
@@ -27,8 +27,7 @@ export default function PricingPage() {
       ],
     },
     {
-      title: "Company",
+      title: "Company",      items: [
-      items: [
         { label: "About Us", href: "/about" },
         { label: "Blog", href: "#" },
         { label: "Careers", href: "#" },
@@ -36,8 +35,7 @@ export default function PricingPage() {
       ],
     },
     {
-      title: "Legal",
+      title: "Legal",      items: [
-      items: [
         { label: "Privacy Policy", href: "#" },
         { label: "Terms of Service", href: "#" },
         { label: "License Agreement", href: "#" },
@@ -59,14 +57,14 @@ export default function PricingPage() {
       secondaryButtonStyle="solid"
       headingFontWeight="semibold"
     >
+      <LanguageSwitcher />
+      
       <div id="nav" data-section="nav">
         <NavbarLayoutFloatingOverlay
           brandName="Beatcraft"
           navItems={navItems}
           button={{
-            text: "Create Now",
+            text: "Create Now",            href: "/create"}}
-            href: "/create",
-          }}
         />
       </div>
 
@@ -78,61 +76,31 @@ export default function PricingPage() {
           tagAnimation="blur-reveal"
           plans={[
             {
-              id: "free",
+              id: "free",              badge: "Free Forever",              badgeIcon: Sparkles,
-              badge: "Free Forever",
+              price: "$0",              subtitle: "Perfect for experimenting",              buttons: [
-              badgeIcon: Sparkles,
-              price: "$0",
-              subtitle: "Perfect for experimenting",
-              buttons: [
                 { text: "Get Started", href: "/create" },
                 { text: "Learn More", href: "#" },
               ],
               features: [
-                "Unlimited music generation",
+                "Unlimited music generation",                "Unlimited video generation",                "All themes and genres",                "10 seconds to 3.5 minutes",                "Standard quality export",                "Personal use license"],
-                "Unlimited video generation",
-                "All themes and genres",
-                "10 seconds to 3.5 minutes",
-                "Standard quality export",
-                "Personal use license",
-              ],
             },
             {
-              id: "pro",
+              id: "pro",              badge: "Pro Power",              badgeIcon: Zap,
-              badge: "Pro Power",
+              price: "$9.99",              subtitle: "For serious creators",              buttons: [
-              badgeIcon: Zap,
-              price: "$9.99",
-              subtitle: "For serious creators",
-              buttons: [
                 { text: "Start Pro Trial", href: "/create" },
                 { text: "Contact Sales", href: "#" },
               ],
               features: [
-                "Everything in Free",
+                "Everything in Free",                "4K video quality",                "Commercial licenses",                "Priority processing",                "Advanced customization",                "Batch generation"],
-                "4K video quality",
-                "Commercial licenses",
-                "Priority processing",
-                "Advanced customization",
-                "Batch generation",
-              ],
             },
             {
-              id: "studio",
+              id: "studio",              badge: "Studio Edition",              badgeIcon: Award,
-              badge: "Studio Edition",
+              price: "$29.99",              subtitle: "For professionals",              buttons: [
-              badgeIcon: Award,
-              price: "$29.99",
-              subtitle: "For professionals",
-              buttons: [
                 { text: "Start Studio", href: "/create" },
                 { text: "Schedule Demo", href: "#" },
               ],
               features: [
-                "Everything in Pro",
+                "Everything in Pro",                "8K video quality",                "API access",                "White-label options",                "Dedicated support",                "Advanced AI models"],
-                "8K video quality",
-                "API access",
-                "White-label options",
-                "Dedicated support",
-                "Advanced AI models",
-              ],
             },
           ]}
           textboxLayout="default"
@@ -150,41 +118,23 @@ export default function PricingPage() {
           tagAnimation="blur-reveal"
           faqs={[
             {
-              id: "1",
+              id: "1",              title: "Can I upgrade or downgrade anytime?",              content:
-              title: "Can I upgrade or downgrade anytime?",
+                "Yes! Switch between plans anytime. Upgrades take effect immediately. Downgrades apply to your next billing cycle. No cancellation fees or long-term commitments required."},
-              content:
-                "Yes! Switch between plans anytime. Upgrades take effect immediately. Downgrades apply to your next billing cycle. No cancellation fees or long-term commitments required.",
-            },
             {
-              id: "2",
+              id: "2",              title: "What payment methods do you accept?",              content:
-              title: "What payment methods do you accept?",
+                "We accept all major credit cards, PayPal, Google Pay, and Apple Pay. Enterprise customers can use invoicing. All payments are secure and encrypted."},
-              content:
-                "We accept all major credit cards, PayPal, Google Pay, and Apple Pay. Enterprise customers can use invoicing. All payments are secure and encrypted.",
-            },
             {
-              id: "3",
+              id: "3",              title: "Is there a student or nonprofit discount?",              content:
-              title: "Is there a student or nonprofit discount?",
+                "Yes! Students get 50% off Pro plans with valid student ID. Nonprofits qualify for free Studio plans. Contact our team for verification and setup."},
-              content:
-                "Yes! Students get 50% off Pro plans with valid student ID. Nonprofits qualify for free Studio plans. Contact our team for verification and setup.",
-            },
             {
-              id: "4",
+              id: "4",              title: "What happens to my projects if I cancel?",              content:
-              title: "What happens to my projects if I cancel?",
+                "Your projects stay yours forever. You can still download and export them. When you resubscribe, all your work is available. No data loss or forced deletions."},
-              content:
-                "Your projects stay yours forever. You can still download and export them. When you resubscribe, all your work is available. No data loss or forced deletions.",
-            },
             {
-              id: "5",
+              id: "5",              title: "Do you offer custom enterprise plans?",              content:
-              title: "Do you offer custom enterprise plans?",
+                "Absolutely! We offer custom pricing for teams and enterprises. Bulk licensing, dedicated support, and API access available. Contact sales for a quote."},
-              content:
-                "Absolutely! We offer custom pricing for teams and enterprises. Bulk licensing, dedicated support, and API access available. Contact sales for a quote.",
-            },
             {
-              id: "6",
+              id: "6",              title: "Is there a free trial for paid plans?",              content:
-              title: "Is there a free trial for paid plans?",
+                "Yes! Try Pro or Studio for 7 days free. No credit card required. Full access to all paid features. Automatically downgrade to Free if you don't upgrade after trial."},
-              content:
-                "Yes! Try Pro or Studio for 7 days free. No credit card required. Full access to all paid features. Automatically downgrade to Free if you don't upgrade after trial.",
-            },
           ]}
           imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARFZ7g38KXQEv5oxCwRxl4r5e3/a-friendly-modern-customer-support-scene-1772547717885-6d6da3ef.png?_wi=2"
           imageAlt="Billing Support"
@@ -205,4 +155,4 @@ export default function PricingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/components/LanguageSwitcher.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Globe } from "lucide-react";
+
+interface Language {
+  code: string;
+  name: string;
+  flag: string;
+}
+
+const LANGUAGES: Language[] = [
+  { code: "en", name: "English", flag: "🇺🇸" },
+  { code: "es", name: "Español", flag: "🇪🇸" },
+  { code: "fr", name: "Français", flag: "🇫🇷" },
+  { code: "de", name: "Deutsch", flag: "🇩🇪" },
+  { code: "it", name: "Italiano", flag: "🇮🇹" },
+  { code: "pt", name: "Português", flag: "🇵🇹" },
+  { code: "ja", name: "日本語", flag: "🇯🇵" },
+  { code: "zh", name: "中文", flag: "🇨🇳" },
+  { code: "ko", name: "한국어", flag: "🇰🇷" },
+];
+
+export default function LanguageSwitcher() {
+  const [currentLanguage, setCurrentLanguage] = useState<string>("en");
+  const [isOpen, setIsOpen] = useState(false);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    // Get stored language preference from localStorage
+    const stored = typeof window !== "undefined" ? localStorage.getItem("beatcraft-language") : null;
+    if (stored) {
+      setCurrentLanguage(stored);
+      document.documentElement.lang = stored;
+    }
+  }, []);
+
+  const handleLanguageChange = (code: string) => {
+    setCurrentLanguage(code);
+    localStorage.setItem("beatcraft-language", code);
+    document.documentElement.lang = code;
+    setIsOpen(false);
+    // Dispatch custom event for components to listen to language changes
+    window.dispatchEvent(new CustomEvent("languageChange", { detail: { language: code } }));
+  };
+
+  const currentLang = LANGUAGES.find((lang) => lang.code === currentLanguage) || LANGUAGES[0];
+
+  if (!mounted) return null;
+
+  return (
+    <div className="fixed top-4 right-4 z-50">
+      <div className="relative">
+        <button
+          onClick={() => setIsOpen(!isOpen)}
+          className="flex items-center gap-2 px-3 py-2 rounded-lg bg-primary-cta/10 hover:bg-primary-cta/20 border border-primary-cta/20 transition-all duration-200"
+          aria-label="Change language"
+        >
+          <Globe size={18} className="text-primary-cta" />
+          <span className="text-sm font-medium text-foreground">{currentLang.flag}</span>
+        </button>
+
+        {isOpen && (
+          <div className="absolute top-full right-0 mt-2 bg-card border border-foreground/10 rounded-lg shadow-lg overflow-hidden min-w-48">
+            <div className="max-h-96 overflow-y-auto">
+              {LANGUAGES.map((lang) => (
+                <button
+                  key={lang.code}
+                  onClick={() => handleLanguageChange(lang.code)}
+                  className={`w-full px-4 py-2 text-left flex items-center gap-3 transition-colors duration-150 ${
+                    currentLanguage === lang.code
+                      ? "bg-primary-cta/20 text-primary-cta"
+                      : "hover:bg-foreground/5 text-foreground"
+                  }`}
+                >
+                  <span className="text-lg">{lang.flag}</span>
+                  <span className="text-sm font-medium">{lang.name}</span>
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}