Implement IA and docsFooter (#232)

* Implement IA and docsFooter

* change icon

Author: SakshamDutt

messages/en.json

@@ -25,15 +25,28 @@
   },
   "footer": {
     "description": "Multi-Cluster Kubernetes orchestration platform that simplifies distributed workload management across diverse infrastructure.",
+    "docs": "Docs",
+    "overview": "Overview",
+    "userGuide": "User Guide",
+    "onboarding": "Onboarding",
+    "releasesNotes": "Releases Notes",
+    "gettingStarted": "Getting Started",
+    "installationPage": "Installation Page",
+    "ladder": "Ladder",
+    "products": "Products",
+    "contributeHandbook": "Contribute Handbook",
+    "resources": "Resources",
+    "playground": "Playground",
+    "programs": "Programs",
+    "partners": "Partners",
+    "blog": "Blog",
     "product": "Product",
     "features": "Features",
     "useCases": "Use Cases",
     "pricing": "Pricing",
     "roadmap": "Roadmap",
-    "resources": "Resources",
     "documentation": "Documentation",
     "tutorials": "Tutorials",
-    "blog": "Blog",
     "community": "Community",
     "company": "Company",
     "about": "About",

messages/hi.json

@@ -25,15 +25,28 @@
   },
   "footer": {
     "description": "मल्टी-क्लस्टर क्यूबेरनेटिस ऑर्केस्ट्रेशन प्लेटफ़ॉर्म जो विविध इंफ्रास्ट्रक्चर में वितरित वर्कलोड प्रबंधन को सरल बनाता है।",
+    "docs": "डॉक्स",
+    "overview": "ओवरव्यू",
+    "userGuide": "उपयोगकर्ता गाइड",
+    "onboarding": "ऑनबोर्डिंग",
+    "releasesNotes": "रिलीज नोट्स",
+    "gettingStarted": "शुरू करें",
+    "installationPage": "इंस्टॉलेशन पेज",
+    "ladder": "स्टेप-अप",
+    "products": "उत्पाद",
+    "contributeHandbook": "योगदान हैंडबुक",
+    "resources": "संसाधन",
+    "playground": "प्लेग्राउंड",
+    "programs": "प्रोग्राम",
+    "partners": "भागीदार",
+    "blog": "ब्लॉग",
     "product": "उत्पाद",
     "features": "विशेषताएँ",
     "useCases": "उपयोग के मामले",
     "pricing": "मूल्य निर्धारण",
     "roadmap": "रोडमैप",
-    "resources": "संसाधन",
     "documentation": "डॉक्यूमेंटेशन",
     "tutorials": "ट्यूटोरियल",
-    "blog": "ब्लॉग",
     "community": "समुदाय",
     "company": "कंपनी",
     "about": "हमारे बारे में",

src/components/Footer.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import { useEffect } from "react";
-import Link from "next/link";
 import Image from "next/image";
 import { GridLines, StarField } from "./index";
 import { useTranslations } from "next-intl";
+import { Link } from "@/i18n/navigation";
 
 export default function Footer() {
   const t = useTranslations("footer");
@@ -80,13 +80,13 @@ export default function Footer() {
                 className="group relative w-12 h-12 rounded-lg flex items-center justify-center transition-all duration-300"
               >
                 <svg
-                  className="w-7 h-7 transition-all duration-300 group-hover:drop-shadow-[0_0_8px_rgba(29,161,242,0.8)]"
+                  className="w-7 h-7 transition-all duration-300 group-hover:drop-shadow-[0_0_8px_rgba(255,255,255,0.8)]"
                   fill="currentColor"
                   viewBox="0 0 24 24"
                 >
                   <path
-                    className="transition-colors duration-300 text-gray-400 group-hover:text-[#1DA1F2]"
-                    d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"
+                    className="transition-colors duration-300 text-gray-400 group-hover:text-white"
+                    d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
                   />
                 </svg>
               </a>
@@ -138,124 +138,126 @@ export default function Footer() {
             </div>
           </div>
 
-          {/* Product Links */}
+          {/* Docs Links */}
           <div className="col-span-1 sm:col-span-4 lg:col-span-2 order-3 sm:order-3">
             <h3 className="text-lg font-semibold text-white mb-4">
-              {t("product")}
+              {t("docs")}
             </h3>
             <ul className="space-y-3">
               <li>
-                <a
-                  href="#"
+                <Link
+                  href="/docs"
                   className="text-gray-400 hover:text-white transition-colors duration-200 text-sm"
                 >
-                  {t("features")}
-                </a>
+                  {t("overview")}
+                </Link>
               </li>
               <li>
-                <a
-                  href="#"
+                <Link
+                  href="/docs"
                   className="text-gray-400 hover:text-white transition-colors duration-200 text-sm"
                 >
-                  {t("useCases")}
-                </a>
+                  {t("userGuide")}
+                </Link>
               </li>
               <li>
-                <a
-                  href="#"
+                <Link
+                  href="/docs"
                   className="text-gray-400 hover:text-white transition-colors duration-200 text-sm"
                 >
-                  {t("pricing")}
-                </a>
+                  {t("onboarding")}
+                </Link>
               </li>
               <li>
-                <a
-                  href="#"
+                <Link
+                  href="/docs"
                   className="text-gray-400 hover:text-white transition-colors duration-200 text-sm"
                 >
-                  {t("roadmap")}
-                </a>
+                  {t("releasesNotes")}
+                </Link>
               </li>
             </ul>
           </div>
 
-          {/* Resources Links */}
+          {/* Getting Started Links */}
           <div className="col-span-1 sm:col-span-4 lg:col-span-2 order-4 sm:order-4">
             <h3 className="text-lg font-semibold text-white mb-4">
-              {t("resources")}
+              {t("gettingStarted")}
             </h3>
             <ul className="space-y-3">
               <li>
                 <Link
-                  href="/docs"
+                  href="/quick-installation"
                   className="text-gray-400 hover:text-white transition-colors duration-200 text-sm"
                 >
-                  {t("documentation")}
+                  {t("installationPage")}
                 </Link>
               </li>
               <li>
-                <a
-                  href="#"
+                <Link
+                  href="/ladder"
                   className="text-gray-400 hover:text-white transition-colors duration-200 text-sm"
                 >
-                  {t("tutorials")}
-                </a>
+                  {t("ladder")}
+                </Link>
               </li>
               <li>
-                <a
-                  href="#"
+                <Link
+                  href="/products"
                   className="text-gray-400 hover:text-white transition-colors duration-200 text-sm"
                 >
-                  {t("blog")}
-                </a>
+                  {t("products")}
+                </Link>
               </li>
               <li>
-                <a
-                  href="#"
+                <Link
+                  href="/contribute-handbook"
                   className="text-gray-400 hover:text-white transition-colors duration-200 text-sm"
                 >
-                  {t("community")}
-                </a>
+                  {t("contributeHandbook")}
+                </Link>
               </li>
             </ul>
           </div>
 
-          {/* Company Links */}
+          {/* Resources Links */}
           <div className="col-span-1 sm:col-span-4 lg:col-span-2 order-5 sm:order-5">
             <h3 className="text-lg font-semibold text-white mb-4">
-              {t("company")}
+              {t("resources")}
             </h3>
             <ul className="space-y-3">
               <li>
-                <a
-                  href="#"
+                <Link
+                  href="/playground"
                   className="text-gray-400 hover:text-white transition-colors duration-200 text-sm"
                 >
-                  {t("about")}
-                </a>
+                  {t("playground")}
+                </Link>
               </li>
               <li>
-                <a
-                  href="#"
+                <Link
+                  href="/programs"
                   className="text-gray-400 hover:text-white transition-colors duration-200 text-sm"
                 >
-                  {t("team")}
-                </a>
+                  {t("programs")}
+                </Link>
               </li>
               <li>
-                <a
-                  href="#"
+                <Link
+                  href="/partners"
                   className="text-gray-400 hover:text-white transition-colors duration-200 text-sm"
                 >
-                  {t("careers")}
-                </a>
+                  {t("partners")}
+                </Link>
               </li>
               <li>
                 <a
-                  href="#"
+                  href="https://blog.kubestellar.io"
+                  target="_blank"
+                  rel="noopener noreferrer"
                   className="text-gray-400 hover:text-white transition-colors duration-200 text-sm"
                 >
-                  {t("contact")}
+                  {t("blog")}
                 </a>
               </li>
             </ul>