diff --git a/themes/lucentui/views/home.blade.php b/themes/lucentui/views/home.blade.php
index e31034fe1..aae1edfa1 100644
--- a/themes/lucentui/views/home.blade.php
+++ b/themes/lucentui/views/home.blade.php
@@ -1,25 +1,73 @@
-<div class="min-h-screen overflow-hidden homepage-wrapper">
-    <!-- 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 -->
-    <section class="relative min-h-[90vh] 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 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>
 
-        <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 -->
+    <!-- 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">
@@ -140,39 +188,14 @@
                 </div>
             </div>
         </div>
-    </section>
-
-    <!-- Section Slider Navigation 1 -->
-    <div class="section-slider container mx-auto px-4 py-12" data-slider-index="0">
-        <div class="flex items-center justify-center gap-6">
-            <button type="button" class="slider-nav-btn slider-prev p-3 rounded-full bg-background-secondary/80 hover:bg-primary/20 border border-neutral/30 hover:border-primary/40 transition-all duration-300 group" aria-label="Previous section">
-                <x-ri-arrow-left-s-line class="size-5 text-color-muted group-hover:text-primary transition-colors" />
-            </button>
-            <div class="flex-1 max-w-md">
-                <div class="relative h-1 bg-neutral/20 rounded-full overflow-hidden">
-                    <div class="slider-progress absolute left-0 top-0 h-full bg-gradient-to-r from-primary to-secondary rounded-full transition-all duration-300" style="width: 0%"></div>
-                </div>
-                <div class="flex justify-between mt-3">
-                    <div class="slider-dots flex items-center gap-2">
-                        <button type="button" class="slider-dot w-2 h-2 rounded-full bg-primary transition-all duration-300" data-section="hero" aria-label="Go to Hero section"></button>
-                        <button type="button" class="slider-dot w-2 h-2 rounded-full bg-neutral/40 hover:bg-primary/60 transition-all duration-300" data-section="services" aria-label="Go to Services section"></button>
-                        <button type="button" class="slider-dot w-2 h-2 rounded-full bg-neutral/40 hover:bg-primary/60 transition-all duration-300" data-section="panel-features" aria-label="Go to Panel Features section"></button>
-                        <button type="button" class="slider-dot w-2 h-2 rounded-full bg-neutral/40 hover:bg-primary/60 transition-all duration-300" data-section="features" aria-label="Go to Features section"></button>
-                        <button type="button" class="slider-dot w-2 h-2 rounded-full bg-neutral/40 hover:bg-primary/60 transition-all duration-300" data-section="cta" aria-label="Go to CTA section"></button>
-                        <button type="button" class="slider-dot w-2 h-2 rounded-full bg-neutral/40 hover:bg-primary/60 transition-all duration-300" data-section="footer" aria-label="Go to Footer section"></button>
-                    </div>
-                </div>
             </div>
-            <button type="button" class="slider-nav-btn slider-next p-3 rounded-full bg-background-secondary/80 hover:bg-primary/20 border border-neutral/30 hover:border-primary/40 transition-all duration-300 group" aria-label="Next section">
-                <x-ri-arrow-right-s-line class="size-5 text-color-muted group-hover:text-primary transition-colors" />
-            </button>
         </div>
-    </div>
 
-    <!-- Services Section - Card Carousel Style -->
-    <section id="services" class="py-12 md:py-16">
-        <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">
+        <!-- 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>
@@ -214,47 +237,22 @@
                     </div>
                     @endforeach
                 </div>
