oop

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

app/events/[slug]/page.tsx

@@ -0,0 +1,128 @@
+import Breadcrumbs from "@/components/breadcrumb";
+import InfoBlock from "@/components/info-block";
+import NavSection from "@/components/nav-section";
+import InfoItem from "@/components/info-item";
+import HumanCard from "@/components/human-card";
+import SocialItem from "@/components/social-item";
+
+export default function Page() {
+    const infoItems = [
+        {
+            name: "Базовый курс"
+        },
+        {
+            name: "600ч",
+            img: "clock"
+        },
+        {
+            name: "11.01.2025 - 11.11.2028",
+            img: "date"
+        },
+        {
+            name: "Донецк",
+            img: "location"
+        }
+    ]
+
+    const humanCards = [
+        {
+            name: "Мамченко Анжелика Анатольевна",
+            post: "Руководитель программы",
+            skills: ["Терапевт", "Супервизор", "Тренер", "Ассоциированный тренер", "Тренер-стажер", "Ведущий тренер"]
+        },
+        {
+            name: "Мамченко Анжелика Анатольевна",
+            post: "Руководитель программы",
+            skills: ["Терапевт", "Супервизор", "Тренер", "Ассоциированный тренер", "Тренер-стажер", "Ведущий тренер"]
+        }
+    ]
+
+    return(
+        <main>
+            <Breadcrumbs/>
+            <div className="bg-blue rounded-[6px] max-w-[1032px] m-auto mb-[30px] py-[45px] px-[100px]">
+                <p className="text-white text-[48px] text-center uppercase leading-[48px]">Базовая программа подготовки гештальт-терапевтов — добор</p>
+            </div>
+            <div className="flex flex-col m-auto max-w-[1032px] gap-[50px] mb-[80px]">
+                <div className="flex gap-[23px]">
+                    {infoItems.map((item, index) => {
+                        return <InfoItem variable="secondary" name={item.name} pathImg={item?.img} key={index}/>
+                    })}
+                </div>
+                <div className="flex gap-[18px]">
+                    {humanCards.map((card, index) => {
+                        return <HumanCard name={card.name} post={card.post} skills={card.skills} key={index}
+                                          variant="secondary"/>
+                    })}
+                </div>
+                <div className="flex gap-[21px]">
+                    <div
+                        className="flex flex-col border-white border-[1px] rounded-[6px] min-w-[780px] h-[200px] px-[32px] justify-center gap-[12px]">
+                        <h4 className="text-black text-[26px] uppercase">формат мероприятия</h4>
+                        <p className="text-black text-[15px] max-w-[640px]">Встречи проходят очно в формате двухдневок:
+                            суббота, воскресенье раз в 1,5 - 2,5 месяца. Формы работы - групповые встречи, включающие
+                            лекции, упражнения, групповую динамику, игры, эксперименты, арт-терапию, психодраму, личные
+                            сессии в кругу, обсуждения и т.д.</p>
+                    </div>
+                    <div
+                        className="flex flex-col bg-white rounded-[12px] pt-[47px] pb-[34px] w-full pl-[32px] gap-[23px] relative">
+                        <div className="flex-col flex text-[18px]">
+                            <span>+7 949 185 65 65 </span>
+                            <span>+7 949 185 65 65 </span>
+                        </div>
+                        <div className="flex-col flex text-[15px]">
+                            <span>Luchayapochta@mail.ru</span>
+                            <span>Luchayapochta@mail.ru</span>
+                        </div>
+                        <div
+                            className="absolute bg-white w-[47px] h-[47px] flex rounded-full items-center justify-center top-[-20px]">
+                            <SocialItem icon="logo_tg" link="/"/>
+                        </div>
+                    </div>
+                </div>
+                <div className="flex flex-col gap-[30px] max-w-[910px] m-auto">
+                    <h3 className="uppercase text-black text-[26px]">содержание</h3>
+                    <p className="text-[15px] leading-[24px]">
+                        ОСНОВНЫЕ ТЕМЫ: 1. Основы гештальт-терапии. Исторические корни, основоположники гештальт-терапии,
+                        современный гештальт-подход, литература. Основные понятия и принципы гештальт-терапии
+                        (поле — организм-среда, феноменологический подход в гештальт-терапии, диалог, осознавание,
+                        фигура и фон, контакт, граница контакта, цикл опыта, творческое приспособление). 2. Теория поля
+                        в гештальт-терапии. Теория и функции self. Динамика self. Формы прерывания контакта. 3.
+                        Творческие
+                        методы в гештальт-терапии. Работа с внутренней феноменологией клиента. Теория парадоксальных
+                        изменений.
+                        Работа с полярностями. Арт-терапия, работа с рисунком, метафорами, сновидениями. Модальности
+                        контакта. 4.
+                        Гештальт и телесно-ориентированный подход. 5. Философия гештальт-подхода и методология практики.
+                        Терапевтическая позиция. Терапевтические отношения, перенос и контр-перенос. Основные стратегии
+                        работы гештальт-терапевта. Работа на границе контакта. Процесс-анализ терапевтической сессии.
+                        6. Теории развития. Развитие ребенка. Гештальт-терапия с детьми и родителями. Семейная
+                        гештальт-терапия.
+                        7. Кризис и травма. 8. Гештальт-терапия в клинической практике. Здоровье и болезнь. Принципы
+                        клинической диагностики в гештальт-терапии. Динамическая концепция личности в гештальт-терапии.
+                        9. Гештальт-подход в работе с психосоматикой. 10. Гештальт-подход в работе с группами. Феномены
+                        поля в групповой динамике. Гештальт и системный подход. Работа с парами, малыми системами.
+                        Терапевтическое сообщество. Организационное гештальт-консультирование. 11. Принципы и приложения
+                        этики
+                    </p>
+                </div>
+                <div className="flex flex-col gap-[30px] max-w-[910px] m-auto">
+                    <h3 className="uppercase text-black text-[26px]">Дополнительная информация</h3>
+                    <p className="text-[15px] leading-[24px]">
+                        Ведущие программы:<br/>Анжелика Мамченко - тренер, супервизор, гештальт терапевт,
+                        клинический психолог, ведущая базовых программ, супервизорских, терапевтических групп и
+                        специализаций «Гештальт подход в работе с психосоматикой», «Гештальт терапия в клинической
+                        практике»<br/>Софья Пушкарева – психолог, супервизор, гештальт терапевт, ведущая терапевтических
+                        и супервизорских групп <br/>Руководитель программы – Анжелика Мамченко. <br/>Запись на онлайн
+                        знакомство по телефону: Софья Пушкарева <span className="text-blue underline">+7 9265968715</span>, WhatsApp,Telegram,
+                        почта <span className="text-blue underline">sida786@mail.ru</span> <br/>Запись в программу после онлайн знакомства.
+                    </p>
+                </div>
+            </div>
+            <div className="flex flex-col gap-[80px]">
+                <InfoBlock/>
+                <NavSection/>
+            </div>
+        </main>
+    )
+}

