Updated resources based on new EFSA

Signed-off-by: Zhou Fang <zhou.fang@eclipse-foundation.org>
Change-Id: Ib7c8b5ae9ffb85123cd0d5803bb5c68f7bb87dfb
diff --git a/value/content/en_index.php b/value/content/en_index.php
index 6730470..11c204b 100644
--- a/value/content/en_index.php
+++ b/value/content/en_index.php
@@ -37,10 +37,10 @@
       <div class="col-sm-24 col-md-6" style="background-color: white; min-height:350px">
         <div class="row padding-bottom-5">
           <div class="match-height-item-by-row col-xs-24 padding-30">
-            <a class="sucess-stories-download-link" aria-label="Download eBook for How Open Source Software Drives Innovation" href="https://outreach.eclipse.foundation/innovation-open-source-ebook">
+            <a class="success-stories-download-link" aria-label="Download eBook for How Open Source Software Drives Innovation" href="https://outreach.eclipse.foundation/innovation-open-source-ebook">
               <img class="img img-responsive success-story" alt="How Open Source Software Drives Innovation eBook" src="/org/value/public/images/accelerating-innovation-through-open-source.jpg">
             </a>
-            <a class="btn btn-white sucess-stories-download padding-top-10 padding-bottom-10" aria-label="Download eBook for How Open Source Software Drives Innovation" href="https://outreach.eclipse.foundation/innovation-open-source-ebook">
+            <a class="btn btn-white success-stories-download padding-top-10 padding-bottom-10" aria-label="Download eBook for How Open Source Software Drives Innovation" href="https://outreach.eclipse.foundation/innovation-open-source-ebook">
               Download
             </a>
           </div>
@@ -49,10 +49,10 @@
       <div class="col-sm-24 col-md-6" style="background-color: white; min-height:350px">
         <div class="row padding-bottom-5">
           <div class="match-height-item-by-row col-xs-24 padding-30">
-            <a class="sucess-stories-download-link" aria-label="Download eBook for How Open Source Working Groups Drive Collaboration and Innovation" href="https://outreach.eclipse.foundation/working-groups-open-source-ebook">
+            <a class="success-stories-download-link" aria-label="Download eBook for How Open Source Working Groups Drive Collaboration and Innovation" href="https://outreach.eclipse.foundation/working-groups-open-source-ebook">
               <img class="img img-responsive success-story" alt="How Open Source Working Groups Drive Collaboration and Innovation eBook" src="/org/value/public/images/ebook-oepn-source-wg-collaboration.jpg">
             </a>
-            <a class="btn btn-white sucess-stories-download padding-top-10 padding-bottom-10" aria-label="Download eBook for How Open Source Working Groups Drive Collaboration and Innovation" href="https://outreach.eclipse.foundation/working-groups-open-source-ebook">
+            <a class="btn btn-white success-stories-download padding-top-10 padding-bottom-10" aria-label="Download eBook for How Open Source Working Groups Drive Collaboration and Innovation" href="https://outreach.eclipse.foundation/working-groups-open-source-ebook">
               Download
             </a>
           </div>
@@ -66,48 +66,14 @@
 <div id="success_stories" class="container padding-bottom-60 padding-top-40">
   <h2 class="margin-top-40 margin-bottom-40 brand-primary success-stories-title">Success Stories</h2>
   <div class="row">
-
     <div class="col-sm-24">
       <p class="margin-bottom-30 big">Businesses of all sizes in various industries are benefiting from open source projects hosted at the Eclipse Foundation and participation in Eclipse Foundation working groups.
         <br><br>Discover how companies are leveraging the business value of open source:
       </p>
-
     </div>
   </div>
   <div class="row margin-top-20 margin-bottom-60">
