oop

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>
+    )
+}