app/events/page.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import InfoBlock from "@/components/info-block";
+import Breadcrumbs from "@/components/breadcrumb";
+import Select from "@/components/select";
+import FilterCheckbox from "@/components/filterCheckbox";
+import EventCard from "@/components/event-card";
+import NavSection from "@/components/nav-section";
+import Pagination from "@/components/pagination";
+import React, { useState } from 'react';
+import Button from "@/components/button";
+
+export default function Page() {
+    const [currentPage, setCurrentPage] = useState(1);
+    const totalItems = 100;
+    const itemsPerPage = 10;
+
+    const handlePageChange = (page: number) => {
+        setCurrentPage(page);
+    };
+
+    interface EventCard {
+        title: string;
+        description: string;
+    }
+
+    const eventCards: EventCard[] = [
+        {
+            title: "добровольное самоорганизующееся сообщество специалистов ... добровольное самоорганизующееся сообщество специалистов ...",
+            description: "добровольное самоорганизующееся сообщество специалистов г. Донецка и Донецкого края в области добровольное самоорганизующееся сообщество специалистов г. Донецка и Донецкого края в области..."
+        },
+        {
+            title: "добровольное самоорганизующееся сообщество специалистов ... добровольное самоорганизующееся сообщество специалистов ...",
+            description: "добровольное самоорганизующееся сообщество специалистов г. Донецка и Донецкого края в области добровольное самоорганизующееся сообщество специалистов г. Донецка и Донецкого края в области..."
+        },
+        {
+            title: "добровольное самоорганизующееся сообщество специалистов ... добровольное самоорганизующееся сообщество специалистов ...",
+            description: "добровольное самоорганизующееся сообщество специалистов г. Донецка и Донецкого края в области добровольное самоорганизующееся сообщество специалистов г. Донецка и Донецкого края в области..."
+        },
+        {
+            title: "добровольное самоорганизующееся сообщество специалистов ... добровольное самоорганизующееся сообщество специалистов ...",
+            description: "добровольное самоорганизующееся сообщество специалистов г. Донецка и Донецкого края в области добровольное самоорганизующееся сообщество специалистов г. Донецка и Донецкого края в области..."
+        },
+        {
+            title: "добровольное самоорганизующееся сообщество специалистов ... добровольное самоорганизующееся сообщество специалистов ...",
+            description: "добровольное самоорганизующееся сообщество специалистов г. Донецка и Донецкого края в области добровольное самоорганизующееся сообщество специалистов г. Донецка и Донецкого края в области..."
+        },
+        {
+            title: "добровольное самоорганизующееся сообщество специалистов ... добровольное самоорганизующееся сообщество специалистов ...",
+            description: "добровольное самоорганизующееся сообщество специалистов г. Донецка и Донецкого края в области добровольное самоорганизующееся сообщество специалистов г. Донецка и Донецкого края в области..."
+        },
+        {
+            title: "добровольное самоорганизующееся сообщество специалистов ... добровольное самоорганизующееся сообщество специалистов ...",
+            description: "добровольное самоорганизующееся сообщество специалистов г. Донецка и Донецкого края в области добровольное самоорганизующееся сообщество специалистов г. Донецка и Донецкого края в области..."
+        },
+        {
+            title: "добровольное самоорганизующееся сообщество специалистов ... добровольное самоорганизующееся сообщество специалистов ...",
+            description: "добровольное самоорганизующееся сообщество специалистов г. Донецка и Донецкого края в области добровольное самоорганизующееся сообщество специалистов г. Донецка и Донецкого края в области..."
+        },
+        {
+            title: "добровольное самоорганизующееся сообщество специалистов ... добровольное самоорганизующееся сообщество специалистов ...",
+            description: "добровольное самоорганизующееся сообщество специалистов г. Донецка и Донецкого края в области добровольное самоорганизующееся сообщество специалистов г. Донецка и Донецкого края в области..."
+        }
+    ]
+
+    return (
+        <main>
+            <Breadcrumbs />
+            <div className="flex flex-col gap-[31px] items-center mb-[50px]">
+                <h1 className="text-[40px] uppercase">Мероприятия сообщества</h1>
+                <p className="text-[19px] max-w-[832px] text-center">это добровольное самоорганизующееся сообщество специалистов г. Донецка и Донецкого края в области психологического консультирования и гештальт-терапии.</p>
+            </div>
+            <div className="flex flex-col max-w-[1032px] m-auto">
+                <div className="flex gap-[84px] mb-[30px]">
+                    <Select name="Все мероприятия" variant="secondary" />
+                    <FilterCheckbox />
+                </div>
+                <div className="flex flex-wrap gap-x-[12px] gap-y-[30px] mb-[80px] justify-between">
+                    {eventCards.map((card, index) => {
+                        return <EventCard title={card.title} description={card.description} key={index} />
+                    })}
+                </div>
+                <div className="mb-[100px] flex justify-between">
+                    <Pagination
+                        totalItems={totalItems}
+                        itemsPerPage={itemsPerPage}
+                        currentPage={currentPage}
+                        onPageChange={handlePageChange}
+                    />
+                    <Button name="Показать все мероприятия" variant="secondary" />
+                </div>
+            </div>
+            <div className="flex flex-col gap-[80px]">
+                <InfoBlock/>
+                <NavSection />
+            </div>
+        </main>
+    )
+}

app/font.css

@@ -0,0 +1,42 @@
+/* styles/fonts.css */
+@font-face {
+    font-family: 'GT Eesti Pro Display';
+    src: url('../public/fonts/gteestiprodisplay_thin.otf') format('opentype');
+    font-weight: 300;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'GT Eesti Pro Display';
+    src: url('../public/fonts/gteestiprodisplay_light.otf') format('opentype');
+    font-weight: 350;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'GT Eesti Pro Display';
+    src: url('../public/fonts/gteestiprodisplay_regular.otf') format('opentype');
+    font-weight: 400;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'GT Eesti Pro Display';
+    src: url('../public/fonts/gteestiprodisplay_medium.otf') format('opentype');
+    font-weight: 500;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'GT Eesti Pro Display';
+    src: url('../public/fonts/gteestiprodisplay_bold.otf') format('opentype');
+    font-weight: 700;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'GT Eesti Pro Display';
+    src: url('../public/fonts/gteestiprodisplay_ultrabold.otf') format('opentype');
+    font-weight: 900;
+    font-style: normal;
+}

app/globals.css

