end

app/notification/page.jsx

@@ -0,0 +1,101 @@
+"use client";
+
+import React from "react";
+import { FaBell, FaInfoCircle } from "react-icons/fa";
+import TabBar from "../components/TabBar";
+
+const notifications = [
+  {
+    id: 1,
+    title: "Обновление приложения",
+    date: "15.12.2025",
+    type: "update",
+    text: "Мы улучшили стабильность работы и ускорили загрузку заявок.",
+  },
+  {
+    id: 2,
+    title: "Новые возможности для волонтёров",
+    date: "10.12.2025",
+    type: "feature",
+    text: "Теперь можно оставлять отзывы о заказчиках после выполнения заявок.",
+  },
+  {
+    id: 3,
+    title: "Советы по безопасности",
+    date: "05.12.2025",
+    type: "info",
+    text: "Всегда уточняйте детали заявки и не передавайте данные третьим лицам.",
+  },
+];
+
+const typeConfig = {
+  update:  { label: "Обновление", color: "#71A5E9" },
+  feature: { label: "Новая функция", color: "#94E067" },
+  info:    { label: "Информация", color: "#E9D171" },
+};
+
+const NotificationsPage = () => {
+  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 justify-between mb-4">
+          <div className="flex items-center gap-2">
+            <div className="w-8 h-8 rounded-full border border-white flex items-center justify-center">
+              <FaBell className="text-white text-sm" />
+            </div>
+            <p className="font-montserrat font-extrabold text-[20px] leading-[22px] text-white">
+              Уведомления
+            </p>
+          </div>
+        </header>
+
+        {/* Список уведомлений */}
+        <main className="bg-white rounded-xl p-4 flex flex-col gap-3 max-h-[80vh] overflow-y-auto">
+          {notifications.length === 0 && (
+            <p className="font-montserrat text-sm text-black">
+              Пока нет уведомлений
+            </p>
+          )}
+
+          {notifications.map((n) => {
+            const cfg = typeConfig[n.type] || {
+              label: "Уведомление",
+              color: "#E2E2E2",
+            };
+            return (
+              <div
+                key={n.id}
+                className="w-full rounded-xl bg-[#F5F5F5] px-3 py-3 flex flex-col gap-2"
+              >
+                <div className="flex items-center justify-between gap-2">
+                  <span
+                    className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full font-montserrat text-[10px] font-semibold text-white"
+                    style={{ backgroundColor: cfg.color }}
+                  >
+                    <FaInfoCircle className="text-[10px]" />
+                    {cfg.label}
+                  </span>
+                  <p className="font-montserrat text-[10px] text-black/70">
+                    {n.date}
+                  </p>
+                </div>
+
+                <p className="font-montserrat font-semibold text-[14px] text-black">
+                  {n.title}
+                </p>
+                <p className="font-montserrat text-[12px] text-black/80">
+                  {n.text}
+                </p>
+              </div>
+            );
+          })}
+        </main>
+
+        <TabBar />
+      </div>
+    </div>
+  );
+};
+
+export default NotificationsPage;