From 8dd1b867a57c75971b0b5623274e8c2691d83c8f Mon Sep 17 00:00:00 2001
From: Rico van Zelst <rvzelst7@gmail.com>
Date: Wed, 12 Mar 2025 17:44:31 +0100
Subject: [PATCH] feat: add petal attribution component

- Introduced a new badge component for petal attribution.
- Added styling for the badge with hover effects and animations.
- Integrated the new component into the home view.
---
 .../components/petal-attribution.blade.php    | 52 +++++++++++++++++++
 resources/views/home.blade.php                |  2 +
 2 files changed, 54 insertions(+)
 create mode 100644 resources/views/components/petal-attribution.blade.php

diff --git a/resources/views/components/petal-attribution.blade.php b/resources/views/components/petal-attribution.blade.php
new file mode 100644
index 0000000..b0383bc
--- /dev/null
+++ b/resources/views/components/petal-attribution.blade.php
@@ -0,0 +1,52 @@
+<div class="badge-container">
+    <a href="https://petal.sh" class="petal-badge" target="_blank">
+        <span class="flower">🌸</span>Created by petal.sh
+    </a>
+</div>
+
+<style>
+    .badge-container {
+        display: flex;
+        justify-content: center;
+        width: 100%;
+    }
+
+    .petal-badge {
+        display: inline-block;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+        font-size: 12px;
+        line-height: 1;
+        text-decoration: none;
+        background: #372b3a;
+        color: #e2e8f0;
+        padding: 8px 12px;
+        border-radius: 4px;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        transition: all 0.3s ease;
+        margin: 10px;
+    }
+
+    .petal-badge:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
+    }
+
+    .petal-badge .flower {
+        display: inline-block;
+        margin-right: 6px;
+        transform-origin: center;
+        animation: subtle-pulse 4s infinite ease-in-out;
+    }
+
+    @keyframes subtle-pulse {
+
+        0%,
+        100% {
+            transform: scale(1);
+        }
+
+        50% {
+            transform: scale(1.1);
+        }
+    }
+</style>
diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
index ed0b169..daff992 100644
--- a/resources/views/home.blade.php
+++ b/resources/views/home.blade.php
@@ -15,4 +15,6 @@
         </div>
     @endif
     <x-home.recent_skins :latestSkins="$latestSkins" />
+
+    <x-petal-attribution />
 @endsection