@@ -1,10 +1,32 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+@import "font.css";
+
+@layer utilities {
+  .backdrop-blur-custom {
+    backdrop-filter: blur(8.7px);
+  }
+
+  .shadow-custom {
+    box-shadow: 14px 18px 29.9px 0px rgba(0, 0, 0, 0.06);
+  }
+}
 
 :root {
   --background: #ffffff;
   --foreground: #171717;
+  --black: rgba(55, 55, 55, 1);
+  --white: rgba(255, 255, 255, 1);
+  --dark-white: rgba(251 251 252);
+  --blue: rgba(135, 191, 255, 1);
+  --grey: rgba(132, 132, 132, 1);
+  --dark: rgba(51, 51, 51, 1);
+  --dark-blue: rgba(95, 161, 236, 1);
+  --dark-grey: rgba(243, 243, 243, 1);
+  --light-black: rgba(109, 109, 109, 1);
+  --light-grey: rgba(114, 114, 114, 1);
+  --middle-grey: rgba(141, 141, 141, 1);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -16,6 +38,7 @@
 
 body {
   color: var(--foreground);
-  background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
-}
+  background: linear-gradient(180deg, #F3F3F3 0%, #F9F9F9 100%);
+  font-family: 'GT Eesti Pro Display', Arial, Helvetica, sans-serif;
+  font-weight: 300;
+}

app/layout.tsx

@@ -1,20 +1,11 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
-
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
+import Header from "@/components/header";
+import Footer from "@/components/footer";
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Донецкое гештальт сообщество",
+  description: "Донецкое гештальт сообщество",
 };
 
 export default function RootLayout({
@@ -24,10 +15,10 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
+      <body>
+        <Header />
         {children}
+        <Footer />
       </body>
     </html>
   );

app/page.tsx

@@ -1,101 +1,145 @@
 import Image from "next/image";
+import AvatarImage from "@/components/avatar-image";
+import Select from "@/components/select";
+import Button from "@/components/button";
+import EventCard from "@/components/event-card";
+import HumanCard from "@/components/human-card";
+import NavSection from "@/components/nav-section";
 
 export default function Home() {
-  return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-      <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
-          <li className="mb-2">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
-              app/page.tsx
-            </code>
-            .
-          </li>
-          <li>Save and see your changes instantly.</li>
-        </ol>
 
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
-        </div>
+    interface EventCard {
+        title: string;
+        description: string;
+    }
+
+    interface HumanCard {
+        name: string;
+        description: string;
+        skills: string[];
+    }
+
+
+    const eventCards: EventCard[] = [
+        {
+            title: "добровольное самоорганизующееся сообщество специалистов ... добровольное самоорганизующееся сообщество специалистов ...",
+            description: "добровольное самоорганизующееся сообщество специалистов г. Донецка и Донецкого края в области добровольное самоорганизующееся сообщество специалистов г. Донецка и Донецкого края в области..."
+        },
+        {
+            title: "добровольное самоорганизующееся сообщество специалистов ... добровольное самоорганизующееся сообщество специалистов ...",
+            description: "добровольное самоорганизующееся сообщество специалистов г. Донецка и Донецкого края в области добровольное самоорганизующееся сообщество специалистов г. Донецка и Донецкого края в области..."
+        },
+        {
+            title: "добровольное самоорганизующееся сообщество специалистов ... добровольное самоорганизующееся сообщество специалистов ...",
+            description: "добровольное самоорганизующееся сообщество специалистов г. Донецка и Донецкого края в области добровольное самоорганизующееся сообщество специалистов г. Донецка и Донецкого края в области..."
+        },
+        {
+            title: "добровольное самоорганизующееся сообщество специалистов ... добровольное самоорганизующееся сообщество специалистов ...",
+            description: "добровольное самоорганизующееся сообщество специалистов г. Донецка и Донецкого края в области добровольное самоорганизующееся сообщество специалистов г. Донецка и Донецкого края в области..."
+        },
+        {
+            title: "добровольное самоорганизующееся сообщество специалистов ... добровольное самоорганизующееся сообщество специалистов ...",
+            description: "добровольное самоорганизующееся сообщество специалистов г. Донецка и Донецкого края в области добровольное самоорганизующееся сообщество специалистов г. Донецка и Донецкого края в области..."
+        },
+    ]
+
+    const humans: HumanCard[] = [
+        {
+            name: "Лукашенко Марина Анатольевна",
+            description: "Финансовые изменения, болезнь, своя или близких, разрыв отношений, развод...",
+            skills: ["Терапевт", "Супервизор", "Тренер-стажер", "Тренер", "Ассоциированный тренер", "Ведущий тренер"]
+        },
+        {
+            name: "Лукашенко Марина Анатольевна",
+            description: "Финансовые изменения, болезнь, своя или близких, разрыв отношений, развод...",
+            skills: ["Терапевт", "Супервизор", "Тренер-стажер", "Тренер", "Ассоциированный тренер", "Ведущий тренер"]
+        },
+        {
+            name: "Лукашенко Марина Анатольевна",
+            description: "Финансовые изменения, болезнь, своя или близких, разрыв отношений, развод...",
+            skills: ["Терапевт", "Супервизор", "Тренер-стажер", "Тренер", "Ассоциированный тренер", "Ведущий тренер"]
+        },
+        {
+            name: "Лукашенко Марина Анатольевна",
+            description: "Финансовые изменения, болезнь, своя или близких, разрыв отношений, развод...",
+            skills: ["Терапевт", "Супервизор", "Тренер-стажер", "Тренер", "Ассоциированный тренер", "Ведущий тренер"]
+        }
+    ]
+  return (
+      <main className="pt-[100px] flex flex-col">
+          <div className="flex flex-col container m-auto text-center text-dark gap-[31px]">
+              <h1 className="text-[40px] uppercase">Донецкое гештальт сообщество</h1>
+              <p className="text-dark text-[19px] max-w-[832px] mx-auto">это добровольное самоорганизующееся сообщество
+                  специалистов г. Донецка и Донецкого края в области психологического консультирования и
+                  гештальт-терапии.</p>
+          </div>
+          <div className="flex justify-center mt-[100px] gap-[14px] container mx-auto">
+              <div
+                  className="relative bg-blue border-[1px] border-white rounded-[25px] pr-[48px] max-w-[650px] min-h-[480px] w-full font-[400]">
+                  <Image src="/images/intro.svg" alt="intro" className="w-auto h-auto absolute" width={1} height={1}/>
+                  <h3 className="text-white text-[38px] mt-[214px] text-end leading-[41px]">
+                      <span className="bg-darkBlue px-[12px] py-[3px] rounded-[18px]">Цель</span> нашего<br/>объединения:
+                  </h3>
+                  <p className="ml-auto mt-[50px] text-start text-white text-[19px] leading-[20px] max-w-[400px]">взаимное
+                      обогащение профессиональными знаниями, идеями и опытом на конференциях и семинарах, в учебных
+                      программах и на интенсивах, на специализациях и в супервизорских группах.</p>
+              </div>
+              <div className="flex flex-col gap-[12px] max-w-[368px]">
+                  <div className="flex items-center bg-blue rounded-[25px] min-h-[234px] px-[68px] py-[60px] relative">
+                      <p className="text-white font-[500] leading-[23px] text-[20px]">Через собственное развитие мы
+                          развиваем и популяризируем гештальт-подход</p>
+                      <Image src="/images/palm.svg" alt="palm" className="w-auto h-auto absolute right-3 bottom-0"
+                             width={1} height={1}/>
+                  </div>
+                  <div
+                      className="flex flex-col items-center rounded-[25px] min-h-[234px] px-[68px] pt-[60px] border-[4px] border-white">
+                      <div className="flex">
+                          <AvatarImage imageUrl='avatar'/>
+                          <AvatarImage imageUrl='avatar' className="right-[35px] z-2"/>
+                          <AvatarImage imageUrl='avatar' className="right-[70px] z-3"/>
+                          <AvatarImage imageUrl='avatar' className="right-[105px] z-4"/>
+                      </div>
+                      <p className="text-blue font-[900] text-[26px] mt-[10px]">+ 145 учасников</p>
+                  </div>
+              </div>
+          </div>
+          <div className="mt-[50px] flex gap-[64px] justify-center container mx-auto">
+              <div className="flex-col flex gap-[35px] items-center">
+                  <Image src="images/oppgp.svg" alt="oppgp" width={140} height={37}/>
+                  <p className="text-grey max-w-[300px] text-[16px] leading-[17px] text-center">Донецкое
+                      гештальт-сообщество является частью Всероссийского общества психологов практикующих
+                      гештальт-подход (ОПП ГП). </p>
+              </div>
+              <div className="flex-col flex gap-[19px] items-center">
+                  <Image src="images/pmg.svg" alt="oppgp" width={177} height={53}/>
+                  <p className="text-grey max-w-[507px] text-[16px] leading-[17px] text-center">В своей работе мы придерживаемся стандартов программы «Московский Гештальт Институт», а также стандартов Европейской Ассоциации Гештальт Терапии, Этического Кодекса Гештальт Терапевта и принципов гуманизма.</p>
+              </div>
+          </div>
+          <div className="flex flex-col mt-[100px]">
+              <div className="flex items-center max-w-[1033px] mx-auto justify-between w-full mb-[50px]">
+                  <Select name="Конференции" />
+                  <h3 className="text-black text-[26px] uppercase">Мероприятия сообщества</h3>
+                  <Button name="Все мероприятия" />
+              </div>
+              <div className="flex justify-around">
+                  {eventCards.map((card, index) => {
+                      return <EventCard title={card.title} description={card.description} key={index} />
+                  })}
+              </div>
+          </div>
+          <div className="flex flex-col mt-[90px] mb-[80px] gap-[56px]">
+              <div className="flex items-center max-w-[1033px] mx-auto justify-between w-full">
+                  <Select name="Тренер"/>
+                  <h3 className="text-black text-[26px] uppercase">наше сообщество</h3>
+                  <Button name="Все участники"/>
+              </div>
+              <div className="flex max-w-[1033px] m-auto justify-between w-full">
+                  {humans.map((human, index) => {
+                      return <HumanCard key={index} name={human.name} description={human.description} skills={human.skills} />
+                  })}
+              </div>
+          </div>
+          <NavSection />
       </main>
-      <footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
-    </div>
   );
 }

app/participants/[slug]/page.tsx

@@ -0,0 +1,97 @@
+import Breadcrumbs from "@/components/breadcrumb";
+import InfoBlock from "@/components/info-block";
+import NavSection from "@/components/nav-section";
+import InfoItem from "@/components/info-item";
+import Image from "next/image";
+import SocialItem from "@/components/social-item";
+
+export default function Page() {
+    return(
+        <main>
+            <Breadcrumbs/>
+            <div className=" flex gap-[35px] max-w-[1032px] m-auto">
+                <div className="bg-white p-[15px] w-fit">
+                   <Image className="rotate-[180deg]" src="/images/mok_human.svg" alt="human" width={335} height={355} />
+                </div>
+                <div className="flex flex-col">
+                    <h2 className="uppercase max-w-[390px] text-[40px] leading-[48px]">кириллов кирилл кириллович</h2>
+                    <div className="flex gap-[17px] mt-[8px] mb-[25px]">
+                        <Image src="/images/location.svg" alt="location" width={18} height={22} />
+                        <span className="text-lightBlack text-[18px]">Донецк</span>
+                    </div>
+                    <div className="flex flex-col gap-[8px] mb-[23px]">
+                        <span className="text-blue text-[16px]">Статус в сообществе:</span>
+                        <div className="flex gap-[13px]">
+                            <InfoItem name="Терапевт" variable="whiteFixed" />
+                            <InfoItem name="Супервизор" variable="whiteFixed" />
+                            <InfoItem name="Тренер" variable="whiteFixed" />
+                        </div>
+                    </div>
+                    <div className="py-[47.5px] px-[53px] gap-[52px] bg-white text-[20px] flex rounded-[12px] relative">
+                        <div className="flex gap-[13px]">
+                            <Image src="/images/phone.svg" alt="phone" width={18} height={18}/>
+                            <span>+7 949 185 65 65 </span>
+                        </div>
+                        <div className="flex gap-[13px]">
+                            <Image src="/images/mail.svg" alt="phone" width={18} height={18}/>
+                            <span>Luchayapochta@mail.ru</span>
+                        </div>
+                        <div className="flex absolute min-w-[47px] h-[47px] bg-white items-center justify-center rounded-full right-[-25px] top-[38px]">
+                            <SocialItem icon="logo_tg" link="/" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div
+                className="flex flex-col rounded-[6px] border-[1px] border-white max-w-[1032px] m-auto pt-[41px] px-[34px] pb-[30px] gap-[12px] mb-[50px] mt-[36px]">
+            <h3 className="uppercase text-[26px]">Специализация</h3>
+                <div className="flex text-[15px] leading-[25px] gap-[63px]">
+                    <ul className="list-disc list-inside">
+                        <li>Индивидуальная терапия</li>
+                        <li>Терапия зависимостей</li>
+                        <li>Семейная терапия</li>
+                    </ul>
+                    <ul className="list-disc list-inside">
+                        <li>Работа с парами</li>
+                        <li>Работа с группой</li>
+                    </ul>
+                    <ul className="list-disc list-inside">
+                        <li>Телесно-ориентированная терапия и психосоматика</li>
+                        <li>Философия практики</li>
+                    </ul>
+                </div>
+            </div>
+            <div className="flex flex-col gap-[30px] max-w-[910px] m-auto mb-[100px]">
+                <h3 className="uppercase text-black text-[26px]">Описание профессиональной деятельности</h3>
+                <div className="text-[15px] leading-[24px]">
+                    <p>Часто обращаются со следующими темами:</p>
+                    <ul className="list-none list-inside">
+                        <li className="before:content-['—'] before:mr-2">Трудности в создании серьезных отношений,
+                            любовная зависимость, взаимоотношения в семье (с
+                            родителями, детьми или супругом)
+                        </li>
+                        <li className="before:content-['—'] before:mr-2">Обретение уверенности в личных и профессиональных отношениях</li>
+                        <li className="before:content-['—'] before:mr-2">Выход из депрессивных состояний и обретение вкуса жизни</li>
+                        <li className="before:content-['—'] before:mr-2">Поиск себя и возрастные кризисы</li>
+                    </ul>
+                    <p>
+                        Также работаю с психологической компонентой психосоматических расстройств.
+                        Возможность работы с иными темами мы можем обговорить по телефону.
+                    </p>
+                    <p>
+                        Обо мне:<br/>
+                        Мне 41 год. Люблю впечатляться красотами природы, вкусно поесть, регулярно получаю удовольствие
+                        от своей работы.
+                        Радуюсь, когда вижу изменения в качестве жизни моих клиентов. Много вкладываюсь в свое
+                        личностное,
+                        профессиональное и духовное развитие.
+                    </p>
+                </div>
+            </div>
+            <div className="flex flex-col gap-[80px]">
+                <InfoBlock/>
+                <NavSection/>
+            </div>
+        </main>
+    )
+}

app/participants/page.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import Breadcrumbs from "@/components/breadcrumb";
+import React, { useState } from "react";
+import InfoItem from "@/components/info-item";
+import HumanCard from "@/components/human-card";
+import Pagination from "@/components/pagination";
+import Button from "@/components/button";
+import InfoBlock from "@/components/info-block";
+import NavSection from "@/components/nav-section";
+
+export default function Page() {
+    const skills = ["Терапевт", "Супервизор", "Тренер"]
+    const [currentPage, setCurrentPage] = useState(1);
+    const totalItems = 100;
+    const itemsPerPage = 10;
+
+    const handlePageChange = (page: number) => {
+        setCurrentPage(page);
+    };
+
+    interface HumanCard {
+        name: string;
+        description: string;
+        skills: string[];
+    }
+
+    const humans: HumanCard[] = [
+        {
+            name: "Лукашенко Марина Анатольевна",
+            description: "Финансовые изменения, болезнь, своя или близких, разрыв отношений, развод...",
+            skills: ["Терапевт", "Супервизор", "Тренер-стажер", "Тренер", "Ассоциированный тренер", "Ведущий тренер"]
+        },
+        {
+            name: "Лукашенко Марина Анатольевна",
+            description: "Финансовые изменения, болезнь, своя или близких, разрыв отношений, развод...",
+            skills: ["Терапевт", "Супервизор", "Тренер-стажер", "Тренер", "Ассоциированный тренер", "Ведущий тренер"]
+        },
+        {
+            name: "Лукашенко Марина Анатольевна",
+            description: "Финансовые изменения, болезнь, своя или близких, разрыв отношений, развод...",
+            skills: ["Терапевт", "Супервизор", "Тренер-стажер", "Тренер", "Ассоциированный тренер", "Ведущий тренер"]
+        },
+        {
+            name: "Лукашенко Марина Анатольевна",
+            description: "Финансовые изменения, болезнь, своя или близких, разрыв отношений, развод...",
+            skills: ["Терапевт", "Супервизор", "Тренер-стажер", "Тренер", "Ассоциированный тренер", "Ведущий тренер"]
+        },
+        {
+            name: "Лукашенко Марина Анатольевна",
+            description: "Финансовые изменения, болезнь, своя или близких, разрыв отношений, развод...",
+            skills: ["Терапевт", "Супервизор", "Тренер-стажер", "Тренер", "Ассоциированный тренер", "Ведущий тренер"]
+        },
+        {
+            name: "Лукашенко Марина Анатольевна",
+            description: "Финансовые изменения, болезнь, своя или близких, разрыв отношений, развод...",
+            skills: ["Терапевт", "Супервизор", "Тренер-стажер", "Тренер", "Ассоциированный тренер", "Ведущий тренер"]
+        }
+    ]
+    return(
+        <main>
+            <Breadcrumbs/>
+            <div className="flex flex-col gap-[31px] items-center mb-[50px]">
+                <h1 className="text-[40px] uppercase">участники сообщества</h1>
+                <p className="text-[19px] max-w-[832px] text-center">это добровольное самоорганизующееся сообщество специалистов г. Донецка и Донецкого края в области психологического консультирования и гештальт-терапии.</p>
+            </div>
+            <div className="flex flex-col gap-[50px] max-w-[1032px] m-auto">
+                <div className="flex gap-[28px]">
+                    {skills.map((skill, index) => {
+                        return <InfoItem name={skill} key={index} variable="lgFixed"/>
+                    })}
+                </div>
+                <div className="flex flex-wrap gap-[26px] justify-between">
+                    {humans.map((human, index) => {
+                        return <HumanCard key={index} name={human.name} variant="lg" description={human.description}
+                                          skills={human.skills}/>
+                    })}
+                </div>
+                <div className="mb-[100px] flex justify-between">
+                    <Pagination
+                        totalItems={totalItems}
+                        itemsPerPage={itemsPerPage}
+                        currentPage={currentPage}
+                        onPageChange={handlePageChange}
+                    />
+                    <Button name="Показать всех участников" variant="secondary"/>
+                </div>
+                <div className="flex flex-col gap-[80px]">
+                    <InfoBlock/>
+                    <NavSection/>
+                </div>
+            </div>
+        </main>
+    )
+}

components/avatar-image.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import Image from "next/image";
+
+interface Props {
+    className?: string;
+    imageUrl: string;
+}
+
+const AvatarImage: React.FC<Props> =({ imageUrl, className}) => {
+    return(
+        <Image
+            src={`/images/${imageUrl}.png`}
+            alt={imageUrl}
+            className={`${className} relative`}
+            width={67}
+            height={67}
+        />
+    );
+}
+
+export default AvatarImage;

components/breadcrumb.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import React from 'react';
+
+const Breadcrumbs: React.FC = () => {
+    const pathname = usePathname();
+    const pathSegments = pathname.split('/').filter(segment => segment);
+
+    const correctName = {
+        events: "мероприятия сообщества",
+        event: "базовая программа подготовки гештальт-терапевтов - добор",
+        participants: "участники",
+        id: "кириллов кирилл кириллович"
+    }
+
+    return(
+        <nav className="max-w-[1032px] mx-auto">
+            <ol className="flex text-middleGrey font-[350] my-[50px]">
+                <li>
+                    <Link href="/">главная</Link>
+                </li>
+                {pathSegments.map((segment, index) => {
+                    const href = '/' + pathSegments.slice(0, index + 1).join('/');
+                    return (
+                        <li key={href}>
+                            <Link href={href}><span className="mx-[2px]">/</span>{correctName[decodeURIComponent(segment) as keyof typeof correctName]}</Link>
+                        </li>
+                    );
+                })}
+            </ol>
+        </nav>
+    )
+}
+
+export default Breadcrumbs;

components/button.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import * as React from 'react';
+
+interface Props {
+    className?: string;
+    name: string;
+    variant?: 'default' | 'secondary';
+    size?: 'default';
+}
+
+const Button: React.FC<Props> = ({ className, name, variant = 'default', size = 'default' }) => {
+    const baseClasses = 'flex items-center justify-center whitespace-nowrap rounded-[6px] font-[400]';
+
+    const variantClasses = {
+        default: 'bg-blue text-[16px] text-white',
+        secondary: 'text-[16px] text-blue border-[1px] border-blue',
+    };
+
+    const sizeClasses = {
+        default: 'max-h-[39px] px-[25px] py-[10px]',
+    };
+
+    const selectedVariantClasses = variantClasses[variant] || variantClasses.default;
+    const selectedSizeClasses = sizeClasses[size] || sizeClasses.default;
+
+    return (
+        <button className={`${baseClasses} ${selectedVariantClasses} ${selectedSizeClasses} ${className}`}>
+            {name}
+        </button>
+    );
+}
+
+export default Button;

components/event-card.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import Image from "next/image";
+import Link from "next/link";
+
+interface Props {
+    title: string;
+    description: string;
+    image?: string;
+}
+
+const EventCard: React.FC<Props> = ({title, description, image}) => {
+    return (
+        <Link href="events/event" className="border-[1px] border-white rounded-[6px] bg-darkGrey px-[13.5px] pt-[12px] pb-[35px] text-black">
+            {image ? <Image src={image} alt='image' width={288} height={177} /> :
+                <span className="flex w-[288px] h-[177px] bg-white"/>
+            }
+            <h5 className="max-w-[267px] font-[500] text-[16px] leading-[18px] mt-[30px] mb-[8px] line-clamp-3 text-ellipsis">{title}</h5>
+            <p className="max-w-[267px] text-[15px] leading-[17px] line-clamp-3 text-ellipsis">{description}</p>
+        </Link>
+    );
+}
+
+export default EventCard;

components/filterCheckbox.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import React, { useState } from 'react';
+
+const FilterCheckbox: React.FC = () => {
+    const [active, setActive] = useState(false);
+
+    const handleCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setActive(event.target.checked);
+    };
+
+    return (
+            <label className="flex items-center text-[14px] text-lightGrey gap-[12px]">
+                <input
+                    className="w-[16px] h-[16px] border-white"
+                    type="checkbox"
+                    checked={active}
+                    onChange={handleCheckboxChange}
+                />
+                только мероприятия Донецкого сообщества
+            </label>
+    );
+}
+
+export default FilterCheckbox;

