update

index.html

@@ -7,6 +7,8 @@
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <!-- Bootstrap -->
       <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+      <!-- AOS CSS -->
+<link href="https://unpkg.com/aos@2.3.4/dist/aos.css" rel="stylesheet">
       <!-- Custom CSS -->
       <link rel="stylesheet" href="style.css">
       <link rel="stylesheet" href="responsive.css">
@@ -26,10 +28,10 @@
          </div>
          <!-- Right Vertical Text -->
          <div class="vertical-text">
-            Art Avenue
+         <img src="images/ArtAvenueright.svg" alt="">
          </div>
          <!-- Content -->
-         <div class="container h-100 d-flex align-items-center justify-content-center text-center">
+         <div class="container h-100 d-flex align-items-center justify-content-center text-center" >
             <div class="content text-white">
                <p class="tagline">PROPOSAL — DIGITAL PROTOTYPING</p>
                <h1 class="main-heading">
@@ -46,29 +48,29 @@
             </div>
          </div>
          <!-- Scroll Button -->
-         <div class="scroll-down" class="cta-section">
+         <a href="#footer" class="scroll-down">
             <img src="images/heroarrow.svg" alt="">
-         </div>
+         </a>
       </section>
       <section class="about-section ">
          <div class="container">
             <div class="row align-items-start">
                <!-- LEFT SIDE -->
                <div class="col-lg-6">
-                  <div class="heading-main">
+                  <div class="heading-main" data-aos="fade-right">
                      <h6>ABOUT US</h6>
                      <h2>
                         Introducing Advanced Digital Product 
                         Manipulation & Prototyping
                      </h2>
                   </div>
-                  <div class="image-wrap">
+                  <div class="image-wrap" data-aos="fade-up">
                      <img src="images/Advanced Digital.png" class="img-fluid img-top" alt="">
                   </div>
                </div>
                <!-- RIGHT SIDE -->
                <div class="col-lg-6">
-                  <div class="experience-box">
+                  <div class="experience-box" data-aos="fade-left">
                      <h1>2K+</h1>
                      <span>YEARS OF <br> EXPERIENCE</span>
                   </div>
@@ -91,10 +93,10 @@
       <section class="compare-section">
          <div class="container">
             <div class="top-content">
-               <div class="heading-main">
+               <div class="heading-main" data-aos="fade-up">
                   <h2>Design Without Limits.<br>Visualize Before You Manufacture.</h2>
                </div>
-               <div class="right-text">
+               <div class="right-text" data-aos="fade-down">
                   <p>
                      A premium digital prototyping solution crafted for Art Avenue,
                      enabling exploration, testing, and scaling of product designs
@@ -104,41 +106,57 @@
             </div>
             <div class="wrapper">
                <div class="before">
-                  <img src="images/beforeslide.png">
-                  <span class="label">BEFORE</span>
+                 <img src="images/beforeslide.png">
+                 <span class="label">BEFORE</span>
                </div>
+             
                <div class="after">
-                  <img src="images/afterslide.png">
-                  <span class="label">AFTER</span>
+                 <img src="images/afterslide.png">
+                 <span class="label">AFTER</span>
                </div>
+             
                <div class="scroller">
-                  <div class="circle"></div>
+                 <div class="circle"></div>
                </div>
-            </div>
+             </div>
          </div>
       </section>
+  
       <script>
-         let isDown = false;
          const wrapper = document.querySelector(".wrapper");
          const after = document.querySelector(".after");
          const scroller = document.querySelector(".scroller");
          
+         let isDown = false;
+         let targetX = wrapper.offsetWidth / 2;
+         let currentX = targetX;
+         
+         // mouse events
          scroller.addEventListener("mousedown", () => isDown = true);
          window.addEventListener("mouseup", () => isDown = false);
          
          window.addEventListener("mousemove", (e) => {
-         if (!isDown) return;
+           if (!isDown) return;
          
-         let rect = wrapper.getBoundingClientRect();
-         let x = e.clientX - rect.left;
+           const rect = wrapper.getBoundingClientRect();
+           targetX = e.clientX - rect.left;
          
-         x = Math.max(0, Math.min(x, rect.width));
-         
-         after.style.width = x + "px";
-         scroller.style.left = x + "px";
+           targetX = Math.max(0, Math.min(targetX, rect.width));
          });
