chore: Added gradient styles and effects across UI

Author: Hiccup-za

.github/workflows/release.yml

@@ -1,4 +1,4 @@
-name: Release
+name: 🚢 Release
 
 on:
   push:

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## [Unreleased]
 
+## [0.10.1] - 2026-01-25
+
+### Changed
+- Added gradient brand colors and hover effects across UI
+- Updated changelog page and homepage with gradient backgrounds
+
 ## [0.10.0] - 2026-01-25
 
 ### Added

apps/web/app/changelog/page.tsx

@@ -59,7 +59,7 @@ export default async function ChangelogPage() {
   };
 
   return (
-    <main className="min-h-screen">
+    <main className="min-h-screen bg-gradient-brand-subtle">
       <div className="px-6 py-12">
         <div className="mx-auto flex max-w-3xl flex-col gap-6">
           <div className="flex flex-wrap items-center gap-3">
@@ -105,6 +105,7 @@ export default async function ChangelogPage() {
                 return (
                   <Card 
                     key={section.title}
+                    className="transition-all duration-300 hover:bg-gradient-brand-subtle hover:border-opacity-50"
                   >
                     <CardHeader>
                       <CardTitle className="text-xl">

apps/web/app/globals.css

@@ -22,6 +22,9 @@
     --input: 214.3 31.8% 91.4%;
     --ring: 222.2 84% 4.9%;
     --radius: 0.75rem;
+    /* Gradient colors from qae-skills.png - #3FC7FB, #FC4649 */
+    --gradient-blue: 195 96% 62%;
+    --gradient-red: 359 97% 62%;
   }
 
   .dark {
@@ -42,6 +45,9 @@
     --border: 0 0% 20%;
     --input: 0 0% 20%;
     --ring: 0 0% 98%;
+    /* Gradient colors from qae-skills.png - adjusted for dark mode */
+    --gradient-blue: 195 96% 62%;
+    --gradient-red: 359 97% 62%;
   }
 }
 
@@ -74,3 +80,72 @@
     font-feature-settings: 'liga' 0;
   }
 }
+
+@layer utilities {
+  /* Subtle gradient backgrounds - adjusted for dark mode */
+  .bg-gradient-brand-subtle {
+    background: linear-gradient(
+      135deg,
+      rgba(63, 199, 251, 0.12) 0%,
+      rgba(252, 70, 73, 0.12) 100%
+    );
+    min-height: 100%;
+  }
+  
+  /* Dark mode specific adjustments */
+  .dark .bg-gradient-brand-subtle {
+    background: linear-gradient(
+      135deg,
+      rgba(63, 199, 251, 0.15) 0%,
+      rgba(252, 70, 73, 0.15) 100%
+    );
+  }
+  
+  /* Gradient text - using exact colors, adjusted for dark mode */
+  .text-gradient-brand {
+    background: linear-gradient(
+      135deg,
+      #3FC7FB,
+      #FC4649
+    );
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+  
+  /* Dark mode gradient text - slightly brighter for visibility */
+  .dark .text-gradient-brand {
+    background: linear-gradient(
+      135deg,
+      #5DD3FF,
+      #FF6B6E
+    );
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+  
+  /* Hover gradient text */
+  .hover\:text-gradient-brand:hover {
+    background: linear-gradient(
+      135deg,
+      #3FC7FB,
+      #FC4649
+    );
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+  
+  /* Dark mode hover gradient text */
+  .dark .hover\:text-gradient-brand:hover {
+    background: linear-gradient(
+      135deg,
+      #5DD3FF,
+      #FF6B6E
+    );
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+}

apps/web/app/layout.tsx

@@ -31,7 +31,7 @@ export default async function RootLayout({
           }}
         />
         <Header />
-        <main className="flex-1">
+        <main className="flex-1 flex flex-col">
           {children}
         </main>
         <Footer />

apps/web/app/page.tsx

@@ -24,7 +24,7 @@ export default async function HomePage() {
   const skills = await getSkills();
 
   return (
-    <main>
+    <main className="flex-1 bg-gradient-brand-subtle">
       <section className="mx-auto max-w-6xl px-6 pt-12 pb-12">
         <div className="flex flex-col gap-6">
           <div className="flex flex-col gap-4">
@@ -48,7 +48,7 @@ export default async function HomePage() {
               {skills.map((skill) => (
                 <Card 
                   key={skill.id} 
-                  className="flex h-full flex-col"
+                  className="flex h-full flex-col transition-all duration-300 hover:bg-gradient-brand-subtle hover:border-opacity-50"
                 >
                     <SkillCardHeader
                       title={skill.title}

apps/web/components/footer.tsx

@@ -39,7 +39,7 @@ export async function Footer() {
               href="https://x.com/chriszeuch"
               target="_blank"
               rel="noopener noreferrer"
-              className="text-primary font-medium hover:underline underline-offset-4"
+              className="text-primary font-medium hover:underline underline-offset-4 transition-all duration-300 hover:text-gradient-brand"
             >
               @chriszeuch
             </Link>

apps/web/tailwind.config.ts

@@ -39,6 +39,10 @@ const config: Config = {
           DEFAULT: "hsl(var(--card))",
           foreground: "hsl(var(--card-foreground))",
         },
+        gradient: {
+          blue: "hsl(var(--gradient-blue))",
+          red: "hsl(var(--gradient-red))",
+        },
       },
       borderRadius: {
         lg: "var(--radius)",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "qa-skills",
-  "version": "0.10.0",
+  "version": "0.10.1",
   "private": true,
   "scripts": {
     "dev": "turbo run dev",

skills/README.md

@@ -1,4 +1,4 @@
 # Skills Catalog
 
-This catalog groups QA process and best-practice skills. Each skill lives in its
-own folder with a `SKILL.md` and optional `assets/`, `references/`, or `scripts/`.
+This catalog groups QA process and best-practice skills.  
+Each skill lives in its own folder.