components/footer.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import Image from "next/image";
+import SocialItem from "@/components/social-item";
+import Link from 'next/link';
+
+const Footer: React.FC = () => {
+    return (
+        <footer className="container pb-8 px-8 m-auto flex justify-center mt-[80px]">
+            <a href="/public">
+                <Image width={150} height={48} src="/logo.svg" alt="logo"/>
+            </a>
+            <div className="flex gap-[96px] text-[15px] text-dark ml-[108px] mr-[188px] items-center font-[350]">
+                <Link  href="/events">События</Link>
+                <Link href="/participants">Участники</Link>
+            </div>
+            <div className="flex gap-[25px]">
+                <Image width={83} height={21} src="/images/oppgp.svg" alt="oop"/>
+                <Image width={96} height={27} src="/images/pmg.svg" alt="pmg"/>
+            </div>
+            <div className="flex ml-[49px] gap-[29px]">
+                <SocialItem icon="logo_tg" link=""/>
+                <SocialItem icon="logo_vk" link=""/>
+            </div>
+        </footer>
+    );
+}
+
+export default Footer;

components/header.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import Image from "next/image";
+import SocialItem from "@/components/social-item";
+import Link from 'next/link';
+
+const Header: React.FC = () => {
+    return (
+        <header className="flex pt-8 px-8 justify-center items-center container m-auto">
+            <div className="flex gap-[96px] text-[15px] text-dark mr-[220px] font-[350]">
+                <Link href="/events">События</Link>
+                <Link href="/participants">Участники</Link>
+            </div>
+            <Link href="/">
+                <Image width={150} height={48} src="/logo.svg" alt="logo" />
+            </Link>
+            <div className="flex ml-[340px] gap-[19px]">
+                <SocialItem icon="logo_tg" link=""/>
+                <SocialItem icon="logo_vk" link=""/>
+            </div>
+        </header>
+    );
+};
+
+export default Header;

