Joseph.Rawlings/Virtnet.bond
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

style: use animated gradient instead of image for hero text effect

Browse Source
This commit is contained in:
Joseph.Rawlings
2026-03-01 15:13:33 -05:00
parent 4b44e80ded
commit 1f989e616a
1 changed files with 9 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
themes/lucentui/views/home.blade.php
View File

@@ -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">
<span class="hero-img-text" style="background-image: url('https://billing.virtnet.bond/storage/01K8TJ4QFZT7R9M1KCF71Y8BRT.jpg');">{{ theme('homepage_hero_title1', 'Powerful') }}</span>
<span class="hero-img-text">{{ 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>
@@ -635,14 +635,15 @@
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-size: cover;
background-position: center;
background-repeat: repeat;
animation: sliding-background 40s linear infinite;
background-color: #0292b6;
background-image: repeating-linear-gradient(to bottom right, rgb(0, 196, 244) 0%, rgb(3, 96, 120) 100%);
background-size: 400% 400%;
animation: sliding-gradient 8s ease infinite;
}
@keyframes sliding-background {
0% { background-position: 0 0; }
100% { background-position: -1000px 0; }
@keyframes sliding-gradient {
0% { background-position: 0% 0%; }
50% { background-position: 100% 100%; }
100% { background-position: 0% 0%; }
}
/* ── Scroll-reveal base ── */