fix

src/pages/About/About.tsx

@@ -1,9 +1,149 @@
-const About = () =>{
-    return(
-        <>
-            <p>gggggggg</p>
-        </>
-    )
-}
+import { Link } from "react-router-dom";
+import {
+  CheckCircleOutlined,
+  ExperimentOutlined,
+  SafetyCertificateOutlined,
+  ToolOutlined,
+} from "@ant-design/icons";
+import styles from "./About.module.css";
+import SEO from "../../shared/ui/SEO";
+import productionImage from "../../assets/images/otkrytie-novogo-proizvodstva-v-g.Krymsk.jpeg";
 
-export default About;
+const facts = [
+  { value: "Собственное", label: "производство и техническая база" },
+  { value: "Контроль", label: "сырья, геометрии и качества изделий" },
+  { value: "Партнерство", label: "с монтажными, торговыми и строительными компаниями" },
+];
+
+const principles = [
+  {
+    icon: <SafetyCertificateOutlined />,
+    title: "Надежность",
+    text: "Выпускаем продукцию для инженерных систем, где важны стабильные характеристики, аккуратная геометрия и понятная комплектация.",
+  },
+  {
+    icon: <ExperimentOutlined />,
+    title: "Контроль качества",
+    text: "Следим за производственными этапами, проверяем параметры изделий и бережно относимся к повторяемости каждой партии.",
+  },
+  {
+    icon: <ToolOutlined />,
+    title: "Гибкость",
+    text: "Помогаем подобрать подходящие позиции под объект, объем закупки и требования проекта, включая контрактное производство.",
+  },
+];
+
+const About = () => {
+  return (
+    <>
+      <SEO
+        title="О компании"
+        description="Информация о производственной компании: выпуск ПВХ-продукции, контроль качества, контрактное производство и сотрудничество с партнерами."
+      />
+
+      <main className={styles.page}>
+        <section className={styles.hero}>
+          <div className={styles.heroContent}>
+            <span className={styles.kicker}>О компании</span>
+            <h1>Производим решения для инженерных и строительных задач</h1>
+            <p>
+              Мы развиваем современное производство ПВХ-продукции и комплектующих
+              для объектов, где важны надежность поставок, понятное качество и
+              внимательная работа с заказчиком.
+            </p>
+            <div className={styles.heroActions}>
+              <Link to="/products" className={styles.primaryLink}>
+                Смотреть продукцию
+              </Link>
+              <a href="tel:+79101210962" className={styles.secondaryLink}>
+                +7 910 121 09 62
+              </a>
+            </div>
+          </div>
+
+          <div className={styles.heroImageWrap}>
+            <img
+              src={productionImage}
+              alt="Производственная площадка компании"
+              className={styles.heroImage}
+            />
+          </div>
+        </section>
+
+        <section className={styles.facts} aria-label="Ключевые факты">
+          {facts.map((fact) => (
+            <div className={styles.fact} key={fact.value}>
+              <strong>{fact.value}</strong>
+              <span>{fact.label}</span>
+            </div>
+          ))}
+        </section>
+
+        <section className={styles.story}>
+          <div>
+            <span className={styles.sectionLabel}>Кто мы</span>
+            <h2>Компания, которая держит фокус на производстве и результате</h2>
+          </div>
+          <div className={styles.storyText}>
+            <p>
+              Наша команда работает с продукцией для водоснабжения, канализации,
+              монтажа и смежных инженерных направлений. Мы понимаем, что для
+              клиентов важны не только цена и наличие, но и предсказуемость:
+              сроки, качество партии, корректная консультация и спокойная
+              коммуникация на каждом этапе заказа.
+            </p>
+            <p>
+              Поэтому мы выстраиваем процессы вокруг практических задач клиента:
+              помогаем с подбором номенклатуры, готовим предложения под объем,
+              поддерживаем партнеров в регулярных закупках и берем в работу
+              запросы на контрактное производство.
+            </p>
+          </div>
+        </section>
+
+        <section className={styles.principles}>
+          {principles.map((item) => (
+            <article className={styles.principle} key={item.title}>
+              <div className={styles.principleIcon}>{item.icon}</div>
+              <h3>{item.title}</h3>
+              <p>{item.text}</p>
+            </article>
+          ))}
+        </section>
+
+        <section className={styles.production}>
+          <div className={styles.productionText}>
+            <span className={styles.sectionLabel}>Производство</span>
+            <h2>От сырья до готовой партии</h2>
+            <p>
+              Мы уделяем внимание стабильности технологического процесса,
+              состоянию оборудования и качеству готовых изделий. Такой подход
+              помогает сохранять повторяемость продукции и уверенно работать как
+              с разовыми заказами, так и с постоянными поставками.
+            </p>
+          </div>
+          <ul className={styles.checkList}>
+            <li>
+              <CheckCircleOutlined />
+              Подбираем материалы под назначение продукции
+            </li>
+            <li>
+              <CheckCircleOutlined />
+              Контролируем размеры и внешний вид изделий
+            </li>
+            <li>
+              <CheckCircleOutlined />
+              Упаковываем продукцию с учетом хранения и доставки
+            </li>
+            <li>
+              <CheckCircleOutlined />
+              Работаем с оптовыми, проектными и партнерскими заказами
+            </li>
+          </ul>
+        </section>
+      </main>
+    </>
+  );
+};
+
+export default About;