-      </script>
-      <section class="challenge-section">
+         
+         // smooth animation loop
+         function animate() {
+           currentX += (targetX - currentX) * 0.15; // 🔥 smoothing factor
+         
+           after.style.width = currentX + "px";
+           scroller.style.left = currentX + "px";
+         
+           requestAnimationFrame(animate);
+         }
+         
+         animate();
+         </script>
+      <section class="challenge-section" data-aos="fade-up" data-aos-delay="100">
          <div class="container text-center">
             <!-- Heading -->
             <div class="heading-main mb-5">
@@ -153,7 +171,7 @@
                <div class="row g-0">
                   <!-- Card 1 -->
                   <div class="col-lg-3 col-md-6">
-                     <div class="challenge-card">
+                     <div class="challenge-card" data-aos="fade-up" data-aos-delay="200">
                         <h5>Multiple Physical Samples</h5>
                         <img src="images/Multiple.png" alt="">
                         <p>
@@ -163,7 +181,7 @@
                   </div>
                   <!-- Card 2 -->
                   <div class="col-lg-3 col-md-6">
-                     <div class="challenge-card">
+                     <div class="challenge-card" data-aos="fade-up" data-aos-delay="300">
                         <h5>Slow Decision-Making</h5>
                         <img src="images/Slow.png" alt="">
                         <p>
@@ -173,7 +191,7 @@
                   </div>
                   <!-- Card 3 -->
                   <div class="col-lg-3 col-md-6">
-                     <div class="challenge-card">
+                     <div class="challenge-card" data-aos="fade-up" data-aos-delay="400">
                         <h5>High Production Costs</h5>
                         <img src="images/High.png" alt="">
                         <p>
@@ -183,7 +201,7 @@
                   </div>
                   <!-- Card 4 -->
                   <div class="col-lg-3 col-md-6">
-                     <div class="challenge-card">
+                     <div class="challenge-card" data-aos="fade-up" data-aos-delay="400">
                         <h5>Limited Experimentation</h5>
                         <img src="images/Limited.png" alt="">
                         <p>
@@ -205,7 +223,7 @@
             <div class="row g-4">
                <!-- LEFT: OLD WAY -->
                <div class="col-lg-6">
-                  <div class="approach-card old-way text-start">
+                  <div class="approach-card old-way text-start" data-aos="fade-right">
                      <h6 class="label red">TRADITIONAL PROTOTYPING</h6>
                      <h2 class="title">The Old Way</h2>
                      <div class="steps-grid">
@@ -219,7 +237,7 @@
                </div>
                <!-- RIGHT: NEW WAY -->
                <div class="col-lg-6">
-                  <div class="approach-card new-way text-start">
+                  <div class="approach-card new-way text-start" data-aos="fade-left">
                      <h6 class="label gold">OUR APPROACH</h6>
                      <h2 class="title">The New Way</h2>
                      <div class="steps-grid">
@@ -237,44 +255,65 @@
       <section class="evolution-section">
          <div class="container">
             <div class="evolutionwrap">
+      
                <!-- TOP HEADINGS -->
-               <div class="evolution-header">
-                  <div class="phase phase-left">
+               <div class="evolution-header" data-aos="fade-up">
+                  <div class="phase phase-left" data-aos="fade-right" data-aos-delay="100">
                      <h3>Phase 1 : Raw Sketch</h3>
                      <p>IDEA & CONCEPTUALIZATION</p>
                   </div>
-                  <div class="phase phase-right">
+      
+                  <div class="phase phase-right" data-aos="fade-left" data-aos-delay="200">
                      <h3>Phase 2 : Photorealistic Prototype</h3>
                      <p>DIGITAL VISUALIZATION & REFINEMENT</p>
                   </div>
                </div>
