popovspiridon99/commit-it
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
popovspiridon99
2026-03-27 11:20:54 +09:00
commit bdb16d5935
94 changed files with 2842 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

223
src/App.tsx Normal file
View File

@@ -0,0 +1,223 @@
import { useState } from 'react'
import { motion, useMotionValueEvent, useScroll } from "motion/react"
import TypingEffect from './components/TypingEffect'
import CardsSection from './components/CardsSection'
import Section from './components/Section'
import Marquee from './components/Marquee'
import Navbar from './components/Navbar'
import ServicesSection from './components/ServicesSection'
import ProductsSection from './components/ProductsSection'
import CaseSection from './components/CaseSection'
import Footer from './components/Footer'
import AboutSection from './components/AboutSection'
import LicenseSection from './components/LicenseSection'
import MissionSection from './components/MissionSection'
import { TypingSpan } from './components/TypingSpan'
import DirectorSection from './components/DirectorSection'
function App() {
const { scrollY } = useScroll()
const [hidden, setHidden] = useState(false)
const [isAtTop, setIsAtTop] = useState(true)
useMotionValueEvent(scrollY, "change", (current) => {
const previous = scrollY.getPrevious() ?? 0
setIsAtTop(current === 0)
if (current > previous && current > 150) {
setHidden(true)
} else {
setHidden(false)
}
})
const partners = [
{
src: '/xkvadrat.svg'
},
{
src: '/rcit-BccMYqhE.svg'
},
{
src: '/vodokanal.svg'
},
{
src: '/tesaldan.svg'
},
{
src: '/tehnopark.svg'
},
{
src: '/sakhaspectrans-xe6pCR8Q.svg'
},
{
src: '/jkhsakha.svg'
},
]
const handleLink = () => {
const modal = document.getElementById('my_modal_2')
if (modal) {
(modal as HTMLDialogElement).close()
}
}
const languages = ['/python.svg', '/csharp.svg', '/js.svg', '/1c.svg']
const programs = ['/1c_franch.svg', '/astralinux.svg', '/drweb.svg', '/kasperskylab.svg']
return (
<main className='w-full flex flex-col sm:gap-8 items-center'>
<dialog id="my_modal_2" className="modal modal-end">
<div className="modal-box w-3/4 flex flex-col gap-8">
<div className='flex flex-row justify-between items-center'>
<div className="logo">
<img className="dark:invert dark:hue-rotate-180" width={180} src='/logo-commit.png' />
</div>
<form method="dialog">
<button className="btn btn-sm btn-circle btn-ghost p-2 text-2xl">✕</button>
</form>
</div>
<form method="dialog" className='flex flex-col gap-4'>
<a onClick={handleLink} href="#about" className='text-xl text-gray-500 hover:text-blue-500'>О компании</a>
<a onClick={handleLink} href="#products" className='text-xl text-gray-500 hover:text-blue-500'>Программные продукты</a>
<a onClick={handleLink} href="#services" className='text-xl text-gray-500 hover:text-blue-500'>Услуги</a>
<a onClick={handleLink} href="#case" className='text-xl text-gray-500 hover:text-blue-500'>Главный кейс</a>
<a onClick={handleLink} href="#contacts" className='text-xl text-gray-500 hover:text-blue-500'>Контакты</a>
</form>
</div>
<form method="dialog" className="modal-backdrop backdrop-blur-xs">
<button>close</button>
</form>
</dialog>
<Section>
<div className='h-full flex flex-col'>
<motion.header
className={`top-0 left-0 right-0 w-full backdrop-blur-2xl flex justify-center`}
initial={{ opacity: '0' }}
whileInView={{ opacity: '1' }}
>
<Navbar />
</motion.header>
<motion.header
className={`${isAtTop ? 'hidden' : ''} z-10 w-full fixed top-0 left-0 right-0 backdrop-blur-lg bg-base-100/70 flex justify-center`}
animate={{
y: hidden ? -140 : 0,
opacity: hidden ? 0 : 1,
}}
transition={{ duration: 0.3, ease: "easeInOut" }}
>
<Navbar />
</motion.header>
<div className='relative grid sm:grid-cols-2 h-auto grow gap-8 rounded-2xl bg-base-200 p-8'>
<div className='z-1 h-auto grow flex flex-col gap-4'>
<span className='text-xs text-gray-500 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]'>
<span className='row-span-2 md:row-span-1'>Программное обеспечение</span>
<div className='row-span-2 inline-flex flex-wrap w-full text-blue-400 h-min'>
<TypingSpan typingSpeed={40} deletingSpeed={20} pauseTime={2000} />
</div>
{/* <span> — полный цикл разработки и технической поддержки</span> */}
</div>
<span className='text-gray-500'>
Берём ответственность за ваши ИТ-решения, снимая риски и операционную нагрузку, выступая надёжным технологическим партнёром по разработке и сопровождению
</span>
<div className='flex flex-col gap-4'>
<span className='text-xs text-gray-500'>
✳︎ Работаем с такими языками программирования, как:
</span>
<div className='flex flex-row'>
{languages.map((lang, index) => (
<div key={index} style={{ marginLeft: index === 0 ? '' : '-0.5rem' }} className='border-2 border-base-200 w-12.5 h-12.5 flex justify-center items-center p-2 rounded-full overflow-hidden bg-white'>
<img src={lang} />
</div>
))}
</div>
<span className='text-xs text-gray-500'>
✳︎ Работаем с такими программами, как:
</span>
<div className='flex flex-row'>
{programs.map((lang, index) => (
<div key={index} style={{ marginLeft: index === 0 ? '' : '-0.5rem' }} className='border-2 border-base-200 w-12.5 h-12.5 flex justify-center items-center p-2 rounded-full overflow-hidden bg-white'>
<img src={lang} />
</div>
))}
</div>
</div>
</div>
<div className='absolute blur-xs sm:blur-none inset-0 sm:relative h-full w-full p-4'>
<TypingEffect text={`/*
Совет из продакшена:
если код "гениальный" — готовься его переписывать.
если код простой — скорее всего, он переживёт тебя.
*/
@font-face {
font-family: "HiddenFont";
src: local("Arial");
unicode-range: U+043F, U+043E, U+043C, U+043E, U+0433, U+0430, U+0435,
U+043C, U+0020, U+0441, U+0020, U+0440, U+0430, U+0437,
U+0440, U+0430, U+0431, U+043E, U+0442, U+043A, U+043E,
U+0439, U+043E, U+045E, U+048E, U+056E, U+068E, U+069E,
U+070E, U+074E, U+077E, U+079E, U+081E, U+083E, U+086E,
U+089E, U+091E, U+094E, U+095E, U+098E, U+099E, U+0533,
U+0536, U+0539, U+0555, U+0563, U+781, U+783, U+789;
body {
margin: 0;
font-family: Arial, sans-serif;
}
Если ты это читаешь:
— сборка прошла
— багов нет
/*
мы помогаем с разработкой программного обеспечения
и бережно сопровождаем на всех этапах работ
/*
TODO: не удалять — это не хаос, это философия */
`} speed={0.01} />
<div className='absolute inset-0 bg-linear-to-b from-base-200 to-transparent'></div>
</div>
</div>
</div>
</Section>
<CardsSection />
<AboutSection />
<div className="w-full overflow-hidden select-none py-8 bg-base-200">
<Marquee speed={20} items={partners} from={0} to={"-100%"} />
</div>
<DirectorSection />
<MissionSection />
<ProductsSection />
<ServicesSection />
<LicenseSection />
<CaseSection />
<Footer />
</main>
)
}
export default App

BIN
src/assets/hero.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

1
src/assets/react.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

1
src/assets/vite.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 8.5 KiB

127
src/components/AboutSection.tsx Normal file
View File

