src/components/sections/hero/HeroSplit.tsx

@@ -3,6 +3,7 @@ import Button from "@/components/ui/Button";
 import TextAnimation from "@/components/ui/TextAnimation";
 import ImageOrVideo from "@/components/ui/ImageOrVideo";
 import ImageSlider from "@/components/ui/ImageSlider";
+import FactCard from "@/components/ui/FactCard";
 
 type HeroSplitProps = {
   tag: string;
@@ -53,9 +54,18 @@ const HeroSplit = ({
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.6, ease: "easeOut", delay: 0.2 }}
-          className="w-full md:w-1/2 h-100 md:h-[65vh] md:max-h-[75svh] p-5 card rounded overflow-hidden"
+          className="relative w-full md:w-1/2 h-100 md:h-[65vh] md:max-h-[75svh] card rounded overflow-hidden"
         >
           {imageSrcs ? <ImageSlider images={imageSrcs} /> : <ImageOrVideo imageSrc={undefined} videoSrc={videoSrc} />}
+          {imageSrcs && (
+            <div className="absolute inset-0 flex items-center justify-end p-8 pointer-events-none">
+              <div className="flex flex-col gap-4">
+                <FactCard title="100+" description="Daily Customers" className="pointer-events-auto" />
+                <FactCard title="5-Star" description="Rated on Yelp" className="pointer-events-auto" />
+                <FactCard title="Organic" description="Ingredients Only" className="pointer-events-auto" />
+              </div>
+            </div>
+          )}
         </motion.div>
       </div>
     </section>

src/components/ui/FactCard.tsx

@@ -0,0 +1,16 @@
+type FactCardProps = {
+  title: string;
+  description: string;
+  className?: string;
+};
+
+const FactCard = ({ title, description, className }: FactCardProps) => {
+  return (
+    <div className={`p-4 rounded glassmorphic-card ${className ?? ""}`}>
+      <h3 className="text-2xl font-bold text-primary-cta-text">{title}</h3>
+      <p className="text-sm text-primary-cta-text/80">{description}</p>
+    </div>
+  );
+};
+
+export default FactCard;

src/components/ui/ImageSlider.tsx

@@ -3,19 +3,18 @@ type ImageSliderProps = {
 };
 
 const ImageSlider = ({ images }: ImageSliderProps) => {
-  const duplicatedImages = [...images, ...images];
+  const extendedImages = [...images, ...images];
 
   return (
     <div className="w-full h-full overflow-hidden">
-      <div className="flex h-full w-max animate-marquee-horizontal" style={{ animationDuration: "30s" }}>
-        {duplicatedImages.map((src, index) => (
-          <div key={index} className="h-full w-auto aspect-[3/4] mr-5 shrink-0">
-            <img
-              src={src}
-              alt={`Slide ${index + 1}`}
-              className="object-cover w-full h-full rounded"
-            />
-          </div>
+      <div className="flex h-full animate-slide">
+        {extendedImages.map((src, index) => (
+          <img
+            key={index}
+            src={src}
+            alt={`Slide ${index + 1}`}
+            className="w-full h-full object-cover shrink-0"
+          />
         ))}
       </div>
     </div>

src/index.css

@@ -166,6 +166,14 @@ button,
   box-shadow: inset 1px 1px 0 0 color-mix(in srgb, var(--color-foreground) 10%, transparent), 0 4px 16px -4px color-mix(in srgb, var(--color-foreground) 10%, transparent);
 }
 
+.glassmorphic-card {
+  background: color-mix(in srgb, var(--card) 20%, transparent);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
+  box-shadow: 0 4px 30px color-mix(in srgb, var(--foreground) 10%, transparent);
+}
+
 /* WEBILD_PRIMARY_BUTTON */
 /* @primaryButtons/lifted */
 .primary-button {

src/styles/animations.css

@@ -119,6 +119,15 @@
   }
 }
 
+@keyframes slide {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-50%);
+  }
+}
+
 /* Animation classes */
 
 .animate-pulsate {
@@ -156,3 +165,7 @@
 .animate-marquee-horizontal-reverse {
   animation: marquee-horizontal-reverse 15s linear infinite;
 }
+
+.animate-slide {
+  animation: slide 30s linear infinite;
+}