From 69f350009ee155bf29857649d675579e0fea346a Mon Sep 17 00:00:00 2001
From: itzamanjain <aman.044063@tmu.ac.in>
Date: Mon, 23 Mar 2026 12:57:14 +0530
Subject: [PATCH] feat: add initial application setup including
 internationalization and a 'pro' waitlist page with mockups.

---
 app/globals.css              |  2 ++
 app/home/HeroContent.tsx     | 18 +++++-----
 app/page.tsx                 |  5 ++-
 app/pro/page.tsx             | 14 +-------
 components/cta.tsx           | 28 ++++++++--------
 components/footer.tsx        | 43 +++++++++++++++++-------
 components/i18n-provider.tsx | 64 ++++++++++++++++++++++++++++++++++++
 components/main-nav.tsx      | 10 +++---
 components/navbar.tsx        |  6 ++--
 components/providers.tsx     | 23 +++++++------
 messages/de.json             | 40 ++++++++++++++++++++++
 messages/en.json             | 40 ++++++++++++++++++++++
 messages/es.json             | 40 ++++++++++++++++++++++
 messages/fr.json             | 40 ++++++++++++++++++++++
 messages/hi.json             | 40 ++++++++++++++++++++++
 messages/pt.json             | 40 ++++++++++++++++++++++
 messages/tr.json             | 40 ++++++++++++++++++++++
 messages/zh.json             | 40 ++++++++++++++++++++++
 18 files changed, 470 insertions(+), 63 deletions(-)
 create mode 100644 components/i18n-provider.tsx
 create mode 100644 messages/de.json
 create mode 100644 messages/en.json
 create mode 100644 messages/es.json
 create mode 100644 messages/fr.json
 create mode 100644 messages/hi.json
 create mode 100644 messages/pt.json
 create mode 100644 messages/tr.json
 create mode 100644 messages/zh.json

diff --git a/app/globals.css b/app/globals.css
index db5708e1..ac059277 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -168,6 +168,8 @@
   .container {
     @apply px-4 xl:px-6 mx-auto max-w-screen-2xl;
   }
