update blocks style

README.md

@@ -8,6 +8,35 @@ pinned: false
 ---
 
 <div class="grid lg:grid-cols-2 gap-x-4">
+   <h2 class="my-8 lg:col-span-2" style="font-size:20px; font-weight:bold">
+        Welcome to the Gradio Blocks Event  👋 <a href="https://gradio.app/" target="_blank">Gradio</a> 👋
+   </h2>
+   <br />
+   <p class="lg:col-span-2">
+    Happy to invite you to the Gradio Blocks sprint - a community event in which we will setup and deploy models using the new Gradio Blocks feature. Blocks allows you to build web-based demos in a flexible way using the Gradio library. The event will take place from May 11th to 31st. We will be organizing this event on github and the huggingface discord channel.
+   </p>
+   <br />
+   <h3>What is Blocks?</h3>
+   <p class="lg:col-span-2">
+     If you have already used gradio.Interface, you know that you can easily create fully-fledged machine learning demos with just a few lines of code. The Interface API is very convenient but in some cases may not be sufficiently flexible for your needs. For example, you might want to:
+
+     <ul>
+         <li>Group together related demos as multiple tabs in one web app</li>
+         <li>Change the layout of your demo instead of just having all of the inputs on the left and outputs on the right</li>
+         <li>Have multi-step interfaces, in which the output of one model becomes the input to the next model, or have more flexible data flows in general</li>
+         <li>Change a component's properties (for example, the choices in a Dropdown) or its visibilty based on user input</li>
+      </ul>
+   </p>
+   <br />
+   <ul class="lg:col-span-2" style="list-style: circle inside">
+      <li class="my-4">
+         <a href="https://discord.com/invite/my8w7JUxZR" target="_blank"><u>discord for Gradio Blocks</u></a>
+      </li>
+   </ul>
+   <br />
+   <br />
+
+<!-- <div class="grid lg:grid-cols-2 gap-x-4">
    <h2 class="my-8 lg:col-span-2" style="font-size:20px; font-weight:bold">
       Welcome to the Gradio Blocks Event  👋
    </h2>
@@ -37,4 +66,4 @@ The goal of this event if for people to become more familiar with the blocks fea
    - Share Demos in a Hugging Face organization for the Blocks event
    </p>
    <br />
-</div>
+</div> -->