New Home page, New UI, Proxy api requests through next.js api routes

app/components/Navbar/Navbar.jsx

@@ -0,0 +1,56 @@
+"use client"
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+export const Navbar = () => {
+  const pathname = usePathname();
+  const navLinks = [
+    {
+      id: 1,
+      icon: "material-symbols--home-outline",
+      iconActive: "material-symbols--home",
+      title: "Домашняя",
+      href: "/",
+    },
+    {
+      id: 2,
+      icon: "material-symbols--search",
+      iconActive: "material-symbols--search",
+      title: "Поиск",
+      href: "/search",
+    },
+    {
+      id: 3,
+      icon: "material-symbols--bookmarks-outline",
+      iconActive: "material-symbols--bookmarks",
+      title: "Закладки",
+      href: "/bookmarks",
+    },
+    {
+      id: 4,
+      icon: "material-symbols--favorite-outline",
+      iconActive: "material-symbols--favorite",
+      title: "Избранное",
+      href: "/favorites",
+    },
+    {
+      id: 5,
+      icon: "material-symbols--history",
+      iconActive: "material-symbols--history",
+      title: "История",
+      href: "/history",
+    },
+  ];
+
+  return (
+    <header className="bg-black text-white sm:sticky sm:top-0 left-0 z-50 fixed bottom-0 w-full">
+      <div className="px-4 py-4">
+        <nav className="flex gap-4">
+          {navLinks.map((link) => {
+            return <Link key={link.id} href={link.href} className="flex items-center flex-col sm:flex-row"><span className={`iconify ${pathname == link.href ? link.iconActive : link.icon} w-6 h-6`}></span><span className={`${pathname == link.href ? "font-bold" : ""} text-xs sm:text-base`}>{link.title}</span></Link>;
+          })}
+        </nav>
+      </div>
+    </header>
+  );
+};

app/components/ReleaseCourusel/ReleaseCourusel.jsx

@@ -0,0 +1,25 @@
+"use client";
+import { ReleaseLink } from "../ReleaseLink/ReleaseLink";
+export const ReleaseCourusel = (props) => {
+  return (
+    <section className="group relative">
+      <div className="flex justify-between border-b-2 border-black px-4">
+        <h1 className="font-bold text-md sm:text-xl">{props.sectionTitle}</h1>
+        <a href={props.showAllLink}>
+          <div className="flex items-center">
+            <p className="font-bold hidden sm:block text-xl">Показать все</p>
+            <span className="iconify mdi--arrow-right w-6 h-6"></span>
+          </div>
+        </a>
+      </div>
+      <div
+        className="flex gap-2 overflow-x-scroll p-4 scrollbar-none"
+        id={props.id}
+      >
+        {props.content.map((release) => {
+          return <ReleaseLink key={release.id} {...release} />;
+        })}
+      </div>
+    </section>
+  );
+};

app/components/ReleaseLink/ReleaseLink.jsx

@@ -0,0 +1,37 @@
+import Link from "next/link";
+
+export const ReleaseLink = (props) => {
+  const grade = props.grade.toFixed(1);
+  return (
+    <Link href={`/release/${props.id}`} className=" hover:scale-105 transition hover:z-10">
+        <div className="aspect-video xl:w-[600px] md:w-[400px] w-[200px]">
+          <div className="bg-gradient-to-t from-black to-transparent relative w-full h-full">
+            <img
+              className="w-full h-full object-cover absolute mix-blend-overlay"
+              src={props.image}
+              alt=""
+            />
+            <div
+              className={`absolute left-2 top-2 rounded-sm ${
+                grade == 0
+                  ? "hidden"
+                  : grade < 2
+                  ? "bg-red-500"
+                  : grade < 3
+                  ? "bg-orange-500"
+                  : grade < 4
+                  ? "bg-yellow-500"
+                  : "bg-green-500"
+              }`}
+            >
+              <p className="px-2 sm:px-4 py-0.5 sm:py-1 text-xs sm:text-base text-white">{grade}</p>
+            </div>
+            <div className="absolute top-2 right-2 bg-gray-500 rounded-sm">
+              <p className="px-2 sm:px-4 py-0.5 sm:py-1 text-xs sm:text-base text-white">{props.status.name}</p>
+            </div>
+            <p className="absolute left-2 bottom-2 text-white">{props.title_ru}</p>
+          </div>
+        </div>
+    </Link>
+  );
+};