add try it out section on main page (#52)

* add try it out section on main page

* Fix pyscript.com icon

* remove disclaimer about PyScript being Alpha

* remove commented CSS

---------

Co-authored-by: Fabio Pliger <[email protected]>
Co-authored-by: FabioRosado <[email protected]>

Author: fpliger

assets/css/main.css

@@ -126,11 +126,9 @@ a.examples-block {
     background: #1D1D22;
     border: 2px solid #FDA703;
     border-radius: 10px;
-    margin: 2rem auto;
     /* color: #fff; */
     text-decoration: none;
-    max-width: 370px;
-
+    width: 100%;
     align-items: center;
     border-radius: 10px;
     color: #fff;
@@ -185,7 +183,7 @@ a.examples-block:hover {
     display: grid;
     grid-gap: 30px;
     grid-template-columns: repeat(2,1fr);
-    margin-top: 1rem;
+    margin-top: 2rem;
     padding: 0;
 }
 

assets/images/pyscript-logo-icon.svg

@@ -75,20 +75,35 @@
                 </div>
                 <!-- end terminal window -->
 
-                <!-- begin examples badge -->
-                <a href="https://pyscript.net/examples/" target="_blank" rel="noreferrer noopener" class="examples-block">
-                    <div class="glyph">
-                        <svg width="16px" height="16px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-grid">
-                        <path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/>
-                        </svg>
-                    </div>
-                    <div>
-                        <h2>Examples</h2>
-                        <p><span>Click here</span> for example projects</p>
-                    </div>
+                <div class="dialogs">
+                    <!-- begin examples badge -->
+                    <a href="https://pyscript.net/examples/" target="_blank" rel="noreferrer noopener" class="examples-block">
+                        <div class="glyph">
+                            <svg width="16px" height="16px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-grid">
+                            <path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/>
+                            </svg>
+                        </div>
+                        <div>
+                            <h2>Examples</h2>
+                            <p><span>Click here</span> for example projects</p>
+                        </div>
+                    </a>
+                    <!-- end examples badge -->
 
-                </a>
-                <!-- end examples badge -->
+                    <!-- begin pyscript.com badge -->
+                    <a href="https://pyscript.com/" target="_blank" rel="noreferrer noopener" class="examples-block">
+                        <div class="glyph">
+                            <svg id="pyscript-logo-icon" width="16px" height="16px" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 165 155">
+                            <path d="M155.621 28.601C132.42-5.336 76.466-5.723 42.438 10.485-8.056 34.533-1.18 86.205 2.62 135.64c.295 3.812.605 7.706 2.147 11.203 1.538 3.498 4.56 6.59 8.346 7.145a8.704 8.704 0 0 0 4.41-.483c4.691-1.763 8.173-7.285 9.972-12.386 9.366-26.575 22.345-13.358 43.588-9.822 2.849.474 5.716.865 8.584 1.165l6.136-16.054-23.68-59.474a15.412 15.412 0 0 1 14.333-21.106c6.818 0 12.974 4.295 15.314 10.691l10.615 28.957 9.613-28.817a15.834 15.834 0 0 1 15.044-10.83 14.78 14.78 0 0 1 12.069 6.255 14.756 14.756 0 0 1 1.833 13.46l-26.398 73.734c24.295-8.256 43.956-29.783 49.092-55.01 3.167-15.556.933-32.551-8.027-45.662l.009-.005Z"/>
+                            </svg>
+                        </div>
+                        <div>
+                            <h2>Try it out!</h2>
+                            <p><span>PyScript.com</span> is the easiest way to try it out, for free</p>
+                        </div>
+                    </a>
+                    <!-- end pyscript.com badge -->
+                </div>
 
                 <!-- begin dialog content -->
                 <div class="dialogs">
@@ -138,8 +153,6 @@ <h2>Install</h2>
                 </div>
                 <!-- end dialog content -->
 
-                <p class="disclaimer">Please be advised that PyScript is very alpha and under heavy development. There are many known issues, from usability to loading times, and you should expect things to change often. We encourage people to play and explore with PyScript, but at this time we do not recommend using it for production.</p>
-
                 <div class="social">
                     <figure class="profile">
                         <svg width="256px" height="209px" viewBox="0 0 256 209" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">