V0.1_1
parent
fd21c60372
commit
acd5c7e0d9
@ -0,0 +1,33 @@
|
||||
import React from 'react'
|
||||
import { StaticImage } from 'gatsby-plugin-image';
|
||||
import Title from '../UI/Title';
|
||||
import Button from '../UI/Button';
|
||||
|
||||
const Hero = () => {
|
||||
return (
|
||||
<section className={'bg-[#F7F7FF] pt-[70px] max-lg:pt-7 md:h-[1036px] xl:h-[760px] 2xl:h-[890px] max-sm:px-3 max-lg:px-6'}>
|
||||
<div className="container mx-auto flex flex-col items-center">
|
||||
<Title className='mb-0 max-md:mb-8 md:max-lg:mb-10' subtitle='Обеспечиваем надежный бизнес' h1>Надежный <span className='text-red-500'>партнер</span></Title>
|
||||
<div className="flex max-lg:flex-col justify-between items-center max-lg:items-start w-full">
|
||||
<div className="flex flex-col items-start max-md:mb-10">
|
||||
<div className="mb-10 max-md:mb-6 max-w-[462px] text-lg max-md:text-base leading-normal">
|
||||
<h3 className='text-slate-800 font-bold mb-[20px] max-md:mb-3'>Надежность и спокойствие</h3>
|
||||
<p className='text-slate-600 font-medium'>Наши специалисты гарантируютполный порядок в вашей бухгалтериии качественную поддержку во всехвозникающих вопросах. Простопозвоните нам и мы всерасскажем.</p>
|
||||
</div>
|
||||
<div className="mb-10 max-md:mb-6 max-w-[462px] text-lg max-md:text-base leading-normal">
|
||||
<h3 className='text-slate-800 font-bold mb-[20px] max-md:mb-3'>Ответственность</h3>
|
||||
<p className='text-slate-600 font-medium'>Наши специалисты гарантируютполный порядок в вашей бухгалтериии качественную поддержку во всехвозникающих вопросах. Простопозвоните нам и мы всерасскажем.</p>
|
||||
</div>
|
||||
<Button>Оставить заявку</Button>
|
||||
</div>
|
||||
<div className="w-[565px] max-lg:w-[360px] max-2xl:w-[475px] h-auto relative max-lg:self-center">
|
||||
<div className="bg-red-500 w-[560px] h-[560px] max-2xl:w-[470px] max-2xl:h-[470px] max-lg:w-[300px] max-lg:h-[300px] rounded-full absolute"></div>
|
||||
<StaticImage src="../../images/woman-account.png" quality='100' alt="hero" placeholder="blurred" className='object-cover w-full h-full rounded-[30px]'/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Hero;
|
||||
@ -0,0 +1,14 @@
|
||||
import React from 'react'
|
||||
import { GatsbyImage, getImage } from 'gatsby-plugin-image';
|
||||
|
||||
const Person = ({name, text, img}) => {
|
||||
return (
|
||||
<div className='h-full flex flex-col'>
|
||||
<GatsbyImage loading='lazy' className='h-[325px] rounded-[20px] w-full object-cover mb-[20px]' image={getImage(img)} alt="logo" placeholder="blurred"/>
|
||||
<p className='text-slate-800 text-xl font-semibold mb-[15px]'>{name}</p>
|
||||
<p className='text-slate-800 text-base font-normal leading-normal whitespace-pre-wrap max-w-[261px]'>{text}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Person;
|
||||
@ -0,0 +1,25 @@
|
||||
import React from 'react'
|
||||
import Title from '../UI/Title';
|
||||
import Ranges from './Ranges';
|
||||
import Output from './Output';
|
||||
import Addictional from './Addictional';
|
||||
|
||||
const Calculator = () => {
|
||||
return (
|
||||
<section className={'bg-[#F7F7FF] pt-[70px] max-2xl:pt-10 max-lg:pt-7 md:h-[700px] xl:h-[710px] 2xl:h-[890px] max-sm:px-3 max-lg:px-6'}>
|
||||
<div className="container h-full mx-auto flex flex-col items-center relative">
|
||||
<Title className='mb-[70px] max-2xl:mb-12 max-md:mb-4 md:max-lg:mb-8' subtitle='Точно рассчитайте свои затраты без лишних усилий' h1>Калькулятор стоимости <span className='text-red-500'>бухгалтерских услуг</span></Title>
|
||||
<div className="w-full flex justify-between">
|
||||
<div className="">
|
||||
<Ranges></Ranges>
|
||||
<Addictional></Addictional>
|
||||
</div>
|
||||
<Output></Output>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Calculator;
|
||||
@ -0,0 +1,16 @@
|
||||
import React from 'react'
|
||||
import { Link } from 'gatsby';
|
||||
|
||||
const Point2 = ({Ico, link = '/', title, text}) => {
|
||||
return (
|
||||
<Link to={link} className='bg-white text-7xl rounded-[20px] flex mb-[20px] flex-grow p-10 max-md:p-7'>
|
||||
<div className="text-slate-900 text-[54px] max-md:text-5xl mr-[30px]"><Ico addictionalColor='#ef4444'/></div>
|
||||
<div className="text-slate-900">
|
||||
<h3 className='text-lg font-semibold mb-[10px]'>{title}</h3>
|
||||
<p className='text-base font-medium leading-normal'>{text}</p>
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
export default Point2;
|
||||
@ -0,0 +1,18 @@
|
||||
import React from 'react';
|
||||
import uniqid from 'uniqid';
|
||||
import { BsCheck } from "@react-icons/all-files/bs/BsCheck";
|
||||
|
||||
const CheckBox = ({ className, labelClasses, label, wrapperClasses, name, ...props }) => {
|
||||
|
||||
const uid = uniqid();
|
||||
|
||||
return (
|
||||
<div className={['flex relative w-full', wrapperClasses].join(' ')}>
|
||||
<input type='checkbox' name={name} id={uid} className={['[&:checked+label]:before:bg-red-500 [&:checked+label]:before:border-red-500 [&:checked+label]:text-red-500 hidden w-full bg-transparent border-b-[1px] py-2 pl-[30px] pr-4 px-5 placeholder:text-white text-base font-normal text-white focus:outline-none focus:border-b-red-500 ', className].join(' ')} {...props} />
|
||||
<label htmlFor={uid} className={['cursor-pointer after:content-check before:w-5 before:h-5 after:w-3 after:h-3 after:absolute after:left-1 after:top-2 after:rounded-full before:absolute before:left-0 before:top-1 pl-9 relative before:bg-white before:border-[1.25px] before:border-slate-300 before:rounded-[5px] text-slate-800 text-lg font-medium', labelClasses].join(' ')}>{label}</label>
|
||||
</div>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
export default CheckBox;
|
||||
@ -0,0 +1,16 @@
|
||||
import React from 'react';
|
||||
import uniqid from 'uniqid';
|
||||
|
||||
const Radio = ({ className, labelClasses, label, wrapperClasses, name, ...props }) => {
|
||||
|
||||
const uid = uniqid();
|
||||
|
||||
return (
|
||||
<div className={['flex relative w-full', wrapperClasses].join(' ')}>
|
||||
<input type='radio' name={name} id={uid} className={['[&:checked+label]:after:bg-red-500 [&:checked+label]:before:border-red-500 [&:checked+label]:text-red-500 hidden w-full bg-transparent border-b-[1px] py-2 pl-[30px] pr-4 px-5 placeholder:text-white text-base font-normal text-white focus:outline-none focus:border-b-red-500 ', className].join(' ')} {...props} />
|
||||
<label htmlFor={uid} className={['cursor-pointer before:w-5 before:h-5 after:w-3 after:h-3 after:bg-white after:absolute after:left-1 after:top-2 after:rounded-full before:absolute before:left-0 before:top-1 pl-9 relative before:bg-white before:border-[1.25px] before:border-slate-300 before:rounded-full text-slate-800 text-lg font-medium', labelClasses].join(' ')}>{label}</label>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Radio;
|
||||
@ -0,0 +1,13 @@
|
||||
import React from 'react'
|
||||
|
||||
const Shield = () => {
|
||||
return (
|
||||
<svg width="1em" height="1em" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="material-symbols:shield-outline">
|
||||
<path id="Vector" d="M26.0003 47.6667C20.9809 46.4028 16.8368 43.5226 13.568 39.026C10.2992 34.5295 8.66555 29.5375 8.66699 24.05V10.8334L26.0003 4.33337L43.3337 10.8334V24.05C43.3337 29.5389 41.6993 34.5317 38.4305 39.0282C35.1617 43.5248 31.0183 46.4043 26.0003 47.6667ZM26.0003 43.1167C29.7559 41.925 32.8614 39.5417 35.317 35.9667C37.7725 32.3917 39.0003 28.4195 39.0003 24.05V13.8125L26.0003 8.93754L13.0003 13.8125V24.05C13.0003 28.4195 14.2281 32.3917 16.6837 35.9667C19.1392 39.5417 22.2448 41.925 26.0003 43.1167Z" fill="currentColor"/>
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default Shield;
|
||||
@ -1,5 +1 @@
|
||||
<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M66 36C66 19.431 52.569 6 36 6C19.431 6 6 19.431 6 36C6 52.569 19.431 66 36 66" stroke="#1E293B" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M38.9999 6.1499C38.9999 6.1499 47.9999 17.9999 47.9999 35.9999M32.9999 65.8499C32.9999 65.8499 23.9999 53.9999 23.9999 35.9999C23.9999 17.9999 32.9999 6.1499 32.9999 6.1499M7.88989 46.4999H35.9999M7.88989 25.4999H64.1099" stroke="#1E293B" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M65.6371 53.7509C67.1191 54.6629 67.0261 56.8799 65.5021 57.0539L57.8011 57.9269L54.3481 64.8629C53.6641 66.2399 51.5491 65.5649 51.1981 63.8609L47.4331 45.5129C47.1361 44.0729 48.4321 43.1669 49.6831 43.9379L65.6371 53.7509Z" stroke="#1E293B" stroke-width="3.5"/>
|
||||
</svg>
|
||||
<svg stroke="currentColor" fill="black" stroke-width="0" viewBox="0 0 16 16" height="20px" width="20px" xmlns="http://www.w3.org/2000/svg"><path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 867 B After Width: | Height: | Size: 313 B |
@ -0,0 +1,5 @@
|
||||
<svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="material-symbols:shield-outline">
|
||||
<path id="Vector" d="M26.0003 47.6667C20.9809 46.4028 16.8368 43.5226 13.568 39.026C10.2992 34.5295 8.66555 29.5375 8.66699 24.05V10.8334L26.0003 4.33337L43.3337 10.8334V24.05C43.3337 29.5389 41.6993 34.5317 38.4305 39.0282C35.1617 43.5248 31.0183 46.4043 26.0003 47.6667ZM26.0003 43.1167C29.7559 41.925 32.8614 39.5417 35.317 35.9667C37.7725 32.3917 39.0003 28.4195 39.0003 24.05V13.8125L26.0003 8.93754L13.0003 13.8125V24.05C13.0003 28.4195 14.2281 32.3917 16.6837 35.9667C19.1392 39.5417 22.2448 41.925 26.0003 43.1167Z" fill="white"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 688 B |
@ -0,0 +1 @@
|
||||
<svg stroke="currentColor" fill="black" stroke-width="0" viewBox="0 0 16 16" height="20px" width="20px" xmlns="http://www.w3.org/2000/svg"><path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"></path></svg>
|
||||
|
After Width: | Height: | Size: 313 B |
Binary file not shown.
|
After Width: | Height: | Size: 203 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 122 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 122 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 181 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 591 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 347 KiB |
@ -0,0 +1 @@
|
||||
<svg stroke="currentColor" fill="black" stroke-width="0" viewBox="0 0 16 16" height="20px" width="20px" xmlns="http://www.w3.org/2000/svg"><path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"></path></svg>
|
||||
|
After Width: | Height: | Size: 313 B |
Loading…
Reference in New Issue