Compare commits
15 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| a6a7a63f17 | |||
| f8c49756d0 | |||
| 3e19befe65 | |||
| fa1f820bf8 | |||
| 279660559e | |||
| 8463dff4dc | |||
| 0510ebff9d | |||
| a6bc3803fd | |||
| 5cd72106ae | |||
| 9ea2d6607a | |||
| a1677eec28 | |||
| 4e2aa46d73 | |||
| 7ad712b6fe | |||
| 01ca7893d0 | |||
| 540204965a |
@@ -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",
|
||||
items: [
|
||||
title: "Product", items: [
|
||||
{ label: "Create Music", href: "/create" },
|
||||
{ label: "Features", href: "/" },
|
||||
{ label: "Pricing", href: "/pricing" },
|
||||
@@ -26,8 +26,7 @@ export default function AboutPage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Blog", href: "#" },
|
||||
{ label: "Careers", href: "#" },
|
||||
@@ -35,8 +34,7 @@ export default function AboutPage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
title: "Legal", 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",
|
||||
href: "/create",
|
||||
}}
|
||||
text: "Create Now", 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",
|
||||
title: "Our Mission",
|
||||
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: "1", title: "Our Mission", 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",
|
||||
title: "Our Values",
|
||||
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: "2", title: "Our Values", 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",
|
||||
title: "Our Impact",
|
||||
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.",
|
||||
},
|
||||
id: "3", title: "Our Impact", 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",
|
||||
title: "The Beginning",
|
||||
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: "1", title: "The Beginning", 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",
|
||||
title: "Rapid Growth",
|
||||
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: "2", title: "Rapid Growth", 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",
|
||||
title: "Our Future",
|
||||
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.",
|
||||
},
|
||||
id: "3", title: "Our Future", 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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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",
|
||||
items: [
|
||||
title: "Product", items: [
|
||||
{ label: "Create Music", href: "/create" },
|
||||
{ label: "Features", href: "/" },
|
||||
{ label: "Pricing", href: "/pricing" },
|
||||
@@ -26,8 +26,7 @@ export default function CreatePage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Blog", href: "#" },
|
||||
{ label: "Careers", href: "#" },
|
||||
@@ -35,8 +34,7 @@ export default function CreatePage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
title: "Legal", 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",
|
||||
href: "/create",
|
||||
}}
|
||||
text: "Create Now", 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",
|
||||
title: "Advanced Music Customization",
|
||||
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: "1", title: "Advanced Music Customization", 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",
|
||||
title: "Video Synchronization",
|
||||
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: "2", title: "Video Synchronization", 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",
|
||||
title: "Collaboration & Sharing",
|
||||
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.",
|
||||
},
|
||||
id: "3", title: "Collaboration & Sharing", 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",
|
||||
title: "Genre-Specific Templates",
|
||||
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: "1", title: "Genre-Specific Templates", 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",
|
||||
title: "Platform-Optimized Formats",
|
||||
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: "2", title: "Platform-Optimized Formats", 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",
|
||||
title: "Business & Professional Templates",
|
||||
content:
|
||||
"Corporate background music, podcast intros, commercial jingles, and promotional tracks. Brand-safe music templates. Perfect for business and marketing content.",
|
||||
},
|
||||
id: "3", title: "Business & Professional Templates", 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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,16 +11,19 @@ const nunitoSans = Nunito_Sans({
|
||||
export const metadata: Metadata = {
|
||||
title: "Beatcraft - Free AI Music & Video Generator", description: "Create stunning AI-generated music (10 seconds to 3.5 minutes) and professional music videos instantly, all completely free. No limits, no watermarks.", keywords: "AI music generator, music creation, video generator, free music, AI video", metadataBase: new URL("https://beatcraft.io"),
|
||||
alternates: {
|
||||
canonical: "https://beatcraft.io"},
|
||||
canonical: "https://beatcraft.io"
|
||||
},
|
||||
openGraph: {
|
||||
title: "Beatcraft - Free AI Music & Video Generator", description: "Create unlimited AI-generated music and professional music videos instantly, all free.", siteName: "Beatcraft", type: "website", images: [
|
||||
{
|
||||
url: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARFZ7g38KXQEv5oxCwRxl4r5e3/a-modern-sleek-ai-music-generation-dashb-1772547717750-67b37221.png", alt: "Beatcraft AI Music Generator"},
|
||||
url: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARFZ7g38KXQEv5oxCwRxl4r5e3/a-modern-sleek-ai-music-generation-dashb-1772547717750-67b37221.png", alt: "Beatcraft AI Music Generator"
|
||||
},
|
||||
],
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image", title: "Beatcraft - Free AI Music & Video Generator", description: "Create unlimited AI music and videos instantly, free forever.", images: [
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARFZ7g38KXQEv5oxCwRxl4r5e3/a-modern-sleek-ai-music-generation-dashb-1772547717750-67b37221.png"],
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARFZ7g38KXQEv5oxCwRxl4r5e3/a-modern-sleek-ai-music-generation-dashb-1772547717750-67b37221.png"
|
||||
],
|
||||
},
|
||||
robots: {
|
||||
index: true,
|
||||
|
||||
@@ -65,7 +65,8 @@ export default function HomePage() {
|
||||
brandName="Beatcraft"
|
||||
navItems={navItems}
|
||||
button={{
|
||||
text: "Create Now", href: "/create"}}
|
||||
text: "Create Now", href: "/create"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -74,7 +75,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: "Create Your First Song Free", href: "/create" },
|
||||
{ text: "Watch Demo", href: "#features" },
|
||||
]}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
@@ -93,13 +94,17 @@ export default function HomePage() {
|
||||
description="Generate unique, high-quality music and videos with our advanced AI technology. No limits, no watermarks, completely free."
|
||||
accordionItems={[
|
||||
{
|
||||
id: "1", title: "AI Music Generation", content: "Create original music in seconds using advanced AI algorithms. Choose from 50+ genres and customize duration from 10 seconds to 3.5 minutes. Generate unlimited tracks with different moods, instruments, and styles."},
|
||||
id: "1", title: "AI Music Generation", content: "Create original music in seconds using advanced AI algorithms. Choose from 50+ genres and customize duration from 10 seconds to 3.5 minutes. Generate unlimited tracks with different moods, instruments, and styles."
|
||||
},
|
||||
{
|
||||
id: "2", title: "Instant Music Videos", content: "Transform your music into stunning visual content automatically. Our AI generates synchronized videos with animations, effects, and professional production quality. Perfect for social media, streaming, and personal projects."},
|
||||
id: "2", title: "Instant Music Videos", content: "Transform your music into stunning visual content automatically. Our AI generates synchronized videos with animations, effects, and professional production quality. Perfect for social media, streaming, and personal projects."
|
||||
},
|
||||
{
|
||||
id: "3", title: "Theme-Based Creation", content: "Describe any theme or mood, and watch as our AI creates perfectly matched music. From epic orchestral pieces to upbeat pop tracks, ambient soundscapes to electronic beats - unlimited possibilities."},
|
||||
id: "3", title: "Theme-Based Creation", content: "Describe any theme or mood, and watch as our AI creates perfectly matched music. From epic orchestral pieces to upbeat pop tracks, ambient soundscapes to electronic beats - unlimited possibilities."
|
||||
},
|
||||
{
|
||||
id: "4", title: "Professional Quality", content: "High-fidelity audio and video output ready for commercial use. Export in multiple formats optimized for different platforms. No quality loss, no compression artifacts."},
|
||||
id: "4", title: "Professional Quality", content: "High-fidelity audio and video output ready for commercial use. Export in multiple formats optimized for different platforms. No quality loss, no compression artifacts."
|
||||
},
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARFZ7g38KXQEv5oxCwRxl4r5e3/a-dynamic-music-creation-workflow-visual-1772547718312-07587ebb.png?_wi=1"
|
||||
imageAlt="Music Creation Interface"
|
||||
@@ -118,11 +123,14 @@ export default function HomePage() {
|
||||
description="Our intuitive workflow makes music and video creation effortless. From concept to final product in minutes."
|
||||
accordionItems={[
|
||||
{
|
||||
id: "1", title: "Step 1: Describe Your Sound", content: "Tell us what kind of music you want - describe the mood, genre, instruments, or any specific theme. Use text prompts or choose from preset categories. Our AI understands natural language descriptions perfectly."},
|
||||
id: "1", title: "Step 1: Describe Your Sound", content: "Tell us what kind of music you want - describe the mood, genre, instruments, or any specific theme. Use text prompts or choose from preset categories. Our AI understands natural language descriptions perfectly."
|
||||
},
|
||||
{
|
||||
id: "2", title: "Step 2: AI Generates Music", content: "Our advanced neural networks compose original music tailored to your specifications. Set the duration from 10 seconds to 3.5 minutes. Listen to previews and regenerate until it's perfect. Unlimited generations at no cost."},
|
||||
id: "2", title: "Step 2: AI Generates Music", content: "Our advanced neural networks compose original music tailored to your specifications. Set the duration from 10 seconds to 3.5 minutes. Listen to previews and regenerate until it's perfect. Unlimited generations at no cost."
|
||||
},
|
||||
{
|
||||
id: "3", title: "Step 3: Generate & Download", content: "Generate a synchronized music video automatically or download just the audio. Choose your preferred format and quality. Share directly to social media or save locally. Everything is yours to use commercially."},
|
||||
id: "3", title: "Step 3: Generate & Download", content: "Generate a synchronized music video automatically or download just the audio. Choose your preferred format and quality. Share directly to social media or save locally. Everything is yours to use commercially."
|
||||
},
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARFZ7g38KXQEv5oxCwRxl4r5e3/three-step-workflow-diagram-showing-1-te-1772547720090-d8cb9c4c.png?_wi=1"
|
||||
imageAlt="Three-step workflow diagram"
|
||||
@@ -141,13 +149,17 @@ export default function HomePage() {
|
||||
tagAnimation="blur-reveal"
|
||||
metrics={[
|
||||
{
|
||||
id: "1", value: "2M+", title: "Songs Created", description: "Original tracks generated and enjoyed", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARFZ7g38KXQEv5oxCwRxl4r5e3/abstract-visualization-of-musical-notes--1772547717486-b82d8c4b.png", imageAlt: "Songs created"},
|
||||
id: "1", value: "2M+", title: "Songs Created", description: "Original tracks generated and enjoyed", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARFZ7g38KXQEv5oxCwRxl4r5e3/abstract-visualization-of-musical-notes--1772547717486-b82d8c4b.png", imageAlt: "Songs created"
|
||||
},
|
||||
{
|
||||
id: "2", value: "500K+", title: "Active Creators", description: "Musicians and creators using Beatcraft", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARFZ7g38KXQEv5oxCwRxl4r5e3/diverse-group-of-creators-collaborating--1772547717280-073e3f26.png?_wi=1", imageAlt: "Active creators"},
|
||||
id: "2", value: "500K+", title: "Active Creators", description: "Musicians and creators using Beatcraft", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARFZ7g38KXQEv5oxCwRxl4r5e3/diverse-group-of-creators-collaborating--1772547717280-073e3f26.png?_wi=1", imageAlt: "Active creators"
|
||||
},
|
||||
{
|
||||
id: "3", value: "100M+", title: "Videos Generated", description: "Professional music videos created", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARFZ7g38KXQEv5oxCwRxl4r5e3/a-dynamic-composition-of-film-frames-pla-1772547717780-bccd8e71.png", imageAlt: "Videos generated"},
|
||||
id: "3", value: "100M+", title: "Videos Generated", description: "Professional music videos created", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARFZ7g38KXQEv5oxCwRxl4r5e3/a-dynamic-composition-of-film-frames-pla-1772547717780-bccd8e71.png", imageAlt: "Videos generated"
|
||||
},
|
||||
{
|
||||
id: "4", value: "50+", title: "Genre Options", description: "Musical styles and themes available", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARFZ7g38KXQEv5oxCwRxl4r5e3/a-spectrum-of-musical-genres-represented-1772547717998-cf621110.png", imageAlt: "Available genres"},
|
||||
id: "4", value: "50+", title: "Genre Options", description: "Musical styles and themes available", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARFZ7g38KXQEv5oxCwRxl4r5e3/a-spectrum-of-musical-genres-represented-1772547717998-cf621110.png", imageAlt: "Available genres"
|
||||
},
|
||||
]}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
@@ -165,12 +177,13 @@ export default function HomePage() {
|
||||
plans={[
|
||||
{
|
||||
id: "free", badge: "Free Forever", badgeIcon: Sparkles,
|
||||
price: "$0", subtitle: "Perfect for experimenting", buttons: [
|
||||
price: "$0", subtitle: "Unlimited music & videos, forever free", buttons: [
|
||||
{ text: "Get Started", href: "/create" },
|
||||
{ text: "Learn More", href: "#" },
|
||||
],
|
||||
features: [
|
||||
"Unlimited music generation", "Unlimited video generation", "All themes and genres", "10 seconds to 3.5 minutes", "Standard quality export", "Personal use license"],
|
||||
"Unlimited music generation", "Unlimited video generation", "All themes and genres", "10 seconds to 3.5 minutes", "Standard quality export", "Personal use license"
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "pro", badge: "Pro Power", badgeIcon: Zap,
|
||||
@@ -179,7 +192,8 @@ export default function HomePage() {
|
||||
{ text: "Contact Sales", href: "#" },
|
||||
],
|
||||
features: [
|
||||
"Everything in Free", "4K video quality", "Commercial licenses", "Priority processing", "Advanced customization", "Batch generation"],
|
||||
"Everything in Free", "4K video quality", "Commercial licenses", "Priority processing", "Advanced customization", "Batch generation"
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "studio", badge: "Studio Edition", badgeIcon: Award,
|
||||
@@ -188,7 +202,8 @@ export default function HomePage() {
|
||||
{ text: "Schedule Demo", href: "#" },
|
||||
],
|
||||
features: [
|
||||
"Everything in Pro", "8K video quality", "API access", "White-label options", "Dedicated support", "Advanced AI models"],
|
||||
"Everything in Pro", "8K video quality", "API access", "White-label options", "Dedicated support", "Advanced AI models"
|
||||
],
|
||||
},
|
||||
]}
|
||||
textboxLayout="default"
|
||||
@@ -206,17 +221,23 @@ export default function HomePage() {
|
||||
tagAnimation="blur-reveal"
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", title: "Finally, Music Creation for Everyone", quote: "I've never been able to make music before, but Beatcraft changed everything. In minutes, I created professional-quality tracks that sound incredible. The video generation is mind-blowing!", name: "Sarah Mitchell", role: "Content Creator", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARFZ7g38KXQEv5oxCwRxl4r5e3/professional-headshot-of-a-young-female--1772547717292-0977a22e.png", imageAlt: "Sarah Mitchell"},
|
||||
id: "1", title: "Finally, Music Creation for Everyone", quote: "I've never been able to make music before, but Beatcraft changed everything. In minutes, I created professional-quality tracks that sound incredible. The video generation is mind-blowing!", name: "Sarah Mitchell", role: "Content Creator", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARFZ7g38KXQEv5oxCwRxl4r5e3/professional-headshot-of-a-young-female--1772547717292-0977a22e.png", imageAlt: "Sarah Mitchell"
|
||||
},
|
||||
{
|
||||
id: "2", title: "Saves Me Hours Every Week", quote: "As a YouTube creator, I used to spend days finding music. Now I generate perfect background tracks instantly. The quality rivals paid music libraries, and it's completely free. Best discovery ever!", name: "Marcus Chen", role: "YouTube Creator", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARFZ7g38KXQEv5oxCwRxl4r5e3/professional-headshot-of-an-asian-male-i-1772547716965-5bde48db.png", imageAlt: "Marcus Chen"},
|
||||
id: "2", title: "Saves Me Hours Every Week", quote: "As a YouTube creator, I used to spend days finding music. Now I generate perfect background tracks instantly. The quality rivals paid music libraries, and it's completely free. Best discovery ever!", name: "Marcus Chen", role: "YouTube Creator", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARFZ7g38KXQEv5oxCwRxl4r5e3/professional-headshot-of-an-asian-male-i-1772547716965-5bde48db.png", imageAlt: "Marcus Chen"
|
||||
},
|
||||
{
|
||||
id: "3", title: "Revolutionary for Independent Artists", quote: "Beatcraft is democratizing music production. I can now produce full albums and music videos without expensive equipment or software. This is the future of independent music.", name: "Emma Rodriguez", role: "Independent Musician", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARFZ7g38KXQEv5oxCwRxl4r5e3/professional-headshot-of-a-latina-woman--1772547717824-838f1541.png", imageAlt: "Emma Rodriguez"},
|
||||
id: "3", title: "Revolutionary for Independent Artists", quote: "Beatcraft is democratizing music production. I can now produce full albums and music videos without expensive equipment or software. This is the future of independent music.", name: "Emma Rodriguez", role: "Independent Musician", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARFZ7g38KXQEv5oxCwRxl4r5e3/professional-headshot-of-a-latina-woman--1772547717824-838f1541.png", imageAlt: "Emma Rodriguez"
|
||||
},
|
||||
{
|
||||
id: "4", title: "Perfect for Content Production", quote: "Our production team uses Beatcraft for all our video content now. The AI understands our creative brief perfectly, and the turnaround time is incredible. Game-changer for agencies.", name: "David Kim", role: "Production Director", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARFZ7g38KXQEv5oxCwRxl4r5e3/professional-headshot-of-a-man-in-produc-1772547717005-0a5ce806.png", imageAlt: "David Kim"},
|
||||
id: "4", title: "Perfect for Content Production", quote: "Our production team uses Beatcraft for all our video content now. The AI understands our creative brief perfectly, and the turnaround time is incredible. Game-changer for agencies.", name: "David Kim", role: "Production Director", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARFZ7g38KXQEv5oxCwRxl4r5e3/professional-headshot-of-a-man-in-produc-1772547717005-0a5ce806.png", imageAlt: "David Kim"
|
||||
},
|
||||
{
|
||||
id: "5", title: "Incredible Quality at Zero Cost", quote: "I was skeptical at first, but the audio quality matches commercial music services. The fact that it's free and unlimited is almost too good to be true. Highly recommended!", name: "Jessica Parker", role: "Podcast Producer", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARFZ7g38KXQEv5oxCwRxl4r5e3/professional-headshot-of-a-woman-podcast-1772547717457-0d3f7328.png", imageAlt: "Jessica Parker"},
|
||||
id: "5", title: "Incredible Quality at Zero Cost", quote: "I was skeptical at first, but the audio quality matches commercial music services. The fact that it's free and unlimited is almost too good to be true. Highly recommended!", name: "Jessica Parker", role: "Podcast Producer", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARFZ7g38KXQEv5oxCwRxl4r5e3/professional-headshot-of-a-woman-podcast-1772547717457-0d3f7328.png", imageAlt: "Jessica Parker"
|
||||
},
|
||||
{
|
||||
id: "6", title: "Our Secret Creative Weapon", quote: "We've tested dozens of AI music tools, and Beatcraft is head and shoulders above the rest. The customization, quality, and ease of use are unmatched. We can't imagine working without it.", name: "James Wilson", role: "Film Producer", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARFZ7g38KXQEv5oxCwRxl4r5e3/professional-headshot-of-a-male-film-pro-1772547716778-790bf27f.png", imageAlt: "James Wilson"},
|
||||
id: "6", title: "Our Secret Creative Weapon", quote: "We've tested dozens of AI music tools, and Beatcraft is head and shoulders above the rest. The customization, quality, and ease of use are unmatched. We can't imagine working without it.", name: "James Wilson", role: "Film Producer", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARFZ7g38KXQEv5oxCwRxl4r5e3/professional-headshot-of-a-male-film-pro-1772547716778-790bf27f.png", imageAlt: "James Wilson"
|
||||
},
|
||||
]}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
@@ -232,17 +253,23 @@ export default function HomePage() {
|
||||
tagAnimation="blur-reveal"
|
||||
faqs={[
|
||||
{
|
||||
id: "1", title: "Is Beatcraft really free forever?", content: "Yes! Beatcraft's free tier is <strong>genuinely unlimited</strong>. Generate as many songs and videos as you want with no restrictions. The Pro and Studio plans are for advanced features and commercial licensing."},
|
||||
id: "1", title: "Is Beatcraft really free forever?", content: "Yes! Beatcraft's free tier is <strong>genuinely unlimited</strong>. Generate as many songs and videos as you want with no restrictions. The Pro and Studio plans are for advanced features and commercial licensing."
|
||||
},
|
||||
{
|
||||
id: "2", title: "What can I do with the music I create?", content: "With the free plan, you can use music for personal projects. Pro and Studio plans include commercial licenses for YouTube, streaming, podcasts, and more. All generated content is yours to use."},
|
||||
id: "2", title: "What can I do with the music I create?", content: "With the free plan, you can use music for personal projects. Pro and Studio plans include commercial licenses for YouTube, streaming, podcasts, and more. All generated content is yours to use."
|
||||
},
|
||||
{
|
||||
id: "3", title: "How long does it take to generate music?", content: "Most songs generate in 30-60 seconds. Videos typically take 1-2 minutes. With Pro processing, generation speeds are prioritized for faster turnaround."},
|
||||
id: "3", title: "How long does it take to generate music?", content: "Most songs generate in 30-60 seconds. Videos typically take 1-2 minutes. With Pro processing, generation speeds are prioritized for faster turnaround."
|
||||
},
|
||||
{
|
||||
id: "4", title: "Can I customize the generated music?", content: "Absolutely! Describe your preferences in detail - mood, instruments, tempo, length. You can regenerate unlimited times until it's perfect. Pro plans include advanced customization options."},
|
||||
id: "4", title: "Can I customize the generated music?", content: "Absolutely! Describe your preferences in detail - mood, instruments, tempo, length. You can regenerate unlimited times until it's perfect. Pro plans include advanced customization options."
|
||||
},
|
||||
{
|
||||
id: "5", title: "What formats can I export?", content: "Audio: MP3, WAV, FLAC. Video: MP4, WebM, MOV. Choose quality from HD to 4K (Pro) or 8K (Studio). All formats are optimized for different platforms."},
|
||||
id: "5", title: "What formats can I export?", content: "Audio: MP3, WAV, FLAC. Video: MP4, WebM, MOV. Choose quality from HD to 4K (Pro) or 8K (Studio). All formats are optimized for different platforms."
|
||||
},
|
||||
{
|
||||
id: "6", title: "Do I need any musical knowledge?", content: "Not at all! Just describe what you want in natural language. Our AI handles all the complex music theory and production. Complete beginners can create professional-quality music instantly."},
|
||||
id: "6", title: "Do I need any musical knowledge?", content: "Not at all! Just describe what you want in natural language. Our AI handles all the complex music theory and production. Complete beginners can create professional-quality music instantly."
|
||||
},
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARFZ7g38KXQEv5oxCwRxl4r5e3/a-friendly-modern-customer-support-scene-1772547717885-6d6da3ef.png?_wi=1"
|
||||
imageAlt="Customer support team"
|
||||
|
||||
@@ -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",
|
||||
items: [
|
||||
title: "Product", items: [
|
||||
{ label: "Create Music", href: "/create" },
|
||||
{ label: "Features", href: "/" },
|
||||
{ label: "Pricing", href: "/pricing" },
|
||||
@@ -27,8 +27,7 @@ export default function PricingPage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Blog", href: "#" },
|
||||
{ label: "Careers", href: "#" },
|
||||
@@ -36,8 +35,7 @@ export default function PricingPage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
title: "Legal", 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",
|
||||
href: "/create",
|
||||
}}
|
||||
text: "Create Now", href: "/create"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -78,61 +76,31 @@ export default function PricingPage() {
|
||||
tagAnimation="blur-reveal"
|
||||
plans={[
|
||||
{
|
||||
id: "free",
|
||||
badge: "Free Forever",
|
||||
badgeIcon: Sparkles,
|
||||
price: "$0",
|
||||
subtitle: "Perfect for experimenting",
|
||||
buttons: [
|
||||
id: "free", badge: "Free Forever", badgeIcon: Sparkles,
|
||||
price: "$0", subtitle: "Perfect for experimenting", buttons: [
|
||||
{ text: "Get Started", href: "/create" },
|
||||
{ text: "Learn More", href: "#" },
|
||||
],
|
||||
features: [
|
||||
"Unlimited music generation",
|
||||
"Unlimited video generation",
|
||||
"All themes and genres",
|
||||
"10 seconds to 3.5 minutes",
|
||||
"Standard quality export",
|
||||
"Personal use license",
|
||||
],
|
||||
"Unlimited music generation", "Unlimited video generation", "All themes and genres", "10 seconds to 3.5 minutes", "Standard quality export", "Personal use license"],
|
||||
},
|
||||
{
|
||||
id: "pro",
|
||||
badge: "Pro Power",
|
||||
badgeIcon: Zap,
|
||||
price: "$9.99",
|
||||
subtitle: "For serious creators",
|
||||
buttons: [
|
||||
id: "pro", badge: "Pro Power", badgeIcon: Zap,
|
||||
price: "$9.99", subtitle: "For serious creators", buttons: [
|
||||
{ text: "Start Pro Trial", href: "/create" },
|
||||
{ text: "Contact Sales", href: "#" },
|
||||
],
|
||||
features: [
|
||||
"Everything in Free",
|
||||
"4K video quality",
|
||||
"Commercial licenses",
|
||||
"Priority processing",
|
||||
"Advanced customization",
|
||||
"Batch generation",
|
||||
],
|
||||
"Everything in Free", "4K video quality", "Commercial licenses", "Priority processing", "Advanced customization", "Batch generation"],
|
||||
},
|
||||
{
|
||||
id: "studio",
|
||||
badge: "Studio Edition",
|
||||
badgeIcon: Award,
|
||||
price: "$29.99",
|
||||
subtitle: "For professionals",
|
||||
buttons: [
|
||||
id: "studio", badge: "Studio Edition", badgeIcon: Award,
|
||||
price: "$29.99", subtitle: "For professionals", buttons: [
|
||||
{ text: "Start Studio", href: "/create" },
|
||||
{ text: "Schedule Demo", href: "#" },
|
||||
],
|
||||
features: [
|
||||
"Everything in Pro",
|
||||
"8K video quality",
|
||||
"API access",
|
||||
"White-label options",
|
||||
"Dedicated support",
|
||||
"Advanced AI models",
|
||||
],
|
||||
"Everything in Pro", "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",
|
||||
title: "Can I upgrade or downgrade anytime?",
|
||||
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: "1", title: "Can I upgrade or downgrade anytime?", 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",
|
||||
title: "What payment methods do you accept?",
|
||||
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: "2", title: "What payment methods do you accept?", 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",
|
||||
title: "Is there a student or nonprofit discount?",
|
||||
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: "3", title: "Is there a student or nonprofit discount?", 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",
|
||||
title: "What happens to my projects if I cancel?",
|
||||
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: "4", title: "What happens to my projects if I cancel?", 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",
|
||||
title: "Do you offer custom enterprise plans?",
|
||||
content:
|
||||
"Absolutely! We offer custom pricing for teams and enterprises. Bulk licensing, dedicated support, and API access available. Contact sales for a quote.",
|
||||
},
|
||||
id: "5", title: "Do you offer custom enterprise plans?", 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",
|
||||
title: "Is there a free trial for paid plans?",
|
||||
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.",
|
||||
},
|
||||
id: "6", title: "Is there a free trial for paid plans?", 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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
87
src/components/LanguageSwitcher.tsx
Normal file
87
src/components/LanguageSwitcher.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user