Spaces:

barathm111
/

intely-3d-showcase-spectacle

Running

App Files Files Community

barathm111 commited on Dec 10, 2025

Commit

3d747b8

verified ·

1 Parent(s): 9c69b5a

i want the clour combination to be black and white

Browse files

Files changed (5) hide show

components/case-studies.js +9 -9
components/footer.js +3 -3
components/navbar.js +3 -3
index.html +21 -24
style.css +4 -7

components/case-studies.js CHANGED Viewed

@@ -20,8 +20,8 @@ class CustomCaseStudies extends HTMLElement {
           font-weight: 700;
           text-align: center;
           margin-bottom: 3rem;
-          background: linear-gradient(to right, #3b82f6, #6366f1);
-          -webkit-background-clip: text;
           background-clip: text;
           color: transparent;
         }
@@ -33,8 +33,8 @@ class CustomCaseStudies extends HTMLElement {
         }
         .case-study-card {
-          background: #1f2937;
-          border-radius: 1rem;
           overflow: hidden;
           transition: transform 0.3s ease, box-shadow 0.3s ease;
         }
@@ -100,16 +100,16 @@ class CustomCaseStudies extends HTMLElement {
           <div class="case-study-card">
             <img src="http://static.photos/finance/640x360/1" alt="Accounting Software" class="case-study-image">
             <div class="case-study-content">
-              <span class="case-study-industry">Finance</span>
-              <h3>Automated Tax Compliance</h3>
               <p class="case-study-description">
                 Streamlined GST and IT filing for 500+ businesses with our automated financial suite.
               </p>
-              <a href="#" class="case-study-link">
                 Read case study
-                <i data-feather="arrow-right"></i>
               </a>
-            </div>
           </div>
           <div class="case-study-card">

           font-weight: 700;
           text-align: center;
           margin-bottom: 3rem;
+          background: linear-gradient(to right, #ffffff, #aaaaaa);
+-webkit-background-clip: text;
           background-clip: text;
           color: transparent;
         }
         }
         .case-study-card {
+          background: #111111;
+border-radius: 1rem;
           overflow: hidden;
           transition: transform 0.3s ease, box-shadow 0.3s ease;
         }
           <div class="case-study-card">
             <img src="http://static.photos/finance/640x360/1" alt="Accounting Software" class="case-study-image">
             <div class="case-study-content">
+            <span class="case-study-industry" style="background: #666666;">Finance</span>
+<h3>Automated Tax Compliance</h3>
               <p class="case-study-description">
                 Streamlined GST and IT filing for 500+ businesses with our automated financial suite.
               </p>
+            <a href="#" class="case-study-link" style="color: #ffffff;">
                 Read case study
+                <i data-feather="arrow-right" style="color: #ffffff;"></i>
               </a>
+</div>
           </div>
           <div class="case-study-card">

components/footer.js CHANGED Viewed

@@ -22,7 +22,7 @@ class CustomFooter extends HTMLElement {
         .footer-logo {
           font-size: 1.5rem;
           font-weight: 700;
-          background: linear-gradient(to right, #3b82f6, #6366f1);
 -webkit-background-clip: text;
           background-clip: text;
           color: transparent;
@@ -57,8 +57,8 @@ class CustomFooter extends HTMLElement {
         }
         .social-link:hover {
-          background: linear-gradient(to right, #a855f7, #ec4899);
-          transform: translateY(-3px);
         }
         .footer-heading {

         .footer-logo {
           font-size: 1.5rem;
           font-weight: 700;
+          background: linear-gradient(to right, #ffffff, #aaaaaa);
 -webkit-background-clip: text;
           background-clip: text;
           color: transparent;
         }
         .social-link:hover {
+          background: linear-gradient(to right, #ffffff, #999999);
+transform: translateY(-3px);
         }
         .footer-heading {

components/navbar.js CHANGED Viewed

@@ -27,7 +27,7 @@ class CustomNavbar extends HTMLElement {
         .logo {
           font-size: 1.5rem;
           font-weight: 700;
-          background: linear-gradient(to right, #3b82f6, #6366f1);
 -webkit-background-clip: text;
           background-clip: text;
           color: transparent;
@@ -63,8 +63,8 @@ class CustomNavbar extends HTMLElement {
           left: 0;
           width: 0;
           height: 2px;
-          background: linear-gradient(to right, #a855f7, #ec4899);
-          transition: width 0.3s ease;
         }
         .nav-link:hover::after {

         .logo {
           font-size: 1.5rem;
           font-weight: 700;
+          background: linear-gradient(to right, #ffffff, #aaaaaa);
 -webkit-background-clip: text;
           background-clip: text;
           color: transparent;
           left: 0;
           width: 0;
           height: 2px;
+          background: linear-gradient(to right, #ffffff, #999999);
+transition: width 0.3s ease;
         }
         .nav-link:hover::after {

index.html CHANGED Viewed

@@ -11,32 +11,32 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.min.js"></script>
 </head>
-<body class="bg-gray-900 text-white overflow-x-hidden">
-    <custom-navbar></custom-navbar>
     <main class="relative z-10">
         <!-- Hero Section -->
         <section class="min-h-screen flex flex-col justify-center items-center relative overflow-hidden">
             <div id="3d-container" class="absolute inset-0 w-full h-full z-0"></div>
             <div class="relative z-10 text-center px-4 max-w-6xl mx-auto">
-                <h1 class="text-5xl md:text-7xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-indigo-600">
                     Intely Software Solutions
                 </h1>
-                <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">
                     Transforming businesses with cutting-edge digital tools and enterprise solutions.
                 </p>
 <div class="flex flex-col sm:flex-row gap-4 justify-center">
-                    <a href="#features" class="px-8 py-4 bg-gradient-to-r from-purple-500 to-pink-600 rounded-full font-bold text-lg hover:shadow-lg hover:shadow-purple-500/30 transition-all">
                         Discover More
                     </a>
-                    <a href="#contact" class="px-8 py-4 border-2 border-purple-400 rounded-full font-bold text-lg hover:bg-purple-900/30 transition-all">
                         Get Started
                     </a>
                 </div>
-            </div>
             <div class="absolute bottom-20 left-1/2 transform -translate-x-1/2 animate-bounce">
-                <i data-feather="chevron-down" class="w-12 h-12 text-purple-400"></i>
-            </div>
         </section>
         <!-- Products Section -->
         <section id="products" class="py-20 px-4 max-w-7xl mx-auto">
@@ -136,8 +136,8 @@
             </div>
         </section>
         <!-- Client Showcase -->
-        <section class="py-20 bg-gradient-to-br from-gray-900 to-gray-800">
-            <div class="max-w-7xl mx-auto px-4">
                 <h2 class="text-4xl font-bold text-center mb-16">Client Success Stories</h2>
                 <!-- Finance Case Study -->
@@ -241,8 +241,8 @@
                     <label for="message" class="block mb-2 font-medium">Message</label>
                     <textarea id="message" rows="5" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"></textarea>
                 </div>
-                    <button type="submit" class="w-full md:w-auto px-8 py-4 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-full font-bold text-lg hover:shadow-lg hover:shadow-blue-500/30 transition-all">
-                        Request Demo
                     </button>
 </form>
         </section>
@@ -279,13 +279,12 @@ document.addEventListener('DOMContentLoaded', function() {
             // Add floating objects
             const geometry = new THREE.IcosahedronGeometry(1, 0);
             const colors = [
-                { color: 0x3b82f6, emissive: 0x1d4ed8 }, // Blue
-                { color: 0x10b981, emissive: 0x047857 }, // Green
-                { color: 0x8b5cf6, emissive: 0x7c3aed }, // Purple
-                { color: 0xf59e0b, emissive: 0xd97706 }  // Amber
             ];
-            const materials = colors.map(c => new THREE.MeshPhongMaterial({
                 color: c.color,
                 emissive: c.emissive,
                 emissiveIntensity: 0.3,
@@ -334,15 +333,13 @@ mesh.position.x = Math.random() * 20 - 10;
                 bevelOffset: 0,
                 bevelSegments: 5
             });
             const logoMaterial = new THREE.MeshPhongMaterial({
-                color: 0x3b82f6,
-                emissive: 0x1d4ed8,
                 emissiveIntensity: 0.4,
                 shininess: 90
             });
-            const logoMesh = new THREE.Mesh(logoGeometry, logoMaterial);
             logoMesh.position.set(0, 0, 0);
             scene.add(logoMesh);
 });

     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.min.js"></script>
 </head>
+<body class="bg-black text-white overflow-x-hidden">
+<custom-navbar></custom-navbar>
     <main class="relative z-10">
         <!-- Hero Section -->
         <section class="min-h-screen flex flex-col justify-center items-center relative overflow-hidden">
             <div id="3d-container" class="absolute inset-0 w-full h-full z-0"></div>
             <div class="relative z-10 text-center px-4 max-w-6xl mx-auto">
+                <h1 class="text-5xl md:text-7xl font-bold mb-6 text-white">
                     Intely Software Solutions
                 </h1>
+<p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">
                     Transforming businesses with cutting-edge digital tools and enterprise solutions.
                 </p>
 <div class="flex flex-col sm:flex-row gap-4 justify-center">
+                    <a href="#features" class="px-8 py-4 bg-white text-black rounded-full font-bold text-lg hover:shadow-lg hover:shadow-white/30 transition-all">
                         Discover More
                     </a>
+                    <a href="#contact" class="px-8 py-4 border-2 border-white rounded-full font-bold text-lg hover:bg-gray-900/30 transition-all">
                         Get Started
                     </a>
                 </div>
+</div>
             <div class="absolute bottom-20 left-1/2 transform -translate-x-1/2 animate-bounce">
+                <i data-feather="chevron-down" class="w-12 h-12 text-white"></i>
+</div>
         </section>
         <!-- Products Section -->
         <section id="products" class="py-20 px-4 max-w-7xl mx-auto">
             </div>
         </section>
         <!-- Client Showcase -->
+        <section class="py-20 bg-black">
+<div class="max-w-7xl mx-auto px-4">
                 <h2 class="text-4xl font-bold text-center mb-16">Client Success Stories</h2>
                 <!-- Finance Case Study -->
                     <label for="message" class="block mb-2 font-medium">Message</label>
                     <textarea id="message" rows="5" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"></textarea>
                 </div>
+                    <button type="submit" class="w-full md:w-auto px-8 py-4 bg-white text-black rounded-full font-bold text-lg hover:shadow-lg hover:shadow-white/30 transition-all">
+Request Demo
                     </button>
 </form>
         </section>
             // Add floating objects
             const geometry = new THREE.IcosahedronGeometry(1, 0);
             const colors = [
+                { color: 0xffffff, emissive: 0xaaaaaa }, // White
+                { color: 0xdddddd, emissive: 0x888888 }, // Light Gray
+                { color: 0xcccccc, emissive: 0x666666 }, // Medium Gray
+                { color: 0x999999, emissive: 0x444444 }  // Dark Gray
             ];
+const materials = colors.map(c => new THREE.MeshPhongMaterial({
                 color: c.color,
                 emissive: c.emissive,
                 emissiveIntensity: 0.3,
                 bevelOffset: 0,
                 bevelSegments: 5
             });
             const logoMaterial = new THREE.MeshPhongMaterial({
+                color: 0xffffff,
+                emissive: 0xcccccc,
                 emissiveIntensity: 0.4,
                 shininess: 90
             });
+const logoMesh = new THREE.Mesh(logoGeometry, logoMaterial);
             logoMesh.position.set(0, 0, 0);
             scene.add(logoMesh);
 });

style.css CHANGED Viewed

@@ -12,16 +12,14 @@ body {
 ::-webkit-scrollbar-track {
     background: #1a1a1a;
 }
 ::-webkit-scrollbar-thumb {
-    background: #7c3aed;
     border-radius: 4px;
 }
 ::-webkit-scrollbar-thumb:hover {
-    background: #6d28d9;
 }
 /* Animation */
 @keyframes float {
     0%, 100% {
@@ -43,10 +41,9 @@ body {
 /* Product cards */
 .product-card {
     transition: all 0.3s ease;
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
-    border: 1px solid rgba(255, 255, 255, 0.1);
 }
 .product-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);

 ::-webkit-scrollbar-track {
     background: #1a1a1a;
 }
 ::-webkit-scrollbar-thumb {
+    background: #888888;
     border-radius: 4px;
 }
 ::-webkit-scrollbar-thumb:hover {
+    background: #ffffff;
 }
 /* Animation */
 @keyframes float {
     0%, 100% {
 /* Product cards */
 .product-card {
     transition: all 0.3s ease;
+    box-shadow: 0 10px 15px -3px rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
 }
 .product-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);