From f712dbf1d8c64825911c497e71ab7156fbb1aa1e Mon Sep 17 00:00:00 2001
From: Shishir Pandey <39762897+iamshishirpandey@users.noreply.github.com>
Date: Sun, 1 Jun 2025 06:47:07 +0000
Subject: [PATCH 1/2] feat: add hover effects to logo borders with Appwrite
 brand colors- Added shine effect to logo borders on hover- Implemented
 dynamic hover states for better UI interaction- Used Appwrite parent colors
 for consistent branding- Enhances user experience with visual feedbackFixes
 #1571

---
 src/lib/components/Technologies.svelte | 73 +++++++++++++++++++++++++-
 1 file changed, 71 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/Technologies.svelte b/src/lib/components/Technologies.svelte
index 05d48d94e2..603befdb37 100644
--- a/src/lib/components/Technologies.svelte
+++ b/src/lib/components/Technologies.svelte
@@ -66,6 +66,75 @@
     }>;
 </script>
 
+<style>
+    .animated-border-button {
+        position: relative;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    
+    .animated-border-button::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        border-radius: 0.5rem;
+        border: 1px solid transparent;
+        background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 100%) border-box;
+        mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
+        mask-composite: exclude;
+        pointer-events: none;
+        opacity: 0;
+        transition: opacity 0.3s ease;
+    }
+    
+    .animated-border-button::after {
+        content: '';
+        position: absolute;
+        inset-x: 0;
+        top: -1px;
+        height: 1px;
+        width: 0;
+        margin: 0 auto;
+        background: linear-gradient(90deg, transparent, var(--color-primary, currentColor), transparent);
+        transition: width 0.4s ease;
+        border-radius: 1px;
+        z-index: 1;
+    }
+    
+    .animated-border-button:hover {
+        transform: translateY(-2px);
+        box-shadow: 
+            0 20px 25px -5px rgba(0, 0, 0, 0.1),
+            0 10px 10px -5px rgba(0, 0, 0, 0.04),
+            0 0 0 1px rgba(255, 255, 255, 0.1),
+            0 0 20px rgba(255, 255, 255, 0.15);
+    }
+    
+    .animated-border-button:hover::before {
+        opacity: 1;
+    }
+    
+    .animated-border-button:hover::after {
+        width: 50%;
+    }
+    
+    .animated-border-button:active {
+        transform: translateY(0);
+        transition-duration: 0.1s;
+    }
+    
+    /* Dark mode adjustments */
+    :global(.dark) .animated-border-button:hover {
+        box-shadow: 
+            0 25px 50px -12px rgba(0, 0, 0, 0.5),
+            0 0 0 1px rgba(255, 255, 255, 0.2),
+            0 0 25px rgba(255, 255, 255, 0.1);
+    }
+    
+    :global(.dark) .animated-border-button::after {
+        background: linear-gradient(90deg, transparent, var(--color-primary, #ffffff), transparent);
+    }
+</style>
+
 <ul
     class="web-u-margin-block-32-mobile web-u-margin-block-40-not-mobile flex flex-wrap gap-4 lg:max-w-[34rem]"
 >
@@ -74,7 +143,7 @@
             <li>
                 <a
                     href={platform.href}
-                    class="web-icon-button web-box-icon has-border-gradient"
+                    class="web-icon-button web-box-icon has-border-gradient animated-border-button"
                     onclick={() =>
                         trackEvent(
                             `technologies-${platform.name.replace(' ', '-').toLowerCase()}-click`
@@ -93,4 +162,4 @@
             {/snippet}
         </Tooltip>
     {/each}
-</ul>
+</ul>
\ No newline at end of file

From c698715e77a7390fda285620b50f8ec0516c30c5 Mon Sep 17 00:00:00 2001
From: Shishir Pandey <39762897+iamshishirpandey@users.noreply.github.com>
Date: Sun, 1 Jun 2025 07:26:21 +0000
Subject: [PATCH 2/2] Preetier Format

---
 src/lib/components/Technologies.svelte | 96 +++++++++++++++-----------
 1 file changed, 54 insertions(+), 42 deletions(-)

diff --git a/src/lib/components/Technologies.svelte b/src/lib/components/Technologies.svelte
index 603befdb37..1f43303cd9 100644
--- a/src/lib/components/Technologies.svelte
+++ b/src/lib/components/Technologies.svelte
@@ -66,26 +66,62 @@
     }>;
 </script>
 
+<ul
+    class="web-u-margin-block-32-mobile web-u-margin-block-40-not-mobile flex flex-wrap gap-4 lg:max-w-[34rem]"
+>
+    {#each platforms as platform}
+        <Tooltip>
+            <li>
+                <a
+                    href={platform.href}
+                    class="web-icon-button web-box-icon has-border-gradient animated-border-button"
+                    onclick={() =>
+                        trackEvent(
+                            `technologies-${platform.name.replace(' ', '-').toLowerCase()}-click`
+                        )}
+                >
+                    <img
+                        src={platform.image}
+                        alt="{platform.name} quick start"
+                        width="32"
+                        height="32"
+                    />
+                </a>
+            </li>
+            {#snippet tooltip()}
+                {platform.name}
+            {/snippet}
+        </Tooltip>
+    {/each}
+</ul>
+
 <style>
     .animated-border-button {
         position: relative;
         transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     }
-    
+
     .animated-border-button::before {
         content: '';
         position: absolute;
         inset: 0;
         border-radius: 0.5rem;
         border: 1px solid transparent;
-        background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 100%) border-box;
-        mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
+        background: linear-gradient(
+                180deg,
+                rgba(255, 255, 255, 0.16) 0%,
+                rgba(255, 255, 255, 0) 100%
+            )
+            border-box;
+        mask:
+            linear-gradient(#fff 0 0) padding-box,
+            linear-gradient(#fff 0 0);
         mask-composite: exclude;
         pointer-events: none;
         opacity: 0;
         transition: opacity 0.3s ease;
     }
-    
+
     .animated-border-button::after {
         content: '';
         position: absolute;
@@ -94,72 +130,48 @@
         height: 1px;
         width: 0;
         margin: 0 auto;
-        background: linear-gradient(90deg, transparent, var(--color-primary, currentColor), transparent);
+        background: linear-gradient(
+            90deg,
+            transparent,
+            var(--color-primary, currentColor),
+            transparent
+        );
         transition: width 0.4s ease;
         border-radius: 1px;
         z-index: 1;
     }
-    
+
     .animated-border-button:hover {
         transform: translateY(-2px);
-        box-shadow: 
+        box-shadow:
             0 20px 25px -5px rgba(0, 0, 0, 0.1),
             0 10px 10px -5px rgba(0, 0, 0, 0.04),
             0 0 0 1px rgba(255, 255, 255, 0.1),
             0 0 20px rgba(255, 255, 255, 0.15);
     }
-    
+
     .animated-border-button:hover::before {
         opacity: 1;
     }
-    
+
     .animated-border-button:hover::after {
         width: 50%;
     }
-    
+
     .animated-border-button:active {
         transform: translateY(0);
         transition-duration: 0.1s;
     }
-    
+
     /* Dark mode adjustments */
     :global(.dark) .animated-border-button:hover {
-        box-shadow: 
+        box-shadow:
             0 25px 50px -12px rgba(0, 0, 0, 0.5),
             0 0 0 1px rgba(255, 255, 255, 0.2),
             0 0 25px rgba(255, 255, 255, 0.1);
     }
-    
+
     :global(.dark) .animated-border-button::after {
         background: linear-gradient(90deg, transparent, var(--color-primary, #ffffff), transparent);
     }
 </style>
-
-<ul
-    class="web-u-margin-block-32-mobile web-u-margin-block-40-not-mobile flex flex-wrap gap-4 lg:max-w-[34rem]"
->
-    {#each platforms as platform}
-        <Tooltip>
-            <li>
-                <a
-                    href={platform.href}
-                    class="web-icon-button web-box-icon has-border-gradient animated-border-button"
-                    onclick={() =>
-                        trackEvent(
-                            `technologies-${platform.name.replace(' ', '-').toLowerCase()}-click`
-                        )}
-                >
-                    <img
-                        src={platform.image}
-                        alt="{platform.name} quick start"
-                        width="32"
-                        height="32"
-                    />
-                </a>
-            </li>
-            {#snippet tooltip()}
-                {platform.name}
-            {/snippet}
-        </Tooltip>
-    {/each}
-</ul>
\ No newline at end of file