+      
                <!-- MAIN IMAGE BOX -->
-               <div class="evolution-box">
-                  <!-- LEFT LABEL -->
-                  <div class="tag tag-left">Ideation</div>
-                  <!-- RIGHT LABEL -->
-                  <div class="tag tag-right">H-FI Visualization</div>
-                  <!-- CENTER IMAGE -->
-                  <img src="images/Sketch.png" alt="Evolution Design" class="evolution-image">
+               <div class="evolution-box" data-aos="zoom-in" data-aos-delay="300">
+      
+                  <div class="tag tag-left" data-aos="fade-right" data-aos-delay="400">
+                     Ideation
+                  </div>
+      
+                  <div class="tag tag-right" data-aos="fade-left" data-aos-delay="400">
+                     H-FI Visualization
+                  </div>
+      
+                  <img src="images/Sketch.png"
+                       alt="Evolution Design"
+                       class="evolution-image"
+                       data-aos="fade-up"
+                       data-aos-delay="500">
+      
                </div>
+      
             </div>
          </div>
       </section>
+      
       <section class="services-section">
          <div class="container text-center">
+      
             <!-- Heading -->
-            <div class="heading-main mb-5">
+            <div class="heading-main mb-5"
+                 data-aos="fade-up">
                <h2>What We Do</h2>
                <p>
                   Comprehensive digital prototyping services tailored to your 
                   product development needs
                </p>
             </div>
+      
             <!-- Grid -->
             <div class="row g-4">
+      
                <!-- 01 -->
                <div class="col-lg-3 col-md-6">
-                  <div class="service-card">
+                  <div class="service-card"
+                       data-aos="flip-up"
+                       data-aos-delay="100"
+                       data-aos-duration="900">
                      <span class="number">01</span>
                      <h5>Client Asset Integration</h5>
                      <p>
@@ -282,9 +321,13 @@
                      </p>
                   </div>
                </div>
+      
                <!-- 02 -->
                <div class="col-lg-3 col-md-6">
-                  <div class="service-card">
+                  <div class="service-card"
+                       data-aos="flip-up"
+                       data-aos-delay="200"
+                       data-aos-duration="900">
                      <span class="number">02</span>
                      <h5>Reference-Based Creation</h5>
                      <p>
@@ -292,15 +335,23 @@
                      </p>
                   </div>
                </div>
+      
                <!-- IMAGE -->
-               <div class="col-lg-3 col-md-6">
+               <div class="col-lg-3 col-md-6"
+                    data-aos="zoom-in"
+                    data-aos-delay="150"
+                    data-aos-duration="900">
                   <div class="image-card">
                      <img src="images/Whatwethird.png" alt="">
                   </div>
                </div>
+      
                <!-- 03 -->
                <div class="col-lg-3 col-md-6">
-                  <div class="service-card">
+                  <div class="service-card"
+                       data-aos="flip-up"
+                       data-aos-delay="300"
+                       data-aos-duration="900">
                      <span class="number">03</span>
                      <h5>Material & Texture Swapping</h5>
                      <p>
@@ -308,9 +359,13 @@
                      </p>
                   </div>
                </div>
+      
                <!-- 04 -->
                <div class="col-lg-3 col-md-6">
-                  <div class="service-card">
+                  <div class="service-card"
+                       data-aos="flip-up"
+                       data-aos-delay="400"
+                       data-aos-duration="900">
                      <span class="number">04</span>
                      <h5>Seamless Pattern Creation</h5>
                      <p>
@@ -318,15 +373,23 @@
                      </p>
                   </div>
                </div>
+      
                <!-- IMAGE -->
-               <div class="col-lg-3 col-md-6">
+               <div class="col-lg-3 col-md-6"
+                    data-aos="zoom-in"
+                    data-aos-delay="250"
+                    data-aos-duration="900">
                   <div class="image-card">
                      <img src="images/Whatwefi ve.png" alt="">
                   </div>
                </div>
