fixes
This commit is contained in:
23
src/App.tsx
23
src/App.tsx
@@ -57,7 +57,7 @@ function App() {
|
|||||||
]
|
]
|
||||||
|
|
||||||
const handleLink = () => {
|
const handleLink = () => {
|
||||||
const modal = document.getElementById('my_modal_2')
|
const modal = document.getElementById('navbar_modal')
|
||||||
if (modal) {
|
if (modal) {
|
||||||
(modal as HTMLDialogElement).close()
|
(modal as HTMLDialogElement).close()
|
||||||
}
|
}
|
||||||
@@ -68,11 +68,11 @@ function App() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<main className='w-full flex flex-col sm:gap-8 items-center'>
|
<main className='w-full flex flex-col sm:gap-8 items-center'>
|
||||||
<dialog id="my_modal_2" className="modal modal-end">
|
<dialog id="navbar_modal" className="modal modal-end">
|
||||||
<div className="modal-box w-3/4 flex flex-col gap-8">
|
<div className="modal-box w-3/4 flex flex-col gap-8">
|
||||||
<div className='flex flex-row justify-between items-center'>
|
<div className='flex flex-row justify-between items-center'>
|
||||||
<div className="logo">
|
<div className="logo">
|
||||||
<img className="dark:invert dark:hue-rotate-180" width={180} src='/logo-commit.png' />
|
<img className="dark:invert dark:hue-rotate-180" width={180} src='/assets/logo-commit.png' />
|
||||||
</div>
|
</div>
|
||||||
<form method="dialog">
|
<form method="dialog">
|
||||||
<button className="btn btn-sm btn-circle btn-ghost p-2 text-2xl">✕</button>
|
<button className="btn btn-sm btn-circle btn-ghost p-2 text-2xl">✕</button>
|
||||||
@@ -88,14 +88,14 @@ function App() {
|
|||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<form method="dialog" className="modal-backdrop backdrop-blur-xs">
|
<form method="dialog" className="modal-backdrop backdrop-blur-xs">
|
||||||
<button>close</button>
|
<button></button>
|
||||||
</form>
|
</form>
|
||||||
</dialog>
|
</dialog>
|
||||||
|
|
||||||
<Section>
|
<div className='max-w-7xl'>
|
||||||
<div className='h-full flex flex-col'>
|
<div className='h-full flex flex-col'>
|
||||||
<motion.header
|
<motion.header
|
||||||
className={`top-0 left-0 right-0 w-full backdrop-blur-2xl flex justify-center`}
|
className={`${isAtTop ? '' : 'opacity-0'} top-0 left-0 right-0 w-full backdrop-blur-2xl flex justify-center`}
|
||||||
initial={{ opacity: '0' }}
|
initial={{ opacity: '0' }}
|
||||||
whileInView={{ opacity: '1' }}
|
whileInView={{ opacity: '1' }}
|
||||||
>
|
>
|
||||||
@@ -113,16 +113,17 @@ function App() {
|
|||||||
<Navbar />
|
<Navbar />
|
||||||
</motion.header>
|
</motion.header>
|
||||||
|
|
||||||
<div className='relative grid sm:grid-cols-2 h-auto grow gap-8 rounded-2xl bg-base-200 p-8'>
|
<div className='relative grid sm:grid-cols-2 h-auto grow gap-8 rounded-2xl bg-[#F6F6F9] p-8'>
|
||||||
<div className='z-1 h-auto grow flex flex-col gap-4'>
|
<div className='z-1 h-auto grow flex flex-col gap-4'>
|
||||||
<span className='text-xs text-base-content/70 bg-base-100 rounded-2xl p-2 flex justify-center'>Все наши специалисты имеют профессиональное образование и опыт более 15 лет работы</span>
|
<span className='text-xs text-[#828282] bg-base-100 rounded-2xl p-2 flex justify-center'>
|
||||||
|
Все наши специалисты имеют профессиональное образование и опыт более 15 лет работы
|
||||||
|
</span>
|
||||||
|
|
||||||
<div className='text-3xl grid grid-rows-[repeat(4,1fr)] md:grid-rows-[1fr_1fr]'>
|
<div className='text-3xl grid grid-rows-[repeat(4,1fr)] md:grid-rows-[1fr_1fr]'>
|
||||||
<span className='row-span-2 md:row-span-1'>Программное обеспечение</span>
|
<span className='row-span-2 md:row-span-1'>Программное обеспечение</span>
|
||||||
<div className='row-span-2 inline-flex flex-wrap w-full text-blue-500 h-min'>
|
<div className='row-span-2 inline-flex flex-wrap w-full text-blue-500 h-min'>
|
||||||
<TypingSpan typingSpeed={40} deletingSpeed={20} pauseTime={2000} />
|
<TypingSpan typingSpeed={40} deletingSpeed={20} pauseTime={2000} />
|
||||||
</div>
|
</div>
|
||||||
{/* <span> — полный цикл разработки и технической поддержки</span> */}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<span className='text-base-content/70'>
|
<span className='text-base-content/70'>
|
||||||
@@ -130,7 +131,7 @@ function App() {
|
|||||||
</span>
|
</span>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<a href='#discuss' className='btn btn-lg font-light bg-blue-500 text-white rounded-full'>
|
<a href='#discuss' className='btn btn-lg text-white rounded-full font-light not-disabled:bg-[#1C8EFF]'>
|
||||||
Консультация
|
Консультация
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
@@ -200,7 +201,7 @@ function App() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</Section>
|
</div>
|
||||||
|
|
||||||
<CardsSection />
|
<CardsSection />
|
||||||
|
|
||||||
|
|||||||
@@ -2,26 +2,36 @@ import Braces from "./Braces"
|
|||||||
|
|
||||||
const DirectorSection = () => {
|
const DirectorSection = () => {
|
||||||
return (
|
return (
|
||||||
<div className='w-full max-w-7xl grid grid-cols-3 gap-4 px-2 py-4 xl:p-0'>
|
<div className='w-full max-w-7xl flex flex-col sm:grid sm:grid-cols-3 gap-4 px-10 py-4 xl:p-0'>
|
||||||
|
<div className="sm:hidden">
|
||||||
|
<Braces text={'Наша миссия'} />
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className='col-span-1'>
|
<div className='col-span-1'>
|
||||||
<img src='/assets/director.png' />
|
<img src='/assets/director.png' />
|
||||||
</div>
|
</div>
|
||||||
<div className='col-span-2 flex flex-col gap-2 sm:gap-8 font-light'>
|
<div className='col-span-2 flex flex-col gap-2 sm:gap-8'>
|
||||||
<Braces text={'Наша миссия'} />
|
<div className="hidden sm:block">
|
||||||
|
<Braces text={'Наша миссия'} />
|
||||||
|
</div>
|
||||||
<div className='w-4 sm:w-10 flex'>
|
<div className='w-4 sm:w-10 flex'>
|
||||||
<svg className='h-auto w-auto' width="40" height="31" viewBox="0 0 40 31" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg className='h-auto w-auto' width="40" height="31" viewBox="0 0 40 31" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M3.55112 28.3277C1.24054 25.8481 0 23.067 0 18.5587C0 10.6257 5.51175 3.51546 13.527 0L15.5303 3.12335C8.0489 7.21225 6.58628 12.5183 6.00303 15.8638C7.20767 15.2337 8.7847 15.0138 10.3303 15.1589C14.3772 15.5374 17.5672 18.8942 17.5672 23.067C17.5672 25.1709 16.74 27.1887 15.2675 28.6765C13.7951 30.1642 11.798 31 9.71566 31C8.56407 30.99 7.42597 30.7485 6.36763 30.2897C5.30929 29.8309 4.35186 29.164 3.55112 28.3277ZM25.984 28.3277C23.6734 25.8481 22.4328 23.067 22.4328 18.5587C22.4328 10.6257 27.9446 3.51546 35.9598 0L37.9631 3.12335C30.4817 7.21225 29.0191 12.5183 28.4359 15.8638C29.6405 15.2337 31.2175 15.0138 32.7632 15.1589C36.8101 15.5374 40 18.8942 40 23.067C40 25.1709 39.1728 27.1887 37.7004 28.6765C36.2279 30.1642 34.2309 31 32.1485 31C30.9969 30.99 29.8588 30.7485 28.8005 30.2897C27.7421 29.8309 26.7847 29.164 25.984 28.3277Z" fill="black" />
|
<path d="M3.55112 28.3277C1.24054 25.8481 0 23.067 0 18.5587C0 10.6257 5.51175 3.51546 13.527 0L15.5303 3.12335C8.0489 7.21225 6.58628 12.5183 6.00303 15.8638C7.20767 15.2337 8.7847 15.0138 10.3303 15.1589C14.3772 15.5374 17.5672 18.8942 17.5672 23.067C17.5672 25.1709 16.74 27.1887 15.2675 28.6765C13.7951 30.1642 11.798 31 9.71566 31C8.56407 30.99 7.42597 30.7485 6.36763 30.2897C5.30929 29.8309 4.35186 29.164 3.55112 28.3277ZM25.984 28.3277C23.6734 25.8481 22.4328 23.067 22.4328 18.5587C22.4328 10.6257 27.9446 3.51546 35.9598 0L37.9631 3.12335C30.4817 7.21225 29.0191 12.5183 28.4359 15.8638C29.6405 15.2337 31.2175 15.0138 32.7632 15.1589C36.8101 15.5374 40 18.8942 40 23.067C40 25.1709 39.1728 27.1887 37.7004 28.6765C36.2279 30.1642 34.2309 31 32.1485 31C30.9969 30.99 29.8588 30.7485 28.8005 30.2897C27.7421 29.8309 26.7847 29.164 25.984 28.3277Z" fill="black" />
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<span className='text-sm sm:text-3xl'>
|
<span className='text-xs sm:text-3xl'>
|
||||||
Нашей стратегией является превращать сложные задачи сферы ЖКХ <span className='text-blue-500'>в эффективные цифровые решения</span>. Мы разрабатываем автоматизацию для жизненно важной отрасли.
|
Нашей стратегией является превращать сложные задачи сферы ЖКХ <span className='text-blue-500'>в эффективные цифровые решения</span>. Мы разрабатываем автоматизацию для жизненно важной отрасли.
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<div className='flex flex-row justify-end mt-auto'>
|
<div className='flex flex-row gap-2 sm:grid sm:grid-cols-2 justify-end mt-auto'>
|
||||||
<span className='flex flex-col gap-4 text-end mb-8'>
|
<div className="flex justify-center items-center">
|
||||||
<span className='text-lg sm:text-xl'>— Саввинов Николай Афанасьевич</span>
|
<img className="max-w-64 w-full h-auto" src="/assets/sign.png" />
|
||||||
<span className='text-sm text-base-content/70'>директор ООО «КОММИТ»</span>
|
</div>
|
||||||
|
|
||||||
|
<span className='flex flex-col gap-2 text-end justify-center'>
|
||||||
|
<span className='text-xs sm:text-xl text-nowrap font-medium'>— Саввинов Николай Афанасьевич</span>
|
||||||
|
<span className='text-[0.5rem] sm:text-sm text-base-content/70 text-nowrap'>директор ООО «КОММИТ»</span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -64,7 +64,7 @@ const DiscussSection = () => {
|
|||||||
</span>
|
</span>
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<button disabled={(consult.phone == '') || (consult.email == '') || (consult.desc == '') || (consult.fio == '') || (!consult.conf)} onClick={() => mail()} className='btn btn-lg not-disabled:bg-blue-500 text-white rounded-full'>
|
<button disabled={(consult.phone == '') || (consult.email == '') || (consult.desc == '') || (consult.fio == '') || (!consult.conf)} onClick={() => mail()} className='btn btn-lg text-white rounded-full font-light not-disabled:bg-[#1C8EFF]'>
|
||||||
Оставить заявку
|
Оставить заявку
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
|||||||
@@ -1,19 +1,19 @@
|
|||||||
const Navbar = () => {
|
const Navbar = () => {
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-row p-4 w-full items-center max-w-7xl">
|
<div className="flex flex-row p-4 w-full items-center max-w-7xl">
|
||||||
<div className="logo">
|
<div className="mr-auto">
|
||||||
<img className="dark:invert dark:hue-rotate-180" width={200} src='/assets/logo-commit.png' />
|
<img className="dark:invert dark:hue-rotate-180" width={200} src='/assets/logo-commit.png' />
|
||||||
</div>
|
</div>
|
||||||
<nav className='p-4 hidden sm:flex'>
|
<nav className='p-4 hidden lg:flex items-center'>
|
||||||
<a href="#about" className='text-sm mx-4 text-base-content/70 hover:text-blue-500'>О компании</a>
|
<a href="#about" className='text-sm mx-4 text-base-content/70 hover:text-blue-500'>О компании</a>
|
||||||
<a href="#products" className='text-sm mx-4 text-base-content/70tent/70 hover:text-blue-500'>Программные продукты</a>
|
<a href="#products" className='text-sm mx-4 text-base-content/70tent/70 hover:text-blue-500'>Программные продукты</a>
|
||||||
<a href="#services" className='text-sm mx-4 text-base-content/70 hover:text-blue-500'>Услуги</a>
|
<a href="#services" className='text-sm mx-4 text-base-content/70 hover:text-blue-500'>Услуги</a>
|
||||||
<a href="#case" className='text-sm mx-4 text-base-content/70 hover:text-blue-500'>Главный кейс</a>
|
<a href="#case" className='text-sm mx-4 text-base-content/70 hover:text-blue-500'>Главный кейс</a>
|
||||||
<a href="#contacts" className='text-sm mx-4 text-base-content/70 hover:text-blue-500'>Контакты</a>
|
<a href="#contacts" className='text-sm mx-4 btn text-white rounded-full font-light not-disabled:bg-[#1C8EFF]'>Контакты</a>
|
||||||
</nav>
|
</nav>
|
||||||
<nav className="ml-auto sm:hidden">
|
<nav className="ml-auto lg:hidden">
|
||||||
<div className="btn btn-square btn-ghost" onClick={() => {
|
<div className="btn btn-square btn-ghost" onClick={() => {
|
||||||
const modal = document.getElementById('my_modal_2')
|
const modal = document.getElementById('navbar_modal')
|
||||||
if (modal) {
|
if (modal) {
|
||||||
(modal as HTMLDialogElement).showModal()
|
(modal as HTMLDialogElement).showModal()
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user