footer fix

Reviewed-on: https://gitea.fishrungames.com/Transparency/kgroad-frontend2/pulls/5

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",
@@ -73,15 +74,11 @@
     "read_more": "Read More"
   },
   "about_us": {
-    "name": "Transparency International-Kyrgyzstan",
+    "name": "About us KGROAD",
-    "description": "Branch of the international organization Transparency International in the Kyrgyz Republic.",
+    "description1": "Transparency International is a global independent organization that studies and fights against corruption both internationally and within individual countries, one of the goals of which is to achieve greater transparency and accountability of government.",
-    "mission": "Promoting effective public policy and good governance to prevent corruption and strengthen democracy in the country.",
+    "description2": "The team of Transparency International Kyrgyzstan has developed a platform for monitoring road construction and repair, containing an interactive map to provide access to information on roads and streets repaired in recent years, including cost of works, contractor details, warranty periods, links to procurement documents and other information on works, as well as generalized statistics on road works (e.g. road works performed by the same contractor). ",
-    "goals_and_priorities": {
+    "description3": "The platform will also provide users with the opportunity to promptly report defects on roads and the need to fix them, vote on the priority of road repairs and provide feedback in a convenient format that will allow citizens to independently analyze and monitor the use of execution of state road contracts. Information on road construction and repairs is collected from public data from the state procurement portal and the Ministry of Justice.",
-      "anti-corruption_education": "Anti-corruption education of the population, raising public awareness of the importance and significance of the fight against corruption in Kyrgyzstan;",
+    "description4":"In addition to the web platform, there are two mobile applications for iOS and Android platforms with functions similar to the website." 
-      "study_of_corruption_practices": "Organization of the study of the practice and theory of combating corruption and the participation of civil society structures in Kyrgyzstan and other countries;",
-      "supporting_citizens_and_organizations": "Assistance to citizens and organizations in the implementation of their constitutional rights and freedoms;",
-      "international_experience": "Preferential orientation to international experience in reducing corruption, mastering its technologies and resources, as well as involving civil society structures in the international dialogue on combating corruption."
-    }
   },
   "volunteers": {
     "activists": "Activists",

messages/kg.json

@@ -23,6 +23,7 @@
     "navigation": "Навигация",
     "contacts": "Байланыш",
     "download_our_app": "Биздин колдонмону жүктөңүз",
+    "socials": "Социалдык тармактар",
     "back": "Артка",
     "save": "Сактоо",
     "saving": "Сакталат",
@@ -53,6 +54,13 @@
     "profile": "Профиль",
     "login": "Кирүү"
   },
