Spaces:

GregorSaalste
/

undefined

Running

App Files Files Community

GregorSaalste commited on Sep 28, 2025

Commit

1c6afd0

verified ·

1 Parent(s): 046c581

Please make a page now for SWAT (Madeup of 4 Departments SWAT teams)

Browse files

Files changed (3) hide show

README.md +9 -5
index.html +709 -18
swat.html +452 -0

README.md CHANGED Viewed

@@ -1,10 +1,14 @@
 ---
-title: Undefined
-emoji: 😻
-colorFrom: green
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: undefined
+colorFrom: gray
+colorTo: yellow
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,710 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Atlantic Shores Roleplay | Whitelisted FiveM Server</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <!-- Basic Tags-->
+<link rel="icon" href="Assets/fav.png"/>
+<!-- Basic Tags-->
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Gruppo&family=IBM+Plex+Sans+Condensed:ital,wght@1,200&family=Kanit:wght@100&family=Lato&family=Play&family=Roboto&display=swap" rel="stylesheet">
+<link rel="canonical" href="https://asrp.us">
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<!-- SEO Meta Tags -->
+<meta name="description" content="Atlantic Shores Roleplay is a FiveM community for players aged 17 and older, set in Key West, Florida. Join a realistic roleplay experience today!">
+<meta name="keywords" content="Atlantic Shores Roleplay, FiveM, GTA V Roleplay, Key West, Florida Roleplay, 17+ Community, Realistic Roleplay">
+<meta name="robots" content="index, follow">
+<!-- Open Graph Tags -->
+<meta property="og:type" content="website">
+<meta property="og:title" content="Atlantic Shores Roleplay">
+<meta property="og:description" content="Atlantic Shores Roleplay is a FiveM community for players aged 17 and older, set in Key West, Florida. Join a realistic roleplay experience today!">
+<meta property="og:image" content="https://asrp.us/Assets/Heya.png">
+<meta property="og:url" content="https://asrp.us">
+<meta property="og:site_name" content="Atlantic Shores Roleplay">
+<!-- Twitter Card Tags -->
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:title" content="Atlantic Shores Roleplay">
+<meta name="twitter:description" content="Atlantic Shores Roleplay is a 17+ FiveM Community based in Key West, Florida">
+<meta name="twitter:image" content="https://asrp.us/Assets/Heya.png">
+<!-- Structured Data (Schema.org) -->
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@type": "Organization",
+  "url": "https://asrp.us",
+  "logo": "https://asrp.us/Assets/logo.png",
+  "name": "Atlantic Shores Roleplay",
+  "description": "Atlantic Shores Roleplay is a FiveM community for players aged 17 and older, set in Key West, Florida. Join a realistic roleplay experience today!",
+  "sameAs": [
+    "https://facebook.com/AtlanticShoresRP",
+    "https://twitter.com/AtlanticShoresRP"
+  ]
+}
+</script>
+<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
+<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
+<style>
+::selection {
+  background: #e4355b; /* fallback solid color */
+  color: white;
+}
+         /* Custom Scrollbar */
+        ::-webkit-scrollbar {
+            width: 12px;
+        }
+        ::-webkit-scrollbar-track {
+            background: #1a1a1a;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: linear-gradient(#e4355b, #e38c26);
+            border-radius: 6px;
+            border: 3px solid #1a1a1a;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: linear-gradient(#e38c26, #e4355b);
+        }
+body {
+  cursor: url('Assets/cursor.png') 16 16, auto;
+    a:hover, button:hover {
+  cursor: url('Assets/cursor2.png') 0 0, auto;
+}
+}
+/* ---------- video/hero ---------- */
+    .video-background {
+      position: relative;
+      width: 100%;
+      height: 100vh;        /* full viewport height */
+      overflow: hidden;
+    }
+    .video-background video {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      min-width: 100%;
+      min-height: 100%;
+      width: auto;
+      height: auto;
+      object-fit: cover;    /* keep proportions and fill */
+      z-index: 0;
+    }
+    .video-overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0,0,0,0.6);
+      z-index: 1;
+    }
+        .content {
+            position: relative;
+            z-index: 2;
+        }
+        .counter-item {
+            transition: all 0.3s ease;
+        }
+        .transition-all {
+            transition-property: all;
+        }
+        .counter-item:hover {
+            transform: translateY(-5px);
+        }
+        .department-card {
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+        .department-card:hover {
+            transform: translateY(-10px);
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+        }
+        .nav-link {
+            position: relative;
+        }
+        .nav-link::after {
+            content: '';
+            position: absolute;
+            width: 0;
+            height: 2px;
+            bottom: -2px;
+            left: 0;
+            background: linear-gradient(90deg, #e4355b, #e38c26);
+            transition: width 0.3s ease;
+        }
+        .nav-link:hover::after {
+            width: 100%;
+        }
+        .gradient-text {
+            background: linear-gradient(90deg, #e4355b, #e38c26);
+            background-size: 200% auto;
+            background-clip: text;
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            transition: background-position 0.5s ease;
+        }
+        .gradient-text:hover {
+            background-position: 100% center;
+        }
+        .made-in-usa {
+margin-left: 20px;
+}
+.made-in-usa-logo {
+max-width: 70px;
+height: auto;
+}
+#orb-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none; /* let mouse still interact with buttons */
+  z-index: 1; /* above video but below overlay text */
+}
+    </style>
+</head>
+<body class="bg-black text-gray-100 font-sans">
+    <!-- Header with Logo and Navigation (Hidden by default) -->
+    <header class="fixed w-full z-50 bg-black bg-opacity-90 shadow-lg transform -translate-y-full transition-transform duration-300" id="navbar">
+        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
+            <div class="flex items-center">
+                <img src="Assets/logo.png" alt="Atlantic Shores Roleplay logo" class="h-[50px] w-[140px]" align=left>
+            </div>
+            <nav class="hidden md:flex space-x-6">
+                <a href="https://asrp.us" class="nav-link px-3 py-2 text-gray-300 hover:text-white rounded-lg transition-all duration-300 flex items-center">
+                    <i class="fas fa-home mr-2 text-sm"></i> Home
+                </a>
+                <a href="#about" class="nav-link px-3 py-2 text-gray-300 hover:text-white rounded-lg transition-all duration-300 flex items-center">
+                    <i class="fas fa-info-circle mr-2 text-sm"></i> About
+                </a>
+                <a href="#dept" class="nav-link px-3 py-2 text-gray-300 hover:text-white rounded-lg transition-all duration-300 flex items-center">
+                    <i class="fas fa-building mr-2 text-sm"></i> Departments
+                </a>
+                <a href="https://docs.google.com/document/d/1smQRxW98qs1LAvXO69y3h4DE5JOkwmAURhBy3I4_usc/edit?tab=t.0" class="nav-link px-3 py-2 text-gray-300 hover:text-white rounded-lg transition-all duration-300 flex items-center">
+                    <i class="fas fa-book mr-2 text-sm"></i> Requirements
+                </a>
+                <a href="https://asrp.us/apply" class="nav-link px-3 py-2 text-gray-300 hover:text-white rounded-lg transition-all duration-300 flex items-center">
+                    <i class="fas fa-user-plus mr-2 text-sm"></i> Apply Now
+                </a>
+            </nav>
+            <button class="md:hidden text-gray-300 hover:text-white bg-gray-800 hover:bg-gray-700 p-2 rounded-lg transition-colors duration-300">
+                <i class="fas fa-bars text-xl"></i>
+            </button>
+        </div>
+    </header>
+    <!-- Hero Section with Video Background -->
+   <section class="video-background">
+  <video autoplay muted loop>
+    <source src="Assets/AboutUs.mp4" type="video/mp4">
+    Your browser does not support the video tag.
+  </video>
+  <div class="video-overlay"></div>
+  <!-- Orb Canvas -->
+  <div id="orb-container"></div>
+        <div class="content h-full flex flex-col justify-center items-center text-center px-4">
+            <div class="max-w-4xl mx-auto">
+                <div class="mb-10 flex flex-col items-center">
+                    <img src="Assets/logo.png" alt="Atlantic Shores Roleplay" class="h-[150px] w-[400px] mb-8 animate-pulse" style="filter: drop-shadow(0 0 10px rgba(228, 53, 91, 0.7))">
+                    <div class="flex items-center">
+                    <div class="text-left pr-6 border-r border-gray-500">
+                        <p class="text-xl md:text-2xl font-bold gradient-text">Unleashing Passion,<br>Redefining Reality</p>
+                    </div>
+                    <div class="text-left pl-6 text-gray-300">
+                        <p class="text-lg md:text-xl">Established in early 2023, we are dedicated to creating a unique, realistic, inclusive and authentic Florida based community</p>
+                    </div>
+                </div>
+                <div class="flex flex-wrap justify-center gap-4 mb-16">
+                    <a href="https://asrp.us/apply" class="px-8 py-3 bg-gradient-to-r from-[#e4355b] to-[#e38c26] rounded-full font-semibold transition-all duration-300 hover:scale-105 shadow-lg hover:shadow-xl hover:shadow-[#e4355b]/30">
+                        <i class="fas fa-user-plus mr-2"></i> Apply Now
+                    </a>
+                    <a href="https://docs.google.com/document/d/1smQRxW98qs1LAvXO69y3h4DE5JOkwmAURhBy3I4_usc/edit?tab=t.0" class="px-8 py-3 bg-transparent border-2 border-orange-500 rounded-full font-semibold transition-all duration-300 hover:scale-105 hover:bg-orange-500 hover:bg-opacity-10 hover:border-orange-400">
+                        <i class="fas fa-book-open mr-2"></i> Requirements
+                    </a>
+                </div>
+<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-8 w-full max-w-5xl mx-auto">
+                    <div class="counter-item bg-gray-900 bg-opacity-70 p-6 rounded-lg w-full">
+                        <div class="text-xl md:text-3xl font-bold gradient-text" id="playerCount">0</div>
+                        <div class="text-gray-400">Arrests</div>
+                    </div>
+                    <div class="counter-item bg-gray-900 bg-opacity-70 p-6 rounded-lg w-full">
+                        <div class="text-xl md:text-3xl font-bold gradient-text">5000+</div>
+                        <div class="text-gray-400">Citations</div>
+                    </div>
+                    <div class="counter-item bg-gray-900 bg-opacity-70 p-6 rounded-lg w-full">
+                        <div class="text-xl md:text-3xl font-bold gradient-text">2 Years</div>
+                        <div class="text-gray-400">Of Service</div>
+                    </div>
+                    <div class="counter-item bg-gray-900 bg-opacity-70 p-6 rounded-lg w-full">
+                        <div class="text-xl md:text-3xl font-bold gradient-text">100%</div>
+                        <div class="text-gray-400">Whitelisted</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- SWAT Section -->
+    <section class="py-20 bg-gradient-to-b from-black to-gray-950">
+        <div class="container mx-auto px-4">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-[#e4355b] to-[#e38c26] bg-clip-text text-transparent">Special Weapons And Tactics</h2>
+                <p class="max-w-2xl mx-auto text-gray-400">Elite tactical units serving Key West with precision and professionalism</p>
+            </div>
+            <div class="flex justify-center">
+                <a href="https://asrp.us/swat.html" class="px-8 py-3 bg-gradient-to-r from-[#e4355b] to-[#e38c26] rounded-full font-semibold transition-all duration-300 hover:scale-105 shadow-lg hover:shadow-xl hover:shadow-[#e4355b]/30">
+                    <i class="fas fa-bullseye mr-2"></i> Learn About SWAT
+                </a>
+            </div>
+        </div>
+    </section>
+<!-- About Us Section -->
+    <section class="py-20 bg-gradient-to-b from-gray-950 to-black">
+        <div class="container mx-auto px-4">
+            <div class="text-center mb-16">
+<h2 id="about" class="text-3xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-[#e4355b] to-[#e38c26] bg-clip-text text-transparent">Our Community</h2>
+                <p class="max-w-4xl mx-auto text-gray-400">What Sets Us Apart.</p>
+            </div>
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+                <div>
+                    <h3 class="text-2xl font-bold mb-4 text-white">Our Mission</h3>
+                    <p class="text-gray-400 mb-6">Our mission is to create an immersive, well-balanced roleplay environment rooted in the unique setting of Key West, Florida. We aim to provide a space where players can enjoy realistic law enforcement, emergency services, and civilian experiences, all while fostering community, creativity, and respect for quality roleplay. Every department, from public safety to private security, plays a part in keeping the world alive and engaging and we're committed to maintaining a server where that effort shows.</p>
+                    <h3 class="text-2xl font-bold mb-4 text-white">What We Offer</h3>
+                    <ul class="space-y-3 text-gray-400">
+                        <li class="flex items-start">
+                            <i class="fas fa-check-circle text-[#e38c26] mt-1 mr-3"></i>
+                            <span>Whitelisted, high-quality roleplay with active staff</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i class="fas fa-check-circle text-[#e38c26] mt-1 mr-3"></i>
+                            <span>Custom Assets And Active Development</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i class="fas fa-check-circle text-[#e38c26] mt-1 mr-3"></i>
+                            <span>Multiple Departments And Sub-Divisons</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i class="fas fa-check-circle text-[#e38c26] mt-1 mr-3"></i>
+                            <span>Fun And Engaging Roleplay</span>
+                        </li>
+                    </ul>
+                </div>
+<iframe width="560" height="315" src="https://www.youtube.com/embed/o8SovrWRHYQ?si=mfDSI_iCPkuDqmk_" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+            </div>
+        </div>
+    </section>
+    <!-- Departments Section -->
+    <section class="py-20 bg-gradient-to-b from-black to-gray-950">
+        <div class="container mx-auto px-4">
+            <div class="text-center mb-16">
+                <h2 id="dept" class="text-3xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-[#e4355b] to-[#e38c26] bg-clip-text text-transparent">Our Departments</h2>
+                <p class="max-w-2xl mx-auto text-gray-400">Be Who You Want To Be.</p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8">
+                <!-- LSPD -->
+                <div class="department-card bg-gray-800 rounded-lg overflow-hidden hover:bg-gray-700">
+                    <div class="h-48 bg-gradient-to-br from-[#23d7d6] to-[#327aaf] flex items-center justify-center" oncontextmenu="return false;">
+                        <img src="Assets/Depts/lspd.png" alt="LSPD Logo" class="h-32 w-32 object-contain">
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-2 text-blue-400">Los Santos Police Department</h3>
+                        <p class="text-gray-400 mb-4">We will ensure public safety, enforce the law with integrity, and provide extraordinary service.</p>
+                    </div>
+                </div>
+                <!-- BCSO -->
+                <div class="department-card bg-gray-800 rounded-lg overflow-hidden hover:bg-gray-700">
+                    <div class="h-48 bg-blue-800 flex items-center justify-center" oncontextmenu="return false;">
+                        <img src="Assets/Depts/BCSO.png" alt="BCSO Logo" class="h-32 w-32 object-contain">
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-2 text-blue-400">Blaine County Sheriff's Office</h3>
+                        <p class="text-gray-400 mb-4">The Blaine County Sheriff’s Office is committed to excellence in law enforcement, ensuring the safety of our residents and visitors</p>
+                    </div>
+                </div>
+                <!-- EMS -->
+                <div class="department-card bg-gray-800 rounded-lg overflow-hidden hover:bg-gray-700">
+                    <div class="h-48 bg-gradient-to-br from-[#23d7d6] to-[#327aaf] flex items-center justify-center" oncontextmenu="return false;">
+                        <img src="Assets/Depts/SAHP.png" alt="EMS Logo" class="h-32 w-32 object-contain">
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-2 text-blue-400">San Andreas Highway Patrol</h3>
+                        <p class="text-gray-400 mb-4">The San Andreas Highway Patrol Is Dedicated To Protecting The Visitors And Residents Of San Andreas</p>
+                    </div>
+                </div>
+                <!-- DOJ -->
+                <div class="department-card bg-gray-800 rounded-lg overflow-hidden hover:bg-gray-700">
+                    <div class="h-48 bg-purple-900 flex items-center justify-center" oncontextmenu="return false;">
+                        <img src="Assets/Depts/civ.png" alt="DOJ Logo" class="h-32 w-32 object-contain">
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-2 text-purple-400">Civilian Operations</h3>
+                        <p class="text-gray-400 mb-4">It is our ambition to ensure San Andreas comes to life in a manner that all can enjoy and participate in.</p>
+                    </div>
+                </div>
+                <!-- Fire Department -->
+                <div class="department-card bg-gray-800 rounded-lg overflow-hidden hover:bg-gray-700">
+                    <div class="h-48 bg-orange-900 flex items-center justify-center" oncontextmenu="return false;">
+                        <img src="Assets/Depts/FIRE.png" alt="Fire Department Logo" class="h-32 w-32 object-contain">
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-2 text-orange-400">Fire Operations</h3>
+                        <p class="text-gray-400 mb-4">The mission of San Andreas Fire Operations is to ensure our citizen and visitors safety</p>
+                    </div>
+                </div>
+</div>
+        </div>
+    </section>
+    <!-- Requirements Section -->
+    <section class="py-20 bg-gradient-to-b from-gray-950 to-black">
+        <div class="container mx-auto px-4">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-[#e4355b] to-[#e38c26] bg-clip-text text-transparent">Community Requirements</h2>
+                <p class="max-w-2xl mx-auto text-gray-400">What you'll need to join our community</p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
+                <!-- Requirement 1 -->
+                <div class="bg-gray-800 rounded-lg p-8 hover:bg-gray-700 transition duration-300">
+                    <div class="text-4xl mb-4">
+                        <i class="fas fa-microphone gradient-text"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3 text-white">Microphone</h3>
+                    <p class="text-gray-400">A working microphone is required for all members to ensure quality roleplay.</p>
+                </div>
+                <!-- Requirement 2 -->
+                <div class="bg-gray-800 rounded-lg p-8 hover:bg-gray-700 transition duration-300">
+                    <div class="text-4xl mb-4">
+                        <i class="fas fa-user-check gradient-text"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3 text-white">Age Requirement</h3>
+                    <p class="text-gray-400">You must be at least 17 years old to join our community.</p>
+                </div>
+                <!-- Requirement 3 -->
+                <div class="bg-gray-800 rounded-lg p-8 hover:bg-gray-700 transition duration-300">
+                    <div class="text-4xl mb-4">
+                        <i class="fas fa-gamepad gradient-text"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3 text-white">FiveM Ready</h3>
+                    <p class="text-gray-400">You'll need a legitimate copy of GTA V and FiveM installed to play on our server.</p>
+                </div>
+            </div>
+            <div class="text-center mt-12">
+                <a href="https://docs.google.com/document/d/1smQRxW98qs1LAvXO69y3h4DE5JOkwmAURhBy3I4_usc/edit?tab=t.0" class="inline-block px-8 py-3 bg-gradient-to-r from-[#e4355b] to-[#e38c26] hover:from-[#ed2d57] hover:to-[#fc8e0d] rounded-full font-semibold transition duration-300 transform hover:scale-105 shadow-lg">
+                    <i class="fas fa-info-circle mr-2"></i> Full Requirements Guide
+                </a>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="py-16 bg-cover bg-center" style="background: linear-gradient(rgba(0,0,0,0.9), rgba(0,0,0,0.9)), url('Assets/footer.png') center/cover no-repeat;">
+        <div class="container mx-auto px-4">
+            <div class="grid grid-cols-1 lg:grid-cols-4 gap-8 mb-12">
+                <div class="lg:col-span-2">
+                    <div class="flex items-center mb-6">
+                        <img src="Assets/fav.png" alt="Atlantic Shores Logo" class="h-[120px] w-[152px] mr-4">
+                        <div class="border-l border-gray-600 pl-4">
+                            <h3 class="text-2xl font-bold bg-gradient-to-r from-[#e4355b] to-[#e38c26] bg-clip-text text-transparent">Atlantic Shores Roleplay</h3>
+                            <p class="text-gray-400 mt-2">17+ Whitelisted FiveM Community</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-400 text-lg max-w-xl">A premier FiveM community based in Key West, Florida, dedicated to creating immersive, realistic roleplay experiences for our members.</p>
+                </div>
+                <div>
+                    <h4 class="text-xl font-semibold mb-6 text-white border-b border-gray-700 pb-2">Quick Links</h4>
+                    <ul class="space-y-4">
+                        <li><a href="https://asrp.us" class="text-gray-400 hover:text-[#e38c26] transition-all duration-300 flex items-center group">
+                            <i class="fas fa-arrow-right mr-3 text-sm group-hover:translate-x-1 transition-transform"></i> Home
+                        </a></li>
+                        <li><a href="https://asrp.us/apply" class="text-gray-400 hover:text-[#e38c26] transition-all duration-300 flex items-center group">
+                            <i class="fas fa-arrow-right mr-3 text-sm group-hover:translate-x-1 transition-transform"></i> Apply Now
+                        </a></li>
+                        <li><a href="#dept" class="text-gray-400 hover:text-[#e38c26] transition-all duration-300 flex items-center group">
+                            <i class="fas fa-arrow-right mr-3 text-sm group-hover:translate-x-1 transition-transform"></i> Departments
+                        </a></li>
+                        <li><a href="#about" class="text-gray-400 hover:text-[#e38c26] transition-all duration-300 flex items-center group">
+                            <i class="fas fa-arrow-right mr-3 text-sm group-hover:translate-x-1 transition-transform"></i> About Us
+                        </a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-xl font-semibold mb-6 text-white border-b border-gray-700 pb-2">Connect With Us</h4>
+                    <div class="grid grid-cols-2 gap-4">
+                        <a href="https://discord.gg/js6qx7PbQC" class="bg-gray-800 hover:bg-gray-700 p-3 rounded-lg text-center transition-all duration-300 group">
+                            <i class="fab fa-discord text-2xl text-[#5865F2] group-hover:scale-110 transition-transform"></i>
+                            <p class="text-gray-400 text-sm mt-2">Discord</p>
+                        </a>
+                        <a href="https://x.com/ASRP_Official_" class="bg-gray-800 hover:bg-gray-700 p-3 rounded-lg text-center transition-all duration-300 group">
+                            <i class="fab fa-twitter text-2xl text-[#1DA1F2] group-hover:scale-110 transition-transform"></i>
+                            <p class="text-gray-400 text-sm mt-2">Twitter</p>
+                        </a>
+                        <a href="https://www.youtube.com/@asrp.online" class="bg-gray-800 hover:bg-gray-700 p-3 rounded-lg text-center transition-all duration-300 group">
+                            <i class="fab fa-youtube text-2xl text-[#FF0000] group-hover:scale-110 transition-transform"></i>
+                            <p class="text-gray-400 text-sm mt-2">YouTube</p>
+                        </a>
+                        <a href="https://www.instagram.com/asrp.us/" class="bg-gray-800 hover:bg-gray-700 p-3 rounded-lg text-center transition-all duration-300 group">
+                            <i class="fab fa-instagram text-2xl text-[#E1306C] group-hover:scale-110 transition-transform"></i>
+                            <p class="text-gray-400 text-sm mt-2">Instagram</p>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <div class="border-t border-gray-700 pt-8">
+                <div class="flex flex-col lg:flex-row justify-between items-center gap-6">
+                    <div class="text-center lg:text-left">
+                        <p class="text-gray-500">&copy; 2023 Atlantic Shores Roleplay. All rights reserved. | Developed By RedneckRyan</p>
+                    </div>
+                    <div class="flex items-center space-x-4">
+                        <div class="flex items-center bg-gray-800 px-4 py-2 rounded-lg">
+                            <div class="w-3 h-3 rounded-full bg-green-500 mr-2 animate-pulse"></div>
+                            <span class="text-gray-300 text-sm">Server: <span class="text-green-400 font-medium">Online</span></span>
+                        </div>
+                        <div class="flex items-center">
+                            <span class="text-gray-500 text-sm">Made in the USA</span>
+                            <img src="Assets/usa.png" alt="USA" class="h-5 w-5 ml-2">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </footer>
+<style>
+        .gallery-slides {
+            display: flex;
+            width: 300%;
+        }
+        .gallery-slide {
+            flex: 0 0 33.333%;
+            transition: transform 0.5s ease;
+        }
+    </style>
+    <script>
+        // Navbar scroll behavior
+        let lastScroll = 0;
+        window.addEventListener('scroll', function() {
+            const currentScroll = window.pageYOffset;
+            const navbar = document.getElementById('navbar');
+            if (currentScroll <= 100) { // Only hide when at very top of page
+                navbar.classList.add('-translate-y-full');
+                navbar.classList.remove('translate-y-0');
+                return;
+            }
+            if (currentScroll > lastScroll) {
+                // Scrolling down
+                navbar.classList.add('-translate-y-full');
+                navbar.classList.remove('translate-y-0');
+            } else {
+                // Scrolling up
+                navbar.classList.remove('-translate-y-full');
+                navbar.classList.add('translate-y-0');
+            }
+            lastScroll = currentScroll;
+        });
+        // Image Gallery Functionality
+        document.addEventListener('DOMContentLoaded', function() {
+            const slides = document.querySelector('.gallery-slides');
+            const prevBtn = document.querySelector('.gallery-prev');
+            const nextBtn = document.querySelector('.gallery-next');
+            const indicators = document.querySelectorAll('.gallery-indicator');
+            let currentIndex = 0;
+            let slideInterval;
+            function goToSlide(index) {
+                slides.style.transform = `translateX(-${index * 100}%)`;
+                currentIndex = index;
+                updateIndicators();
+            }
+            function nextSlide() {
+                currentIndex = (currentIndex + 1) % 3;
+                goToSlide(currentIndex);
+            }
+            function prevSlide() {
+                currentIndex = (currentIndex - 1 + 3) % 3;
+                goToSlide(currentIndex);
+            }
+            function updateIndicators() {
+                indicators.forEach((indicator, index) => {
+                    indicator.classList.toggle('bg-blue-500', index === currentIndex);
+                    indicator.classList.toggle('bg-gray-600', index !== currentIndex);
+                });
+            }
+            function startAutoSlide() {
+                slideInterval = setInterval(nextSlide, 5000);
+            }
+            function stopAutoSlide() {
+                clearInterval(slideInterval);
+            }
+            // Event listeners
+            nextBtn.addEventListener('click', () => {
+                stopAutoSlide();
+                nextSlide();
+                startAutoSlide();
+            });
+            prevBtn.addEventListener('click', () => {
+                stopAutoSlide();
+                prevSlide();
+                startAutoSlide();
+            });
+            indicators.forEach(indicator => {
+                indicator.addEventListener('click', () => {
+                    stopAutoSlide();
+                    goToSlide(parseInt(indicator.dataset.slide));
+                    startAutoSlide();
+                });
+            });
+            // Start auto sliding
+            startAutoSlide();
+            // Pause on hover
+            const gallery = document.querySelector('.gallery-slides');
+            gallery.addEventListener('mouseenter', stopAutoSlide);
+            gallery.addEventListener('mouseleave', startAutoSlide);
+        });
+        // Animated counter for player count
+        function animateCounter(elementId, target, duration = 2000) {
+            const element = document.getElementById(elementId);
+            const start = 0;
+            const increment = target / (duration / 16);
+            let current = start;
+            const timer = setInterval(() => {
+                current += increment;
+                if (current >= target) {
+                    clearInterval(timer);
+                    current = target;
+                }
+                element.textContent = Math.floor(current);
+                document.getElementById('footerPlayerCount').textContent = Math.floor(current);
+            }, 16);
+        }
+        // Start counters when page loads
+        window.addEventListener('load', () => {
+            // Simulate 87 players online
+            animateCounter('playerCount', 3000);
+        });
+    </script>
+    <script>
+        // Prevent right-click on entire document
+        document.addEventListener('contextmenu', function(e) {
+            if (e.target.tagName === 'IMG') {
+                e.preventDefault();
+            }
+        });
+    </script>
+    <script src="https://unpkg.com/ogl"></script>
+<script>
+  (function() {
+    const container = document.getElementById('orb-container');
+    if (!container) return;
+    const renderer = new ogl.Renderer({ alpha: true, premultipliedAlpha: false });
+    const gl = renderer.gl;
+    gl.clearColor(0, 0, 0, 0);
+    container.appendChild(gl.canvas);
+    const geometry = new ogl.Triangle(gl);
+    const program = new ogl.Program(gl, {
+      vertex: `
+        precision highp float;
+        attribute vec2 position;
+        attribute vec2 uv;
+        varying vec2 vUv;
+        void main() {
+          vUv = uv;
+          gl_Position = vec4(position, 0.0, 1.0);
+        }
+      `,
+      fragment: `
+        precision highp float;
+        uniform float iTime;
+        uniform vec3 iResolution;
+        varying vec2 vUv;
+        void main() {
+          vec2 uv = vUv * 2.0 - 1.0;
+          float r = length(uv);
+          float a = atan(uv.y, uv.x);
+          float glow = 0.2 / abs(0.4 - r);
+          vec3 col = 0.5 + 0.5 * cos(iTime + a + vec3(0,2,4));
+          gl_FragColor = vec4(col * glow, glow);
+        }
+      `,
+      uniforms: {
+        iTime: { value: 0 },
+        iResolution: { value: new ogl.Vec3(gl.canvas.width, gl.canvas.height, gl.canvas.width / gl.canvas.height) }
+      }
+    });
+    const mesh = new ogl.Mesh(gl, { geometry, program });
+    function resize() {
+      const dpr = window.devicePixelRatio || 1;
+      const width = container.clientWidth;
+      const height = container.clientHeight;
+      renderer.setSize(width * dpr, height * dpr);
+      gl.canvas.style.width = width + 'px';
+      gl.canvas.style.height = height + 'px';
+      program.uniforms.iResolution.value.set(gl.canvas.width, gl.canvas.height, gl.canvas.width / gl.canvas.height);
+    }
+    window.addEventListener('resize', resize);
+    resize();
+    let lastTime = 0;
+    function update(t) {
+      requestAnimationFrame(update);
+      program.uniforms.iTime.value = t * 0.001;
+      renderer.render({ scene: mesh });
+    }
+    requestAnimationFrame(update);
+  })();
+</script>
+</body>
 </html>

swat.html ADDED Viewed

	@@ -0,0 +1,452 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SWAT - Atlantic Shores Roleplay</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="icon" href="Assets/fav.png"/>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Gruppo&family=IBM+Plex+Sans+Condensed:ital,wght@1,200&family=Kanit:wght@100&family=Lato&family=Play&family=Roboto&display=swap" rel="stylesheet">
+    <link rel="canonical" href="https://asrp.us/swat.html">
+    <!-- SEO Meta Tags -->
+    <meta name="description" content="SWAT Division of Atlantic Shores Roleplay - Elite tactical units serving Key West, Florida. Join our specialized teams for high-risk operations.">
+    <meta name="keywords" content="SWAT, Atlantic Shores Roleplay, FiveM, GTA V Roleplay, Key West, Florida Roleplay, Tactical Units, Special Weapons">
+    <meta name="robots" content="index, follow">
+    <!-- Open Graph Tags -->
+    <meta property="og:type" content="website">
+    <meta property="og:title" content="SWAT - Atlantic Shores Roleplay">
+    <meta property="og:description" content="SWAT Division of Atlantic Shores Roleplay - Elite tactical units serving Key West, Florida. Join our specialized teams for high-risk operations.">
+    <meta property="og:image" content="https://asrp.us/Assets/Heya.png">
+    <meta property="og:url" content="https://asrp.us/swat.html">
+    <meta property="og:site_name" content="Atlantic Shores Roleplay">
+    <!-- Twitter Card Tags -->
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="SWAT - Atlantic Shores Roleplay">
+    <meta name="twitter:description" content="SWAT Division of Atlantic Shores Roleplay - Elite tactical units serving Key West, Florida">
+    <meta name="twitter:image" content="https://asrp.us/Assets/Heya.png">
+    <style>
+        ::selection {
+            background: #e4355b;
+            color: white;
+        }
+        ::-webkit-scrollbar {
+            width: 12px;
+        }
+        ::-webkit-scrollbar-track {
+            background: #1a1a1a;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: linear-gradient(#e4355b, #e38c26);
+            border-radius: 6px;
+            border: 3px solid #1a1a1a;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: linear-gradient(#e38c26, #e4355b);
+        }
+        body {
+            cursor: url('Assets/cursor.png') 16 16, auto;
+        }
+        a:hover, button:hover {
+            cursor: url('Assets/cursor2.png') 0 0, auto;
+        }
+        .department-card {
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+        .department-card:hover {
+            transform: translateY(-10px);
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+        }
+        .nav-link {
+            position: relative;
+        }
+        .nav-link::after {
+            content: '';
+            position: absolute;
+            width: 0;
+            height: 2px;
+            bottom: -2px;
+            left: 0;
+            background: linear-gradient(90deg, #e4355b, #e38c26);
+            transition: width 0.3s ease;
+        }
+        .nav-link:hover::after {
+            width: 100%;
+        }
+        .gradient-text {
+            background: linear-gradient(90deg, #e4355b, #e38c26);
+            background-size: 200% auto;
+            background-clip: text;
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            transition: background-position 0.5s ease;
+        }
+        .gradient-text:hover {
+            background-position: 100% center;
+        }
+        .swat-hero {
+            background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('http://static.photos/black/1200x630/45') center/cover no-repeat;
+        }
+    </style>
+</head>
+<body class="bg-black text-gray-100 font-sans">
+    <!-- Header with Logo and Navigation -->
+    <header class="fixed w-full z-50 bg-black bg-opacity-90 shadow-lg transform -translate-y-full transition-transform duration-300" id="navbar">
+        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
+            <div class="flex items-center">
+                <img src="Assets/logo.png" alt="Atlantic Shores Roleplay logo" class="h-[50px] w-[140px]" align=left>
+            </div>
+            <nav class="hidden md:flex space-x-6">
+                <a href="https://asrp.us" class="nav-link px-3 py-2 text-gray-300 hover:text-white rounded-lg transition-all duration-300 flex items-center">
+                    <i class="fas fa-home mr-2 text-sm"></i> Home
+                </a>
+                <a href="https://asrp.us#about" class="nav-link px-3 py-2 text-gray-300 hover:text-white rounded-lg transition-all duration-300 flex items-center">
+                    <i class="fas fa-info-circle mr-2 text-sm"></i> About
+                </a>
+                <a href="https://asrp.us#dept" class="nav-link px-3 py-2 text-gray-300 hover:text-white rounded-lg transition-all duration-300 flex items-center">
+                    <i class="fas fa-building mr-2 text-sm"></i> Departments
+                </a>
+                <a href="https://docs.google.com/document/d/1smQRxW98qs1LAvXO69y3h4DE5JOkwmAURhBy3I4_usc/edit?tab=t.0" class="nav-link px-3 py-2 text-gray-300 hover:text-white rounded-lg transition-all duration-300 flex items-center">
+                    <i class="fas fa-book mr-2 text-sm"></i> Requirements
+                </a>
+                <a href="https://asrp.us/apply" class="nav-link px-3 py-2 text-gray-300 hover:text-white rounded-lg transition-all duration-300 flex items-center">
+                    <i class="fas fa-user-plus mr-2 text-sm"></i> Apply Now
+                </a>
+            </nav>
+            <button class="md:hidden text-gray-300 hover:text-white bg-gray-800 hover:bg-gray-700 p-2 rounded-lg transition-colors duration-300">
+                <i class="fas fa-bars text-xl"></i>
+            </button>
+        </div>
+    </header>
+    <!-- Hero Section -->
+    <section class="swat-hero py-32">
+        <div class="container mx-auto px-4 text-center">
+            <h1 class="text-4xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-[#e4355b] to-[#e38c26] bg-clip-text text-transparent">
+                Special Weapons And Tactics
+            </h1>
+            <p class="text-xl md:text-2xl max-w-3xl mx-auto text-gray-300 mb-8">
+                Elite tactical units of Atlantic Shores Roleplay, serving Key West with precision and professionalism
+            </p>
+            <div class="flex flex-wrap justify-center gap-4">
+                <a href="https://asrp.us/apply" class="px-8 py-3 bg-gradient-to-r from-[#e4355b] to-[#e38c26] rounded-full font-semibold transition-all duration-300 hover:scale-105 shadow-lg hover:shadow-xl hover:shadow-[#e4355b]/30">
+                    <i class="fas fa-user-plus mr-2"></i> Apply to SWAT
+                </a>
+                <a href="https://asrp.us#dept" class="px-8 py-3 bg-transparent border-2 border-orange-500 rounded-full font-semibold transition-all duration-300 hover:scale-105 hover:bg-orange-500 hover:bg-opacity-10 hover:border-orange-400">
+                    <i class="fas fa-arrow-left mr-2"></i> All Departments
+                </a>
+            </div>
+        </div>
+    </section>
+    <!-- About SWAT Section -->
+    <section class="py-20 bg-gradient-to-b from-gray-950 to-black">
+        <div class="container mx-auto px-4">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-[#e4355b] to-[#e38c26] bg-clip-text text-transparent">
+                    About Our SWAT Division
+                </h2>
+                <p class="max-w-3xl mx-auto text-gray-400 text-lg">
+                    Comprised of four specialized tactical teams, our SWAT division handles high-risk situations with precision and professionalism
+                </p>
+            </div>
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+                <div>
+                    <h3 class="text-2xl font-bold mb-4 text-white">Mission Statement</h3>
+                    <p class="text-gray-400 mb-6">
+                        The Atlantic Shores Roleplay SWAT Division is committed to providing specialized tactical response to high-risk situations that exceed the capabilities of standard law enforcement units. We operate with the highest standards of professionalism, precision, and dedication to public safety.
+                    </p>
+                    <h3 class="text-2xl font-bold mb-4 text-white">Core Values</h3>
+                    <ul class="space-y-3 text-gray-400">
+                        <li class="flex items-start">
+                            <i class="fas fa-check-circle text-[#e38c26] mt-1 mr-3"></i>
+                            <span>Tactical Excellence in all operations</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i class="fas fa-check-circle text-[#e38c26] mt-1 mr-3"></i>
+                            <span>Unwavering commitment to public safety</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i class="fas fa-check-circle text-[#e38c26] mt-1 mr-3"></i>
+                            <span>Professionalism in every interaction</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i class="fas fa-check-circle text-[#e38c26] mt-1 mr-3"></i>
+                            <span>Continuous training and improvement</span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="grid grid-cols-2 gap-4">
+                    <img src="http://static.photos/military/640x360/123" alt="SWAT Training" class="rounded-lg shadow-lg">
+                    <img src="http://static.photos/technology/640x360/456" alt="SWAT Equipment" class="rounded-lg shadow-lg mt-8">
+                    <img src="http://static.photos/people/640x360/789" alt="SWAT Team" class="rounded-lg shadow-lg">
+                    <img src="http://static.photos/cityscape/640x360/321" alt="SWAT Operations" class="rounded-lg shadow-lg mt-8">
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- SWAT Teams Section -->
+    <section class="py-20 bg-gradient-to-b from-black to-gray-950">
+        <div class="container mx-auto px-4">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-[#e4355b] to-[#e38c26] bg-clip-text text-transparent">
+                    Our Tactical Teams
+                </h2>
+                <p class="max-w-2xl mx-auto text-gray-400">
+                    Four specialized units within our SWAT division, each with unique capabilities and responsibilities
+                </p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+                <!-- Team Alpha -->
+                <div class="department-card bg-gray-800 rounded-lg overflow-hidden hover:bg-gray-700">
+                    <div class="h-48 bg-gradient-to-br from-[#23d7d6] to-[#327aaf] flex items-center justify-center">
+                        <div class="text-5xl font-bold text-white">A</div>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-2 text-blue-400">Team Alpha</h3>
+                        <p class="text-gray-400 mb-4">
+                            Primary assault team specializing in direct entry operations and high-risk warrant service.
+                        </p>
+                        <div class="flex items-center text-sm text-gray-500">
+                            <i class="fas fa-users mr-2"></i>
+                            <span>6-8 Operators</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- Team Bravo -->
+                <div class="department-card bg-gray-800 rounded-lg overflow-hidden hover:bg-gray-700">
+                    <div class="h-48 bg-red-800 flex items-center justify-center">
+                        <div class="text-5xl font-bold text-white">B</div>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-2 text-red-400">Team Bravo</h3>
+                        <p class="text-gray-400 mb-4">
+                            Sniper and reconnaissance team providing overwatch and precision engagement capabilities.
+                        </p>
+                        <div class="flex items-center text-sm text-gray-500">
+                            <i class="fas fa-users mr-2"></i>
+                            <span>4-6 Operators</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- Team Charlie -->
+                <div class="department-card bg-gray-800 rounded-lg overflow-hidden hover:bg-gray-700">
+                    <div class="h-48 bg-gradient-to-br from-purple-700 to-purple-900 flex items-center justify-center">
+                        <div class="text-5xl font-bold text-white">C</div>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-2 text-purple-400">Team Charlie</h3>
+                        <p class="text-gray-400 mb-4">
+                            Breaching and entry specialists equipped with advanced tools for complex operations.
+                        </p>
+                        <div class="flex items-center text-sm text-gray-500">
+                            <i class="fas fa-users mr-2"></i>
+                            <span>4-5 Operators</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- Team Delta -->
+                <div class="department-card bg-gray-800 rounded-lg overflow-hidden hover:bg-gray-700">
+                    <div class="h-48 bg-gradient-to-br from-orange-600 to-orange-800 flex items-center justify-center">
+                        <div class="text-5xl font-bold text-white">D</div>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-2 text-orange-400">Team Delta</h3>
+                        <p class="text-gray-400 mb-4">
+                            Crisis negotiation and tactical medical support team ensuring peaceful resolutions.
+                        </p>
+                        <div class="flex items-center text-sm text-gray-500">
+                            <i class="fas fa-users mr-2"></i>
+                            <span>3-5 Operators</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Requirements Section -->
+    <section class="py-20 bg-gradient-to-b from-gray-950 to-black">
+        <div class="container mx-auto px-4">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-[#e4355b] to-[#e38c26] bg-clip-text text-transparent">
+                    SWAT Requirements
+                </h2>
+                <p class="max-w-2xl mx-auto text-gray-400">
+                    Rigorous standards to ensure only the most qualified candidates join our elite division
+                </p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
+                <!-- Requirement 1 -->
+                <div class="bg-gray-800 rounded-lg p-8 hover:bg-gray-700 transition duration-300">
+                    <div class="text-4xl mb-4">
+                        <i class="fas fa-shield-alt gradient-text"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3 text-white">Law Enforcement Experience</h3>
+                    <p class="text-gray-400">
+                        Minimum of 6 months active service in a law enforcement department with excellent performance record.
+                    </p>
+                </div>
+                <!-- Requirement 2 -->
+                <div class="bg-gray-800 rounded-lg p-8 hover:bg-gray-700 transition duration-300">
+                    <div class="text-4xl mb-4">
+                        <i class="fas fa-dumbbell gradient-text"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3 text-white">Physical Fitness</h3>
+                    <p class="text-gray-400">
+                        Must pass rigorous physical fitness tests including strength, endurance, and agility assessments.
+                    </p>
+                </div>
+                <!-- Requirement 3 -->
+                <div class="bg-gray-800 rounded-lg p-8 hover:bg-gray-700 transition duration-300">
+                    <div class="text-4xl mb-4">
+                        <i class="fas fa-brain gradient-text"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3 text-white">Psychological Evaluation</h3>
+                    <p class="text-gray-400">
+                        Must successfully complete psychological screening to ensure mental stability under pressure.
+                    </p>
+                </div>
+            </div>
+            <div class="text-center mt-12">
+                <a href="https://asrp.us/apply" class="inline-block px-8 py-3 bg-gradient-to-r from-[#e4355b] to-[#e38c26] hover:from-[#ed2d57] hover:to-[#fc8e0d] rounded-full font-semibold transition duration-300 transform hover:scale-105 shadow-lg">
+                    <i class="fas fa-file-alt mr-2"></i> Apply to SWAT Division
+                </a>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="py-16 bg-cover bg-center" style="background: linear-gradient(rgba(0,0,0,0.9), rgba(0,0,0,0.9)), url('Assets/footer.png') center/cover no-repeat;">
+        <div class="container mx-auto px-4">
+            <div class="grid grid-cols-1 lg:grid-cols-4 gap-8 mb-12">
+                <div class="lg:col-span-2">
+                    <div class="flex items-center mb-6">
+                        <img src="Assets/fav.png" alt="Atlantic Shores Logo" class="h-[120px] w-[152px] mr-4">
+                        <div class="border-l border-gray-600 pl-4">
+                            <h3 class="text-2xl font-bold bg-gradient-to-r from-[#e4355b] to-[#e38c26] bg-clip-text text-transparent">Atlantic Shores Roleplay</h3>
+                            <p class="text-gray-400 mt-2">17+ Whitelisted FiveM Community</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-400 text-lg max-w-xl">A premier FiveM community based in Key West, Florida, dedicated to creating immersive, realistic roleplay experiences for our members.</p>
+                </div>
+                <div>
+                    <h4 class="text-xl font-semibold mb-6 text-white border-b border-gray-700 pb-2">Quick Links</h4>
+                    <ul class="space-y-4">
+                        <li><a href="https://asrp.us" class="text-gray-400 hover:text-[#e38c26] transition-all duration-300 flex items-center group">
+                            <i class="fas fa-arrow-right mr-3 text-sm group-hover:translate-x-1 transition-transform"></i> Home
+                        </a></li>
+                        <li><a href="https://asrp.us/apply" class="text-gray-400 hover:text-[#e38c26] transition-all duration-300 flex items-center group">
+                            <i class="fas fa-arrow-right mr-3 text-sm group-hover:translate-x-1 transition-transform"></i> Apply Now
+                        </a></li>
+                        <li><a href="https://asrp.us#dept" class="text-gray-400 hover:text-[#e38c26] transition-all duration-300 flex items-center group">
+                            <i class="fas fa-arrow-right mr-3 text-sm group-hover:translate-x-1 transition-transform"></i> Departments
+                        </a></li>
+                        <li><a href="https://asrp.us#about" class="text-gray-400 hover:text-[#e38c26] transition-all duration-300 flex items-center group">
+                            <i class="fas fa-arrow-right mr-3 text-sm group-hover:translate-x-1 transition-transform"></i> About Us
+                        </a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-xl font-semibold mb-6 text-white border-b border-gray-700 pb-2">Connect With Us</h4>
+                    <div class="grid grid-cols-2 gap-4">
+                        <a href="https://discord.gg/js6qx7PbQC" class="bg-gray-800 hover:bg-gray-700 p-3 rounded-lg text-center transition-all duration-300 group">
+                            <i class="fab fa-discord text-2xl text-[#5865F2] group-hover:scale-110 transition-transform"></i>
+                            <p class="text-gray-400 text-sm mt-2">Discord</p>
+                        </a>
+                        <a href="https://x.com/ASRP_Official_" class="bg-gray-800 hover:bg-gray-700 p-3 rounded-lg text-center transition-all duration-300 group">
+                            <i class="fab fa-twitter text-2xl text-[#1DA1F2] group-hover:scale-110 transition-transform"></i>
+                            <p class="text-gray-400 text-sm mt-2">Twitter</p>
+                        </a>
+                        <a href="https://www.youtube.com/@asrp.online" class="bg-gray-800 hover:bg-gray-700 p-3 rounded-lg text-center transition-all duration-300 group">
+                            <i class="fab fa-youtube text-2xl text-[#FF0000] group-hover:scale-110 transition-transform"></i>
+                            <p class="text-gray-400 text-sm mt-2">YouTube</p>
+                        </a>
+                        <a href="https://www.instagram.com/asrp.us/" class="bg-gray-800 hover:bg-gray-700 p-3 rounded-lg text-center transition-all duration-300 group">
+                            <i class="fab fa-instagram text-2xl text-[#E1306C] group-hover:scale-110 transition-transform"></i>
+                            <p class="text-gray-400 text-sm mt-2">Instagram</p>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <div class="border-t border-gray-700 pt-8">
+                <div class="flex flex-col lg:flex-row justify-between items-center gap-6">
+                    <div class="text-center lg:text-left">
+                        <p class="text-gray-500">&copy; 2023 Atlantic Shores Roleplay. All rights reserved. | Developed By RedneckRyan</p>
+                    </div>
+                    <div class="flex items-center space-x-4">
+                        <div class="flex items-center bg-gray-800 px-4 py-2 rounded-lg">
+                            <div class="w-3 h-3 rounded-full bg-green-500 mr-2 animate-pulse"></div>
+                            <span class="text-gray-300 text-sm">Server: <span class="text-green-400 font-medium">Online</span></span>
+                        </div>
+                        <div class="flex items-center">
+                            <span class="text-gray-500 text-sm">Made in the USA</span>
+                            <img src="Assets/usa.png" alt="USA" class="h-5 w-5 ml-2">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Navbar scroll behavior
+        let lastScroll = 0;
+        window.addEventListener('scroll', function() {
+            const currentScroll = window.pageYOffset;
+            const navbar = document.getElementById('navbar');
+            if (currentScroll <= 100) {
+                navbar.classList.add('-translate-y-full');
+                navbar.classList.remove('translate-y-0');
+                return;
+            }
+            if (currentScroll > lastScroll) {
+                navbar.classList.add('-translate-y-full');
+                navbar.classList.remove('translate-y-0');
+            } else {
+                navbar.classList.remove('-translate-y-full');
+                navbar.classList.add('translate-y-0');
+            }
+            lastScroll = currentScroll;
+        });
+    </script>
+</body>
+</html>