Added blur images as placeholders for Carousel images

Co-authored-by: Charles Gutwirth <[email protected]>
Co-authored-by: Jordan Hisel <[email protected]>
Co-authored-by: Lindsay Baird <[email protected]>

Author: 4 people

website/components/Carousel.jsx

@@ -4,6 +4,8 @@ import secondSlide from '../public/icons_demo.gif';
 import thirdSlide from '../public/rebuild_on_save_demo.gif';
 import fourthSlide from '../public/build_tree_demo.gif';
 import fifthSlide from '../public/settings_theme_demo.gif';
+import blurData from '../public/blurData.js';
+
 
 const Carousel = () => {
   return (
@@ -20,31 +22,31 @@ const Carousel = () => {
         </div>
         <div className="carousel-inner">
           <div className="carousel-item active">
-            <Image className="d-block w-100" src={firstSlide} alt="First slide" priority={true}/>
+            <Image className="d-block w-100" src={firstSlide} alt="First slide" placeholder="blur" blurDataURL={blurData.gen_tree_demo}/>
             <div className="carousel-caption w-75 mx-auto d-none d-md-block">
               <p>Open a root component to structure your app&apos;s files so they match its dependency relationships.</p>
             </div>
           </div>
           <div className="carousel-item">
-            <Image className="d-block w-100" src={secondSlide} alt="Second slide" priority={true}/>
+            <Image className="d-block w-100" src={secondSlide} alt="Second slide" placeholder="blur" blurDataURL={blurData.icons_demo}/>
             <div className="carousel-caption w-75 mx-auto d-none d-md-block">
               <p>Use Sapling&apos;s intuitive icons to get a list of props available to each component, see which components are connected to your Redux store, and open the file you wish to edit.</p>
             </div>
           </div>
           <div className="carousel-item">
-            <Image className="d-block w-100" src={thirdSlide} alt="Third slide" priority={true}/>
+            <Image className="d-block w-100" src={thirdSlide} alt="Third slide" placeholder="blur" blurDataURL={blurData.rebuild_on_save_demo}/>
             <div className="carousel-caption w-75 mx-auto d-none d-md-block">
               <p>Sapling is highly responsive, and notices whenever you edit and save a file.</p>
             </div>
           </div>
           <div className="carousel-item">
-            <Image className="d-block w-100" src={fourthSlide} alt="Fourth slide" priority={true}/>
+            <Image className="d-block w-100" src={fourthSlide} alt="Fourth slide" placeholder="blur" blurDataURL={blurData.build_tree_demo}/>
             <div className="carousel-caption w-75 mx-auto d-none d-md-block">
               <p>Rebuild the tree with your currently open file as the root. Note that Sapling retains its expanded state between sessions.</p>
             </div>
           </div>
           <div className="carousel-item">
-            <Image className="d-block w-100" src={fifthSlide} alt="Fifth slide" priority={true}/>
+            <Image className="d-block w-100" src={fifthSlide} alt="Fifth slide" placeholder="blur" blurDataURL={blurData.settings_theme_demo} />
             <div className="carousel-caption w-75 mx-auto d-none d-md-block">
               <p>Toggle the display of third-party and React Router components, and watch as Sapling&apos;s theme changes to match your preferences.</p>
             </div>

website/components/Links.jsx

@@ -9,13 +9,13 @@ const Links = () => {
       <h2 className="text-center">Links</h2>
       <div className="links">
         <div className="link mx-auto">
-          <p>View the product</p>
+          <p className="text-center">View the product</p>
           <a href="https://github.com/oslabs-beta/sapling" target="_blank" rel="noreferrer">
             <Image src={githubIcon} alt="Github OctoCat Logo"/>
           </a>
         </div>
         <div className="link mx-auto">
-          <p>Read more about Sapling</p>
+          <p className="text-center">Read more about Sapling</p>
           <a href="" target="_blank">
             <Image src={mediumIcon} alt="Medium M Logo"/>
           </a>