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

@@ -50,7 +50,7 @@ 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>

src/components/ui/ImageCardCarousel.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { motion } from 'motion';
+import { motion } from 'motion/react';
 import { clsx } from 'clsx';
 
 type ImageCardCarouselProps = {
@@ -24,7 +24,7 @@ const ImageCardCarousel = ({ images, interval = 3000, className }: ImageCardCaro
   useEffect(() => {
     const progressTimer = setInterval(() => {
       setProgress((prevProgress) => {
-        const newProgress = prevProgress + (1000 / interval) * 100; // Increment by 100ms worth of progress
+        const newProgress = prevProgress + (100 / (interval / 100)); // Increment by 100ms worth of progress
         return newProgress >= 100 ? 100 : newProgress;
       });
     }, 100); // Update progress every 100ms

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;
 }