@@ -0,0 +1,127 @@
import Section from './Section'
import CompanyInfoMockup from './CompanyInfoMockup'
import Thesis from './Thesis'
const AboutSection = () => {
const actInfo = [
{
icon: <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="11" cy="11" r="11" fill="#1C8EFF" />
<path d="M5.5 7.375C5.5 6.87772 5.69754 6.40081 6.04917 6.04917C6.40081 5.69754 6.87772 5.5 7.375 5.5H14.625C15.1223 5.5 15.5992 5.69754 15.9508 6.04917C16.3025 6.40081 16.5 6.87772 16.5 7.375V14.625C16.5 15.1223 16.3025 15.5992 15.9508 15.9508C15.5992 16.3025 15.1223 16.5 14.625 16.5H7.375C6.87772 16.5 6.40081 16.3025 6.04917 15.9508C5.69754 15.5992 5.5 15.1223 5.5 14.625V7.375ZM10.015 8.61C9.94469 8.53977 9.84938 8.50033 9.75 8.50033C9.65062 8.50033 9.55531 8.53977 9.485 8.61L7.36 10.735C7.28977 10.8053 7.25033 10.9006 7.25033 11C7.25033 11.0994 7.28977 11.1947 7.36 11.265L9.485 13.39C9.51933 13.4268 9.56073 13.4564 9.60673 13.4769C9.65273 13.4974 9.70239 13.5084 9.75274 13.5093C9.80309 13.5102 9.8531 13.5009 9.8998 13.4821C9.94649 13.4632 9.98891 13.4351 10.0245 13.3995C10.0601 13.3639 10.0882 13.3215 10.1071 13.2748C10.1259 13.2281 10.1352 13.1781 10.1343 13.1277C10.1334 13.0774 10.1224 13.0277 10.1019 12.9817C10.0814 12.9357 10.0518 12.8943 10.015 12.86L8.155 11L10.015 9.14C10.0852 9.06969 10.1247 8.97438 10.1247 8.875C10.1247 8.77562 10.0852 8.68031 10.015 8.61ZM12.515 8.61C12.4807 8.57316 12.4393 8.54361 12.3933 8.52311C12.3473 8.50261 12.2976 8.49159 12.2473 8.4907C12.1969 8.48982 12.1469 8.49908 12.1002 8.51794C12.0535 8.5368 12.0111 8.56487 11.9755 8.60048C11.9399 8.63609 11.9118 8.67851 11.8929 8.7252C11.8741 8.7719 11.8648 8.82191 11.8657 8.87226C11.8666 8.92261 11.8776 8.97227 11.8981 9.01827C11.9186 9.06427 11.9482 9.10567 11.985 9.14L13.845 11L11.985 12.86C11.9482 12.8943 11.9186 12.9357 11.8981 12.9817C11.8776 13.0277 11.8666 13.0774 11.8657 13.1277C11.8648 13.1781 11.8741 13.2281 11.8929 13.2748C11.9118 13.3215 11.9399 13.3639 11.9755 13.3995C12.0111 13.4351 12.0535 13.4632 12.1002 13.4821C12.1469 13.5009 12.1969 13.5102 12.2473 13.5093C12.2976 13.5084 12.3473 13.4974 12.3933 13.4769C12.4393 13.4564 12.4807 13.4268 12.515 13.39L14.64 11.265C14.7102 11.1947 14.7497 11.0994 14.7497 11C14.7497 10.9006 14.7102 10.8053 14.64 10.735L12.515 8.61Z" fill="white" />
</svg>,
title: 'Разработка программного обеспечения',
description: 'Веб-сервисы, корпоративные и прикладные решения под задачи бизнеса'
},
{
icon: <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="11" cy="11" r="11" fill="#1C8EFF" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.3294 5.25541C12.1135 5.16675 11.8394 5.16675 11.2916 5.16675C10.7439 5.16675 10.4703 5.16675 10.2539 5.25541C10.1115 5.3136 9.98197 5.39937 9.87285 5.50779C9.76373 5.61621 9.67712 5.74514 9.61802 5.88716C9.56319 6.01725 9.54219 6.1695 9.53344 6.39058C9.52928 6.55071 9.48448 6.70715 9.40326 6.84521C9.32203 6.98326 9.20705 7.09841 9.06911 7.17983C8.92837 7.25806 8.77017 7.2995 8.60916 7.30032C8.44815 7.30113 8.28954 7.2613 8.14802 7.1845C7.95086 7.08066 7.80794 7.0235 7.66677 7.00483C7.35795 6.96454 7.04568 7.04753 6.79761 7.23583C6.61211 7.377 6.47502 7.61266 6.20144 8.08342C5.92727 8.55416 5.79077 8.78925 5.75986 9.01966C5.71902 9.3265 5.80302 9.63683 5.99319 9.88241C6.07952 9.99441 6.20144 10.0883 6.38986 10.2062C6.66811 10.3794 6.84661 10.6746 6.84661 11.0001C6.84661 11.3256 6.66811 11.6207 6.39044 11.7934C6.20144 11.9118 6.07952 12.0057 5.99261 12.1177C5.89902 12.2392 5.83029 12.3779 5.79036 12.526C5.75042 12.674 5.74006 12.8285 5.75986 12.9805C5.79077 13.2103 5.92727 13.446 6.20144 13.9167C6.47561 14.3875 6.61211 14.6226 6.79761 14.7643C7.04494 14.9527 7.35761 15.0356 7.66677 14.9953C7.80794 14.9767 7.95086 14.9195 8.14802 14.8157C8.28961 14.7388 8.44833 14.6989 8.60946 14.6997C8.77058 14.7005 8.92889 14.742 9.06969 14.8203C9.35319 14.9837 9.52119 15.2841 9.53344 15.6096C9.54219 15.8312 9.56319 15.9829 9.61802 16.113C9.73702 16.3988 9.96569 16.6263 10.2539 16.7447C10.4697 16.8334 10.7439 16.8334 11.2916 16.8334C11.8394 16.8334 12.1135 16.8334 12.3294 16.7447C12.4718 16.6866 12.6012 16.6008 12.7104 16.4924C12.8195 16.384 12.9061 16.255 12.9652 16.113C13.02 15.9829 13.041 15.8312 13.0498 15.6096C13.0614 15.2841 13.23 14.9831 13.5141 14.8203C13.6548 14.7421 13.813 14.7007 13.9741 14.6998C14.1351 14.699 14.2937 14.7389 14.4352 14.8157C14.6324 14.9195 14.7753 14.9767 14.9164 14.9953C15.2256 15.0362 15.5383 14.9527 15.7856 14.7643C15.9711 14.6232 16.1082 14.3875 16.3818 13.9167C16.6559 13.446 16.7924 13.2109 16.8234 12.9805C16.8431 12.8284 16.8326 12.6739 16.7926 12.5259C16.7525 12.3779 16.6837 12.2392 16.59 12.1177C16.5037 12.0057 16.3818 11.9118 16.1934 11.794C15.9151 11.6207 15.7366 11.3256 15.7366 11.0001C15.7366 10.6746 15.9151 10.3794 16.1928 10.2067C16.3818 10.0883 16.5037 9.99441 16.5906 9.88241C16.6842 9.76096 16.7529 9.62224 16.7929 9.47421C16.8328 9.32617 16.8432 9.17171 16.8234 9.01966C16.7924 8.78983 16.6559 8.55416 16.3818 8.08342C16.1076 7.61266 15.9711 7.37758 15.7856 7.23583C15.5375 7.04753 15.2253 6.96454 14.9164 7.00483C14.7753 7.0235 14.6324 7.08066 14.4352 7.1845C14.2936 7.2614 14.1349 7.30129 13.9738 7.30048C13.8126 7.29966 13.6543 7.25816 13.5135 7.17983C13.3757 7.09834 13.2608 6.98316 13.1797 6.84511C13.0986 6.70705 13.0539 6.55065 13.0498 6.39058C13.041 6.16891 13.02 6.01725 12.9652 5.88716C12.9061 5.74514 12.8195 5.61621 12.7104 5.50779C12.6012 5.39937 12.4718 5.3136 12.3294 5.25541ZM11.2916 12.7501C12.2658 12.7501 13.055 11.9667 13.055 11.0001C13.055 10.0335 12.2652 9.25008 11.2916 9.25008C10.318 9.25008 9.52819 10.0335 9.52819 11.0001C9.52819 11.9667 10.318 12.7501 11.2916 12.7501Z" fill="white" />
</svg>
,
title: 'Техническое сопровождение',
description: 'Поддержка программного обеспечения, серверов и периферийной техники'
},
{
icon: <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="11" cy="11" r="11" fill="#1C8EFF" />
<path d="M16.8333 8.95842C16.8329 8.16887 16.586 7.39915 16.127 6.75668C15.6681 6.11421 15.0201 5.63103 14.2733 5.37456C13.5266 5.11809 12.7184 5.10113 11.9616 5.32604C11.2047 5.55095 10.537 6.00652 10.0515 6.62917C11.4824 6.68554 12.8359 7.29363 13.8284 8.32597C14.8208 9.35831 15.3751 10.7347 15.375 12.1668C15.375 12.2309 15.3738 12.2951 15.3715 12.3593L15.5658 12.4106C15.6943 12.445 15.8296 12.4449 15.958 12.4105C16.0865 12.3761 16.2037 12.3084 16.2978 12.2144C16.3919 12.1204 16.4596 12.0032 16.4941 11.8748C16.5286 11.7463 16.5287 11.611 16.4944 11.4825L16.4198 11.2048C16.3597 10.9803 16.3964 10.7434 16.4927 10.5323C16.7176 10.0381 16.8338 9.50137 16.8333 8.95842Z" fill="white" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5001 12.1667C14.5003 12.9553 14.3007 13.731 13.9199 14.4215C13.5391 15.112 12.9895 15.6948 12.3225 16.1154C11.6555 16.536 10.8928 16.7807 10.1056 16.8267C9.31839 16.8727 8.53237 16.7185 7.82091 16.3784C7.61349 16.274 7.37558 16.2471 7.15008 16.3026L6.43433 16.4945C6.30581 16.5288 6.17052 16.5287 6.04205 16.4942C5.91359 16.4596 5.79646 16.3919 5.70243 16.2978C5.6084 16.2038 5.54077 16.0866 5.50634 15.9581C5.4719 15.8296 5.47187 15.6943 5.50625 15.5658L5.69758 14.8501C5.75307 14.6246 5.72618 14.3867 5.62175 14.1792C5.32015 13.5472 5.16465 12.8555 5.16677 12.1552C5.16889 11.455 5.32858 10.7641 5.634 10.134C5.93942 9.50383 6.38275 8.95049 6.93111 8.51498C7.47948 8.07947 8.11883 7.77295 8.80177 7.61815C9.48471 7.46334 10.1937 7.46421 10.8763 7.62071C11.5589 7.7772 12.1974 8.08529 12.7447 8.52216C13.292 8.95902 13.734 9.51346 14.0378 10.1444C14.3417 10.7753 14.4997 11.4665 14.5001 12.1667ZM7.79175 12.7501C7.94646 12.7501 8.09483 12.6886 8.20423 12.5792C8.31362 12.4698 8.37508 12.3214 8.37508 12.1667C8.37508 12.012 8.31362 11.8637 8.20423 11.7543C8.09483 11.6449 7.94646 11.5834 7.79175 11.5834C7.63704 11.5834 7.48866 11.6449 7.37927 11.7543C7.26987 11.8637 7.20841 12.012 7.20841 12.1667C7.20841 12.3214 7.26987 12.4698 7.37927 12.5792C7.48866 12.6886 7.63704 12.7501 7.79175 12.7501ZM9.83341 12.7501C9.98812 12.7501 10.1365 12.6886 10.2459 12.5792C10.3553 12.4698 10.4167 12.3214 10.4167 12.1667C10.4167 12.012 10.3553 11.8637 10.2459 11.7543C10.1365 11.6449 9.98812 11.5834 9.83341 11.5834C9.6787 11.5834 9.53033 11.6449 9.42094 11.7543C9.31154 11.8637 9.25008 12.012 9.25008 12.1667C9.25008 12.3214 9.31154 12.4698 9.42094 12.5792C9.53033 12.6886 9.6787 12.7501 9.83341 12.7501ZM11.8751 12.7501C12.0298 12.7501 12.1782 12.6886 12.2876 12.5792C12.397 12.4698 12.4584 12.3214 12.4584 12.1667C12.4584 12.012 12.397 11.8637 12.2876 11.7543C12.1782 11.6449 12.0298 11.5834 11.8751 11.5834C11.7204 11.5834 11.572 11.6449 11.4626 11.7543C11.3532 11.8637 11.2917 12.012 11.2917 12.1667C11.2917 12.3214 11.3532 12.4698 11.4626 12.5792C11.572 12.6886 11.7204 12.7501 11.8751 12.7501Z" fill="white" />
</svg>
,
title: 'ИТ-консалтинг',
description: 'Профессиональные консультации по компьютерным системам и ИТ-решениям'
},
{
icon: <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="11" cy="11" r="11" fill="#1C8EFF" />
<path d="M11 8.66658C11.1547 8.66658 11.3031 8.72804 11.4125 8.83744C11.5219 8.94684 11.5833 9.09521 11.5833 9.24992C11.5833 9.40463 11.5219 9.553 11.4125 9.6624C11.3031 9.77179 11.1547 9.83325 11 9.83325C10.8453 9.83325 10.6969 9.77179 10.5875 9.6624C10.4781 9.553 10.4167 9.40463 10.4167 9.24992C10.4167 9.09521 10.4781 8.94684 10.5875 8.83744C10.6969 8.72804 10.8453 8.66658 11 8.66658ZM16.25 10.4166C16.25 13.6541 14.01 16.6816 11 17.4166C7.99 16.6816 5.75 13.6541 5.75 10.4166V6.91659L11 4.58325L16.25 6.91659V10.4166ZM11 7.49992C10.5359 7.49992 10.0908 7.68429 9.76256 8.01248C9.43437 8.34067 9.25 8.78579 9.25 9.24992C9.25 10.0141 9.73417 10.6616 10.4167 10.9008V14.4999H11.5833V13.3333H12.75V12.1666H11.5833V10.9008C12.2658 10.6616 12.75 10.0141 12.75 9.24992C12.75 8.78579 12.5656 8.34067 12.2374 8.01248C11.9092 7.68429 11.4641 7.49992 11 7.49992Z" fill="white" />
</svg>
,
title: 'Продажа и аренда ПО',
description: 'Собственные решения и программное обеспечение по дилерской модели'
},
{
icon: <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="11" cy="11" r="11" fill="#1C8EFF" />
<path d="M15.5 15.5C15.5 15.7761 15.2761 16 15 16H7C6.72386 16 6.5 15.7761 6.5 15.5C6.5 15.2239 6.72386 15 7 15H15C15.2761 15 15.5 15.2239 15.5 15.5ZM16.5 12C16.5 13.1046 15.6046 14 14.5 14H7.5C6.39543 14 5.5 13.1046 5.5 12V8C5.5 6.89543 6.39543 6 7.5 6H14.5C15.6046 6 16.5 6.89543 16.5 8V12ZM13.1585 8.6345L11.7135 9.9825L10.627 8.9675L10.2855 8.6495L9.9445 8.968L8.1585 10.6345L7.7935 10.9755L8.4755 11.7065L8.8415 11.3655L10.2855 10.017L11.373 11.032L11.7145 11.3505L12.0555 11.0325L13.8415 9.3655L14.2065 9.0245L13.5245 8.2935L13.1585 8.6345Z" fill="white" />
</svg>
,
title: 'Цифровая трансформация',
description: 'Разработка стратегии, концепции цифровизации и внедрение изменений'
},
]
const whyInfo = [
{
icon: <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="11" cy="11" r="11" fill="#1C8EFF" />
<path d="M5.75008 15.0834H6.33341V7.71011C6.33343 7.52645 6.39125 7.34744 6.49866 7.19846C6.60608 7.04947 6.75766 6.93807 6.93191 6.88003L11.5986 5.32487C11.7301 5.28106 11.8701 5.26913 12.0072 5.29006C12.1442 5.31098 12.2743 5.36417 12.3868 5.44523C12.4992 5.52629 12.5908 5.63291 12.654 5.7563C12.7171 5.87969 12.7501 6.01633 12.7501 6.15495V15.0834H13.3334V9.82761C13.3334 9.78448 13.343 9.74189 13.3615 9.70291C13.38 9.66393 13.4069 9.62953 13.4402 9.60219C13.4736 9.57485 13.5126 9.55525 13.5545 9.5448C13.5963 9.53436 13.6399 9.53333 13.6822 9.54178L14.9632 9.79845C15.1615 9.83808 15.34 9.94516 15.4682 10.1015C15.5965 10.2578 15.6666 10.4537 15.6667 10.6559V15.0834H16.2501C16.4048 15.0834 16.5532 15.1449 16.6626 15.2543C16.772 15.3637 16.8334 15.5121 16.8334 15.6668C16.8334 15.8215 16.772 15.9699 16.6626 16.0793C16.5532 16.1887 16.4048 16.2501 16.2501 16.2501H5.75008C5.59537 16.2501 5.447 16.1887 5.3376 16.0793C5.22821 15.9699 5.16675 15.8215 5.16675 15.6668C5.16675 15.5121 5.22821 15.3637 5.3376 15.2543C5.447 15.1449 5.59537 15.0834 5.75008 15.0834Z" fill="white" />
</svg>
,
title: 'Резидент ГАУ РС(Я) «Технопарк «Якутия»',
description: 'Работаем в экосистеме развития, где технологическая экспертиза превращается в практические решения'
},
{
icon: <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="11" cy="11" r="11" fill="#1C8EFF" />
<path d="M10.2999 11.9532L9.11059 10.7639C9.04525 10.699 8.96859 10.6646 8.88059 10.6606C8.79259 10.6566 8.71192 10.691 8.63859 10.7639C8.56525 10.8368 8.52836 10.9161 8.52792 11.0019C8.52747 11.0877 8.56436 11.167 8.63859 11.2399L9.92325 12.5279C10.0308 12.6359 10.1564 12.6899 10.2999 12.6899C10.4435 12.6899 10.5693 12.6359 10.6773 12.5279L13.3693 9.83591C13.4341 9.77102 13.4688 9.69391 13.4733 9.60458C13.4777 9.51524 13.443 9.43391 13.3693 9.36058C13.2955 9.28724 13.2161 9.25036 13.1313 9.24991C13.0464 9.24947 12.9673 9.28636 12.8939 9.36058L10.2999 11.9532ZM10.9999 16.8952C10.9395 16.8952 10.8759 16.8897 10.8093 16.8786C10.7426 16.8675 10.6801 16.8508 10.6219 16.8286C9.30947 16.3281 8.26659 15.4799 7.49325 14.2839C6.71992 13.0879 6.33325 11.7932 6.33325 10.3999V7.54458C6.33325 7.31791 6.39881 7.1128 6.52992 6.92924C6.66103 6.74569 6.82881 6.61236 7.03325 6.52924L10.6233 5.19591C10.753 5.1488 10.8786 5.12524 10.9999 5.12524C11.1213 5.12524 11.247 5.1488 11.3773 5.19591L14.9666 6.52924C15.171 6.61236 15.3388 6.74569 15.4699 6.92924C15.601 7.1128 15.6666 7.31791 15.6666 7.54458V10.3999C15.6666 11.7932 15.2799 13.0879 14.5066 14.2839C13.7333 15.4799 12.6904 16.3279 11.3779 16.8279C11.3201 16.8501 11.2579 16.8668 11.1913 16.8779C11.1246 16.889 11.0608 16.8946 10.9999 16.8946" fill="white" />
</svg>
,
title: 'Аккредитованная ИТ-компания',
description: 'Включены в реестр аккредитованных ИТ-организаций Минцифры РФ от 26.06.2024'
},
{
icon: <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="11" cy="11" r="11" fill="#1C8EFF" />
<path d="M15.9584 10.4166H15.0834V8.08325C15.0834 7.77383 14.9605 7.47709 14.7417 7.25829C14.5229 7.0395 14.2262 6.91659 13.9167 6.91659H11.5834V6.04159C11.5834 5.65481 11.4298 5.28388 11.1563 5.01039C10.8828 4.7369 10.5119 4.58325 10.1251 4.58325C9.73831 4.58325 9.36737 4.7369 9.09388 5.01039C8.82039 5.28388 8.66675 5.65481 8.66675 6.04159V6.91659H6.33341C6.024 6.91659 5.72725 7.0395 5.50846 7.25829C5.28966 7.47709 5.16675 7.77383 5.16675 8.08325V10.2999H6.04175C6.91675 10.2999 7.61675 10.9999 7.61675 11.8749C7.61675 12.7499 6.91675 13.4499 6.04175 13.4499H5.16675V15.6666C5.16675 15.976 5.28966 16.2727 5.50846 16.4915C5.72725 16.7103 6.024 16.8333 6.33341 16.8333H8.55008V15.9583C8.55008 15.0833 9.25008 14.3833 10.1251 14.3833C11.0001 14.3833 11.7001 15.0833 11.7001 15.9583V16.8333H13.9167C14.2262 16.8333 14.5229 16.7103 14.7417 16.4915C14.9605 16.2727 15.0834 15.976 15.0834 15.6666V13.3333H15.9584C16.3452 13.3333 16.7161 13.1796 16.9896 12.9061C17.2631 12.6326 17.4167 12.2617 17.4167 11.8749C17.4167 11.4881 17.2631 11.1172 16.9896 10.8437C16.7161 10.5702 16.3452 10.4166 15.9584 10.4166Z" fill="white" />
</svg>
,
title: 'Собственные программные продукты',
description: 'запатентованы и внесены в реестр отечественного программного обеспечения'
},
{
icon: <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="11" cy="11" r="11" fill="#1C8EFF" />
<path d="M11 11C10.6317 11 10.2634 10.9346 9.97625 10.8039L5.92937 8.95852C5.74426 8.8743 5.3125 8.62793 5.3125 8.16281C5.3125 7.6977 5.74426 7.45187 5.92992 7.36656L10.0118 5.50527C10.5743 5.24824 11.423 5.24824 11.9857 5.50527L16.0701 7.36656C16.2557 7.45105 16.6875 7.69742 16.6875 8.16281C16.6875 8.6282 16.2557 8.87375 16.0701 8.95879L12.0232 10.8039C11.7366 10.9346 11.3683 11 11 11Z" fill="white" />
<path d="M16.0684 10.2018L15.6558 10.0156L14.5957 10.5007L12.0254 11.6765C11.7383 11.8077 11.3691 11.8731 11.0016 11.8731C10.6341 11.8731 10.2653 11.8077 9.97844 11.6765L7.40621 10.5007L6.34582 10.0156L5.92965 10.2027C5.74426 10.2871 5.3125 10.5352 5.3125 11C5.3125 11.4648 5.74426 11.7131 5.92937 11.7976L9.97625 13.6469C10.2617 13.7781 10.6306 13.8438 11 13.8438C11.3694 13.8438 11.7366 13.7781 12.0238 13.6471L16.0671 11.7984C16.2533 11.7139 16.6875 11.4673 16.6875 11C16.6875 10.5327 16.2563 10.2871 16.0684 10.2018Z" fill="white" />
<path d="M16.0684 13.0453L15.6558 12.8594L14.5957 13.3442L12.0254 14.5186C11.7383 14.6493 11.3691 14.7149 11.0016 14.7149C10.6341 14.7149 10.2653 14.6496 9.97844 14.5186L7.40621 13.3428L6.34582 12.8594L5.92965 13.0464C5.74426 13.1309 5.3125 13.3789 5.3125 13.8438C5.3125 14.3086 5.74426 14.5566 5.92937 14.6408L9.97625 16.489C10.2617 16.6197 10.632 16.6875 11 16.6875C11.368 16.6875 11.735 16.6197 12.0221 16.4887L16.0668 14.6411C16.2533 14.5569 16.6875 14.3102 16.6875 13.8438C16.6875 13.3773 16.2563 13.1309 16.0684 13.0453Z" fill="white" />
</svg>
,
title: 'Проекты цифровой трансформации',
description: 'реализация стратегических программ для госпредприятий'
},
]
return (
<Section id='about'>
<CompanyInfoMockup>
<div className='w-full sm:p-8 flex flex-col space-y-8 justify-center'>
<span className='text-4xl text-center my-4'>О компании</span>
<div className='grid grid-rows-2 sm:grid-rows-1 sm:grid-cols-2 gap-8 p-2 xl:p-0'>
<div className='p-8 flex flex-col space-y-4 bg-base-100 rounded-2xl'>
<span className='text-2xl'>Виды деятельности:</span>
<div className='flex flex-col space-y-4'>
{actInfo.map(info => (
<Thesis info={info} />
))}
</div>
</div>
<div className='p-8 flex flex-col space-y-4 bg-black/90 rounded-2xl text-white'>
<span className='text-2xl'>Почему мы?</span>
<div className='flex flex-col space-y-4'>
{whyInfo.map(info => (
<Thesis info={info} />
))}
</div>
</div>
</div>
</div>
</CompanyInfoMockup>
</Section>
)
}
export default AboutSection

