ACMS-682: Update images for site studio components based on new UI ki…

…t on tour page. (#712)

* ACMS-682: Update images for site studio components based on new UI kit

* ACMS-682: Pin entity clone to 1.0-beta4 so patch can apply

composer.json

@@ -25,7 +25,7 @@
         "drupal/core": "^9.1",
         "drupal/default_content": "^2",
         "drupal/diff": "^1",
-        "drupal/entity_clone": "^1.0-beta4",
+        "drupal/entity_clone": "1.0-beta4",
         "drupal/facets": "^1.5",
         "drupal/facets_pretty_paths": "1.x-dev",
         "drupal/field_group": "^3",

modules/acquia_cms_tour/templates/acquia-cms-tour.html.twig

@@ -329,9 +329,47 @@
           <a href="/node/add/page">Go here to create your first Page</a> and
           start using the following pre-built components:
         </p>
-        <img style="width:100%;" src="/{{ module_path[0] }}/assets/images/component-list-1.png"/>
-        <img style="width:100%;" src="/{{ module_path[0] }}/assets/images/component-list-2.png"/>
-        <img style="width:100%;" src="/{{ module_path[0] }}/assets/images/component-list-3.png"/>
+        <div class="component-listing">
+          <h3>1. Layout components</h3>
+          <img style="width:100%;" src="/{{ module_path[0] }}/assets/images/Layout-components.png"/>
+        </div>
+        <div class="component-listing">
+          <h3>2. Basic components</h3>
+          <img style="width:100%;" src="/{{ module_path[0] }}/assets/images/basic-components.png"/>
+        </div>
+        <div class="component-listing">
+          <h3>3. Dynamic components</h3>
+          <img style="width:100%;" src="/{{ module_path[0] }}/assets/images/dynamic-components.png"/>
+        </div>
+        <div class="component-listing">
+          <h3>4. Card components</h3>
+          <img style="width:100%;" src="/{{ module_path[0] }}/assets/images/card-components.png"/>
+        </div>
+        <div class="component-listing">
+          <h3>5. Slider components</h3>
+          <img style="width:100%;" src="/{{ module_path[0] }}/assets/images/slider-components.png"/>
+        </div>
+        <div class="component-listing">
+          <h3>6. Accordion components</h3>
+          <img style="width:100%;" src="/{{ module_path[0] }}/assets/images/accordion-components.png"/>
+        </div>
+        <div class="component-listing">
+          <h3>7. Tab components</h3>
+          <img style="width:100%;" src="/{{ module_path[0] }}/assets/images/tab-components.png"/>
+        </div>
+        <div class="component-listing">
+          <h3>8. Read more components</h3>
+          <img style="width:100%;" src="/{{ module_path[0] }}/assets/images/read-more-components.png"/>
+        </div>
+        <div class="component-listing">
+          <h3>9. Map components</h3>
+          <img style="width:100%;" src="/{{ module_path[0] }}/assets/images/map-components.png"/>
+        </div>
+        <div class="component-listing">
+          <h3>10. Header and footer components</h3>
+          <img style="width:100%;" src="/{{ module_path[0] }}/assets/images/header-footer-components.png"/>
+        </div>
+
       </div>
       <div class="content-leaf">
         <span class="anchor-link" id="troubleshooting"></span>