Dev #1
@@ -30,11 +30,11 @@ export default function RootLayout({
|
|||||||
return (
|
return (
|
||||||
<html lang='en'>
|
<html lang='en'>
|
||||||
<body className={`${roboto.variable} ${montseratt.variable}`}>
|
<body className={`${roboto.variable} ${montseratt.variable}`}>
|
||||||
<Header />
|
|
||||||
<ModalProvider>
|
<ModalProvider>
|
||||||
|
<Header />
|
||||||
<main>{children}</main>
|
<main>{children}</main>
|
||||||
|
<Footer />
|
||||||
</ModalProvider>
|
</ModalProvider>
|
||||||
<Footer />
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -5,8 +5,11 @@ import { Icons } from '@shared/ui/icon';
|
|||||||
import { baseMenu } from '@shared/const/menu';
|
import { baseMenu } from '@shared/const/menu';
|
||||||
import { TMenu } from '@shared/types/menu';
|
import { TMenu } from '@shared/types/menu';
|
||||||
import dtrLogo from '@public/images/dtr-logo-eagle.png';
|
import dtrLogo from '@public/images/dtr-logo-eagle.png';
|
||||||
|
import { BeautyButton } from '@/entities';
|
||||||
|
|
||||||
function BaseMenu() {
|
function BaseMenu() {
|
||||||
|
const phone = '+7 (900) 241-34-34';
|
||||||
|
|
||||||
const Menu = ({ list }: { list: TMenu }) => {
|
const Menu = ({ list }: { list: TMenu }) => {
|
||||||
const nodeList = (list: TMenu) => {
|
const nodeList = (list: TMenu) => {
|
||||||
return list.map((item, index) => {
|
return list.map((item, index) => {
|
||||||
@@ -42,7 +45,7 @@ function BaseMenu() {
|
|||||||
<Image src={dtrLogo} alt={'ДиТрасо'} quality={75} priority />
|
<Image src={dtrLogo} alt={'ДиТрасо'} quality={75} priority />
|
||||||
<Menu list={baseMenu} />
|
<Menu list={baseMenu} />
|
||||||
<div className={s.Invite}>
|
<div className={s.Invite}>
|
||||||
<button>+7 (999) 123-45-67</button>
|
<BeautyButton>{phone}</BeautyButton>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
1
src/entities/beauty-button/index.ts
Normal file
1
src/entities/beauty-button/index.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export * from './ui';
|
||||||
54
src/entities/beauty-button/styles.module.scss
Normal file
54
src/entities/beauty-button/styles.module.scss
Normal file
@@ -0,0 +1,54 @@
|
|||||||
|
.Container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
|
||||||
|
@include ifdesktop {
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Button {
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
padding: 6px 10px;
|
||||||
|
border-radius: 28px;
|
||||||
|
background: #58c644;
|
||||||
|
background: -webkit-gradient(linear, left top, right top, from(#58c644), to(#009283));
|
||||||
|
background: linear-gradient(to right, #58c644 0%, #009283 100%);
|
||||||
|
|
||||||
|
@include ifdesktop {
|
||||||
|
gap: 8px;
|
||||||
|
padding: 10px 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.Phone {
|
||||||
|
font-family: $font-roboto;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 100%;
|
||||||
|
color: $color-white;
|
||||||
|
|
||||||
|
@include ifdesktop {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.Action {
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: $font-roboto;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: rem(14px);
|
||||||
|
line-height: 100%;
|
||||||
|
color: $color-green;
|
||||||
|
text-transform: lowercase;
|
||||||
|
|
||||||
|
@include ifdesktop {
|
||||||
|
font-size: rem(16px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
46
src/entities/beauty-button/ui.tsx
Normal file
46
src/entities/beauty-button/ui.tsx
Normal file
@@ -0,0 +1,46 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import s from './styles.module.scss';
|
||||||
|
import type { ReactNode, SVGProps } from 'react';
|
||||||
|
import { useModal } from '@core/providers/modal-provider';
|
||||||
|
import { ConsultationModal } from '@/feature/article';
|
||||||
|
|
||||||
|
type TBeautyButtonProps = {
|
||||||
|
children?: ReactNode;
|
||||||
|
onClick?: () => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
function BeautyButton({ children, onClick }: TBeautyButtonProps) {
|
||||||
|
const modal = useModal();
|
||||||
|
const openModal = () => modal.showModal(<ConsultationModal />);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={s.Container}>
|
||||||
|
<button className={s.Button} onClick={openModal}>
|
||||||
|
<PhoneIcon color={'white'} />
|
||||||
|
<span className={s.Phone}>{children}</span>
|
||||||
|
</button>
|
||||||
|
<p className={s.Action} onClick={openModal}>
|
||||||
|
Записаться
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
//MagePhoneFill
|
||||||
|
const PhoneIcon = (props: SVGProps<SVGSVGElement>) => (
|
||||||
|
<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>
|
||||||
|
);
|
||||||
|
|
||||||
|
export { BeautyButton };
|
||||||
@@ -3,3 +3,4 @@ export * from './base-menu';
|
|||||||
export * from './callback-form';
|
export * from './callback-form';
|
||||||
export * from './connect';
|
export * from './connect';
|
||||||
export * from './order-schema';
|
export * from './order-schema';
|
||||||
|
export * from './beauty-button';
|
||||||
|
|||||||
@@ -78,7 +78,7 @@ function ConsultationModal({}: ConsultationModalProps) {
|
|||||||
onSubmit={handleSubmit(onSubmit)}
|
onSubmit={handleSubmit(onSubmit)}
|
||||||
>
|
>
|
||||||
<h2 className={s.Title}>
|
<h2 className={s.Title}>
|
||||||
Мы подскажем, как решить ваши вопросы по пожарной безопасности.
|
Мы подскажем, как решить ваши вопросы по экспертизе или оценке.
|
||||||
</h2>
|
</h2>
|
||||||
<Controller
|
<Controller
|
||||||
control={control}
|
control={control}
|
||||||
|
|||||||
Reference in New Issue
Block a user