+
+
 }
 
 @layer base {
diff --git a/app/home/HeroContent.tsx b/app/home/HeroContent.tsx
index 8344eea3..214553f6 100644
--- a/app/home/HeroContent.tsx
+++ b/app/home/HeroContent.tsx
@@ -7,11 +7,13 @@ import { Button } from '@/components/ui/button';
 import { Icons } from '@/components/icon';
 import { NumberTicker } from '@/components/magicui/number-ticker';
 import Link from 'next/link';
+import { useI18n } from '@/components/i18n-provider';
 import { siteConfig } from '@/config/site';
 import { useEffect, useState } from 'react';
 import axios from 'axios';
 
 export function HeroContent() {
+  const { t } = useI18n();
   const [star, setStar] = useState(0);
   const fetchGithubData = () => {
     axios
@@ -38,24 +40,24 @@ export function HeroContent() {
             <AnimatedBadge />
           </AnimateEnter>
           <AnimateEnter delay={0.3} duration={2}>
-            <h1 className="mx-auto text-center max-w-5xl px-4 font-bold text-2xl md:text-6xl leading-tight tracking-tight">
-              <span className="block text-gradient mb-1">Instant UI Components</span>
+            <h1 className="mx-auto text-center max-w-5xl px-4 font-bold text-2xl md:text-6xl leading-tight tracking-tight min-h-[1.2em] md:min-h-[2.4em] flex flex-col justify-center">
+              <span className="block text-gradient mb-1">{t('HomePage.heroTitle1')}</span>
               <span className="">
-                Just Copy, Paste &amp; Done
+                {t('HomePage.heroTitle2')}
               </span>
             </h1>
           </AnimateEnter>
         </div>
         <AnimateEnter delay={0.5} duration={2} className="mb-6 sm:mb-8">
-          <p className="container mx-auto  md:max-w-lg text-[12px] sm:text-base text-foreground">
-            250+ Production ready components, built with Next.js, shadcn/ui and Tailwind CSS.
+          <p className="container mx-auto md:max-w-lg text-[12px] sm:text-base text-foreground min-h-[3em] sm:min-h-[4em] flex items-center justify-center">
+            {t('HomePage.heroDescription')}
           </p>
         </AnimateEnter>
         <AnimateEnter className="flex items-center justify-center gap-3" delay={0.7} duration={2}>
           <div className="flex flex-row items-center justify-center gap-3 mt-2 md:mt-6 w-full sm:w-auto px-4">
             <Link href="/docs/installation" className="w-auto">
               <Button size="lg" className="rounded-xl w-auto px-4 sm:px-8">
-                Explore Components
+                {t('HomePage.explore')}
               </Button>
             </Link>
 
@@ -64,7 +66,7 @@ export function HeroContent() {
                 <Button variant="secondary" className="rounded-xl w-auto px-4 sm:px-8 h-11">
                   <div className="flex items-center">
                     <Icons.gitHub className="size-4" />
-                    <span className="ml-2 hidden sm:inline-block">Star on GitHub</span>
+                    <span className="ml-2 hidden sm:inline-block">{t('HomePage.starGithub')}</span>
                   </div>
                   <div className="ml-2 flex items-center gap-1 text-sm">
                     🌟
@@ -79,7 +81,7 @@ export function HeroContent() {
       <section className="w-full max-w-4xl mx-auto px-4 ">
         <AnimateEnter delay={0.9} duration={2} className="space-y-6">
           <h2 className="text-base font-medium text-muted-foreground uppercase tracking-wider">
-            Built With
+            {t('HomePage.builtWith')}
           </h2>
           <div className="grid grid-cols-2 sm:grid-cols-4 gap-6 place-items-center">
             <Image
diff --git a/app/page.tsx b/app/page.tsx
index 66664aaa..b976be5b 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,6 +1,8 @@
+"use client";
 import type { CSSProperties } from 'react';
 import Image from 'next/image';
 import dynamic from 'next/dynamic';
+import { useI18n } from '@/components/i18n-provider';
 const HomeCardCollection = dynamic(() => import('@/components/homecard'), { 
   ssr: true,
   loading: () => <div className="animate-pulse h-[800px] w-full bg-neutral-100 dark:bg-neutral-900 rounded-lg"></div> 
@@ -9,6 +11,7 @@ import { HeroSection } from './home';
 
 
 const Homepage = () => {
+  const { t } = useI18n();
   return (
     <>
       <div className="container-wrapper">
@@ -50,7 +53,7 @@ const Homepage = () => {
             <div className="flex flex-col justify-center items-center my-12">
               <div className="px-8 rounded-2xl text-center">
                 <h2 className="font-bold text-2xl md:text-4xl mb-4 tracking-tight text-neutral-900 dark:text-white">
-                  Ready-to-Use UI Blocks
+                  {t('HomePage.readyToUse')}
                 </h2>
               </div>
             </div>
diff --git a/app/pro/page.tsx b/app/pro/page.tsx
index 8140adcb..fdbd0148 100644
--- a/app/pro/page.tsx
+++ b/app/pro/page.tsx
@@ -459,19 +459,7 @@ export default function ProPage() {
         </div>
       </section>
 
-      {/* ── STATS — solid borders, not dashed ─────────────────────────────── */}
-      <section className="container-wrapper border-y 
-        border-neutral-200 dark:border-neutral-800">
-        <div className="max-w-7xl mx-auto">
-          <div className="grid grid-cols-1 sm:grid-cols-3 
-            divide-y sm:divide-y-0 sm:divide-x 
-            divide-neutral-200 dark:divide-neutral-800">
-            <StatCard value="989+" label="GitHub Stars" />
-            <StatCard value="4,000+" label="Developers every month" />
-            <StatCard value="20,000+" label="Monthly pageviews" />
-          </div>
-        </div>
-      </section>
+
 
       {/* ── TEMPLATES ─────────────────────────────────────────────────────── */}
       <section className="container-wrapper border-b border-neutral-200 dark:border-neutral-800">
diff --git a/components/cta.tsx b/components/cta.tsx
index 9b4888a8..7beb4cc0 100644
--- a/components/cta.tsx
+++ b/components/cta.tsx
@@ -1,8 +1,11 @@
+"use client";
 import React from "react";
 import Link from "next/link";
+import { useI18n } from "./i18n-provider";
 import { Button } from "./ui/button";
 
 const Cta = () => {
+  const { t } = useI18n();
   return (
     <div className="flex flex-col items-center justify-center min-h-[40vh] py-5 mt-4 lg:mt-8 px-4">
 
@@ -13,25 +16,24 @@ const Cta = () => {
         Spectrum Pro — Early Access
       </div> */}
 
-      <h1 className="text-center text-3xl md:text-4xl lg:text-5xl 
-        font-semibold mb-4 md:leading-tight text-foreground max-w-2xl">
-        Stop building from scratch.
-        <br />
-        <span className="bg-gradient-to-r from-[#6366F1] to-purple-400 
-          bg-clip-text text-transparent">
-          Ship fast with Spectrum Pro.
+      <h1 className="text-center font-bold text-2xl md:text-5xl mb-4 leading-[1.1] tracking-tight text-foreground max-w-2xl min-h-[2.2em] md:min-h-[2em] flex flex-col justify-center gap-0">
+        <span className="block">{t('CTA.title1')}</span>
+        <span className="block">
+          {t('CTA.title2')}
+          <span className="text-gradient">
+            {t('CTA.title2Pro')}
+          </span>
         </span>
       </h1>
 
-      <p className="text-[#666] text-base mb-8 text-center max-w-md">
-        Premium Next.js templates built on Spectrum UI. 
-        Dark. Animated. Production-ready. From $49.
+      <p className="text-[#666] text-base mb-8 text-center max-w-md min-h-[3em]">
+        {t('CTA.description')}
       </p>
 
       <div className="flex items-center gap-3">
-        <Link href="https://pro.spectrumhq.in">
-          <Button className="rounded-md px-6 text-sm font-medium">
-            Get access 
+        <Link href="https://ui.spectrumhq.in/pro">
+          <Button className="rounded-3xl px-6 text-sm font-medium">
+            {t('CTA.button')}
           </Button>
         </Link>
       </div>
diff --git a/components/footer.tsx b/components/footer.tsx
index 00fe5ba7..a7379881 100644
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -1,9 +1,11 @@
 "use client";
 import Link from "next/link";
 
+import { useI18n } from "./i18n-provider";
 import { Icons } from "./icon";
 
 export default function Footer() {
+  const { t, locale, setLocale } = useI18n();
   return (
     <footer className=" py-12 px-4 md:px-6 z-50">
       <div className="container mx-auto">
@@ -18,7 +20,7 @@ export default function Footer() {
             </Link>
 
             <h1 className="dark:text-gray-300 mt-4">
-              Build by{" "}
+              {t('Footer.builtBy')}{" "}
               <span className="dark:text-[#039ee4] gap-2">
                 <Link className="underline" href="https://x.com/arihantCodes">@Arihantjain</Link>
                 <span>{" & "}</span>
@@ -28,20 +30,20 @@ export default function Footer() {
               </span>
             </h1>
            
-            <p className="text-sm dark:text-gray-400 mt-5">
-              © {new Date().getFullYear()} Spectrum UI. All rights reserved.
+            <p className="text-sm dark:text-gray-400 mt-5 min-h-[1.5em]">
+              © {new Date().getFullYear()} Spectrum UI. {t('Footer.rights')}
             </p>
           </div>
           <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
             <div>
-              <h3 className="font-semibold mb-4">Pages</h3>
+              <h3 className="font-semibold mb-4">{t('Footer.pages')}</h3>
               <ul className="space-y-2">
                 <li>
                   <Link
                     href="/docs"
                     className="text-gray-600 hover:text-black dark:text-gray-400 dark:hover:text-white"
                   >
-                    Docs
+                    {t('Footer.docs')}
                   </Link>
                 </li>
                 <li>
@@ -49,7 +51,7 @@ export default function Footer() {
                     href="/blocks"
                     className="text-gray-600 hover:text-black dark:text-gray-400 dark:hover:text-white"
                   >
-                    Blocks
+                    {t('Footer.blocks')}
                   </Link>
                 </li>
                 <li>
@@ -57,13 +59,13 @@ export default function Footer() {
                     href="/colors"
                     className="text-gray-600 hover:text-black dark:text-gray-400 dark:hover:text-white"
                   >
-                    Colors
+                    {t('Footer.colors')}
                   </Link>
                 </li>
               </ul>
             </div>
             <div>
-              <h3 className="font-semibold mb-4">Socials</h3>
+              <h3 className="font-semibold mb-4">{t('Footer.socials')}</h3>
               <ul className="space-y-2">
                 <li>
                   <Link
@@ -92,14 +94,14 @@ export default function Footer() {
               </ul>
             </div>
             <div>
-              <h3 className="font-semibold mb-4">Legal</h3>
+              <h3 className="font-semibold mb-4">{t('Footer.legal')}</h3>
               <ul className="space-y-2">
                 <li>
                   <Link
                     href="/privacy-policy"
                     className="text-gray-600 hover:text-black dark:text-gray-400 dark:hover:text-white"
                   >
-                    Privacy Policy
+                    {t('Footer.privacy')}
                   </Link>
                 </li>
                 <li>
@@ -107,7 +109,7 @@ export default function Footer() {
                     href="/tos"
                     className="text-gray-600 hover:text-black dark:text-gray-400 dark:hover:text-white"
                   >
-                    Terms of Service
+                    {t('Footer.tos')}
                   </Link>
                 </li>
                 <li>
@@ -115,11 +117,28 @@ export default function Footer() {
                     href="/faqs"
                     className="text-gray-600 hover:text-black dark:text-gray-400 dark:hover:text-white"
                   >
-                    FAQs
+                    {t('Footer.faqs')}
                   </Link>
                 </li>
               </ul>
             </div>
+            <div>
+              <h3 className="font-semibold mb-4">{t('Footer.language')}</h3>
+              <select 
+                value={locale} 
+                onChange={(e) => setLocale(e.target.value as any)}
+                className="bg-background border rounded px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary"
+              >
+                <option value="en">English 🇺🇸</option>
+                <option value="es">Español 🇪🇸</option>
+                <option value="pt">Português 🇧🇷</option>
+                <option value="zh">简体中文 🇨🇳</option>
+                <option value="fr">Français 🇫🇷</option>
+                <option value="de">Deutsch 德</option>
+                <option value="hi">हिन्दी 🇮🇳</option>
+                <option value="tr">Türkçe 🇹🇷</option>
+              </select>
+            </div>
           </div>
         </div>
         <div className=" w-full flex mt-4 items-center justify-center   ">
diff --git a/components/i18n-provider.tsx b/components/i18n-provider.tsx
new file mode 100644
index 00000000..cefac113
--- /dev/null
+++ b/components/i18n-provider.tsx
@@ -0,0 +1,64 @@
+'use client';
+
+import React, { createContext, useContext, useState, useEffect } from 'react';
+import en from '../messages/en.json';
+import es from '../messages/es.json';
+import pt from '../messages/pt.json';
+import zh from '../messages/zh.json';
+import fr from '../messages/fr.json';
+import de from '../messages/de.json';
+import hi from '../messages/hi.json';
+import tr from '../messages/tr.json';
+
+const translations = { en, es, pt, zh, fr, de, hi, tr };
+
+type Language = 'en' | 'es' | 'pt' | 'zh' | 'fr' | 'de' | 'hi' | 'tr';
+type Translations = typeof en;
+
+interface I18nContextProps {
+  locale: Language;
+  setLocale: (locale: Language) => void;
+  t: (key: string) => any;
+}
+
+const I18nContext = createContext<I18nContextProps | undefined>(undefined);
+
+export const I18nProvider = ({ children }: { children: React.ReactNode }) => {
+  const [locale, setLocaleState] = useState<Language>('en');
+
+  useEffect(() => {
+    const savedLocale = localStorage.getItem('locale') as Language;
+    if (savedLocale && translations[savedLocale]) {
+      setLocaleState(savedLocale);
+    }
+  }, []);
+
+  const setLocale = (newLocale: Language) => {
+    setLocaleState(newLocale);
+    localStorage.setItem('locale', newLocale);
+  };
+
+  const t = (path: string) => {
+    const keys = path.split('.');
+    let current: any = translations[locale];
+    for (const key of keys) {
+      if (current[key] === undefined) return path;
+      current = current[key];
+    }
+    return current;
+  };
+
+  return (
+    <I18nContext.Provider value={{ locale, setLocale, t }}>
+      {children}
+    </I18nContext.Provider>
+  );
+};
+
+export const useI18n = () => {
+  const context = useContext(I18nContext);
+  if (!context) {
+    throw new Error('useI18n must be used within an I18nProvider');
+  }
+  return context;
+};
diff --git a/components/main-nav.tsx b/components/main-nav.tsx
index 14100915..55f7aaee 100644
--- a/components/main-nav.tsx
+++ b/components/main-nav.tsx
@@ -5,9 +5,11 @@ import { usePathname } from 'next/navigation';
 
 import { cn } from '@/lib/utils';
 import { Icons } from './icon';
+import { useI18n } from './i18n-provider';
 
 export function MainNav() {
   const pathname = usePathname();
+  const { t } = useI18n();
 
   return (
     <div className="mr-4  md:flex">
@@ -26,7 +28,7 @@ export function MainNav() {
             pathname === '/docs/installation' ? 'text-foreground' : 'text-foreground/80',
           )}
         >
-          Components
+          {t('Navbar.components')}
         </Link>
            <Link
           href="/pro"
@@ -35,7 +37,7 @@ export function MainNav() {
             pathname?.startsWith('/pro') ? 'text-foreground' : 'text-foreground/80',
           )}
         >
-          Templates
+          {t('Navbar.templates')}
           <span className="text-xs ml-1 px-1.5 py-0.5 rounded-full bg-yellow-400/30 dark:bg-[#eaec8a]/16 text-yellow-600 dark:text-[#eaec8a] [text-shadow:0_1px_1.5px_rgb(0,0,0,0.16)]">
             Pro
           </span>
@@ -47,13 +49,13 @@ export function MainNav() {
             pathname?.startsWith('/blocks') ? 'text-foreground' : 'text-foreground/80',
           )}
         >
-          Blocks
+          {t('Navbar.blocks')}
         </Link>
         <Link href="/blog" className={cn(
           'transition-colors hover:text-foreground/80',
           pathname === '/blog' ? 'text-foreground' : 'text-foreground/80',
         )}>
-          Blogs
+          {t('Navbar.blogs')}
         </Link>
       </nav>
     </div>
diff --git a/components/navbar.tsx b/components/navbar.tsx
index 75d194e3..9c88c199 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -5,6 +5,7 @@ import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { Icons } from '@/components/icon';
 import { MobileNav } from '@/components/mobile-nav';
+import { useI18n } from './i18n-provider';
 import { MainNav } from './main-nav';
 import { ThemeToggle } from './theme-toggle';
 import { UserNav } from './user-nav';
@@ -13,6 +14,7 @@ import type { Session } from 'next-auth';
 
 export function SiteHeader({ session }: { session: Session | null }) {
   const pathname = usePathname();
+  const { t } = useI18n();
 
   return (
     <header className="border-grid sticky top-0 z-[50]  w-full border-b bg-background/10 backdrop-blur supports-[backdrop-filter]:bg-background/60">
@@ -42,7 +44,7 @@ export function SiteHeader({ session }: { session: Session | null }) {
             >
 
               <div className="flex flex-col xl:flex-row gap-3 items-center">
-                <p className="text-sm font-medium hidden lg:block">Sponsor</p>
+                <p className="text-sm font-medium hidden lg:block">{t('Navbar.sponsor')}</p>
               </div>
             </Link>
 {/* 
@@ -72,7 +74,7 @@ export function SiteHeader({ session }: { session: Session | null }) {
               ) : (
                 <Link href="/sign-in">
                   <Button variant="outline" size="sm" className="ml-2 h-8 text-xs font-semibold">
-                    Sign In
+                    {t('Navbar.signIn')}
                   </Button>
                 </Link>
               )}
diff --git a/components/providers.tsx b/components/providers.tsx
index 0aaccb0e..68f635f9 100644
--- a/components/providers.tsx
+++ b/components/providers.tsx
@@ -3,18 +3,21 @@
 import { SessionProvider } from "next-auth/react";
 import { ThemeProvider } from "@/components/theme-provider";
 import { PostHogProvider } from "@/components/provider";
+import { I18nProvider } from "@/components/i18n-provider";
 
 export function Providers({ children }: { children: React.ReactNode }) {
   return (
-    <SessionProvider>
-      <ThemeProvider
-        attribute="class"
-        defaultTheme="system"
-        enableSystem
-        disableTransitionOnChange
-      >
-        <PostHogProvider>{children}</PostHogProvider>
-      </ThemeProvider>
-    </SessionProvider>
+    <I18nProvider>
+      <SessionProvider>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          <PostHogProvider>{children}</PostHogProvider>
+        </ThemeProvider>
+      </SessionProvider>
+    </I18nProvider>
   );
 }
diff --git a/messages/de.json b/messages/de.json
new file mode 100644
index 00000000..495e2b31
--- /dev/null
+++ b/messages/de.json
@@ -0,0 +1,40 @@
+{
+  "Navbar": {
+    "home": "Startseite",
+    "components": "Komponenten",
+    "templates": "Vorlagen",
+    "blocks": "Blöcke",
+    "blogs": "Blogs",
+    "signIn": "Anmelden",
+    "sponsor": "Sponsoren"
+  },
+  "Footer": {
+    "builtBy": "Erstellt von",
+    "rights": "Alle Rechte vorbehalten.",
+    "pages": "Seiten",
+    "socials": "Soziale Medien",
+    "legal": "Rechtliches",
+    "docs": "Dokumentation",
+    "colors": "Farben",
+    "privacy": "Datenschutz",
+    "tos": "Nutzungsbedingungen",
+    "faqs": "FAQs",
+    "language": "Sprache"
+  },
+  "HomePage": {
+    "heroTitle1": "Sofortige UI-Komponenten",
+    "heroTitle2": "Kopieren, Einfügen, Fertig",
+    "heroDescription": "Über 250 produktionsbereite Komponenten, erstellt mit Next.js, shadcn/ui und Tailwind CSS.",
+    "explore": "Komponenten erkunden",
+    "starGithub": "Star auf GitHub",
+    "builtWith": "Erstellt mit",
+    "readyToUse": "Sofort einsatzbereite UI-Blöcke"
+  },
+  "CTA": {
+    "title1": "Hören Sie auf, von Grund auf neu zu bauen.",
+    "title2": "Schneller veröffentlichen mit ",
+    "title2Pro": "Spectrum Pro",
+    "description": "Premium Next.js-Vorlagen, basierend auf Spectrum UI. Dunkel. Animiert. Produktionsfertig. Ab 49 $.",
+    "button": "Zugang anfordern"
+  }
+}
diff --git a/messages/en.json b/messages/en.json
new file mode 100644
index 00000000..fd18a308
--- /dev/null
+++ b/messages/en.json
@@ -0,0 +1,40 @@
+{
+  "Navbar": {
+    "home": "Home",
+    "components": "Components",
+    "templates": "Templates",
+    "blocks": "Blocks",
+    "blogs": "Blogs",
+    "signIn": "Sign In",
+    "sponsor": "Sponsor"
+  },
+  "Footer": {
+    "builtBy": "Built by",
+    "rights": "All rights reserved.",
+    "pages": "Pages",
+    "socials": "Socials",
+    "legal": "Legal",
+    "docs": "Docs",
+    "colors": "Colors",
+    "privacy": "Privacy Policy",
+    "tos": "Terms of Service",
+    "faqs": "FAQs",
+    "language": "Language"
+  },
+  "HomePage": {
+    "heroTitle1": "Instant UI Components",
+    "heroTitle2": "Just Copy, Paste & Done",
+    "heroDescription": "250+ Production ready components, built with Next.js, shadcn/ui and Tailwind CSS.",
+    "explore": "Explore Components",
+    "starGithub": "Star on GitHub",
+    "builtWith": "Built With",
+    "readyToUse": "Ready-to-Use UI Blocks"
+  },
+  "CTA": {
+    "title1": "Stop building from scratch",
+    "title2": "Ship fast with ",
+    "title2Pro": "Spectrum Pro",
+    "description": "Premium Next.js templates built on Spectrum UI. Dark. Animated. Production-ready. From $49.",
+    "button": "Get access"
+  }
+}
diff --git a/messages/es.json b/messages/es.json
new file mode 100644
index 00000000..e4b264f4
--- /dev/null
+++ b/messages/es.json
@@ -0,0 +1,40 @@
+{
+  "Navbar": {
+    "home": "Inicio",
+    "components": "Componentes",
+    "templates": "Plantillas",
+    "blocks": "Bloques",
+    "blogs": "Blogs",
+    "signIn": "Iniciar sesión",
+    "sponsor": "Patrocinar"
+  },
+  "Footer": {
+    "builtBy": "Creado por",
+    "rights": "Todos los derechos reservados.",
+    "pages": "Páginas",
+    "socials": "Redes Sociales",
+    "legal": "Legal",
+    "docs": "Docs",
+    "colors": "Colores",
+    "privacy": "Política de Privacidad",
+    "tos": "Términos de Servicio",
+    "faqs": "Preguntas frecuentes",
+    "language": "Idioma"
+  },
+  "HomePage": {
+    "heroTitle1": "Componentes de UI Instantáneos",
+    "heroTitle2": "Solo Copiar, Pegar y Listo",
+    "heroDescription": "Más de 250 componentes listos para producción, creados con Next.js, shadcn/ui y Tailwind CSS.",
+    "explore": "Explorar Componentes",
+    "starGithub": "Estrella en GitHub",
+    "builtWith": "Desarrollado con",
+    "readyToUse": "Bloques de UI listos para usar"
+  },
+  "CTA": {
+    "title1": "Deja de construir desde cero.",
+    "title2": "Envía rápido con ",
+    "title2Pro": "Spectrum Pro",
+    "description": "Plantillas premium de Next.js creadas en Spectrum UI. Oscuras. Animadas. Listas para producción. Desde $49.",
+    "button": "Obtener acceso"
+  }
+}
diff --git a/messages/fr.json b/messages/fr.json
new file mode 100644
index 00000000..5cc26c17
--- /dev/null
+++ b/messages/fr.json
@@ -0,0 +1,40 @@
+{
+  "Navbar": {
+    "home": "Accueil",
+    "components": "Composants",
+    "templates": "Modèles",
+    "blocks": "Blocs",
+    "blogs": "Blogs",
+    "signIn": "Se connecter",
+    "sponsor": "Sponsoriser"
+  },
+  "Footer": {
+    "builtBy": "Créé par",
+    "rights": "Tous droits réservés.",
+    "pages": "Pages",
+    "socials": "Réseaux Sociaux",
+    "legal": "Légal",
+    "docs": "Docs",
+    "colors": "Couleurs",
+    "privacy": "Politique de Confidentialité",
+    "tos": "Conditions d'Utilisation",
+    "faqs": "FAQ",
+    "language": "Langue"
+  },
+  "HomePage": {
+    "heroTitle1": "Composants UI Instantanés",
+    "heroTitle2": "Copiez, Collez, C'est Fait",
+    "heroDescription": "Plus de 250 composants prêts pour la production, créés avec Next.js, shadcn/ui et Tailwind CSS.",
+    "explore": "Explorer les Composants",
+    "starGithub": "Star sur GitHub",
+    "builtWith": "Développé avec",
+    "readyToUse": "Blocs UI prêts à l'emploi"
+  },
+  "CTA": {
+    "title1": "Arrêtez de construire à partir de zéro.",
+    "title2": "Expédiez rapidement avec ",
+    "title2Pro": "Spectrum Pro",
+    "description": "Modèles premium Next.js construits sur Spectrum UI. Sombre. Animé. Prêt pour la production. À partir de 49 $.",
+    "button": "Obtenir l'accès"
+  }
+}
diff --git a/messages/hi.json b/messages/hi.json
new file mode 100644
index 00000000..699caf30
--- /dev/null
+++ b/messages/hi.json
@@ -0,0 +1,40 @@
+{
+  "Navbar": {
+    "home": "होम",
+    "components": "कंपोनेंट्स",
+    "templates": "टेम्प्लेट्स",
+    "blocks": "ब्लॉक्स",
+    "blogs": "ब्लॉग्स",
+    "signIn": "लॉग इन",
+    "sponsor": "स्पॉन्सर"
+  },
+  "Footer": {
+    "builtBy": "द्वारा निर्मित",
+    "rights": "सर्वाधिकार सुरक्षित।",
+    "pages": "पेज",
+    "socials": "सोशल",
+    "legal": "कानूनी",
+    "docs": "डॉक्युमेंटेशन",
+    "colors": "रंग",
+    "privacy": "गोपनीयता नीति",
+    "tos": "सेवा की शर्तें",
+    "faqs": "अक्सर पूछे जाने वाले सवाल",
+    "language": "भाषा"
+  },
+  "HomePage": {
+    "heroTitle1": "इंस्टेंट यूआई कंपोनेंट्स",
+    "heroTitle2": "बस कॉपी, पेस्ट और हो गया",
+    "heroDescription": "Next.js, shadcn/ui और Tailwind CSS के साथ निर्मित 250+ प्रोडक्शन रेडी कंपोनेंट्स।",
+    "explore": "यूआई कंपोनेंट्स देखें",
+    "starGithub": "गिटहब पर स्टार दें",
+    "builtWith": "के साथ निर्मित",
+    "readyToUse": "उपयोग के लिए तैयार यूआई ब्लॉक्स"
+  },
+  "CTA": {
+    "title1": "शुरुआत से बनाना बंद करें।",
+    "title2": "तेजी से शिप करें ",
+    "title2Pro": "स्पेक्ट्रम प्रो के साथ",
+    "description": "स्पेक्ट्रम यूआई पर निर्मित प्रीमियम नेक्स्ट.जीएस टेम्प्लेट्स। डार्क। एनिमेटेड। प्रोडक्शन-रेडी। $49 से शुरू।",
+    "button": "एक्सेस प्राप्त करें"
+  }
+}
diff --git a/messages/pt.json b/messages/pt.json
new file mode 100644
index 00000000..e1e83bcf
--- /dev/null
+++ b/messages/pt.json
@@ -0,0 +1,40 @@
+{
+  "Navbar": {
+    "home": "Início",
+    "components": "Componentes",
+    "templates": "Modelos",
+    "blocks": "Blocos",
+    "blogs": "Blogs",
+    "signIn": "Entrar",
+    "sponsor": "Patrocinar"
+  },
+  "Footer": {
+    "builtBy": "Criado por",
+    "rights": "Todos os direitos reservados.",
+    "pages": "Páginas",
+    "socials": "Redes Sociais",
+    "legal": "Legal",
+    "docs": "Docs",
+    "colors": "Cores",
+    "privacy": "Política de Privacidade",
+    "tos": "Termos de Serviço",
+    "faqs": "Perguntas Frequentes",
+    "language": "Idioma"
+  },
+  "HomePage": {
+    "heroTitle1": "Componentes de UI Instantâneos",
+    "heroTitle2": "Basta Copiar, Colar e Pronto",
+    "heroDescription": "Mais de 250 componentes prontos para produção, criados com Next.js, shadcn/ui e Tailwind CSS.",
+    "explore": "Explorar Componentes",
+    "starGithub": "Estrela no GitHub",
+    "builtWith": "Desenvolvido com",
+    "readyToUse": "Blocos de UI prontos para usar"
+  },
+  "CTA": {
+    "title1": "Pare de construir do zero.",
+    "title2": "Envie rápido com ",
+    "title2Pro": "Spectrum Pro",
+    "description": "Modelos premium Next.js criados no Spectrum UI. Escuro. Animado. Pronto para produção. A partir de $49.",
+    "button": "Obter acesso"
+  }
+}
diff --git a/messages/tr.json b/messages/tr.json
new file mode 100644
index 00000000..89ad1b65
--- /dev/null
+++ b/messages/tr.json
@@ -0,0 +1,40 @@
+{
+  "Navbar": {
+    "home": "Ana Sayfa",
+    "components": "Bileşenler",
+    "templates": "Şablonlar",
+    "blocks": "Bloklar",
+    "blogs": "Bloglar",
+    "signIn": "Giriş Yap",
+    "sponsor": "Sponsor Ol"
+  },
+  "Footer": {
+    "builtBy": "Geliştiren",
+    "rights": "Tüm hakları saklıdır.",
+    "pages": "Sayfalar",
+    "socials": "Sosyal Medya",
+    "legal": "Yasal",
+    "docs": "Belgeler",
+    "colors": "Renkler",
+    "privacy": "Gizlilik Politikası",
+    "tos": "Hizmet Şartları",
+    "faqs": "SSS",
+    "language": "Dil"
+  },
+  "HomePage": {
+    "heroTitle1": "Anında UI Bileşenleri",
+    "heroTitle2": "Kopyala, Yapıştır ve Bitti",
+    "heroDescription": "Next.js, shadcn/ui ve Tailwind CSS ile oluşturulmuş 250+ üretime hazır bileşen.",
+    "explore": "Bileşenleri Keşfet",
+    "starGithub": "GitHub'da Yıldızla",
+    "builtWith": "ile Oluşturuldu",
+    "readyToUse": "Kullanıma Hazır UI Blokları"
+  },
+  "CTA": {
+    "title1": "Sıfırdan inşa etmeyi bırakın.",
+    "title2": "Hızlıca yayına alın: ",
+    "title2Pro": "Spectrum Pro",
+    "description": "Spectrum UI üzerine inşa edilmiş Premium Next.js şablonları. Karanlık. Animasyonlu. Üretime hazır. 49 dolardan başlayan fiyatlarla.",
+    "button": "Erişim sağla"
+  }
+}
diff --git a/messages/zh.json b/messages/zh.json
new file mode 100644
index 00000000..3f99d317
--- /dev/null
+++ b/messages/zh.json
@@ -0,0 +1,40 @@
+{
+  "Navbar": {
+    "home": "首页",
+    "components": "组件",
+    "templates": "模板",
+    "blocks": "区块",
+    "blogs": "博客",
+    "signIn": "登录",
+    "sponsor": "赞助"
+  },
+  "Footer": {
+    "builtBy": "由...创建",
+    "rights": "保留所有权利。",
+    "pages": "页面",
+    "socials": "社交媒体",
+    "legal": "法律信息",
+    "docs": "文档",
+    "colors": "颜色",
+    "privacy": "隐私政策",
+    "tos": "服务条款",
+    "faqs": "常见问题",
+    "language": "语言"
+  },
+  "HomePage": {
+    "heroTitle1": "即时 UI 组件",
+    "heroTitle2": "只需复制、粘贴，即可完成",
+    "heroDescription": "250多个生产级组件，基于 Next.js、shadcn/ui 和 Tailwind CSS 构建。",
+    "explore": "探索组件",
+    "starGithub": "GitHub 点星",
+    "builtWith": "构建环境",
+    "readyToUse": "开箱即用的 UI 区块"
+  },
+  "CTA": {
+    "title1": "停止从零开始构建。",
+    "title2": "快速发布，尽在 ",
+    "title2Pro": "Spectrum Pro",
+    "description": "基于 Spectrum UI 构建的高级 Next.js 模板。深色模式、动态效果、生产就绪。起售价仅为 49 美元。",
+    "button": "获取访问权限"
+  }
+}