VolonteurMainPage

app/ProfilePage/page.jsx

@@ -0,0 +1,109 @@
+"use client";
+
+import React from "react";
+import { useRouter } from "next/navigation";
+import { FaUserCircle, FaStar } from "react-icons/fa";
+import TabBar from "../components/TabBar";
+
+const ProfilePage = () => {
+  const router = useRouter();
+
+  const fullName = "Иванов Александр Сергеевич";
+  const birthDate = "12.03.1990";
+  const rating = 4.8;
+
+  return (
+    <div className="min-h-screen w-full bg-[#90D2F9] flex justify-center px-4">
+      <div className="relative w-full max-w-md flex flex-col pb-20 pt-4">
+        {/* Header с кнопкой назад и заголовком по центру */}
+        <header className="flex items-center mb-4">
+          <button
+            type="button"
+            onClick={() => router.back()}
+            className="text-white w-8 h-8 rounded-full flex items-center justify-center text-lg"
+          >
+            ←
+          </button>
+          <h1 className="flex-1 text-center font-montserrat font-extrabold text-[20px] leading-[24px] text-white">
+            Профиль
+          </h1>
+          <span className="w-8" />
+        </header>
+
+        {/* Карточка профиля */}
+        <main className="bg-white rounded-3xl p-4 flex flex-col items-center gap-4 shadow-lg">
+          {/* Аватар */}
+          <FaUserCircle className="text-[#72B8E2] w-20 h-20" />
+
+          {/* ФИО и рейтинг */}
+          <div className="text-center space-y-1">
+            {/* <p className="font-montserrat font-extrabold text-[16px] text-black">
+              ФИО
+            </p> */}
+            <p className="font-montserrat font-bold text-[20px] text-black">
+              {fullName}
+            </p>
+
+            {/* Рейтинг + звезды */}
+            <div className="mt-2 flex items-center justify-center gap-2">
+              <span className="font-montserrat font-semibold text-[14px] text-black">
+                Рейтинг: {rating.toFixed(1)}
+              </span>
+              <div className="flex gap-1">
+                {[1, 2, 3, 4, 5].map((star) => (
+                  <FaStar
+                    key={star}
+                    size={18}
+                    className={
+                      star <= Math.round(rating)
+                        ? "text-[#F6E168] fill-[#F6E168]"
+                        : "text-[#F6E168] fill-[#F6E168]/30"
+                    }
+                  />
+                ))}
+              </div>
+            </div>
+          </div>
+
+          {/* Контакты и день рождения */}
+          <div className="w-full bg-[#72B8E2] rounded-2xl p-3 text-white space-y-1">
+            <p className="font-montserrat text-[12px]">
+              Дата рождения: {birthDate}
+            </p>
+            <p className="font-montserrat text-[12px]">
+              Почта: example@mail.com
+            </p>
+            <p className="font-montserrat text-[12px]">
+              Телефон: +7 (900) 000-00-00
+            </p>
+          </div>
+
+          {/* Кнопки */}
+          <div className="w-full flex flex-col gap-2 mt-2">
+            <button
+              type="button"
+              onClick={() => router.push("/profileSettings")}
+              className="w-full bg-[#E0B267] rounded-full py-2 flex items-center justify-center"
+            >
+              <span className="font-montserrat font-extrabold text-[14px] text-white">
+                Редактировать профиль
+              </span>
+            </button>
+            <button
+              type="button"
+              className="w-full bg-[#E07567] rounded-full py-2 flex items-center justify-center"
+            >
+              <span className="font-montserrat font-extrabold text-[14px] text-white">
+                Выйти из аккаунта
+              </span>
+            </button>
+          </div>
+        </main>
+
+        <TabBar />
+      </div>
+    </div>
+  );
+};
+
+export default ProfilePage;