File size: 1,759 Bytes
e3362fc
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
09a0ef4
e3362fc
 
 
09a0ef4
e3362fc
 
d04cfed
 
 
 
e3362fc
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
62c12ac
e3362fc
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
import { Inter, Outfit } from "next/font/google";
import { ClerkProvider } from '@clerk/nextjs';
import { dark } from '@clerk/themes';
import "./globals.css";
import Navbar from "../components/Navbar";
import Footer from "../components/Footer";
import type { Metadata } from 'next';

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-inter",
});

const outfit = Outfit({
  subsets: ["latin"],
  variable: "--font-outfit",
});

export const metadata: Metadata = {
  title: "VocalBee | The World's Best AI Vocal Extractor",
  description: "Extract high-quality vocals, drums, bass, and instruments from any audio or video file instantly using deep learning.",
  keywords: ["vocal remover", "extract vocals", "AI stem separation", "isolate vocals", "karaoke maker", "free vocal remover", "audio separator"],
  openGraph: {
    title: "VocalBee | Free Audio Separation",
    description: "Extract studio-quality vocals, drums, bass, and instruments from any audio or video file for free using advanced AI.",
    type: "website",
  },
  verification: {
    google: "UuCDe-NGPE9ac4gAQchPj6qrDOS1-FtRGRD3oNJqI4Q",
  },
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <ClerkProvider
      appearance={{
        baseTheme: dark,
        variables: {
          colorPrimary: '#1877F2'
        }
      }}
    >
      <html lang="en" className={`${inter.variable} ${outfit.variable}`}>
        <body className="flex flex-col min-h-screen bg-[#050505] text-[#E4E6EB] font-sans antialiased overflow-x-hidden">
          <Navbar />
          <main className="flex-grow">
            {children}
          </main>
          <Footer />
        </body>
      </html>
    </ClerkProvider>
  );
}