update landing page

Author: arose

img/ext-me.png img/app-me.pngimg/ext-me.png renamed to img/app-me.png

@@ -319,7 +319,7 @@ <h4 class="hero-heading" style="margin-bottom: 40px"><b>Interactive Examples</b>
 
         <div class="row" style="margin-top: 40px; padding-top: 40px; text-align: center; border-top: 1px solid #E0DDD4;">
             <div class="twelve columns" style="text-align: center">
-                <h4 class="hero-heading" style="margin-bottom: 40px;"><b>Apps and Extensions</b></h4>
+                <h4 class="hero-heading" style="margin-bottom: 40px;"><b>Apps, Extensions & Features</b></h4>
             </div>
         </div>
 
@@ -338,7 +338,7 @@ <h4 class="hero-heading" style="margin-bottom: 40px;"><b>Apps and Extensions</b>
                 <a href="https://molstar.org/mol-view-stories"><img alt="Volumes and Segmentations Extension" style="max-width: 100%;" class="shadow-img" src="img/ext-stories.png" /></a>
             </div>
             <div class="six columns" style="text-align: center;">
-                <a href="https://molstar.org/me"><img alt="Mesoscale Explorer" style="max-width: 100%;" class="shadow-img" src="img/ext-me.png" /></a>
+                <a href="https://molstar.org/me"><img alt="Mesoscale Explorer" style="max-width: 100%;" class="shadow-img" src="img/app-me.png" /></a>
             </div>
         </div>
 
@@ -387,6 +387,33 @@ <h4 class="hero-heading" style="margin-bottom: 40px;"><b>Apps and Extensions</b>
             </div>
         </div>
 
+        <div class="row" style="margin-top: 40px; display: flex; font-size: 75%;">
+            <div class="six columns" style="text-align: center;">
+                <a href="https://molstar.org/illumination" class="button button-primary" style="font-size: 2rem; width: 100%;">Illumination</a>
+            </div>
+            <div class="six columns" style="text-align: center;">
+                <a href="https://molstar.org/xr" class="button button-primary" style="font-size: 1.75rem; width: 100%;">Immersive AR/VR</a>
+            </div>
+        </div>
+
+        <div class="row" style="margin-top: 10px; display: flex; align-items: center;">
+            <div class="six columns" style="text-align: center;">
+                <a href="https://molstar.org/illumination"><img alt="MolViewSpec Extension" style="max-width: 100%;" class="shadow-img" src="img\feat-illumination.png" /></a>
+            </div>
+            <div class="six columns" style="text-align: center;">
+                <a href="https://molstar.org/xr"><img alt="Volumes and Segmentations Extension" style="max-width: 100%;" class="shadow-img" src="img/feat-xr.png" /></a>
+            </div>
+        </div>
+
+        <div class="row" style="margin-top: 10px; display: flex;">
+            <div class="six columns" style="text-align: justify;">
+                The <b>illumination</b> mode provides natural, balanced lighting that improves depth perception and overall interpretability.
+            </div>
+            <div class="six columns" style="text-align: justify;">
+                At any point you can jump into an <b>immersive AR/VR</b> session and out of it and see the same scene.
+            </div>
+        </div>
+
         <div class="row" style="margin-top: 40px; padding-top: 40px; text-align: center; border-top: 1px solid #E0DDD4;">
             <div class="twelve columns" style="text-align: center">
                 <h4 class="hero-heading" style="margin-bottom: 40px;"><b>Community Highlights</b></h4>