+      
                <!-- 05 -->
                <div class="col-lg-3 col-md-6">
-                  <div class="service-card">
+                  <div class="service-card"
+                       data-aos="flip-up"
+                       data-aos-delay="500"
+                       data-aos-duration="900">
                      <span class="number">05</span>
                      <h5>Cross-Product Scaling</h5>
                      <p>
@@ -334,9 +397,13 @@
                      </p>
                   </div>
                </div>
+      
                <!-- 06 -->
                <div class="col-lg-3 col-md-6">
-                  <div class="service-card">
+                  <div class="service-card"
+                       data-aos="flip-up"
+                       data-aos-delay="600"
+                       data-aos-duration="900">
                      <span class="number">06</span>
                      <h5>Contextual Staging</h5>
                      <p>
@@ -344,9 +411,13 @@
                      </p>
                   </div>
                </div>
+      
             </div>
          </div>
       </section>
+
+
+
       <!-- VISUAL -->
       <section class="visualprototyping">
          <div class="container">
@@ -382,11 +453,11 @@
                   <div class="compare-card">
                      <div class="wrapper">
                         <div class="before">
-                           <img src="images/Visualafterright.png">
+                           <img src="images/Visualbeforeright.png">
                            <span class="label">BEFORE</span>
                         </div>
                         <div class="after">
-                           <img src="images/Visualbeforeright.png">
+                           <img src="images/Visualafterright.png">
                            <span class="label">AFTER</span>
                         </div>
                         <div class="scroller">
@@ -402,60 +473,105 @@
       <script>
          document.querySelectorAll(".wrapper").forEach(wrapper => {
          
-         let isDown = false;
-         const after = wrapper.querySelector(".after");
-         const scroller = wrapper.querySelector(".scroller");
+           const after = wrapper.querySelector(".after");
+           const scroller = wrapper.querySelector(".scroller");
          
-         scroller.addEventListener("mousedown", () => isDown = true);
-         window.addEventListener("mouseup", () => isDown = false);
+           let isDown = false;
          
-         window.addEventListener("mousemove", (e) => {
-         if (!isDown) return;
+           let targetX = wrapper.offsetWidth / 2;
+           let currentX = targetX;
          
-         let rect = wrapper.getBoundingClientRect();
-         let x = e.clientX - rect.left;
+           // start drag
+           scroller.addEventListener("mousedown", () => isDown = true);
          
-         x = Math.max(0, Math.min(x, rect.width));
+           // stop drag
+           window.addEventListener("mouseup", () => isDown = false);
          
-         after.style.width = x + "px";
-         scroller.style.left = x + "px";
+           // track mouse
+           window.addEventListener("mousemove", (e) => {
+             if (!isDown) return;
+         
+             const rect = wrapper.getBoundingClientRect();
+             targetX = e.clientX - rect.left;
+         
+             targetX = Math.max(0, Math.min(targetX, rect.width));
+           });
+         
+           // 🔥 smooth animation loop per slider
+           function animate() {
+             currentX += (targetX - currentX) * 0.15; // smoothing factor
+         
+             after.style.width = currentX + "px";
+             scroller.style.left = currentX + "px";
+         
+             requestAnimationFrame(animate);
+           }
+         
+           animate();
          });
-         
-         });
-      </script>
-      <section class="material-section">
-         <div class="container">
-            <div class="optionmult">
-               <!-- TITLE -->
-               <h3 class="material-title">Multiple Material Options</h3>
-               <!-- TOP IMAGES -->
-               <div class="material-grid top-grid">
-                  <div class="material-item"><img src="images/Material1.png"></div>
-                  <div class="material-item"><img src="images/Material2.png"></div>
-                  <div class="material-item"><img src="images/Material3.png"></div>
-                  <div class="material-item"><img src="images/Material4.png"></div>
-               </div>
+         </script>
+<section class="material-section">
+   <div class="container">
+
+      <div class="optionmult">
+
+         <!-- TITLE -->
+         <h3 class="material-title"
+             data-aos="fade-up"
+             data-aos-duration="900">
+            Multiple Material Options
+         </h3>
+
+         <!-- TOP IMAGES -->
+         <div class="material-grid top-grid">
+
+            <div class="material-item"
+                 data-aos="zoom-in"
+                 data-aos-delay="100">
+               <img src="images/Material1.png">
             </div>