109
src/components/CardsSection.tsx Normal file
View File

@@ -0,0 +1,109 @@
import { motion, useMotionValueEvent, useScroll, useTransform } from "motion/react"
import { useRef, useState } from "react"
const CardsSection = () => {
const containerRef = useRef(null)
const { scrollYProgress } = useScroll({
target: containerRef,
offset: ["start start", "end end"]
})
const leftValue = 100
const [xValue, setXvalue] = useState(leftValue)
const x = useTransform(scrollYProgress, [0, 1], [leftValue, 0])
useMotionValueEvent(x, "change", (latest) => setXvalue(latest))
const items = [
{ id: 1, color: "#ff0088", label: "Из идеи — в работающую концепцию", description: 'Мы погружаемся в задачу, формируем понятную и реализуемую концепцию и сразу определяем дальнейшие шаги', image: "/idea-BxLjsotP.png" },
{ id: 2, color: "#dd00ee", label: "Цены и процессы — без сюрпризов", description: 'Заранее фиксируем стоимость, этапы и зону ответственности, чтобы вы всегда понимали, за что платите и какой результат будет получен', image: "/money-DcU00l9G.png" },
{ id: 3, color: "#9911ff", label: "Ориентируемся на результат", description: 'Каждое решение мы строим так, чтобы приносить измеримый результат и реальную ценность вашему бизнесу', image: "/goal-BRVwp_WA.png" },
{ id: 4, color: "#0d63f8", label: "Контролируем сбои и устраняем", description: 'Мы оперативно реагируем на любые сбои, быстро устраняем их и гарантируем, что ваш проект всегда остаётся под полным контролем', image: "/info-CE1fB6DT.png" },
]
return (
<div ref={containerRef} style={{ height: "300vh" }} className='p-2 sm:p-0 flex justify-center overflow-clip'>
<div style={{ position: "sticky", top: 0, height: "100vh" }} className='py-16 sm:py-24 max-w-7xl overflow-clip'>
<div className='w-full flex justify-center mb-8'>
<span className='px-4 text-3xl sm:text-4xl sm:text-center'>
<span className='text-blue-400'>Преимущества</span> работы с нами
</span>
</div>
<motion.div
className='hidden sm:grid grid-cols-4 overflow-visible'
>
{items.map((item, index) => (
<motion.div
key={item.id}
className='relative grid grid-rows-[min-content_min-content_min-content_1fr] gap-2 px-8 pt-4 min-w-full w-full shrink-0 overflow-visible'
style={{
marginLeft: `${xValue * index}px`,
zIndex: index,
}}>
<span className="text-blue-500 text-xs">
{`{${index + 1}}`}
</span>
<span className='text-xl'>
{item.label}
</span>
<span className="text-gray-500">
{item.description}
</span>
<img className='mt-auto' src={item.image} />
<div className='absolute left-0 top-0 bottom-0 -right-8 rounded-2xl bg-base-200 outline-2 outline-base-100 -z-10 w-auto h-full'>
</div>
</motion.div>
))}
</motion.div>
<motion.div
className='relative flex flex-col sm:hidden w-full h-full overflow-visible'
>
{items.reverse().map((item, index) => {
const n = items.length;
const progress = Math.min(1, Math.max(0, (xValue - (index * 100) / n) * n / 100));
return (
<motion.div
key={item.id}
className="absolute grid grid-rows-[min-content_min-content_min-content_1fr] gap-2 w-full px-8 pt-4 h-min shrink-0 overflow-visible"
style={{
top: index === items.length - 1 ? '0%' : `${100 * (progress)+ (5 * (n - index - 1))}%`, // from bottom → top
zIndex: n - index,
}}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.4 }}
viewport={{ once: true, margin: "-100px" }}
>
<span className="text-blue-500 text-xs">
{`{${n - index}}`}
</span>
<span className='text-xl'>
{item.label}
</span>
<span className="text-gray-500">
{item.description}
</span>
<img className="mt-auto" src={item.image} />
<div className="absolute left-0 top-0 right-0 bottom-0 rounded-2xl bg-base-200 outline-2 outline-base-100 -z-10 w-auto h-full" />
</motion.div>
);
})}
</motion.div>
</div>
</div>
)
}
export default CardsSection

