2026-02-11 15:46:19 +05:00
import React , { useEffect , useState } from 'react' ;
2026-02-03 23:16:16 +05:00
import { SECTION_IDS } from '../constants' ;
2026-02-11 15:46:19 +05:00
import { SparklesIcon } from './icons' ;
import { fetchUploadFiles , STRAPI_URL } from '../strapiService' ;
2026-02-03 23:16:16 +05:00
const principlesData = [
{
title : "Технологическое Лидерство" ,
content : "Мы не следуем трендам — мы стремимся их создавать, применяя самые передовые и эффективные подходы для решения задач."
} ,
{
title : "Ответственность и Этика" ,
content : "Мы осознаем влияние ИИ и разрабатываем безопасные, прозрачные и надежные системы, которые приносят пользу обществу."
} ,
{
title : "Фокус на Результате" ,
content : "Каждое наше решение, будь то сайт, приложение или сложная ИИ-модель, должно приносить измеримую пользу нашему партнеру. Мы ориентированы на ROI и практическую ценность."
} ,
{
title : "Открытое Партнерство" ,
content : "Великие проекты создаются в синергии. Мы открыты к сотрудничеству с
} ,
{
title : "Развитие Экосистемы" ,
content : "Наш вклад — это не только наши проекты, но и развитие ИИ-сообщества в Уфе и Башкортостане. Мы делимся знаниями, чтобы растить рынок вместе."
} ,
] ;
const approachData = [
{
title : "1. Прикладные ИИ-Решения" ,
content : "Мы разрабатываем и внедряем кастомные ИИ-решения для бизнеса и государства. <strong>Для государства:</strong> улучшение обработки обращений граждан, предиктивная аналитика. <strong>Для бизнеса:</strong> оптимизация логистики, персонализация продаж, автоматизация документооборота."
} ,
{
title : "2. Исследования и Разработки (R&D)" ,
content : "Адаптируем и дообучаем передовые модели для локальных задач. Особый фокус — развитие языковых моделей для русского и башкирского языков, создание датасетов и сохранение культурного наследия."
} ,
{
title : "3. Развитие Сообщества и Образование" ,
content : "Мы стремимся стать центром притяжения для талантов в Уфе. Организуем митапы, воркшопы и образовательные программы, формируя кадровый резерв для ИИ-индустрии региона."
}
] ;
const PrincipleItem : React.FC < { title : string ; children : React.ReactNode ; index : number } > = ( { title , children , index } ) = > (
< li
className = "flex items-start scroll-animate"
style = { { transitionDelay : ` ${ index * 100 } ms ` } }
>
< div className = "flex-shrink-0" >
< SparklesIcon className = "w-6 h-6 text-slate-500 mt-1" / >
< / div >
< div className = "ml-4" >
< h4 className = "text-xl font-semibold font-quicksand text-slate-800" > { title } < / h4 >
< p className = "mt-1 text-slate-600" > { children } < / p >
< / div >
< / li >
) ;
2026-02-11 15:46:19 +05:00
const ABOUT_IMAGE_ALT : [ string , string ] [ ] = [
[ 'Команда iiEasy за работой в современном офисе в Уфе, обсуждает проект на фоне доски с , 'Команда iiEasy в Уфе: от идеи к реализации.' ] ,
[ 'Крупный план экрана с Н а , 'Глубокая техническая работа — основа наших решений.' ] ,
[ 'Групповой снимок команды iiEasy. Разнообразные лица, уверенные и дружелюбные улыбки. Неформальная, но профессиональная обстановка.' , 'Наша команда — наш главный актив.' ] ,
[ 'Панорамный вид на Уфу с с е е , 'Нацелены на будущее развитие нашего региона.' ] ,
] ;
const PLACEHOLDER_IMAGES = [
'https://picsum.photos/seed/iieasy-team-work/1200/800' ,
'https://picsum.photos/seed/iieasy-code/1200/800' ,
'https://picsum.photos/seed/iieasy-team-group/1200/800' ,
'https://picsum.photos/seed/iieasy-ufa-view/1200/800' ,
] ;
2026-02-03 23:16:16 +05:00
const AboutUsSection : React.FC = ( ) = > {
2026-02-11 15:46:19 +05:00
const [ aboutImages , setAboutImages ] = useState < string [ ] > ( [ ] ) ;
useEffect ( ( ) = > {
let cancelled = false ;
( async ( ) = > {
const files = await fetchUploadFiles ( ) ;
if ( cancelled ) return ;
const sorted = [ . . . files ] . sort ( ( a , b ) = > ( a . name ? ? '' ) . localeCompare ( b . name ? ? '' ) ) ;
const urls = sorted . slice ( 0 , 4 ) . map ( ( f ) = > ( f . url . startsWith ( 'http' ) ? f . url : ` ${ STRAPI_URL } ${ f . url } ` ) ) ;
setAboutImages ( urls ) ;
} ) ( ) ;
return ( ) = > { cancelled = true ; } ;
} , [ ] ) ;
2026-02-03 23:16:16 +05:00
useEffect ( ( ) = > {
const observer = new IntersectionObserver (
( entries ) = > {
entries . forEach ( ( entry ) = > {
if ( entry . isIntersecting ) {
entry . target . classList . add ( 'scroll-animate-visible' ) ;
observer . unobserve ( entry . target ) ;
}
} ) ;
} ,
2026-02-11 15:46:19 +05:00
{ threshold : 0.1 }
2026-02-03 23:16:16 +05:00
) ;
const elements = document . querySelectorAll ( '.scroll-animate' ) ;
elements . forEach ( ( el ) = > observer . observe ( el ) ) ;
return ( ) = > observer . disconnect ( ) ;
2026-02-11 15:46:19 +05:00
} , [ aboutImages ] ) ;
const getImageUrl = ( index : number ) = > aboutImages [ index ] ? ? PLACEHOLDER_IMAGES [ index ] ;
2026-02-03 23:16:16 +05:00
return (
< section
id = { SECTION_IDS . aboutUsPage }
className = "py-16 md:py-24 bg-white min-h-screen overflow-x-hidden"
>
< div className = "container mx-auto px-4 sm:px-6 lg:px-8 max-w-5xl" >
{ /* Header */ }
< header className = "mb-12 md:mb-16 text-center scroll-animate" >
< h1 className = "font-quicksand text-4xl sm:text-5xl md:text-6xl font-bold text-slate-900 leading-tight" >
iiEasy : Создаем Б у д у щ е е с П о м о щ ь ю И с к у с с т в е н н о г о И н т е л л е к т а .
< / h1 >
< p className = "mt-4 text-2xl sm:text-3xl font-quicksand text-slate-600" > С д е л а н о в У ф е . < / p >
< / header >
{ /* Intro */ }
< div className = "prose prose-lg max-w-none font-inter text-slate-700 mb-12 md:mb-16 scroll-animate" style = { { transitionDelay : '100ms' } } >
< p > Д о б р о п о ж а л о в а т ь в iiEasy — ц е н т р п е р е д о в ы х р а з р а б о т о к и и с с л е д о в а н и й в о б л а с т и и с к у с с т в е н н о г о и н т е л л е к т а . М ы — к о м а н д а и н ж е н е р о в , и с с л е д о в а т е л е й и с т р а т е г о в и з У ф ы , о б ъ е д и н е н н ы х м и с с и е й п о р е ш е н и ю с л о ж н ы х з а д а ч д л я б и з н е с а и г о с у д а р с т в а с п о м о щ ь ю т е х н о л о г и й . М ы н е п р о с т о с о з д а е м с а й т ы и п р и л о ж е н и я ; м ы п р о е к т и р у е м и н т е л л е к т у а л ь н ы е с и с т е м ы , к о т о р ы е о п т и м и з и р у ю т п р о ц е с с ы , у л у ч ш а ю т п р и н я т и е р е ш е н и й и о т к р ы в а ю т н о в ы е в о з м о ж н о с т и д л я р о с т а . < / p >
< p > Н а ш а р а б о т а о с н о в а н а н а с и н т е з е ф у н д а м е н т а л ь н о й э к с п е р т и з ы в п р о г р а м м н о й и н ж е н е р и и и г л у б о к о г о п о н и м а н и я с о в р е м е н н ы х И И - а р х и т е к т у р , в к л ю ч а я б о л ь ш и е я з ы к о в ы е м о д е л и ( LLM ) , к о м п ь ю т е р н о е з р е н и е ( CV ) и п р е д и к т и в н у ю а н а л и т и к у . < / p >
< / div >
< figure className = "my-12 md:my-16 scroll-animate" style = { { transitionDelay : '200ms' } } >
2026-02-11 15:46:19 +05:00
< img src = { getImageUrl ( 0 ) } alt = { ABOUT_IMAGE_ALT [ 0 ] [ 0 ] } className = "rounded-lg shadow-xl aspect-video object-cover" / >
< figcaption className = "text-center text-sm text-slate-500 mt-3 italic" > { ABOUT_IMAGE_ALT [ 0 ] [ 1 ] } < / figcaption >
2026-02-03 23:16:16 +05:00
< / figure >
{ /* Mission */ }
< div className = "my-16 md:my-24 text-center scroll-animate" style = { { transitionDelay : '100ms' } } >
< h2 className = "font-quicksand text-3xl sm:text-4xl font-bold text-slate-800" > Н а ш а М и с с и я < / h2 >
< div className = "prose prose-xl max-w-3xl mx-auto font-inter text-slate-700 mt-6" >
< p className = "font-semibold text-slate-800" > С д е л а т ь Б а ш к о р т о с т а н л и д и р у ю щ и м р е г и о н о м в о б л а с т и и с к у с с т в е н н о г о и н т е л л е к т а . < / p >
< p > М ы с т р е м и м с я к э т о й ц е л и ч е р е з р е ш е н и е п р а к т и ч е с к и з н а ч и м ы х з а д а ч , с о з д а н и е п р о д у к т о в м и р о в о г о у р о в н я и ф о р м и р о в а н и е с и л ь н о г о И И - с о о б щ е с т в а . М ы в е р и м , ч т о т е х н о л о г и и И И — э т о к л ю ч к п о в ы ш е н и ю э ф ф е к т и в н о с т и э к о н о м и к и , у л у ч ш е н и ю к а ч е с т в а ж и з н и г р а ж д а н и с о з д а н и ю у с т о й ч и в о г о б у д у щ е г о д л я н а ш е г о р е г и о н а . < / p >
< / div >
< / div >
{ /* Approach */ }
< div className = "my-16 md:my-24 scroll-animate" style = { { transitionDelay : '200ms' } } >
< h2 className = "font-quicksand text-3xl sm:text-4xl font-bold text-slate-800 mb-8 text-center" > Н а ш П о д х о д < / h2 >
< div className = "prose prose-lg max-w-none font-inter text-slate-700 mb-6" >
< p > Н а ш а д е я т е л ь н о с т ь с т р о и т с я н а т р е х к л ю ч е в ы х н а п р а в л е н и я х : < / p >
< / div >
< div className = "grid md:grid-cols-3 gap-8" >
{ approachData . map ( ( item , index ) = > (
< div key = { item . title } className = "bg-white p-6 rounded-lg scroll-animate" style = { { transitionDelay : ` ${ index * 100 } ms ` } } >
< h3 className = "font-quicksand text-xl font-semibold text-slate-800 mb-2" > { item . title } < / h3 >
< p className = "text-slate-600" dangerouslySetInnerHTML = { { __html : item.content } } > < / p >
< / div >
) ) }
< / div >
< / div >
< figure className = "my-12 md:my-16 scroll-animate" style = { { transitionDelay : '200ms' } } >
2026-02-11 15:46:19 +05:00
< img src = { getImageUrl ( 1 ) } alt = { ABOUT_IMAGE_ALT [ 1 ] [ 0 ] } className = "rounded-lg shadow-xl aspect-video object-cover" / >
< figcaption className = "text-center text-sm text-slate-500 mt-3 italic" > { ABOUT_IMAGE_ALT [ 1 ] [ 1 ] } < / figcaption >
2026-02-03 23:16:16 +05:00
< / figure >
{ /* Team */ }
< div className = "my-16 md:my-24 scroll-animate" style = { { transitionDelay : '100ms' } } >
< h2 className = "font-quicksand text-3xl sm:text-4xl font-bold text-slate-800 mb-6 text-center" > Н а ш а К о м а н д а < / h2 >
< div className = "prose prose-lg max-w-none font-inter text-slate-700" >
< p > К о м а н д а iiEasy — э т о с п л а в с и с т е м н о г о м ы ш л е н и я , и н ж е н е р н о й п р а г м а т и ч н о с т и и с т р а т е г и ч е с к о г о в и д е н и я . В н а ш и х р я д а х — в ы с о к о к в а л и ф и ц и р о в а н н ы е с п е ц и а л и с т ы п о м а ш и н н о м у о б у ч е н и ю , NLP , CV , а н а л и з у д а н н ы х и р а з р а б о т к е в ы с о к о н а г р у ж е н н ы х с и с т е м . Н а с о б ъ е д и н я е т к у л ь т у р а п о с т о я н н о г о с а м о с о в е р ш е н с т в о в а н и я , н а ц е л е н н о с т ь н а р е з у л ь т а т и п р е з р е н и е к п о в е р х н о с т н ы м р е ш е н и я м . М ы ц е н и м с к о р о с т ь , с м ы с л и о т в е т с т в е н н о с т ь з а к о н е ч н ы й п р о д у к т . < / p >
< / div >
< / div >
< figure className = "my-12 md:my-16 scroll-animate" style = { { transitionDelay : '200ms' } } >
2026-02-11 15:46:19 +05:00
< img src = { getImageUrl ( 2 ) } alt = { ABOUT_IMAGE_ALT [ 2 ] [ 0 ] } className = "rounded-lg shadow-xl aspect-video object-cover" / >
< figcaption className = "text-center text-sm text-slate-500 mt-3 italic" > { ABOUT_IMAGE_ALT [ 2 ] [ 1 ] } < / figcaption >
2026-02-03 23:16:16 +05:00
< / figure >
{ /* Principles */ }
< div className = "my-16 md:my-24 scroll-animate" style = { { transitionDelay : '100ms' } } >
< h2 className = "font-quicksand text-3xl sm:text-4xl font-bold text-slate-800 mb-10 text-center" > Н а ш и П р и н ц и п ы < / h2 >
< ul className = "space-y-8" >
{ principlesData . map ( ( p , index ) = > (
< PrincipleItem key = { p . title } title = { p . title } index = { index } >
{ p . content }
< / PrincipleItem >
) ) }
< / ul >
< / div >
< figure className = "mt-12 md:my-16 scroll-animate" style = { { transitionDelay : '200ms' } } >
2026-02-11 15:46:19 +05:00
< img src = { getImageUrl ( 3 ) } alt = { ABOUT_IMAGE_ALT [ 3 ] [ 0 ] } className = "rounded-lg shadow-xl aspect-video object-cover" / >
< figcaption className = "text-center text-sm text-slate-500 mt-3 italic" > { ABOUT_IMAGE_ALT [ 3 ] [ 1 ] } < / figcaption >
2026-02-03 23:16:16 +05:00
< / figure >
< / div >
< / section >
) ;
} ;
export default AboutUsSection ;