-            <!-- CENTER VIDEO -->
-            <div class="material-video">
-               <img src="/images/Material5.png" class="video-thumb">
-               <div class="play-btn">
-                  ▶
-               </div>
+
+            <div class="material-item"
+                 data-aos="zoom-in"
+                 data-aos-delay="200">
+               <img src="images/Material2.png">
             </div>
-            <!-- BOTTOM IMAGES -->
-            <div class="material-grid bottom-grid">
-               <!--   
-                  <button class="nav-btn left">←</button> -->
-               <div class="material-item"><img src="images/Material9.png"></div>
-               <div class="material-item"><img src="images/Material7.png"></div>
-               <div class="material-item"><img src="images/Material8.png"></div>
-               <div class="material-item"><img src="images/Material9.png"></div>
-               <!--   
-                  <button class="nav-btn right">→</button> -->
+
+            <div class="material-item"
+                 data-aos="zoom-in"
+                 data-aos-delay="300">
+               <img src="images/Material3.png">
             </div>
+
+            <div class="material-item"
+                 data-aos="zoom-in"
+                 data-aos-delay="400">
+               <img src="images/Material4.png">
+            </div>
+
          </div>
-      </section>
+      </div>
+
+      <!-- CENTER VIDEO -->
+      <div class="material-video"
+           data-aos="fade-up"
+           data-aos-delay="200"
+           data-aos-duration="1000">
+
+         <img src="/images/Material5.png" class="video-thumb">
+
+         <div class="play-btn"
+              data-aos="pulse"
+              data-aos-delay="500">
+            ▶
+         </div>
+
+      </div>
+
+      <!-- BOTTOM IMAGES (if added later they will also animate same way) -->
+
+   </div>
+</section>
       <!-- SECTION 1 : IMPACT -->
       <section class="impact-section">
          <div class="container text-center">
@@ -465,20 +581,20 @@
                   What this means for your bottom line and  product <br> development efficiency
                </p>
             </div>
-            <div class="impact-grid">
-               <div class="impact-card">
+            <div class="impact-grid" >
+               <div class="impact-card" data-aos="zoom-in" data-aos-delay="100">
                   <h3>50–70%</h3>
                   <p>Reduction in prototyping cost</p>
                </div>
-               <div class="impact-card">
+               <div class="impact-card" data-aos="zoom-in" data-aos-delay="100">
                   <h3>3x</h3>
                   <p>Faster product approval cycles</p>
                </div>
-               <div class="impact-card">
+               <div class="impact-card" data-aos="zoom-in" data-aos-delay="100">
                   <h3>10x</h3>
                   <p>Increased design experimentation</p>
                </div>
-               <div class="impact-card">
+               <div class="impact-card" data-aos="zoom-in" data-aos-delay="100">
                   <h3>100%</h3>
                   <p>Better product-market fit</p>
                </div>
@@ -490,14 +606,14 @@
          <div class="container">
             <div class="row align-items-center">
                <!-- LEFT IMAGES -->
-               <div class="col-lg-6">
-                  <div class="why-images">
+               <div class="col-lg-6" >
+                  <div class="why-images" data-aos="fade-right">
                      <img src="images/Choose.png" class="img-small">
                   </div>
                </div>
                <!-- RIGHT CONTENT -->
                <div class="col-lg-6">
-                  <div class="why-content">
+                  <div class="why-content" data-aos="fade-left">
                      <h2>Why Choose Us</h2>
                      <p class="why-subtext">
                         What this means for your bottom line and product development efficiency