+  "about_us": {
+    "name": "Биз жөнүндө",
+    "description1": "Transparency International  ̶  это глобальная независимая организация по изучению и борьбе с коррупцией как в международном масштабе, так и в масштабе отдельных стран, одна из целей которой добиться большей прозрачности и подотчетности власти.",
+    "description2": "Команда Трансперенси Интернешнл Кыргызстан разработала платформу для мониторинга строительства и ремонта дорог, содержащая интерактивную карту по обеспечению доступа к информации о дорогах и улицах, отремонтированных за последние годы, включая стоимость работ, данные организации-подрядчика, гарантийные сроки, ссылки на закупочную документацию и другую информация о работах, а также обобщенная статистика по дорожным работам (например, дорожные работы, выполненные одним и тем же подрядчиком). ",
+    "description3": "Платформа также предоставит пользователям возможность оперативно сообщать о дефектах на дорогах и необходимости их устранения, голосовать за приоритетность ремонта дорог и предоставлять обратную связь в удобном формате, которые позволят гражданам самостоятельно анализировать и контролировать использование исполнения государственных дорожных контрактов. Информация по дорожным строительствам и ремонтам собирается из открытых данных портала госзакупок и Минюста.",
+    "description4":"Помимо веб-платформы имеются два мобильных приложения для платформ iOS и Android с функциями, аналогичными веб-сайту." 
+  },
   "home": {
     "title": "Кыргызстандын жолдору",
     "subtitle": "Жолдорду коопсуз кылалы!",

messages/ru.json

@@ -23,6 +23,7 @@
     "navigation": "Навигация",
     "contacts": "Контакты",
     "download_our_app": "Скачивай наше приложение",
+    "socials": "Социальные сети",
     "back": "Назад",
     "save": "Сохранить",
     "saving": "Сохранение",
@@ -73,15 +74,11 @@
     "read_more": "Читать"
   },
   "about_us": {
-    "name": "Transparency International-Кыргызстан",
+    "name": "О нас",
-    "description": "Филиал международной организации Transparency International в Кыргызской Республике.",
+    "description1": "Transparency International  ̶  это глобальная независимая организация по изучению и борьбе с коррупцией как в международном масштабе, так и в масштабе отдельных стран, одна из целей которой добиться большей прозрачности и подотчетности власти.",
-    "mission": "Продвижение эффективной общественной политики и надлежащего управления в целях предотвращения коррупции и усиления демократии в стране.",
+    "description2": "Команда Трансперенси Интернешнл Кыргызстан разработала платформу для мониторинга строительства и ремонта дорог, содержащая интерактивную карту по обеспечению доступа к информации о дорогах и улицах, отремонтированных за последние годы, включая стоимость работ, данные организации-подрядчика, гарантийные сроки, ссылки на закупочную документацию и другую информация о работах, а также обобщенная статистика по дорожным работам (например, дорожные работы, выполненные одним и тем же подрядчиком). ",
-    "goals_and_priorities": {
+    "description3": "Платформа также предоставит пользователям возможность оперативно сообщать о дефектах на дорогах и необходимости их устранения, голосовать за приоритетность ремонта дорог и предоставлять обратную связь в удобном формате, которые позволят гражданам самостоятельно анализировать и контролировать использование исполнения государственных дорожных контрактов. Информация по дорожным строительствам и ремонтам собирается из открытых данных портала госзакупок и Минюста.",
-      "anti-corruption_education": "Антикоррупционное просвещение населения, повышение общественного осознания значимости и важности борьбы с коррупцией в Кыргызстане;",
+    "description4":"Помимо веб-платформы имеются два мобильных приложения для платформ iOS и Android с функциями, аналогичными веб-сайту." 
-      "study_of_corruption_practices": "Организация изучения практики и теории борьбы с коррупцией и участия в ней структур гражданского общества в Кыргызстане и других странах;",
-      "supporting_citizens_and_organizations": "Содействие гражданам и организациям в реализации их конституционных прав и свобод;",
-      "international_experience": "Преимущественная ориентация на международный опыт уменьшения коррупции, освоение его технологий, ресурсов, а также включение структур гражданского общества в международный диалог борьбы с коррупцией."
-    }
   },
   "volunteers": {
     "activists": "Активисты",

src/app/[locale]/about-us/page.tsx

@@ -4,7 +4,7 @@ import { Metadata } from "next";
 import BreadCrumbs from "@/features/BreadCrumbs/BreadCrumbs";
 import { apiInstance } from "@/shared/config/apiConfig";
 import { IMetatag } from "@/shared/types/metatag-type";
-
+import { useTranslations } from "next-intl";
 export async function generateMetadata(): Promise<Metadata> {
   const data = await apiInstance
     .get<IMetatag[]>("/metatags/")
@@ -50,51 +50,20 @@ export async function generateMetadata(): Promise<Metadata> {
 }
 
 const AboutUs = () => {
+  const t = useTranslations("about_us");
   return (
     <div className="about-us page-padding">
       <BreadCrumbs homeRequired />
-      <Typography element="h2">О нас</Typography>
+      <Typography element="h2">{t("name")}</Typography>
 
       <div className="about-us__descriptions">
         <h3>
-          Transparency International-Кыргызстан - филиал международной
+          {t("description1")}
-          организации Transparency International в Кыргызской
-          Республике.
         </h3>
-        <h3>Миссия ТИ-Кыргызстан</h3>
+        <h3>{t("description2")}
-        <p>
+          {t("description3")}</h3>
-          Продвижение эффективной общественной политики и надлежащего
+        <h3>{t("description4")}</h3>
-          управления в целях предотвращения коррупции и усиления
-          демократии в стране.{" "}
-        </p>
-        <h3>Цели и приоритеты ТИ-Кыргызстан:</h3>
-        <ul>
-          <li>
-            - антикоррупционное просвещение населения, повышение
-            общественного осознания значимости и важности борьбы с
-            коррупцией в Кыргызстане;
-          </li>
-          <li>
-            - организация изучения практики и теории борьбы с
-            коррупцией и участия в ней структур гражданского общества
-            в Кыргызстане и других странах;
-          </li>
-          <li>
-            - содействие гражданам и организациям в реализации их
-            конституционных прав и свобод;
-          </li>
-          <li>
-            - преимущественная ориентация на международный опыт
-            уменьшения коррупции, освоение его технологий, ресурсов, а
-            также включение структур гражданского общества в
-            международный диалог борьбы с коррупцией.
-          </li>
-        </ul>
       </div>
-      <p className="about-us__author">
-        Photo By Mzximvs VdB from Brussels, belgium - Road to
-        Issyk-Kul (south shore), CC BY-SA 2.0
-      </p>
     </div>
   );
 };

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: 2, pagename: t("about_us"), pathname: "/about-us" },
-    { id: 3, pagename: t("privacy"), pathname: "/privacy" },
+    // { id: 3, pagename: t("privacy"), pathname: "/privacy" },
-    { id: 4, pagename: t("support"), pathname: "/support" },
+    // { 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;
+  // display: flex;
-  grid-template-columns: 1fr 1fr 1fr 1fr;
+  // 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";
@@ -9,8 +9,8 @@ import app_store_btn from "./icons/app-store-btn.svg";
 import play_market_btn from "./icons/play-market-btn.svg";
 import { Link } from "@/shared/config/navigation";
 import { useTranslations } from "next-intl";
-import NetKgTracker from "@/widgets/NetKgTracker/NetKgTracker";
+//import NetKgTracker from "@/widgets/NetKgTracker/NetKgTracker";
-import GoogleAnalyticsWidget from "@/widgets/GoogleAnalyticsWidget/GoogleAnalyticsWidget";
+//import GoogleAnalyticsWidget from "@/widgets/GoogleAnalyticsWidget/GoogleAnalyticsWidget";
 
 const Footer = () => {
   const t = useTranslations("general");
@@ -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>© {tRights("text")}</p>
-        <p>{tDisclaimer("text")}</p>
+        <p>{tDisclaimer("text")}</p> */}
       </div>
       <div className="footer__links">
         <h4>{t("navigation")}</h4>
@@ -34,10 +41,10 @@ const Footer = () => {
             </li>
           ))}
         </ul>
