198 lines
14 KiB
TypeScript
Executable File
198 lines
14 KiB
TypeScript
Executable File
import React, { useEffect, useState } from 'react';
|
||
import { SECTION_IDS } from '../constants';
|
||
import { SparklesIcon } from './icons';
|
||
import { fetchUploadFiles, STRAPI_URL } from '../strapiService';
|
||
|
||
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>
|
||
);
|
||
|
||
|
||
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',
|
||
];
|
||
|
||
const AboutUsSection: React.FC = () => {
|
||
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; };
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
const observer = new IntersectionObserver(
|
||
(entries) => {
|
||
entries.forEach((entry) => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.classList.add('scroll-animate-visible');
|
||
observer.unobserve(entry.target);
|
||
}
|
||
});
|
||
},
|
||
{ threshold: 0.1 }
|
||
);
|
||
const elements = document.querySelectorAll('.scroll-animate');
|
||
elements.forEach((el) => observer.observe(el));
|
||
return () => observer.disconnect();
|
||
}, [aboutImages]);
|
||
|
||
const getImageUrl = (index: number) => aboutImages[index] ?? PLACEHOLDER_IMAGES[index];
|
||
|
||
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' }}>
|
||
<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>
|
||
</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' }}>
|
||
<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>
|
||
</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' }}>
|
||
<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>
|
||
</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' }}>
|
||
<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>
|
||
</figure>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
export default AboutUsSection; |