-            </div>
-        </div>
-    </section>
-
-    <!-- Section Slider Navigation 2 -->
-    <div class="section-slider container mx-auto px-4 py-12" data-slider-index="1">
-        <div class="flex items-center justify-center gap-6">
-            <button type="button" class="slider-nav-btn slider-prev p-3 rounded-full bg-background-secondary/80 hover:bg-primary/20 border border-neutral/30 hover:border-primary/40 transition-all duration-300 group" aria-label="Previous section">
-                <x-ri-arrow-left-s-line class="size-5 text-color-muted group-hover:text-primary transition-colors" />
-            </button>
-            <div class="flex-1 max-w-md">
-                <div class="relative h-1 bg-neutral/20 rounded-full overflow-hidden">
-                    <div class="slider-progress absolute left-0 top-0 h-full bg-gradient-to-r from-primary to-secondary rounded-full transition-all duration-300" style="width: 20%"></div>
-                </div>
-                <div class="flex justify-between mt-3">
-                    <div class="slider-dots flex items-center gap-2">
-                        <button type="button" class="slider-dot w-2 h-2 rounded-full bg-neutral/40 hover:bg-primary/60 transition-all duration-300" data-section="hero" aria-label="Go to Hero section"></button>
-                        <button type="button" class="slider-dot w-2 h-2 rounded-full bg-primary transition-all duration-300" data-section="services" aria-label="Go to Services section"></button>
-                        <button type="button" class="slider-dot w-2 h-2 rounded-full bg-neutral/40 hover:bg-primary/60 transition-all duration-300" data-section="panel-features" aria-label="Go to Panel Features section"></button>
-                        <button type="button" class="slider-dot w-2 h-2 rounded-full bg-neutral/40 hover:bg-primary/60 transition-all duration-300" data-section="features" aria-label="Go to Features section"></button>
-                        <button type="button" class="slider-dot w-2 h-2 rounded-full bg-neutral/40 hover:bg-primary/60 transition-all duration-300" data-section="cta" aria-label="Go to CTA section"></button>
-                        <button type="button" class="slider-dot w-2 h-2 rounded-full bg-neutral/40 hover:bg-primary/60 transition-all duration-300" data-section="footer" aria-label="Go to Footer section"></button>
                     </div>
                 </div>
             </div>
-            <button type="button" class="slider-nav-btn slider-next p-3 rounded-full bg-background-secondary/80 hover:bg-primary/20 border border-neutral/30 hover:border-primary/40 transition-all duration-300 group" aria-label="Next section">
-                <x-ri-arrow-right-s-line class="size-5 text-color-muted group-hover:text-primary transition-colors" />
-            </button>
         </div>
-    </div>
 
-    <!-- Control Panel Features - Modern Bento Layout -->
-    <section id="panel-features" class="py-12 md:py-16 relative">
-        <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>
+        <!-- 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>
@@ -601,85 +599,60 @@
                         <p class="text-sm text-color-muted">Custom images</p>
                     </div>
                 </div>
-            </div>
+                    </div>
+                    </div>
+                </div>
             </div>
         </div>
-    </section>
 
-    <!-- Section Slider Navigation 3 -->
-    <div class="section-slider container mx-auto px-4 py-12" data-slider-index="2">
-        <div class="flex items-center justify-center gap-6">
-            <button type="button" class="slider-nav-btn slider-prev p-3 rounded-full bg-background-secondary/80 hover:bg-primary/20 border border-neutral/30 hover:border-primary/40 transition-all duration-300 group" aria-label="Previous section">
-                <x-ri-arrow-left-s-line class="size-5 text-color-muted group-hover:text-primary transition-colors" />
-            </button>
-            <div class="flex-1 max-w-md">
-                <div class="relative h-1 bg-neutral/20 rounded-full overflow-hidden">
-                    <div class="slider-progress absolute left-0 top-0 h-full bg-gradient-to-r from-primary to-secondary rounded-full transition-all duration-300" style="width: 40%"></div>
-                </div>
-                <div class="flex justify-between mt-3">
-                    <div class="slider-dots flex items-center gap-2">
-                        <button type="button" class="slider-dot w-2 h-2 rounded-full bg-neutral/40 hover:bg-primary/60 transition-all duration-300" data-section="hero" aria-label="Go to Hero section"></button>
-                        <button type="button" class="slider-dot w-2 h-2 rounded-full bg-neutral/40 hover:bg-primary/60 transition-all duration-300" data-section="services" aria-label="Go to Services section"></button>
-                        <button type="button" class="slider-dot w-2 h-2 rounded-full bg-primary transition-all duration-300" data-section="panel-features" aria-label="Go to Panel Features section"></button>
-                        <button type="button" class="slider-dot w-2 h-2 rounded-full bg-neutral/40 hover:bg-primary/60 transition-all duration-300" data-section="features" aria-label="Go to Features section"></button>
-                        <button type="button" class="slider-dot w-2 h-2 rounded-full bg-neutral/40 hover:bg-primary/60 transition-all duration-300" data-section="cta" aria-label="Go to CTA section"></button>
-                        <button type="button" class="slider-dot w-2 h-2 rounded-full bg-neutral/40 hover:bg-primary/60 transition-all duration-300" data-section="footer" aria-label="Go to Footer section"></button>
-                    </div>
-                </div>
-            </div>
-            <button type="button" class="slider-nav-btn slider-next p-3 rounded-full bg-background-secondary/80 hover:bg-primary/20 border border-neutral/30 hover:border-primary/40 transition-all duration-300 group" aria-label="Next section">
-                <x-ri-arrow-right-s-line class="size-5 text-color-muted group-hover:text-primary transition-colors" />
-            </button>
-        </div>
-    </div>
-
-    <!-- Infrastructure Features -->
-    <section id="features" class="py-12 md:py-16">
-        <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" />
+        <!-- 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>
-                            <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" />
+                        <!-- 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>
-                            <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>
+
+                            <!-- 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 -->
@@ -740,91 +713,66 @@
                                 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>
