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

feat: redesign home page layout with new hero section, feature highlights, and category showcase for improved user engagement

Browse Source
This commit is contained in:
Joseph.Rawlings
2025-12-04 01:25:08 -05:00
parent f22a45864d
commit 0e88ca5036
1 changed files with 76 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
themes/default/views/home.blade.php
View File

@@ -1,41 +1,81 @@
<div>
<div class="flex flex-col gap-6">
<div class="mx-auto container bg-background-secondary p-4 rounded-md">
<article class="prose dark:prose-invert max-w-full">
{!! Str::markdown(theme('home_page_text', 'Welcome to Paymenter'), [
'allow_unsafe_links' => false,
'renderer' => [
'soft_break' => "<br>"
]]) !!}
</article>
<style>
/* Lightweight raw CSS overrides for the home page only */
.hero-gradient{background:linear-gradient(135deg,#171717 0%,#111827 100%)}
.icon-box{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border:1px solid rgba(255,255,255,.08);border-radius:.75rem;background:rgba(255,255,255,.03);transition:all .3s ease-in-out}
.icon-box:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.15)}
.icon-box svg{width:22px;height:22px}
.announcements-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:.75rem;padding:1.25rem;margin-top:2rem}
.announcements-card h3{margin-bottom:1rem;font-weight:600;font-size:1.125rem}
.announcements-item{padding:.5rem 0;border-bottom:1px dashed rgba(255,255,255,.08)}
.announcements-item:last-child{border-bottom:none}
</style>
<section class="hero-gradient text-center py-16 md:py-24 text-white">
<div class="container mx-auto px-4">
<h1 class="text-4xl md:text-6xl font-extrabold mb-4 tracking-tight">Experience Powerful Hosting</h1>
<p class="text-lg md:text-xl max-w-2xl mx-auto opacity-80">Deploy, manage and scale your services effortlessly with real-time insights and a sleek client portal.</p>
<div class="mt-8 flex flex-col sm:flex-row gap-4 justify-center">
<a href="#products" class="inline-block px-6 py-3 rounded-md bg-primary hover:bg-primary/90 text-white font-medium">Browse Products</a>
<a href="#features" class="inline-block px-6 py-3 rounded-md border border-white/20 hover:bg-white/10 font-medium">Portal Features</a>
</div>
<div class="mx-auto container rounded-md grid md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
@foreach ($categories as $category)
<div class="flex flex-col bg-background-secondary hover:bg-background-secondary/80 border border-neutral p-4 rounded-lg">
@if(theme('small_images', false))
<div class="flex gap-x-3 items-center">
@endif
@if ($category->image)
<img src="{{ Storage::url($category->image) }}" alt="{{ $category->name }}"
class="rounded-md {{ theme('small_images', false) ? 'w-14 h-fit' : 'w-full object-cover object-center' }}">
@endif
<h2 class="text-xl font-bold">{{ $category->name }}</h2>
@if(theme('small_images', false))
</div>
@endif
@if(theme('show_category_description', true))
<article class="mt-2 prose dark:prose-invert">
{!! $category->description !!}
</article>
@endif
<a href="{{ route('category.show', ['category' => $category->slug]) }}" wire:navigate class="mt-2">
<x-button.primary>
{{ __('general.view') }}
</x-button.primary>
</a>
</div>
</section>
<!-- Quick feature highlights -->
<section id="features" class="container mx-auto px-4 -mt-20 mb-14 relative z-10">
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div class="icon-box">
<x-ri-global-line class="text-primary" />
<span class="text-sm font-semibold">Full IPv4 / IPv6 Access</span>
</div>
<div class="icon-box">
<x-ri-router-line class="text-success" />
<span class="text-sm font-semibold">Live Network States</span>
</div>
<div class="icon-box">
<x-ri-shield-keyhole-line class="text-warning" />
<span class="text-sm font-semibold">Adjustable Firewall Rules</span>
</div>
<div class="icon-box">
<x-ri-speed-up-line class="text-info" />
<span class="text-sm font-semibold">Resource Graphs &amp; Metrics</span>
</div>
</div>
</section>
<!-- Category Showcase (products) -->
<section id="products" class="container mx-auto px-4 mb-16">
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
@foreach ($categories as $category)
<div class="bg-background-secondary border border-neutral/40 rounded-xl p-5 hover:shadow-xl transition shadow-md flex flex-col">
@if ($category->image)
<img src="{{ Storage::url($category->image) }}" alt="{{ $category->name }}" class="rounded-lg w-full h-28 object-cover mb-4">
@endif
<h2 class="text-lg font-bold mb-2">{{ $category->name }}</h2>
@if(theme('show_category_description', true))
<p class="text-sm opacity-80 flex-grow">{!! Str::words(strip_tags($category->description), 18) !!}</p>
@endif
<a href="{{ route('category.show', ['category' => $category->slug]) }}" wire:navigate class="mt-4 inline-block text-center px-4 py-2 rounded-md bg-primary text-white hover:bg-primary/90">{{ __('general.view') }}</a>
</div>
@endforeach
</div>
</section>
<!-- Announcements -->
@php($announcements = \App\Models\Announcement::latest()->take(3)->get())
@if($announcements->count())
<section class="container mx-auto px-4">
<div class="announcements-card">
<h3 class="flex items-center gap-2"><x-ri-megaphone-fill class="text-primary"/>Latest Announcements</h3>
@foreach($announcements as $note)
<div class="announcements-item flex justify-between items-center">
<span>{!! $note->title !!}</span>
<span class="text-xs opacity-60">{{ $note->created_at->format('M d, Y') }}</span>
</div>
@endforeach
</div>
</div>
{!! hook('pages.home') !!}
</section>
@endif
{!! hook('pages.home') !!}
</div>