feat(components): 添加轮播图组件

- 新增 BannerCarousel 组件
- 使用 antd 的 Carousel组件实现轮播图功能
- 包含桌面端和移动端两套轮播图
- 配置了轮播图的自动播放速度、箭头和点样式- 使用 Next.js 的 Image 组件加载轮播图图片

src/components/bannerCarousel.tsx

@@ -0,0 +1,76 @@
+"use client"
+import React from 'react';
+import {Carousel, ConfigProvider} from "antd";
+import Image from "next/image";
+
+function BannerCarousel() {
+  return (
+    <>
+      <ConfigProvider
+        theme={{
+          components: {
+            Carousel: {
+              arrowSize:28,
+            }
+          }
+        }}
+      >
+        <div className={"hidden sm:block"}>
+          <Carousel
+            autoplay
+            autoplaySpeed={3000}
+            arrows
+            dots={{
+              className: "bottom-4"
+            }}
+          >
+            <div>
+              <div className="w-full bg-blue-500 flex items-center justify-center text-white text-4xl font-bold">
+                <Image src={"/assets/home/1.jpg"} alt={"轮播图图片"} width={1920} height={1080} />
+              </div>
+            </div>
+            <div>
+              <div className="w-full bg-green-500 flex items-center justify-center text-white text-4xl font-bold">
+                <Image src={"/assets/home/2.jpg"} alt={"轮播图图片"} width={1920} height={1080} />
+              </div>
+            </div>
+            <div>
+              <div className="w-full bg-red-500 flex items-center justify-center text-white text-4xl font-bold">
+                <Image src={"/assets/home/3.jpg"} alt={"轮播图图片"} width={1920} height={1080} />
+              </div>
+            </div>
+          </Carousel>
+        </div>
+
+        <div className={"sm:hidden"}>
+          <Carousel
+            autoplay
+            autoplaySpeed={3000}
+            arrows
+            dots={{
+              className: "bottom-4"
+            }}
+          >
+            <div>
+              <div className="w-full bg-blue-500 flex items-center justify-center text-white text-4xl font-bold">
+                <Image src={"/assets/home/5.jpg"} alt={"轮播图图片"} width={1920} height={1080} />
+              </div>
+            </div>
+            <div>
+              <div className="w-full bg-green-500 flex items-center justify-center text-white text-4xl font-bold">
+                <Image src={"/assets/home/6.jpg"} alt={"轮播图图片"} width={1920} height={1080} />
+              </div>
+            </div>
+            <div>
+              <div className="w-full bg-red-500 flex items-center justify-center text-white text-4xl font-bold">
+                <Image src={"/assets/home/7.jpg"} alt={"轮播图图片"} width={1920} height={1080} />
+              </div>
+            </div>
+          </Carousel>
+        </div>
+      </ConfigProvider>
+    </>
+  );
+}
+
+export default BannerCarousel;