created cards to display overview and explore the data sections

Author: FionaDmello

survey_dashboard/hmc_layout/en_template.html

@@ -1021,22 +1021,24 @@
         <div class="pt-10 pb-20 lg:pt-20">
           <section>
             <div class="container mx-auto mb-24">
+              <h2 class="font-bold font-lg">Overview</h2>
+              <div style="border: 2px solid rgb(236, 251, 253); border-radius: 8px; padding: 2rem; background-color:rgb(236, 251, 253) ; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); margin-bottom: 2rem;">
+                <p style="margin-bottom:2.5rem;">
+                  Who are the data stakeholders in Helmholtz? What tools do they use? What are the roadblocks to better metadata?
+                  These were some of the questions that we investigated with our HMC community survey in 2021. Here you can browse the results interactively and dive deeper into the data!
+                </p>
+
+                <p style="margin-bottom:12px; margin-top: 2.5rem;">
+                  Refine the displayed data with <b>Global Data Filters</b> and explore
+                  <ul style="margin-left: 36px;font-size: 17px; list-style-type: disc;">
+                    <li>the community profiles of our data stakeholders</li>
+                    <li>the methods, tools and software used for data generation and handling</li>
+                    <li>responses and how they compare to each other between different quesitons in the Survey Data Explorer</li>
+                  </ul>
+                </p>
+              </div>
 
-              <p style="margin-left:36px; margin-bottom:2.5rem;">
-                Who are the data stakeholders in Helmholtz? What tools do they use? What are the roadblocks to better metadata?
-                These were some of the questions that we investigated with our HMC community survey in 2021. Here you can browse the results interactively and dive deeper into the data!
-              </p>
-
-              <p style="margin-left: 36px; margin-bottom:12px; margin-top: 2.5rem;">
-                Refine the displayed data with <b>Global Data Filters</b> and explore
-                <ul style="margin-left: 72px;font-size: 17px; list-style-type: disc;">
-                  <li>the community profiles of our data stakeholders</li>
-                  <li>the methods, tools and software used for data generation and handling</li>
-                  <li>responses and how they compare to each other between different quesitons in the Survey Data Explorer</li>
-                </ul>
-              </p>
               <div class="flex" style="margin-top: 5rem; min-width: 1200px; align-items: center;margin-left: 24px" >
-
                 <div class="infobox" style="aspect-ratio: 3/2; background-image: url(./en_files/surveyBG.png); margin-left: 0px">
                   <div class="infoHeadline" style="margin-bottom: 0px;">
                     49
@@ -1063,21 +1065,20 @@
                     <a href="https://doi.org/10.7802/2433" target="_blank">Complete dataset is available online</a>
                   </div>
                 </div>
-
               </div>
-              <div class="flex flex-wrap">
-                <div class="infobox2" style="min-width: 1200px; margin-top: 5rem; margin-left: 24px; border-color: #002864;">
-
-                  <p style="margin-bottom: 0px">
-                    <b style="color: #002864;">DISCLAIMER</b><br>Displayed data should be interpreted with care. Responses might be subject to sample bias and some
-                    questions were specific to the research field of participants.
-                    <a href="https://doi.org/10.3289/HMC_publ_05" target="_blank">Check our written publication for further details.</a>
-                  </p>
 
-                </div>
 
+              <h2 class="font-bold mt-20">Explore the data</h2>
+              <div style="border: 2px solid rgb(236, 251, 253); border-radius: 8px; padding: 2rem; background-color:rgb(236, 251, 253) ; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); margin-bottom: 2rem;">
+                <p style="margin-bottom:2.5rem;">
+                  Use the filters in Global Data Filters section and explore the data from various angles below.
+                </p>
+                <p style="margin-bottom:12px; margin-top: 2.5rem;">
+                  <b style="color: #002864;">Disclaimer</b><br>Displayed data should be interpreted with care.<br> Responses might be subject to sample bias and some
+                  questions were specific to the research field of participants.<br>
+                  <a href="https://doi.org/10.3289/HMC_publ_05" target="_blank">Check our written publication for further details.</a>
+                </p>
               </div>
-
             </div>
           </section>