1392 lines
87 KiB
PHP
1392 lines
87 KiB
PHP
<div class="homepage-wrapper fullpage-slider" id="fullpageSlider">
|
|
<!-- Fixed Sidebar Navigation -->
|
|
<nav class="slider-nav fixed right-6 top-1/2 -translate-y-1/2 z-50 flex flex-col items-center gap-3">
|
|
<!-- Navigation Dots -->
|
|
<div class="nav-dots flex flex-col gap-2 bg-background-secondary/90 backdrop-blur-xl border border-neutral/30 rounded-full p-2 shadow-2xl">
|
|
<button type="button" class="nav-dot group relative" data-section="0" data-name="Hero" aria-label="Go to Hero section">
|
|
<span class="block w-3 h-3 rounded-full bg-primary transition-all duration-300 scale-125"></span>
|
|
<span class="nav-label absolute right-full mr-3 top-1/2 -translate-y-1/2 px-3 py-1.5 bg-background-secondary/95 backdrop-blur-sm border border-neutral/30 rounded-lg text-sm font-medium text-color-base whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none shadow-lg">Hero</span>
|
|
</button>
|
|
<button type="button" class="nav-dot group relative" data-section="1" data-name="Services" aria-label="Go to Services section">
|
|
<span class="block w-3 h-3 rounded-full bg-neutral/40 hover:bg-primary/60 transition-all duration-300"></span>
|
|
<span class="nav-label absolute right-full mr-3 top-1/2 -translate-y-1/2 px-3 py-1.5 bg-background-secondary/95 backdrop-blur-sm border border-neutral/30 rounded-lg text-sm font-medium text-color-base whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none shadow-lg">Services</span>
|
|
</button>
|
|
<button type="button" class="nav-dot group relative" data-section="2" data-name="Control Panel" aria-label="Go to Control Panel section">
|
|
<span class="block w-3 h-3 rounded-full bg-neutral/40 hover:bg-primary/60 transition-all duration-300"></span>
|
|
<span class="nav-label absolute right-full mr-3 top-1/2 -translate-y-1/2 px-3 py-1.5 bg-background-secondary/95 backdrop-blur-sm border border-neutral/30 rounded-lg text-sm font-medium text-color-base whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none shadow-lg">Control Panel</span>
|
|
</button>
|
|
<button type="button" class="nav-dot group relative" data-section="3" data-name="Infrastructure" aria-label="Go to Infrastructure section">
|
|
<span class="block w-3 h-3 rounded-full bg-neutral/40 hover:bg-primary/60 transition-all duration-300"></span>
|
|
<span class="nav-label absolute right-full mr-3 top-1/2 -translate-y-1/2 px-3 py-1.5 bg-background-secondary/95 backdrop-blur-sm border border-neutral/30 rounded-lg text-sm font-medium text-color-base whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none shadow-lg">Infrastructure</span>
|
|
</button>
|
|
<button type="button" class="nav-dot group relative" data-section="4" data-name="Get Started" aria-label="Go to Get Started section">
|
|
<span class="block w-3 h-3 rounded-full bg-neutral/40 hover:bg-primary/60 transition-all duration-300"></span>
|
|
<span class="nav-label absolute right-full mr-3 top-1/2 -translate-y-1/2 px-3 py-1.5 bg-background-secondary/95 backdrop-blur-sm border border-neutral/30 rounded-lg text-sm font-medium text-color-base whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none shadow-lg">Get Started</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Arrow Navigation -->
|
|
<div class="nav-arrows flex flex-col gap-2 mt-4">
|
|
<button type="button" class="nav-arrow nav-prev p-2 rounded-full bg-background-secondary/90 backdrop-blur-xl border border-neutral/30 hover:border-primary/50 hover:bg-primary/20 transition-all duration-300 shadow-lg group" aria-label="Previous section">
|
|
<x-ri-arrow-up-s-line class="size-5 text-color-muted group-hover:text-primary transition-colors" />
|
|
</button>
|
|
<button type="button" class="nav-arrow nav-next p-2 rounded-full bg-background-secondary/90 backdrop-blur-xl border border-neutral/30 hover:border-primary/50 hover:bg-primary/20 transition-all duration-300 shadow-lg group" aria-label="Next section">
|
|
<x-ri-arrow-down-s-line class="size-5 text-color-muted group-hover:text-primary transition-colors" />
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Section Counter -->
|
|
<div class="section-counter mt-4 px-3 py-2 bg-background-secondary/90 backdrop-blur-xl border border-neutral/30 rounded-full shadow-lg">
|
|
<span class="current-section text-primary font-bold">1</span>
|
|
<span class="text-color-muted">/</span>
|
|
<span class="total-sections text-color-muted">5</span>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Slides Container -->
|
|
<div class="slides-container">
|
|
<!-- Slide 1: Hero -->
|
|
<div class="slide active" data-slide="0" id="hero">
|
|
<!-- Homepage-specific custom HTML -->
|
|
@if(theme('custom_homepage_html'))
|
|
<div class="custom-homepage-content">
|
|
{!! theme('custom_homepage_html') !!}
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Hero Section - Asymmetric Modern Design -->
|
|
<div class="slide-content relative min-h-screen flex items-center">
|
|
<!-- Ambient Background Effects -->
|
|
<div class="absolute inset-0 overflow-hidden pointer-events-none">
|
|
<div class="absolute -top-40 -right-40 w-96 h-96 bg-primary/20 rounded-full blur-3xl animate-pulse"></div>
|
|
<div class="absolute top-1/2 -left-20 w-72 h-72 bg-secondary/15 rounded-full blur-3xl animate-pulse animation-delay-200"></div>
|
|
<div class="absolute bottom-20 right-1/4 w-64 h-64 bg-info/10 rounded-full blur-3xl animate-pulse animation-delay-400"></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 animate-fade-in-up">
|
|
<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 bg-primary opacity-75"></span>
|
|
<span class="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
|
|
</span>
|
|
<span class="text-sm font-medium text-color-base">{{ theme('homepage_badge_1', 'VPS Hosting') }}</span>
|
|
</div>
|
|
<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 bg-secondary opacity-75"></span>
|
|
<span class="relative inline-flex rounded-full h-2 w-2 bg-secondary"></span>
|
|
</span>
|
|
<span class="text-sm font-medium text-color-base">{{ theme('homepage_badge_2', 'Website Hosting') }}</span>
|
|
</div>
|
|
<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 bg-primary opacity-75"></span>
|
|
<span class="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
|
|
</span>
|
|
<span class="text-sm font-medium text-color-base">{{ theme('homepage_badge_3', 'BGP Transit') }}</span>
|
|
</div>
|
|
<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 bg-secondary opacity-75"></span>
|
|
<span class="relative inline-flex rounded-full h-2 w-2 bg-secondary"></span>
|
|
</span>
|
|
<span class="text-sm font-medium text-color-base">{{ theme('homepage_badge_4', 'Contracted Support') }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hero Title with Gradient -->
|
|
<h1 class="text-4xl md:text-5xl lg:text-6xl font-black text-color-base mb-6 leading-[1.1] tracking-tight animate-fade-in-up">
|
|
{{ theme('homepage_hero_title1', 'Powerful') }}
|
|
<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 animate-fade-in-up animation-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 animate-fade-in-up animation-delay-400">
|
|
<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-0.5">
|
|
<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-0.5">
|
|
<x-ri-play-circle-line class="size-5" />
|
|
<span>{{ theme('hero_cta_secondary_text', 'See Features') }}</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Side - Feature Preview Cards (Stacked/Floating) -->
|
|
<div class="flex-1 relative w-full max-w-lg lg:max-w-xl animate-fade-in-up animation-delay-300">
|
|
<div class="relative">
|
|
<!-- Main Feature 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>
|
|
<!-- Mock Dashboard UI -->
|
|
<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++)
|
|
<div class="flex-1 bg-primary/{{ rand(20, 80) }} rounded-t" style="height: {{ rand(30, 100) }}%"></div>
|
|
@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 Cards -->
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 2: Services -->
|
|
<div class="slide" data-slide="1" id="services">
|
|
<div class="slide-content min-h-screen flex items-center py-20">
|
|
<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-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-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 text-sm font-medium hover:gap-3 transition-all">
|
|
<span>View all</span>
|
|
<x-ri-arrow-right-line class="size-4" />
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Services Cards - Horizontal Scroll on Mobile -->
|
|
<div class="flex gap-6 overflow-x-auto pb-4 snap-x snap-mandatory lg:grid lg:grid-cols-4 lg:overflow-visible scrollbar-hide">
|
|
@foreach ($categories as $index => $category)
|
|
<div class="flex-shrink-0 w-80 lg:w-auto snap-center group">
|
|
<div class="h-full bg-background-secondary/80 hover:bg-background-secondary border border-neutral/30 hover:border-primary/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-primary/20 to-primary/5 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
|
<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">
|
|
{{ $category->name }}
|
|
</h3>
|
|
@if(theme('show_category_description', true))
|
|
<div class="text-color-muted text-sm leading-relaxed mb-6 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">
|
|
<span>{{ __('general.view') }}</span>
|
|
<x-ri-arrow-right-line class="size-4" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 3: Control Panel Features -->
|
|
<div class="slide" data-slide="2" id="panel-features">
|
|
<div class="slide-content min-h-screen flex items-center py-20">
|
|
<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">
|
|
<!-- Section Header -->
|
|
<div class="text-center max-w-2xl mx-auto 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-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>
|
|
|
|
<!-- Bento Grid - Row 1: Live Telemetry + Firewall -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
|
|
<!-- Live Telemetry -->
|
|
<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">
|
|
<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-14 h-14 rounded-2xl bg-gradient-to-br from-primary to-primary/70 flex items-center justify-center shadow-lg shadow-primary/30">
|
|
<x-ri-line-chart-line class="size-7 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>
|
|
<!-- Mock Chart - Animated -->
|
|
<div style="display: flex; align-items: flex-end; gap: 3px; padding: 12px; background: rgba(0,0,0,0.1); border-radius: 12px; height: 80px;">
|
|
<span class="chart-bar" style="--delay: 0s; --h1: 65%; --h2: 40%; --h3: 85%; --h4: 30%;"></span>
|
|
<span class="chart-bar" style="--delay: 0.1s; --h1: 45%; --h2: 70%; --h3: 35%; --h4: 80%;"></span>
|
|
<span class="chart-bar" style="--delay: 0.2s; --h1: 80%; --h2: 50%; --h3: 70%; --h4: 45%;"></span>
|
|
<span class="chart-bar" style="--delay: 0.3s; --h1: 55%; --h2: 85%; --h3: 40%; --h4: 65%;"></span>
|
|
<span class="chart-bar" style="--delay: 0.4s; --h1: 70%; --h2: 35%; --h3: 90%; --h4: 55%;"></span>
|
|
<span class="chart-bar" style="--delay: 0.5s; --h1: 40%; --h2: 75%; --h3: 50%; --h4: 85%;"></span>
|
|
<span class="chart-bar" style="--delay: 0.6s; --h1: 90%; --h2: 45%; --h3: 65%; --h4: 35%;"></span>
|
|
<span class="chart-bar" style="--delay: 0.7s; --h1: 50%; --h2: 80%; --h3: 30%; --h4: 70%;"></span>
|
|
<span class="chart-bar" style="--delay: 0.8s; --h1: 75%; --h2: 40%; --h3: 85%; --h4: 50%;"></span>
|
|
<span class="chart-bar" style="--delay: 0.9s; --h1: 35%; --h2: 65%; --h3: 45%; --h4: 90%;"></span>
|
|
<span class="chart-bar" style="--delay: 1.0s; --h1: 85%; --h2: 55%; --h3: 75%; --h4: 40%;"></span>
|
|
<span class="chart-bar" style="--delay: 1.1s; --h1: 60%; --h2: 90%; --h3: 50%; --h4: 70%;"></span>
|
|
<span class="chart-bar" style="--delay: 0.15s; --h1: 45%; --h2: 70%; --h3: 85%; --h4: 55%;"></span>
|
|
<span class="chart-bar" style="--delay: 0.25s; --h1: 80%; --h2: 35%; --h3: 60%; --h4: 45%;"></span>
|
|
<span class="chart-bar" style="--delay: 0.35s; --h1: 55%; --h2: 85%; --h3: 40%; --h4: 75%;"></span>
|
|
<span class="chart-bar" style="--delay: 0.45s; --h1: 70%; --h2: 50%; --h3: 90%; --h4: 35%;"></span>
|
|
<span class="chart-bar" style="--delay: 0.55s; --h1: 40%; --h2: 75%; --h3: 55%; --h4: 85%;"></span>
|
|
<span class="chart-bar" style="--delay: 0.65s; --h1: 90%; --h2: 60%; --h3: 70%; --h4: 45%;"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- VNC Console -->
|
|
<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">
|
|
<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-14 h-14 rounded-2xl bg-gradient-to-br from-info to-info/70 flex items-center justify-center shadow-lg shadow-info/30 mb-5">
|
|
<x-ri-terminal-box-line class="size-7 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>
|
|
|
|
<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',
|
|
'pwd',
|
|
'ip addr show'
|
|
];
|
|
|
|
const textEl = document.getElementById('terminal-text');
|
|
const cursorEl = document.getElementById('terminal-cursor');
|
|
let currentText = '';
|
|
let isTyping = true;
|
|
let commandIndex = Math.floor(Math.random() * commands.length);
|
|
let charIndex = 0;
|
|
|
|
// Cursor blink
|
|
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 {
|
|
// Finished typing, wait then delete
|
|
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 {
|
|
// Finished deleting, pick new command
|
|
isTyping = true;
|
|
charIndex = 0;
|
|
let newIndex;
|
|
do {
|
|
newIndex = Math.floor(Math.random() * commands.length);
|
|
} while (newIndex === commandIndex && commands.length > 1);
|
|
commandIndex = newIndex;
|
|
setTimeout(type, 500 + Math.random() * 500);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Start after a short delay
|
|
setTimeout(type, 1000);
|
|
})();
|
|
</script>
|
|
|
|
<!-- Bento Grid - Row 2: Firewall & Backups -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
|
|
<!-- Firewall Manager -->
|
|
<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">
|
|
<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 bg-gradient-to-br from-warning to-warning/70 flex items-center justify-center shadow-lg shadow-warning/30">
|
|
<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>
|
|
<!-- Mock Firewall Rules -->
|
|
<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>
|
|
|
|
<!-- Backup & Snapshots -->
|
|
<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">
|
|
<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 bg-gradient-to-br from-success to-success/70 flex items-center justify-center shadow-lg shadow-success/30">
|
|
<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>
|
|
<!-- Mock Backup List -->
|
|
<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>
|
|
|
|
<!-- Bento Grid - Row 3: Storage & Power -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
|
|
<!-- Storage Manager -->
|
|
<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">
|
|
<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 bg-gradient-to-br from-purple-500 to-purple-500/70 flex items-center justify-center shadow-lg shadow-purple-500/30">
|
|
<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>
|
|
<!-- Storage Breakdown -->
|
|
<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>
|
|
|
|
<!-- Power Controls -->
|
|
<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">
|
|
<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 bg-gradient-to-br from-error to-error/70 flex items-center justify-center shadow-lg shadow-error/30">
|
|
<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>
|
|
<!-- Power Actions -->
|
|
<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>
|
|
<!-- Server Stats -->
|
|
<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>
|
|
|
|
<!-- Bento Grid - Row 4: Quick Features Strip -->
|
|
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
|
<!-- OS Reinstall -->
|
|
<div class="group flex items-center gap-4 p-5 bg-background/30 hover:bg-background/50 border border-neutral/10 hover:border-primary/30 rounded-2xl transition-all duration-300">
|
|
<div class="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
|
|
<x-ri-refresh-line class="size-6 text-primary" />
|
|
</div>
|
|
<div>
|
|
<h4 class="font-semibold text-color-base">OS Reinstall</h4>
|
|
<p class="text-sm text-color-muted">50+ templates</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Task History -->
|
|
<div class="group flex items-center gap-4 p-5 bg-background/30 hover:bg-background/50 border border-neutral/10 hover:border-secondary/30 rounded-2xl transition-all duration-300">
|
|
<div class="w-12 h-12 rounded-xl bg-secondary/10 flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
|
|
<x-ri-history-line class="size-6 text-secondary" />
|
|
</div>
|
|
<div>
|
|
<h4 class="font-semibold text-color-base">Task History</h4>
|
|
<p class="text-sm text-color-muted">Full audit logs</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Network Tools -->
|
|
<div class="group flex items-center gap-4 p-5 bg-background/30 hover:bg-background/50 border border-neutral/10 hover:border-success/30 rounded-2xl transition-all duration-300">
|
|
<div class="w-12 h-12 rounded-xl bg-success/10 flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
|
|
<x-ri-global-line class="size-6 text-success" />
|
|
</div>
|
|
<div>
|
|
<h4 class="font-semibold text-color-base">Network</h4>
|
|
<p class="text-sm text-color-muted">IPv4/IPv6 & rDNS</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ISO Mount -->
|
|
<div class="group flex items-center gap-4 p-5 bg-background/30 hover:bg-background/50 border border-neutral/10 hover:border-info/30 rounded-2xl transition-all duration-300">
|
|
<div class="w-12 h-12 rounded-xl bg-info/10 flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
|
|
<x-ri-disc-line class="size-6 text-info" />
|
|
</div>
|
|
<div>
|
|
<h4 class="font-semibold text-color-base">ISO Mount</h4>
|
|
<p class="text-sm text-color-muted">Custom images</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 4: Infrastructure Features -->
|
|
<div class="slide" data-slide="3" id="features">
|
|
<div class="slide-content min-h-screen flex items-center py-20">
|
|
<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">
|
|
<!-- Section Header -->
|
|
<div class="flex flex-col md:flex-row md:items-end md:justify-between gap-4 mb-10">
|
|
<div class="max-w-2xl">
|
|
<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-base 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>
|
|
</div>
|
|
|
|
<!-- Infrastructure Cards Grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<!-- NVME & RAM Cached Storage -->
|
|
<div class="group">
|
|
<div class="h-full bg-background-secondary/80 hover:bg-background-secondary border border-neutral/30 hover:border-primary/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-primary/20 to-primary/5 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
|
<x-ri-hard-drive-3-line class="size-7 text-primary" />
|
|
</div>
|
|
<h3 class="text-xl font-bold text-color-base mb-3 group-hover:text-primary transition-colors">
|
|
NVMe & RAM Cached Storage
|
|
</h3>
|
|
<p class="text-color-muted text-sm leading-relaxed">
|
|
Each VPS caches RAM for performance beyond SSDs, while dedicated NVMe drives provide consistent IOPS for storage.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- IPv6 Public Address -->
|
|
<div class="group">
|
|
<div class="h-full bg-background-secondary/80 hover:bg-background-secondary border border-neutral/30 hover:border-secondary/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-secondary/20 to-secondary/5 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
|
<x-ri-global-line class="size-7 text-secondary" />
|
|
</div>
|
|
<h3 class="text-xl font-bold text-color-base mb-3 group-hover:text-secondary transition-colors">
|
|
IPv6 Public Address
|
|
</h3>
|
|
<p class="text-color-muted text-sm leading-relaxed">
|
|
Each VPS receives a static IPv6 address for public services, plus a secondary RA-based MAC address to ensure connectivity.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Xterm.js/NoVNC Access -->
|
|
<div class="group">
|
|
<div class="h-full bg-background-secondary/80 hover:bg-background-secondary border border-neutral/30 hover:border-success/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-success/20 to-success/5 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
|
<x-ri-terminal-box-line class="size-7 text-success" />
|
|
</div>
|
|
<h3 class="text-xl font-bold text-color-base mb-3 group-hover:text-success transition-colors">
|
|
Xterm.js/NoVNC Access
|
|
</h3>
|
|
<p class="text-color-muted text-sm leading-relaxed">
|
|
Each VPS comes with Xterm.js and NoVNC via our server manager for easy access and control, anytime.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Ceph Distributed Storage -->
|
|
<div class="group">
|
|
<div class="h-full bg-background-secondary/80 hover:bg-background-secondary border border-neutral/30 hover:border-warning/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-warning/20 to-warning/5 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
|
<x-ri-database-2-line class="size-7 text-warning" />
|
|
</div>
|
|
<h3 class="text-xl font-bold text-color-base mb-3 group-hover:text-warning transition-colors">
|
|
Ceph Storage Cluster
|
|
</h3>
|
|
<p class="text-color-muted text-sm leading-relaxed">
|
|
Our redundant data distribution delivers IOPS beyond typical caching, fetching only unique data for a fast, smooth, and secure experience.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- BGP IPv6 Networking -->
|
|
<div class="group">
|
|
<div class="h-full bg-background-secondary/80 hover:bg-background-secondary border border-neutral/30 hover:border-info/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-info/20 to-info/5 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
|
<x-ri-route-line class="size-7 text-info" />
|
|
</div>
|
|
<h3 class="text-xl font-bold text-color-base mb-3 group-hover:text-info transition-colors">
|
|
BGP IPv6 Networking
|
|
</h3>
|
|
<p class="text-color-muted text-sm leading-relaxed">
|
|
We own our network, giving VPSs priority, a unique IPv6 address, and rotating IPv4 NAT for seamless inbound access.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Expert Support -->
|
|
<div class="group">
|
|
<div class="h-full bg-background-secondary/80 hover:bg-background-secondary border border-neutral/30 hover:border-primary/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-primary/20 to-primary/5 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
|
<x-ri-customer-service-2-line class="size-7 text-primary" />
|
|
</div>
|
|
<h3 class="text-xl font-bold text-color-base mb-3 group-hover:text-primary transition-colors">
|
|
24/7 Expert Support
|
|
</h3>
|
|
<p class="text-color-muted text-sm leading-relaxed">
|
|
Our knowledgeable support team is available around the clock to assist with technical issues, configurations, and any questions you may have.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 5: CTA Section -->
|
|
<div class="slide" data-slide="4" id="cta">
|
|
<div class="slide-content min-h-screen flex items-center py-20">
|
|
<div class="container mx-auto px-4">
|
|
<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">
|
|
<!-- Decorative Elements -->
|
|
<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-wider 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>
|
|
|
|
<!-- Feature List -->
|
|
<div class="grid sm:grid-cols-2 gap-4 mb-10">
|
|
<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">Instant Deployment</span>
|
|
</div>
|
|
<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">Full Root Access</span>
|
|
</div>
|
|
<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">99.9% Uptime SLA</span>
|
|
</div>
|
|
<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">24/7 Expert Support</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CTA Buttons -->
|
|
<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 - Visual Element -->
|
|
<div class="relative hidden lg:flex items-center justify-center bg-gradient-to-br from-primary/10 via-secondary/5 to-transparent p-12">
|
|
<!-- Decorative Background -->
|
|
<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>
|
|
|
|
<!-- Floating Stats Cards -->
|
|
<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 transform hover:-translate-y-1 transition-transform">
|
|
<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 transform translate-x-8 hover:-translate-y-1 transition-transform">
|
|
<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 hover:-translate-y-1 transition-transform">
|
|
<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>
|
|
|
|
</div><!-- End slides-container -->
|
|
|
|
<!-- Hook Content -->
|
|
<div class="hook-content fixed bottom-0 left-0 right-0 z-40 pointer-events-none">
|
|
<div class="pb-8 pointer-events-auto">
|
|
{!! hook('pages.home') !!}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
/* Fullpage Slider Styles */
|
|
.fullpage-slider {
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.slides-container {
|
|
height: 100vh;
|
|
position: relative;
|
|
}
|
|
|
|
.slide {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100vh;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: opacity 0.6s ease, visibility 0.6s ease, transform 0.6s ease;
|
|
transform: translateY(20px);
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.slide.active {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.slide.slide-up {
|
|
transform: translateY(-20px);
|
|
}
|
|
|
|
.slide-content {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Navigation Styles */
|
|
.slider-nav {
|
|
z-index: 100;
|
|
}
|
|
|
|
.nav-dot span:first-child {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.nav-dot.active span:first-child {
|
|
background-color: rgb(var(--color-primary)) !important;
|
|
transform: scale(1.25);
|
|
}
|
|
|
|
/* 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%; }
|
|
}
|
|
.animate-gradient {
|
|
animation: gradient 6s ease infinite;
|
|
}
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0px); }
|
|
50% { transform: translateY(-10px); }
|
|
}
|
|
.animate-float {
|
|
animation: float 3s ease-in-out infinite;
|
|
}
|
|
.scrollbar-hide {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
.scrollbar-hide::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
/* Telemetry Chart Animation */
|
|
.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);
|
|
}
|
|
|
|
@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 */
|
|
.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>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Fullpage Slider Configuration
|
|
const slides = document.querySelectorAll('.slide');
|
|
const navDots = document.querySelectorAll('.nav-dot');
|
|
const prevBtn = document.querySelector('.nav-prev');
|
|
const nextBtn = document.querySelector('.nav-next');
|
|
const currentSectionEl = document.querySelector('.current-section');
|
|
const totalSectionsEl = document.querySelector('.total-sections');
|
|
const sectionIds = ['hero', 'services', 'panel-features', 'features', 'cta'];
|
|
|
|
let currentSlide = 0;
|
|
let isAnimating = false;
|
|
let autoSlideInterval = null;
|
|
let isManuallyInterrupted = false;
|
|
const AUTO_SLIDE_DELAY = 10000; // 10 seconds
|
|
const RESUME_DELAY = 30000; // Resume auto-slide after 30 seconds of inactivity
|
|
let resumeTimeout = null;
|
|
const ANIMATION_DURATION = 600; // Match CSS transition duration
|
|
|
|
// Initialize
|
|
totalSectionsEl.textContent = slides.length;
|
|
|
|
// Function to go to a specific slide
|
|
function goToSlide(index, direction = 'next') {
|
|
if (isAnimating || index === currentSlide || index < 0 || index >= slides.length) return;
|
|
|
|
isAnimating = true;
|
|
|
|
const currentSlideEl = slides[currentSlide];
|
|
const nextSlideEl = slides[index];
|
|
|
|
// Add direction class for animation
|
|
if (direction === 'prev') {
|
|
currentSlideEl.classList.add('slide-up');
|
|
}
|
|
|
|
// Deactivate current slide
|
|
currentSlideEl.classList.remove('active');
|
|
|
|
// Activate new slide
|
|
nextSlideEl.classList.add('active');
|
|
|
|
// Update navigation dots
|
|
navDots.forEach((dot, i) => {
|
|
const dotSpan = dot.querySelector('span:first-child');
|
|
if (i === index) {
|
|
dot.classList.add('active');
|
|
dotSpan.classList.remove('bg-neutral/40');
|
|
dotSpan.classList.add('bg-primary');
|
|
dotSpan.style.transform = 'scale(1.25)';
|
|
} else {
|
|
dot.classList.remove('active');
|
|
dotSpan.classList.remove('bg-primary');
|
|
dotSpan.classList.add('bg-neutral/40');
|
|
dotSpan.style.transform = 'scale(1)';
|
|
}
|
|
});
|
|
|
|
// Update section counter
|
|
currentSectionEl.textContent = index + 1;
|
|
|
|
// Update URL hash without triggering scroll
|
|
const sectionId = sectionIds[index];
|
|
if (sectionId && sectionId !== 'hero') {
|
|
history.replaceState(null, null, '#' + sectionId);
|
|
} else {
|
|
history.replaceState(null, null, window.location.pathname);
|
|
}
|
|
|
|
currentSlide = index;
|
|
|
|
// Reset animation state after transition
|
|
setTimeout(() => {
|
|
isAnimating = false;
|
|
currentSlideEl.classList.remove('slide-up');
|
|
}, ANIMATION_DURATION);
|
|
}
|
|
|
|
// Function to go to next slide
|
|
function goToNextSlide() {
|
|
const nextIndex = (currentSlide + 1) % slides.length;
|
|
goToSlide(nextIndex, 'next');
|
|
}
|
|
|
|
// Function to go to previous slide
|
|
function goToPrevSlide() {
|
|
const prevIndex = (currentSlide - 1 + slides.length) % slides.length;
|
|
goToSlide(prevIndex, 'prev');
|
|
}
|
|
|
|
// Function to start auto-slide
|
|
function startAutoSlide() {
|
|
if (autoSlideInterval) clearInterval(autoSlideInterval);
|
|
autoSlideInterval = setInterval(goToNextSlide, AUTO_SLIDE_DELAY);
|
|
}
|
|
|
|
// Function to stop auto-slide
|
|
function stopAutoSlide() {
|
|
if (autoSlideInterval) {
|
|
clearInterval(autoSlideInterval);
|
|
autoSlideInterval = null;
|
|
}
|
|
}
|
|
|
|
// Function to handle manual interruption
|
|
function handleManualInteraction() {
|
|
isManuallyInterrupted = true;
|
|
stopAutoSlide();
|
|
|
|
// Clear existing resume timeout
|
|
if (resumeTimeout) clearTimeout(resumeTimeout);
|
|
|
|
// Resume auto-slide after delay
|
|
resumeTimeout = setTimeout(() => {
|
|
isManuallyInterrupted = false;
|
|
startAutoSlide();
|
|
}, RESUME_DELAY);
|
|
}
|
|
|
|
// Navigation dot click handlers
|
|
navDots.forEach((dot, index) => {
|
|
dot.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
handleManualInteraction();
|
|
const direction = index > currentSlide ? 'next' : 'prev';
|
|
goToSlide(index, direction);
|
|
});
|
|
});
|
|
|
|
// Arrow button click handlers
|
|
if (prevBtn) {
|
|
prevBtn.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
handleManualInteraction();
|
|
goToPrevSlide();
|
|
});
|
|
}
|
|
|
|
if (nextBtn) {
|
|
nextBtn.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
handleManualInteraction();
|
|
goToNextSlide();
|
|
});
|
|
}
|
|
|
|
// Scroll wheel navigation
|
|
let scrollTimeout = null;
|
|
let lastScrollTime = 0;
|
|
const SCROLL_COOLDOWN = 800; // Prevent rapid scrolling
|
|
|
|
document.addEventListener('wheel', (e) => {
|
|
const now = Date.now();
|
|
if (now - lastScrollTime < SCROLL_COOLDOWN) return;
|
|
if (isAnimating) return;
|
|
|
|
// Check if we're inside a scrollable slide content
|
|
const slideContent = slides[currentSlide].querySelector('.slide-content');
|
|
if (slideContent) {
|
|
const scrollTop = slides[currentSlide].scrollTop;
|
|
const scrollHeight = slides[currentSlide].scrollHeight;
|
|
const clientHeight = slides[currentSlide].clientHeight;
|
|
|
|
// Allow internal scroll if content is scrollable
|
|
if (scrollHeight > clientHeight) {
|
|
// Scrolling down and not at bottom
|
|
if (e.deltaY > 0 && scrollTop + clientHeight < scrollHeight - 10) {
|
|
return;
|
|
}
|
|
// Scrolling up and not at top
|
|
if (e.deltaY < 0 && scrollTop > 10) {
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
|
|
lastScrollTime = now;
|
|
handleManualInteraction();
|
|
|
|
if (e.deltaY > 0) {
|
|
// Scroll down - next slide
|
|
if (currentSlide < slides.length - 1) {
|
|
goToNextSlide();
|
|
}
|
|
} else {
|
|
// Scroll up - previous slide
|
|
if (currentSlide > 0) {
|
|
goToPrevSlide();
|
|
}
|
|
}
|
|
}, { passive: true });
|
|
|
|
// Keyboard navigation
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
|
|
e.preventDefault();
|
|
handleManualInteraction();
|
|
goToNextSlide();
|
|
} else if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
|
|
e.preventDefault();
|
|
handleManualInteraction();
|
|
goToPrevSlide();
|
|
}
|
|
});
|
|
|
|
// Touch navigation for mobile
|
|
let touchStartY = 0;
|
|
let touchEndY = 0;
|
|
const SWIPE_THRESHOLD = 50;
|
|
|
|
document.addEventListener('touchstart', (e) => {
|
|
touchStartY = e.changedTouches[0].screenY;
|
|
}, { passive: true });
|
|
|
|
document.addEventListener('touchend', (e) => {
|
|
if (isAnimating) return;
|
|
|
|
touchEndY = e.changedTouches[0].screenY;
|
|
const diff = touchStartY - touchEndY;
|
|
|
|
if (Math.abs(diff) > SWIPE_THRESHOLD) {
|
|
handleManualInteraction();
|
|
if (diff > 0) {
|
|
// Swiped up - next slide
|
|
goToNextSlide();
|
|
} else {
|
|
// Swiped down - previous slide
|
|
goToPrevSlide();
|
|
}
|
|
}
|
|
}, { passive: true });
|
|
|
|
// Handle hash links (# links)
|
|
function handleHashChange() {
|
|
const hash = window.location.hash.substring(1);
|
|
if (hash) {
|
|
const sectionIndex = sectionIds.indexOf(hash);
|
|
if (sectionIndex !== -1 && sectionIndex !== currentSlide) {
|
|
handleManualInteraction();
|
|
const direction = sectionIndex > currentSlide ? 'next' : 'prev';
|
|
goToSlide(sectionIndex, direction);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Handle clicks on internal links
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
anchor.addEventListener('click', (e) => {
|
|
const hash = anchor.getAttribute('href').substring(1);
|
|
const sectionIndex = sectionIds.indexOf(hash);
|
|
if (sectionIndex !== -1) {
|
|
e.preventDefault();
|
|
handleManualInteraction();
|
|
const direction = sectionIndex > currentSlide ? 'next' : 'prev';
|
|
goToSlide(sectionIndex, direction);
|
|
}
|
|
});
|
|
});
|
|
|
|
// Listen for hash changes
|
|
window.addEventListener('hashchange', handleHashChange);
|
|
|
|
// Check initial hash
|
|
if (window.location.hash) {
|
|
const hash = window.location.hash.substring(1);
|
|
const sectionIndex = sectionIds.indexOf(hash);
|
|
if (sectionIndex !== -1) {
|
|
// Directly set without animation on initial load
|
|
slides[0].classList.remove('active');
|
|
slides[sectionIndex].classList.add('active');
|
|
currentSlide = sectionIndex;
|
|
currentSectionEl.textContent = sectionIndex + 1;
|
|
|
|
// Update nav dots
|
|
navDots.forEach((dot, i) => {
|
|
const dotSpan = dot.querySelector('span:first-child');
|
|
if (i === sectionIndex) {
|
|
dot.classList.add('active');
|
|
dotSpan.classList.remove('bg-neutral/40');
|
|
dotSpan.classList.add('bg-primary');
|
|
dotSpan.style.transform = 'scale(1.25)';
|
|
} else {
|
|
dot.classList.remove('active');
|
|
dotSpan.classList.remove('bg-primary');
|
|
dotSpan.classList.add('bg-neutral/40');
|
|
dotSpan.style.transform = 'scale(1)';
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
// Start auto-slide
|
|
startAutoSlide();
|
|
});
|
|
</script>
|