-    </section>
 
-    <!-- Section Slider Navigation 4 -->
-    <div class="section-slider container mx-auto px-4 py-12" data-slider-index="3">
-        <div class="flex items-center justify-center gap-6">
-            <button type="button" class="slider-nav-btn slider-prev p-3 rounded-full bg-background-secondary/80 hover:bg-primary/20 border border-neutral/30 hover:border-primary/40 transition-all duration-300 group" aria-label="Previous section">
-                <x-ri-arrow-left-s-line class="size-5 text-color-muted group-hover:text-primary transition-colors" />
-            </button>
-            <div class="flex-1 max-w-md">
-                <div class="relative h-1 bg-neutral/20 rounded-full overflow-hidden">
-                    <div class="slider-progress absolute left-0 top-0 h-full bg-gradient-to-r from-primary to-secondary rounded-full transition-all duration-300" style="width: 60%"></div>
-                </div>
-                <div class="flex justify-between mt-3">
-                    <div class="slider-dots flex items-center gap-2">
-                        <button type="button" class="slider-dot w-2 h-2 rounded-full bg-neutral/40 hover:bg-primary/60 transition-all duration-300" data-section="hero" aria-label="Go to Hero section"></button>
-                        <button type="button" class="slider-dot w-2 h-2 rounded-full bg-neutral/40 hover:bg-primary/60 transition-all duration-300" data-section="services" aria-label="Go to Services section"></button>
-                        <button type="button" class="slider-dot w-2 h-2 rounded-full bg-neutral/40 hover:bg-primary/60 transition-all duration-300" data-section="panel-features" aria-label="Go to Panel Features section"></button>
-                        <button type="button" class="slider-dot w-2 h-2 rounded-full bg-primary transition-all duration-300" data-section="features" aria-label="Go to Features section"></button>
-                        <button type="button" class="slider-dot w-2 h-2 rounded-full bg-neutral/40 hover:bg-primary/60 transition-all duration-300" data-section="cta" aria-label="Go to CTA section"></button>
-                        <button type="button" class="slider-dot w-2 h-2 rounded-full bg-neutral/40 hover:bg-primary/60 transition-all duration-300" data-section="footer" aria-label="Go to Footer section"></button>
-                    </div>
-                </div>
-            </div>
-            <button type="button" class="slider-nav-btn slider-next p-3 rounded-full bg-background-secondary/80 hover:bg-primary/20 border border-neutral/30 hover:border-primary/40 transition-all duration-300 group" aria-label="Next section">
-                <x-ri-arrow-right-s-line class="size-5 text-color-muted group-hover:text-primary transition-colors" />
-            </button>
-        </div>
-    </div>
-
-    <!-- CTA Section - Modern Split Design -->
-    <section id="cta" class="py-12 md:py-16">
-        <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" />
+        <!-- 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>
-                                    <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">
+                                    
+                                    <!-- 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>
@@ -886,43 +834,77 @@
                         </div>
                     </div>
                 </div>
-            </div>
-        </div>
-    </section>
-
-    <!-- Section Slider Navigation 5 -->
-    <div class="section-slider container mx-auto px-4 py-12" data-slider-index="4">
-        <div class="flex items-center justify-center gap-6">
-            <button type="button" class="slider-nav-btn slider-prev p-3 rounded-full bg-background-secondary/80 hover:bg-primary/20 border border-neutral/30 hover:border-primary/40 transition-all duration-300 group" aria-label="Previous section">
-                <x-ri-arrow-left-s-line class="size-5 text-color-muted group-hover:text-primary transition-colors" />
-            </button>
-            <div class="flex-1 max-w-md">
-                <div class="relative h-1 bg-neutral/20 rounded-full overflow-hidden">
-                    <div class="slider-progress absolute left-0 top-0 h-full bg-gradient-to-r from-primary to-secondary rounded-full transition-all duration-300" style="width: 80%"></div>
-                </div>
-                <div class="flex justify-between mt-3">
-                    <div class="slider-dots flex items-center gap-2">
-                        <button type="button" class="slider-dot w-2 h-2 rounded-full bg-neutral/40 hover:bg-primary/60 transition-all duration-300" data-section="hero" aria-label="Go to Hero section"></button>
-                        <button type="button" class="slider-dot w-2 h-2 rounded-full bg-neutral/40 hover:bg-primary/60 transition-all duration-300" data-section="services" aria-label="Go to Services section"></button>
-                        <button type="button" class="slider-dot w-2 h-2 rounded-full bg-neutral/40 hover:bg-primary/60 transition-all duration-300" data-section="panel-features" aria-label="Go to Panel Features section"></button>
-                        <button type="button" class="slider-dot w-2 h-2 rounded-full bg-neutral/40 hover:bg-primary/60 transition-all duration-300" data-section="features" aria-label="Go to Features section"></button>
-                        <button type="button" class="slider-dot w-2 h-2 rounded-full bg-primary transition-all duration-300" data-section="cta" aria-label="Go to CTA section"></button>
-                        <button type="button" class="slider-dot w-2 h-2 rounded-full bg-neutral/40 hover:bg-primary/60 transition-all duration-300" data-section="footer" aria-label="Go to Footer section"></button>
-                    </div>
                 </div>
             </div>
