Updated CSS and homepage

routes/homepage.py

@@ -1,9 +1,10 @@
-from flask import render_template, request, Blueprint
+from flask import render_template, Blueprint
 from routes.donation.donation import donation_page
 
-home_page = Blueprint('home', __name__, url_prefix='/')
+home_page = Blueprint("home", __name__, url_prefix="/")
 home_page.register_blueprint(donation_page)
 
-@home_page.route('/')
+
+@home_page.route("/")
 def home():
-    return render_template('home/home.jinja')
+    return render_template("home/home.jinja")

static/styles.css

@@ -2,10 +2,13 @@
   --text: #cdffca;
   --background: #094d21;
   --primary: #229b3c;
+  --primary_darker: #118919;
   --secondary: #cc2229;
   --accent: #505e86;
   --transparent: #01030cbf;
   --green: #5eff5e;
+  --green2:var(--background);
+  --green3: #094422;
   --red: #ff5e5e;
   --navbar-height: 50px;
 }
@@ -77,7 +80,7 @@ h6 {
 }
 
 .navbar .link_button:hover {
-    background-color: #43a047;
+    background-color: var(--primary_darker);
 }
 
 .half-width {
@@ -106,7 +109,7 @@ h6 {
   font-family: "Arial";
   font-size: 1.5rem;
   font-weight: 700;
-  color: var(--accent);
+  color: var(--text);
   margin-left: 1rem;
 }
 
@@ -115,7 +118,7 @@ h6 {
 }
 
 .navbar .links a:hover {
-  color: var(--primary);
+  color: var(--primary_darker);
 }
 
 .logo {
@@ -416,6 +419,10 @@ input:focus {
   background-color: var(--primary);
 }
 
+.link_button:hover {
+  background-color: var(--primary_darker);  
+}
+
 .accounts {
   display: flex;
   flex-direction: row;

templates/home/home.jinja

@@ -10,21 +10,21 @@
     <h1>Protecting Indonesia's Endangered Species Together</h1>
     <p>Komodo Hub is dedicated to safeguarding the incredible biodiversity of Indonesia. Join us in our mission to
         conserve and protect these precious creatures for future generations.</p>
+    <!-- Main buttons -->
     <div class="homepage-buttons">
         {{ button(url='/donation', button_text='Donate Now', extra_classes='homepage-btn') }}
         {{ button(url='#featured-species', button_text='Explore Species', extra_classes='homepage-btn') }}
         {{ button(url='/register', button_text='Join the Movement', extra_classes='homepage-btn') }}
     </div>
-    </div>
 </section>
 <!-- About section -->
 <section id="about" style="padding: 50px 20px; text-align: center;">
     <h2>What is Komodo Hub?</h2>
-    <p style="max-width: 800px; margin: 0 auto;">Komodo Hub is a digital platform designed to support conservation and
+    <p style="max-width: 800px; margin: 1rem auto;">Komodo Hub is a digital platform designed to support conservation and
         species protection efforts across Indonesia. We connect passionate individuals, educators, and organizations to
-        make a tangible difference.</p>
-    <a href="/about" style="display: inline-block; margin-top: 20px; color: #008CBA; text-decoration: none;">Read More
-        &rarr;</a>
+        make a tangible difference.
+    </p>
+    {{ button(url='/about', button_text='Read More', extra_classes='homepage-btn') }}
 </section>
 <!-- Featured Species -->
 <section id="featured-species" style="padding: 50px 20px; background-color: #047f02; text-align: center;">
@@ -52,13 +52,11 @@
     <h2>Schools & Communities</h2>
     <p style="max-width: 800px; margin: 0 auto;">Schools and communities play a vital role in conservation. Discover how
         your group can get involved through educational programs, fundraising, and awareness campaigns.</p>
-    <div style="margin-top: 30px;">
-        <a href="/schools-register"
-            style="background-color: #2196F3; color: white; padding: 15px 25px; text-decoration: none; border-radius: 5px; margin: 0 10px;">Register
-            Your School</a>
-        <a href="/communities-register"
-            style="background-color: #FF9800; color: white; padding: 15px 25px; text-decoration: none; border-radius: 5px; margin: 0 10px;">Join
-            as a Community</a>
+    </div>
+    <div class="homepage-buttons">
+        {{ button(url='/register-school', button_text='Register Your School', extra_classes='homepage-btn') }}
+        <!-- need to assign bg colour -->
+        {{ button(url='/register-community', button_text='Join as a Community', extra_classes='homepage-btn') }}
     </div>
 </section>
 {% endblock %}

templates/navbar.jinja

@@ -11,7 +11,7 @@
         <a href="/dashboard">Dashboard</a>
         <a href="/logout">Logout</a>
         {% else %}
-        {{ button(url='/login', button_text='Login', extra_classes='green') }}
+        {{ button(url='/login', button_text='Login/Register', extra_classes='') }}
         {% endif %}
     </div>
 </div>