106
src/components/CaseSection.tsx Normal file
View File

@@ -0,0 +1,106 @@
const CaseSection = () => {
return (
<section id='case' className='max-w-7xl w-full h-auto'>
<div className='w-full h-auto flex flex-col items-center mb-8 p-2 xl:p-0'>
<span className='px-4 text-3xl sm:text-4xl sm:text-center my-8'>
Главный <span className='text-blue-400'>кейс</span>
</span>
<div className='rounded-2xl h-full overflow-hidden grid grid-cols-1 sm:grid-cols-2 font-light'>
<div className='bg-blue-500 flex flex-col gap-6 '>
<div className="flex flex-col gap-6 p-10">
<div className='bg-base-300/50 py-2 px-4 flex w-min rounded-3xl'>
<span className='text-nowrap text-xs text-white'>Цифровая трансформация</span>
</div>
<span className='text-4xl text-white'>ГУП «ЖКХ РС(Я)»</span>
<span className='text-white'>Комплексная цифровизация жилищно-коммунального одного из крупных предприятий РС(Я)</span>
</div>
<div className='flex my-auto'>
<svg width="648" height="249" viewBox="0 0 648 249" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M478 232C478 236.971 482.029 241 487 241H663V249H486C477.163 249 470 241.837 470 233V202H478V232Z" fill="white" />
<path d="M171 232C171 236.971 175.029 241 180 241H356V249H179C170.163 249 163 241.837 163 233V202H171V232Z" fill="white" />
<path d="M446 232C446 236.971 441.971 241 437 241H261V249H438C446.837 249 454 241.837 454 233V202H446V232Z" fill="white" />
<path d="M496 223C496 225.209 497.791 227 500 227H681V234H499C492.925 234 488 229.075 488 223V187H496V223Z" fill="white" />
<path d="M189 223C189 225.209 190.791 227 193 227H374V235H191C185.477 235 181 230.523 181 225V188H189V223Z" fill="white" />
<path d="M428 223C428 225.209 426.209 227 424 227H243V235H426C431.523 235 436 230.523 436 225V188H428V223Z" fill="white" />
<path d="M516 212C516 213.105 516.895 214 518 214H701V222H516C511.582 222 508 218.418 508 214V175H516V212Z" fill="white" />
<path d="M209 212C209 213.105 209.895 214 211 214H394V222H209C204.582 222 201 218.418 201 214V175H209V212Z" fill="white" />
<path d="M408 212C408 213.105 407.105 214 406 214H223V222H408C412.418 222 416 218.418 416 214V175H408V212Z" fill="white" />
<path d="M526 199H393V138H526V199ZM404 154H429V145H404V154ZM433 154H458V145H433V154ZM462 154H487V145H462V154ZM491 145V154H516V145H491Z" fill="white" />
<path d="M201 155H159V61H201V155ZM164 151H168V142H164V151ZM170 151H174V142H170V151ZM164 138H168V129H164V138ZM170 138H174V129H170V138ZM164 125H168V116H164V125ZM170 125H174V116H170V125ZM176 125H180V116H176V125ZM164 112H168V103H164V112ZM170 112H174V103H170V112ZM176 112H180V103H176V112ZM164 99H168V90H164V99ZM170 99H174V90H170V99ZM176 99H180V90H176V99ZM182 99H186V90H182V99ZM164 86H168V77H164V86ZM170 86H174V77H170V86ZM176 86H180V77H176V86ZM182 77V86H186V77H182ZM164 73H168V64H164V73ZM170 73H174V64H170V73ZM176 73H180V64H176V73ZM182 73H186V64H182V73ZM188 73H192V64H188V73Z" fill="white" />
<path d="M237 199H123V157H237V199ZM129 193H154V187H129V193ZM158 193H183V187H158V193ZM187 193H212V187H187V193ZM129 181H154V175H129V181ZM158 181H183V175H158V181ZM187 181H212V175H187V181ZM129 169H154V163H129V169ZM158 169H183V163H158V169ZM187 163V169H212V163H187Z" fill="white" />
<path d="M152 155H83V86H152V155ZM89.0879 150.881H105.323V142.643H89.0879V150.881ZM109.383 150.881H125.617V142.643H109.383V150.881ZM129.677 142.643V150.881H145.912V142.643H129.677ZM89.0879 134.403H105.323V126.164H89.0879V134.403ZM109.383 134.403H125.617V126.164H109.383V134.403ZM129.677 134.403H145.912V126.164H129.677V134.403ZM89.0879 117.926H105.323V109.688H89.0879V117.926ZM109.383 117.926H125.617V109.688H109.383V117.926ZM129.677 117.926H145.912V109.688H129.677V117.926ZM89.0879 101.448H105.323V93.209H89.0879V101.448ZM109.383 101.448H125.617V93.209H109.383V101.448ZM129.677 101.448H145.912V93.209H129.677V101.448Z" fill="white" />
<path d="M121 199H83V154H121V199ZM89.1621 174V181H114.838V174H89.1621ZM89.1621 165H114.838V158H89.1621V165Z" fill="white" />
<rect x="122" y="67" width="18" height="17" fill="white" />
<path d="M131 53L142.258 65.75H119.742L131 53Z" fill="white" />
<path d="M108 84H81V199H72.5V134H37V11H108V84ZM41 125H49V113H41V125ZM52 125H60V113H52V125ZM41 109H49V97H41V109ZM52 109H60V97H52V109ZM63 109H71V97H63V109ZM41 93H49V81H41V93ZM52 93H60V81H52V93ZM63 93H71V81H63V93ZM41 77H49V65H41V77ZM52 77H60V65H52V77ZM63 77H71V65H63V77ZM74 77H82V65H74V77ZM41 61H49V49H41V61ZM52 61H60V49H52V61ZM63 61H71V49H63V61ZM74 61H82V49H74V61ZM41 45H49V33H41V45ZM52 45H60V33H52V45ZM63 45H71V33H63V45ZM74 45H82V33H74V45ZM85 33V45H93V33H85ZM41 29H49V17H41V29ZM52 29H60V17H52V29ZM63 29H71V17H63V29ZM74 29H82V17H74V29ZM85 29H93V17H85V29Z" fill="white" />
<path d="M40.5091 0H104.491L107 7H38L40.5091 0Z" fill="white" />
<rect x="470" y="37" width="8" height="98" fill="white" />
<rect x="484" y="37" width="8" height="98" fill="white" />
<rect x="498" y="37" width="8" height="98" fill="white" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M70 199H0V136H70V199ZM5 183C3.34315 183 2 184.343 2 186V197H10V186C10 184.343 8.65685 183 7 183H5ZM19 183C17.3431 183 16 184.343 16 186V197H24V186C24 184.343 22.6569 183 21 183H19ZM33 183C31.3431 183 30 184.343 30 186V197H38V186C38 184.343 36.6569 183 35 183H33ZM47 183C45.3431 183 44 184.343 44 186V197H52V186C52 184.343 50.6569 183 49 183H47ZM61 183C59.3431 183 58 184.343 58 186V197H66V186C66 184.343 64.6569 183 63 183H61ZM5 168C3.34315 168 2 169.343 2 171V182H10V171C10 169.343 8.65685 168 7 168H5ZM19 168C17.3431 168 16 169.343 16 171V182H24V171C24 169.343 22.6569 168 21 168H19ZM33 168C31.3431 168 30 169.343 30 171V182H38V171C38 169.343 36.6569 168 35 168H33ZM47 168C45.3431 168 44 169.343 44 171V182H52V171C52 169.343 50.6569 168 49 168H47ZM61 168C59.3431 168 58 169.343 58 171V182H66V171C66 169.343 64.6569 168 63 168H61ZM5 153C3.34315 153 2 154.343 2 156V167H10V156C10 154.343 8.65685 153 7 153H5ZM19 153C17.3431 153 16 154.343 16 156V167H24V156C24 154.343 22.6569 153 21 153H19ZM33 153C31.3431 153 30 154.343 30 156V167H38V156C38 154.343 36.6569 153 35 153H33ZM47 153C45.3431 153 44 154.343 44 156V167H52V156C52 154.343 50.6569 153 49 153H47ZM61 153C59.3431 153 58 154.343 58 156V167H66V156C66 154.343 64.6569 153 63 153H61ZM5 138C3.34315 138 2 139.343 2 141V152H10V141C10 139.343 8.65685 138 7 138H5ZM19 138C17.3431 138 16 139.343 16 141V152H24V141C24 139.343 22.6569 138 21 138H19ZM33 138C31.3431 138 30 139.343 30 141V152H38V141C38 139.343 36.6569 138 35 138H33ZM47 138C45.3431 138 44 139.343 44 141V152H52V141C52 139.343 50.6569 138 49 138H47ZM61 138C59.3431 138 58 139.343 58 141V152H66V141C66 139.343 64.6569 138 63 138H61Z" fill="white" />
</svg>
</div>
</div>
<div className='flex flex-col gap-4 bg-base-300 p-4'>
<div className='p-8 bg-base-100 flex flex-col gap-4 rounded-2xl'>
<span className='text-xl'>Основная задача:</span>
<span className='text-gray-500'>Реализация стратегии цифровой трансформации</span>
</div>
<div className='p-8 bg-base-100 rounded-2xl flex flex-col gap-4'>
<span className='text-xl'>Выполненные работы:</span>
<div className='flex flex-col gap-6'>
<div className='flex flex-row gap-2'>
<svg className='shrink-0' width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11 2.0625C6.07191 2.0625 2.0625 6.07191 2.0625 11C2.0625 15.9281 6.07191 19.9375 11 19.9375C15.9281 19.9375 19.9375 15.9281 19.9375 11C19.9375 6.07191 15.9281 2.0625 11 2.0625ZM15.6514 8.00465L9.87637 14.8796C9.81302 14.9551 9.73419 15.0161 9.64523 15.0584C9.55627 15.1007 9.45925 15.1234 9.36074 15.125H9.34914C9.25278 15.125 9.1575 15.1047 9.06948 15.0654C8.98147 15.0262 8.90269 14.9689 8.83824 14.8973L6.36324 12.1473C6.30039 12.0806 6.25149 12.002 6.21943 11.9162C6.18737 11.8304 6.17279 11.739 6.17655 11.6474C6.1803 11.5559 6.20232 11.466 6.24131 11.3831C6.2803 11.3002 6.33547 11.2259 6.40358 11.1646C6.47169 11.1033 6.55136 11.0563 6.63791 11.0262C6.72447 10.9961 6.81616 10.9837 6.9076 10.9896C6.99904 10.9954 7.08838 11.0195 7.17037 11.0604C7.25236 11.1013 7.32534 11.1582 7.38504 11.2277L9.33109 13.3899L14.5986 7.12035C14.7168 6.98375 14.884 6.89912 15.064 6.88478C15.244 6.87043 15.4225 6.92751 15.5608 7.04368C15.6991 7.15985 15.7861 7.32578 15.8031 7.5056C15.82 7.68542 15.7655 7.86469 15.6514 8.00465Z" fill="#1C8EFF" />
</svg>
<span className='text-gray-500'>Модернизация биллинговых систем (физ. и юр. лица)</span>
</div>
<div className='flex flex-row gap-2'>
<svg className='shrink-0' width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11 2.0625C6.07191 2.0625 2.0625 6.07191 2.0625 11C2.0625 15.9281 6.07191 19.9375 11 19.9375C15.9281 19.9375 19.9375 15.9281 19.9375 11C19.9375 6.07191 15.9281 2.0625 11 2.0625ZM15.6514 8.00465L9.87637 14.8796C9.81302 14.9551 9.73419 15.0161 9.64523 15.0584C9.55627 15.1007 9.45925 15.1234 9.36074 15.125H9.34914C9.25278 15.125 9.1575 15.1047 9.06948 15.0654C8.98147 15.0262 8.90269 14.9689 8.83824 14.8973L6.36324 12.1473C6.30039 12.0806 6.25149 12.002 6.21943 11.9162C6.18737 11.8304 6.17279 11.739 6.17655 11.6474C6.1803 11.5559 6.20232 11.466 6.24131 11.3831C6.2803 11.3002 6.33547 11.2259 6.40358 11.1646C6.47169 11.1033 6.55136 11.0563 6.63791 11.0262C6.72447 10.9961 6.81616 10.9837 6.9076 10.9896C6.99904 10.9954 7.08838 11.0195 7.17037 11.0604C7.25236 11.1013 7.32534 11.1582 7.38504 11.2277L9.33109 13.3899L14.5986 7.12035C14.7168 6.98375 14.884 6.89912 15.064 6.88478C15.244 6.87043 15.4225 6.92751 15.5608 7.04368C15.6991 7.15985 15.7861 7.32578 15.8031 7.5056C15.82 7.68542 15.7655 7.86469 15.6514 8.00465Z" fill="#1C8EFF" />
</svg>
<span className='text-gray-500'>Внедрение ПО «Топливо и транспорт»</span>
</div>
<div className='flex flex-row gap-2'>
<svg className='shrink-0' width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11 2.0625C6.07191 2.0625 2.0625 6.07191 2.0625 11C2.0625 15.9281 6.07191 19.9375 11 19.9375C15.9281 19.9375 19.9375 15.9281 19.9375 11C19.9375 6.07191 15.9281 2.0625 11 2.0625ZM15.6514 8.00465L9.87637 14.8796C9.81302 14.9551 9.73419 15.0161 9.64523 15.0584C9.55627 15.1007 9.45925 15.1234 9.36074 15.125H9.34914C9.25278 15.125 9.1575 15.1047 9.06948 15.0654C8.98147 15.0262 8.90269 14.9689 8.83824 14.8973L6.36324 12.1473C6.30039 12.0806 6.25149 12.002 6.21943 11.9162C6.18737 11.8304 6.17279 11.739 6.17655 11.6474C6.1803 11.5559 6.20232 11.466 6.24131 11.3831C6.2803 11.3002 6.33547 11.2259 6.40358 11.1646C6.47169 11.1033 6.55136 11.0563 6.63791 11.0262C6.72447 10.9961 6.81616 10.9837 6.9076 10.9896C6.99904 10.9954 7.08838 11.0195 7.17037 11.0604C7.25236 11.1013 7.32534 11.1582 7.38504 11.2277L9.33109 13.3899L14.5986 7.12035C14.7168 6.98375 14.884 6.89912 15.064 6.88478C15.244 6.87043 15.4225 6.92751 15.5608 7.04368C15.6991 7.15985 15.7861 7.32578 15.8031 7.5056C15.82 7.68542 15.7655 7.86469 15.6514 8.00465Z" fill="#1C8EFF" />
</svg>
<span className='text-gray-500'>Запуск чат-бота и личного кабинета</span>
</div>
<div className='flex flex-row gap-2'>
<svg className='shrink-0' width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11 2.0625C6.07191 2.0625 2.0625 6.07191 2.0625 11C2.0625 15.9281 6.07191 19.9375 11 19.9375C15.9281 19.9375 19.9375 15.9281 19.9375 11C19.9375 6.07191 15.9281 2.0625 11 2.0625ZM15.6514 8.00465L9.87637 14.8796C9.81302 14.9551 9.73419 15.0161 9.64523 15.0584C9.55627 15.1007 9.45925 15.1234 9.36074 15.125H9.34914C9.25278 15.125 9.1575 15.1047 9.06948 15.0654C8.98147 15.0262 8.90269 14.9689 8.83824 14.8973L6.36324 12.1473C6.30039 12.0806 6.25149 12.002 6.21943 11.9162C6.18737 11.8304 6.17279 11.739 6.17655 11.6474C6.1803 11.5559 6.20232 11.466 6.24131 11.3831C6.2803 11.3002 6.33547 11.2259 6.40358 11.1646C6.47169 11.1033 6.55136 11.0563 6.63791 11.0262C6.72447 10.9961 6.81616 10.9837 6.9076 10.9896C6.99904 10.9954 7.08838 11.0195 7.17037 11.0604C7.25236 11.1013 7.32534 11.1582 7.38504 11.2277L9.33109 13.3899L14.5986 7.12035C14.7168 6.98375 14.884 6.89912 15.064 6.88478C15.244 6.87043 15.4225 6.92751 15.5608 7.04368C15.6991 7.15985 15.7861 7.32578 15.8031 7.5056C15.82 7.68542 15.7655 7.86469 15.6514 8.00465Z" fill="#1C8EFF" />
</svg>
<span className='text-gray-500'>Модернизация серверного оборудования</span>
</div>
<div className='flex flex-row gap-2'>
<svg className='shrink-0' width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11 2.0625C6.07191 2.0625 2.0625 6.07191 2.0625 11C2.0625 15.9281 6.07191 19.9375 11 19.9375C15.9281 19.9375 19.9375 15.9281 19.9375 11C19.9375 6.07191 15.9281 2.0625 11 2.0625ZM15.6514 8.00465L9.87637 14.8796C9.81302 14.9551 9.73419 15.0161 9.64523 15.0584C9.55627 15.1007 9.45925 15.1234 9.36074 15.125H9.34914C9.25278 15.125 9.1575 15.1047 9.06948 15.0654C8.98147 15.0262 8.90269 14.9689 8.83824 14.8973L6.36324 12.1473C6.30039 12.0806 6.25149 12.002 6.21943 11.9162C6.18737 11.8304 6.17279 11.739 6.17655 11.6474C6.1803 11.5559 6.20232 11.466 6.24131 11.3831C6.2803 11.3002 6.33547 11.2259 6.40358 11.1646C6.47169 11.1033 6.55136 11.0563 6.63791 11.0262C6.72447 10.9961 6.81616 10.9837 6.9076 10.9896C6.99904 10.9954 7.08838 11.0195 7.17037 11.0604C7.25236 11.1013 7.32534 11.1582 7.38504 11.2277L9.33109 13.3899L14.5986 7.12035C14.7168 6.98375 14.884 6.89912 15.064 6.88478C15.244 6.87043 15.4225 6.92751 15.5608 7.04368C15.6991 7.15985 15.7861 7.32578 15.8031 7.5056C15.82 7.68542 15.7655 7.86469 15.6514 8.00465Z" fill="#1C8EFF" />
</svg>
<span className='text-gray-500'>Внедрение IP-телефонии</span>
</div>
</div>
</div>
<div className='p-8 bg-black flex flex-col gap-4 rounded-2xl text-white'>
<span className='text-xl'>Результат:</span>
<span className=''>
Сокращение времени обработки платежей на 60%, полное импортозамещение базового ПО, интеграция с ГИС ЖКХ
</span>
</div>
</div>
</div>
</div>
</section>
)
}
export default CaseSection