-            <button type="button" class="slider-nav-btn slider-next p-3 rounded-full bg-background-secondary/80 hover:bg-primary/20 border border-neutral/30 hover:border-primary/40 transition-all duration-300 group" aria-label="Next section">
-                <x-ri-arrow-right-s-line class="size-5 text-color-muted group-hover:text-primary transition-colors" />
-            </button>
         </div>
-    </div>
 
-    <div class="pb-8">
-        {!! hook('pages.home') !!}
+    </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;
@@ -1113,119 +1095,101 @@
 
 <script>
 document.addEventListener('DOMContentLoaded', function() {
-    // Section slider configuration
-    const sections = ['hero', 'services', 'panel-features', 'features', 'cta', 'footer'];
-    let currentSectionIndex = 0;
+    // 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 no interaction
+    const RESUME_DELAY = 30000; // Resume auto-slide after 30 seconds of inactivity
     let resumeTimeout = null;
-
-    // Get all slider elements
-    const sliders = document.querySelectorAll('.section-slider');
-
-    // Function to scroll to a section
-    function scrollToSection(sectionId) {
-        let targetElement;
-        if (sectionId === 'hero') {
-            // Scroll to top for hero
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-            return;
-        } else if (sectionId === 'footer') {
-            // Scroll to bottom for footer
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-            return;
-        } else {
-            targetElement = document.getElementById(sectionId);
+    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');
         }
         
-        if (targetElement) {
-            const headerOffset = 100; // Account for fixed header if any
-            const elementPosition = targetElement.getBoundingClientRect().top;
-            const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
-            
-            window.scrollTo({
-                top: offsetPosition,
-                behavior: 'smooth'
-            });
-        }
-    }
-
-    // Function to update all slider UI elements
-    function updateAllSliderUI(activeIndex) {
-        sliders.forEach(slider => {
-            const dots = slider.querySelectorAll('.slider-dot');
-            const progressBar = slider.querySelector('.slider-progress');
-            
-            // Update dots
-            dots.forEach((dot, index) => {
-                if (index === activeIndex) {
-                    dot.classList.remove('bg-neutral/40');
-                    dot.classList.add('bg-primary');
-                } else {
-                    dot.classList.remove('bg-primary');
-                    dot.classList.add('bg-neutral/40');
-                }
-            });
-            
-            // Update progress bar
-            if (progressBar) {
-                const progress = ((activeIndex) / (sections.length - 1)) * 100;
-                progressBar.style.width = progress + '%';
+        // 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)';
             }
         });
-    }
-
-    // Function to determine current section based on scroll position
-    function getCurrentSectionFromScroll() {
-        const scrollPosition = window.scrollY + window.innerHeight / 2;
-        const documentHeight = document.documentElement.scrollHeight;
         
-        // Check if near bottom (footer)
-        if (window.scrollY + window.innerHeight >= documentHeight - 100) {
-            return sections.length - 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);
         }
         
-        // Check if at top (hero)
-        if (window.scrollY < 200) {
-            return 0;
-        }
+        currentSlide = index;
         
-        // Find the current section
-        for (let i = sections.length - 2; i >= 1; i--) {
-            const section = document.getElementById(sections[i]);
-            if (section) {
-                const rect = section.getBoundingClientRect();
-                if (rect.top <= window.innerHeight / 2) {
-                    return i;
-                }
-            }
-        }
-        
-        return 0;
+        // Reset animation state after transition
+        setTimeout(() => {
+            isAnimating = false;
+            currentSlideEl.classList.remove('slide-up');
+        }, ANIMATION_DURATION);
     }
-
-    // Function to go to next section
-    function goToNextSection() {
-        currentSectionIndex = (currentSectionIndex + 1) % sections.length;
-        scrollToSection(sections[currentSectionIndex]);
-        updateAllSliderUI(currentSectionIndex);
+    
+    // Function to go to next slide
+    function goToNextSlide() {
+        const nextIndex = (currentSlide + 1) % slides.length;
+        goToSlide(nextIndex, 'next');
     }
-
-    // Function to go to previous section
-    function goToPrevSection() {
-        currentSectionIndex = (currentSectionIndex - 1 + sections.length) % sections.length;
-        scrollToSection(sections[currentSectionIndex]);
-        updateAllSliderUI(currentSectionIndex);
+    
+    // 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(goToNextSection, AUTO_SLIDE_DELAY);
+        autoSlideInterval = setInterval(goToNextSlide, AUTO_SLIDE_DELAY);
     }
-
+    
     // Function to stop auto-slide
     function stopAutoSlide() {
         if (autoSlideInterval) {
@@ -1233,7 +1197,7 @@ document.addEventListener('DOMContentLoaded', function() {
             autoSlideInterval = null;
         }
     }
-
+    
     // Function to handle manual interruption
     function handleManualInteraction() {
         isManuallyInterrupted = true;
@@ -1248,103 +1212,180 @@ document.addEventListener('DOMContentLoaded', function() {
             startAutoSlide();
         }, RESUME_DELAY);
     }
-
-    // Add click handlers to all slider navigation buttons
-    sliders.forEach(slider => {
-        // Previous button
-        const prevBtn = slider.querySelector('.slider-prev');
-        if (prevBtn) {
-            prevBtn.addEventListener('click', (e) => {
-                e.preventDefault();
-                handleManualInteraction();
-                goToPrevSection();
-            });
-        }
-        
-        // Next button
-        const nextBtn = slider.querySelector('.slider-next');
-        if (nextBtn) {
-            nextBtn.addEventListener('click', (e) => {
-                e.preventDefault();
-                handleManualInteraction();
-                goToNextSection();
-            });
-        }
-        
-        // Dot buttons
-        const dots = slider.querySelectorAll('.slider-dot');
-        dots.forEach((dot, index) => {
-            dot.addEventListener('click', (e) => {
-                e.preventDefault();
-                handleManualInteraction();
-                currentSectionIndex = index;
-                scrollToSection(sections[index]);
-                updateAllSliderUI(index);
-            });
+    
+    // Navigation dot click handlers
+    navDots.forEach((dot, index) => {
+        dot.addEventListener('click', (e) => {
+            e.preventDefault();
+            handleManualInteraction();
+            const direction = index > currentSlide ? 'next' : 'prev';
+            goToSlide(index, direction);
         });
     });
-
-    // Update slider UI on scroll
-    let scrollTimeout;
-    window.addEventListener('scroll', () => {
-        clearTimeout(scrollTimeout);
-        scrollTimeout = setTimeout(() => {
-            const newIndex = getCurrentSectionFromScroll();
-            if (newIndex !== currentSectionIndex) {
-                currentSectionIndex = newIndex;
-                updateAllSliderUI(currentSectionIndex);
+    
+    // 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;
+                }
             }
-        }, 100);
+        }
+        
+        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 = sections.indexOf(hash);
-            if (sectionIndex !== -1) {
+            const sectionIndex = sectionIds.indexOf(hash);
+            if (sectionIndex !== -1 && sectionIndex !== currentSlide) {
                 handleManualInteraction();
-                currentSectionIndex = sectionIndex;
-                updateAllSliderUI(currentSectionIndex);
+                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) {
-        handleHashChange();
+        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)';
+                }
+            });
+        }
     }
-
-    // Pause auto-slide when user interacts with page
-    document.addEventListener('mousedown', () => {
-        if (!isManuallyInterrupted) {
-            handleManualInteraction();
-        }
-    });
-
-    document.addEventListener('touchstart', () => {
-        if (!isManuallyInterrupted) {
-            handleManualInteraction();
-        }
-    });
-
-    document.addEventListener('keydown', (e) => {
-        // Handle arrow key navigation
-        if (e.key === 'ArrowLeft') {
-            handleManualInteraction();
-            goToPrevSection();
-        } else if (e.key === 'ArrowRight') {
-            handleManualInteraction();
-            goToNextSection();
-        }
-    });
-
-    // Initialize
-    currentSectionIndex = getCurrentSectionFromScroll();
-    updateAllSliderUI(currentSectionIndex);
+    
+    // Start auto-slide
     startAutoSlide();
 });
 </script>