components/human-card.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import Image from "next/image";
+import InfoItem from "@/components/info-item";
+import Link from "next/link";
+
+interface Props {
+    name: string;
+    description?: string;
+    skills: string[];
+    post?: string;
+    image?: string;
+    variant?: 'default' | 'secondary' | 'lg';
+}
+
+const HumanCard: React.FC<Props> = ({name, description, image, skills,post, variant = 'default'}) => {
+    const cardStyles = {
+        default: {
+            main: "",
+            img: {
+                w: 221,
+                h: 221
+            },
+            name: "text-[18px]",
+
+        },
+        secondary: {
+            main: "flex w-full justify-between",
+            img: {
+                w: 218,
+                h: 232
+            }
+        },
+        lg: {
+            main: "",
+            img: {
+                w: 280,
+                h: 280
+            },
+            name: "text-[20px]",
+        }
+    };
+
+    return (
+        <Link href="/participants/id" className={`${cardStyles[variant].main} backdrop-blur-custom border-[1px] border-white rounded-[6px] bg-darkWhite p-[10px] text-black w-fit shadow-custom`}>
+            {image ? <Image src={image} alt='image' width={cardStyles[variant].img.w} height={cardStyles[variant].img.h} /> :
+                <Image src="/images/mok_human.svg" alt='image' width={cardStyles[variant].img.w} height={cardStyles[variant].img.h} className="rotate-[180deg]" />
+            }
+            {(variant === 'default' || variant === 'lg') &&
+            <>
+                <h5 className={`${cardStyles[variant].name} font-[400] leading-[20px] max-w-[190px] mt-[16px] mb-[20px]`}>{name}</h5>
+                <span className="text-lightGrey">
+                    Работает с темами
+                    <p className="text-black text-[13px] leading-[15px] line-clamp-3 text-ellipsis max-w-[220px] mb-[16px]">{description}</p>
+                </span>
+                <div className="flex gap-[5px] max-w-[220px] flex-wrap">
+                    {skills.map((skill, index) => {
+                        return <InfoItem name={skill} key={index} />
+                    })}
+                </div>
+            </>
+            }
+            {variant === 'secondary' &&
+                <div className="flex flex-col ml-[16px]">
+                    <h5 className="font-[400] text-[21px] leading-[25px] max-w-[204px] mt-[8px] mb-[18px]">{name}</h5>
+                    <span className="text-[15px] text-lightGrey mb-[55px]">{post}</span>
+                    <div className="flex gap-[7px] max-w-[220px] flex-wrap">
+                        {skills.map((skill, index) => {
+                            return <InfoItem name={skill} key={index} variable="white"/>
+                        })}
+                    </div>
+                </div>
+            }
+        </Link>
+    );
+}
+
+export default HumanCard;