55
src/components/CompanyInfoMockup.tsx Normal file
View File

@@ -0,0 +1,55 @@
import { type PropsWithChildren } from 'react';
const CompanyInfoMockup = ({
children
}: PropsWithChildren) => {
return (
<div className='bg-base-300 w-full h-min rounded-2xl sm:border-8 sm:border-black'>
<div className='hidden sm:flex flex-col w-full'>
<div className='w-full grid grid-cols-3 p-2'>
<div className='flex space-x-2 overflow-hidden'>
<img src='/buttons.svg' />
<div className='bg-base-100 shrink-0 rounded-3xl'>
<img src='/buttons-view.svg' />
</div>
<div className='bg-base-100 shrink-0 rounded-3xl'>
<img src='/buttons-nav.svg' />
</div>
</div>
<div className='flex justify-center'>
<div className='flex grow bg-base-100 rounded-3xl justify-center items-center'>
<span className='text-xs'>commit-it.ru</span>
</div>
</div>
<div className='flex justify-end'>
<div className='bg-base-100 rounded-3xl'>
<img src='/buttons-menu.svg' />
</div>
</div>
</div>
<div className='flex p-2 space-x-2'>
<img className='bg-base-100 w-7 p-1 rounded-full' src='/safari-tab-1.svg' />
<img className='bg-base-100 w-7 p-1 rounded-full' src='/safari-tab-2.svg' />
<img className='bg-base-100 w-7 p-1 rounded-full' src='/safari-tab-3.svg' />
<div className='flex grow bg-base-100 rounded-2xl justify-center items-center'>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.37499 14.0209L9.99999 12.4376L12.625 14.0418L11.9375 11.0418L14.25 9.04177L11.2083 8.77094L9.99999 5.93761L8.79166 8.75011L5.74999 9.02094L8.06249 11.0418L7.37499 14.0209ZM6.10416 15.7693L7.13749 11.3418L3.70166 8.36511L8.22749 7.97344L9.99999 3.79761L11.7725 7.97261L16.2975 8.36427L12.8617 11.3409L13.8958 15.7684L9.99999 13.4184L6.10416 15.7693Z" fill="#1E1E1E" />
</svg>
<span className='text-xs'>КОММИТ</span>
</div>
</div>
</div>
<div className='flex h-auto'>
{children}
</div>
</div>
)
};
export default CompanyInfoMockup;

