90 lines
4.6 KiB
PHP
90 lines
4.6 KiB
PHP
<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>
|
|
</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 & 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>
|
|
<<<<<<< Current (Your changes)
|
|
</section>
|
|
@endif
|
|
|
|
{!! hook('pages.home') !!}
|
|
=======
|
|
<div class="mx-auto container announcements">
|
|
<h2>{{ __('Announcements') }}</h2>
|
|
{!! hook('pages.home') !!}
|
|
</div>
|
|
</div>
|
|
>>>>>>> Incoming (Background Agent changes)
|
|
</div>
|