components/info-block.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import Image from "next/image";
+
+const InfoBlock: React.FC = () => {
+    return (
+        <div className="flex bg-blue rounded-[25px] relative max-w-[1032px] w-full m-auto pt-[58px] pb-[61px] pl-[69px] h-[234px]">
+            <p className="text-white text-[32px] max-w-[671px] font-[500]">Через собственное развитие мы развиваем и популяризируем гештальт-подход</p>
+            <Image className="absolute right-[39px] top-[-20px]" src="/images/palm.svg" alt="palm" width={217} height={254} />
+        </div>
+    );
+};
+
+export default InfoBlock;

components/info-item.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import Image from "next/image";
+
+interface Props {
+    name: string;
+    variable?: 'default' | 'lg' | 'secondary' | 'white' | 'lgFixed' | 'whiteFixed';
+    pathImg?: string;
+}
+
+const InfoItem: React.FC<Props> = ({name, variable = 'default', pathImg}) => {
+    const variantClasses = {
+        default: 'text-[9px] py-[4px] px-[8px] rounded-[3px] border-[0.5px] text-blue',
+        secondary: 'text-[16px] text-lightBlack border-[1px] rounded-[6px] py-[10px] px-[28px] gap-[10px]',
+        lg: 'px-[10px] py-[6.5px] rounded-[6px] border-[1px] text-[16px] text-blue',
+        lgFixed: 'px-[10px] py-[6.5px] max-w-[140px] w-full rounded-[6px] border-[1px] text-[16px] text-blue',
+        white: 'text-[10px] py-[9px] px-[16px] text-blue bg-white rounded-[6px]',
+        whiteFixed: 'tex-[14px] rounded-[6px] max-w-[114px] w-full bg-white py-[5px] text-blue'
+    };
+
+    const selectedVariantClasses = variantClasses[variable] || variantClasses.default;
+
+    return (
+        <span className={`flex items-center justify-center font-[400] border-blue w-fit ${selectedVariantClasses}`}>
+            {pathImg && <Image src={`/images/${pathImg}.svg`} alt={pathImg} width={18} height={18} />}
+            {name}
+        </span>
+    );
+}
+
+export default InfoItem

components/nav-section.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import InfoItem from "@/components/info-item";
+import SectionItem from "@/components/section-item";
+
+const NavSection: React.FC= () => {
+    const navigations : string[] = ["конференции", "акредитации", "открытые сертификации", "открытые сертификации", "общие сборы", "протоколы сборов", "новости сайта", "календарь событий", "сайт мги", "вопросы и ответы"]
+    return (
+        <div className="flex gap-[53px] items-end m-auto">
+            <div className="flex max-w-[645px] flex-wrap gap-x-[15px] gap-y-[12px]">
+                {navigations.map((nav, index) => {
+                  return <InfoItem name={nav} key={index} variable="lg" />
+                })}
+            </div>
+            <div className="flex gap-[19px]">
+                <SectionItem name="Книги" />
+                <SectionItem name="лекции" />
+            </div>
+        </div>
+    );
+}
+
+export default NavSection

