mobile
This commit is contained in:
parent
1278f7463d
commit
ec0f24e450
@ -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>
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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) {
|
||||
|
||||
61
app/page.tsx
61
app/page.tsx
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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/>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
}
|
||||
|
||||
@ -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,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]'
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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
public/images/burger.svg
Normal file
5
public/images/burger.svg
Normal 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
public/images/mok_human_new.svg
Normal file
9
public/images/mok_human_new.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 1.7 MiB |
@ -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'], // добавьте ваш шрифт
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user