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

feat: enhance homepage layout and styling for improved visual consistency and user engagement

Browse Source
This commit is contained in:
Joseph.Rawlings
2025-12-22 23:13:46 -05:00
parent c5720d821d
commit 5c608826a4
1 changed files with 171 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,4 @@
<div class="min-h-screen overflow-hidden">
<div class="min-h-screen overflow-hidden homepage-wrapper">
<!-- Homepage-specific custom HTML -->
@if(theme('custom_homepage_html'))
<div class="custom-homepage-content">
@@ -178,15 +178,12 @@
<section id="panel-features" class="py-24 md:py-32 relative">
<div class="container mx-auto px-4">
<!-- Section Header -->
<div class="max-w-3xl mb-16">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-secondary/10 border border-secondary/30 text-secondary text-sm font-medium mb-6">
<x-ri-dashboard-3-line class="size-4" />
<span>Full-Featured Control Panel</span>
</div>
<h2 class="text-4xl md:text-5xl lg:text-6xl font-black text-color-base mb-6 leading-tight">
<div class="max-w-2xl mb-12">
<p class="text-sm font-medium text-primary uppercase tracking-wider mb-3">Control Panel</p>
<h2 class="text-3xl md:text-4xl font-bold text-color-base mb-4">
{{ theme('panel_title', 'Complete Server Management') }}
</h2>
<p class="text-xl text-color-muted leading-relaxed">
<p class="text-base text-color-muted leading-relaxed">
{{ theme('panel_subtitle', 'Take full control of your VPS with our comprehensive management dashboard. Every tool you need, right at your fingertips.') }}
</p>
</div>
@@ -435,18 +432,19 @@
<section id="services" class="py-24 md:py-32">
<div class="container mx-auto px-4">
<div class="bg-gradient-to-b from-background-secondary/50 to-background-secondary/20 rounded-3xl p-8 md:p-12">
<div class="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-8 mb-16">
<div class="max-w-2xl">
<h2 class="text-4xl md:text-5xl lg:text-6xl font-black text-color-base mb-6 leading-tight">
<div class="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-6 mb-12">
<div class="max-w-xl">
<p class="text-sm font-medium text-primary uppercase tracking-wider mb-3">What We Offer</p>
<h2 class="text-3xl md:text-4xl font-bold text-color-base mb-3">
{{ theme('services_title', 'Our Services') }}
</h2>
<p class="text-xl text-color-muted leading-relaxed">
<p class="text-base text-color-muted leading-relaxed">
{{ theme('services_subtitle', 'Choose the perfect option for your needs — all with full control panel access for all services we offer to give you total control') }}
</p>
</div>
<a href="#services" class="group inline-flex items-center gap-2 text-primary font-semibold hover:gap-4 transition-all">
<span>View all services</span>
<x-ri-arrow-right-line class="size-5" />
<a href="#services" class="group inline-flex items-center gap-2 text-primary text-sm font-medium hover:gap-3 transition-all">
<span>View all</span>
<x-ri-arrow-right-line class="size-4" />
</a>
</div>
@@ -482,11 +480,12 @@
<!-- Infrastructure Features - Alternating Layout -->
<section id="features" class="py-24 md:py-32">
<div class="container mx-auto px-4">
<div class="text-center max-w-3xl mx-auto mb-20">
<h2 class="text-4xl md:text-5xl lg:text-6xl font-black text-color-base mb-6 leading-tight">
<div class="text-center max-w-2xl mx-auto mb-14">
<p class="text-sm font-medium text-primary uppercase tracking-wider mb-3">Infrastructure</p>
<h2 class="text-3xl md:text-4xl font-bold text-color-base mb-4">
{{ theme('features_title', 'Enterprise Infrastructure') }}
</h2>
<p class="text-xl text-color-muted leading-relaxed">
<p class="text-base text-color-muted leading-relaxed">
{{ theme('features_subtitle', 'Built on carrier-grade hardware with redundant systems, delivering the reliability your business demands') }}
</p>
</div>
@@ -546,11 +545,12 @@
<!-- Quick Actions - Modern Cards -->
<section class="py-24 md:py-32 bg-gradient-to-b from-transparent via-background-secondary/30 to-transparent">
<div class="container mx-auto px-4">
<div class="text-center max-w-2xl mx-auto mb-16">
<h2 class="text-4xl md:text-5xl font-black text-color-base mb-6">
<div class="text-center max-w-xl mx-auto mb-12">
<p class="text-sm font-medium text-primary uppercase tracking-wider mb-3">Quick Start</p>
<h2 class="text-3xl md:text-4xl font-bold text-color-base mb-3">
{{ theme('quick_actions_title', 'Get Started in Seconds') }}
</h2>
<p class="text-xl text-color-muted leading-relaxed">
<p class="text-base text-color-muted leading-relaxed">
{{ theme('quick_actions_subtitle', 'Deploy your VPS and start managing it immediately') }}
</p>
</div>
@@ -632,16 +632,13 @@
<div class="absolute bottom-0 right-0 w-24 h-24 bg-secondary/10 rounded-full blur-2xl"></div>
<div class="relative z-10">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 border border-primary/20 text-primary text-sm font-medium mb-6">
<x-ri-rocket-fill class="size-4" />
<span>Get Started Today</span>
</div>
<p class="text-sm font-medium text-primary uppercase tracking-wider mb-3">Get Started</p>
<h2 class="text-4xl md:text-5xl font-black text-color-base mb-6 leading-tight">
<h2 class="text-3xl md:text-4xl font-bold text-color-base mb-4">
{{ theme('cta_title', 'Ready to Deploy Your VPS?') }}
</h2>
<p class="text-lg text-color-muted mb-8 leading-relaxed">
<p class="text-base text-color-muted mb-8 leading-relaxed">
{{ theme('cta_subtitle', 'Join thousands of users who trust our platform for reliable, high-performance virtual servers with full control panel access') }}
</p>
@@ -746,6 +743,20 @@
</div>
<style>
/* Custom Color Palette */
:root {
--hp-lime-light: #D9ED92;
--hp-lime: #B5E48C;
--hp-green-light: #99D98C;
--hp-green: #76C893;
--hp-teal-light: #52B69A;
--hp-teal: #34A0A4;
--hp-blue-light: #168AAD;
--hp-blue: #1A759F;
--hp-blue-dark: #1E6091;
--hp-blue-darkest: #184E77;
}
@keyframes gradient {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
@@ -773,7 +784,7 @@
display: block;
flex: 1;
min-width: 8px;
background: linear-gradient(to top, #6366f1, rgba(99, 102, 241, 0.5));
background: linear-gradient(to top, #1A759F, rgba(26, 117, 159, 0.5));
border-radius: 4px 4px 0 0;
animation: chartWave 2s ease-in-out infinite;
animation-delay: var(--delay, 0s);
@@ -786,4 +797,136 @@
75% { height: var(--h4, 50%); }
100% { height: var(--h1, 60%); }
}
/* Homepage Color Overrides */
.homepage-wrapper .text-primary { color: #1A759F !important; }
.homepage-wrapper .text-secondary { color: #52B69A !important; }
.homepage-wrapper .text-success { color: #76C893 !important; }
.homepage-wrapper .text-info { color: #168AAD !important; }
.homepage-wrapper .text-warning { color: #34A0A4 !important; }
.homepage-wrapper .text-purple-500 { color: #1E6091 !important; }
.homepage-wrapper .text-orange-500 { color: #52B69A !important; }
.homepage-wrapper .text-blue-500 { color: #168AAD !important; }
.homepage-wrapper .text-emerald-500 { color: #76C893 !important; }
.homepage-wrapper .bg-primary { background-color: #1A759F !important; }
.homepage-wrapper .bg-secondary { background-color: #52B69A !important; }
.homepage-wrapper .bg-success { background-color: #76C893 !important; }
.homepage-wrapper .bg-info { background-color: #168AAD !important; }
.homepage-wrapper .bg-warning { background-color: #34A0A4 !important; }
.homepage-wrapper .bg-error { background-color: #184E77 !important; }
.homepage-wrapper .bg-purple-500 { background-color: #1E6091 !important; }
.homepage-wrapper .bg-purple-600 { background-color: #184E77 !important; }
.homepage-wrapper .bg-orange-500 { background-color: #52B69A !important; }
.homepage-wrapper .bg-blue-500 { background-color: #168AAD !important; }
.homepage-wrapper .bg-blue-600 { background-color: #1A759F !important; }
.homepage-wrapper .bg-emerald-500 { background-color: #76C893 !important; }
.homepage-wrapper .bg-emerald-600 { background-color: #52B69A !important; }
.homepage-wrapper .border-primary { border-color: #1A759F !important; }
.homepage-wrapper .border-secondary { border-color: #52B69A !important; }
.homepage-wrapper .border-success { border-color: #76C893 !important; }
.homepage-wrapper .border-info { border-color: #168AAD !important; }
.homepage-wrapper .border-warning { border-color: #34A0A4 !important; }
.homepage-wrapper .border-purple-500 { border-color: #1E6091 !important; }
.homepage-wrapper .shadow-primary\/20,
.homepage-wrapper .shadow-primary\/25,
.homepage-wrapper .shadow-primary\/30 { --tw-shadow-color: rgba(26, 117, 159, 0.25) !important; }
.homepage-wrapper .shadow-success\/30 { --tw-shadow-color: rgba(118, 200, 147, 0.3) !important; }
.homepage-wrapper .shadow-warning\/30 { --tw-shadow-color: rgba(52, 160, 164, 0.3) !important; }
.homepage-wrapper .shadow-info\/30 { --tw-shadow-color: rgba(22, 138, 173, 0.3) !important; }
.homepage-wrapper .shadow-purple-500\/20,
.homepage-wrapper .shadow-purple-500\/30 { --tw-shadow-color: rgba(30, 96, 145, 0.25) !important; }
.homepage-wrapper .shadow-blue-500\/20,
.homepage-wrapper .shadow-blue-500\/30 { --tw-shadow-color: rgba(22, 138, 173, 0.25) !important; }
.homepage-wrapper .shadow-emerald-500\/20,
.homepage-wrapper .shadow-emerald-500\/30 { --tw-shadow-color: rgba(118, 200, 147, 0.25) !important; }
/* Gradient text override */
.homepage-wrapper .bg-gradient-to-r.from-primary.via-secondary.to-primary {
background-image: linear-gradient(to right, #184E77, #52B69A, #184E77) !important;
}
/* Gradient backgrounds */
.homepage-wrapper .from-primary { --tw-gradient-from: #1A759F !important; }
.homepage-wrapper .to-primary { --tw-gradient-to: #1A759F !important; }
.homepage-wrapper .via-primary { --tw-gradient-via: #1A759F !important; }
.homepage-wrapper .from-secondary { --tw-gradient-from: #52B69A !important; }
.homepage-wrapper .to-secondary { --tw-gradient-to: #52B69A !important; }
.homepage-wrapper .from-success { --tw-gradient-from: #76C893 !important; }
.homepage-wrapper .to-success { --tw-gradient-to: #76C893 !important; }
.homepage-wrapper .from-warning { --tw-gradient-from: #34A0A4 !important; }
.homepage-wrapper .to-warning { --tw-gradient-to: #34A0A4 !important; }
.homepage-wrapper .from-info { --tw-gradient-from: #168AAD !important; }
.homepage-wrapper .to-info { --tw-gradient-to: #168AAD !important; }
.homepage-wrapper .from-purple-500 { --tw-gradient-from: #1E6091 !important; }
.homepage-wrapper .to-purple-500 { --tw-gradient-to: #1E6091 !important; }
.homepage-wrapper .from-blue-500 { --tw-gradient-from: #168AAD !important; }
.homepage-wrapper .to-blue-500 { --tw-gradient-to: #168AAD !important; }
.homepage-wrapper .from-emerald-500 { --tw-gradient-from: #76C893 !important; }
.homepage-wrapper .to-emerald-500 { --tw-gradient-to: #76C893 !important; }
/* Opacity variants */
.homepage-wrapper .bg-primary\/5 { background-color: rgba(26, 117, 159, 0.05) !important; }
.homepage-wrapper .bg-primary\/10 { background-color: rgba(26, 117, 159, 0.1) !important; }
.homepage-wrapper .bg-primary\/15 { background-color: rgba(26, 117, 159, 0.15) !important; }
.homepage-wrapper .bg-primary\/20 { background-color: rgba(26, 117, 159, 0.2) !important; }
.homepage-wrapper .bg-secondary\/5 { background-color: rgba(82, 182, 154, 0.05) !important; }
.homepage-wrapper .bg-secondary\/10 { background-color: rgba(82, 182, 154, 0.1) !important; }
.homepage-wrapper .bg-secondary\/15 { background-color: rgba(82, 182, 154, 0.15) !important; }
.homepage-wrapper .bg-secondary\/20 { background-color: rgba(82, 182, 154, 0.2) !important; }
.homepage-wrapper .bg-success\/10 { background-color: rgba(118, 200, 147, 0.1) !important; }
.homepage-wrapper .bg-success\/20 { background-color: rgba(118, 200, 147, 0.2) !important; }
.homepage-wrapper .bg-warning\/5 { background-color: rgba(52, 160, 164, 0.05) !important; }
.homepage-wrapper .bg-warning\/10 { background-color: rgba(52, 160, 164, 0.1) !important; }
.homepage-wrapper .bg-warning\/20 { background-color: rgba(52, 160, 164, 0.2) !important; }
.homepage-wrapper .bg-info\/5 { background-color: rgba(22, 138, 173, 0.05) !important; }
.homepage-wrapper .bg-info\/10 { background-color: rgba(22, 138, 173, 0.1) !important; }
.homepage-wrapper .bg-purple-500\/5 { background-color: rgba(30, 96, 145, 0.05) !important; }
.homepage-wrapper .bg-purple-500\/10 { background-color: rgba(30, 96, 145, 0.1) !important; }
.homepage-wrapper .bg-purple-500\/20 { background-color: rgba(30, 96, 145, 0.2) !important; }
.homepage-wrapper .bg-orange-500\/10 { background-color: rgba(82, 182, 154, 0.1) !important; }
.homepage-wrapper .bg-orange-500\/20 { background-color: rgba(82, 182, 154, 0.2) !important; }
.homepage-wrapper .border-primary\/20 { border-color: rgba(26, 117, 159, 0.2) !important; }
.homepage-wrapper .border-primary\/30 { border-color: rgba(26, 117, 159, 0.3) !important; }
.homepage-wrapper .border-primary\/40 { border-color: rgba(26, 117, 159, 0.4) !important; }
.homepage-wrapper .border-secondary\/20 { border-color: rgba(82, 182, 154, 0.2) !important; }
.homepage-wrapper .border-secondary\/30 { border-color: rgba(82, 182, 154, 0.3) !important; }
.homepage-wrapper .border-secondary\/40 { border-color: rgba(82, 182, 154, 0.4) !important; }
.homepage-wrapper .border-success\/20 { border-color: rgba(118, 200, 147, 0.2) !important; }
.homepage-wrapper .border-success\/40 { border-color: rgba(118, 200, 147, 0.4) !important; }
.homepage-wrapper .border-warning\/20 { border-color: rgba(52, 160, 164, 0.2) !important; }
.homepage-wrapper .border-warning\/40 { border-color: rgba(52, 160, 164, 0.4) !important; }
.homepage-wrapper .border-info\/20 { border-color: rgba(22, 138, 173, 0.2) !important; }
.homepage-wrapper .border-info\/40 { border-color: rgba(22, 138, 173, 0.4) !important; }
.homepage-wrapper .border-purple-500\/20 { border-color: rgba(30, 96, 145, 0.2) !important; }
.homepage-wrapper .border-purple-500\/40 { border-color: rgba(30, 96, 145, 0.4) !important; }
.homepage-wrapper .border-orange-500\/20 { border-color: rgba(82, 182, 154, 0.2) !important; }
.homepage-wrapper .border-orange-500\/40 { border-color: rgba(82, 182, 154, 0.4) !important; }
.homepage-wrapper .hover\:border-primary\/30:hover { border-color: rgba(26, 117, 159, 0.3) !important; }
.homepage-wrapper .hover\:border-primary\/40:hover { border-color: rgba(26, 117, 159, 0.4) !important; }
.homepage-wrapper .hover\:border-secondary\/40:hover { border-color: rgba(82, 182, 154, 0.4) !important; }
.homepage-wrapper .hover\:border-success\/30:hover { border-color: rgba(118, 200, 147, 0.3) !important; }
.homepage-wrapper .hover\:border-success\/40:hover { border-color: rgba(118, 200, 147, 0.4) !important; }
.homepage-wrapper .hover\:border-warning\/30:hover { border-color: rgba(52, 160, 164, 0.3) !important; }
.homepage-wrapper .hover\:border-warning\/40:hover { border-color: rgba(52, 160, 164, 0.4) !important; }
.homepage-wrapper .hover\:border-info\/40:hover { border-color: rgba(22, 138, 173, 0.4) !important; }
.homepage-wrapper .hover\:border-purple-500\/40:hover { border-color: rgba(30, 96, 145, 0.4) !important; }
.homepage-wrapper .hover\:border-orange-500\/40:hover { border-color: rgba(82, 182, 154, 0.4) !important; }
/* Hover shadow effects */
.homepage-wrapper .hover\:shadow-primary\/10:hover { --tw-shadow-color: rgba(26, 117, 159, 0.1) !important; }
.homepage-wrapper .hover\:shadow-primary\/30:hover { --tw-shadow-color: rgba(26, 117, 159, 0.3) !important; }
.homepage-wrapper .hover\:shadow-secondary\/10:hover { --tw-shadow-color: rgba(82, 182, 154, 0.1) !important; }
.homepage-wrapper .hover\:shadow-success\/10:hover { --tw-shadow-color: rgba(118, 200, 147, 0.1) !important; }
.homepage-wrapper .hover\:shadow-warning\/10:hover { --tw-shadow-color: rgba(52, 160, 164, 0.1) !important; }
.homepage-wrapper .hover\:shadow-info\/10:hover { --tw-shadow-color: rgba(22, 138, 173, 0.1) !important; }
.homepage-wrapper .hover\:shadow-purple-500\/10:hover { --tw-shadow-color: rgba(30, 96, 145, 0.1) !important; }
.homepage-wrapper .hover\:shadow-purple-500\/30:hover { --tw-shadow-color: rgba(30, 96, 145, 0.3) !important; }
.homepage-wrapper .hover\:shadow-blue-500\/30:hover { --tw-shadow-color: rgba(22, 138, 173, 0.3) !important; }
.homepage-wrapper .hover\:shadow-emerald-500\/30:hover { --tw-shadow-color: rgba(118, 200, 147, 0.3) !important; }
.homepage-wrapper .hover\:shadow-orange-500\/10:hover { --tw-shadow-color: rgba(82, 182, 154, 0.1) !important; }
</style>