Updating Add-ons section on Download page

Change-Id: If66d263d12fe3bee4a37a7d83d65129561ed20c1
Signed-off-by: Loredana Chituc <loredana.chituc@obeo.fr>
diff --git a/download.html b/download.html
index 04b8fad..c3c6b7c 100644
--- a/download.html
+++ b/download.html
@@ -14,7 +14,6 @@
         ================================================== -->
         <meta name="format-detection" content="telephone=no">
         <meta name="viewport" content="width=device-width, initial-scale=1">
-
         <!-- Template CSS Files
         ================================================== -->
         <!-- Twitter Bootstrs CSS -->
@@ -27,13 +26,11 @@
         <!-- responsive css -->
         <link rel="stylesheet" href="css/responsive.css">
 		<link rel="stylesheet" href="css/latofonts.css">
-		
-        <script src="https://use.fontawesome.com/b51f77a16a.js"></script>
 
+        <script src="https://use.fontawesome.com/b51f77a16a.js"></script>
         <!-- Cookie content -->
         <link rel="stylesheet" type="text/css" href="//www.eclipse.org/eclipse.org-common/themes/solstice/public/stylesheets/vendor/cookieconsent/cookieconsent.min.css" />
         <script src="//www.eclipse.org/eclipse.org-common/themes/solstice/public/javascript/vendor/cookieconsent/default.min.js"></script>
-
         <!-- Eclipse Foundation Google Tag Manager -->
 		<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
 		new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
@@ -41,14 +38,12 @@
 		'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
 		})(window,document,'script','dataLayer','GTM-5WLCZXC');</script>
 		<!-- End Google Tag Manager -->
-
         <!-- Template Javascript Files
         ================================================== -->
 		<!-- Angular -->
 		<base href="/capella/">
 		<script src="js/angular-1.7.8.min.js"></script>
 		<script src="angular/capella.js"></script>
-
         <!-- modernizr js -->
         <script src="js/vendor/modernizr-2.6.2.min.js"></script>
         <!-- jquery -->
@@ -87,12 +82,10 @@
                 </div>
             </div>
         </section><!--/#intro_banner-->
-
         <!--
         ==================================================
         Main Content
         ================================================== -->
-
 		<!-- Capella Download -->
         <section id="capellaDwnld" class="text-center">
             <div class="container">
@@ -102,9 +95,7 @@
 					<br/>
 				</div>
 			</div>
-
 		</section> <!-- #capellaDwnld -->
-
  		<!-- Main Capella Download Links -->
 		 <section id="capellaResources" class="bg_indigo text-center next-section">
             <p class="txt_white text-center"><span class="caret">&nbsp; </span></p>
@@ -139,7 +130,7 @@
                                     <a href="https://download.eclipse.org/capella/samples/5.0.0/LevelCrossingTrafficControl_fr.zip" onClick="ga('send', 'event', 'Capella', '5.0.x', 'ATM');">FR <i class="fa fa-download" aria-hidden="true"></i></a>
                                 </p>
                                 <p class="txt_white wow fadeInUp animated" data-wow-delay=".3s">In-Flight Entertainment (IFE)<br>
-                                    <a href="https://download.eclipse.org/capella/samples/5.0.0/InFlightEntertainmentSystem.zip" onClick="ga('send', 'event', 'Capella', '5.0.x', 'IFE');">EN <i class="fa fa-download" aria-hidden="true"></i></a> - 
+                                    <a href="https://download.eclipse.org/capella/samples/5.0.0/InFlightEntertainmentSystem.zip" onClick="ga('send', 'event', 'Capella', '5.0.x', 'IFE');">EN <i class="fa fa-download" aria-hidden="true"></i></a> -
                                     <a href="resources/doc/IFE_XHTML_DocGen_5.0.0_for_capella_5.0.0/output/index.html" target="_blank">Doc <i class="fa fa-html5" aria-hidden="true"></i></a>
                                 </p>
            	     				<p><a class="wow fadeInUp animated" data-wow-delay=".3s" href="http://download.eclipse.org/capella/samples/?d" target="_blank">Samples for Older Releases <i class="fa fa-external-link" aria-hidden="true"></i></a></p>
@@ -154,14 +145,17 @@
                 </div>
             </div>
 		</section> <!-- #capellaResources -->
-
-
 		<!-- Capella Add-Ons -->
         <section id="capellaExtensions" class="bg_lightest_grey text-center">
             <div class="container">
                 <h2 class="title wow fadeInDown" data-wow-delay=".3s">Capella Add-ons</h2>
                 <div class="row">
-                    <p class="wow fadeInDown" data-wow-delay=".5s">To install Capella extensions have a look to the <a href="https://wiki.eclipse.org/Capella/Extensions/Installation_Guide#Installation_Procedure" target="_blank">installation procedure</a></p>
+                    <p class="wow fadeInDown" data-wow-delay=".5s">Beyond the workbench, the Capella ecosystem provides a rich set of open-source and commercial add-ons:<br>
+                    document generation, requirements authoring, team collaboration, simulation, variability management, ...</p>
+               		<p><a class="wow fadeInDown btn btn-default" data-wow-delay=".6s" href="addons.html"><i class="fa fa-puzzle-piece" aria-hidden="true"></i> Discover all the available add-ons</a></p>
+               		<p>&nbsp;</p>
+                    <p class="wow fadeInDown" data-wow-delay=".5s">Find below the main open-source add-ons that can be directly downloaded.<br>
+                    To install Capella extensions have a look to the <a href="https://wiki.eclipse.org/Capella/Extensions/Installation_Guide#Installation_Procedure" target="_blank">installation procedure</a></p>
                     <br>
                 </div>
                 <div class="row">
