From 0ebe55ee0e6fb60becf93935e86c319fa60b7192 Mon Sep 17 00:00:00 2001
From: Naomi Carrigan <commits@nhcarrigan.com>
Date: Fri, 4 Jul 2025 15:03:36 -0700
Subject: [PATCH] feat: create home page

---
 client/src/app/home/home.css  | 94 +++++++++++++++++++++++++++++++++
 client/src/app/home/home.html | 20 ++++---
 client/src/index.html         |  6 +++
 client/src/styles.css         | 99 ++++++++++++++++++++++++++++++++++-
 4 files changed, 212 insertions(+), 7 deletions(-)

diff --git a/client/src/app/home/home.css b/client/src/app/home/home.css
index e69de29..f54fb81 100644
--- a/client/src/app/home/home.css
+++ b/client/src/app/home/home.css
@@ -0,0 +1,94 @@
+ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+#one {
+    transform: translateY(-200vh);
+    animation: slide-down 2s forwards;
+    font-size: 1.3rem;
+}
+
+#two {
+    transform: translateY(200vh);
+    animation: slide-up 2s forwards 2s;
+}
+
+#three {
+    transform: translateX(-200vw);
+    animation: slide-left 2s forwards 4s;
+}
+
+#four {
+    transform: translateX(200vw);
+    animation: slide-right 2s forwards 6s;
+}
+
+#five {
+    transform: translateX(-200vw);
+    animation: slide-left 2s forwards 8s;
+}
+
+#six {
+    transform: translateX(200vw);
+    animation: slide-right 2s forwards 10s;
+}
+
+#fade {
+    opacity: 0;
+    animation: fade-in 2s forwards 12s;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.btn {
+    display: inline-block;
+    padding: 10px 20px;
+    background-color: var(--foreground);
+    color: var(--background);
+    text-decoration: none;
+    border-radius: 50px;
+    border: 2px solid white;
+}
+
+.btn:hover {
+    background-color: var(--background);
+    color: var(--foreground);
+    transition: background-color 0.3s, color 0.3s;
+}
+
+@keyframes slide-left {
+    100% { transform: translateX(0%); }
+}
+
+@keyframes slide-right {
+    100% { transform: translateX(0%); }
+}
+
+@keyframes slide-up {
+    100% { transform: translateY(0%); }
+}
+
+@keyframes slide-down {
+    100% { transform: translateY(0%); }
+}
+
+@keyframes fade-in {
+    100% { opacity: 1; }
+}
+
+@keyframes background-color {
+    0% { background-color: var(--foreground); }
+    100% { background-color: var(--background); }
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+  * {
+    animation: none !important;
+    transform: none !important;
+  }
+}
diff --git a/client/src/app/home/home.html b/client/src/app/home/home.html
index 2652c7b..a03f754 100644
--- a/client/src/app/home/home.html
+++ b/client/src/app/home/home.html
@@ -1,8 +1,16 @@
 <h1>Hi there, I'm Hikari~!</h1>
 <img src="https://cdn.nhcarrigan.com/new-avatars/hikari-full.png" alt="Hikari" height="250" />
-<p>
-  I am here to help you with all of NHCarrigan's products, including things like managing your subscriptions and configuring applications!
-</p>
-<p>
-  Naomi is still hard at work bringing me to life! We would love to hear your thoughts in our <a href="https://chat.nhcarrigan.com" target="_blank">community</a>~!
-</p>
+<p id="one">How may I help you today?</p>
+<p id="two">I can assist you with:</p>
+<ul>
+  <li id="three">Finding a product to suit your needs</li>
+  <li id="four">Manage your account, subscriptions, and licenses</li>
+  <li id="five">Modifying settings for individual products</li>
+  <li id="six">Answering your specific questions with a chat assistant</li>
+</ul>
+<div id="fade">
+  <a href="/products" class="btn">Browse Products</a>
+  <a href="/account" class="btn">Manage Account</a>
+  <a href="/settings" class="btn">Modify Settings</a>
+  <a href="/chat" class="btn">Chat with Hikari</a>
+</div>
diff --git a/client/src/index.html b/client/src/index.html
index 7955438..a1178e9 100644
--- a/client/src/index.html
+++ b/client/src/index.html
@@ -12,4 +12,10 @@
   <app-root></app-root>
 </body>
 <script src="https://cdn.nhcarrigan.com/headers/index.js"></script>
+<script>
+  const styleElement = document.getElementById("nhcarrigan-global-styles");
+  if (styleElement) {
+    styleElement.remove();
+  }
+</script>
 </html>
diff --git a/client/src/styles.css b/client/src/styles.css
index 90d4ee0..a6fbbbd 100644
--- a/client/src/styles.css
+++ b/client/src/styles.css
@@ -1 +1,98 @@
-/* You can add global styles to this file, and also import other style files */
+@font-face {
+  font-family: 'OpenDyslexic';
+  src: url('https://cdn.nhcarrigan.com/fonts/OpenDyslexicMono-Regular.otf') format('opentype');
+}
+
+:root {
+  --foreground: #2a0a18;
+  --background: #ffb6c1bb;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-family: 'OpenDyslexic', monospace;
+  cursor: url('https://cdn.nhcarrigan.com/cursors/cursor.cur'), auto;
+  min-height: 100vh;
+  min-width: 100vw;
+}
+body::before {
+  background: url(https://cdn.nhcarrigan.com/background.png);
+  background-size: cover;
+  background-position: center;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  content: "";
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  opacity: 1;
+  pointer-events: none;
+}
+main {
+  color: var(--foreground);
+  background-color: var(--background);
+  text-align: center;
+  border-radius: 10px;
+  width: 100vw;
+  margin-bottom: 85px;
+  min-height: calc(100vh - 85px);
+}
+footer {
+  width: 100%;
+  color: var(--foreground);
+  background-color: var(--background);
+  position: fixed;
+  bottom: 0;
+  height: 75px;
+  padding: 0 10px;
+}
+#footer-inner-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 75px;
+}
+#footer-badge-container {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  align-items: center;
+  justify-content: space-around;
+}
+#audio-theme-button, #theme-select-button {
+  background: none;
+  border: none;
+  cursor: url('https://cdn.nhcarrigan.com/cursors/pointer.cur'), pointer;
+  color: var(--foreground);
+}
+a {
+  color: unset;
+  cursor: url('https://cdn.nhcarrigan.com/cursors/pointer.cur'), pointer;
+}
+#tree-nation-offset-website {
+  display: flex;
+  align-items: center;
+}
+.is-dark {
+  --foreground: #ffb6c1;
+  --background: #2a0a18bb;
+}
+@media screen and (max-width: 625px) {
+  #tree-nation-offset-website {
+    display: none;
+  }
+  footer, #footer-inner-container {
+    height: 50px;
+    justify-content: space-around;
+  }
+  main {
+    margin-bottom: 60px;
+  }
+}