-    <div class="match-height-item-by-row col-sm-6 ">
-      <a class="sucess-stories-download-link" aria-label="download Itemis Open Source Case Study" href="https://outreach.eclipse.foundation/itemis-open-source-case-study">
-        <img class="img img-responsive margin-bottom-5 success-story" alt="itemis Builds Its Automotive Industry Business Through Eclipse Foundation Membership" src="/org/value/public/images/itemis.jpg">
-      </a>
-      <a class="btn btn-primary sucess-stories-download" aria-label="download Itemis Open Source Case Study" href="https://outreach.eclipse.foundation/itemis-open-source-case-study">
-        Download
-      </a>
-    </div>
-    <div class="match-height-item-by-row col-sm-6 ">
-      <a class="sucess-stories-download-link" aria-label="download Payara Services Case Study" href="https://outreach.eclipse.foundation/payara-services-open-source-case-study">
-        <img class="img img-responsive margin-bottom-5 success-story" alt="Payara Services Gains an Equal Footing With Industry Leaders at the Eclipse Foundation" src="/org/value/public/images/payara.jpg">
-      </a>
-      <a class="btn btn-primary sucess-stories-download" aria-label="download Payara Services Case Study" href="https://outreach.eclipse.foundation/payara-services-open-source-case-study">
-        Download
-      </a>
-    </div>
-    <div class="match-height-item-by-row col-sm-6 ">
-      <a class="sucess-stories-download-link" aria-label="download Obeo Case Study" href="https://outreach.eclipse.foundation/obeo-open-source-case-study">
-        <img class="img img-responsive margin-bottom-5 success-story" alt="Obeo Accelerates Growth Increases Exposure as a Strategic Member of the Eclipse Foundation" src="/org/value/public/images/obeo.jpg">
-      </a>
-      <a class="btn btn-primary sucess-stories-download" aria-label="download Obeo Case Study" href="https://outreach.eclipse.foundation/obeo-open-source-case-study">
-        Download
-      </a>
-    </div>
-    <div class="match-height-item-by-row col-sm-6 ">
-      <a class="sucess-stories-download-link" href="https://outreach.eclipse.foundation/bosch-open-source-case-study-iot" aria-label="Download Bosch Pursues an Open Strategy to Transform IoT">
-        <img class="img img-responsive margin-bottom-5 success-story" alt="Bosch Pursues an Open Strategy to Transform IoT" src="/org/value/public/images/bosch.jpg">
-      </a>
-      <a class="btn btn-primary sucess-stories-download" aria-label="Download Bosch Pursues an Open Strategy to Transform IoT" href="https://outreach.eclipse.foundation/bosch-open-source-case-study-iot">
-        Download
-      </a>
-    </div>
-
+    <div class="newsroom-resources margin-top-40 margin-bottom-20 padding-left-20 padding-right-20 text-center flex-center gap-30" data-res-wg="eclipse_org" data-res-title="" data-res-type="case_study" data-res-template="image" data-res-limit="4" data-res-class="card-item card-item-success"></div>
   </div>
 </div>
 
@@ -151,173 +117,21 @@
       <div class="col-md-24 panel text-center">
         <a role="button" data-parent="#accordion" data-toggle="collapse" class="btn btn-default padding-left-50 padding-right-50 width-250 padding-top-10 padding-bottom-10 fw-500" href="#whitepapers" expanded="false" aria-controls="whitepapers"> White Papers </a>
         <div class="collapse panel-collapse" id="whitepapers">
