redesign progress

src/components/hero.astro

@@ -0,0 +1,20 @@
+---
+
+---
+
+<div>
+    Firq FGO Site
+</div>
+
+
+<style>
+    div {
+        display: flex;
+        width: 100%;
+        height: 10em;
+        background-color: grey;
+        text-align: center;
+        align-items: center;
+        justify-content: center;
+    }
+</style>

src/components/navbar.astro

@@ -0,0 +1,83 @@
+---
+export interface Props {
+	currentPage: string;
+}
+
+const {currentPage } = Astro.props;
+---
+
+<header>
+    <a href="">
+        <img src="link_192.png" alt="">
+    </a>
+    <ul role="navigation">
+        <li><a href="">
+            <i class="iconoir-home-alt"></i>
+            Home
+        </a></li>
+        <li><a href="">
+            <i class="iconoir-book-stack"></i>
+            Servants
+        </a></li>
+        <li><a href="">
+            <i class="iconoir-database-script"></i>
+            Blog
+        </a></li>
+    </ul>
+</header>
+
+<style>
+    header {
+        background-color: #1e1e1e;
+        display: flex;
+        height: 64px;
+        width: 100%;
+        align-items: center;
+        line-height: 1.5em;
+    }
+    header > a {
+        padding-left: 16px;
+        display: block;
+        height: 48px;
+        width: 48px;
+    }
+    a > img {
+        height: 100%;
+        width: 100%;
+        object-fit: contain;
+    }
+    ul {
+        align-items: center;
+        justify-content: space-around;
+        display: flex;
+        flex-wrap: wrap;
+        flex-direction: row;
+        height: 64px;
+        width: 100%;
+        list-style-type: none;
+        row-gap: 0.5em;
+        column-gap: 0.5ch;
+        margin-block-start: 0px;
+        margin-block-end: 0px;
+        line-height: 1.5em;
+    }
+    li {
+        align-items: center;
+        justify-content: center;
+        text-align: left;
+        display: flex;
+        width: 200px;
+    }
+    li > a {
+        color: white;
+        text-decoration: none;
+        justify-content: center;
+        align-items: center;
+        font-size: 1.4em;
+        height: 100%;
+        font-weight: bold;
+    }
+    li > a:hover{
+        color: #551a8b;
+    }
+</style>