add: about page, change: header padding to padding x

src/app/app.routes.ts

@@ -5,6 +5,7 @@ import { GeneratorPassword } from './sites/generator/password/generator-password
 import { GeneratorQrcode } from './sites/generator/qrcode/generator-qrcode';
 import { Comingsoon } from './sites/navbar/comingsoon/comingsoon';
 import { Changelog } from './sites/navbar/changelog/changelog';
+import { About } from './sites/navbar/about/about';
 
 export const routes: Routes = [
   {
@@ -24,6 +25,10 @@ export const routes: Routes = [
     path: 'changelog',
     component: Changelog,
   },
+  {
+    path: 'about',
+    component: About,
+  },
   // GENERATORS
   {
     path: 'generator/password',

src/app/sites/generator/password/generator-password.component.html

@@ -1,4 +1,4 @@
-<div class="rounded-lg shadow-md p-6 max-w-2xl mx-auto ">
+<div class="rounded-lg shadow-md px-6 max-w-2xl mx-auto ">
   <div class="mb-8">
     <app-custom-title
       text="Password Generator"

src/app/sites/generator/qrcode/generator-qrcode.html

@@ -1,4 +1,4 @@
-<div class="rounded-lg shadow-md p-6 max-w-2xl mx-auto">
+<div class="rounded-lg shadow-md px-6 max-w-2xl mx-auto">
     <div class="mx-auto">
         <div class="mb-8">
             <app-custom-title

src/app/sites/navbar/about/about.html

@@ -0,0 +1,86 @@
+<div class="rounded-lg shadow-md px-6 max-w-2xl mx-auto scroll-m-0 scroll-p-0">
+    <div class="mb-8">
+        <app-custom-title
+        text="About"
+        [textSizeInPx]="36"
+        fontWeight="bold"
+        ></app-custom-title>
+    </div>
+
+    <div class="bg-zinc-800 rounded-lg shadow-md p-6 max-w-2xl mx-auto gap-4">
+        <div class="text-gray-300 mb-4">
+            Welcome to my Tool Website! This Website provides a collection of useful web-based tools designed to help you with various tasks.
+            This Website is hosted on Vercel and Open Source. The Source Code is available on GitHub (link below).
+            <div class=" my-6 flex gap-2">
+                <p class="text-sm text-blue-400 font-mono bg-zinc-900 rounded-lg p-4">Version: 0.3.0</p>
+            </div>
+        </div>
+
+        <div> <!-- Privacy-->
+            <div class="mt-6 mb-4">
+                <app-custom-title
+                    text="Privacy"
+                    [textSizeInPx]="24"
+                    fontWeight="bold"
+                ></app-custom-title>
+            </div>
+            <p>
+                All tools operate entirely in your browser. No data is sent to external servers. 
+                Your data remains on your device and is stored only in your browser's local storage.
+            </p>            
+        </div>
+
+        <div> <!--  Project-->
+            <div class="mt-6 mb-4">
+                <app-custom-title
+                    text="Project Links"
+                    [textSizeInPx]="24"
+                    fontWeight="bold"
+                ></app-custom-title>
+            </div>
+
+            <div class="w-fit">
+                <a href="https://github.com/danielvici/tool-website" target="_blank" rel="noopener noreferrer" class="flex items-center justify-center px-4 py-2 bg-gray-800 text-white rounded-md hover:bg-gray-700 transition-colors">
+                        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
+                            <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path>
+                        </svg>
+                        Repository
+                    </a>
+            </div>
+        </div>
+
+        <div> <!-- Developer-->
+            <div class="mt-6 mb-4">
+                <app-custom-title
+                    text="Developer"
+                    [textSizeInPx]="24"
+                    fontWeight="bold"
+                ></app-custom-title>
+            </div>
+
+            <div class="bg-zinc-900 rounded-lg p-6 border border-gray-700">
+                <p class="text-gray-300 mb-4">This website is developed and maintained by <a href="https://github.com/danielvici" target="_blank" rel="noopener noreferrer" class="text-blue-500 hover:text-blue-600">danielvici123</a>. If you find these tools helpful, you can support the development or check out other projects through the links below:</p>
+                <div class="flex flex-col sm:flex-row gap-4 mt-4">
+                    <a href="https://github.com/danielvici" target="_blank" rel="noopener noreferrer" class="flex items-center justify-center px-4 py-2 bg-gray-800 text-white rounded-md hover:bg-gray-700 transition-colors">
+                        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
+                            <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path>
+                        </svg>
+                        GitHub
+                    </a>
+                    <a href="https://ko-fi.com/danielvici123" target="_blank" rel="noopener noreferrer" class="flex items-center justify-center px-4 py-2 bg-[#13C3FF] text-white rounded-md hover:bg-[#00b8f5] transition-colors">
+                        <svg class="w-5 h-5 mr-2" viewBox="0 0 24 24" fill="currentColor">
+                            <path d="M23.881 8.948c-.773-4.085-4.859-4.593-4.859-4.593H.723c-.604 0-.679.798-.679.798s-.082 7.324-.022 11.822c.164 2.424 2.586 2.672 2.586 2.672s8.267-.023 11.966-.049c2.438-.426 2.683-2.566 2.658-3.734 4.352.24 7.422-2.831 6.649-6.916zm-11.062 3.511c-1.246 1.453-4.011 3.976-4.011 3.976s-.121.119-.31.023c-.076-.057-.108-.09-.108-.09-.443-.441-3.368-3.049-4.034-3.954-.709-.965-1.041-2.7-.091-3.71.951-1.01 3.005-1.086 4.363.407 0 0 1.565-1.782 3.468-.963 1.904.82 1.832 3.011.723 4.311zm6.173.478c-.928.116-1.682.028-1.682.028V7.284h1.77s1.971.551 1.971 2.638c0 1.913-.985 2.667-2.059 3.015z"></path>
+                        </svg>
+                        Buy me a coffee
+                    </a>
+                    <a href="https://x.com/danielvici123" target="_blank" rel="noopener noreferrer" class="flex items-center justify-center px-4 py-2 bg-black text-white rounded-md hover:bg-gray-900 transition-colors">
+                        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
+                            <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path>
+                        </svg>
+                        Contact
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

src/app/sites/navbar/about/about.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { About } from './about';
+
+describe('About', () => {
+  let component: About;
+  let fixture: ComponentFixture<About>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [About]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(About);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/sites/navbar/about/about.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { CustomTitle } from "../../../components/custom-title/custom-title";
+
+@Component({
+  selector: 'app-about',
+  imports: [CustomTitle],
+  templateUrl: './about.html',
+  styleUrl: './about.css',
+})
+export class About {
+
+}

src/app/sites/navbar/changelog/changelog.html

@@ -1,4 +1,4 @@
-<div class="rounded-lg shadow-md p-6 max-w-2xl mx-auto">
+<div class="rounded-lg shadow-md px-6 max-w-2xl mx-auto">
     <div class="mb-8">
         <app-custom-title
         text="Changelog"

src/app/sites/navbar/comingsoon/comingsoon.html

@@ -1,4 +1,4 @@
-<div class="rounded-lg shadow-md p-6 max-w-2xl mx-auto">
+<div class="rounded-lg shadow-md px-6 max-w-2xl mx-auto">
     <div class="mb-8">
         <app-custom-title
         text="Coming Soon"