35
src/components/DirectorSection.tsx Normal file
View File

@@ -0,0 +1,35 @@
import React from 'react'
const DirectorSection = () => {
return (
<div className='w-full max-w-7xl grid grid-cols-3 gap-4 p-2 xl:p-2'>
<div className='col-span-1'>
<img src='/director.png' />
</div>
<div className='col-span-2 flex flex-col gap-2 sm:gap-8 font-light'>
<span className="text-blue-500 text-xs">
{`{ Наша миссия }`}
</span>
<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">
<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>
</div>
<span className='text-sm sm:text-3xl'>
Нашей стратегией является превращать сложные задачи сферы ЖКХ <span className='text-blue-500'>в эффективные цифровые решения</span>. Мы разрабатываем автоматизацию для жизненно важной отрасли.
</span>
<div className='flex flex-row justify-end mt-auto'>
<span className='flex flex-col gap-4 text-end mb-8'>
<span className='text-lg sm:text-xl'>— Саввинов Николай Афанасьевич</span>
<span className='text-sm text-gray-500'>директор ООО «КОММИТ»</span>
</span>
</div>
</div>
</div>
)
}
export default DirectorSection

68
src/components/Footer.tsx Normal file
View File

File diff suppressed because one or more lines are too long

13
src/components/LicenseSection.tsx Normal file
View File

