Add logo and update home component layout

Added logo.png to assets and updated angular.json to include assets folder. Modified home-component HTML and CSS to display the logo with a fade-in animation and improved layout. Updated index.html title to 'InfiniMotion'.
2025-10-20 15:42:58 +02:00
parent afb3ec4a31
commit 81761215ed
5 changed files with 26 additions and 6 deletions
--- a/angular.json
+++ b/angular.json
@@ -34,6 +34,11 @@
              {
                "glob": "**/*",
                "input": "public"
+              },
+              {
+                "glob": "**/*",
+                "input": "src/assets",
+                "output": "assets"
              }
            ],
            "styles": [
--- a/src/app/home-component/home-component.css
+++ b/src/app/home-component/home-component.css
@@ -5,3 +5,11 @@

 .animate-fadeUp { animation: fadeUp 1s ease forwards; }
 .animate-fadeUp-delay { animation: fadeUp 1s 0.2s ease forwards; opacity: 0; }
+
+
+@keyframes fade {
+  0% { opacity: 0;}
+  100% { opacity: 1;}
+}
+
+.animate-fade-logo { animation: fade 1.5s 0.5s ease forwards; opacity: 0; }
--- a/src/app/home-component/home-component.html
+++ b/src/app/home-component/home-component.html
@@ -3,11 +3,18 @@
  <div class="absolute -bottom-140 -right-120 w-[800px] h-[800px] bg-pink-600/40 rounded-full filter blur-[250px] pointer-events-none animate-fadeUp-delay"></div>

  <div class="content">
+    <div class="flex items-center justify-center">
+      <div>
+        <img src="assets/logo.png" class="w-48 h-48 animate-fade-logo">
+      </div>
+      <div class="text-left flex flex-col justify-center">
        <h1 class="text-6xl font-bold animate-fadeUp">InfiniMotion</h1>
-    <h2 class="text-4xl font-bold animate-fadeUp-delay bg-gradient-to-r from-indigo-500 to-pink-600 bg-clip-text text-transparent pb-10">
+        <h2 class="text-4xl font-bold animate-fadeUp-delay bg-gradient-to-r from-indigo-500 to-pink-600 bg-clip-text text-transparent">
          Absolut war gestern, Bewegung ist heute!
        </h2>
      </div>
+    </div>
+  </div>

  <div class="absolute bottom-5 left-5 text-gray-400 z-10">
    Informationsinfrastrukturen Unit 2 - FHDW Hannover
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/index.html
+++ b/src/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
  <meta charset="utf-8">
-  <title>Infinifront</title>
+  <title>InfiniMotion</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">