[SC64][WEB] Updated website home page

web/features.html

@@ -54,7 +54,7 @@
                 </article>
 
                 <article>
-                    <h3>Complete 64DD emulation built-in</h3>
+                    <h3>Complete 64DD hardware emulation built-in</h3>
                     <p>Forget about 64DD ROM conversions - SummerCart64 can play disk dumps directly!</p>
                 </article>
 
@@ -89,10 +89,10 @@
                         <li>Fast USB interface with well documented protocol.</li>
                         <li>8&nbsp;kiB buffer for general use with microSD card or USB interface.</li>
                         <li>Native support for microSD card and USB interface in the <a
-                                href="https://libdragon.dev/">libdragon</a>.</li>
+                                href="https://libdragon.dev">libdragon</a>.</li>
+                        <li><a href="https://github.com/devwizard64/libcart">libcart</a> support.</li>
                         <li><a href="https://github.com/buu342/N64-UNFLoader">UNFLoader</a> support - both in the PC app
                             and USB library.</li>
-                        <li><a href="https://github.com/devwizard64/libcart">libcart</a> support.</li>
                         <li>IS-Viewer 64 debug interface support in the hardware.</li>
                     </ul>
                 </article>

web/index.html

@@ -32,9 +32,52 @@
 
     <div class="main-container">
         <main>
-            <h1>SummerCart64 - a fully open source Nintendo 64 flashcart</h1>
+            <h1>What is SummerCart64?</h1>
             <section>
                 <img class="sc64-logo" src="sc64.svg">
+                <p>SummerCart64 is a custom made cartridge (commonly referred as a flashcart) that allows you to develop
+                    and play games on the N64 console. It is the first N64 flashcart that is feature complete and
+                    completely open source.</p>
+                <p>With fast I/O, integrated support in <a href="https://libdragon.dev">libdragon</a> / <a
+                        href="https://github.com/devwizard64/libcart">libcart</a> / <a
+                        href="https://github.com/buu342/N64-UNFLoader">UNFLoader</a>, and well documented API, testing
+                    your homebrew on real hardware was never this easy before!</p>
+                <p>SummerCart64 employs features not available in other N64 flashcarts, like <strong>64DD</strong>
+                    hardware emulation, automatic save backup <strong>during gameplay</strong>, making it the best
+                    choice for both players and game developers. Please check <a href="/features.html">full feature
+                        list</a> for more details!</p>
+            </section>
+
+            <div class="separator"></div>
+
+            <h1>Where to buy</h1>
+            <section>
+                <p>There are several options available, listed from the easiest to hardest option:</p>
+                <ul>
+                    <li>Group buys available at <a href="https://discord.gg/WqFgNWf">N64brew Discord Server</a> - check
+                        threads in the <code><strong>#summer-cart-64</strong></code> channel.</li>
+                    <li><a
+                            href="https://www.pcbway.com/project/shareproject/SC64_an_open_source_Nintendo_64_flashcart_14b9688a.html">PCBWay
+                            Shared Project</a> page - both assembled boards and bare PCBs are available.</li>
+                    <li>Manual PCB and components order - DIY friendly option.</li>
+                </ul>
+                <p>More options are coming in the near future.</p>
+            </section>
+
+            <div class="separator"></div>
+
+            <h1>Support the project</h1>
+            <section>
+                <p>Like the project? Consider supporting it on the <a
+                        href="https://github.com/sponsors/Polprzewodnikowy">GitHub Sponsors</a>, <a
+                        href="https://ko-fi.com/polprzewodnikowy">Ko-fi</a>, or click the buttons below. Not necessary
+                    but greatly appreciated.</p>
+                <div class="sponsor-buttons">
+                    <iframe src="https://github.com/sponsors/Polprzewodnikowy/button" title="Sponsor Polprzewodnikowy"
+                        height="32" width="114" style="border: 0; border-radius: 6px;"></iframe>
+                    <a href='https://ko-fi.com/R5R13I07C' target='_blank'><img height='32'
+                            src='https://storage.ko-fi.com/cdn/kofi2.png?v=3' alt='Buy Me a Coffee at ko-fi.com' /></a>
+                </div>
             </section>
         </main>
     </div>

web/styles.css

@@ -17,6 +17,11 @@
 
     --main-separator-height: 2px;
     --main-separator-margin: 32px;
+    --main-paragraph-margin: 16px;
+
+    --sc64-logo-width: 172px;
+
+    --sponsor-buttons-height: 32px;
 
     --footer-padding: 16px 32px 16px 32px;
     --footer-font-size: 14px;
@@ -54,10 +59,6 @@ a:hover {
     color: var(--text-color);
 }
 
-.sc64-logo {
-    max-width: 320px;
-}
-
 .menu-container {
     position: fixed;
     top: 0;
@@ -151,7 +152,7 @@ a:hover {
 
     .menu-bar>menu>li {
         height: var(--menu-item-height);
-        padding: 0 var(--content-margin);
+        padding: 0;
         border-bottom: 1px solid var(--menu-mobile-active-color);
     }
 
@@ -166,8 +167,8 @@ a:hover {
     .menu-bar>menu>li>a {
         display: flex;
         align-items: center;
-        width: 100%;
         height: 100%;
+        padding: 0 var(--content-margin);
     }
 
     .menu-bar>menu.mobile-hidden {
@@ -193,7 +194,31 @@ main {
 }
 
 main>h1 {
-    margin-top: 0;
+    margin: 0;
+}
+
+main p {
+    margin: var(--main-paragraph-margin) 0;
+}
+
+main section>img.sc64-logo {
+    float: left;
+    width: var(--sc64-logo-width);
+    padding: var(--main-paragraph-margin);
+    padding-left: 0;
+}
+
+main section>div.sponsor-buttons {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    margin: var(--main-paragraph-margin) 0;
+}
+
+div.sponsor-buttons iframe,
+div.sponsor-buttons a {
+    height: var(--sponsor-buttons-height);
+    padding: var(--main-paragraph-margin) var(--main-paragraph-margin) 0 0;
 }
 
 main .separator {