From 8e75cfc1ef7c93111e1fb720f0ae4d15e6d6e773 Mon Sep 17 00:00:00 2001
From: Younghyun Ji <younghyun1@gmail.com>
Date: Mon, 28 Oct 2024 18:25:05 +0900
Subject: [PATCH] [feature] footer

---
 src/components/home-blurb/home-blurb.css | 51 +++++++++++++++++++++++-
 src/components/home-blurb/home-blurb.tsx | 15 +++++++
 src/pages/home/home.css                  |  4 ++
 src/pages/home/home.tsx                  |  4 ++
 4 files changed, 72 insertions(+), 2 deletions(-)

diff --git a/src/components/home-blurb/home-blurb.css b/src/components/home-blurb/home-blurb.css
index e5077d4..7de3ca8 100644
--- a/src/components/home-blurb/home-blurb.css
+++ b/src/components/home-blurb/home-blurb.css
@@ -1,6 +1,53 @@
 .blurb {
-    display: flex;
+    display: grid;
+    justify-items: center;
     align-items: center;
-    justify-content: center;
+    grid-template-columns: 1fr 1fr;
+    width: 100%;
     height: 100%;
 }
+
+.blurbTextBox {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.blurbTextBox h1 {
+    color: var(--shade-color);
+    font-size: 48px;
+    font-weight: 600;
+    text-align: center;
+    margin: 0;
+}
+
+.blurbTextBox p {
+    font-size: 20px;
+    font-weight: 600;
+    text-align: center;
+}
+
+.startNow {
+    color: var(--bg-color);
+    font-size: 18px;
+    font-weight: 600;
+    background-color: var(--shade-color);
+    box-shadow: 2px 2px 2px var(--black-shadow-color);
+    border-style: solid;
+    border-color: var(--shade-color);
+    border-radius: 100px;
+    border-width: 1px;
+    padding: 10px 20px; /* Added padding to create nice margins around the text */
+    transition:
+        background-color 0.166666s ease,
+        transform 0.166666s ease;
+}
+
+.startNow:active {
+    transform: scale(0.9) scale(1);
+    transition: transform 0.166666s ease;
+}
+
+.startNow:hover {
+    background-color: var(--accent-color);
+}
diff --git a/src/components/home-blurb/home-blurb.tsx b/src/components/home-blurb/home-blurb.tsx
index 4e42590..5ca2e82 100644
--- a/src/components/home-blurb/home-blurb.tsx
+++ b/src/components/home-blurb/home-blurb.tsx
@@ -1,10 +1,25 @@
 import React from "react";
 import "./home-blurb.css"; // Import the CSS file
+import FormButton from "../formbutton/formbutton";
 
 const Blurb: React.FC = () => {
   return (
     <div className="blurb">
       <img src="src/assets/wasona.svg" alt="Wasona bird!" />
+      <div className="blurbTextBox">
+        <h1>
+          Wasona
+          <br />
+          welcomes you!</h1>
+        <p>
+          Learn Toki Pona
+          <br />
+          with fun exercises!
+        </p>
+        <FormButton className="startNow">
+          <span className="startNowText">get started</span>
+        </FormButton>
+      </div>
     </div>
   );
 };
diff --git a/src/pages/home/home.css b/src/pages/home/home.css
index 202aa77..782d64d 100644
--- a/src/pages/home/home.css
+++ b/src/pages/home/home.css
@@ -7,3 +7,7 @@
 .Blurb {
     display: grid;
 }
+
+p {
+    text-align: center;
+}
diff --git a/src/pages/home/home.tsx b/src/pages/home/home.tsx
index cd3c73f..40694bb 100644
--- a/src/pages/home/home.tsx
+++ b/src/pages/home/home.tsx
@@ -10,6 +10,10 @@ const Home: React.FC = () => {
     <div className="HomeScreen">
       <Navbar />
       <Blurb />
+      <p>
+        This site is free and open source (AGPL). The course is Creative Commons
+        (CC-BY-SA). Help us by contributing on Github!
+      </p>
       <div></div>
     </div>
   );