home page parts

app/globals.css

@@ -125,5 +125,25 @@
 }
 
 .loi{
-  color:#d2610ab0;
+  color:#a60404ad;
 }
+
+.gradient-text {
+  background: linear-gradient(
+    to bottom right,
+    #ffffff 0%,
+    #ffffff 50%,
+    rgba(255, 255, 255, 0.5) 100%
+  );
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+
+/* 
+  text gradient tailwindd classlari
+
+  bg-linear-to-br from-white via-white to-white/50
+  text-transparent bg-clip-text
+ */

app/page.tsx

@@ -1,10 +1,23 @@
-import { Banner, Statistics } from "@/components/pages/home";
+import {
+  AboutUs,
+  Banner,
+  Line,
+  OurService,
+  Statistics,
+  Testimonial,
+  Video,
+} from "@/components/pages/home";
 
 export default function Home() {
   return (
-    <main className="bg-slate-950 mb-50">
+    <main className="bg-slate-950 mb-90">
       <Banner />
       <Statistics />
+      <AboutUs />
+      <Video />
+      <OurService />
+      <Testimonial />
+      <Line/>
     </main>
   );
 }

components/HomeMarquee.tsx

@@ -0,0 +1,52 @@
+import Image from "next/image";
+import Marquee from "react-fast-marquee";
+
+export default function HomeMarquee() {
+  return (
+    <div className="bg-[#1e1d1c] py-5">
+      <Marquee>
+        <div className="relative sm:w-125 w-70 sm:h-62.5 h-40 mx-2 overflow-hidden rounded-xl">
+          <Image
+            src="/images/home/videoSlide1.jpg"
+            alt="images"
+            fill
+            priority
+            className="object-cover"
+          />
+        </div>
+        <div className="relative sm:w-125 w-70 sm:h-62.5 h-40 mx-2 overflow-hidden rounded-xl">
+          <Image
+            src="/images/home/videoSlide2.jpg"
+            alt="images"
+            fill
+            className="object-cover"
+          />
+        </div>
+        <div className="relative sm:w-125 w-70 sm:h-62.5 h-40 mx-2 overflow-hidden rounded-xl">
+          <Image
+            src="/images/home/videoSlide3.jpeg"
+            alt="images"
+            fill
+            className="object-cover"
+          />
+        </div>
+        <div className="relative sm:w-125 w-70 sm:h-62.5 h-40 mx-2 overflow-hidden rounded-xl">
+          <Image
+            src="/images/home/videoSlide4.jpg"
+            alt="images"
+            fill
+            className="object-cover"
+          />
+        </div>
+        <div className="relative sm:w-125 w-70 sm:h-62.5 h-40 mx-2 overflow-hidden rounded-xl">
+          <Image
+            src="/images/home/videoSlide5.jpeg"
+            alt="images"
+            fill
+            className="object-cover"
+          />
+        </div>
+      </Marquee>
+    </div>
+  );
+}

components/dot/dot.css

@@ -1,15 +1,15 @@
 .pulse-wrapper {
   position: relative;
-  width: 40px;
-  height: 40px;
+  width: 30px;
+  height: 30px;
 }
 
 .core {
   position: absolute;
   inset: 0;
   margin: auto;
-  width: 14px;
-  height: 14px;
+  width: 12px;
+  height: 12px;
   background: #dc2626; /* red-600 */
   border-radius: 50%;
   z-index: 2;
@@ -34,10 +34,10 @@
   animation-delay: 0.5s;
 }
 .ring:nth-child(3) {
-  animation-delay: 1s;
+  animation-delay: 1.5s;
 }
 .ring:nth-child(4) {
-  animation-delay: 1.5s;
+  animation-delay: 2s;
 }
 .ring:nth-child(5) {
   animation-delay: 1.5s;
@@ -49,7 +49,7 @@
     opacity: 0.6;
   }
   100% {
-    transform: scale(3);
+    transform: scale(2.5);
     opacity: 0;
   }
 }

