fix: hero section carousel

package.json

@@ -11,7 +11,8 @@
   "dependencies": {
     "next": "15.3.0",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "swiper": "^11.2.6"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",

public/css/style.css

@@ -13540,7 +13540,7 @@ html.rd-navbar-fixed-linked .page {
 	align-self: stretch;
 	align-items: stretch;
 	width: 100%;
-	height: auto;
+	height: 100%;
 	min-height: inherit;
 	transition-property: transform;
 	box-sizing: content-box;
@@ -13767,8 +13767,8 @@ html.rd-navbar-fixed-linked .page {
 .swiper-slide {
 	position: relative;
 	display: flex;
-	align-items: center;
-	justify-content: center;
+	/* align-items: center; */
+	/* justify-content: center; */
 	flex-shrink: 0;
 	width: 100%;
 	height: 100%;

src/app/globals.css

@@ -25,6 +25,8 @@
   --color-colorFooterTextHover: var(--color-colorExt3);
   --color-colorFormInput: var(--color-colorExt2);
   --color-colorContactForm: var(--color-colorExt5);
+  --color-colorText1: var(--color-colorExt1);
+  --color-colorText2: var(--color-colorExt2);
 }
 
 @layer components {

src/components/ContactFormBox.tsx

@@ -1,6 +1,6 @@
 export default function ContactFormBox() {
   return (
-    <div className="lg:w-1/3 box-1-cell height-fill context-dark bg-colorContactForm/80!">
+    <div className="lg:w-1/3 box-1-cell height-fill context-dark bg-colorContactForm/80! z-20!">
       <div className="box-1-bg-shape">
         <img className="box-1-bg-image" src="images/bg-shape-1.png" alt="" role="presentation" />
       </div>

src/components/Hero.tsx

@@ -1,8 +1,48 @@
+"use client";
+
+import { Swiper, SwiperSlide } from "swiper/react";
 import ContactFormBox from "./ContactFormBox";
+import { Autoplay } from "swiper/modules";
 
 export default function Hero() {
   return (
-    <section className="section bg-[url(/images/bg-header2.webp)] flex! flex-row! justify-end!">
+    <section className="section flex! flex-row! justify-end! relative!">
+      <Swiper
+        className="absolute w-full h-full"
+        modules={[Autoplay]}
+        spaceBetween={50}
+        slidesPerView={1}
+        onSlideChange={() => console.log("slide change")}
+        onSwiper={(swiper) => console.log(swiper)}
+        autoplay={{ delay: 4000 }}
+        loop
+      >
+        <SwiperSlide className="bg-[url(/images/bg-header2.webp)]">
+          <section className="section section-lg text-colorText2! bg-colorExt5/50 w-full h-full">
+            <div className="container">
+              <div className="row">
+                <div className="col-8 text-wrap">
+                  <div className="text-8xl!">Real Estate, Refined</div>
+                  <div className="text-5xl! mt-12">Where Southern Charm Meets Boutique Real Estate</div>
+                </div>
+              </div>
+            </div>
+          </section>
+        </SwiperSlide>
+        <SwiperSlide className="bg-[url(/images/bg-header3.webp)]">
+          <section className="section section-lg text-colorText2! bg-colorExt5/50 w-full h-full">
+            <div className="container">
+              <div className="row">
+                <div className="col-8 text-wrap">
+                  <div className="text-8xl!">Your Vision, Our Expertise</div>
+                  <div className="text-5xl! mt-12">Discover a Smarter Way to Buy & Sell</div>
+                </div>
+              </div>
+            </div>
+          </section>
+        </SwiperSlide>
+      </Swiper>
+
       <ContactFormBox />
     </section>
   );

yarn.lock

@@ -1450,6 +1450,7 @@ __metadata:
     prettier: "npm:^3.5.3"
     react: "npm:^19.0.0"
     react-dom: "npm:^19.0.0"
+    swiper: "npm:^11.2.6"
     tailwindcss: "npm:^4"
     typescript: "npm:^5"
   languageName: unknown
@@ -3705,6 +3706,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"swiper@npm:^11.2.6":
+  version: 11.2.6
+  resolution: "swiper@npm:11.2.6"
+  checksum: 10c0/36ba63e2d1c5045f647f0f07b3a25c164393fb89b17db63f57fa9f776eb61bc5cb2c34634f80cf69caaddc209a174d0cd7be23c580785534569ea4a098b3a42c
+  languageName: node
+  linkType: hard
+
 "synckit@npm:^0.11.0":
   version: 0.11.4
   resolution: "synckit@npm:0.11.4"