design: improve look of the main jumbotron

Author: tfuxu

index.html

@@ -19,7 +19,7 @@
                 <a class="navbar-brand" href="/">
                     <img src="images/pillow-logo-light-text-1280x640.png"
                          height="60"
-                         alt="Pillow Logo"
+                         alt="Pillow logo with text"
                          class="d-inline-block align-text-top">
                 </a>
                 <div id="nav-content">
@@ -55,21 +55,37 @@
         </nav>
         <main>
             <div class="container mt-5">
-                <div class="p-5 mb-4 bg-pillow rounded-3">
-                    <div class="container-fluid p-5 bg-white border rounded-1">
-                        <h1 class="display-5 fw-bold">Welcome</h1>
-                        <div class="col-md-12 fs-4">
-                            <p>This is the home of Pillow, the friendly PIL fork. PIL is an acronym for Python Imaging Library.</p>
-                            <p>If you have ever worried or wondered about the future of PIL, please stop. We're here to save the day.</p>
+                <div class="mb-4 bg-pillow rounded-3 text-center">
+                    <div class="container-fluid p-5 bg-white border rounded-3" style="--bs-bg-opacity: .93;">
+                        <div id="jumbotron-icon">
+                            <img src="./images/pillow-logo-248x250.png"
+                                 height="248"
+                                 alt="Pillow logo"
+                                 class="img-fluid">
+                        </div>
+                        <h1 class="display-6 fw-bold">Pillow</h1>
+                        <div class="col-lg-8 mx-auto fs-4 lead">
+                            <p>This is the home of Pillow, the friendly PIL fork.</p>
+                            <p>PIL is an acronym for Python Imaging Library. 
+                            If you have ever worried or wondered about the future of PIL, please stop. We're here to save the day.</p>
+                        </div>
+                        <div class="d-flex flex-column flex-md-row align-items-md-stretch justify-content-md-center gap-4 mt-4">
+                            <a class="btn btn-primary btn-lg px-4 rounded-pill"
+                               href="https://pypi.org/project/Pillow/">Get from PyPI</a>
+                            <a class="btn btn-outline-secondary btn-lg px-4 rounded-pill"
+                               href="https://pillow.readthedocs.io/">Read the docs</a>
                         </div>
-                        <h2 id="news" class="fw-bold">News</h2>
+
+                        <!-- Disabled news div -->
+
+                        <!--<h2 id="news" class="fw-bold">News</h2>
                         <div class="col-md-12 fs-4">
                             <span class="fw-bold">Python Pillow creator Jeffrey A. Clark (Alex)</span> is 
                             <a target="_blank" href="https://github.com/python-pillow/Pillow/issues/7150">seeking FT remote work</a>. 
                             Please considering hiring him or 
                             <a target="_blank" href="https://github.com/python-pillow/Pillow/issues/7150">sharing news</a> 
                             with your network. Any and all networking opportunities appreciated!
-                        </div>
+                        </div>-->
                     </div>
                 </div>
                 <div class="row">