components/pages/home/about.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import React from "react";
+
+import { Button } from "@/components/ui/button";
+import Image from "next/image";
+import { Flame, Building2, Ambulance } from "lucide-react";
+import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
+
+interface ServiceItem {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+}
+
+const services: ServiceItem[] = [
+  {
+    icon: <Flame width={40} height={40} className="text-red-500" />,
+    title: "FIRE PREVENTION",
+    description:
+      "Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum aenean imperdiet augue",
+  },
+  {
+    icon: <Building2 width={40} height={40} className="text-red-500" />,
+    title: "ACTIVE ACCIDENTS",
+    description:
+      "Nullam dictum felis eu pede mollis pretium. Integer tincidunt cras dapibus vivamus consequat vitae.",
+  },
+  {
+    icon: <Ambulance width={40} height={40} className="text-red-500" />,
+    title: "AMBULANCE SERVICE",
+    description:
+      "Donec pede justo fringilla vel aliquet nec vulputate eget arcu enim justo rhoncus ut venenatis.",
+  },
+];
+
+export function AboutUs() {
+  return (
+    <section className="bg-[#1e1d1c] py-16 px-4 sm:py-20 sm:px-6 lg:px-8">
+      <div className="max-w-7xl mx-auto">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center">
+          {/* Left Content */}
+          <div className="space-y-8">
+            {/* Header */}
+            <div className="space-y-6">
+              <div className="flex items-center gap-3">
+                <DotAnimatsiya />
+                <span className="text-white font-bold text-sm tracking-wide">
+                  ABOUT US
+                </span>
+              </div>
+              <h2
+                className="text-4xl bg-linear-to-br from-white via-white to-black
+  text-transparent bg-clip-text sm:text-5xl lg:text-6xl font-bold  leading-tight"
+              >
+                FIREFIGHTERS
+                <br />
+                AT THE READY
+              </h2>
+            </div>
+
+            {/* Services */}
+            <div className="space-y-6">
+              {services.map((service, index) => (
+                <div key={index} className="flex items-center gap-4">
+                  <div className="rounded-lg p-3 inline-block bg-[#282828]">
+                    {service.icon}
+                  </div>
+                  <div>
+                    <h3 className="text-white font-bold text-base sm:text-lg mb-2">
+                      {service.title}
+                    </h3>
+                    <p className="text-gray-400 text-sm sm:text-base leading-relaxed">
+                      {service.description}
+                    </p>
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            {/* Button */}
+            <div>
+              <Button className="bg-red-600 hover:bg-red-700 text-white font-bold px-8 py-3 rounded-full transition-colors duration-300 shadow-[0px_0px_2px_8px_#ff01015c]">
+                ABOUT US
+              </Button>
+            </div>
+          </div>
+
+          {/* Right Image */}
+          <div className="relative flex justify-center lg:justify-end">
+            <div className="relative w-full max-w-md">
+              {/* Main Image */}
+              <div className="relative rounded-lg overflow-hidden bg-gray-900">
+                <Image
+                  src="/images/home/bolta.jpg"
+                  alt="Firefighter at ready"
+                  width={400}
+                  height={600}
+                  className="w-full h-auto object-cover"
+                  priority
+                />
+              </div>
+
+              {/* Badge Overlay */}
+              <div className="absolute bottom-4 right-4 sm:bottom-6 sm:left-6 flex items-center justify-start gap-3">
+                <Image
+                  src="/images/home/emblem.png"
+                  alt="Best Award Badge"
+                  width={100}
+                  height={100}
+                  className="w-20 h-20 sm:w-24 sm:h-34 drop-shadow-lg"
+                />
+                <div className="text-center">
+                  <p className="text-white font-bold text-sm sm:text-base">
+                    BEST AWARD
+                  </p>
+                  <p className="text-white font-bold text-sm sm:text-base">
+                    FIREFIGHTER 2025
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

components/pages/home/banner.tsx

@@ -36,7 +36,8 @@ export function Banner() {
               </div>
 
               {/* Main Heading */}
-              <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight text-pretty">
+              <h1 className="bg-linear-to-br from-white via-white to-black
+  text-transparent bg-clip-text text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight text-pretty">
                 THE FIRE GUARDIAN
               </h1>
 
@@ -47,7 +48,7 @@ export function Banner() {
               </p>
 
               {/* CTA Button */}
-              <button className="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105 w-fit">
+              <button className="shadow-[0px_0px_2px_8px_#ff01015c] bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105 w-fit">
                 GET STARTED
               </button>
             </div>
@@ -73,7 +74,7 @@ export function Banner() {
               </div>
 
               {/* Main Heading */}
-              <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight text-pretty">
+              <h1 className="gradient-text text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight text-pretty">
                 THE FIRE GUARDIAN
               </h1>
 

components/pages/home/index.ts

@@ -1,2 +1,7 @@
 export { Banner } from "./banner";
 export { Statistics } from "./statistics";
+export { AboutUs } from "./about";
+export { Video } from "./video";
+export { OurService } from "./ourService";
+export { Testimonial } from "./testimonal";
+export { Line } from "./line";

components/pages/home/line.tsx

@@ -0,0 +1,33 @@
+import { Phone } from "lucide-react";
+import Image from "next/image";
+
+export function Line() {
+  return (
+    <div className="bg-black py-10 px-4">
+      <div className="max-w-280 w-full mx-auto relative py-10 flex items-center justify-between ">
+        <div className="text-white flex flex-col items-start justify-start gap-5 ">
+          <h2 className="lg:text-5xl sm:text-3xl text-2xl max-w-[80%] w-full font-semibold">
+            Ready for Action 24/7: Contact Us at
+          </h2>
+          <p className="flex items-center justify-center gap-4 font-semibold sm:text-xl text-lg">
+            <span
+              className="shrink-0 w-10 h-10 bg-red-600 rounded-full flex items-center justify-center
+                  shadow-[0_0_0px_4px_rgba(239,68,68,0.1)]"
+            >
+              <Phone className="text-white w-5 h-5" />
+            </span>
+            +123-456-7890
+          </p>
+        </div>
+        <Image
+          src="/images/home/fireHydrant.png"
+          alt="image"
+          width={60}
+          height={60}
+          priority
+          className=" sm:flex hidden object-contain w-80 h-80 absolute -bottom-25 right-0"
+        />
+      </div>
+    </div>
+  );
+}

components/pages/home/ourService.tsx

@@ -0,0 +1,117 @@
+import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
+import { ChevronRight } from "lucide-react";
+import Image from "next/image";
+
+export function OurService() {
+  return (
+    <div className="bg-[#1e1d1c] py-10">
+      <div className="max-w-[1200px] w-full mx-auto">
+        {/* header */}
+        <div className="space-y-4">
+          <div className="flex items-center w-full justify-center gap-2 text-white font-bold">
+            <DotAnimatsiya />
+            OUR SERVICES
+          </div>
+          <div className="text-5xl tracking-[5px] font-bold bg-linear-to-br text-center w-full from-white via-white to-black text-transparent bg-clip-text">
+            FIREFIGHTER RESPONSIBILITIES
+          </div>
+          <div className="text-center w-full text-gray-400 max-w-[600px] mx-auto">
+            Aliquam lorem ante dapibus in viverra quis feugiat a tellus
+            phasellus viverra nulla ut metus varius laoreet quisque rutrum.
+          </div>
+        </div>
+
+        {/* cards */}
+        <div className="max-w-250 w-full mx-auto flex items-center gap-5 my-10">
+          <div className="relative space-y-4 py-6 px-8 rounded-xl w-[55%] bg-[linear-gradient(to_bottom_right,#000000,#000000,#000000,#d2610a)]">
+            <p className="font-bold bg-linear-to-br from-white via-white to-black text-transparent bg-clip-text">
+              Operation Force
+            </p>
+            <p className="text-gray-400 max-w-80 w-full">
+              Aliquam lorem ante dapibus in viverra feugiat phasellus.
+            </p>
+            <button className="text-[#dc2626] font-semibold flex items-center gap-2 text-sm">
+              LEARN MORE <ChevronRight size={20} />
+            </button>
+            <Image
+              src="/images/home/gruop.png"
+              alt="images"
+              width={200}
+              height={100}
+              className="object-contain absolute bottom-0 right-2 z-50"
+            />
+          </div>
+          <div className="relative overflow-hidden space-y-4 py-6 px-8 rounded-xl w-[45%] bg-[linear-gradient(to_bottom_right,#000000,#000000,#000000,#d2610a)]">
+            <p className="font-bold bg-linear-to-br from-white via-white to-black text-transparent bg-clip-text">
+              Operation Force
+            </p>
+            <p className="text-gray-400 max-w-70 w-full">
+              Aliquam lorem ante dapibus in viverra feugiat phasellus.
+            </p>
+            <button className="text-[#dc2626] font-semibold flex items-center gap-2 text-sm">
+              LEARN MORE <ChevronRight size={20} />
+            </button>
+            <Image
+              src="/images/home/redShlang.png"
+              alt="images"
+              width={200}
+              height={100}
+              className="object-contain absolute -bottom-4 -right-4 z-50"
+            />
+          </div>
+        </div>
+
+        <div className="max-w-250 flex items-start justify-between gap-5 mt-5 w-full mx-auto">
+          <div className="relative rounded-xl w-[40%] bg-[linear-gradient(to_bottom_right,#d2610a,#000000,#000000)]">
+            <Image
+              src="/images/home/ambulance.png"
+              alt="images"
+              width={300}
+              height={200}
+              className="object-contain mt-5"
+            />
+            <div className="space-y-4 py-6 px-8">
+              <p className="font-bold bg-linear-to-br from-white via-white to-black text-transparent bg-clip-text">
+                Operation Force
+              </p>
+              <p className="text-gray-400 max-w-80 w-full">
+                Aliquam lorem ante dapibus in viverra feugiat phasellus.
+              </p>
+              <button className="text-[#dc2626] font-semibold flex items-center gap-2 text-sm">
+                LEARN MORE <ChevronRight size={20} />
+              </button>
+            </div>
+          </div>
+          <div className="w-[60%]">
+            <div className="relative overflow-hidden space-y-4 py-6 px-8 rounded-xl w-full bg-[linear-gradient(to_bottom_right,#000000,#000000,#000000,#d2610a)]">
+              <p className="font-bold bg-linear-to-br from-white via-white to-black text-transparent bg-clip-text">
+                Operation Force
+              </p>
+              <p className="text-gray-400 max-w-70 w-full">
+                Aliquam lorem ante dapibus in viverra feugiat phasellus.
+              </p>
+              <button className="mt-38 text-[#dc2626] font-semibold flex items-center gap-2 text-sm">
+                LEARN MORE <ChevronRight size={20} />
+              </button>
+              <Image
+                src="/images/home/balon.png"
+                alt="images"
+                width={200}
+                height={100}
+                className="object-contain absolute -bottom-40 -right-4 z-50"
+              />
+            </div>
+            <div className="py-8 px-8 rounded-xl mt-5 w-full p-5 bg-[linear-gradient(to_top_right,#000000,#000000,#d2610a)] flex items-center justify-between">
+              <h2 className="text-3xl font-semibold font-armanai text-white">
+                View more service
+              </h2>
+              <button className="shadow-[0px_0px_2px_6px_#a60404ad] bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105 w-fit">
+                GET STARTED
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

components/pages/home/statistics.tsx

@@ -23,17 +23,17 @@ export function Statistics() {
   ];
 
   return (
-    <section className="w-full bg-black py-10 sm:py-20 lg:py-15">
+    <section className="w-full bg-black">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="grid grid-cols-2 md:grid-cols-4 gap-8 lg:gap-12">
           {stats.map((stat, index) => (
-            <div key={index} className="flex flex-col items-center justify-center">
+            <div key={index} className="flex flex-col items-center justify-center py-10 sm:py-20 lg:py-15 border-b-red-600 border-b">
               {/* Number and Symbol */}
               <div className="flex items-baseline gap-2">
                 <span className="text-4xl sm:text-5xl lg:text-6xl font-bold text-white">
                   {stat.number}
                 </span>
-                <span className="text-2xl sm:text-3xl font-bold text-red-600">{stat.symbol}</span>
+                <span className="text-4xl sm:text-5xl lg:text-6xl font-bold text-red-600">{stat.symbol}</span>
               </div>
 
               {/* Label */}

components/pages/home/testimonal.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Autoplay } from "swiper/modules";
+import Image from "next/image";
+import "swiper/css";
+import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
+
+const testimonials = [
+  {
+    id: 1,
+    quote:
+      "I've witnessed Fireforce in action multiple times, and they never cease to amaze me with their dedication and professionalism. They are the backbone of our safety and security. Thank you, Fireforce!",
+    name: "JOHN SMITH",
+    role: "Manager",
+    avatar: "/images/home/avatar.jpg",
+    rating: 5,
+  },
+  {
+    id: 2,
+    quote:
+      "The team's response time and expertise saved our property from a devastating fire. Their bravery and commitment to protecting our community is truly remarkable. Highly recommend their services!",
+    name: "SARAH JOHNSON",
+    role: "Business Owner",
+    avatar: "/images/home/avatar.jpg",
+    rating: 5,
+  },
+  {
+    id: 3,
+    quote:
+      "Working alongside Fireforce has been an honor. Their training programs and emergency protocols are second to none. They set the standard for fire safety excellence in our region.",
+    name: "MICHAEL DAVIS",
+    role: "Safety Director",
+    avatar: "/images/home/avatar.jpg",
+    rating: 5,
+  },
+];
+
+function StarRating({ rating }: { rating: number }) {
+  return (
+    <div className="flex gap-1">
+      {[...Array(rating)].map((_, i) => (
+        <svg
+          key={i}
+          className="w-4 h-4 md:w-5 md:h-5 text-yellow-400 fill-current"
+          viewBox="0 0 20 20"
+        >
+          <path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" />
+        </svg>
+      ))}
+    </div>
+  );
+}
+
+export function Testimonial() {
+  return (
+    <section className="w-full bg-[#1a1a1a]">
+      <div className="flex flex-col lg:flex-row min-h-[400px] lg:min-h-[500px]">
+        {/* Left Side - Firefighter Image */}
+        <div className="relative w-full lg:w-1/2 h-[300px] sm:h-[400px] lg:h-auto">
+          <Image
+            src="/images/home/testimonal.jpg"
+            alt="Professional firefighter in protective gear"
+            fill
+            className="object-cover object-top"
+            priority
+          />
+        </div>
+
+        {/* Right Side - Testimonial Content with Background */}
+        <div className="relative w-full lg:w-1/2 min-h-[350px] sm:min-h-[400px] lg:min-h-[500px]">
+          {/* Background Image */}
+          <div className="absolute inset-0">
+            <Image
+              src="/images/home/fikrBack.jpg"
+              alt="Firefighters in action"
+              fill
+              className="object-cover"
+            />
+            {/* Gradient Overlay - Direction to the right */}
+            <div className="absolute inset-0 bg-linear-to-r from-[#1a1a1a] via-[#1a1a1a]/80 to-transparent" />
+          </div>
+
+          {/* Content */}
+          <div className="relative z-10 h-full flex flex-col items-start justify-center px-6 sm:px-10 lg:px-12 xl:px-16 py-10 lg:py-0">
+            {/* Header */}
+            <div className="w-full max-w-xl mx-auto mb-5">
+              <div className="flex items-center gap-2">
+                <DotAnimatsiya />
+                <span className="text-white font-semibold text-sm tracking-wider">
+                  TESTIMONIALS
+                </span>
+              </div>
+            </div>
+
+            <Swiper
+              modules={[Autoplay]}
+              autoplay={{
+                delay: 5000,
+                disableOnInteraction: false,
+              }}
+              loop={true}
+              pagination={false}
+              navigation={false}
+              className="w-full max-w-xl"
+            >
+              {testimonials.map((testimonial) => (
+                <SwiperSlide key={testimonial.id}>
+                  <div className="space-y-6">
+                    {/* Quote */}
+                    <p className="text-white text-base sm:text-lg lg:text-xl leading-relaxed">
+                      "{testimonial.quote}"
+                    </p>
+
+                    {/* Author Info */}
+                    <div className="flex items-center gap-3">
+                      <div className="relative w-10 h-10 sm:w-12 sm:h-12 rounded-full overflow-hidden">
+                        <Image
+                          src={testimonial.avatar || "/placeholder.svg"}
+                          alt={testimonial.name}
+                          fill
+                          className="object-cover"
+                        />
+                      </div>
+                      <div>
+                        <h4 className="text-white font-bold text-sm sm:text-base">
+                          {testimonial.name}
+                        </h4>
+                        <p className="text-red-600 text-xs sm:text-sm">
+                          {testimonial.role}
+                        </p>
+                      </div>
+                    </div>
+
+                    {/* Star Rating */}
+                    <StarRating rating={testimonial.rating} />
+                  </div>
+                </SwiperSlide>
+              ))}
+            </Swiper>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

components/pages/home/video.tsx

@@ -0,0 +1,22 @@
+import HomeMarquee from "@/components/HomeMarquee";
+import { Play } from "lucide-react";
+
+export function Video() {
+  return (
+    <>
+      <div
+        className="bg-[#1e1d1c] bg-fixed max-sm:bg-center"
+        style={{ backgroundImage: "url(/images/home/videoBack.jpg)" }}
+      >
+        <div className="flex items-center justify-center bg-linear-to-t from-[#1e1d1c] to-[#1e1d1c02] h-80 w-full relative">
+          <button className="bg-white text-[#dc2626] p-4 rounded-[50%]">
+            <Play />
+          </button>
+        </div>
+      </div>
+      <div>
+        <HomeMarquee />
+      </div>
+    </>
+  );
+}

package.json

@@ -51,10 +51,12 @@
     "react": "19.2.0",
     "react-day-picker": "9.8.0",
     "react-dom": "19.2.0",
+    "react-fast-marquee": "^1.6.5",
     "react-hook-form": "^7.60.0",
     "react-resizable-panels": "^2.1.7",
     "recharts": "2.15.4",
     "sonner": "^1.7.4",
+    "swiper": "^12.0.3",
     "tailwind-merge": "^3.3.1",
     "tailwindcss-animate": "^1.0.7",
     "vaul": "^1.1.2",

pnpm-lock.yaml

@@ -134,6 +134,9 @@ importers:
       react-dom:
         specifier: 19.2.0
         version: 19.2.0(react@19.2.0)
+      react-fast-marquee:
+        specifier: ^1.6.5
+        version: 1.6.5(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       react-hook-form:
         specifier: ^7.60.0
         version: 7.71.1(react@19.2.0)
@@ -146,6 +149,9 @@ importers:
       sonner:
         specifier: ^1.7.4
         version: 1.7.4(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      swiper:
+        specifier: ^12.0.3
+        version: 12.0.3
       tailwind-merge:
         specifier: ^3.3.1
         version: 3.4.0
@@ -1535,6 +1541,12 @@ packages:
     peerDependencies:
       react: ^19.2.0
 
+  react-fast-marquee@1.6.5:
+    resolution: {integrity: sha512-swDnPqrT2XISAih0o74zQVE2wQJFMvkx+9VZXYYNSLb/CUcAzU9pNj637Ar2+hyRw6b4tP6xh4GQZip2ZCpQpg==}
+    peerDependencies:
+      react: '>= 16.8.0 || ^18.0.0'
+      react-dom: '>= 16.8.0 || ^18.0.0'
+
   react-hook-form@7.71.1:
     resolution: {integrity: sha512-9SUJKCGKo8HUSsCO+y0CtqkqI5nNuaDqTxyqPsZPqIwudpj4rCrAz/jZV+jn57bx5gtZKOh3neQu94DXMc+w5w==}
     engines: {node: '>=18.0.0'}
@@ -1647,6 +1659,10 @@ packages:
       babel-plugin-macros:
         optional: true
 
+  swiper@12.0.3:
+    resolution: {integrity: sha512-BHd6U1VPEIksrXlyXjMmRWO0onmdNPaTAFduzqR3pgjvi7KfmUCAm/0cj49u2D7B0zNjMw02TSeXfinC1hDCXg==}
+    engines: {node: '>= 4.7.0'}
+
   tailwind-merge@3.4.0:
     resolution: {integrity: sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==}
 
@@ -2979,6 +2995,11 @@ snapshots:
       react: 19.2.0
       scheduler: 0.27.0
 
+  react-fast-marquee@1.6.5(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
+    dependencies:
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+
   react-hook-form@7.71.1(react@19.2.0):
     dependencies:
       react: 19.2.0
@@ -3106,6 +3127,8 @@ snapshots:
       client-only: 0.0.1
       react: 19.2.0
 
+  swiper@12.0.3: {}
+
   tailwind-merge@3.4.0: {}
 
   tailwindcss-animate@1.0.7(tailwindcss@4.1.18):