Dev #1
33
.idea/workspace.xml
generated
33
.idea/workspace.xml
generated
@@ -5,13 +5,16 @@
|
||||
</component>
|
||||
<component name="ChangeListManager">
|
||||
<list default="true" id="2a96f817-9dc2-4f3c-893a-c4974c750774" name="Changes" comment="">
|
||||
<change beforePath="$PROJECT_DIR$/.idea/.gitignore" beforeDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/.idea/compiler.xml" beforeDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/.idea/watcherTasks.xml" beforeDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
|
||||
<change afterPath="$PROJECT_DIR$/src/shared/ui/icon/base.tsx" afterDir="false" />
|
||||
<change afterPath="$PROJECT_DIR$/src/shared/ui/icon/service-grid.tsx" afterDir="false" />
|
||||
<change afterPath="$PROJECT_DIR$/src/widgets/service-grid/index.ts" afterDir="false" />
|
||||
<change afterPath="$PROJECT_DIR$/src/widgets/service-grid/styles.module.scss" afterDir="false" />
|
||||
<change afterPath="$PROJECT_DIR$/src/widgets/service-grid/ui.tsx" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/shared/ui/icon/ui.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/shared/ui/icon/ui.tsx" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/views/home/styles.module.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/home/styles.module.scss" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/views/home/ui.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/home/ui.tsx" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/widgets/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/widgets/index.ts" afterDir="false" />
|
||||
</list>
|
||||
<option name="SHOW_DIALOG" value="false" />
|
||||
<option name="HIGHLIGHT_CONFLICTS" value="true" />
|
||||
@@ -19,10 +22,18 @@
|
||||
<option name="LAST_RESOLUTION" value="IGNORE" />
|
||||
</component>
|
||||
<component name="DarkyenusTimeTracker">
|
||||
<option name="totalTimeSeconds" value="160544" />
|
||||
<option name="totalTimeSeconds" value="164065" />
|
||||
<option name="gitIntegration" value="true" />
|
||||
<option name="naggedAbout" value="1" />
|
||||
</component>
|
||||
<component name="FileTemplateManagerImpl">
|
||||
<option name="RECENT_TEMPLATES">
|
||||
<list>
|
||||
<option value="SCSS File" />
|
||||
<option value="TypeScript JSX File" />
|
||||
</list>
|
||||
</option>
|
||||
</component>
|
||||
<component name="Git.Settings">
|
||||
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
|
||||
</component>
|
||||
@@ -39,6 +50,7 @@
|
||||
"keyToString": {
|
||||
"ModuleVcsDetector.initialDetectionPerformed": "true",
|
||||
"RunOnceActivity.ShowReadmeOnStart": "true",
|
||||
"RunOnceActivity.TerminalTabsStorage.copyFrom.TerminalArrangementManager.252": "true",
|
||||
"RunOnceActivity.git.unshallow": "true",
|
||||
"com.intellij.ml.llm.matterhorn.ej.ui.settings.DefaultModelSelectionForGA.v1": "true",
|
||||
"git-widget-placeholder": "dev",
|
||||
@@ -46,12 +58,14 @@
|
||||
"js.debugger.nextJs.config.created.client": "true",
|
||||
"js.debugger.nextJs.config.created.server": "true",
|
||||
"junie.onboarding.icon.badge.shown": "true",
|
||||
"list.type.of.created.stylesheet": "SCSS",
|
||||
"node.js.detected.package.eslint": "true",
|
||||
"node.js.detected.package.tslint": "true",
|
||||
"node.js.selected.package.eslint": "(autodetect)",
|
||||
"node.js.selected.package.tslint": "(autodetect)",
|
||||
"nodejs_package_manager_path": "npm",
|
||||
"npm.Next.js: server-side.executor": "Run",
|
||||
"prettierjs.PrettierConfiguration.Package": "C:\\dev-personal\\ocenka-web\\node_modules\\prettier",
|
||||
"to.speed.mode.migration.done": "true",
|
||||
"ts.external.directory.path": "C:\\dev-personal\\ocenka-web\\node_modules\\typescript\\lib",
|
||||
"vue.rearranger.settings.migration": "true"
|
||||
@@ -75,7 +89,7 @@
|
||||
<component name="SharedIndexes">
|
||||
<attachedChunks>
|
||||
<set>
|
||||
<option value="bundled-js-predefined-d6986cc7102b-3aa1da707db6-JavaScript-WS-252.27397.92" />
|
||||
<option value="bundled-js-predefined-d6986cc7102b-a71380e98a7c-JavaScript-WS-252.28238.10" />
|
||||
</set>
|
||||
</attachedChunks>
|
||||
</component>
|
||||
@@ -86,7 +100,10 @@
|
||||
<option name="number" value="Default" />
|
||||
<option name="presentableId" value="Default" />
|
||||
<updated>1763636886190</updated>
|
||||
<workItem from="1763636887488" duration="5508000" />
|
||||
<workItem from="1763636887488" duration="6811000" />
|
||||
<workItem from="1764586916122" duration="32000" />
|
||||
<workItem from="1764590282382" duration="1201000" />
|
||||
<workItem from="1764591867512" duration="3620000" />
|
||||
</task>
|
||||
<servers />
|
||||
</component>
|
||||
|
||||
331
src/shared/ui/icon/base.tsx
Normal file
331
src/shared/ui/icon/base.tsx
Normal file
@@ -0,0 +1,331 @@
|
||||
import type { SVGProps } from 'react';
|
||||
type SVGIcon = SVGProps<SVGSVGElement>;
|
||||
|
||||
//RiMapPinLine
|
||||
const Map = (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
|
||||
const Envelope = (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
|
||||
const Whatsapp = (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
|
||||
const Telegram = (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
|
||||
const Phone = (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>
|
||||
);
|
||||
};
|
||||
|
||||
//HugeiconsVk
|
||||
const Vk = (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={1.5}
|
||||
d='M14 10.749V7.053c0-.833-.151-1-.98-1L10.67 6c-.732 0-1.098 0-1.246.237s.016.562.343 1.21c.182.36.28.621.28 1.025v2.66c0 .84 0 1.261-.32 1.386c-.32.124-.585-.158-1.117-.722c-1.3-1.384-1.978-3.112-2.423-4.996c-.092-.39-.138-.585-.276-.693S5.576 6 5.184 6h-2.2c-.482 0-.723 0-.874.17c-.15.171-.121.389-.063.824c.528 3.927 3.981 10.366 10.36 10.98c1.13.108 1.593-.197 1.593-1.435c0-.702-.015-1.836.868-1.985c.463-.078.774.087 1.291.52c.896.752 1.366 1.67 1.693 2.367c.217.462.378.559.888.559h2.074c1.048 0 1.333-.256.866-1.24a9 9 0 0 0-2.196-2.893c-.636-.547-.953-.82-.97-1.022c-.019-.201.214-.486.68-1.056c.9-1.102 2.126-2.831 2.698-4.666c.284-.91.017-1.123-.904-1.123h-1.863c-.903 0-.902-.031-1.115.993c-.346 1.661-1.478 3.258-2.542 4.345c-.505.516-.81.827-1.125.7S14 11.524 14 10.748'
|
||||
color='#19bb3f'
|
||||
></path>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
//MdiYoutube
|
||||
const Youtube = (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='m10 15l5.19-3L10 9zm11.56-7.83c.13.47.22 1.1.28 1.9c.07.8.1 1.49.1 2.09L22 12c0 2.19-.16 3.8-.44 4.83c-.25.9-.83 1.48-1.73 1.73c-.47.13-1.33.22-2.65.28c-1.3.07-2.49.1-3.59.1L12 19c-4.19 0-6.8-.16-7.83-.44c-.9-.25-1.48-.83-1.73-1.73c-.13-.47-.22-1.1-.28-1.9c-.07-.8-.1-1.49-.1-2.09L2 12c0-2.19.16-3.8.44-4.83c.25-.9.83-1.48 1.73-1.73c.47-.13 1.33-.22 2.65-.28c1.3-.07 2.49-.1 3.59-.1L12 5c4.19 0 6.8.16 7.83.44c.9.25 1.48.83 1.73 1.73'
|
||||
></path>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
//WeuiArrowFilled
|
||||
const MenuArrow = (props: SVGIcon) => {
|
||||
return (
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width={12}
|
||||
height={24}
|
||||
viewBox='0 0 12 24'
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fill='currentColor'
|
||||
fillRule='evenodd'
|
||||
d='M10.157 12.711L4.5 18.368l-1.414-1.414l4.95-4.95l-4.95-4.95L4.5 5.64l5.657 5.657a1 1 0 0 1 0 1.414'
|
||||
></path>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
//MagePhoneFill
|
||||
const BtnPhone = (props: SVGIcon) => (
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width={24}
|
||||
height={24}
|
||||
viewBox='0 0 24 24'
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fill='currentColor'
|
||||
d='M21.963 18.855a2.74 2.74 0 0 1-.898 1.47a5.36 5.36 0 0 1-3.848 1.602h-.358a11.4 11.4 0 0 1-4.287-1.082c-.326-.153-.643-.296-1.02-.47A19.8 19.8 0 0 1 7.253 17.1a18.6 18.6 0 0 1-4.012-5.451A11.9 11.9 0 0 1 2.15 8.106a6.5 6.5 0 0 1 .418-3.808a7 7 0 0 1 1.174-1.48a2.3 2.3 0 0 1 1.634-.745a2.54 2.54 0 0 1 1.725.95c.47.52 1.02 1.02 1.52 1.55l.644.634c.38.333.615.802.653 1.306c.001.464-.17.911-.48 1.256a9 9 0 0 1-.622.694l-.215.225a1.15 1.15 0 0 0-.286.418c-.052.154-.07.318-.05.48c.164.444.421.848.755 1.184c.52.704 1.02 1.317 1.582 2.042a13.3 13.3 0 0 0 3.4 2.807c.123.1.27.167.428.194c.14.021.281 0 .408-.062a3.5 3.5 0 0 0 1.021-.826c.36-.444.882-.726 1.45-.787a2.04 2.04 0 0 1 1.46.623q.35.302.663.643l.306.327l.317.306c.193.194.377.368.56.572q.5.43.93.929c.293.374.441.842.418 1.317'
|
||||
></path>
|
||||
</svg>
|
||||
);
|
||||
|
||||
//HealthiconsHomeOutline
|
||||
const Home = (props: SVGIcon) => (
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width={200}
|
||||
height={200}
|
||||
viewBox='0 0 48 48'
|
||||
{...props}
|
||||
>
|
||||
<g fill='currentColor'>
|
||||
<path d='M24.507 10.138a1 1 0 0 0-1.014 0L5.631 20.645l1.014 1.724L24 12.16l17.355 10.21l1.014-1.724L36 16.9V12a1 1 0 0 0-1-1h-3a1 1 0 0 0-1 1v1.957zM14 25h11v6H14z'></path>
|
||||
<path
|
||||
fillRule='evenodd'
|
||||
d='m24 14l-14 8v14H5a1 1 0 1 0 0 2h36a1 1 0 1 0 0-2h-3V22zm0 2.303l-12 6.858V36h16V25h6v11h2V23.16z'
|
||||
clipRule='evenodd'
|
||||
></path>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
||||
// PhPhoneCall
|
||||
const ContactCall = (props: SVGIcon) => (
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width={96}
|
||||
height={96}
|
||||
viewBox='0 0 256 256'
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fill='currentColor'
|
||||
d='M144.27 45.93a8 8 0 0 1 9.8-5.66a86.22 86.22 0 0 1 61.66 61.66a8 8 0 0 1-5.66 9.8a8.2 8.2 0 0 1-2.07.27a8 8 0 0 1-7.73-5.94a70.35 70.35 0 0 0-50.33-50.33a8 8 0 0 1-5.67-9.8m-2.33 41.8c13.79 3.68 22.65 12.54 26.33 26.33A8 8 0 0 0 176 120a8.2 8.2 0 0 0 2.07-.27a8 8 0 0 0 5.66-9.8c-5.12-19.16-18.5-32.54-37.66-37.66a8 8 0 1 0-4.13 15.46m81.94 95.35A56.26 56.26 0 0 1 168 232C88.6 232 24 167.4 24 88a56.26 56.26 0 0 1 48.92-55.88a16 16 0 0 1 16.62 9.52l21.12 47.15v.12a16 16 0 0 1-1.27 15.09c-.18.27-.37.52-.57.77L88 129.45c7.49 15.22 23.41 31 38.83 38.51l24.34-20.71a8 8 0 0 1 .75-.56a16 16 0 0 1 15.17-1.4l.13.06l47.11 21.11a16 16 0 0 1 9.55 16.62m-15.88-2h-.11l-47-21.05l-24.35 20.71a8 8 0 0 1-.74.56a16 16 0 0 1-15.75 1.14c-18.73-9.05-37.4-27.58-46.46-46.11a16 16 0 0 1 1-15.7a6 6 0 0 1 .57-.77L96 95.15l-21-47a.6.6 0 0 1 0-.12A40.2 40.2 0 0 0 40 88a128.14 128.14 0 0 0 128 128a40.21 40.21 0 0 0 40-34.93Z'
|
||||
></path>
|
||||
</svg>
|
||||
);
|
||||
|
||||
//StreamlineFastforwardClock
|
||||
const ContactTimer = (props: SVGIcon) => (
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width={96}
|
||||
height={96}
|
||||
viewBox='0 0 14 14'
|
||||
{...props}
|
||||
>
|
||||
<g fill='none' stroke='currentColor' strokeLinecap='round' strokeWidth={1}>
|
||||
<path strokeLinejoin='round' d='M7 3.5v4l2.6 1.3'></path>
|
||||
<path d='M13.326 8.5a6.5 6.5 0 1 1-.558-4.5'></path>
|
||||
<path strokeLinejoin='round' d='M13.5 2v2.5H11'></path>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
||||
//RiWhatsappLine
|
||||
const ContactWhatsapp = (props: SVGIcon) => {
|
||||
return (
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width={96}
|
||||
height={96}
|
||||
viewBox='0 0 24 24'
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fill='currentColor'
|
||||
d='m7.254 18.494l.724.423A7.95 7.95 0 0 0 12.001 20a8 8 0 1 0-8-8a7.95 7.95 0 0 0 1.084 4.024l.422.724l-.653 2.401zM2.005 22l1.352-4.968A9.95 9.95 0 0 1 2.001 12c0-5.523 4.477-10 10-10s10 4.477 10 10s-4.477 10-10 10a9.95 9.95 0 0 1-5.03-1.355zM8.392 7.308q.202-.014.403-.004q.081.006.162.016c.159.018.334.115.393.249q.447 1.015.868 2.04c.062.152.025.347-.093.537c-.06.097-.154.233-.263.372c-.113.145-.356.411-.356.411s-.099.118-.061.265c.014.056.06.137.102.205l.059.095c.256.427.6.86 1.02 1.268c.12.116.237.235.363.346c.468.413.998.75 1.57 1l.005.002c.085.037.128.057.252.11q.093.039.191.066q.036.01.073.011a.35.35 0 0 0 .295-.142c.723-.876.79-.933.795-.933v.002a.48.48 0 0 1 .378-.127q.092.004.177.04c.531.243 1.4.622 1.4.622l.582.261c.098.047.187.158.19.265c.004.067.01.175-.013.373c-.032.259-.11.57-.188.733a1.2 1.2 0 0 1-.21.302a2.4 2.4 0 0 1-.33.288q-.124.092-.125.09a5 5 0 0 1-.383.22a2 2 0 0 1-.833.23c-.185.01-.37.024-.556.014c-.008 0-.568-.087-.568-.087a9.45 9.45 0 0 1-3.84-2.046c-.226-.199-.436-.413-.65-.626c-.888-.885-1.561-1.84-1.97-2.742a3.5 3.5 0 0 1-.33-1.413a2.73 2.73 0 0 1 .565-1.68c.073-.094.142-.192.261-.305c.126-.12.207-.184.294-.228a1 1 0 0 1 .371-.1'
|
||||
></path>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
//Fa6BrandsCloudscale
|
||||
const CloudScale = (props: SVGIcon) => (
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width={84}
|
||||
height={96}
|
||||
viewBox='0 0 448 512'
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fill='currentColor'
|
||||
d='m318.1 154l-9.4 7.6c-22.5-19.3-51.5-33.6-83.3-33.6C153.8 128 96 188.8 96 260.3c0 6.6.4 13.1 1.4 19.4c-2-56 41.8-97.4 92.6-97.4c24.2 0 46.2 9.4 62.6 24.7l-25.2 20.4c-8.3-.9-16.8 1.8-23.1 8.1c-11.1 11-11.1 28.9 0 40c11.1 11 28.9 11 40 0c6.3-6.3 9-14.9 8.1-23.1l75.2-88.8c6.3-6.5-3.3-15.9-9.5-9.6m-83.8 111.5c-5.6 5.5-14.6 5.5-20.2 0c-5.6-5.6-5.6-14.6 0-20.2s14.6-5.6 20.2 0s5.6 14.7 0 20.2M224 32C100.5 32 0 132.5 0 256s100.5 224 224 224s224-100.5 224-224S347.5 32 224 32m0 384c-88.2 0-160-71.8-160-160S135.8 96 224 96s160 71.8 160 160s-71.8 160-160 160'
|
||||
></path>
|
||||
</svg>
|
||||
);
|
||||
|
||||
//FaSolidMailBulk
|
||||
const MailBulk = (props: SVGIcon) => (
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width={108}
|
||||
height={96}
|
||||
viewBox='0 0 576 512'
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fill='currentColor'
|
||||
d='M160 448c-25.6 0-51.2-22.4-64-32c-64-44.8-83.2-60.8-96-70.4V480c0 17.67 14.33 32 32 32h256c17.67 0 32-14.33 32-32V345.6c-12.8 9.6-32 25.6-96 70.4c-12.8 9.6-38.4 32-64 32m128-192H32c-17.67 0-32 14.33-32 32v16c25.6 19.2 22.4 19.2 115.2 86.4c9.6 6.4 28.8 25.6 44.8 25.6s35.2-19.2 44.8-22.4c92.8-67.2 89.6-67.2 115.2-86.4V288c0-17.67-14.33-32-32-32m256-96H224c-17.67 0-32 14.33-32 32v32h96c33.21 0 60.59 25.42 63.71 57.82l.29-.22V416h192c17.67 0 32-14.33 32-32V192c0-17.67-14.33-32-32-32m-32 128h-64v-64h64zm-352-96c0-35.29 28.71-64 64-64h224V32c0-17.67-14.33-32-32-32H96C78.33 0 64 14.33 64 32v192h96z'
|
||||
></path>
|
||||
</svg>
|
||||
);
|
||||
|
||||
//LaWeixin
|
||||
const Consultation = (props: SVGIcon) => (
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width={96}
|
||||
height={96}
|
||||
viewBox='0 0 32 32'
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fill='currentColor'
|
||||
d='M14 5C8.578 5 4 8.71 4 13.5c0 1.617.594 3.102 1.5 4.375l-.375 2.906l-.219 1.75l1.594-.687L9 20.812a11.4 11.4 0 0 0 4.156 1.125C13.886 24.892 16.976 27 20.5 27c1.453 0 2.781-.41 3.938-1.031l1.187.687l1.719.938l-.25-1.938l-.219-1.812C27.539 22.89 28 21.8 28 20.594c0-2.559-1.707-4.703-4.125-5.75c.086-.438.125-.875.125-1.344C24 8.71 19.422 5 14 5m0 2c4.52 0 8 3.008 8 6.5q0 .4-.063.781a8.3 8.3 0 0 0-1.437-.125c-3.8 0-7.09 2.461-7.469 5.781c-1.32-.132-2.531-.511-3.562-1.093l-.438-.219l-.437.188l-1.281.53l.218-1.53l.032-.438l-.25-.313C6.473 16.023 6 14.806 6 13.5C6 10.008 9.48 7 14 7m-3.438 2.156c-.777 0-1.406.63-1.406 1.406c0 .778.63 1.438 1.406 1.438c.778 0 1.407-.66 1.407-1.438s-.63-1.406-1.406-1.406zm6.688 0c-.777 0-1.438.63-1.438 1.406c0 .778.66 1.438 1.438 1.438s1.406-.66 1.406-1.438s-.629-1.406-1.406-1.406m3.25 7c3.14 0 5.5 2.094 5.5 4.438c0 .886-.32 1.691-.906 2.406l-.282.344l.063.406l.031.188l-.468-.25l-.5.343c-.934.606-2.125.969-3.438.969c-3.14 0-5.5-2.063-5.5-4.406c0-2.344 2.36-4.438 5.5-4.438M18 17.438c-.59 0-1.094.472-1.094 1.062s.504 1.063 1.094 1.063c.586 0 1.063-.473 1.063-1.063S18.59 17.437 18 17.437zm5.031 0a1.06 1.06 0 0 0-1.062 1.062c0 .59.472 1.063 1.062 1.063s1.063-.473 1.063-1.063s-.473-1.063-1.063-1.063z'
|
||||
></path>
|
||||
</svg>
|
||||
);
|
||||
|
||||
//RiMapPinLine
|
||||
const MapOutline = (props: SVGProps<SVGSVGElement>) => (
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width={96}
|
||||
height={96}
|
||||
viewBox='0 0 24 24'
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fill='currentColor'
|
||||
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>
|
||||
);
|
||||
|
||||
export {
|
||||
Map,
|
||||
Envelope,
|
||||
Whatsapp,
|
||||
Telegram,
|
||||
Phone,
|
||||
Vk,
|
||||
Youtube,
|
||||
MenuArrow,
|
||||
BtnPhone,
|
||||
Home,
|
||||
ContactCall,
|
||||
ContactTimer,
|
||||
ContactWhatsapp,
|
||||
CloudScale,
|
||||
MailBulk,
|
||||
Consultation,
|
||||
MapOutline,
|
||||
};
|
||||
1214
src/shared/ui/icon/service-grid.tsx
Normal file
1214
src/shared/ui/icon/service-grid.tsx
Normal file
File diff suppressed because one or more lines are too long
@@ -1,318 +1,53 @@
|
||||
/** Based on https://iconify.design/
|
||||
*
|
||||
*/
|
||||
import type { SVGProps } from 'react';
|
||||
|
||||
type SVGIcon = SVGProps<SVGSVGElement>;
|
||||
import {
|
||||
Map,
|
||||
Envelope,
|
||||
Whatsapp,
|
||||
Telegram,
|
||||
Phone,
|
||||
Vk,
|
||||
Youtube,
|
||||
MenuArrow,
|
||||
BtnPhone,
|
||||
Home,
|
||||
ContactCall,
|
||||
ContactTimer,
|
||||
ContactWhatsapp,
|
||||
CloudScale,
|
||||
MailBulk,
|
||||
Consultation,
|
||||
MapOutline,
|
||||
} from './base';
|
||||
|
||||
//RiMapPinLine
|
||||
const Map = (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
|
||||
const Envelope = (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
|
||||
const Whatsapp = (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
|
||||
const Telegram = (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
|
||||
const Phone = (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>
|
||||
);
|
||||
};
|
||||
|
||||
//HugeiconsVk
|
||||
const Vk = (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={1.5}
|
||||
d='M14 10.749V7.053c0-.833-.151-1-.98-1L10.67 6c-.732 0-1.098 0-1.246.237s.016.562.343 1.21c.182.36.28.621.28 1.025v2.66c0 .84 0 1.261-.32 1.386c-.32.124-.585-.158-1.117-.722c-1.3-1.384-1.978-3.112-2.423-4.996c-.092-.39-.138-.585-.276-.693S5.576 6 5.184 6h-2.2c-.482 0-.723 0-.874.17c-.15.171-.121.389-.063.824c.528 3.927 3.981 10.366 10.36 10.98c1.13.108 1.593-.197 1.593-1.435c0-.702-.015-1.836.868-1.985c.463-.078.774.087 1.291.52c.896.752 1.366 1.67 1.693 2.367c.217.462.378.559.888.559h2.074c1.048 0 1.333-.256.866-1.24a9 9 0 0 0-2.196-2.893c-.636-.547-.953-.82-.97-1.022c-.019-.201.214-.486.68-1.056c.9-1.102 2.126-2.831 2.698-4.666c.284-.91.017-1.123-.904-1.123h-1.863c-.903 0-.902-.031-1.115.993c-.346 1.661-1.478 3.258-2.542 4.345c-.505.516-.81.827-1.125.7S14 11.524 14 10.748'
|
||||
color='#19bb3f'
|
||||
></path>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
//MdiYoutube
|
||||
const Youtube = (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='m10 15l5.19-3L10 9zm11.56-7.83c.13.47.22 1.1.28 1.9c.07.8.1 1.49.1 2.09L22 12c0 2.19-.16 3.8-.44 4.83c-.25.9-.83 1.48-1.73 1.73c-.47.13-1.33.22-2.65.28c-1.3.07-2.49.1-3.59.1L12 19c-4.19 0-6.8-.16-7.83-.44c-.9-.25-1.48-.83-1.73-1.73c-.13-.47-.22-1.1-.28-1.9c-.07-.8-.1-1.49-.1-2.09L2 12c0-2.19.16-3.8.44-4.83c.25-.9.83-1.48 1.73-1.73c.47-.13 1.33-.22 2.65-.28c1.3-.07 2.49-.1 3.59-.1L12 5c4.19 0 6.8.16 7.83.44c.9.25 1.48.83 1.73 1.73'
|
||||
></path>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
//WeuiArrowFilled
|
||||
const MenuArrow = (props: SVGIcon) => {
|
||||
return (
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width={12}
|
||||
height={24}
|
||||
viewBox='0 0 12 24'
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fill='currentColor'
|
||||
fillRule='evenodd'
|
||||
d='M10.157 12.711L4.5 18.368l-1.414-1.414l4.95-4.95l-4.95-4.95L4.5 5.64l5.657 5.657a1 1 0 0 1 0 1.414'
|
||||
></path>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
//MagePhoneFill
|
||||
const BtnPhone = (props: SVGIcon) => (
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width={24}
|
||||
height={24}
|
||||
viewBox='0 0 24 24'
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fill='currentColor'
|
||||
d='M21.963 18.855a2.74 2.74 0 0 1-.898 1.47a5.36 5.36 0 0 1-3.848 1.602h-.358a11.4 11.4 0 0 1-4.287-1.082c-.326-.153-.643-.296-1.02-.47A19.8 19.8 0 0 1 7.253 17.1a18.6 18.6 0 0 1-4.012-5.451A11.9 11.9 0 0 1 2.15 8.106a6.5 6.5 0 0 1 .418-3.808a7 7 0 0 1 1.174-1.48a2.3 2.3 0 0 1 1.634-.745a2.54 2.54 0 0 1 1.725.95c.47.52 1.02 1.02 1.52 1.55l.644.634c.38.333.615.802.653 1.306c.001.464-.17.911-.48 1.256a9 9 0 0 1-.622.694l-.215.225a1.15 1.15 0 0 0-.286.418c-.052.154-.07.318-.05.48c.164.444.421.848.755 1.184c.52.704 1.02 1.317 1.582 2.042a13.3 13.3 0 0 0 3.4 2.807c.123.1.27.167.428.194c.14.021.281 0 .408-.062a3.5 3.5 0 0 0 1.021-.826c.36-.444.882-.726 1.45-.787a2.04 2.04 0 0 1 1.46.623q.35.302.663.643l.306.327l.317.306c.193.194.377.368.56.572q.5.43.93.929c.293.374.441.842.418 1.317'
|
||||
></path>
|
||||
</svg>
|
||||
);
|
||||
|
||||
//HealthiconsHomeOutline
|
||||
const Home = (props: SVGIcon) => (
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width={200}
|
||||
height={200}
|
||||
viewBox='0 0 48 48'
|
||||
{...props}
|
||||
>
|
||||
<g fill='currentColor'>
|
||||
<path d='M24.507 10.138a1 1 0 0 0-1.014 0L5.631 20.645l1.014 1.724L24 12.16l17.355 10.21l1.014-1.724L36 16.9V12a1 1 0 0 0-1-1h-3a1 1 0 0 0-1 1v1.957zM14 25h11v6H14z'></path>
|
||||
<path
|
||||
fillRule='evenodd'
|
||||
d='m24 14l-14 8v14H5a1 1 0 1 0 0 2h36a1 1 0 1 0 0-2h-3V22zm0 2.303l-12 6.858V36h16V25h6v11h2V23.16z'
|
||||
clipRule='evenodd'
|
||||
></path>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
||||
// PhPhoneCall
|
||||
const ContactCall = (props: SVGIcon) => (
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width={96}
|
||||
height={96}
|
||||
viewBox='0 0 256 256'
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fill='currentColor'
|
||||
d='M144.27 45.93a8 8 0 0 1 9.8-5.66a86.22 86.22 0 0 1 61.66 61.66a8 8 0 0 1-5.66 9.8a8.2 8.2 0 0 1-2.07.27a8 8 0 0 1-7.73-5.94a70.35 70.35 0 0 0-50.33-50.33a8 8 0 0 1-5.67-9.8m-2.33 41.8c13.79 3.68 22.65 12.54 26.33 26.33A8 8 0 0 0 176 120a8.2 8.2 0 0 0 2.07-.27a8 8 0 0 0 5.66-9.8c-5.12-19.16-18.5-32.54-37.66-37.66a8 8 0 1 0-4.13 15.46m81.94 95.35A56.26 56.26 0 0 1 168 232C88.6 232 24 167.4 24 88a56.26 56.26 0 0 1 48.92-55.88a16 16 0 0 1 16.62 9.52l21.12 47.15v.12a16 16 0 0 1-1.27 15.09c-.18.27-.37.52-.57.77L88 129.45c7.49 15.22 23.41 31 38.83 38.51l24.34-20.71a8 8 0 0 1 .75-.56a16 16 0 0 1 15.17-1.4l.13.06l47.11 21.11a16 16 0 0 1 9.55 16.62m-15.88-2h-.11l-47-21.05l-24.35 20.71a8 8 0 0 1-.74.56a16 16 0 0 1-15.75 1.14c-18.73-9.05-37.4-27.58-46.46-46.11a16 16 0 0 1 1-15.7a6 6 0 0 1 .57-.77L96 95.15l-21-47a.6.6 0 0 1 0-.12A40.2 40.2 0 0 0 40 88a128.14 128.14 0 0 0 128 128a40.21 40.21 0 0 0 40-34.93Z'
|
||||
></path>
|
||||
</svg>
|
||||
);
|
||||
|
||||
//StreamlineFastforwardClock
|
||||
const ContactTimer = (props: SVGIcon) => (
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width={96}
|
||||
height={96}
|
||||
viewBox='0 0 14 14'
|
||||
{...props}
|
||||
>
|
||||
<g fill='none' stroke='currentColor' strokeLinecap='round' strokeWidth={1}>
|
||||
<path strokeLinejoin='round' d='M7 3.5v4l2.6 1.3'></path>
|
||||
<path d='M13.326 8.5a6.5 6.5 0 1 1-.558-4.5'></path>
|
||||
<path strokeLinejoin='round' d='M13.5 2v2.5H11'></path>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
||||
//RiWhatsappLine
|
||||
const ContactWhatsapp = (props: SVGIcon) => {
|
||||
return (
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width={96}
|
||||
height={96}
|
||||
viewBox='0 0 24 24'
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fill='currentColor'
|
||||
d='m7.254 18.494l.724.423A7.95 7.95 0 0 0 12.001 20a8 8 0 1 0-8-8a7.95 7.95 0 0 0 1.084 4.024l.422.724l-.653 2.401zM2.005 22l1.352-4.968A9.95 9.95 0 0 1 2.001 12c0-5.523 4.477-10 10-10s10 4.477 10 10s-4.477 10-10 10a9.95 9.95 0 0 1-5.03-1.355zM8.392 7.308q.202-.014.403-.004q.081.006.162.016c.159.018.334.115.393.249q.447 1.015.868 2.04c.062.152.025.347-.093.537c-.06.097-.154.233-.263.372c-.113.145-.356.411-.356.411s-.099.118-.061.265c.014.056.06.137.102.205l.059.095c.256.427.6.86 1.02 1.268c.12.116.237.235.363.346c.468.413.998.75 1.57 1l.005.002c.085.037.128.057.252.11q.093.039.191.066q.036.01.073.011a.35.35 0 0 0 .295-.142c.723-.876.79-.933.795-.933v.002a.48.48 0 0 1 .378-.127q.092.004.177.04c.531.243 1.4.622 1.4.622l.582.261c.098.047.187.158.19.265c.004.067.01.175-.013.373c-.032.259-.11.57-.188.733a1.2 1.2 0 0 1-.21.302a2.4 2.4 0 0 1-.33.288q-.124.092-.125.09a5 5 0 0 1-.383.22a2 2 0 0 1-.833.23c-.185.01-.37.024-.556.014c-.008 0-.568-.087-.568-.087a9.45 9.45 0 0 1-3.84-2.046c-.226-.199-.436-.413-.65-.626c-.888-.885-1.561-1.84-1.97-2.742a3.5 3.5 0 0 1-.33-1.413a2.73 2.73 0 0 1 .565-1.68c.073-.094.142-.192.261-.305c.126-.12.207-.184.294-.228a1 1 0 0 1 .371-.1'
|
||||
></path>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
//Fa6BrandsCloudscale
|
||||
const CloudScale = (props: SVGIcon) => (
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width={84}
|
||||
height={96}
|
||||
viewBox='0 0 448 512'
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fill='currentColor'
|
||||
d='m318.1 154l-9.4 7.6c-22.5-19.3-51.5-33.6-83.3-33.6C153.8 128 96 188.8 96 260.3c0 6.6.4 13.1 1.4 19.4c-2-56 41.8-97.4 92.6-97.4c24.2 0 46.2 9.4 62.6 24.7l-25.2 20.4c-8.3-.9-16.8 1.8-23.1 8.1c-11.1 11-11.1 28.9 0 40c11.1 11 28.9 11 40 0c6.3-6.3 9-14.9 8.1-23.1l75.2-88.8c6.3-6.5-3.3-15.9-9.5-9.6m-83.8 111.5c-5.6 5.5-14.6 5.5-20.2 0c-5.6-5.6-5.6-14.6 0-20.2s14.6-5.6 20.2 0s5.6 14.7 0 20.2M224 32C100.5 32 0 132.5 0 256s100.5 224 224 224s224-100.5 224-224S347.5 32 224 32m0 384c-88.2 0-160-71.8-160-160S135.8 96 224 96s160 71.8 160 160s-71.8 160-160 160'
|
||||
></path>
|
||||
</svg>
|
||||
);
|
||||
|
||||
//FaSolidMailBulk
|
||||
const MailBulk = (props: SVGIcon) => (
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width={108}
|
||||
height={96}
|
||||
viewBox='0 0 576 512'
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fill='currentColor'
|
||||
d='M160 448c-25.6 0-51.2-22.4-64-32c-64-44.8-83.2-60.8-96-70.4V480c0 17.67 14.33 32 32 32h256c17.67 0 32-14.33 32-32V345.6c-12.8 9.6-32 25.6-96 70.4c-12.8 9.6-38.4 32-64 32m128-192H32c-17.67 0-32 14.33-32 32v16c25.6 19.2 22.4 19.2 115.2 86.4c9.6 6.4 28.8 25.6 44.8 25.6s35.2-19.2 44.8-22.4c92.8-67.2 89.6-67.2 115.2-86.4V288c0-17.67-14.33-32-32-32m256-96H224c-17.67 0-32 14.33-32 32v32h96c33.21 0 60.59 25.42 63.71 57.82l.29-.22V416h192c17.67 0 32-14.33 32-32V192c0-17.67-14.33-32-32-32m-32 128h-64v-64h64zm-352-96c0-35.29 28.71-64 64-64h224V32c0-17.67-14.33-32-32-32H96C78.33 0 64 14.33 64 32v192h96z'
|
||||
></path>
|
||||
</svg>
|
||||
);
|
||||
|
||||
//LaWeixin
|
||||
const Consultation = (props: SVGIcon) => (
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width={96}
|
||||
height={96}
|
||||
viewBox='0 0 32 32'
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fill='currentColor'
|
||||
d='M14 5C8.578 5 4 8.71 4 13.5c0 1.617.594 3.102 1.5 4.375l-.375 2.906l-.219 1.75l1.594-.687L9 20.812a11.4 11.4 0 0 0 4.156 1.125C13.886 24.892 16.976 27 20.5 27c1.453 0 2.781-.41 3.938-1.031l1.187.687l1.719.938l-.25-1.938l-.219-1.812C27.539 22.89 28 21.8 28 20.594c0-2.559-1.707-4.703-4.125-5.75c.086-.438.125-.875.125-1.344C24 8.71 19.422 5 14 5m0 2c4.52 0 8 3.008 8 6.5q0 .4-.063.781a8.3 8.3 0 0 0-1.437-.125c-3.8 0-7.09 2.461-7.469 5.781c-1.32-.132-2.531-.511-3.562-1.093l-.438-.219l-.437.188l-1.281.53l.218-1.53l.032-.438l-.25-.313C6.473 16.023 6 14.806 6 13.5C6 10.008 9.48 7 14 7m-3.438 2.156c-.777 0-1.406.63-1.406 1.406c0 .778.63 1.438 1.406 1.438c.778 0 1.407-.66 1.407-1.438s-.63-1.406-1.406-1.406zm6.688 0c-.777 0-1.438.63-1.438 1.406c0 .778.66 1.438 1.438 1.438s1.406-.66 1.406-1.438s-.629-1.406-1.406-1.406m3.25 7c3.14 0 5.5 2.094 5.5 4.438c0 .886-.32 1.691-.906 2.406l-.282.344l.063.406l.031.188l-.468-.25l-.5.343c-.934.606-2.125.969-3.438.969c-3.14 0-5.5-2.063-5.5-4.406c0-2.344 2.36-4.438 5.5-4.438M18 17.438c-.59 0-1.094.472-1.094 1.062s.504 1.063 1.094 1.063c.586 0 1.063-.473 1.063-1.063S18.59 17.437 18 17.437zm5.031 0a1.06 1.06 0 0 0-1.062 1.062c0 .59.472 1.063 1.062 1.063s1.063-.473 1.063-1.063s-.473-1.063-1.063-1.063z'
|
||||
></path>
|
||||
</svg>
|
||||
);
|
||||
|
||||
//RiMapPinLine
|
||||
const MapOutline = (props: SVGProps<SVGSVGElement>) => (
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width={96}
|
||||
height={96}
|
||||
viewBox='0 0 24 24'
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fill='currentColor'
|
||||
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>
|
||||
);
|
||||
import {
|
||||
GridBook,
|
||||
GridBox,
|
||||
GridCar,
|
||||
GridComputer,
|
||||
GridDocument,
|
||||
GridMap,
|
||||
GridRoute,
|
||||
GridWall,
|
||||
GridInsurance,
|
||||
GridCollision,
|
||||
GridDocumentWithPen,
|
||||
GridJustice,
|
||||
GridPersonCombination,
|
||||
GridShield,
|
||||
GridStoreBar,
|
||||
GridTransferAccount,
|
||||
GridBlueprint,
|
||||
GridAuto,
|
||||
GridCrane,
|
||||
GridHouseWithAttic,
|
||||
GridMortgage,
|
||||
GridOffice,
|
||||
GridStore,
|
||||
GridWrite,
|
||||
} from './service-grid';
|
||||
|
||||
const Icons = Object.assign(
|
||||
{},
|
||||
@@ -335,6 +70,32 @@ const Icons = Object.assign(
|
||||
Consultation,
|
||||
MapOutline,
|
||||
},
|
||||
{
|
||||
GridBook,
|
||||
GridBox,
|
||||
GridCar,
|
||||
GridComputer,
|
||||
GridDocument,
|
||||
GridMap,
|
||||
GridRoute,
|
||||
GridWall,
|
||||
GridInsurance,
|
||||
GridCollision,
|
||||
GridDocumentWithPen,
|
||||
GridJustice,
|
||||
GridPersonCombination,
|
||||
GridShield,
|
||||
GridStoreBar,
|
||||
GridTransferAccount,
|
||||
GridBlueprint,
|
||||
GridAuto,
|
||||
GridCrane,
|
||||
GridHouseWithAttic,
|
||||
GridMortgage,
|
||||
GridOffice,
|
||||
GridStore,
|
||||
GridWrite,
|
||||
},
|
||||
);
|
||||
|
||||
export { Icons };
|
||||
|
||||
@@ -148,87 +148,4 @@
|
||||
color: $color-text;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.Service {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
max-width: rem(1540px);
|
||||
padding: 40px 10px;
|
||||
|
||||
@include iftablet {
|
||||
padding: 40px 20px;
|
||||
}
|
||||
@include iflaptop {
|
||||
padding: 40px 28px;
|
||||
}
|
||||
@include ifdesktop {
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.Title {
|
||||
font-family: $font-roboto;
|
||||
font-weight: 500;
|
||||
font-size: 32px;
|
||||
line-height: 100%;
|
||||
color: $color-text;
|
||||
text-align: center;
|
||||
margin-bottom: rem(40px);
|
||||
}
|
||||
|
||||
.Switcher {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
border: 1px solid $color-green;
|
||||
border-radius: rem(20px);
|
||||
margin-bottom: rem(40px);
|
||||
|
||||
.Button {
|
||||
box-sizing: border-box;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
border-radius: rem(18px);
|
||||
color: $color-green;
|
||||
text-transform: uppercase;
|
||||
|
||||
&_active {
|
||||
background-color: $color-green;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: rem(20px);
|
||||
|
||||
.Tile {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: rem(24px);
|
||||
border: 1px solid $color-green;
|
||||
padding: rem(20px) rem(40px);
|
||||
border-radius: rem(20px);
|
||||
//box-shadow: 4px 0px 10px 0px rgba(0,146,131,0.5);
|
||||
cursor: pointer;
|
||||
|
||||
font-family: $font-roboto;
|
||||
font-weight: 300;
|
||||
font-size: rem(16px);
|
||||
line-height: 100%;
|
||||
color: $color-green;
|
||||
text-align: center;
|
||||
&:hover {
|
||||
box-shadow: 4px 4px 10px 0px rgba(0,146,131,0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -3,8 +3,7 @@ import Image from 'next/image';
|
||||
import { Button, Icons, PartnersSlider } from '@shared/ui';
|
||||
import bg from '@public/images/bg-main.jpg';
|
||||
import lines from '@public/images/bg-lines.png';
|
||||
import clsx from 'clsx';
|
||||
import { ROUTES } from '@shared/const/route';
|
||||
import { ServiceGrid } from '@/widgets';
|
||||
|
||||
export default function Main() {
|
||||
return (
|
||||
@@ -47,23 +46,7 @@ export default function Main() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className={s.Service}>
|
||||
<h2 className={s.Title}>Выберите услугу</h2>
|
||||
|
||||
<div className={s.Switcher}>
|
||||
<div className={clsx(s.Button, s.Button_active)}>Экспертиза</div>
|
||||
<div className={s.Button}>Оценка</div>
|
||||
<div className={s.Button}>Юрист</div>
|
||||
</div>
|
||||
|
||||
<div className={s.Grid}>
|
||||
{servicesData.expertise.map(({ id, title, icon, url }, i) => (
|
||||
<div key={id} className={s.Tile}>
|
||||
{title}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
<ServiceGrid />
|
||||
|
||||
<section className={s.BottomRow}>
|
||||
<div className={s.LeftBlock}>
|
||||
@@ -83,151 +66,3 @@ export default function Main() {
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const servicesData = {
|
||||
expertise: [
|
||||
{
|
||||
id: 0,
|
||||
title: 'Строительно-техническая экспертиза',
|
||||
icon: '',
|
||||
url: ROUTES.EXPERTIZA_STROIT,
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: 'Автотехническая экспертиза',
|
||||
icon: '',
|
||||
url: ROUTES.EXPERTIZA_AUTOTECH,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Кадастровая экспертиза',
|
||||
icon: '',
|
||||
url: ROUTES.EXPERTIZA_KADASTR,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Технико-криминалистическая экспертиза',
|
||||
icon: '',
|
||||
url: ROUTES.EXPERTIZA_TECH_CRIM,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: 'Компьютерно-техническая экспертиза',
|
||||
icon: '',
|
||||
url: ROUTES.EXPERTIZA_COPMPUTER,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: 'Товароведческая экспертиза',
|
||||
icon: '',
|
||||
url: ROUTES.EXPERTIZA_TOVAR,
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: 'Трасологическая экспертиза',
|
||||
icon: '',
|
||||
url: ROUTES.EXPERTIZA_TRASOLOGIA,
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: 'Бухгалтерская экспертиза',
|
||||
icon: '',
|
||||
url: ROUTES.EXPERTIZA_BUHGALTER,
|
||||
},
|
||||
],
|
||||
ocenka: [
|
||||
{
|
||||
id: 0,
|
||||
title: 'Оценка недвижимого имущества',
|
||||
icon: '',
|
||||
url: ROUTES.OCENKA_NEDVIGA,
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: 'Оценка движимого имущества',
|
||||
icon: '',
|
||||
url: ROUTES.OCENKA_RYNOCHNAYA,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Оценка для наследства',
|
||||
icon: '',
|
||||
url: ROUTES.OCENKA_NASLEDSTVO,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Оценка предприятия, бизнеса',
|
||||
icon: '',
|
||||
url: ROUTES.OCENKA_BUSINESS,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: 'Оценка арендной платы',
|
||||
icon: '',
|
||||
url: ROUTES.OCENKA_ARENDA,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: 'Оценка для ипотеки',
|
||||
icon: '',
|
||||
url: ROUTES.OCENKA_IPOTEKA,
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: 'Оценка для нотариуса',
|
||||
icon: '',
|
||||
url: ROUTES.OCENKA_NOTARIUS,
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: 'Оценка машин и оборудования',
|
||||
icon: '',
|
||||
url: ROUTES.OCENKA_MASHINES,
|
||||
},
|
||||
],
|
||||
jurist: [
|
||||
{
|
||||
id: 0,
|
||||
title: 'Представительство в суде',
|
||||
icon: '',
|
||||
url: ROUTES.JURIST_PREDSTAVITELSTVO,
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: 'Банкротство физических лиц',
|
||||
icon: '',
|
||||
url: ROUTES.JURIST_BANKROTSTVO,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Сопровождение сделок, составление договоров',
|
||||
icon: '',
|
||||
url: ROUTES.JURIST_SDELKI_DOGOVORA,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Споры с застройщиком',
|
||||
icon: '',
|
||||
url: ROUTES.JURIST_ZEM_SPORY,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: 'Споры со страховой компанией',
|
||||
icon: '',
|
||||
url: ROUTES.JURIST_STRAHOVKA,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: 'Помощь должникам',
|
||||
icon: '',
|
||||
url: ROUTES.JURIST_DOLZHNIKAM,
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: 'Взыскание долгов с юридических лиц',
|
||||
icon: '',
|
||||
url: ROUTES.JURIST_DOLGI,
|
||||
},
|
||||
{ id: 7, title: 'Споры по ДТП', icon: '', url: ROUTES.JURIST_DTP },
|
||||
],
|
||||
};
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
export * from './header';
|
||||
export * from './footer';
|
||||
export * from './breadcrumbs';
|
||||
export * from './service-grid';
|
||||
|
||||
1
src/widgets/service-grid/index.ts
Normal file
1
src/widgets/service-grid/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export * from './ui';
|
||||
90
src/widgets/service-grid/styles.module.scss
Normal file
90
src/widgets/service-grid/styles.module.scss
Normal file
@@ -0,0 +1,90 @@
|
||||
|
||||
.Service {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
max-width: rem(1540px);
|
||||
padding: 40px 10px;
|
||||
|
||||
@include iftablet {
|
||||
padding: 40px 20px;
|
||||
}
|
||||
@include iflaptop {
|
||||
padding: 40px 28px;
|
||||
}
|
||||
@include ifdesktop {
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.Title {
|
||||
font-family: $font-roboto;
|
||||
font-weight: 500;
|
||||
font-size: 32px;
|
||||
line-height: 100%;
|
||||
color: $color-text;
|
||||
text-align: center;
|
||||
margin-bottom: rem(40px);
|
||||
}
|
||||
|
||||
.Switcher {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
border: 1px solid $color-green;
|
||||
border-radius: rem(20px);
|
||||
margin-bottom: rem(40px);
|
||||
|
||||
.Button {
|
||||
box-sizing: border-box;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
border-radius: rem(18px);
|
||||
color: $color-green;
|
||||
text-transform: uppercase;
|
||||
|
||||
&_active {
|
||||
background-color: $color-green;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: rem(20px);
|
||||
|
||||
.Tile {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: rem(24px);
|
||||
border: 1px solid $color-green;
|
||||
padding: rem(20px) rem(40px);
|
||||
border-radius: rem(20px);
|
||||
//box-shadow: 4px 0px 10px 0px rgba(0,146,131,0.5);
|
||||
cursor: pointer;
|
||||
|
||||
font-family: $font-roboto;
|
||||
font-weight: 300;
|
||||
font-size: rem(16px);
|
||||
line-height: 100%;
|
||||
color: $color-green;
|
||||
text-align: center;
|
||||
&:hover {
|
||||
box-shadow: 4px 4px 10px 0px rgba(0,146,131,0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.Icon {
|
||||
& img {
|
||||
fill: $color-green;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
188
src/widgets/service-grid/ui.tsx
Normal file
188
src/widgets/service-grid/ui.tsx
Normal file
@@ -0,0 +1,188 @@
|
||||
import s from './styles.module.scss';
|
||||
import { ROUTES } from '@shared/const/route';
|
||||
import clsx from 'clsx';
|
||||
import Image from 'next/image';
|
||||
|
||||
function ServiceGrid() {
|
||||
return (
|
||||
<section className={s.Service}>
|
||||
<h2 className={s.Title}>Выберите услугу</h2>
|
||||
|
||||
<div className={s.Switcher}>
|
||||
<div className={clsx(s.Button, s.Button_active)}>Экспертиза</div>
|
||||
<div className={s.Button}>Оценка</div>
|
||||
<div className={s.Button}>Юрист</div>
|
||||
</div>
|
||||
|
||||
<div className={s.Grid}>
|
||||
{servicesData.expertise.map(({ id, title, icon, url }, i) => (
|
||||
<div key={id} className={s.Tile}>
|
||||
<Image
|
||||
className={s.Icon}
|
||||
src={icon}
|
||||
alt={title}
|
||||
width={100}
|
||||
height={100}
|
||||
/>
|
||||
{title}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export { ServiceGrid };
|
||||
|
||||
const servicesData = {
|
||||
expertise: [
|
||||
{
|
||||
id: 0,
|
||||
title: 'Строительно-техническая экспертиза',
|
||||
icon: '/svg/service-grid/expertise/wall.svg',
|
||||
url: ROUTES.EXPERTIZA_STROIT,
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: 'Автотехническая экспертиза',
|
||||
icon: '/svg/service-grid/expertise/car.svg',
|
||||
url: ROUTES.EXPERTIZA_AUTOTECH,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Кадастровая экспертиза',
|
||||
icon: '/svg/service-grid/expertise/map.svg',
|
||||
url: ROUTES.EXPERTIZA_KADASTR,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Технико-криминалистическая экспертиза',
|
||||
icon: '/svg/service-grid/expertise/book.svg',
|
||||
url: ROUTES.EXPERTIZA_TECH_CRIM,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: 'Компьютерно-техническая экспертиза',
|
||||
icon: '/svg/service-grid/expertise/computer-monitor-and-mouse.svg',
|
||||
url: ROUTES.EXPERTIZA_COPMPUTER,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: 'Товароведческая экспертиза',
|
||||
icon: '/svg/service-grid/expertise/box.svg',
|
||||
url: ROUTES.EXPERTIZA_TOVAR,
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: 'Трасологическая экспертиза',
|
||||
icon: '/svg/service-grid/expertise/route.svg',
|
||||
url: ROUTES.EXPERTIZA_TRASOLOGIA,
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: 'Бухгалтерская экспертиза',
|
||||
icon: '/svg/service-grid/expertise/document.svg',
|
||||
url: ROUTES.EXPERTIZA_BUHGALTER,
|
||||
},
|
||||
],
|
||||
ocenka: [
|
||||
{
|
||||
id: 0,
|
||||
title: 'Оценка недвижимого имущества',
|
||||
icon: '/svg/service-grid/ocenka/',
|
||||
url: ROUTES.OCENKA_NEDVIGA,
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: 'Оценка движимого имущества',
|
||||
icon: '/svg/service-grid/ocenka/',
|
||||
url: ROUTES.OCENKA_RYNOCHNAYA,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Оценка для наследства',
|
||||
icon: '/svg/service-grid/ocenka/',
|
||||
url: ROUTES.OCENKA_NASLEDSTVO,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Оценка предприятия, бизнеса',
|
||||
icon: '/svg/service-grid/ocenka/',
|
||||
url: ROUTES.OCENKA_BUSINESS,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: 'Оценка арендной платы',
|
||||
icon: '/svg/service-grid/ocenka/',
|
||||
url: ROUTES.OCENKA_ARENDA,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: 'Оценка для ипотеки',
|
||||
icon: '/svg/service-grid/ocenka/',
|
||||
url: ROUTES.OCENKA_IPOTEKA,
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: 'Оценка для нотариуса',
|
||||
icon: '/svg/service-grid/ocenka/',
|
||||
url: ROUTES.OCENKA_NOTARIUS,
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: 'Оценка машин и оборудования',
|
||||
icon: '/svg/service-grid/ocenka/',
|
||||
url: ROUTES.OCENKA_MASHINES,
|
||||
},
|
||||
],
|
||||
jurist: [
|
||||
{
|
||||
id: 0,
|
||||
title: 'Представительство в суде',
|
||||
icon: '/svg/service-grid/jurist/',
|
||||
url: ROUTES.JURIST_PREDSTAVITELSTVO,
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: 'Банкротство физических лиц',
|
||||
icon: '/svg/service-grid/jurist/',
|
||||
url: ROUTES.JURIST_BANKROTSTVO,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Сопровождение сделок, составление договоров',
|
||||
icon: '/svg/service-grid/jurist/',
|
||||
url: ROUTES.JURIST_SDELKI_DOGOVORA,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Споры с застройщиком',
|
||||
icon: '/svg/service-grid/jurist/',
|
||||
url: ROUTES.JURIST_ZEM_SPORY,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: 'Споры со страховой компанией',
|
||||
icon: '/svg/service-grid/jurist/',
|
||||
url: ROUTES.JURIST_STRAHOVKA,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: 'Помощь должникам',
|
||||
icon: '/svg/service-grid/jurist/',
|
||||
url: ROUTES.JURIST_DOLZHNIKAM,
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: 'Взыскание долгов с юридических лиц',
|
||||
icon: '/svg/service-grid/jurist/',
|
||||
url: ROUTES.JURIST_DOLGI,
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: 'Споры по ДТП',
|
||||
icon: '/svg/service-grid/jurist/',
|
||||
url: ROUTES.JURIST_DTP,
|
||||
},
|
||||
],
|
||||
};
|
||||
Reference in New Issue
Block a user