feat(core): add better slides to the carousel

.changeset/pretty-trains-drum.md

@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+Update sample carousel images

core/components/slideshow/index.tsx

@@ -1,37 +1,53 @@
+import { useTranslations } from 'next-intl';
+
 import { Slideshow as ComponentsSlideshow } from '~/components/ui/slideshow';
 
-import SlideshowBG from './slideshow-bg-01.jpg';
+import Slide1 from './slide-1.jpg';
+import Slide2 from './slide-2.jpg';
+import Slide3 from './slide-3.jpg';
 
-const slides = [
-  {
-    cta: { label: 'Shop now', href: '/#' },
-    description:
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.',
-    image: {
-      src: SlideshowBG,
-      altText: 'An assortment of brandless products against a blank background',
-      blurDataUrl:
-        'data:image/jpeg;base64,/9j/4QC8RXhpZgAASUkqAAgAAAAGABIBAwABAAAAAQAAABoBBQABAAAAVgAAABsBBQABAAAAXgAAACgBAwABAAAAAgAAABMCAwABAAAAAQAAAGmHBAABAAAAZgAAAAAAAABIAAAAAQAAAEgAAAABAAAABgAAkAcABAAAADAyMTABkQcABAAAAAECAwAAoAcABAAAADAxMDABoAMAAQAAAP//AAACoAQAAQAAAAoAAAADoAQAAQAAAAcAAAAAAAAA/9sAQwADAgIDAgIDAwMDBAMDBAUIBQUEBAUKBwcGCAwKDAwLCgsLDQ4SEA0OEQ4LCxAWEBETFBUVFQwPFxgWFBgSFBUU/9sAQwEDBAQFBAUJBQUJFA0LDRQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQU/8AAEQgABwAKAwERAAIRAQMRAf/EABUAAQEAAAAAAAAAAAAAAAAAAAMJ/8QAIBAAAQQBBAMAAAAAAAAAAAAAAQIDBAURABIhMQYjgf/EABYBAQEBAAAAAAAAAAAAAAAAAAEAAv/EABkRAAIDAQAAAAAAAAAAAAAAAAARAQIhQf/aAAwDAQACEQMRAD8AoZ5EzayKWW3Syo0GyKPTJlsF9ts9klsKTu46GQOfms2awJfAKywmt1sRNgqK7PS0gSHI4WltTmBuKQckJJzgE9aYa0tP/9k=',
-    },
-    key: 1,
-    title: '25% Off Sale',
-  },
+export const Slideshow = () => {
+  const t = useTranslations('Components.Slideshow');
 
-  {
-    cta: { label: 'Shop now', href: '/#' },
-    description:
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.',
-    key: 2,
-    title: 'Great Deals',
-  },
+  return (
+    <ComponentsSlideshow
+      slides={[
+        {
+          cta: { label: t('SlideOne.cta'), href: '/#' },
+          description: t('SlideOne.description'),
+          image: {
+            src: Slide1,
+            altText: t('SlideOne.imageAltText'),
+            blurDataUrl:
+              'data:image/jpeg;base64,/9j/4QC8RXhpZgAASUkqAAgAAAAGABIBAwABAAAAAQAAABoBBQABAAAAVgAAABsBBQABAAAAXgAAACgBAwABAAAAAgAAABMCAwABAAAAAQAAAGmHBAABAAAAZgAAAAAAAABIAAAAAQAAAEgAAAABAAAABgAAkAcABAAAADAyMTABkQcABAAAAAECAwAAoAcABAAAADAxMDABoAMAAQAAAP//AAACoAQAAQAAAAoAAAADoAQAAQAAAAYAAAAAAAAA/9sAQwADAgIDAgIDAwMDBAMDBAUIBQUEBAUKBwcGCAwKDAwLCgsLDQ4SEA0OEQ4LCxAWEBETFBUVFQwPFxgWFBgSFBUU/9sAQwEDBAQFBAUJBQUJFA0LDRQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQU/8AAEQgABgAKAwERAAIRAQMRAf/EABUAAQEAAAAAAAAAAAAAAAAAAAQI/8QAIhAAAgIBAwQDAAAAAAAAAAAAAQIDBBEABRMGCBIxIVFh/8QAFQEBAQAAAAAAAAAAAAAAAAAABAb/xAAfEQEAAQQBBQAAAAAAAAAAAAABAAIEESESMVGBkbH/2gAMAwEAAhEDEQA/AGd4W6bnVm6Qevekjqz0Zo0rqxVVm5UHIcH3h0GfYCn70GoasHbcTa8aSvW+nuRXcuS3bc9h/FnldpCzqrMSTnJJHyf3VI34uQweIAtkML9n/9k=',
+          },
+          title: t('SlideOne.title'),
+        },
 
-  {
-    cta: { label: 'Shop now', href: '/#' },
-    description:
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.',
-    key: 3,
-    title: 'Low Prices',
-  },
-];
+        {
+          cta: { label: t('SlideTwo.cta'), href: '/#' },
+          description: t('SlideTwo.description'),
+          image: {
+            src: Slide2,
+            altText: t('SlideTwo.imageAltText'),
+            blurDataUrl:
+              'data:image/jpeg;base64,/9j/4QC8RXhpZgAASUkqAAgAAAAGABIBAwABAAAAAQAAABoBBQABAAAAVgAAABsBBQABAAAAXgAAACgBAwABAAAAAgAAABMCAwABAAAAAQAAAGmHBAABAAAAZgAAAAAAAABIAAAAAQAAAEgAAAABAAAABgAAkAcABAAAADAyMTABkQcABAAAAAECAwAAoAcABAAAADAxMDABoAMAAQAAAP//AAACoAQAAQAAAAoAAAADoAQAAQAAAAYAAAAAAAAA/9sAQwADAgIDAgIDAwMDBAMDBAUIBQUEBAUKBwcGCAwKDAwLCgsLDQ4SEA0OEQ4LCxAWEBETFBUVFQwPFxgWFBgSFBUU/9sAQwEDBAQFBAUJBQUJFA0LDRQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQU/8AAEQgABgAKAwERAAIRAQMRAf/EABQAAQAAAAAAAAAAAAAAAAAAAAb/xAAiEAACAQMCBwAAAAAAAAAAAAABAgMEBREABwYTFiFRYYH/xAAWAQEBAQAAAAAAAAAAAAAAAAADBAb/xAAhEQACAQMEAwEAAAAAAAAAAAABAhEAAwQFEiExBkFhUf/aAAwDAQACEQMRAD8AZbybs9O7hcH2mO1QVUEUS3QvOMlZDNyAVHkKXwe2C3wlm3bqOjWuhyfs8U/imi4Go42Qubu3vKoViAVG7mfpHUyAR7p7X2CjSuqFES4EjAZHs6uZBJrCW3LICfyv/9k=',
+          },
+          title: t('SlideTwo.title'),
+        },
 
-export const Slideshow = () => <ComponentsSlideshow slides={slides} />;
+        {
+          cta: { label: t('SlideThree.cta'), href: '/#' },
+          description: t('SlideThree.description'),
+          image: {
+            src: Slide3,
+            altText: t('SlideThree.imageAltText'),
+            blurDataUrl:
+              'data:image/jpeg;base64,/9j/4QC8RXhpZgAASUkqAAgAAAAGABIBAwABAAAAAQAAABoBBQABAAAAVgAAABsBBQABAAAAXgAAACgBAwABAAAAAgAAABMCAwABAAAAAQAAAGmHBAABAAAAZgAAAAAAAABIAAAAAQAAAEgAAAABAAAABgAAkAcABAAAADAyMTABkQcABAAAAAECAwAAoAcABAAAADAxMDABoAMAAQAAAP//AAACoAQAAQAAAAoAAAADoAQAAQAAAAYAAAAAAAAA/9sAQwADAgIDAgIDAwMDBAMDBAUIBQUEBAUKBwcGCAwKDAwLCgsLDQ4SEA0OEQ4LCxAWEBETFBUVFQwPFxgWFBgSFBUU/9sAQwEDBAQFBAUJBQUJFA0LDRQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQU/8AAEQgABgAKAwERAAIRAQMRAf/EABUAAQEAAAAAAAAAAAAAAAAAAAQH/8QAHxAAAgEEAwEBAAAAAAAAAAAAAQIDBAURIQAGQQcI/8QAFgEBAQEAAAAAAAAAAAAAAAAABQME/8QAHxEAAQMDBQAAAAAAAAAAAAAAAQACAwQRQQUhIjGB/9oADAMBAAIRAxEAPwC0fr/vNV1yfpV0tsklNVW65CrVF0k4ZlhaOTe1KSP4d4PnC9SrX0ksTW5uT5hYJJiziB2h3H6JWpcKpYkQRCVggYbAycZ4/dX2X//Z',
+          },
+          title: t('SlideThree.title'),
+        },
+      ]}
+    />
+  );
+};