@@ -0,0 +1,13 @@
const LicenseSection = () => {
return (
<section id='case' className='max-w-7xl w-full h-auto'>
<div className='w-full h-auto flex flex-col items-center mb-8'>
<span className='px-4 text-3xl sm:text-4xl sm:text-center my-8'>
<span className='text-blue-400'>Наши</span> лицензии и сертификаты
</span>
</div>
</section>
)
}
export default LicenseSection

35
src/components/Marquee.tsx Normal file
View File

@@ -0,0 +1,35 @@
import { motion } from "motion/react";
export default function Marquee({speed = 10, items, from, to }: {
speed?: number,
items: { src: string }[],
from: number | string, to: number | string
}) {
return (
<div className="flex">
<motion.div
initial={{ x: `${from}` }}
animate={{ x: `${to}` }}
transition={{ duration: speed, repeat: Infinity, ease: "linear" }}
className="flex shrink-0"
>
{items.map((item, index: number) => {
return <img width={300} alt={`marqueImg${index}`}
className="dark:invert object-scale-down pr-0 sm:pr-16 max-h-16" src={item.src} key={index} />
})}
</motion.div>
<motion.div
initial={{ x: `${from}` }}
animate={{ x: `${to}` }}
transition={{ duration: speed, repeat: Infinity, ease: "linear" }}
className="flex shrink-0"
>
{items.map((item, index: number) => {
return <img width={300} alt={`marqueImg${index}`}
className="dark:invert object-scale-down pr-0 sm:pr-16 max-h-16" src={item.src} key={index} />;
})}
</motion.div>
</div>
);
};

9
src/components/MissionSection.tsx Normal file
View File

@@ -0,0 +1,9 @@
const MissionSection = () => {
return (
<div>
</div>
)
}
export default MissionSection

32
src/components/Navbar.tsx Normal file
View File

@@ -0,0 +1,32 @@
const Navbar = () => {
return (
<div className="flex flex-row p-4 w-full items-center max-w-7xl">
<div className="logo">
<img className="dark:invert dark:hue-rotate-180" width={200} src='/logo-commit.png' />
</div>
<nav className='p-4 hidden sm:flex'>
<a href="#about" className='text-sm mx-4 text-gray-500 hover:text-blue-500'>О компании</a>
<a href="#products" className='text-sm mx-4 text-gray-500 hover:text-blue-500'>Программные продукты</a>
<a href="#services" className='text-sm mx-4 text-gray-500 hover:text-blue-500'>Услуги</a>
<a href="#case" className='text-sm mx-4 text-gray-500 hover:text-blue-500'>Главный кейс</a>
<a href="#contacts" className='text-sm mx-4 text-gray-500 hover:text-blue-500'>Контакты</a>
</nav>
<nav className="ml-auto sm:hidden">
<div className="btn btn-square btn-ghost" onClick={() => {
const modal = document.getElementById('my_modal_2')
if (modal) {
(modal as HTMLDialogElement).showModal()
}
}}>
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 18L20 18" stroke="#000000" stroke-width="2" stroke-linecap="round" />
<path d="M4 12L20 12" stroke="#000000" stroke-width="2" stroke-linecap="round" />
<path d="M4 6L20 6" stroke="#000000" stroke-width="2" stroke-linecap="round" />
</svg>
</div>
</nav>
</div>
)
}
export default Navbar

105
src/components/ProductsSection.tsx Normal file
View File

@@ -0,0 +1,105 @@
import { motion } from 'motion/react'
import Section from './Section'
const ProductsSection = () => {
const products = [
{
title: 'ПО «Квартплата»',
img: '/Квартплата.png',
descriptions: [
'Автоматизация начислений и приёма платежей физических лиц',
'Ведение лицевых счётов, работа с задолженностью, интеграция с ГИС ЖКХ'
]
},
{
title: 'ПО «Расчёты с юридическими лицами»',
img: '/Юрлица.png',
descriptions: [
'Учёт договоров на поставку коммунальных услуг, автоматический расчёт потребления',
'Формирование счетов-фактур, учёт централизованных организаций с филиалами'
]
},
{
title: 'ПО «СБЫТ»',
img: '/Сбыт.jpg',
descriptions: [
'Консолидация данных, формирование плана реализации и бюджета продаж',
'Анализ выпадающих доходов, подготовка форм ГКЦ РС(Я) (ТХ-1, ВС-1 и др.)'
]
},
{
title: 'ПО «Инженерно-картографическая система» ',
img: '/ИКС.png',
descriptions: [
'Графическое отображение сетей тепло- и водоснабжения, котельных',
'Графическое отображение сетей тепло- и водоснабжения, котельных',
'Расчёт параметров объектов, паспортизация сетей на карте'
]
},
{
title: 'ПО «Топливо и транспорт — FUEL»',
img: '/Топливо и Транспорт.jpg',
descriptions: [
'Учёт топливных ресурсов котельных, перемещений, остатков топлива',
'Формирование отчётности, путевых листов, учёт мест накоплений ТКО, аналитика расхода ТЭР',
]
},
{
title: 'ПО «АСКУУТЭ» ',
img: '/АСКУУТЭ.jpg',
descriptions: [
'Сбор показаний приборов учёта тепла, контроль поверок оборудования',
'Интеграция с разнородными системами сбора данных, автоматизация расчётов'
]
}
]
return (
<Section id='products'>
<div className='w-full p-2 flex flex-col space-y-8 justify-center'>
<div className='w-full flex justify-center mb-8'>
<span className='px-4 text-3xl sm:text-4xl sm:text-center'>
<span className='text-blue-400'>Ключевые программные</span> продукты собственной разработки
</span>
</div>
<div className='grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8'>
{products.map(product => (
<motion.div
whileHover={{
scale: '1.05',
boxShadow: '0 0 10px #00000050'
}}
initial={{
scale: '1',
boxShadow: 'none'
}}
className='p-2 bg-base-200 rounded-2xl grid grid-rows-[min-content_1fr] w-full h-full'>
<div className='rounded-2xl overflow-hidden'>
<img className='aspect-video object-cover' src={product.img} />
</div>
<div className='grid grid-rows-[min-content_auto] gap-4 p-4'>
<span className='text-xl'>{product.title}</span>
<div className='flex flex-col'>
{product.descriptions.map(description => (
<div className='flex flex-row gap-2'>
<svg className='shrink-0' width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11 2.0625C6.07191 2.0625 2.0625 6.07191 2.0625 11C2.0625 15.9281 6.07191 19.9375 11 19.9375C15.9281 19.9375 19.9375 15.9281 19.9375 11C19.9375 6.07191 15.9281 2.0625 11 2.0625ZM15.6514 8.00465L9.87637 14.8796C9.81302 14.9551 9.73419 15.0161 9.64523 15.0584C9.55627 15.1007 9.45925 15.1234 9.36074 15.125H9.34914C9.25278 15.125 9.1575 15.1047 9.06948 15.0654C8.98147 15.0262 8.90269 14.9689 8.83824 14.8973L6.36324 12.1473C6.30039 12.0806 6.25149 12.002 6.21943 11.9162C6.18737 11.8304 6.17279 11.739 6.17655 11.6474C6.1803 11.5559 6.20232 11.466 6.24131 11.3831C6.2803 11.3002 6.33547 11.2259 6.40358 11.1646C6.47169 11.1033 6.55136 11.0563 6.63791 11.0262C6.72447 10.9961 6.81616 10.9837 6.9076 10.9896C6.99904 10.9954 7.08838 11.0195 7.17037 11.0604C7.25236 11.1013 7.32534 11.1582 7.38504 11.2277L9.33109 13.3899L14.5986 7.12035C14.7168 6.98375 14.884 6.89912 15.064 6.88478C15.244 6.87043 15.4225 6.92751 15.5608 7.04368C15.6991 7.15985 15.7861 7.32578 15.8031 7.5056C15.82 7.68542 15.7655 7.86469 15.6514 8.00465Z" fill="#1C8EFF" />
</svg>
<span className='text-gray-500'>{description}</span>
</div>
))}
</div>
</div>
</motion.div>
))}
</div>
</div>
</Section>
)
}
export default ProductsSection

17
src/components/Section.tsx Normal file
View File

@@ -0,0 +1,17 @@
import type { PropsWithChildren } from "react"
interface SectionProps extends PropsWithChildren {
id?: string
}
const Section = ({ id, children }: SectionProps) => {
return (
<section id={id} className='min-h-screen h-auto w-full flex justify-center'>
<div className='max-w-7xl w-full h-auto'>
{children}
</div>
</section>
)
}
export default Section

126
src/components/ServicesSection.tsx Normal file
View File

