Merge version_14_1779818289922 into main

Merge version_14_1779818289922 into main

src/components/Layout.tsx

@@ -38,7 +38,7 @@ export default function Layout() {
 ];
 
   return (
-    <StyleProvider buttonVariant="magnetic" siteBackground="noise" heroBackground="cornerGlow">
+    <StyleProvider buttonVariant="stagger" siteBackground="noise" heroBackground="cornerGlow">
       <SiteBackgroundSlot />
       <SectionErrorBoundary name="navbar">
         <NavbarCentered

src/components/sections/hero/HeroBillboardCarousel.tsx

@@ -2,6 +2,7 @@ import Button from "@/components/ui/Button";
 import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
 import TextAnimation from "@/components/ui/TextAnimation";
 import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import ImageCardCarousel from "@/components/ui/ImageCardCarousel";
 
 type HeroBillboardCarouselProps = {
   tag: string;
@@ -49,24 +50,17 @@ const HeroBillboardCarousel = ({
           className="text-base md:text-lg leading-tight text-balance"
         />
 
-        <div className="flex flex-wrap justify-center gap-3 mt-3">
+        <div className="flex flex-wrap justify-center gap-3 mt-3 ">
           <Button text={primaryButton.text} href={primaryButton.href} variant="primary"/>
           <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary"animationDelay={0.1} />
         </div>
       </div>
 
-      <div className="w-content-width mx-auto overflow-hidden mask-fade-x">
-        <div className="flex w-max animate-marquee-horizontal" style={{ animationDuration: "60s" }}>
-          {duplicated.map((item, i) => (
-            <div key={i} className="shrink-0 w-60 md:w-75 2xl:w-80 aspect-4/5 mr-3 md:mr-5 p-1.5 card rounded-lg overflow-hidden">
-              <ImageOrVideo
-                imageSrc={item.imageSrc}
-                videoSrc={item.videoSrc}
-                className="w-full h-full rounded-lg object-cover"
-              />
-            </div>
-          ))}
-        </div>
+      <div className="w-content-width mx-auto mt-8">
+        <ImageCardCarousel
+          images={items.map(item => item.imageSrc || item.videoSrc || '')}
+          className="aspect-video max-h-[600px]"
+        />
       </div>
     </section>
   );

src/components/ui/ImageCardCarousel.tsx

@@ -0,0 +1,64 @@
+import React, { useState, useEffect } from 'react';
+import { motion } from 'motion/react';
+import { clsx } from 'clsx';
+
+type ImageCardCarouselProps = {
+  images: string[];
+  interval?: number; // in milliseconds
+  className?: string;
+};
+
+const ImageCardCarousel = ({ images, interval = 3000, className }: ImageCardCarouselProps) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    const imageTimer = setInterval(() => {
+      setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
+      setProgress(0); // Reset progress for the new image
+    }, interval);
+
+    return () => clearInterval(imageTimer);
+  }, [images, interval]);
+
+  useEffect(() => {
+    const progressTimer = setInterval(() => {
+      setProgress((prevProgress) => {
+        const newProgress = prevProgress + (100 / (interval / 100)); // Increment by 100ms worth of progress
+        return newProgress >= 100 ? 100 : newProgress;
+      });
+    }, 100); // Update progress every 100ms
+
+    return () => clearInterval(progressTimer);
+  }, [interval]);
+
+  if (!images || images.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={clsx("relative w-full h-full rounded-lg overflow-hidden", className)}>
+      {images.map((image, index) => (
+        <motion.img
+          key={image}
+          src={image}
+          alt={`Slide ${index + 1}`}
+          className="absolute inset-0 w-full h-full object-cover"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: index === currentIndex ? 1 : 0 }}
+          transition={{ duration: 0.5 }}
+        />
+      ))}
+      <div className="absolute bottom-0 left-0 w-full h-1 bg-white/30">
+        <motion.div
+          className="h-full bg-primary-cta"
+          initial={{ width: 0 }}
+          animate={{ width: `${progress}%` }}
+          transition={{ duration: 0.1, ease: "linear" }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ImageCardCarousel;

src/index.css

@@ -5,15 +5,15 @@
 
 :root {
   /* @colorThemes/lightTheme/grayNavyBlue */
-  --background: #0a0a0a;
-  --card: #1a1a1a;
-  --foreground: #f5f5f5;
-  --primary-cta: #ffdf7d;
-  --primary-cta-text: #0a0a0a;
-  --secondary-cta: #1a1a1a;
-  --secondary-cta-text: #ffffff;
-  --accent: #b8860b;
-  --background-accent: #8b6914;
+  --background: #F8F5ED; /* Cream */
+  --card: #EDEAE0; /* Slightly darker cream */
+  --foreground: #3A2E2A; /* Dark Brown */
+  --primary-cta: #6B4F4F; /* Medium Brown */
+  --primary-cta-text: #F8F5ED; /* Cream for text on primary CTA */
+  --secondary-cta: #5A4343; /* Darker Medium Brown */
+  --secondary-cta-text: #F8F5ED; /* Cream for text on secondary CTA */
+  --accent: #8D6E6E; /* Warm Brown */
+  --background-accent: #4A3C3C; /* Slightly darker warm brown */
 
   /* @layout/border-radius/rounded */
   --radius: 0.5rem;
@@ -159,22 +159,20 @@ h6 {
 .card {
   /* WEBILD_CARD_STYLE */
   /* @cards/glass-depth */
-  background: color-mix(in srgb, var(--color-card) 80%, transparent);
-  backdrop-filter: blur(14px);
-  box-shadow:
-    inset 0 0 20px 0 color-mix(in srgb, var(--color-accent) 7.5%, transparent);
-  border: 1px solid color-mix(in srgb, var(--color-accent) 7.5%, transparent);
+  background-color: var(--color-card);
+  box-shadow: none;
+  border: none;
 }
 
 .primary-button {
   /* WEBILD_PRIMARY_BUTTON */
   /* @primaryButtons/glass-shimmer */
   background: linear-gradient(165deg, color-mix(in srgb, var(--color-primary-cta) 85%, var(--color-foreground)) 0%, var(--color-primary-cta) 40%, color-mix(in srgb, var(--color-primary-cta) 90%, var(--color-background)) 100%);
-  box-shadow: inset 0 1px 1px 0 color-mix(in srgb, var(--color-foreground) 25%, transparent), inset 0 -1px 1px 0 color-mix(in srgb, var(--color-background) 15%, transparent), 0 4px 12px -2px color-mix(in srgb, var(--color-primary-cta) 25%, transparent);
+  box-shadow: inset 0 1px 1px 0 color-mix(in srgb, var(--color-foreground) 25%, transparent), inset 0 -1px 1px 0 color-mix(in srgb, var(--color-background) 15%, transparent), 0 10px 30px 0 color-mix(in srgb, var(--color-primary-cta) 50%, transparent); z-index: 10;
 }
 
 .secondary-button {
   /* WEBILD_SECONDARY_BUTTON */
   /* @secondaryButtons/solid */
-  background: var(--color-secondary-cta);
+  background: var(--color-secondary-cta); box-shadow: 0 10px 30px 0 color-mix(in srgb, var(--color-secondary-cta) 50%, transparent); z-index: 10;
 }