-
Popular Directions
+Popular Topics
diff --git a/src/app/[locale]/(main)/@experts/page.tsx b/src/app/[locale]/(main)/@experts/page.tsx
index 2b5e6b5..f7222e6 100644
--- a/src/app/[locale]/(main)/@experts/page.tsx
+++ b/src/app/[locale]/(main)/@experts/page.tsx
@@ -1,120 +1,92 @@
+'use client';
+
import React from 'react';
+import { Avatar, List, Typography, Tag } from 'antd';
+import { RightOutlined } from '@ant-design/icons';
+import { Link } from '../../../../navigation';
+import { ExpertsFilter, ExpertsAdditionalFilter } from '../../../../components/Experts';
+
+const { Text } = Typography;
+
+const data = Array.from({ length: 10 }).map((_, i) => ({
+ href: '/',
+ name: 'Matthew Weeks',
+ avatar: '/images/person.png',
+ duration: '45min',
+ price: '45$',
+ skills: ['Engineering & Data', 'Soft skills', 'Interview'],
+ speciality: 'Senior Software Engineer',
+ specialityDesc: 'Auth0',
+ description: 'I have worked across a variety of organizations, lead teams, and delivered quality software for 8 years. In that time I\'ve worked as an independent consultant, at agencies as a team lead, and as a senior engineer at Auth0. I also host a podcast https://anchor.fm/work-in-programming where I break down how …'
+}));
export default function Experts() {
+ const expertsList = (
+
- {
+ console.log(page);
+ },
+ pageSize: 5
+ }}
+ dataSource={data}
+ renderItem={(item) => (
+
- 1 diff --git a/src/app/[locale]/(main)/@news/page.tsx b/src/app/[locale]/(main)/@news/page.tsx index 4bd8b48..15bce46 100644 --- a/src/app/[locale]/(main)/@news/page.tsx +++ b/src/app/[locale]/(main)/@news/page.tsx @@ -4,7 +4,7 @@ export default function News() { return (
+ {item.price} / {item.duration}
+
+ )}
+ />
+
+
+
+ {item.skills.map((skill) => {skill} )}
+
+ Engineering & Data
+ +6
+ {item.speciality}
+ {item.specialityDesc}
+ {item.description}
+
+
+
+
-
Find a expert
+Find an expert
-
-
+ Coaching
-
-
-
-
- Work-life Balance
-
-
-
- Strategic Session
-
-
-
- Personal Growth
-
-
-
- Career Planning
-
-
-
- Executive Coaching
-
- Mentoring
-
-
-
-
- Career Development
-
-
-
- Networking
-
- Business-consultation
-
-
-
-
- Business Model Review
-
- Price from 45$ to 170$
-
-
-
- Duration from 45m to 120m
-
-
-
-
-
-
-
+
-
-
-
-
-
-
-
-
-
-
@@ -149,106 +121,7 @@ export default function Experts() {
-
-
-
-
- 
-
-
-
-
- Matthew Weeks
-
- 45$ / 45min
-
-
-
-
-
- Engineering & Data
- Engineering & Data
- +6
- Senior Software Engineer
- Auth0
-
- I have worked across a variety of organizations, lead teams, and delivered quality
- software for 8 years. In that time I've worked as an independent consultant, at
- agencies as a team lead, and as a senior engineer at Auth0. I also host a podcast
- https://anchor.fm/work-in-programming where I break down how …
-
-
- Details
- 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Matthew Weeks
-
- 45$ / 45min
-
-
-
-
-
- Engineering & Data
- Engineering & Data
- +6
- Senior Software Engineer
- Auth0
-
- I have worked across a variety of organizations, lead teams, and delivered quality
- software for 8 years. In that time I've worked as an independent consultant, at
- agencies as a team lead, and as a senior engineer at Auth0. I also host a podcast
- https://anchor.fm/work-in-programming where I break down how …
-
-
- Details
-
-
-
-
-
-
-
+ {expertsList}
-
-
-
-
-
-
-
- Matthew Weeks
-
- 45$ / 45min
-
-
-
-
-
- Engineering & Data
- Engineering & Data
- +6
- Senior Software Engineer
- Auth0
-
- I have worked across a variety of organizations, lead teams, and delivered quality
- software for 8 years. In that time I've worked as an independent consultant, at
- agencies as a team lead, and as a senior engineer at Auth0. I also host a podcast
- https://anchor.fm/work-in-programming where I break down how …
-
-
- Details
-
-
-
-
-
-
-
-
-
Articles form Experts & News of Project
+Professional Articles & Project News
@@ -24,7 +24,7 @@ export default function News() {
+
diff --git a/src/app/[locale]/account/information/page.tsx b/src/app/[locale]/[userId]/information/page.tsx
similarity index 100%
rename from src/app/[locale]/account/information/page.tsx
rename to src/app/[locale]/[userId]/information/page.tsx
diff --git a/src/app/[locale]/account/layout.tsx b/src/app/[locale]/[userId]/layout.tsx
similarity index 100%
rename from src/app/[locale]/account/layout.tsx
rename to src/app/[locale]/[userId]/layout.tsx
diff --git a/src/app/[locale]/global.css b/src/app/[locale]/global.css
deleted file mode 100644
index 49f1bb1..0000000
--- a/src/app/[locale]/global.css
+++ /dev/null
@@ -1,8 +0,0 @@
-html, body {
- height: 100%;
-}
-
-body {
- font-family: var(--font-comfortaa), -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
- background-color: #ffffff;
-}
diff --git a/src/app/[locale]/error.tsx b/src/app/error.tsx
similarity index 100%
rename from src/app/[locale]/error.tsx
rename to src/app/error.tsx
diff --git a/src/app/[locale]/layout.tsx b/src/app/layout.tsx
similarity index 76%
rename from src/app/[locale]/layout.tsx
rename to src/app/layout.tsx
index d1f6bce..0f6c214 100644
--- a/src/app/[locale]/layout.tsx
+++ b/src/app/layout.tsx
@@ -4,9 +4,11 @@ import type { Metadata } from 'next';
import { Comfortaa, Inter } from 'next/font/google';
import { notFound } from 'next/navigation';
import { ConfigProvider } from 'antd';
+import StyledRegistry from '../../lib/StyleRegistry';
import StyledComponentsRegistry from '../../lib/AntdRegistry';
import { ALLOWED_LOCALES } from '../../constants/locale';
-import './global.css'
+import theme from '../../constants/theme';
+import '../../styles/style.scss';
type RootLayoutProps = {
children: ReactNode;
@@ -43,11 +45,13 @@ export default function RootLayout({ children, params: { locale } }: RootLayoutP
return (
-
-
- {children}
-
-
+
+
+
+ {children}
+
+
+
);
diff --git a/src/app/[locale]/loading.tsx b/src/app/loading.tsx
similarity index 100%
rename from src/app/[locale]/loading.tsx
rename to src/app/loading.tsx
diff --git a/src/app/[locale]/not-found.tsx b/src/app/not-found.tsx
similarity index 100%
rename from src/app/[locale]/not-found.tsx
rename to src/app/not-found.tsx
diff --git a/src/app/[locale]/robots.txt b/src/app/robots.txt
similarity index 100%
rename from src/app/[locale]/robots.txt
rename to src/app/robots.txt
diff --git a/src/components/Experts/AdditionalFilter.tsx b/src/components/Experts/AdditionalFilter.tsx
new file mode 100644
index 0000000..fc15404
--- /dev/null
+++ b/src/components/Experts/AdditionalFilter.tsx
@@ -0,0 +1,45 @@
+'use client';
+
+import React, { useCallback, useState } from 'react';
+import { Input, Select } from 'antd';
+import { AdditionalFilter } from '../../types/experts';
+import { INITIAL_ADD_FILTER } from '../../constants/experts';
+import { LOCALES } from '../../constants/locale';
+
+export const ExpertsAdditionalFilter = () => {
+ const [filter, setFilter] = useState(INITIAL_ADD_FILTER);
+
+ const onChangeFilter = useCallback((key: string, value: any) => {
+ setFilter({
+ ...filter,
+ [key]: value
+ })
+ }, [filter]);
+
+ return (
+ (INITIAL_FILTER);
+
+ const onChangeFilter = useCallback((key: string, value: any) => {
+ setFilter({
+ ...filter,
+ [key]: value
+ })
+ }, [filter]);
+
+ const getList = useCallback((data) => (
+ (false);
const pathname = usePathname();
const onClick: MenuProps['onClick'] = (e) => {
@@ -18,6 +20,8 @@ export const LanguageSwitcher = ({ locale }: { locale: string }) => {
});
};
+ const onOpen = (open: boolean) => setMenuOpen(open);
+
const menuProps = {
items: Object.entries(LOCALES).map(([ key, label ]) => ({ key, label })),
selectable: true,
@@ -26,10 +30,16 @@ export const LanguageSwitcher = ({ locale }: { locale: string }) => {
};
return (
-
-
+
+
);
};
diff --git a/src/constants/experts.ts b/src/constants/experts.ts
new file mode 100644
index 0000000..e927739
--- /dev/null
+++ b/src/constants/experts.ts
@@ -0,0 +1,33 @@
+import { AdditionalFilter, Filter } from '../types/experts';
+import { LOCALES } from "./locale";
+
+export enum FilterType {
+ 'WorkLifeBalance' = 'workLifeBalance',
+ 'StrategicSession' = 'strategicSession',
+ 'PersonalGrowth' = 'personalGrowth',
+ 'CareerPlaning' = 'careerPlaning',
+ 'ExecutiveCoaching' = 'executiveCoaching',
+ 'CareerDevelopment' = 'careerDevelopment',
+ 'Networking' = 'networking',
+ 'BusinessModelReview' = 'businessModelReview',
+ 'Price' = 'price',
+ 'Duration' = 'duration'
+}
+
+export const INITIAL_FILTER: Filter = {
+ [FilterType.WorkLifeBalance]: false,
+ [FilterType.StrategicSession]: false,
+ [FilterType.PersonalGrowth]: false,
+ [FilterType.CareerPlaning]: false,
+ [FilterType.ExecutiveCoaching]: false,
+ [FilterType.CareerDevelopment]: false,
+ [FilterType.Networking]: false,
+ [FilterType.BusinessModelReview]: false,
+ [FilterType.Price]: [65, 170],
+ [FilterType.Duration]: [60, 120]
+};
+
+export const INITIAL_ADD_FILTER: AdditionalFilter = {
+ sort: 'By top views',
+ language: Object.keys(LOCALES)
+};
diff --git a/src/constants/locale.ts b/src/constants/locale.ts
index f66cf1d..b78b657 100644
--- a/src/constants/locale.ts
+++ b/src/constants/locale.ts
@@ -5,10 +5,10 @@ export const ALLOWED_LOCALES = [Locale.en, Locale.ru, Locale.de, Locale.it, Loca
export const LOCALE_PREFIX = undefined;
export const LOCALES = {
- [Locale.en]: 'English',
- [Locale.ru]: 'Russian',
- [Locale.de]: 'German',
- [Locale.it]: 'Italian',
- [Locale.es]: 'Spanish',
- [Locale.fr]: 'French',
+ [Locale.en]: 'En',
+ [Locale.ru]: 'Ru',
+ [Locale.de]: 'Ge',
+ [Locale.it]: 'It',
+ [Locale.es]: 'Es',
+ [Locale.fr]: 'Fr',
};
diff --git a/src/constants/theme.ts b/src/constants/theme.ts
new file mode 100644
index 0000000..1e27fda
--- /dev/null
+++ b/src/constants/theme.ts
@@ -0,0 +1,26 @@
+import type { ThemeConfig } from 'antd';
+
+const theme: ThemeConfig = {
+ token: {
+ fontFamily: 'var(--font)',
+ colorPrimary: '#2C7873',
+ controlItemBgActive: '#F8F8F7',
+ controlItemBgActiveHover: '#E5E5E5'
+ }
+};
+
+export default theme;
+
+// components: {
+// Switch: {
+// handleSize: '24px',
+// handleBg: '#C4DFE6',
+// trackPadding: 0,
+// trackHeight: '24px',
+// handleShadow: 'none'
+// },
+// Pagination: {
+// itemActiveBg: '#2C7873',
+// itemSize: '40px'
+// }
+// }
diff --git a/src/lib/StyleRegistry.tsx b/src/lib/StyleRegistry.tsx
new file mode 100644
index 0000000..492722b
--- /dev/null
+++ b/src/lib/StyleRegistry.tsx
@@ -0,0 +1,25 @@
+'use client';
+
+import React, { useState } from 'react'
+import { useServerInsertedHTML } from 'next/navigation'
+import { ServerStyleSheet, StyleSheetManager } from 'styled-components'
+
+export default function StyledRegistry({ children }: { children: React.ReactNode }) {
+ // Only create stylesheet once with lazy initial state
+ // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
+ const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet())
+
+ useServerInsertedHTML(() => {
+ const styles = styledComponentsStyleSheet.getStyleElement()
+ styledComponentsStyleSheet.instance.clearTag()
+ return <>{styles}
+ })
+
+ if (typeof window !== 'undefined') return <>{children}
+
+ return (
+
+ {children}
+
+ );
+};
diff --git a/src/styles/_cols.scss b/src/styles/_cols.scss
new file mode 100644
index 0000000..5a3f8bd
--- /dev/null
+++ b/src/styles/_cols.scss
@@ -0,0 +1,1507 @@
+@import "_variables";
+
+.row {
+ display: flex;
+ flex-wrap: wrap;
+ margin-right: -8px;
+ margin-left: -8px;
+}
+
+.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
+.col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm,
+.col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md,
+.col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg,
+.col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl,
+.col-xl-auto {
+ position: relative;
+ flex-shrink: 0;
+ width: 100%;
+ max-width: 100%;
+ padding-right: 8px;
+ padding-left: 8px;
+}
+
+.col {
+ flex: 1 0 0%
+}
+
+.row-cols-auto > * {
+ flex: 0 0 auto;
+ width: auto
+}
+
+.row-cols-1 > * {
+ flex: 0 0 auto;
+ width: 100%
+}
+
+.row-cols-2 > * {
+ flex: 0 0 auto;
+ width: 50%
+}
+
+.row-cols-3 > * {
+ flex: 0 0 auto;
+ width: 33.3333333333%
+}
+
+.row-cols-4 > * {
+ flex: 0 0 auto;
+ width: 25%
+}
+
+.row-cols-5 > * {
+ flex: 0 0 auto;
+ width: 20%
+}
+
+.row-cols-6 > * {
+ flex: 0 0 auto;
+ width: 16.6666666667%
+}
+
+.col-auto {
+ flex: 0 0 auto;
+ width: auto
+}
+
+.col-1 {
+ flex: 0 0 auto;
+ width: 8.33333333%
+}
+
+.col-2 {
+ flex: 0 0 auto;
+ width: 16.66666667%
+}
+
+.col-3 {
+ flex: 0 0 auto;
+ width: 25%
+}
+
+.col-4 {
+ flex: 0 0 auto;
+ width: 33.33333333%
+}
+
+.col-5 {
+ flex: 0 0 auto;
+ width: 41.66666667%
+}
+
+.col-6 {
+ flex: 0 0 auto;
+ width: 50%
+}
+
+.col-7 {
+ flex: 0 0 auto;
+ width: 58.33333333%
+}
+
+.col-8 {
+ flex: 0 0 auto;
+ width: 66.66666667%
+}
+
+.col-9 {
+ flex: 0 0 auto;
+ width: 75%
+}
+
+.col-10 {
+ flex: 0 0 auto;
+ width: 83.33333333%
+}
+
+.col-11 {
+ flex: 0 0 auto;
+ width: 91.66666667%
+}
+
+.col-12 {
+ flex: 0 0 auto;
+ width: 100%
+}
+
+.offset-1 {
+ margin-left: 8.33333333%
+}
+
+.offset-2 {
+ margin-left: 16.66666667%
+}
+
+.offset-3 {
+ margin-left: 25%
+}
+
+.offset-4 {
+ margin-left: 33.33333333%
+}
+
+.offset-5 {
+ margin-left: 41.66666667%
+}
+
+.offset-6 {
+ margin-left: 50%
+}
+
+.offset-7 {
+ margin-left: 58.33333333%
+}
+
+.offset-8 {
+ margin-left: 66.66666667%
+}
+
+.offset-9 {
+ margin-left: 75%
+}
+
+.offset-10 {
+ margin-left: 83.33333333%
+}
+
+.offset-11 {
+ margin-left: 91.66666667%
+}
+
+.order-first {
+ -ms-flex-order: -1;
+ order: -1;
+}
+
+.order-last {
+ -ms-flex-order: 13;
+ order: 13;
+}
+
+.order-0 {
+ -ms-flex-order: 0;
+ order: 0;
+}
+
+.order-1 {
+ -ms-flex-order: 1;
+ order: 1;
+}
+
+.order-2 {
+ -ms-flex-order: 2;
+ order: 2;
+}
+
+.order-3 {
+ -ms-flex-order: 3;
+ order: 3;
+}
+
+.order-4 {
+ -ms-flex-order: 4;
+ order: 4;
+}
+
+.order-5 {
+ -ms-flex-order: 5;
+ order: 5;
+}
+
+.order-6 {
+ -ms-flex-order: 6;
+ order: 6;
+}
+
+.order-7 {
+ -ms-flex-order: 7;
+ order: 7;
+}
+
+.order-8 {
+ -ms-flex-order: 8;
+ order: 8;
+}
+
+.order-9 {
+ -ms-flex-order: 9;
+ order: 9;
+}
+
+.order-10 {
+ -ms-flex-order: 10;
+ order: 10;
+}
+
+.order-11 {
+ -ms-flex-order: 11;
+ order: 11;
+}
+
+.order-12 {
+ -ms-flex-order: 12;
+ order: 12;
+}
+
+.d-block {
+ display: block !important;
+}
+.d-none {
+ display: none !important;
+}
+
+@media (min-width: 576px) {
+ .d-sm-none {
+ display: none !important;
+ }
+ .d-sm-block {
+ display: block !important;
+ }
+ .col-sm {
+ flex: 1 0 0%
+ }
+
+ .row-cols-sm-auto > * {
+ flex: 0 0 auto;
+ width: auto
+ }
+
+ .row-cols-sm-1 > * {
+ flex: 0 0 auto;
+ width: 100%
+ }
+
+ .row-cols-sm-2 > * {
+ flex: 0 0 auto;
+ width: 50%
+ }
+
+ .row-cols-sm-3 > * {
+ flex: 0 0 auto;
+ width: 33.3333333333%
+ }
+
+ .row-cols-sm-4 > * {
+ flex: 0 0 auto;
+ width: 25%
+ }
+
+ .row-cols-sm-5 > * {
+ flex: 0 0 auto;
+ width: 20%
+ }
+
+ .row-cols-sm-6 > * {
+ flex: 0 0 auto;
+ width: 16.6666666667%
+ }
+
+ .col-sm-auto {
+ flex: 0 0 auto;
+ width: auto
+ }
+
+ .col-sm-1 {
+ flex: 0 0 auto;
+ width: 8.33333333%
+ }
+
+ .col-sm-2 {
+ flex: 0 0 auto;
+ width: 16.66666667%
+ }
+
+ .col-sm-3 {
+ flex: 0 0 auto;
+ width: 25%
+ }
+
+ .col-sm-4 {
+ flex: 0 0 auto;
+ width: 33.33333333%
+ }
+
+ .col-sm-5 {
+ flex: 0 0 auto;
+ width: 41.66666667%
+ }
+
+ .col-sm-6 {
+ flex: 0 0 auto;
+ width: 50%
+ }
+
+ .col-sm-7 {
+ flex: 0 0 auto;
+ width: 58.33333333%
+ }
+
+ .col-sm-8 {
+ flex: 0 0 auto;
+ width: 66.66666667%
+ }
+
+ .col-sm-9 {
+ flex: 0 0 auto;
+ width: 75%
+ }
+
+ .col-sm-10 {
+ flex: 0 0 auto;
+ width: 83.33333333%
+ }
+
+ .col-sm-11 {
+ flex: 0 0 auto;
+ width: 91.66666667%
+ }
+
+ .col-sm-12 {
+ flex: 0 0 auto;
+ width: 100%
+ }
+
+ .offset-sm-0 {
+ margin-left: 0
+ }
+
+ .offset-sm-1 {
+ margin-left: 8.33333333%
+ }
+
+ .offset-sm-2 {
+ margin-left: 16.66666667%
+ }
+
+ .offset-sm-3 {
+ margin-left: 25%
+ }
+
+ .offset-sm-4 {
+ margin-left: 33.33333333%
+ }
+
+ .offset-sm-5 {
+ margin-left: 41.66666667%
+ }
+
+ .offset-sm-6 {
+ margin-left: 50%
+ }
+
+ .offset-sm-7 {
+ margin-left: 58.33333333%
+ }
+
+ .offset-sm-8 {
+ margin-left: 66.66666667%
+ }
+
+ .offset-sm-9 {
+ margin-left: 75%
+ }
+
+ .offset-sm-10 {
+ margin-left: 83.33333333%
+ }
+
+ .offset-sm-11 {
+ margin-left: 91.66666667%
+ }
+
+ .order-sm-0 {
+ -ms-flex-order: 0;
+ order: 0;
+ }
+ .order-sm-1 {
+ -ms-flex-order: 1;
+ order: 1;
+ }
+ .order-sm-2 {
+ -ms-flex-order: 2;
+ order: 2;
+ }
+ .order-sm-3 {
+ -ms-flex-order: 3;
+ order: 3;
+ }
+ .order-sm-4 {
+ -ms-flex-order: 4;
+ order: 4;
+ }
+ .order-sm-5 {
+ -ms-flex-order: 5;
+ order: 5;
+ }
+ .order-sm-6 {
+ -ms-flex-order: 6;
+ order: 6;
+ }
+ .order-sm-7 {
+ -ms-flex-order: 7;
+ order: 7;
+ }
+ .order-sm-8 {
+ -ms-flex-order: 8;
+ order: 8;
+ }
+ .order-sm-9 {
+ -ms-flex-order: 9;
+ order: 9;
+ }
+ .order-sm-10 {
+ -ms-flex-order: 10;
+ order: 10;
+ }
+ .order-sm-11 {
+ -ms-flex-order: 11;
+ order: 11;
+ }
+ .order-sm-12 {
+ -ms-flex-order: 12;
+ order: 12;
+ }
+
+ .g-sm-0, .gx-sm-0 {
+ --bs-gutter-x: 0
+ }
+
+ .g-sm-0, .gy-sm-0 {
+ --bs-gutter-y: 0
+ }
+
+ .g-sm-1, .gx-sm-1 {
+ --bs-gutter-x: 0.25rem
+ }
+
+ .g-sm-1, .gy-sm-1 {
+ --bs-gutter-y: 0.25rem
+ }
+
+ .g-sm-2, .gx-sm-2 {
+ --bs-gutter-x: 0.5rem
+ }
+
+ .g-sm-2, .gy-sm-2 {
+ --bs-gutter-y: 0.5rem
+ }
+
+ .g-sm-3, .gx-sm-3 {
+ --bs-gutter-x: 1rem
+ }
+
+ .g-sm-3, .gy-sm-3 {
+ --bs-gutter-y: 1rem
+ }
+
+ .g-sm-4, .gx-sm-4 {
+ --bs-gutter-x: 1.5rem
+ }
+
+ .g-sm-4, .gy-sm-4 {
+ --bs-gutter-y: 1.5rem
+ }
+
+ .g-sm-5, .gx-sm-5 {
+ --bs-gutter-x: 3rem
+ }
+
+ .g-sm-5, .gy-sm-5 {
+ --bs-gutter-y: 3rem
+ }
+}
+
+@media (min-width: 768px) {
+ .d-md-none {
+ display: none !important;
+ }
+ .d-md-block {
+ display: block !important;
+ }
+ .col-md {
+ flex: 1 0 0%
+ }
+
+ .row-cols-md-auto > * {
+ flex: 0 0 auto;
+ width: auto
+ }
+
+ .row-cols-md-1 > * {
+ flex: 0 0 auto;
+ width: 100%
+ }
+
+ .row-cols-md-2 > * {
+ flex: 0 0 auto;
+ width: 50%
+ }
+
+ .row-cols-md-3 > * {
+ flex: 0 0 auto;
+ width: 33.3333333333%
+ }
+
+ .row-cols-md-4 > * {
+ flex: 0 0 auto;
+ width: 25%
+ }
+
+ .row-cols-md-5 > * {
+ flex: 0 0 auto;
+ width: 20%
+ }
+
+ .row-cols-md-6 > * {
+ flex: 0 0 auto;
+ width: 16.6666666667%
+ }
+
+ .col-md-auto {
+ flex: 0 0 auto;
+ width: auto
+ }
+
+ .col-md-1 {
+ flex: 0 0 auto;
+ width: 8.33333333%
+ }
+
+ .col-md-2 {
+ flex: 0 0 auto;
+ width: 16.66666667%
+ }
+
+ .col-md-3 {
+ flex: 0 0 auto;
+ width: 25%
+ }
+
+ .col-md-4 {
+ flex: 0 0 auto;
+ width: 33.33333333%
+ }
+
+ .col-md-5 {
+ flex: 0 0 auto;
+ width: 41.66666667%
+ }
+
+ .col-md-6 {
+ flex: 0 0 auto;
+ width: 50%
+ }
+
+ .col-md-7 {
+ flex: 0 0 auto;
+ width: 58.33333333%
+ }
+
+ .col-md-8 {
+ flex: 0 0 auto;
+ width: 66.66666667%
+ }
+
+ .col-md-9 {
+ flex: 0 0 auto;
+ width: 75%
+ }
+
+ .col-md-10 {
+ flex: 0 0 auto;
+ width: 83.33333333%
+ }
+
+ .col-md-11 {
+ flex: 0 0 auto;
+ width: 91.66666667%
+ }
+
+ .col-md-12 {
+ flex: 0 0 auto;
+ width: 100%
+ }
+
+ .offset-md-0 {
+ margin-left: 0
+ }
+
+ .offset-md-1 {
+ margin-left: 8.33333333%
+ }
+
+ .offset-md-2 {
+ margin-left: 16.66666667%
+ }
+
+ .offset-md-3 {
+ margin-left: 25%
+ }
+
+ .offset-md-4 {
+ margin-left: 33.33333333%
+ }
+
+ .offset-md-5 {
+ margin-left: 41.66666667%
+ }
+
+ .offset-md-6 {
+ margin-left: 50%
+ }
+
+ .offset-md-7 {
+ margin-left: 58.33333333%
+ }
+
+ .offset-md-8 {
+ margin-left: 66.66666667%
+ }
+
+ .offset-md-9 {
+ margin-left: 75%
+ }
+
+ .offset-md-10 {
+ margin-left: 83.33333333%
+ }
+
+ .offset-md-11 {
+ margin-left: 91.66666667%
+ }
+
+ .order-md-0 {
+ -ms-flex-order: 0;
+ order: 0;
+ }
+ .order-md-1 {
+ -ms-flex-order: 1;
+ order: 1;
+ }
+ .order-md-2 {
+ -ms-flex-order: 2;
+ order: 2;
+ }
+ .order-md-3 {
+ -ms-flex-order: 3;
+ order: 3;
+ }
+ .order-md-4 {
+ -ms-flex-order: 4;
+ order: 4;
+ }
+ .order-md-5 {
+ -ms-flex-order: 5;
+ order: 5;
+ }
+ .order-md-6 {
+ -ms-flex-order: 6;
+ order: 6;
+ }
+ .order-md-7 {
+ -ms-flex-order: 7;
+ order: 7;
+ }
+ .order-md-8 {
+ -ms-flex-order: 8;
+ order: 8;
+ }
+ .order-md-9 {
+ -ms-flex-order: 9;
+ order: 9;
+ }
+ .order-md-10 {
+ -ms-flex-order: 10;
+ order: 10;
+ }
+ .order-md-11 {
+ -ms-flex-order: 11;
+ order: 11;
+ }
+ .order-md-12 {
+ -ms-flex-order: 12;
+ order: 12;
+ }
+
+ .g-md-0, .gx-md-0 {
+ --bs-gutter-x: 0
+ }
+
+ .g-md-0, .gy-md-0 {
+ --bs-gutter-y: 0
+ }
+
+ .g-md-1, .gx-md-1 {
+ --bs-gutter-x: 0.25rem
+ }
+
+ .g-md-1, .gy-md-1 {
+ --bs-gutter-y: 0.25rem
+ }
+
+ .g-md-2, .gx-md-2 {
+ --bs-gutter-x: 0.5rem
+ }
+
+ .g-md-2, .gy-md-2 {
+ --bs-gutter-y: 0.5rem
+ }
+
+ .g-md-3, .gx-md-3 {
+ --bs-gutter-x: 1rem
+ }
+
+ .g-md-3, .gy-md-3 {
+ --bs-gutter-y: 1rem
+ }
+
+ .g-md-4, .gx-md-4 {
+ --bs-gutter-x: 1.5rem
+ }
+
+ .g-md-4, .gy-md-4 {
+ --bs-gutter-y: 1.5rem
+ }
+
+ .g-md-5, .gx-md-5 {
+ --bs-gutter-x: 3rem
+ }
+
+ .g-md-5, .gy-md-5 {
+ --bs-gutter-y: 3rem
+ }
+}
+
+@media (min-width: 992px) {
+ .d-lg-none {
+ display: none !important;
+ }
+ .d-lg-block {
+ display: block !important;
+ }
+
+ .col-lg {
+ flex: 1 0 0%
+ }
+
+ .row-cols-lg-auto > * {
+ flex: 0 0 auto;
+ width: auto
+ }
+
+ .row-cols-lg-1 > * {
+ flex: 0 0 auto;
+ width: 100%
+ }
+
+ .row-cols-lg-2 > * {
+ flex: 0 0 auto;
+ width: 50%
+ }
+
+ .row-cols-lg-3 > * {
+ flex: 0 0 auto;
+ width: 33.3333333333%
+ }
+
+ .row-cols-lg-4 > * {
+ flex: 0 0 auto;
+ width: 25%
+ }
+
+ .row-cols-lg-5 > * {
+ flex: 0 0 auto;
+ width: 20%
+ }
+
+ .row-cols-lg-6 > * {
+ flex: 0 0 auto;
+ width: 16.6666666667%
+ }
+
+ .col-lg-auto {
+ flex: 0 0 auto;
+ width: auto
+ }
+
+ .col-lg-1 {
+ flex: 0 0 auto;
+ width: 8.33333333%
+ }
+
+ .col-lg-2 {
+ flex: 0 0 auto;
+ width: 16.66666667%
+ }
+
+ .col-lg-3 {
+ flex: 0 0 auto;
+ width: 25%
+ }
+
+ .col-lg-4 {
+ flex: 0 0 auto;
+ width: 33.33333333%
+ }
+
+ .col-lg-5 {
+ flex: 0 0 auto;
+ width: 41.66666667%
+ }
+
+ .col-lg-6 {
+ flex: 0 0 auto;
+ width: 50%
+ }
+
+ .col-lg-7 {
+ flex: 0 0 auto;
+ width: 58.33333333%
+ }
+
+ .col-lg-8 {
+ flex: 0 0 auto;
+ width: 66.66666667%
+ }
+
+ .col-lg-9 {
+ flex: 0 0 auto;
+ width: 75%
+ }
+
+ .col-lg-10 {
+ flex: 0 0 auto;
+ width: 83.33333333%
+ }
+
+ .col-lg-11 {
+ flex: 0 0 auto;
+ width: 91.66666667%
+ }
+
+ .col-lg-12 {
+ flex: 0 0 auto;
+ width: 100%
+ }
+
+ .offset-lg-0 {
+ margin-left: 0
+ }
+
+ .offset-lg-1 {
+ margin-left: 8.33333333%
+ }
+
+ .offset-lg-2 {
+ margin-left: 16.66666667%
+ }
+
+ .offset-lg-3 {
+ margin-left: 25%
+ }
+
+ .offset-lg-4 {
+ margin-left: 33.33333333%
+ }
+
+ .offset-lg-5 {
+ margin-left: 41.66666667%
+ }
+
+ .offset-lg-6 {
+ margin-left: 50%
+ }
+
+ .offset-lg-7 {
+ margin-left: 58.33333333%
+ }
+
+ .offset-lg-8 {
+ margin-left: 66.66666667%
+ }
+
+ .offset-lg-9 {
+ margin-left: 75%
+ }
+
+ .offset-lg-10 {
+ margin-left: 83.33333333%
+ }
+
+ .offset-lg-11 {
+ margin-left: 91.66666667%
+ }
+
+ .order-lg-0 {
+ -ms-flex-order: 0;
+ order: 0;
+ }
+ .order-lg-1 {
+ -ms-flex-order: 1;
+ order: 1;
+ }
+ .order-lg-2 {
+ -ms-flex-order: 2;
+ order: 2;
+ }
+ .order-lg-3 {
+ -ms-flex-order: 3;
+ order: 3;
+ }
+ .order-lg-4 {
+ -ms-flex-order: 4;
+ order: 4;
+ }
+ .order-lg-5 {
+ -ms-flex-order: 5;
+ order: 5;
+ }
+ .order-lg-6 {
+ -ms-flex-order: 6;
+ order: 6;
+ }
+ .order-lg-7 {
+ -ms-flex-order: 7;
+ order: 7;
+ }
+ .order-lg-8 {
+ -ms-flex-order: 8;
+ order: 8;
+ }
+ .order-lg-9 {
+ -ms-flex-order: 9;
+ order: 9;
+ }
+ .order-lg-10 {
+ -ms-flex-order: 10;
+ order: 10;
+ }
+ .order-lg-11 {
+ -ms-flex-order: 11;
+ order: 11;
+ }
+ .order-lg-12 {
+ -ms-flex-order: 12;
+ order: 12;
+ }
+
+ .g-lg-0, .gx-lg-0 {
+ --bs-gutter-x: 0
+ }
+
+ .g-lg-0, .gy-lg-0 {
+ --bs-gutter-y: 0
+ }
+
+ .g-lg-1, .gx-lg-1 {
+ --bs-gutter-x: 0.25rem
+ }
+
+ .g-lg-1, .gy-lg-1 {
+ --bs-gutter-y: 0.25rem
+ }
+
+ .g-lg-2, .gx-lg-2 {
+ --bs-gutter-x: 0.5rem
+ }
+
+ .g-lg-2, .gy-lg-2 {
+ --bs-gutter-y: 0.5rem
+ }
+
+ .g-lg-3, .gx-lg-3 {
+ --bs-gutter-x: 1rem
+ }
+
+ .g-lg-3, .gy-lg-3 {
+ --bs-gutter-y: 1rem
+ }
+
+ .g-lg-4, .gx-lg-4 {
+ --bs-gutter-x: 1.5rem
+ }
+
+ .g-lg-4, .gy-lg-4 {
+ --bs-gutter-y: 1.5rem
+ }
+
+ .g-lg-5, .gx-lg-5 {
+ --bs-gutter-x: 3rem
+ }
+
+ .g-lg-5, .gy-lg-5 {
+ --bs-gutter-y: 3rem
+ }
+}
+
+@media (min-width: 1200px) {
+ .d-xl-none {
+ display: none !important;
+ }
+ .d-xl-block {
+ display: block !important;
+ }
+ .col-xl {
+ flex: 1 0 0%
+ }
+
+ .row-cols-xl-auto > * {
+ flex: 0 0 auto;
+ width: auto
+ }
+
+ .row-cols-xl-1 > * {
+ flex: 0 0 auto;
+ width: 100%
+ }
+
+ .row-cols-xl-2 > * {
+ flex: 0 0 auto;
+ width: 50%
+ }
+
+ .row-cols-xl-3 > * {
+ flex: 0 0 auto;
+ width: 33.3333333333%
+ }
+
+ .row-cols-xl-4 > * {
+ flex: 0 0 auto;
+ width: 25%
+ }
+
+ .row-cols-xl-5 > * {
+ flex: 0 0 auto;
+ width: 20%
+ }
+
+ .row-cols-xl-6 > * {
+ flex: 0 0 auto;
+ width: 16.6666666667%
+ }
+
+ .col-xl-auto {
+ flex: 0 0 auto;
+ width: auto
+ }
+
+ .col-xl-1 {
+ flex: 0 0 auto;
+ width: 8.33333333%
+ }
+
+ .col-xl-2 {
+ flex: 0 0 auto;
+ width: 16.66666667%
+ }
+
+ .col-xl-3 {
+ flex: 0 0 auto;
+ width: 25%
+ }
+
+ .col-xl-4 {
+ flex: 0 0 auto;
+ width: 33.33333333%
+ }
+
+ .col-xl-5 {
+ flex: 0 0 auto;
+ width: 41.66666667%
+ }
+
+ .col-xl-6 {
+ flex: 0 0 auto;
+ width: 50%
+ }
+
+ .col-xl-7 {
+ flex: 0 0 auto;
+ width: 58.33333333%
+ }
+
+ .col-xl-8 {
+ flex: 0 0 auto;
+ width: 66.66666667%
+ }
+
+ .col-xl-9 {
+ flex: 0 0 auto;
+ width: 75%
+ }
+
+ .col-xl-10 {
+ flex: 0 0 auto;
+ width: 83.33333333%
+ }
+
+ .col-xl-11 {
+ flex: 0 0 auto;
+ width: 91.66666667%
+ }
+
+ .col-xl-12 {
+ flex: 0 0 auto;
+ width: 100%
+ }
+
+ .offset-xl-0 {
+ margin-left: 0
+ }
+
+ .offset-xl-1 {
+ margin-left: 8.33333333%
+ }
+
+ .offset-xl-2 {
+ margin-left: 16.66666667%
+ }
+
+ .offset-xl-3 {
+ margin-left: 25%
+ }
+
+ .offset-xl-4 {
+ margin-left: 33.33333333%
+ }
+
+ .offset-xl-5 {
+ margin-left: 41.66666667%
+ }
+
+ .offset-xl-6 {
+ margin-left: 50%
+ }
+
+ .offset-xl-7 {
+ margin-left: 58.33333333%
+ }
+
+ .offset-xl-8 {
+ margin-left: 66.66666667%
+ }
+
+ .offset-xl-9 {
+ margin-left: 75%
+ }
+
+ .offset-xl-10 {
+ margin-left: 83.33333333%
+ }
+
+ .offset-xl-11 {
+ margin-left: 91.66666667%
+ }
+
+ .order-xl-0 {
+ -ms-flex-order: 0;
+ order: 0;
+ }
+ .order-xl-1 {
+ -ms-flex-order: 1;
+ order: 1;
+ }
+ .order-xl-2 {
+ -ms-flex-order: 2;
+ order: 2;
+ }
+ .order-xl-3 {
+ -ms-flex-order: 3;
+ order: 3;
+ }
+ .order-xl-4 {
+ -ms-flex-order: 4;
+ order: 4;
+ }
+ .order-xl-5 {
+ -ms-flex-order: 5;
+ order: 5;
+ }
+ .order-xl-6 {
+ -ms-flex-order: 6;
+ order: 6;
+ }
+ .order-xl-7 {
+ -ms-flex-order: 7;
+ order: 7;
+ }
+ .order-xl-8 {
+ -ms-flex-order: 8;
+ order: 8;
+ }
+ .order-xl-9 {
+ -ms-flex-order: 9;
+ order: 9;
+ }
+ .order-xl-10 {
+ -ms-flex-order: 10;
+ order: 10;
+ }
+ .order-xl-11 {
+ -ms-flex-order: 11;
+ order: 11;
+ }
+ .order-xl-12 {
+ -ms-flex-order: 12;
+ order: 12;
+ }
+
+ .g-xl-0, .gx-xl-0 {
+ --bs-gutter-x: 0
+ }
+
+ .g-xl-0, .gy-xl-0 {
+ --bs-gutter-y: 0
+ }
+
+ .g-xl-1, .gx-xl-1 {
+ --bs-gutter-x: 0.25rem
+ }
+
+ .g-xl-1, .gy-xl-1 {
+ --bs-gutter-y: 0.25rem
+ }
+
+ .g-xl-2, .gx-xl-2 {
+ --bs-gutter-x: 0.5rem
+ }
+
+ .g-xl-2, .gy-xl-2 {
+ --bs-gutter-y: 0.5rem
+ }
+
+ .g-xl-3, .gx-xl-3 {
+ --bs-gutter-x: 1rem
+ }
+
+ .g-xl-3, .gy-xl-3 {
+ --bs-gutter-y: 1rem
+ }
+
+ .g-xl-4, .gx-xl-4 {
+ --bs-gutter-x: 1.5rem
+ }
+
+ .g-xl-4, .gy-xl-4 {
+ --bs-gutter-y: 1.5rem
+ }
+
+ .g-xl-5, .gx-xl-5 {
+ --bs-gutter-x: 3rem
+ }
+
+ .g-xl-5, .gy-xl-5 {
+ --bs-gutter-y: 3rem
+ }
+}
+
+@media (min-width: 1400px) {
+ .col-xxl {
+ flex: 1 0 0%
+ }
+
+ .row-cols-xxl-auto > * {
+ flex: 0 0 auto;
+ width: auto
+ }
+
+ .row-cols-xxl-1 > * {
+ flex: 0 0 auto;
+ width: 100%
+ }
+
+ .row-cols-xxl-2 > * {
+ flex: 0 0 auto;
+ width: 50%
+ }
+
+ .row-cols-xxl-3 > * {
+ flex: 0 0 auto;
+ width: 33.3333333333%
+ }
+
+ .row-cols-xxl-4 > * {
+ flex: 0 0 auto;
+ width: 25%
+ }
+
+ .row-cols-xxl-5 > * {
+ flex: 0 0 auto;
+ width: 20%
+ }
+
+ .row-cols-xxl-6 > * {
+ flex: 0 0 auto;
+ width: 16.6666666667%
+ }
+
+ .col-xxl-auto {
+ flex: 0 0 auto;
+ width: auto
+ }
+
+ .col-xxl-1 {
+ flex: 0 0 auto;
+ width: 8.33333333%
+ }
+
+ .col-xxl-2 {
+ flex: 0 0 auto;
+ width: 16.66666667%
+ }
+
+ .col-xxl-3 {
+ flex: 0 0 auto;
+ width: 25%
+ }
+
+ .col-xxl-4 {
+ flex: 0 0 auto;
+ width: 33.33333333%
+ }
+
+ .col-xxl-5 {
+ flex: 0 0 auto;
+ width: 41.66666667%
+ }
+
+ .col-xxl-6 {
+ flex: 0 0 auto;
+ width: 50%
+ }
+
+ .col-xxl-7 {
+ flex: 0 0 auto;
+ width: 58.33333333%
+ }
+
+ .col-xxl-8 {
+ flex: 0 0 auto;
+ width: 66.66666667%
+ }
+
+ .col-xxl-9 {
+ flex: 0 0 auto;
+ width: 75%
+ }
+
+ .col-xxl-10 {
+ flex: 0 0 auto;
+ width: 83.33333333%
+ }
+
+ .col-xxl-11 {
+ flex: 0 0 auto;
+ width: 91.66666667%
+ }
+
+ .col-xxl-12 {
+ flex: 0 0 auto;
+ width: 100%
+ }
+
+ .offset-xxl-0 {
+ margin-left: 0
+ }
+
+ .offset-xxl-1 {
+ margin-left: 8.33333333%
+ }
+
+ .offset-xxl-2 {
+ margin-left: 16.66666667%
+ }
+
+ .offset-xxl-3 {
+ margin-left: 25%
+ }
+
+ .offset-xxl-4 {
+ margin-left: 33.33333333%
+ }
+
+ .offset-xxl-5 {
+ margin-left: 41.66666667%
+ }
+
+ .offset-xxl-6 {
+ margin-left: 50%
+ }
+
+ .offset-xxl-7 {
+ margin-left: 58.33333333%
+ }
+
+ .offset-xxl-8 {
+ margin-left: 66.66666667%
+ }
+
+ .offset-xxl-9 {
+ margin-left: 75%
+ }
+
+ .offset-xxl-10 {
+ margin-left: 83.33333333%
+ }
+
+ .offset-xxl-11 {
+ margin-left: 91.66666667%
+ }
+
+ .g-xxl-0, .gx-xxl-0 {
+ --bs-gutter-x: 0
+ }
+
+ .g-xxl-0, .gy-xxl-0 {
+ --bs-gutter-y: 0
+ }
+
+ .g-xxl-1, .gx-xxl-1 {
+ --bs-gutter-x: 0.25rem
+ }
+
+ .g-xxl-1, .gy-xxl-1 {
+ --bs-gutter-y: 0.25rem
+ }
+
+ .g-xxl-2, .gx-xxl-2 {
+ --bs-gutter-x: 0.5rem
+ }
+
+ .g-xxl-2, .gy-xxl-2 {
+ --bs-gutter-y: 0.5rem
+ }
+
+ .g-xxl-3, .gx-xxl-3 {
+ --bs-gutter-x: 1rem
+ }
+
+ .g-xxl-3, .gy-xxl-3 {
+ --bs-gutter-y: 1rem
+ }
+
+ .g-xxl-4, .gx-xxl-4 {
+ --bs-gutter-x: 1.5rem
+ }
+
+ .g-xxl-4, .gy-xxl-4 {
+ --bs-gutter-y: 1.5rem
+ }
+
+ .g-xxl-5, .gx-xxl-5 {
+ --bs-gutter-x: 3rem
+ }
+
+ .g-xxl-5, .gy-xxl-5 {
+ --bs-gutter-y: 3rem
+ }
+}
+
+.d-flex {
+ display: flex !important;
+}
+
+.justify-content-center {
+ justify-content: center !important;
+}
\ No newline at end of file
diff --git a/src/styles/_default.scss b/src/styles/_default.scss
new file mode 100644
index 0000000..7472a59
--- /dev/null
+++ b/src/styles/_default.scss
@@ -0,0 +1,912 @@
+@import "_variables";
+
+html, body {
+ height: 100%;
+}
+
+body{
+ --font: var(--font-comfortaa), -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+ font-family: var(--font);
+ background-color: #ffffff;
+}
+
+
+.b-wrapper {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+}
+
+.b-content {
+ flex: 1 0 auto;
+ position: relative;
+ padding-bottom: 16px;
+
+ @media (min-width: 768px) {
+ padding-bottom: 80px;
+ }
+}
+
+.b-inner{
+ width: 100%;
+ padding-right: 16px;
+ padding-left: 16px;
+ margin-right: auto;
+ margin-left: auto;
+}
+
+@media (min-width: 768px) {
+ .b-inner {
+ max-width: 750px;
+ }
+}
+
+@media (min-width: 992px) {
+ .b-inner {
+ max-width: 990px;
+ }
+}
+
+@media (min-width: 1200px) {
+ .b-inner {
+ max-width: 1290px;
+ }
+}
+
+.title-h1 {
+ color: #2C7873;
+ @include rem(18);
+ font-style: normal;
+ font-weight: 600;
+ line-height: normal;
+
+ @media (min-width: 576px) {
+ @include rem(30);
+ }
+
+ @media (min-width: 768px) {
+ @include rem(42);
+ }
+}
+
+.title-h2 {
+ color: #6FB98F;
+ @include rem(18);
+ font-style: normal;
+ font-weight: 500;
+ line-height: 133.333%;
+
+ @media (min-width: 768px) {
+ @include rem(24);
+ }
+}
+
+.title-h3 {
+ color: #6FB98F;
+ @include rem(18);
+ font-style: normal;
+ font-weight: 500;
+ line-height: 133.333%;
+}
+
+
+.b-article {
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ border-radius: 16px;
+ background: linear-gradient(147deg, #E4F5FA 1.06%, #FFF 100%);
+ box-shadow: 0px 4px 8px 0px rgba(102, 165, 173, 0.16);
+
+ &__image {
+ width: 100%;
+ height: 197px;
+
+ img {
+ object-fit: cover;
+ width: 100%;
+ height: 100%;
+ display: block;
+ }
+ }
+
+ &__inner {
+ padding: 8px;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ justify-content: space-between;
+ flex: 1 0 auto;
+ height: 122px;
+ }
+
+ &__title {
+ color: #003B46;
+ @include rem(15);
+ font-style: normal;
+ font-weight: 600;
+ line-height: 120%;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ width: 100%;
+ overflow: hidden;
+ }
+
+ &__text {
+ display: -webkit-box;
+ -webkit-line-clamp: 3;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ color: #66A5AD;
+ @include rem(13);
+ font-style: normal;
+ font-weight: 500;
+ line-height: 123.077%;
+ flex: 1 0 auto;
+ }
+
+ &__link {
+ color: #FF8A00;
+ @include rem(15);
+ font-style: normal;
+ font-weight: 400;
+ line-height: 160%;
+ display: inline-flex;
+ align-items: center;
+ text-decoration: none;
+ }
+}
+
+.b-popular {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+
+ &__image {
+ width: 100%;
+ height: 200px;
+ background: lightgray 50%;
+ border-radius: 16px;
+ overflow: hidden;
+
+ img {
+ object-fit: cover;
+ width: 100%;
+ height: 100%;
+ display: block;
+ }
+ }
+
+ &__inner {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 4px;
+ height: 46px;
+ }
+
+ &__title {
+ overflow: hidden;
+ color: #003B46;
+ text-align: center;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ @include rem(18);
+ font-style: normal;
+ font-weight: 600;
+ line-height: 133.333%;
+ width: 100%;
+ }
+
+ &__wrap-link {
+ display: flex;
+ gap: 4px;
+ color: #C4DFE6;
+ @include rem(15);
+ font-style: normal;
+ font-weight: 600;
+ line-height: 120%;
+ }
+
+ &__link {
+ text-decoration: none;
+ color: #2C7873;
+ @include rem(15);
+ font-style: normal;
+ font-weight: 600;
+ line-height: 120%;
+ }
+}
+
+//lang button
+.b-lang-button {
+ border-radius: 8px;
+ background: #66A5AD;
+ display: inline-flex;
+ color: #fff;
+ padding: 8px;
+ gap: 10px;
+ outline: none;
+ border: none;
+ cursor: pointer;
+}
+
+//switcher
+.base-switcher {
+ position: relative;
+ display: block;
+ width: 48px;
+ height: 24px;
+ cursor: pointer;
+
+ &__circle {
+ background: #C4DFE6;
+ width: 24px;
+ height: 24px;
+ border-radius: 50%;
+ top: 0;
+ left: 0;
+ position: absolute;
+ transition: left .25s ease, background .25s ease;
+ }
+
+ &__line {
+ background-color: #F8F8F7;
+ border: none;
+ border-radius: 24px;
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 48px;
+ height: 24px;
+ }
+
+ &__input {
+ opacity: 0;
+ &:checked {
+ + .base-switcher__line {
+
+ + .base-switcher__circle {
+ background: #66A5AD;
+ left: 24px;
+ }
+ }
+ }
+ }
+}
+
+.b-filter {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ width: 100%;
+
+ &__inner {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ width: 100%;
+ margin-bottom: 16px;
+ }
+
+ &__range {
+ width: 100%;
+ margin-bottom: 16px;
+ }
+
+ &__item {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 15px 0;
+ width: 100%;
+ gap: 16px;
+ }
+
+ &__title {
+ color: $black;
+ @include rem(15);
+ font-style: normal;
+ font-weight: 400;
+ line-height: 160%;
+ }
+}
+
+.base-btn {
+ user-select: none;
+ outline: none;
+ border: none;
+ text-decoration: none;
+ width: 100%;
+ cursor: pointer;
+ border-radius: 8px;
+ box-shadow: 0px 2px 4px 0px rgba(252, 214, 70, 0.16);
+ display: flex;
+ gap: 10px;
+ height: 54px;
+ padding: 8px 31px;
+ justify-content: center;
+ align-items: center;
+ @include rem(15);
+ font-style: normal;
+ font-weight: 400;
+ line-height: 160%;
+
+ @media (max-width: 767px) {
+ padding: 8px;
+ height: 40px;
+ }
+}
+
+.btn-edit {
+ user-select: none;
+ outline: none;
+ border: none;
+ text-decoration: none;
+ width: 100%;
+ cursor: pointer;
+ border-radius: 8px;
+ background: #66A5AD;
+ box-shadow: 0px 2px 4px 0px rgba(102, 165, 173, 0.32);
+ display: flex;
+ gap: 10px;
+ height: 54px;
+ padding: 8px 31px;
+ justify-content: center;
+ align-items: center;
+ color: $white;
+ @include rem(15);
+ font-style: normal;
+ font-weight: 400;
+ line-height: 160%;
+}
+
+.btn-add {
+ user-select: none;
+ outline: none;
+ text-decoration: none;
+ width: 100%;
+ cursor: pointer;
+ border-radius: 8px;
+ background: $white;
+ border: 1px solid #66A5AD;
+ box-shadow: none;
+ display: flex;
+ gap: 10px;
+ height: 54px;
+ padding: 8px 31px;
+ justify-content: center;
+ align-items: center;
+ color: #66A5AD;
+ @include rem(15);
+ font-style: normal;
+ font-weight: 400;
+ line-height: 160%;
+}
+
+.btn-cancel {
+ user-select: none;
+ outline: none;
+ text-decoration: none;
+ width: 100%;
+ cursor: pointer;
+ border-radius: 8px;
+ background: $white;
+ border: 1px solid #D93E5C;
+ box-shadow: none;
+ display: flex;
+ gap: 10px;
+ height: 54px;
+ padding: 8px 31px;
+ justify-content: center;
+ align-items: center;
+ color: #D93E5C;
+ @include rem(15);
+ font-style: normal;
+ font-weight: 400;
+ line-height: 160%;
+}
+
+.btn-apply {
+ user-select: none;
+ outline: none;
+ border: none;
+ text-decoration: none;
+ width: 100%;
+ cursor: pointer;
+ border-radius: 8px;
+ background: #FFBD00;
+ box-shadow: 0px 2px 4px 0px rgba(252, 214, 70, 0.16);
+ display: flex;
+ gap: 10px;
+ height: 54px;
+ padding: 8px 31px;
+ justify-content: center;
+ align-items: center;
+ color: #003B46;
+ @include rem(15);
+ font-style: normal;
+ font-weight: 400;
+ line-height: 160%;
+}
+
+.btn-back {
+ user-select: none;
+ outline: none;
+ border: none;
+ text-decoration: none;
+ width: 100%;
+ cursor: pointer;
+ border-radius: 8px;
+ background: #2C7873;
+ box-shadow: 0px 2px 4px 0px rgba(252, 214, 70, 0.16);
+ display: flex;
+ gap: 10px;
+ height: 54px;
+ padding: 8px 31px;
+ justify-content: center;
+ align-items: center;
+ color: $white;
+ @include rem(15);
+ font-style: normal;
+ font-weight: 400;
+ line-height: 160%;
+}
+
+.btn-video {
+ user-select: none;
+ outline: none;
+ border: none;
+ text-decoration: none;
+ width: 100%;
+ cursor: pointer;
+ border-radius: 8px;
+ background: #DFF5FB;
+ box-shadow: 0px 2px 4px 0px rgba(252, 214, 70, 0.16);
+ display: flex;
+ gap: 10px;
+ height: 54px;
+ padding: 8px 31px;
+ justify-content: center;
+ align-items: center;
+ color: #003B46;
+ @include rem(15);
+ font-style: normal;
+ font-weight: 400;
+ line-height: 160%;
+}
+
+//
+.card-profile {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ padding-bottom: 8px;
+ border-bottom: 1px solid #C4DFE6;
+
+ &__header {
+ display: flex;
+ padding-bottom: 8px;
+ align-items: center;
+ gap: 16px;
+ align-self: stretch;
+
+ &__portrait {
+ width: 86px;
+ height: 86px;
+ border-radius: 16px;
+ border: 2px solid #FFF;
+ background: lightgray 50%;
+ box-shadow: 0px 8px 16px 0px rgba(102, 165, 173, 0.32);
+ overflow: hidden;
+
+ img {
+ object-fit: cover;
+ width: 100%;
+ height: 100%;
+ display: block;
+ border-radius: 16px;
+ }
+ }
+
+ &__inner {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 4px;
+ flex: 1 0 0;
+ }
+
+ &__name {
+ overflow: hidden;
+ color: #003B46;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ @include rem(18);
+ font-style: normal;
+ font-weight: 600;
+ line-height: 133.333%;
+ }
+
+ &__price {
+ color: #6FB98F;
+ @include rem(15);
+ font-style: normal;
+ font-weight: 600;
+ line-height: 120%;
+
+ span {
+ color: #B7B7B7;
+ }
+ }
+ }
+
+ &__skills {}
+
+ &__title {
+ color: #003B46;
+ @include rem(18);
+ font-style: normal;
+ font-weight: 600;
+ line-height: 133.333%;
+ }
+
+ &__subtitle {
+ color: #003B46;
+ @include rem(15);
+ font-style: normal;
+ font-weight: 600;
+ line-height: 120%;
+ }
+
+ &__desc {
+ color: #66A5AD;
+ @include rem(13);
+ font-style: normal;
+ font-weight: 500;
+ line-height: 123.077%;
+ display: -webkit-box;
+ -webkit-line-clamp: 3;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ }
+
+ &__footer {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+
+ a {
+ text-decoration: none;
+ color: #FF8A00;
+ @include rem(15);
+ font-style: normal;
+ font-weight: 400;
+ line-height: 160%;
+ display: inline-flex;
+ align-items: center;
+ }
+ }
+}
+
+.skills__list {
+ display: flex;
+ flex-flow: wrap;
+ align-items: flex-start;
+ gap: 4px;
+ align-self: stretch;
+
+ &__item {
+ height: 22px;
+ border-radius: 4px;
+ background: #2C7873;
+ display: inline-flex;
+ padding: 4px;
+ color: #FFF;
+ @include rem(12);
+ font-style: normal;
+ font-weight: 300;
+ line-height: 116.667%;
+ align-items: center;
+ }
+
+ &__more {
+ height: 22px;
+ display: inline-flex;
+ align-items: center;
+ padding: 4px;
+ border-radius: 4px;
+ border: 1px solid #2C7873;
+ color: #2C7873;
+ @include rem(12);
+ font-style: normal;
+ font-weight: 300;
+ line-height: 116.667%;
+ }
+}
+
+.pagination {
+ display: flex;
+ gap: 8px;
+
+ .page-item {
+ border-radius: 8px;
+ display: inline-flex;
+ height: 40px;
+ width: 40px;
+
+ .page-link {
+ border-radius: 8px;
+ border: 1px solid #2C7873;
+ display: inline-flex;
+ padding: 8px 16px;
+ justify-content: center;
+ align-items: center;
+ background: $white;
+ height: 40px;
+ width: 40px;
+ color: #2C7873;
+ text-align: center;
+ font-family: 'Inter', sans-serif;
+ @include rem(16);
+ font-style: normal;
+ font-weight: 400;
+ line-height: 150%;
+ text-decoration: none;
+ }
+
+ &.active {
+ .page-link {
+ background: #2C7873;
+ color: $white;
+ }
+ }
+ }
+}
+
+.expert-card {
+ position: relative;
+ border-radius: 16px;
+ background: #66A5AD;
+ padding: 16px;
+ flex-flow: wrap;
+ display: flex;
+
+ &__avatar {
+ width: 80px;
+ height: 80px;
+ border-radius: 50%;
+ overflow: hidden;
+ border: 2px solid $white;
+ background: lightgray 50%;
+ box-shadow: 0px 8px 16px 0px rgba(102, 165, 173, 0.32);
+
+ img {
+ object-fit: cover;
+ width: 100%;
+ height: 100%;
+ display: block;
+ border-radius: 16px;
+ }
+ }
+
+ &__inner {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ padding-left: 16px;
+ margin-bottom: 16px;
+ }
+
+ &__wrap-btn {
+ flex: 0 0 100%;
+ display: flex;
+ gap: 16px;
+
+ .btn-apply,
+ .btn-video {
+ @media (max-width: 767px) {
+ padding: 8px;
+ height: 40px;
+ }
+ }
+ }
+
+ &__title {
+ color: $white;
+ @include rem(18);
+ font-style: normal;
+ font-weight: 500;
+ line-height: normal;
+ }
+
+ &__info {
+ color: $white;
+ @include rem(13);
+ font-style: normal;
+ font-weight: 500;
+ line-height: 123.077%;
+ display: flex;
+ flex-flow: column;
+ gap: 8px;
+
+ i {
+ display: none;
+ font-style: normal;
+ }
+ }
+
+ &__rating {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ flex-flow: wrap;
+
+ span {
+ display: block;
+ color: #2C7873;
+ @include rem(13);
+ font-style: normal;
+ font-weight: 500;
+ line-height: 123.077%;
+ }
+
+ img {
+ width: 120px;
+ object-fit: cover;
+ }
+ }
+
+ &__wrap {
+ display: flex;
+ }
+
+ @media (min-width: 992px) {
+ padding: 38px 24px 38px 24px;
+ flex-flow: nowrap;
+ justify-content: space-between;
+
+ &__avatar {
+ width: 220px;
+ height: 220px;
+ position: absolute;
+ top: 24px;
+ left: 24px;
+ }
+
+ &__inner {
+ padding-left: 244px;
+ gap: 16px;
+ margin-bottom: 0;
+ }
+
+ &__wrap-btn {
+ flex: 0 0 auto;
+ width: 168px;
+
+ .btn-video {
+ position: absolute;
+ padding: 0;
+ gap: 0;
+ left: 24px;
+ bottom: -32px;
+ width: 64px;
+ height: 64px;
+ font-size: 0;
+ color: transparent;
+ border-radius: 50%;
+ background: $white;
+ box-shadow: 0px 2px 4px 0px rgba(102, 165, 173, 0.32);
+
+ img {
+ width: 32px;
+ height: 32px;
+ object-fit: cover;
+ }
+
+ }
+ }
+
+ &__title {
+ @include rem(48);
+ }
+
+ &__info {
+ @include rem(18);
+ flex-flow: nowrap;
+ gap: 16px;
+ i {
+ display: block;
+ }
+ }
+
+ &__rating {
+ @include rem(15);
+ gap: 16px;
+
+ img {
+ width: 168px;
+ }
+ }
+ }
+}
+
+.base-text {
+ color: #66A5AD;
+ @include rem(13);
+ font-style: normal;
+ font-weight: 500;
+ line-height: 123.077%;
+ margin-bottom: 16px;
+}
+
+
+.offers-list {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ margin-bottom: 16px;
+}
+
+.form-link {
+ display: flex;
+ justify-content: center;
+
+ a {
+ color: #003B46;
+ @include rem(18);
+ font-style: normal;
+ font-weight: 600;
+ line-height: 133.333%;
+ }
+
+ @media (min-width: 768px) {
+ justify-content: flex-start;
+ }
+}
+
+.breadcrumb {
+ margin-bottom: 16px;
+ list-style: none;
+ display: flex;
+ align-items: center;
+ flex-flow: wrap;
+
+ .breadcrumb-item {
+ color: #6FB98F;
+ @include rem(18);
+ font-style: normal;
+ font-weight: 500;
+ line-height: 133.333%;
+
+ a {
+ color: #2C7873;
+ }
+
+ +.breadcrumb-item {
+ padding-left: 0.5rem;
+
+ &:before {
+ float: left;
+ padding-right: 0.5rem;
+ color: #6FB98F;
+ content: "/";
+ }
+ }
+ }
+
+ @media (min-width: 768px) {
+ margin-bottom: 24px;
+
+ .breadcrumb-item {
+ @include rem(24);
+ }
+ }
+}
+
+
+
+
+
diff --git a/src/styles/_footer.scss b/src/styles/_footer.scss
new file mode 100644
index 0000000..9ab2f0a
--- /dev/null
+++ b/src/styles/_footer.scss
@@ -0,0 +1,150 @@
+@import "_variables";
+
+.b-footer {
+ background: #DFF5FB;
+ position: relative;
+ padding-top: 16px;
+ padding-bottom: 16px;
+
+ &:after {
+ content: "";
+ position: absolute;
+ background-image: url(/images/wave-footer.svg);
+ background-position: center;
+ height: 16px;
+ width: 100%;
+ top: -15px;
+ overflow: hidden;
+ left: 0;
+ background-size: contain;
+
+ @media (max-width: 400px) {
+ background-size: cover;
+ }
+
+ @media (min-width: 768px) {
+ height: 80px;
+ top: -79px;
+ background-size: 1920px 80px;
+ }
+ }
+
+ &__logo {
+ margin-right: auto;
+ width: 104px;
+ height: 38px;
+ display: block;
+ text-decoration: none;
+
+ img {
+ width: 100%;
+ height: auto;
+ object-fit: cover;
+ }
+ }
+
+ &__row {
+ display: flex;
+ gap: 24px;
+ }
+
+ &__coll,
+ &__coll-2 {
+ display: flex;
+
+ gap: 16px;
+
+ &__item {
+ display: flex;
+ gap: 16px;
+ }
+ }
+
+ &__social {
+ display: flex;
+ gap: 16px;
+ margin-left: auto;
+ }
+
+ &__link {
+ display: inline-flex;
+ gap: 8px;
+ text-decoration: none;
+ color: #003B46;
+ @include rem(16);
+ font-style: normal;
+ font-weight: 700;
+ line-height: 150%;
+ white-space: nowrap;
+ }
+
+ &__text {
+ display: inline-flex;
+ gap: 8px;
+ color: #003B46;
+ @include rem(16);
+ font-style: normal;
+ font-weight: 700;
+ line-height: 150%;
+ }
+
+ @media (max-width: 767px) {
+ &__logo {
+ margin-bottom: 16px;
+ }
+ &__row {
+ flex-direction: column;
+ gap: 16px;
+ }
+
+ &__coll {
+ flex-direction: column;
+ &__item {
+ flex-direction: column;
+ gap: 16px;
+ }
+ }
+ }
+
+
+ @media (min-width: 768px) {
+ padding-bottom: 32px;
+
+ &__row {
+ gap: 18px;
+ }
+
+ &__coll,
+ &__coll-2 {
+ gap: 16px 18px;
+ flex-direction: column;
+
+ &__item {
+ gap: 18px;
+ }
+ }
+ }
+
+ @media (min-width: 992px) {
+ &__logo {
+ margin-right: auto;
+ margin-left: 14px;
+ width: 178px;
+ height: 64px;
+ }
+
+ &__row {
+ gap: 24px;
+ }
+
+ &__coll,
+ &__coll-2 {
+ gap: 16px 24px;
+ flex-direction: column;
+
+ &__item {
+ gap: 24px;
+ }
+ }
+ }
+}
diff --git a/src/styles/_form.scss b/src/styles/_form.scss
new file mode 100644
index 0000000..59c1737
--- /dev/null
+++ b/src/styles/_form.scss
@@ -0,0 +1,144 @@
+@import "_variables";
+
+.form-field {
+ position: relative;
+
+ &.date,
+ &.password-hide,
+ &.password-show {
+ input {
+ padding-right: 32px !important;
+ }
+ }
+
+ &.date {
+ &:before {
+ content: "";
+ position: absolute;
+ right: 8px;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 24px;
+ height: 24px;
+ background-image: url(/images/calendar-clear-outline.svg);
+ background-position: 50%;
+ background-repeat: no-repeat;
+ }
+ }
+
+ &.password-hide {
+ &:before {
+ content: "";
+ position: absolute;
+ right: 8px;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 24px;
+ height: 24px;
+ background-image: url(/images/eye-off.svg);
+ background-position: 50%;
+ background-repeat: no-repeat;
+ }
+ }
+
+ &.password-show {
+ &:before {
+ content: "";
+ position: absolute;
+ right: 8px;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 24px;
+ height: 24px;
+ background-image: url(/images/eye-outline.svg);
+ background-position: 50%;
+ background-repeat: no-repeat;
+ }
+ }
+}
+
+input {
+ &.base-input {
+ height: 54px;
+ width: 100%;
+ padding: 8px 8px 8px 16px;
+ border-radius: 8px;
+ background: #F8F8F7;
+ border: 1px solid #F8F8F7;
+ outline: none;
+ color: $black;
+ @include rem(15);
+ font-style: normal;
+ font-weight: 400;
+ line-height: 160%;
+
+ }
+}
+
+textarea {
+ &.base-textarea {
+ height: 120px;
+ width: 100%;
+ padding: 15px 16px;
+ border-radius: 8px;
+ background: #F8F8F7;
+ border: 1px solid #F8F8F7;
+ outline: none;
+ color: $black;
+ @include rem(15);
+ font-style: normal;
+ font-weight: 400;
+ line-height: 160%;
+
+ }
+}
+
+.user-avatar {
+ display: flex;
+ gap: 16px;
+ align-items: center;
+
+ &__edit {
+ position: relative;
+ width: 100px;
+ height: 100px;
+ border-radius: 16px;
+ border: 2px solid #FFF;
+ box-shadow: 0px 8px 16px 0px rgba(102, 165, 173, 0.32);
+ background-image: url(/images/user-avatar.png);
+ background-position: 50%;
+ background-repeat: no-repeat;
+
+ input {
+ width: 0.1px;
+ height: 0.1px;
+ opacity: 0;
+ overflow: hidden;
+ position: absolute;
+ z-index: -1;
+ }
+
+ label {
+ position: absolute;
+ right: -8px;
+ bottom: -8px;
+ cursor: pointer;
+ display: block;
+ width: 42px;
+ height: 42px;
+ border-radius: 8px;
+ background-color: #66A5AD;
+ background-image: url(/images/camera.svg);
+ background-position: 50%;
+ background-repeat: no-repeat;
+ }
+ }
+
+ &__text {
+ color: #66A5AD;
+ @include rem(13);
+ font-style: normal;
+ font-weight: 500;
+ line-height: 123.077%;
+ }
+}
diff --git a/src/styles/_header.scss b/src/styles/_header.scss
new file mode 100644
index 0000000..6745d43
--- /dev/null
+++ b/src/styles/_header.scss
@@ -0,0 +1,99 @@
+@import "_variables";
+
+.b-header {
+ .b-inner {
+ display: flex;
+ justify-content: space-between;
+ padding-top: 16px;
+ align-items: center;
+
+ @media (max-width: 991px) {
+ gap: 24px;
+ }
+ }
+
+ &__logo {
+ width: 166px;
+ height: 60px;
+ margin-right: auto;
+
+ img {
+ width: 100%;
+ height: auto;
+ object-fit: cover;
+ }
+
+ @media (max-width: 991px) {
+ width: 104px;
+ height: 38px;
+ }
+ }
+
+ &__menu-open {
+ display: none;
+ cursor: pointer;
+
+ @media (max-width: 991px) {
+ display: flex;
+ }
+ }
+
+ &__nav {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ margin-right: 16px;
+
+ &__list {
+ display: none;
+ align-items: center;
+ gap: 16px;
+ height: inherit;
+ list-style:none;
+ margin: 0;
+ padding: 0;
+
+ li {
+ height: 100%;
+ }
+
+ a {
+ font-style: normal;
+ font-weight: 600;
+ line-height: normal;
+ color: #66A5AD;
+ height: 100%;
+ display: inline-flex;
+ align-items: center;
+ text-decoration: none;
+ }
+
+ .text {
+ font-style: normal;
+ font-weight: 600;
+ line-height: normal;
+ color: #003B46;
+ height: 100%;
+ display: inline-flex;
+ align-items: center;
+ }
+
+ &__line {
+ color: #C4C4C4;
+ @include rem(16);
+ font-style: normal;
+ font-weight: 600;
+ line-height: normal;
+ }
+
+ @media (min-width: 992px) {
+ display: flex;
+
+ a,
+ .text {
+ @include rem(16);
+ }
+ }
+ }
+ }
+}
diff --git a/src/styles/_main.scss b/src/styles/_main.scss
new file mode 100644
index 0000000..fe5c6b0
--- /dev/null
+++ b/src/styles/_main.scss
@@ -0,0 +1,619 @@
+@import "_variables";
+
+.main-top {
+ padding-top: 16px;
+ overflow: hidden;
+ max-height: 570px;
+ position: relative;
+
+ @media (min-width: 576px) {
+ max-height: 600px;
+ }
+
+ @media (min-width: 768px) {
+ max-height: 700px;
+ }
+
+ @media (min-width: 992px) {
+ min-height: 516px;
+ max-height: 555px;
+
+ &:after {
+ content: "";
+ width: 28px;
+ height: 28px;
+ background: #4566E8;
+ filter: blur(4px);
+ position: absolute;
+ border-radius: 50%;
+ z-index: 1;
+ top: 30px;
+ right: 106px;
+ }
+
+ &:before {
+ content: "";
+ width: 65px;
+ height: 65px;
+ background: #7CE6EE;
+ filter: blur(16px);
+ position: absolute;
+ border-radius: 50%;
+ left: calc(((100% - 990px) / 2) / 2);
+ top: 32px;
+ }
+ }
+
+ @media (min-width: 1200px) {
+ min-height: 555px;
+ &:before {
+ left: calc(((100% - 1290px) / 2) / 2);
+ top: 32px;
+ }
+ }
+
+
+ .b-inner {
+ position: relative;
+
+ &:before {
+ @media (min-width: 992px) {
+ content: "";
+ width: 65px;
+ height: 65px;
+ background: #7CE6EE;
+ filter: blur(16px);
+ position: absolute;
+ border-radius: 50%;
+ z-index: 1;
+ left: 500px;
+ top: 300px;
+ }
+ @media (min-width: 1200px) {
+ left: 520px;
+ top: 310px;
+ }
+ }
+
+ &:after {
+ @media (min-width: 992px) {
+ width: 65px;
+ height: 65px;
+ background: #D280FF;
+ filter: blur(6.5px);
+ position: absolute;
+ border-radius: 50%;
+ z-index: 1;
+ top: 110px;
+ right: -2px;
+ content: "";
+ }
+
+ @media (min-width: 1200px) {
+ top: 320px;
+ right: -2%;
+ }
+
+ @media (min-width: 1420px) {
+ top: 320px;
+ right: -8%;
+ }
+
+ @media (min-width: 1770px) {
+ top: 320px;
+ right: -18%;
+ }
+ }
+ }
+
+ .title-h1 {
+ text-align: center;
+ margin-bottom: 16px;
+ padding-top: 8px;
+
+ @media (min-width: 768px) {
+ padding-top: 24px;
+ }
+
+ @media (min-width: 992px) {
+ max-width: 690px;
+ text-align: left;
+ padding-top: 70px;
+ margin-bottom: 24px;
+ }
+ }
+
+ &__wrap-text {
+ margin-bottom: 24px;
+ text-align: center;
+
+ @media (min-width: 992px) {
+ max-width: 530px;
+ text-align: left;
+ }
+
+ @media (min-width: 1200px) {
+ max-width: 580px;
+ }
+ @media (min-width: 1450px) {
+ max-width: 690px;
+ }
+ }
+
+ &__text {
+ color: #2C7873;
+ @include rem(13);
+ font-style: normal;
+ font-weight: 500;
+ line-height: 133.333%;
+
+ @media (min-width: 576px) {
+ @include rem(16);
+ }
+
+ @media (min-width: 768px) {
+ @include rem(24);
+ }
+
+ @media (max-width: 1249px) {
+ br {
+ display: none;
+ }
+ }
+ }
+
+ &__wrap-btn {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ margin-bottom: 24px;
+ justify-content: center;
+ position: relative;
+
+ @media (min-width: 992px) {
+ gap: 24px;
+ justify-content: flex-start;
+ }
+
+ @media (min-width: 1200px) {
+ &:after {
+ content: "";
+ width: 41px;
+ height: 41px;
+ background: #FCFF3D;
+ position: absolute;
+ border-radius: 50%;
+ z-index: 1;
+ left: -63px;
+ bottom: -75px;
+ }
+ }
+ }
+
+ &__btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ height: 50px;
+ padding: 12px;
+ @include rem(14);
+ border-radius: 24px;
+ gap: 6px;
+ color: $white;
+ font-style: normal;
+ font-weight: 700;
+ line-height: 133.333%;
+ text-decoration: none;
+
+ &--android {
+ background: #D280FF;
+ }
+
+ &--apple {
+ background: #5AADCC;
+ }
+
+ img {
+ width: 24px;
+ height: 24px;
+ object-fit: cover;
+ }
+
+ .line {
+ background: #D9D9D9;
+ width: 1px;
+ height: 24px;
+ }
+
+ @media (min-width: 430px) {
+ height: 56px;
+ padding: 16px;
+ @include rem(18);
+ border-radius: 24px;
+ min-width: 191px;
+ gap: 8px;
+ }
+
+ @media (min-width: 768px) {
+ height: 64px;
+ padding: 11px 15px 11px 24px;
+ @include rem(24);
+ border-radius: 62px;
+ justify-content: flex-start;
+ .line {
+ height: 42px;
+ }
+
+ img {
+ width: 32px;
+ height: 32px;
+ }
+ }
+ }
+
+ &__img {
+ width: 397px;
+ height: 403px;
+ left: 50%;
+ position: relative;
+ transform: translateX(-50%);
+
+ img {
+ width: 100%;
+ height: auto;
+ object-fit: cover;
+ }
+
+ @media (max-width: 991px) {
+ &:before {
+ content: "";
+ position: absolute;
+ width: 65px;
+ height: 65px;
+ background: #7CE6EE;
+ filter: blur(16px);
+ border-radius: 50%;
+ top: 255px;
+ z-index: 2;
+ left: -20px;
+ }
+
+ &:after {
+ content: "";
+ width: 65px;
+ height: 65px;
+ background: #D280FF;
+ filter: blur(6.5px);
+ position: absolute;
+ border-radius: 50%;
+ z-index: 1;
+ right: -35px;
+ top: 25px;
+ }
+ }
+
+ @media (min-width: 992px) {
+ width: 415px;
+ height: 421px;
+ right: 0;
+ top: 90px;
+ left: auto;
+ position: absolute;
+ transform: none;
+ }
+
+ @media (min-width: 1200px) {
+ top: 0;
+ right: 0;
+ width: 615px;
+ height: 624px;
+ }
+
+ @media (min-width: 1420px) {
+ width: 615px;
+ height: 624px;
+ right: -44px;
+ top: 0;
+ }
+ }
+}
+
+.main-articles {
+ position: relative;
+ background: #DFF5FB;
+ padding-bottom: 4px;
+
+ &:before {
+ content: "";
+ position: absolute;
+ background-image: url(/images/wave-top.svg);
+ background-position: center;
+ height: 86px;
+ width: 100%;
+ top: -86px;
+ overflow: hidden;
+ background-size: 893px 87px;
+
+ @media (min-width: 768px) {
+ height: 97px;
+ width: 100%;
+ top: -96px;
+ background-size: 992px 97px;
+ }
+
+ @media (min-width: 992px) {
+ height: 150px;
+ width: 100%;
+ top: -149px;
+ background-size: 1538px 150px;
+ }
+
+ @media (min-width: 1200px) {
+ height: 187px;
+ top: -186px;
+ background-size: cover;
+ }
+ }
+
+ &:after {
+ content: "";
+ position: absolute;
+ background-image: url(/images/wave-2.svg);
+ background-position: center;
+ height: 16px;
+ width: 100%;
+ bottom: -15px;
+ overflow: hidden;
+ left: 0;
+ background-size: contain;
+ background-color: $white;
+
+ @media (min-width: 768px) {
+ height: 80px;
+ bottom: -79px;
+ width: 100%;
+ background-size: 1920px 80px;
+ }
+ }
+
+ .title-h2 {
+ margin-bottom: 16px;
+ }
+}
+
+.main-popular {
+ padding-top: 32px;
+ padding-bottom: 16px;
+
+ .title-h2 {
+ margin-bottom: 16px;
+ }
+
+ &__row {
+ display: flex;
+ gap: 16px;
+ }
+
+ @media (max-width: 400px) {
+ &__coll {
+ width: 100%;
+ display: none;
+ &:first-child {
+ display: block;
+ }
+ }
+ }
+
+ @media (min-width: 576px) {
+ &__coll {
+ width: calc(50% - 8px);
+ }
+ }
+
+ @media (min-width: 768px) {
+ padding-top: 104px;
+ padding-bottom: 24px;
+
+ &__coll {
+ width: calc(33.33333333% - 8px);
+ }
+ }
+
+ @media (min-width: 992px) {
+ &__coll {
+ width: calc(20% - 8px);
+ }
+ }
+
+ @media (min-width: 1200px) {
+ &__coll {
+ width: calc(16.66666667% - 8px);
+ }
+ }
+}
+
+.main-find {
+ position: relative;
+ overflow: hidden;
+ padding-bottom: 25px;
+
+ .b-inner {
+ position: relative;
+
+ &:before {
+
+ @media (min-width: 992px) {
+ content: "";
+ width: 65px;
+ height: 65px;
+ background: #7CE6EE;
+ filter: blur(16px);
+ position: absolute;
+ border-radius: 50%;
+ z-index: 1;
+ top: 379px;
+ right: -6%;
+ }
+ @media (min-width: 1200px) {
+ top: 379px;
+ right: -10%;
+ }
+ }
+
+ &:after {
+ @media (min-width: 992px) {
+ width: 65px;
+ height: 65px;
+ background: #D280FF;
+ filter: blur(6.5px);
+ position: absolute;
+ border-radius: 50%;
+ z-index: 1;
+ bottom: -5px;
+ right: -2px;
+ content: "";
+ }
+
+ @media (min-width: 1200px) {
+
+ right: -2%;
+ }
+ }
+ }
+
+ @media (min-width: 768px) {
+ padding-bottom: 16px;
+ }
+
+ @media (min-width: 992px) {
+ &:before {
+ content: "";
+ width: 51px;
+ height: 51px;
+ background: #EC8238;
+ filter: blur(6.5px);
+ position: absolute;
+ border-radius: 50%;
+ left: 20px;
+ top: 923px;
+ }
+ }
+
+ @media (min-width: 1200px) {
+ &:before {
+ left: 126px;
+ top: 923px;
+ }
+ }
+
+ &__top {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 16px;
+ }
+
+ .open-filter {
+ display: flex;
+ cursor: pointer;
+ width: 24px;
+ height: 24px;
+
+ @media (min-width: 992px) {
+ display: none;
+ }
+ }
+
+
+ .b-filter {
+ padding-right: 8px;
+ position: relative;
+
+ @media (min-width: 992px) {
+ &:before {
+ content: "";
+ width: 65px;
+ height: 65px;
+ background: #D280FF;
+ filter: blur(6.5px);
+ position: absolute;
+ border-radius: 50%;
+ left: -126px;
+ top: 300px;
+ }
+
+ &:after {
+ content: "";
+ width: 65px;
+ height: 65px;
+ background: #F5F944;
+ filter: blur(6.5px);
+ position: absolute;
+ border-radius: 50%;
+ left: 51px;
+ bottom: -110px;
+ }
+ }
+ }
+
+ &__search {
+ width: 100%;
+ display: none;
+ height: 54px;
+ gap: 16px;
+ margin-bottom: 16px;
+
+ select,
+ input {
+ width: 100%;
+ height: 100%;
+ }
+
+ &__input {
+ height: 100%;
+ flex: 1 0 0%;
+ }
+
+ &__sort {
+ width: 200px;
+ height: 100%;
+ }
+
+ &__language {
+ width: 150px;
+ height: 100%;
+ }
+
+ @media (min-width: 992px) {
+ display: flex;
+ &__sort {
+ width: 120px;
+ }
+
+ &__language {
+ width: 120px;
+ }
+ }
+
+ @media (min-width: 1200px) {
+ &__sort {
+ width: 200px;
+ }
+
+ &__language {
+ width: 150px;
+ }
+ }
+
+ .btn-apply {
+ width: 97px;
+ }
+ }
+}
+
+.search-result {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ margin-bottom: 16px;
+}
diff --git a/src/styles/_menu-mobile.scss b/src/styles/_menu-mobile.scss
new file mode 100644
index 0000000..1dbe94b
--- /dev/null
+++ b/src/styles/_menu-mobile.scss
@@ -0,0 +1,118 @@
+@import "_variables";
+
+.menu-mobile {
+ background-color: #66A5AD;
+ width: 100%;
+ max-width: 430px;
+ position: fixed;
+ left: 0;
+ top: 0;
+ height: 100vh;
+ z-index: 9999;
+
+ &__header {
+ background-color: rgba(255, 255, 255, 0.20);
+ display: flex;
+ padding: 24px 16px;
+ align-items: center;
+ gap: 16px;
+
+ &__avatar {
+ box-shadow: 0px 2px 4px 0px rgba(102, 165, 173, 0.32);
+ width: 64px;
+ height: 64px;
+ border-radius: 50%;
+ overflow: hidden;
+ }
+
+ &__nav {
+ list-style:none;
+ margin: 0;
+ display: flex;
+ gap: 8px;
+
+ &__line {
+ color: #C4C4C4;
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 600;
+ line-height: normal;
+ }
+
+ a {
+ font-style: normal;
+ font-weight: 600;
+ @include rem(16);
+ line-height: normal;
+ color: $white;
+ display: inline-flex;
+ align-items: center;
+ text-decoration: none;
+ }
+ }
+ }
+
+ &__inner {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ overflow-y: auto;
+ }
+
+ &__body {
+ flex: 1 0 auto;
+
+ }
+
+ &__list {
+ display: flex;
+ flex-direction: column;
+ padding: 0;
+ height: inherit;
+ list-style:none;
+ margin: 0;
+
+ li {
+ width: 100%;
+ padding: 0 16px;
+
+ &:last-child {
+ a {
+ border: none;
+ }
+ }
+
+ &.chosen {
+ padding: 0;
+ a {
+ border-color: #2C7873;
+ padding-left: 16px;
+ padding-right: 16px;
+ color: #D93E5C;
+ }
+ }
+ }
+
+ a {
+ width: 100%;
+ font-style: normal;
+ font-weight: 600;
+ @include rem(16);
+ line-height: normal;
+ color: $white;
+ display: inline-flex;
+ align-items: center;
+ text-decoration: none;
+ padding: 16px 0;
+ border-bottom: 1px solid rgba(252, 214, 70, 0.16);
+
+ &.active {
+ color: #FFBD00;
+ }
+ }
+ }
+
+ @media (max-width: 991px) {
+ //display: block;
+ }
+}
\ No newline at end of file
diff --git a/src/styles/_message.scss b/src/styles/_message.scss
new file mode 100644
index 0000000..abb0f8a
--- /dev/null
+++ b/src/styles/_message.scss
@@ -0,0 +1,161 @@
+@import "_variables";
+
+.b-message {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ position: relative;
+ overflow: hidden;
+ height: calc(100% - 40px);
+
+ @media (min-width: 768px) {
+ height: calc(100% - 56px);
+ }
+
+ &__inner {
+ flex-grow: 1;
+ height: 0;
+ position: relative;
+ overflow-y: auto;
+ }
+
+ &__list {
+ padding-top: 18px;
+ margin-bottom: 16px;
+ display: flex;
+ justify-content: flex-start;
+
+ &--me {
+ justify-content: flex-end;
+ .b-message__item {
+ flex-direction: row-reverse;
+
+ .b-message__text {
+ border-radius: 8px 8px 0px 8px;
+ }
+ }
+ }
+ }
+
+ &__item {
+ display: flex;
+ align-items: flex-end;
+ gap: 8px;
+ justify-content: flex-start;
+ position: revert;
+ width: 100%;
+ max-width: 85%;
+
+ .date {
+ position: absolute;
+ top: -17px;
+ left: 0;
+ color: #66A5AD;
+ @include rem(13);
+ font-style: normal;
+ font-weight: 500;
+ line-height: 123.077%;
+ }
+
+ }
+
+ &__avatar {
+ width: 36px;
+ min-width: 36px;
+ height: 36px;
+ overflow: hidden;
+ border-radius: 50%;
+ background: lightgray 50%;
+ box-shadow: 0px 8px 16px 0px rgba(102, 165, 173, 0.32);
+
+ img {
+ object-fit: cover;
+ width: 100%;
+ height: 100%;
+ display: block;
+ }
+ }
+
+ &__text {
+ background: #DFF5FB;
+ padding: 8px 16px;
+ border-radius: 8px 8px 8px 0px;
+ position: relative;
+ }
+
+ &__form {
+ height: 72px;
+ width: 100%;
+ border-radius: 48px;
+ border: 1px solid #6FB98F;
+ background: #FFF;
+ display: flex;
+ padding: 8px;
+ align-items: center;
+
+ textarea {
+ width: calc(100% - 136px);
+ height: 24px;
+ padding: 0 8px;
+ border-radius: 0;
+ background: transparent;
+ border: none;
+ outline: none;
+ color: #66A5AD;
+ @include rem(15);
+ font-style: normal;
+ font-weight: 400;
+ line-height: 160%;
+ }
+ }
+
+ &__btn {
+ user-select: none;
+ outline: none;
+ border: none;
+ text-decoration: none;
+ width: 56px;
+ cursor: pointer;
+ border-radius: 50%;
+ box-shadow: none;
+ display: flex;
+ height: 56px;
+ padding: 8px ;
+ justify-content: center;
+ align-items: center;
+ background-color: #6FB98F;
+ background-image: url(/images/paper-plane-outline.svg);
+ background-position: 50%;
+ background-repeat: no-repeat;
+ }
+
+ &__upload-file {
+ position: relative;
+ cursor: pointer;
+ width: 24px;
+ height: 24px;
+ background-image: url(/images/attach.svg);
+ background-position: 50%;
+ background-repeat: no-repeat;
+ margin-right: 16px;
+
+ input {
+ width: 0.1px;
+ height: 0.1px;
+ opacity: 0;
+ overflow: hidden;
+ position: absolute;
+ z-index: -1;
+ }
+ }
+
+ &__microphone {
+ cursor: pointer;
+ width: 24px;
+ height: 24px;
+ background-image: url(/images/mic-outline.svg);
+ background-position: 50%;
+ background-repeat: no-repeat;
+ margin-right: 16px;
+ }
+}
diff --git a/src/styles/_pages.scss b/src/styles/_pages.scss
new file mode 100644
index 0000000..8518e3f
--- /dev/null
+++ b/src/styles/_pages.scss
@@ -0,0 +1,1373 @@
+@import "_variables";
+
+.b-page {
+ padding-top: 24px;
+
+ &__back {
+ margin-bottom: 16px;
+ }
+
+ .expert-card {
+ }
+
+ .title-h2 {
+ margin-bottom: 16px;
+ padding-top: 16px;
+ }
+
+ .title-h3 {
+ margin-bottom: 8px;
+ }
+
+ .skills__list,
+ .sertific {
+ margin-bottom: 16px;
+ }
+
+ .wrap-btn-prise {
+ display: flex;
+ flex-flow: column;
+ gap: 8px;
+ align-items: center;
+
+ &__text {
+ color: #6FB98F;
+ @include rem(24);
+ font-style: normal;
+ font-weight: 500;
+ line-height: 133.333%;
+
+ span {
+ color: #B7B7B7;
+ @include rem(18);
+ font-style: normal;
+ font-weight: 600;
+ line-height: 133.333%;
+ }
+ }
+ }
+
+ .case-list {
+ .skills__list,
+ .base-text {
+ margin-bottom: 8px;
+ }
+
+ +.case-list {
+ padding-top: 16px;
+ border-top: 1px solid #C4DFE6;
+ }
+ }
+
+
+ @media (min-width: 576px) {
+ &__back {
+ max-width: 245px;
+ }
+
+ .wrap-btn-prise {
+ flex-flow: nowrap;
+ gap: 16px;
+
+ a {
+ max-width: 300px;
+ }
+ }
+ }
+
+ @media (min-width: 768px) {
+ &__back {
+ margin-bottom: 24px;
+ }
+
+ .title-h2 {
+ padding-top: 24px;
+ }
+
+ .expert-card {
+ margin-bottom: 32px;
+ }
+
+ .offers-list {
+ margin-bottom: 72px;
+ }
+ }
+}
+
+.b-news {
+
+ &__header {
+ position: relative;
+ padding-top: 24px;
+
+ .b-inner {
+ position: relative;
+ }
+
+
+ .title-h1 {
+ text-align: center;
+ margin-bottom: 16px;
+ }
+
+ .wrap-text {
+ text-align: center;
+ margin-bottom: 16px;
+
+ p {
+ color: #2C7873;
+ @include rem(13);
+ font-style: normal;
+ font-weight: 500;
+ line-height: 133.333%;
+
+ @media (min-width: 576px) {
+ @include rem(16);
+ }
+
+ @media (min-width: 768px) {
+ @include rem(24);
+ }
+
+ @media (max-width: 1249px) {
+ br {
+ display: none;
+ }
+ }
+ }
+ }
+
+ &__img {
+ width: 398px;
+ height: 368px;
+ left: 50%;
+ position: relative;
+ transform: translateX(-50%);
+
+ @media (max-width: 400px) {
+ width: 100%;
+ height: auto;
+ }
+
+ img {
+ width: 100%;
+ height: auto;
+ object-fit: cover;
+ }
+ }
+
+ @media (min-width: 768px) {
+ padding-top: 38px;
+ }
+
+ @media (min-width: 992px) {
+ padding-top: 0;
+ min-height: 445px;
+ .title-h1 {
+ max-width: 580px;
+ padding-top: 110px;
+ margin-bottom: 32px;
+ }
+
+ .wrap-text {
+ max-width: 555px;
+ position: relative;
+
+ &:before {
+ content: "";
+ width: 65px;
+ height: 65px;
+ background: #F5F944;
+ filter: blur(6.5px);
+ position: absolute;
+ border-radius: 50%;
+ z-index: 1;
+ bottom: -103px;
+ left: 32px;
+ }
+ }
+
+ &__img {
+ position: absolute;
+ left: auto;
+ right: 0;
+ top: 24px;
+ width: 474px;
+ height: 465px;
+ transform: none;
+ }
+ }
+
+ @media (min-width: 1200px) {
+ &:before {
+ content: "";
+ width: 28px;
+ height: 28px;
+ background: #4566E8;
+ filter: blur(4px);
+ position: absolute;
+ border-radius: 50%;
+ z-index: 1;
+ top: -65px;
+ left: 160px;
+ }
+ &:after {
+ width: 65px;
+ height: 65px;
+ background: #D280FF;
+ filter: blur(6.5px);
+ position: absolute;
+ border-radius: 50%;
+ z-index: 1;
+ top: -100px;
+ right: 164px;
+ content: "";
+ }
+
+ .title-h1 {
+ max-width: 800px;
+ }
+
+ .wrap-text {
+ max-width: 800px;
+ }
+ }
+ }
+
+ &__filter {
+ position: relative;
+
+ @media (min-width: 992px) {
+ &:before {
+ content: "";
+ width: 65px;
+ height: 65px;
+ background: #F5F944;
+ filter: blur(6.5px);
+ position: absolute;
+ border-radius: 50%;
+ z-index: 1;
+ bottom: 15px;
+ right: 16px;
+ }
+ }
+ }
+
+ .wrap-filter {
+ display: flex;
+ flex-flow: wrap;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+ position: relative;
+
+ .filter-item {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 62px;
+ border: 1px solid #003B46;
+ height: 40px;
+ padding: 8px 16px;
+ color: #003B46;
+ @include rem(16);
+ font-style: normal;
+ font-weight: 700;
+ line-height: 133.333%;
+ text-decoration: none;
+
+ &:hover,
+ &.active {
+ color: $white;
+ background-color: #003B46;
+ }
+ }
+
+ @media (min-width: 768px) {
+ gap: 16px;
+
+ .filter-item {
+ height: 64px;
+ padding: 16px 24px;
+ @include rem(24);
+ }
+ }
+ }
+
+ &__result-list {
+ position: relative;
+ padding-top: 27px;
+ overflow: hidden;
+
+ @media (min-width: 768px) {
+ padding-top: 42px;
+ margin-bottom: 56px;
+ }
+
+ .b-inner {
+ position: relative;
+
+ @media (min-width: 1200px) {
+ &:before {
+ content: "";
+ width: 51px;
+ height: 51px;
+ background: #EC8238;
+ filter: blur(6.5px);
+ position: absolute;
+ border-radius: 50%;
+ z-index: 1;
+ top: 240px;
+ left: -140px;
+ }
+ &:after {
+ width: 65px;
+ height: 65px;
+ background: #D280FF;
+ filter: blur(6.5px);
+ position: absolute;
+ border-radius: 50%;
+ z-index: 1;
+ top: 516px;
+ right: -88px;
+ content: "";
+ }
+ }
+ }
+ }
+
+
+}
+
+.news-list {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ position: relative;
+
+ @media (min-width: 992px) {
+ gap: 24px;
+
+ &:after {
+ width: 65px;
+ height: 65px;
+ background: #D280FF;
+ filter: blur(6.5px);
+ position: absolute;
+ border-radius: 50%;
+ z-index: -1;
+ bottom: 200px;
+ left: -33px;
+ content: "";
+ }
+ }
+}
+
+.news-item {
+ padding-bottom: 16px;
+ border-bottom: 1px solid #66A5AD;
+ display: flex;
+ gap: 16px;
+ flex-flow: column;
+
+ &:last-child {
+ border-bottom: none;
+ }
+
+ &__inner {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: space-between;
+ }
+
+ &__image {
+ height: 214px;
+ width: 100%;
+ border-radius: 16px;
+ overflow: hidden;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ object-position: top;
+ }
+ }
+
+ &__title {
+ color: #2C7873;
+ @include rem(18);
+ font-style: normal;
+ font-weight: 600;
+ line-height: 133.333%;
+ margin-bottom: 16px;
+ }
+
+ &__badge {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 16px;
+ height: 24px;
+ padding: 4px 8px;
+ color: $white;
+ background-color: #2C7873;
+ @include rem(14);
+ font-style: normal;
+ font-weight: 500;
+ line-height: normal;
+ margin-bottom: 16px;
+ }
+
+ &__text {
+ color: #003B46;
+ @include rem(13);
+ font-style: normal;
+ font-weight: 500;
+ line-height: 123.077%;
+ margin-bottom: 16px;
+ display: -webkit-box;
+ -webkit-line-clamp: 7;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ }
+
+ &__info {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 16px;
+ width: 100%;
+
+ @media (max-width: 400px) {
+ flex-flow: wrap;
+ gap: 8px;
+ }
+
+ &__author {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+
+ img {
+ display: block;
+ overflow: hidden;
+ border-radius: 50%;
+ width: 48px;
+ min-width: 48px;
+ height: 48px;
+ object-fit: cover;
+ }
+
+ &__inner {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ }
+ }
+
+ &__name {
+ color: #2C7873;
+ @include rem(16);
+ font-style: normal;
+ font-weight: 700;
+ line-height: normal;
+ }
+
+ &__date {
+ color: #66A5AD;
+ @include rem(14);
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+ }
+
+ &__counter {
+ display: flex;
+ gap: 16px;
+ }
+
+ &__share,
+ &__like {
+ display: flex;
+ gap: 4px;
+ align-items: center;
+ color: #003B46;
+ @include rem(18);
+ font-style: normal;
+ font-weight: 500;
+ line-height: normal;
+ }
+ }
+
+ @media (min-width: 768px) {
+ flex-flow: nowrap;
+
+ &__image {
+ width: 300px;
+ min-width: 300px;
+ height: auto;
+ }
+
+ &__title,
+ &__text {
+ margin-bottom: 8px;
+ }
+
+ &__badge {
+ margin-bottom: 8px;
+ }
+ }
+
+ @media (min-width: 992px) {
+ gap: 24px;
+ flex-flow: nowrap;
+
+ &__image {
+ width: 380px;
+ min-width: 380px;
+ }
+
+ &__title {
+ @include rem(22);
+ margin-bottom: 8px;
+ }
+
+ &__text {
+ @include rem(16);
+ -webkit-line-clamp: 4;
+ }
+ }
+}
+
+.b-news-page {
+ position: relative;
+ padding-bottom: 16px;
+ padding-top: 24px;
+ overflow: hidden;
+
+ &__title {
+ color: #2C7873;
+ @include rem(18);
+ font-style: normal;
+ font-weight: 600;
+ line-height: 133.333%;
+ margin-bottom: 16px;
+ }
+
+ .news-item__badge{
+ margin-bottom: 16px;
+ }
+
+ &__text {
+ color: #2C7873;
+ @include rem(13);
+ font-style: normal;
+ font-weight: 500;
+ line-height: 123.077%;
+ margin-bottom: 16px;
+ }
+
+ &__image {
+ width: 100%;
+ overflow: hidden;
+ border-radius: 16px;
+ height: 300px;
+ margin-bottom: 16px;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+ }
+
+ .title-h2 {
+ padding-top: 16px;
+ margin-bottom: 16px;
+ }
+
+ &__inner {
+ position: relative;
+
+ @media (min-width: 1200px) {
+ &:before {
+ content: "";
+ width: 65px;
+ height: 65px;
+ background: #F5F944;
+ filter: blur(6.5px);
+ position: absolute;
+ border-radius: 50%;
+ z-index: 1;
+ top: 535px;
+ right: -190px;
+ }
+ &:after {
+ width: 65px;
+ height: 65px;
+ background: #D280FF;
+ filter: blur(6.5px);
+ position: absolute;
+ border-radius: 50%;
+ z-index: 1;
+ top: 560px;
+ left: -130px;
+ content: "";
+ }
+ }
+ }
+
+ @media (min-width: 768px) {
+ padding-bottom: 65px;
+
+ &__title {
+ @include rem(32);
+ }
+
+ &__text {
+ @include rem(16);
+ }
+ }
+
+ @media (min-width: 1200px) {
+ &:before {
+ content: "";
+ width: 28px;
+ height: 28px;
+ background: #4566E8;
+ filter: blur(4px);
+ position: absolute;
+ border-radius: 50%;
+ z-index: 1;
+ top: -65px;
+ left: 160px;
+ }
+ &:after {
+ width: 65px;
+ height: 65px;
+ background: #D280FF;
+ filter: blur(6.5px);
+ position: absolute;
+ border-radius: 50%;
+ z-index: 1;
+ top: -100px;
+ right: 164px;
+ content: "";
+ }
+ }
+}
+
+.page-search {
+ position: relative;
+ padding-top: 24px;
+ padding-bottom: 16px;
+
+ .main-find__top {
+ display: none;
+ }
+
+
+ @media (min-width: 768px) {
+ padding-bottom: 55px;
+
+ .main-find__top {
+ display: flex;
+ }
+ }
+
+ @media (min-width: 992px) {
+ .main-find {
+ .b-inner {
+ &:after {
+ top: 50%;
+ bottom: auto;
+ transform: translateY(-50%);
+ }
+ }
+ }
+ }
+
+ @media (min-width: 1200px) {
+ &:after {
+ width: 28px;
+ height: 28px;
+ background: #4566E8;
+ filter: blur(4px);
+ position: absolute;
+ border-radius: 50%;
+ z-index: 1;
+ top: -10px;
+ right: 106px;
+ content: "";
+ }
+ }
+}
+
+.page-account {
+ padding-top: 24px;
+ padding-bottom: 24px;
+ height: calc(100% - 52px);
+
+ @media (min-width: 768px) {
+ height: calc(100% - 80px);
+ }
+
+ &__inner,
+ .b-inner,
+ .row,
+ [class*="col-"] {
+ height: 100%;
+ }
+
+ .title-h2 {
+ margin-bottom: 16px;
+ }
+
+ .base-text,
+ .title-h3 {
+ margin-bottom: 8px;
+ }
+
+ @media (min-width: 992px) {
+ &__inner {
+ padding-left: 8px;
+ }
+ }
+}
+
+.list-sidebar {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+
+ &__item {
+ border-bottom: 1px solid #C4DFE6;
+ width: 100%;
+
+ &:last-child {
+ border-bottom: none;
+
+ a {
+ color: #D93E5C;
+ }
+ }
+ }
+
+ .count {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ padding: 6px 8px 4px 8px;
+ border-radius: 16px;
+ background: #66A5AD;
+ color: $white;
+ @include rem(12);
+ font-style: normal;
+ font-weight: 300;
+ line-height: 116.667%;
+ height: 22px;
+ }
+
+ a {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ height: 49px;
+ gap: 8px;
+ color: #003B46;
+ @include rem(18);
+ font-style: normal;
+ font-weight: 600;
+ line-height: 133.333%;
+ text-decoration: none;
+ padding-right: 32px;
+ position: relative;
+
+ &:before {
+ content: "";
+ position: absolute;
+ right: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 24px;
+ height: 24px;
+ background-image: url(/images/arrow-sidebar.svg);
+ background-position: 50%;
+ background-repeat: no-repeat;
+ }
+
+
+ &.active {
+ color: #66A5AD;
+ padding-right: 0;
+
+ &:before {
+ display: none;
+ }
+ }
+ }
+}
+
+.tabs-session {
+ display: none;
+ align-items: center;
+ gap: 16px;
+ margin-bottom: 16px;
+
+ @media (min-width: 992px) {
+ display: flex;
+ }
+
+ &__item {
+ cursor: pointer;
+ height: 48px;
+ padding-bottom: 16px;
+ position: relative;
+ display: flex;
+ gap: 10px;
+ justify-content: center;
+ color: #66A5AD;
+ @include rem(24);
+ font-style: normal;
+ font-weight: 300;
+ line-height: 133.333%;
+ align-items: center;
+ width: calc(33.33333333% - 8px);
+
+ .count {
+ height: 22px;
+ border-radius: 8px;
+ background: #D93E5C;
+ display: flex;
+ padding: 4px;
+ justify-content: center;
+ align-items: center;
+ color: $white;
+ @include rem(12);
+ font-style: normal;
+ font-weight: 300;
+ line-height: normal;
+ }
+
+ &:before{
+ content: "";
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ height: 8px;
+ border-radius: 8px;
+ }
+
+ &.active {
+ color: #6FB98F;
+ &:before{
+ background: #2C7873;
+ }
+ }
+ }
+}
+
+.filter-session {
+ display: flex;
+ flex-flow: wrap;
+ gap: 8px;
+ margin-bottom: 16px;
+
+ &__item {
+ height: 54px;
+ width: calc(50% - 4px);
+
+ &--type {
+ display: none;
+ }
+ }
+
+ select {
+ width: 100%;
+ height: 100%;
+ }
+
+ @media (max-width: 991px) {
+ gap: 16px;
+ &__item {
+ width: calc(50% - 8px);
+ &--type {
+ display: block;
+ width: 100%;
+ }
+ }
+ }
+}
+
+.list-session {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ margin-bottom: 16px;
+
+ .card-profile {
+ &__header {
+ gap: 8px;
+
+ &__title {
+ color: #2C7873;
+ @include rem(15);
+ font-style: normal;
+ font-weight: 600;
+ line-height: 120%;
+ }
+
+ &__date {
+ color: #2C7873;
+ @include rem(12);
+ font-style: normal;
+ font-weight: 300;
+ line-height: 116.667%;
+
+ &.chosen {
+ color: #D93E5C;
+ }
+ }
+ }
+ }
+}
+
+.list-notifications {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+
+}
+
+.b-notifications {
+ display: flex;
+ flex-direction: column;
+ padding-left: 24px;
+ position: relative;
+ gap: 4px;
+ padding-bottom: 16px;
+ border-bottom: 1px solid #C4DFE6;
+
+ &:last-child {
+ border-bottom: none;
+ }
+
+ &:before{
+ content: "";
+ position: absolute;
+ left: 0;
+ top: 0;
+ bottom: 16px;
+ width: 8px;
+ height: auto;
+ border-radius: 8px;
+ }
+
+ &.primary {
+ &:before {
+ border-radius: 8px;
+ background: #6FB98F;
+ }
+ }
+
+ &.danger {
+ &:before {
+ border-radius: 8px;
+ background: #D93E5C;
+ }
+ }
+
+ &__title {
+ overflow: hidden;
+ color: #003B46;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ @include rem(18);
+ font-style: normal;
+ font-weight: 600;
+ line-height: 133.333%;
+ }
+
+ &__text {
+ color: #66A5AD;
+ @include rem(13);
+ font-style: normal;
+ font-weight: 500;
+ line-height: 123.077%;
+ }
+
+ &__date {
+ color: #B7B7B7;
+ @include rem(12);
+ font-style: normal;
+ font-weight: 500;
+ line-height: 116.667%;
+ }
+
+ &__inner {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ }
+
+ &__read {
+ color: #6FB98F;
+ @include rem(15);
+ font-style: normal;
+ font-weight: 500;
+ line-height: 150%;
+ text-decoration: none;
+ }
+
+ &__delete {
+ color: #D93E5C;
+ @include rem(15);
+ font-style: normal;
+ font-weight: 500;
+ line-height: 150%;
+ text-decoration: none;
+ }
+}
+
+.form-settings {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+}
+
+.messages-session {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ margin-bottom: 16px;
+
+ .card-profile {
+ &__header {
+ gap: 8px;
+
+ &__title {
+ color: #2C7873;
+ @include rem(15);
+ font-style: normal;
+ font-weight: 600;
+ line-height: 120%;
+ }
+
+ &__date {
+ color: #2C7873;
+ @include rem(12);
+ font-style: normal;
+ font-weight: 300;
+ line-height: 116.667%;
+ }
+
+ &__name {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+
+ .count {
+ border-radius: 8px;
+ background: #D93E5C;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ height: 22px;
+ min-width: 22px;
+ padding: 4px;
+ color: $white;
+ @include rem(12);
+ font-style: normal;
+ font-weight: 300;
+ line-height: normal;
+ }
+ }
+ }
+ }
+}
+
+.b-info {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ align-items: center;
+
+ .base-text {
+ text-align: center;
+ color: #2C7873;
+ }
+
+ &__title {
+ color: #2C7873;
+ @include rem(18);
+ font-style: normal;
+ font-weight: 600;
+ line-height: 133.333%;
+ text-align: center;
+ }
+}
+
+.image-info {
+ display: flex;
+ justify-content: center;
+
+ img {
+ width: 146px;
+ height: 146px;
+ object-fit: cover;
+ }
+
+}
+
+.coaching-info {
+ display: flex;
+ flex-flow: column;
+ justify-content: space-between;
+ gap: 24px;
+ margin-bottom: 24px;
+
+ .card-profile {
+ border: none;
+ &__header {
+ gap: 8px;
+
+ &__title {
+ color: #6FB98F;
+ @include rem(15);
+ font-style: normal;
+ font-weight: 600;
+ line-height: 120%;
+ }
+ }
+ }
+
+ &__wrap-btn {
+ display: flex;
+ gap: 16px;
+ }
+
+ @media (min-width: 768px) {
+ flex-flow: nowrap;
+ gap: 10px;
+
+ &__wrap-btn {
+ display: flex;
+ gap: 10px;
+ width: 340px;
+ }
+ }
+}
+
+.coaching-section {
+ margin-bottom: 24px;
+
+ .base-text {
+ margin-bottom: 0;
+ }
+
+ &__desc {
+ border-radius: 16px;
+ background: #EFFCFF;
+ padding: 16px;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+
+ .title-h3 {
+ color: #2C7873;
+ }
+
+ .base-text {
+ color: #003B46;
+ }
+ }
+}
+
+.form-offer {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+
+ .title-h3,
+ .title-h2 {
+ margin-bottom: 0;
+ }
+}
+
+.coaching-offer {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+
+ &__header {
+ display: flex;
+ justify-content: space-between;
+ gap: 10px;
+ }
+
+ &__title {
+ color: #2C7873;
+ @include rem(18);
+ font-style: normal;
+ font-weight: 600;
+ line-height: 133.333%;
+ }
+
+ &__wrap-btn {
+ display: flex;
+ gap: 10px;
+
+ a {
+ @include rem(15);
+ font-style: normal;
+ font-weight: 400;
+ line-height: 160%;
+
+ &.link-edit {
+ color: #66A5AD;
+ }
+
+ &.link-remove {
+ color: #D93E5C;
+ }
+ }
+ }
+
+ &__price {
+ color: #6FB98F;
+ @include rem(15);
+ font-style: normal;
+ font-weight: 600;
+ line-height: 120%;
+
+ span {
+ color: #B7B7B7;
+ }
+ }
+
+ &__desc {
+ color: #66A5AD;
+ @include rem(13);
+ font-style: normal;
+ font-weight: 500;
+ line-height: 123.077%;
+ }
+}
+
+.timezone {
+ width: 100%;
+ height: 108px;
+ background-color: #2C7873;
+ background-image: url(/images/timezone.svg);
+ background-position: 99% 50%;
+ background-repeat: no-repeat;
+ padding: 16px;
+
+ &__title {
+ color: #FFBD00;
+ @include rem(12);
+ font-style: normal;
+ font-weight: 300;
+ line-height: 116.667%;
+ }
+}
+
+.schedule {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+
+ .separator {
+ width: 100%;
+ height: 1px;
+ background: #C4DFE6;
+ }
+
+ &__inner{
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ width: 100%;
+ }
+
+ .title-h3,
+ .title-h2,
+ .base-text {
+ margin-bottom: 0;
+ }
+
+ &__wrap {
+ display: flex;
+ gap: 8px;
+
+ .btn-cancel,
+ .btn-edit {
+ height: 40px;
+ }
+ }
+
+ .btn-delete {
+ cursor: pointer;
+ border-radius: 8px;
+ border: 1px solid #D93E5C;
+ display: flex;
+ width: 54px;
+ height: 54px;
+ background-image: url(/images/close.svg);
+ background-position: 50%;
+ background-repeat: no-repeat;
+ }
+
+ &__add-file {
+ position: relative;
+
+ input {
+ width: 0.1px;
+ height: 0.1px;
+ opacity: 0;
+ overflow: hidden;
+ position: absolute;
+ z-index: -1;
+ }
+
+ label {
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ height: 54px;
+ width: 100%;
+ padding: 8px 8px 8px 16px;
+ border-radius: 8px;
+ background: #F8F8F7;
+ border: 1px solid #F8F8F7;
+ outline: none;
+ color: rgba($black, .3);
+ @include rem(15);
+ font-style: normal;
+ font-weight: 400;
+ line-height: 160%;
+ position: relative;
+
+ &:before{
+ content: "";
+ position: absolute;
+ background-image: url(/images/attach-form.svg);
+ background-position: 50%;
+ background-repeat: no-repeat;
+ width: 24px;
+ height: 24px;
+ right: 8px;
+ top: 50%;
+ transform: translateY(-50%);
+ }
+
+ }
+ }
+
+}
diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss
new file mode 100644
index 0000000..80fa7b1
--- /dev/null
+++ b/src/styles/_reset.scss
@@ -0,0 +1,68 @@
+html, body, div, span, h1, h2, h3, h4, h5, h6, p, em, img, strong, sub, sup, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, table, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ outline: 0;
+ vertical-align: baseline;
+ background: transparent;
+ font-size: 100%;
+ font-family: var(--font);
+}
+
+
+a {
+ margin:0;
+ padding:0;
+ font-size:100%;
+ vertical-align:baseline;
+ background-color: transparent;
+ -webkit-text-decoration-skip: objects;
+ outline:none;
+ text-decoration: none;
+ color: #fff;
+}
+
+a:active, a:hover {
+ outline-width: 0;
+ text-decoration: none;
+}
+
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+td, td img {
+ vertical-align: top;
+}
+input, select, button, textarea {
+ margin: 0;
+ font-size: 100%;
+ outline: none;
+}
+input[type="text"], input[type="password"], textarea {
+ padding: 0;
+}
+input[type="checkbox"] {
+ vertical-align: bottom;
+}
+input[type="radio"] {
+ vertical-align: text-bottom;
+}
+sub {
+ vertical-align: sub;
+ font-size: smaller;
+}
+sup {
+ vertical-align: super;
+ font-size: smaller;
+}
+article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
+ display:block;
+}
+
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
new file mode 100644
index 0000000..7240b9e
--- /dev/null
+++ b/src/styles/_variables.scss
@@ -0,0 +1,13 @@
+//font-size
+@mixin rem($size) {
+ font-size: $size/16*1rem;
+}
+
+.w-100 {
+ width: 100% !important;
+}
+
+
+//color
+$white: #ffffff;
+$black: #000000;
diff --git a/src/styles/style.scss b/src/styles/style.scss
new file mode 100644
index 0000000..10c8b40
--- /dev/null
+++ b/src/styles/style.scss
@@ -0,0 +1,13 @@
+@import "_variables.scss";
+@import "_reset.scss";
+@import "_default.scss";
+@import "_header.scss";
+@import "_menu-mobile.scss";
+@import "_main.scss";
+@import "_footer.scss";
+@import "_cols.scss";
+@import "_pages.scss";
+@import "_form.scss";
+@import "_message.scss";
+
+
diff --git a/src/types/experts.ts b/src/types/experts.ts
new file mode 100644
index 0000000..debbff2
--- /dev/null
+++ b/src/types/experts.ts
@@ -0,0 +1,7 @@
+export type Filter = Record;
+
+export type AdditionalFilter = {
+ text?: string;
+ sort?: string;
+ language?: string[];
+};
diff --git a/src/app/[locale]/account/information/page.tsx b/src/app/[locale]/[userId]/information/page.tsx
similarity index 100%
rename from src/app/[locale]/account/information/page.tsx
rename to src/app/[locale]/[userId]/information/page.tsx
diff --git a/src/app/[locale]/account/layout.tsx b/src/app/[locale]/[userId]/layout.tsx
similarity index 100%
rename from src/app/[locale]/account/layout.tsx
rename to src/app/[locale]/[userId]/layout.tsx
diff --git a/src/app/[locale]/global.css b/src/app/[locale]/global.css
deleted file mode 100644
index 49f1bb1..0000000
--- a/src/app/[locale]/global.css
+++ /dev/null
@@ -1,8 +0,0 @@
-html, body {
- height: 100%;
-}
-
-body {
- font-family: var(--font-comfortaa), -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
- background-color: #ffffff;
-}
diff --git a/src/app/[locale]/error.tsx b/src/app/error.tsx
similarity index 100%
rename from src/app/[locale]/error.tsx
rename to src/app/error.tsx
diff --git a/src/app/[locale]/layout.tsx b/src/app/layout.tsx
similarity index 76%
rename from src/app/[locale]/layout.tsx
rename to src/app/layout.tsx
index d1f6bce..0f6c214 100644
--- a/src/app/[locale]/layout.tsx
+++ b/src/app/layout.tsx
@@ -4,9 +4,11 @@ import type { Metadata } from 'next';
import { Comfortaa, Inter } from 'next/font/google';
import { notFound } from 'next/navigation';
import { ConfigProvider } from 'antd';
+import StyledRegistry from '../../lib/StyleRegistry';
import StyledComponentsRegistry from '../../lib/AntdRegistry';
import { ALLOWED_LOCALES } from '../../constants/locale';
-import './global.css'
+import theme from '../../constants/theme';
+import '../../styles/style.scss';
type RootLayoutProps = {
children: ReactNode;
@@ -43,11 +45,13 @@ export default function RootLayout({ children, params: { locale } }: RootLayoutP
return (
-
+
+ );
+};
diff --git a/src/components/Experts/Filter.tsx b/src/components/Experts/Filter.tsx
new file mode 100644
index 0000000..ae97220
--- /dev/null
+++ b/src/components/Experts/Filter.tsx
@@ -0,0 +1,183 @@
+'use client';
+
+import React, { useCallback, useState } from 'react';
+import { List, Switch, Slider } from 'antd';
+import styled from 'styled-components';
+import { FilterType, INITIAL_FILTER } from '../../constants/experts';
+import { Filter } from '../../types/experts';
+
+const CustomSwitch = styled(Switch)`
+ height: 24px !important;
+ background: #F8F8F7 !important;
+
+ .ant-switch-handle {
+ height: 24px !important;
+ width: 24px !important;
+ top: 0 !important;
+
+ &::before {
+ box-shadow: none !important;
+ background: #C4DFE6 !important;
+ border-radius: 50% !important;
+ }
+ }
+
+ &.ant-switch-checked {
+ background: #2c7873 !important;
+ }
+`;
+
+const WrapSlider = styled.div`
+ width: 100%;
+ position: relative;
+ margin: 8px 0 16px -5px;
+`;
+
+const CustomSlider = styled(Slider)`
+ padding-block: 7px !important;
+ height: 16px !important;
+
+ .ant-slider-rail {
+ background-color: #E5E5E5 !important;
+ }
+
+ .ant-slider-track {
+ background-color: #66A5AD !important;
+ }
+
+ .ant-slider-handle {
+ width: 16px !important;
+ height: 16px !important;
+
+ &::before {
+ width: 16px !important;
+ height: 16px !important;
+ inset-inline-start: 0 !important;
+ inset-block-start: 0 !important;
+ }
+
+ &::after {
+ width: 16px !important;
+ height: 16px !important;
+ background-color: #66A5AD !important;
+ inset-inline-start: 0 !important;
+ inset-block-start: 0 !important;
+ box-shadow: none !important;
+ }
+
+ &:focus, &:hover {
+ &::after {
+ box-shadow: 0 0 0 10px rgba(102, 165, 173, .2) !important;
+ }
+ }
+ }
+`;
+
+const dataCoaching = [
+ {
+ key: FilterType.WorkLifeBalance,
+ title: 'Work-life Balance'
+ },
+ {
+ key: FilterType.StrategicSession,
+ title: 'Strategic Session'
+ },
+ {
+ key: FilterType.PersonalGrowth,
+ title: 'Personal Growth'
+ },
+ {
+ key: FilterType.PersonalGrowth,
+ title: 'Career Planning'
+ },
+ {
+ key: FilterType.ExecutiveCoaching,
+ title: 'Executive Coaching'
+ }
+];
+
+const dataMentoring = [
+ {
+ key: FilterType.CareerDevelopment,
+ title: 'Career Development'
+ },
+ {
+ key: FilterType.Networking,
+ title: 'Networking'
+ }
+];
+
+const dataConsultation = [
+ {
+ key: FilterType.BusinessModelReview,
+ title: 'Business Model Review'
+ }
+];
+
+export const ExpertsFilter = () => {
+ const [filter, setFilter] = useState
+
+
+ onChangeFilter('text', e?.target?.value)}/>
+
+
+
+
+
+
+
+ ), [filter]);
+
+ return (
+ - (
+
+ onChangeFilter(key, checked)}
+ />
+
+ {title}
+
+
+ onChangeFilter(FilterType.Price, val)}
+ />
+
+
+ onChangeFilter(FilterType.Duration, val)}
+ />
+
+
+
+ );
+};
diff --git a/src/components/Experts/index.ts b/src/components/Experts/index.ts
new file mode 100644
index 0000000..468247d
--- /dev/null
+++ b/src/components/Experts/index.ts
@@ -0,0 +1,2 @@
+export * from './Filter';
+export * from './AdditionalFilter';
diff --git a/src/components/Page/Header/LanguageSwitcher.tsx b/src/components/Page/Header/LanguageSwitcher.tsx
index 03d47a7..d8ad334 100644
--- a/src/components/Page/Header/LanguageSwitcher.tsx
+++ b/src/components/Page/Header/LanguageSwitcher.tsx
@@ -1,8 +1,9 @@
'use client';
-import React, { useTransition } from 'react';
-import { Button, Dropdown } from 'antd';
+import React, { useTransition, useState } from 'react';
+import { Dropdown } from 'antd';
import type { MenuProps } from 'antd';
+import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
import { useRouter, usePathname } from '../../../navigation';
import { LOCALES } from '../../../constants/locale';
import { Locale } from '../../../types/locale';
@@ -10,6 +11,7 @@ import { Locale } from '../../../types/locale';
export const LanguageSwitcher = ({ locale }: { locale: string }) => {
const router = useRouter();
const [isPending, startTransition] = useTransition();
+ const [menuOpen, setMenuOpen] = useState