feat(about-us): add hero image to the our story page

Author: eric15342335

public/about-us/our-story/white-doves.jpg

@@ -1,4 +1,5 @@
 import { PageHeader } from "@/components/primitives/page-header";
+import { Hero } from "@/components/sections/hero";
 import { buildPageMetadata, siteConfig } from "@/lib/config";
 import { Metadata } from "next";
 
@@ -31,6 +32,16 @@ export default function OurStory() {
             based in HK by 2027.
           </>
         }
+        className="mb-8"
+      />
+      <Hero
+        slides={[
+          {
+            imageSrc: "/about-us/our-story/white-doves.jpg",
+            content: null,
+          },
+        ]}
+        heightClassName="h-[15rem] md:h-[20rem]"
       />
     </section>
   );

src/app/about-us/our-story/page.tsx

@@ -27,40 +27,49 @@ export function Hero({ slides, heightClassName }: HeroProps) {
   if (!heightClassName) {
     throw new Error("Hero: 'heightClassName' is required.");
   }
+  const hasMultipleSlides = slides.length > 1;
   return (
     <div className="relative w-full">
       <Carousel
         className="w-full"
         opts={{
-          loop: true,
+          loop: hasMultipleSlides,
         }}
-        plugins={[
-          Autoplay({
-            delay: 5000,
-            stopOnInteraction: true,
-          }),
-        ]}
-        useDots
+        plugins={
+          hasMultipleSlides
+            ? [
+                Autoplay({
+                  delay: 5000,
+                  stopOnInteraction: true,
+                }),
+              ]
+            : []
+        }
+        useDots={hasMultipleSlides}
       >
         <CarouselContent>
           {slides.map((slide, index) => (
             <CarouselItem key={index}>
-              <div className="p-1">
-                <div
-                  className={`relative flex ${heightClassName} items-center justify-center bg-cover bg-center bg-no-repeat p-6`}
-                  style={{ backgroundImage: `url('${slide.imageSrc}')` }}
-                >
-                  <div className="absolute inset-0 bg-black/40" />
+              <div
+                className={`relative flex ${heightClassName} items-center justify-center bg-cover bg-center bg-no-repeat`}
+                style={{ backgroundImage: `url('${slide.imageSrc}')` }}
+              >
+                {slide.content ? <div className="absolute inset-0 bg-black/40" /> : null}
+                {slide.content ? (
                   <span className="relative z-10 text-center text-2xl font-semibold text-white md:text-4xl">
                     {slide.content}
                   </span>
-                </div>
+                ) : null}
               </div>
             </CarouselItem>
           ))}
         </CarouselContent>
-        <CarouselPrevious />
-        <CarouselNext />
+        {hasMultipleSlides ? (
+          <>
+            <CarouselPrevious />
+            <CarouselNext />
+          </>
+        ) : null}
       </Carousel>
     </div>
   );