From 408f595da9498838646c0f46dd6923d96d1dae8a Mon Sep 17 00:00:00 2001
From: nthnn <nathanneisip@gmail.com>
Date: Wed, 20 Sep 2023 17:00:08 +0800
Subject: [PATCH] More fixes and 'Why Brillo-8?' section on home page.

---
 docs/src/scripts/pages/home.tsx | 98 ++++++++++++++++++++++++++++-----
 docs/src/styles/index.css       | 10 +++-
 2 files changed, 92 insertions(+), 16 deletions(-)

diff --git a/docs/src/scripts/pages/home.tsx b/docs/src/scripts/pages/home.tsx
index 682feae..4a803bc 100644
--- a/docs/src/scripts/pages/home.tsx
+++ b/docs/src/scripts/pages/home.tsx
@@ -27,16 +27,25 @@ export default class Home extends React.Component {
                     <div className="row">
                         <div className="col-lg-6">
                             <div className="desktop-only">
-                                <br/><br/><br/><br/>
+                                <br/><br/>
                             </div>
 
-                            <div className="container">
-                                <h1>Brillo-8: Programmable Pocket Computer</h1>
-                                <p>A programmable pocket computer packed neatly on a small 80cm x 50mm circuit board. Small but powerful virtual machine, residing within the trusted ATMega328P microcontroller, offers a compelling platform for several compelling reasons.</p>
-                                <button className="btn btn-outline-info rounded-0">
-                                    Learn More
-                                    <ArrowRightIcon className="icon-24 pl-2" />
-                                </button>
+                            <div className="row">
+                                <div className="col-md-2"></div>
+
+                                <div className="col-md-9">
+                                    <div className="container">
+                                        <h1>Brillo-8: Programmable Pocket Computer</h1>
+                                        <p>A programmable pocket computer packed neatly on a small 80cm x 50mm circuit board. Small but powerful virtual machine, residing within the trusted ATMega328P microcontroller, offers a compelling platform for several compelling reasons.</p>
+
+                                        <a className="btn btn-outline-info rounded-0 learn-more" href="#main-section">
+                                            Learn More
+                                            <ArrowRightIcon className="icon-24 pl-2" />
+                                        </a>
+                                    </div>
+                                </div>
+
+                                <div className="col-md-1"></div>
                             </div>
 
                             <br className="desktop-only" /><br/>
@@ -62,13 +71,23 @@ export default class Home extends React.Component {
 
                 <NavigationBar currentPage="home" onPageout={this.onPageout} />
 
-                <br/><br/><br/><br/><br/>
+                <br id="main-section" /><br/><br/><br/><br/>
+                <div className="desktop-only"><br/></div>
+
                 <div className="container">
-                    <center>
-                        <h1>What is Brillo-8?</h1>
-                        <p>Brillo-8 is a compact and versatile pocket programmable computer powered by an ATMega328P microcontroller. This innovative device allows you to create and execute custom instructions using a simple hardware interface. With Brillo-8, you can engage in a wide range of programming and learning activities on a small but powerful platform.</p>
-                        <img src={Glass_Prism0097} className="glass-03" />
-                    </center>
+                    <div className="row">
+                        <div className="col-sm-2"></div>
+
+                        <div className="col-sm-8">
+                            <center>
+                                <h1>What is Brillo-8?</h1>
+                                <p>Brillo-8 is a compact and versatile pocket programmable computer powered by an ATMega328P microcontroller. This innovative device allows you to create and execute custom instructions using a simple hardware interface. With Brillo-8, you can engage in a wide range of programming and learning activities on a small but powerful platform.</p>
+                                <img src={Glass_Prism0097} className="glass-03" />
+                            </center>
+                        </div>
+
+                        <div className="col-sm-2"></div>
+                    </div>
                 </div>
                 <br/><br/><br/><br/><br/><br/>
 
@@ -125,6 +144,57 @@ export default class Home extends React.Component {
                     <br/><br/><br/><br/>
                 </div>
                 <br/><br/>
+
+                <div className="bg-light text-dark">
+                    <div className="container">
+                        <br className="desktop-only" />
+                        <br/><br/>
+
+                        <h1>Why Brillo-8?</h1>
+                        <br/>
+
+                        <div className="row">
+                            <div className="col-lg-1" align="center">
+                                <h1>1</h1>
+                            </div>
+
+                            <div className="col-lg-11">
+                                <div className="container">
+                                    <p>Brillo-8 stands as an excellent educational resource, making it easy for individuals of all skill levels to grasp the inner workings of microcontrollers, EEPROMs (memory chips), and virtual machines. With its user-friendly interface, featuring DIP switches and straightforward buttons, Brillo-8 is accessible even for beginners. It provides an opportunity to explore fundamental programming concepts, memory management, and hardware integration in a compact and hands-on manner.</p>
+                                </div>
+                            </div>
+                        </div>
+                        <br/>
+
+                        <div className="row">
+                            <div className="col-lg-1" align="center">
+                                <h1>2</h1>
+                            </div>
+
+                            <div className="col-lg-11">
+                                <div className="container">
+                                    <p>For those eager to get hands-on experience with electronics, Brillo-8 offers a practical playground. Assembling the hardware components, including the PCB (circuit board) and various switches, provides a deeper understanding of electronic design and soldering techniques. This tangible aspect of Brillo-8 enriches the learning process and hones valuable skills for electronics enthusiasts.</p>
+                                </div>
+                            </div>
+                        </div>
+                        <br/>
+
+                        <div className="row">
+                            <div className="col-lg-1" align="center">
+                                <h1>3</h1>
+                            </div>
+
+                            <div className="col-lg-11">
+                                <div className="container">
+                                    <p>Brillo-8 is an excellent platform for rapid prototyping and experimentation. It serves as a perfect testing ground for developing and testing new algorithms, code snippets, or entire programs. By using Brillo-8, you can quickly try out different ideas, observe their effects, and refine your solutions before implementing them in more extensive projects.</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <br className="desktop-only" />
+                    <br/><br/>
+                </div>
             </>
         );
     }
diff --git a/docs/src/styles/index.css b/docs/src/styles/index.css
index 6bb4070..fe6949d 100644
--- a/docs/src/styles/index.css
+++ b/docs/src/styles/index.css
@@ -54,8 +54,9 @@
 }
 
 .brillo-8 {
-    margin-left: -8%;
+    margin-left: -2%;
     margin-top: 6%;
+    transform: rotate(-7deg);
 }
 
 .glass-01 {
@@ -66,7 +67,7 @@
 
 .glass-02 {
     z-index: -1;
-    left: 40%;
+    left: 46%;
     bottom: 6%;
     width: 18%;
 }
@@ -84,9 +85,14 @@
         width: 100%;
         margin-top: 0px;
         margin-left: 0px;
+        transform: none;
     }
 
     .glass-03 {
         width: 40%;
     }
+
+    .learn-more {
+        width: 100%;
+    }
 }
\ No newline at end of file