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

2025-11-20 15:42:09 +03:00
1 parent 1fe3ba2ba5
commit 8dc704c466
@@ -0,0 +1,73 @@
+import styles from './Banner.module.css'
+import React from "react";
+import { Carousel } from "antd";
+import Button from '../Button/Button.tsx';
+
+export interface SlideItem {
+id: number;
+image: string;
+title: string;
+subtitle: string;
+description: string;
+}
+
+
+const slides: SlideItem[] = [
+    {
+        id: 1,
+        image: "/images/banner1.jpg",
+        title: "ПРОИЗВОДСТВО",
+        subtitle: "ЛЫЖНЫХ СМАЗОК, АКСЕСУАРОВ И ПРОДУКЦИИ",
+        description: "ДЛЯ ЗИМНИХ ВИДОВ СПОРТА",
+    },
+    {
+        id: 2,
+        image: "/images/banner2.jpg",
+        title: "ПРОИЗВОДСТВО",
+        subtitle: "ЛЫЖНЫХ СМАЗОК, АКСЕСУАРОВ И ПРОДУКЦИИ",
+        description: "ДЛЯ ЗИМНИХ ВИДОВ СПОРТА",
+    },
+    {
+        id: 3,
+        image: "/images/banner3.jpg",
+        title: "ПРОИЗВОДСТВО",
+        subtitle: "ЛЫЖНЫХ СМАЗОК, АКСЕСУАРОВ И ПРОДУКЦИИ",
+        description: "ДЛЯ ЗИМНИХ ВИДОВ СПОРТА",
+    },
+];
+
+
+const BannerSlider: React.FC = () => {
+
+const handleClick = () => {
+        console.log('Кнопка нажата!');
+    };
+
+return (
+    <div className={styles.wrapper}>
+        <Carousel autoplay dots className={styles.carousel}>
+            {slides.map((slide) => (
+                <div key={slide.id}>
+                    <div className={styles.slide}>
+                        <div className={styles.textBlock}>
+                            <h2>{slide.title}</h2>
+                            <h1>
+                            {slide.subtitle}
+                            <br /> {slide.description}
+                            </h1>
+                            <Button 
+                                label="СМОТРЕТЬ КАТАЛОГ" 
+                                onClick={handleClick}
+                            />
+                        </div>
+                        <img src={slide.image} alt="banner" className={styles.image} />
+                    </div>
+                </div>
+            ))}
+        </Carousel>
+    </div>
+    );
+};
+
+
+export default BannerSlider;