feat: header menus
This commit is contained in:
37
package-lock.json
generated
37
package-lock.json
generated
@@ -15,6 +15,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/eslintrc": "^3",
|
||||
"@iconify-icon/react": "^3.0.0",
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^19",
|
||||
"@types/react-dom": "^19",
|
||||
@@ -281,6 +282,29 @@
|
||||
"url": "https://github.com/sponsors/nzakas"
|
||||
}
|
||||
},
|
||||
"node_modules/@iconify-icon/react": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@iconify-icon/react/-/react-3.0.0.tgz",
|
||||
"integrity": "sha512-TOyzGUIfOFbmRQflMbf8k8bBGbeVAVCnvJ/rKz2SgBOV6VZLv7E9gzLvkPzfkZ2HZL+GbRtLNX/GJq2EI54OFQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"iconify-icon": "^3.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/cyberalien"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16"
|
||||
}
|
||||
},
|
||||
"node_modules/@iconify/types": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
|
||||
"integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@img/sharp-darwin-arm64": {
|
||||
"version": "0.34.2",
|
||||
"resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.2.tgz",
|
||||
@@ -3444,6 +3468,19 @@
|
||||
"url": "https://github.com/sponsors/typicode"
|
||||
}
|
||||
},
|
||||
"node_modules/iconify-icon": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/iconify-icon/-/iconify-icon-3.0.0.tgz",
|
||||
"integrity": "sha512-yPcnpkn8HUEUckrxxJBOer3jbGv3bqozHsLMLBRxhk3As1X76BgV2mS2a1HTNOIagR8nUs30H3qAd9GLe8Mnlg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@iconify/types": "^2.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/cyberalien"
|
||||
}
|
||||
},
|
||||
"node_modules/ignore": {
|
||||
"version": "5.3.2",
|
||||
"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
|
||||
|
||||
@@ -18,6 +18,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/eslintrc": "^3",
|
||||
"@iconify-icon/react": "^3.0.0",
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^19",
|
||||
"@types/react-dom": "^19",
|
||||
|
||||
BIN
public/images/dtr-logo-eagle.png
Normal file
BIN
public/images/dtr-logo-eagle.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
@@ -1,6 +1,6 @@
|
||||
import type { Metadata } from 'next';
|
||||
import { ReactNode } from 'react';
|
||||
import { Roboto } from 'next/font/google';
|
||||
import { Montserrat, Roboto } from 'next/font/google';
|
||||
import '@core/styles/globals.scss';
|
||||
import '@core/styles/reset.scss';
|
||||
|
||||
@@ -10,6 +10,12 @@ const roboto = Roboto({
|
||||
variable: '--font-roboto',
|
||||
});
|
||||
|
||||
const montseratt = Montserrat({
|
||||
subsets: ['cyrillic'],
|
||||
weight: ['300', '400', '500', '600', '700'],
|
||||
variable: '--font-montseratt',
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Независимая оценка и судебная экспертиза | Компания ДИТРАСО',
|
||||
description:
|
||||
@@ -21,7 +27,9 @@ export default function RootLayout({
|
||||
}: Readonly<{ children: ReactNode }>) {
|
||||
return (
|
||||
<html lang='en'>
|
||||
<body className={`${roboto.variable}`}>{children}</body>
|
||||
<body className={`${roboto.variable} ${montseratt.variable}`}>
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,3 +1,9 @@
|
||||
export default function Home() {
|
||||
return <div>Main</div>;
|
||||
import { Home } from '@/views';
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<div>
|
||||
<Home />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -5,7 +5,8 @@ $laptop: 1024px;
|
||||
$desktop: 1440px;
|
||||
|
||||
//fonts
|
||||
$font-open-sans: var(--font-roboto), sans-serif;
|
||||
$font-roboto: var(--font-roboto), sans-serif;
|
||||
$font-montseratt: var(--font-montseratt), sans-serif;
|
||||
|
||||
$base-font-size: 16px;
|
||||
|
||||
@@ -18,13 +19,12 @@ $font-bold: 700;
|
||||
// colors
|
||||
$color-white: #FFFFFF;
|
||||
$color-black: #000000;
|
||||
$color-orange: #E96526;
|
||||
$color-orange-hover: #ea4b05;
|
||||
$color-lightgray: #E4E1E1;
|
||||
$color-darkgray: #999999;
|
||||
$color-text: #333333;
|
||||
$color-text-light: #222222;
|
||||
$color-mark: #E96526;
|
||||
$color-link: #333333;
|
||||
$color-link-hover: #009283;
|
||||
$color-error: #ff0000;
|
||||
$color-error-light: #ff9191;
|
||||
$color-gray-border: #555555;
|
||||
1
src/entities/base-menu/index.ts
Normal file
1
src/entities/base-menu/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export * from './ui';
|
||||
106
src/entities/base-menu/styles.module.scss
Normal file
106
src/entities/base-menu/styles.module.scss
Normal file
@@ -0,0 +1,106 @@
|
||||
.ContainerNavbar {
|
||||
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.Navbar {
|
||||
margin: 0 auto;
|
||||
width: rem(1540px);
|
||||
height: 100px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
|
||||
|
||||
.Nav {
|
||||
margin-left: auto;
|
||||
|
||||
.Menu {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: rem(24px);
|
||||
}
|
||||
|
||||
.Parent {
|
||||
display: block;
|
||||
position: relative;
|
||||
float: left;
|
||||
line-height: 40px;
|
||||
//background-color: #ffc72c;
|
||||
//border-right: #CCC 1px solid;
|
||||
}
|
||||
|
||||
.Parent a {
|
||||
//margin: 10px 24px;
|
||||
//color: #5d3200;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.Parent:hover > ul {
|
||||
display: block;
|
||||
position: absolute;
|
||||
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.Child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.Child li {
|
||||
background-color: #FFFFFF;
|
||||
line-height: 40px;
|
||||
padding: 0 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.Child li a {
|
||||
color: $color-text;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0px;
|
||||
min-width: 12em;
|
||||
font-family: $font-montseratt;
|
||||
font-weight: $font-medium;
|
||||
font-size: rem(16px);
|
||||
line-height: 100%;
|
||||
color: $color-text;
|
||||
}
|
||||
|
||||
ul ul ul {
|
||||
left: 100%;
|
||||
top: 0;
|
||||
margin-left: 1px;
|
||||
}
|
||||
|
||||
li:hover {
|
||||
color: $color-link-hover;
|
||||
}
|
||||
|
||||
.Parent li:hover {
|
||||
background-color: $color-link-hover; //#F0F0F0
|
||||
color: $color-white;
|
||||
|
||||
& > a {
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
& > .Expand {
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
.Expand {
|
||||
font-size: 16px;
|
||||
float: right;
|
||||
margin-left: 8px;
|
||||
color: $color-text
|
||||
}
|
||||
}
|
||||
|
||||
.Invite {
|
||||
}
|
||||
}
|
||||
135
src/entities/base-menu/ui.tsx
Normal file
135
src/entities/base-menu/ui.tsx
Normal file
@@ -0,0 +1,135 @@
|
||||
import s from './styles.module.scss';
|
||||
import Image from 'next/image';
|
||||
import dtrLogo from '@public/images/dtr-logo-eagle.png';
|
||||
|
||||
function BaseMenu() {
|
||||
return (
|
||||
<section className={s.ContainerNavbar}>
|
||||
<div className={s.Navbar}>
|
||||
<Image src={dtrLogo} alt={'ДиТрасо'} quality={75} priority />
|
||||
<nav className={s.Nav}>
|
||||
<ul className={s.Menu}>
|
||||
<li>
|
||||
<a href='#'>Экспертиза</a>
|
||||
</li>
|
||||
<li className={s.Parent}>
|
||||
<a href='#'>Оценка</a> <span className={s.Expand}>🢒</span>
|
||||
<ul className={s.Child}>
|
||||
<li>
|
||||
<a href='#'>Link1</a>
|
||||
</li>
|
||||
<li className={s.Parent}>
|
||||
<a href='#'>Link2</a>{' '}
|
||||
<span className={s.Expand}>🢒</span>
|
||||
<ul className={s.Child}>
|
||||
<li>
|
||||
<a href='#'>SubLink 1 asdasd</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='#'>SubLink 2 asdasdasd</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='#'>SubLink 3 xczzxcc</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href='#'>Юрист</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='#'>Эксперты</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='#'>Контакты</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div className={s.Invite}>
|
||||
<button>+7 (999) 123-45-67</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export { BaseMenu };
|
||||
|
||||
const Menu = [
|
||||
{
|
||||
menuItem: {
|
||||
name: 'Home',
|
||||
link: '/home',
|
||||
},
|
||||
},
|
||||
{
|
||||
menuItem: {
|
||||
name: 'Link1',
|
||||
children: [
|
||||
{
|
||||
menuItem: {
|
||||
name: 'link1-1',
|
||||
link: '/home',
|
||||
},
|
||||
},
|
||||
{
|
||||
menuItem: {
|
||||
name: 'link1-2',
|
||||
link: '/home',
|
||||
},
|
||||
},
|
||||
{
|
||||
menuItem: {
|
||||
name: 'link1-3',
|
||||
link: '/home',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
menuItem: {
|
||||
name: 'Link2',
|
||||
children: [
|
||||
{
|
||||
menuItem: {
|
||||
name: 'link2-1',
|
||||
link: '/home',
|
||||
},
|
||||
},
|
||||
{
|
||||
menuItem: {
|
||||
name: 'link2-2',
|
||||
children: [
|
||||
{
|
||||
menuItem: {
|
||||
name: 'link2-1',
|
||||
link: '/home',
|
||||
},
|
||||
},
|
||||
{
|
||||
menuItem: {
|
||||
name: 'link2-2',
|
||||
link: '/home',
|
||||
},
|
||||
},
|
||||
{
|
||||
menuItem: {
|
||||
name: 'link2-3',
|
||||
link: '/home',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
menuItem: {
|
||||
name: 'link2-3',
|
||||
link: '/home',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
];
|
||||
2
src/entities/index.ts
Normal file
2
src/entities/index.ts
Normal file
@@ -0,0 +1,2 @@
|
||||
export { TopMenu } from './top-menu';
|
||||
export { BaseMenu } from './base-menu';
|
||||
1
src/entities/top-menu/index.ts
Normal file
1
src/entities/top-menu/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export * from './ui';
|
||||
49
src/entities/top-menu/styles.module.scss
Normal file
49
src/entities/top-menu/styles.module.scss
Normal file
@@ -0,0 +1,49 @@
|
||||
.Container {
|
||||
background: #007c6f;
|
||||
padding: rem(8px) 0;
|
||||
}
|
||||
|
||||
.Top {
|
||||
margin: 0 auto;
|
||||
width: rem(1540px);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.Icons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: rem(20px);
|
||||
|
||||
.Icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.Contacts {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: rem(60px);
|
||||
|
||||
.Item {
|
||||
font-family: $font-roboto;
|
||||
font-weight: $font-bold;
|
||||
font-size: rem(16px);
|
||||
line-height: 100%;
|
||||
color: $color-white;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: rem(8px);
|
||||
|
||||
.IconBox {
|
||||
padding: rem(4px);
|
||||
border-radius: 50%;
|
||||
background: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
35
src/entities/top-menu/ui.tsx
Normal file
35
src/entities/top-menu/ui.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
import s from './styles.module.scss';
|
||||
import {
|
||||
CiPhoneIcon,
|
||||
EnvelopeIcon,
|
||||
MapIcon,
|
||||
TgIcon,
|
||||
WaIcon,
|
||||
} from '@shared/ui/icon';
|
||||
|
||||
function TopMenu() {
|
||||
return (
|
||||
<section className={s.Container}>
|
||||
<div className={s.Top}>
|
||||
<div className={s.Icons}>
|
||||
<WaIcon className={s.Icon} />
|
||||
<TgIcon className={s.Icon} />
|
||||
<CiPhoneIcon className={s.Icon} />
|
||||
</div>
|
||||
<div className={s.Contacts}>
|
||||
<p className={s.Item}>
|
||||
<EnvelopeIcon className={s.IconBox} />
|
||||
spo-71@yandex.ru
|
||||
</p>
|
||||
|
||||
<p className={s.Item}>
|
||||
<MapIcon className={s.IconBox} />
|
||||
г. Сочи, Навагинская д. 9д, оф. 35
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export { TopMenu };
|
||||
1
src/shared/ui/icon/index.ts
Normal file
1
src/shared/ui/icon/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export * from './ui';
|
||||
0
src/shared/ui/icon/styles.module.scss
Normal file
0
src/shared/ui/icon/styles.module.scss
Normal file
106
src/shared/ui/icon/ui.tsx
Normal file
106
src/shared/ui/icon/ui.tsx
Normal file
@@ -0,0 +1,106 @@
|
||||
/** Based on https://iconify.design/
|
||||
*
|
||||
*/
|
||||
import type { SVGProps } from 'react';
|
||||
|
||||
type SVGIcon = SVGProps<SVGSVGElement>;
|
||||
|
||||
//RiMapPinLine
|
||||
function MapIcon(props: SVGIcon) {
|
||||
return (
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width={24}
|
||||
height={24}
|
||||
viewBox='0 0 24 24'
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fill='#19bb3f'
|
||||
d='m12 20.9l4.95-4.95a7 7 0 1 0-9.9 0zm0 2.828l-6.364-6.364a9 9 0 1 1 12.728 0zM12 13a2 2 0 1 0 0-4a2 2 0 0 0 0 4m0 2a4 4 0 1 1 0-8a4 4 0 0 1 0 8'
|
||||
></path>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
//MynauiEnvelope
|
||||
function EnvelopeIcon(props: SVGIcon) {
|
||||
return (
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width={24}
|
||||
height={24}
|
||||
viewBox='0 0 24 24'
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fill='none'
|
||||
stroke='#19bb3f'
|
||||
strokeLinecap='round'
|
||||
strokeLinejoin='round'
|
||||
strokeWidth={1.5}
|
||||
d='m2.357 7.714l6.98 4.654c.963.641 1.444.962 1.964 1.087c.46.11.939.11 1.398 0c.52-.125 1.001-.446 1.964-1.087l6.98-4.654M7.157 19.5h9.686c1.68 0 2.52 0 3.162-.327a3 3 0 0 0 1.31-1.311c.328-.642.328-1.482.328-3.162V9.3c0-1.68 0-2.52-.327-3.162a3 3 0 0 0-1.311-1.311c-.642-.327-1.482-.327-3.162-.327H7.157c-1.68 0-2.52 0-3.162.327a3 3 0 0 0-1.31 1.311c-.328.642-.328 1.482-.328 3.162v5.4c0 1.68 0 2.52.327 3.162a3 3 0 0 0 1.311 1.311c.642.327 1.482.327 3.162.327'
|
||||
></path>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
//IcBaselineWhatsapp
|
||||
function WaIcon(props: SVGIcon) {
|
||||
return (
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width={24}
|
||||
height={24}
|
||||
viewBox='0 0 24 24'
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fill='#80beb7'
|
||||
d='M19.05 4.91A9.82 9.82 0 0 0 12.04 2c-5.46 0-9.91 4.45-9.91 9.91c0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38c1.45.79 3.08 1.21 4.74 1.21c5.46 0 9.91-4.45 9.91-9.91c0-2.65-1.03-5.14-2.9-7.01m-7.01 15.24c-1.48 0-2.93-.4-4.2-1.15l-.3-.18l-3.12.82l.83-3.04l-.2-.31a8.26 8.26 0 0 1-1.26-4.38c0-4.54 3.7-8.24 8.24-8.24c2.2 0 4.27.86 5.82 2.42a8.18 8.18 0 0 1 2.41 5.83c.02 4.54-3.68 8.23-8.22 8.23m4.52-6.16c-.25-.12-1.47-.72-1.69-.81c-.23-.08-.39-.12-.56.12c-.17.25-.64.81-.78.97c-.14.17-.29.19-.54.06c-.25-.12-1.05-.39-1.99-1.23c-.74-.66-1.23-1.47-1.38-1.72c-.14-.25-.02-.38.11-.51c.11-.11.25-.29.37-.43s.17-.25.25-.41c.08-.17.04-.31-.02-.43s-.56-1.34-.76-1.84c-.2-.48-.41-.42-.56-.43h-.48c-.17 0-.43.06-.66.31c-.22.25-.86.85-.86 2.07s.89 2.4 1.01 2.56c.12.17 1.75 2.67 4.23 3.74c.59.26 1.05.41 1.41.52c.59.19 1.13.16 1.56.1c.48-.07 1.47-.6 1.67-1.18c.21-.58.21-1.07.14-1.18s-.22-.16-.47-.28'
|
||||
></path>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
//IcBaselineTelegram
|
||||
function TgIcon(props: SVGIcon) {
|
||||
return (
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width={24}
|
||||
height={24}
|
||||
viewBox='0 0 24 24'
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fill='#80beb7'
|
||||
d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2m4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19c-.14.75-.42 1-.68 1.03c-.58.05-1.02-.38-1.58-.75c-.88-.58-1.38-.94-2.23-1.5c-.99-.65-.35-1.01.22-1.59c.15-.15 2.71-2.48 2.76-2.69a.2.2 0 0 0-.05-.18c-.06-.05-.14-.03-.21-.02c-.09.02-1.49.95-4.22 2.79c-.4.27-.76.41-1.08.4c-.36-.01-1.04-.2-1.55-.37c-.63-.2-1.12-.31-1.08-.66c.02-.18.27-.36.74-.55c2.92-1.27 4.86-2.11 5.83-2.51c2.78-1.16 3.35-1.36 3.73-1.36c.08 0 .27.02.39.12c.1.08.13.19.14.27c-.01.06.01.24 0 .38'
|
||||
></path>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
// CiPhone
|
||||
function CiPhoneIcon(props: SVGIcon) {
|
||||
return (
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width={24}
|
||||
height={24}
|
||||
viewBox='0 0 24 24'
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fill='none'
|
||||
stroke='#80beb7'
|
||||
strokeLinecap='round'
|
||||
strokeLinejoin='round'
|
||||
strokeWidth={2}
|
||||
d='M9.502 4.257A2 2 0 0 0 7.646 3H4.895A1.895 1.895 0 0 0 3 4.895C3 13.789 10.21 21 19.106 21A1.895 1.895 0 0 0 21 19.105v-2.751a2 2 0 0 0-1.257-1.857l-2.636-1.054a2 2 0 0 0-2.023.32l-.68.568a2 2 0 0 1-2.696-.122L9.792 12.29a2 2 0 0 1-.123-2.694l.567-.68a2 2 0 0 0 .322-2.024z'
|
||||
></path>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export { MapIcon, EnvelopeIcon, WaIcon, TgIcon, CiPhoneIcon };
|
||||
1
src/views/home/index.ts
Normal file
1
src/views/home/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { default as Home } from './ui';
|
||||
15
src/views/home/styles.module.scss
Normal file
15
src/views/home/styles.module.scss
Normal file
@@ -0,0 +1,15 @@
|
||||
.Header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.Container {
|
||||
margin: 0 auto;
|
||||
width: rem(1540px);
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.Footer {
|
||||
margin: 0 auto;
|
||||
width: rem(1540px);
|
||||
}
|
||||
279
src/views/home/ui.tsx
Normal file
279
src/views/home/ui.tsx
Normal file
@@ -0,0 +1,279 @@
|
||||
import s from './styles.module.scss';
|
||||
import { BaseMenu, TopMenu } from '@/entities';
|
||||
|
||||
export default function Main() {
|
||||
return (
|
||||
<main>
|
||||
<header className={s.Header}>
|
||||
<TopMenu />
|
||||
<BaseMenu />
|
||||
</header>
|
||||
|
||||
<section className={s.Container}>
|
||||
<div>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores
|
||||
cupiditate delectus dicta dignissimos eius esse est eum harum minus
|
||||
omnis perspiciatis quaerat, quasi quia, quod ratione tempora vel velit
|
||||
voluptates.
|
||||
</div>
|
||||
<div>
|
||||
Accusamus aliquam cumque dignissimos quasi repudiandae suscipit
|
||||
veniam! Accusamus atque commodi distinctio dolorum esse exercitationem
|
||||
explicabo, facilis in mollitia neque nostrum officia praesentium quod
|
||||
ratione, repudiandae, tempora totam ut vel?
|
||||
</div>
|
||||
<div>
|
||||
Atque corporis dignissimos dolorem enim et eum fuga fugiat fugit
|
||||
inventore iure iusto minima, nesciunt odio sed soluta vel voluptates.
|
||||
A accusamus dolor earum excepturi odit quaerat repudiandae sed
|
||||
tempore!
|
||||
</div>
|
||||
<div>
|
||||
Commodi cumque ducimus incidunt, nam numquam quo tempora voluptas?
|
||||
Debitis iure, vero. Aperiam atque beatae delectus dolores enim facilis
|
||||
fuga, ipsam laborum minus, molestiae obcaecati odio pariatur quis
|
||||
reiciendis voluptate?
|
||||
</div>
|
||||
<div>
|
||||
Adipisci aspernatur consequatur cum distinctio ea error ex explicabo
|
||||
fuga harum hic itaque molestiae nesciunt, omnis placeat reprehenderit
|
||||
rerum sed temporibus vel! Doloribus facilis id labore quia quisquam
|
||||
sequi voluptate.
|
||||
</div>
|
||||
<div>
|
||||
Adipisci atque dolorem ducimus enim facere fugit incidunt ipsam ipsum
|
||||
laudantium magni minima mollitia neque nesciunt nostrum odio officia
|
||||
perferendis quam, qui quia quisquam similique sunt temporibus vel
|
||||
veritatis vitae?
|
||||
</div>
|
||||
<div>
|
||||
Culpa fuga incidunt magni nemo porro quas quia quod sunt voluptas
|
||||
voluptate. Blanditiis ducimus eos eum facere fuga hic laborum minus,
|
||||
mollitia necessitatibus officiis perspiciatis recusandae, rerum saepe,
|
||||
temporibus ut?
|
||||
</div>
|
||||
<div>
|
||||
Consequatur ducimus eius, illo ipsa laborum magnam nesciunt numquam
|
||||
officia porro provident quasi reprehenderit sapiente sed temporibus
|
||||
unde vel veniam voluptatem. Amet commodi illum minus optio praesentium
|
||||
quis repellat, repudiandae.
|
||||
</div>
|
||||
<div>
|
||||
A ad aperiam architecto aut autem consequuntur cumque dolor ducimus ea
|
||||
eligendi ipsa iste laudantium magni maxime minima nostrum officia
|
||||
pariatur quae quasi quia quo, reiciendis repudiandae, saepe ullam
|
||||
voluptatum!
|
||||
</div>
|
||||
<div>
|
||||
Aperiam, aut commodi corporis dignissimos, eaque enim eos harum ipsa
|
||||
optio quia quos reiciendis, repellat. Architecto dolores error minus
|
||||
nihil non numquam, omnis optio porro tempora! Error eveniet nisi quod?
|
||||
</div>
|
||||
<div>
|
||||
Ab ad adipisci alias amet consequatur delectus deserunt dignissimos
|
||||
distinctio dolor eius id ipsa, laboriosam libero nam natus non numquam
|
||||
quidem quis quod rem saepe, tempora tenetur unde vel velit?
|
||||
</div>
|
||||
<div>
|
||||
Aliquam at consectetur culpa debitis doloribus ducimus eligendi
|
||||
eveniet facere fugiat ipsam itaque, laudantium maiores maxime
|
||||
molestiae molestias mollitia necessitatibus nisi numquam obcaecati
|
||||
quaerat quidem quis recusandae rerum, vel voluptas?
|
||||
</div>
|
||||
<div>
|
||||
Ab ad alias aliquam, amet corporis cumque doloribus ducimus ea error
|
||||
et excepturi exercitationem, explicabo impedit iste iure laudantium
|
||||
necessitatibus optio pariatur quia quidem ratione, rem similique sint
|
||||
totam voluptatem?
|
||||
</div>
|
||||
<div>
|
||||
Eius ipsa nihil odio perspiciatis sed sequi tempora, ullam?
|
||||
Consequuntur enim ex illo laborum nam, repellat tempore totam ut
|
||||
voluptatibus! Ad assumenda blanditiis distinctio dolorem, ex illum
|
||||
iusto magnam tempore.
|
||||
</div>
|
||||
<div>
|
||||
Aspernatur consequatur delectus deleniti est fugit laborum minima nisi
|
||||
quos suscipit vero. Accusantium ex illum maxime numquam obcaecati
|
||||
perspiciatis, quod reiciendis temporibus vitae. Eos laboriosam nostrum
|
||||
odit quidem reiciendis vitae.
|
||||
</div>
|
||||
<div>
|
||||
Animi at libero minima necessitatibus obcaecati, officia perferendis
|
||||
quo! Ab ad dolorum excepturi laborum libero, officia quibusdam
|
||||
sapiente! Accusamus adipisci consectetur cumque debitis dolore id
|
||||
impedit nesciunt nisi omnis voluptas.
|
||||
</div>
|
||||
<div>
|
||||
Accusantium animi debitis ducimus, iste molestias quos rem.
|
||||
Consectetur dicta, doloremque error eveniet excepturi fugit in,
|
||||
incidunt natus nulla omnis, quia quidem quisquam sint soluta
|
||||
voluptatibus. Eveniet maxime quae recusandae.
|
||||
</div>
|
||||
<div>
|
||||
Ad aliquam architecto distinctio eius eos maxime minima optio porro
|
||||
quis voluptatem. Accusantium atque debitis eligendi esse hic ipsam
|
||||
ipsum, nihil officia perspiciatis quasi rerum soluta, tempora vel
|
||||
voluptas voluptatibus.
|
||||
</div>
|
||||
<div>
|
||||
Aperiam dolor exercitationem expedita illum labore modi molestias
|
||||
repudiandae saepe velit voluptas. Accusamus consequuntur, dignissimos
|
||||
eius eligendi fuga harum illo illum nam, nulla, odit officia quaerat
|
||||
quis reiciendis sit tempore!
|
||||
</div>
|
||||
<div>
|
||||
A aliquam asperiores consequatur cum dignissimos distinctio dolorem
|
||||
eius eos eum excepturi expedita impedit laborum molestiae mollitia,
|
||||
natus quam quidem quis quo reprehenderit similique tempore unde
|
||||
veritatis voluptatem, voluptatibus voluptatum?
|
||||
</div>
|
||||
<div>
|
||||
Accusamus adipisci assumenda beatae consequatur, eum exercitationem
|
||||
explicabo maxime obcaecati officiis porro quae qui ratione sapiente
|
||||
sequi suscipit velit veritatis? Harum molestiae quis quod? Et harum
|
||||
neque quam reprehenderit voluptates!
|
||||
</div>
|
||||
<div>
|
||||
Aspernatur deleniti distinctio, illum, inventore iure labore maiores
|
||||
nemo quod sapiente sit voluptas, voluptatem! Minus nobis perspiciatis
|
||||
rem velit. Delectus, dolores natus? Eos laborum laudantium molestiae,
|
||||
nobis perferendis unde. Animi.
|
||||
</div>
|
||||
<div>
|
||||
Dolores magni nulla quasi? Accusamus aliquam animi aperiam corporis
|
||||
distinctio eligendi explicabo illo ipsum laboriosam laborum maiores
|
||||
molestias obcaecati optio provident, quae, quaerat quas quisquam rerum
|
||||
saepe voluptatum? Asperiores, unde.
|
||||
</div>
|
||||
<div>
|
||||
Dignissimos distinctio dolore, ea error fugiat ipsum modi pariatur
|
||||
praesentium quia velit. Aliquam aut consequuntur corporis, debitis
|
||||
esse hic iste laboriosam magni mollitia natus non obcaecati placeat
|
||||
quia recusandae veniam?
|
||||
</div>
|
||||
<div>
|
||||
Accusantium aliquam corporis debitis distinctio dolore dolorem earum
|
||||
eligendi fugiat harum impedit ipsam, libero magni minus molestias nisi
|
||||
odit officiis possimus quae, quaerat quia quibusdam sit sunt totam ut
|
||||
vel?
|
||||
</div>
|
||||
<div>
|
||||
Animi assumenda dicta dignissimos itaque, nesciunt quo. Aliquam
|
||||
asperiores aspernatur delectus deleniti dolorem, dolorum eaque ex
|
||||
exercitationem expedita fugit id, iusto mollitia nesciunt officia quam
|
||||
suscipit temporibus ullam ut voluptates.
|
||||
</div>
|
||||
<div>
|
||||
Ad, at consequuntur dicta dolor, eius ex excepturi, fugit ipsum nisi
|
||||
nostrum numquam qui reprehenderit sint suscipit tempora unde
|
||||
voluptatibus. Dicta doloremque eaque est in nemo perspiciatis quae
|
||||
quisquam, similique?
|
||||
</div>
|
||||
<div>
|
||||
Accusantium culpa eaque eius id incidunt ipsam ipsum, laboriosam
|
||||
nesciunt recusandae, repellendus temporibus vel voluptates voluptatum.
|
||||
Aliquid consectetur dolores in praesentium voluptate? Accusamus
|
||||
consequuntur delectus facilis fuga nulla saepe veritatis?
|
||||
</div>
|
||||
<div>
|
||||
A aliquid animi commodi dolor est in, iure magnam molestias nesciunt
|
||||
numquam quam, repellat sunt, veniam! Consectetur facere neque nulla
|
||||
quos saepe! Dicta eum impedit molestias officiis temporibus tenetur
|
||||
vitae?
|
||||
</div>
|
||||
<div>
|
||||
Animi dignissimos fugiat nihil odit perspiciatis soluta! Commodi
|
||||
consectetur cupiditate iusto, possimus veritatis voluptas voluptatem.
|
||||
Adipisci, alias consequuntur cum impedit itaque, minima modi natus
|
||||
nulla quaerat quam quidem sed unde!
|
||||
</div>
|
||||
<div>
|
||||
Accusantium ad aliquid animi aspernatur corporis cumque cupiditate
|
||||
delectus dolore ea expedita id iste, iure laudantium maiores modi odio
|
||||
quae quas quis quod quos recusandae rerum sunt totam veniam
|
||||
voluptatibus?
|
||||
</div>
|
||||
<div>
|
||||
Aperiam, aspernatur cum dolorum error exercitationem fuga id
|
||||
necessitatibus nisi quo rem repudiandae soluta veniam? A architecto
|
||||
commodi consequuntur culpa deserunt ducimus est et fugit, iusto nihil
|
||||
odio quo rem?
|
||||
</div>
|
||||
<div>
|
||||
Alias distinctio dolorem ducimus eaque, eligendi error eveniet harum
|
||||
iste iure modi mollitia odit perspiciatis praesentium quaerat quam
|
||||
quidem rem repudiandae rerum sed sequi sit soluta ut veniam veritatis
|
||||
voluptate.
|
||||
</div>
|
||||
<div>
|
||||
Cumque debitis eaque, error fugiat hic molestias placeat unde?
|
||||
Accusamus, ad, amet architecto at beatae culpa deleniti expedita
|
||||
labore magni maiores maxime odio quos repudiandae soluta voluptate?
|
||||
Esse, nisi, provident.
|
||||
</div>
|
||||
<div>
|
||||
A aperiam autem eius error expedita id incidunt ipsum molestias nulla
|
||||
porro reprehenderit, velit, vero voluptatem voluptatibus voluptatum!
|
||||
Doloremque ducimus eum expedita molestias numquam porro quisquam
|
||||
ratione repellendus tenetur voluptatibus.
|
||||
</div>
|
||||
<div>
|
||||
A accusamus architecto asperiores consectetur, consequuntur culpa cum
|
||||
error est, explicabo illum impedit ipsum magnam, molestias nulla
|
||||
obcaecati officiis pariatur possimus quia recusandae reprehenderit
|
||||
tempora tempore ullam vitae voluptatem voluptatibus!
|
||||
</div>
|
||||
<div>
|
||||
A accusantium alias aliquam aut blanditiis consequatur cumque delectus
|
||||
distinctio doloremque eligendi error et inventore ipsa ipsum iste
|
||||
laborum neque odit qui quia, quo repudiandae saepe sit, totam vitae
|
||||
voluptatem!
|
||||
</div>
|
||||
<div>
|
||||
Alias, aliquam animi aspernatur blanditiis consectetur consequatur
|
||||
corporis cupiditate, dolorum error esse impedit laudantium magni
|
||||
maiores natus non nulla odit perferendis quam, similique soluta
|
||||
suscipit tenetur totam vel veniam voluptatem!
|
||||
</div>
|
||||
<div>
|
||||
Consequatur corporis cumque, dolore earum esse et fuga itaque laborum
|
||||
magni maiores modi nihil odit officia officiis omnis praesentium, quae
|
||||
quo quod ratione repellendus soluta suscipit, ullam! Accusamus, est,
|
||||
reprehenderit!
|
||||
</div>
|
||||
<div>
|
||||
At consectetur debitis dolores, dolorum et expedita laboriosam minus
|
||||
nemo nihil numquam perspiciatis quas quibusdam repellendus repudiandae
|
||||
sint tenetur, voluptatibus. Alias dignissimos, labore laudantium nemo
|
||||
numquam reprehenderit repudiandae similique vero?
|
||||
</div>
|
||||
<div>
|
||||
Architecto dignissimos enim et laboriosam quibusdam quisquam
|
||||
reprehenderit rerum vel veniam voluptatum. Delectus facere modi
|
||||
veritatis. A ad eaque eligendi enim fugiat harum maiores mollitia nisi
|
||||
optio quibusdam sint, voluptate.
|
||||
</div>
|
||||
<div>
|
||||
Ab commodi iste laboriosam laudantium maiores maxime non odit placeat
|
||||
quaerat quas reiciendis, sequi temporibus, totam vel veritatis!
|
||||
Doloremque eveniet expedita, fuga quam quis recusandae veniam?
|
||||
Exercitationem repellendus veniam voluptates?
|
||||
</div>
|
||||
<div>
|
||||
Animi aperiam asperiores autem delectus dignissimos illo impedit
|
||||
ipsam, iusto natus numquam pariatur quae qui quis quisquam ratione
|
||||
sequi sit suscipit ullam unde vel! Alias autem nemo odit quod
|
||||
voluptate.
|
||||
</div>
|
||||
<div>
|
||||
Accusamus aspernatur consectetur culpa cum cumque cupiditate doloribus
|
||||
ducimus explicabo hic, id ipsa laboriosam maiores, molestiae nobis
|
||||
quasi quia quod rem tempora tempore, voluptatem. Alias atque labore
|
||||
maiores quia reprehenderit.
|
||||
</div>
|
||||
</section>
|
||||
<footer className={s.Footer}>footer</footer>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
1
src/views/index.ts
Normal file
1
src/views/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export * from './home';
|
||||
Reference in New Issue
Block a user