-          <div class="match-height-item-by-row col-xs-24 col-md-8 padding-40">
-            <a class="sucess-stories-download-link" aria-label="Download Whitepaper for How Jakarta EE Delivers on the Vision for Open Source, Cloud Native Java" href="https://outreach.jakartaee.org/open-source-cloud-native-java-ebook">
-              <img class="img img-responsive success-story" alt="How Jakarta EE Delivers on the Vision for Open Source, Cloud Native Java" src="/org/value/public/images/jakarta-ee-cloud-native-java.jpg">
-            </a>
-            <a class="btn btn-white sucess-stories-download padding-top-10 padding-bottom-10" aria-label="Download Whitepaper for How Jakarta EE Delivers on the Vision for Open Source, Cloud Native Java" href="https://outreach.jakartaee.org/open-source-cloud-native-java-ebook">
-              Download
-            </a>
-          </div>
-          <div class="match-height-item-by-row col-xs-24 col-md-8 padding-40">
-            <a class="sucess-stories-download-link" aria-label="Download Whitepaper for Cloud DevTools" href="https://outreach.eclipse.foundation/cloud-software-development-tools">
-              <img class="img img-responsive success-story" alt="Cloud DevTools Whitepaper" src="/org/value/public/images/cloud-dev-tools.jpg">
-            </a>
-            <a class="btn btn-white sucess-stories-download padding-top-10 padding-bottom-10" aria-label="Download Whitepaper for Cloud DevTools" href="https://outreach.eclipse.foundation/cloud-software-development-tools">
-              Download
-            </a>
-          </div>
-          <div class="match-height-item-by-row col-xs-24 col-md-8 padding-40">
-            <a class="sucess-stories-download-link" aria-label="Download Whitepaper for Open VSX Registry" href="https://outreach.eclipse.foundation/openvsx">
-              <img class="img img-responsive success-story" alt="Open VSX Registry Whitepaper" src="/org/value/public/images/open-vsx.jpg">
-            </a>
-            <a class="btn btn-white sucess-stories-download padding-top-10 padding-bottom-10" aria-label="Download Whitepaper for Open VSX Registry" href="https://outreach.eclipse.foundation/openvsx">
-              Download
-            </a>
-          </div>
-          <div class="match-height-item-by-row col-xs-24 col-md-8 padding-40">
-            <a class="sucess-stories-download-link" aria-label="Download Whitepaper for Why Jakarta EE Is the Right Choice for Today’s Java Applications" href="https://outreach.jakartaee.org/white-paper-java-applications">
-              <img class="img img-responsive success-story" alt="Why Jakarta EE is the Right Choice for Today's Java Applications" src="/org/value/public/images/jakarta-ee-applications.jpg">
-            </a>
-            <a class="btn btn-white sucess-stories-download padding-top-10 padding-bottom-10" aria-label="Download Whitepaper for Why Jakarta EE Is the Right Choice for Today’s Java Applications" href="https://outreach.jakartaee.org/white-paper-java-applications">
-              Download
-            </a>
-          </div>
-          <div class="match-height-item-by-row col-xs-24 col-md-8 padding-40">
-            <a class="sucess-stories-download-link" aria-label="Download Whitepaper for Digital Transformation in Europe" href="https://outreach.eclipse.foundation/enabling-digital-transformation-white-paper">
-              <img class="img img-responsive success-story" alt="Enabling Digital Transformation in Europe Through Global Open Source Collaboration" src="/org/value/public/images/digital-transformation-europe.jpg">
-            </a>
-            <a class="btn btn-white sucess-stories-download padding-top-10 padding-bottom-10" aria-label="Download Whitepaper for Digital Transformation in Europe" href="https://outreach.eclipse.foundation/enabling-digital-transformation-white-paper">
-              Download
-            </a>
-          </div>
-          <div class="match-height-item-by-row col-xs-24 col-md-8 padding-40">
-            <a class="sucess-stories-download-link" aria-label="Download Whitepaper for EdgeOps" href="https://outreach.eclipse.foundation/edge-computing-edgeops-white-paper">
-              <img class="img img-responsive success-story" alt="From DevOps to EdgeOps: A Vision for Edge Computing" src="/org/value/public/images/from-devops-to-edgeops.jpg">
-            </a>
-            <a class="btn btn-white sucess-stories-download padding-top-10 padding-bottom-10" aria-label="Download Whitepaper for EdgeOps" href="https://outreach.eclipse.foundation/edge-computing-edgeops-white-paper">
-              Download
-            </a>
-          </div>
+          <div class="newsroom-resources margin-top-40 margin-bottom-20 text-center flex-center gap-60" data-res-wg="eclipse_org" data-res-title="" data-res-type="white_paper" data-res-template="image" data-res-class="card-item"></div>
         </div>
       </div>
 
       <div class="col-md-24 panel text-center">
         <a id="surveyReportsCtn" role="button" data-parent="#accordion" data-toggle="collapse" class="btn btn-grey padding-left-50 padding-right-50 width-250 padding-top-10 padding-bottom-10 fw-500 collapsed" href="#surveyReports" expanded="false" aria-controls="surveyReports"> Survey Reports </a>
         <div class="collapse panel-collapse" id="surveyReports">
