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

feat: simplify homepage layout by removing redundant sections, enhancing the hero section, and updating testimonials for improved clarity and engagement

Browse Source
This commit is contained in:
Joseph.Rawlings
2025-12-04 09:35:58 -05:00
parent 71a4d044fe
commit 93bd9b74c4
1 changed files with 90 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,54 +1,14 @@
<div class="min-h-screen">
@if(theme('homepage_layout', 'landing') === 'landing')
<!-- Landing Page Layout -->
<!-- Custom HTML Section -->
@if(theme('custom_homepage_html'))
<div class="custom-homepage-content">
{!! theme('custom_homepage_html') !!}
</div>
@endif
<!-- Hero Section -->
<section class="relative isolate overflow-hidden bg-gradient-to-b from-background-primary via-background to-background-secondary/50 pt-18 pb-32 px-8">
@if(theme('background_image_url'))
<div class="background-image-layer"
style="position: absolute;
top: 0;
left: 0;
width: 100%;
min-height: 100%;
background-image: url('{{ theme('background_image_url') }}');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: scroll;
opacity: {{ theme('background_image_opacity', 30) / 100 }};
filter: blur({{ theme('background_image_blur', 5) }}px);
z-index: -2;
pointer-events: none;
-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 75%);
mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 75%);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;">
</div>
@endif
<svg class="absolute inset-0 -z-10 h-full w-full stroke-primary/15 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)]" aria-hidden="true">
<defs>
<pattern id="grid-pattern" width="80" height="80" x="50%" y="-1" patternUnits="userSpaceOnUse">
<path d="M.5 80V.5H80" fill="none" />
</pattern>
</defs>
<rect width="100%" height="100%" strokeWidth="0" fill="url(#grid-pattern)" />
</svg>
<div class="mt-20 container mx-auto px-4 lg:px-8 relative z-10">
<div class="max-w-7xl lg:grid lg:grid-cols-12 lg:gap-x-8 lg:px-0">
<div class="lg:col-span-7 lg:px-0 lg:pt-4">
<div class="text-center max-w-5xl mx-auto">
<!-- Homepage-specific custom HTML -->
@if(theme('custom_homepage_html'))
<div class="custom-homepage-content">
{!! theme('custom_homepage_html') !!}
</div>
@endif
<!-- Hero Section -->
<div class="relative overflow-hidden">
<div class="container mx-auto px-4 py-20 md:py-24 relative z-10">
<div class="text-center max-w-5xl mx-auto">
<!-- Hero Badge -->
<div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full border border-primary/30 bg-primary/10 text-primary text-xs font-semibold mb-6 animate-fade-in-up">
<x-ri-sparkling-2-fill class="size-4" />
@@ -131,25 +91,11 @@
<span class="text-xs font-semibold">DDoS Protected</span>
</div>
</div>
</div>
<!-- Hero Image/Illustration -->
<div class="mt-16 sm:mt-24 lg:col-span-5 lg:mt-0">
<div class="relative mb-8">
@php
$heroImg = theme('homepage_hero_illustration_url') ?: 'https://pngimg.com/d/minecraft_PNG40.png';
$heroAlt = theme('homepage_hero_illustration_alt', 'Hero Illustration');
@endphp
<div class="absolute -inset-4 rounded-full bg-gradient-to-r from-primary/20 to-secondary/20 blur-2xl opacity-25 pointer-events-none"></div>
<img src="{{ $heroImg }}" alt="{{ $heroAlt }}" class="relative w-full h-auto object-contain animate-float" />
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<!-- Stats Section -->
<!-- Stats Section -->
<div class="py-16 md:py-24">
<div class="container mx-auto px-4">
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-8">
@@ -480,116 +426,89 @@
</div>
</div>
</div>
<!--
<!-- Testimonials Section -->
<section class="relative py-20 bg-gradient-to-b from-background/50 via-background-secondary/20 to-background-secondary/40 px-8">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-4xl font-bold text-color-base mb-4">
{{ theme('testimonials_title', 'What Customers Say') }}
</h2>
<p class="text-lg text-color-muted max-w-2xl mx-auto">
{{ theme('testimonials_subtitle', 'Join thousands of satisfied customers') }}
</p>
</div>
<div class="py-20">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-4xl md:text-5xl font-bold text-color-base mb-6">
{{ theme('testimonials_title', 'What Gamers Say') }}
</h2>
<p class="text-xl text-color-muted max-w-2xl mx-auto">
{{ theme('testimonials_subtitle', 'Join thousands of satisfied customers who\'ve made the switch to premium hosting') }}
</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
@for ($i = 1; $i <= 3; $i++)
<div class="p-8 rounded-2xl bg-background-secondary/80 border border-neutral hover:border-primary/30 transition-all duration-300">
<div class="flex items-center gap-4 mb-6">
<div class="w-12 h-12 rounded-full bg-gradient-to-br from-primary to-primary/60 flex items-center justify-center text-white font-bold">
{{ substr(theme("testimonial_{$i}_name", 'Customer'), 0, 1) }}
</div>
<div>
<h4 class="font-bold text-color-base">{{ theme("testimonial_{$i}_name", 'Customer Name') }}</h4>
<p class="text-sm text-color-muted">{{ theme("testimonial_{$i}_role", 'Role') }}</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-gradient-to-br from-background-secondary/80 to-background-secondary/40 backdrop-blur-sm border border-primary/20 p-8 rounded-2xl transform transition-all duration-300 hover:scale-105 hover:border-primary/40">
<div class="flex items-center mb-6">
<div class="w-12 h-12 bg-gradient-to-br from-primary to-primary/80 rounded-full flex items-center justify-center mr-4">
<span class="text-white font-bold">{{ substr(theme('testimonial_1_name', 'John Doe'), 0, 1) }}{{ substr(explode(' ', theme('testimonial_1_name', 'John Doe'))[1] ?? '', 0, 1) }}</span>
</div>
<p class="text-color-muted italic mb-4">"{{ theme("testimonial_{$i}_quote", 'Great service!') }}"</p>
<div class="flex gap-1">
@for ($j = 0; $j < 5; $j++)
<x-ri-star-fill class="h-4 w-4 text-warning" />
@endfor
<div>
<h4 class="font-bold text-color-base">{{ theme('testimonial_1_name', 'John Doe') }}</h4>
<p class="text-color-muted text-sm">{{ theme('testimonial_1_role', 'Minecraft Server Admin') }}</p>
</div>
</div>
@endfor
<p class="text-color-muted italic mb-4 text-lg">"{{ theme('testimonial_1_quote', 'Best hosting service I\'ve ever used. Zero downtime and lightning-fast support response!') }}"</p>
<div class="flex text-warning text-lg">
<x-ri-star-fill class="size-5 text-warning" />
<x-ri-star-fill class="size-5 text-warning" />
<x-ri-star-fill class="size-5 text-warning" />
<x-ri-star-fill class="size-5 text-warning" />
<x-ri-star-fill class="size-5 text-warning" />
</div>
</div>
<div class="bg-gradient-to-br from-background-secondary/80 to-background-secondary/40 backdrop-blur-sm border border-secondary/20 p-8 rounded-2xl transform transition-all duration-300 hover:scale-105 hover:border-secondary/40">
<div class="flex items-center mb-6">
<div class="w-12 h-12 bg-gradient-to-br from-secondary to-secondary/80 rounded-full flex items-center justify-center mr-4">
<span class="text-white font-bold">{{ substr(theme('testimonial_2_name', 'Sarah Anderson'), 0, 1) }}{{ substr(explode(' ', theme('testimonial_2_name', 'Sarah Anderson'))[1] ?? '', 0, 1) }}</span>
</div>
<div>
<h4 class="font-bold text-color-base">{{ theme('testimonial_2_name', 'Sarah Anderson') }}</h4>
<p class="text-color-muted text-sm">{{ theme('testimonial_2_role', 'Gaming Community Leader') }}</p>
</div>
</div>
<p class="text-color-muted italic mb-4 text-lg">"{{ theme('testimonial_2_quote', 'The performance boost was incredible. My players love the zero-lag experience!') }}"</p>
<div class="flex text-warning text-lg">
<x-ri-star-fill class="size-5 text-warning" />
<x-ri-star-fill class="size-5 text-warning" />
<x-ri-star-fill class="size-5 text-warning" />
<x-ri-star-fill class="size-5 text-warning" />
<x-ri-star-fill class="size-5 text-warning" />
</div>
</div>
<div class="bg-gradient-to-br from-background-secondary/80 to-background-secondary/40 backdrop-blur-sm border border-success/20 p-8 rounded-2xl transform transition-all duration-300 hover:scale-105 hover:border-success/40">
<div class="flex items-center mb-6">
<div class="w-12 h-12 bg-gradient-to-br from-success to-success/80 rounded-full flex items-center justify-center mr-4">
<span class="text-white font-bold">{{ substr(theme('testimonial_3_name', 'Mike Rodriguez'), 0, 1) }}{{ substr(explode(' ', theme('testimonial_3_name', 'Mike Rodriguez'))[1] ?? '', 0, 1) }}</span>
</div>
<div>
<h4 class="font-bold text-color-base">{{ theme('testimonial_3_name', 'Sarah Anderson') }}</h4>
<p class="text-color-muted text-sm">{{ theme('testimonial_3_role', 'Gaming Community Leader') }}</p>
</div>
</div>
<p class="text-color-muted italic mb-4 text-lg">"{{ theme('testimonial_3_quote', 'Professional grade hosting at an affordable price. Couldn\'t ask for more!') }}"</p>
<div class="flex text-warning text-lg">
<x-ri-star-fill class="size-5 text-warning" />
<x-ri-star-fill class="size-5 text-warning" />
<x-ri-star-fill class="size-5 text-warning" />
<x-ri-star-fill class="size-5 text-warning" />
<x-ri-star-fill class="size-5 text-warning" />
</div>
</div>
</div>
</section>
</div>
</div>
-->
<!-- FAQ Section -->
<section class="relative py-20 bg-gradient-to-b from-background-secondary/40 via-background to-background-secondary/20 px-8">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-4xl font-bold text-color-base mb-4">
{{ theme('faq_title', 'Frequently Asked Questions') }}
</h2>
<p class="text-lg text-color-muted max-w-2xl mx-auto">
{{ theme('faq_subtitle', 'Find answers to common questions about our services') }}
</p>
</div>
<div class="max-w-7xl mx-auto w-full" x-data="{ openFaq: null }">
<div class="space-y-4">
@php
$faqs = [
[
'question' => 'How quickly can I get my server up and running?',
'answer' => 'Your server will be automatically deployed within 60 seconds after payment confirmation. Our automated system ensures instant setup with zero manual intervention required.'
],
[
'question' => 'What payment methods do you accept?',
'answer' => 'We accept all major payment methods including credit/debit cards, PayPal, cryptocurrency, and local payment options. All transactions are secured with industry-standard encryption.'
],
[
'question' => 'Can I upgrade or downgrade my plan anytime?',
'answer' => 'Yes! You can upgrade or downgrade your hosting plan at any time through your dashboard. Changes take effect immediately, and we\'ll pro-rate any pricing differences.'
],
[
'question' => 'Do you offer refunds if I\'m not satisfied?',
'answer' => 'We offer a 30-day money-back guarantee. If you\'re not completely satisfied with our service within the first 30 days, contact our support team for a full refund.'
],
[
'question' => 'What kind of support do you provide?',
'answer' => 'We provide 24/7 customer support through live chat, email, and ticket system. Our expert team is always ready to help you with technical issues, setup assistance, or any questions.'
],
[
'question' => 'How do you handle DDoS attacks?',
'answer' => 'All our servers come with enterprise-grade DDoS protection that automatically detects and mitigates attacks in real-time, ensuring your server stays online even during large-scale attacks.'
]
];
@endphp
@foreach($faqs as $index => $faq)
<div class="group border border-neutral rounded-xl overflow-hidden bg-background-secondary hover:border-primary/30 transition-all duration-300">
<button
@click="openFaq = openFaq === {{ $index }} ? null : {{ $index }}"
class="w-full flex items-center justify-between p-6 text-left"
:aria-expanded="openFaq === {{ $index }}"
>
<span class="text-lg font-semibold text-color-base pr-8">
{{ theme('faq_'.($index + 1).'_question', $faq['question']) }}
</span>
<span class="flex-shrink-0 transition-transform duration-300"
:class="{ 'rotate-45': openFaq === {{ $index }} }">
<x-ri-add-line class="h-6 w-6 text-primary" />
</span>
</button>
<div
x-show="openFaq === {{ $index }}"
x-collapse
class="overflow-hidden"
>
<div class="px-6 pb-6 text-color-muted leading-relaxed">
{{ theme('faq_'.($index + 1).'_answer', $faq['answer']) }}
</div>
</div>
</div>
@endforeach
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<div class="py-12 md:py-16 bg-gradient-to-br from-background-secondary/50 to-background-secondary/30 rounded-2xl">
@@ -624,18 +543,7 @@
</div>
</div>
<div class="mt-16 mb-8">
{!! hook('pages.home') !!}
</div>
@else
<!-- Portal Page Layout - To be added in next step -->
<!-- Custom HTML Section -->
@if(theme('custom_homepage_html'))
<div class="custom-homepage-content">
{!! theme('custom_homepage_html') !!}
</div>
@endif
<!-- Portal layout content will be added here -->
@endif
<div class="mt-16 mb-8">
{!! hook('pages.home') !!}
</div>
</div>