From e5f29e47254c37508bb2f5ae0f7ec47e919effe7 Mon Sep 17 00:00:00 2001
From: Masu-Baumgartner <68913099+Masu-Baumgartner@users.noreply.github.com>
Date: Tue, 29 Oct 2024 09:22:18 +0100
Subject: [PATCH] Added fancy start page greeting

---
 Moonlight.Client/Styles/additions/animations.css |  9 +++++++++
 Moonlight.Client/Styles/style.css                |  1 +
 Moonlight.Client/Styles/tailwind.config.js       |  3 +++
 Moonlight.Client/UI/Views/Index.razor            | 11 +++++++++--
 4 files changed, 22 insertions(+), 2 deletions(-)
 create mode 100644 Moonlight.Client/Styles/additions/animations.css

diff --git a/Moonlight.Client/Styles/additions/animations.css b/Moonlight.Client/Styles/additions/animations.css
new file mode 100644
index 00000000..cabfea90
--- /dev/null
+++ b/Moonlight.Client/Styles/additions/animations.css
@@ -0,0 +1,9 @@
+@keyframes shimmer {
+    0% {
+        background-position: 0 0
+    }
+
+    to {
+        background-position: -200% 0
+    }
+}
\ No newline at end of file
diff --git a/Moonlight.Client/Styles/style.css b/Moonlight.Client/Styles/style.css
index a82a8fff..71330e96 100644
--- a/Moonlight.Client/Styles/style.css
+++ b/Moonlight.Client/Styles/style.css
@@ -1,6 +1,7 @@
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 
+@import "additions/animations.css";
 @import "additions/fonts.css";
 @import "additions/buttons.css";
 @import "additions/cards.css";
diff --git a/Moonlight.Client/Styles/tailwind.config.js b/Moonlight.Client/Styles/tailwind.config.js
index 3eee47b5..1ac81f62 100644
--- a/Moonlight.Client/Styles/tailwind.config.js
+++ b/Moonlight.Client/Styles/tailwind.config.js
@@ -115,6 +115,9 @@ module.exports = {
                     900: '#111721',
                     950: '#0e121c',
                 }
+            },
+            animation: {
+                'shimmer': 'shimmer 2s linear infinite',
             }
         },
     },
diff --git a/Moonlight.Client/UI/Views/Index.razor b/Moonlight.Client/UI/Views/Index.razor
index 73d0d8b8..c297c04a 100644
--- a/Moonlight.Client/UI/Views/Index.razor
+++ b/Moonlight.Client/UI/Views/Index.razor
@@ -1,5 +1,12 @@
 @page "/"
 
-<h1>Hello, world!</h1>
+@using Moonlight.Client.Services
 
-Welcome to your new app.
\ No newline at end of file
+@inject IdentityService IdentityService
+
+<div class="font-medium leading-[1.1] tracking-tight">
+    <div class="animate-shimmer bg-gradient-to-r from-violet-400 via-sky-400 to-purple-400 bg-clip-text font-semibold text-transparent text-3xl" style="animation-duration: 5s; background-size: 200% 100%">
+        Welcome, @(IdentityService.Username)
+    </div>
+    <div class="text-gray-200 text-2xl">What do you want to do today?</div>
+</div>
\ No newline at end of file