@@ -180,15 +174,11 @@
                                 <div id="capella-basic"></div>
                             </div>
                         </figure>
-                    </div>                    
+                    </div>
                 </div>
-                <p><a class="wow fadeInDown btn btn-default" data-wow-delay=".6s" href="addons.html">More add-ons</a></p>
-                
+
         </div>
-
-
 		</section> <!-- #capellaExtensions -->
-
 		<!-- Capella Studio -->
         <section id="capellaStudio" class="text-center">
             <div class="container">
@@ -200,7 +190,6 @@
 				</div>
 			</div>
 		</section> <!-- #capellaStudio -->
-
 		<!-- Main Capella Studio Download Links -->
         <section id="capellaStudioResources" class="bg_indigo text-center next-section">
         <p class="txt_white text-center"><span class="caret">&nbsp; </span></p>
@@ -232,16 +221,13 @@
                 </div>
             </div>
 		</section> <!-- #capellaResources -->
-
 			<script>
-
                     function updateMainLink(mainLinkId, data, product) {
                         let mainId = "windows";
 						let title = "Get {0} {1} for {2} {3}".format(product.name, product.version, data.lang[mainId].text, data.lang["main"].text);
                         let mainLink = '<p><a class="wow fadeInUp animated btn btn-default animated" data-wow-delay=".6s" href="{0}" style="visibility: visible; animation-delay: 0.6s; animation-name: fadeInUp;" onClick="ga(\'send\', \'event\', \'{1}\', \'{2}\', \'{3}\');"><i class="fa fa-download" aria-hidden="true"></i> {4}</a></p>'.format(product.links[mainId].main, product.key, data.versionBranch, data.lang[mainId].key, title);
                         document.getElementById(mainLinkId).innerHTML += mainLink;
                     }
-
                     function updatePlatformLinks(platformLinksId, data, product) {
                         let lis = Object.keys(product.links).map(function (k) {
                             let link = product.links[k];
@@ -250,7 +236,6 @@
                         }).join("");
                         document.getElementById(platformLinksId).innerHTML += lis;
                     }
-
                     function updateAddonLinks(data) {
                         let addons = "";
                         let basic = "";
@@ -262,7 +247,7 @@
                                 let icon = ""; //data.lang[k].icon ? `<i class="pl-2 ${data.lang[k].icon}" aria-hidden="true"></i>` : "";
                                 return '<a href="{0}" onClick="ga(\'send\', \'event\', \'Capella\', \'{1}\', \'{2}\');">{3}{4}</a>'.format(addon.download[k], data.versionBranch, addon.key, data.lang[k].text, icon);
                             }).join(" - ");
-                            
+
 							let header = [];
 							if (addon.contact) {
 								header.push('Contact: '+addon.contact);
@@ -272,12 +257,11 @@
 							}
 							header=header.join(" - ");
 							let information = '<p><i>{0}</i></p><p>{1}</p>'.format(header, addon.description);
-							
+
 							let compatible = addon.compatibleWithCurrentVersion === false ? '<button role="button" class="fa fa-exclamation-triangle btn-link btn-xs alert-compatibility" data-toggle="tooltip" data-placement="bottom" title="{0}" ></button>'.format(data.lang.compatibility.text) : "";
 							let information2 = '<button role="button" class="fa fa-info-circle btn-link btn-xs " data-toggle="popover" data-trigger="focus" data-placement="bottom" title="{0}" data-content="{1}"></button>'.format(addon.name, information);
-							
-							let result = '<p class="wow fadeInUp animated" data-wow-delay=".3s">{0} {1}<br/><span class="small pl-2">{2}{3}</span></p><br/>'.format(addon.name, information2, compatible, links);
 
+							let result = '<p class="wow fadeInUp animated" data-wow-delay=".3s">{0} {1}<br/><span class="small pl-2">{2}{3}</span></p><br/>'.format(addon.name, information2, compatible, links);
                             if (!addon.isViewpoint) {
                                 addons += result;
                             } else {
@@ -286,24 +270,18 @@
                       }
                       document.getElementById("capella-addons").innerHTML = addons;
                       document.getElementById("capella-basic").innerHTML = basic;
-					  
+
 					  $('[data-toggle="popover"]').popover( { html: true, container: 'body' });
 					  $('[data-toggle="tooltip"]').tooltip();
                     }
-
                    $.getJSON('json/downloads.json', function(data) {
-
                         updateMainLink("capellaMainLink", data, data.capella);
                         updatePlatformLinks("capellaPlatformLinks", data, data.capella);
-
                         updateMainLink("capellaStudioMainLink", data, data.capellaStudio);
                         updatePlatformLinks("capellaStudioPlatformLinks", data, data.capellaStudio);
-
                         updateAddonLinks(data);
-
                   });
               </script>
-
          <!-- Need Help Section -->
         <section class="text-center bg_lightest_grey">
             <div class="container">
@@ -323,7 +301,6 @@
                 </div>
             </div>
         </section>
-
 		<div id="back-to-top" data-spy="affix" data-offset-top="100"
 			class="back-to-top hidden-xs hidden-sm affix-top">
 			<button class="btn btn-default" title="Back to Top">
@@ -339,7 +316,6 @@
 				return false;
 			});
 		</script>
-
         <!--
         ==================================================
         Footer Section