add quick start notebook to usage examples

Author: aagrande

docs/imgs/img_sinusoidal.png

@@ -752,29 +752,74 @@ <h3> Competitive performance</h3>
     <h3> Usage Examples </h3>
 
     <div class="cards-container">
-      <a href="https://arxiv.org/pdf/2406.07658" class="example-card">
-        <!-- <img src="imgs/img_avatar.png" alt="Avatar"> -->
+      <!-- <a class="example-card">
+        <img src="imgs/img_sinusoidal.png" alt="Bimodal, heteroskedastic response">
         <div class="example-container">
-          <h4><b> Optimal Inventory Allocation</b></h4>
+          <h4>
+            <b> A simple response with two sinusoidal components </b>
+            <a href="https://colab.research.google.com/github/blei-lab/treeffuser/blob/tutorials/examples/README_example.ipynb"
+              style="color: #145c15; font-weight: bold;">[open in Colab]</a>
+            <a href="https://github.com/blei-lab/treeffuser/blob/tutorials/examples/README_example.ipynb"
+              style="color: #145c15; font-weight: bold;">[source]</a>
+          </h4>
           <p>
-            We use Treeffuser to model the distribution of demand for products
-            in a retail store. This allows us to compute the optimal inventory
-            allocation that minimizes the risk of stockouts and waste while maximizing
-            profits.
+            We demonstrate how to train and generate samples with Treeffuser
+            using a simple example with synthethic data, featuring a multimodal
+            response with two sinusoidal components.
           </p>
+        </div>
+      </a> -->
 
+      <a class="example-card">
+        <img src="imgs/img_sinusoidal.png" alt="Bimodal, heteroskedastic response">
+        <div class="example-container">
+          <h4>
+            <b> A simple response with two sinusoidal components </b>
+          </h4>
+          <p>
+            We demonstrate how to train and generate samples with Treeffuser
+            using a simple example with synthetic data, featuring a multimodal
+            response with two sinusoidal components.
+          </p>
         </div>
       </a>
-      <a href="https://arxiv.org/pdf/2406.07658" class="example-card">
-        <!-- <img src="imgs/img_avatar.png" alt="Avatar"> -->
+      <!-- Place links outside the main card -->
+      <div>
+        <a href="https://colab.research.google.com/github/blei-lab/treeffuser/blob/tutorials/examples/README_example.ipynb"
+          style="color: #145c15; font-weight: bold;">[open in Colab]</a>
+        <a href="https://github.com/blei-lab/treeffuser/blob/tutorials/examples/README_example.ipynb"
+          style="color: #145c15; font-weight: bold;">[source]</a>
+      </div>
+
+      <!-- <a href="https://arxiv.org/pdf/2406.07658" class="example-card">
+        <img src="imgs/img_avatar.png" alt="Avatar">
         <div class="example-container">
           <h4><b> Synthetic Data </b></h4>
           <p>
             We demonstrate the effectiveness and flexibility of Treeffuser
-            of treeffuser on Synthetic data with multivariate output,
+            on Synthetic data with multivariate output,
             complex varying multimodality, heavy tails and skewness.
           </p>
         </div>
+      </a> -->
+
+      <a href="https://arxiv.org/pdf/2406.07658" class="example-card">
+        <!-- <img src="imgs/img_avatar.png" alt="Avatar"> -->
+        <div class="example-container">
+          <h4>
+            <b> Optimal Inventory Allocation </b>
+            <!-- <a href="https://colab.research.google.com/github/blei-lab/treeffuser/blob/tutorials/examples/README_example.ipynb"
+              style="color: #145c15; font-weight: bold;">[open in Colab]</a>
+            <a href="https://github.com/blei-lab/treeffuser/blob/tutorials/examples/README_example.ipynb"
+              style="color: #145c15; font-weight: bold;">[source]</a> -->
+          </h4>
+          We use Treeffuser to model the distribution of demand for products
+          in a retail store. This allows us to compute the optimal inventory
+          allocation that minimizes the risk of stockouts and waste while maximizing
+          profits.
+          </p>
+
+        </div>
       </a>
 
       <!--