core/components/ui/slideshow/slideshow.tsx

@@ -113,7 +113,7 @@ const Slideshow = ({ className, interval = 15_000, slides }: Props) => {
               inert={index === activeSlide - 1 ? null : 'true'}
               key={index}
             >
-              <div className="relative">
+              <div className="relative h-full">
                 {slide.image && (
                   <NextImage
                     alt={slide.image.altText}
@@ -132,8 +132,14 @@ const Slideshow = ({ className, interval = 15_000, slides }: Props) => {
                     !slide.image && 'bg-gray-100',
                   )}
                 >
-                  <h2 className="text-5xl font-black lg:text-6xl">{slide.title}</h2>
-                  {Boolean(slide.description) && <p className="max-w-xl">{slide.description}</p>}
+                  <h2 className="text-5xl font-black drop-shadow-[0_0_3px_rgba(255,255,255,0.3)] lg:text-6xl">
+                    {slide.title}
+                  </h2>
+                  {Boolean(slide.description) && (
+                    <p className="max-w-xl drop-shadow-[0_0_3px_rgba(255,255,255,0.3)]">
+                      {slide.description}
+                    </p>
+                  )}
                   {slide.cta && (
                     <Button asChild className="w-fit">
                       <a href={slide.cta.href}>{slide.cta.label}</a>

core/messages/en.json

@@ -483,6 +483,26 @@
         "phone": "Enter a phone number",
         "postalCode": "Enter a zip / postcode"
       }
+    },
+    "Slideshow": {
+      "SlideOne": {
+        "title": "Fall Collection",
+        "description": "Cozy up with our newest arrivals for the fall season! From stylish jackets to soft knits, discover the must-haves to keep you warm and trendy.",
+        "imageAltText": "Three people staggered wearing different shades of sweaters.",
+        "cta": "Shop the Fall Collection"
+      },
+      "SlideTwo": {
+        "title": "Exclusive Offer: 20% Off!",
+        "description": "Limited-time sale! Get 20% off on all items for a fresh wardrobe update. Don't miss out on these savings, available for a short time only.",
+        "imageAltText": "A woman with a red top, looking to the right with a smile.",
+        "cta": "Grab Your Discount"
+      },
+      "SlideThree": {
+        "title": "Sustainable Fashion",
+        "description": "Fashion with a purpose. Explore our eco-friendly clothing line, made from sustainable materials. Look good and feel good knowing you're making a difference.",
+        "imageAltText": "A man wearing a green jacket and backpack looks confidently into the distance.",
+        "cta": "Explore Sustainable Styles"
+      }
     }
   }
 }

core/tests/ui/components/slideshow.spec.ts

@@ -8,11 +8,11 @@ test.beforeEach(async ({ page }) => {
 test('Navigate to next slide', async ({ page }) => {
   await page.getByLabel('Next slide').click();
 
-  await expect(page.getByRole('heading', { name: 'Great Deals' })).toBeVisible();
+  await expect(page.getByRole('heading', { name: 'Exclusive Offer: 20% Off!' })).toBeVisible();
 });
 
 test('Navigate to previous slide', async ({ page }) => {
   await page.getByLabel('Previous slide').click();
 
-  await expect(page.getByRole('heading', { name: 'Low Prices' })).toBeVisible();
+  await expect(page.getByRole('heading', { name: 'Sustainable Fashion' })).toBeVisible();
 });