This commit is contained in:
nik.polishuk committed 2025-01-27 22:42:23 +03:00
1 parent 1278f7463d
commit ec0f24e450
17 files changed
+165 -98

No files matched your search

+24 -8
View File
@@ -1,3 +1,5 @@
"use client";
import React, { useState, useEffect } from 'react';
import Breadcrumbs from "@/components/breadcrumb";
import InfoBlock from "@/components/info-block";
import NavSection from "@/components/nav-section";
@@ -19,6 +21,20 @@ import SocialItem from "@/components/social-item";
// }
export default function Page() {
const [isLg, setIsLg] = useState(false);
useEffect(() => {
const handleResize = () => {
setIsLg(window.innerWidth >= 1024);
};
// Устанавливаем значение при первом рендере
handleResize();
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
const infoItems = [
{
name: "Базовый курс"
@@ -53,24 +69,24 @@ export default function Page() {
return(
<main>
<Breadcrumbs/>
<div className="bg-blue rounded-[6px] max-w-[1032px] m-auto mb-[30px] py-[45px] px-[100px]">
<div className="bg-blue rounded-[6px] max-w-[1033px] m-auto mb-[30px] py-[45px] lg:px-[100px]">
<p className="text-white text-[40px] 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]">
<div className="flex flex-col m-auto max-w-[1083px] px-[25px] gap-[50px] mb-[80px]">
<div className="flex gap-[10px] flex-wrap lg:gap-[23px] lg:justify-between">
{infoItems.map((item, index) => {
return <InfoItem variable="secondary" name={item.name} pathImg={item?.img} key={index}/>
})}
</div>
<div className="flex gap-[18px]">
<div className="flex justify-center flex-wrap lg:flex-nowrap lg:justify-between gap-[18px]">
{humanCards.map((card, index) => {
return <HumanCard name={card.name} post={card.post} skills={card.skills} key={index}
variant="secondary"/>
variant={isLg ? "secondary" : undefined}/>
})}
</div>
<div className="flex gap-[21px]">
<div className="flex-wrap xl:flex-nowrap 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]">
className="order-2 xl:order-1 items-center xl:items-start flex flex-col border-white border-[1px] rounded-[6px] w-full xl:min-w-[780px] min-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 месяца. Формы работы - групповые встречи, включающие
@@ -78,7 +94,7 @@ export default function Page() {
сессии в кругу, обсуждения и т.д.</p>
</div>
<div
className="flex flex-col bg-white rounded-[12px] pt-[47px] pb-[34px] w-full pl-[32px] gap-[23px] relative">
className="order-1 xl:order-2 justify-evenly flex xl:flex-col bg-white rounded-[12px] pt-[25px] pb-[10px] xl:pt-[47px] xl:pb-[34px] w-full xl: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>
+7 -7
View File
@@ -66,21 +66,21 @@ export default function Page() {
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 className="flex flex-col gap-[31px] items-center mb-[50px] px-[25px]">
<h1 className="text-[35px] text-center md:text-[40px] uppercase">Мероприятия сообщества</h1>
<p className="text-[17px] md: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]">
<div className="flex flex-col max-w-[1083px] px-[25px] m-auto">
<div className="flex flex-col gap-[30px] items-center md:flex-row md: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">
<div className="flex flex-wrap gap-x-[12px] gap-y-[30px] mb-[80px] justify-evenly lg:justify-between">
{eventCards.map((card, index) => {
return <EventCard title={card.title} description={card.description} key={index} />
})}
</div>
<div className="mb-[100px] flex justify-between">
<div className="mb-[100px] flex justify-between flex-col gap-[50px] md:flex-row">
<Pagination
totalItems={totalItems}
itemsPerPage={itemsPerPage}
+5
View File
@@ -8,6 +8,10 @@
backdrop-filter: blur(8.7px);
}
.scale-x-flip {
@apply transform scale-x-[-1];
}
.shadow-custom {
box-shadow: 14px 18px 29.9px 0px rgba(0, 0, 0, 0.06);
}
@@ -27,6 +31,7 @@
--light-black: rgba(109, 109, 109, 1);
--light-grey: rgba(114, 114, 114, 1);
--middle-grey: rgba(141, 141, 141, 1);
--bg-grey: rgba(218, 218, 218, 1);
}
@media (prefers-color-scheme: dark) {
+34 -27
View File
@@ -5,6 +5,7 @@ import Button from "@/components/button";
import EventCard from "@/components/event-card";
import HumanCard from "@/components/human-card";
import NavSection from "@/components/nav-section";
import React from "react";
export default function Home() {
@@ -66,44 +67,44 @@ export default function Home() {
}
]
return (
<main className="pt-[100px] flex flex-col">
<main className="pt-[60px] sm: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">это добровольное самоорганизующееся сообщество
<h1 className="text-[35px] sm:text-[40px] uppercase">Донецкое гештальт сообщество</h1>
<p className="text-[17px] text-dark sm:text-[19px] max-w-[832px] mx-auto">это добровольное самоорганизующееся сообщество
специалистов г. Донецка и Донецкого края в области психологического консультирования и
гештальт-терапии.</p>
</div>
<div className="flex justify-center mt-[100px] gap-[14px] container mx-auto">
<div className="mt-[50px] w-full flex-col flex lg:flex-row justify-center sm:mt-[100px] gap-y-[30px] sm:gap-[14px] max-w-[1083px] px-[25px] 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]">
className="relative bg-blue border-[1px] border-white rounded-[25px] px-[25px] pb-[10px] md:pb-[0] md:pr-[48px] md:pl-[0] md:min-w-[650px] min-h-[480px] w-full font-[400]">
<Image src="/images/intro.svg" alt="intro" className="w-[262px] h-[262px] sm:w-auto sm:h-auto scale-x-flip right-0 md:left-0 md:scale-x-100 absolute" width={1} height={1}/>
<h3 className="text-white text-[38px] text-start mt-[214px] md: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] font-[700]">взаимное
<p className="md:ml-auto mt-[50px] text-start text-white text-[19px] leading-[20px] max-w-[400px] font-[700]">взаимное
обогащение профессиональными знаниями, идеями и опытом на конференциях и семинарах, в учебных
программах и на интенсивах, на специализациях и в супервизорских группах.</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">
<div className="flex-col md:flex-row min-w-full lg:min-w-min lg:flex-col flex gap-[12px] max-w-[368px]">
<div className="flex px-[20px] items-center bg-blue rounded-[25px] min-h-[234px] lg: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-[40px] border-[4px] border-white">
<div className="flex relative left-[-20px] bottom-[-10px]">
<AvatarImage imageUrl='avatar'/>
<AvatarImage imageUrl='avatar' className="right-[55px] z-2"/>
<AvatarImage imageUrl='avatar' className="right-[105px] z-3"/>
<AvatarImage imageUrl='avatar' className="right-[155px] z-4"/>
className="flex justify-center sm:justify-normal px-[20px] flex-col items-center rounded-[25px] min-h-[234px] lg:px-[68px] pt-[40px] border-[4px] border-white relative">
<div className="w-full lg:left-[-20px] flex relative justify-center md:justify-normal">
<AvatarImage imageUrl='avatar' className="right-[-85px] md:right-0"/>
<AvatarImage imageUrl='avatar' className="right-[-30px] md:right-[55px] z-2"/>
<AvatarImage imageUrl='avatar' className="right-[30px] md:right-[105px] z-3"/>
<AvatarImage imageUrl='avatar' className="right-[85px] md:right-[155px] z-4"/>
</div>
<p className="text-blue font-[900] text-[26px]">+ 145 учасников</p>
</div>
</div>
</div>
<div className="mt-[50px] flex gap-[64px] justify-center container mx-auto">
<div className="mt-[50px] flex-col sm:flex-row 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 font-[700]">Донецкое
@@ -116,28 +117,34 @@ export default function Home() {
</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 className="flex flex-col gap-[10px] md:flex-row items-center lg: max-w-[1083px] px-[25px] mx-auto justify-between w-full mb-[50px]">
<Select className="order-2 md:order-1" name="Конференции" />
<h3 className="mb-[50px] md:mb-0 order-1 md:order-2 text-blac text-center text-[26px] uppercase">Мероприятия сообщества</h3>
<Button className="hidden md:flex order-3" name="Все мероприятия" />
</div>
<div className="flex justify-around">
<div className="flex justify-around flex-wrap gap-y-[10px]">
{eventCards.map((card, index) => {
return <EventCard title={card.title} description={card.description} key={index} />
})}
</div>
</div>
<Button className="min-w-[315px] mt-[50px] m-auto md:hidden" name="Все мероприятия" />
<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 className="flex flex-col md:flex-row items-center px-[25px] max-w-[1083px] mx-auto justify-between w-full">
<Select className="order-2 md:order-1" name="Тренер"/>
<div className="flex mb-[50px] order-1 md:order-2 md:mb-0">
<Image className="rotate-[90deg] relative top-[-2px]" src="/images/chevronDown.svg" alt="arrow" width={11} height={11} />
<h3 className=" text-black text-center text-[26px] uppercase mx-[23px]">наше сообщество</h3>
<Image className="rotate-[-90deg] relative top-[-2px]" src="/images/chevronDown.svg" alt="arrow" width={11} height={11} />
</div>
<Button className="hidden md:order-3" name="Все участники"/>
</div>
<div className="flex max-w-[1033px] m-auto justify-between w-full">
<div className="flex m-auto justify-center gap-[16px] w-full px-[25px] flex-wrap">
{humans.map((human, index) => {
return <HumanCard key={index} name={human.name} description={human.description} skills={human.skills} />
})}
</div>
<Button className="min-w-[315px] mt-[50px] m-auto md:hidden" name="Все участники"/>
</div>
<NavSection />
</main>
+14 -15
View File
@@ -22,25 +22,25 @@ export default function Page() {
return(
<main>
<Breadcrumbs/>
<div className=" flex gap-[35px] max-w-[1032px] m-auto">
<div className=" flex flex-wrap justify-center gap-[35px] px-[25px] max-w-[1083px] m-auto">
<div className="bg-white p-[15px] w-fit rounded-[6px]">
<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]">
<div className="flex flex-col w-full lg:w-auto">
<h2 className="uppercase text-center lg:text-start lg:max-w-[390px] text-[40px] leading-[48px]">кириллов кирилл кириллович</h2>
<div className="flex justify-center lg:justify-start 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]">
<div className="flex flex-col gap-[8px] mb-[70px] lg: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" />
<InfoItem name="Терапевт" variable="lgDefault" />
<InfoItem name="Супервизор" variable="lgDefault" />
<InfoItem name="Тренер" variable="lgDefault" />
</div>
</div>
<div className="py-[47.5px] px-[53px] gap-[52px] bg-white text-[20px] flex rounded-[12px] relative">
<div className="px-[35px] pb-[10px] pt-[35px] sm:py-[47.5px] sm:px-[53px] gap-[20px] sm:gap-[52px] bg-white text-[20px] flex flex-col sm:flex-row 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>
@@ -49,16 +49,15 @@ export default function Page() {
<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]">
<div className="flex absolute top-[-20px] min-w-[47px] h-[47px] bg-white items-center justify-center rounded-full sm:right-[-25px] sm: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]">
<div className="flex flex-col rounded-[6px] border-[1px] border-white max-w-[1032px] mx-[25px] lg:mx-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-0 lg:gap-[63px] flex-col lg:flex-row ">
<ul className="list-disc list-inside">
<li>Индивидуальная терапия</li>
<li>Терапия зависимостей</li>
@@ -74,7 +73,7 @@ export default function Page() {
</ul>
</div>
</div>
<div className="flex flex-col gap-[30px] max-w-[910px] m-auto mb-[100px] font-[500]">
<div className="flex flex-col gap-[30px] mx-[25px] lg:max-w-[910px] lg:mx-auto mb-[100px] font-[500]">
<h3 className="uppercase text-black text-[26px]">Описание профессиональной деятельности</h3>
<div className="text-[15px] leading-[24px]">
<p>Часто обращаются со следующими темами:</p>
+19 -9
View File
@@ -51,6 +51,16 @@ export default function Page() {
description: "Финансовые изменения, болезнь, своя или близких, разрыв отношений, развод...",
skills: ["Терапевт", "Супервизор", "Тренер-стажер", "Тренер", "Ассоциированный тренер", "Ведущий тренер"]
},
{
name: "Лукашенко Марина Анатольевна",
description: "Финансовые изменения, болезнь, своя или близких, разрыв отношений, развод...",
skills: ["Терапевт", "Супервизор", "Тренер-стажер", "Тренер", "Ассоциированный тренер", "Ведущий тренер"]
},
{
name: "Лукашенко Марина Анатольевна",
description: "Финансовые изменения, болезнь, своя или близких, разрыв отношений, развод...",
skills: ["Терапевт", "Супервизор", "Тренер-стажер", "Тренер", "Ассоциированный тренер", "Ведущий тренер"]
},
{
name: "Лукашенко Марина Анатольевна",
description: "Финансовые изменения, болезнь, своя или близких, разрыв отношений, развод...",
@@ -60,30 +70,30 @@ export default function Page() {
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 className="flex flex-col gap-[31px] items-center mb-[50px] px-[25px]">
<h1 className="text-[35px] sm:text-[40px] text-center uppercase">участники сообщества</h1>
<p className="text-[19px] sm: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]">
<div className="flex flex-col gap-[50px] px-[25px]">
<div className="flex flex-wrap gap-[10px] justify-center md:justify-start md:gap-[28px] max-w-[1032px] m-auto w-full">
{skills.map((skill, index) => {
return <InfoItem name={skill} key={index} variable="lgFixed"/>
})}
</div>
<div className="flex flex-wrap gap-[26px] justify-between">
<div className="flex flex-wrap gap-x-[16px] gap-y-[30px] justify-center max-w-[1350px] m-auto">
{humans.map((human, index) => {
return <HumanCard key={index} name={human.name} variant="lg" description={human.description}
return <HumanCard key={index} name={human.name} description={human.description}
skills={human.skills}/>
})}
</div>
<div className="mb-[100px] flex justify-between">
<div className="flex-col md:flex-row gap-[50px] max-w-[1033px] m-auto w-full mb-[100px] flex justify-between">
<Pagination
totalItems={totalItems}
itemsPerPage={itemsPerPage}
currentPage={currentPage}
onPageChange={handlePageChange}
/>
<Button name="Показать всех участников" variant="secondary"/>
<Button name="Показать всех участников"/>
</div>
<div className="flex flex-col gap-[80px]">
<InfoBlock/>
+2 -2
View File
@@ -16,8 +16,8 @@ const Breadcrumbs: React.FC = () => {
}
return(
<nav className="max-w-[1032px] mx-auto">
<ol className="flex text-middleGrey font-[350] my-[50px]">
<nav className="max-w-[1083px] px-[25px] mx-auto">
<ol className="flex flex-wrap text-middleGrey font-[350] my-[50px]">
<li>
<Link href="/">главная</Link>
</li>
+4 -4
View File
@@ -5,19 +5,19 @@ import Link from 'next/link';
const Footer: React.FC = () => {
return (
<footer className="container pb-8 px-8 m-auto flex justify-center mt-[80px]">
<footer className="flex flex-col items-center gap-[10px] mt-[20px] md:flex-row md:mt-[80px] md:gap-0 max-w-[1083px] px-[25px] justify-between pb-8 m-auto">
<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]">
<div className="max-w-[500px] w-full justify-between md:w-fit gap-[25px] lg:gap-[96px] flex text-[15px] text-dark items-center font-[350]">
<Link href="/events">События</Link>
<Link href="/participants">Участники</Link>
</div>
<div className="flex gap-[25px]">
<div className="max-w-[500px] w-full justify-between md:w-fit 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]">
<div className="max-w-[500px] w-full justify-center md:w-fit flex gap-[29px]">
<SocialItem icon="logo_tg" link=""/>
<SocialItem icon="logo_vk" link=""/>
</div>
+7 -4
View File
@@ -5,15 +5,18 @@ 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]">
<header className="flex pt-8 px-[25px] m-auto justify-between items-center max-w-[1083px] relative">
<div className="sm:hidden max-w-[95px] w-full">
<Image width={23} height={17} className="cursor-pointer sm:hidden" src="/images/burger.svg" alt="burger" />
</div>
<div className="hidden w-full justify-between mt-[10px] gap-[19px] text-[15px] text-dark font-[350] sm:flex sm:max-w-[145px] sm:mt-0 md:gap-[96px]">
<Link href="/events">События</Link>
<Link href="/participants">Участники</Link>
</div>
<Link href="/">
<Link href="/" className=" ">
<Image width={150} height={48} src="/logo.svg" alt="logo" />
</Link>
<div className="flex ml-[340px] gap-[19px]">
<div className="flex gap-[13px] sm:gap-[19px]">
<SocialItem icon="logo_tg" link=""/>
<SocialItem icon="logo_vk" link=""/>
</div>
+24 -13
View File
@@ -15,17 +15,17 @@ interface Props {
const HumanCard: React.FC<Props> = ({name, description, image, skills,post, variant = 'default'}) => {
const cardStyles = {
default: {
main: "",
main: "px-[9px] pt-[11px] pb-[25px]",
img: {
w: 221,
h: 221
w: 260,
h: 181
},
name: "text-[18px]",
description: "",
blocks: ""
},
secondary: {
main: "flex w-full justify-between",
main: "flex w-full justify-between p-[11px]",
img: {
w: 218,
h: 232
@@ -44,32 +44,43 @@ const HumanCard: React.FC<Props> = ({name, description, image, skills,post, vari
};
return (
<Link href="/participants/1" className={`${cardStyles[variant].main} backdrop-blur-custom border-[1px] border-white rounded-[6px] bg-darkWhite p-[10px] text-black w-fit shadow-custom`}>
<Link href="/participants/1" className={` backdrop-blur-custom border-[1px] border-white rounded-[15px] bg-darkWhite text-black w-fit shadow-custom ${cardStyles[variant].main}`}>
{image ? <Image src={image} alt='image' width={cardStyles[variant].img.w} height={cardStyles[variant].img.h} /> :
<Image src={variant === "secondary" ? "/images/mok_human2.svg" :"/images/mok_human.svg"} alt='image' width={cardStyles[variant].img.w} height={cardStyles[variant].img.h} className="rotate-[180deg]" />
<Image src={variant === "secondary" ? "/images/mok_human2.svg" :"/images/mok_human_new.svg"} alt='image' width={cardStyles[variant].img.w} height={cardStyles[variant].img.h} className="rotate-[180deg]" />
}
{(variant === 'default' || variant === 'lg') &&
<>
<div className="px-[13px]">
<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] ${cardStyles[variant].description}`}>{description}</p>
</span>
<div className={`flex gap-[5px] max-w-[220px] flex-wrap ${cardStyles[variant].blocks}`}>
{skills.map((skill, index) => {
<div className={`flex gap-[5px] max-w-[220px] flex-wrap items-center ${cardStyles[variant].blocks}`}>
{skills.slice(0, 3).map((skill, index) => {
return <InfoItem name={skill} key={index} />
})}
{skills.length > 3 &&
<div className="bg-bgGrey rounded-[6px] w-[28px] h-[28px] flex justify-center items-center">
<span className="text-white text-[13px] font-[400]">+{skills.length - 3}</span>
</div>
}
</div>
</>
</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-[12px]">{post}</span>
<div className="flex gap-[7px] flex-wrap">
{skills.map((skill, index) => {
return <InfoItem name={skill} key={index} variable="white"/>
<div
className={`flex gap-[5px] max-w-[220px] mt-[57px] flex-wrap items-center`}>
{skills.slice(0, 3).map((skill, index) => {
return <InfoItem name={skill} key={index} />
})}
{skills.length > 3 &&
<div className="bg-bgGrey rounded-[6px] w-[28px] h-[28px] flex justify-center items-center">
<span className="text-white text-[13px] font-[400]">+{skills.length - 3}</span>
</div>
}
</div>
</div>
}
+2 -2
View File
@@ -3,9 +3,9 @@ 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-[59.5px] pb-[59.5px] h-[234px] text-center justify-center">
<div className="hidden lg:flex bg-blue rounded-[25px] relative max-w-[1033px] w-full m-auto pt-[59.5px] pb-[59.5px] h-[234px] text-center justify-center">
<p className="text-white text-[32px] max-w-[671px] font-[700]">Через собственное развитие мы развиваем и популяризируем гештальт-подход</p>
<Image className="absolute right-0 top-[-20px]" src="/images/palm.svg" alt="palm" width={217} height={254} />
<Image className=" absolute right-0 top-[-20px]" src="/images/palm.svg" alt="palm" width={217} height={254} />
</div>
);
};
+3 -2
View File
@@ -3,15 +3,16 @@ import Image from "next/image";
interface Props {
name: string;
variable?: 'default' | 'lg' | 'secondary' | 'white' | 'lgFixed' | 'whiteFixed';
variable?: 'default' | 'lg' | 'secondary' | 'white' | 'lgFixed' | 'whiteFixed' | 'lgDefault';
pathImg?: string;
}
const InfoItem: React.FC<Props> = ({name, variable = 'default', pathImg}) => {
const variantClasses = {
default: 'text-[12px] py-[4px] px-[8px] rounded-[3px] border-[0.5px] text-blue font-[700]',
default: 'text-[13px] px-[9.5px] rounded-[6px] border-[0.5px] text-blue font-[400] min-h-[28px] max-h-[28px] h-full',
secondary: 'text-[16px] text-lightBlack border-[1px] rounded-[6px] py-[10px] px-[28px] gap-[10px] items-center',
lg: 'px-[10px] py-[6.5px] rounded-[6px] border-[1px] text-[16px] text-blue font-[700]',
lgDefault: 'text-[14px] px-[9.5px] rounded-[6px] border-[0.5px] text-blue font-[400] max-w-[114px] w-full min-h-[34px] h-full',
lgFixed: 'px-[10px] py-[6.5px] max-w-[140px] w-full rounded-[6px] border-[1px] text-[16px] text-blue',
white: 'text-[12px] 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 font-[700]'
+3 -3
View File
@@ -5,13 +5,13 @@ 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]">
<div className="flex-col w-full max-w-[1083px] px-[25px] flex gap-[53px] items-end m-auto md:flex-row">
<div className="flex md: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]">
<div className="flex gap-[19px] m-auto">
<SectionItem name="Книги" />
<SectionItem name="лекции" />
</div>
+1 -1
View File
@@ -72,7 +72,7 @@ const Pagination: React.FC<PaginationProps> = ({
)
))}
</div>
<button className="flex items-center text-[15px] font-[700] ml-[26px] gap-[11px]" onClick={() => handlePageChange(currentPage + 1)} disabled={currentPage === totalPages}>
<button className=" flex items-center text-[15px] font-[700] ml-auto md: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>
+5
View File
@@ -0,0 +1,5 @@
<svg width="23" height="17" viewBox="0 0 23 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="23" height="3" fill="#333333"/>
<rect y="7" width="11" height="3" fill="#333333"/>
<rect y="14" width="17" height="3" fill="#333333"/>
</svg>

After

Width:  |  Height:  |  Size: 251 B

+9
View File
@@ -0,0 +1,9 @@
<svg width="261" height="183" viewBox="0 0 261 183" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M259.606 172.259C259.606 177.506 255.353 181.759 250.106 181.759L10.106 181.759C4.85925 181.759 0.605958 177.506 0.605958 172.259L0.605981 10.259C0.605982 5.01232 4.85928 0.759019 10.106 0.75902L250.106 0.759033C255.353 0.759033 259.606 5.01233 259.606 10.259L259.606 172.259Z" fill="url(#pattern0_1229_335)" stroke="#F2F2F2"/>
<defs>
<pattern id="pattern0_1229_335" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_1229_335" transform="matrix(-0.001156 0 0 -0.00167173 1.04151 1.05691)"/>
</pattern>
<image id="image0_1229_335" width="1080" height="720" xlink:href="data:image/png;base64,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 truncated
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.7 MiB

+2 -1
View File
@@ -21,7 +21,8 @@ export default {
darkGrey: "var(--dark-grey)",
lightBlack: "var(--light-black)",
lightGrey: "var(--light-grey)",
middleGrey: "var(--middle-grey)"
middleGrey: "var(--middle-grey)",
bgGrey: "var(--bg-grey)",
},
fontFamily: {
'gt-eesti': ['GT Eesti Pro Display', 'sans-serif'], // добавьте ваш шрифт