infinimotion/frontend
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add logo and update home component layout

Browse Source 
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'.
This commit is contained in:
Piet Ostendorp
2025-10-20 15:42:58 +02:00
parent afb3ec4a31
commit 81761215ed
5 changed files with 26 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
angular.json
View File

@@ -34,6 +34,11 @@
{ {
"glob": "**/*", "glob": "**/*",
"input": "public" "input": "public"
},
{
"glob": "**/*",
"input": "src/assets",
"output": "assets"
} }
], ],
"styles": [ "styles": [

10
src/app/home-component/home-component.css
View File

@@ -4,4 +4,12 @@
} }
.animate-fadeUp { animation: fadeUp 1s ease forwards; } .animate-fadeUp { animation: fadeUp 1s ease forwards; }
.animate-fadeUp-delay { animation: fadeUp 1s 0.2s ease forwards; opacity: 0; } .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; }

15
src/app/home-component/home-component.html
View File

@@ -3,10 +3,17 @@
<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="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="content">
<h1 class="text-6xl font-bold animate-fadeUp">InfiniMotion</h1> <div class="flex items-center justify-center">
<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"> <div>
Absolut war gestern, Bewegung ist heute! <img src="assets/logo.png" class="w-48 h-48 animate-fade-logo">
</h2> </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">
Absolut war gestern, Bewegung ist heute!
</h2>
</div>
</div>
</div> </div>
<div class="absolute bottom-5 left-5 text-gray-400 z-10"> <div class="absolute bottom-5 left-5 text-gray-400 z-10">

BIN
src/assets/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 229 KiB

2
src/index.html
View File

@@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Infinifront</title> <title>InfiniMotion</title>
<base href="/"> <base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="icon" type="image/x-icon" href="favicon.ico">