Revert "feat(core): add better slides to the carousel (bigcommerce#1497…

…)" (bigcommerce#1507)

This reverts commit 12ce1d7.

core/components/slideshow/index.tsx

@@ -1,53 +1,37 @@
-import { useTranslations } from 'next-intl';
-
 import { Slideshow as ComponentsSlideshow } from '~/components/ui/slideshow';
 
-import Slide1 from './slide-1.jpg';
-import Slide2 from './slide-2.jpg';
-import Slide3 from './slide-3.jpg';
+import SlideshowBG from './slideshow-bg-01.jpg';
 
-export const Slideshow = () => {
-  const t = useTranslations('Components.Slideshow');
+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',
+  },
 
-  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: 2,
+    title: 'Great Deals',
+  },
 
-        {
-          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'),
-        },
+  {
+    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('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'),
-        },
-      ]}
-    />
-  );
-};
+export const Slideshow = () => <ComponentsSlideshow slides={slides} />;

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 h-full">
+              <div className="relative">
                 {slide.image && (
                   <NextImage
                     alt={slide.image.altText}
@@ -132,14 +132,8 @@ const Slideshow = ({ className, interval = 15_000, slides }: Props) => {
                     !slide.image && 'bg-gray-100',
                   )}
                 >
-                  <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>
-                  )}
+                  <h2 className="text-5xl font-black lg:text-6xl">{slide.title}</h2>
+                  {Boolean(slide.description) && <p className="max-w-xl">{slide.description}</p>}
                   {slide.cta && (
                     <Button asChild className="w-fit">
                       <a href={slide.cta.href}>{slide.cta.label}</a>

core/messages/en.json

@@ -483,26 +483,6 @@
         "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: 'Exclusive Offer: 20% Off!' })).toBeVisible();
+  await expect(page.getByRole('heading', { name: 'Great Deals' })).toBeVisible();
 });
 
 test('Navigate to previous slide', async ({ page }) => {
   await page.getByLabel('Previous slide').click();
 
-  await expect(page.getByRole('heading', { name: 'Sustainable Fashion' })).toBeVisible();
+  await expect(page.getByRole('heading', { name: 'Low Prices' })).toBeVisible();
 });