From 9c737d07a34a7a96b4eb94dbd6e6f28d6c24375f Mon Sep 17 00:00:00 2001
From: Lerina J-Y Razafy <lerina.razafy@gmail.com>
Date: Thu, 16 May 2024 22:47:33 +0200
Subject: [PATCH] wasm link direct to book

---
 demo/index.html |  7 +++++--
 demo/index.md   |  5 +++--
 index.html      | 18 ++++++++++--------
 index.md        |  4 ++--
 4 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index 09fd358..5ade1f9 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -146,7 +146,8 @@ <h3 style="padding-left:1em; border: 2px solid var(--color-bg-secondary); border
 <img src="./img/css-animations.jpg" />
 </p>
 <p>
-Client side Animations
+Client side animations can enhance the emotional experience of the
+users. It adds personality to web interfaces and enhances interaction.
 </p>
 </aside>
 <aside>
@@ -157,7 +158,9 @@ <h3 style="padding-left:1em; border: 2px solid var(--color-bg-secondary); border
 <img src="./img/svg.png" />
 </p>
 <p>
-Powerful Animations
+SVG <small>(Scalable Vector Graphics)</small> has support for
+interactivity and powerful animation. Its ideal for web illustrations
+because it tends to have smaller file sizes than other formats.
 </p>
 </aside>
 </section>
diff --git a/demo/index.md b/demo/index.md
index 43ed385..53cb684 100644
--- a/demo/index.md
+++ b/demo/index.md
@@ -70,14 +70,15 @@ This simplifies the cooperation between the developers and the designers freeing
 <p>
 ![](./img/css-animations.jpg)
 </p>
-<p>Client side Animations</p>
+<p>Client side animations can enhance the emotional experience of the users. It adds personality to web interfaces and enhances interaction.</p>
 </aside>
 <aside>
 <h3 style="padding-left:1em; border: 2px solid var(--color-bg-secondary); border-radius: 4px;">SVG </h3>
 <p>
 ![](./img/svg.png)
 </p>
-<p>Powerful Animations</p>
+<p>SVG <small>(Scalable Vector Graphics)</small> has support for interactivity and powerful animation. 
+Its ideal for web illustrations because it tends to have smaller file sizes than other formats.</p>
 </aside>
 </section>
 
diff --git a/index.html b/index.html
index 10862ee..2449de9 100644
--- a/index.html
+++ b/index.html
@@ -31,12 +31,6 @@
 <header id="title-block-header">
 <h1 class="title">OPTIMAL: Services</h1>
 </header>
-<nav id="TOC" role="doc-toc">
-<ul>
-<li><a href="#featured-tutorials" id="toc-featured-tutorials">Featured
-tutorials</a></li>
-</ul>
-</nav>
 <div class="bg">
 
 </div>
@@ -102,11 +96,19 @@ <h3>
 </section>
 <p><!-- ^--- hero --></p>
 <section id="demo">
-<h3 id="demo-page">Demo Page</h3>
+<div class="greetings">
+<p class="drop fancySerif">
+Demo pages
+</p>
+</div>
 <p><a href="./demo/index.html">Rust - Frontend &amp; Backend</a></p>
 </section>
 <section id="featured_projects">
-<h2 id="featured-tutorials">Featured tutorials</h2>
+<div class="greetings">
+<p class="drop fancySerif">
+Featured tutorials
+</p>
+</div>
 <div style="padding: 1em 2em;">
 <p>
 The following are selected tutorial we developed for experienced but
diff --git a/index.md b/index.md
index 43a7406..180bc10 100644
--- a/index.md
+++ b/index.md
@@ -51,7 +51,7 @@ style="background-image: url('./img/optimal_trek.png'); background-size: cover;
 </section> <!-- ^--- hero -->
 
 <section id="demo">
-### Demo Page
+<div class="greetings"><p class="drop fancySerif">Demo pages</p></div>
 
 [Rust - Frontend & Backend](./demo/index.html)
 
@@ -59,7 +59,7 @@ style="background-image: url('./img/optimal_trek.png'); background-size: cover;
 
 <section id="featured_projects">
 
-## Featured tutorials
+<div class="greetings"><p class="drop fancySerif">Featured tutorials</p></div>
 
 <div style="padding: 1em 2em;">
 <p>The following are selected tutorial we developed for experienced but beginner rust programmers,