Add guides preview section and enhance button styles

npc-servers · Dec 31, 2024 · 34a0c50 · 34a0c50
1 parent 118af61
commit 34a0c50
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 7 deletions.
diff --git a/css/guides.css b/css/guides.css
@@ -66,23 +66,29 @@
 
 .back-to-guides {
     display: inline-block;
-    padding: 10px 20px;
-    background: #2c2c2c;
+    padding: 12px 32px;
+    background: rgba(255, 255, 255, 0.1);
     color: #fff;
     text-decoration: none;
-    border-radius: 4px;
-    transition: background 0.3s;
+    border-radius: 25px;
+    font-size: 1.1rem;
+    transition: all 0.3s ease;
+    border: 1px solid rgba(255, 255, 255, 0.2);
 }
 
 .back-to-guides:hover {
-    background: #3a3a3a;
+    background: rgba(255, 255, 255, 0.2);
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
 }
 
 /* Guides Preview Section (for index page) */
 .guides-preview-section {
     padding: 60px 0;
     background: rgba(0, 0, 0, 0.2);
     width: 100%;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .guides-preview-container {
@@ -104,6 +110,30 @@
     margin-bottom: 15px;
 }
 
+.guides-preview-actions {
+    text-align: center;
+    margin-top: 20px;
+    padding: 0 20px;
+}
+
+.view-guides-button {
+    display: inline-block;
+    padding: 12px 32px;
+    background: rgba(255, 255, 255, 0.1);
+    color: #fff;
+    text-decoration: none;
+    border-radius: 25px;
+    font-size: 1.1rem;
+    transition: all 0.3s ease;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.view-guides-button:hover {
+    background: rgba(255, 255, 255, 0.2);
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+}
+
 /* Swiper Styling */
 .guides-preview-section .swiper-container {
     width: 100%;
@@ -136,14 +166,15 @@
     flex-direction: column;
     cursor: pointer;
     will-change: transform, opacity;
-    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
+    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
+    border: 1px solid transparent;
 }
 
 /* Directory Page Guide Card Animations */
 .guides-directory .guide-card {
     opacity: 0;
     transform: translateY(40px);
-    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s ease-out;
+    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
     backface-visibility: hidden;
     perspective: 1000px;
 }
@@ -181,8 +212,15 @@
     transform: none;
 }
 
+.guides-preview-section .swiper-slide-visible .guide-card {
+    border-color: rgba(255, 255, 255, 0.2);
+}
+
 .guides-preview-section .guide-card:hover {
     transform: translateY(-5px);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+    border-color: rgba(255, 255, 255, 0.3);
+    background: rgba(44, 44, 44, 0.9);
 }
 
 /* Hide inactive swiper slides */
@@ -495,6 +533,12 @@
 }
 
 @media (max-width: 768px) {
+    .guides-preview-section {
+        border: none;
+        border-top: 1px solid rgba(255, 255, 255, 0.1);
+        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    }
+
     .guides-preview-section .swiper-container {
         padding: 20px 30px;
         overflow: visible;

diff --git a/index.html b/index.html
@@ -142,6 +142,9 @@ <h2>Latest Guides</h2>
                 <!-- Add Pagination -->
                 <div class="swiper-pagination"></div>
             </div>
+            <div class="guides-preview-actions">
+                <a href="/guides" class="view-guides-button">View All Guides</a>
+            </div>
         </div>
     </div>