improved seo, made not-found page, fixed bugs in news details and in report datails pages

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

@@ -7,7 +7,22 @@ import BreadCrumbs from "@/features/BreadCrumbs/BreadCrumbs";
 
 export const metadata: Metadata = {
   title: "KG ROAD | О нас",
-  description: 'Страница "О Нас" KG ROAD',
+  description:
+    "Transparency International - Кыргызстан - филиал международной организации Transparency International в Кыргызской Республике.",
+  keywords: [
+    "Миссия Transparency International - Кыргызстан",
+    "Цели и приоритеты ТИ-Кыргызстан",
+  ],
+  openGraph: {
+    images: [
+      {
+        url: header.src,
+      },
+    ],
+    title: "KG ROAD | О нас",
+    description:
+      "Transparency International - Кыргызстан - филиал международной организации Transparency International в Кыргызской Республике.",
+  },
 };
 
 const AboutUs = () => {

src/app/[locale]/layout.tsx

@@ -1,5 +1,4 @@
-import type { Metadata } from "next";
+import "../globals.scss";
-import "./globals.scss";
 import "./App.scss";
 import "@/shared/fonts/fonts.scss";
 import Navbar from "@/widgets/Navbar/Navbar";

src/app/[locale]/news/[id]/error.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import NotFound from "@/widgets/NotFound/NotFound";
+
+const error = () => {
+  return <NotFound />;
+};
+
+export default error;

src/app/[locale]/news/[id]/page.tsx

@@ -7,11 +7,33 @@ import message from "./icons/message.svg";
 import calendar from "./icons/calendar.svg";
 import ReviewSection from "@/widgets/ReviewSection/ReviewSection";
 import BreadCrumbs from "@/features/BreadCrumbs/BreadCrumbs";
+import { Metadata } from "next";
+
+export async function generateMetadata({
+  params,
+}: {
+  params: { id: string };
+}): Promise<Metadata> {
+  const response = await apiInstance.get<INews>(
+    `/news/${params.id}/`
+  );
+
+  return {
+    title: response.data.title,
+    description: response.data.description,
+    openGraph: {
+      images: [response.data.image],
+      type: "article",
+      publishedTime: response.data.created_at,
+    },
+    keywords: ["Новости КР", "Дорожные происшествия", "Кыргызстан"],
+  };
+}
 
 const NewsDetails = async ({
   params,
 }: {
-  params: { id: string };
+  params: { id: string; новость: string };
 }) => {
   const getNewsById = async () => {
     const response = await apiInstance.get<INews>(

src/app/[locale]/not-found.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import NotFound from "@/widgets/NotFound/NotFound";
+import "../globals.scss";
+import "@/shared/fonts/fonts.scss";
+
+export default function NotFoundPage() {
+  return <NotFound />;
+}

src/app/[locale]/page.tsx

@@ -8,7 +8,24 @@ import { Metadata } from "next";
 export const metadata: Metadata = {
   title: "KG ROAD | Главная",
   description:
-    "Главная страница KG ROAD",
+    "Главная страница KG ROAD | Сделаем дороги безопасными!",
+  keywords: [
+    "Новости",
+    "Разбитые дороги",
+    "Очаги аварийности",
+    "Локальные дефекты",
+    "Дороги В планах ремонта",
+    "Отремонтированные дороги",
+    "Исправленные локальные дефекты",
+    "Карта дорог",
+    "Рейтинг",
+  ],
+  openGraph: {
+    title: "KG ROAD | Главная",
+    description:
+      "Главная страница KG ROAD | Сделаем дороги безопасными!",
+    type: "website",
+  },
 };
 
 const Home = async ({

src/app/[locale]/report/[id]/error.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import NotFound from "@/widgets/NotFound/NotFound";
+
+const error = () => {
+  return <NotFound />;
+};
+
+export default error;

src/app/[locale]/report/[id]/page.tsx

@@ -6,6 +6,8 @@ import ReportInformation from "@/widgets/report-details/ReportInformation/Report
 import ReportImages from "@/widgets/report-details/ReportImages/ReportImages";
 import dynamic from "next/dynamic";
 import BreadCrumbs from "@/features/BreadCrumbs/BreadCrumbs";
+import NotFound from "@/widgets/NotFound/NotFound";
+import { apiInstance } from "@/shared/config/apiConfig";
 
 const DynamicMap = dynamic(
   () => import("@/widgets/report-details/ReportMap/ReportMap"),
@@ -14,27 +16,45 @@ const DynamicMap = dynamic(
   }
 );
 
-export const metadata: Metadata = {
+export async function generateMetadata({
-  title: "KG ROAD | Обращение",
+  params,
-  description:
+}: {
-    "Страница обращения Kyrgyzstan Transperency International",
+  params: { id: string };
-};
+}): Promise<Metadata> {
+  const response = await apiInstance.get<IReport>(
+    `/report/${params.id}/`
+  );
+
+  return {
+    title: `KG ROAD | ${response.data.location[0].address}`,
+    description: response.data.description,
+    openGraph: {
+      title: `KG ROAD | ${response.data.location[0].address}`,
+      description: response.data.description,
+      images: [response.data.image[0].image],
+      type: "website",
+    },
+  };
+}
 
 const ReportDetails = async ({
   params,
 }: {
   params: { id: string };
 }) => {
-  console.log(JSON.parse(params.id));
   const getReportDetails = async () => {
-    const res = await fetch(
+    try {
-      `${process.env.NEXT_PUBLIC_BASE_API}/report/${params.id}/`,
+      const res = await fetch(
-      { cache: "no-store" }
+        `${process.env.NEXT_PUBLIC_BASE_API}/report/${params.id}/`,
-    );
+        { cache: "no-store" }
+      );
 
-    return res.json();
+      return res.json();
+    } catch (error) {
+      console.log(error);
+    }
   };
-  const report: IReport = (await getReportDetails()) || {};
+  const report: IReport = await getReportDetails();
 
   return (
     <div className="report-details page-padding">

src/app/[locale]/statistics/page.tsx

@@ -4,11 +4,17 @@ import StatisticsTable from "@/widgets/tables/StatisticsTable/StatisticsTable";
 import { Metadata } from "next";
 import BreadCrumbs from "@/features/BreadCrumbs/BreadCrumbs";
 
-export const metadata: Metadata = {
+export async function generateMetadata({
-  title: "KG ROAD | Статистика",
+  searchParams,
-  description: "Страница статистики KG ROAD",
+}: {
-};
+  searchParams: { "поиск-населенного-пункта": string };
-
+}): Promise<Metadata> {
+  return {
+    title: "KG ROAD | Статистика",
+    description: `Статистика по ${searchParams["поиск-населенного-пункта"]} KG ROAD`,
+    keywords: ["Бишкек", "Чуй", "Кыргызстан", "Дороги"],
+  };
+}
 const Statistics = ({
   searchParams,
 }: {

src/app/[locale]/volunteers/page.tsx

@@ -6,7 +6,7 @@ import BreadCrumbs from "@/features/BreadCrumbs/BreadCrumbs";
 
 export const metadata: Metadata = {
   title: "KG ROAD | Волонтеры",
-  description: "Страница волонтеров KG ROAD",
+  description: "Страница лучших волонтеров Кыргызской Республики!",
 };
 
 const Volunteers = () => {

src/app/not-found.tsx

@@ -1,12 +1,14 @@
 "use client";
 
-import Error from "next/error";
+import NotFound from "@/widgets/NotFound/NotFound";
+import "./globals.scss";
+import "@/shared/fonts/fonts.scss";
 
-export default function NotFound() {
+export default function NotFoundPage() {
   return (
     <html lang="en">
       <body>
-        <Error statusCode={404} />
+        <NotFound />
       </body>
     </html>
   );

src/entities/NewsCard/NewsCard.tsx

@@ -61,7 +61,7 @@ const NewsCard: React.FC<INewsCard> = ({
       <Link
         href={{
           pathname: `/news/${id}`,
-          query: { title: title },
+          query: { новость: title },
         }}
         className="news-card__more-btn"
       >

src/features/BreadCrumbs/BreadCrumbs.tsx

@@ -14,7 +14,7 @@ const BreadCrumbs: React.FC<IBreadcrumbsProps> = ({
   homeRequired,
 }: IBreadcrumbsProps) => {
   const pathname = usePathname();
-  const query = useSearchParams().get("title");
+  const query = useSearchParams().get("новость");
   const routes = pathname.split("/").filter((route) => route !== "");
   const tRoutes: Record<string, string> = {
     "about-us": "О нас",

src/widgets/NotFound/NotFound.scss

@@ -0,0 +1,51 @@
+.not-found {
+  padding: 16px;
+  margin-bottom: 200px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  img {
+    width: 100%;
+    height: 497px;
+    aspect-ratio: 1 / 1;
+  }
+
+  div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+    text-align: center;
+
+    h2 {
+      color: rgb(11, 31, 51);
+      font-size: 20px;
+      font-weight: 800;
+      line-height: 24px;
+    }
+
+    p {
+      color: rgb(131, 130, 130);
+      font-size: 20px;
+      font-weight: 400;
+      line-height: 24px;
+    }
+  }
+
+  a {
+    max-width: 320px;
+    width: 100%;
+    height: 55px;
+    margin-top: 62px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: rgb(255, 255, 255);
+    font-size: 20px;
+    font-weight: 800;
+    line-height: 24px;
+    border-radius: 13px;
+    background-color: rgb(57, 152, 232);
+  }
+}

src/widgets/NotFound/NotFound.tsx

@@ -0,0 +1,21 @@
+import Link from "next/link";
+import not_found from "./assets/not-found.svg";
+import "./NotFound.scss";
+
+const NotFound = () => {
+  return (
+    <div className="not-found">
+      <img src={not_found.src} alt="Not Found Image" />
+      <div>
+        <h2>Страница не найдена (404)</h2>
+        <p>
+          Неправильно набран адрес или такой страницы не существует.
+        </p>
+      </div>
+
+      <Link href="/">На главную</Link>
+    </div>
+  );
+};
+
+export default NotFound;

src/widgets/NotFound/assets/not-found.svg

@@ -0,0 +1,16 @@
+<svg width="560" height="497" viewBox="0 0 560 497" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="294.5" cy="261.5" r="175.5" fill="#F0F5FE"/>
+<circle cx="130" cy="143" r="11" fill="#F0F5FE"/>
+<circle cx="414.5" cy="99.5" r="20.5" fill="#F0F5FE"/>
+<circle cx="133.5" cy="374.5" r="19.5" fill="#F0F5FE"/>
+<circle cx="482.5" cy="355.5" r="19.5" fill="#F0F5FE"/>
+<circle cx="444.5" cy="377.5" r="9.5" fill="#F0F5FE"/>
+<path d="M270.308 296.62L268.543 297.188L269.958 298.242L282.135 307.321L282.142 307.327L282.15 307.333C289.224 312.512 291.962 316.136 291.5 318.444L291.496 318.462L291.494 318.48C291.189 320.741 288.071 323.024 281.218 325.226C276.575 326.719 272.166 326.931 267.861 326.137C263.431 325.319 258.568 323.336 253.307 319.895C251.495 318.711 250.274 317.819 249.57 317.198L249.527 317.16L249.481 317.124L238.595 308.611L236.965 307.336L234.857 308.014C207.222 316.895 186.182 323.575 171.733 328.056L171.72 328.06L171.708 328.064C168.182 329.197 163.583 329.328 157.571 328.279C151.698 327.254 146.234 325.164 141.179 321.858C138.205 319.913 135.658 317.64 133.564 315.023C120.573 298.391 108.813 278.479 98.2963 255.277C96.0874 250.353 95.6916 246.72 96.8513 244.267L96.8536 244.262L96.8558 244.257C97.9905 241.751 102.074 239.23 109.718 236.773C113.66 235.506 117.053 235.188 119.95 235.512L120.005 235.518L120.059 235.523C123.249 235.813 125.855 236.635 128.053 238.073C130.558 239.711 132.283 241.652 133.154 243.94L133.161 243.96L133.17 243.979C144.494 269.62 155.587 289.754 166.462 304.349L167.779 306.117L170.498 305.243L214.526 291.093L216.2 290.555L214.955 289.532C201.712 278.649 190.082 267.989 180.059 257.551C176.547 253.829 175.268 250.725 175.939 248.172L175.943 248.154L175.947 248.136C176.453 245.557 179.359 243.318 185.119 241.466C189.749 239.978 193.749 239.554 197.169 239.894C200.494 240.224 203.822 241.333 207.18 243.53C209.305 244.919 210.607 245.956 211.249 246.676L211.286 246.719L211.33 246.761C222.166 257.202 233.971 267.902 246.742 278.861L248.334 280.228L250.55 279.516L260.842 276.208C265.669 274.657 269.84 274.2 273.404 274.54C276.863 274.871 280.293 276.006 283.727 278.252C289.486 282.018 291.206 284.911 290.016 287.15C288.736 289.559 284.38 292.098 276.312 294.69L270.308 296.62Z" fill="#CAE1FB" stroke="#CAE1FB" stroke-width="4"/>
+<path d="M469.021 231.365L467.255 231.932L468.67 232.987L476.197 238.599L476.205 238.605L476.213 238.611C480.563 241.796 482.045 243.888 481.796 245.13L481.793 245.148L481.79 245.166C481.626 246.383 479.925 247.712 475.765 249.049C473.05 249.921 470.607 250.009 468.307 249.584C465.88 249.136 463.058 248.018 459.877 245.938C458.768 245.213 458.055 244.689 457.661 244.342L457.619 244.304L457.572 244.268L450.843 239.005L449.213 237.73L447.105 238.408C430.022 243.898 417.019 248.026 408.092 250.795L408.079 250.799L408.066 250.803C406.142 251.421 403.602 251.515 400.107 250.905C396.75 250.32 393.568 249.118 390.56 247.151C388.801 246 387.279 244.646 386.019 243.072C378.015 232.824 370.76 220.543 364.267 206.218C362.914 203.203 362.703 201.039 363.376 199.616L363.378 199.612L363.38 199.607C364.019 198.195 366.363 196.702 371.023 195.204C373.364 194.451 375.236 194.309 376.693 194.472L376.748 194.478L376.802 194.483C378.479 194.636 379.818 195.055 380.992 195.823C382.409 196.75 383.41 197.863 383.921 199.206L383.929 199.225L383.937 199.245C390.942 215.105 397.812 227.579 404.561 236.638L405.878 238.405L408.597 237.531L435.815 228.784L437.489 228.246L436.244 227.222C428.077 220.511 420.907 213.94 414.731 207.507C412.619 205.269 411.898 203.453 412.282 201.989L412.287 201.972L412.29 201.954C412.574 200.507 414.204 199.208 417.635 198.105C420.41 197.214 422.666 197.006 424.455 197.184C426.148 197.352 427.957 197.92 429.908 199.196C431.2 200.041 431.936 200.637 432.275 201.018L432.313 201.06L432.356 201.102C439.065 207.566 446.372 214.189 454.276 220.972L455.868 222.339L458.084 221.627L464.447 219.582C467.345 218.65 469.71 218.423 471.59 218.603C473.366 218.772 475.233 219.357 477.228 220.661C480.684 222.922 481.532 224.535 480.902 225.72C480.182 227.076 477.67 228.585 472.732 230.172L469.021 231.365Z" fill="#CAE1FB" stroke="#CAE1FB" stroke-width="4"/>
+<path d="M337.384 222.018C353.059 229.83 365.498 240.199 372.969 250.555C380.501 260.998 382.678 270.934 379.013 278.288C375.347 285.643 366.103 289.887 353.231 290.16C340.464 290.43 324.696 286.741 309.02 278.929C293.344 271.116 280.906 260.747 273.435 250.391C265.903 239.949 263.726 230.013 267.391 222.658C271.057 215.304 280.301 211.06 293.173 210.787C305.94 210.517 321.708 214.205 337.384 222.018Z" fill="#DDEBFF" stroke="#CAE1FB" stroke-width="4"/>
+<path d="M261.097 188.743L293 268.5L298.5 272.5L307 277.5L314.5 280.5L278.494 187.279C278.196 186.508 277.455 186 276.628 186L262.954 186C261.539 186 260.572 187.429 261.097 188.743Z" fill="#DDEBFF" stroke="#CAE1FB" stroke-width="4"/>
+<path d="M296.897 171.111L344.285 289.463C344.418 289.795 344.718 290.031 345.072 290.082L347.93 290.49C347.976 290.497 348.024 290.5 348.071 290.5L355 290.5L358.923 290.009C358.974 290.003 359.025 289.993 359.074 289.979L362.5 289L365.084 287.893C365.59 287.676 365.826 287.09 365.61 286.582L315.864 169.519C315.7 169.133 315.313 168.891 314.895 168.911L297.777 169.741C297.09 169.774 296.641 170.473 296.897 171.111Z" fill="#DDEBFF" stroke="#CAE1FB" stroke-width="4"/>
+<path d="M286.168 201.956L313.171 193.293C314.673 192.811 316.282 193.638 316.764 195.141C317.246 196.643 316.419 198.252 314.916 198.734L287.914 207.398L286.168 201.956Z" fill="#CAE1FB" stroke="#CAE1FB" stroke-width="4"/>
+<path d="M297.429 230.854L323.957 220.829C325.433 220.271 327.082 221.016 327.64 222.492C328.198 223.968 327.453 225.617 325.977 226.175L299.45 236.2L297.429 230.854Z" fill="#CAE1FB" stroke="#CAE1FB" stroke-width="4"/>
+<path d="M309.081 258.52L332.472 248.859C333.931 248.256 335.602 248.95 336.204 250.409C336.807 251.868 336.112 253.538 334.654 254.141L311.262 263.802L309.081 258.52Z" fill="#CAE1FB" stroke="#CAE1FB" stroke-width="4"/>
+</svg>

src/widgets/forms/SignInForm/SignInForm.tsx

@@ -48,8 +48,6 @@ const SignInForm = () => {
 
     setLoader(false);
 
-    console.log(res);
-
     if (res?.ok && !res.error) {
       router.push("/profile/personal");
     } else if (res?.status.toString().slice(0, 1) === "4") {