-          <div class="row">
-            <div class="match-height-item-by-row col-xs-24 col-md-8 padding-40 survey-reports">
-              <a href="https://outreach.eclipse.foundation/iot-edge-developer-2021" aria-label="Download 2021 IoT & Edge Developer Survey Report">
-                <img class="img img-responsive success-story margin-bottom-5" alt="2021 IoT & Edge Developer Survey Report" src="/org/value/public/images/iot-developer-survey-2021.jpg">
-              </a>
-              <a class="btn sucess-stories-download" aria-label="Download 2021 IoT & Edge Developer Survey Report" href="https://outreach.eclipse.foundation/iot-edge-developer-2021">
-                Download
-              </a>
-            </div>
-            <div class="match-height-item-by-row col-xs-24 col-md-8 padding-40 survey-reports">
-              <a href="http://outreach.jakartaee.org/2021-developer-survey-report" aria-label="Download 2021 Jakarta EE Developer Survey">
-                <img class="img img-responsive success-story margin-bottom-5" alt="2021 Jakarta EE Developer Survey" src="/org/value/public/images/jakarta-developer-survey-2021.jpg">
-              </a>
-              <a class="btn sucess-stories-download" aria-label="Download 2021 Jakarta EE Developer Survey" href="http://outreach.jakartaee.org/2021-developer-survey-report">
-                Download
-              </a>
-            </div>
-            <div class="match-height-item-by-row col-xs-24 col-md-8 padding-40 survey-reports">
-              <a href="https://outreach.eclipse.foundation/iot-edge-commercial-survey" aria-label="Download 2021 IoT Edge Adoption Survey">
-                <img class="img img-responsive success-story margin-bottom-5" alt="2021 IoT Edge Adoption Survey" src="/org/value/public/images/iot-edge-adoption-survey-2021.jpg">
-              </a>
-              <a class="btn sucess-stories-download" aria-label="Download 2021 IoT Edge Adoption Survey" href="https://outreach.eclipse.foundation/iot-edge-commercial-survey">
-                Download
-              </a>
-            </div>
-            <div class="match-height-item-by-row col-xs-24 col-md-8 padding-40 survey-reports">
-              <a href="https://outreach.jakartaee.org/2020-developer-survey-report" aria-label="Download 2020 Jakarta EE Developer Survey Reports">
-                <img class="img img-responsive success-story margin-bottom-5" alt="2020 Jakarta EE Developer Survey Reports" src="/org/value/public/images/jakartaee-survey.jpg">
-              </a>
-              <a class="btn sucess-stories-download" aria-label="Download 2020 Jakarta EE Developer Survey Reports" href="https://outreach.jakartaee.org/2020-developer-survey-report">
-                Download
-              </a>
-            </div>
-            <div class="match-height-item-by-row col-xs-24 col-md-8 padding-40 survey-reports">
-              <a href="https://outreach.eclipse.foundation/eclipse-iot-developer-survey-2020" aria-label="Download 2020 IoT Developer Survey Reports">
-                <img class="img img-responsive success-story margin-bottom-5" alt="2020 IoT Developer Survey Results" src="/org/value/public/images/iot-developer-survey-2.jpg">
-              </a>
-              <a class="btn sucess-stories-download" aria-label="Download 2020 IoT Developer Survey Reports" href="https://outreach.eclipse.foundation/eclipse-iot-developer-survey-2020">
-                Download
-              </a>
-            </div>
-            <div class="match-height-item-by-row col-xs-24 col-md-8 padding-40 survey-reports">
-              <a href="https://outreach.eclipse.foundation/download-the-eclipse-iot-developer-survey-results" aria-label="Download 2019 IoT Developer Survey Reports">
-                <img class="img img-responsive success-story margin-bottom-5" alt="2019 IoT Developer Survey Results" src="/org/value/public/images/iot-developer-survey.jpg">
-              </a>
-              <a class="btn sucess-stories-download" aria-label="Download 2019 IoT Developer Survey Reports" href="https://outreach.eclipse.foundation/download-the-eclipse-iot-developer-survey-results">
-                Download
-              </a>
-            </div>
-            <div class="match-height-item-by-row col-xs-24 col-md-8 padding-40 survey-reports">
-              <a href="http://outreach.jakartaee.org/jakarta-ee-2019-developer-survey" aria-label="Download 2019 Jakarta EE Developer Survey Reports">
-                <img class="img img-responsive success-story margin-bottom-5" alt="2019 Jakarta EE Developer Survey Results" src="/org/value/public/images/jakarta-developer-survey-2019.jpg">
-              </a>
-              <a class="btn sucess-stories-download" aria-label="Download 2019 Jakarta EE Developer Survey Reports" href="http://outreach.jakartaee.org/jakarta-ee-2019-developer-survey">
-                Download
-              </a>
-            </div>
-            <div class="match-height-item-by-row col-xs-24 col-md-8 padding-40 survey-reports">
-              <a href="https://outreach.eclipse.foundation/iot-adoption-2019" aria-label="Download 2019 IoT Adoption Survey Reports">
-                <img class="img img-responsive success-story margin-bottom-5" alt="2019 IoT Adoption Survey Results" src="/org/value/public/images/iot-adoption-survey-2019.jpg">
-              </a>
-              <a class="btn sucess-stories-download" aria-label="Download 2019 IoT Adoption Survey Reports" href="https://outreach.eclipse.foundation/iot-adoption-2019">
-                Download
-              </a>
-            </div>
-
-          </div>
+          <div class="newsroom-resources margin-top-40 margin-bottom-20 text-center flex-center gap-60" data-res-wg="eclipse_org" data-res-title="" data-res-type="survey_report" data-res-template="image" data-res-class="card-item"></div>
         </div>
       </div>
 
       <div class="col-md-24 panel text-center">
         <a role="button" data-parent="#accordion" data-toggle="collapse" class="btn btn-secondary padding-left-20 padding-right-20 width-250 padding-top-10 padding-bottom-10 fw-500 collapsed" href="#additional" expanded="false" aria-controls="additional"> Additional Case Studies </a>
         <div class="collapse panel-collapse" id="additional">
