Homepage markup and styles

assets/css/style.css

@@ -1,8 +1,9 @@
 body {
-    background: #fff;
+    background: #F4F1EB;
     color: #000;
     margin: 0;
     padding: 0;
+    font-size: 16px;
 }
 
 .header {
@@ -12,6 +13,7 @@ body {
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), /* Subtle shadow */
     0 6px 20px rgba(0, 0, 0, 0.1); /* Deeper shadow */
     border: 1px solid rgba(0, 0, 0, 0.05); /* Light border */
+    background: #fff;
 }
 
 .logo {
@@ -25,7 +27,7 @@ body {
     font-family: "Helvetica Neue", "Helvetica", serif;
     margin: 0;
     align-self: center;
-    font-size: 20px;
+    font-size: 1.75rem;
 }
 
 .login-container {
@@ -33,34 +35,111 @@ body {
     margin-right: 20px
 }
 
-.twitch-login {
-    font-size: 14px;
-    padding: 5px 10px;
-    background-color: #9147ff;
+.content {
+    display: flex;
+    margin: 0;
+    padding: 60px 0 40px;
+    flex-direction: column;
+}
+.difference {
+    margin: 0 auto 8px;
+    padding: 0;
+    font-size: 2.5rem;
+    font-family: "Helvetica Neue", Helvetica, serif;
+    color: #457B9D;
+    text-align: center;
+}
+
+.product-description {
+    margin: 0 auto;
+    text-align: center;
+    font-size: 1.25rem;
+    font-family: "Helvetica Neue", Helvetica, serif;
+    width: 50%;
+    line-height: 2rem;
+    color: #6C757D;
+}
+
+.cta-button {
+    display: block; /* Change to block for vertical alignment */
+    margin: 60px auto 0px;
+    padding: 10px 20px;
+    border-radius: 5px;
     color: white;
-    border: none;
+    text-decoration: none;
+    font-size: 1.5rem;
+    font-family: "Helvetica Neue", Helvetica, serif;
+    width: 15%;
+    text-align: center;
+    font-weight: bold;
+    background-color: #A3C1AD;
+}
+
+.how-it-works-button:hover {
+    text-decoration: underline;
+}
+.how-it-works-button {
+    display: block; /* Change to block for vertical alignment */
+    margin: 8px auto;
     border-radius: 5px;
-    cursor: pointer;
+    color: #457B9D;
+    text-decoration: none;
+    font-size: 1.15rem;
+    font-family: "Helvetica Neue", Helvetica, serif;
+    width: 15%;
+    text-align: center;
 }
 
-.banner {
-    width: 100%;
-    height:400px;
-    background-image: url("../images/banner.jpg");
-    background-repeat: no-repeat;
+.how-it-works-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    max-width: 1200px;
     margin: 0 auto;
-    background-position: center;
-    background-size: 100%;
+    flex-wrap: wrap;
+    border-top: 1px solid #ccc;
 }
 
-a.login-banner-link:link,
-a.login-banner-link:visited,
-a.login-banner-link:hover,
-a.login-banner-link:active {
+.become-a-supporter-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    max-width: 1200px;
+    margin: 60px auto;
+    flex-wrap: wrap;
+    border-top: 1px solid #ccc;
+}
+
+.headline {
+    width: 100%;
+    text-align: center;
+    font-size: 2em;
+    color: #457b9d; /* Muted blue color */
+    margin-bottom: 20px;
     font-family: "Helvetica Neue", Helvetica, serif;
-    color: #1da1f2;
-    text-decoration: none;
-    display: block;
-    align-self: center;
-    margin-right: 20px;
+}
+
+.column {
+    justify-content: space-between;
+    flex: 1;
+    background-color: #ffffff;
+    padding: 20px;
+    margin: 10px;
+    border-radius: 8px;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+    font-family: "Helvetica Neue", Helvetica, serif;
+    flex-basis: 28% ;
+}
+
+.column h3 {
+    font-size: 1.5em;
+    color: #91A4B1;
+    margin-bottom: 10px;
+    text-align: center;
+}
+
+.column p {
+    font-size: 1.15em;
+    color: #495057;
+    line-height: 1.6;
 }

templates/index.html

@@ -10,14 +10,55 @@
         {{ .title }}
     </h1>
 
-    {{if eq .isLoggedIn true}}
+    {{if eq .isLoggedIn false}}
         <a href="/login" class="login-banner-link">Login</a>
     {{ else }}
-        already logged in
+        <a href="auth/logout/twitch" class="login-banner-link">Logout</a>
     {{ end }}
 
 </div>
+<div class="content">
+    <h2 class="difference">Set Goals. Support Dreams. Build Community.</h2>
+    <p class="product-description">Our platform connects aspiring tech professionals with a supportive community eager to help them succeed.
+        Create a wishlist of certifications or courses you need, and let others contribute to your journey.
+        Together, we make tech education more accessible, one goal at a time.</p>
+
+
+    <a href="/login" class="cta-button">Set Your Goals</a>
+    <a href="#" class="how-it-works-button">How it works</a>
+</div>
+
+<div class="how-it-works-container">
+    <h2 class="headline">Find Support In Your Growth</h2>
+    <div class="column">
+        <h3>Create Your Wishlist</h3>
+        <p>Sign up and add the certifications or courses you’re aiming to complete. Let people know what you're working toward and why each goal is important for your tech journey.</p>
+    </div>
+    <div class="column">
+        <h3>Get Community Support</h3>
+        <p>Share your wishlist with your favorite communities. Your supporters can contribute to your goals, helping you fund the education and certifications you need to grow.</p>
+    </div>
+    <div class="column">
+        <h3>Participate in Hackathons</h3>
+        <p>Join community hackathons to test your skills, learn from others, and showcase your talent. Collaborate, innovate, and grow in a supportive environment.</p>
+    </div>
+</div>
+
+<div class="become-a-supporter-container">
+    <h2 class="headline">Become a supporter</h2>
+    <div class="column">
+        <h3>Sponsor a Hackathon</h3>
+        <p>Support community-driven hackathons by covering entry fees or providing prizes. Help aspiring tech professionals showcase their skills and network with others.</p>
+    </div>
+    <div class="column">
+        <h3>Donate Directly to a Goal</h3>
+        <p>Choose a specific certification or course goal from a tech learner’s wishlist and fund it. Every contribution brings them closer to success.</p>
+    </div>
+    <div class="column">
+        <h3>Support Community Leaders</h3>
+        <p>Boost a community content by supporting leaders and help them fund tech education for members of their community. Your support empowers streamers to give back directly.</p>
+    </div>
+</div>
 
-<h2 class="goals">Reach Your Goals</h2>
 </body>
 </html>