hardcode lootie animation for now and polish furst light theme

Signed-off-by: Andre Nogueira <andre.nogueira@mollie.com>

Author: aanogueira

.keycloakify/realm-kc-26.json

@@ -5,18 +5,18 @@
 </p>
 <img src="./public/Tailcloakify-login-page.png" alt="keycloak theme config" width="1905">
 
-Tailcloakify is a [Keycloak](https://github.com/keycloak/keycloak) Theme that is based on 
-[Keycloakify](https://github.com/keycloakify/keycloakify), layered with [TailwindCSS](https://github.com/tailwindlabs/tailwindcss) and inspired by [Keywind](https://github.com/lukin/keywind) 
+Tailcloakify is a [Keycloak](https://github.com/keycloak/keycloak) Theme that is based on
+[Keycloakify](https://github.com/keycloakify/keycloakify), layered with [TailwindCSS](https://github.com/tailwindlabs/tailwindcss) and inspired by [Keywind](https://github.com/lukin/keywind)
 UI design approach.
 
 # How to Use
 
 1. Place the provided JAR file in the <keycloak-home>/providers/ directory or use the example Dockerfile from this repository to add the provided JAR file into your Docker Image.
 2. Set environment variables or localization messages to customize the theme with the out of the box configuration functionalities.
 3. Restart your Keycloak server or deploy your builded docker image to your server.
-4. Log in to the Keycloak Admin Console.  
-Go to Realm Settings > Themes.  
-Select the Tailcloakify login theme from the dropdown.  
+4. Log in to the Keycloak Admin Console.
+Go to Realm Settings > Themes.
+Select the Tailcloakify login theme from the dropdown.
 Save your settings.
 
 # Supported Pages
@@ -69,7 +69,7 @@ If you want to customize this theme, by extending it with your own files to be l
 2. [Create your own Login Theme](https://www.keycloak.org/docs/latest/server_development/#creating-a-theme)
 3. Specify parent theme in [theme properties](https://www.keycloak.org/docs/latest/server_development/#theme-properties) and add additional files to be loaded in the header
 
-```
+```properties
 parent=tailcloakify
 scripts=first-script.js second-script.js
 styles=custom-styles.css
@@ -108,7 +108,7 @@ Or you can preview the pages using the storybook:
 
 ## Building the theme
 
-You need to have [Maven](https://maven.apache.org/) installed to build the theme (Maven >= 3.1.1, Java >= 7).  
+You need to have [Maven](https://maven.apache.org/) installed to build the theme (Maven >= 3.1.1, Java >= 7).
 The `mvn` command must be in the $PATH.
 
 - On macOS: `brew install maven`
@@ -119,7 +119,7 @@ The `mvn` command must be in the $PATH.
   npm run build-keycloak-theme
 ```
 
-Note that by default Keycloakify generates multiple `.jar` files for different versions of Keycloak.  
+Note that by default Keycloakify generates multiple `.jar` files for different versions of Keycloak.
 
 ## GitHub Actions
 

README.md

@@ -19,6 +19,7 @@
   "dependencies": {
     "autoprefixer": "^10.4.19",
     "keycloakify": "^11.8.30",
+    "lottie-react": "^2.4.1",
     "postcss": "^8.4.39",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -54,4 +55,4 @@
   "overrides": {
     "storybook": "$storybook"
   }
-}
+}

package-lock.json

@@ -8,6 +8,11 @@ import { useInitialize } from "keycloakify/login/Template.useInitialize";
 import type { I18n } from "./i18n";
 import type { KcContext } from "./KcContext";
 import useSetCookieConsent from "./useSetCookieConsent.tsx";
+// import logo from "./assets/logo.svg";
+import icon from "./assets/favicon.svg";
+
+import Lottie from "lottie-react";
+import animationData from "./assets/logo.json"; // path to your Lottie JSON file
 
 export default function Template(props: TemplateProps<KcContext, I18n>) {
     const {
@@ -39,7 +44,7 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
     // Load Favicon
     useEffect(() => {
         const url: string | undefined =
-            (advancedMsgStr("faviconUrl") !== "faviconUrl" ? advancedMsgStr("faviconUrl") : null) || kcContext.properties.TAILCLOAKIFY_FAVICON_URL;
+            (advancedMsgStr("faviconUrl") !== "faviconUrl" ? advancedMsgStr("faviconUrl") : null) || kcContext.properties.TAILCLOAKIFY_FAVICON_URL || icon
 
         if (url) {
             let link = document.querySelector("link[rel~='icon']") as HTMLLinkElement | null;
@@ -165,9 +170,19 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
                     <img
                         alt={"Logo"}
                         src={backgroundLogoUrl || kcContext.properties["TAILCLOAKIFY_BACKGROUND_LOGO_URL"]}
+                        // className={"size-36 mx-auto mb-4 opacity-20 max-w-none fixed top-0 left-0 right-0 bottom-0 min-h-full min-w-full object-cover"}
                         className={"fixed z-10 top-4 left-8"}
                     />
                 )}
+
+                {animationData && (
+                    < Lottie
+                        animationData={animationData}
+                        loop
+                        className="size-24 sm:size-36 opacity-80 mx-auto"
+                    />
+                )}
+
                 {(backgroundVideoUrl || kcContext.properties["TAILCLOAKIFY_BACKGROUND_VIDEO_URL"]) && (
                     <video
                         autoPlay={true}