865 lines
64 KiB
PHP
865 lines
64 KiB
PHP
<div class="homepage-wrapper" x-data="{ scrollY: 0 }" @scroll.window="scrollY = window.scrollY">
|
|
|
|
<!-- Homepage-specific custom HTML -->
|
|
@if(theme('custom_homepage_html'))
|
|
<div class="custom-homepage-content">
|
|
{!! theme('custom_homepage_html') !!}
|
|
</div>
|
|
@endif
|
|
|
|
{{-- ═══════════════════════════════════════════════════════════════
|
|
SECTION 1 — HERO (full viewport, always visible)
|
|
═══════════════════════════════════════════════════════════════ --}}
|
|
<section class="relative flex items-center overflow-hidden" style="min-height: calc(100dvh - var(--nav-h, 4rem));">
|
|
<!-- Parallax ambient blobs -->
|
|
<div class="absolute inset-0 pointer-events-none overflow-hidden">
|
|
<div class="absolute -top-40 -right-40 w-[500px] h-[500px] bg-primary/20 rounded-full blur-[120px] animate-pulse"
|
|
:style="'transform: translateY(' + (scrollY * 0.15) + 'px)'"></div>
|
|
<div class="absolute top-1/2 -left-32 w-[400px] h-[400px] bg-secondary/15 rounded-full blur-[100px] animate-pulse"
|
|
:style="'transform: translateY(' + (scrollY * -0.1) + 'px)'"></div>
|
|
<div class="absolute bottom-20 right-1/4 w-[350px] h-[350px] bg-info/10 rounded-full blur-[100px] animate-pulse"
|
|
:style="'transform: translateY(' + (scrollY * -0.2) + 'px)'"></div>
|
|
</div>
|
|
|
|
<div class="container mx-auto px-4 relative z-10">
|
|
<div class="flex flex-col lg:flex-row items-center gap-12 lg:gap-20">
|
|
<!-- Left Content -->
|
|
<div class="flex-1 text-center lg:text-left max-w-2xl">
|
|
<!-- Floating Badges -->
|
|
<div class="inline-flex flex-wrap items-center gap-2 mb-8 hp-reveal" data-delay="0">
|
|
@foreach([
|
|
['homepage_badge_1', 'VPS Hosting'],
|
|
['homepage_badge_2', 'Website Hosting'],
|
|
['homepage_badge_3', 'BGP Transit'],
|
|
['homepage_badge_4', 'Contracted Support'],
|
|
] as $i => $badge)
|
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-gradient-to-r from-primary/20 to-secondary/20 border border-primary/30 backdrop-blur-sm">
|
|
<span class="relative flex h-2 w-2">
|
|
<span class="animate-ping absolute inline-flex h-full w-full rounded-full {{ $i % 2 === 0 ? 'bg-primary' : 'bg-secondary' }} opacity-75"></span>
|
|
<span class="relative inline-flex rounded-full h-2 w-2 {{ $i % 2 === 0 ? 'bg-primary' : 'bg-secondary' }}"></span>
|
|
</span>
|
|
<span class="text-sm font-medium text-color-base">{{ theme($badge[0], $badge[1]) }}</span>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
|
|
<!-- 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="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>
|
|
</h1>
|
|
|
|
<!-- Hero Description -->
|
|
<p class="text-lg md:text-xl text-color-muted leading-relaxed mb-10 max-w-xl hp-reveal" data-delay="200">
|
|
{{ theme('homepage_hero_desc', 'Experience enterprise-grade virtual private servers with our powerful control panel. Real-time monitoring, advanced firewall management, automated backups, and full console access.') }}
|
|
</p>
|
|
|
|
<!-- CTA Group -->
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start hp-reveal" data-delay="300">
|
|
<a href="#services" class="group relative inline-flex items-center justify-center gap-3 bg-primary hover:bg-primary/90 text-white px-8 py-4 rounded-2xl font-semibold text-lg transition-all duration-300 shadow-lg shadow-primary/25 hover:shadow-xl hover:shadow-primary/30 hover:-translate-y-1">
|
|
<x-ri-rocket-2-fill class="size-5" />
|
|
<span>{{ theme('hero_cta_primary_text', 'Deploy Your VPS') }}</span>
|
|
<x-ri-arrow-right-line class="size-5 group-hover:translate-x-1 transition-transform" />
|
|
</a>
|
|
<a href="#panel-features" class="group inline-flex items-center justify-center gap-3 bg-background-secondary/80 hover:bg-background-secondary border border-neutral/50 hover:border-primary/30 text-color-base px-8 py-4 rounded-2xl font-semibold text-lg transition-all duration-300 backdrop-blur-sm hover:-translate-y-1">
|
|
<x-ri-play-circle-line class="size-5" />
|
|
<span>{{ theme('hero_cta_secondary_text', 'See Features') }}</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Side — Feature Preview Card -->
|
|
<div class="flex-1 relative w-full max-w-lg lg:max-w-xl hp-reveal" data-delay="200">
|
|
<div class="relative" :style="'transform: translateY(' + (scrollY * -0.06) + 'px)'">
|
|
<!-- Main Dashboard Card -->
|
|
<div class="relative bg-gradient-to-br from-background-secondary/90 to-background-secondary/60 backdrop-blur-xl border border-neutral/30 rounded-3xl p-6 shadow-2xl">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<div class="w-3 h-3 rounded-full bg-error"></div>
|
|
<div class="w-3 h-3 rounded-full bg-warning"></div>
|
|
<div class="w-3 h-3 rounded-full bg-success"></div>
|
|
<span class="ml-2 text-sm text-color-muted font-mono">control-panel</span>
|
|
</div>
|
|
<div class="space-y-4">
|
|
<div class="flex items-center justify-between p-3 bg-background/50 rounded-xl">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-lg bg-success/20 flex items-center justify-center">
|
|
<x-ri-server-line class="size-5 text-success" />
|
|
</div>
|
|
<div>
|
|
<div class="font-semibold text-sm">VPS-001</div>
|
|
<div class="text-xs text-color-muted">Running • 4 vCPU • 8GB RAM</div>
|
|
</div>
|
|
</div>
|
|
<span class="px-2 py-1 bg-success/20 text-success text-xs font-medium rounded-full">Online</span>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-3">
|
|
<div class="p-3 bg-background/50 rounded-xl">
|
|
<div class="text-xs text-color-muted mb-1">CPU Usage</div>
|
|
<div class="flex items-end gap-2">
|
|
<span class="text-2xl font-bold text-primary">23%</span>
|
|
<div class="flex-1 h-8 flex items-end gap-0.5">
|
|
@for($i = 0; $i < 12; $i++)
|
|
<span class="mini-chart-bar" style="--delay: {{ $i * 0.1 }}s; --h1: {{ rand(30,90) }}%; --h2: {{ rand(30,90) }}%; --h3: {{ rand(30,90) }}%; --h4: {{ rand(30,90) }}%;"></span>
|
|
@endfor
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-3 bg-background/50 rounded-xl">
|
|
<div class="text-xs text-color-muted mb-1">Memory</div>
|
|
<div class="flex items-end gap-2">
|
|
<span class="text-2xl font-bold text-secondary">4.2GB</span>
|
|
<span class="text-xs text-color-muted mb-1">/ 8GB</span>
|
|
</div>
|
|
<div class="mt-2 h-2 bg-background rounded-full overflow-hidden">
|
|
<div class="h-full w-[52%] bg-gradient-to-r from-secondary to-secondary/70 rounded-full"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Floating accent icons -->
|
|
<div class="absolute -top-4 -right-4 bg-gradient-to-br from-primary to-primary/80 text-white p-4 rounded-2xl shadow-lg shadow-primary/30 animate-float">
|
|
<x-ri-shield-check-fill class="size-6" />
|
|
</div>
|
|
<div class="absolute -bottom-4 -left-4 bg-gradient-to-br from-success to-success/80 text-white p-4 rounded-2xl shadow-lg shadow-success/30 animate-float animation-delay-200">
|
|
<x-ri-database-2-fill class="size-6" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scroll indicator -->
|
|
<div class="absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 text-color-muted/50 hp-reveal" data-delay="600">
|
|
<span class="text-xs uppercase tracking-widest">Scroll</span>
|
|
<div class="w-6 h-10 border-2 border-current rounded-full flex items-start justify-center p-1.5">
|
|
<div class="w-1.5 h-3 bg-current rounded-full animate-scroll-dot"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{-- ═══════════════════════════════════════════════════════════════
|
|
SECTION 2 — SERVICES
|
|
═══════════════════════════════════════════════════════════════ --}}
|
|
<section id="services" class="relative py-24 md:py-32">
|
|
<div class="container mx-auto px-4">
|
|
<div class="hp-reveal" data-delay="0">
|
|
<p class="text-sm font-medium text-primary uppercase tracking-widest mb-3 text-center">What We Offer</p>
|
|
<h2 class="text-3xl md:text-5xl font-bold text-color-base mb-4 text-center">
|
|
{{ theme('services_title', 'Our Services') }}
|
|
</h2>
|
|
<p class="text-base md:text-lg text-color-muted leading-relaxed max-w-2xl mx-auto text-center mb-16">
|
|
{{ 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>
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
@foreach ($categories as $index => $category)
|
|
<div class="hp-reveal" data-delay="{{ $index * 100 }}">
|
|
<div class="group h-full bg-background-secondary/60 hover:bg-background-secondary border border-neutral/20 hover:border-primary/40 rounded-3xl p-8 transition-all duration-500 hover:shadow-2xl hover:shadow-primary/10 hover:-translate-y-3">
|
|
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-primary/20 to-primary/5 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-500">
|
|
<x-ri-server-line class="size-7 text-primary" />
|
|
</div>
|
|
<h3 class="text-xl font-bold text-color-base mb-3 group-hover:text-primary transition-colors duration-300">
|
|
{{ $category->name }}
|
|
</h3>
|
|
@if(theme('show_category_description', true))
|
|
<div class="text-color-muted text-sm leading-relaxed mb-8 line-clamp-3">
|
|
{!! strip_tags($category->description) !!}
|
|
</div>
|
|
@endif
|
|
<a href="{{ route('category.show', ['category' => $category->slug]) }}" wire:navigate
|
|
class="inline-flex items-center gap-2 text-primary font-semibold text-sm group-hover:gap-3 transition-all duration-300">
|
|
<span>{{ __('general.view') }}</span>
|
|
<x-ri-arrow-right-line class="size-4" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{-- ═══════════════════════════════════════════════════════════════
|
|
SECTION 3 — CONTROL PANEL FEATURES (Bento)
|
|
═══════════════════════════════════════════════════════════════ --}}
|
|
<section id="panel-features" class="relative py-24 md:py-32">
|
|
<!-- Background gradient transition -->
|
|
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-background-secondary/30 to-transparent pointer-events-none"></div>
|
|
|
|
<div class="container mx-auto px-4 relative z-10">
|
|
<!-- Section Header -->
|
|
<div class="text-center max-w-2xl mx-auto mb-16 hp-reveal" data-delay="0">
|
|
<p class="text-sm font-medium text-primary uppercase tracking-widest mb-3">Control Panel</p>
|
|
<h2 class="text-3xl md:text-5xl font-bold text-color-base mb-4">
|
|
{{ theme('panel_title', 'Complete Server Management') }}
|
|
</h2>
|
|
<p class="text-base md:text-lg 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>
|
|
|
|
<!-- Row 1: Live Telemetry + VNC Console -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
|
|
<!-- Live Telemetry -->
|
|
<div class="hp-reveal" data-delay="0">
|
|
<div class="group relative overflow-hidden bg-gradient-to-br from-primary/5 via-background-secondary to-background-secondary border border-primary/20 hover:border-primary/40 rounded-3xl p-8 transition-all duration-500 hover:shadow-2xl hover:shadow-primary/10 h-full">
|
|
<div class="absolute top-0 right-0 w-64 h-64 bg-primary/10 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2 group-hover:scale-150 transition-transform duration-700"></div>
|
|
<div class="relative z-10">
|
|
<div class="flex items-start justify-between mb-5">
|
|
<div class="w-12 h-12 rounded-2xl flex items-center justify-center" style="background: linear-gradient(to bottom right, #93c5fd, #60a5fa); box-shadow: 0 10px 15px -3px rgba(96, 165, 250, 0.3);">
|
|
<x-ri-line-chart-line class="size-6 text-white" />
|
|
</div>
|
|
<div class="flex gap-1.5">
|
|
<span class="px-2.5 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">CPU</span>
|
|
<span class="px-2.5 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">RAM</span>
|
|
<span class="px-2.5 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">Network</span>
|
|
</div>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-color-base mb-2">Live Telemetry</h3>
|
|
<p class="text-color-muted text-sm leading-relaxed mb-5">Monitor CPU, memory, network, and disk I/O with interactive charts. Track performance over time.</p>
|
|
<div style="display: flex; align-items: flex-end; gap: 3px; padding: 12px; background: rgba(0,0,0,0.1); border-radius: 12px; height: 80px;">
|
|
@for($i = 0; $i < 18; $i++)
|
|
<span class="chart-bar" style="--delay: {{ $i * 0.08 }}s; --h1: {{ rand(30,95) }}%; --h2: {{ rand(30,95) }}%; --h3: {{ rand(30,95) }}%; --h4: {{ rand(30,95) }}%;"></span>
|
|
@endfor
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- VNC Console -->
|
|
<div class="hp-reveal" data-delay="150">
|
|
<div class="group relative overflow-hidden bg-gradient-to-br from-info/5 via-background-secondary to-background-secondary border border-info/20 hover:border-info/40 rounded-3xl p-8 transition-all duration-500 hover:shadow-2xl hover:shadow-info/10 h-full">
|
|
<div class="absolute bottom-0 right-0 w-48 h-48 bg-info/10 rounded-full blur-3xl translate-y-1/2 translate-x-1/2 group-hover:scale-150 transition-transform duration-700"></div>
|
|
<div class="relative z-10 h-full flex flex-col">
|
|
<div class="w-12 h-12 rounded-2xl flex items-center justify-center mb-5" style="background: linear-gradient(to bottom right, #c4b5fd, #a78bfa); box-shadow: 0 10px 15px -3px rgba(167, 139, 250, 0.3);">
|
|
<x-ri-terminal-box-line class="size-6 text-white" />
|
|
</div>
|
|
<h3 class="text-xl font-bold text-color-base mb-2">VNC Console</h3>
|
|
<p class="text-color-muted text-sm leading-relaxed mb-5 flex-1">Direct web-based access to your VPS. Perfect for OS installation and recovery mode.</p>
|
|
<div style="padding: 14px; background: #0d1117; border-radius: 12px; font-family: 'Courier New', monospace; font-size: 13px; border: 1px solid #30363d;">
|
|
<span style="color: #58a6ff; font-weight: 600;">root@vps</span><span style="color: #8b949e;">:</span><span style="color: #7ee787; font-weight: 600;">~</span><span style="color: #8b949e;">$</span> <span id="terminal-text" style="color: #f0f6fc;"></span><span id="terminal-cursor" style="color: #58a6ff;">█</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Terminal typing script -->
|
|
<script>
|
|
(function() {
|
|
const commands = ['systemctl status nginx','htop','df -h','free -m','uname -a','ls -la /var/www','tail -f /var/log/syslog','netstat -tulpn','docker ps','cat /etc/os-release','uptime','whoami','ip addr show'];
|
|
const textEl = document.getElementById('terminal-text');
|
|
const cursorEl = document.getElementById('terminal-cursor');
|
|
if (!textEl || !cursorEl) return;
|
|
let currentText = '', isTyping = true, commandIndex = Math.floor(Math.random() * commands.length), charIndex = 0;
|
|
setInterval(() => { cursorEl.style.opacity = cursorEl.style.opacity === '0' ? '1' : '0'; }, 530);
|
|
function type() {
|
|
const command = commands[commandIndex];
|
|
if (isTyping) {
|
|
if (charIndex < command.length) { currentText += command[charIndex]; textEl.textContent = currentText; charIndex++; setTimeout(type, 50 + Math.random() * 100); }
|
|
else { setTimeout(() => { isTyping = false; type(); }, 2000 + Math.random() * 1500); }
|
|
} else {
|
|
if (currentText.length > 0) { currentText = currentText.slice(0, -1); textEl.textContent = currentText; setTimeout(type, 30 + Math.random() * 40); }
|
|
else { isTyping = true; charIndex = 0; let n; do { n = Math.floor(Math.random() * commands.length); } while (n === commandIndex && commands.length > 1); commandIndex = n; setTimeout(type, 500 + Math.random() * 500); }
|
|
}
|
|
}
|
|
setTimeout(type, 1000);
|
|
})();
|
|
</script>
|
|
|
|
<!-- Row 2: Firewall + Backups -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
|
|
<!-- Firewall Manager -->
|
|
<div class="hp-reveal" data-delay="0">
|
|
<div class="group relative overflow-hidden bg-gradient-to-br from-warning/5 via-background-secondary to-background-secondary border border-warning/20 hover:border-warning/40 rounded-3xl p-6 transition-all duration-500 hover:shadow-2xl hover:shadow-warning/10 h-full">
|
|
<div class="absolute top-0 right-0 w-48 h-48 bg-warning/5 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2 group-hover:scale-150 transition-transform duration-700"></div>
|
|
<div class="relative z-10 h-full flex flex-col">
|
|
<div class="flex items-start justify-between mb-4">
|
|
<div class="w-12 h-12 rounded-2xl flex items-center justify-center" style="background: linear-gradient(to bottom right, #fcd34d, #fbbf24); box-shadow: 0 10px 15px -3px rgba(251, 191, 36, 0.3);">
|
|
<x-ri-shield-keyhole-line class="size-6 text-white" />
|
|
</div>
|
|
<div class="flex gap-1.5">
|
|
<span class="px-2 py-1 bg-warning/10 text-warning text-xs font-medium rounded-lg">Inbound</span>
|
|
<span class="px-2 py-1 bg-warning/10 text-warning text-xs font-medium rounded-lg">Outbound</span>
|
|
</div>
|
|
</div>
|
|
<h3 class="text-lg font-bold text-color-base mb-2">Firewall Manager</h3>
|
|
<p class="text-color-muted text-sm leading-relaxed mb-4">Create custom rules, manage IP aliases, and monitor real-time traffic logs to protect your server.</p>
|
|
<div class="space-y-2 mt-auto">
|
|
<div class="flex items-center gap-3 p-2.5 bg-background/50 rounded-xl border border-neutral/10">
|
|
<div class="w-2 h-2 rounded-full bg-success"></div>
|
|
<span class="text-xs text-color-muted flex-1">Allow SSH (22/tcp)</span>
|
|
<span class="text-xs text-success font-medium">Active</span>
|
|
</div>
|
|
<div class="flex items-center gap-3 p-2.5 bg-background/50 rounded-xl border border-neutral/10">
|
|
<div class="w-2 h-2 rounded-full bg-success"></div>
|
|
<span class="text-xs text-color-muted flex-1">Allow HTTP/S (80,443)</span>
|
|
<span class="text-xs text-success font-medium">Active</span>
|
|
</div>
|
|
<div class="flex items-center gap-3 p-2.5 bg-background/50 rounded-xl border border-neutral/10">
|
|
<div class="w-2 h-2 rounded-full bg-error"></div>
|
|
<span class="text-xs text-color-muted flex-1">Block 192.168.1.0/24</span>
|
|
<span class="text-xs text-error font-medium">Denied</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Backup & Snapshots -->
|
|
<div class="hp-reveal" data-delay="150">
|
|
<div class="group relative overflow-hidden bg-gradient-to-br from-success/5 via-background-secondary to-background-secondary border border-success/20 hover:border-success/40 rounded-3xl p-6 transition-all duration-500 hover:shadow-2xl hover:shadow-success/10 h-full">
|
|
<div class="absolute bottom-0 left-0 w-48 h-48 bg-success/5 rounded-full blur-3xl translate-y-1/2 -translate-x-1/2 group-hover:scale-150 transition-transform duration-700"></div>
|
|
<div class="relative z-10 h-full flex flex-col">
|
|
<div class="flex items-start justify-between mb-4">
|
|
<div class="w-12 h-12 rounded-2xl flex items-center justify-center" style="background: linear-gradient(to bottom right, #86efac, #4ade80); box-shadow: 0 10px 15px -3px rgba(74, 222, 128, 0.3);">
|
|
<x-ri-database-2-line class="size-6 text-white" />
|
|
</div>
|
|
<div class="px-2.5 py-1 bg-success/10 rounded-lg border border-success/20">
|
|
<span class="text-xs text-success font-medium">Auto-enabled</span>
|
|
</div>
|
|
</div>
|
|
<h3 class="text-lg font-bold text-color-base mb-2">Backup & Snapshots</h3>
|
|
<p class="text-color-muted text-sm leading-relaxed mb-4">Automated daily snapshots with instant one-click restore. Keep your data safe with point-in-time recovery.</p>
|
|
<div class="space-y-2 mt-auto">
|
|
<div class="flex items-center justify-between p-2.5 bg-background/50 rounded-xl border border-neutral/10">
|
|
<div class="flex items-center gap-2">
|
|
<x-ri-checkbox-circle-fill class="size-4 text-success" />
|
|
<span class="text-xs text-color-base font-medium">Daily Backup</span>
|
|
</div>
|
|
<span class="text-xs text-color-muted">2h ago</span>
|
|
</div>
|
|
<div class="flex items-center justify-between p-2.5 bg-background/50 rounded-xl border border-neutral/10">
|
|
<div class="flex items-center gap-2">
|
|
<x-ri-checkbox-circle-fill class="size-4 text-success" />
|
|
<span class="text-xs text-color-base font-medium">Weekly Snapshot</span>
|
|
</div>
|
|
<span class="text-xs text-color-muted">3 days ago</span>
|
|
</div>
|
|
<div class="flex items-center justify-between p-2.5 bg-background/50 rounded-xl border border-neutral/10">
|
|
<div class="flex items-center gap-2">
|
|
<x-ri-time-line class="size-4 text-warning" />
|
|
<span class="text-xs text-color-base font-medium">Next backup</span>
|
|
</div>
|
|
<span class="text-xs text-warning font-medium">in 22h</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Row 3: Storage + Power -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
|
|
<!-- Storage Manager -->
|
|
<div class="hp-reveal" data-delay="0">
|
|
<div class="group relative overflow-hidden bg-gradient-to-br from-purple-500/5 via-background-secondary to-background-secondary border border-purple-500/20 hover:border-purple-500/40 rounded-3xl p-6 transition-all duration-500 hover:shadow-2xl hover:shadow-purple-500/10 h-full">
|
|
<div class="absolute top-0 left-0 w-48 h-48 bg-purple-500/5 rounded-full blur-3xl -translate-y-1/2 -translate-x-1/2 group-hover:scale-150 transition-transform duration-700"></div>
|
|
<div class="relative z-10 h-full flex flex-col">
|
|
<div class="flex items-start justify-between mb-4">
|
|
<div class="w-12 h-12 rounded-2xl flex items-center justify-center" style="background: linear-gradient(to bottom right, #d8b4fe, #c084fc); box-shadow: 0 10px 15px -3px rgba(192, 132, 252, 0.3);">
|
|
<x-ri-hard-drive-2-line class="size-6 text-white" />
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="text-lg font-bold text-color-base">65 GB</div>
|
|
<div class="text-xs text-color-muted">of 100 GB used</div>
|
|
</div>
|
|
</div>
|
|
<h3 class="text-lg font-bold text-color-base mb-2">Storage Manager</h3>
|
|
<p class="text-color-muted text-sm leading-relaxed mb-4">Add, resize, or remove virtual disks on the fly. Expand storage without downtime.</p>
|
|
<div class="space-y-3 mt-auto">
|
|
<div>
|
|
<div class="flex items-center justify-between text-xs mb-1.5">
|
|
<span class="text-color-muted">System (sda1)</span>
|
|
<span class="text-purple-400 font-medium">45 GB</span>
|
|
</div>
|
|
<div class="h-2 bg-background rounded-full overflow-hidden">
|
|
<div class="h-full w-[45%] bg-gradient-to-r from-purple-500 to-purple-400 rounded-full"></div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="flex items-center justify-between text-xs mb-1.5">
|
|
<span class="text-color-muted">Data (sdb1)</span>
|
|
<span class="text-purple-400 font-medium">20 GB</span>
|
|
</div>
|
|
<div class="h-2 bg-background rounded-full overflow-hidden">
|
|
<div class="h-full w-[20%] bg-gradient-to-r from-purple-500 to-purple-400 rounded-full"></div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between pt-2 border-t border-neutral/10">
|
|
<span class="text-xs text-color-muted">Available</span>
|
|
<span class="text-xs text-success font-medium">35 GB free</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Power Controls -->
|
|
<div class="hp-reveal" data-delay="150">
|
|
<div class="group relative overflow-hidden bg-gradient-to-br from-error/5 via-background-secondary to-background-secondary border border-error/20 hover:border-error/40 rounded-3xl p-6 transition-all duration-500 hover:shadow-2xl hover:shadow-error/10 h-full">
|
|
<div class="absolute bottom-0 right-0 w-48 h-48 bg-error/5 rounded-full blur-3xl translate-y-1/2 translate-x-1/2 group-hover:scale-150 transition-transform duration-700"></div>
|
|
<div class="relative z-10 h-full flex flex-col">
|
|
<div class="flex items-start justify-between mb-4">
|
|
<div class="w-12 h-12 rounded-2xl flex items-center justify-center" style="background: linear-gradient(to bottom right, #fda4af, #fb7185); box-shadow: 0 10px 15px -3px rgba(251, 113, 133, 0.3);">
|
|
<x-ri-shut-down-line class="size-6 text-white" />
|
|
</div>
|
|
<div class="flex items-center gap-2 px-2.5 py-1 bg-success/10 rounded-lg border border-success/20">
|
|
<div class="w-2 h-2 rounded-full bg-success animate-pulse"></div>
|
|
<span class="text-xs text-success font-medium">Running</span>
|
|
</div>
|
|
</div>
|
|
<h3 class="text-lg font-bold text-color-base mb-2">Power Controls</h3>
|
|
<p class="text-color-muted text-sm leading-relaxed mb-4">Full control over your server's power state. Start, stop, reboot, or force power cycle instantly.</p>
|
|
<div class="grid grid-cols-3 gap-2 mb-4">
|
|
<div class="flex flex-col items-center gap-2 p-3 bg-success/10 hover:bg-success/20 rounded-xl border border-success/20 cursor-pointer transition-colors">
|
|
<x-ri-play-fill class="size-5 text-success" />
|
|
<span class="text-xs text-success font-medium">Start</span>
|
|
</div>
|
|
<div class="flex flex-col items-center gap-2 p-3 bg-warning/10 hover:bg-warning/20 rounded-xl border border-warning/20 cursor-pointer transition-colors">
|
|
<x-ri-restart-line class="size-5 text-warning" />
|
|
<span class="text-xs text-warning font-medium">Reboot</span>
|
|
</div>
|
|
<div class="flex flex-col items-center gap-2 p-3 bg-error/10 hover:bg-error/20 rounded-xl border border-error/20 cursor-pointer transition-colors">
|
|
<x-ri-stop-fill class="size-5 text-error" />
|
|
<span class="text-xs text-error font-medium">Stop</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between p-2.5 bg-background/50 rounded-xl border border-neutral/10 mt-auto">
|
|
<div class="flex items-center gap-2">
|
|
<x-ri-time-line class="size-4 text-color-muted" />
|
|
<span class="text-xs text-color-muted">Uptime</span>
|
|
</div>
|
|
<span class="text-xs text-color-base font-medium">14d 6h 32m</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Row 4: Quick Features Strip -->
|
|
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
|
@php
|
|
$quickFeatures = [
|
|
['icon' => 'ri-refresh-line', 'title' => 'OS Reinstall', 'desc' => '50+ templates', 'color' => 'primary'],
|
|
['icon' => 'ri-history-line', 'title' => 'Task History', 'desc' => 'Full audit logs', 'color' => 'secondary'],
|
|
['icon' => 'ri-global-line', 'title' => 'Network', 'desc' => 'IPv4/IPv6 & rDNS', 'color' => 'success'],
|
|
['icon' => 'ri-disc-line', 'title' => 'ISO Mount', 'desc' => 'Custom images', 'color' => 'info'],
|
|
];
|
|
@endphp
|
|
@foreach($quickFeatures as $fi => $feat)
|
|
<div class="hp-reveal" data-delay="{{ $fi * 80 }}">
|
|
<div class="group flex items-center gap-4 p-5 bg-background/30 hover:bg-background/50 border border-neutral/10 hover:border-{{ $feat['color'] }}/30 rounded-2xl transition-all duration-300">
|
|
<div class="w-12 h-12 rounded-xl bg-{{ $feat['color'] }}/10 flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
|
|
<x-dynamic-component :component="$feat['icon']" class="size-6 text-{{ $feat['color'] }}" />
|
|
</div>
|
|
<div>
|
|
<h4 class="font-semibold text-color-base">{{ $feat['title'] }}</h4>
|
|
<p class="text-sm text-color-muted">{{ $feat['desc'] }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{-- ═══════════════════════════════════════════════════════════════
|
|
SECTION 4 — INFRASTRUCTURE FEATURES
|
|
═══════════════════════════════════════════════════════════════ --}}
|
|
<section id="features" class="relative py-24 md:py-32">
|
|
<div class="container mx-auto px-4">
|
|
<!-- Section Header -->
|
|
<div class="max-w-2xl mb-16 hp-reveal" data-delay="0">
|
|
<p class="text-sm font-medium text-primary uppercase tracking-widest mb-3">Infrastructure</p>
|
|
<h2 class="text-3xl md:text-5xl font-bold text-color-base mb-4">
|
|
{{ theme('features_title', 'Enterprise Infrastructure') }}
|
|
</h2>
|
|
<p class="text-base md:text-lg text-color-muted leading-relaxed">
|
|
{{ theme('features_subtitle', 'We\'ve built a platform that is advanced enough to compete with the large players of the industry at a fraction of the cost.') }}
|
|
</p>
|
|
</div>
|
|
|
|
@php
|
|
$infra = [
|
|
['icon' => 'ri-hard-drive-3-line', 'color' => 'primary', 'title' => 'NVMe & RAM Cached Storage', 'desc' => 'Each VPS caches RAM for performance beyond SSDs, while dedicated NVMe drives provide consistent IOPS for storage.'],
|
|
['icon' => 'ri-global-line', 'color' => 'secondary', 'title' => 'IPv6 Public Address', 'desc' => 'Each VPS receives a static IPv6 address for public services, plus a secondary RA-based MAC address to ensure connectivity.'],
|
|
['icon' => 'ri-terminal-box-line', 'color' => 'success', 'title' => 'Xterm.js/NoVNC Access', 'desc' => 'Each VPS comes with Xterm.js and NoVNC via our server manager for easy access and control, anytime.'],
|
|
['icon' => 'ri-database-2-line', 'color' => 'warning', 'title' => 'Ceph Storage Cluster', 'desc' => 'Our redundant data distribution delivers IOPS beyond typical caching, fetching only unique data for a fast, smooth, and secure experience.'],
|
|
['icon' => 'ri-route-line', 'color' => 'info', 'title' => 'BGP IPv6 Networking', 'desc' => 'We own our network, giving VPSs priority, a unique IPv6 address, and rotating IPv4 NAT for seamless inbound access.'],
|
|
['icon' => 'ri-customer-service-2-line', 'color' => 'primary', 'title' => '24/7 Expert Support', 'desc' => 'Our knowledgeable support team is available around the clock to assist with technical issues, configurations, and any questions you may have.'],
|
|
];
|
|
@endphp
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
@foreach($infra as $ii => $item)
|
|
<div class="hp-reveal" data-delay="{{ $ii * 100 }}">
|
|
<div class="group h-full bg-background-secondary/60 hover:bg-background-secondary border border-neutral/20 hover:border-{{ $item['color'] }}/40 rounded-3xl p-8 transition-all duration-500 hover:shadow-2xl hover:-translate-y-2">
|
|
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-{{ $item['color'] }}/20 to-{{ $item['color'] }}/5 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-500">
|
|
<x-dynamic-component :component="$item['icon']" class="size-7 text-{{ $item['color'] }}" />
|
|
</div>
|
|
<h3 class="text-xl font-bold text-color-base mb-3 group-hover:text-{{ $item['color'] }} transition-colors duration-300">
|
|
{{ $item['title'] }}
|
|
</h3>
|
|
<p class="text-color-muted text-sm leading-relaxed">{{ $item['desc'] }}</p>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{-- ═══════════════════════════════════════════════════════════════
|
|
SECTION 5 — CTA
|
|
═══════════════════════════════════════════════════════════════ --}}
|
|
<section class="relative py-24 md:py-32">
|
|
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-primary/[0.03] to-transparent pointer-events-none"></div>
|
|
|
|
<div class="container mx-auto px-4 relative z-10">
|
|
<div class="hp-reveal" data-delay="0">
|
|
<div class="relative overflow-hidden bg-gradient-to-br from-background-secondary to-background-secondary/80 border border-neutral/30 rounded-3xl">
|
|
<div class="grid lg:grid-cols-2 gap-0">
|
|
<!-- Left Content -->
|
|
<div class="relative p-10 md:p-16 lg:p-20">
|
|
<div class="absolute top-0 left-0 w-32 h-32 bg-primary/10 rounded-full blur-3xl"></div>
|
|
<div class="absolute bottom-0 right-0 w-24 h-24 bg-secondary/10 rounded-full blur-2xl"></div>
|
|
|
|
<div class="relative z-10">
|
|
<p class="text-sm font-medium text-primary uppercase tracking-widest mb-3">Get Started</p>
|
|
<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-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>
|
|
|
|
<div class="grid sm:grid-cols-2 gap-4 mb-10">
|
|
@foreach(['Instant Deployment', 'Full Root Access', '99.9% Uptime SLA', '24/7 Expert Support'] as $feat)
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded-lg bg-success/20 flex items-center justify-center flex-shrink-0">
|
|
<x-ri-check-line class="size-4 text-success" />
|
|
</div>
|
|
<span class="text-sm text-color-base">{{ $feat }}</span>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
|
|
<div class="flex flex-col sm:flex-row gap-4">
|
|
<a href="#services" class="group inline-flex items-center justify-center gap-3 bg-primary hover:bg-primary/90 text-white px-8 py-4 rounded-2xl font-bold text-lg transition-all duration-300 shadow-lg shadow-primary/25 hover:shadow-xl hover:shadow-primary/30 hover:-translate-y-1">
|
|
<x-ri-server-line class="size-5" />
|
|
<span>{{ theme('cta_primary_text', 'View VPS Plans') }}</span>
|
|
<x-ri-arrow-right-line class="size-5 group-hover:translate-x-1 transition-transform" />
|
|
</a>
|
|
<a href="{{ theme('help_link', 'https://help.yourserver.com') }}" class="group inline-flex items-center justify-center gap-3 bg-background hover:bg-background/80 text-color-base border border-neutral/50 hover:border-primary/30 px-8 py-4 rounded-2xl font-bold text-lg transition-all duration-300 hover:-translate-y-1">
|
|
<x-ri-mail-line class="size-5" />
|
|
<span>{{ theme('cta_secondary_text', 'Contact Support') }}</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Side — Stats -->
|
|
<div class="relative hidden lg:flex items-center justify-center bg-gradient-to-br from-primary/10 via-secondary/5 to-transparent p-12">
|
|
<div class="absolute inset-0 overflow-hidden">
|
|
<div class="absolute top-1/4 right-1/4 w-64 h-64 bg-primary/20 rounded-full blur-3xl animate-pulse"></div>
|
|
<div class="absolute bottom-1/4 left-1/4 w-48 h-48 bg-secondary/15 rounded-full blur-3xl animate-pulse" style="animation-delay: 1s;"></div>
|
|
</div>
|
|
<div class="relative z-10 space-y-4 w-full max-w-sm">
|
|
<div class="bg-background/90 backdrop-blur-sm border border-neutral/30 rounded-2xl p-5 shadow-lg hp-reveal" data-delay="0">
|
|
<div class="flex items-center gap-4">
|
|
<div class="w-12 h-12 rounded-xl bg-success/20 flex items-center justify-center">
|
|
<x-ri-check-double-line class="size-6 text-success" />
|
|
</div>
|
|
<div>
|
|
<div class="text-2xl font-black text-color-base">{{ number_format(\App\Models\Service::count()+2560) }}+</div>
|
|
<div class="text-sm text-color-muted">Servers Deployed</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-background/90 backdrop-blur-sm border border-neutral/30 rounded-2xl p-5 shadow-lg translate-x-8 hp-reveal" data-delay="150">
|
|
<div class="flex items-center gap-4">
|
|
<div class="w-12 h-12 rounded-xl bg-primary/20 flex items-center justify-center">
|
|
<x-ri-user-star-line class="size-6 text-primary" />
|
|
</div>
|
|
<div>
|
|
<div class="text-2xl font-black text-color-base">{{ number_format(\App\Models\User::count()+1439) }}+</div>
|
|
<div class="text-sm text-color-muted">Happy Customers</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-background/90 backdrop-blur-sm border border-neutral/30 rounded-2xl p-5 shadow-lg hp-reveal" data-delay="300">
|
|
<div class="flex items-center gap-4">
|
|
<div class="w-12 h-12 rounded-xl bg-warning/20 flex items-center justify-center">
|
|
<x-ri-timer-flash-line class="size-6 text-warning" />
|
|
</div>
|
|
<div>
|
|
<div class="text-2xl font-black text-color-base">< 60s</div>
|
|
<div class="text-sm text-color-muted">Average Deploy Time</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{-- Hook --}}
|
|
<div class="pb-8">
|
|
{!! hook('pages.home') !!}
|
|
</div>
|
|
|
|
<div class="h-16 md:h-24"></div>
|
|
</div>
|
|
|
|
{{-- ═══════════════════════════════════════════════════════════════════
|
|
SCROLL-REVEAL ENGINE + STYLES
|
|
═══════════════════════════════════════════════════════════════════ --}}
|
|
<style>
|
|
/* ── Custom palette (unchanged) ── */
|
|
: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;
|
|
}
|
|
|
|
/* ── Image-clipped hero text ── */
|
|
.hero-img-text {
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
/* ── Scroll-reveal base ── */
|
|
.hp-reveal {
|
|
opacity: 0;
|
|
transform: translateY(40px);
|
|
transition: opacity 0.8s cubic-bezier(.16,1,.3,1),
|
|
transform 0.8s cubic-bezier(.16,1,.3,1);
|
|
will-change: opacity, transform;
|
|
}
|
|
.hp-reveal.hp-visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* ── Scroll indicator dot ── */
|
|
@keyframes scrollDot {
|
|
0% { transform: translateY(0); opacity: 1; }
|
|
50% { transform: translateY(8px); opacity: 0.4; }
|
|
100% { transform: translateY(0); opacity: 1; }
|
|
}
|
|
.animate-scroll-dot { animation: scrollDot 1.8s ease-in-out infinite; }
|
|
|
|
/* ── Gradient text ── */
|
|
@keyframes gradient {
|
|
0%, 100% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
}
|
|
.animate-gradient { animation: gradient 6s ease infinite; }
|
|
|
|
/* ── Float ── */
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0px); }
|
|
50% { transform: translateY(-10px); }
|
|
}
|
|
.animate-float { animation: float 3s ease-in-out infinite; }
|
|
|
|
/* ── Chart bars ── */
|
|
.chart-bar {
|
|
display: block; flex: 1; min-width: 8px;
|
|
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);
|
|
}
|
|
.mini-chart-bar {
|
|
display: block; flex: 1; min-width: 4px;
|
|
background: linear-gradient(to top, #1A759F, rgba(26,117,159,0.5));
|
|
border-radius: 2px 2px 0 0;
|
|
animation: chartWave 2s ease-in-out infinite;
|
|
animation-delay: var(--delay, 0s);
|
|
}
|
|
@keyframes chartWave {
|
|
0% { height: var(--h1, 60%); }
|
|
25% { height: var(--h2, 40%); }
|
|
50% { height: var(--h3, 80%); }
|
|
75% { height: var(--h4, 50%); }
|
|
100% { height: var(--h1, 60%); }
|
|
}
|
|
|
|
/* ───────────────────────────────────────────────
|
|
Homepage color overrides (preserved 1-to-1)
|
|
─────────────────────────────────────────────── */
|
|
.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-purple-400 { 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; }
|
|
|
|
.homepage-wrapper .bg-gradient-to-r.from-primary.via-secondary.to-primary {
|
|
background-image: linear-gradient(to right, #184E77, #52B69A, #184E77) !important;
|
|
}
|
|
|
|
.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; }
|
|
|
|
.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; }
|
|
|
|
.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>
|
|
|
|
<script>
|
|
/* ── Intersection Observer scroll-reveal engine ── */
|
|
(function () {
|
|
const IO = new IntersectionObserver((entries) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
const delay = parseInt(entry.target.dataset.delay || '0', 10);
|
|
setTimeout(() => entry.target.classList.add('hp-visible'), delay);
|
|
IO.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, { threshold: 0.12, rootMargin: '0px 0px -60px 0px' });
|
|
|
|
function observe() {
|
|
document.querySelectorAll('.hp-reveal:not(.hp-visible)').forEach((el) => IO.observe(el));
|
|
}
|
|
|
|
observe();
|
|
document.addEventListener('livewire:navigated', observe);
|
|
})();
|
|
|
|
/* ── Dynamically measure navbar height ── */
|
|
(function () {
|
|
function setNavH() {
|
|
const nav = document.querySelector('nav.fixed');
|
|
if (nav) document.documentElement.style.setProperty('--nav-h', nav.offsetHeight + 'px');
|
|
}
|
|
setNavH();
|
|
window.addEventListener('resize', setNavH);
|
|
document.addEventListener('livewire:navigated', setNavH);
|
|
})();
|
|
</script>
|