Nouns Intro section uses a carousel to flip between iOS app and AR filters

packages/nouns-webapp/src/components/NounsIntroSection/NounsIntroSection.module.css

@@ -67,9 +67,12 @@
   padding: 0;
 }
 
-.iosImgContainer {
-  padding: 0;
-  position: relative;
+.carouselImages {
+  height: 35rem;
+}
+.carouselText {
+  padding-left: 2rem;
+  height: 35rem;
 }
 
 .iosImg {
@@ -83,6 +86,49 @@
   width: 10rem;
 }
 
+
+.lensesImage img {
+  width: 450px;
+  max-width: 100%;
+
+}
+
+.lensesImage img:first-child {
+  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.15);
+
+}
+
+.lensesImage img:nth-child(2) {
+  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.15);
+}
+
+.lensesImage img:nth-child(3) {
+  display: none;
+}
+
+.lensesVideoContainer {
+  padding: 0;
+  position: relative;
+  border-top-right-radius: 10px;
+  border-top-left-radius: 10px;
+  margin-left: 40px;
+  max-width: 360px;
+  height: 35rem;
+}
+
+.lensesVideo {
+  height: 100%;
+  width: 100%;
+  border-radius: inherit;
+  background-size: cover;
+  -o-object-fit: cover;
+  object-fit: cover;
+}
+
+.socialPlatformLogo {
+  margin-top: 2rem;
+}
+
 @media (max-width: 992px) {
   .videoSection {
     padding: 0 !important;
@@ -116,9 +162,30 @@
     padding: 0 2.5rem;
   }
 
-  .iosImgContainer {
+  .carouselImages {
+    height: auto;
+  }
+
+  .iosImg {
+    display: none;
+  }
+
+  .lensesImage img:nth-child(1),
+  .lensesImage img:nth-child(2) {
     display: none;
   }
+
+  .lensesImage img:nth-child(3) {
+    width: auto;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: -1rem;
+  }
+
+  .carouselText {
+    height: auto;
+  }
 }
 
 @media (max-width: 576px) {

packages/nouns-webapp/src/components/NounsIntroSection/index.tsx

@@ -5,8 +5,47 @@ import { Trans } from '@lingui/macro';
 import { Link } from 'react-router-dom';
 import nounsIosGif from '../../assets/nouns-ios.gif';
 import dlFromAppStoreImg from '../../assets/download-on-app-store.svg';
+import tiktokImg from '../../assets/tiktok.png';
+import snapchatImg from '../../assets/snapchat.png';
+import instagramImg from '../../assets/instagram.png';
+import facebookImg from '../../assets/facebook.png';
+import arFrogStill from '../../assets/nouns-ar-frog.png';
+import arNogglesStill from '../../assets/nouns-ar-noggles.png';
+import Carousel from 'react-bootstrap/Carousel';
+import Fade from 'react-bootstrap/Fade';
+import { useState, useEffect } from 'react';
 
 const NounsIntroSection = () => {
+  const fadeTimeout = 300;
+  // Track which carousel items is displayed
+  const [carouselIndex, setCarouselIndex] = useState(0);
+  // Fade in carousel item as it enters; Fade out carousel item as it leaves
+  const [fadeIn, setFadeIn] = useState([true, false]);
+  // Swap between still and video for AR examples
+  const [showARVideo, setShowARVideo] = useState(1);
+  const arExamples = [
+    ['https://imgur.com/dq8BsTw.jpeg', arFrogStill],
+    ['https://imgur.com/R60fKbf.jpeg', arNogglesStill],
+  ];
+
+  const CarouselItems = [
+    <Fade in={fadeIn[0]} timeout={fadeTimeout}>
+      <img src={nounsIosGif} className={classes.iosImg} alt="nouns ios" />
+    </Fade>,
+    <Fade in={fadeIn[1]} timeout={fadeTimeout}>
+      <div className={classes.lensesImage}>
+        <img src={arExamples[0][1 - showARVideo]} alt="nouns ar frog head" />
+        <img src={arExamples[1][showARVideo]} alt="nouns ar glasses" />
+        <img src={arExamples[0][0]} alt="nouns ar frog head" />
+      </div>
+    </Fade>,
+  ];
+  // alternate AR examples between still and video every 4s
+  useEffect(() => {
+    const id = setInterval(() => setShowARVideo(prev => 1 - prev), 4000);
+    return () => clearInterval(id);
+  }, []);
+
   return (
     <>
       <Section fullWidth={false} className={classes.videoSection}>
@@ -18,8 +57,8 @@ const NounsIntroSection = () => {
             <p>
               <Trans>
                 Behold, an infinite work of art! Nouns is a community-owned brand that makes a
-                positive impact by funding ideas and fostering collaboration. From collectors
-                and technologists, to non-profits and brands, Nouns is for everyone.
+                positive impact by funding ideas and fostering collaboration. From collectors and
+                technologists, to non-profits and brands, Nouns is for everyone.
               </Trans>
               <br />
               <Trans>Like this video?</Trans>
@@ -51,38 +90,110 @@ const NounsIntroSection = () => {
           </small>
         </Col>
       </Section>
-      <Section fullWidth={false} className={classes.iosSection}>
-        <Col lg={6} className={classes.iosImgContainer}>
-          <img src={nounsIosGif} className={classes.iosImg} alt="nouns ios" />
-        </Col>
-        <Col lg={6}>
-          <div className={classes.textWrapper}>
-            <h1>
-              <Trans>Download the Free iOS App</Trans>
-            </h1>
-            <p>
-              <Trans>
-                Every new Noun pushed right to your pocket! View the current auction, remix your own
-                Noun, and explore the entire history directly from the app.
-              </Trans>
-              <br />
-              <a
-                href="https://apps.apple.com/us/app/nouns-explore-create-play/id1592583925"
-                target="_blank"
-                rel="noreferrer"
-              >
-                <img
-                  src={dlFromAppStoreImg}
-                  className={classes.dlFromAppStoreImg}
-                  alt="download nouns ios app from app store"
-                />
-              </a>
-            </p>
-          </div>
+      <Section fullWidth={false}>
+        <Col lg={6} className={classes.carouselImages}>
+          {CarouselItems[carouselIndex]}
         </Col>
+        <Carousel
+          // activeIndex={1}
+          as={Col}
+          lg={6}
+          className={classes.carouselText}
+          interval={5500}
+          variant="dark"
+          controls={false}
+          onSlide={index => {
+            setFadeIn(prev => (index === 0 ? [true, false] : [false, true]));
+            setTimeout(() => setCarouselIndex(index), fadeTimeout);
+          }}
+        >
+          <Carousel.Item>
+            <div className={classes.textWrapper}>
+              <h1>
+                <Trans>Download the Free iOS App</Trans>
+              </h1>
+              <p>
+                <Trans>
+                  Every new Noun pushed right to your pocket! View the current auction, remix your
+                  own Noun, and explore the entire history directly from the app.
+                </Trans>
+                <br />
+                <a
+                  href="https://apps.apple.com/us/app/nouns-explore-create-play/id1592583925"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  <img
+                    src={dlFromAppStoreImg}
+                    className={classes.dlFromAppStoreImg}
+                    alt="download nouns ios app from app store"
+                  />
+                </a>
+              </p>
+            </div>
+          </Carousel.Item>
+          <Carousel.Item>
+            <div className={classes.textWrapper} style={{ paddingLeft: '0rem' }}>
+              <h1>
+                <Trans>Nouns AR Lenses</Trans>
+              </h1>
+              <p>
+                <Trans>
+                  Try on a pair of Nouns glasses or transform yourself into a Noun with these
+                  expressive AR lenses.
+                </Trans>
+                <br />
+                <a
+                  href="https://www.tiktok.com/sticker/Noggles-5695800"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  <img
+                    src={tiktokImg}
+                    className={classes.socialPlatformLogo}
+                    alt="download nouns ios app from app store"
+                  />
+                </a>
+                <a
+                  href="https://lensstudio.snapchat.com/creator/6y_fgP0Vr6RqaJt3jIJLRw"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  <img
+                    src={snapchatImg}
+                    className={classes.socialPlatformLogo}
+                    alt="download nouns ios app from app store"
+                  />
+                </a>
+                <a
+                  href="https://www.instagram.com/ar/2050002801834821/"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  <img
+                    src={instagramImg}
+                    className={classes.socialPlatformLogo}
+                    alt="download nouns ios app from app store"
+                  />
+                </a>
+                <a
+                  href="https://www.facebook.com/fbcameraeffects/tryit/2050002801834821/"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  <img
+                    src={facebookImg}
+                    className={classes.socialPlatformLogo}
+                    alt="download nouns ios app from app store"
+                  />
+                </a>
+              </p>
+            </div>
+          </Carousel.Item>
+        </Carousel>
       </Section>
     </>
   );
-};
+};;
 
 export default NounsIntroSection;