fix(frontend) make main page

frontend/src/components/Arrow.jsx

@@ -0,0 +1,42 @@
+import { useNavigate } from "react-router-dom";
+
+export default function Arrow({
+  link,
+  radius = "20",
+  cx = "64",
+  cy = "20",
+  width = "84",
+  height = "40",
+  colorCircle = "#B78A61",
+}) {
+  const navigate = useNavigate();
+
+  return (
+    <button
+      onClick={() => navigate(link)}
+      className="group border-none bg-transparent cursor-pointer"
+    >
+      <svg
+        width={width}
+        height={height}
+        viewBox="0 0 84 40"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          cx={cx}
+          cy={cy}
+          r={radius}
+          fill={colorCircle}
+          className="transition-colors duration-200 group-hover:fill-[#a85656]"
+        />
+        <path d="M0 20.5H64" stroke="white" strokeWidth="2" />
+        <path
+          d="M54 9L64.0858 19.0858C64.8668 19.8668 64.8668 21.1332 64.0858 21.9142L54 32"
+          stroke="white"
+          strokeWidth="2"
+        />
+      </svg>
+    </button>
+  );
+}

frontend/src/pages/Main.jsx

@@ -1,48 +1,36 @@
-import { useEffect, useState } from "react";
-import * as api from "../api"; // Импортируем все функции из api/index.js
 import PageLayout from "../components/PageLayout";
+import bgLayout from "../assets/Исходники/background.png";
+import Arrow from "../components/Arrow";
+
+import { useEffect, useState } from "react";
 
 export default function Dashboard() {
-  const [items, setItems] = useState([]);
+  const [isLoaded, setIsLoaded] = useState(false);
 
   useEffect(() => {
-    api
-      .getAllItems()
-      .then((res) => {
-        setItems(res.data);
-      })
-      .catch((err) => {
-        console.error("Ошибка при получении товара с сервера", err);
-      });
+    setIsLoaded(true);
   }, []);
-
   return (
     <PageLayout>
-      <main className="p-16 grow w-full gap-4">
-        {Array.isArray(items) &&
-          items.map((item) => (
-            <div
-              key={item.id}
-              className="bg-white flex flex-col justify-center items-start p-4 border border-slate-500 rounded-lg shadow-sm"
+      <main
+        className="px-16 grow w-full gap-4 bg-cover bg-center bg-no-repeat h-screen overflow-hidden"
+        style={{ backgroundImage: `url(${bgLayout})` }}
       >
-              <div className="text-gray-500 text-xs">ID: ${item.id}</div>
-              <div className="text-xl font-black text-slate-800">
-                {item.name}
-              </div>
-              <div className="text-xl font-black text-slate-800">
-                {item.price}
-              </div>
-              <div className="text-xl font-black text-slate-800">
-                {item.name}
-              </div>
-              <div className="text-xl font-black text-slate-800">
-                {item.category}
-              </div>
-              <div className="text-xl font-black text-slate-800">
-                {item.unit}
+        <div className="mt-37.5 leading-[1.3] text-6xl font-bold text-white flex flex-col">
+          <div
+            className={`transition-all duration-1000 ease-out ${isLoaded
+                ? "translate-x-0 opacity-100"
+                : "-transition-x-full opacity-0"
+              }`}
+          >
+            <div>Свежие морепродукты</div>
+            <div>На любой вкус</div>
+            <div className="pl-10 py-6.5 font-normal text-2xl flex flex-row">
+              <div className="mr-10">Смотреть товары</div>
+              <Arrow link="/shop" />
+            </div>
           </div>
         </div>
-          ))}
       </main>
     </PageLayout>
   );