@@ -0,0 +1,126 @@
import { motion, useScroll, useTransform } from "motion/react"
import { useRef } from "react";
const ServiceItem = ({ service }: {
service: {
id: string;
title: string;
descriptions: string[];
}
}) => {
const ref = useRef(null)
const { scrollYProgress } = useScroll({
target: ref,
offset: ["end end", "start start"],
})
const opacity = useTransform(scrollYProgress, [0, 1], [0, 1])
const scale = useTransform(scrollYProgress, [0, 1], [0.9, 1])
return (
<motion.div
ref={ref}
style={{
scale: scale
}}
className='group p-8 bg-base-300 rounded-2xl grid grid-cols-[0.5fr_1fr_1fr_1fr] justify-start gap-8'
>
<motion.span
style={{
opacity: opacity
}}
className='col-span-1 text-5xl sm:text-8xl leading-12 sm:leading-20 text-blue-500 sm:text-gray-300 sm:group-hover:text-blue-500 transition-colors'>{service.id}</motion.span>
<span className='col-span-3 sm:col-span-1 text-2xl sm:text-xl'>{service.title}</span>
<div className='row-start-2 sm:row-start-1 col-span-4 sm:col-start-3 sm:col-span-2 flex flex-col gap-4'>
{service.descriptions.map(desc => (
<div className='flex flex-row gap-2'>
<svg className='shrink-0' width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11 2.0625C6.07191 2.0625 2.0625 6.07191 2.0625 11C2.0625 15.9281 6.07191 19.9375 11 19.9375C15.9281 19.9375 19.9375 15.9281 19.9375 11C19.9375 6.07191 15.9281 2.0625 11 2.0625ZM15.6514 8.00465L9.87637 14.8796C9.81302 14.9551 9.73419 15.0161 9.64523 15.0584C9.55627 15.1007 9.45925 15.1234 9.36074 15.125H9.34914C9.25278 15.125 9.1575 15.1047 9.06948 15.0654C8.98147 15.0262 8.90269 14.9689 8.83824 14.8973L6.36324 12.1473C6.30039 12.0806 6.25149 12.002 6.21943 11.9162C6.18737 11.8304 6.17279 11.739 6.17655 11.6474C6.1803 11.5559 6.20232 11.466 6.24131 11.3831C6.2803 11.3002 6.33547 11.2259 6.40358 11.1646C6.47169 11.1033 6.55136 11.0563 6.63791 11.0262C6.72447 10.9961 6.81616 10.9837 6.9076 10.9896C6.99904 10.9954 7.08838 11.0195 7.17037 11.0604C7.25236 11.1013 7.32534 11.1582 7.38504 11.2277L9.33109 13.3899L14.5986 7.12035C14.7168 6.98375 14.884 6.89912 15.064 6.88478C15.244 6.87043 15.4225 6.92751 15.5608 7.04368C15.6991 7.15985 15.7861 7.32578 15.8031 7.5056C15.82 7.68542 15.7655 7.86469 15.6514 8.00465Z" fill="#1C8EFF" />
</svg>
<span className='text-gray-500'>{desc}</span>
</div>
))}
</div>
</motion.div>
)
}
const ServicesSection = () => {
const services = [
{
id: '01',
title: 'Разработка и сопровождение ПО',
descriptions: [
'Адаптация и модификация систем на базе 1С, с использованием СУБД MS SQL и PostgreSQL',
'Разработка аналитических отчётов и интеграционных решений'
]
},
{
id: '02',
title: 'ИТ-аутсорсинг и инфраструктура',
descriptions: [
'Обсуждение АРМ (ПК, моноблоки), серверов и оргтехники',
'Администрирование локальных сетей и IP-телефонии',
'Обеспечение ИТ-безопасности (антивирусная защита, резервное копирование)'
]
},
{
id: '03',
title: 'Импортозамещение',
descriptions: [
'Поставка оборудования (серверы, периферия) из Единого реестра российской радиоэлектронной продукции (ПП РФ № 878)',
'Перевод инфраструктуры на отечественное ПО (Astra Linux, P7-Офис и др.)'
]
},
{
id: '04',
title: '1С: Франчайзинг',
descriptions: [
'Продажа лицензий, внедрение и доработка конфигураций (1С: Управление холдингом, 1С: ЗУП, 1С: Бухгалтерия)'
]
}
]
return (
<section id='services' className='max-w-7xl w-full h-auto'>
<div className='w-full h-auto flex flex-col items-center mb-8'>
<span className='px-4 text-3xl sm:text-4xl sm:text-center my-8'>
<span className='text-blue-400'>Предоставляемые услуги</span> нашей компании
</span>
<div className='h-full grid grid-cols-1 sm:grid-cols-3 font-light sm:gap-4 p-2 xl:p-0'>
<div className='flex flex-col gap-8'>
<div className='bg-blue-500 flex flex-col gap-6 p-10 col-span-1 rounded-2xl overflow-hidden'>
<div className='bg-base-300/50 py-2 px-4 flex w-min rounded-3xl'>
<span className='text-nowrap text-xs text-white'>Цифровая надёжность</span>
</div>
<span className='text-4xl text-white'>ООО «КОММИТ»</span>
<span className='text-white'>
Разработка и сопровождение программного обеспечения для сферы ЖКХ и государственных организаций
</span>
<div className="flex justify-center p-4">
<img className="max-w-48" src='/service.svg' />
</div>
</div>
<div>
<span className='text-[1rem] text-gray-500'>
✳︎ Наши услуги ориентированы на долгосрочную ценность: мы не просто реализуем отдельные задачи, a <span className='text-blue-500'>выстраиваем технологическую основу для роста, масштабирования и развития бизнеса.</span> Надёжность, контроль и ответственность — ключевые принципы нашей работы.
</span>
</div>
</div>
<div className='my-8 sm:my-0 flex flex-col gap-4 col-span-2 rounded-2xl overflow-hidden'>
{services.map(service => (
<ServiceItem service={service} />
))}
</div>
</div>
</div>
</section>
)
}
export default ServicesSection

27
src/components/Thesis.tsx Normal file
View File

@@ -0,0 +1,27 @@
import { type JSX } from 'react'
const Thesis = ({ info }: {
info: {
icon: JSX.Element;
title: string;
description: string;
}
}) => {
return (
<div className='flex flex-row space-x-3'>
<div className='flex flex-col'>
<span className='flex justify-center items-center'>{info.icon}</span>
</div>
<div className='flex flex-col space-y-2'>
<span className='text-xl font-light leading-5'>{info.title}</span>
<span className='text-sm text-gray-500 font-light'>
{info.description}
</span>
</div>
</div>
)
}
export default Thesis

65
src/components/TypingEffect.tsx Normal file
View File

@@ -0,0 +1,65 @@
import { useInView } from "motion/react";
import { useRef, useEffect, useState } from "react";
export default function TypingEffect({ text = 'Typing Effect', speed = 0.1 }: { text: string, speed?: number }) {
const ref = useRef<HTMLHeadingElement>(null);
const isInView = useInView(ref, { once: true });
const [visibleChars, setVisibleChars] = useState(0);
// Split text into lines
const lines = text.split('\n');
useEffect(() => {
if (!isInView) return;
let currentIndex = 0;
const totalChars = text.replace(/\n/g, '').length;
const interval = setInterval(() => {
if (currentIndex < totalChars) {
currentIndex++;
setVisibleChars(currentIndex);
} else {
clearInterval(interval);
}
}, speed * 1000);
return () => clearInterval(interval);
}, [isInView, text, speed]);
// Build visible text based on visible characters
let charsProcessed = 0;
const visibleLines: string[] = [];
for (const line of lines) {
const lineLength = line.length;
if (charsProcessed + lineLength <= visibleChars) {
// Full line is visible
visibleLines.push(line);
charsProcessed += lineLength;
} else {
// Partial line
const remainingChars = visibleChars - charsProcessed;
if (remainingChars > 0) {
visibleLines.push(line.slice(0, remainingChars));
}
break;
}
}
return (
<div className="relative max-h-full h-full overflow-hidden">
<h2
ref={ref}
className="text-sm text-left font-mono text-gray-400 tracking-tighter absolute bottom-0"
>
{visibleLines.map((line, index) => (
<div key={index}>
{line}
{index < visibleLines.length - 1 && <br />}
</div>
))}
</h2>
</div>
);
}

85
src/components/TypingSpan.tsx Normal file
View File

@@ -0,0 +1,85 @@
import { useEffect, useState } from "react";
import { motion } from "framer-motion";
const phrases = [
"без рисков",
"под ключ",
// "с гарантией результата",
// "с полным сопровождением",
"для сложных задач",
"с доказанной надёжностью",
// "с индивидуальной архитектурой",
"с прозрачной стоимостью",
"с расчётом на рост",
"с отраслевой экспертизой",
"с защитой данных",
"с учётом вашей специфики",
"с долгосрочной поддержкой",
"готовое к внедрению",
// "с открытым кодом под заказчика",
// "с соблюдением всех регуляторных требований",
"с полным циклом согласования",
"с фиксированными сроками",
"с возможностью доработок",
"с фокусом на результат",
];
export function TypingSpan({
typingSpeed = 40,
deletingSpeed = 40,
pauseTime = 1200
}: {
typingSpeed?: number
deletingSpeed?: number
pauseTime?: number
}) {
const [phraseIndex, setPhraseIndex] = useState(0);
const [text, setText] = useState("");
const [isDeleting, setIsDeleting] = useState(false);
useEffect(() => {
const phrase = phrases[phraseIndex];
let timeout: NodeJS.Timeout;
if (!isDeleting && text.length < phrase.length) {
timeout = setTimeout(() => {
setText(phrase.slice(0, text.length + 1));
}, typingSpeed);
}
else if (!isDeleting && text.length === phrase.length) {
timeout = setTimeout(() => setIsDeleting(true), pauseTime);
}
else if (isDeleting && text.length > 0) {
timeout = setTimeout(() => {
setText(phrase.slice(0, text.length - 1));
}, deletingSpeed);
}
else if (isDeleting && text.length === 0) {
setIsDeleting(false);
setPhraseIndex((i) => (i + 1) % phrases.length);
}
return () => clearTimeout(timeout);
}, [text, isDeleting, phraseIndex]);
const words = text.split(" ");
return (
<>
{words.map((word, i) => (
<span key={i} className="mr-2 h-min leading-none">
{word}
</span>
))}
<motion.span
className="leading-none"
animate={{ opacity: [0, 1, 0] }}
transition={{ duration: 1, repeat: Infinity }}
>
|
</motion.span>
</>
);
}

7
src/index.css Normal file
View File

@@ -0,0 +1,7 @@
@import "tailwindcss";
@plugin "daisyui" {
themes: light --default;
}
@custom-variant dark (&:where(.dark, .dark *));

10
src/main.tsx Normal file
View File

@@ -0,0 +1,10 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'
createRoot(document.getElementById('root')!).render(
<StrictMode>
<App />
</StrictMode>,
)