feat: implements highlighted features in the static site.

docs/javascripts/extra.js

@@ -1,17 +1,33 @@
 // ----- ----- ----- ----- -----
-// gsap scrollTrigger management
-gsap.registerPlugin("scrollTrigger");
+// gsap scrollTrigger management on landing page
+gsap.registerPlugin('scrollTrigger');
 
-var slideUpElements = gsap.utils.toArray(".slide-up");
+const slideUpElements = gsap.utils.toArray('.slide-up');
 
 slideUpElements.forEach(function (element) {
     gsap.from(element, {
         scrollTrigger: {
             trigger: element,
-            toggleActions: "restart none none reset"
+            toggleActions: 'restart none none reset'
             // markers: true
         },
         y: 48,
         duration: 0.48
     });
-})
+})
+
+// ----- ----- ----- ----- -----
+// modal management on landing page
+const modal = document.querySelector('.modal');
+
+function toggleModal() {
+    modal.classList.toggle('show-modal');
+}
+
+function windowOnClick(event) {
+    if (event.target === modal) {
+        toggleModal();
+    }
+}
+
+window.addEventListener('click', windowOnClick);

docs/overrides/home.html

@@ -169,11 +169,95 @@ <h4>Ethics</h4>
             </ul>
         </div>
     </section>
-    <section class="knl-highlights"></section>
+    <section class="knl-highlights">
+        <div class="knl-highlight md-grid slide-up">
+            <div class="knl-highlight__figure">
+                <figure>
+                    <img src="./assets/images/highlight-efficiency.svg" alt="illustration of efficiency" loading="lazy"
+                         class="efficiency">
+                </figure>
+            </div>
+            <div class="knl-highlight__content">
+                <header>
+                    <svg width="48" height="48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M27.333 28.606v-14.6a3.332 3.332 0 1 0-6.667 0v14.6A5.001 5.001 0 0 0 24 37.333a5.002 5.002 0 0 0 3.334-8.727ZM24 35.666a3.333 3.333 0 0 1-1.667-6.22V14.004c0-.923.747-1.67 1.667-1.67.926 0 1.667.747 1.667 1.67v15.442A3.333 3.333 0 0 1 24 35.666Z" fill="#4351E8"/><path d="M24.82 29.972a.711.711 0 0 0 .013-.141v-8.328a.832.832 0 0 0-.833-.836c-.46 0-.833.38-.833.836v8.328c0 .048.004.095.011.14a2.5 2.5 0 1 0 1.642 0Z" fill="#4351E8"/><rect x="1.5" y="1.5" width="45" height="45" rx="22.5" stroke="#B6BCF6" stroke-width="3"/></svg>
+                    <h3>How is it <em>efficient</em>?</h3>
+                </header>
+                <div class="knl-highlight__description">
+                    <p>
+                        Kernel fusion is <em>based on a simple recipe</em>:
+                    </p>
+                    <ul>
+                        <li><em>Make a graph</em> of the model with PyTorch FX and TorchDynamo</li>
+                        <li>Identify only <em>costly operations</em> (e.g. Attention, Linear Layer, etc.)</li>
+                        <li>Dynamically <em>replace these</em> by an OpenAI Triton operation that fuses them</li>
+                        <li>And <em>keep the pre-existing optimizations</em></li>
+                    </ul>
+                    <p>
+                        This simple recipe drastically <em>reduces GPU memory bandwidth bottleneck</em> and <em>accelerates
+                        inference</em> and
+                        <em>training</em>.
+                    </p>
+                </div>
+                <footer>
+                    <a href="./get-started/start/#welcome-to-kernlai" class="button button__primary--outlined">
+                        <span>See how it works</span>
+                        <svg width="25" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M9.09 16.59 13.67 12 9.09 7.41 10.5 6l6 6-6 6-1.41-1.41Z"/>
+                        </svg>
+                    </a>
+                </footer>
+            </div>
+        </div>
+        <div class="knl-highlight md-grid slide-up">
+            <div class="knl-highlight__figure">
+                <figure class="open-modal" onclick="toggleModal();">
+                    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m14.667 4 2.044 2.044-2.569 2.552 1.262 1.262 2.552-2.57L20 9.334V4h-5.333ZM4 9.333 6.044 7.29l2.552 2.569 1.262-1.262-2.57-2.552L9.334 4H4v5.333ZM9.333 20 7.29 17.956l2.569-2.552-1.262-1.262-2.552 2.57L4 14.666V20h5.333ZM20 14.667l-2.044 2.044-2.552-2.569-1.262 1.262 2.57 2.552L14.666 20H20v-5.333Z"/></svg>
+                    <img src="./assets/images/highlight-performance.png" alt="illustration of performance"
+                         loading="lazy" class="performance">
+                </figure>
+            </div>
+            <div class="knl-highlight__content">
+                <header>
+                    <svg width="48" height="48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m33.533 19.893 1.64-2.466.014-.014a13.333 13.333 0 0 1 .36 13.92 2.665 2.665 0 0 1-.98.98L33.24 30a10.667 10.667 0 0 0 .293-10.107Zm-20.126 3.54A10.667 10.667 0 0 0 14.76 30l-1.324 2.306a2.667 2.667 0 0 1-.97-.973 13.334 13.334 0 0 1 18.774-17.84l-2.467 1.64a10.667 10.667 0 0 0-15.366 8.3Z" fill="#4351E8"/><path d="M22.12 26.547a2.665 2.665 0 0 0 3.773 0l7.547-11.32-11.32 7.546a2.667 2.667 0 0 0 0 3.774Z" fill="#4351E8"/><rect x="1.5" y="1.5" width="45" height="45" rx="22.5" stroke="#B6BCF6" stroke-width="3"/></svg>
+                    <h3>Pretty crazy <em>performance</em> gains</h3>
+                </header>
+                <div class="knl-highlight__description">
+                    <p>
+                        Kernels fusion is a part of our optimizations. By fusing them, <em>GPU memory accesses are
+                        significantly reduced</em>, <em>CPU overhead is eliminated</em>, which <em>reduces inference
+                        latency</em> and <em>increases training speed</em>.
+                    </p>
+                    <p>
+                        For example, <em>Bert is up to 12 times faster</em> than the Hugging Face baseline.
+                    </p>
+                    <p>
+                        <em>T5 is also 6 times faster</em> (and we are still halfway through the optimizations!).
+                    </p>
+                </div>
+                <footer>
+                    <a href="./get-started/start/#welcome-to-kernlai" class="button button__primary--outlined">
+                        <span>See more benchmarks</span>
+                        <svg width="25" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M9.09 16.59 13.67 12 9.09 7.41 10.5 6l6 6-6 6-1.41-1.41Z"/>
+                        </svg>
+                    </a>
+                </footer>
+            </div>
+        </div>
+    </section>
+    <div class="modal">
+        <div class="modal-content">
+            <button class="close-button" onclick="toggleModal();">
+                <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 18 18 6M6 6l12 12" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+            </button>
+            <img src="./assets/images/highlight-performance.png" alt="illustration of performance" loading="lazy">
+        </div>
+    </div>
     <section class="knl-contribute">
         <div class="knl-contribute__content md-grid slide-up">
             <h3><em>Contribute</em> in your own way!</h3>
