Spaces:

Ghostgim
/

codecraft-complex-devs

Running

App Files Files Community

Ghostgim commited on Nov 2, 2025

Commit

93ce3ba

verified ·

1 Parent(s): 13aeff8

so there is the logo, and the CEO are JOE MUNENE, AND ISACC..

Browse files

Files changed (4) hide show

components/footer.js +2 -2
components/navbar.js +3 -4
index.html +40 -7
style.css +35 -1

components/footer.js CHANGED Viewed

@@ -22,10 +22,10 @@ class CustomFooter extends HTMLElement {
                     <div class="grid grid-cols-1 md:grid-cols-4 gap-12">
                         <div>
                             <div class="flex items-center mb-6">
-                                <div class="w-10 h-10 rounded-lg bg-primary-500 flex items-center justify-center text-white font-bold mr-3">CC</div>
                                 <span class="text-xl font-bold text-white">CodeCraft Complex</span>
                             </div>
-                            <p class="mb-6">Full-spectrum digital solutions for businesses of all sizes.</p>
                             <div class="flex space-x-4">
                                 <a href="#" class="social-icon text-gray-400 hover:text-primary-500">
                                     <i data-feather="twitter"></i>

                     <div class="grid grid-cols-1 md:grid-cols-4 gap-12">
                         <div>
                             <div class="flex items-center mb-6">
+                                <img src="https://huggingface.co/spaces/Ghostgim/codecraft-complex-devs/resolve/main/images/Screenshot%202025-11-02%20064654.png" alt="CodeCraft Complex Logo" class="w-10 h-10 mr-3 glow-effect">
                                 <span class="text-xl font-bold text-white">CodeCraft Complex</span>
                             </div>
+<p class="mb-6">Full-spectrum digital solutions for businesses of all sizes.</p>
                             <div class="flex space-x-4">
                                 <a href="#" class="social-icon text-gray-400 hover:text-primary-500">
                                     <i data-feather="twitter"></i>

components/navbar.js CHANGED Viewed

@@ -38,11 +38,10 @@ class CustomNavbar extends HTMLElement {
             <nav class="navbar fixed w-full z-50 px-6 py-4">
                 <div class="max-w-7xl mx-auto flex justify-between items-center">
                     <a href="/" class="flex items-center">
-                        <div class="w-10 h-10 rounded-lg bg-primary-500 flex items-center justify-center text-white font-bold mr-3">CC</div>
-                        <span class="text-xl font-bold text-gray-800">CodeCraft Complex</span>
                     </a>
-                    <div class="hidden md:flex items-center space-x-8">
                         <a href="/" class="nav-link text-gray-600 hover:text-primary-500">Home</a>
                         <a href="#services" class="nav-link text-gray-600 hover:text-primary-500">Services</a>
                         <a href="#process" class="nav-link text-gray-600 hover:text-primary-500">Process</a>

             <nav class="navbar fixed w-full z-50 px-6 py-4">
                 <div class="max-w-7xl mx-auto flex justify-between items-center">
                     <a href="/" class="flex items-center">
+                        <img src="https://huggingface.co/spaces/Ghostgim/codecraft-complex-devs/resolve/main/images/Screenshot%202025-11-02%20064654.png" alt="CodeCraft Complex Logo" class="w-10 h-10 mr-3 glow-effect">
+                        <span class="text-xl font-bold text-white bg-clip-text text-transparent bg-gradient-to-r from-primary-100 to-secondary-500">CodeCraft Complex</span>
                     </a>
+<div class="hidden md:flex items-center space-x-8">
                         <a href="/" class="nav-link text-gray-600 hover:text-primary-500">Home</a>
                         <a href="#services" class="nav-link text-gray-600 hover:text-primary-500">Services</a>
                         <a href="#process" class="nav-link text-gray-600 hover:text-primary-500">Process</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>CodeCraft Complex Devs | Full-Spectrum Digital Solutions</title>
-    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
     <link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
@@ -41,9 +41,9 @@
         <!-- Hero Section -->
         <section class="relative bg-gradient-to-r from-primary-500 to-secondary-500 text-white py-24 px-4 sm:px-6 lg:px-8">
             <div class="max-w-7xl mx-auto text-center">
-                <h1 class="text-4xl md:text-6xl font-bold mb-6">Crafting Digital Excellence</h1>
-                <p class="text-xl md:text-2xl max-w-3xl mx-auto mb-8">Full-spectrum digital solutions tailored to your business needs through our 15 specialized services.</p>
-                <div class="flex flex-col sm:flex-row justify-center gap-4">
                     <a href="#services" class="bg-white text-primary-700 hover:bg-gray-100 font-semibold py-3 px-8 rounded-lg transition duration-300">
                         Explore Services
                     </a>
@@ -200,10 +200,43 @@
                 </div>
             </div>
         </section>
         <!-- Testimonials -->
-        <section class="py-20 px-4 sm:px-6 lg:px-8 bg-primary-700 text-white">
-            <div class="max-w-7xl mx-auto">
                 <div class="text-center mb-16">
                     <h2 class="text-3xl md:text-4xl font-bold mb-4">Trusted By Industry Leaders</h2>
                     <p class="text-lg text-primary-100 max-w-3xl mx-auto">Don't just take our word for it - hear what our clients have to say.</p>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CodeCraft Complex | Futuristic Digital Solutions</title>
+<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
     <link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
         <!-- Hero Section -->
         <section class="relative bg-gradient-to-r from-primary-500 to-secondary-500 text-white py-24 px-4 sm:px-6 lg:px-8">
             <div class="max-w-7xl mx-auto text-center">
+                <h1 class="text-4xl md:text-6xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-primary-100 via-primary-500 to-secondary-500">Shaping The Digital Future</h1>
+                <p class="text-xl md:text-2xl max-w-3xl mx-auto mb-8 text-white/90">Pioneering digital solutions powered by cutting-edge technology and visionary leadership.</p>
+<div class="flex flex-col sm:flex-row justify-center gap-4">
                     <a href="#services" class="bg-white text-primary-700 hover:bg-gray-100 font-semibold py-3 px-8 rounded-lg transition duration-300">
                         Explore Services
                     </a>
                 </div>
             </div>
         </section>
+        <!-- Leadership Section -->
+        <section class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-900 text-white">
+            <div class="max-w-7xl mx-auto">
+                <div class="text-center mb-16">
+                    <h2 class="text-3xl md:text-4xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-secondary-500">Visionary Leadership</h2>
+                    <p class="text-lg text-gray-400 max-w-3xl mx-auto">Driving innovation with a bold vision for the future</p>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
+                    <div class="bg-gradient-to-br from-gray-800 to-gray-900 p-8 rounded-xl border border-gray-700 hover:border-primary-500 transition-all duration-300">
+                        <div class="flex flex-col md:flex-row items-center gap-6">
+                            <img src="https://static.photos/technology/200x200/1" alt="Joe Munene" class="w-32 h-32 rounded-full object-cover border-4 border-primary-500">
+                            <div>
+                                <h3 class="text-2xl font-bold mb-1">Joe Munene</h3>
+                                <p class="text-primary-400 mb-3">CEO & Co-Founder</p>
+                                <p class="text-gray-300">Visionary leader with 15+ years experience in emerging technologies and digital transformation.</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="bg-gradient-to-br from-gray-800 to-gray-900 p-8 rounded-xl border border-gray-700 hover:border-secondary-500 transition-all duration-300">
+                        <div class="flex flex-col md:flex-row items-center gap-6">
+                            <img src="https://static.photos/technology/200x200/2" alt="Isaac" class="w-32 h-32 rounded-full object-cover border-4 border-secondary-500">
+                            <div>
+                                <h3 class="text-2xl font-bold mb-1">Isaac</h3>
+                                <p class="text-secondary-400 mb-3">CTO & Co-Founder</p>
+                                <p class="text-gray-300">Technology pioneer specializing in AI, blockchain, and next-gen web architectures.</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
         <!-- Testimonials -->
+        <section class="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-r from-gray-900 to-primary-700 text-white">
+<div class="max-w-7xl mx-auto">
                 <div class="text-center mb-16">
                     <h2 class="text-3xl md:text-4xl font-bold mb-4">Trusted By Industry Leaders</h2>
                     <p class="text-lg text-primary-100 max-w-3xl mx-auto">Don't just take our word for it - hear what our clients have to say.</p>

style.css CHANGED Viewed

@@ -1,8 +1,42 @@
-/* Smooth scroll behavior */
 html {
     scroll-behavior: smooth;
 }
 /* Custom animations */
 @keyframes fadeIn {
     from { opacity: 0; transform: translateY(20px); }

+/* Futuristic base styles */
 html {
     scroll-behavior: smooth;
+    background-color: #0f172a;
+}
+body {
+    background: radial-gradient(circle at 10% 20%, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 1) 90%);
+    color: #e2e8f0;
+}
+/* Glow effects */
+.glow-effect {
+    box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
+    transition: box-shadow 0.3s ease;
 }
+.glow-effect:hover {
+    box-shadow: 0 0 25px rgba(16, 185, 129, 0.8);
+}
+/* Futuristic borders */
+.futuristic-border {
+    position: relative;
+}
+.futuristic-border::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    padding: 1px;
+    background: linear-gradient(135deg, #10b981, #6366f1);
+    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+    pointer-events: none;
+}
 /* Custom animations */
 @keyframes fadeIn {
     from { opacity: 0; transform: translateY(20px); }