but https://68f8y2nazp.space.minimax.io is better can we make new site clone of that - Follow Up Deployment

index.html

@@ -8,15 +8,16 @@
     <script src="https://cdn.jsdelivr.net/npm/vue@3.2.47/dist/vue.global.min.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
+        body {
+            background-color: #000;
+            color: #fff;
+        }
         .gradient-text {
             background: linear-gradient(90deg, #3b82f6, #8b5cf6);
             -webkit-background-clip: text;
             background-clip: text;
             color: transparent;
         }
-        .hero-gradient {
-            background: linear-gradient(135deg, #1e3a8a 0%, #111827 100%);
-        }
         .feature-card:hover {
             transform: translateY(-5px);
             box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
@@ -87,44 +88,22 @@
         </nav>
 
         <!-- Hero Section -->
-        <section class="hero-gradient pt-24 pb-20 md:pt-32 md:pb-28">
-            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-                <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-5xl lg:text-6xl font-bold text-white leading-tight mb-6">
-                            Cloud Computing <span class="gradient-text">Reimagined</span>
-                        </h1>
-                        <p class="text-xl text-gray-300 mb-8">
-                            WytSky delivers unparalleled cloud performance with cutting-edge technology and enterprise-grade security.
-                        </p>
-                        <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
-                            <button @click="showModal = true" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-lg text-lg font-semibold transition duration-300 transform hover:scale-105 flex items-center justify-center">
-                                Start Free Trial <i class="fas fa-arrow-right ml-2"></i>
-                            </button>
-                            <button class="bg-transparent border-2 border-blue-400 text-blue-400 hover:bg-blue-400/10 px-8 py-4 rounded-lg text-lg font-semibold transition duration-300">
-                                Learn More
-                            </button>
-                        </div>
-                        <div class="mt-8 flex items-center space-x-4">
-                            <div class="flex -space-x-2">
-                                <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white" src="https://randomuser.me/api/portraits/women/12.jpg" alt="User">
-                                <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white" src="https://randomuser.me/api/portraits/men/11.jpg" alt="User">
-                                <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white" src="https://randomuser.me/api/portraits/women/17.jpg" alt="User">
-                            </div>
-                            <div class="text-gray-300">
-                                <span class="font-semibold text-white">10,000+</span> businesses trust WytSky
-                            </div>
-                        </div>
-                    </div>
-                    <div class="md:w-1/2 relative">
-                        <div class="relative">
-                            <div class="absolute -top-6 -left-6 w-64 h-64 bg-purple-500 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div>
-                            <div class="absolute -bottom-8 -right-8 w-64 h-64 bg-blue-500 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div>
-                            <div class="absolute top-20 -right-10 w-64 h-64 bg-indigo-500 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000"></div>
-                            <div class="relative bg-white/10 backdrop-blur-md rounded-2xl overflow-hidden border border-gray-700/30 p-1 glow">
-                                <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Cloud Dashboard" class="rounded-xl w-full h-auto">
-                            </div>
-                        </div>
+        <section class="bg-black text-white">
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-32">
+                <div class="text-center">
+                    <h1 class="text-5xl md:text-7xl font-bold mb-6">
+                        <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-600">Minimax</span> API
+                    </h1>
+                    <p class="text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto mb-10">
+                        The most powerful AI API for building next-generation applications
+                    </p>
+                    <div class="flex flex-col sm:flex-row justify-center gap-4">
+                        <button class="bg-gradient-to-r from-blue-500 to-purple-600 text-white px-8 py-4 rounded-lg text-lg font-semibold hover:opacity-90 transition">
+                            Get Started
+                        </button>
+                        <button class="bg-transparent border border-gray-600 text-white px-8 py-4 rounded-lg text-lg font-semibold hover:bg-gray-800 transition">
+                            Documentation
+                        </button>
                     </div>
                 </div>
             </div>
@@ -146,24 +125,20 @@
         </section>
 
         <!-- Features Section -->
-        <section id="features" class="py-20">
+        <section id="features" class="bg-gray-900 text-white py-20">
             <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                 <div class="text-center mb-16">
-                    <span class="inline-block px-3 py-1 text-sm font-semibold text-blue-600 bg-blue-100 rounded-full mb-4">FEATURES</span>
-                    <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Powerful Cloud Infrastructure</h2>
-                    <p class="text-xl text-gray-600 max-w-3xl mx-auto">Everything you need to build, deploy, and scale your applications with confidence.</p>
+                    <h2 class="text-3xl md:text-4xl font-bold mb-6">Advanced AI Capabilities</h2>
+                    <p class="text-xl text-gray-400 max-w-3xl mx-auto">Build with the most advanced AI models available</p>
                 </div>
                 
-                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-                    <div v-for="(feature, index) in features" :key="index" class="feature-card bg-white p-8 rounded-xl border border-gray-200 transition duration-300 hover:border-blue-200">
-                        <div class="w-14 h-14 bg-blue-100 rounded-lg flex items-center justify-center mb-6">
-                            <i :class="feature.icon" class="text-blue-600 text-2xl"></i>
+                <div class="grid md:grid-cols-3 gap-8">
+                    <div v-for="(feature, index) in features" :key="index" class="bg-gray-800 p-8 rounded-xl hover:bg-gray-700 transition">
+                        <div class="w-12 h-12 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center mb-6">
+                            <i :class="feature.icon" class="text-white text-xl"></i>
                         </div>
-                        <h3 class="text-xl font-bold text-gray-900 mb-3">{{ feature.title }}</h3>
-                        <p class="text-gray-600 mb-4">{{ feature.description }}</p>
-                        <a href="#" class="text-blue-600 font-medium inline-flex items-center">
-                            Learn more <i class="fas fa-arrow-right ml-2"></i>
-                        </a>
+                        <h3 class="text-xl font-bold mb-3">{{ feature.title }}</h3>
+                        <p class="text-gray-400 mb-4">{{ feature.description }}</p>
                     </div>
                 </div>
             </div>
@@ -456,34 +431,34 @@
                 
                 const features = ref([
                     {
-                        icon: 'fas fa-server',
-                        title: 'High-Performance Compute',
-                        description: 'Deploy virtual machines with industry-leading performance and reliability.'
+                        icon: 'fas fa-brain',
+                        title: 'Large Language Models',
+                        description: 'State-of-the-art models for text generation and understanding.'
                     },
                     {
-                        icon: 'fas fa-database',
-                        title: 'Scalable Storage',
-                        description: 'Easily scale your storage needs with our distributed cloud storage solutions.'
+                        icon: 'fas fa-comments',
+                        title: 'Conversational AI',
+                        description: 'Build chatbots and virtual assistants that understand context.'
                     },
                     {
-                        icon: 'fas fa-shield-alt',
-                        title: 'Enterprise Security',
-                        description: 'Military-grade encryption and compliance with global security standards.'
+                        icon: 'fas fa-code',
+                        title: 'Code Generation',
+                        description: 'Generate and complete code in multiple programming languages.'
                     },
                     {
-                        icon: 'fas fa-network-wired',
-                        title: 'Global Network',
-                        description: 'Low-latency connectivity across our worldwide data center locations.'
+                        icon: 'fas fa-image',
+                        title: 'Image Generation',
+                        description: 'Create stunning images from text descriptions.'
                     },
                     {
-                        icon: 'fas fa-robot',
-                        title: 'AI & Machine Learning',
-                        description: 'Built-in tools for developing and deploying AI models at scale.'
+                        icon: 'fas fa-language',
+                        title: 'Multilingual Support',
+                        description: 'Support for dozens of languages out of the box.'
                     },
                     {
-                        icon: 'fas fa-tachometer-alt',
-                        title: 'Real-time Analytics',
-                        description: 'Monitor and optimize your cloud resources with comprehensive dashboards.'
+                        icon: 'fas fa-cog',
+                        title: 'Fine-tuning',
+                        description: 'Customize models for your specific use case.'
                     }
                 ]);