-            <a href="https://github.com/ELS-RD/kernl" target="_blank" rel="noopener noreferrer">
+            <a href="https://github.com/ELS-RD/kernl" target="_blank" rel="noopener noreferrer"
+               title="Contribute in your own way">
                 <svg viewBox="0 0 25 24" xmlns="http://www.w3.org/2000/svg">
                     <path d="M11.4 2.1c-4.6.5-8.3 4.2-8.8 8.7-.5 4.7 2.2 8.9 6.3 10.5.3.1.6-.1.6-.5v-1.6s-.4.1-.9.1c-1.4 0-2-1.2-2.1-1.9-.1-.4-.3-.7-.6-1-.3-.1-.4-.1-.4-.2 0-.2.3-.2.4-.2.6 0 1.1.7 1.3 1 .5.8 1.1 1 1.4 1 .4 0 .7-.1.9-.2.1-.7.4-1.4 1-1.8-2.3-.5-4-1.8-4-4 0-1.1.5-2.2 1.2-3-.1-.2-.2-.7-.2-1.4 0-.4 0-1 .3-1.6 0 0 1.4 0 2.8 1.3.5-.2 1.2-.3 1.9-.3s1.4.1 2 .3C15.8 6 17.3 6 17.3 6c.2.6.2 1.2.2 1.6 0 .8-.1 1.2-.2 1.4.7.8 1.2 1.8 1.2 3 0 2.2-1.7 3.5-4 4 .6.5 1 1.4 1 2.3v2.6c0 .3.3.6.7.5 3.7-1.5 6.3-5.1 6.3-9.3 0-6-5.1-10.7-11.1-10Z"/>
                 </svg>