components/pagination.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import Image from "next/image";
+
+interface PaginationProps {
+    totalItems: number;
+    itemsPerPage: number;
+    currentPage: number;
+    onPageChange: (page: number) => void;
+}
+
+const Pagination: React.FC<PaginationProps> = ({
+                                                   totalItems,
+                                                   itemsPerPage,
+                                                   currentPage,
+                                                   onPageChange,
+                                               }) => {
+    const totalPages = Math.ceil(totalItems / itemsPerPage);
+
+    const getPaginationArray = () => {
+        const pages: (number | string)[] = [];
+
+        if (totalPages <= 5) {
+            for (let i = 1; i <= totalPages; i++) {
+                pages.push(i);
+            }
+        } else {
+            pages.push(1);
+
+            if (currentPage > 3) {
+                pages.push('...');
+            }
+
+            for (let i = Math.max(2, currentPage - 1); i <= Math.min(currentPage + 1, totalPages - 1); i++) {
+                pages.push(i);
+            }
+
+            if (currentPage < totalPages - 2) {
+                pages.push('...');
+            }
+
+            pages.push(totalPages);
+        }
+
+        return pages;
+    };
+
+    const handlePageChange = (page: number) => {
+        if (page !== currentPage) {
+            onPageChange(page);
+        }
+    };
+
+    const paginationArray = getPaginationArray();
+
+    return (
+        <div className="flex">
+            <button className="mr-[30px]" onClick={() => handlePageChange(currentPage - 1)} disabled={currentPage === 1}>
+                <Image className="rotate-[90deg] relative top-[-2px]" src="/images/chevronDown.svg" alt="arrow" width={11} height={11} />
+            </button>
+            <div className="flex gap-[12px] items-center">
+                {paginationArray.map((page, index) => (
+                    typeof page === 'number' ? (
+                        <button
+                            key={index}
+                            onClick={() => handlePageChange(page)}
+                            className={currentPage === page ? 'text-blue font-[700] text-[17px]' : 'text-[17px]'}
+                        >
+                            {page}
+                        </button>
+                    ) : (
+                        <span key={index}>{page}</span> // Отображаем многоточие
+                    )
+                ))}
+            </div>
+            <button className="flex items-center text-[15px] font-[400] ml-[26px] gap-[11px]" onClick={() => handlePageChange(currentPage + 1)} disabled={currentPage === totalPages}>
+                Следующая страница
+                <Image className="rotate-[-90deg] relative top-[-2px]" src="/images/chevronDown.svg" alt="arrow" width={11} height={11} />
+            </button>
+        </div>
+    );
+};
+
+export default Pagination;

components/section-item.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import Image from "next/image";
+
+interface Props {
+    name: string;
+}
+
+const SectionItem: React.FC<Props> = ({name}) => {
+    return (
+        <div className="flex border-[4px] border-white rounded-[6px] items-center w-[160px] h-[120px] justify-center relative">
+            <Image className="absolute top-[-18px]" src="/images/chevronDown.svg" alt="arrow" width={11} height={11} />
+            <span className="text-[26px] text-black uppercase">{name}</span>
+        </div>
+    );
+}
+
+export default SectionItem

components/select.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import * as React from 'react';
+import Image from "next/image";
+
+interface Props {
+    className?: string;
+    name: string;
+    variant?: 'default' | 'secondary';
+}
+
+const Select: React.FC<Props> = ({className, name, variant = 'default'}) => {
+    const variantClasses = {
+        default: 'px-[25px] py-[10px]',
+        secondary: 'px-[36px] py-[7px] bg-white',
+    };
+
+    return(
+        <div className={`${className} ${variantClasses[variant]} w-fit cursor-pointer border-blue border-[1px] flex gap-[10px] rounded-[10px]`}>
+            <p className="text-blue font-[400] text-[16px]">{name}</p>
+            <Image src="/images/chevronDown.svg" alt="chevronDown" width={11} height={8} />
+        </div>
+    );
+}
+
+export default Select

components/social-item.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import Image from "next/image";
+
+interface Props {
+    icon: string;
+    link: string;
+}
+
+const SocialItem: React.FC<Props> = ({icon, link}) => {
+    return (
+        <a className="flex justify-center items-center w-[41px] h-[41px] bg-blue rounded-full" href="">
+            <Image src={`/images/${icon}.svg`} alt={icon} className="w-auto h-auto" width={1} height={1} />        </a>
+    );
+}
+
+export default SocialItem

public/file.svg

@@ -1 +0,0 @@
-<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

public/globe.svg

@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

public/images/chevronDown.svg

@@ -0,0 +1,3 @@
+<svg width="9" height="7" viewBox="0 0 9 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.28321 5.95799C4.88285 6.46232 4.11715 6.46231 3.71679 5.95799L1.0243 2.56633C0.504041 1.91098 0.970754 0.944579 1.80751 0.944579L7.19249 0.94458C8.02925 0.94458 8.49596 1.91098 7.9757 2.56634L5.28321 5.95799Z" fill="#87BFFF"/>
+</svg>

public/images/clock.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 19.5C14.9706 19.5 19 15.4706 19 10.5C19 5.52944 14.9706 1.5 10 1.5C5.02944 1.5 1 5.52944 1 10.5C1 15.4706 5.02944 19.5 10 19.5Z" stroke="#6D6D6D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10 5.09998V10.5L13.6 12.3" stroke="#6D6D6D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

public/images/date.svg

@@ -0,0 +1,6 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.3913 3.06525H3.6087C2.60018 3.06525 1.78261 3.88281 1.78261 4.89133V17.6739C1.78261 18.6825 2.60018 19.5 3.6087 19.5H16.3913C17.3998 19.5 18.2174 18.6825 18.2174 17.6739V4.89133C18.2174 3.88281 17.3998 3.06525 16.3913 3.06525Z" stroke="#6D6D6D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.5213 1.5V5.41304" stroke="#6D6D6D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.47861 1.5V5.41304" stroke="#6D6D6D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1.78261 8.54346H18.2174" stroke="#6D6D6D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

public/images/location.svg

@@ -0,0 +1,4 @@
+<svg width="17" height="21" viewBox="0 0 17 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.8636 8.86364C15.8636 14.5909 8.5 19.5 8.5 19.5C8.5 19.5 1.13637 14.5909 1.13637 8.86364C1.13637 6.91068 1.91218 5.03771 3.29313 3.65676C4.67408 2.27581 6.54705 1.5 8.5 1.5C10.453 1.5 12.3259 2.27581 13.7069 3.65676C15.0878 5.03771 15.8636 6.91068 15.8636 8.86364Z" stroke="#6D6D6D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.4996 11.3182C9.85521 11.3182 10.9542 10.2193 10.9542 8.86366C10.9542 7.50806 9.85521 6.40912 8.4996 6.40912C7.144 6.40912 6.04506 7.50806 6.04506 8.86366C6.04506 10.2193 7.144 11.3182 8.4996 11.3182Z" stroke="#6D6D6D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

public/images/logo_tg.svg

@@ -0,0 +1,3 @@
+<svg width="17" height="15" viewBox="0 0 17 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.64294 8.54805L11.0447 4.6533L12.3092 3.7878C12.9087 3.60138 12.8296 4.03191 12.7151 4.27048C11.6171 5.48551 9.13689 8.15192 8.00034 9.09731C6.86379 10.0427 7.52678 10.8117 8.00034 11.078C8.88501 11.6772 11.0665 13.1984 12.7151 14.49C14.3638 15.7816 15.0361 14.3181 15.1662 13.4248C15.7282 9.82965 16.8804 2.3231 16.9928 1.05814C17.1052 -0.20682 15.8739 -0.0792145 15.2443 0.142709L13.5426 0.825122C10.1079 2.3453 2.8047 5.59869 1.06865 6.45088C-0.66739 7.30306 0.0955118 7.90447 0.693968 8.09866L3.03575 8.84765C4.10985 9.35363 5.22142 8.85874 5.64294 8.54805Z" fill="white"/>
+</svg>