-        {/* Only for production*/}
+        {/* Only for production
-        <NetKgTracker />
+        <NetKgTracker />*/}
         <div className="footer__logo">
-          <GoogleAnalyticsWidget />
+          {/* <GoogleAnalyticsWidget /> */} {/* hide total amount*/}
         </div>
         *
       </div>
@@ -47,29 +54,59 @@ const Footer = () => {
         <ul>
           <li>admin@kgroad.org</li>
           <li>+9960312394038</li>
-
+          {LINKS2().map((link) => (
-          <li>
+            <li key={link.id}>
-            {[youtube, facebook, instagram].map((net, i) => (
+              <Link href={link.pathname}>{link.pagename}</Link>
-              <Link key={i} href="#">
+            </li>
-                <Image src={net} alt="Net Icon" />
+          ))}
-              </Link>
-            ))}
-          </li>
-          <li>Photo By ThomasG, CC BY-SA 3.0</li>
         </ul>
       </div>
 
       <div className="footer__apps">
+        <h4>{t("socials")}</h4>
+          <li>
+            {[
+              { src: youtube, url: "https://www.youtube.com/@TransparencyKyrgyzstan" },
+              { src: facebook, url: "https://www.facebook.com/tikyrgyzstan" },
+              { src: instagram, url: "https://www.instagram.com/transparencyinternational_kg?igsh=cTc2MHEwOW5vNDh2" }
+            ].map((net, i) => (
+              <Link key={i} href={net.url} target="_blank" rel="noopener noreferrer">
+                <Image src={net.src} alt="Net Icon" />
+              </Link>
+            ))}
+          </li>
         <h4>{t("download_our_app")}</h4>
+        
         <div className="footer__apps-btns">
-          {[app_store_btn, play_market_btn].map((app, i) => (
+          {[
-            <Link key={i} href="#">
+            { src: app_store_btn, url: "https://apps.apple.com/us/app/kg-road/id6484317991" },
-              <Image src={app} alt="App Button" />
+            { src: play_market_btn, url: "https://play.google.com/store/apps/details?id=kg.transparency.kgroad" }
+          ].map((app, i) => (
+            <Link key={i} href={app.url} target="_blank" rel="noopener noreferrer">
+              <Image src={app.src} alt="App Button" />
             </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>
+    
   );
 };