-          <div class="match-height-item-by-row col-xs-24 col-md-8 padding-40">
-            <a class="sucess-stories-download-link" aria-label="Download Aloxy case study" href="https://outreach.eclipse.foundation/aloxy-open-source-iiot">
-              <img class="img img-responsive success-story" alt="Aloxy Leverages Eclipse Foundation Membership to Build its Petro-Chemical Business" src="/org/value/public/images/aloxy.jpg">
-            </a>
-            <a class="btn btn-white sucess-stories-download padding-top-10 padding-bottom-10" href="https://outreach.eclipse.foundation/aloxy-open-source-iiot">
-              Download
-            </a>
-          </div>
-          <div class="match-height-item-by-row col-xs-24 col-md-8 padding-40">
-            <a class="sucess-stories-download-link" aria-label="Download Volttron Iot Case Study" href="https://outreach.eclipse.foundation/volttron-iot-case-study">
-              <img class="img img-responsive success-story" alt="Eclipse VOLTTRON Proves Its Versatility and Value in Real-World IoT Deployments" src="/org/value/public/images/volttron.jpg">
-            </a>
-            <a class="btn btn-white sucess-stories-download padding-top-10 padding-bottom-10" href="https://outreach.eclipse.foundation/volttron-iot-case-study">
-              Download
-            </a>
-          </div>
-          <div class="match-height-item-by-row col-xs-24 col-md-8 padding-40">
-            <a class="sucess-stories-download-link" aria-label="Download Eclipse Kuksa Case Study" href="https://outreach.eclipse.foundation/eclipse-kuksa-case-study-automotive">
-              <img class="img img-responsive success-story" alt="Eclipse Kuksa Breaks Down Automotive Silos to Provide a Platform for Vehicle-To-Cloud Connectivity" src="/org/value/public/images/kuksa.jpg">
-            </a>
-            <a class="btn btn-white sucess-stories-download padding-top-10 padding-bottom-10" aria-label="Download Eclipse Kuksa Case Study" href="https://outreach.eclipse.foundation/eclipse-kuksa-case-study-automotive">
-              Download
-            </a>
-          </div>
-          <div class="match-height-item-by-row col-xs-24 col-md-8 padding-40">
-            <a class="sucess-stories-download-link" aria-label="Download European Research Innovations Case Study" href="https://outreach.eclipse.foundation/european-research-case-study">
-              <img class="img img-responsive success-story" alt="Bringing European Research Innovations to the World Through Open Source Collaboration" src="/org/value/public/images/europe-research.jpg">
-            </a>
-            <a class="btn btn-white sucess-stories-download padding-top-10 padding-bottom-10" aria-label="Download European Research Innovations Case Study" href="https://outreach.eclipse.foundation/european-research-case-study">
-              Download
-            </a>
-          </div>
-          <div class="match-height-item-by-row col-xs-24 col-md-8 padding-40">
-            <a class="sucess-stories-download-link" aria-label="download Cedalo Case Study" href="https://outreach.eclipse.foundation/cedalo-iot-open-source-case-study">
-              <img class="img img-responsive success-story" alt="Cedalo Finds New Opportunities and Technology Partners in the Eclipse IoT Ecosystem" src="/org/value/public/images/cedalo.jpg">
-            </a>
-            <a class="btn btn-white sucess-stories-download padding-top-10 padding-bottom-10" aria-label="download Cedalo Case Study" href="https://outreach.eclipse.foundation/cedalo-iot-open-source-case-study">
-              Download
-            </a>
-          </div>
+          <div class="newsroom-resources margin-top-40 margin-bottom-20 text-center flex-center gap-60" data-res-wg="eclipse_org" data-res-title="" data-res-type="case_study" data-res-template="image" data-res-class="card-item" data-res-skip="4"></div>
         </div>
       </div>
 
