footer fix

messages/en.json

@@ -23,6 +23,7 @@
     "navigation": "Navigation",
     "contacts": "Contacts",
     "download_our_app": "Download our app",
+    "socials": "Stay Connected",
     "back": "Back",
     "save": "Save",
     "saving": "Saving",

messages/kg.json

@@ -23,6 +23,7 @@
     "navigation": "Навигация",
     "contacts": "Байланыш",
     "download_our_app": "Биздин колдонмону жүктөңүз",
+    "socials": "Социалдык тармактар",
     "back": "Артка",
     "save": "Сактоо",
     "saving": "Сакталат",

messages/ru.json

@@ -23,6 +23,7 @@
     "navigation": "Навигация",
     "contacts": "Контакты",
     "download_our_app": "Скачивай наше приложение",
+    "socials": "Социальные сети",
     "back": "Назад",
     "save": "Сохранить",
     "saving": "Сохранение",

src/shared/variables/links_footer.ts

@@ -5,9 +5,9 @@ export const LINKS = () => {
 
   const LINKS = [
     { id: 1, pagename: t("home"), pathname: "/" },
-    { id: 2, pagename: t("about_us"), pathname: "/about-us" },
-    { id: 3, pagename: t("privacy"), pathname: "/privacy" },
-    { id: 4, pagename: t("support"), pathname: "/support" },
+    // { id: 2, pagename: t("about_us"), pathname: "/about-us" },
+    // { id: 3, pagename: t("privacy"), pathname: "/privacy" },
+    // { id: 4, pagename: t("support"), pathname: "/support" },
     { id: 5, pagename: t("statistics"), pathname: "/statistics" },
     { id: 6, pagename: t("news"), pathname: "/news" },
     { id: 7, pagename: t("volunteers"), pathname: "/volunteers" },
@@ -15,3 +15,16 @@ export const LINKS = () => {
 
   return LINKS;
 };
+
+export const LINKS2 = () => {
+  const t = useTranslations("navigation");
+
+  const LINKS = [
+    
+    { id: 2, pagename: t("about_us"), pathname: "/about-us" },
+    { id: 3, pagename: t("privacy"), pathname: "/privacy" },
+    { id: 4, pagename: t("support"), pathname: "/support" },
+  ];
+
+  return LINKS;
+};

src/widgets/Footer/Footer.scss

@@ -1,7 +1,7 @@
 .footer {
   padding: 48px 80px;
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr;
+  // display: flex;
+  // grid-template-columns: 1fr 1fr 1fr 1fr;
   gap: 30px;
   background-color: rgb(15, 23, 42);
 
@@ -16,7 +16,19 @@
       font-size: 16px;
     }
   }
-
+  &__copyright {
+    display: flex;
+    flex-direction: column;
+    margin-top: auto;
+  }
+.top-row {
+  display: flex;
+  justify-content: space-between;
+  // gap: 30px;
+}
+.bottom-div {
+  margin-top: 10px;
+}
   a,
   li,
   h4 {

src/widgets/Footer/Footer.tsx

@@ -1,7 +1,7 @@
 import "./Footer.scss";
 import logo from "../../shared/assets/logo.svg";
 import Image from "next/image";
-import { LINKS } from "@/shared/variables/links_footer";
+import { LINKS, LINKS2 } from "@/shared/variables/links_footer";
 import youtube from "./icons/youtube.svg";
 import facebook from "./icons/facebook.svg";
 import instagram from "./icons/instagram.svg";
@@ -18,12 +18,19 @@ const Footer = () => {
   const tRights = useTranslations("rights");
   return (
     <footer className="footer">
+      <div className="top-row">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div> 
+        <div></div>
+        <div></div>
       <div className="footer__logo">
         {/* <Link href="/">
           <Image src={logo} alt="Logo" />
         </Link> */}
-        <p>© {tRights("text")}</p>
-        <p>{tDisclaimer("text")}</p>
+        {/* <p>© {tRights("text")}</p>
+        <p>{tDisclaimer("text")}</p> */}
       </div>
       <div className="footer__links">
         <h4>{t("navigation")}</h4>
@@ -47,7 +54,16 @@ const Footer = () => {
         <ul>
           <li>admin@kgroad.org</li>
           <li>+9960312394038</li>
+          {LINKS2().map((link) => (
+            <li key={link.id}>
+              <Link href={link.pathname}>{link.pagename}</Link>
+            </li>
+          ))}
+        </ul>
+      </div>
 
+      <div className="footer__apps">
+        <h4>{t("socials")}</h4>
           <li>
             {[
               { src: youtube, url: "https://www.youtube.com/@TransparencyKyrgyzstan" },
@@ -59,13 +75,8 @@ const Footer = () => {
               </Link>
             ))}
           </li>
-
-          <li>Photo By ThomasG, CC BY-SA 3.0</li>
-        </ul>
-      </div>
-
-      <div className="footer__apps">
         <h4>{t("download_our_app")}</h4>
+        
         <div className="footer__apps-btns">
           {[
             { src: app_store_btn, url: "https://apps.apple.com/us/app/kg-road/id6484317991" },
@@ -76,9 +87,26 @@ const Footer = () => {
             </Link>
           ))}
         </div>
-
+        </div>
       </div>
+      
+      <div className="bottom-div">
+        <div className="footer__copyright">
+          <hr style={{ margin: "0", color: "white" }} />
+          <p className="text" style={{ margin: "0", color: "white" }}>
+            {"© Copyright " +
+              new Date().getFullYear() +
+              " - " +
+              tRights("text")}
+            <br />
+            <br />
+            {tDisclaimer("text")}
+          </p>
+        </div>
+      </div>
+
     </footer>
+    
   );
 };