добавил ветку main-page

front/src/components/ContactProduct/ContactProduct.tsx

@@ -0,0 +1,88 @@
+import React, { useRef, useState } from "react";
+import styles from "./ContactProduct.module.css";
+import Button from "../Button/Button";
+import { Carousel } from "antd";
+import ModalRequestForm from "../ModalRequestForm/ModalRequestForm";
+const imageUrl = "http://sprint-pro.com/images/banners/slide1/t1.png";
+
+interface ProductionSlide {
+  id: number;
+  image: string;
+  label: string;
+}
+
+const slides: ProductionSlide[] = [
+  {
+    id: 1,
+    image: "/images/prod1.jpg",
+    label: "Аэрозольная упаковка",
+  },
+  {
+    id: 2,
+    image: "/images/prod2.jpg",
+    label: "Металлические баллоны",
+  },
+];
+
+
+const ProductionBanner: React.FC = () => {
+
+    const [open, setOpen] = useState(false);
+
+    const handleClick = () => {
+        console.log('Кнопка нажата!');
+    };
+
+    const carouselRef = useRef<any>(null);
+
+    console.log('ProductionBanner render, open:', open);
+
+    return (
+        <div className={styles.wrapper}>
+            <ModalRequestForm open={open} onClose={() => setOpen(false)} />
+      <div className={styles.left}>
+        <h2 className={styles.title}>КОНТРАКТНОЕ</h2>
+        <h1 className={styles.subtitle}>ПРОИЗВОДСТВО</h1>
+
+        <Button 
+            label="СДЕЛАТЬ ЗАПРОС" 
+            onClick={() => setOpen(true)}
+        />
+      </div>
+
+      <div className={styles.right}>
+        <Carousel
+          ref={carouselRef}
+          dots={false}
+          effect="scrollx"
+          className={styles.carousel}
+        >
+          {slides.map((s) => (
+            <div key={s.id} className={styles.slide}>
+              <img src={imageUrl} className={styles.image} alt="prod" />
+              <div className={styles.label}>{s.label}</div>
+            </div>
+          ))}
+        </Carousel>
+
+        <div className={styles.arrows}>
+          <button
+            className={styles.arrow}
+            onClick={() => carouselRef.current?.prev()}
+          >
+            ←
+          </button>
+          <button
+            className={styles.arrow}
+            onClick={() => carouselRef.current?.next()}
+          >
+            →
+          </button>
+        </div>
+      </div>
+    </div>
+    );
+};
+
+
+export default ProductionBanner;