Spaces:

VibeCodingStudio
/

phantom-digital-vibes

Running

App Files Files Community

VibeCodingStudio commited on Jan 22

Commit

e9e6022

verified ·

1 Parent(s): c17bf12

Can you revise it to make it about a Enterprise-Grade Secure Automations

Browse files

and put a cool glowing phantom blue to cyber cyan gradient"PHANTOM DIGITAL" wordmark and "PD" logo with a cyber cyan matrix-like code raining animation in the backgroud

Files changed (5) hide show

components/footer.js +4 -4
components/navbar.js +3 -3
index.html +17 -7
script.js +46 -1
style.css +19 -2

components/footer.js CHANGED Viewed

@@ -13,11 +13,11 @@ class CustomFooter extends HTMLElement {
           <div class="grid md:grid-cols-4 gap-12">
             <div>
               <div class="flex items-center gap-2 mb-6">
-                <div class="w-8 h-8 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-lg flex items-center justify-center">
-                  <i data-feather="activity" class="text-white w-4 h-4"></i>
-                </div>
-                <span class="text-xl font-bold">Phantom Digital</span>
               </div>
               <p class="text-gray-400 mb-6">
                 Crafting digital experiences that captivate and convert.
               </p>

           <div class="grid md:grid-cols-4 gap-12">
             <div>
               <div class="flex items-center gap-2 mb-6">
+              <div class="w-8 h-8 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-lg flex items-center justify-center">
+                <span class="text-white font-bold text-xs">PD</span>
               </div>
+              <span class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-blue-500">PHANTOM DIGITAL</span>
+</div>
               <p class="text-gray-400 mb-6">
                 Crafting digital experiences that captivate and convert.
               </p>

components/navbar.js CHANGED Viewed

@@ -29,10 +29,10 @@ class CustomNavbar extends HTMLElement {
           <div class="flex items-center justify-between">
             <a href="/" class="flex items-center gap-2">
               <div class="w-8 h-8 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-lg flex items-center justify-center">
-                <i data-feather="activity" class="text-white w-4 h-4"></i>
               </div>
-              <span class="text-xl font-bold">Phantom</span>
-            </a>
             <div class="hidden md:flex items-center gap-8">
               <a href="#services" class="nav-link text-gray-300 hover:text-white">Services</a>

           <div class="flex items-center justify-between">
             <a href="/" class="flex items-center gap-2">
               <div class="w-8 h-8 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-lg flex items-center justify-center">
+                <span class="text-white font-bold text-xs">PD</span>
               </div>
+              <span class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-blue-500">PHANTOM</span>
+</a>
             <div class="hidden md:flex items-center gap-8">
               <a href="#services" class="nav-link text-gray-300 hover:text-white">Services</a>

index.html CHANGED Viewed

@@ -3,8 +3,8 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Phantom Digital | Digital Experiences Redefined</title>
-    <link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/feather-icons"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
@@ -40,12 +40,12 @@
         <section class="flex flex-col md:flex-row items-center justify-between gap-12 mb-24">
             <div class="md:w-1/2 space-y-6">
                 <h1 class="text-5xl md:text-6xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-blue-500">
-                    Digital Experiences <br> <span class="text-white">Redefined</span>
                 </h1>
                 <p class="text-xl text-gray-300">
-                    We craft immersive digital experiences that captivate audiences and drive results.
                 </p>
-                <div class="flex gap-4">
                     <a href="#contact" class="px-8 py-3 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-full font-medium hover:opacity-90 transition">
                         Get Started
                     </a>
@@ -57,8 +57,18 @@
             <div class="md:w-1/2">
                 <div class="relative">
                     <div class="absolute -inset-4 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-2xl blur opacity-75"></div>
-                    <img src="http://static.photos/technology/1024x576/42" alt="Digital Technology" class="relative rounded-xl w-full h-auto">
-                </div>
             </div>
         </section>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Phantom Digital | Enterprise-Grade Secure Automations</title>
+<link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/feather-icons"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
         <section class="flex flex-col md:flex-row items-center justify-between gap-12 mb-24">
             <div class="md:w-1/2 space-y-6">
                 <h1 class="text-5xl md:text-6xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-blue-500">
+                    Enterprise-Grade <br> <span class="text-white">Secure Automations</span>
                 </h1>
                 <p class="text-xl text-gray-300">
+                    We build bulletproof automation solutions that scale with your enterprise needs.
                 </p>
+<div class="flex gap-4">
                     <a href="#contact" class="px-8 py-3 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-full font-medium hover:opacity-90 transition">
                         Get Started
                     </a>
             <div class="md:w-1/2">
                 <div class="relative">
                     <div class="absolute -inset-4 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-2xl blur opacity-75"></div>
+                    <div class="relative rounded-xl w-full h-auto bg-black overflow-hidden">
+                        <canvas id="matrixCanvas" class="w-full h-full"></canvas>
+                        <div class="absolute inset-0 flex items-center justify-center">
+                            <div class="text-center p-8 backdrop-blur-sm bg-black/30 rounded-lg">
+                                <div class="text-4xl font-bold mb-2 bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-blue-500">
+                                    PHANTOM DIGITAL
+                                </div>
+                                <div class="text-xl text-cyan-300">SECURE AUTOMATION SOLUTIONS</div>
+                            </div>
+                        </div>
+                    </div>
+</div>
             </div>
         </section>

script.js CHANGED Viewed

@@ -1,5 +1,50 @@
 document.addEventListener('DOMContentLoaded', function() {
-    // Smooth scrolling for anchor links
     document.querySelectorAll('a[href^="#"]').forEach(anchor => {
         anchor.addEventListener('click', function (e) {
             e.preventDefault();

+// Matrix animation
+function initMatrix() {
+    const canvas = document.getElementById('matrixCanvas');
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    canvas.width = canvas.offsetWidth;
+    canvas.height = canvas.offsetHeight;
+    const katakana = 'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン';
+    const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+    const nums = '0123456789';
+    const symbols = '!"#$%&\'()*+,-./:;<=>?@[\\]^_`{|}~';
+    const alphabet = katakana + latin + nums + symbols;
+    const fontSize = 16;
+    const columns = canvas.width / fontSize;
+    const drops = [];
+    for (let i = 0; i < columns; i++) {
+        drops[i] = 1;
+    }
+    function draw() {
+        ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        ctx.fillStyle = '#0ff';
+        ctx.font = fontSize + 'px monospace';
+        for (let i = 0; i < drops.length; i++) {
+            const text = alphabet.charAt(Math.floor(Math.random() * alphabet.length));
+            ctx.fillText(text, i * fontSize, drops[i] * fontSize);
+            if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
+                drops[i] = 0;
+            }
+            drops[i]++;
+        }
+    }
+    setInterval(draw, 33);
+}
 document.addEventListener('DOMContentLoaded', function() {
+    initMatrix();
+// Smooth scrolling for anchor links
     document.querySelectorAll('a[href^="#"]').forEach(anchor => {
         anchor.addEventListener('click', function (e) {
             e.preventDefault();

style.css CHANGED Viewed

@@ -33,9 +33,26 @@ body {
     50% { transform: translateY(-20px); }
     100% { transform: translateY(0px); }
 }
 .gradient-text {
     background-clip: text;
     -webkit-background-clip: text;
     color: transparent;
-}

     50% { transform: translateY(-20px); }
     100% { transform: translateY(0px); }
 }
 .gradient-text {
     background-clip: text;
     -webkit-background-clip: text;
     color: transparent;
+}
+/* Cyber glow effect */
+.cyber-glow {
+    text-shadow: 0 0 5px rgba(0, 255, 255, 0.5),
+                 0 0 10px rgba(0, 255, 255, 0.3),
+                 0 0 15px rgba(0, 255, 255, 0.2);
+}
+/* PD logo animation */
+@keyframes pd-pulse {
+    0% { opacity: 0.8; }
+    50% { opacity: 1; text-shadow: 0 0 8px cyan; }
+    100% { opacity: 0.8; }
+}
+.pd-logo {
+    animation: pd-pulse 2s ease-in-out infinite;
+}