public/images/logo_vk.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 0.412C0.117879 0.129939 0.33851 0.0100359 0.630078 0.0095077C1.43645 0.00792308 2.24335 0.00633847 3.04972 0.0095077C3.39971 0.0110923 3.64642 0.193323 3.77942 0.509718C3.9625 0.944432 4.11689 1.39182 4.29632 1.82865C4.87371 3.23632 5.545 4.59275 6.48437 5.79494C6.66849 6.03105 6.89121 6.23758 7.10663 6.44675C7.18382 6.52175 7.28762 6.57722 7.38881 6.61683C7.6543 6.72194 7.83737 6.62264 7.89005 6.33635C7.92291 6.15676 7.93126 5.97084 7.9323 5.78755C7.93595 4.76653 7.93387 3.74498 7.93439 2.72396C7.93439 2.10437 7.76904 1.54342 7.36481 1.06539C7.28501 0.970842 7.20677 0.871011 7.14679 0.763257C6.97206 0.450031 7.13792 0.0913796 7.48634 0.0206C7.56875 0.00369744 7.65429 0.00105641 7.73879 0.00105641C8.819 0 9.89869 0 10.9789 0C11.0311 0 11.0832 0.00105641 11.1348 0.00581026C11.4713 0.0338052 11.6377 0.197549 11.669 0.541939C11.682 0.686139 11.683 0.831396 11.683 0.976124C11.6841 2.294 11.683 3.61187 11.6846 4.92921C11.6846 5.05387 11.6914 5.17958 11.7081 5.30318C11.7602 5.69881 12.0299 5.85569 12.3548 5.62856C12.6772 5.40302 12.9813 5.13257 13.2384 4.83308C14.1048 3.82262 14.7583 2.66955 15.3425 1.47528C15.4838 1.18688 15.6116 0.891611 15.7446 0.598985C15.9121 0.231354 16.1869 0.0121487 16.5927 0.0095077C17.4189 0.00422565 18.2451 0 19.0708 0.0211282C19.474 0.0316923 19.6503 0.292626 19.5606 0.691421C19.5162 0.88897 19.4651 1.0918 19.3738 1.26981C19.0724 1.85876 18.7798 2.45616 18.4313 3.01658C17.8743 3.91295 17.2818 4.78713 16.6908 5.66184C16.2694 6.28565 16.2866 6.44728 16.8029 7.00295C17.6004 7.86128 18.3927 8.7249 19.16 9.61123C19.4312 9.92446 19.6534 10.2921 19.8422 10.6645C20.2026 11.3744 19.9345 11.8043 19.1506 11.8138C18.4543 11.8223 17.758 11.8096 17.0622 11.8181C16.6585 11.8228 16.3262 11.6718 16.0513 11.386C15.7107 11.0326 15.3769 10.6719 15.0441 10.3106C14.497 9.7174 13.9217 9.15433 13.2603 8.69109C12.939 8.46608 12.6052 8.26114 12.1879 8.27592C11.8703 8.28702 11.7373 8.39847 11.7133 8.72437C11.6903 9.03284 11.6804 9.34237 11.6778 9.6519C11.6736 10.113 11.6893 10.5747 11.6809 11.0353C11.6742 11.424 11.5255 11.6343 11.15 11.7056C10.7885 11.7742 10.4151 11.8096 10.0479 11.8065C8.59837 11.7938 7.30431 11.2846 6.11092 10.4854C4.96603 9.71898 4.05482 8.71751 3.27192 7.58398C2.12077 5.91749 1.10316 4.17863 0.416227 2.25966C0.250884 1.79854 0.137177 1.3184 0 0.846714C0 0.701985 0 0.556729 0 0.412Z" fill="white"/>
+</svg>

public/images/mail.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.0004 13.5994C11.9886 13.5994 13.6004 11.9876 13.6004 9.99941C13.6004 8.01119 11.9886 6.39941 10.0004 6.39941C8.01216 6.39941 6.40039 8.01119 6.40039 9.99941C6.40039 11.9876 8.01216 13.5994 10.0004 13.5994Z" stroke="#6D6D6D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.6 6.39944V10.8994C13.6 11.6155 13.8845 12.3023 14.3908 12.8086C14.8972 13.315 15.5839 13.5994 16.3 13.5994C17.0161 13.5994 17.7028 13.315 18.2092 12.8086C18.7155 12.3023 19 11.6155 19 10.8994V9.99944C18.9999 7.96816 18.3126 5.99667 17.0499 4.40552C15.7873 2.81437 14.0235 1.69714 12.0454 1.23551C10.0673 0.773874 7.99115 0.994979 6.15462 1.86287C4.31809 2.73076 2.82917 4.1944 1.92994 6.01579C1.03071 7.83718 0.774078 9.9092 1.20176 11.8949C1.62944 13.8807 2.71629 15.6633 4.28557 16.9531C5.85486 18.2428 7.81429 18.9637 9.84527 18.9987C11.8762 19.0336 13.8593 18.3804 15.472 17.1454" stroke="#6D6D6D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

public/images/phone.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.9994 14.4765V17.1862C19.0005 17.4377 18.9488 17.6867 18.8479 17.9172C18.7469 18.1477 18.5988 18.3546 18.413 18.5247C18.2273 18.6947 18.008 18.8242 17.7693 18.9048C17.5305 18.9854 17.2775 19.0153 17.0265 18.9927C14.2415 18.6907 11.5664 17.7409 9.21601 16.2197C7.02929 14.8329 5.17534 12.9827 3.7858 10.8003C2.25627 8.44389 1.30442 5.76107 1.00735 2.96915C0.98473 2.71938 1.01447 2.46764 1.09468 2.22996C1.17489 1.99229 1.30381 1.77389 1.47323 1.58866C1.64265 1.40343 1.84885 1.25544 2.07872 1.15411C2.30858 1.05278 2.55707 1.00032 2.80837 1.00009H5.52347C5.96269 0.995773 6.3885 1.151 6.72152 1.43683C7.05455 1.72267 7.27207 2.11961 7.33354 2.55366C7.44814 3.42084 7.66067 4.27229 7.96707 5.09177C8.08883 5.41507 8.11519 5.76642 8.043 6.1042C7.97082 6.44198 7.80313 6.75203 7.5598 6.99761L6.41041 8.14473C7.69877 10.406 9.57482 12.2784 11.8406 13.5642L12.99 12.4171C13.2361 12.1742 13.5467 12.0069 13.8852 11.9348C14.2236 11.8628 14.5757 11.8891 14.8996 12.0106C15.7207 12.3164 16.5739 12.5285 17.4428 12.6429C17.8824 12.7048 18.2839 12.9258 18.5709 13.2639C18.858 13.6019 19.0105 14.0335 18.9994 14.4765Z" stroke="#6D6D6D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

public/next.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

public/vercel.svg

@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

public/window.svg

@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

tailwind.config.ts

@@ -3,7 +3,7 @@ import type { Config } from "tailwindcss";
 export default {
   content: [
     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{ts,tsx}",
     "./app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
@@ -11,8 +11,22 @@ export default {
       colors: {
         background: "var(--background)",
         foreground: "var(--foreground)",
+        dark: "var(--dark)",
+        black: "var(--black)",
+        white: "var(--white)",
+        darkWhite: "var(--dark-white)",
+        blue: "var(--blue)",
+        grey: "var(--grey)",
+        darkBlue: "var(--dark-blue)",
+        darkGrey: "var(--dark-grey)",
+        lightBlack: "var(--light-black)",
+        lightGrey: "var(--light-grey)",
+        middleGrey: "var(--middle-grey)"
+      },
+      fontFamily: {
+        'gt-eesti': ['GT Eesti Pro Display', 'sans-serif'], // добавьте ваш шрифт
       },
     },
   },
   plugins: [],
-} satisfies Config;
+} satisfies Config;