Spaces:

sikang99
/

coforce-ai-sample-page

Running

App Files Files Community

sikang99 commited on Apr 3

Commit

3bca243

verified ·

1 Parent(s): 5a3f0d3

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +802 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Coforce Ai Sample Page
-emoji: 👀
-colorFrom: red
-colorTo: red
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: coforce-ai-sample-page
+emoji: 🐳
+colorFrom: pink
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,802 @@
-<!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>CoForce.AI - Military Battlefield Management Technology</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">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+        :root {
+            --primary: #00c2ff;
+            --secondary: #ff3d00;
+            --dark: #0a0a1a;
+            --darker: #050510;
+        }
+        body {
+            font-family: 'Roboto', sans-serif;
+            background-color: var(--darker);
+            color: white;
+            overflow-x: hidden;
+        }
+        .orbitron {
+            font-family: 'Orbitron', sans-serif;
+        }
+        .gradient-text {
+            background: linear-gradient(90deg, var(--primary), var(--secondary));
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+        }
+        .gradient-bg {
+            background: linear-gradient(135deg, var(--primary), var(--secondary));
+        }
+        .nav-link {
+            position: relative;
+        }
+        .nav-link::after {
+            content: '';
+            position: absolute;
+            width: 0;
+            height: 2px;
+            bottom: -2px;
+            left: 0;
+            background: linear-gradient(90deg, var(--primary), var(--secondary));
+            transition: width 0.3s ease;
+        }
+        .nav-link:hover::after {
+            width: 100%;
+        }
+        .tech-card {
+            background: rgba(255, 255, 255, 0.05);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            transition: all 0.3s ease;
+        }
+        .tech-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 20px rgba(0, 194, 255, 0.2);
+            border-color: var(--primary);
+        }
+        .glow {
+            box-shadow: 0 0 15px rgba(0, 194, 255, 0.5);
+        }
+        .hexagon {
+            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
+        }
+        .pulse {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% {
+                box-shadow: 0 0 0 0 rgba(0, 194, 255, 0.7);
+            }
+            70% {
+                box-shadow: 0 0 0 10px rgba(0, 194, 255, 0);
+            }
+            100% {
+                box-shadow: 0 0 0 0 rgba(0, 194, 255, 0);
+            }
+        }
+        .radar {
+            position: relative;
+            width: 200px;
+            height: 200px;
+            border-radius: 50%;
+            background: linear-gradient(90deg, rgba(0, 194, 255, 0.1), rgba(0, 194, 255, 0.05));
+            overflow: hidden;
+        }
+        .radar::before {
+            content: '';
+            position: absolute;
+            width: 50%;
+            height: 50%;
+            background: linear-gradient(45deg, transparent 75%, rgba(0, 194, 255, 0.7));
+            top: 0;
+            left: 0;
+            animation: radar-beam 4s linear infinite;
+            transform-origin: bottom right;
+            border-radius: 100% 0 0 0;
+        }
+        @keyframes radar-beam {
+            0% {
+                transform: rotate(0deg);
+            }
+            100% {
+                transform: rotate(360deg);
+            }
+        }
+        .grid-line {
+            position: absolute;
+            background: rgba(0, 194, 255, 0.1);
+        }
+        .grid-line:nth-child(1) {
+            width: 100%;
+            height: 1px;
+            top: 50%;
+        }
+        .grid-line:nth-child(2) {
+            width: 1px;
+            height: 100%;
+            left: 50%;
+        }
+        .grid-line:nth-child(3),
+        .grid-line:nth-child(4),
+        .grid-line:nth-child(5),
+        .grid-line:nth-child(6) {
+            width: 100%;
+            height: 100%;
+            border: 1px solid rgba(0, 194, 255, 0.1);
+            border-radius: 50%;
+        }
+        .grid-line:nth-child(3) {
+            width: 80%;
+            height: 80%;
+            top: 10%;
+            left: 10%;
+        }
+        .grid-line:nth-child(4) {
+            width: 60%;
+            height: 60%;
+            top: 20%;
+            left: 20%;
+        }
+        .grid-line:nth-child(5) {
+            width: 40%;
+            height: 40%;
+            top: 30%;
+            left: 30%;
+        }
+        .grid-line:nth-child(6) {
+            width: 20%;
+            height: 20%;
+            top: 40%;
+            left: 40%;
+        }
+        .blob {
+            position: absolute;
+            width: 300px;
+            height: 300px;
+            background: linear-gradient(45deg, var(--primary), var(--secondary));
+            border-radius: 50%;
+            filter: blur(100px);
+            opacity: 0.2;
+            z-index: -1;
+        }
+        .blob-1 {
+            top: -100px;
+            left: -100px;
+        }
+        .blob-2 {
+            bottom: -100px;
+            right: -100px;
+        }
+    </style>
+</head>
+<body class="min-h-screen">
+    <!-- Navigation -->
+    <nav class="fixed w-full z-50 bg-black bg-opacity-80 backdrop-filter backdrop-blur-lg border-b border-gray-800">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex items-center justify-between h-16">
+                <div class="flex items-center">
+                    <div class="flex-shrink-0">
+                        <div class="flex items-center">
+                            <div class="hexagon w-10 h-10 gradient-bg flex items-center justify-center">
+                                <span class="orbitron font-bold text-white">CF</span>
+                            </div>
+                            <span class="ml-3 orbitron text-2xl font-bold gradient-text">CoForce<span class="text-white">.AI</span></span>
+                        </div>
+                    </div>
+                    <div class="hidden md:block">
+                        <div class="ml-10 flex items-baseline space-x-8">
+                            <a href="#home" class="nav-link text-white px-3 py-2 text-sm font-medium">Home</a>
+                            <a href="#solutions" class="nav-link text-gray-300 hover:text-white px-3 py-2 text-sm font-medium">Solutions</a>
+                            <a href="#technology" class="nav-link text-gray-300 hover:text-white px-3 py-2 text-sm font-medium">Technology</a>
+                            <a href="#about" class="nav-link text-gray-300 hover:text-white px-3 py-2 text-sm font-medium">About</a>
+                            <a href="#contact" class="nav-link text-gray-300 hover:text-white px-3 py-2 text-sm font-medium">Contact</a>
+                        </div>
+                    </div>
+                </div>
+                <div class="hidden md:block">
+                    <div class="ml-4 flex items-center md:ml-6">
+                        <button class="gradient-bg text-white px-6 py-2 rounded-md orbitron font-medium hover:opacity-90 transition">
+                            Request Demo
+                        </button>
+                    </div>
+                </div>
+                <div class="-mr-2 flex md:hidden">
+                    <button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none">
+                        <span class="sr-only">Open main menu</span>
+                        <i class="fas fa-bars"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+        <!-- Mobile menu -->
+        <div class="hidden md:hidden" id="mobile-menu">
+            <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
+                <a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-white bg-gray-900">Home</a>
+                <a href="#solutions" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">Solutions</a>
+                <a href="#technology" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">Technology</a>
+                <a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">About</a>
+                <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">Contact</a>
+                <button class="block w-full text-left px-3 py-2 rounded-md text-base font-medium gradient-bg text-white">
+                    Request Demo
+                </button>
+            </div>
+        </div>
+    </nav>
+    <!-- Hero Section -->
+    <section id="home" class="relative pt-32 pb-20 md:pt-40 md:pb-28 px-4 sm:px-6 lg:px-8 overflow-hidden">
+        <div class="blob blob-1"></div>
+        <div class="blob blob-2"></div>
+        <div class="max-w-7xl mx-auto">
+            <div class="md:flex md:items-center md:justify-between">
+                <div class="md:w-1/2 mb-12 md:mb-0">
+                    <h1 class="text-4xl md:text-6xl font-bold mb-6 orbitron">
+                        <span class="gradient-text">Battlefield</span><br>
+                        <span class="text-white">Management</span><br>
+                        <span class="gradient-text">Redefined</span>
+                    </h1>
+                    <p class="text-lg text-gray-300 mb-8 max-w-lg">
+                        CoForce.AI delivers next-generation AI-powered command and control systems for modern warfare. Our technology provides real-time situational awareness, predictive analytics, and autonomous decision support.
+                    </p>
+                    <div class="flex flex-wrap gap-4">
+                        <button class="gradient-bg text-white px-8 py-3 rounded-md orbitron font-medium hover:opacity-90 transition">
+                            Explore Solutions
+                        </button>
+                        <button class="border border-gray-600 text-white px-8 py-3 rounded-md orbitron font-medium hover:bg-gray-800 transition">
+                            Watch Demo
+                        </button>
+                    </div>
+                </div>
+                <div class="md:w-1/2 flex justify-center">
+                    <div class="relative">
+                        <div class="radar">
+                            <div class="grid-line"></div>
+                            <div class="grid-line"></div>
+                            <div class="grid-line"></div>
+                            <div class="grid-line"></div>
+                            <div class="grid-line"></div>
+                            <div class="grid-line"></div>
+                        </div>
+                        <div class="absolute -bottom-10 -left-10 w-32 h-32 bg-gray-900 rounded-lg glow"></div>
+                        <div class="absolute -top-10 -right-10 w-24 h-24 bg-gray-900 rounded-lg glow"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Trusted By Section -->
+    <section class="py-12 bg-gray-900 bg-opacity-50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <p class="text-center text-gray-400 mb-8 orbitron">TRUSTED BY MILITARY FORCES WORLDWIDE</p>
+            <div class="grid grid-cols-2 md:grid-cols-5 gap-8 items-center justify-center">
+                <div class="flex justify-center">
+                    <img src="https://via.placeholder.com/150x80?text=US+DoD" alt="US Department of Defense" class="h-16 opacity-70 hover:opacity-100 transition">
+                </div>
+                <div class="flex justify-center">
+                    <img src="https://via.placeholder.com/150x80?text=NATO" alt="NATO" class="h-16 opacity-70 hover:opacity-100 transition">
+                </div>
+                <div class="flex justify-center">
+                    <img src="https://via.placeholder.com/150x80?text=UK+MoD" alt="UK Ministry of Defense" class="h-16 opacity-70 hover:opacity-100 transition">
+                </div>
+                <div class="flex justify-center">
+                    <img src="https://via.placeholder.com/150x80?text=Australia" alt="Australian Defence Force" class="h-16 opacity-70 hover:opacity-100 transition">
+                </div>
+                <div class="flex justify-center">
+                    <img src="https://via.placeholder.com/150x80?text=Canada" alt="Canadian Armed Forces" class="h-16 opacity-70 hover:opacity-100 transition">
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Solutions Section -->
+    <section id="solutions" class="py-20 px-4 sm:px-6 lg:px-8">
+        <div class="max-w-7xl mx-auto">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4 orbitron gradient-text">MILITARY SOLUTIONS</h2>
+                <p class="text-xl text-gray-300 max-w-3xl mx-auto">
+                    Our comprehensive suite of battlefield management systems provides commanders with unprecedented situational awareness and decision superiority.
+                </p>
+            </div>
+            <div class="grid md:grid-cols-3 gap-8">
+                <div class="tech-card p-8 rounded-xl">
+                    <div class="w-16 h-16 gradient-bg rounded-lg flex items-center justify-center mb-6">
+                        <i class="fas fa-radar text-white text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3 orbitron">Tactical Awareness System</h3>
+                    <p class="text-gray-300 mb-4">
+                        Real-time tracking of friendly and enemy forces with predictive movement analysis and threat assessment.
+                    </p>
+                    <a href="#" class="text-blue-400 hover:text-blue-300 font-medium inline-flex items-center">
+                        Learn more <i class="fas fa-arrow-right ml-2"></i>
+                    </a>
+                </div>
+                <div class="tech-card p-8 rounded-xl">
+                    <div class="w-16 h-16 gradient-bg rounded-lg flex items-center justify-center mb-6">
+                        <i class="fas fa-robot text-white text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3 orbitron">Autonomous C2</h3>
+                    <p class="text-gray-300 mb-4">
+                        AI-driven command and control that provides optimized course of action recommendations in real-time.
+                    </p>
+                    <a href="#" class="text-blue-400 hover:text-blue-300 font-medium inline-flex items-center">
+                        Learn more <i class="fas fa-arrow-right ml-2"></i>
+                    </a>
+                </div>
+                <div class="tech-card p-8 rounded-xl">
+                    <div class="w-16 h-16 gradient-bg rounded-lg flex items-center justify-center mb-6">
+                        <i class="fas fa-network-wired text-white text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3 orbitron">Joint Force Integration</h3>
+                    <p class="text-gray-300 mb-4">
+                        Seamless interoperability between land, air, sea, and cyber forces for unified operations.
+                    </p>
+                    <a href="#" class="text-blue-400 hover:text-blue-300 font-medium inline-flex items-center">
+                        Learn more <i class="fas fa-arrow-right ml-2"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Technology Section -->
+    <section id="technology" class="py-20 bg-gray-900 bg-opacity-50 px-4 sm:px-6 lg:px-8">
+        <div class="max-w-7xl mx-auto">
+            <div class="md:flex items-center">
+                <div class="md:w-1/2 mb-12 md:mb-0">
+                    <h2 class="text-3xl md:text-4xl font-bold mb-6 orbitron gradient-text">ADVANCED BATTLEFIELD AI</h2>
+                    <p class="text-gray-300 mb-6">
+                        CoForce.AI leverages cutting-edge artificial intelligence and machine learning to process vast amounts of battlefield data, providing commanders with clear, actionable insights.
+                    </p>
+                    <ul class="space-y-4">
+                        <li class="flex items-start">
+                            <div class="flex-shrink-0 mt-1">
+                                <div class="gradient-bg w-6 h-6 rounded-full flex items-center justify-center">
+                                    <i class="fas fa-check text-white text-xs"></i>
+                                </div>
+                            </div>
+                            <p class="ml-3 text-gray-300">
+                                <span class="font-medium text-white">Predictive Analytics</span> - Anticipate enemy movements and potential threats before they emerge
+                            </p>
+                        </li>
+                        <li class="flex items-start">
+                            <div class="flex-shrink-0 mt-1">
+                                <div class="gradient-bg w-6 h-6 rounded-full flex items-center justify-center">
+                                    <i class="fas fa-check text-white text-xs"></i>
+                                </div>
+                            </div>
+                            <p class="ml-3 text-gray-300">
+                                <span class="font-medium text-white">Multi-Domain Integration</span> - Unified view across all operational domains
+                            </p>
+                        </li>
+                        <li class="flex items-start">
+                            <div class="flex-shrink-0 mt-1">
+                                <div class="gradient-bg w-6 h-6 rounded-full flex items-center justify-center">
+                                    <i class="fas fa-check text-white text-xs"></i>
+                                </div>
+                            </div>
+                            <p class="ml-3 text-gray-300">
+                                <span class="font-medium text-white">Secure Communications</span> - Quantum-resistant encryption for all data transmissions
+                            </p>
+                        </li>
+                    </ul>
+                </div>
+                <div class="md:w-1/2 md:pl-12">
+                    <div class="relative">
+                        <div class="bg-gray-800 rounded-xl p-4 glow">
+                            <div class="bg-black rounded-lg overflow-hidden">
+                                <div class="bg-gray-900 h-8 flex items-center px-4">
+                                    <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
+                                    <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
+                                    <div class="w-3 h-3 rounded-full bg-green-500"></div>
+                                </div>
+                                <div class="p-4">
+                                    <div class="grid grid-cols-3 gap-4 mb-4">
+                                        <div class="bg-gray-800 rounded p-2 text-center">
+                                            <div class="text-xs text-gray-400">FRIENDLY</div>
+                                            <div class="text-xl font-bold text-green-400 orbitron">247</div>
+                                        </div>
+                                        <div class="bg-gray-800 rounded p-2 text-center">
+                                            <div class="text-xs text-gray-400">NEUTRAL</div>
+                                            <div class="text-xl font-bold text-yellow-400 orbitron">83</div>
+                                        </div>
+                                        <div class="bg-gray-800 rounded p-2 text-center">
+                                            <div class="text-xs text-gray-400">HOSTILE</div>
+                                            <div class="text-xl font-bold text-red-400 orbitron">112</div>
+                                        </div>
+                                    </div>
+                                    <div class="h-64 bg-gray-800 rounded mb-4 relative overflow-hidden">
+                                        <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black opacity-30"></div>
+                                        <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-32 h-32 rounded-full border-2 border-dashed border-blue-400"></div>
+                                        <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-64 h-64 rounded-full border border-blue-400 opacity-30"></div>
+                                        <div class="absolute top-1/4 left-1/4 w-3 h-3 rounded-full bg-green-400 pulse"></div>
+                                        <div class="absolute top-1/3 left-2/3 w-3 h-3 rounded-full bg-green-400 pulse"></div>
+                                        <div class="absolute top-2/3 left-1/3 w-3 h-3 rounded-full bg-red-400 pulse"></div>
+                                        <div class="absolute top-3/4 left-3/4 w-3 h-3 rounded-full bg-red-400 pulse"></div>
+                                        <div class="absolute top-1/2 left-1/4 w-3 h-3 rounded-full bg-yellow-400 pulse"></div>
+                                    </div>
+                                    <div class="flex justify-between text-xs text-gray-400">
+                                        <div>THREAT LEVEL: <span class="text-yellow-400">ELEVATED</span></div>
+                                        <div>LAST UPDATE: <span class="text-white">00:23:45</span></div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="absolute -bottom-6 -right-6 w-24 h-24 bg-gray-900 rounded-lg glow"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Stats Section -->
+    <section class="py-16 px-4 sm:px-6 lg:px-8">
+        <div class="max-w-7xl mx-auto">
+            <div class="grid md:grid-cols-4 gap-8 text-center">
+                <div class="p-6">
+                    <div class="text-4xl md:text-5xl font-bold mb-2 orbitron gradient-text">15+</div>
+                    <div class="text-gray-300">Countries Deployed</div>
+                </div>
+                <div class="p-6">
+                    <div class="text-4xl md:text-5xl font-bold mb-2 orbitron gradient-text">24/7</div>
+                    <div class="text-gray-300">Operational Support</div>
+                </div>
+                <div class="p-6">
+                    <div class="text-4xl md:text-5xl font-bold mb-2 orbitron gradient-text">99.99%</div>
+                    <div class="text-gray-300">System Uptime</div>
+                </div>
+                <div class="p-6">
+                    <div class="text-4xl md:text-5xl font-bold mb-2 orbitron gradient-text">0</div>
+                    <div class="text-gray-300">Security Breaches</div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- About Section -->
+    <section id="about" class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-900 bg-opacity-50">
+        <div class="max-w-7xl mx-auto">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4 orbitron gradient-text">ABOUT CoForce.AI</h2>
+                <p class="text-xl text-gray-300 max-w-3xl mx-auto">
+                    Founded by former special operations personnel and AI researchers, we bridge the gap between cutting-edge technology and real-world military needs.
+                </p>
+            </div>
+            <div class="md:flex items-center">
+                <div class="md:w-1/2 mb-12 md:mb-0 md:pr-12">
+                    <div class="relative">
+                        <img src="https://via.placeholder.com/600x400?text=CoForce.AI+Team" alt="CoForce.AI Team" class="rounded-lg w-full">
+                        <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-gray-800 rounded-lg glow"></div>
+                    </div>
+                </div>
+                <div class="md:w-1/2">
+                    <h3 class="text-2xl font-bold mb-4 orbitron">Our Mission</h3>
+                    <p class="text-gray-300 mb-6">
+                        To revolutionize military decision-making through artificial intelligence, reducing casualties and increasing operational effectiveness.
+                    </p>
+                    <div class="mb-6">
+                        <div class="flex items-center mb-4">
+                            <div class="gradient-bg w-10 h-10 rounded-full flex items-center justify-center mr-4">
+                                <i class="fas fa-shield-alt text-white"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-bold text-white">Security First</h4>
+                                <p class="text-gray-300 text-sm">All systems designed with military-grade security from the ground up</p>
+                            </div>
+                        </div>
+                        <div class="flex items-center mb-4">
+                            <div class="gradient-bg w-10 h-10 rounded-full flex items-center justify-center mr-4">
+                                <i class="fas fa-brain text-white"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-bold text-white">AI Expertise</h4>
+                                <p class="text-gray-300 text-sm">PhD-level researchers specializing in defense applications of AI</p>
+                            </div>
+                        </div>
+                        <div class="flex items-center">
+                            <div class="gradient-bg w-10 h-10 rounded-full flex items-center justify-center mr-4">
+                                <i class="fas fa-medal text-white"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-bold text-white">Proven Experience</h4>
+                                <p class="text-gray-300 text-sm">Team members with decades of combined military service</p>
+                            </div>
+                        </div>
+                    </div>
+                    <button class="border border-gray-600 text-white px-6 py-2 rounded-md orbitron font-medium hover:bg-gray-800 transition">
+                        Meet Our Team
+                    </button>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Testimonials -->
+    <section class="py-20 px-4 sm:px-6 lg:px-8">
+        <div class="max-w-7xl mx-auto">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4 orbitron gradient-text">TRUSTED BY MILITARY LEADERS</h2>
+            </div>
+            <div class="grid md:grid-cols-3 gap-8">
+                <div class="tech-card p-8 rounded-xl">
+                    <div class="flex items-center mb-6">
+                        <div class="w-12 h-12 rounded-full bg-gray-700 flex items-center justify-center mr-4">
+                            <i class="fas fa-user-secret text-gray-300"></i>
+                        </div>
+                        <div>
+                            <h4 class="font-bold text-white">General M. Richardson</h4>
+                            <p class="text-gray-400 text-sm">US Army (Ret.)</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-300 italic">
+                        "CoForce.AI's predictive analytics gave our units a decisive advantage during operations. The system anticipated enemy movements with uncanny accuracy."
+                    </p>
+                    <div class="mt-4 flex">
+                        <i class="fas fa-star text-yellow-400"></i>
+                        <i class="fas fa-star text-yellow-400"></i>
+                        <i class="fas fa-star text-yellow-400"></i>
+                        <i class="fas fa-star text-yellow-400"></i>
+                        <i class="fas fa-star text-yellow-400"></i>
+                    </div>
+                </div>
+                <div class="tech-card p-8 rounded-xl">
+                    <div class="flex items-center mb-6">
+                        <div class="w-12 h-12 rounded-full bg-gray-700 flex items-center justify-center mr-4">
+                            <i class="fas fa-user-tie text-gray-300"></i>
+                        </div>
+                        <div>
+                            <h4 class="font-bold text-white">Admiral J. Kowalski</h4>
+                            <p class="text-gray-400 text-sm">Royal Navy</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-300 italic">
+                        "The joint force integration capabilities have transformed how we coordinate between naval, air, and special operations forces. A game-changer for modern warfare."
+                    </p>
+                    <div class="mt-4 flex">
+                        <i class="fas fa-star text-yellow-400"></i>
+                        <i class="fas fa-star text-yellow-400"></i>
+                        <i class="fas fa-star text-yellow-400"></i>
+                        <i class="fas fa-star text-yellow-400"></i>
+                        <i class="fas fa-star text-yellow-400"></i>
+                    </div>
+                </div>
+                <div class="tech-card p-8 rounded-xl">
+                    <div class="flex items-center mb-6">
+                        <div class="w-12 h-12 rounded-full bg-gray-700 flex items-center justify-center mr-4">
+                            <i class="fas fa-user-astronaut text-gray-300"></i>
+                        </div>
+                        <div>
+                            <h4 class="font-bold text-white">Colonel A. Petrov</h4>
+                            <p class="text-gray-400 text-sm">NATO Consultant</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-300 italic">
+                        "In 20 years of military service, I've never seen a command and control system as intuitive and powerful as CoForce.AI's platform. It's the future of battlefield management."
+                    </p>
+                    <div class="mt-4 flex">
+                        <i class="fas fa-star text-yellow-400"></i>
+                        <i class="fas fa-star text-yellow-400"></i>
+                        <i class="fas fa-star text-yellow-400"></i>
+                        <i class="fas fa-star text-yellow-400"></i>
+                        <i class="fas fa-star-half-alt text-yellow-400"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Contact Section -->
+    <section id="contact" class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-900 bg-opacity-50">
+        <div class="max-w-7xl mx-auto">
+            <div class="md:flex">
+                <div class="md:w-1/2 mb-12 md:mb-0 md:pr-12">
+                    <h2 class="text-3xl md:text-4xl font-bold mb-6 orbitron gradient-text">CONTACT OUR TEAM</h2>
+                    <p class="text-gray-300 mb-8">
+                        For inquiries about our battlefield management systems or to schedule a confidential demonstration, please contact us using the form or information below.
+                    </p>
+                    <div class="space-y-4">
+                        <div class="flex items-start">
+                            <div class="flex-shrink-0 mt-1">
+                                <div class="gradient-bg w-8 h-8 rounded-full flex items-center justify-center">
+                                    <i class="fas fa-map-marker-alt text-white text-sm"></i>
+                                </div>
+                            </div>
+                            <p class="ml-3 text-gray-300">
+                                <span class="font-medium text-white">Headquarters:</span><br>
+                                1600 Defense Way, Suite 450<br>
+                                Arlington, VA 22202
+                            </p>
+                        </div>
+                        <div class="flex items-start">
+                            <div class="flex-shrink-0 mt-1">
+                                <div class="gradient-bg w-8 h-8 rounded-full flex items-center justify-center">
+                                    <i class="fas fa-phone-alt text-white text-sm"></i>
+                                </div>
+                            </div>
+                            <p class="ml-3 text-gray-300">
+                                <span class="font-medium text-white">Secure Line:</span><br>
+                                +1 (703) 555-0199
+                            </p>
+                        </div>
+                        <div class="flex items-start">
+                            <div class="flex-shrink-0 mt-1">
+                                <div class="gradient-bg w-8 h-8 rounded-full flex items-center justify-center">
+                                    <i class="fas fa-envelope text-white text-sm"></i>
+                                </div>
+                            </div>
+                            <p class="ml-3 text-gray-300">
+                                <span class="font-medium text-white">General Inquiries:</span><br>
+                                info@coforce.ai
+                            </p>
+                        </div>
+                    </div>
+                </div>
+                <div class="md:w-1/2">
+                    <form class="tech-card p-8 rounded-xl">
+                        <div class="mb-6">
+                            <label for="name" class="block text-sm font-medium text-gray-300 mb-2">Full Name</label>
+                            <input type="text" id="name" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
+                        </div>
+                        <div class="mb-6">
+                            <label for="organization" class="block text-sm font-medium text-gray-300 mb-2">Organization</label>
+                            <input type="text" id="organization" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
+                        </div>
+                        <div class="mb-6">
+                            <label for="email" class="block text-sm font-medium text-gray-300 mb-2">Email</label>
+                            <input type="email" id="email" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
+                        </div>
+                        <div class="mb-6">
+                            <label for="message" class="block text-sm font-medium text-gray-300 mb-2">Message</label>
+                            <textarea id="message" rows="4" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
+                        </div>
+                        <div class="mb-6">
+                            <div class="flex items-start">
+                                <div class="flex items-center h-5">
+                                    <input id="secure" name="secure" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded bg-gray-800">
+                                </div>
+                                <div class="ml-3 text-sm">
+                                    <label for="secure" class="font-medium text-gray-300">This message contains no classified information</label>
+                                </div>
+                            </div>
+                        </div>
+                        <button type="submit" class="w-full gradient-bg text-white px-6 py-3 rounded-md orbitron font-medium hover:opacity-90 transition">
+                            Send Secure Message
+                        </button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="bg-black py-12 px-4 sm:px-6 lg:px-8">
+        <div class="max-w-7xl mx-auto">
+            <div class="md:flex md:items-center md:justify-between">
+                <div class="flex justify-center md:justify-start mb-8 md:mb-0">
+                    <div class="flex items-center">
+                        <div class="hexagon w-10 h-10 gradient-bg flex items-center justify-center">
+                            <span class="orbitron font-bold text-white">CF</span>
+                        </div>
+                        <span class="ml-3 orbitron text-2xl font-bold gradient-text">CoForce<span class="text-white">.AI</span></span>
+                    </div>
+                </div>
+                <div class="flex justify-center md:justify-end space-x-6">
+                    <a href="#" class="text-gray-400 hover:text-white">
+                        <i class="fab fa-twitter"></i>
+                    </a>
+                    <a href="#" class="text-gray-400 hover:text-white">
+                        <i class="fab fa-linkedin"></i>
+                    </a>
+                    <a href="#" class="text-gray-400 hover:text-white">
+                        <i class="fab fa-youtube"></i>
+                    </a>
+                </div>
+            </div>
+            <div class="mt-8 border-t border-gray-800 pt-8 md:flex md:items-center md:justify-between">
+                <div class="text-center md:text-left mb-4 md:mb-0">
+                    <p class="text-sm text-gray-400">
+                        &copy; 2023 CoForce.AI Defense Technologies. All rights reserved.
+                    </p>
+                </div>
+                <div class="flex justify-center md:justify-end space-x-6">
+                    <a href="#" class="text-sm text-gray-400 hover:text-white">Privacy Policy</a>
+                    <a href="#" class="text-sm text-gray-400 hover:text-white">Terms of Service</a>
+                    <a href="#" class="text-sm text-gray-400 hover:text-white">Security</a>
+                    <a href="#" class="text-sm text-gray-400 hover:text-white">Compliance</a>
+                </div>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Mobile menu toggle
+        document.getElementById('mobile-menu-button').addEventListener('click', function() {
+            const menu = document.getElementById('mobile-menu');
+            if (menu.classList.contains('hidden')) {
+                menu.classList.remove('hidden');
+                this.innerHTML = '<i class="fas fa-times"></i>';
+            } else {
+                menu.classList.add('hidden');
+                this.innerHTML = '<i class="fas fa-bars"></i>';
+            }
+        });
+        // Smooth scrolling for anchor links
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                const targetId = this.getAttribute('href');
+                if (targetId === '#') return;
+                const targetElement = document.querySelector(targetId);
+                if (targetElement) {
+                    window.scrollTo({
+                        top: targetElement.offsetTop - 80,
+                        behavior: 'smooth'
+                    });
+                    // Close mobile menu if open
+                    const mobileMenu = document.getElementById('mobile-menu');
+                    if (!mobileMenu.classList.contains('hidden')) {
+                        mobileMenu.classList.add('hidden');
+                        document.getElementById('mobile-menu-button').innerHTML = '<i class="fas fa-bars"></i>';
+                    }
+                }
+            });
+        });
+        // Add shadow to navbar on scroll
+        window.addEventListener('scroll', function() {
+            const nav = document.querySelector('nav');
+            if (window.scrollY > 10) {
+                nav.classList.add('shadow-lg');
+            } else {
+                nav.classList.remove('shadow-lg');
+            }
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=sikang99/coforce-ai-sample-page" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
+</html>