diff --git a/messages/[en]/about.json b/messages/[en]/about.json
new file mode 100644
index 0000000..147cfcf
--- /dev/null
+++ b/messages/[en]/about.json
@@ -0,0 +1,129 @@
+{
+  "title": "About MyLibrary",
+  "description": "MyLibrary is a comprehensive component library built with Next.js and Tailwind CSS, designed to provide developers with reusable, accessible, and beautifully designed UI components. Our goal is to accelerate development workflows and maintain design consistency across projects.",
+  "overview": {
+    "components": "20+ Components",
+    "typescript": "TypeScript Ready",
+    "performance": "Performance Optimized"
+  },
+  "mission": {
+    "title": "Our Mission",
+    "description": "To empower developers with a robust, flexible, and beautiful component library that reduces development time while maintaining high-quality user experiences. We believe in making web development more efficient and enjoyable."
+  },
+  "vision": {
+    "title": "Our Vision",
+    "description": "To become the go-to component library for React developers, fostering a community where innovation meets practicality. We envision a world where building beautiful UIs is accessible to developers of all skill levels."
+  },
+  "features": {
+    "title": "Why Choose MyLibrary?",
+    "designSystem": {
+      "title": "Design System",
+      "description": "Consistent design tokens and theming system for cohesive user experiences."
+    },
+    "accessibility": {
+      "title": "Accessibility First",
+      "description": "Built with WCAG 2.1 guidelines and keyboard navigation support."
+    },
+    "performance": {
+      "title": "Performance",
+      "description": "Optimized bundle size with tree-shaking and minimal dependencies."
+    },
+    "devExperience": {
+      "title": "Developer Experience",
+      "description": "TypeScript support, comprehensive documentation, and excellent IDE integration."
+    },
+    "community": {
+      "title": "Community Driven",
+      "description": "Open source project with active community contributions and feedback."
+    },
+    "flexible": {
+      "title": "Flexible",
+      "description": "Customizable components that adapt to your design requirements."
+    }
+  },
+  "techStack": {
+    "title": "Tech Stack",
+    "nextjs": {
+      "title": "Next.js 14",
+      "description": "React framework with App Router"
+    },
+    "react": {
+      "title": "React 18",
+      "description": "Component-based architecture"
+    },
+    "tailwind": {
+      "title": "Tailwind CSS",
+      "description": "Utility-first styling"
+    },
+    "typescript": {
+      "title": "TypeScript",
+      "description": "Type-safe development"
+    },
+    "additionalTools": {
+      "title": "Additional Tools",
+      "eslint": "ESLint",
+      "prettier": "Prettier",
+      "lucide": "Lucide Icons",
+      "postcss": "PostCSS",
+      "git": "Git"
+    }
+  },
+  "gettingStarted": {
+    "title": "🚀 Getting Started",
+    "installation": {
+      "title": "Installation",
+      "description": "Install the library via npm or copy ready-to-use components directly."
+    },
+    "import": {
+      "title": "Import",
+      "description": "Import the components you need directly into your React project and start building faster."
+    },
+    "customize": {
+      "title": "Customize",
+      "description": "Tweak the design, colors, and behavior easily to match your own design system."
+    },
+    "cta": "View Components"
+  },
+  "contributing": {
+    "title": "Contributing",
+    "description": "We welcome contributions from the community! Whether you're fixing bugs, adding new components, or improving documentation, your help makes MyLibrary better for everyone.",
+    "submitIssues": {
+      "title": "Submit Issues",
+      "description": "Report bugs or request features on GitHub"
+    },
+    "pullRequests": {
+      "title": "Create Pull Requests",
+      "description": "Contribute code improvements and new features"
+    },
+    "documentation": {
+      "title": "Improve Documentation",
+      "description": "Help make our docs clearer and more comprehensive"
+    }
+  },
+  "community": {
+    "title": "Community",
+    "description": "Join our growing community of developers who are building amazing user interfaces with MyLibrary.",
+    "githubStars": "GitHub Stars",
+    "contributors": "Contributors",
+    "downloads": "Downloads",
+    "builtWithLove": "Built with ❤️ by the open source community"
+  },
+  "contributors": {
+    "title": "Our Contributors",
+    "thankYou": "Thank you to all the amazing developers who have contributed to making this component library better!",
+    "loading": "Loading contributors...",
+    "contributorsError": "Failed to load contributors",
+    "avatarAlt": "{login}'s avatar",
+    "contributions": "{count} contribution{count, plural, one {} other {s}}",
+    "profile": "Profile",
+    "join": "Want to join our contributors? Check out our ",
+    "githubRepo": "GitHub repository",
+    "getStarted": " to get started!"
+  },
+  "license": {
+    "title": "Open Source & Free",
+    "description": "MyLibrary is released under the MIT License, making it free to use for both personal and commercial projects.",
+    "github": "View on GitHub",
+    "contact": "Get in Touch"
+  }
+}
diff --git a/messages/[en]/analytics.json b/messages/[en]/analytics.json
new file mode 100644
index 0000000..5375c18
--- /dev/null
+++ b/messages/[en]/analytics.json
@@ -0,0 +1,38 @@
+{
+  "header": {
+    "title": "Component Analytics Dashboard",
+    "description": "Track component usage, performance, and user engagement",
+    "export": "Export Data"
+  },
+  "overview": {
+    "totalViews": "Total Views",
+    "totalCopies": "Total Copies",
+    "componentsUsed": "Components Used",
+    "sessionTime": "Session Time"
+  },
+  "popular": {
+    "title": "Most Popular Components"
+  },
+  "recent": {
+    "title": "Last 7 Days Activity",
+    "today": "Today"
+  },
+  "performance": {
+    "title": "Performance Insights",
+    "avgViews": "Avg Views per Component",
+    "copyRate": "Copy Rate",
+    "viewsWeek": "Views This Week"
+  },
+  "actions": {
+    "title": "Quick Actions",
+    "viewComponents": "View Components",
+    "export": "Export Analytics",
+    "reset": "Reset Data"
+  },
+  "modal": {
+    "title": "Reset Analytics Data",
+    "message": "This will permanently delete all analytics data including views, copies, and session information. This action cannot be undone.",
+    "confirm": "Reset Data",
+    "cancel": "Cancel"
+  }
+}
\ No newline at end of file
diff --git a/messages/[en]/common.json b/messages/[en]/common.json
new file mode 100644
index 0000000..87eb6f3
--- /dev/null
+++ b/messages/[en]/common.json
@@ -0,0 +1,30 @@
+{
+  "navigation": {
+    "home": "Home",
+    "about": "About",
+    "contact": "Contact",
+    "components": "Components",
+    "playground": "🎮 Playground",
+    "analytics": "Analytics",
+    "feedback": "Feedback",
+    "game":"🎮 Game",
+    "racing game":"🏁 Racing Game",
+    "fun": "Fun"
+  },
+  "footer": {
+    "brand": "MyLibrary",
+    "subtitle": "Component Library",
+    "description": "An open-source Next.js + Tailwind CSS Component Library with ready-to-use UI components. Perfect for developers to learn, practice, and contribute during Hacktoberfest and beyond.",
+    "followUs": "Follow Us",
+    "social": {
+      "github": "GitHub",
+      "linkedin": "LinkedIn",
+      "twitter": "Twitter",
+      "discord": "Discord",
+      "youtube": "YouTube"
+    },
+    "madeWith": "Made with",
+    "hacktoberfest": "for Hacktoberfest",
+    "copyright": "MyLibrary Component Library. All rights reserved."
+  }
+}
\ No newline at end of file
diff --git a/messages/[en]/comps.json b/messages/[en]/comps.json
new file mode 100644
index 0000000..7001b6a
--- /dev/null
+++ b/messages/[en]/comps.json
@@ -0,0 +1,350 @@
+{
+  "hero": {
+    "title": "React UI Playground",
+    "description": "Beautiful, modern & responsive component demo – each below section is styled for clarity, vibrance, and accessibility."
+  },
+  "search": {
+    "placeholder": "Search components (buttons, cards, primary, etc.)",
+    "results": "Found {count} component{count, plural, one {} other {s}}{search, select, '' {} other { matching \"{search}\"}}{filter, select, all {} other { in {filter}}}",
+    "noResults": "No components found"
+  },
+  "filter": {
+    "all": "All Components",
+    "buttons": "Buttons",
+    "backgrounds": "Backgrounds",
+    "cards": "Cards",
+    "inputs": "Inputs",
+    "navigation": "Navigation",
+    "badges": "Badges"
+  },
+  "selectOptions": {
+    "option1": "Option 1",
+    "option2": "Option 2",
+    "option3": "Option 3"
+  },
+  "tabs": {
+    "dashboard": "Dashboard",
+    "dashboardContent": "Dashboard content goes here...",
+    "analytics": "Analytics",
+    "analyticsContent": "Analytics content goes here...",
+    "settings": "Settings",
+    "settingsContent": "Settings content goes here..."
+  },
+  "breadcrumb": {
+    "home": "Home",
+    "components": "Components",
+    "navigation": "Navigation",
+    "breadcrumb": "Breadcrumb"
+  },
+  "buttons": {
+    "primary": {
+      "name": "Primary Button",
+      "label": "Primary",
+      "keywords": ["primary", "main", "action", "cta"],
+      "desc": "Used for Main Actions"
+    },
+    "gradient": {
+      "name": "Gradient Button",
+      "label": "Gradient",
+      "keywords": ["gradient", "colorful", "bright", "cta"],
+      "desc": "Vibrant gradient button with hover scaling and loading spinner"
+    },
+    "neon": {
+      "name": "Neon Button",
+      "label": "Neon",
+      "keywords": ["neon", "glow", "bright", "futuristic"],
+      "desc": "Glowing futuristic button with loading spinner and hover scaling"
+    },
+    "secondary": {
+      "name": "Secondary Button",
+      "label": "Secondary",
+      "keywords": ["secondary", "alternate"],
+      "desc": "Used for secondary Actions"
+    },
+    "ghost": {
+      "name": "Ghost Button",
+      "label": "Ghost",
+      "keywords": ["ghost", "transparent", "subtle"],
+      "desc": "Used for minimal actions"
+    },
+    "outline": {
+      "name": "Outline Button",
+      "label": "Outline",
+      "keywords": ["outline", "border", "stroke"],
+      "desc": "Used for gives outline"
+    },
+    "danger": {
+      "name": "Danger Button",
+      "label": "Danger",
+      "keywords": ["danger", "error", "delete", "warning", "red"],
+      "desc": "Used for destructive actions"
+    },
+    "success": {
+      "name": "Success Button",
+      "label": "Success",
+      "keywords": ["success", "confirm", "done", "green"],
+      "desc": "Used for success actions"
+    },
+    "icon": {
+      "name": "Icon Button",
+      "label": "Icon",
+      "keywords": ["icon", "star", "symbol"],
+      "desc": "Used for icons"
+    },
+    "rainbow": {
+      "name": "Rainbow Button",
+      "label": "Rainbow",
+      "keywords": ["rainbow", "action", "colorful"],
+      "desc": "Used for call to actions"
+    },
+    "glass": {
+      "name": "Glass Button",
+      "label": "Button",
+      "keywords": ["glass", "cta", "action"],
+      "desc": "Used for any action"
+    }
+  },
+  "cards": {
+    "simple": {
+      "name": "Simple Card",
+      "title": "Simple Card",
+      "description": "A minimal card with actions.",
+      "keywords": ["simple", "basic", "minimal"]
+    },
+    "smart": {
+      "name": "Smart Card",
+      "title": "Smart Card",
+      "description": "A modern card with gradient background, hover effects, and optional footer.",
+      "footer": "Action",
+      "keywords": ["smart", "gradient", "card", "hover", "footer", "image"]
+    },
+    "image": {
+      "name": "Image Card",
+      "title": "Image Card",
+      "description": "Card with SVG image.",
+      "keywords": ["image", "picture", "visual"]
+    },
+    "feature": {
+      "name": "Feature Card",
+      "title": "Feature Card",
+      "description": "Highlight features and benefits.",
+      "keywords": ["feature", "highlight", "benefit"]
+    },
+    "pricing": {
+      "name": "Pricing Card",
+      "plan": "Pro",
+      "price": "$9/mo",
+      "features": ["10 projects", "Priority support", "Unlimited users"],
+      "keywords": ["pricing", "plan", "subscription", "price"]
+    },
+    "data": {
+      "name": "Data Card",
+      "title": "Active Projects",
+      "keywords": ["data", "stats", "analytics", "metrics"]
+    }
+  },
+  "utility": {
+    "alert": {
+      "name": "MinimalAlert",
+      "keywords": ["alert", "popup"]
+    },
+    "loaders": {
+      "name": "Loaders",
+      "simple": "Simple Loader",
+      "dual": "Dual Loader",
+      "dots": "Dots Loader",
+      "bar": "Bar Loader",
+      "keywords": ["spinner", "loader", "loading"]
+    },
+    "tooltips": {
+      "name": "Tooltips",
+      "simple": "Simple ToolTip",
+      "animated": "Animated ToolTip",
+      "refreshText": "Click to refresh",
+      "deleteText": "Delete item",
+      "keywords": ["tooltip", "popups"]
+    }
+  },
+  "inputs": {
+    "text": {
+      "name": "Text Input",
+      "label": "Sample Input",
+      "placeholder": "Enter text",
+      "keywords": ["text", "input", "field", "form"]
+    },
+    "password": {
+      "name": "Password Input",
+      "placeholder": "Enter password",
+      "keywords": ["password", "input", "field", "form", "show", "hide"],
+      "label": "Password",
+      "error": "Invalid password"
+    },
+    "select": {
+      "name": "Select",
+      "label": "Sample Select",
+      "keywords": ["select", "dropdown", "options", "choice"]
+    },
+    "checkbox": {
+      "name": "Checkbox",
+      "label": "Sample Checkbox",
+      "description": "Check this option",
+      "keywords": ["checkbox", "check", "toggle", "boolean"]
+    },
+    "loginForm": {
+      "name": "Login Form",
+      "keywords": ["login", "form", "authentication", "signin", "auth", "email", "password"],
+      "desc": "Complete login form with validation and social login options"
+    },
+    "calendar": {
+      "name": "Calendar",
+      "keywords": ["calendar", "date", "schedule", "month", "events"],
+      "desc": "Accessible, responsive month-view calendar with event indicators"
+    },
+    "emailAddress": {
+      "label": "Email Address",
+      "placeholder": "Enter your email",
+      "helperText": "We'll never share your email.",
+      "required": "Required"
+    },
+    
+    "chooseOption": {
+      "label": "Choose an option"
+    },
+    "termsConditions": {
+      "label": "Accept Terms",
+      "description": "You must accept terms and conditions"
+    },
+    "disabledOption": {
+      "label": "Disabled Option",
+      "description": "This option is disabled"
+    }
+  },
+  "backgrounds": {
+    "interactiveTiles": {
+      "name": "Interactive Tiles",
+      "keywords": ["interactive", "tiles", "backgrounds", "grid"],
+      "desc": "Interactive tiles background"
+    }
+  },
+  "navigation": {
+    "breadcrumb": {
+      "name": "Breadcrumb",
+      "keywords": ["breadcrumb", "navigation", "path", "hierarchy"]
+    },
+    "tabs": {
+      "name": "Tabs",
+      "keywords": ["tabs", "navigation", "switch", "toggle"]
+    },
+    "pagination": {
+      "name": "Pagination",
+      "keywords": ["pagination", "pages", "navigation", "paging"]
+    }
+  },
+  "badges": {
+    "badge": {
+      "name": "Badge",
+      "primary": "Primary",
+      "success": "Success",
+      "warning": "Warning",
+      "danger": "Danger",
+      "closable": "Closable",
+      "withIcon": "With Icon",
+      "notifications": "Notifications",
+      "keywords": ["badge", "tag", "label", "status", "indicator"],
+      "desc": "Used for status indicators and labels"
+    },
+    "chip": {
+      "name": "Chip",
+      "primary": "Primary Chip",
+      "success": "Success",
+      "warning": "Warning",
+      "danger": "Danger",
+      "closable": "Closable",
+      "withIcon": "With Icon",
+      "keywords": ["chip", "tag", "label", "filter", "category"],
+      "desc": "Used for filters, categories, and removable tags"
+    }
+  },
+  "sections": {
+    "buttons": "Buttons",
+    "cards": "Cards",
+    "inputs": "Inputs",
+    "backgrounds": "Backgrounds",
+    "utility": "Utility",
+    "navigation": "Navigation",
+    "badges": "Badges",
+    "avatars": "Avatars",
+    "accordion": "Accordion",
+    "feedback": "Feedback",
+    "formHelper": "Form Helpers"
+  },
+  "avatars": {
+    "group": "Avatar Group"
+  },
+  "feedback": {
+    "success": "Success feedback message",
+    "error": "Error feedback message",
+    "warning": "Warning feedback message",
+    "info": "Info feedback message"
+  },
+  "formHelper": {
+    "datePicker": {
+      "title": "Date Picker",
+      "label": "Pick a date"
+    },
+    "slider": {
+      "title": "Slider"
+    },
+    "fileUpload": {
+      "title": "File Upload"
+    },
+    "formValidation": {
+      "title": "Form Validation"
+    },
+    "loginForm": {
+      "title": "Login Form"
+    },
+    "signupPage": {
+      "title": "Signup Page"
+    },
+    "otpVerification": {
+      "title": "OTP Verification",
+      "tryCode": "Try code 123456"
+    }
+  },
+  "accordion": {
+    "basic": {
+      "title": "Basic Accordion",
+      "items": [
+        { "title": "Section 1", "content": "Content for section 1" },
+        { "title": "Section 2", "content": "Content for section 2" },
+        { "title": "Section 3", "content": "Content for section 3" },
+        { "title": "Section 4", "content": "Content for section 4" }
+      ]
+    },
+    "multiple": {
+      "title": "Multiple Open Accordion",
+      "items": [
+        { "title": "Section 1", "content": "Content for section 1" },
+        { "title": "Section 2", "content": "Content for section 2" },
+        { "title": "Section 3", "content": "Content for section 3" },
+        { "title": "Section 4", "content": "Content for section 4" }
+      ]
+    },
+    "minimal": {
+      "title": "Minimal Accordion",
+      "items": [
+        { "title": "Section 1", "content": "Content for section 1" },
+        { "title": "Section 2", "content": "Content for section 2" },
+        { "title": "Section 3", "content": "Content for section 3" }
+      ]
+    },
+    "alwaysOpen": {
+      "title": "Always Open Accordion",
+      "items": [
+        { "title": "Section 1", "content": "Content for section 1" },
+        { "title": "Section 2", "content": "Content for section 2" }
+      ]
+    }
+  }
+}
diff --git a/messages/[en]/contact.json b/messages/[en]/contact.json
new file mode 100644
index 0000000..28580be
--- /dev/null
+++ b/messages/[en]/contact.json
@@ -0,0 +1,78 @@
+{
+  "header": {
+    "title": "Get in Touch",
+    "description": "Have questions about our component library? Want to contribute or report a bug? We'd love to hear from you!"
+  },
+  "form": {
+    "title": "Send us a Message",
+    "success": "Thank you for your message! We'll get back to you soon.",
+    "error": "Sorry, there was an error sending your message. Please try again.",
+    "sending": "Sending...",
+    "send": "Send Message",
+    "fields": {
+      "name": {
+        "label": "Full Name *",
+        "placeholder": "Enter your full name"
+      },
+      "email": {
+        "label": "Email Address *",
+        "placeholder": "your.email@example.com"
+      },
+      "subject": {
+        "label": "Subject *",
+        "placeholder": "Select a subject",
+        "options": {
+          "bugReport": "Bug Report",
+          "featureRequest": "Feature Request",
+          "documentation": "Documentation",
+          "contribution": "Contribution",
+          "support": "General Support",
+          "other": "Other"
+        }
+      },
+      "message": {
+        "label": "Message *",
+        "placeholder": "Tell us how we can help you..."
+      }
+    }
+  },
+  "errors": {
+    "nameRequired": "Name is required",
+    "emailRequired": "Email is required",
+    "emailInvalid": "Please enter a valid email address",
+    "subjectRequired": "Subject is required",
+    "messageRequired": "Message is required",
+    "messageLength": "Message must be at least 10 characters long"
+  },
+  "info": {
+    "title": "Contact Information",
+    "email": {
+      "title": "Email"
+    },
+    "github": {
+      "title": "GitHub"
+    },
+    "linktree": {
+      "title": "Linktree",
+      "description": "Check out our Linktree for all our social links:"
+    }
+  },
+  "social": {
+    "title": "Follow Us"
+  },
+  "faq": {
+    "title": "Frequently Asked Questions",
+    "q1": {
+      "title": "How can I contribute to the library?",
+      "description": "Check out our CONTRIBUTING.md file for guidelines on how to contribute components, report bugs, or suggest improvements."
+    },
+    "q2": {
+      "title": "Is this library free to use?",
+      "description": "Yes! This component library is open source and free to use in both personal and commercial projects."
+    },
+    "q3": {
+      "title": "How do I report a bug?",
+      "description": "You can report bugs through our GitHub issues page or by using the contact form above with \"Bug Report\" as the subject."
+    }
+  }
+}
diff --git a/messages/[en]/feedback.json b/messages/[en]/feedback.json
new file mode 100644
index 0000000..c7295fa
--- /dev/null
+++ b/messages/[en]/feedback.json
@@ -0,0 +1,86 @@
+{
+  "header": {
+    "title": "We Value Your Feedback",
+    "description": "Help us improve MyLibrary by sharing your thoughts, reporting bugs, or suggesting new features."
+  },
+  "alert": {
+    "success": {
+      "title": "Thank you!",
+      "message": "Your feedback has been submitted successfully. We'll review it soon."
+    },
+    "error": {
+      "title": "Error",
+      "message": "Please fill in all required fields before submitting."
+    }
+  },
+  "form": {
+    "title": "Share Your Feedback",
+    "categoryLabel": "Feedback Category *",
+    "ratingLabel": "Overall Rating",
+    "emailLabel": "Email (Optional)",
+    "emailPlaceholder": "your.email@example.com",
+    "emailHelper": "We'll only use this to follow up on your feedback",
+    "feedbackLabel": "Your Feedback *",
+    "feedbackPlaceholder": "Tell us about your experience, report a bug, or suggest improvements...",
+    "submit": "Submit Feedback",
+    "clear": "Clear Form"
+  },
+  "category": {
+    "bug": "Bug Report",
+    "feature": "Feature Request",
+    "improvement": "Improvement Suggestion",
+    "general": "General Feedback"
+  },
+  "rating": {
+    "5": "⭐⭐⭐⭐⭐ Excellent",
+    "4": "⭐⭐⭐⭐ Good",
+    "3": "⭐⭐⭐ Average",
+    "2": "⭐⭐ Poor",
+    "1": "⭐ Very Poor"
+  },
+  "sidebar": {
+    "stats": {
+      "title": "Community Stats",
+      "totalComponents": "Total Components",
+      "githubStars": "GitHub Stars",
+      "contributors": "Contributors",
+      "issuesResolved": "Issues Resolved"
+    },
+    "progress": {
+      "title": "Development Progress",
+      "buttons": "Button Components",
+      "cards": "Card Components",
+      "forms": "Form Components",
+      "navigation": "Navigation"
+    },
+    "contact": {
+      "title": "Other Ways to Reach Us",
+      "email": "📧 Email Support",
+      "discord": "💬 Discord Community",
+      "github": "🐙 GitHub Issues"
+    }
+  },
+  "recent": {
+    "title": "Recent Community Feedback",
+    "items": [
+      {
+        "name": "Alex",
+        "time": "2 days ago",
+        "category": "Feature",
+        "feedback": "Love the new button variants! Could we get a loading state for buttons?"
+      },
+      {
+        "name": "Sarah",
+        "time": "1 week ago",
+        "category": "Bug",
+        "feedback": "Card component spacing issue on mobile devices. Fixed in latest update!"
+      },
+      {
+        "name": "Mike",
+        "time": "2 weeks ago",
+        "category": "General",
+        "feedback": "Excellent documentation and examples. Makes integration super easy!"
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/messages/[en]/playground.json b/messages/[en]/playground.json
new file mode 100644
index 0000000..9fc90fd
--- /dev/null
+++ b/messages/[en]/playground.json
@@ -0,0 +1,219 @@
+{
+  "title": "Advanced Component Playground",
+  "subtitle": "Customize components in real-time and export production-ready code!",
+  
+  "controls": {
+    "componentType": "Component Type",
+    "variant": "Variant",
+    "previewMode": "Preview Mode",
+    "myFavorites": "My Favorites ({count})",
+    "customizationControls": "Customization Controls",
+    "reset": "Reset",
+    "random": "Random",
+    "showFavorites": "Show Favorites",
+    "hideFavorites": "Hide Favorites"
+  },
+  
+  "componentTypes": {
+    "buttons": "Buttons",
+    "cards": "Cards",
+    "inputs": "Inputs"
+  },
+  
+  "buttonVariants": {
+    "primary": "Primary Button",
+    "secondary": "Secondary Button",
+    "danger": "Danger Button",
+    "success": "Success Button",
+    "ghost": "Ghost Button",
+    "outline": "Outline Button",
+    "rainbow": "Rainbow Button"
+  },
+  
+  "cardVariants": {
+    "simple": "Simple Card",
+    "feature": "Feature Card",
+    "pricing": "Pricing Card",
+    "user": "User Card",
+    "data": "Data Card"
+  },
+  
+  "inputVariants": {
+    "text": "Text Input",
+    "select": "Select Dropdown",
+    "checkbox": "Checkbox"
+  },
+  
+  "buttonControls": {
+    "buttonText": "Button Text",
+    "buttonSize": "Button Size",
+    "sizes": {
+      "small": "Small",
+      "medium": "Medium",
+      "large": "Large"
+    },
+    "disabled": "Disabled",
+    "loading": "Loading",
+    "loadingText": "⏳ Loading..."
+  },
+  
+  "cardControls": {
+    "cardTitle": "Card Title",
+    "cardDescription": "Card Description",
+    "cardTitlePlaceholder": "Enter card title",
+    "cardDescriptionPlaceholder": "Enter card description"
+  },
+  
+  "pricingControls": {
+    "planName": "Plan Name",
+    "price": "Price",
+    "features": "Features (comma separated)",
+    "planPlaceholder": "e.g., Pro",
+    "pricePlaceholder": "e.g., $9/mo",
+    "featuresPlaceholder": "Feature 1, Feature 2, Feature 3"
+  },
+  
+  "userCardControls": {
+    "userName": "User Name",
+    "email": "Email",
+    "role": "Role",
+    "avatarUrl": "Avatar URL",
+    "userNamePlaceholder": "John Doe",
+    "emailPlaceholder": "john@example.com",
+    "rolePlaceholder": "Software Engineer",
+    "avatarPlaceholder": "https://i.pravatar.cc/150?img=1"
+  },
+  
+  "dataCardControls": {
+    "dataTitle": "Data Title",
+    "value": "Value",
+    "icon": "Icon (Emoji)",
+    "trend": "Trend (%)",
+    "dataTitlePlaceholder": "Active Projects",
+    "valuePlaceholder": "27",
+    "iconPlaceholder": "📂",
+    "trendPlaceholder": "8"
+  },
+  
+  "inputControls": {
+    "label": "Label",
+    "placeholder": "Placeholder",
+    "errorMessage": "Error Message (optional)",
+    "required": "Required",
+    "labelPlaceholder": "Enter input label",
+    "placeholderPlaceholder": "Enter placeholder text",
+    "errorPlaceholder": "Enter error message"
+  },
+  
+  "codeSection": {
+    "generatedCode": "Generated Code",
+    "show": "Show",
+    "hide": "Hide",
+    "copyCode": "Copy Code",
+    "copied": "✅ Copied!",
+    "failedToCopy": "❌ Failed to copy",
+    "language": "React JSX"
+  },
+  
+  "preview": {
+    "livePreview": "Live Preview",
+    "componentInfo": "Component Info",
+    "type": "Type",
+    "variant": "Variant",
+    "interactive": "Interactive",
+    "clickToTest": "Yes (Click to test)",
+    "displayOnly": "Display only",
+    "light": "Light",
+    "dark": "Dark"
+  },
+  
+  "favorites": {
+    "title": "My Favorite Components ({count})",
+    "clearAll": "Clear All",
+    "noFavorites": "No favorite components yet",
+    "noFavoritesDesc": "Click the heart icon on any component to add it to your favorites",
+    "addFavorite": "Add Favorite",
+    "removeFavorite": "Remove Favorite",
+    "addedDate": "Added {date}",
+    "componentSuffix": "Component",
+    "addToFavorites": "Add to favorites",
+    "removeFromFavorites": "Remove from favorites"
+  },
+  
+  "showcase": {
+    "allVariants": "All {type} Variants",
+    "clickToCustomize": "Click to customize",
+    "preview": "Preview",
+    "sample": "Sample"
+  },
+  
+  "stats": {
+    "title": "Playground Stats",
+    "buttonTypes": "Button Types",
+    "cardTypes": "Card Types",
+    "inputTypes": "Input Types",
+    "favorites": "Favorites"
+  },
+  
+  "actions": {
+    "randomize": "Randomize",
+    "reset": "Reset",
+    "copyCode": "Copy Code"
+  },
+  
+  "defaultValues": {
+    "buttonText": "Click Me",
+    "cardTitle": "Sample Card",
+    "cardDescription": "This is a sample card description",
+    "inputLabel": "Sample Input",
+    "inputPlaceholder": "Enter text here...",
+    "checkboxDescription": "Check this option",
+    "selectOptions": {
+      "option1": "Option 1",
+      "option2": "Option 2",
+      "option3": "Option 3"
+    }
+  },
+  
+  "randomValues": {
+    "buttonTexts": ["Get Started", "Learn More", "Sign Up Now", "Download", "Subscribe", "Join Us", "Try Free", "Contact Us"],
+    "cardTitles": ["Amazing Feature", "Premium Service", "New Product", "Special Offer", "Latest Update"],
+    "cardDescriptions": [
+      "Discover incredible features that will transform your workflow",
+      "Experience premium quality with our professional services",
+      "Introducing our latest product with cutting-edge technology",
+      "Limited time offer with exclusive benefits for you",
+      "Stay updated with the latest improvements and features"
+    ],
+    "userNames": ["Alice Johnson", "Bob Smith", "Carol Davis", "David Wilson", "Emma Brown"],
+    "userRoles": ["Frontend Developer", "Backend Engineer", "UI/UX Designer", "Product Manager", "DevOps Engineer"],
+    "dataTitles": ["Total Users", "Revenue", "Active Sessions", "Conversion Rate", "Growth Rate"],
+    "dataValues": ["1,234", "$45.6K", "89%", "12.5%", "+23%"],
+    "dataIcons": ["👥", "💰", "📊", "📈", "🚀"]
+  },
+  
+  "pricing": {
+    "defaultPlan": "Pro",
+    "defaultPrice": "$9/mo",
+    "defaultFeatures": ["10 projects", "Priority support", "Unlimited users"]
+  },
+  
+  "userData": {
+    "defaultName": "John Doe",
+    "defaultEmail": "john@example.com",
+    "defaultRole": "Software Engineer"
+  },
+  
+  "dataCard": {
+    "defaultTitle": "Active Projects",
+    "defaultValue": "27",
+    "defaultIcon": "📂",
+    "defaultTrend": 8
+  },
+  
+  "messages": {
+    "codeCopied": "Code copied to clipboard!",
+    "copyFailed": "Failed to copy code.",
+    "clickAlert": "{component} clicked!"
+  }
+}
\ No newline at end of file
diff --git a/messages/[es]/about.json b/messages/[es]/about.json
new file mode 100644
index 0000000..a8f25db
--- /dev/null
+++ b/messages/[es]/about.json
@@ -0,0 +1,129 @@
+{
+  "title": "Acerca de MyLibrary",
+  "description": "MyLibrary es una biblioteca de componentes integral construida con Next.js y Tailwind CSS, diseñada para proporcionar a los desarrolladores componentes de UI reutilizables, accesibles y bellamente diseñados. Nuestro objetivo es acelerar los flujos de trabajo de desarrollo y mantener la coherencia del diseño en los proyectos.",
+  "overview": {
+    "components": "20+ Componentes",
+    "typescript": "Listo para TypeScript",
+    "performance": "Optimizado para rendimiento"
+  },
+  "mission": {
+    "title": "Nuestra Misión",
+    "description": "Empoderar a los desarrolladores con una biblioteca de componentes robusta, flexible y hermosa que reduzca el tiempo de desarrollo manteniendo experiencias de usuario de alta calidad. Creemos en hacer el desarrollo web más eficiente y agradable."
+  },
+  "vision": {
+    "title": "Nuestra Visión",
+    "description": "Convertirse en la biblioteca de componentes preferida para desarrolladores de React, fomentando una comunidad donde la innovación se une a la practicidad. Imaginamos un mundo donde crear hermosas interfaces de usuario sea accesible para desarrolladores de todos los niveles."
+  },
+  "features": {
+    "title": "¿Por qué elegir MyLibrary?",
+    "designSystem": {
+      "title": "Sistema de Diseño",
+      "description": "Tokens de diseño consistentes y sistema de temas para experiencias de usuario cohesivas."
+    },
+    "accessibility": {
+      "title": "Accesibilidad Primero",
+      "description": "Construido con las directrices WCAG 2.1 y soporte de navegación por teclado."
+    },
+    "performance": {
+      "title": "Rendimiento",
+      "description": "Tamaño de paquete optimizado con tree-shaking y dependencias mínimas."
+    },
+    "devExperience": {
+      "title": "Experiencia del Desarrollador",
+      "description": "Soporte para TypeScript, documentación completa e integración excelente con IDE."
+    },
+    "community": {
+      "title": "Impulsado por la Comunidad",
+      "description": "Proyecto de código abierto con contribuciones y retroalimentación activa de la comunidad."
+    },
+    "flexible": {
+      "title": "Flexible",
+      "description": "Componentes personalizables que se adaptan a tus requisitos de diseño."
+    }
+  },
+  "techStack": {
+    "title": "Tecnologías",
+    "nextjs": {
+      "title": "Next.js 14",
+      "description": "Framework de React con App Router"
+    },
+    "react": {
+      "title": "React 18",
+      "description": "Arquitectura basada en componentes"
+    },
+    "tailwind": {
+      "title": "Tailwind CSS",
+      "description": "Estilos utilitarios primero"
+    },
+    "typescript": {
+      "title": "TypeScript",
+      "description": "Desarrollo con tipado seguro"
+    },
+    "additionalTools": {
+      "title": "Herramientas Adicionales",
+      "eslint": "ESLint",
+      "prettier": "Prettier",
+      "lucide": "Lucide Icons",
+      "postcss": "PostCSS",
+      "git": "Git"
+    }
+  },
+  "gettingStarted": {
+    "title": "🚀 Comenzando",
+    "installation": {
+      "title": "Instalación",
+      "description": "Instala la biblioteca vía npm o copia componentes listos para usar directamente."
+    },
+    "import": {
+      "title": "Importar",
+      "description": "Importa los componentes que necesitas directamente en tu proyecto React y comienza a construir más rápido."
+    },
+    "customize": {
+      "title": "Personalizar",
+      "description": "Ajusta el diseño, los colores y el comportamiento fácilmente para que coincidan con tu propio sistema de diseño."
+    },
+    "cta": "Ver Componentes"
+  },
+  "contributing": {
+    "title": "Contribuyendo",
+    "description": "¡Damos la bienvenida a las contribuciones de la comunidad! Ya sea que estés corrigiendo errores, agregando nuevos componentes o mejorando la documentación, tu ayuda hace que MyLibrary sea mejor para todos.",
+    "submitIssues": {
+      "title": "Enviar Problemas",
+      "description": "Reporta errores o solicita funciones en GitHub"
+    },
+    "pullRequests": {
+      "title": "Crear Pull Requests",
+      "description": "Contribuye con mejoras de código y nuevas funciones"
+    },
+    "documentation": {
+      "title": "Mejorar Documentación",
+      "description": "Ayuda a que nuestra documentación sea más clara y completa"
+    }
+  },
+  "community": {
+    "title": "Comunidad",
+    "description": "Únete a nuestra creciente comunidad de desarrolladores que están creando increíbles interfaces de usuario con MyLibrary.",
+    "githubStars": "Estrellas en GitHub",
+    "contributors": "Colaboradores",
+    "downloads": "Descargas",
+    "builtWithLove": "Construido con ❤️ por la comunidad de código abierto"
+  },
+  "contributors": {
+    "title": "Nuestros Colaboradores",
+    "thankYou": "¡Gracias a todos los desarrolladores increíbles que han contribuido a mejorar esta biblioteca de componentes!",
+    "loading": "Cargando colaboradores...",
+    "contributorsError": "No se pudieron cargar los colaboradores",
+    "avatarAlt": "Avatar de {login}",
+    "contributions": "{count} contribución{count, plural, one {} other {es}}",
+    "profile": "Perfil",
+    "join": "¿Quieres unirte a nuestros colaboradores? Consulta nuestro ",
+    "githubRepo": "repositorio de GitHub",
+    "getStarted": " para comenzar!"
+  },
+  "license": {
+    "title": "Código Abierto y Gratis",
+    "description": "MyLibrary se publica bajo la Licencia MIT, lo que la hace gratuita para uso personal y comercial.",
+    "github": "Ver en GitHub",
+    "contact": "Contáctanos"
+  }
+}
\ No newline at end of file
diff --git a/messages/[es]/analytics.json b/messages/[es]/analytics.json
new file mode 100644
index 0000000..3ab47fc
--- /dev/null
+++ b/messages/[es]/analytics.json
@@ -0,0 +1,38 @@
+{
+  "header": {
+    "title": "Panel de análisis de componentes",
+    "description": "Supervisa el uso de componentes, el rendimiento y la participación de los usuarios",
+    "export": "Exportar datos"
+  },
+  "overview": {
+    "totalViews": "Vistas totales",
+    "totalCopies": "Copias totales",
+    "componentsUsed": "Componentes utilizados",
+    "sessionTime": "Tiempo de sesión"
+  },
+  "popular": {
+    "title": "Componentes más populares"
+  },
+  "recent": {
+    "title": "Actividad de los últimos 7 días",
+    "today": "Hoy"
+  },
+  "performance": {
+    "title": "Información de rendimiento",
+    "avgViews": "Promedio de vistas por componente",
+    "copyRate": "Tasa de copias",
+    "viewsWeek": "Vistas esta semana"
+  },
+  "actions": {
+    "title": "Acciones rápidas",
+    "viewComponents": "Ver componentes",
+    "export": "Exportar análisis",
+    "reset": "Restablecer datos"
+  },
+  "modal": {
+    "title": "Restablecer datos analíticos",
+    "message": "Esto eliminará permanentemente todos los datos analíticos, incluidas las vistas, las copias y la información de la sesión. Esta acción no se puede deshacer.",
+    "confirm": "Restablecer datos",
+    "cancel": "Cancelar"
+  }
+}
diff --git a/messages/[es]/common.json b/messages/[es]/common.json
new file mode 100644
index 0000000..5a665ae
--- /dev/null
+++ b/messages/[es]/common.json
@@ -0,0 +1,33 @@
+{
+    "navigation": {
+    "home": "Inicio",
+    "about": "Acerca de",
+    "contact": "Contacto",
+    "components": "Componentes",
+    "playground": "🎮 Zona de juegos",
+    "analytics": "Analíticas",
+    "feedback": "Retroalimentación",
+    "game": "🎮 Juego",
+    "racing game": "🏁 Juego de carreras",
+    "fun": "Diversión"
+  },
+  
+  "footer": {
+    "brand": "MiBiblioteca",
+    "subtitle": "Biblioteca de Componentes",
+    "description": "Una biblioteca de componentes de código abierto basada en Next.js + Tailwind CSS con componentes de interfaz listos para usar. Perfecta para que los desarrolladores aprendan, practiquen y contribuyan durante Hacktoberfest y más allá.",
+    "followUs": "Síguenos",
+    "social": {
+      "github": "GitHub",
+      "linkedin": "LinkedIn",
+      "twitter": "Twitter",
+      "discord": "Discord",
+      "youtube": "YouTube"
+    },
+    "madeWith": "Hecho con",
+    "hacktoberfest": "para Hacktoberfest",
+    "copyright": "Biblioteca de Componentes MiBiblioteca. Todos los derechos reservados."
+  }
+
+
+}
\ No newline at end of file
diff --git a/messages/[es]/comps.json b/messages/[es]/comps.json
new file mode 100644
index 0000000..4ceec8d
--- /dev/null
+++ b/messages/[es]/comps.json
@@ -0,0 +1,226 @@
+{
+  "hero": {
+    "title": "React UI Playground",
+    "description": "Demostración de componentes moderna, hermosa y responsiva – cada sección está diseñada para claridad, viveza y accesibilidad."
+  },
+  "search": {
+    "placeholder": "Buscar componentes (botones, tarjetas, principal, etc.)",
+    "results": "Encontrados {count} componente{count, plural, one {} other {s}}{search, select, '' {} other { que coinciden con \"{search}\"}}{filter, select, all {} other { en {filter}}}",
+    "noResults": "No se encontraron componentes"
+  },
+  "filter": {
+    "all": "Todos los Componentes",
+    "buttons": "Botones",
+    "backgrounds": "Fondos",
+    "cards": "Tarjetas",
+    "inputs": "Entradas",
+    "navigation": "Navegación",
+    "badges": "Insignias"
+  },
+  "selectOptions": {
+    "option1": "Opción 1",
+    "option2": "Opción 2",
+    "option3": "Opción 3"
+  },
+  "tabs": {
+    "dashboard": "Panel",
+    "dashboardContent": "El contenido del panel va aquí...",
+    "analytics": "Analítica",
+    "analyticsContent": "El contenido de analítica va aquí...",
+    "settings": "Configuraciones",
+    "settingsContent": "El contenido de configuraciones va aquí..."
+  },
+  "breadcrumb": {
+    "home": "Inicio",
+    "components": "Componentes",
+    "navigation": "Navegación",
+    "breadcrumb": "Miga de pan"
+  },
+  "buttons": {
+    "primary": {
+      "name": "Botón Principal",
+      "label": "Principal",
+      "keywords": ["principal", "acción", "cta"],
+      "desc": "Usado para acciones principales"
+    },
+    "gradient": {
+      "name": "Botón Gradiente",
+      "label": "Gradiente",
+      "keywords": ["gradiente", "colorido", "brillante", "cta"],
+      "desc": "Botón vibrante con gradiente y spinner de carga"
+    },
+    "neon": {
+      "name": "Botón Neón",
+      "label": "Neón",
+      "keywords": ["neón", "brillo", "futurista"],
+      "desc": "Botón futurista brillante con spinner de carga"
+    },
+    "secondary": {
+      "name": "Botón Secundario",
+      "label": "Secundario",
+      "keywords": ["secundario", "alternativo"],
+      "desc": "Usado para acciones secundarias"
+    },
+    "ghost": {
+      "name": "Botón Fantasma",
+      "label": "Fantasma",
+      "keywords": ["fantasma", "transparente", "sutil"],
+      "desc": "Usado para acciones mínimas"
+    },
+    "outline": {
+      "name": "Botón de Contorno",
+      "label": "Contorno",
+      "keywords": ["contorno", "borde"],
+      "desc": "Usado para dar contorno"
+    },
+    "danger": {
+      "name": "Botón de Peligro",
+      "label": "Peligro",
+      "keywords": ["peligro", "error", "eliminar", "advertencia", "rojo"],
+      "desc": "Usado para acciones destructivas"
+    },
+    "success": {
+      "name": "Botón de Éxito",
+      "label": "Éxito",
+      "keywords": ["éxito", "confirmar", "hecho", "verde"],
+      "desc": "Usado para acciones exitosas"
+    },
+    "icon": {
+      "name": "Botón de Ícono",
+      "label": "Ícono",
+      "keywords": ["ícono", "estrella", "símbolo"],
+      "desc": "Usado para íconos"
+    },
+    "rainbow": {
+      "name": "Botón Arcoíris",
+      "label": "Arcoíris",
+      "keywords": ["arcoíris", "acción", "colorido"],
+      "desc": "Usado para llamadas a la acción"
+    },
+    "glass": {
+      "name": "Botón de Vidrio",
+      "label": "Botón",
+      "keywords": ["vidrio", "cta", "acción"],
+      "desc": "Usado para cualquier acción"
+    }
+  },
+  "cards": {
+    "simple": {
+      "name": "Tarjeta Simple",
+      "title": "Tarjeta Simple",
+      "description": "Una tarjeta mínima con acciones.",
+      "keywords": ["simple", "básico", "mínimo"]
+    },
+    "smart": {
+      "name": "Tarjeta Inteligente",
+      "title": "Tarjeta Inteligente",
+      "description": "Tarjeta moderna con fondo de gradiente, efectos hover y pie de página opcional.",
+      "footer": "Acción",
+      "keywords": ["inteligente", "gradiente", "tarjeta", "hover", "pie", "imagen"]
+    },
+    "image": {
+      "name": "Tarjeta de Imagen",
+      "title": "Tarjeta de Imagen",
+      "description": "Tarjeta con imagen SVG.",
+      "keywords": ["imagen", "foto", "visual"]
+    },
+    "feature": {
+      "name": "Tarjeta de Característica",
+      "title": "Tarjeta de Característica",
+      "description": "Resalta características y beneficios.",
+      "keywords": ["característica", "resaltar", "beneficio"]
+    },
+    "pricing": {
+      "name": "Tarjeta de Precios",
+      "plan": "Pro",
+      "price": "$9/mes",
+      "features": ["10 proyectos", "Soporte prioritario", "Usuarios ilimitados"],
+      "keywords": ["precio", "plan", "suscripción", "costo"]
+    },
+    "data": {
+      "name": "Tarjeta de Datos",
+      "title": "Proyectos Activos",
+      "keywords": ["datos", "estadísticas", "analítica", "métricas"]
+    }
+  },
+  "inputs": {
+    "text": {
+      "name": "Entrada de Texto",
+      "label": "Entrada de Muestra",
+      "placeholder": "Ingrese texto",
+      "keywords": ["texto", "entrada", "campo", "formulario"]
+    },
+    "password": {
+      "name": "Entrada de Contraseña",
+      "placeholder": "Ingrese contraseña",
+      "keywords": ["contraseña", "entrada", "campo", "formulario", "mostrar", "ocultar"]
+    },
+    "select": {
+      "name": "Seleccionar",
+      "label": "Selección de Muestra",
+      "keywords": ["seleccionar", "desplegable", "opciones", "elección"]
+    },
+    "checkbox": {
+      "name": "Casilla de Verificación",
+      "label": "Casilla de Muestra",
+      "description": "Marque esta opción",
+      "keywords": ["casilla", "verificar", "alternar", "booleano"]
+    },
+    "loginForm": {
+      "name": "Formulario de Inicio de Sesión",
+      "keywords": ["inicio de sesión", "formulario", "autenticación", "correo", "contraseña"],
+      "desc": "Formulario completo de inicio de sesión con validación y opciones sociales"
+    },
+    "calendar": {
+      "name": "Calendario",
+      "keywords": ["calendario", "fecha", "agenda", "mes", "eventos"],
+      "desc": "Calendario mensual accesible y responsivo con indicadores de eventos"
+    }
+  },
+  "backgrounds": {
+    "interactiveTiles": {
+      "name": "Baldosas Interactivas",
+      "keywords": ["interactivo", "baldosas", "fondos", "cuadrícula"],
+      "desc": "Fondo de baldosas interactivas"
+    }
+  },
+  "navigation": {
+    "breadcrumb": {
+      "name": "Miga de pan",
+      "keywords": ["miga de pan", "navegación", "ruta", "jerarquía"]
+    },
+    "tabs": {
+      "name": "Pestañas",
+      "keywords": ["pestañas", "navegación", "cambiar", "alternar"]
+    },
+    "pagination": {
+      "name": "Paginación",
+      "keywords": ["paginación", "páginas", "navegación", "paginado"]
+    }
+  },
+  "badges": {
+    "badge": {
+      "name": "Insignia",
+      "primary": "Principal",
+      "success": "Éxito",
+      "warning": "Advertencia",
+      "danger": "Peligro",
+      "closable": "Cerrable",
+      "withIcon": "Con Ícono",
+      "notifications": "Notificaciones",
+      "keywords": ["insignia", "etiqueta", "estado", "indicador"],
+      "desc": "Usado para indicadores de estado y etiquetas"
+    },
+    "chip": {
+      "name": "Chip",
+      "primary": "Chip Principal",
+      "success": "Éxito",
+      "warning": "Advertencia",
+      "danger": "Peligro",
+      "closable": "Cerrable",
+      "withIcon": "Con Ícono",
+      "keywords": ["chip", "etiqueta", "filtro", "categoría"],
+      "desc": "Usado para filtros, categorías y etiquetas removibles"
+    }
+  }
+}
\ No newline at end of file
diff --git a/messages/[es]/contact.json b/messages/[es]/contact.json
new file mode 100644
index 0000000..04dfc3e
--- /dev/null
+++ b/messages/[es]/contact.json
@@ -0,0 +1,78 @@
+{
+  "header": {
+    "title": "Contáctanos",
+    "description": "¿Tienes preguntas sobre nuestra biblioteca de componentes? ¿Quieres contribuir o reportar un error? ¡Nos encantaría saber de ti!"
+  },
+  "form": {
+    "title": "Envíanos un mensaje",
+    "success": "¡Gracias por tu mensaje! Nos pondremos en contacto contigo pronto.",
+    "error": "Lo sentimos, hubo un error al enviar tu mensaje. Por favor, inténtalo de nuevo.",
+    "sending": "Enviando...",
+    "send": "Enviar mensaje",
+    "fields": {
+      "name": {
+        "label": "Nombre completo *",
+        "placeholder": "Ingresa tu nombre completo"
+      },
+      "email": {
+        "label": "Correo electrónico *",
+        "placeholder": "your.email@example.com"
+      },
+      "subject": {
+        "label": "Asunto *",
+        "placeholder": "Selecciona un asunto",
+        "options": {
+          "bugReport": "Reporte de error",
+          "featureRequest": "Solicitud de función",
+          "documentation": "Documentación",
+          "contribution": "Contribución",
+          "support": "Soporte general",
+          "other": "Otro"
+        }
+      },
+      "message": {
+        "label": "Mensaje *",
+        "placeholder": "Cuéntanos cómo podemos ayudarte..."
+      }
+    }
+  },
+  "errors": {
+    "nameRequired": "El nombre es obligatorio",
+    "emailRequired": "El correo electrónico es obligatorio",
+    "emailInvalid": "Por favor, ingresa una dirección de correo válida",
+    "subjectRequired": "El asunto es obligatorio",
+    "messageRequired": "El mensaje es obligatorio",
+    "messageLength": "El mensaje debe tener al menos 10 caracteres"
+  },
+  "info": {
+    "title": "Información de contacto",
+    "email": {
+      "title": "Correo electrónico"
+    },
+    "github": {
+      "title": "GitHub"
+    },
+    "linktree": {
+      "title": "Linktree",
+      "description": "Consulta nuestro Linktree para todos nuestros enlaces sociales:"
+    }
+  },
+  "social": {
+    "title": "Síguenos"
+  },
+  "faq": {
+    "title": "Preguntas frecuentes",
+    "q1": {
+      "title": "¿Cómo puedo contribuir a la biblioteca?",
+      "description": "Consulta nuestro archivo CONTRIBUTING.md para obtener pautas sobre cómo contribuir con componentes, reportar errores o sugerir mejoras."
+    },
+    "q2": {
+      "title": "¿Esta biblioteca es gratuita?",
+      "description": "¡Sí! Esta biblioteca de componentes es de código abierto y gratuita para uso personal y comercial."
+    },
+    "q3": {
+      "title": "¿Cómo reporto un error?",
+      "description": "Puedes reportar errores a través de nuestra página de issues en GitHub o usando el formulario de contacto arriba con \"Reporte de error\" como asunto."
+    }
+  }
+}
diff --git a/messages/[es]/feedback.json b/messages/[es]/feedback.json
new file mode 100644
index 0000000..4d77378
--- /dev/null
+++ b/messages/[es]/feedback.json
@@ -0,0 +1,86 @@
+{
+  "header": {
+    "title": "Valoramos tus comentarios",
+    "description": "Ayúdanos a mejorar MyLibrary compartiendo tus opiniones, reportando errores o sugiriendo nuevas funcionalidades."
+  },
+  "alert": {
+    "success": {
+      "title": "¡Gracias!",
+      "message": "Tu comentario ha sido enviado con éxito. Lo revisaremos pronto."
+    },
+    "error": {
+      "title": "Error",
+      "message": "Por favor, completa todos los campos obligatorios antes de enviar."
+    }
+  },
+  "form": {
+    "title": "Comparte tus comentarios",
+    "categoryLabel": "Categoría de comentarios *",
+    "ratingLabel": "Calificación general",
+    "emailLabel": "Correo electrónico (opcional)",
+    "emailPlaceholder": "tu.email@ejemplo.com",
+    "emailHelper": "Solo lo usaremos para hacer un seguimiento de tus comentarios",
+    "feedbackLabel": "Tus comentarios *",
+    "feedbackPlaceholder": "Cuéntanos tu experiencia, informa un error o sugiere mejoras...",
+    "submit": "Enviar comentarios",
+    "clear": "Borrar formulario"
+  },
+  "category": {
+    "bug": "Reporte de error",
+    "feature": "Solicitud de característica",
+    "improvement": "Sugerencia de mejora",
+    "general": "Comentarios generales"
+  },
+  "rating": {
+    "5": "⭐⭐⭐⭐⭐ Excelente",
+    "4": "⭐⭐⭐⭐ Bueno",
+    "3": "⭐⭐⭐ Promedio",
+    "2": "⭐⭐ Malo",
+    "1": "⭐ Muy malo"
+  },
+  "sidebar": {
+    "stats": {
+      "title": "Estadísticas de la comunidad",
+      "totalComponents": "Componentes totales",
+      "githubStars": "Estrellas en GitHub",
+      "contributors": "Contribuidores",
+      "issuesResolved": "Problemas resueltos"
+    },
+    "progress": {
+      "title": "Progreso del desarrollo",
+      "buttons": "Componentes de botones",
+      "cards": "Componentes de tarjetas",
+      "forms": "Componentes de formularios",
+      "navigation": "Navegación"
+    },
+    "contact": {
+      "title": "Otras formas de contactarnos",
+      "email": "📧 Soporte por correo electrónico",
+      "discord": "💬 Comunidad de Discord",
+      "github": "🐙 Problemas en GitHub"
+    }
+  },
+  "recent": {
+    "title": "Comentarios recientes de la comunidad",
+    "items": [
+      {
+        "name": "Alex",
+        "time": "Hace 2 días",
+        "category": "Funcionalidad",
+        "feedback": "¡Me encantan las nuevas variantes de botones! ¿Podemos obtener un estado de carga para los botones?"
+      },
+      {
+        "name": "Sarah",
+        "time": "Hace 1 semana",
+        "category": "Error",
+        "feedback": "Problema de espaciado del componente de tarjeta en dispositivos móviles. ¡Solucionado en la última actualización!"
+      },
+      {
+        "name": "Mike",
+        "time": "Hace 2 semanas",
+        "category": "General",
+        "feedback": "¡Excelente documentación y ejemplos! Hace que la integración sea muy fácil."
+      }
+    ]
+  }
+}
diff --git a/messages/[es]/homepage.json b/messages/[es]/homepage.json
new file mode 100644
index 0000000..0218eee
--- /dev/null
+++ b/messages/[es]/homepage.json
@@ -0,0 +1,47 @@
+{
+  "hero_title": "Crea aplicaciones React hermosas y de alto rendimiento con facilidad",
+  "hero_description": "Nuestra biblioteca de componentes ofrece a los desarrolladores elementos de interfaz personalizables y accesibles, optimizados para el ecosistema de React.",
+  "explore_components": "Explorar componentes",
+  "try_playground": "🎮 Probar el Playground",
+  "beautiful_components": "Componentes hermosos",
+  "ready_to_use": "Listo para usar en tus proyectos",
+  "features_title": "Optimizado para React",
+  "features_description": "Componentes ligeros y rápidos, diseñados específicamente para aplicaciones React.",
+  "themes_title": "Temas personalizados",
+  "themes_description": "Admite una personalización sencilla con temas claros, oscuros y personalizados.",
+  "apis_title": "APIs flexibles",
+  "apis_description": "Props simples e intuitivas que permiten un control total sobre tus componentes.",
+  "documentation_title": "Bien documentado",
+  "documentation_description": "Documentación completa y clara para facilitar tu experiencia de desarrollo.",
+  "featured_components": "Componentes destacados",
+  "simple_card_title": "Tarjeta simple",
+  "simple_card_description": "Tarjeta limpia y minimalista con soporte para acciones.",
+  "feature_card_title": "Tarjeta de función",
+  "feature_card_description": "Destaca las funciones de tu aplicación con estilo.",
+  "pricing_card_plan": "Pro",
+  "pricing_card_price": "$9/mes",
+  "pricing_card_features": [
+    "10 proyectos",
+    "Soporte prioritario",
+    "Usuarios ilimitados"
+  ],
+  "data_card_title": "Proyectos activos",
+  "data_card_icon": "📂",
+  "data_card_trend": "8",
+  "getting_started": "Primeros pasos",
+  "getting_started_step_one_title": "Agregar el paquete",
+  "getting_started_step_one_description": "Instálalo con npm o yarn para una fácil integración.",
+  "getting_started_step_one_code": "npm install my-components-library",
+  "getting_started_step_2_title": "Importar componentes",
+  "getting_started_step_2_description": "Importa solo lo que necesites de la biblioteca para mantener los paquetes pequeños.",
+  "getting_started_step_two_code": "import '{ Button, Card }' from 'my-components-library';",
+  "getting_started_step_3_title": "Usar componentes",
+  "getting_started_step_3_description": "Aplica los componentes directamente con props fáciles de usar.",
+  "getting_started_step_3_code": "'<Button variant='primary'>Haz clic aquí</Button>'",
+  "cta_title": "¿Listo para crear aplicaciones impresionantes?",
+  "cta_button": "Comienza a construir ahora",
+  "theme": {
+    "toggle_light": "Cambiar a modo claro",
+    "toggle_dark": "Cambiar a modo oscuro"
+  }
+}
diff --git a/messages/[es]/playground.json b/messages/[es]/playground.json
new file mode 100644
index 0000000..1e09fc7
--- /dev/null
+++ b/messages/[es]/playground.json
@@ -0,0 +1,219 @@
+{
+  "title": "Zona avanzada de componentes",
+  "subtitle": "¡Personaliza componentes en tiempo real y exporta código listo para producción!",
+  
+  "controls": {
+    "componentType": "Tipo de componente",
+    "variant": "Variante",
+    "previewMode": "Modo de vista previa",
+    "myFavorites": "Mis favoritos ({count})",
+    "customizationControls": "Controles de personalización",
+    "reset": "Restablecer",
+    "random": "Aleatorio",
+    "showFavorites": "Mostrar favoritos",
+    "hideFavorites": "Ocultar favoritos"
+  },
+  
+  "componentTypes": {
+    "buttons": "Botones",
+    "cards": "Tarjetas",
+    "inputs": "Entradas"
+  },
+  
+  "buttonVariants": {
+    "primary": "Botón principal",
+    "secondary": "Botón secundario",
+    "danger": "Botón de peligro",
+    "success": "Botón de éxito",
+    "ghost": "Botón fantasma",
+    "outline": "Botón con borde",
+    "rainbow": "Botón arcoíris"
+  },
+  
+  "cardVariants": {
+    "simple": "Tarjeta simple",
+    "feature": "Tarjeta de función",
+    "pricing": "Tarjeta de precios",
+    "user": "Tarjeta de usuario",
+    "data": "Tarjeta de datos"
+  },
+  
+  "inputVariants": {
+    "text": "Entrada de texto",
+    "select": "Menú desplegable",
+    "checkbox": "Casilla de verificación"
+  },
+  
+  "buttonControls": {
+    "buttonText": "Texto del botón",
+    "buttonSize": "Tamaño del botón",
+    "sizes": {
+      "small": "Pequeño",
+      "medium": "Mediano",
+      "large": "Grande"
+    },
+    "disabled": "Desactivado",
+    "loading": "Cargando",
+    "loadingText": "⏳ Cargando..."
+  },
+  
+  "cardControls": {
+    "cardTitle": "Título de la tarjeta",
+    "cardDescription": "Descripción de la tarjeta",
+    "cardTitlePlaceholder": "Introduce el título de la tarjeta",
+    "cardDescriptionPlaceholder": "Introduce la descripción de la tarjeta"
+  },
+  
+  "pricingControls": {
+    "planName": "Nombre del plan",
+    "price": "Precio",
+    "features": "Características (separadas por comas)",
+    "planPlaceholder": "por ejemplo, Pro",
+    "pricePlaceholder": "por ejemplo, $9/mes",
+    "featuresPlaceholder": "Característica 1, Característica 2, Característica 3"
+  },
+  
+  "userCardControls": {
+    "userName": "Nombre del usuario",
+    "email": "Correo electrónico",
+    "role": "Rol",
+    "avatarUrl": "URL del avatar",
+    "userNamePlaceholder": "John Doe",
+    "emailPlaceholder": "john@example.com",
+    "rolePlaceholder": "Ingeniero de software",
+    "avatarPlaceholder": "https://i.pravatar.cc/150?img=1"
+  },
+  
+  "dataCardControls": {
+    "dataTitle": "Título de datos",
+    "value": "Valor",
+    "icon": "Icono (Emoji)",
+    "trend": "Tendencia (%)",
+    "dataTitlePlaceholder": "Proyectos activos",
+    "valuePlaceholder": "27",
+    "iconPlaceholder": "📂",
+    "trendPlaceholder": "8"
+  },
+  
+  "inputControls": {
+    "label": "Etiqueta",
+    "placeholder": "Texto del marcador de posición",
+    "errorMessage": "Mensaje de error (opcional)",
+    "required": "Requerido",
+    "labelPlaceholder": "Introduce la etiqueta del campo",
+    "placeholderPlaceholder": "Introduce el texto del marcador",
+    "errorPlaceholder": "Introduce el mensaje de error"
+  },
+  
+  "codeSection": {
+    "generatedCode": "Código generado",
+    "show": "Mostrar",
+    "hide": "Ocultar",
+    "copyCode": "Copiar código",
+    "copied": "✅ ¡Copiado!",
+    "failedToCopy": "❌ Error al copiar",
+    "language": "React JSX"
+  },
+  
+  "preview": {
+    "livePreview": "Vista previa en vivo",
+    "componentInfo": "Información del componente",
+    "type": "Tipo",
+    "variant": "Variante",
+    "interactive": "Interactivo",
+    "clickToTest": "Sí (Haz clic para probar)",
+    "displayOnly": "Solo mostrar",
+    "light": "Claro",
+    "dark": "Oscuro"
+  },
+  
+  "favorites": {
+    "title": "Mis componentes favoritos ({count})",
+    "clearAll": "Borrar todo",
+    "noFavorites": "Aún no hay componentes favoritos",
+    "noFavoritesDesc": "Haz clic en el ícono del corazón en cualquier componente para agregarlo a tus favoritos",
+    "addFavorite": "Agregar a favoritos",
+    "removeFavorite": "Eliminar de favoritos",
+    "addedDate": "Añadido el {date}",
+    "componentSuffix": "Componente",
+    "addToFavorites": "Agregar a favoritos",
+    "removeFromFavorites": "Eliminar de favoritos"
+  },
+  
+  "showcase": {
+    "allVariants": "Todas las variantes de {type}",
+    "clickToCustomize": "Haz clic para personalizar",
+    "preview": "Vista previa",
+    "sample": "Ejemplo"
+  },
+  
+  "stats": {
+    "title": "Estadísticas del playground",
+    "buttonTypes": "Tipos de botones",
+    "cardTypes": "Tipos de tarjetas",
+    "inputTypes": "Tipos de entradas",
+    "favorites": "Favoritos"
+  },
+  
+  "actions": {
+    "randomize": "Aleatorizar",
+    "reset": "Restablecer",
+    "copyCode": "Copiar código"
+  },
+  
+  "defaultValues": {
+    "buttonText": "Haz clic aquí",
+    "cardTitle": "Tarjeta de ejemplo",
+    "cardDescription": "Esta es una descripción de ejemplo de una tarjeta",
+    "inputLabel": "Campo de ejemplo",
+    "inputPlaceholder": "Escribe algo aquí...",
+    "checkboxDescription": "Marca esta opción",
+    "selectOptions": {
+      "option1": "Opción 1",
+      "option2": "Opción 2",
+      "option3": "Opción 3"
+    }
+  },
+  
+  "randomValues": {
+    "buttonTexts": ["Comenzar", "Aprender más", "Regístrate ahora", "Descargar", "Suscribirse", "Únete", "Prueba gratis", "Contáctanos"],
+    "cardTitles": ["Función increíble", "Servicio premium", "Nuevo producto", "Oferta especial", "Última actualización"],
+    "cardDescriptions": [
+      "Descubre funciones increíbles que transformarán tu flujo de trabajo",
+      "Experimenta calidad premium con nuestros servicios profesionales",
+      "Presentamos nuestro último producto con tecnología de punta",
+      "Oferta por tiempo limitado con beneficios exclusivos para ti",
+      "Mantente actualizado con las últimas mejoras y características"
+    ],
+    "userNames": ["Alice Johnson", "Bob Smith", "Carol Davis", "David Wilson", "Emma Brown"],
+    "userRoles": ["Desarrollador frontend", "Ingeniero backend", "Diseñador UI/UX", "Gerente de producto", "Ingeniero DevOps"],
+    "dataTitles": ["Usuarios totales", "Ingresos", "Sesiones activas", "Tasa de conversión", "Tasa de crecimiento"],
+    "dataValues": ["1,234", "$45.6K", "89%", "12.5%", "+23%"],
+    "dataIcons": ["👥", "💰", "📊", "📈", "🚀"]
+  },
+  
+  "pricing": {
+    "defaultPlan": "Pro",
+    "defaultPrice": "$9/mes",
+    "defaultFeatures": ["10 proyectos", "Soporte prioritario", "Usuarios ilimitados"]
+  },
+  
+  "userData": {
+    "defaultName": "John Doe",
+    "defaultEmail": "john@example.com",
+    "defaultRole": "Ingeniero de software"
+  },
+  
+  "dataCard": {
+    "defaultTitle": "Proyectos activos",
+    "defaultValue": "27",
+    "defaultIcon": "📂",
+    "defaultTrend": 8
+  },
+  
+  "messages": {
+    "codeCopied": "¡Código copiado al portapapeles!",
+    "copyFailed": "Error al copiar el código.",
+    "clickAlert": "¡{component} clicado!"
+  }
+}
diff --git a/messages/[fr]/about.json b/messages/[fr]/about.json
new file mode 100644
index 0000000..af90d38
--- /dev/null
+++ b/messages/[fr]/about.json
@@ -0,0 +1,129 @@
+{
+  "title": "À propos de MyLibrary",
+  "description": "MyLibrary est une bibliothèque de composants complète construite avec Next.js et Tailwind CSS, conçue pour fournir aux développeurs des composants UI réutilisables, accessibles et magnifiquement conçus. Notre objectif est d'accélérer les flux de travail de développement et de maintenir la cohérence du design dans les projets.",
+  "overview": {
+    "components": "20+ Composants",
+    "typescript": "Compatible TypeScript",
+    "performance": "Optimisé pour la performance"
+  },
+  "mission": {
+    "title": "Notre Mission",
+    "description": "Donner aux développeurs une bibliothèque de composants robuste, flexible et belle qui réduit le temps de développement tout en maintenant des expériences utilisateur de haute qualité. Nous croyons en un développement web plus efficace et agréable."
+  },
+  "vision": {
+    "title": "Notre Vision",
+    "description": "Devenir la bibliothèque de composants incontournable pour les développeurs React, en favorisant une communauté où l'innovation rencontre la praticité. Nous imaginons un monde où la création de belles interfaces utilisateur est accessible à tous les développeurs."
+  },
+  "features": {
+    "title": "Pourquoi choisir MyLibrary ?",
+    "designSystem": {
+      "title": "Système de Design",
+      "description": "Tokens de design cohérents et système de thèmes pour des expériences utilisateur harmonieuses."
+    },
+    "accessibility": {
+      "title": "Accessibilité d'abord",
+      "description": "Conforme aux directives WCAG 2.1 et support de la navigation au clavier."
+    },
+    "performance": {
+      "title": "Performance",
+      "description": "Taille du bundle optimisée avec tree-shaking et dépendances minimales."
+    },
+    "devExperience": {
+      "title": "Expérience Développeur",
+      "description": "Support TypeScript, documentation complète et excellente intégration IDE."
+    },
+    "community": {
+      "title": "Porté par la Communauté",
+      "description": "Projet open source avec des contributions et des retours actifs de la communauté."
+    },
+    "flexible": {
+      "title": "Flexible",
+      "description": "Composants personnalisables qui s'adaptent à vos besoins de design."
+    }
+  },
+  "techStack": {
+    "title": "Technologies",
+    "nextjs": {
+      "title": "Next.js 14",
+      "description": "Framework React avec App Router"
+    },
+    "react": {
+      "title": "React 18",
+      "description": "Architecture basée sur les composants"
+    },
+    "tailwind": {
+      "title": "Tailwind CSS",
+      "description": "Styling utilitaire-first"
+    },
+    "typescript": {
+      "title": "TypeScript",
+      "description": "Développement typé"
+    },
+    "additionalTools": {
+      "title": "Outils Additionnels",
+      "eslint": "ESLint",
+      "prettier": "Prettier",
+      "lucide": "Lucide Icons",
+      "postcss": "PostCSS",
+      "git": "Git"
+    }
+  },
+  "gettingStarted": {
+    "title": "🚀 Pour commencer",
+    "installation": {
+      "title": "Installation",
+      "description": "Installez la bibliothèque via npm ou copiez directement les composants prêts à l'emploi."
+    },
+    "import": {
+      "title": "Importer",
+      "description": "Importez les composants dont vous avez besoin directement dans votre projet React et commencez à construire plus rapidement."
+    },
+    "customize": {
+      "title": "Personnaliser",
+      "description": "Ajustez le design, les couleurs et le comportement facilement pour correspondre à votre propre système de design."
+    },
+    "cta": "Voir les composants"
+  },
+  "contributing": {
+    "title": "Contribuer",
+    "description": "Nous accueillons les contributions de la communauté ! Que vous corrigiez des bugs, ajoutiez de nouveaux composants ou amélioriez la documentation, votre aide rend MyLibrary meilleur pour tous.",
+    "submitIssues": {
+      "title": "Soumettre des problèmes",
+      "description": "Signalez des bugs ou demandez des fonctionnalités sur GitHub"
+    },
+    "pullRequests": {
+      "title": "Créer des Pull Requests",
+      "description": "Contribuez à l'amélioration du code et à de nouvelles fonctionnalités"
+    },
+    "documentation": {
+      "title": "Améliorer la documentation",
+      "description": "Aidez à rendre notre documentation plus claire et complète"
+    }
+  },
+  "community": {
+    "title": "Communauté",
+    "description": "Rejoignez notre communauté croissante de développeurs qui créent des interfaces utilisateur incroyables avec MyLibrary.",
+    "githubStars": "Étoiles GitHub",
+    "contributors": "Contributeurs",
+    "downloads": "Téléchargements",
+    "builtWithLove": "Construit avec ❤️ par la communauté open source"
+  },
+  "contributors": {
+    "title": "Nos Contributeurs",
+    "thankYou": "Merci à tous les développeurs incroyables qui ont contribué à améliorer cette bibliothèque de composants !",
+    "loading": "Chargement des contributeurs...",
+    "contributorsError": "Impossible de charger les contributeurs",
+    "avatarAlt": "Avatar de {login}",
+    "contributions": "{count} contribution{count, plural, one {} other {s}}",
+    "profile": "Profil",
+    "join": "Vous souhaitez rejoindre nos contributeurs ? Consultez notre ",
+    "githubRepo": "dépôt GitHub",
+    "getStarted": " pour commencer !"
+  },
+  "license": {
+    "title": "Open Source & Gratuit",
+    "description": "MyLibrary est publié sous licence MIT, ce qui le rend gratuit pour une utilisation personnelle et commerciale.",
+    "github": "Voir sur GitHub",
+    "contact": "Contactez-nous"
+  }
+}
\ No newline at end of file
diff --git a/messages/[fr]/analytics.json b/messages/[fr]/analytics.json
new file mode 100644
index 0000000..97cf172
--- /dev/null
+++ b/messages/[fr]/analytics.json
@@ -0,0 +1,38 @@
+{
+  "header": {
+    "title": "Tableau de bord des analyses de composants",
+    "description": "Suivez l’utilisation des composants, les performances et l’engagement des utilisateurs",
+    "export": "Exporter les données"
+  },
+  "overview": {
+    "totalViews": "Vues totales",
+    "totalCopies": "Copies totales",
+    "componentsUsed": "Composants utilisés",
+    "sessionTime": "Durée de la session"
+  },
+  "popular": {
+    "title": "Composants les plus populaires"
+  },
+  "recent": {
+    "title": "Activité des 7 derniers jours",
+    "today": "Aujourd’hui"
+  },
+  "performance": {
+    "title": "Aperçu des performances",
+    "avgViews": "Moyenne des vues par composant",
+    "copyRate": "Taux de copie",
+    "viewsWeek": "Vues cette semaine"
+  },
+  "actions": {
+    "title": "Actions rapides",
+    "viewComponents": "Voir les composants",
+    "export": "Exporter les analyses",
+    "reset": "Réinitialiser les données"
+  },
+  "modal": {
+    "title": "Réinitialiser les données d’analyse",
+    "message": "Cela supprimera définitivement toutes les données d’analyse, y compris les vues, les copies et les informations de session. Cette action est irréversible.",
+    "confirm": "Réinitialiser les données",
+    "cancel": "Annuler"
+  }
+}
diff --git a/messages/[fr]/common.json b/messages/[fr]/common.json
new file mode 100644
index 0000000..7c7e7db
--- /dev/null
+++ b/messages/[fr]/common.json
@@ -0,0 +1,31 @@
+
+{
+    "navigation": {
+    "home": "Accueil",
+    "about": "À propos",
+    "contact": "Contact",
+    "components": "Composants",
+    "playground": "🎮 Bac à sable",
+    "analytics": "Analytique",
+    "feedback": "Retour d'information",
+    "game": "🎮 Jeu",
+    "racing game": "🏁 Jeu de courses",
+    "fun": "Amusement"
+  },
+  "footer": {
+    "brand": "MaBibliothèque",
+    "subtitle": "Bibliothèque de composants",
+    "description": "Une bibliothèque de composants open-source Next.js + Tailwind CSS avec des composants d'interface utilisateur prêts à l'emploi. Parfaite pour les développeurs souhaitant apprendre, pratiquer et contribuer pendant le Hacktoberfest et au-delà.",
+    "followUs": "Suivez-nous",
+    "social": {
+      "github": "GitHub",
+      "linkedin": "LinkedIn",
+      "twitter": "Twitter",
+      "discord": "Discord",
+      "youtube": "YouTube"
+    },
+    "madeWith": "Fait avec",
+    "hacktoberfest": "pour le Hacktoberfest",
+    "copyright": "Bibliothèque de composants MaBibliothèque. Tous droits réservés."
+  }
+}
\ No newline at end of file
diff --git a/messages/[fr]/comps.json b/messages/[fr]/comps.json
new file mode 100644
index 0000000..4bd5097
--- /dev/null
+++ b/messages/[fr]/comps.json
@@ -0,0 +1,350 @@
+{
+  "hero": {
+    "title": "Terrain de jeu UI React",
+    "description": "Démonstration de composants beaux, modernes et réactifs – chaque section ci-dessous est stylisée pour la clarté, la vibrance et l'accessibilité."
+  },
+  "search": {
+    "placeholder": "Rechercher des composants (boutons, cartes, principal, etc.)",
+    "results": "Trouvé {count} composant{count, plural, one {} other {s}}{search, select, '' {} other { correspondant à \"{search}\"}}{filter, select, all {} other { dans {filter}}}",
+    "noResults": "Aucun composant trouvé"
+  },
+  "filter": {
+    "all": "Tous les composants",
+    "buttons": "Boutons",
+    "backgrounds": "Arrière-plans",
+    "cards": "Cartes",
+    "inputs": "Entrées",
+    "navigation": "Navigation",
+    "badges": "Badges"
+  },
+  "selectOptions": {
+    "option1": "Option 1",
+    "option2": "Option 2",
+    "option3": "Option 3"
+  },
+  "tabs": {
+    "dashboard": "Tableau de bord",
+    "dashboardContent": "Le contenu du tableau de bord va ici...",
+    "analytics": "Analyse",
+    "analyticsContent": "Le contenu des analyses va ici...",
+    "settings": "Paramètres",
+    "settingsContent": "Le contenu des paramètres va ici..."
+  },
+  "breadcrumb": {
+    "home": "Accueil",
+    "components": "Composants",
+    "navigation": "Navigation",
+    "breadcrumb": "Fil d'Ariane"
+  },
+  "buttons": {
+    "primary": {
+      "name": "Bouton principal",
+      "label": "Principal",
+      "keywords": ["principal", "principal", "action", "cta"],
+      "desc": "Utilisé pour les actions principales"
+    },
+    "gradient": {
+      "name": "Bouton dégradé",
+      "label": "Dégradé",
+      "keywords": ["dégradé", "coloré", "vibrant", "cta"],
+      "desc": "Bouton dégradé vibrant avec mise à l'échelle au survol et indicateur de chargement"
+    },
+    "neon": {
+      "name": "Bouton Néon",
+      "label": "Néon",
+      "keywords": ["néon", "lueur", "vif", "futuriste"],
+      "desc": "Bouton futuriste lumineux avec indicateur de chargement et mise à l'échelle au survol"
+    },
+    "secondary": {
+      "name": "Bouton secondaire",
+      "label": "Secondaire",
+      "keywords": ["secondaire", "alternatif"],
+      "desc": "Utilisé pour les actions secondaires"
+    },
+    "ghost": {
+      "name": "Bouton Ghost",
+      "label": "Ghost",
+      "keywords": ["ghost", "transparent", "subtil"],
+      "desc": "Utilisé pour des actions minimales"
+    },
+    "outline": {
+      "name": "Bouton Outline",
+      "label": "Outline",
+      "keywords": ["outline", "bordure", "contour"],
+      "desc": "Utilisé pour donner un contour"
+    },
+    "danger": {
+      "name": "Bouton Danger",
+      "label": "Danger",
+      "keywords": ["danger", "erreur", "supprimer", "avertissement", "rouge"],
+      "desc": "Utilisé pour des actions destructrices"
+    },
+    "success": {
+      "name": "Bouton de succès",
+      "label": "Succès",
+      "keywords": ["succès", "confirmer", "terminé", "vert"],
+      "desc": "Utilisé pour les actions de succès"
+    },
+    "icon": {
+      "name": "Bouton icône",
+      "label": "Icône",
+      "keywords": ["icône", "étoile", "symbole"],
+      "desc": "Utilisé pour des icônes"
+    },
+    "rainbow": {
+      "name": "Bouton Arc-en-ciel",
+      "label": "Arc-en-ciel",
+      "keywords": ["arc-en-ciel", "action", "coloré"],
+      "desc": "Utilisé pour des appels à l'action"
+    },
+    "glass": {
+      "name": "Bouton en verre",
+      "label": "Bouton",
+      "keywords": ["verre", "cta", "action"],
+      "desc": "Utilisé pour toute action"
+    }
+  },
+  "cards": {
+    "simple": {
+      "name": "Carte simple",
+      "title": "Carte simple",
+      "description": "Une carte minimale avec des actions.",
+      "keywords": ["simple", "de base", "minimal"]
+    },
+    "smart": {
+      "name": "Carte intelligente",
+      "title": "Carte intelligente",
+      "description": "Une carte moderne avec fond dégradé, effets au survol et pied de page optionnel.",
+      "footer": "Action",
+      "keywords": ["intelligent", "dégradé", "carte", "survol", "pied de page", "image"]
+    },
+    "image": {
+      "name": "Carte d'image",
+      "title": "Carte d'image",
+      "description": "Carte avec image SVG.",
+      "keywords": ["image", "photo", "visuel"]
+    },
+    "feature": {
+      "name": "Carte de fonctionnalités",
+      "title": "Carte de fonctionnalités",
+      "description": "Mettez en valeur les caractéristiques et avantages.",
+      "keywords": ["fonctionnalité", "mettre en valeur", "avantage"]
+    },
+    "pricing": {
+      "name": "Carte de prix",
+      "plan": "Pro",
+      "price": "$9/mois",
+      "features": ["10 projets", "Support prioritaire", "Utilisateurs illimités"],
+      "keywords": ["tarification", "plan", "abonnement", "prix"]
+    },
+    "data": {
+      "name": "Carte de données",
+      "title": "Projets actifs",
+      "keywords": ["données", "statistiques", "analyses", "métriques"]
+    }
+  },
+  "utility": {
+    "alert": {
+      "name": "MinimalAlert",
+      "keywords": ["alerte", "popup"]
+    },
+    "loaders": {
+      "name": "Chargeurs",
+      "simple": "Chargeur simple",
+      "dual": "Chargeur double",
+      "dots": "Chargeur de points",
+      "bar": "Chargeur en barre",
+      "keywords": ["spinner", "chargeur", "chargement"]
+    },
+    "tooltips": {
+      "name": "Info-bulles",
+      "simple": "Info-bulle simple",
+      "animated": "Info-bulle animée",
+      "refreshText": "Cliquez pour actualiser",
+      "deleteText": "Supprimer l'élément",
+      "keywords": ["info-bulle", "popup"]
+    }
+  },
+  "inputs": {
+    "text": {
+      "name": "Entrée de texte",
+      "label": "Entrée d'exemple",
+      "placeholder": "Entrez du texte",
+      "keywords": ["texte", "entrée", "champ", "formulaire"]
+    },
+    "password": {
+      "name": "Entrée de mot de passe",
+      "placeholder": "Entrez le mot de passe",
+      "keywords": ["mot de passe", "entrée", "champ", "formulaire", "afficher", "masquer"],
+      "label": "Mot de passe",
+      "error": "Mot de passe invalide"
+    },
+    "select": {
+      "name": "Sélectionner",
+      "label": "Sélectionner un exemple",
+      "keywords": ["sélectionner", "menu déroulant", "options", "choix"]
+    },
+    "checkbox": {
+      "name": "Case à cocher",
+      "label": "Case à cocher exemple",
+      "description": "Cochez cette option",
+      "keywords": ["case à cocher", "vérifier", "toggle", "booléen"]
+    },
+    "loginForm": {
+      "name": "Formulaire de connexion",
+      "keywords": ["connexion", "formulaire", "authentification", "se connecter", "auth", "email", "mot de passe"],
+      "desc": "Formulaire de connexion complet avec validation et options de connexion sociale"
+    },
+    "calendar": {
+      "name": "Calendrier",
+      "keywords": ["calendrier", "date", "planification", "mois", "événements"],
+      "desc": "Calendrier réactif et accessible avec vue mensuelle et indicateurs d'événements"
+    },
+    "emailAddress": {
+      "label": "Adresse e-mail",
+      "placeholder": "Entrez votre email",
+      "helperText": "Nous ne partagerons jamais votre e-mail.",
+      "required": "Requis"
+    },
+    "chooseOption": {
+      "label": "Choisir une option"
+    },
+    "termsConditions": {
+      "label": "Accepter les conditions",
+      "description": "Vous devez accepter les conditions générales"
+    },
+    "disabledOption":    {
+      "label": "Option désactivée",
+      "description": "Cette option est désactivée"
+    }
+  },
+  "backgrounds": {
+    "interactiveTiles": {
+      "name": "Carreaux interactifs",
+      "keywords": ["interactif", "carreaux", "arrière-plans", "grille"],
+      "desc": "Arrière-plan avec carreaux interactifs"
+    }
+  },
+  "navigation": {
+    "breadcrumb": {
+      "name": "Fil d'Ariane",
+      "keywords": ["fil d'ariane", "navigation", "chemin", "hiérarchie"]
+    },
+    "tabs": {
+      "name": "Onglets",
+      "keywords": ["onglets", "navigation", "commutateur", "basculer"]
+    },
+    "pagination": {
+      "name": "Pagination",
+      "keywords": ["pagination", "pages", "navigation", "pagination"]
+    }
+  },
+  "badges": {
+    "badge": {
+      "name": "Badge",
+      "primary": "Primaire",
+      "success": "Succès",
+      "warning": "Avertissement",
+      "danger": "Danger",
+      "closable": "Fermable",
+      "withIcon": "Avec icône",
+      "notifications": "Notifications",
+      "keywords": ["badge", "étiquette", "statut", "indicateur"],
+      "desc": "Utilisé pour les indicateurs de statut et les étiquettes"
+    },
+    "chip": {
+      "name": "Puce",
+      "primary": "Puce principale",
+      "success": "Succès",
+      "warning": "Avertissement",
+      "danger": "Danger",
+      "closable": "Fermable",
+      "withIcon": "Avec icône",
+      "keywords": ["puce", "étiquette", "filtre", "catégorie"],
+      "desc": "Utilisé pour les filtres, les catégories et les étiquettes amovibles"
+    }
+  },
+  "sections": {
+    "buttons": "Boutons",
+    "cards": "Cartes",
+    "inputs": "Entrées",
+    "backgrounds": "Arrière-plans",
+    "utility": "Utilitaires",
+    "navigation": "Navigation",
+    "badges": "Badges",
+    "avatars": "Avatars",
+    "accordion": "Accordéon",
+    "feedback": "Retour",
+    "formHelper": "Aide au formulaire"
+  },
+  "avatars": {
+    "group": "Groupe d'avatars"
+  },
+  "feedback": {
+    "success": "Message de retour de succès",
+    "error": "Message de retour d'erreur",
+    "warning": "Message de retour d'avertissement",
+    "info": "Message de retour d'information"
+  },
+  "formHelper": {
+    "datePicker": {
+      "title": "Sélecteur de date",
+      "label": "Choisir une date"
+    },
+    "slider": {
+      "title": "Curseur"
+    },
+    "fileUpload": {
+      "title": "Téléchargement de fichier"
+    },
+    "formValidation": {
+      "title": "Validation de formulaire"
+    },
+    "loginForm": {
+      "title": "Formulaire de connexion"
+    },
+    "signupPage": {
+      "title": "Page d'inscription"
+    },
+    "otpVerification": {
+      "title": "Vérification OTP",
+      "tryCode": "Essayez le code 123456"
+    }
+  },
+  "accordion": {
+    "basic": {
+      "title": "Accordéon de base",
+      "items": [
+        { "title": "Section 1", "content": "Contenu de la section 1" },
+        { "title": "Section 2", "content": "Contenu de la section 2" },
+        { "title": "Section 3", "content": "Contenu de la section 3" },
+        { "title": "Section 4", "content": "Contenu de la section 4" }
+      ]
+    },
+    "multiple": {
+      "title": "Accordéon à ouvertures multiples",
+      "items": [
+        { "title": "Section 1", "content": "Contenu de la section 1" },
+        { "title": "Section 2", "content": "Contenu de la section 2" },
+        { "title": "Section 3", "content": "Contenu de la section 3" },
+        { "title": "Section 4", "content": "Contenu de la section 4" }
+      ]
+    },
+    "minimal": {
+      "title": "Accordéon minimal",
+      "items": [
+        { "title": "Section 1", "content": "Contenu de la section 1" },
+        { "title": "Section 2", "content": "Contenu de la section 2" },
+        { "title": "Section 3", "content": "Contenu de la section 3" }
+      ]
+    },
+    "alwaysOpen": {
+      "title": "Accordéon toujours ouvert",
+      "items": [
+        { "title": "Section 1", "content": "Contenu de la section 1" },
+        { "title": "Section 2", "content": "Contenu de la section 2" }
+      ]
+    }
+  }
+}
+
diff --git a/messages/[fr]/contact.json b/messages/[fr]/contact.json
new file mode 100644
index 0000000..28d67c5
--- /dev/null
+++ b/messages/[fr]/contact.json
@@ -0,0 +1,78 @@
+{
+  "header": {
+    "title": "Contactez-nous",
+    "description": "Des questions sur notre bibliothèque de composants ? Vous souhaitez contribuer ou signaler un bug ? Nous serions ravis de vous entendre !"
+  },
+  "form": {
+    "title": "Envoyez-nous un message",
+    "success": "Merci pour votre message ! Nous vous répondrons bientôt.",
+    "error": "Désolé, une erreur s'est produite lors de l'envoi de votre message. Veuillez réessayer.",
+    "sending": "Envoi...",
+    "send": "Envoyer le message",
+    "fields": {
+      "name": {
+        "label": "Nom complet *",
+        "placeholder": "Entrez votre nom complet"
+      },
+      "email": {
+        "label": "Adresse e-mail *",
+        "placeholder": "your.email@example.com"
+      },
+      "subject": {
+        "label": "Sujet *",
+        "placeholder": "Sélectionnez un sujet",
+        "options": {
+          "bugReport": "Rapport de bug",
+          "featureRequest": "Demande de fonctionnalité",
+          "documentation": "Documentation",
+          "contribution": "Contribution",
+          "support": "Support général",
+          "other": "Autre"
+        }
+      },
+      "message": {
+        "label": "Message *",
+        "placeholder": "Dites-nous comment nous pouvons vous aider..."
+      }
+    }
+  },
+  "errors": {
+    "nameRequired": "Le nom est requis",
+    "emailRequired": "L'e-mail est requis",
+    "emailInvalid": "Veuillez entrer une adresse e-mail valide",
+    "subjectRequired": "Le sujet est requis",
+    "messageRequired": "Le message est requis",
+    "messageLength": "Le message doit contenir au moins 10 caractères"
+  },
+  "info": {
+    "title": "Informations de contact",
+    "email": {
+      "title": "E-mail"
+    },
+    "github": {
+      "title": "GitHub"
+    },
+    "linktree": {
+      "title": "Linktree",
+      "description": "Consultez notre Linktree pour tous nos liens sociaux :"
+    }
+  },
+  "social": {
+    "title": "Suivez-nous"
+  },
+  "faq": {
+    "title": "Questions fréquemment posées",
+    "q1": {
+      "title": "Comment puis-je contribuer à la bibliothèque ?",
+      "description": "Consultez notre fichier CONTRIBUTING.md pour les directives sur la contribution de composants, le signalement de bugs ou la suggestion d'améliorations."
+    },
+    "q2": {
+      "title": "Cette bibliothèque est-elle gratuite ?",
+      "description": "Oui ! Cette bibliothèque de composants est open source et gratuite pour une utilisation personnelle et commerciale."
+    },
+    "q3": {
+      "title": "Comment signaler un bug ?",
+      "description": "Vous pouvez signaler des bugs via notre page GitHub issues ou en utilisant le formulaire de contact ci-dessus avec \"Rapport de bug\" comme sujet."
+    }
+  }
+}
diff --git a/messages/[fr]/feedback.json b/messages/[fr]/feedback.json
new file mode 100644
index 0000000..32b89db
--- /dev/null
+++ b/messages/[fr]/feedback.json
@@ -0,0 +1,86 @@
+{
+  "header": {
+    "title": "Nous apprécions vos retours",
+    "description": "Aidez-nous à améliorer MyLibrary en partageant vos réflexions, en signalant des bugs ou en suggérant de nouvelles fonctionnalités."
+  },
+  "alert": {
+    "success": {
+      "title": "Merci !",
+      "message": "Votre retour a été soumis avec succès. Nous l'examinerons bientôt."
+    },
+    "error": {
+      "title": "Erreur",
+      "message": "Veuillez remplir tous les champs obligatoires avant de soumettre."
+    }
+  },
+  "form": {
+    "title": "Partagez vos retours",
+    "categoryLabel": "Catégorie de retour *",
+    "ratingLabel": "Note générale",
+    "emailLabel": "Email (facultatif)",
+    "emailPlaceholder": "votre.email@exemple.com",
+    "emailHelper": "Nous l'utiliserons uniquement pour un suivi de vos retours",
+    "feedbackLabel": "Votre retour *",
+    "feedbackPlaceholder": "Parlez-nous de votre expérience, signalez un bug ou suggérez des améliorations...",
+    "submit": "Soumettre les retours",
+    "clear": "Effacer le formulaire"
+  },
+  "category": {
+    "bug": "Signalement de bug",
+    "feature": "Demande de fonctionnalité",
+    "improvement": "Suggestion d'amélioration",
+    "general": "Retour général"
+  },
+  "rating": {
+    "5": "⭐⭐⭐⭐⭐ Excellent",
+    "4": "⭐⭐⭐⭐ Bon",
+    "3": "⭐⭐⭐ Moyen",
+    "2": "⭐⭐ Pauvre",
+    "1": "⭐ Très pauvre"
+  },
+  "sidebar": {
+    "stats": {
+      "title": "Statistiques de la communauté",
+      "totalComponents": "Composants totaux",
+      "githubStars": "Étoiles GitHub",
+      "contributors": "Contributeurs",
+      "issuesResolved": "Problèmes résolus"
+    },
+    "progress": {
+      "title": "Progrès du développement",
+      "buttons": "Composants de boutons",
+      "cards": "Composants de cartes",
+      "forms": "Composants de formulaires",
+      "navigation": "Navigation"
+    },
+    "contact": {
+      "title": "Autres façons de nous contacter",
+      "email": "📧 Support par email",
+      "discord": "💬 Communauté Discord",
+      "github": "🐙 Problèmes GitHub"
+    }
+  },
+  "recent": {
+    "title": "Retours récents de la communauté",
+    "items": [
+      {
+        "name": "Alex",
+        "time": "Il y a 2 jours",
+        "category": "Fonctionnalité",
+        "feedback": "J'adore les nouvelles variantes de boutons ! Pouvons-nous avoir un état de chargement pour les boutons ?"
+      },
+      {
+        "name": "Sarah",
+        "time": "Il y a 1 semaine",
+        "category": "Bug",
+        "feedback": "Problème d'espacement du composant carte sur les appareils mobiles. Résolu dans la dernière mise à jour !"
+      },
+      {
+        "name": "Mike",
+        "time": "Il y a 2 semaines",
+        "category": "Général",
+        "feedback": "Excellente documentation et exemples. L'intégration devient super facile !"
+      }
+    ]
+  }
+}
diff --git a/messages/[fr]/homepage.json b/messages/[fr]/homepage.json
index cef5105..a2ab394 100644
--- a/messages/[fr]/homepage.json
+++ b/messages/[fr]/homepage.json
@@ -1,39 +1,47 @@
- {
-    "hero_title": "Créez des applications React belles et performantes facilement",
-    "hero_description": "Notre bibliothèque de composants permet aux développeurs de disposer d'éléments d'interface personnalisables et accessibles optimisés pour les écosystèmes React.",
-    "explore_components": "Explorer les composants",
-    "try_playground": "🎮 Essayer le bac à sable",
-    "beautiful_components": "Composants magnifiques",
-    "ready_to_use": "Prêt à l'emploi dans vos projets",
-    "features_title": "Optimisé pour React",
-    "features_description": "Composants légers et rapides, conçus spécifiquement pour les applications React.",
-    "themes_title": "Thèmes personnalisés",
-    "themes_description": "Prend en charge une personnalisation sans effort avec des thèmes clairs, sombres et personnalisés.",
-    "apis_title": "APIs flexibles",
-    "apis_description": "Props simples et intuitifs permettant un contrôle total sur vos composants.",
-    "documentation_title": "Bien documenté",
-    "documentation_description": "Documentation complète et claire pour faciliter votre expérience de développement.",
-    "featured_components": "Composants vedettes",
-    "simple_card_title": "Carte simple",
-    "simple_card_description": "Carte épurée et minimaliste avec prise en charge des actions.",
-    "feature_card_title": "Carte de fonctionnalités",
-    "feature_card_description": "Mettez en valeur les fonctionnalités de votre application avec style.",
-    "pricing_card_plan": "Pro",
-    "pricing_card_price": "$9/mois",
-    "pricing_card_features": ["10 projets", "Support prioritaire", "Utilisateurs illimités"],
-    "data_card_title": "Projets actifs",
-    "data_card_icon": "📂",
-    "data_card_trend": 8,
-    "getting_started": "Premiers pas",
-    "getting_started_step_1_title": "Ajouter le paquet",
-    "getting_started_step_1_description": "Installez avec npm ou yarn pour une intégration facile.",
-    "getting_started_step_1_code": "npm install my-components-library",
-    "getting_started_step_2_title": "Importer des composants",
-    "getting_started_step_2_description": "Importez uniquement ce dont vous avez besoin depuis la bibliothèque pour garder les bundles légers.",
-    "getting_started_step_2_code": "import { Button, Card } from 'my-components-library';",
-    "getting_started_step_3_title": "Utiliser des composants",
-    "getting_started_step_3_description": "Appliquez directement les composants avec des props faciles à utiliser.",
-    "getting_started_step_3_code": "<Button variant='primary'>Cliquez-moi</Button>",
-    "cta_title": "Prêt à créer des applications époustouflantes ?",
-    "cta_button": "Commencer à construire maintenant"
-  }
\ No newline at end of file
+{
+  "hero_title": "Créez de magnifiques applications React performantes en toute simplicité",
+  "hero_description": "Notre bibliothèque de composants permet aux développeurs d’utiliser des éléments d’interface personnalisables et accessibles, optimisés pour l’écosystème React.",
+  "explore_components": "Explorer les composants",
+  "try_playground": "🎮 Essayer le terrain de jeu",
+  "beautiful_components": "Beaux composants",
+  "ready_to_use": "Prêt à être utilisé dans vos projets",
+  "features_title": "Optimisé pour React",
+  "features_description": "Des composants légers et rapides, conçus spécifiquement pour les applications React.",
+  "themes_title": "Thèmes personnalisés",
+  "themes_description": "Prend en charge une personnalisation facile avec des thèmes clairs, sombres et personnalisés.",
+  "apis_title": "API flexibles",
+  "apis_description": "Des props simples et intuitives offrant un contrôle total sur vos composants.",
+  "documentation_title": "Bien documenté",
+  "documentation_description": "Une documentation complète et claire pour faciliter votre expérience de développement.",
+  "featured_components": "Composants mis en avant",
+  "simple_card_title": "Carte simple",
+  "simple_card_description": "Carte propre et minimaliste avec support d’action.",
+  "feature_card_title": "Carte de fonctionnalité",
+  "feature_card_description": "Mettez en valeur les fonctionnalités de votre application avec style.",
+  "pricing_card_plan": "Pro",
+  "pricing_card_price": "9 $/mois",
+  "pricing_card_features": [
+    "10 projets",
+    "Support prioritaire",
+    "Utilisateurs illimités"
+  ],
+  "data_card_title": "Projets actifs",
+  "data_card_icon": "📂",
+  "data_card_trend": "8",
+  "getting_started": "Bien démarrer",
+  "getting_started_step_one_title": "Ajouter le package",
+  "getting_started_step_one_description": "Installez-le avec npm ou yarn pour une intégration facile.",
+  "getting_started_step_one_code": "npm install my-components-library",
+  "getting_started_step_2_title": "Importer les composants",
+  "getting_started_step_2_description": "Importez uniquement ce dont vous avez besoin pour garder des bundles légers.",
+  "getting_started_step_two_code": "import '{ Button, Card }' from 'my-components-library';",
+  "getting_started_step_3_title": "Utiliser les composants",
+  "getting_started_step_3_description": "Appliquez directement les composants avec des props simples à utiliser.",
+  "getting_started_step_3_code": "'<Button variant='primary'>Cliquez-moi</Button>'",
+  "cta_title": "Prêt à créer des applications époustouflantes ?",
+  "cta_button": "Commencer maintenant",
+  "theme": {
+    "toggle_light": "Passer au mode clair",
+    "toggle_dark": "Passer au mode sombre"
+  }
+}
diff --git a/messages/[fr]/playground.json b/messages/[fr]/playground.json
new file mode 100644
index 0000000..bf9b720
--- /dev/null
+++ b/messages/[fr]/playground.json
@@ -0,0 +1,219 @@
+{
+  "title": "Aire de jeu avancée des composants",
+  "subtitle": "Personnalisez les composants en temps réel et exportez du code prêt pour la production !",
+  
+  "controls": {
+    "componentType": "Type de composant",
+    "variant": "Variante",
+    "previewMode": "Mode d’aperçu",
+    "myFavorites": "Mes favoris ({count})",
+    "customizationControls": "Contrôles de personnalisation",
+    "reset": "Réinitialiser",
+    "random": "Aléatoire",
+    "showFavorites": "Afficher les favoris",
+    "hideFavorites": "Masquer les favoris"
+  },
+  
+  "componentTypes": {
+    "buttons": "Boutons",
+    "cards": "Cartes",
+    "inputs": "Champs de saisie"
+  },
+  
+  "buttonVariants": {
+    "primary": "Bouton principal",
+    "secondary": "Bouton secondaire",
+    "danger": "Bouton de danger",
+    "success": "Bouton de succès",
+    "ghost": "Bouton fantôme",
+    "outline": "Bouton contour",
+    "rainbow": "Bouton arc-en-ciel"
+  },
+  
+  "cardVariants": {
+    "simple": "Carte simple",
+    "feature": "Carte de fonctionnalité",
+    "pricing": "Carte de tarification",
+    "user": "Carte utilisateur",
+    "data": "Carte de données"
+  },
+  
+  "inputVariants": {
+    "text": "Champ de texte",
+    "select": "Menu déroulant",
+    "checkbox": "Case à cocher"
+  },
+  
+  "buttonControls": {
+    "buttonText": "Texte du bouton",
+    "buttonSize": "Taille du bouton",
+    "sizes": {
+      "small": "Petit",
+      "medium": "Moyen",
+      "large": "Grand"
+    },
+    "disabled": "Désactivé",
+    "loading": "Chargement",
+    "loadingText": "⏳ Chargement..."
+  },
+  
+  "cardControls": {
+    "cardTitle": "Titre de la carte",
+    "cardDescription": "Description de la carte",
+    "cardTitlePlaceholder": "Entrez le titre de la carte",
+    "cardDescriptionPlaceholder": "Entrez la description de la carte"
+  },
+  
+  "pricingControls": {
+    "planName": "Nom du plan",
+    "price": "Prix",
+    "features": "Fonctionnalités (séparées par des virgules)",
+    "planPlaceholder": "ex : Pro",
+    "pricePlaceholder": "ex : 9€/mois",
+    "featuresPlaceholder": "Fonction 1, Fonction 2, Fonction 3"
+  },
+  
+  "userCardControls": {
+    "userName": "Nom de l’utilisateur",
+    "email": "E-mail",
+    "role": "Rôle",
+    "avatarUrl": "URL de l’avatar",
+    "userNamePlaceholder": "John Doe",
+    "emailPlaceholder": "john@example.com",
+    "rolePlaceholder": "Ingénieur logiciel",
+    "avatarPlaceholder": "https://i.pravatar.cc/150?img=1"
+  },
+  
+  "dataCardControls": {
+    "dataTitle": "Titre des données",
+    "value": "Valeur",
+    "icon": "Icône (Émoji)",
+    "trend": "Tendance (%)",
+    "dataTitlePlaceholder": "Projets actifs",
+    "valuePlaceholder": "27",
+    "iconPlaceholder": "📂",
+    "trendPlaceholder": "8"
+  },
+  
+  "inputControls": {
+    "label": "Étiquette",
+    "placeholder": "Texte de l’espace réservé",
+    "errorMessage": "Message d’erreur (optionnel)",
+    "required": "Obligatoire",
+    "labelPlaceholder": "Entrez l’étiquette du champ",
+    "placeholderPlaceholder": "Entrez le texte de l’espace réservé",
+    "errorPlaceholder": "Entrez le message d’erreur"
+  },
+  
+  "codeSection": {
+    "generatedCode": "Code généré",
+    "show": "Afficher",
+    "hide": "Masquer",
+    "copyCode": "Copier le code",
+    "copied": "✅ Copié !",
+    "failedToCopy": "❌ Échec de la copie",
+    "language": "React JSX"
+  },
+  
+  "preview": {
+    "livePreview": "Aperçu en direct",
+    "componentInfo": "Informations sur le composant",
+    "type": "Type",
+    "variant": "Variante",
+    "interactive": "Interactif",
+    "clickToTest": "Oui (Cliquez pour tester)",
+    "displayOnly": "Affichage uniquement",
+    "light": "Clair",
+    "dark": "Sombre"
+  },
+  
+  "favorites": {
+    "title": "Mes composants favoris ({count})",
+    "clearAll": "Tout effacer",
+    "noFavorites": "Aucun composant favori pour le moment",
+    "noFavoritesDesc": "Cliquez sur l’icône de cœur d’un composant pour l’ajouter à vos favoris",
+    "addFavorite": "Ajouter aux favoris",
+    "removeFavorite": "Supprimer des favoris",
+    "addedDate": "Ajouté le {date}",
+    "componentSuffix": "Composant",
+    "addToFavorites": "Ajouter aux favoris",
+    "removeFromFavorites": "Retirer des favoris"
+  },
+  
+  "showcase": {
+    "allVariants": "Toutes les variantes de {type}",
+    "clickToCustomize": "Cliquez pour personnaliser",
+    "preview": "Aperçu",
+    "sample": "Exemple"
+  },
+  
+  "stats": {
+    "title": "Statistiques de l’aire de jeu",
+    "buttonTypes": "Types de boutons",
+    "cardTypes": "Types de cartes",
+    "inputTypes": "Types de champs de saisie",
+    "favorites": "Favoris"
+  },
+  
+  "actions": {
+    "randomize": "Aléatoire",
+    "reset": "Réinitialiser",
+    "copyCode": "Copier le code"
+  },
+  
+  "defaultValues": {
+    "buttonText": "Cliquez-moi",
+    "cardTitle": "Carte d’exemple",
+    "cardDescription": "Ceci est une description d’exemple de carte",
+    "inputLabel": "Champ d’exemple",
+    "inputPlaceholder": "Entrez du texte ici...",
+    "checkboxDescription": "Cochez cette option",
+    "selectOptions": {
+      "option1": "Option 1",
+      "option2": "Option 2",
+      "option3": "Option 3"
+    }
+  },
+  
+  "randomValues": {
+    "buttonTexts": ["Commencer", "En savoir plus", "Inscrivez-vous maintenant", "Télécharger", "S’abonner", "Rejoignez-nous", "Essai gratuit", "Contactez-nous"],
+    "cardTitles": ["Fonctionnalité incroyable", "Service premium", "Nouveau produit", "Offre spéciale", "Dernière mise à jour"],
+    "cardDescriptions": [
+      "Découvrez des fonctionnalités incroyables qui transformeront votre flux de travail",
+      "Profitez d’une qualité premium grâce à nos services professionnels",
+      "Découvrez notre dernier produit avec une technologie de pointe",
+      "Offre à durée limitée avec des avantages exclusifs pour vous",
+      "Restez à jour avec les dernières améliorations et fonctionnalités"
+    ],
+    "userNames": ["Alice Johnson", "Bob Smith", "Carol Davis", "David Wilson", "Emma Brown"],
+    "userRoles": ["Développeur frontend", "Ingénieur backend", "Designer UI/UX", "Chef de produit", "Ingénieur DevOps"],
+    "dataTitles": ["Utilisateurs totaux", "Revenus", "Sessions actives", "Taux de conversion", "Taux de croissance"],
+    "dataValues": ["1 234", "45,6 K€", "89%", "12,5%", "+23%"],
+    "dataIcons": ["👥", "💰", "📊", "📈", "🚀"]
+  },
+  
+  "pricing": {
+    "defaultPlan": "Pro",
+    "defaultPrice": "9€/mois",
+    "defaultFeatures": ["10 projets", "Support prioritaire", "Utilisateurs illimités"]
+  },
+  
+  "userData": {
+    "defaultName": "John Doe",
+    "defaultEmail": "john@example.com",
+    "defaultRole": "Ingénieur logiciel"
+  },
+  
+  "dataCard": {
+    "defaultTitle": "Projets actifs",
+    "defaultValue": "27",
+    "defaultIcon": "📂",
+    "defaultTrend": 8
+  },
+  
+  "messages": {
+    "codeCopied": "Code copié dans le presse-papiers !",
+    "copyFailed": "Échec de la copie du code.",
+    "clickAlert": "{component} cliqué !"
+  }
+}
diff --git a/messages/[hi]/about.json b/messages/[hi]/about.json
new file mode 100644
index 0000000..f08b644
--- /dev/null
+++ b/messages/[hi]/about.json
@@ -0,0 +1,129 @@
+{
+  "title": "MyLibrary के बारे में",
+  "description": "MyLibrary एक व्यापक कंपोनेंट लाइब्रेरी है जो Next.js और Tailwind CSS के साथ बनाई गई है, जिसे डेवलपर्स को पुन: प्रयोज्य, सुलभ और सुंदर UI कंपोनेंट्स प्रदान करने के लिए डिज़ाइन किया गया है। हमारा लक्ष्य विकास वर्कफ़्लो को तेज़ करना और परियोजनाओं में डिज़ाइन की स्थिरता बनाए रखना है।",
+  "overview": {
+    "components": "20+ कंपोनेंट्स",
+    "typescript": "TypeScript तैयार",
+    "performance": "प्रदर्शन के लिए अनुकूलित"
+  },
+  "mission": {
+    "title": "हमारा मिशन",
+    "description": "डेवलपर्स को एक मजबूत, लचीली और सुंदर कंपोनेंट लाइब्रेरी के साथ सशक्त बनाना जो विकास समय को कम करे और उच्च गुणवत्ता वाले उपयोगकर्ता अनुभव बनाए रखे। हम वेब विकास को अधिक कुशल और आनंददायक बनाने में विश्वास करते हैं।"
+  },
+  "vision": {
+    "title": "हमारी दृष्टि",
+    "description": "React डेवलपर्स के लिए प्रमुख कंपोनेंट लाइब्रेरी बनना, एक समुदाय को बढ़ावा देना जहाँ नवाचार व्यावहारिकता से मिलता है। हम एक ऐसी दुनिया की कल्पना करते हैं जहाँ सुंदर UI बनाना सभी स्तरों के डेवलपर्स के लिए सुलभ हो।"
+  },
+  "features": {
+    "title": "MyLibrary क्यों चुनें?",
+    "designSystem": {
+      "title": "डिज़ाइन सिस्टम",
+      "description": "सुसंगत डिज़ाइन टोकन और थीमिंग सिस्टम एकजुट उपयोगकर्ता अनुभव के लिए।"
+    },
+    "accessibility": {
+      "title": "पहले पहुँच",
+      "description": "WCAG 2.1 दिशानिर्देशों और कीबोर्ड नेविगेशन समर्थन के साथ बनाया गया।"
+    },
+    "performance": {
+      "title": "प्रदर्शन",
+      "description": "ट्री-शेकिंग और न्यूनतम निर्भरताओं के साथ अनुकूलित बंडल आकार।"
+    },
+    "devExperience": {
+      "title": "डेवलपर अनुभव",
+      "description": "TypeScript समर्थन, व्यापक दस्तावेज़ीकरण, और उत्कृष्ट IDE एकीकरण।"
+    },
+    "community": {
+      "title": "समुदाय द्वारा संचालित",
+      "description": "सक्रिय समुदाय योगदान और प्रतिक्रिया के साथ ओपन सोर्स प्रोजेक्ट।"
+    },
+    "flexible": {
+      "title": "लचीला",
+      "description": "अनुकूलन योग्य कंपोनेंट्स जो आपके डिज़ाइन आवश्यकताओं के अनुसार ढल जाते हैं।"
+    }
+  },
+  "techStack": {
+    "title": "टेक स्टैक",
+    "nextjs": {
+      "title": "Next.js 14",
+      "description": "React फ्रेमवर्क App Router के साथ"
+    },
+    "react": {
+      "title": "React 18",
+      "description": "कंपोनेंट-आधारित आर्किटेक्चर"
+    },
+    "tailwind": {
+      "title": "Tailwind CSS",
+      "description": "यूटिलिटी-फर्स्ट स्टाइलिंग"
+    },
+    "typescript": {
+      "title": "TypeScript",
+      "description": "टाइप-सुरक्षित विकास"
+    },
+    "additionalTools": {
+      "title": "अतिरिक्त उपकरण",
+      "eslint": "ESLint",
+      "prettier": "Prettier",
+      "lucide": "Lucide Icons",
+      "postcss": "PostCSS",
+      "git": "Git"
+    }
+  },
+  "gettingStarted": {
+    "title": "🚀 शुरुआत करें",
+    "installation": {
+      "title": "इंस्टॉलेशन",
+      "description": "npm के माध्यम से लाइब्रेरी इंस्टॉल करें या सीधे तैयार कंपोनेंट्स कॉपी करें।"
+    },
+    "import": {
+      "title": "इम्पोर्ट",
+      "description": "आवश्यक कंपोनेंट्स को सीधे अपने React प्रोजेक्ट में इम्पोर्ट करें और तेजी से निर्माण शुरू करें।"
+    },
+    "customize": {
+      "title": "कस्टमाइज़ करें",
+      "description": "डिज़ाइन, रंग और व्यवहार को आसानी से अपने डिज़ाइन सिस्टम के अनुसार बदलें।"
+    },
+    "cta": "कंपोनेंट्स देखें"
+  },
+  "contributing": {
+    "title": "योगदान",
+    "description": "हम समुदाय से योगदान का स्वागत करते हैं! चाहे आप बग ठीक कर रहे हों, नए कंपोनेंट्स जोड़ रहे हों, या दस्तावेज़ीकरण सुधार रहे हों, आपकी मदद MyLibrary को सभी के लिए बेहतर बनाती है।",
+    "submitIssues": {
+      "title": "समस्याएँ सबमिट करें",
+      "description": "GitHub पर बग रिपोर्ट करें या फीचर्स का अनुरोध करें"
+    },
+    "pullRequests": {
+      "title": "पुल रिक्वेस्ट बनाएं",
+      "description": "कोड सुधार और नई सुविधाओं में योगदान करें"
+    },
+    "documentation": {
+      "title": "दस्तावेज़ीकरण सुधारें",
+      "description": "हमारे दस्तावेज़ को अधिक स्पष्ट और व्यापक बनाने में मदद करें"
+    }
+  },
+  "community": {
+    "title": "समुदाय",
+    "description": "MyLibrary के साथ अद्भुत यूजर इंटरफेस बनाने वाले डेवलपर्स के हमारे बढ़ते समुदाय में शामिल हों।",
+    "githubStars": "GitHub स्टार्स",
+    "contributors": "योगदानकर्ता",
+    "downloads": "डाउनलोड्स",
+    "builtWithLove": "ओपन सोर्स समुदाय द्वारा ❤️ के साथ बनाया गया"
+  },
+  "contributors": {
+    "title": "हमारे योगदानकर्ता",
+    "thankYou": "इस कंपोनेंट लाइब्रेरी को बेहतर बनाने में योगदान देने वाले सभी अद्भुत डेवलपर्स का धन्यवाद!",
+    "loading": "योगदानकर्ता लोड हो रहे हैं...",
+    "contributorsError": "योगदानकर्ता लोड करने में विफल",
+    "avatarAlt": "{login} का अवतार",
+    "contributions": "{count} योगदान{count, plural, one {} other {s}}",
+    "profile": "प्रोफ़ाइल",
+    "join": "क्या आप हमारे योगदानकर्ताओं में शामिल होना चाहते हैं? हमारा ",
+    "githubRepo": "GitHub रिपॉजिटरी",
+    "getStarted": " देखें और शुरुआत करें!"
+  },
+  "license": {
+    "title": "ओपन सोर्स और मुफ्त",
+    "description": "MyLibrary MIT लाइसेंस के तहत जारी किया गया है, जिससे यह व्यक्तिगत और व्यावसायिक परियोजनाओं के लिए मुफ्त है।",
+    "github": "GitHub पर देखें",
+    "contact": "संपर्क करें"
+  }
+}
\ No newline at end of file
diff --git a/messages/[hi]/analytics.json b/messages/[hi]/analytics.json
new file mode 100644
index 0000000..6a37a89
--- /dev/null
+++ b/messages/[hi]/analytics.json
@@ -0,0 +1,38 @@
+{
+  "header": {
+    "title": "कंपोनेंट विश्लेषण डैशबोर्ड",
+    "description": "कंपोनेंट उपयोग, प्रदर्शन और उपयोगकर्ता सहभागिता को ट्रैक करें",
+    "export": "डेटा निर्यात करें"
+  },
+  "overview": {
+    "totalViews": "कुल दृश्य",
+    "totalCopies": "कुल प्रतियां",
+    "componentsUsed": "उपयोग किए गए कंपोनेंट्स",
+    "sessionTime": "सत्र का समय"
+  },
+  "popular": {
+    "title": "सबसे लोकप्रिय कंपोनेंट्स"
+  },
+  "recent": {
+    "title": "पिछले 7 दिनों की गतिविधि",
+    "today": "आज"
+  },
+  "performance": {
+    "title": "प्रदर्शन अंतर्दृष्टि",
+    "avgViews": "प्रति कंपोनेंट औसत दृश्य",
+    "copyRate": "कॉपी दर",
+    "viewsWeek": "इस सप्ताह के दृश्य"
+  },
+  "actions": {
+    "title": "त्वरित क्रियाएँ",
+    "viewComponents": "कंपोनेंट्स देखें",
+    "export": "विश्लेषण निर्यात करें",
+    "reset": "डेटा रीसेट करें"
+  },
+  "modal": {
+    "title": "विश्लेषण डेटा रीसेट करें",
+    "message": "यह सभी विश्लेषण डेटा जैसे दृश्य, प्रतियां और सत्र जानकारी को स्थायी रूप से हटा देगा। इस क्रिया को पूर्ववत नहीं किया जा सकता।",
+    "confirm": "डेटा रीसेट करें",
+    "cancel": "रद्द करें"
+  }
+}
diff --git a/messages/[hi]/common.json b/messages/[hi]/common.json
new file mode 100644
index 0000000..39f7456
--- /dev/null
+++ b/messages/[hi]/common.json
@@ -0,0 +1,30 @@
+{
+  "navigation": {
+    "home": "होम",
+    "about": "परिचय",
+    "contact": "संपर्क",
+    "components": "घटक",
+    "playground": "🎮 प्लेग्राउंड",
+    "analytics": "विश्लेषण",
+    "feedback": "प्रतिक्रिया",
+    "game": "🎮 गेम",
+    "racing game": "🏁 रेसिंग गेम",
+    "fun": "मज़ा"
+  },
+  "footer": {
+    "brand": "मायलाइब्रेरी",
+    "subtitle": "कंपोनेंट लाइब्रेरी",
+    "description": "एक ओपन-सोर्स Next.js + Tailwind CSS कंपोनेंट लाइब्रेरी जिसमें तैयार-उपयोग UI कंपोनेंट्स शामिल हैं। डेवलपर्स के लिए सीखने, अभ्यास करने और Hacktoberfest के दौरान एवं उसके बाद योगदान देने के लिए उपयुक्त।",
+    "followUs": "हमारा अनुसरण करें",
+    "social": {
+      "github": "गिटहब",
+      "linkedin": "लिंक्डइन",
+      "twitter": "ट्विटर",
+      "discord": "डिस्कॉर्ड",
+      "youtube": "यूट्यूब"
+    },
+    "madeWith": "से बनाया गया",
+    "hacktoberfest": "Hacktoberfest के लिए",
+    "copyright": "मायलाइब्रेरी कंपोनेंट लाइब्रेरी। सर्वाधिकार सुरक्षित।"
+  }
+}
diff --git a/messages/[hi]/comps.json b/messages/[hi]/comps.json
new file mode 100644
index 0000000..c47d62d
--- /dev/null
+++ b/messages/[hi]/comps.json
@@ -0,0 +1,350 @@
+{
+  "hero": {
+    "title": "React UI Playground",
+    "description": "सुंदर, आधुनिक और उत्तरदायी कंपोनेंट डेमो – प्रत्येक अनुभाग स्पष्टता, जीवंतता और पहुंच के लिए डिज़ाइन किया गया है।"
+  },
+  "search": {
+    "placeholder": "कंपोनेंट खोजें (बटन, कार्ड, प्राइमरी, आदि)",
+    "results": "{count} कंपोनेंट{count, plural, one {} other {s}} मिला{count, plural, one {} other {s}}{search, select, '' {} other { \"{search}\" से मेल खाते हुए}}{filter, select, all {} other { {filter} में}}",
+    "noResults": "कोई कंपोनेंट नहीं मिला"
+  },
+  "filter": {
+    "all": "सभी कंपोनेंट्स",
+    "buttons": "बटन",
+    "backgrounds": "पृष्ठभूमि",
+    "cards": "कार्ड्स",
+    "inputs": "इनपुट्स",
+    "navigation": "नेविगेशन",
+    "badges": "बैज"
+  },
+  "selectOptions": {
+    "option1": "विकल्प 1",
+    "option2": "विकल्प 2",
+    "option3": "विकल्प 3"
+  },
+  "tabs": {
+    "dashboard": "डैशबोर्ड",
+    "dashboardContent": "डैशबोर्ड सामग्री यहाँ जाती है...",
+    "analytics": "एनालिटिक्स",
+    "analyticsContent": "एनालिटिक्स सामग्री यहाँ जाती है...",
+    "settings": "सेटिंग्स",
+    "settingsContent": "सेटिंग्स सामग्री यहाँ जाती है..."
+  },
+  "breadcrumb": {
+    "home": "होम",
+    "components": "कंपोनेंट्स",
+    "navigation": "नेविगेशन",
+    "breadcrumb": "ब्रेडक्रंब"
+  },
+  "buttons": {
+    "primary": {
+      "name": "प्राइमरी बटन",
+      "label": "प्राइमरी",
+      "keywords": ["प्राइमरी", "मुख्य", "एक्शन", "cta"],
+      "desc": "मुख्य क्रियाओं के लिए उपयोग किया जाता है"
+    },
+    "gradient": {
+      "name": "ग्रेडिएंट बटन",
+      "label": "ग्रेडिएंट",
+      "keywords": ["ग्रेडिएंट", "रंगीन", "चमकीला", "cta"],
+      "desc": "वाइब्रेंट ग्रेडिएंट बटन, होवर स्केलिंग और लोडिंग स्पिनर के साथ"
+    },
+    "neon": {
+      "name": "नियॉन बटन",
+      "label": "नियॉन",
+      "keywords": ["नियॉन", "चमक", "फ्यूचरिस्टिक"],
+      "desc": "चमकदार फ्यूचरिस्टिक बटन, लोडिंग स्पिनर और होवर स्केलिंग के साथ"
+    },
+    "secondary": {
+      "name": "सेकेंडरी बटन",
+      "label": "सेकेंडरी",
+      "keywords": ["सेकेंडरी", "वैकल्पिक"],
+      "desc": "सेकेंडरी क्रियाओं के लिए उपयोग किया जाता है"
+    },
+    "ghost": {
+      "name": "घोस्ट बटन",
+      "label": "घोस्ट",
+      "keywords": ["घोस्ट", "पारदर्शी", "सूक्ष्म"],
+      "desc": "मिनिमल क्रियाओं के लिए उपयोग किया जाता है"
+    },
+    "outline": {
+      "name": "आउटलाइन बटन",
+      "label": "आउटलाइन",
+      "keywords": ["आउटलाइन", "बॉर्डर"],
+      "desc": "आउटलाइन देने के लिए उपयोग किया जाता है"
+    },
+    "danger": {
+      "name": "डेंजर बटन",
+      "label": "डेंजर",
+      "keywords": ["डेंजर", "त्रुटि", "हटाना", "चेतावनी", "लाल"],
+      "desc": "विनाशकारी क्रियाओं के लिए उपयोग किया जाता है"
+    },
+    "success": {
+      "name": "सक्सेस बटन",
+      "label": "सक्सेस",
+      "keywords": ["सक्सेस", "पुष्टि", "हो गया", "हरा"],
+      "desc": "सफल क्रियाओं के लिए उपयोग किया जाता है"
+    },
+    "icon": {
+      "name": "आइकन बटन",
+      "label": "आइकन",
+      "keywords": ["आइकन", "स्टार", "सिंबल"],
+      "desc": "आइकन के लिए उपयोग किया जाता है"
+    },
+    "rainbow": {
+      "name": "रेनबो बटन",
+      "label": "रेनबो",
+      "keywords": ["रेनबो", "एक्शन", "रंगीन"],
+      "desc": "कॉल टू एक्शन के लिए उपयोग किया जाता है"
+    },
+    "glass": {
+      "name": "ग्लास बटन",
+      "label": "बटन",
+      "keywords": ["ग्लास", "cta", "एक्शन"],
+      "desc": "किसी भी क्रिया के लिए उपयोग किया जाता है"
+    }
+  },
+  "cards": {
+    "simple": {
+      "name": "सिंपल कार्ड",
+      "title": "सिंपल कार्ड",
+      "description": "एक मिनिमल कार्ड जिसमें क्रियाएँ हैं।",
+      "keywords": ["सिंपल", "बेसिक", "मिनिमल"]
+    },
+    "smart": {
+      "name": "स्मार्ट कार्ड",
+      "title": "स्मार्ट कार्ड",
+      "description": "आधुनिक कार्ड, ग्रेडिएंट बैकग्राउंड, होवर इफेक्ट्स और वैकल्पिक फुटर के साथ।",
+      "footer": "एक्शन",
+      "keywords": ["स्मार्ट", "ग्रेडिएंट", "कार्ड", "होवर", "फुटर", "इमेज"]
+    },
+    "image": {
+      "name": "इमेज कार्ड",
+      "title": "इमेज कार्ड",
+      "description": "SVG इमेज के साथ कार्ड।",
+      "keywords": ["इमेज", "फोटो", "विजुअल"]
+    },
+    "feature": {
+      "name": "फीचर कार्ड",
+      "title": "फीचर कार्ड",
+      "description": "फीचर्स और लाभ को हाइलाइट करें।",
+      "keywords": ["फीचर", "हाइलाइट", "लाभ"]
+    },
+    "pricing": {
+      "name": "प्राइसिंग कार्ड",
+      "plan": "प्रो",
+      "price": "₹700/माह",
+      "features": ["10 प्रोजेक्ट्स", "प्राथमिकता समर्थन", "अनलिमिटेड यूजर्स"],
+      "keywords": ["प्राइसिंग", "प्लान", "सब्सक्रिप्शन", "मूल्य"]
+    },
+    "data": {
+      "name": "डेटा कार्ड",
+      "title": "सक्रिय प्रोजेक्ट्स",
+      "keywords": ["डेटा", "स्टैट्स", "एनालिटिक्स", "मेट्रिक्स"]
+    }
+  },
+  "utility": {
+  "alert": {
+    "name": "تنبيه بسيط",
+    "keywords": ["تنبيه", "منبثق"]
+  },
+  "loaders": {
+    "name": "المحملات",
+    "simple": "محمل بسيط",
+    "dual": "محمل مزدوج",
+    "dots": "محمل النقاط",
+    "bar": "محمل الشريط",
+    "keywords": ["دوّار", "محمل", "جارٍ التحميل"]
+  },
+  "tooltips": {
+    "name": "تلميحات الأدوات",
+    "simple": "تلميح أداة بسيط",
+    "animated": "تلميح أداة متحرك",
+    "refreshText": "انقر للتحديث",
+    "deleteText": "حذف العنصر",
+    "keywords": ["تلميح", "منبثق"]
+  }
+},
+  "inputs": {
+    "text": {
+      "name": "टेक्स्ट इनपुट",
+      "label": "सैंपल इनपुट",
+      "placeholder": "टेक्स्ट दर्ज करें",
+      "keywords": ["टेक्स्ट", "इनपुट", "फील्ड", "फॉर्म"]
+    },
+    "password": {
+      "name": "पासवर्ड इनपुट",
+      "placeholder": "पासवर्ड दर्ज करें",
+      "keywords": ["पासवर्ड", "इनपुट", "फील्ड", "फॉर्म", "शो", "हाइड"],
+        "label": "पासवर्ड",
+      "error": "अमान्य पासवर्ड"
+    },
+    "select": {
+      "name": "सेलेक्ट",
+      "label": "सैंपल सेलेक्ट",
+      "keywords": ["सेलेक्ट", "ड्रॉपडाउन", "विकल्प", "चयन"]
+    },
+    "checkbox": {
+      "name": "चेकबॉक्स",
+      "label": "सैंपल चेकबॉक्स",
+      "description": "इस विकल्प को चुनें",
+      "keywords": ["चेकबॉक्स", "चेक", "टॉगल", "बूलियन"]
+    },
+    "loginForm": {
+      "name": "लॉगिन फॉर्म",
+      "keywords": ["लॉगिन", "फॉर्म", "ऑथेंटिकेशन", "ईमेल", "पासवर्ड"],
+      "desc": "पूर्ण लॉगिन फॉर्म, वेलिडेशन और सोशल लॉगिन विकल्पों के साथ"
+    },
+    "calendar": {
+      "name": "कैलेंडर",
+      "keywords": ["कैलेंडर", "तारीख", "शेड्यूल", "महीना", "इवेंट्स"],
+      "desc": "एक्सेसिबल, उत्तरदायी कैलेंडर जिसमें इवेंट इंडिकेटर्स हैं"
+    },
+    "emailAddress": {
+      "label": "ईमेल पता",
+      "placeholder": "अपना ईमेल दर्ज करें",
+      "helperText": "हम आपका ईमेल साझा नहीं करेंगे।",
+      "required": "आवश्यक"
+    },
+    
+    "chooseOption": {
+      "label": "एक विकल्प चुनें"
+    },
+    "termsConditions": {
+      "label": "नियम स्वीकार करें",
+      "description": "आपको नियम और शर्तें स्वीकार करनी होंगी"
+    },
+    "disabledOption": {
+      "label": "अक्षम विकल्प",
+      "description": "यह विकल्प अक्षम है"
+    }
+  },
+  "backgrounds": {
+    "interactiveTiles": {
+      "name": "इंटरएक्टिव टाइल्स",
+      "keywords": ["इंटरएक्टिव", "टाइल्स", "पृष्ठभूमि", "ग्रिड"],
+      "desc": "इंटरएक्टिव टाइल्स पृष्ठभूमि"
+    }
+  },
+  "navigation": {
+    "breadcrumb": {
+      "name": "ब्रेडक्रंब",
+      "keywords": ["ब्रेडक्रंब", "नेविगेशन", "पथ", "अनुक्रम"]
+    },
+    "tabs": {
+      "name": "टैब्स",
+      "keywords": ["टैब्स", "नेविगेशन", "स्विच", "टॉगल"]
+    },
+    "pagination": {
+      "name": "पेजिनेशन",
+      "keywords": ["पेजिनेशन", "पेजेस", "नेविगेशन", "पेजिंग"]
+    }
+  },
+  "badges": {
+    "badge": {
+      "name": "बैज",
+      "primary": "प्राइमरी",
+      "success": "सक्सेस",
+      "warning": "चेतावनी",
+      "danger": "डेंजर",
+      "closable": "क्लोजेबल",
+      "withIcon": "आइकन के साथ",
+      "notifications": "सूचनाएँ",
+      "keywords": ["बैज", "टैग", "लेबल", "स्थिति", "सूचक"],
+      "desc": "स्थिति संकेतक और लेबल के लिए उपयोग किया जाता है"
+    },
+    "chip": {
+      "name": "चिप",
+      "primary": "प्राइमरी चिप",
+      "success": "सक्सेस",
+      "warning": "चेतावनी",
+      "danger": "डेंजर",
+      "closable": "क्लोजेबल",
+      "withIcon": "आइकन के साथ",
+      "keywords": ["चिप", "टैग", "लेबल", "फिल्टर", "श्रेणी"],
+      "desc": "फिल्टर, श्रेणियाँ और हटाने योग्य टैग के लिए उपयोग किया जाता है"
+    }
+  },
+  "sections": {
+    "buttons": "बटन",
+    "cards": "कार्ड्स",
+    "inputs": "इनपुट्स",
+    "backgrounds": "पृष्ठभूमि",
+    "utility": "यूटिलिटी",
+    "navigation": "नेविगेशन",
+    "badges": "बैज",
+    "avatars": "अवतार",
+    "accordion": "एकॉर्डियन",
+    "feedback": "फीडबैक",
+    "formHelper": "फॉर्म हेल्पर्स"
+  },
+  "avatars": {
+    "group": "अवतार समूह"
+  },
+  "feedback": {
+    "success": "सफलता फीडबैक संदेश",
+    "error": "त्रुटि फीडबैक संदेश",
+    "warning": "चेतावनी फीडबैक संदेश",
+    "info": "सूचना फीडबैक संदेश"
+  },
+  "formHelper": {
+    "datePicker": {
+      "title": "तारीख चयनकर्ता",
+      "label": "तारीख चुनें"
+    },
+    "slider": {
+      "title": "स्लाइडर"
+    },
+    "fileUpload": {
+      "title": "फाइल अपलोड"
+    },
+    "formValidation": {
+      "title": "फॉर्म सत्यापन"
+    },
+    "loginForm": {
+      "title": "लॉगिन फॉर्म"
+    },
+    "signupPage": {
+      "title": "साइनअप पेज"
+    },
+    "otpVerification": {
+      "title": "ओटीपी सत्यापन",
+      "tryCode": "कोड 123456 आज़माएँ"
+    }
+  },
+  "accordion": {
+    "basic": {
+      "title": "बेसिक एकॉर्डियन",
+      "items": [
+        { "title": "सेक्शन 1", "content": "सेक्शन 1 के लिए सामग्री" },
+        { "title": "सेक्शन 2", "content": "सेक्शन 2 के लिए सामग्री" },
+        { "title": "सेक्शन 3", "content": "सेक्शन 3 के लिए सामग्री" },
+        { "title": "सेक्शन 4", "content": "सेक्शन 4 के लिए सामग्री" }
+      ]
+    },
+    "multiple": {
+      "title": "मल्टीपल ओपन एकॉर्डियन",
+      "items": [
+        { "title": "सेक्शन 1", "content": "सेक्शन 1 के लिए सामग्री" },
+        { "title": "सेक्शन 2", "content": "सेक्शन 2 के लिए सामग्री" },
+        { "title": "सेक्शन 3", "content": "सेक्शन 3 के लिए सामग्री" },
+        { "title": "सेक्शन 4", "content": "सेक्शन 4 के लिए सामग्री" }
+      ]
+    },
+    "minimal": {
+      "title": "मिनिमल एकॉर्डियन",
+      "items": [
+        { "title": "सेक्शन 1", "content": "सेक्शन 1 के लिए सामग्री" },
+        { "title": "सेक्शन 2", "content": "सेक्शन 2 के लिए सामग्री" },
+        { "title": "सेक्शन 3", "content": "सेक्शन 3 के लिए सामग्री" }
+      ]
+    },
+    "alwaysOpen": {
+      "title": "हमेशा खुला एकॉर्डियन",
+      "items": [
+        { "title": "सेक्शन 1", "content": "सेक्शन 1 के लिए सामग्री" },
+        { "title": "सेक्शन 2", "content": "सेक्शन 2 के लिए सामग्री" }
+      ]
+    }
+  }
+}
\ No newline at end of file
diff --git a/messages/[hi]/contact.json b/messages/[hi]/contact.json
new file mode 100644
index 0000000..d68dbf6
--- /dev/null
+++ b/messages/[hi]/contact.json
@@ -0,0 +1,78 @@
+{
+  "header": {
+    "title": "संपर्क करें",
+    "description": "क्या आपके पास हमारी कंपोनेंट लाइब्रेरी के बारे में सवाल हैं? योगदान करना चाहते हैं या कोई बग रिपोर्ट करना चाहते हैं? हम आपसे सुनना पसंद करेंगे!"
+  },
+  "form": {
+    "title": "हमें संदेश भेजें",
+    "success": "आपके संदेश के लिए धन्यवाद! हम जल्द ही आपसे संपर्क करेंगे।",
+    "error": "माफ़ कीजिए, आपका संदेश भेजने में त्रुटि हुई। कृपया पुनः प्रयास करें।",
+    "sending": "भेजा जा रहा है...",
+    "send": "संदेश भेजें",
+    "fields": {
+      "name": {
+        "label": "पूरा नाम *",
+        "placeholder": "अपना पूरा नाम दर्ज करें"
+      },
+      "email": {
+        "label": "ईमेल पता *",
+        "placeholder": "your.email@example.com"
+      },
+      "subject": {
+        "label": "विषय *",
+        "placeholder": "एक विषय चुनें",
+        "options": {
+          "bugReport": "बग रिपोर्ट",
+          "featureRequest": "फीचर अनुरोध",
+          "documentation": "दस्तावेज़ीकरण",
+          "contribution": "योगदान",
+          "support": "सामान्य सहायता",
+          "other": "अन्य"
+        }
+      },
+      "message": {
+        "label": "संदेश *",
+        "placeholder": "हमें बताएं कि हम आपकी कैसे मदद कर सकते हैं..."
+      }
+    }
+  },
+  "errors": {
+    "nameRequired": "नाम आवश्यक है",
+    "emailRequired": "ईमेल आवश्यक है",
+    "emailInvalid": "कृपया एक मान्य ईमेल पता दर्ज करें",
+    "subjectRequired": "विषय आवश्यक है",
+    "messageRequired": "संदेश आवश्यक है",
+    "messageLength": "संदेश कम से कम 10 अक्षरों का होना चाहिए"
+  },
+  "info": {
+    "title": "संपर्क जानकारी",
+    "email": {
+      "title": "ईमेल"
+    },
+    "github": {
+      "title": "GitHub"
+    },
+    "linktree": {
+      "title": "Linktree",
+      "description": "हमारे सभी सोशल लिंक के लिए हमारा Linktree देखें:"
+    }
+  },
+  "social": {
+    "title": "हमें फॉलो करें"
+  },
+  "faq": {
+    "title": "अक्सर पूछे जाने वाले प्रश्न",
+    "q1": {
+      "title": "मैं लाइब्रेरी में कैसे योगदान कर सकता हूँ?",
+      "description": "हमारे CONTRIBUTING.md फ़ाइल में कंपोनेंट्स योगदान करने, बग रिपोर्ट करने या सुधार सुझाने के दिशा-निर्देश देखें।"
+    },
+    "q2": {
+      "title": "क्या यह लाइब्रेरी मुफ्त है?",
+      "description": "हाँ! यह कंपोनेंट लाइब्रेरी ओपन सोर्स है और व्यक्तिगत तथा व्यावसायिक परियोजनाओं में मुफ्त उपयोग के लिए उपलब्ध है।"
+    },
+    "q3": {
+      "title": "मैं बग कैसे रिपोर्ट करूँ?",
+      "description": "आप हमारे GitHub issues पेज के माध्यम से या ऊपर दिए गए संपर्क फ़ॉर्म में \"बग रिपोर्ट\" विषय चुनकर बग रिपोर्ट कर सकते हैं।"
+    }
+  }
+}
diff --git a/messages/[hi]/feedback.json b/messages/[hi]/feedback.json
new file mode 100644
index 0000000..8386f61
--- /dev/null
+++ b/messages/[hi]/feedback.json
@@ -0,0 +1,86 @@
+{
+  "header": {
+    "title": "हम आपकी प्रतिक्रिया की सराहना करते हैं",
+    "description": "MyLibrary को सुधारने में हमारी मदद करें, अपनी राय साझा करें, बग रिपोर्ट करें, या नई सुविधाओं का सुझाव दें।"
+  },
+  "alert": {
+    "success": {
+      "title": "धन्यवाद!",
+      "message": "आपकी प्रतिक्रिया सफलतापूर्वक सबमिट कर दी गई है। हम इसे जल्द ही समीक्षा करेंगे।"
+    },
+    "error": {
+      "title": "त्रुटि",
+      "message": "कृपया सभी आवश्यक फ़ील्ड भरें फिर सबमिट करें।"
+    }
+  },
+  "form": {
+    "title": "अपनी प्रतिक्रिया साझा करें",
+    "categoryLabel": "प्रतिक्रिया श्रेणी *",
+    "ratingLabel": "कुल मिलाकर रेटिंग",
+    "emailLabel": "ईमेल (वैकल्पिक)",
+    "emailPlaceholder": "your.email@example.com",
+    "emailHelper": "हम इसे केवल आपकी प्रतिक्रिया पर फॉलो-अप करने के लिए उपयोग करेंगे",
+    "feedbackLabel": "आपकी प्रतिक्रिया *",
+    "feedbackPlaceholder": "हमारे साथ अपना अनुभव साझा करें, बग रिपोर्ट करें, या सुधार के सुझाव दें...",
+    "submit": "प्रतिक्रिया सबमिट करें",
+    "clear": "फॉर्म साफ़ करें"
+  },
+  "category": {
+    "bug": "बग रिपोर्ट",
+    "feature": "फीचर अनुरोध",
+    "improvement": "सुधार सुझाव",
+    "general": "सामान्य प्रतिक्रिया"
+  },
+  "rating": {
+    "5": "⭐⭐⭐⭐⭐ उत्कृष्ट",
+    "4": "⭐⭐⭐⭐ अच्छा",
+    "3": "⭐⭐⭐ औसत",
+    "2": "⭐⭐ गरीब",
+    "1": "⭐ बहुत गरीब"
+  },
+  "sidebar": {
+    "stats": {
+      "title": "समुदाय आँकड़े",
+      "totalComponents": "कुल घटक",
+      "githubStars": "GitHub सितारे",
+      "contributors": "योगदानकर्ता",
+      "issuesResolved": "सुलझाए गए मुद्दे"
+    },
+    "progress": {
+      "title": "विकास प्रगति",
+      "buttons": "बटन घटक",
+      "cards": "कार्ड घटक",
+      "forms": "फॉर्म घटक",
+      "navigation": "नेविगेशन"
+    },
+    "contact": {
+      "title": "हमसे संपर्क करने के अन्य तरीके",
+      "email": "📧 ईमेल समर्थन",
+      "discord": "💬 डिस्कॉर्ड समुदाय",
+      "github": "🐙 GitHub मुद्दे"
+    }
+  },
+  "recent": {
+    "title": "हाल की सामुदायिक प्रतिक्रिया",
+    "items": [
+      {
+        "name": "एलेक्स",
+        "time": "2 दिन पहले",
+        "category": "फीचर",
+        "feedback": "नई बटन वेरिएंट्स बहुत पसंद आईं! क्या हम बटन के लिए लोडिंग स्टेट पा सकते हैं?"
+      },
+      {
+        "name": "सारा",
+        "time": "1 सप्ताह पहले",
+        "category": "बग",
+        "feedback": "मोबाइल डिवाइस पर कार्ड घटक की स्पेसिंग समस्या। नवीनतम अपडेट में ठीक किया गया!"
+      },
+      {
+        "name": "माइक",
+        "time": "2 सप्ताह पहले",
+        "category": "सामान्य",
+        "feedback": "उत्तम दस्तावेज़ीकरण और उदाहरण। इंटीग्रेशन बहुत आसान बनाता है!"
+      }
+    ]
+  }
+}
diff --git a/messages/[hi]/homepage.json b/messages/[hi]/homepage.json
new file mode 100644
index 0000000..8e245f4
--- /dev/null
+++ b/messages/[hi]/homepage.json
@@ -0,0 +1,47 @@
+{
+  "hero_title": "आसानी से सुंदर और प्रभावी React ऐप्स बनाएं",
+  "hero_description": "हमारी कंपोनेंट लाइब्रेरी डेवलपर्स को अनुकूलन योग्य और सुलभ UI तत्व प्रदान करती है, जो React इकोसिस्टम के लिए अनुकूलित हैं।",
+  "explore_components": "कंपोनेंट्स देखें",
+  "try_playground": "🎮 प्लेग्राउंड आज़माएँ",
+  "beautiful_components": "सुंदर कंपोनेंट्स",
+  "ready_to_use": "आपके प्रोजेक्ट्स में उपयोग के लिए तैयार",
+  "features_title": "React के लिए अनुकूलित",
+  "features_description": "हल्के और तेज़ कंपोनेंट्स, विशेष रूप से React एप्लिकेशन के लिए डिज़ाइन किए गए।",
+  "themes_title": "कस्टम थीम्स",
+  "themes_description": "हल्के, डार्क और कस्टम थीम्स के साथ आसान अनुकूलन का समर्थन करता है।",
+  "apis_title": "लचीले APIs",
+  "apis_description": "सरल और सहज प्रॉप्स जो आपके कंपोनेंट्स पर पूर्ण नियंत्रण प्रदान करते हैं।",
+  "documentation_title": "अच्छी तरह से प्रलेखित",
+  "documentation_description": "पूर्ण और स्पष्ट दस्तावेज़ जो आपके विकास अनुभव को आसान बनाता है।",
+  "featured_components": "विशेष कंपोनेंट्स",
+  "simple_card_title": "सरल कार्ड",
+  "simple_card_description": "एक स्वच्छ, न्यूनतम कार्ड जिसमें एक्शन सपोर्ट है।",
+  "feature_card_title": "फ़ीचर कार्ड",
+  "feature_card_description": "अपनी ऐप की विशेषताओं को स्टाइल के साथ उजागर करें।",
+  "pricing_card_plan": "प्रो",
+  "pricing_card_price": "$9/माह",
+  "pricing_card_features": [
+    "10 प्रोजेक्ट्स",
+    "प्राथमिकता समर्थन",
+    "असीमित उपयोगकर्ता"
+  ],
+  "data_card_title": "सक्रिय प्रोजेक्ट्स",
+  "data_card_icon": "📂",
+  "data_card_trend": "8",
+  "getting_started": "शुरुआत करें",
+  "getting_started_step_one_title": "पैकेज जोड़ें",
+  "getting_started_step_one_description": "आसान एकीकरण के लिए npm या yarn से इंस्टॉल करें।",
+  "getting_started_step_one_code": "npm install my-components-library",
+  "getting_started_step_2_title": "कंपोनेंट्स इम्पोर्ट करें",
+  "getting_started_step_2_description": "लाइब्रेरी से केवल वही इम्पोर्ट करें जिसकी आपको ज़रूरत है ताकि बंडल हल्के रहें।",
+  "getting_started_step_two_code": "import '{ Button, Card }' from 'my-components-library';",
+  "getting_started_step_3_title": "कंपोनेंट्स का उपयोग करें",
+  "getting_started_step_3_description": "आसान प्रॉप्स के साथ सीधे कंपोनेंट्स लागू करें।",
+  "getting_started_step_3_code": "'<Button variant='primary'>मुझे क्लिक करें</Button>'",
+  "cta_title": "क्या आप शानदार ऐप्स बनाने के लिए तैयार हैं?",
+  "cta_button": "अभी शुरू करें",
+  "theme": {
+    "toggle_light": "लाइट मोड पर स्विच करें",
+    "toggle_dark": "डार्क मोड पर स्विच करें"
+  }
+}
diff --git a/messages/[hi]/playground.json b/messages/[hi]/playground.json
new file mode 100644
index 0000000..35282ca
--- /dev/null
+++ b/messages/[hi]/playground.json
@@ -0,0 +1,219 @@
+{
+  "title": "एडवांस्ड कंपोनेंट प्लेग्राउंड",
+  "subtitle": "रियल-टाइम में कंपोनेंट्स को कस्टमाइज़ करें और प्रोडक्शन-रेडी कोड एक्सपोर्ट करें!",
+  
+  "controls": {
+    "componentType": "कंपोनेंट प्रकार",
+    "variant": "वेरिएंट",
+    "previewMode": "प्रीव्यू मोड",
+    "myFavorites": "मेरे पसंदीदा ({count})",
+    "customizationControls": "कस्टमाइज़ेशन नियंत्रण",
+    "reset": "रीसेट",
+    "random": "रैंडम",
+    "showFavorites": "पसंदीदा दिखाएँ",
+    "hideFavorites": "पसंदीदा छिपाएँ"
+  },
+  
+  "componentTypes": {
+    "buttons": "बटन",
+    "cards": "कार्ड",
+    "inputs": "इनपुट्स"
+  },
+  
+  "buttonVariants": {
+    "primary": "प्राइमरी बटन",
+    "secondary": "सेकेंडरी बटन",
+    "danger": "खतरा बटन",
+    "success": "सफलता बटन",
+    "ghost": "घोस्ट बटन",
+    "outline": "आउटलाइन बटन",
+    "rainbow": "रेनबो बटन"
+  },
+  
+  "cardVariants": {
+    "simple": "साधारण कार्ड",
+    "feature": "फ़ीचर कार्ड",
+    "pricing": "प्राइसिंग कार्ड",
+    "user": "यूज़र कार्ड",
+    "data": "डेटा कार्ड"
+  },
+  
+  "inputVariants": {
+    "text": "टेक्स्ट इनपुट",
+    "select": "सिलेक्ट ड्रॉपडाउन",
+    "checkbox": "चेकबॉक्स"
+  },
+  
+  "buttonControls": {
+    "buttonText": "बटन टेक्स्ट",
+    "buttonSize": "बटन का आकार",
+    "sizes": {
+      "small": "छोटा",
+      "medium": "मध्यम",
+      "large": "बड़ा"
+    },
+    "disabled": "निष्क्रिय",
+    "loading": "लोड हो रहा है",
+    "loadingText": "⏳ लोड हो रहा है..."
+  },
+  
+  "cardControls": {
+    "cardTitle": "कार्ड शीर्षक",
+    "cardDescription": "कार्ड विवरण",
+    "cardTitlePlaceholder": "कार्ड शीर्षक दर्ज करें",
+    "cardDescriptionPlaceholder": "कार्ड विवरण दर्ज करें"
+  },
+  
+  "pricingControls": {
+    "planName": "प्लान नाम",
+    "price": "कीमत",
+    "features": "फ़ीचर्स (कॉमा से अलग)",
+    "planPlaceholder": "उदाहरण: प्रो",
+    "pricePlaceholder": "उदाहरण: ₹799/माह",
+    "featuresPlaceholder": "फ़ीचर 1, फ़ीचर 2, फ़ीचर 3"
+  },
+  
+  "userCardControls": {
+    "userName": "उपयोगकर्ता नाम",
+    "email": "ईमेल",
+    "role": "भूमिका",
+    "avatarUrl": "अवतार URL",
+    "userNamePlaceholder": "जॉन डो",
+    "emailPlaceholder": "john@example.com",
+    "rolePlaceholder": "सॉफ्टवेयर इंजीनियर",
+    "avatarPlaceholder": "https://i.pravatar.cc/150?img=1"
+  },
+  
+  "dataCardControls": {
+    "dataTitle": "डेटा शीर्षक",
+    "value": "मान",
+    "icon": "आइकन (इमोजी)",
+    "trend": "रुझान (%)",
+    "dataTitlePlaceholder": "सक्रिय प्रोजेक्ट्स",
+    "valuePlaceholder": "27",
+    "iconPlaceholder": "📂",
+    "trendPlaceholder": "8"
+  },
+  
+  "inputControls": {
+    "label": "लेबल",
+    "placeholder": "प्लेसहोल्डर",
+    "errorMessage": "त्रुटि संदेश (वैकल्पिक)",
+    "required": "आवश्यक",
+    "labelPlaceholder": "इनपुट लेबल दर्ज करें",
+    "placeholderPlaceholder": "प्लेसहोल्डर टेक्स्ट दर्ज करें",
+    "errorPlaceholder": "त्रुटि संदेश दर्ज करें"
+  },
+  
+  "codeSection": {
+    "generatedCode": "जनरेट किया गया कोड",
+    "show": "दिखाएँ",
+    "hide": "छिपाएँ",
+    "copyCode": "कोड कॉपी करें",
+    "copied": "✅ कॉपी हो गया!",
+    "failedToCopy": "❌ कॉपी असफल",
+    "language": "React JSX"
+  },
+  
+  "preview": {
+    "livePreview": "लाइव प्रीव्यू",
+    "componentInfo": "कंपोनेंट जानकारी",
+    "type": "प्रकार",
+    "variant": "वेरिएंट",
+    "interactive": "इंटरैक्टिव",
+    "clickToTest": "हाँ (क्लिक करें टेस्ट करने के लिए)",
+    "displayOnly": "केवल प्रदर्शन",
+    "light": "लाइट",
+    "dark": "डार्क"
+  },
+  
+  "favorites": {
+    "title": "मेरे पसंदीदा कंपोनेंट्स ({count})",
+    "clearAll": "सभी साफ़ करें",
+    "noFavorites": "अभी तक कोई पसंदीदा कंपोनेंट नहीं है",
+    "noFavoritesDesc": "किसी भी कंपोनेंट पर हार्ट आइकन क्लिक करके उसे पसंदीदा में जोड़ें",
+    "addFavorite": "पसंदीदा जोड़ें",
+    "removeFavorite": "पसंदीदा हटाएँ",
+    "addedDate": "{date} को जोड़ा गया",
+    "componentSuffix": "कंपोनेंट",
+    "addToFavorites": "पसंदीदा में जोड़ें",
+    "removeFromFavorites": "पसंदीदा से हटाएँ"
+  },
+  
+  "showcase": {
+    "allVariants": "सभी {type} वेरिएंट्स",
+    "clickToCustomize": "कस्टमाइज़ करने के लिए क्लिक करें",
+    "preview": "पूर्वावलोकन",
+    "sample": "नमूना"
+  },
+  
+  "stats": {
+    "title": "प्लेग्राउंड आँकड़े",
+    "buttonTypes": "बटन प्रकार",
+    "cardTypes": "कार्ड प्रकार",
+    "inputTypes": "इनपुट प्रकार",
+    "favorites": "पसंदीदा"
+  },
+  
+  "actions": {
+    "randomize": "रैंडम बनाएं",
+    "reset": "रीसेट करें",
+    "copyCode": "कोड कॉपी करें"
+  },
+  
+  "defaultValues": {
+    "buttonText": "क्लिक करें",
+    "cardTitle": "नमूना कार्ड",
+    "cardDescription": "यह एक नमूना कार्ड विवरण है",
+    "inputLabel": "नमूना इनपुट",
+    "inputPlaceholder": "यहाँ टेक्स्ट दर्ज करें...",
+    "checkboxDescription": "इस विकल्प को चुनें",
+    "selectOptions": {
+      "option1": "विकल्प 1",
+      "option2": "विकल्प 2",
+      "option3": "विकल्प 3"
+    }
+  },
+  
+  "randomValues": {
+    "buttonTexts": ["शुरू करें", "और जानें", "अभी साइन अप करें", "डाउनलोड करें", "सब्सक्राइब करें", "हमसे जुड़ें", "मुफ़्त आज़माएँ", "संपर्क करें"],
+    "cardTitles": ["शानदार फ़ीचर", "प्रीमियम सेवा", "नया उत्पाद", "विशेष ऑफ़र", "नवीनतम अपडेट"],
+    "cardDescriptions": [
+      "अविश्वसनीय सुविधाएँ खोजें जो आपके कार्यप्रवाह को बदल देंगी",
+      "हमारी पेशेवर सेवाओं के साथ प्रीमियम गुणवत्ता का अनुभव करें",
+      "नवीनतम तकनीक के साथ हमारा नया उत्पाद पेश किया जा रहा है",
+      "सीमित समय की पेशकश आपके लिए विशेष लाभों के साथ",
+      "नवीनतम सुधारों और सुविधाओं से अपडेट रहें"
+    ],
+    "userNames": ["ऐलिस जॉनसन", "बॉब स्मिथ", "कैरोल डेविस", "डेविड विल्सन", "एम्मा ब्राउन"],
+    "userRoles": ["फ्रंटएंड डेवलपर", "बैकएंड इंजीनियर", "UI/UX डिज़ाइनर", "प्रोडक्ट मैनेजर", "DevOps इंजीनियर"],
+    "dataTitles": ["कुल उपयोगकर्ता", "राजस्व", "सक्रिय सत्र", "कन्वर्ज़न दर", "विकास दर"],
+    "dataValues": ["1,234", "$45.6K", "89%", "12.5%", "+23%"],
+    "dataIcons": ["👥", "💰", "📊", "📈", "🚀"]
+  },
+  
+  "pricing": {
+    "defaultPlan": "प्रो",
+    "defaultPrice": "₹799/माह",
+    "defaultFeatures": ["10 प्रोजेक्ट्स", "प्राथमिकता समर्थन", "अनलिमिटेड यूज़र्स"]
+  },
+  
+  "userData": {
+    "defaultName": "जॉन डो",
+    "defaultEmail": "john@example.com",
+    "defaultRole": "सॉफ्टवेयर इंजीनियर"
+  },
+  
+  "dataCard": {
+    "defaultTitle": "सक्रिय प्रोजेक्ट्स",
+    "defaultValue": "27",
+    "defaultIcon": "📂",
+    "defaultTrend": 8
+  },
+  
+  "messages": {
+    "codeCopied": "कोड क्लिपबोर्ड पर कॉपी हो गया!",
+    "copyFailed": "कोड कॉपी करने में विफल।",
+    "clickAlert": "{component} क्लिक किया गया!"
+  }
+}
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index 5a9bedf..74be77d 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -6,7 +6,8 @@
     "components": "Components",
     "playground": "🎮 Playground",
     "analytics": "Analytics",
-    "feedback": "Feedback"
+    "feedback": "Feedback",
+    "game":"🎮 Game"
   },
   "theme": {
     "toggle_light": "Switch to Light",
diff --git a/public/locales/es/common.json b/public/locales/es/common.json
index 7785947..c418e11 100644
--- a/public/locales/es/common.json
+++ b/public/locales/es/common.json
@@ -6,7 +6,8 @@
     "components": "Componentes",
     "playground": "🎮 Zona de juegos",
     "analytics": "Analíticas",
-    "feedback": "Retroalimentación"
+    "feedback": "Retroalimentación",
+    "game": "🎮 Juego"
   },
   "theme": {
     "toggle_light": "Cambiar a modo claro",
diff --git a/public/locales/fr/common.json b/public/locales/fr/common.json
index f9f3b57..cacb423 100644
--- a/public/locales/fr/common.json
+++ b/public/locales/fr/common.json
@@ -6,7 +6,8 @@
     "components": "Composants",
     "playground": "🎮 Bac à sable",
     "analytics": "Analytique",
-    "feedback": "Retour d'information"
+    "feedback": "Retour d'information",
+    "game": "🎮 Jeu"
   },
   "theme": {
     "toggle_light": "Passer en mode clair",
diff --git a/src/app/about/page.jsx b/src/app/about/page.jsx
index 7f862cb..f0968db 100644
--- a/src/app/about/page.jsx
+++ b/src/app/about/page.jsx
@@ -1,9 +1,11 @@
 'use client';
 import { useState, useEffect } from 'react';
+import { useTranslations } from 'next-intl';
 import { Code, Users, Heart, Github, Star, Target, Zap, Shield, Palette, Rocket, ExternalLink } from 'lucide-react';
 import FetchContributors from '../fetchData/fetchContributers';
 
 export default function AboutPage() {
+  const t = useTranslations('about');
   const [contributors, setContributors] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
@@ -16,7 +18,7 @@ export default function AboutPage() {
         setContributors(data);
         setError(null);
       } catch (err) {
-        setError('Failed to load contributors');
+        setError(t('contributorsError'));
         console.error('Error fetching contributors:', err);
       } finally {
         setLoading(false);
@@ -24,30 +26,28 @@ export default function AboutPage() {
     };
 
     loadContributors();
-  }, []);
+  }, [t]);
 
   return (
     <div className="max-w-6xl mx-auto px-4 py-12 space-y-16">
       {/* Overview Section */}
       <section className="text-center">
-        <h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-6">About MyLibrary</h1>
+        <h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-6">{t('title')}</h1>
         <p className="text-lg text-gray-600 dark:text-gray-300 max-w-3xl mx-auto mb-8">
-          MyLibrary is a comprehensive component library built with Next.js and Tailwind CSS,
-          designed to provide developers with reusable, accessible, and beautifully designed UI components.
-          Our goal is to accelerate development workflows and maintain design consistency across projects.
+          {t('description')}
         </p>
         <div className="flex justify-center gap-6 text-sm text-gray-500">
           <div className="flex items-center gap-2">
             <Star className="w-4 h-4" />
-            <span>20+ Components</span>
+            <span>{t('overview.components')}</span>
           </div>
           <div className="flex items-center gap-2">
             <Shield className="w-4 h-4" />
-            <span>TypeScript Ready</span>
+            <span>{t('overview.typescript')}</span>
           </div>
           <div className="flex items-center gap-2">
             <Zap className="w-4 h-4" />
-            <span>Performance Optimized</span>
+            <span>{t('overview.performance')}</span>
           </div>
         </div>
       </section>
@@ -57,78 +57,69 @@ export default function AboutPage() {
         <div className="bg-blue-50 p-8 rounded-2xl">
           <div className="flex items-center mb-4">
             <Target className="w-6 h-6 text-blue-600 mr-3" />
-            <h2 className="text-2xl font-bold text-gray-900 dark:text-white">Our Mission</h2>
+            <h2 className="text-2xl font-bold text-gray-900 dark:text-white">{t('mission.title')}</h2>
           </div>
           <p className="text-gray-700">
-            To empower developers with a robust, flexible, and beautiful component library that
-            reduces development time while maintaining high-quality user experiences. We believe
-            in making web development more efficient and enjoyable.
+            {t('mission.description')}
           </p>
         </div>
 
         <div className="bg-green-50 p-8 rounded-2xl">
           <div className="flex items-center mb-4">
             <Rocket className="w-6 h-6 text-green-600 mr-3" />
-            <h2 className="text-2xl font-bold text-gray-900 dark:text-white">Our Vision</h2>
+            <h2 className="text-2xl font-bold text-gray-900 dark:text-white">{t('vision.title')}</h2>
           </div>
           <p className="text-gray-700">
-            To become the go-to component library for React developers, fostering a community
-            where innovation meets practicality. We envision a world where building beautiful
-            UIs is accessible to developers of all skill levels.
+            {t('vision.description')}
           </p>
         </div>
       </section>
 
       {/* Key Features */}
       <section>
-        <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-8 text-center">Why Choose MyLibrary?</h2>
+        <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-8 text-center">{t('features.title')}</h2>
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
           <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
             <div className="bg-purple-100 w-12 h-12 rounded-lg flex items-center justify-center mb-4">
               <Palette className="w-6 h-6 text-purple-600" />
             </div>
-            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">Design System</h3>
-            <p className="text-gray-600 dark:text-gray-300">Consistent design tokens and theming system for cohesive user experiences.</p>
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">{t('features.designSystem.title')}</h3>
+            <p className="text-gray-600 dark:text-gray-300">{t('features.designSystem.description')}</p>
           </div>
-
           <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
             <div className="bg-blue-100 w-12 h-12 rounded-lg flex items-center justify-center mb-4">
               <Shield className="w-6 h-6 text-blue-600" />
             </div>
-            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">Accessibility First</h3>
-            <p className="text-gray-600 dark:text-gray-300">Built with WCAG 2.1 guidelines and keyboard navigation support.</p>
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">{t('features.accessibility.title')}</h3>
+            <p className="text-gray-600 dark:text-gray-300">{t('features.accessibility.description')}</p>
           </div>
-
           <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
             <div className="bg-green-100 w-12 h-12 rounded-lg flex items-center justify-center mb-4">
               <Zap className="w-6 h-6 text-green-600" />
             </div>
-            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">Performance</h3>
-            <p className="text-gray-600 dark:text-gray-300">Optimized bundle size with tree-shaking and minimal dependencies.</p>
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">{t('features.performance.title')}</h3>
+            <p className="text-gray-600 dark:text-gray-300">{t('features.performance.description')}</p>
           </div>
-
           <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
             <div className="bg-orange-100 w-12 h-12 rounded-lg flex items-center justify-center mb-4">
               <Code className="w-6 h-6 text-orange-600" />
             </div>
-            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">Developer Experience</h3>
-            <p className="text-gray-600 dark:text-gray-300">TypeScript support, comprehensive documentation, and excellent IDE integration.</p>
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">{t('features.devExperience.title')}</h3>
+            <p className="text-gray-600 dark:text-gray-300">{t('features.devExperience.description')}</p>
           </div>
-
           <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
             <div className="bg-pink-100 w-12 h-12 rounded-lg flex items-center justify-center mb-4">
               <Heart className="w-6 h-6 text-pink-600" />
             </div>
-            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">Community Driven</h3>
-            <p className="text-gray-600 dark:text-gray-300">Open source project with active community contributions and feedback.</p>
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">{t('features.community.title')}</h3>
+            <p className="text-gray-600 dark:text-gray-300">{t('features.community.description')}</p>
           </div>
-
           <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
             <div className="bg-indigo-100 w-12 h-12 rounded-lg flex items-center justify-center mb-4">
               <Users className="w-6 h-6 text-indigo-600" />
             </div>
-            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">Flexible</h3>
-            <p className="text-gray-600 dark:text-gray-300">Customizable components that adapt to your design requirements.</p>
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">{t('features.flexible.title')}</h3>
+            <p className="text-gray-600 dark:text-gray-300">{t('features.flexible.description')}</p>
           </div>
         </div>
       </section>
@@ -137,40 +128,36 @@ export default function AboutPage() {
       <section className="bg-gray-50 p-8 rounded-2xl">
         <div className="flex items-center justify-center mb-8">
           <Code className="w-8 h-8 text-blue-600 mr-3" />
-          <h2 className="text-3xl font-bold text-gray-900 dark:text-white">Tech Stack</h2>
+          <h2 className="text-3xl font-bold text-gray-900 dark:text-white">{t('techStack.title')}</h2>
         </div>
-
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
           <div className="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-sm text-center">
             <div className="dark:bg-white w-14 h-14 rounded-full mx-auto mb-4 flex items-center justify-center">
               <img src="/logos/nextjs.svg" alt="Next.js" className="w-14 h-14" />
             </div>
-            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">Next.js 14</h3>
-            <p className="text-sm text-gray-600 dark:text-gray-400">React framework with App Router</p>
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">{t('techStack.nextjs.title')}</h3>
+            <p className="text-sm text-gray-600 dark:text-gray-400">{t('techStack.nextjs.description')}</p>
           </div>
-
           <div className="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-sm text-center">
             <div className="w-14 h-14 mx-auto mb-4 flex items-center justify-center">
               <img src="/logos/react.svg" alt="React" className="w-14 h-14" />
             </div>
-            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">React 18</h3>
-            <p className="text-sm text-gray-600 dark:text-gray-400">Component-based architecture</p>
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">{t('techStack.react.title')}</h3>
+            <p className="text-sm text-gray-600 dark:text-gray-400">{t('techStack.react.description')}</p>
           </div>
-
           <div className="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-sm text-center">
             <div className=" w-14 h-14 rounded-full mx-auto mb-4 flex items-center justify-center">
               <img src="/logos/tailwind.svg" alt="Tailwind CSS" className="w-14 h-14" />
             </div>
-            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">Tailwind CSS</h3>
-            <p className="text-sm text-gray-600 dark:text-gray-400">Utility-first styling</p>
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">{t('techStack.tailwind.title')}</h3>
+            <p className="text-sm text-gray-600 dark:text-gray-400">{t('techStack.tailwind.description')}</p>
           </div>
-
           <div className="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-sm text-center">
             <div className=" w-14 h-14 rounded-full mx-auto mb-4 flex items-center justify-center">
               <img src="/logos/typescript.svg" alt="TypeScript" className="w-14 h-14" />
             </div>
-            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">TypeScript</h3>
-            <p className="text-sm text-gray-600 dark:text-gray-400">Type-safe development</p>
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">{t('techStack.typescript.title')}</h3>
+            <p className="text-sm text-gray-600 dark:text-gray-400">{t('techStack.typescript.description')}</p>
           </div>
         </div>
 
@@ -228,78 +215,62 @@ export default function AboutPage() {
   </div>
 </section>
       </section>
-{/* 🌟 Getting Started Section */}
-<section className="w-full overflow-x-hidden bg-gradient-to-b from-[#001E3C] to-[#012A63] text-white py-16 px-4 sm:px-8 md:px-12 rounded-3xl shadow-xl mt-12">
-  <div className="max-w-6xl mx-auto">
-    <h2 className="text-4xl font-extrabold mb-10 text-center tracking-wide">
-      🚀 Getting Started
-    </h2>
-
-    {/* Steps Grid */}
-    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8">
-      {/* Step 1 */}
-      <div className="bg-[#023E8A]/50 backdrop-blur-md rounded-2xl p-8 text-center shadow-lg hover:shadow-blue-600/40 transition-all duration-300 transform hover:-translate-y-2">
-        <div className="bg-[#0077B6] text-white w-14 h-14 rounded-full mx-auto mb-5 flex items-center justify-center text-xl font-bold shadow-md">
-          1
-        </div>
-        <h3 className="text-xl font-semibold mb-3">Installation</h3>
-        <p className="text-gray-200 text-sm leading-relaxed">
-          Install the library via{" "}
-          <code className="bg-black/40 px-2 py-0.5 rounded">npm</code> or copy
-          ready-to-use components directly.
-        </p>
-      </div>
-
-      {/* Step 2 */}
-      <div className="bg-[#023E8A]/50 backdrop-blur-md rounded-2xl p-8 text-center shadow-lg hover:shadow-blue-600/40 transition-all duration-300 transform hover:-translate-y-2">
-        <div className="bg-[#0077B6] text-white w-14 h-14 rounded-full mx-auto mb-5 flex items-center justify-center text-xl font-bold shadow-md">
-          2
-        </div>
-        <h3 className="text-xl font-semibold mb-3">Import</h3>
-        <p className="text-gray-200 text-sm leading-relaxed">
-          Import the components you need directly into your React project and
-          start building faster.
-        </p>
-      </div>
-
-      {/* Step 3 */}
-      <div className="bg-[#023E8A]/50 backdrop-blur-md rounded-2xl p-8 text-center shadow-lg hover:shadow-blue-600/40 transition-all duration-300 transform hover:-translate-y-2">
-        <div className="bg-[#0077B6] text-white w-14 h-14 rounded-full mx-auto mb-5 flex items-center justify-center text-xl font-bold shadow-md">
-          3
+      {/* 🌟 Getting Started Section */}
+      <section className="w-full overflow-x-hidden bg-gradient-to-b from-[#001E3C] to-[#012A63] text-white py-16 px-4 sm:px-8 md:px-12 rounded-3xl shadow-xl mt-12">
+        <div className="max-w-6xl mx-auto">
+          <h2 className="text-4xl font-extrabold mb-10 text-center tracking-wide">
+            {t('gettingStarted.title')}
+          </h2>
+          {/* Steps Grid */}
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8">
+            <div className="bg-[#023E8A]/50 backdrop-blur-md rounded-2xl p-8 text-center shadow-lg hover:shadow-blue-600/40 transition-all duration-300 transform hover:-translate-y-2">
+              <div className="bg-[#0077B6] text-white w-14 h-14 rounded-full mx-auto mb-5 flex items-center justify-center text-xl font-bold shadow-md">
+                1
+              </div>
+              <h3 className="text-xl font-semibold mb-3">{t('gettingStarted.installation.title')}</h3>
+              <p className="text-gray-200 text-sm leading-relaxed">
+                {t('gettingStarted.installation.description')}
+              </p>
+            </div>
+            <div className="bg-[#023E8A]/50 backdrop-blur-md rounded-2xl p-8 text-center shadow-lg hover:shadow-blue-600/40 transition-all duration-300 transform hover:-translate-y-2">
+              <div className="bg-[#0077B6] text-white w-14 h-14 rounded-full mx-auto mb-5 flex items-center justify-center text-xl font-bold shadow-md">
+                2
+              </div>
+              <h3 className="text-xl font-semibold mb-3">{t('gettingStarted.import.title')}</h3>
+              <p className="text-gray-200 text-sm leading-relaxed">
+                {t('gettingStarted.import.description')}
+              </p>
+            </div>
+            <div className="bg-[#023E8A]/50 backdrop-blur-md rounded-2xl p-8 text-center shadow-lg hover:shadow-blue-600/40 transition-all duration-300 transform hover:-translate-y-2">
+              <div className="bg-[#0077B6] text-white w-14 h-14 rounded-full mx-auto mb-5 flex items-center justify-center text-xl font-bold shadow-md">
+                3
+              </div>
+              <h3 className="text-xl font-semibold mb-3">{t('gettingStarted.customize.title')}</h3>
+              <p className="text-gray-200 text-sm leading-relaxed">
+                {t('gettingStarted.customize.description')}
+              </p>
+            </div>
+          </div>
+          {/* CTA Button */}
+          <div className="text-center mt-12">
+            <a
+              href="/components"
+              className="inline-block bg-[#0077B6] text-white px-8 py-3 rounded-xl font-medium hover:bg-[#0096C7] hover:shadow-lg hover:shadow-blue-500/30 transition-all duration-300"
+            >
+              {t('gettingStarted.cta')}
+            </a>
+          </div>
         </div>
-        <h3 className="text-xl font-semibold mb-3">Customize</h3>
-        <p className="text-gray-200 text-sm leading-relaxed">
-          Tweak the design, colors, and behavior easily to match your own design
-          system.
-        </p>
-      </div>
-    </div>
-
-    {/* CTA Button */}
-    <div className="text-center mt-12">
-      <a
-        href="/components"
-        className="inline-block bg-[#0077B6] text-white px-8 py-3 rounded-xl font-medium hover:bg-[#0096C7] hover:shadow-lg hover:shadow-blue-500/30 transition-all duration-300"
-      >
-        View Components
-      </a>
-    </div>
-  </div>
-</section>
-
-
-     
-
+      </section>
       {/* Contribution Section */}
       <section className="grid grid-cols-1 md:grid-cols-2 gap-8">
         <div>
           <div className="flex items-center mb-6">
             <Github className="w-8 h-8 text-blue-600 mr-3" />
-            <h2 className="text-3xl font-bold text-gray-900 dark:text-white">Contributing</h2>
+            <h2 className="text-3xl font-bold text-gray-900 dark:text-white">{t('contributing.title')}</h2>
           </div>
           <p className="text-gray-600 dark:text-gray-300 mb-6">
-            We welcome contributions from the community! Whether you're fixing bugs, adding new components,
-            or improving documentation, your help makes MyLibrary better for everyone.
+            {t('contributing.description')}
           </p>
           <div className="space-y-4">
             <div className="flex items-start gap-3">
@@ -307,8 +278,8 @@ export default function AboutPage() {
                 <div className="w-2 h-2 bg-green-500 rounded-full"></div>
               </div>
               <div>
-                <h3 className="font-medium text-gray-900">Submit Issues</h3>
-                <p className="text-sm text-gray-600 dark:text-gray-400">Report bugs or request features on GitHub</p>
+                <h3 className="font-medium text-gray-900">{t('contributing.submitIssues.title')}</h3>
+                <p className="text-sm text-gray-600 dark:text-gray-400">{t('contributing.submitIssues.description')}</p>
               </div>
             </div>
             <div className="flex items-start gap-3">
@@ -316,8 +287,8 @@ export default function AboutPage() {
                 <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
               </div>
               <div>
-                <h3 className="font-medium text-gray-900">Create Pull Requests</h3>
-                <p className="text-sm text-gray-600 dark:text-gray-400">Contribute code improvements and new features</p>
+                <h3 className="font-medium text-gray-900">{t('contributing.pullRequests.title')}</h3>
+                <p className="text-sm text-gray-600 dark:text-gray-400">{t('contributing.pullRequests.description')}</p>
               </div>
             </div>
             <div className="flex items-start gap-3">
@@ -325,61 +296,57 @@ export default function AboutPage() {
                 <div className="w-2 h-2 bg-purple-500 rounded-full"></div>
               </div>
               <div>
-                <h3 className="font-medium text-gray-900">Improve Documentation</h3>
-                <p className="text-sm text-gray-600 dark:text-gray-400">Help make our docs clearer and more comprehensive</p>
+                <h3 className="font-medium text-gray-900">{t('contributing.documentation.title')}</h3>
+                <p className="text-sm text-gray-600 dark:text-gray-400">{t('contributing.documentation.description')}</p>
               </div>
             </div>
           </div>
         </div>
-
         <div>
           <div className="flex items-center mb-6">
             <Heart className="w-8 h-8 text-red-500 mr-3" />
-            <h2 className="text-3xl font-bold text-gray-900 dark:text-white">Community</h2>
+            <h2 className="text-3xl font-bold text-gray-900 dark:text-white">{t('community.title')}</h2>
           </div>
           <div className="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700">
             <p className="text-gray-600 dark:text-gray-300 mb-6">
-              Join our growing community of developers who are building amazing user interfaces with MyLibrary.
+              {t('community.description')}
             </p>
             <div className="space-y-4">
               <div className="flex items-center justify-between">
-                <span className="text-gray-700 dark:text-gray-300">GitHub Stars</span>
+                <span className="text-gray-700 dark:text-gray-300">{t('community.githubStars')}</span>
                 <span className="bg-yellow-100 dark:bg-yellow-900/50 text-yellow-800 dark:text-yellow-200 px-2 py-1 rounded text-sm font-medium">1.2k+</span>
               </div>
               <div className="flex items-center justify-between">
-                <span className="text-gray-700 dark:text-gray-300">Contributors</span>
+                <span className="text-gray-700 dark:text-gray-300">{t('community.contributors')}</span>
                 <span className="bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-200 px-2 py-1 rounded text-sm font-medium">25+</span>
               </div>
               <div className="flex items-center justify-between">
-                <span className="text-gray-700 dark:text-gray-300">Downloads</span>
+                <span className="text-gray-700 dark:text-gray-300">{t('community.downloads')}</span>
                 <span className="bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200 px-2 py-1 rounded text-sm font-medium">10k+</span>
               </div>
             </div>
             <div className="mt-6 pt-6 border-t border-gray-100 dark:border-gray-700">
               <div className="flex items-center">
                 <Users className="w-5 h-5 text-gray-500 dark:text-gray-400 mr-2" />
-                <span className="text-gray-700 dark:text-gray-300 text-sm">Built with ❤️ by the open source community</span>
+                <span className="text-gray-700 dark:text-gray-300 text-sm">{t('community.builtWithLove')}</span>
               </div>
             </div>
           </div>
         </div>
       </section>
-
       {/* Contributors Section */}
       <section>
         <div className="flex items-center justify-center mb-8">
           <Users className="w-8 h-8 text-blue-600 mr-3" />
-          <h2 className="text-3xl font-bold text-gray-900 dark:text-white">Our Contributors</h2>
+          <h2 className="text-3xl font-bold text-gray-900 dark:text-white">{t('contributors.title')}</h2>
         </div>
-
         <p className="text-center text-gray-600 dark:text-gray-300 mb-8 max-w-2xl mx-auto">
-          Thank you to all the amazing developers who have contributed to making this component library better!
+          {t('contributors.thankYou')}
         </p>
-
         {loading ? (
           <div className="text-center py-12">
             <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
-            <p className="text-gray-600 dark:text-gray-300">Loading contributors...</p>
+            <p className="text-gray-600 dark:text-gray-300">{t('contributors.loading')}</p>
           </div>
         ) : error ? (
           <div className="text-center py-12">
@@ -398,21 +365,18 @@ export default function AboutPage() {
                   <div className="relative mb-3">
                     <img
                       src={contributor.avatar_url}
-                      alt={`${contributor.login}'s avatar`}
+                      alt={t('contributors.avatarAlt', { login: contributor.login })}
                       className="w-16 h-16 rounded-full mx-auto border-2 border-gray-200 group-hover:border-blue-300 transition-colors duration-200"
                       loading="lazy"
                     />
                     <div className="absolute -top-1 -right-1 bg-green-500 w-4 h-4 rounded-full border-2 border-white"></div>
                   </div>
-
                   <h3 className="font-semibold text-gray-900 text-sm mb-1 truncate">
                     {contributor.login}
                   </h3>
-
                   <p className="text-xs text-gray-500 mb-3">
-                    {contributor.contributions} contribution{contributor.contributions !== 1 ? 's' : ''}
+                    {t('contributors.contributions', { count: contributor.contributions })}
                   </p>
-
                   <a
                     href={contributor.html_url}
                     target="_blank"
@@ -420,38 +384,36 @@ export default function AboutPage() {
                     className="inline-flex items-center gap-1 text-xs text-blue-600 hover:text-blue-800 font-medium transition-colors duration-200"
                   >
                     <Github className="w-3 h-3" />
-                    <span>Profile</span>
+                    <span>{t('contributors.profile')}</span>
                     <ExternalLink className="w-3 h-3" />
                   </a>
                 </div>
               ))}
             </div>
-
             {contributors.length > 0 && (
               <div className="text-center mt-8">
                 <p className="text-sm text-gray-500">
-                  Want to join our contributors? Check out our{' '}
+                  {t('contributors.join')}
                   <a
                     href="https://github.com/Sharma-Ji-21/component-library"
                     target="_blank"
                     rel="noopener noreferrer"
                     className="text-blue-600 hover:text-blue-800 font-medium"
                   >
-                    GitHub repository
+                    {t('contributors.githubRepo')}
                   </a>
-                  {' '}to get started!
+                  {t('contributors.getStarted')}
                 </p>
               </div>
             )}
           </>
         )}
       </section>
-
       {/* License & Links Section */}
       <section className="text-center bg-gray-50 p-8 rounded-2xl">
-        <h2 className="text-2xl font-bold text-gray-900 mb-4">Open Source & Free</h2>
+        <h2 className="text-2xl font-bold text-gray-900 mb-4">{t('license.title')}</h2>
         <p className="text-gray-600 mb-6 max-w-2xl mx-auto">
-          MyLibrary is released under the MIT License, making it free to use for both personal and commercial projects.
+          {t('license.description')}
         </p>
         <div className="flex justify-center gap-4">
           <a
@@ -461,13 +423,13 @@ export default function AboutPage() {
             className="bg-gray-900 text-white px-6 py-3 rounded-lg font-medium hover:bg-gray-800 transition-colors flex items-center gap-2"
           >
             <Github className="w-5 h-5" />
-            View on GitHub
+            {t('license.github')}
           </a>
           <a
             href="/contact"
             className="bg-blue-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 transition-colors"
           >
-            Get in Touch
+            {t('license.contact')}
           </a>
         </div>
       </section>
diff --git a/src/app/analytics/page.jsx b/src/app/analytics/page.jsx
index 2e49746..257c3da 100644
--- a/src/app/analytics/page.jsx
+++ b/src/app/analytics/page.jsx
@@ -1,11 +1,13 @@
 "use client";
 import React, { useState, useEffect } from 'react';
+import { useTranslations } from 'next-intl';
 import { useAnalytics } from '../context/AnalyticsContext';
 import { BarChart3, TrendingUp, Eye, Copy, Download, Calendar, Award, Activity } from 'lucide-react';
 import ConfirmationModal from '../components/ConfirmationModal';
 import PopularityChart from '../components/PopularityChart';
 
 export default function AnalyticsPage() {
+  const t = useTranslations('analytics');
   const { analytics, getPopularComponents, getRecentStats, exportAnalytics } = useAnalytics();
   const [showResetModal, setShowResetModal] = useState(false);
   const [isDarkTheme, setIsDarkTheme] = useState(false);
@@ -14,7 +16,7 @@ export default function AnalyticsPage() {
   const recentStats = getRecentStats();
 
   // Detect dark theme
-  useEffect(() => {
+useEffect(() => {
     const checkDarkTheme = () => {
       const isDark = document.documentElement.classList.contains('dark') ||
                     window.matchMedia('(prefers-color-scheme: dark)').matches;
@@ -66,10 +68,10 @@ export default function AnalyticsPage() {
           <div className="flex items-center justify-between">
             <div>
               <h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
-                Component Analytics Dashboard
+                {t('header.title')}
               </h1>
               <p className="text-gray-600 dark:text-gray-300">
-                Track component usage, performance, and user engagement
+                {t('header.description')}
               </p>
             </div>
             <button
@@ -77,7 +79,7 @@ export default function AnalyticsPage() {
               className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
             >
               <Download size={16} />
-              Export Data
+              {t('header.export')}
             </button>
           </div>
         </div>
@@ -87,7 +89,7 @@ export default function AnalyticsPage() {
           <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm border dark:border-gray-700">
             <div className="flex items-center justify-between">
               <div>
-                <p className="text-sm text-gray-600 dark:text-gray-400">Total Views</p>
+                <p className="text-sm text-gray-600 dark:text-gray-400">{t('overview.totalViews')}</p>
                 <p className="text-2xl font-bold text-gray-900 dark:text-white">
                   {analytics.totalViews.toLocaleString()}
                 </p>
@@ -101,7 +103,7 @@ export default function AnalyticsPage() {
           <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm border dark:border-gray-700">
             <div className="flex items-center justify-between">
               <div>
-                <p className="text-sm text-gray-600 dark:text-gray-400">Total Copies</p>
+                <p className="text-sm text-gray-600 dark:text-gray-400">{t('overview.totalCopies')}</p>
                 <p className="text-2xl font-bold text-gray-900 dark:text-white">
                   {analytics.totalCopies.toLocaleString()}
                 </p>
@@ -115,7 +117,7 @@ export default function AnalyticsPage() {
           <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm border dark:border-gray-700">
             <div className="flex items-center justify-between">
               <div>
-                <p className="text-sm text-gray-600 dark:text-gray-400">Components Used</p>
+                <p className="text-sm text-gray-600 dark:text-gray-400">{t('overview.componentsUsed')}</p>
                 <p className="text-2xl font-bold text-gray-900 dark:text-white">
                   {uniqueComponents}
                 </p>
@@ -129,7 +131,7 @@ export default function AnalyticsPage() {
           <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm border dark:border-gray-700">
             <div className="flex items-center justify-between">
               <div>
-                <p className="text-sm text-gray-600 dark:text-gray-400">Session Time</p>
+                <p className="text-sm text-gray-600 dark:text-gray-400">{t('overview.sessionTime')}</p>
                 <p className="text-2xl font-bold text-gray-900 dark:text-white">
                   {sessionDuration}m
                 </p>
@@ -148,7 +150,7 @@ export default function AnalyticsPage() {
             <div className="flex items-center gap-2 mb-6">
               <TrendingUp className="w-5 h-5 text-blue-600 dark:text-blue-400" />
               <h2 className="text-xl font-semibold text-gray-900 dark:text-white">
-                Most Popular Components
+                {t('popular.title')}
               </h2>
             </div>
             
@@ -160,7 +162,7 @@ export default function AnalyticsPage() {
             <div className="flex items-center gap-2 mb-6">
               <Calendar className="w-5 h-5 text-green-600 dark:text-green-400" />
               <h2 className="text-xl font-semibold text-gray-900 dark:text-white">
-                Last 7 Days Activity
+                {t('recent.title')}
               </h2>
             </div>
             
@@ -173,7 +175,7 @@ export default function AnalyticsPage() {
                   <div key={day.date} className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
                     <div>
                       <p className={`font-medium ${isToday ? 'text-blue-600 dark:text-blue-400' : 'text-gray-900 dark:text-white'}`}>
-                        {isToday ? 'Today' : date.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' })}
+                        {isToday ? t('recent.today') : date.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' })}
                       </p>
                     </div>
                     <div className="flex items-center gap-4 text-sm">
@@ -196,7 +198,7 @@ export default function AnalyticsPage() {
         {/* Performance Insights */}
         <div className="mt-8 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm border dark:border-gray-700">
           <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-6">
-            Performance Insights
+            {t('performance.title')}
           </h2>
           
           <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
@@ -205,7 +207,7 @@ export default function AnalyticsPage() {
                 {avgViewsPerComponent}
               </p>
               <p className="text-sm text-gray-600 dark:text-gray-400">
-                Avg Views per Component
+                {t('performance.avgViews')}
               </p>
             </div>
             
@@ -214,7 +216,7 @@ export default function AnalyticsPage() {
                 {analytics.totalCopies > 0 ? Math.round((analytics.totalCopies / analytics.totalViews) * 100) : 0}%
               </p>
               <p className="text-sm text-gray-600 dark:text-gray-400">
-                Copy Rate
+                {t('performance.copyRate')}
               </p>
             </div>
             
@@ -223,7 +225,7 @@ export default function AnalyticsPage() {
                 {recentStats.reduce((sum, day) => sum + day.views, 0)}
               </p>
               <p className="text-sm text-gray-600 dark:text-gray-400">
-                Views This Week
+                {t('performance.viewsWeek')}
               </p>
             </div>
           </div>
@@ -232,26 +234,26 @@ export default function AnalyticsPage() {
         {/* Quick Actions */}
         <div className="mt-8 bg-gradient-to-r from-blue-50 to-purple-50 dark:from-blue-900/20 dark:to-purple-900/20 p-6 rounded-lg border dark:border-gray-700">
           <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
-            Quick Actions
+            {t('actions.title')}
           </h3>
           <div className="flex flex-wrap gap-3">
             <button
               onClick={() => window.location.href = '/components'}
               className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
             >
-              View Components
+              {t('actions.viewComponents')}
             </button>
             <button
               onClick={exportAnalytics}
               className="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors"
             >
-              Export Analytics
+              {t('actions.export')}
             </button>
             <button
               onClick={() => setShowResetModal(true)}
               className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
             >
-              Reset Data
+              {t('actions.reset')}
             </button>
           </div>
         </div>
@@ -261,10 +263,10 @@ export default function AnalyticsPage() {
           isOpen={showResetModal}
           onClose={() => setShowResetModal(false)}
           onConfirm={handleResetData}
-          title="Reset Analytics Data"
-          message="This will permanently delete all analytics data including views, copies, and session information. This action cannot be undone."
-          confirmText="Reset Data"
-          cancelText="Cancel"
+          title={t('modal.title')}
+          message={t('modal.message')}
+          confirmText={t('modal.confirm')}
+          cancelText={t('modal.cancel')}
           variant="danger"
         />
       </div>
diff --git a/src/app/components/LanguageSwitcher.jsx b/src/app/components/LanguageSwitcher.jsx
index 09f5134..8ded19a 100644
--- a/src/app/components/LanguageSwitcher.jsx
+++ b/src/app/components/LanguageSwitcher.jsx
@@ -1,25 +1,61 @@
 import React from 'react';
-import { useI18n } from '../context/I18nContext';
 
 const LanguageSwitcher = () => {
-  const { locale, locales, changeLanguage } = useI18n();
+  const [isOpen,setIsOpen]=React.useState(false);
+  // Function to get cookie value
+  const getCookie = (name) => {
+    if (typeof document === 'undefined') return null;
+    const value = `; ${document.cookie}`;
+    const parts = value.split(`; ${name}=`);
+    if (parts.length === 2) return parts.pop().split(';').shift();
+    return null;
+  };
+
+  // Function to set cookie
+  const setCookie = (name, value, days = 365) => {
+    if (typeof document === 'undefined') return;
+    const expires = new Date();
+    expires.setTime(expires.getTime() + (days * 24 * 60 * 60 * 1000));
+    document.cookie = `${name}=${value};expires=${expires.toUTCString()};path=/`;
+  };
+
+  const locales = ['en', 'es', 'fr','hi'];
+  const [locale, setLocale] = React.useState(() => {
+    const savedLocale = getCookie('selected-language');
+    return savedLocale && locales.includes(savedLocale) ? savedLocale : 'en';
 
+  });
+
+  const changeLanguage = (lang) => {
+    
+   
+    setLocale(lang);
+    setCookie('selected-language', lang);
+    window.location.reload();
+    // Additional logic to change the app's language can be added here
+  };
   const languageNames = {
     en: 'English',
     es: 'Español',
-    fr: 'Français'
+    fr: 'Français',
+    hi: 'हिन्दी',
   };
 
   return (
     <div className="relative group">
-      <button className="px-3 py-2 rounded-lg text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-100/50 dark:hover:bg-gray-800/50 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:ring-offset-2 dark:focus:ring-offset-gray-900 flex items-center gap-2">
+      <button 
+        onClick={() => setIsOpen(!isOpen)}
+        className="px-3 py-2 rounded-lg text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-100/50 dark:hover:bg-gray-800/50 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:ring-offset-2 dark:focus:ring-offset-gray-900 flex items-center gap-2"
+      >
         <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
           <path fillRule="evenodd" d="M7 2a1 1 0 011 1v1h3a1 1 0 110 2H9.578a18.87 18.87 0 01-1.724 4.78c.29.354.596.696.914 1.026a1 1 0 11-1.44 1.389c-.254-.269-.5-.556-.734-.862-.913 1.32-1.91 2.49-2.98 3.5a1 1 0 11-1.42-1.42c.97-.94 1.86-2.02 2.65-3.2a1 1 0 011.03-.44c.36.1.72.23 1.07.39a1 1 0 01.57.74 1 1 0 01-.3.82 15.87 15.87 0 01-1.38 1.15c.45.56.95 1.07 1.5 1.52a1 1 0 01-1.42 1.42c-.44-.44-.85-.92-1.22-1.44a1 1 0 01.2-1.42c.3-.23.62-.42.95-.58a1 1 0 01.82.2 18.87 18.87 0 001.72-4.78H4a1 1 0 110-2h3V3a1 1 0 011-1zm6 6a1 1 0 01.895.553l2.99 5.982a.945.945 0 01.048.247 1 1 0 01-.542 1.047l-3.028 1.514a1 1 0 01-1.34-1.34l1.77-3.54-1.77-3.54a1 1 0 011.788-.894zM15 10a1 1 0 100-2 1 1 0 000 2z" clipRule="evenodd" />
         </svg>
         <span className="hidden md:inline">{languageNames[locale]}</span>
       </button>
-      
-      <div className="absolute right-0 mt-2 w-48 rounded-xl bg-white dark:bg-gray-800 shadow-lg border border-gray-200 dark:border-gray-700 py-2 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
+
+      <div className={`absolute right-0 mt-2 w-48 rounded-xl bg-white dark:bg-gray-800 shadow-lg border border-gray-200 dark:border-gray-700 py-2 transition-all duration-200 z-50 ${
+        isOpen ? 'opacity-100 visible' : 'opacity-0 invisible'
+      }`}>
         {locales.map((lang) => (
           <button
             key={lang}
diff --git a/src/app/components/interactive/ComponentPlayground.jsx b/src/app/components/interactive/ComponentPlayground.jsx
index 276afcd..30fef2d 100644
--- a/src/app/components/interactive/ComponentPlayground.jsx
+++ b/src/app/components/interactive/ComponentPlayground.jsx
@@ -1,5 +1,6 @@
 "use client";
 import { useState, useEffect } from "react";
+import { useTranslations } from 'next-intl';
 import {
   Settings,
   Eye,
@@ -15,15 +16,10 @@ import {
   Palette,
   Zap,
   BarChart3,
-  Users,
   CreditCard,
-  User,
-  Database,
-  CheckSquare,
-  List,
   FileText,
   Info,
-  Sparkles,
+  Heart
 } from "lucide-react";
 import PrimaryButton from "../buttons/PrimaryButton";
 import SecondaryButton from "../buttons/SecondaryButton";
@@ -43,54 +39,54 @@ import Checkbox from "../inputs/Checkbox";
 import { useToast } from "../feedback/Toast";
 
 export default function ComponentPlayground() {
+  // Translations
+  const t = useTranslations('playground');
+  
   // Component Selection
   const { addToast, ToastContainer } = useToast();
   const [selectedComponent, setSelectedComponent] = useState("button");
   const [selectedVariant, setSelectedVariant] = useState("primary");
 
   // Button States
-  const [buttonText, setButtonText] = useState("Click Me");
+  const [buttonText, setButtonText] = useState(t('defaultValues.buttonText'));
   const [buttonSize, setButtonSize] = useState("medium");
   const [buttonDisabled, setButtonDisabled] = useState(false);
   const [buttonLoading, setButtonLoading] = useState(false);
 
   // Card States
-  const [cardTitle, setCardTitle] = useState("Sample Card");
-  const [cardDescription, setCardDescription] = useState(
-    "This is a sample card description"
-  );
+  const [cardTitle, setCardTitle] = useState(t('defaultValues.cardTitle'));
+  const [cardDescription, setCardDescription] = useState(t('defaultValues.cardDescription'));
   const [cardImage, setCardImage] = useState(
     "https://images.unsplash.com/photo-1557804506-669a67965ba0?w=400"
   );
 
   // Input States
-  const [inputLabel, setInputLabel] = useState("Sample Input");
-  const [inputPlaceholder, setInputPlaceholder] =
-    useState("Enter text here...");
+  const [inputLabel, setInputLabel] = useState(t('defaultValues.inputLabel'));
+  const [inputPlaceholder, setInputPlaceholder] = useState(t('defaultValues.inputPlaceholder'));
   const [inputRequired, setInputRequired] = useState(false);
   const [inputError, setInputError] = useState("");
 
   // Pricing Card States
-  const [pricingPlan, setPricingPlan] = useState("Pro");
-  const [pricingPrice, setPricingPrice] = useState("$9/mo");
+  const [pricingPlan, setPricingPlan] = useState(t('pricing.defaultPlan'));
+  const [pricingPrice, setPricingPrice] = useState(t('pricing.defaultPrice'));
   const [pricingFeatures, setPricingFeatures] = useState([
-    "10 projects",
-    "Priority support",
-    "Unlimited users",
+    t('pricing.defaultFeatures.0'),
+    t('pricing.defaultFeatures.1'),
+    t('pricing.defaultFeatures.2'),
   ]);
 
   // User Card States
-  const [userName, setUserName] = useState("John Doe");
-  const [userEmail, setUserEmail] = useState("john@example.com");
-  const [userRole, setUserRole] = useState("Software Engineer");
+  const [userName, setUserName] = useState(t('userData.defaultName'));
+  const [userEmail, setUserEmail] = useState(t('userData.defaultEmail'));
+  const [userRole, setUserRole] = useState(t('userData.defaultRole'));
   const [userAvatar, setUserAvatar] = useState(
     "https://i.pravatar.cc/150?img=1"
   );
 
   // Data Card States
-  const [dataTitle, setDataTitle] = useState("Active Projects");
-  const [dataValue, setDataValue] = useState("27");
-  const [dataIcon, setDataIcon] = useState("📂");
+  const [dataTitle, setDataTitle] = useState(t('dataCard.defaultTitle'));
+  const [dataValue, setDataValue] = useState(t('dataCard.defaultValue'));
+  const [dataIcon, setDataIcon] = useState(t('dataCard.defaultIcon'));
   const [dataTrend, setDataTrend] = useState(8);
 
   // UI States
@@ -102,28 +98,28 @@ export default function ComponentPlayground() {
   const [favorites, setFavorites] = useState([]);
   const [showFavorites, setShowFavorites] = useState(false);
 
-  // Component variants mapping
+  // Component variants mapping with translations
   const componentVariants = {
     button: {
-      primary: { component: PrimaryButton, name: "Primary Button" },
-      secondary: { component: SecondaryButton, name: "Secondary Button" },
-      danger: { component: DangerButton, name: "Danger Button" },
-      success: { component: SuccessButton, name: "Success Button" },
-      ghost: { component: GhostButton, name: "Ghost Button" },
-      outline: { component: OutlineButton, name: "Outline Button" },
-      rainbow: { component: RainbowButton, name: "Rainbow Button" },
+      primary: { component: PrimaryButton, name: t('buttonVariants.primary') },
+      secondary: { component: SecondaryButton, name: t('buttonVariants.secondary') },
+      danger: { component: DangerButton, name: t('buttonVariants.danger') },
+      success: { component: SuccessButton, name: t('buttonVariants.success') },
+      ghost: { component: GhostButton, name: t('buttonVariants.ghost') },
+      outline: { component: OutlineButton, name: t('buttonVariants.outline') },
+      rainbow: { component: RainbowButton, name: t('buttonVariants.rainbow') },
     },
     card: {
-      simple: { component: SimpleCard, name: "Simple Card" },
-      feature: { component: FeatureCard, name: "Feature Card" },
-      pricing: { component: PricingCard, name: "Pricing Card" },
-      user: { component: UserCard, name: "User Card" },
-      data: { component: DataCard, name: "Data Card" },
+      simple: { component: SimpleCard, name: t('cardVariants.simple') },
+      feature: { component: FeatureCard, name: t('cardVariants.feature') },
+      pricing: { component: PricingCard, name: t('cardVariants.pricing') },
+      user: { component: UserCard, name: t('cardVariants.user') },
+      data: { component: DataCard, name: t('cardVariants.data') },
     },
     input: {
-      text: { component: TextInput, name: "Text Input" },
-      select: { component: Select, name: "Select Dropdown" },
-      checkbox: { component: Checkbox, name: "Checkbox" },
+      text: { component: TextInput, name: t('inputVariants.text') },
+      select: { component: Select, name: t('inputVariants.select') },
+      checkbox: { component: Checkbox, name: t('inputVariants.checkbox') },
     },
   };
 
@@ -192,16 +188,16 @@ export default function ComponentPlayground() {
         return `<Select 
   label="${inputLabel}"
   options={[
-    { value: 'option1', label: 'Option 1' },
-    { value: 'option2', label: 'Option 2' },
-    { value: 'option3', label: 'Option 3' }
+    { value: 'option1', label: '${t('defaultValues.selectOptions.option1')}' },
+    { value: 'option2', label: '${t('defaultValues.selectOptions.option2')}' },
+    { value: 'option3', label: '${t('defaultValues.selectOptions.option3')}' }
   ]}
   ${inputRequired ? "required" : ""}
 />`;
       } else if (selectedVariant === "checkbox") {
         return `<Checkbox 
   label="${inputLabel}"
-  description="Check this option"
+  description="${t('defaultValues.checkboxDescription')}"
   checked={false}
   onChange={() => {}}
 />`;
@@ -216,12 +212,12 @@ export default function ComponentPlayground() {
     const code = generateCode();
     try {
       await navigator.clipboard.writeText(code);
-      addToast("Code copied to clipboard!", "success", 2000);
-      setCopiedCode("✅ Copied!");
+      addToast(t('messages.codeCopied'), "success", 2000);
+      setCopiedCode(t('codeSection.copied'));
       setTimeout(() => setCopiedCode(""), 2000);
     } catch (err) {
-      addToast("Failed to copy code.", "error", 4000);
-      setCopiedCode("❌ Failed to copy");
+      addToast(t('messages.copyFailed'), "error", 4000);
+      setCopiedCode(t('codeSection.failedToCopy'));
       setTimeout(() => setCopiedCode(""), 2000);
     }
   };
@@ -229,34 +225,34 @@ export default function ComponentPlayground() {
   // Reset to defaults
   const resetToDefaults = () => {
     if (selectedComponent === "button") {
-      setButtonText("Click Me");
+      setButtonText(t('defaultValues.buttonText'));
       setButtonSize("medium");
       setButtonDisabled(false);
       setButtonLoading(false);
     } else if (selectedComponent === "card") {
-      setCardTitle("Sample Card");
-      setCardDescription("This is a sample card description");
+      setCardTitle(t('defaultValues.cardTitle'));
+      setCardDescription(t('defaultValues.cardDescription'));
       setCardImage(
         "https://images.unsplash.com/photo-1557804506-669a67965ba0?w=400"
       );
-      setPricingPlan("Pro");
-      setPricingPrice("$9/mo");
+      setPricingPlan(t('pricing.defaultPlan'));
+      setPricingPrice(t('pricing.defaultPrice'));
       setPricingFeatures([
-        "10 projects",
-        "Priority support",
-        "Unlimited users",
+        t('pricing.defaultFeatures.0'),
+        t('pricing.defaultFeatures.1'),
+        t('pricing.defaultFeatures.2'),
       ]);
-      setUserName("John Doe");
-      setUserEmail("john@example.com");
-      setUserRole("Software Engineer");
+      setUserName(t('userData.defaultName'));
+      setUserEmail(t('userData.defaultEmail'));
+      setUserRole(t('userData.defaultRole'));
       setUserAvatar("https://i.pravatar.cc/150?img=1");
-      setDataTitle("Active Projects");
-      setDataValue("27");
-      setDataIcon("📂");
-      setDataTrend(8);
+      setDataTitle(t('dataCard.defaultTitle'));
+      setDataValue(t('dataCard.defaultValue'));
+      setDataIcon(t('dataCard.defaultIcon'));
+      setDataTrend(parseInt(t('dataCard.defaultTrend')));
     } else if (selectedComponent === "input") {
-      setInputLabel("Sample Input");
-      setInputPlaceholder("Enter text here...");
+      setInputLabel(t('defaultValues.inputLabel'));
+      setInputPlaceholder(t('defaultValues.inputPlaceholder'));
       setInputRequired(false);
       setInputError("");
     }
@@ -266,14 +262,14 @@ export default function ComponentPlayground() {
   const randomizeValues = () => {
     if (selectedComponent === "button") {
       const texts = [
-        "Get Started",
-        "Learn More",
-        "Sign Up Now",
-        "Download",
-        "Subscribe",
-        "Join Us",
-        "Try Free",
-        "Contact Us",
+        t('randomValues.buttonTexts.0'),
+        t('randomValues.buttonTexts.1'),
+        t('randomValues.buttonTexts.2'),
+        t('randomValues.buttonTexts.3'),
+        t('randomValues.buttonTexts.4'),
+        t('randomValues.buttonTexts.5'),
+        t('randomValues.buttonTexts.6'),
+        t('randomValues.buttonTexts.7'),
       ];
       const sizes = ["small", "medium", "large"];
       setButtonText(texts[Math.floor(Math.random() * texts.length)]);
@@ -282,18 +278,18 @@ export default function ComponentPlayground() {
       setButtonLoading(Math.random() > 0.8);
     } else if (selectedComponent === "card") {
       const titles = [
-        "Amazing Feature",
-        "Premium Service",
-        "New Product",
-        "Special Offer",
-        "Latest Update",
+        t('randomValues.cardTitles.0'),
+        t('randomValues.cardTitles.1'),
+        t('randomValues.cardTitles.2'),
+        t('randomValues.cardTitles.3'),
+        t('randomValues.cardTitles.4'),
       ];
       const descriptions = [
-        "Discover incredible features that will transform your workflow",
-        "Experience premium quality with our professional services",
-        "Introducing our latest product with cutting-edge technology",
-        "Limited time offer with exclusive benefits for you",
-        "Stay updated with the latest improvements and features",
+        t('randomValues.cardDescriptions.0'),
+        t('randomValues.cardDescriptions.1'),
+        t('randomValues.cardDescriptions.2'),
+        t('randomValues.cardDescriptions.3'),
+        t('randomValues.cardDescriptions.4'),
       ];
       setCardTitle(titles[Math.floor(Math.random() * titles.length)]);
       setCardDescription(
@@ -302,18 +298,18 @@ export default function ComponentPlayground() {
 
       if (selectedVariant === "user") {
         const names = [
-          "Alice Johnson",
-          "Bob Smith",
-          "Carol Davis",
-          "David Wilson",
-          "Emma Brown",
+          t('randomValues.userNames.0'),
+          t('randomValues.userNames.1'),
+          t('randomValues.userNames.2'),
+          t('randomValues.userNames.3'),
+          t('randomValues.userNames.4'),
         ];
         const roles = [
-          "Frontend Developer",
-          "Backend Engineer",
-          "UI/UX Designer",
-          "Product Manager",
-          "DevOps Engineer",
+          t('randomValues.userRoles.0'),
+          t('randomValues.userRoles.1'),
+          t('randomValues.userRoles.2'),
+          t('randomValues.userRoles.3'),
+          t('randomValues.userRoles.4'),
         ];
         setUserName(names[Math.floor(Math.random() * names.length)]);
         setUserRole(roles[Math.floor(Math.random() * roles.length)]);
@@ -324,14 +320,26 @@ export default function ComponentPlayground() {
 
       if (selectedVariant === "data") {
         const dataTitles = [
-          "Total Users",
-          "Revenue",
-          "Active Sessions",
-          "Conversion Rate",
-          "Growth Rate",
+          t('randomValues.dataTitles.0'),
+          t('randomValues.dataTitles.1'),
+          t('randomValues.dataTitles.2'),
+          t('randomValues.dataTitles.3'),
+          t('randomValues.dataTitles.4'),
+        ];
+        const dataValues = [
+          t('randomValues.dataValues.0'),
+          t('randomValues.dataValues.1'),
+          t('randomValues.dataValues.2'),
+          t('randomValues.dataValues.3'),
+          t('randomValues.dataValues.4'),
+        ];
+        const dataIcons = [
+          t('randomValues.dataIcons.0'),
+          t('randomValues.dataIcons.1'),
+          t('randomValues.dataIcons.2'),
+          t('randomValues.dataIcons.3'),
+          t('randomValues.dataIcons.4'),
         ];
-        const dataValues = ["1,234", "$45.6K", "89%", "12.5%", "+23%"];
-        const dataIcons = ["👥", "💰", "📊", "📈", "🚀"];
         const randomIndex = Math.floor(Math.random() * dataTitles.length);
         setDataTitle(dataTitles[randomIndex]);
         setDataValue(dataValues[randomIndex]);
@@ -415,7 +423,7 @@ export default function ComponentPlayground() {
 
     const Component = variant.component;
     const commonProps = {
-      onClick: () => alert(`${variant.name} clicked!`),
+      onClick: () => alert(t('messages.clickAlert', { component: variant.name })),
     };
 
     if (selectedComponent === "button") {
@@ -433,7 +441,7 @@ export default function ComponentPlayground() {
             buttonLoading ? "opacity-50 cursor-not-allowed" : ""
           }`}
         >
-          {buttonLoading ? "⏳ Loading..." : buttonText}
+          {buttonLoading ? t('buttonControls.loadingText') : buttonText}
         </Component>
       );
     } else if (selectedComponent === "card") {
@@ -485,9 +493,9 @@ export default function ComponentPlayground() {
             label={inputLabel}
             required={inputRequired}
             options={[
-              { value: "option1", label: "Option 1" },
-              { value: "option2", label: "Option 2" },
-              { value: "option3", label: "Option 3" },
+              { value: "option1", label: t('defaultValues.selectOptions.option1') },
+              { value: "option2", label: t('defaultValues.selectOptions.option2') },
+              { value: "option3", label: t('defaultValues.selectOptions.option3') },
             ]}
           />
         );
@@ -495,7 +503,7 @@ export default function ComponentPlayground() {
         return (
           <Component
             label={inputLabel}
-            description="Check this option"
+            description={t('defaultValues.checkboxDescription')}
             checked={false}
             onChange={() => {}}
           />
@@ -514,11 +522,11 @@ export default function ComponentPlayground() {
             <Palette className="w-8 h-8 text-white" />
           </div>
           <h1 className="md:text-4xl text-2xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
-            Advanced Component Playground
+            {t('title')}
           </h1>
         </div>
         <p className="text-lg text-gray-600 dark:text-gray-300">
-          Customize components in real-time and export production-ready code!
+          {t('subtitle')}
         </p>
       </div>
 
@@ -528,7 +536,7 @@ export default function ComponentPlayground() {
           {/* Component Type */}
           <div>
             <label className="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">
-              Component Type
+              {t('controls.componentType')}
             </label>
             <div className="relative">
               <MousePointer className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
@@ -537,9 +545,9 @@ export default function ComponentPlayground() {
                 onChange={(e) => setSelectedComponent(e.target.value)}
                 className="w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
               >
-                <option value="button">Buttons</option>
-                <option value="card">Cards</option>
-                <option value="input">Inputs</option>
+                <option value="button">{t('componentTypes.buttons')}</option>
+                <option value="card">{t('componentTypes.cards')}</option>
+                <option value="input">{t('componentTypes.inputs')}</option>
               </select>
             </div>
           </div>
@@ -547,7 +555,7 @@ export default function ComponentPlayground() {
           {/* Component Variant */}
           <div>
             <label className="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">
-              Variant
+              {t('controls.variant')}
             </label>
             <select
               value={selectedVariant}
@@ -567,7 +575,7 @@ export default function ComponentPlayground() {
           {/* Preview Mode */}
           <div>
             <label className="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">
-              Preview Mode
+              {t('controls.previewMode')}
             </label>
             <div className="flex gap-2">
               <button
@@ -579,7 +587,7 @@ export default function ComponentPlayground() {
                 }`}
               >
                 <Sun className="w-4 h-4" />
-                Light
+                {t('preview.light')}
               </button>
               <button
                 onClick={() => setPreviewMode("dark")}
@@ -590,7 +598,7 @@ export default function ComponentPlayground() {
                 }`}
               >
                 <Moon className="w-4 h-4" />
-                Dark
+                {t('preview.dark')}
               </button>
             </div>
           </div>
@@ -598,7 +606,7 @@ export default function ComponentPlayground() {
           {/* Favorites Toggle */}
           <div>
             <label className="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">
-              My Favorites ({favorites.length})
+              {t('controls.myFavorites', { count: favorites.length })}
             </label>
             <button
               onClick={() => setShowFavorites(!showFavorites)}
@@ -611,7 +619,7 @@ export default function ComponentPlayground() {
               <Heart
                 className={`w-4 h-4 ${showFavorites ? "fill-current" : ""}`}
               />
-              {showFavorites ? "Hide Favorites" : "Show Favorites"}
+              {showFavorites ? t('controls.hideFavorites') : t('controls.showFavorites')}
             </button>
           </div>
         </div>
@@ -624,7 +632,7 @@ export default function ComponentPlayground() {
             <div className="flex items-center gap-2">
               <Settings className="w-5 h-5 text-blue-500" />
               <h2 className="text-lg sm:text-xl font-semibold text-gray-900 dark:text-white">
-                Customization Controls
+                {t('controls.customizationControls')}
               </h2>
             </div>
             <div className="flex flex-wrap gap-2">
@@ -633,14 +641,14 @@ export default function ComponentPlayground() {
                 className="px-3 py-1 bg-gray-500 text-white rounded-lg text-sm hover:bg-gray-600 transition-colors flex items-center gap-1"
               >
                 <RotateCcw className="w-3 h-3" />
-                Reset
+                {t('controls.reset')}
               </button>
               <button
                 onClick={randomizeValues}
                 className="px-3 py-1 bg-purple-500 text-white rounded-lg text-sm hover:bg-purple-600 transition-colors flex items-center gap-1"
               >
                 <Shuffle className="w-3 h-3" />
-                Random
+                {t('controls.random')}
               </button>
             </div>
           </div>
@@ -652,18 +660,18 @@ export default function ComponentPlayground() {
               <>
                 <div>
                   <label className="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">
-                    Button Text
+                    {t('buttonControls.buttonText')}
                   </label>
                   <TextInput
                     value={buttonText}
                     onChange={(e) => setButtonText(e.target.value)}
-                    placeholder="Enter button text"
+                    placeholder={t('defaultValues.buttonText')}
                   />
                 </div>
 
                 <div>
                   <label className="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">
-                    Button Size
+                    {t('buttonControls.buttonSize')}
                   </label>
                   <div className="flex gap-2">
                     {["small", "medium", "large"].map((size) => (
@@ -676,7 +684,7 @@ export default function ComponentPlayground() {
                             : "bg-gray-500 dark:bg-gray-700 text-gray-800 dark:text-gray-100 hover:bg-gray-600 dark:hover:bg-gray-600"
                         }`}
                       >
-                        {size.charAt(0).toUpperCase() + size.slice(1)}
+                        {t(`buttonControls.sizes.${size}`)}
                       </button>
                     ))}
                   </div>
@@ -691,7 +699,7 @@ export default function ComponentPlayground() {
                       className="mr-2"
                     />
                     <span className="text-sm text-gray-700 dark:text-gray-300">
-                      Disabled
+                      {t('buttonControls.disabled')}
                     </span>
                   </label>
                   <label className="flex items-center">
@@ -702,7 +710,7 @@ export default function ComponentPlayground() {
                       className="mr-2"
                     />
                     <span className="text-sm text-gray-700 dark:text-gray-300">
-                      Loading
+                      {t('buttonControls.loading')}
                     </span>
                   </label>
                 </div>
@@ -714,23 +722,23 @@ export default function ComponentPlayground() {
               <>
                 <div>
                   <label className="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">
-                    Card Title
+                    {t('cardControls.cardTitle')}
                   </label>
                   <TextInput
                     value={cardTitle}
                     onChange={(e) => setCardTitle(e.target.value)}
-                    placeholder="Enter card title"
+                    placeholder={t('cardControls.cardTitlePlaceholder')}
                   />
                 </div>
 
                 <div>
                   <label className="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">
-                    Card Description
+                    {t('cardControls.cardDescription')}
                   </label>
                   <textarea
                     value={cardDescription}
                     onChange={(e) => setCardDescription(e.target.value)}
-                    placeholder="Enter card description"
+                    placeholder={t('cardControls.cardDescriptionPlaceholder')}
                     rows={3}
                     className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
                   />
@@ -742,28 +750,28 @@ export default function ComponentPlayground() {
                     <div className="grid grid-cols-2 gap-4">
                       <div>
                         <label className="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">
-                          Plan Name
+                          {t('pricingControls.planName')}
                         </label>
                         <TextInput
                           value={pricingPlan}
                           onChange={(e) => setPricingPlan(e.target.value)}
-                          placeholder="e.g., Pro"
+                          placeholder={t('pricingControls.planPlaceholder')}
                         />
                       </div>
                       <div>
                         <label className="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">
-                          Price
+                          {t('pricingControls.price')}
                         </label>
                         <TextInput
                           value={pricingPrice}
                           onChange={(e) => setPricingPrice(e.target.value)}
-                          placeholder="e.g., $9/mo"
+                          placeholder={t('pricingControls.pricePlaceholder')}
                         />
                       </div>
                     </div>
                     <div>
                       <label className="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">
-                        Features (comma separated)
+                        {t('pricingControls.features')}
                       </label>
                       <TextInput
                         value={pricingFeatures.join(", ")}
@@ -772,7 +780,7 @@ export default function ComponentPlayground() {
                             e.target.value.split(", ").filter((f) => f.trim())
                           )
                         }
-                        placeholder="Feature 1, Feature 2, Feature 3"
+                        placeholder={t('pricingControls.featuresPlaceholder')}
                       />
                     </div>
                   </>
@@ -784,43 +792,43 @@ export default function ComponentPlayground() {
                     <div className="grid grid-cols-2 gap-4">
                       <div>
                         <label className="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">
-                          User Name
+                          {t('userCardControls.userName')}
                         </label>
                         <TextInput
                           value={userName}
                           onChange={(e) => setUserName(e.target.value)}
-                          placeholder="John Doe"
+                          placeholder={t('userCardControls.userNamePlaceholder')}
                         />
                       </div>
                       <div>
                         <label className="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">
-                          Email
+                          {t('userCardControls.email')}
                         </label>
                         <TextInput
                           value={userEmail}
                           onChange={(e) => setUserEmail(e.target.value)}
-                          placeholder="john@example.com"
+                          placeholder={t('userCardControls.emailPlaceholder')}
                         />
                       </div>
                     </div>
                     <div>
                       <label className="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">
-                        Role
+                        {t('userCardControls.role')}
                       </label>
                       <TextInput
                         value={userRole}
                         onChange={(e) => setUserRole(e.target.value)}
-                        placeholder="Software Engineer"
+                        placeholder={t('userCardControls.rolePlaceholder')}
                       />
                     </div>
                     <div>
                       <label className="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">
-                        Avatar URL
+                        {t('userCardControls.avatarUrl')}
                       </label>
                       <TextInput
                         value={userAvatar}
                         onChange={(e) => setUserAvatar(e.target.value)}
-                        placeholder="https://i.pravatar.cc/150?img=1"
+                        placeholder={t('userCardControls.avatarPlaceholder')}
                       />
                     </div>
                   </>
@@ -832,39 +840,39 @@ export default function ComponentPlayground() {
                     <div className="grid grid-cols-2 gap-4">
                       <div>
                         <label className="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">
-                          Data Title
+                          {t('dataCardControls.dataTitle')}
                         </label>
                         <TextInput
                           value={dataTitle}
                           onChange={(e) => setDataTitle(e.target.value)}
-                          placeholder="Active Projects"
+                          placeholder={t('dataCardControls.dataTitlePlaceholder')}
                         />
                       </div>
                       <div>
                         <label className="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">
-                          Value
+                          {t('dataCardControls.value')}
                         </label>
                         <TextInput
                           value={dataValue}
                           onChange={(e) => setDataValue(e.target.value)}
-                          placeholder="27"
+                          placeholder={t('dataCardControls.valuePlaceholder')}
                         />
                       </div>
                     </div>
                     <div className="grid grid-cols-2 gap-4">
                       <div>
                         <label className="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">
-                          Icon (Emoji)
+                          {t('dataCardControls.icon')}
                         </label>
                         <TextInput
                           value={dataIcon}
                           onChange={(e) => setDataIcon(e.target.value)}
-                          placeholder="📂"
+                          placeholder={t('dataCardControls.iconPlaceholder')}
                         />
                       </div>
                       <div>
                         <label className="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">
-                          Trend (%)
+                          {t('dataCardControls.trend')}
                         </label>
                         <input
                           type="number"
@@ -873,7 +881,7 @@ export default function ComponentPlayground() {
                             setDataTrend(parseInt(e.target.value) || 0)
                           }
                           className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
-                          placeholder="8"
+                          placeholder={t('dataCardControls.trendPlaceholder')}
                         />
                       </div>
                     </div>
@@ -887,12 +895,12 @@ export default function ComponentPlayground() {
               <>
                 <div>
                   <label className="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">
-                    Label
+                    {t('inputControls.label')}
                   </label>
                   <TextInput
                     value={inputLabel}
                     onChange={(e) => setInputLabel(e.target.value)}
-                    placeholder="Enter input label"
+                    placeholder={t('inputControls.labelPlaceholder')}
                   />
                 </div>
 
@@ -900,22 +908,22 @@ export default function ComponentPlayground() {
                   <>
                     <div>
                       <label className="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">
-                        Placeholder
+                        {t('inputControls.placeholder')}
                       </label>
                       <TextInput
                         value={inputPlaceholder}
                         onChange={(e) => setInputPlaceholder(e.target.value)}
-                        placeholder="Enter placeholder text"
+                        placeholder={t('inputControls.placeholderPlaceholder')}
                       />
                     </div>
                     <div>
                       <label className="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">
-                        Error Message (optional)
+                        {t('inputControls.errorMessage')}
                       </label>
                       <TextInput
                         value={inputError}
                         onChange={(e) => setInputError(e.target.value)}
-                        placeholder="Enter error message"
+                        placeholder={t('inputControls.errorPlaceholder')}
                       />
                     </div>
                   </>
@@ -930,7 +938,7 @@ export default function ComponentPlayground() {
                       className="mr-2"
                     />
                     <span className="text-sm text-gray-700 dark:text-gray-300">
-                      Required
+                      {t('inputControls.required')}
                     </span>
                   </label>
                 </div>
@@ -944,14 +952,14 @@ export default function ComponentPlayground() {
               <div className="flex items-center gap-2 flex-wrap">
                 <Code className="w-4 h-4 text-gray-500" />
                 <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
-                  Generated Code
+                  {t('codeSection.generatedCode')}
                 </label>
                 <button
                   onClick={() => setShowCode(!showCode)}
                   className="px-2 py-1 bg-gray-500 text-white rounded text-xs hover:bg-gray-600 transition-colors flex items-center gap-1"
                 >
                   <Eye className="w-3 h-3" />
-                  {showCode ? "Hide" : "Show"}
+                  {showCode ? t('codeSection.hide') : t('codeSection.show')}
                 </button>
               </div>
               <button
@@ -959,7 +967,7 @@ export default function ComponentPlayground() {
                 className="px-4 py-2 bg-green-500 w-fit text-white rounded-lg text-sm hover:bg-green-600 transition-colors flex items-center gap-2"
               >
                 <Copy className="w-4 h-4" />
-                {copiedCode || "Copy Code"}
+                {copiedCode || t('codeSection.copyCode')}
               </button>
             </div>
 
@@ -972,7 +980,7 @@ export default function ComponentPlayground() {
                 </pre>
                 <div className="absolute top-2 right-2">
                   <span className="bg-blue-500 text-white px-2 py-1 rounded text-xs">
-                    React JSX
+                    {t('codeSection.language')}
                   </span>
                 </div>
               </div>
@@ -986,7 +994,7 @@ export default function ComponentPlayground() {
             <div className="flex items-center gap-2">
               <Eye className="w-5 h-5 text-green-500" />
               <h2 className="text-lg sm:text-xl font-semibold text-gray-900 dark:text-white">
-                Live Preview
+                {t('preview.livePreview')}
               </h2>
             </div>
             <div className="text-sm text-gray-500 dark:text-gray-400 flex items-center gap-1">
@@ -1013,26 +1021,25 @@ export default function ComponentPlayground() {
             <div className="flex items-center gap-2 mb-2">
               <Info className="w-4 h-4 text-blue-600 dark:text-blue-400" />
               <span className="text-blue-600 dark:text-blue-400 font-medium">
-                Component Info
+                {t('preview.componentInfo')}
               </span>
             </div>
             <div className="text-sm text-blue-800 dark:text-blue-300">
               <p>
-                <strong>Type:</strong>{" "}
-                {selectedComponent.charAt(0).toUpperCase() +
-                  selectedComponent.slice(1)}
+                <strong>{t('preview.type')}:</strong>{" "}
+                {componentVariants[selectedComponent]?.[selectedVariant]?.name}
               </p>
               <p>
-                <strong>Variant:</strong>{" "}
+                <strong>{t('preview.variant')}:</strong>{" "}
                 {componentVariants[selectedComponent]?.[selectedVariant]?.name}
               </p>
               <p>
-                <strong>Interactive:</strong>{" "}
+                <strong>{t('preview.interactive')}:</strong>{" "}
                 {selectedComponent === "button"
-                  ? "Yes (Click to test)"
+                  ? t('preview.clickToTest')
                   : selectedComponent === "card" && selectedVariant === "user"
-                  ? "Yes (Click to test)"
-                  : "Display only"}
+                  ? t('preview.clickToTest')
+                  : t('preview.displayOnly')}
               </p>
             </div>
           </div>
@@ -1045,14 +1052,14 @@ export default function ComponentPlayground() {
             >
               <div className="flex items-center justify-center gap-2">
                 <RotateCcw className="w-4 h-4" />
-                Reset
+                {t('actions.reset')}
               </div>
             </SecondaryButton>
 
             <SuccessButton onClick={randomizeValues}>
               <div className="flex items-center gap-2">
                 <Shuffle className="w-4 h-4" />
-                Randomize
+                {t('actions.randomize')}
               </div>
             </SuccessButton>
 
@@ -1072,8 +1079,8 @@ export default function ComponentPlayground() {
                 }`}
               />
               {isFavorite(selectedComponent, selectedVariant)
-                ? "Remove Favorite"
-                : "Add Favorite"}
+                ? t('favorites.removeFavorite')
+                : t('favorites.addFavorite')}
             </button>
 
             <button
@@ -1081,7 +1088,7 @@ export default function ComponentPlayground() {
               className="px-4 py-2 bg-purple-500 text-white rounded-lg text-sm hover:bg-purple-600 transition-colors flex-1 sm:flex-none flex items-center justify-center gap-2"
             >
               <Copy className="w-4 h-4" />
-              Copy Code
+              {t('actions.copyCode')}
             </button>
           </div>
         </div>
@@ -1094,7 +1101,7 @@ export default function ComponentPlayground() {
             <div className="flex items-center gap-2">
               <Heart className="w-5 h-5 text-pink-500 fill-current" />
               <h2 className="text-xl font-semibold text-gray-900 dark:text-white">
-                My Favorite Components ({favorites.length})
+                {t('favorites.title', { count: favorites.length })}
               </h2>
             </div>
             {favorites.length > 0 && (
@@ -1102,7 +1109,7 @@ export default function ComponentPlayground() {
                 onClick={clearAllFavorites}
                 className="px-3 py-1 text-sm text-pink-600 dark:text-pink-400 hover:text-pink-800 dark:hover:text-pink-300 transition-colors"
               >
-                Clear All
+                {t('favorites.clearAll')}
               </button>
             )}
           </div>
@@ -1111,11 +1118,10 @@ export default function ComponentPlayground() {
             <div className="text-center py-12">
               <Heart className="w-12 h-12 text-gray-300 dark:text-gray-600 mx-auto mb-4" />
               <p className="text-gray-500 dark:text-gray-400 mb-2">
-                No favorite components yet
+                {t('favorites.noFavorites')}
               </p>
               <p className="text-sm text-gray-400 dark:text-gray-500">
-                Click the heart icon on any component to add it to your
-                favorites
+                {t('favorites.noFavoritesDesc')}
               </p>
             </div>
           ) : (
@@ -1155,12 +1161,10 @@ export default function ComponentPlayground() {
                       </button>
                     </div>
                     <p className="text-xs text-gray-500 dark:text-gray-400 mb-2">
-                      {favorite.componentType.charAt(0).toUpperCase() +
-                        favorite.componentType.slice(1)}{" "}
-                      Component
+                      {t(`componentTypes.${favorite.componentType}`)} {t('favorites.componentSuffix')}
                     </p>
                     <p className="text-xs text-gray-400 dark:text-gray-500">
-                      Added {new Date(favorite.addedAt).toLocaleDateString()}
+                      {t('favorites.addedDate', { date: new Date(favorite.addedAt).toLocaleDateString() })}
                     </p>
                   </div>
                 );
@@ -1182,7 +1186,7 @@ export default function ComponentPlayground() {
           {selectedComponent === "input" && (
             <Type className="w-5 h-5 text-purple-500" />
           )}
-          <h2 className="text-xl font-semibold text-gray-900 dark:text-white">
+         <h2 className="text-xl font-semibold text-gray-900 dark:text-white">
             All{" "}
             {selectedComponent.charAt(0).toUpperCase() +
               selectedComponent.slice(1)}{" "}
@@ -1220,8 +1224,8 @@ export default function ComponentPlayground() {
                     {selectedComponent === "card" && key === "simple" && (
                       <div className="scale-75 origin-center">
                         <variant.component
-                          title="Sample"
-                          description="Preview"
+                          title={t('showcase.sample')}
+                          description={t('showcase.preview')}
                         />
                       </div>
                     )}
@@ -1229,7 +1233,7 @@ export default function ComponentPlayground() {
                       <div className="scale-75 origin-center">
                         <variant.component
                           title="Feature"
-                          description="Preview"
+                          description={t('showcase.preview')}
                         />
                       </div>
                     )}
@@ -1266,10 +1270,10 @@ export default function ComponentPlayground() {
                       <div className="scale-90 origin-center">
                         <variant.component
                           label={variant.name}
-                          placeholder="Preview"
+                          placeholder={t('showcase.preview')}
                           {...(key === "select"
                             ? {
-                                options: [{ value: "opt1", label: "Option 1" }],
+                                options: [{ value: "opt1", label: t('defaultValues.selectOptions.option1') }],
                               }
                             : {})}
                           {...(key === "checkbox"
@@ -1284,7 +1288,7 @@ export default function ComponentPlayground() {
                   {variant.name}
                 </h3>
                 <p className="text-xs text-gray-500 dark:text-gray-400">
-                  Click to customize
+                  {t('showcase.clickToCustomize')}
                 </p>
               </div>
             )
@@ -1296,7 +1300,7 @@ export default function ComponentPlayground() {
       <div className="mt-8 bg-gradient-to-r from-blue-500 to-purple-600 rounded-xl p-6 text-white">
         <div className="flex items-center gap-2 mb-4">
           <BarChart3 className="w-5 h-5" />
-          <h2 className="text-xl font-semibold">Playground Stats</h2>
+          <h2 className="text-xl font-semibold">{t('stats.title')}</h2>
         </div>
         <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
           <div className="text-center">
@@ -1306,7 +1310,7 @@ export default function ComponentPlayground() {
             <div className="text-2xl font-bold">
               {Object.keys(componentVariants.button).length}
             </div>
-            <div className="text-sm opacity-80">Button Types</div>
+            <div className="text-sm opacity-80">{t('stats.buttonTypes')}</div>
           </div>
           <div className="text-center">
             <div className="flex items-center justify-center mb-2">
@@ -1315,7 +1319,7 @@ export default function ComponentPlayground() {
             <div className="text-2xl font-bold">
               {Object.keys(componentVariants.card).length}
             </div>
-            <div className="text-sm opacity-80">Card Types</div>
+            <div className="text-sm opacity-80">{t('stats.cardTypes')}</div>
           </div>
           <div className="text-center">
             <div className="flex items-center justify-center mb-2">
@@ -1324,18 +1328,18 @@ export default function ComponentPlayground() {
             <div className="text-2xl font-bold">
               {Object.keys(componentVariants.input).length}
             </div>
-            <div className="text-sm opacity-80">Input Types</div>
+            <div className="text-sm opacity-80">{t('stats.inputTypes')}</div>
           </div>
           <div className="text-center">
             <div className="flex items-center justify-center mb-2">
               <Heart className="w-6 h-6 opacity-80" />
             </div>
             <div className="text-2xl font-bold">{favorites.length}</div>
-            <div className="text-sm opacity-80">Favorites</div>
+            <div className="text-sm opacity-80">{t('stats.favorites')}</div>
           </div>
         </div>
       </div>
       <ToastContainer />
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/app/components/page.jsx b/src/app/components/page.jsx
index d4b7007..2d55af9 100644
--- a/src/app/components/page.jsx
+++ b/src/app/components/page.jsx
@@ -1,44 +1,25 @@
 "use client";
 import { useState, useEffect, useRef } from "react";
 import { Search, SparklesIcon, X } from "lucide-react";
+import { useTranslations } from 'next-intl';
 
+// [All imports remain the same as in your original code]
 import { useAnalytics } from "../context/AnalyticsContext";
 import { useTheme } from "../context/ThemeContext";
 
 // Button Imports
-// import PrimaryButton from '@/components/buttons/PrimaryButton'
-// import SecondaryButton from '@/components/buttons/SecondaryButton'
-// import GhostButton from '@/components/buttons/GhostButton'
-// import IconButton from '@/components/buttons/IconButton'
-// import OutlineButton from '@/components/buttons/OutlineButton'
-// import DangerButton from '@/components/buttons/DangerButton'
-// import SuccessButton from '@/components/buttons/SuccessButton'
-// // Cards
-// import SimpleCard from '@/components/cards/SimpleCard'
-// import ImageCard from '@/components/cards/ImageCard'
-// import FeatureCard from '@/components/cards/FeatureCard'
-// import PricingCard from '@/components/cards/PricingCard'
-// import DataCard from '@/components/cards/DataCard'
-// // Inputs
-// import TextInput from '@/components/inputs/TextInput'
-// import Select from '@/components/inputs/Select'
-// import Checkbox from '@/components/inputs/Checkbox'
-// // Nav
-// import Tabs from '@/components/navigation/Tabs'
-// import Breadcrumb from '@/components/navigation/Breadcrumb'
-// import Pagination from '@/components/navigation/Pagination'
-
-// button Imports
 import PrimaryButton from "./buttons/PrimaryButton";
 import SecondaryButton from "./buttons/SecondaryButton";
 import GhostButton from "./buttons/GhostButton";
 import IconButton from "./buttons/IconButton";
 import NeonButton from "./buttons/NeonButton";
 import GradientButton from "./buttons/GradientButton";
-
 import OutlineButton from "./buttons/OutlineButton";
 import DangerButton from "./buttons/DangerButton";
 import SuccessButton from "./buttons/SuccessButton";
+import GlassButton from "@/app/components/buttons/GlassButton";
+import RainbowButton from "@/app/components/buttons/RainbowButton";
+
 // Cards
 import SimpleCard from "./cards/SimpleCard";
 import ImageCard from "./cards/ImageCard";
@@ -46,56 +27,64 @@ import FeatureCard from "./cards/FeatureCard";
 import PricingCard from "./cards/PricingCard";
 import DataCard from "./cards/DataCard";
 import SmartCard from "./cards/SmartCard";
+import UserCard from "@/app/components/cards/UserCard";
+
 // Inputs
 import TextInput from "./inputs/TextInput";
 import Select from "./inputs/Select";
 import Checkbox from "./inputs/Checkbox";
 import PasswordInput from "./inputs/PasswordInput";
+
 // Nav
 import Tabs from "./navigation/Tabs";
 import Breadcrumb from "./navigation/Breadcrumb";
 import Pagination from "./navigation/Pagination";
-import GlassButton from "@/app/components/buttons/GlassButton";
-import UserCard from "@/app/components/cards/UserCard";
-import RainbowButton from "@/app/components/buttons/RainbowButton";
+
 //Backgrounds
 import InteractiveTiles from "./backgrounds/InteractiveTiles";
+
 //Badge
 import { Badge, Chip } from "./Badge";
 
 // alerts
 import ALertManager from "./alert/ALertManager";
-// laoders
-import Loader from "./loaders/Loader";
-// form Input
 
+// loaders
+import Loader from "./loaders/Loader";
+import DualRingLoader from "./loaders/DualRingLoader";
+import DotsLoader from "./loaders/DotsLoader";
+import BarLoader from "./loaders/BarLoader";
 
+// Tooltips
+import Tooltip from "./tooltips/Tooltip";
+import AnimatedTooltip from "./tooltips/AnimatedTooltip";
 
+// Form Input
 import { DatePicker } from "./FormInput/DatePicker";
 import { FileUpload } from "./FormInput/FileUpload";
 import { FormValidation } from "./FormInput/FormValidation";
 import { Slider } from "./FormInput/Slider";
 import LoginForm from "./FormInput/LoginForm";
+import SignupPage from "./FormInput/SignupPage";
+import OTPVerification from "./FormInput/OTPVerification";
 
 // Avatar
 import { Avatar, AvatarGroup } from "./Avatar/Avatar";
-import DualRingLoader from "./loaders/DualRingLoader";
-import DotsLoader from "./loaders/DotsLoader";
-import BarLoader from "./loaders/BarLoader";
-import Tooltip from "./tooltips/Tooltip";
-import AnimatedTooltip from "./tooltips/AnimatedTooltip";
 
 // Accordion
 import Accordion from "./Accordion/index";
+
+// Calendar
+import Calendar from "./Calender/Calendar";
+
 // icons
 import { HiOutlineRefresh } from "react-icons/hi";
 import { FaTrash } from "react-icons/fa";
-import SignupPage from "./FormInput/SignupPage";
-import OTPVerification from "./FormInput/OTPVerification";
-// Calendar
-import Calendar from "./Calender/Calendar";
 
 export default function Page() {
+  // Translations
+  const t = useTranslations('comps');
+
   // Search and Filter State
   const [searchTerm, setSearchTerm] = useState("");
   const [filterType, setFilterType] = useState("all");
@@ -109,7 +98,7 @@ export default function Page() {
   // Track page view - only once on mount
   useEffect(() => {
     trackComponentView("ComponentsPage");
-  }, []); // Empty dependency array to run only once
+  }, []);
 
   // Inputs
   const [inputValue, setInputValue] = useState("");
@@ -118,32 +107,32 @@ export default function Page() {
 
   // Data
   const selectOptions = [
-    { value: "option1", label: "Option 1" },
-    { value: "option2", label: "Option 2" },
-    { value: "option3", label: "Option 3" },
+    { value: "option1", label: t('selectOptions.option1') },
+    { value: "option2", label: t('selectOptions.option2') },
+    { value: "option3", label: t('selectOptions.option3') },
   ];
 
   const tabsData = [
     {
-      label: "Dashboard",
-      content: <div className="p-4">Dashboard content goes here...</div>,
+      label: t('tabs.dashboard'),
+      content: <div className="p-4">{t('tabs.dashboardContent')}</div>,
       badge: "3",
     },
     {
-      label: "Analytics",
-      content: <div className="p-4">Analytics content goes here...</div>,
+      label: t('tabs.analytics'),
+      content: <div className="p-4">{t('tabs.analyticsContent')}</div>,
     },
     {
-      label: "Settings",
-      content: <div className="p-4">Settings content goes here...</div>,
+      label: t('tabs.settings'),
+      content: <div className="p-4">{t('tabs.settingsContent')}</div>,
     },
   ];
 
   const breadcrumbItems = [
-    { label: "Home", href: "/" },
-    { label: "Components", href: "/components" },
-    { label: "Navigation", href: "/components/navigation" },
-    { label: "Breadcrumb" },
+    { label: t('breadcrumb.home'), href: "/" },
+    { label: t('breadcrumb.components'), href: "/components" },
+    { label: t('breadcrumb.navigation'), href: "/components/navigation" },
+    { label: t('breadcrumb.breadcrumb') },
   ];
 
   // avatar
@@ -179,161 +168,161 @@ export default function Page() {
     { date: fmt(new Date(today.getFullYear(), today.getMonth(), today.getDate() + 5)), label: "Review", color: "#f59e0b" },
   ];
 
-
   // All components with search data
   const allComponents = {
     buttons: [
       {
-        name: "Primary Button",
-        component: <PrimaryButton>Primary</PrimaryButton>,
+        name: t('buttons.primary.name'),
+        component: <PrimaryButton>{t('buttons.primary.label')}</PrimaryButton>,
         keywords: ["primary", "main", "action", "cta"],
-        desc: "Used for Main Actions",
+        desc: t('buttons.primary.desc'),
+      },
+      {
+        name: t('buttons.gradient.name'),
+        component: <GradientButton>{t('buttons.gradient.label')}</GradientButton>,
+        keywords: ["gradient", "colorful", "bright", "cta"],
+        desc: t('buttons.gradient.desc'),
+      },
+      {
+        name: t('buttons.neon.name'),
+        component: <NeonButton>{t('buttons.neon.label')}</NeonButton>,
+        keywords: ["neon", "glow", "bright", "futuristic"],
+        desc: t('buttons.neon.desc'),
       },
-       {
-    name: "Gradient Button",
-    component: <GradientButton>Gradient</GradientButton>,
-    keywords: ["gradient", "colorful", "bright", "cta"],
-    desc: "Vibrant gradient button with hover scaling and loading spinner",
-  },
-{
-  name: "Neon Button",
-  component: <NeonButton>Neon</NeonButton>,
-  keywords: ["neon", "glow", "bright", "futuristic"],
-  desc: "Glowing futuristic button with loading spinner and hover scaling",
-},
-
       {
-        name: "Secondary Button",
-        component: <SecondaryButton>Secondary</SecondaryButton>,
+        name: t('buttons.secondary.name'),
+        component: <SecondaryButton>{t('buttons.secondary.label')}</SecondaryButton>,
         keywords: ["secondary", "alternate"],
-        desc: "Used for secondary Actions",
+        desc: t('buttons.secondary.desc'),
       },
       {
-        name: "Ghost Button",
-        component: <GhostButton>Ghost</GhostButton>,
+        name: t('buttons.ghost.name'),
+        component: <GhostButton>{t('buttons.ghost.label')}</GhostButton>,
         keywords: ["ghost", "transparent", "subtle"],
-        desc: "Used for minimal actions",
+        desc: t('buttons.ghost.desc'),
       },
       {
-        name: "Outline Button",
-        component: <OutlineButton>Outline</OutlineButton>,
+        name: t('buttons.outline.name'),
+        component: <OutlineButton>{t('buttons.outline.label')}</OutlineButton>,
         keywords: ["outline", "border", "stroke"],
-        desc: "Used for gives outline",
+        desc: t('buttons.outline.desc'),
       },
       {
-        name: "Danger Button",
-        component: <DangerButton>Danger</DangerButton>,
+        name: t('buttons.danger.name'),
+        component: <DangerButton>{t('buttons.danger.label')}</DangerButton>,
         keywords: ["danger", "error", "delete", "warning", "red"],
-        desc: "Used for destructive actions",
+        desc: t('buttons.danger.desc'),
       },
       {
-        name: "Success Button",
-        component: <SuccessButton>Success</SuccessButton>,
+        name: t('buttons.success.name'),
+        component: <SuccessButton>{t('buttons.success.label')}</SuccessButton>,
         keywords: ["success", "confirm", "done", "green"],
-        desc: "Used for success actions",
+        desc: t('buttons.success.desc'),
       },
       {
-        name: "Icon Button",
+        name: t('buttons.icon.name'),
         component: <IconButton aria-label="star">★</IconButton>,
         keywords: ["icon", "star", "symbol"],
-        desc: "Used for icons",
+        desc: t('buttons.icon.desc'),
       },
       {
-        name: "Rainbow Button",
-        component: <RainbowButton>Rainbow</RainbowButton>,
+        name: t('buttons.rainbow.name'),
+        component: <RainbowButton>{t('buttons.rainbow.label')}</RainbowButton>,
         keywords: ["rainbow", "action", "colorful"],
-        desc: "Used for call to actions",
+        desc: t('buttons.rainbow.desc'),
       },
       {
-        name: 'Glass Button',
-        component: <GlassButton>Button</GlassButton>,
+        name: t('buttons.glass.name'),
+        component: <GlassButton>{t('buttons.glass.label')}</GlassButton>,
         keywords: ['glass', 'cta', 'action'],
-        desc: "Used for any action"
+        desc: t('buttons.glass.desc')
       },
     ],
     cards: [
       {
-        name: "Simple Card",
+        name: t('cards.simple.name'),
         component: (
           <SimpleCard
-            title="Simple Card"
-            description="A minimal card with actions."
+            title={t('cards.simple.title')}
+            description={t('cards.simple.description')}
           />
         ),
         keywords: ["simple", "basic", "minimal"],
       },
       {
-  name: "Smart Card",
-  component: (
-    <SmartCard
-      title="Smart Card"
-      description="A modern card with gradient background, hover effects, and optional footer."
-      footer={<PrimaryButton>Action</PrimaryButton>}
-      imageSrc="https://tse2.mm.bing.net/th/id/OIP.JRfh9R3XUoRd3vhgT3rEFwHaEn?cb=12&rs=1&pid=ImgDetMain&o=7&rm=3"
-    />
-  ),
-  keywords: ["smart", "gradient", "card", "hover", "footer", "image"],
-},
-
+        name: t('cards.smart.name'),
+        component: (
+          <SmartCard
+            title={t('cards.smart.title')}
+            description={t('cards.smart.description')}
+            footer={<PrimaryButton>{t('cards.smart.footer')}</PrimaryButton>}
+            imageSrc="https://tse2.mm.bing.net/th/id/OIP.JRfh9R3XUoRd3vhgT3rEFwHaEn?cb=12&rs=1&pid=ImgDetMain&o=7&rm=3"
+          />
+        ),
+        keywords: ["smart", "gradient", "card", "hover", "footer", "image"],
+      },
       {
-        name: "Image Card",
+        name: t('cards.image.name'),
         component: (
-          <ImageCard title="Image Card" description="Card with SVG image." />
+          <ImageCard title={t('cards.image.title')} description={t('cards.image.description')} />
         ),
         keywords: ["image", "picture", "visual"],
       },
       {
-        name: "Feature Card",
+        name: t('cards.feature.name'),
         component: (
           <FeatureCard
-            title="Feature Card"
-            description="Highlight features and benefits."
+            title={t('cards.feature.title')}
+            description={t('cards.feature.description')}
           />
         ),
         keywords: ["feature", "highlight", "benefit"],
       },
       {
-        name: "Pricing Card",
+        name: t('cards.pricing.name'),
         component: (
           <PricingCard
-            plan="Pro"
-            price="$9/mo"
-            features={["10 projects", "Priority support", "Unlimited users"]}
+            plan={t('cards.pricing.plan')}
+            price={t('cards.pricing.price')}
+            features={[
+              t('cards.pricing.features.0'),
+              t('cards.pricing.features.1'),
+              t('cards.pricing.features.2')
+            ]}
           />
         ),
         keywords: ["pricing", "plan", "subscription", "price"],
       },
       {
-        name: "Data Card",
+        name: t('cards.data.name'),
         component: (
-          <DataCard title="Active Projects" value="27" icon="📂" trend={8} />
+          <DataCard title={t('cards.data.title')} value="27" icon="📂" trend={8} />
         ),
         keywords: ["data", "stats", "analytics", "metrics"],
       },
     ],
     inputs: [
       {
-        name: "Text Input",
-        component: <TextInput label="Sample Input" placeholder="Enter text" />,
+        name: t('inputs.text.name'),
+        component: <TextInput label={t('inputs.text.label')} placeholder={t('inputs.text.placeholder')} />,
         keywords: ["text", "input", "field", "form"],
       },
       {
-  name: "Password Input",
-  component: <PasswordInput value="" onChange={() => {}} placeholder="Enter password" />,
-  keywords: ["password", "input", "field", "form", "show", "hide"],
-},
-
+        name: t('inputs.password.name'),
+        component: <PasswordInput value="" onChange={() => {}} placeholder={t('inputs.password.placeholder')} />,
+        keywords: ["password", "input", "field", "form", "show", "hide"],
+      },
       {
-        name: "Select",
-        component: <Select label="Sample Select" options={selectOptions} />,
+        name: t('inputs.select.name'),
+        component: <Select label={t('inputs.select.label')} options={selectOptions} />,
         keywords: ["select", "dropdown", "options", "choice"],
       },
       {
-        name: "Checkbox",
+        name: t('inputs.checkbox.name'),
         component: (
           <Checkbox
-            label="Sample Checkbox"
-            description="Check this option"
+            label={t('inputs.checkbox.label')}
+            description={t('inputs.checkbox.description')}
             checked={false}
             onChange={() => { }}
           />
@@ -341,7 +330,7 @@ export default function Page() {
         keywords: ["checkbox", "check", "toggle", "boolean"],
       },
       {
-        name: "Login Form",
+        name: t('inputs.loginForm.name'),
         component: (
           <LoginForm
             variant="minimal"
@@ -352,40 +341,40 @@ export default function Page() {
           />
         ),
         keywords: ["login", "form", "authentication", "signin", "auth", "email", "password"],
-        desc: "Complete login form with validation and social login options"
+        desc: t('inputs.loginForm.desc')
       },
       {
-        name: "Calendar",
+        name: t('inputs.calendar.name'),
         component: (
           <div className="max-w-md">
             <Calendar events={calendarEvents} />
           </div>
         ),
         keywords: ["calendar", "date", "schedule", "month", "events"],
-        desc: "Accessible, responsive month-view calendar with event indicators"
+        desc: t('inputs.calendar.desc')
       },
     ],
     backgrounds: [
       {
-        name: "Interactive Tiles",
+        name: t('backgrounds.interactiveTiles.name'),
         component: <InteractiveTiles />,
         keywords: ["interactive", "tiles", "backgrounds", "grid"],
-        desc: "Interactive tiles background",
+        desc: t('backgrounds.interactiveTiles.desc'),
       },
     ],
     navigation: [
       {
-        name: "Breadcrumb",
+        name: t('navigation.breadcrumb.name'),
         component: <Breadcrumb items={breadcrumbItems} />,
         keywords: ["breadcrumb", "navigation", "path", "hierarchy"],
       },
       {
-        name: "Tabs",
+        name: t('navigation.tabs.name'),
         component: <Tabs tabs={tabsData} defaultTab={0} />,
         keywords: ["tabs", "navigation", "switch", "toggle"],
       },
       {
-        name: "Pagination",
+        name: t('navigation.pagination.name'),
         component: (
           <Pagination currentPage={1} totalPages={5} maxVisiblePages={3} />
         ),
@@ -394,87 +383,88 @@ export default function Page() {
     ],
     badges: [
       {
-        name: "Badge",
+        name: t('badges.badge.name'),
         component: (
           <div className="flex flex-wrap gap-2">
-            <Badge variant="primary">Primary</Badge>
-            <Badge variant="success" size="sm">Success</Badge>
-            <Badge variant="warning" size="lg">Warning</Badge>
-            <Badge variant="danger" pill>Danger</Badge>
-            <Badge variant="neutral" onClose={() => { }}>Closable</Badge>
-            <Badge variant="primary" icon={<SparklesIcon className="h-4 w-4" />}>With Icon</Badge>
-            <Badge variant="primary" count={5}>Notifications</Badge>
+            <Badge variant="primary">{t('badges.badge.primary')}</Badge>
+            <Badge variant="success" size="sm">{t('badges.badge.success')}</Badge>
+            <Badge variant="warning" size="lg">{t('badges.badge.warning')}</Badge>
+            <Badge variant="danger" pill>{t('badges.badge.danger')}</Badge>
+            <Badge variant="neutral" onClose={() => { }}>{t('badges.badge.closable')}</Badge>
+            <Badge variant="primary" icon={<SparklesIcon className="h-4 w-4" />}>{t('badges.badge.withIcon')}</Badge>
+            <Badge variant="primary" count={5}>{t('badges.badge.notifications')}</Badge>
           </div>
         ),
         keywords: ["badge", "tag", "label", "status", "indicator"],
-        desc: "Used for status indicators and labels",
+        desc: t('badges.badge.desc'),
       },
       {
-        name: "Chip",
+        name: t('badges.chip.name'),
         component: (
           <div className="flex flex-wrap gap-2">
-            <Chip variant="primary">Primary Chip</Chip>
-            <Chip variant="success">Success</Chip>
-            <Chip variant="warning">Warning</Chip>
-            <Chip variant="danger">Danger</Chip>
-            <Chip variant="neutral" onRemove={() => { }}>Closable</Chip>
-            <Chip variant="primary" icon={<SparklesIcon className="h-4 w-4" />}>With Icon</Chip>
+            <Chip variant="primary">{t('badges.chip.primary')}</Chip>
+            <Chip variant="success">{t('badges.chip.success')}</Chip>
+            <Chip variant="warning">{t('badges.chip.warning')}</Chip>
+            <Chip variant="danger">{t('badges.chip.danger')}</Chip>
+            <Chip variant="neutral" onRemove={() => { }}>{t('badges.chip.closable')}</Chip>
+            <Chip variant="primary" icon={<SparklesIcon className="h-4 w-4" />}>{t('badges.chip.withIcon')}</Chip>
           </div>
         ),
         keywords: ["chip", "tag", "label", "filter", "category"],
-        desc: "Used for filters, categories, and removable tags",
+        desc: t('badges.chip.desc'),
       },
     ],
     utility: [
       {
-        name: 'MinimalAlert',
+        name: t('utility.alert.name'),
         component: (
           <div className="flex justify-center items-center">
             <ALertManager />
           </div>
         ),
         keywords: ['alert', 'popup'],
-      }, {
-        name: 'Loaders',
+      }, 
+      {
+        name: t('utility.loaders.name'),
         component: (
           <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
             <div className="flex items-center flex-col gap-10">
-              <h1 className=" bg-blue-600 text-left font-semibold text-xl shadow-2xl border-2 p-4 rounded-full ">Simple Loader</h1>
+              <h1 className=" bg-blue-600 text-left font-semibold text-xl shadow-2xl border-2 p-4 rounded-full ">{t('utility.loaders.simple')}</h1>
               <Loader />
             </div>
             <div className="flex items-center flex-col gap-10">
-              <h1 className=" text-left bg-black font-semibold text-xl shadow-2xl border-2 p-4 rounded-full ">Dual Loader</h1>
+              <h1 className=" text-left bg-black font-semibold text-xl shadow-2xl border-2 p-4 rounded-full ">{t('utility.loaders.dual')}</h1>
               <DualRingLoader />
             </div>
             <div className="flex items-center flex-col gap-10">
-              <h1 className="bg-gradient-to-r from-red-400 via-green-500 to-blue-400 text-left font-semibold text-xl shadow-2xl border-2 p-4 rounded-full ">Dots Loader</h1>
+              <h1 className="bg-gradient-to-r from-red-400 via-green-500 to-blue-400 text-left font-semibold text-xl shadow-2xl border-2 p-4 rounded-full ">{t('utility.loaders.dots')}</h1>
               <div className="mt-8"><DotsLoader /></div>
             </div>
             <div className="flex items-center flex-col gap-10">
-              <h1 className="bg-emerald-400 text-left font-semibold text-xl shadow-2xl border-2 p-4 rounded-full ">Bar Loader</h1>
+              <h1 className="bg-emerald-400 text-left font-semibold text-xl shadow-2xl border-2 p-4 rounded-full ">{t('utility.loaders.bar')}</h1>
               <div className="mt-4">
                 <BarLoader />
               </div>
             </div>
           </div>
-
         ),
-        keywords: ['spiner', 'loader', 'loading'],
-      }, {
-        name: 'Tooltips',
+        keywords: ['spinner', 'loader', 'loading'],
+      }, 
+      {
+        name: t('utility.tooltips.name'),
         component: (
           <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 mt-6 ml-4">
             <div className="flex items-center flex-col gap-8">
-              <h1 className=" bg-gray-900 text-left font-semibold text-lg shadow-2xl border-2 py-2 px-4 rounded-full ">Simple ToolTip</h1>
-              <Tooltip text="Click to refresh">
+              <h1 className=" bg-gray-900 text-left font-semibold text-lg shadow-2xl border-2 py-2 px-4 rounded-full ">{t('utility.tooltips.simple')}</h1>
+              <Tooltip text={t('utility.tooltips.refreshText')}>
                 <button className="bg-blue-500 text-white px-4 py-2 rounded">
                   <HiOutlineRefresh size={26} />
                 </button>
               </Tooltip>
             </div>
             <div className="flex items-center flex-col gap-8">
-              <h1 className=" bg-red-900 text-left font-semibold text-lg shadow-2xl border-2 py-2 px-4 rounded-full ">Simple ToolTip</h1>
-              <AnimatedTooltip text="Delete item">
+              <h1 className=" bg-red-900 text-left font-semibold text-lg shadow-2xl border-2 py-2 px-4 rounded-full ">{t('utility.tooltips.animated')}</h1>
+              <AnimatedTooltip text={t('utility.tooltips.deleteText')}>
                 <button className="bg-red-500 text-white px-4 py-2 rounded">
                   <FaTrash size={26} />
                 </button>
@@ -493,26 +483,26 @@ export default function Page() {
             <div className="space-y-8 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-2 gap-6">
               {/* Basic Accordion */}
               <div className="space-y-4">
-                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Basic Accordion</h3>
+                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">{t('accordion.basic.title')}</h3>
                 <Accordion
                   variant="bordered"
                   defaultOpen={0}
                   items={[
                     {
-                      title: "What is React?",
-                      content: "React is a JavaScript library for building user interfaces, particularly web applications. It allows developers to create reusable UI components and manage application state efficiently."
+                      title: t('accordion.basic.items.0.title'),
+                      content: t('accordion.basic.items.0.content')
                     },
                     {
-                      title: "How does React work?",
-                      content: "React uses a virtual DOM to efficiently update and render components. When state changes, React creates a new virtual DOM tree, compares it with the previous one, and updates only the necessary parts of the real DOM."
+                      title: t('accordion.basic.items.1.title'),
+                      content: t('accordion.basic.items.1.content')
                     },
                     {
-                      title: "What are React hooks?",
-                      content: "React hooks are functions that let you use state and other React features in functional components. Common hooks include useState, useEffect, useContext, and useReducer."
+                      title: t('accordion.basic.items.2.title'),
+                      content: t('accordion.basic.items.2.content')
                     },
                     {
-                      title: "What is JSX?",
-                      content: "JSX is a syntax extension for JavaScript that allows you to write HTML-like code in your JavaScript files. It makes it easier to create and manage UI components in React."
+                      title: t('accordion.basic.items.3.title'),
+                      content: t('accordion.basic.items.3.content')
                     },
                   ]}
                 />
@@ -520,26 +510,26 @@ export default function Page() {
 
               {/* Multiple Open Accordion */}
               <div className="space-y-4">
-                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Multiple Open Accordion</h3>
+                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">{t('accordion.multiple.title')}</h3>
                 <Accordion
                   allowMultiple
                   variant="shadow"
                   items={[
                     {
-                      title: "🚀 Performance Tips",
-                      content: "Use React.memo, useMemo, and useCallback to optimize performance. Avoid creating objects and functions in render methods, and use proper dependency arrays in useEffect."
+                      title: t('accordion.multiple.items.0.title'),
+                      content: t('accordion.multiple.items.0.content')
                     },
                     {
-                      title: "🎨 Styling Approaches",
-                      content: "You can style React components using CSS modules, styled-components, Tailwind CSS, or inline styles. Choose the approach that best fits your project's needs and team preferences."
+                      title: t('accordion.multiple.items.1.title'),
+                      content: t('accordion.multiple.items.1.content')
                     },
                     {
-                      title: "🔧 Development Tools",
-                      content: "Essential tools include React Developer Tools browser extension, Create React App, Next.js, Vite, and various testing libraries like Jest and React Testing Library."
+                      title: t('accordion.multiple.items.2.title'),
+                      content: t('accordion.multiple.items.2.content')
                     },
                     {
-                      title: "📱 Mobile Development",
-                      content: "For mobile development, consider React Native for cross-platform apps, or use responsive design techniques with React for mobile web applications."
+                      title: t('accordion.multiple.items.3.title'),
+                      content: t('accordion.multiple.items.3.content')
                     },
                   ]}
                 />
@@ -547,21 +537,21 @@ export default function Page() {
 
               {/* Minimal Accordion */}
               <div className="space-y-4">
-                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Minimal Accordion</h3>
+                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">{t('accordion.minimal.title')}</h3>
                 <Accordion
                   variant="minimal"
                   items={[
                     {
-                      title: "Getting Started",
-                      content: "To get started with React, install Node.js, create a new project using Create React App or Vite, and start building your first component. The official React documentation is an excellent resource."
+                      title: t('accordion.minimal.items.0.title'),
+                      content: t('accordion.minimal.items.0.content')
                     },
                     {
-                      title: "Best Practices",
-                      content: "Follow component composition patterns, keep components small and focused, use proper prop types or TypeScript, and implement proper error boundaries for better user experience."
+                      title: t('accordion.minimal.items.1.title'),
+                      content: t('accordion.minimal.items.1.content')
                     },
                     {
-                      title: "State Management",
-                      content: "For simple applications, useState and useReducer are sufficient. For complex state management, consider Context API, Redux, Zustand, or other state management libraries."
+                      title: t('accordion.minimal.items.2.title'),
+                      content: t('accordion.minimal.items.2.content')
                     },
                   ]}
                 />
@@ -569,18 +559,18 @@ export default function Page() {
 
               {/* Always Open Accordion */}
               <div className="space-y-4">
-                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Always Open Accordion</h3>
+                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">{t('accordion.alwaysOpen.title')}</h3>
                 <Accordion
                   alwaysOpen
                   variant="minimal"
                   items={[
                     {
-                      title: "📚 Learning Resources",
-                      content: "Check out the official React documentation, React tutorials on YouTube, online courses like those on Udemy or Coursera, and practice with coding challenges on platforms like LeetCode or HackerRank."
+                      title: t('accordion.alwaysOpen.items.0.title'),
+                      content: t('accordion.alwaysOpen.items.0.content')
                     },
                     {
-                      title: "🌐 Community",
-                      content: "Join React communities on Discord, Reddit (r/reactjs), Stack Overflow, and GitHub. Participate in discussions, ask questions, and share your knowledge with other developers."
+                      title: t('accordion.alwaysOpen.items.1.title'),
+                      content: t('accordion.alwaysOpen.items.1.content')
                     },
                   ]}
                 />
@@ -633,17 +623,14 @@ export default function Page() {
 
   return (
     <div className="min-h-screen bg-gray-50 dark:bg-gray-900 transition-colors duration-500">
-      {/* <ThemeToggle theme={theme} setTheme={setTheme} /> */}
-
       {/* Glassmorphism Hero Header */}
       <section className="relative max-w-5xl mx-auto px-4 mt-8 mb-16">
         <div className="backdrop-blur-md bg-white/70 dark:bg-gray-900/70 rounded-2xl shadow-2xl py-12 px-8 flex flex-col items-center gap-6 border border-gray-50 dark:border-gray-800">
           <h1 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-blue-600 to-purple-500 bg-clip-text text-transparent">
-            React UI Playground
+            {t('hero.title')}
           </h1>
           <p className="text-xl text-gray-600 dark:text-gray-300 text-center max-w-2xl">
-            Beautiful, modern & responsive component demo – each below section
-            is styled for clarity, vibrance, and accessibility.
+            {t('hero.description')}
           </p>
 
           {/* Search Bar */}
@@ -654,7 +641,7 @@ export default function Page() {
                 type="text"
                 value={searchTerm}
                 onChange={(e) => setSearchTerm(e.target.value)}
-                placeholder="Search components (buttons, cards, primary, etc.)"
+                placeholder={t('search.placeholder')}
                 className="w-full pl-9 pr-8 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition-all text-sm bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm"
               />
               {searchTerm && (
@@ -672,13 +659,13 @@ export default function Page() {
                 onChange={(e) => setFilterType(e.target.value)}
                 className="w-full py-3 px-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition-all bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm text-sm"
               >
-                <option value="all">All Components</option>
-                <option value="buttons">Buttons</option>
-                <option value="backgrounds">Backgrounds</option>
-                <option value="cards">Cards</option>
-                <option value="inputs">Inputs</option>
-                <option value="navigation">Navigation</option>
-                <option value="badges">Badges</option>
+                <option value="all">{t('filter.all')}</option>
+                <option value="buttons">{t('filter.buttons')}</option>
+                <option value="backgrounds">{t('filter.backgrounds')}</option>
+                <option value="cards">{t('filter.cards')}</option>
+                <option value="inputs">{t('filter.inputs')}</option>
+                <option value="navigation">{t('filter.navigation')}</option>
+                <option value="badges">{t('filter.badges')}</option>
               </select>
             </div>
           </div>
@@ -690,10 +677,11 @@ export default function Page() {
         <div className="max-w-5xl mx-auto px-4 mb-8">
           <div className="bg-blue-50 dark:bg-blue-900/30 p-4 rounded-lg border border-blue-200 dark:border-blue-800">
             <p className="text-blue-800 dark:text-blue-200">
-              Found <span className="font-semibold">{totalResults}</span>{" "}
-              component{totalResults !== 1 ? "s" : ""}
-              {searchTerm && ` matching "${searchTerm}"`}
-              {filterType !== "all" && ` in ${filterType}`}
+              {t('search.results', { 
+                count: totalResults, 
+                search: searchTerm,
+                filter: filterType !== 'all' ? t(`filter.${filterType}`) : 'all'
+              })}
             </p>
           </div>
         </div>
@@ -704,7 +692,7 @@ export default function Page() {
         <div className="max-w-5xl mx-auto px-4 text-center py-12">
           <div className="text-6xl mb-4">🔍</div>
           <h3 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">
-            No components found
+            {t('search.noResults')}
           </h3>
         </div>
       )}
@@ -718,7 +706,9 @@ export default function Page() {
             className="bg-white/90 dark:bg-gray-900/90 border border-blue-100 dark:border-blue-900 shadow-xl rounded-2xl p-10 transition-colors duration-300"
           >
             <h2 className="relative text-2xl font-semibold mb-6 flex justify-center items-center gap-2 text-blue-700 dark:text-blue-200">
-              <span className="whitespace-nowrap text-[1.3rem] sm:text-2xl md:text-3xl lg:text-3xl">Buttons ({filteredComponents.buttons.length})</span>
+              <span className="whitespace-nowrap text-[1.3rem] sm:text-2xl md:text-3xl lg:text-3xl">
+                {t('sections.buttons')} ({filteredComponents.buttons.length})
+              </span>
               <span className="absolute top-10 h-1 w-full bg-gradient-to-r from-blue-400 to-fuchsia-400 rounded-full block" />
             </h2>
             <div className="mt-8 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-4">
@@ -768,7 +758,9 @@ export default function Page() {
             className="bg-gradient-to-br from-purple-50 via-pink-50 to-indigo-50 dark:from-[#23293b] dark:via-[#1e142e] dark:to-[#222849] border border-purple-100 dark:border-purple-900 shadow-xl rounded-2xl p-10"
           >
             <h2 className="relative text-2xl font-semibold mb-6 flex justify-center items-center gap-2 text-purple-600 dark:text-fuchsia-200">
-              <span className="whitespace-nowrap text-[1.3rem] sm:text-2xl md:text-3xl lg:text-3xl">Cards ({filteredComponents.cards.length})</span>
+              <span className="whitespace-nowrap text-[1.3rem] sm:text-2xl md:text-3xl lg:text-3xl">
+                {t('sections.cards')} ({filteredComponents.cards.length})
+              </span>
               <span className="absolute top-10 h-1 w-full bg-gradient-to-r from-purple-300 to-fuchsia-300 rounded-full block" />
             </h2>
             <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
@@ -788,7 +780,9 @@ export default function Page() {
             className="bg-white/90 w-full dark:bg-gray-900/90 border border-green-100 dark:border-green-900 shadow-xl rounded-2xl p-10"
           >
             <h2 className="relative text-2xl font-semibold mb-6 flex items-center justify-center gap-2 text-green-700 dark:text-green-200">
-              <span className="whitespace-nowrap text-[1.3rem] sm:text-2xl md:text-3xl lg:text-3xl">Input Components ({filteredComponents.inputs.length})</span>
+              <span className="whitespace-nowrap text-[1.3rem] sm:text-2xl md:text-3xl lg:text-3xl">
+                {t('sections.inputs')} ({filteredComponents.inputs.length})
+              </span>
               <span className="absolute top-10 h-1 w-full bg-gradient-to-r from-green-300 to-sky-300 rounded-full block" />
             </h2>
             <div className="max-w-lg space-y-6 flex flex-col justify-center">
@@ -802,23 +796,23 @@ export default function Page() {
                 allComponents.inputs.length && (
                   <>
                     <TextInput
-                      label="Email Address"
-                      placeholder="Enter your email"
+                      label={t('inputs.emailAddress.label')}
+                      placeholder={t('inputs.emailAddress.placeholder')}
                       value={inputValue}
                       onChange={(e) => setInputValue(e.target.value)}
-                      helperText="We'll never share your email"
+                      helperText={t('inputs.emailAddress.helperText')}
                       required
                       className="text-gray-100 bg-gray-600 px-4 py-2"
                     />
                     <TextInput
-                      label="Password"
+                      label={t('inputs.password.label')}
                       type="password"
-                      placeholder="Enter your password"
-                      error="Password must be at least 8 characters"
+                      placeholder={t('inputs.password.placeholder')}
+                      error={t('inputs.password.error')}
                       className="text-gray-100 bg-gray-600 px-4 py-2"
                     />
                     <Select
-                      label="Choose an option"
+                      label={t('inputs.chooseOption.label')}
                       options={selectOptions}
                       value={selectValue}
                       onChange={(e) => setSelectValue(e.target.value)}
@@ -826,14 +820,14 @@ export default function Page() {
                       className="text-gray-100 bg-gray-600 px-4 py-2"
                     />
                     <Checkbox
-                      label="Terms and Conditions"
-                      description="I agree to the terms and conditions"
+                      label={t('inputs.termsConditions.label')}
+                      description={t('inputs.termsConditions.description')}
                       checked={checkboxValue}
                       onChange={(e) => setCheckboxValue(e.target.checked)}
                     />
                     <Checkbox
-                      label="Disabled Option"
-                      description="This option is disabled"
+                      label={t('inputs.disabledOption.label')}
+                      description={t('inputs.disabledOption.description')}
                       checked={false}
                       onChange={() => { }}
                       disabled
@@ -851,7 +845,9 @@ export default function Page() {
             className="bg-white/90 w-full dark:bg-gray-900/90 border border-indigo-100 dark:border-indigo-900 shadow-xl rounded-2xl p-10"
           >
             <h2 className="relative text-2xl font-semibold mb-6 flex items-center justify-center gap-2 text-indigo-700 dark:text-indigo-200">
-              <span className="whitespace-nowrap text-[1.3rem] sm:text-2xl md:text-3xl lg:text-3xl">Backgrounds ({filteredComponents.backgrounds.length})</span>
+              <span className="whitespace-nowrap text-[1.3rem] sm:text-2xl md:text-3xl lg:text-3xl">
+                {t('sections.backgrounds')} ({filteredComponents.backgrounds.length})
+              </span>
               <span className="absolute top-10 h-1 w-full bg-gradient-to-r from-indigo-300 to-purple-300 rounded-full block" />
             </h2>
             <div className="max-w-3xl">
@@ -874,7 +870,7 @@ export default function Page() {
           <section id="utility" className="bg-gradient-to-br from-pink-400 via-blue-400 to-red-400 border dark:border-amber-600 border-red-950 shadow-2xl rounded-2xl p-10">
             <h2 className="relative text-2xl font-semibold mb-6 flex items-center justify-center gap-2 text-gray-950">
               <span className="whitespace-nowrap text-[1.3rem] sm:text-2xl md:text-3xl lg:text-3xl">
-                Utility Components ({filteredComponents.utility.length})
+                {t('sections.utility')} ({filteredComponents.utility.length})
               </span>
               <span className="absolute top-10 h-1 w-full bg-gradient-to-r from-pink-200 to-pink-700 rounded-full block" />
             </h2>
@@ -897,7 +893,7 @@ export default function Page() {
           >
             <h2 className="relative text-2xl font-semibold mb-6 flex items-center justify-center gap-2 text-yellow-600 dark:text-yellow-200">
               <span className="whitespace-nowrap text-[1.1rem] sm:text-2xl md:text-3xl lg:text-3xl">
-                Navigation Components ({filteredComponents.navigation.length})
+                {t('sections.navigation')} ({filteredComponents.navigation.length})
               </span>
               <span className="absolute top-10 h-1 w-full bg-gradient-to-r from-yellow-300 to-pink-300 rounded-full block" />
             </h2>
@@ -916,25 +912,27 @@ export default function Page() {
         {filterType === "all" && !searchTerm && (
           <section className="bg-white/90 dark:bg-gray-900/90 border border-blue-100 dark:border-blue-900 shadow-xl rounded-2xl p-10">
             <h2 className="relative text-2xl font-semibold mb-6 flex items-center justify-center gap-2 text-blue-700 dark:text-blue-200">
-              <span className="whitespace-nowrap text-[1.2rem] sm:text-2xl md:text-3xl lg:text-3xl">Feedback Components</span>
+              <span className="whitespace-nowrap text-[1.2rem] sm:text-2xl md:text-3xl lg:text-3xl">
+                {t('sections.feedback')}
+              </span>
               <span className="absolute top-10 h-1 w-full bg-gradient-to-r from-blue-300 to-violet-300 rounded-full block" />
             </h2>
             <div className="grid gap-4">
               <div className="flex items-center gap-2 p-5 bg-gradient-to-r from-green-50 to-green-100/80 dark:from-green-900 dark:to-green-700 text-green-800 dark:text-green-200 rounded-xl font-semibold shadow-sm border border-green-200 dark:border-green-800">
                 <span className="text-2xl">✔</span>
-                <span>Success! Your action was completed.</span>
+                <span>{t('feedback.success')}</span>
               </div>
               <div className="flex items-center gap-2 p-5 bg-gradient-to-r from-red-50 to-red-100/80 dark:from-red-900 dark:to-red-700 text-red-800 dark:text-red-200 rounded-xl font-semibold shadow-sm border border-red-200 dark:border-red-800">
                 <span className="text-2xl">⛔️</span>
-                <span>Error! Something went wrong.</span>
+                <span>{t('feedback.error')}</span>
               </div>
               <div className="flex items-center gap-2 p-5 bg-gradient-to-r from-yellow-50 to-yellow-100/80 dark:from-yellow-900 dark:to-yellow-700 text-yellow-900 dark:text-yellow-300 rounded-xl font-semibold shadow-sm border border-yellow-200 dark:border-yellow-800">
                 <span className="text-2xl">⚠️</span>
-                <span>Warning! Please check your input.</span>
+                <span>{t('feedback.warning')}</span>
               </div>
               <div className="flex items-center gap-2 p-5 bg-gradient-to-r from-blue-50 to-blue-100/80 dark:from-blue-900 dark:to-blue-700 text-blue-900 dark:text-blue-200 rounded-xl font-semibold shadow-sm border border-blue-200 dark:border-blue-800">
                 <span className="text-2xl">ℹ️</span>
-                <span>Info! Here is some important information.</span>
+                <span>{t('feedback.info')}</span>
               </div>
             </div>
           </section>
@@ -944,7 +942,9 @@ export default function Page() {
           <section className="bg-white/90 dark:bg-gray-900/90 border border-blue-100 dark:border-blue-900 shadow-xl rounded-2xl p-10">
             {/* Heading */}
             <h2 className="relative text-2xl font-semibold mb-6 flex items-center justify-center gap-2 text-blue-700 dark:text-blue-200">
-              <span className="whitespace-nowrap text-[1.3rem] sm:text-2xl md:text-3xl lg:text-3xl">Form Helper Components</span>
+              <span className="whitespace-nowrap text-[1.3rem] sm:text-2xl md:text-3xl lg:text-3xl">
+                {t('sections.formHelper')}
+              </span>
               <span className="absolute top-10 h-1 w-full bg-gradient-to-r from-blue-300 to-violet-300 rounded-full block" />
             </h2>
 
@@ -952,26 +952,26 @@ export default function Page() {
             <div className="space-y-4">
               {/* Date Picker Card */}
               <div className="p-6 bg-gradient-to-r from-pink-50 to-pink-100/80 dark:from-pink-900 dark:to-pink-700 text-pink-900 dark:text-pink-100 rounded-xl font-medium shadow-sm border border-pink-200 dark:border-pink-800 w-full">
-                <h3 className="text-lg font-semibold mb-2">📅 Date Picker</h3>
-                <DatePicker label="Choose a Date" />
+                <h3 className="text-lg font-semibold mb-2">📅 {t('formHelper.datePicker.title')}</h3>
+                <DatePicker label={t('formHelper.datePicker.label')} />
               </div>
 
               {/* Slider Card */}
               <div className="w-full p-6 bg-gradient-to-r from-green-50 to-green-100/80 dark:from-green-900 dark:to-green-700 text-green-900 dark:text-green-100 rounded-xl font-medium shadow-sm border border-green-200 dark:border-green-800">
-                <h3 className="text-lg font-semibold mb-2">🎚 Slider</h3>
+                <h3 className="text-lg font-semibold mb-2">🎚 {t('formHelper.slider.title')}</h3>
                 <Slider min={0} max={50} />
               </div>
 
               {/* File Upload Card */}
               <div className="w-full p-6 bg-gradient-to-r from-yellow-50 to-yellow-100/80 dark:from-yellow-900 dark:to-yellow-700 text-yellow-900 dark:text-yellow-100 rounded-xl font-medium shadow-sm border border-yellow-200 dark:border-yellow-800">
-                <h3 className="text-lg font-semibold mb-2">📁 File Upload</h3>
+                <h3 className="text-lg font-semibold mb-2">📁 {t('formHelper.fileUpload.title')}</h3>
                 <FileUpload />
               </div>
 
               {/* Form Validation Card */}
               <div className="w-full p-6 bg-gradient-to-r from-blue-50 to-blue-100/80 dark:from-blue-900 dark:to-blue-700 text-blue-900 dark:text-blue-100 rounded-xl font-medium shadow-sm border border-blue-200 dark:border-blue-800">
                 <h3 className="text-lg font-semibold mb-2">
-                  ✅ Form Validation
+                  ✅ {t('formHelper.formValidation.title')}
                 </h3>
                 <FormValidation minLength={5} />
               </div>
@@ -979,7 +979,7 @@ export default function Page() {
               {/* Login Form Card */}
               <div className="w-full p-6 bg-gradient-to-r from-purple-50 to-purple-100/80 dark:from-purple-900 dark:to-purple-700 text-purple-900 dark:text-purple-100 rounded-xl font-medium shadow-sm border border-purple-200 dark:border-purple-800">
                 <h3 className="text-lg font-semibold mb-2">
-                  🔐 Login Form
+                  🔐 {t('formHelper.loginForm.title')}
                 </h3>
                 <div className="mt-4">
                   <LoginForm
@@ -990,10 +990,11 @@ export default function Page() {
                   />
                 </div>
               </div>
+
               {/* Signup Page Card */}
               <div className="w-full flex flex-col justify-center p-6 bg-gradient-to-r from-green-50 to-green-100/80 dark:from-green-900 dark:to-green-700 text-green-900 dark:text-green-100 rounded-xl font-medium shadow-sm border border-green-200 dark:border-green-800">
                 <h3 className="text-lg font-semibold mb-2">
-                  📝 Signup Page
+                  📝 {t('formHelper.signupPage.title')}
                 </h3>
                 <div className="scale-90 w-full max-w-lg mx-auto mt-8 px-2 origin-top-left">
                   <SignupPage
@@ -1002,26 +1003,27 @@ export default function Page() {
                   />
                 </div>
               </div>
-                {/* OTP Verification Card */}
-                <div className="p-6 bg-gradient-to-r from-indigo-50 to-indigo-100/80 dark:from-indigo-900 dark:to-indigo-700 text-indigo-900 dark:text-indigo-100 rounded-xl font-medium shadow-sm border border-indigo-200 dark:border-indigo-800">
-                  <h3 className="text-lg font-semibold mb-2">
-                    🔑 OTP Verification
-                  </h3>
-                  <div className="mt-4">
-                    <OTPVerification
-                      length={6}
-                      onVerify={async (code) => {
-                        console.log('Verifying code', code);
-                        await new Promise(r => setTimeout(r, 600));
-                        if (code !== '123456') throw new Error('Invalid code (try 123456)');
-                      }}
-                      onResend={async () => {
-                        console.log('Resending OTP');
-                        await new Promise(r => setTimeout(r, 400));
-                      }}
-                    />
-                  </div>
+
+              {/* OTP Verification Card */}
+              <div className="p-6 bg-gradient-to-r from-indigo-50 to-indigo-100/80 dark:from-indigo-900 dark:to-indigo-700 text-indigo-900 dark:text-indigo-100 rounded-xl font-medium shadow-sm border border-indigo-200 dark:border-indigo-800">
+                <h3 className="text-lg font-semibold mb-2">
+                  🔑 {t('formHelper.otpVerification.title')}
+                </h3>
+                <div className="mt-4">
+                  <OTPVerification
+                    length={6}
+                    onVerify={async (code) => {
+                      console.log('Verifying code', code);
+                      await new Promise(r => setTimeout(r, 600));
+                      if (code !== '123456') throw new Error(t('formHelper.otpVerification.tryCode'));
+                    }}
+                    onResend={async () => {
+                      console.log('Resending OTP');
+                      await new Promise(r => setTimeout(r, 400));
+                    }}
+                  />
                 </div>
+              </div>
             </div>
           </section>
         )}
@@ -1033,7 +1035,9 @@ export default function Page() {
             className="bg-gradient-to-br from-emerald-50 via-teal-50 to-cyan-50 dark:from-[#0f1b1a] dark:via-[#0a1a1a] dark:to-[#0a1a1a] border border-emerald-100 dark:border-emerald-900 shadow-xl rounded-2xl p-10"
           >
             <h2 className="relative text-2xl font-semibold mb-6 flex items-center justify-center gap-2 text-emerald-600 dark:text-emerald-200">
-              <span className="whitespace-nowrap text-[1.3rem] sm:text-2xl md:text-3xl lg:text-3xl">Badge Components ({filteredComponents.badges.length})</span>
+              <span className="whitespace-nowrap text-[1.3rem] sm:text-2xl md:text-3xl lg:text-3xl">
+                {t('sections.badges')} ({filteredComponents.badges.length})
+              </span>
               <span className="absolute top-10 h-1 w-full bg-gradient-to-r from-emerald-300 to-cyan-300 rounded-full block" />
             </h2>
             <div className="space-y-8">
@@ -1056,7 +1060,9 @@ export default function Page() {
             className="bg-gradient-to-br from-sky-50 via-blue-50 to-indigo-50 dark:from-[#0f1a1b] dark:via-[#0a1a1a] dark:to-[#0a1a1a] border border-sky-100 dark:border-sky-900 shadow-xl rounded-2xl p-10"
           >
             <h2 className="relative text-2xl font-semibold mb-6 flex items-center justify-center gap-2 text-sky-600 dark:text-sky-200">
-              <span className="whitespace-nowrap text-[1.3rem] sm:text-2xl md:text-3xl lg:text-3xl">Avatar Components ({users.length})</span>
+              <span className="whitespace-nowrap text-[1.3rem] sm:text-2xl md:text-3xl lg:text-3xl">
+                {t('sections.avatars')} ({users.length})
+              </span>
               <span className="absolute top-10 h-1 w-full bg-gradient-to-r from-sky-300 to-indigo-300 rounded-full block" />
             </h2>
 
@@ -1070,7 +1076,7 @@ export default function Page() {
 
               {/* Avatar Group */}
               <div className="mt-6">
-                <h3 className="text-lg font-medium mb-3">Avatar Group</h3>
+                <h3 className="text-lg font-medium mb-3">{t('avatars.group')}</h3>
                 <AvatarGroup avatars={users} size="md" max={4} />
               </div>
             </div>
@@ -1084,7 +1090,9 @@ export default function Page() {
             className="bg-white/90 dark:bg-gray-900/90 border border-blue-100 dark:border-blue-900 shadow-xl rounded-2xl p-10"
           >
             <h2 className="relative text-2xl font-semibold mb-6 flex items-center justify-center gap-2 text-pink-600 dark:text-pink-200">
-              <span className="whitespace-nowrap text-[1.3rem] sm:text-2xl md:text-3xl lg:text-3xl">Accordion Components</span>
+              <span className="whitespace-nowrap text-[1.3rem] sm:text-2xl md:text-3xl lg:text-3xl">
+                {t('sections.accordion')}
+              </span>
             </h2>
 
             <div className="space-y-8">
@@ -1097,10 +1105,7 @@ export default function Page() {
             </div>
           </section>
         )}
-
-
-
       </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/app/contact/page.jsx b/src/app/contact/page.jsx
index 3bfadc3..9a71673 100644
--- a/src/app/contact/page.jsx
+++ b/src/app/contact/page.jsx
@@ -1,10 +1,11 @@
-
 "use client"
 import { useState } from 'react';
+import { useTranslations } from 'next-intl';
 import { Mail, Phone, MapPin, Send, Github, Twitter, Linkedin } from 'lucide-react';
 
 
 export default function ContactPage() {
+  const t = useTranslations('contact');
   const [formData, setFormData] = useState({
     name: '',
     email: '',
@@ -20,23 +21,23 @@ export default function ContactPage() {
     const newErrors = {};
 
     if (!formData.name.trim()) {
-      newErrors.name = 'Name is required';
+      newErrors.name = t('errors.nameRequired');
     }
 
     if (!formData.email.trim()) {
-      newErrors.email = 'Email is required';
+      newErrors.email = t('errors.emailRequired');
     } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
-      newErrors.email = 'Please enter a valid email address';
+      newErrors.email = t('errors.emailInvalid');
     }
 
     if (!formData.subject.trim()) {
-      newErrors.subject = 'Subject is required';
+      newErrors.subject = t('errors.subjectRequired');
     }
 
     if (!formData.message.trim()) {
-      newErrors.message = 'Message is required';
+      newErrors.message = t('errors.messageRequired');
     } else if (formData.message.trim().length < 10) {
-      newErrors.message = 'Message must be at least 10 characters long';
+      newErrors.message = t('errors.messageLength');
     }
 
     setErrors(newErrors);
@@ -87,27 +88,26 @@ export default function ContactPage() {
     <div className="max-w-6xl mx-auto px-4 py-12">
       {/* Header */}
       <section className="text-center mb-16">
-        <h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-6">Get in Touch</h1>
+        <h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-6">{t('header.title')}</h1>
         <p className="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
-          Have questions about our component library? Want to contribute or report a bug?
-          We'd love to hear from you!
+          {t('header.description')}
         </p>
       </section>
 
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
         {/* Contact Form */}
         <div className="bg-white dark:bg-gray-800 p-8 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700">
-          <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">Send us a Message</h2>
+          <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">{t('form.title')}</h2>
 
           {submitStatus === 'success' && (
             <div className="mb-6 p-4 bg-green-50 border border-green-200 rounded-lg">
-              <p className="text-green-800 font-medium">Thank you for your message! We'll get back to you soon.</p>
+              <p className="text-green-800 font-medium">{t('form.success')}</p>
             </div>
           )}
 
           {submitStatus === 'error' && (
             <div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg">
-              <p className="text-red-800 font-medium">Sorry, there was an error sending your message. Please try again.</p>
+              <p className="text-red-800 font-medium">{t('form.error')}</p>
             </div>
           )}
 
@@ -115,8 +115,7 @@ export default function ContactPage() {
             {/* Name Field */}
             <div>
               <label htmlFor="name" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                Full Name *
-
+                {t('form.fields.name.label')}
               </label>
               <input
                 type="text"
@@ -124,10 +123,9 @@ export default function ContactPage() {
                 name="name"
                 value={formData.name}
                 onChange={handleChange}
-
                 className={`w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all ${errors.name ? 'border-red-500 bg-red-50' : 'border-gray-300'
                   }`}
-                placeholder="Enter your full name"
+                placeholder={t('form.fields.name.placeholder')}
               />
               {errors.name && <p className="mt-1 text-sm text-red-600">{errors.name}</p>}
             </div>
@@ -135,8 +133,7 @@ export default function ContactPage() {
             {/* Email Field */}
             <div>
               <label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                Email Address *
-
+                {t('form.fields.email.label')}
               </label>
               <input
                 type="email"
@@ -144,10 +141,9 @@ export default function ContactPage() {
                 name="email"
                 value={formData.email}
                 onChange={handleChange}
-
                 className={`w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all ${errors.email ? 'border-red-500 bg-red-50' : 'border-gray-300'
                   }`}
-                placeholder="your.email@example.com"
+                placeholder={t('form.fields.email.placeholder')}
               />
               {errors.email && <p className="mt-1 text-sm text-red-600">{errors.email}</p>}
             </div>
@@ -155,7 +151,7 @@ export default function ContactPage() {
             {/* Subject Field */}
             <div>
               <label htmlFor="subject" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                Subject *
+                {t('form.fields.subject.label')}
               </label>
               <select
                 id="subject"
@@ -165,13 +161,13 @@ export default function ContactPage() {
                 className={`w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all ${errors.subject ? 'border-red-500 bg-red-50' : 'border-gray-300'
                   }`}
               >
-                <option value="">Select a subject</option>
-                <option value="bug-report">Bug Report</option>
-                <option value="feature-request">Feature Request</option>
-                <option value="documentation">Documentation</option>
-                <option value="contribution">Contribution</option>
-                <option value="support">General Support</option>
-                <option value="other">Other</option>
+                <option value="">{t('form.fields.subject.placeholder')}</option>
+                <option value="bug-report">{t('form.fields.subject.options.bugReport')}</option>
+                <option value="feature-request">{t('form.fields.subject.options.featureRequest')}</option>
+                <option value="documentation">{t('form.fields.subject.options.documentation')}</option>
+                <option value="contribution">{t('form.fields.subject.options.contribution')}</option>
+                <option value="support">{t('form.fields.subject.options.support')}</option>
+                <option value="other">{t('form.fields.subject.options.other')}</option>
               </select>
               {errors.subject && <p className="mt-1 text-sm text-red-600">{errors.subject}</p>}
             </div>
@@ -179,8 +175,7 @@ export default function ContactPage() {
             {/* Message Field */}
             <div>
               <label htmlFor="message" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                Message *
-
+                {t('form.fields.message.label')}
               </label>
               <textarea
                 id="message"
@@ -190,7 +185,7 @@ export default function ContactPage() {
                 rows={5}
                 className={`w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all resize-vertical ${errors.message ? 'border-red-500 bg-red-50' : 'border-gray-300'
                   }`}
-                placeholder="Tell us how we can help you..."
+                placeholder={t('form.fields.message.placeholder')}
               />
               {errors.message && <p className="mt-1 text-sm text-red-600">{errors.message}</p>}
             </div>
@@ -204,12 +199,12 @@ export default function ContactPage() {
               {isSubmitting ? (
                 <>
                   <div className="animate-spin rounded-full h-4 w-4 border-2 border-white border-t-transparent"></div>
-                  Sending...
+                  {t('form.sending')}
                 </>
               ) : (
                 <>
                   <Send className="w-4 h-4" />
-                  Send Message
+                  {t('form.send')}
                 </>
               )}
             </button>
@@ -220,7 +215,7 @@ export default function ContactPage() {
         <div className="space-y-8">
           {/* Contact Details */}
           <div className="bg-blue-50 dark:bg-blue-900/50 p-8 rounded-2xl">
-            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">Contact Information</h2>
+            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">{t('info.title')}</h2>
             <div className="space-y-4">
               <div className="flex items-start gap-4">
                 <a
@@ -230,7 +225,7 @@ export default function ContactPage() {
                   <Mail className="w-5 h-5 text-white" />
                 </a>
                 <div>
-                  <h3 className="font-medium text-gray-900 dark:text-white">Email</h3>
+                  <h3 className="font-medium text-gray-900 dark:text-white">{t('info.email.title')}</h3>
                   <a
                     href="mailto:gps.96169@gmail.com"
                     className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors break-all max-w-full"
@@ -250,7 +245,7 @@ export default function ContactPage() {
                   <Github className="w-5 h-5 text-white" />
                 </a>
                 <div>
-                  <h3 className="font-medium text-gray-900 dark:text-white">GitHub</h3>
+                  <h3 className="font-medium text-gray-900 dark:text-white">{t('info.github.title')}</h3>
                   <a
                     href="https://github.com/Gyanthakur/component-library"
                     target="_blank"
@@ -272,8 +267,8 @@ export default function ContactPage() {
                   <MapPin className="w-5 h-5 text-white" />
                 </a>
                 <div>
-                  <h3 className="font-medium text-gray-900 dark:text-white">Linktree</h3>
-                  <p className="text-gray-600 dark:text-gray-300">Check out our Linktree for all our social links: </p>
+                  <h3 className="font-medium text-gray-900 dark:text-white">{t('info.linktree.title')}</h3>
+                  <p className="text-gray-600 dark:text-gray-300">{t('info.linktree.description')}</p>
                   <a
                     href="https://linktr.ee/gp_singh"
                     target="_blank"
@@ -289,7 +284,7 @@ export default function ContactPage() {
 
           {/* Social Links */}
           <div className="bg-gray-50 dark:bg-gray-800 p-8 rounded-2xl">
-            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">Follow Us</h2>
+            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">{t('social.title')}</h2>
             <div className="flex gap-4">
               <a
                 href="https://github.com/Gyanthakur"
@@ -320,20 +315,19 @@ export default function ContactPage() {
 
           {/* FAQ */}
           <div className="bg-white dark:bg-gray-800 p-8 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700">
-            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">Frequently Asked Questions</h2>
+            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">{t('faq.title')}</h2>
             <div className="space-y-4">
               <div>
-                <h3 className="font-medium text-gray-900 dark:text-white mb-2">How can I contribute to the library?</h3>
-                <p className="text-gray-600 dark:text-gray-300 text-sm">Check out our CONTRIBUTING.md file for guidelines on how to contribute components, report bugs, or suggest improvements.</p>
+                <h3 className="font-medium text-gray-900 dark:text-white mb-2">{t('faq.q1.title')}</h3>
+                <p className="text-gray-600 dark:text-gray-300 text-sm">{t('faq.q1.description')}</p>
               </div>
               <div>
-                <h3 className="font-medium text-gray-900 dark:text-white mb-2">Is this library free to use?</h3>
-                <p className="text-gray-600 dark:text-gray-300 text-sm">Yes! This component library is open source and free to use in both personal and commercial projects.</p>
+                <h3 className="font-medium text-gray-900 dark:text-white mb-2">{t('faq.q2.title')}</h3>
+                <p className="text-gray-600 dark:text-gray-300 text-sm">{t('faq.q2.description')}</p>
               </div>
               <div>
-                <h3 className="font-medium text-gray-900 dark:text-white mb-2">How do I report a bug?</h3>
-                <p className="text-gray-600 dark:text-gray-300 text-sm">You can report bugs through our GitHub issues page or by using the contact form above with "Bug Report" as the subject.</p>
-
+                <h3 className="font-medium text-gray-900 dark:text-white mb-2">{t('faq.q3.title')}</h3>
+                <p className="text-gray-600 dark:text-gray-300 text-sm">{t('faq.q3.description')}</p>
               </div>
             </div>
           </div>
diff --git a/src/app/feedback/page.js b/src/app/feedback/page.js
index b8326dc..ec13afb 100644
--- a/src/app/feedback/page.js
+++ b/src/app/feedback/page.js
@@ -1,5 +1,6 @@
 "use client";
 import { useState } from 'react';
+import { useTranslations } from 'next-intl';
 import PrimaryButton from './../components/buttons/PrimaryButton';
 import SecondaryButton from './../components/buttons/SecondaryButton';
 import OutlineButton from './../components/buttons/OutlineButton';
@@ -10,6 +11,7 @@ import Badge from './../components/feedback/Badge';
 import ProgressBar from './../components/feedback/ProgressBar';
 
 export default function FeedbackPage() {
+  const t = useTranslations('feedback');
   const [feedback, setFeedback] = useState('');
   const [rating, setRating] = useState('');
   const [category, setCategory] = useState('');
@@ -18,18 +20,18 @@ export default function FeedbackPage() {
   const [showError, setShowError] = useState(false);
 
   const categoryOptions = [
-    { value: 'bug', label: 'Bug Report' },
-    { value: 'feature', label: 'Feature Request' },
-    { value: 'improvement', label: 'Improvement Suggestion' },
-    { value: 'general', label: 'General Feedback' }
+    { value: 'bug', label: t('category.bug') },
+    { value: 'feature', label: t('category.feature') },
+    { value: 'improvement', label: t('category.improvement') },
+    { value: 'general', label: t('category.general') }
   ];
 
   const ratingOptions = [
-    { value: '5', label: '⭐⭐⭐⭐⭐ Excellent' },
-    { value: '4', label: '⭐⭐⭐⭐ Good' },
-    { value: '3', label: '⭐⭐⭐ Average' },
-    { value: '2', label: '⭐⭐ Poor' },
-    { value: '1', label: '⭐ Very Poor' }
+    { value: '5', label: t('rating.5') },
+    { value: '4', label: t('rating.4') },
+    { value: '3', label: t('rating.3') },
+    { value: '2', label: t('rating.2') },
+    { value: '1', label: t('rating.1') }
   ];
 
   const handleSubmit = (e) => {
@@ -57,10 +59,10 @@ export default function FeedbackPage() {
         {/* Header */}
         <div className="text-center mb-12">
           <h1 className="text-4xl font-bold text-gray-900 mb-4">
-            We Value Your Feedback
+            {t('header.title')}
           </h1>
           <p className="text-xl text-gray-600 max-w-2xl mx-auto">
-            Help us improve MyLibrary by sharing your thoughts, reporting bugs, or suggesting new features.
+            {t('header.description')}
           </p>
         </div>
 
@@ -69,8 +71,8 @@ export default function FeedbackPage() {
           <div className="mb-6">
             <Alert
               type="success"
-              title="Thank you!"
-              message="Your feedback has been submitted successfully. We'll review it soon."
+              title={t('alert.success.title')}
+              message={t('alert.success.message')}
               dismissible
               onClose={() => setShowSuccess(false)}
             />
@@ -81,8 +83,8 @@ export default function FeedbackPage() {
           <div className="mb-6">
             <Alert
               type="error"
-              title="Error"
-              message="Please fill in all required fields before submitting."
+              title={t('alert.error.title')}
+              message={t('alert.error.message')}
               dismissible
               onClose={() => setShowError(false)}
             />
@@ -95,13 +97,13 @@ export default function FeedbackPage() {
           <div className="lg:col-span-2">
             <div className="bg-white rounded-lg shadow-sm border p-8">
               <h2 className="text-2xl font-semibold text-gray-900 mb-6">
-                Share Your Feedback
+                {t('form.title')}
               </h2>
               
               <form onSubmit={handleSubmit} className="space-y-6">
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                   <Select
-                    label="Feedback Category *"
+                    label={t('form.categoryLabel')}
                     options={categoryOptions}
                     value={category}
                     onChange={(e) => setCategory(e.target.value)}
@@ -109,7 +111,7 @@ export default function FeedbackPage() {
                   />
                   
                   <Select
-                    label="Overall Rating"
+                    label={t('form.ratingLabel')}
                     options={ratingOptions}
                     value={rating}
                     onChange={(e) => setRating(e.target.value)}
@@ -117,22 +119,22 @@ export default function FeedbackPage() {
                 </div>
 
                 <TextInput
-                  label="Email (Optional)"
+                  label={t('form.emailLabel')}
                   type="email"
-                  placeholder="your.email@example.com"
+                  placeholder={t('form.emailPlaceholder')}
                   value={email}
                   onChange={(e) => setEmail(e.target.value)}
-                  helperText="We'll only use this to follow up on your feedback"
+                  helperText={t('form.emailHelper')}
                 />
 
                 <div>
                   <label className="block text-sm font-medium text-gray-700 mb-2">
-                    Your Feedback *
+                    {t('form.feedbackLabel')}
                   </label>
                   <textarea
                     className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                     rows="6"
-                    placeholder="Tell us about your experience, report a bug, or suggest improvements..."
+                    placeholder={t('form.feedbackPlaceholder')}
                     value={feedback}
                     onChange={(e) => setFeedback(e.target.value)}
                     required
@@ -141,7 +143,7 @@ export default function FeedbackPage() {
 
                 <div className="flex gap-4">
                   <PrimaryButton type="submit">
-                    Submit Feedback
+                    {t('form.submit')}
                   </PrimaryButton>
                   <SecondaryButton 
                     type="button" 
@@ -152,7 +154,7 @@ export default function FeedbackPage() {
                       setEmail('');
                     }}
                   >
-                    Clear Form
+                    {t('form.clear')}
                   </SecondaryButton>
                 </div>
               </form>
@@ -165,23 +167,23 @@ export default function FeedbackPage() {
             {/* Quick Stats */}
             <div className="bg-white rounded-lg shadow-sm border p-6">
               <h3 className="text-lg font-semibold text-gray-900 mb-4">
-                Community Stats
+                {t('sidebar.stats.title')}
               </h3>
               <div className="space-y-4">
                 <div className="flex items-center justify-between">
-                  <span className="text-gray-600">Total Components</span>
+                  <span className="text-gray-600">{t('sidebar.stats.totalComponents')}</span>
                   <Badge variant="primary">25+</Badge>
                 </div>
                 <div className="flex items-center justify-between">
-                  <span className="text-gray-600">GitHub Stars</span>
+                  <span className="text-gray-600">{t('sidebar.stats.githubStars')}</span>
                   <Badge variant="success">1.2k</Badge>
                 </div>
                 <div className="flex items-center justify-between">
-                  <span className="text-gray-600">Contributors</span>
+                  <span className="text-gray-600">{t('sidebar.stats.contributors')}</span>
                   <Badge variant="info">45</Badge>
                 </div>
                 <div className="flex items-center justify-between">
-                  <span className="text-gray-600">Issues Resolved</span>
+                  <span className="text-gray-600">{t('sidebar.stats.issuesResolved')}</span>
                   <Badge variant="warning">89%</Badge>
                 </div>
               </div>
@@ -190,33 +192,33 @@ export default function FeedbackPage() {
             {/* Development Progress */}
             <div className="bg-white rounded-lg shadow-sm border p-6">
               <h3 className="text-lg font-semibold text-gray-900 mb-4">
-                Development Progress
+                {t('sidebar.progress.title')}
               </h3>
               <div className="space-y-4">
                 <div>
                   <div className="flex justify-between text-sm mb-1">
-                    <span>Button Components</span>
+                    <span>{t('sidebar.progress.buttons')}</span>
                     <span>100%</span>
                   </div>
                   <ProgressBar value={100} color="green" size="sm" />
                 </div>
                 <div>
                   <div className="flex justify-between text-sm mb-1">
-                    <span>Card Components</span>
+                    <span>{t('sidebar.progress.cards')}</span>
                     <span>85%</span>
                   </div>
                   <ProgressBar value={85} color="blue" size="sm" />
                 </div>
                 <div>
                   <div className="flex justify-between text-sm mb-1">
-                    <span>Form Components</span>
+                    <span>{t('sidebar.progress.forms')}</span>
                     <span>70%</span>
                   </div>
                   <ProgressBar value={70} color="yellow" size="sm" />
                 </div>
                 <div>
                   <div className="flex justify-between text-sm mb-1">
-                    <span>Navigation</span>
+                    <span>{t('sidebar.progress.navigation')}</span>
                     <span>60%</span>
                   </div>
                   <ProgressBar value={60} color="purple" size="sm" />
@@ -227,14 +229,14 @@ export default function FeedbackPage() {
             {/* Contact Info */}
             <div className="bg-white rounded-lg shadow-sm border p-6">
               <h3 className="text-lg font-semibold text-gray-900 mb-4">
-                    Other Ways to Reach Us
+                {t('sidebar.contact.title')}
               </h3>
               <div className="space-y-3">
                 <a
                   href="mailto:gps.96169@gmail.com"
                   className="w-full inline-flex justify-center px-4 py-2 border border-gray-200 rounded-md text-sm font-medium text-theme-secondary hover:bg-gray-50"
                 >
-                  📧 Email Support
+                  {t('sidebar.contact.email')}
                 </a>
 
                 <a
@@ -243,7 +245,7 @@ export default function FeedbackPage() {
                   rel="noopener noreferrer"
                   className="w-full inline-flex justify-center px-4 py-2 border border-gray-200 rounded-md text-sm font-medium text-theme-secondary hover:bg-gray-50"
                 >
-                  💬 Discord Community
+                  {t('sidebar.contact.discord')}
                 </a>
 
                 <a
@@ -252,7 +254,7 @@ export default function FeedbackPage() {
                   rel="noopener noreferrer"
                   className="w-full inline-flex justify-center px-4 py-2 border border-gray-200 rounded-md text-sm font-medium text-theme-secondary hover:bg-gray-50"
                 >
-                  🐙 GitHub Issues
+                  {t('sidebar.contact.github')}
                 </a>
               </div>
             </div>
@@ -262,7 +264,7 @@ export default function FeedbackPage() {
         {/* Recent Feedback Section */}
         <div className="mt-12">
           <h2 className="text-2xl font-semibold text-gray-900 mb-6">
-            Recent Community Feedback
+            {t('recent.title')}
           </h2>
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
             <div className="bg-white rounded-lg shadow-sm border p-6">
@@ -271,13 +273,13 @@ export default function FeedbackPage() {
                   A
                 </div>
                 <div className="ml-3">
-                  <p className="font-medium text-gray-900">Alex</p>
-                  <p className="text-sm text-gray-500">2 days ago</p>
+                  <p className="font-medium text-gray-900">{t('recent.items.0.name')}</p>
+                  <p className="text-sm text-gray-500">{t('recent.items.0.time')}</p>
                 </div>
-                <Badge variant="success" size="sm" className="ml-auto">Feature</Badge>
+                <Badge variant="success" size="sm" className="ml-auto">{t('recent.items.0.category')}</Badge>
               </div>
               <p className="text-gray-700 text-sm">
-                Love the new button variants! Could we get a loading state for buttons?
+                {t('recent.items.0.feedback')}
               </p>
             </div>
 
@@ -287,13 +289,13 @@ export default function FeedbackPage() {
                   S
                 </div>
                 <div className="ml-3">
-                  <p className="font-medium text-gray-900">Sarah</p>
-                  <p className="text-sm text-gray-500">1 week ago</p>
+                  <p className="font-medium text-gray-900">{t('recent.items.1.name')}</p>
+                  <p className="text-sm text-gray-500">{t('recent.items.1.time')}</p>
                 </div>
-                <Badge variant="error" size="sm" className="ml-auto">Bug</Badge>
+                <Badge variant="error" size="sm" className="ml-auto">{t('recent.items.1.category')}</Badge>
               </div>
               <p className="text-gray-700 text-sm">
-                Card component spacing issue on mobile devices. Fixed in latest update!
+                {t('recent.items.1.feedback')}
               </p>
             </div>
 
@@ -303,13 +305,13 @@ export default function FeedbackPage() {
                   M
                 </div>
                 <div className="ml-3">
-                  <p className="font-medium text-gray-900">Mike</p>
-                  <p className="text-sm text-gray-500">2 weeks ago</p>
+                  <p className="font-medium text-gray-900">{t('recent.items.2.name')}</p>
+                  <p className="text-sm text-gray-500">{t('recent.items.2.time')}</p>
                 </div>
-                <Badge variant="primary" size="sm" className="ml-auto">General</Badge>
+                <Badge variant="primary" size="sm" className="ml-auto">{t('recent.items.2.category')}</Badge>
               </div>
               <p className="text-gray-700 text-sm">
-                Excellent documentation and examples. Makes integration super easy!
+                {t('recent.items.2.feedback')}
               </p>
             </div>
           </div>
diff --git a/src/app/layout.js b/src/app/layout.js
index 7000c0e..7a38851 100644
--- a/src/app/layout.js
+++ b/src/app/layout.js
@@ -46,7 +46,7 @@ export default async function RootLayout({ children }) {
                     <div className="absolute top-28 left-10/12 w-28 h-28 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 opacity-70 animation-pulseBg"></div>
                   </div>
                 </div>
-                <main className="max-w-7xl mx-auto">{children}</main>
+                <main className=" mx-auto">{children}</main>
                 <Footer />
               </div>
             </AnalyticsProvider>
diff --git a/src/app/page.js b/src/app/page.js
index 31c44d1..3608d3f 100644
--- a/src/app/page.js
+++ b/src/app/page.js
@@ -27,7 +27,7 @@
 
     return (
       <div className="transition-colors duration-300">
-        <div className="min-h-screen bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
+        <div className="min-h-screen bg-[#1F2937]  w-full text-gray-900 dark:text-gray-100">
 
           {/* Hero Section */}
           <section className="max-w-7xl mx-auto px-6 py-24 flex flex-col md:flex-row items-center gap-4">
diff --git a/src/app/pages/Footer.jsx b/src/app/pages/Footer.jsx
index 87c83b7..14cad9d 100644
--- a/src/app/pages/Footer.jsx
+++ b/src/app/pages/Footer.jsx
@@ -1,5 +1,6 @@
 "use client";
 import { FaGithub, FaTwitter, FaLinkedin, FaDiscord, FaYoutube } from "react-icons/fa";
+import { useTranslations } from "next-intl";
 
 const FooterLink = ({ href, Icon, title }) => (
   <a
@@ -14,20 +15,21 @@ const FooterLink = ({ href, Icon, title }) => (
 );
 
 const Footer = () => {
+  const t = useTranslations('common');
   const socialLinks = [
     {
       href: "https://github.com/Gyanthakur/component-library",
       Icon: FaGithub,
-      title: "GitHub",
+      title: t('footer.social.github'),
     },
     {
       href: "https://www.linkedin.com/in/gyan-pratap-singh-275785236",
       Icon: FaLinkedin,
-      title: "LinkedIn",
+      title: t('footer.social.linkedin'),
     },
-    { href: "https://x.com/gps_96169", Icon: FaTwitter, title: "Twitter" },
-    { href: "https://discord.com", Icon: FaDiscord, title: "Discord" },
-    { href: "https://youtube.com", Icon: FaYoutube, title: "YouTube" },
+    { href: "https://x.com/gps_96169", Icon: FaTwitter, title: t('footer.social.twitter') },
+    { href: "https://discord.com", Icon: FaDiscord, title: t('footer.social.discord') },
+    { href: "https://youtube.com", Icon: FaYoutube, title: t('footer.social.youtube') },
   ];
 
   return (
@@ -38,21 +40,20 @@ const Footer = () => {
           <div className="text-center md:text-left max-w-md">
             <h2 className="text-2xl font-bold mb-2">
               <span className="bg-gradient-to-r from-blue-600 to-violet-600 dark:from-blue-400 dark:to-violet-400 bg-clip-text text-transparent">
-                MyLibrary
+                {t('footer.brand')}
               </span>{" "}
               <span className="text-lg font-medium text-gray-600 dark:text-gray-400">
-                Component Library
+                {t('footer.subtitle')}
               </span>
             </h2>
             <p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
-              An open-source Next.js + Tailwind CSS Component Library with ready-to-use UI components.
-              Perfect for developers to learn, practice, and contribute during Hacktoberfest and beyond.
+              {t('footer.description')}
             </p>
           </div>
 
           {/* Right Section (Social Links) */}
           <div className="text-center md:text-right flex flex-col items-center md:items-end gap-4">
-            <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-100">Follow Us</h3>
+            <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-100">{t('footer.followUs')}</h3>
             <div className="flex justify-center space-x-4">
               {socialLinks.map((link, index) => (
                 <FooterLink
@@ -70,12 +71,11 @@ const Footer = () => {
         <div className="border-t border-gray-200 dark:border-gray-600 transition-all duration-300  mt-4 pt-2.5 text-center">
           <div className="text-center space-y-1">
             <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
-              Made with <span className="text-red-500">💜</span> for Hacktoberfest
+              {t('footer.madeWith')} <span className="text-red-500">💜</span> {t('footer.hacktoberfest')}
             </p>
             <p className="text-sm text-gray-600 dark:text-gray-400">
-              © {new Date().getFullYear()} MyLibrary Component Library. All rights reserved.
+              © {new Date().getFullYear()} {t('footer.copyright')}
             </p>
-            
           </div>
         </div>
       </div>
diff --git a/src/app/pages/Navbar.jsx b/src/app/pages/Navbar.jsx
index 6ad9083..42b7cef 100644
--- a/src/app/pages/Navbar.jsx
+++ b/src/app/pages/Navbar.jsx
@@ -1,27 +1,34 @@
 "use client";
 import { useState } from "react";
-import { Menu, X } from "lucide-react";
+import { Menu, X, ChevronDown } from "lucide-react";
 import { usePathname } from "next/navigation";
 import Link from "next/link";
 import ThemeToggle from './ThemeToggle';
 import LanguageSwitcher from '../components/LanguageSwitcher';
+import { useTranslations } from "next-intl";
 
-const navLinks = [
+const mainLinks = [
   { href: "/", label: "Home" },
   { href: "/about", label: "About" },
   { href: "/contact", label: "Contact" },
   { href: "/components", label: "Components" },
-  { href: "/playground", label: "🎮 Playground" },
-  { href: "/game", label: "🎮 Game" },
   { href: "/analytics", label: "Analytics" },
   { href: "/feedback", label: "Feedback" },
-  {href: "/racing", label: "🏁 Racing Game" },
+];
+
+const funLinks = [
+  { href: "/playground", label: "Playground" },
+  { href: "/game", label: "Game" },
+  { href: "/racing", label: "Racing Game" },
 ];
 
 const Navbar = () => {
   const [isOpen, setIsOpen] = useState(false);
+  const [funOpen, setFunOpen] = useState(false);
   const pathname = usePathname();
 
+  const t = useTranslations('common.navigation')
+
   const isActive = (path) => pathname === path;
 
   return (
@@ -37,7 +44,7 @@ const Navbar = () => {
 
           {/* Desktop Menu */}
           <div className="hidden lg:flex items-center space-x-1">
-            {navLinks.map((link) => (
+            {mainLinks.map((link) => (
               <Link
                 key={link.href}
                 href={link.href}
@@ -48,13 +55,51 @@ const Navbar = () => {
                   }`}
                 tabIndex={0}
               >
-                <span>{link.label}</span>
+                <span>{t(link.label.toLowerCase())}</span>
                 {isActive(link.href) && (
                   <span className="absolute left-2 right-2 -bottom-1 h-[3px] rounded-full bg-gradient-to-r from-blue-500 to-violet-500 dark:from-blue-400 dark:to-violet-400"></span>
                 )}
               </Link>
             ))}
 
+            {/* Fun Dropdown */}
+            <div
+              className="relative"
+              onMouseEnter={() => setFunOpen(true)}
+              onMouseLeave={() => setFunOpen(false)}
+            >
+              <button
+                className={`flex items-center px-4 py-2.5 rounded-xl transition-all duration-300 text-sm font-medium
+                  ${funLinks.some(l => isActive(l.href))
+                    ? "text-blue-700 dark:text-blue-300"
+                    : "text-gray-800 dark:text-gray-100 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-100/50 dark:hover:bg-gray-800/50"
+                  }`}
+                type="button"
+                aria-haspopup="menu"
+                aria-expanded={funOpen}
+              >
+                <span>{t("fun")}</span>
+                <ChevronDown className="ml-1 w-4 h-4" />
+              </button>
+              {funOpen && (
+                <div className="absolute left-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-50">
+                  {funLinks.map((link) => (
+                    <Link
+                      key={link.href}
+                      href={link.href}
+                      className={`block px-4 py-2 text-sm rounded-lg transition-all duration-200
+                        ${isActive(link.href)
+                          ? "bg-gradient-to-r from-blue-500 to-violet-500 text-white"
+                          : "text-gray-800 dark:text-gray-100 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-100/50 dark:hover:bg-gray-800/50"
+                        }`}
+                    >
+                      {t(link.label.toLowerCase())}
+                    </Link>
+                  ))}
+                </div>
+              )}
+            </div>
+
             {/* Language Switcher */}
             <div className="ml-2">
               <LanguageSwitcher />
@@ -85,7 +130,7 @@ const Navbar = () => {
       {isOpen && (
         <div className="lg:hidden absolute top-16 left-0 right-0 border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 backdrop-blur-xl shadow-xl transition-all animate-fade-in-down">
           <div className="px-3 pt-3 pb-4 space-y-1">
-            {navLinks.map((link) => (
+            {mainLinks.map((link) => (
               <Link
                 key={link.href}
                 href={link.href}
@@ -97,9 +142,28 @@ const Navbar = () => {
                 onClick={() => setIsOpen(false)}
                 tabIndex={0}
               >
-                {link.label}
+                {t(link.label.toLowerCase())}
               </Link>
             ))}
+            {/* Fun group in mobile */}
+            <div className="border-t border-gray-200 dark:border-gray-700 mt-2 pt-2">
+              <div className="font-semibold text-gray-700 dark:text-gray-200 mb-1">{t("fun")}</div>
+              {funLinks.map((link) => (
+                <Link
+                  key={link.href}
+                  href={link.href}
+                  className={`block px-4 py-3 rounded-xl transition-all duration-200 font-medium
+                  ${isActive(link.href)
+                      ? "bg-gradient-to-r from-blue-500 to-violet-500 text-white shadow-md font-semibold"
+                      : "text-gray-800 dark:text-gray-100 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-100/50 dark:hover:bg-gray-800/50"
+                    }`}
+                  onClick={() => setIsOpen(false)}
+                  tabIndex={0}
+                >
+                  {t(link.label.toLowerCase())}
+                </Link>
+              ))}
+            </div>
           </div>
         </div>
       )}
diff --git a/src/i18n/request.ts b/src/i18n/request.ts
index 76620ae..5bea3a0 100644
--- a/src/i18n/request.ts
+++ b/src/i18n/request.ts
@@ -3,7 +3,7 @@ import { getRequestConfig } from "next-intl/server";
 import { cookies } from "next/headers";
 
 // Define which locales you support
-const supportedLocales = ["en", "fr"] as const;
+const supportedLocales = ["en", "fr","es","hi"] as const;
 type Locale = (typeof supportedLocales)[number];
 
 // Build a static import map for all translations
@@ -13,9 +13,43 @@ const messagesMap: Record<
 > = {
   en: {
     homepage: () => import("../../messages/[en]/homepage.json"),
+    common: () => import("../../messages/[en]/common.json"),
+    about: () => import("../../messages/[en]/about.json"),
+    contact: () => import("../../messages/[en]/contact.json"),
+    comps: () => import("../../messages/[en]/comps.json"),
+    playground:()=>import("../../messages/[en]/playground.json"),
+    analytics:()=>import("../../messages/[en]/analytics.json"),
+    feedback:()=>import("../../messages/[en]/feedback.json"),
   },
   fr: {
     homepage: () => import("../../messages/[fr]/homepage.json"),
+    common: () => import("../../messages/[fr]/common.json"),
+    about: () => import("../../messages/[fr]/about.json"),
+    contact: () => import("../../messages/[fr]/contact.json"),
+    comps: () => import("../../messages/[fr]/comps.json"),
+    playground:()=>import("../../messages/[fr]/playground.json"),
+    analytics:()=>import("../../messages/[fr]/analytics.json"),
+    feedback:()=>import("../../messages/[fr]/feedback.json"),
+  },
+  es: {
+    homepage: () => import("../../messages/[es]/homepage.json"),
+    common: () => import("../../messages/[es]/common.json"),
+    about: () => import("../../messages/[es]/about.json"),
+    contact: () => import("../../messages/[es]/contact.json"),
+    comps: () => import("../../messages/[es]/comps.json"),
+    playground:()=>import("../../messages/[es]/playground.json"),
+    analytics:()=>import("../../messages/[es]/analytics.json"),
+    feedback:()=>import("../../messages/[es]/feedback.json"),
+  },
+  hi: {
+    homepage: () => import("../../messages/[hi]/homepage.json"),
+    common: () => import("../../messages/[hi]/common.json"),
+    about: () => import("../../messages/[hi]/about.json"),
+    contact: () => import("../../messages/[hi]/contact.json"),
+    comps: () => import("../../messages/[hi]/comps.json"),
+    playground:()=>import("../../messages/[hi]/playground.json"),
+    analytics:()=>import("../../messages/[hi]/analytics.json"),
+    feedback:()=>import("../../messages/[hi]/feedback.json"),
   }
 };