edits

index.html

@@ -19,6 +19,29 @@
         .grid .item {
             padding: 5px 0; 
         }
+
+        .carousel-image {
+            transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
+            transform: scale(0.8); 
+            opacity: 0.5; 
+        }
+
+        .carousel-image.active {
+            transform: scale(1.2); 
+            opacity: 1; 
+            z-index: 10; 
+        }
+
+        .carousel-container {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            overflow: hidden;
+            position: relative;
+            width: 100%;
+        }
+
+
     .theme-checkbox {
     --toggle-size: 16px;
     -webkit-appearance: none;
@@ -474,30 +497,30 @@ <h1 class="font-bold text-[#2563EB]">Appy</h1>
                 <!-- Content -->
                 <div class="flex justify-center items-center text-center">
                     <div>
-                        <h2 class="font-bold text-2xl sm:text-3xl lg:text-4xl uppercase">Checkout Our App Interface Look</h2>
-                        <p class="mt-4 mx-auto sm:w-3/4  text-base sm:text-lg lg:text-xl relative lg:w-3/5 ">
+                        <h2 class="font-bold text-2xl sm:text-3xl lg:text-4xl uppercase dark:text-white">Checkout Our App Interface Look</h2>
+                        <p class="mt-4 mx-auto sm:w-3/4  text-base sm:text-lg lg:text-xl relative lg:w-3/5 dark:text-white ">
                             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Viverra nunc ante velit vitae. Est tellus vitae, nullam lobortis enim. Faucibus amet etiam tincidunt rhoncus, ullamcorper velit. Ullamcorper risus tempor, ac nunc libero urna, feugiat.
                         </p>
                     </div>
                 </div>
                 <!-- Slider -->
                 <div class="relative flex justify-center items-center mt-8 sm:mt-14">
-                    <button class="absolute left-4 p-3 bg-white text-purple-600 rounded-full shadow-md hover:bg-gray-200 transition-all duration-300 z-20 border border-purple-600">
+                    <button id="prevBtn" class="absolute left-4 p-3 bg-white text-purple-600 rounded-full shadow-md hover:bg-gray-200 transition-all duration-300 z-20 border border-purple-600">
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6">
                             <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
                         </svg>
                     </button>
-                    
+
                     <div class="relative flex justify-center items-center ">
-                        <div class="flex flex-nowrap">
-                            <img src="./images/000.png" alt="Phone Mockup 1" class="w-40 h-80 transform scale-90 transition-opacity duration-300 ease-in-out mx-2 relative" style="left:10%">
-                            <img src="./images/003.png" alt="Phone Mockup 2" class="w-40 h-80 transform scale-95 shadow-lg transition-opacity duration-300 ease-in-out mx-2">
-                            <img src="./images/iPhoneX.png" alt="Phone Mockup 3" class="w-40 h-80 z-10 transform scale-110 shadow-2xl mx-2">
-                            <img src="./images/001.png" alt="Phone Mockup 4" class="w-40 h-80 transform scale-95 shadow-lg transition-opacity duration-300 ease-in-out z-20 mx-2">
-                            <img src="./images/004.png" alt="Phone Mockup 5" class="w-40 h-80 transform scale-90 transition-opacity duration-300 ease-in-out mx-2 relative" style="right: 10%;">
+                        <div id="carousel" class="flex flex-nowrap transition-transform duration-500 ease-in-out">
+                            <img src="./images/000.png" alt="Phone Mockup 1" class="carousel-image w-40 h-80 mx-2">
+                            <img src="./images/003.png" alt="Phone Mockup 2" class="carousel-image w-40 h-80 mx-2">
+                            <img src="./images/iPhoneX.png" alt="Phone Mockup 3" class="carousel-image w-40 h-80 mx-2">
+                            <img src="./images/001.png" alt="Phone Mockup 4" class="carousel-image w-40 h-80 mx-2">
+                            <img src="./images/004.png" alt="Phone Mockup 5" class="carousel-image w-40 h-80 mx-2">
                         </div>
                     </div>
-
+                
                     <!-- Slider indicators -->
                     <div class="absolute z-30 flex space-x-3 rtl:space-x-reverse bottom-4 sm:bottom-10 left-1/2 transform -translate-x-1/2" style="bottom: -60px;">
                         <button type="button" class="w-3 h-3 rounded-full bg-purple-600" aria-current="true" aria-label="Slide 1" data-carousel-slide-to="0"></button>
@@ -506,13 +529,16 @@ <h2 class="font-bold text-2xl sm:text-3xl lg:text-4xl uppercase">Checkout Our Ap
                         <button type="button" class="w-3 h-3 rounded-full bg-purple-600" aria-current="false" aria-label="Slide 4" data-carousel-slide-to="3"></button>
                         <button type="button" class="w-3 h-3 rounded-full bg-purple-600" aria-current="false" aria-label="Slide 5" data-carousel-slide-to="4"></button>
                     </div>
-
-                    <button class="absolute right-4 p-3 bg-purple-600 text-white rounded-full shadow-md hover:bg-gray-200 transition-all duration-300 z-20">
+                
+                    <button id="nextBtn" class="absolute right-4 p-3 bg-purple-600 text-white rounded-full shadow-md hover:bg-gray-200 transition-all duration-300 z-20">
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6">
                             <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
                         </svg>
                     </button>
                 </div>
+
+
+
             </div>
         <!-- End Second Slider Part -->