From 4de29cde5abccf6da45c22141eb3831c91ddf7e9 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Sun, 1 Mar 2026 15:08:44 -0500
Subject: [PATCH] style: image-clipped text effect on Developer hero word

---
 themes/lucentui/views/home.blade.php | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/themes/lucentui/views/home.blade.php b/themes/lucentui/views/home.blade.php
index 581d03555..ba18392e3 100644
--- a/themes/lucentui/views/home.blade.php
+++ b/themes/lucentui/views/home.blade.php
@@ -45,7 +45,7 @@
 
                     <!-- Hero Title -->
                     <h1 class="text-4xl md:text-5xl lg:text-[3.75rem] xl:text-7xl font-black text-color-base mb-6 leading-[1.05] tracking-tight hp-reveal whitespace-nowrap" data-delay="100">
-                        {{ theme('homepage_hero_title1', 'Powerful') }}
+                        <span class="hero-img-text" style="background-image: url('https://billing.virtnet.bond/storage/01K8TJ4QFZT7R9M1KCF71Y8BRT.jpg');">{{ theme('homepage_hero_title1', 'Powerful') }}</span>
                         <span class="bg-gradient-to-r from-primary via-secondary to-primary bg-clip-text text-transparent bg-[length:200%_auto] animate-gradient">
                             {{ theme('homepage_hero_title2', 'VPS Hosting') }}
                         </span>
@@ -630,6 +630,16 @@
         --hp-blue-dark: #1E6091; --hp-blue-darkest: #184E77;
     }
 
+    /* ── Image-clipped hero text ── */
+    .hero-img-text {
+        -webkit-background-clip: text;
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-size: cover;
+        background-position: center;
+        background-repeat: no-repeat;
+    }
+
     /* ── Scroll-reveal base ── */
     .hp-reveal {
         opacity: 0;