diff --git a/value/public/css/value.css b/value/public/css/value.css
index a2f00d7..aee659e 100644
--- a/value/public/css/value.css
+++ b/value/public/css/value.css
@@ -89,6 +89,8 @@
 .success-story {
   box-shadow: 10px 20px 5px #e4e4e4;
   width: 322px;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
 }
 
 .survey-reports .btn {
@@ -101,23 +103,76 @@
   color: #545454;
 }
 
-.sucess-stories-download {
+.success-stories-download {
   width: 100%;
 }
 
-.sucess-stories-download.btn-white {
+.success-stories-download.btn-white {
   color: #f79422;
   box-shadow: 10px 10px 5px #c9c9c9;
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
 }
 
-.sucess-stories-download-link:hover {
+.success-stories-download-link:hover {
   color: white;
   text-decoration: none;
   cursor: pointer;
 }
 
+.newsroom-resources .card-item {
+  max-width: 290px;
+  min-width: 250px;
+  flex: 1;
+  box-shadow: 10px 20px 10px #e4e4e4;
+  border-radius: 5px;
+  overflow: hidden;
+}
+
+.newsroom-resources .card-item.card-item-success {
+  max-width: 260px;
+  min-width: 230px;
+}
+
+.newsroom-resources .card-item .image-container{
+  display: block;
+  padding-top: 128%;
+  padding-left: 100%;
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+}
+
+#surveyReports .newsroom-resources .card-item .image-container{
+  padding-top: 55%;
+}
+
+.newsroom-resources .card-item .image-container .cover{
+  width: 100%;
+  position: absolute;
+  top:0;
+  left:0;
+  right: 0;
+}
+
+.newsroom-resources .card-item .btn {
+  padding: 10px 12px;
+  background-color: #fff;
+  color: #f79422;
+  border: #fff;
+}
+
+#success_stories .newsroom-resources .card-item .btn {
+  background-color: #f7941e;
+  border-color: #f7941e;
+  color: #fff;
+}
+
+#surveyReports .newsroom-resources .card-item .btn {
+  background-color: #EDEBEB;
+  border: #EDEBEB;
+}
+
 .success-stories-col {
   padding-left: 25px;
   padding-right: 25px;