Spaces:

bzouiri
/

testwebdite

Running

App Files Files Community

bzouiri commited on Aug 25, 2025

Commit

98dc97c

verified ·

1 Parent(s): 085e20b

le style du site n est pas tres wowo . fait des inmprvement dans ce sense - Follow Up Deployment

Browse files

Files changed (1) hide show

index.html +62 -15

index.html CHANGED Viewed

@@ -8,11 +8,24 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         .gradient-bg {
-            background: linear-gradient(135deg, #6e8efb 0%, #4a6cf7 100%);
         }
         .tech-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
         }
         .chart-container {
             height: 300px;
@@ -32,8 +45,11 @@
     </style>
 </head>
 <body class="font-sans antialiased text-gray-800">
     <!-- Navigation -->
-    <nav class="bg-white shadow-lg sticky top-0 z-50">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="flex justify-between h-16">
                 <div class="flex items-center">
@@ -81,15 +97,18 @@
     </nav>
     <!-- Hero Section -->
-    <section id="home" class="gradient-bg text-white">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-32">
             <div class="md:flex items-center">
                 <div class="md:w-1/2 mb-10 md:mb-0">
                     <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-4">Transforming Business with AI-Powered Software and Financial Analytics</h1>
                     <p class="text-xl mb-8 opacity-90">Harness cutting-edge AI and complex algorithms to drive innovation and insights for your business.</p>
                     <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
-                        <a href="#services" class="px-6 py-3 bg-white text-blue-600 font-medium rounded-md shadow-md hover:bg-gray-100 transition duration-300 text-center">Discover Our Solutions</a>
-                        <a href="#contact" class="px-6 py-3 border-2 border-white text-white font-medium rounded-md hover:bg-white hover:text-blue-600 transition duration-300 text-center">Get a Free Consultation</a>
                     </div>
                 </div>
                 <div class="md:w-1/2 flex justify-center">
@@ -191,7 +210,14 @@
     </section>
     <!-- Services -->
-    <section id="services" class="py-16 bg-white">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="text-center mb-16">
                 <h2 class="text-3xl font-bold text-gray-900 mb-4">Our Services</h2>
@@ -201,7 +227,7 @@
             <div class="grid md:grid-cols-2 gap-8">
                 <!-- AI Software Development -->
-                <div class="bg-gray-50 rounded-xl p-8 shadow-sm hover:shadow-md transition duration-300">
                     <div class="flex items-center mb-6">
                         <div class="bg-blue-100 p-3 rounded-full mr-4">
                             <i class="fas fa-code text-blue-600 text-xl"></i>
@@ -309,7 +335,7 @@
             <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                 <!-- Tech Card 1 -->
-                <div class="bg-white rounded-xl p-6 shadow-sm tech-card transition duration-300">
                     <div class="flex items-center mb-4">
                         <div class="bg-blue-100 p-2 rounded-lg mr-4">
                             <i class="fas fa-brain text-blue-600 text-2xl"></i>
@@ -468,7 +494,17 @@
     </section>
     <!-- Portfolio -->
-    <section id="portfolio" class="py-16 bg-white">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="text-center mb-16">
                 <h2 class="text-3xl font-bold text-gray-900 mb-4">Our Portfolio</h2>
@@ -534,7 +570,7 @@
                         <p class="opacity-90 mb-6">Explore how we've helped clients achieve measurable results with AI solutions tailored to their specific challenges.</p>
                         <a href="#contact" class="inline-flex items-center px-6 py-3 bg-white text-blue-600 font-medium rounded-md shadow-md hover:bg-gray-100 transition duration-300">
                             Request Case Studies
-                            <i class="fas fa-arrow-right ml-2"></i>
                         </a>
                     </div>
                     <div class="md:w-1/3 flex justify-center">
@@ -558,7 +594,7 @@
             <div class="grid md:grid-cols-3 gap-8">
                 <!-- Testimonial 1 -->
-                <div class="bg-white p-8 rounded-xl shadow-sm">
                     <div class="flex items-center mb-4">
                         <div class="text-yellow-400 mr-2">
                             <i class="fas fa-star"></i>
@@ -849,7 +885,7 @@
                 </div>
                 <div>
-                    <form id="contactForm" class="bg-gray-50 p-8 rounded-xl shadow-sm">
                         <div class="mb-6">
                             <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
                             <input type="text" id="name" name="name" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" required>
@@ -923,7 +959,10 @@
     </section>
     <!-- Footer -->
-    <footer class="bg-gray-900 text-white pt-16 pb-8">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="grid md:grid-cols-4 gap-8">
                 <div class="md:col-span-2">
@@ -1084,6 +1123,14 @@
             });
         });
         // Animate elements when they come into view
         const animateOnScroll = () => {
             const elements = document.querySelectorAll('.animated-bar');

     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         .gradient-bg {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        }
+        .gradient-text {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
         }
         .tech-card:hover {
+            transform: translateY(-10px);
+            box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
+            transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+        }
+        .hover-scale {
+            transition: transform 0.3s ease;
+        }
+        .hover-scale:hover {
+            transform: scale(1.05);
         }
         .chart-container {
             height: 300px;
     </style>
 </head>
 <body class="font-sans antialiased text-gray-800">
+    <!-- Scroll Progress -->
+    <div class="h-1 bg-blue-500 fixed top-0 left-0 z-50" style="width: 0%" id="progressBar"></div>
     <!-- Navigation -->
+    <nav class="bg-white shadow-lg sticky top-0 z-40 mt-1">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="flex justify-between h-16">
                 <div class="flex items-center">
     </nav>
     <!-- Hero Section -->
+    <section id="home" class="gradient-bg text-white relative overflow-hidden">
+        <div class="absolute inset-0 opacity-20">
+            <div class="absolute top-0 left-0 w-full h-full bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-30"></div>
+        </div>
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-32">
             <div class="md:flex items-center">
                 <div class="md:w-1/2 mb-10 md:mb-0">
                     <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-4">Transforming Business with AI-Powered Software and Financial Analytics</h1>
                     <p class="text-xl mb-8 opacity-90">Harness cutting-edge AI and complex algorithms to drive innovation and insights for your business.</p>
                     <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
+                        <a href="#services" class="px-6 py-3 bg-white text-blue-600 font-medium rounded-md shadow-md hover:bg-gray-100 transition-all duration-300 hover:shadow-lg active:scale-95 text-center">Discover Our Solutions</a>
+                        <a href="#contact" class="px-6 py-3 border-2 border-white text-white font-medium rounded-md hover:bg-white hover:text-blue-600 transition-all duration-300 hover:shadow-lg active:scale-95 text-center">Get a Free Consultation</a>
                     </div>
                 </div>
                 <div class="md:w-1/2 flex justify-center">
     </section>
     <!-- Services -->
+    <div class="relative h-16 -mt-16 overflow-hidden">
+        <svg viewBox="0 0 1200 120" preserveAspectRatio="none" class="absolute top-0 left-0 w-full h-full">
+            <path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" opacity=".25" class="fill-current text-white"></path>
+            <path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" opacity=".5" class="fill-current text-white"></path>
+            <path d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z" class="fill-current text-white"></path>
+        </svg>
+    </div>
+    <section id="services" class="py-16 bg-white relative">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="text-center mb-16">
                 <h2 class="text-3xl font-bold text-gray-900 mb-4">Our Services</h2>
             <div class="grid md:grid-cols-2 gap-8">
                 <!-- AI Software Development -->
+                <div class="bg-white rounded-xl p-8 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-100 hover:border-blue-100 hover:scale-[1.02]">
                     <div class="flex items-center mb-6">
                         <div class="bg-blue-100 p-3 rounded-full mr-4">
                             <i class="fas fa-code text-blue-600 text-xl"></i>
             <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                 <!-- Tech Card 1 -->
+                <div class="bg-white/80 backdrop-blur-lg rounded-xl p-6 shadow-lg tech-card transition-all duration-300 hover:scale-[1.02] border border-white/30 hover:border-white/50">
                     <div class="flex items-center mb-4">
                         <div class="bg-blue-100 p-2 rounded-lg mr-4">
                             <i class="fas fa-brain text-blue-600 text-2xl"></i>
     </section>
     <!-- Portfolio -->
+    <section id="portfolio" class="py-16 bg-white overflow-hidden">
+        <div class="parallax-bg absolute inset-0 bg-[url('https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80')] bg-cover bg-center opacity-5"></div>
+        <style>
+            .parallax-bg {
+                background-attachment: fixed;
+                background-position: center;
+                background-repeat: no-repeat;
+                background-size: cover;
+                transform: translateZ(0);
+            }
+        </style>
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="text-center mb-16">
                 <h2 class="text-3xl font-bold text-gray-900 mb-4">Our Portfolio</h2>
                         <p class="opacity-90 mb-6">Explore how we've helped clients achieve measurable results with AI solutions tailored to their specific challenges.</p>
                         <a href="#contact" class="inline-flex items-center px-6 py-3 bg-white text-blue-600 font-medium rounded-md shadow-md hover:bg-gray-100 transition duration-300">
                             Request Case Studies
+                            <i class="fas fa-arrow-right ml-2 transition-transform group-hover:translate-x-1"></i>
                         </a>
                     </div>
                     <div class="md:w-1/3 flex justify-center">
             <div class="grid md:grid-cols-3 gap-8">
                 <!-- Testimonial 1 -->
+                <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
                     <div class="flex items-center mb-4">
                         <div class="text-yellow-400 mr-2">
                             <i class="fas fa-star"></i>
                 </div>
                 <div>
+                    <form id="contactForm" class="bg-white/80 backdrop-blur-sm p-8 rounded-xl shadow-lg border border-gray-100">
                         <div class="mb-6">
                             <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
                             <input type="text" id="name" name="name" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" required>
     </section>
     <!-- Footer -->
+    <footer class="bg-gray-900 text-white pt-16 pb-8 relative overflow-hidden">
+        <div class="absolute inset-0 opacity-10">
+            <div class="absolute top-0 left-0 w-full h-full bg-[url('https://grainy-gradients.vercel.app/noise.svg')]"></div>
+        </div>
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="grid md:grid-cols-4 gap-8">
                 <div class="md:col-span-2">
             });
         });
+        // Scroll progress indicator
+        window.addEventListener('scroll', function() {
+            const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
+            const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+            const scrolled = (winScroll / height) * 100;
+            document.getElementById('progressBar').style.width = scrolled + '%';
+        });
         // Animate elements when they come into view
         const animateOnScroll = () => {
             const elements = document.querySelectorAll('.animated-bar');