@@ -530,8 +646,17 @@
             </div>
          </div>
       </section>
-      <footer>
+      <footer id="footer">
          <p>Designed By AchievAR.ai</p>
       </footer>
+      <!-- AOS JS -->
+<script src="https://unpkg.com/aos@2.3.4/dist/aos.js"></script>
+<script>
+  AOS.init({
+    duration: 1000,
+    once: true,
+    offset: 100
+  });
+</script>
    </body>
 </html>

style.css

@@ -71,9 +71,9 @@
     }
     .vertical-text {
     position: absolute;
-    right: 8%;
-    top: 70%;
-    transform: rotate(90deg) translateY(-50%);
+    right: 5%;
+    top: 22%;
+    /* transform: rotate(90deg) translateY(-50%); */
     transform-origin: right center;
     z-index: 3;
     font-weight: bold;
@@ -124,7 +124,7 @@
     height: 100%;
     }
     .about-section {
-    padding: 70px 0px;
+    padding: 40px 0px;
     }
     .heading-main h6 {
     color: rgb(196, 139, 43);
@@ -179,7 +179,7 @@
     color: rgb(0, 0, 0);
     }
     .challenge-section {
-    padding: 80px 0px;
+    padding: 50px 0px;
     }
     .heading-main p {
     max-width: 700px;
@@ -277,7 +277,7 @@
     }
     .services-section {
     background: rgb(245, 241, 237);
-    padding: 70px 0px;
+    padding: 50px 0px;
     }
     .heading-main h2 {
     font-size: 37px;
@@ -324,7 +324,7 @@
     border-radius: 18px;
     }
     .evolution-section {
-    padding: 80px 0px;
+    padding: 50px 0px;
     }
     .evolution-header {
     display: flex;
@@ -358,6 +358,7 @@
     border-radius: 30px;
     font-size: 13px;
     box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 15px;
+    z-index: 9999;
     }
     .tag-left {
     left: 120px;
@@ -378,7 +379,7 @@
     letter-spacing: 2px;
     }
     .material-section {
-    padding: 80px 0px;
+    padding: 50px 0px;
     }
     .material-title {
     text-align: center;
@@ -452,7 +453,7 @@
     }
     .impact-section {
     background: #F5F1ED;
-    padding: 80px 0px;
+    padding: 50px 0px;
     }
     .impact-title {
     font-size: 28px;
@@ -484,7 +485,7 @@
     color: #3A3A3A;
     }
     .why-section {
-    padding: 80px 0px;
+    padding: 60px 0px 0;
     }
     .why-images {
     }
@@ -589,7 +590,7 @@
     padding: 20px 20px;
     }
     .compare-section {
-    padding: 60px 80px;
+    padding: 50px 0px;
     }
     /* TOP TEXT */
     .top-content {
@@ -612,12 +613,12 @@
     .wrapper {
     position: relative;
     width: 100%;
-    height: 450px;
+    height: 506px;
     overflow: hidden;
     border-radius: 6px;
     }
     .wrapper img {
-    width: 100%;
+    /* width: 100%; */
     height: 100%;
     object-fit: cover;
     }
@@ -675,8 +676,11 @@
     font-size: 18px;
     }
     .visualprototyping {
-    padding: 70px 0;
+    padding: 50px 0 0;
     }
+.compare-card .wrapper {
+    height: 340px;
+}
     .compare-card {
     border: 1px solid #EFEFEF;
     box-shadow: 15px 20px 45px rgba(233, 233, 233, 0.43);
@@ -690,4 +694,17 @@
     font-size: 20px;
     font-weight: 500;
     color: black;
+    }
+    .material-item {
+        transition: all 0.3s ease;
+    }
+    
+    .material-item:hover {
+        transform: translateY(-5px) !important;
+    }
+    .impact-card{
+        transition: all 0.3s ease;
+    }
+    .impact-card:hover {
+        transform: translateY(-5px) !important;
     }