enhance the home page UI

src/app/components/Footer/Footer.tsx

@@ -196,7 +196,7 @@ const Footer: React.FC = () => {
           className={styles.footerBottom}
         >
           <Paragraph className={styles.footerBottomText}>
-            Ready to transform your business? Let's discuss your next project.
+            Ready to transform your business? Let&apos;s discuss your next project.
           </Paragraph>
           
           <div className={styles.socialLinks}>

src/app/components/ProjectsShowcase/ProjectsShowcaseSelector.module.css

@@ -1,44 +1,73 @@
 /* File: src/components/home/ProjectsShowcase.module.css */
 
 .projectsSection {
-  padding: 100px 0;
+  padding: 120px 0;
-  background-color: #fff;
+  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
   position: relative;
   overflow: hidden;
 }
 
+.projectsSection::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="hexagons" width="50" height="43.4" patternUnits="userSpaceOnUse"><polygon points="25,2 47,13.4 47,36.6 25,48 3,36.6 3,13.4" fill="none" stroke="%23f1f5f9" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23hexagons)"/></svg>');
+  opacity: 0.4;
+}
+
 .container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 16px;
   position: relative;
+  z-index: 1;
 }
 
 .sectionHeader {
   text-align: center;
-  margin-bottom: 60px;
+  margin-bottom: 80px;
 }
 
 .sectionTitle {
-  font-size: 2.5rem !important;
+  font-size: 3rem !important;
-  font-weight: 700 !important;
+  font-weight: 800 !important;
-  margin-bottom: 16px !important;
+  margin-bottom: 20px !important;
-  background: linear-gradient(135deg, #7400b8 0%, #5e60ce 100%);
+  background: linear-gradient(135deg, #7400b8 0%, #5e60ce 50%, #4ea8de 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
+  position: relative;
+  letter-spacing: -0.02em;
+}
+
+.sectionTitle::after {
+  content: "";
+  position: absolute;
+  bottom: -12px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 80px;
+  height: 5px;
+  background: linear-gradient(90deg, #7400b8, #6930c3);
+  border-radius: 3px;
+  box-shadow: 0 2px 8px rgba(116, 0, 184, 0.3);
 }
 
 .sectionSubtitle {
-  font-size: 1.1rem;
+  font-size: 1.2rem;
-  color: #666;
+  color: #64748b;
-  max-width: 600px;
+  max-width: 700px;
   margin: 0 auto;
+  line-height: 1.7;
+  font-weight: 400;
 }
 
 .showcaseContainer {
   position: relative;
-  padding: 20px 0;
+  padding: 40px 0;
 }
 
 .projectsGrid {
@@ -48,34 +77,53 @@
 
 .projectCard {
   height: fit-content;
-  border-radius: 16px;
+  border-radius: 20px;
   overflow: hidden;
-  transition: all 0.3s ease;
+  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
   border: none;
   cursor: pointer;
+  background: white;
+  position: relative;
+}
+
+.projectCard::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg, rgba(116, 0, 184, 0.05) 0%, rgba(94, 96, 206, 0.05) 100%);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  z-index: 1;
+}
+
+.projectCard:hover::before {
+  opacity: 1;
 }
 
 .projectCard:hover {
-  transform: translateY(-8px);
+  transform: translateY(-12px) scale(1.02);
-  box-shadow: 0 12px 24px rgba(116, 0, 184, 0.15);
+  box-shadow: 0 24px 48px rgba(116, 0, 184, 0.15);
 }
 
 .projectImageContainer {
   position: relative;
   overflow: hidden;
-  height: 180px;
+  height: 220px;
 }
 
 .projectImage {
   width: 100%;
   height: 100%;
   object-fit: cover;
-  transition: transform 0.5s ease;
+  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .projectCard:hover .projectImage {
-  transform: scale(1.05);
+  transform: scale(1.08);
 }
 
 .projectOverlay {
@@ -88,7 +136,9 @@
   justify-content: center;
   align-items: center;
   opacity: 0;
-  transition: opacity 0.3s ease;
+  transition: all 0.4s ease;
+  background: rgba(116, 0, 184, 0.9);
+  backdrop-filter: blur(4px);
 }
 
 .projectCard:hover .projectOverlay {
@@ -99,23 +149,37 @@
   background: #fff;
   color: #7400b8;
   border: none;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+  border-radius: 12px;
+  padding: 12px 24px;
+  font-weight: 600;
+  transition: all 0.3s ease;
 }
 
 .viewButton:hover {
   background: #7400b8;
   color: #fff;
+  transform: scale(1.05);
+  box-shadow: 0 6px 20px rgba(116, 0, 184, 0.3);
 }
 
 .categoryTag {
-  margin-bottom: 12px;
+  margin-bottom: 16px;
+  border-radius: 20px;
+  font-weight: 600;
+  padding: 6px 16px;
+  font-size: 0.85rem;
+  background: linear-gradient(135deg, #7400b8 0%, #6930c3 100%);
+  color: white;
+  border: none;
+  box-shadow: 0 2px 8px rgba(116, 0, 184, 0.2);
 }
 
 .technologiesList {
   display: flex;
   flex-wrap: wrap;
-  gap: 4px;
+  gap: 6px;
-  margin-top: 12px;
+  margin-top: 16px;
 }
 
 .techTag {
@@ -123,67 +187,123 @@
   background: #f8fafc;
   color: #475569;
   border: 1px solid #e2e8f0;
-  font-size: 0.75rem;
+  font-size: 0.8rem;
-  padding: 2px 6px;
+  padding: 4px 10px;
-  border-radius: 8px;
+  border-radius: 12px;
+  font-weight: 500;
+  transition: all 0.3s ease;
+}
+
+.techTag:hover {
+  background: #7400b8;
+  color: white;
+  border-color: #7400b8;
+  transform: translateY(-1px);
 }
 
 .featuredBadge {
   z-index: 2;
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
+  color: white;
+  border: none;
+  border-radius: 20px;
+  padding: 6px 12px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);
 }
 
 .navigationControls {
   display: flex;
   justify-content: center;
   align-items: center;
-  gap: 16px;
+  gap: 20px;
-  margin-top: 40px;
+  margin-top: 60px;
 }
 
 .navButton {
   display: flex;
   justify-content: center;
   align-items: center;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+  background: white;
+  border: 1px solid #e2e8f0;
+}
+
+.navButton:hover {
+  transform: scale(1.1);
+  box-shadow: 0 6px 20px rgba(116, 0, 184, 0.2);
+  border-color: #7400b8;
+  color: #7400b8;
 }
 
 .pageIndicator {
-  font-size: 0.9rem;
+  font-size: 1rem;
-  color: #666;
+  color: #64748b;
+  font-weight: 500;
+  padding: 8px 16px;
+  background: #f8fafc;
+  border-radius: 20px;
+  border: 1px solid #e2e8f0;
 }
 
 .viewAllContainer {
   display: flex;
   justify-content: center;
-  margin-top: 48px;
+  margin-top: 60px;
 }
 
 .viewAllButton {
-  height: 48px;
+  height: 56px;
-  padding: 0 32px;
+  padding: 0 40px;
-  border-radius: 24px;
+  border-radius: 28px;
-  font-weight: 500;
+  font-weight: 600;
+  font-size: 1.1rem;
   background: linear-gradient(135deg, #7400b8 0%, #6930c3 100%);
   border: none;
-  box-shadow: 0 4px 12px rgba(116, 0, 184, 0.15);
+  box-shadow: 0 8px 24px rgba(116, 0, 184, 0.2);
-  transition: all 0.3s ease;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+}
+
+.viewAllButton::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+  transition: left 0.6s ease;
+}
+
+.viewAllButton:hover::before {
+  left: 100%;
 }
 
 .viewAllButton:hover {
-  transform: translateY(-2px);
+  transform: translateY(-3px);
-  box-shadow: 0 6px 16px rgba(116, 0, 184, 0.2);
+  box-shadow: 0 12px 32px rgba(116, 0, 184, 0.3);
 }
 
 /* Modal Styles */
 .projectModal {
-  border-radius: 16px;
+  border-radius: 20px;
   overflow: hidden;
 }
 
 .projectModal :global(.ant-modal-content) {
-  border-radius: 16px;
+  border-radius: 20px;
   overflow: hidden;
-  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.3);
 }
 
 .projectModal :global(.ant-modal-header) {
@@ -195,23 +315,24 @@
 }
 
 .closeIcon {
-  font-size: 18px;
+  font-size: 20px;
-  color: #666;
+  color: #64748b;
-  transition: color 0.3s ease;
+  transition: all 0.3s ease;
 }
 
 .closeIcon:hover {
-  color: #333;
+  color: #7400b8;
+  transform: scale(1.1);
 }
 
 .modalContent {
   background: #fff;
-  border-radius: 16px;
+  border-radius: 20px;
   overflow: hidden;
 }
 
 .modalHeader {
-  padding: 32px 32px 24px;
+  padding: 40px 40px 30px;
   background: linear-gradient(135deg, #7400b8 0%, #6930c3 100%);
   color: white;
   position: relative;
@@ -225,7 +346,7 @@
   right: 0;
   bottom: 0;
   background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
-  opacity: 0.3;
+  opacity: 0.4;
 }
 
 .modalTitleSection {
@@ -235,41 +356,44 @@
 
 .modalTitle {
   color: white !important;
-  font-size: 2.2rem !important;
+  font-size: 2.5rem !important;
-  font-weight: 700 !important;
+  font-weight: 800 !important;
-  margin-bottom: 12px !important;
+  margin-bottom: 16px !important;
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  letter-spacing: -0.02em;
 }
 
 .modalCategory {
   background: rgba(255, 255, 255, 0.2) !important;
   border: 1px solid rgba(255, 255, 255, 0.3) !important;
   color: white !important;
-  font-weight: 500;
+  font-weight: 600;
-  padding: 4px 12px;
+  padding: 6px 16px;
   border-radius: 20px;
+  backdrop-filter: blur(10px);
 }
 
 .modalActions {
   position: absolute;
-  top: 32px;
+  top: 40px;
-  right: 32px;
+  right: 40px;
   display: flex;
-  gap: 12px;
+  gap: 16px;
   z-index: 1;
 }
 
 .actionButton {
-  height: 40px;
+  height: 44px;
-  border-radius: 20px;
+  border-radius: 22px;
-  font-weight: 500;
+  font-weight: 600;
   transition: all 0.3s ease;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
+  padding: 0 24px;
 }
 
 .actionButton:hover {
   transform: translateY(-2px);
-  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
 }
 
 .modalBody {
@@ -287,7 +411,7 @@
 
 .carouselItem {
   position: relative;
-  height: 400px;
+  height: 450px;
   overflow: hidden;
 }
 
@@ -295,35 +419,37 @@
   width: 100%;
   height: 100%;
   object-fit: cover;
-  transition: transform 0.3s ease;
+  transition: transform 0.4s ease;
 }
 
 .carouselItem:hover .modalImage {
-  transform: scale(1.02);
+  transform: scale(1.03);
 }
 
 .carouselDots {
-  bottom: 20px;
+  bottom: 24px;
 }
 
 .carouselDots :global(.ant-carousel .slick-dots li button) {
-  background: rgba(255, 255, 255, 0.5);
+  background: rgba(255, 255, 255, 0.6);
   border-radius: 50%;
-  width: 8px;
+  width: 10px;
-  height: 8px;
+  height: 10px;
+  transition: all 0.3s ease;
 }
 
 .carouselDots :global(.ant-carousel .slick-dots li.slick-active button) {
   background: #7400b8;
+  transform: scale(1.2);
 }
 
 .projectDetails {
-  padding: 32px;
+  padding: 40px;
   background: white;
 }
 
 .detailSection {
-  margin-bottom: 32px;
+  margin-bottom: 40px;
 }
 
 .detailSection:last-child {
@@ -331,36 +457,37 @@
 }
 
 .sectionTitle {
-  font-size: 1.4rem !important;
+  font-size: 1.6rem !important;
-  font-weight: 600 !important;
+  font-weight: 700 !important;
-  margin-bottom: 16px !important;
+  margin-bottom: 20px !important;
-  color: #333;
+  color: #1e293b;
   position: relative;
 }
 
 .sectionTitle::after {
   content: "";
   position: absolute;
-  bottom: -4px;
+  bottom: -6px;
   left: 0;
-  width: 40px;
+  width: 50px;
-  height: 3px;
+  height: 4px;
   background: linear-gradient(90deg, #7400b8, #6930c3);
   border-radius: 2px;
 }
 
 .projectDescription {
-  font-size: 1.1rem;
+  font-size: 1.15rem;
-  line-height: 1.7;
+  line-height: 1.8;
-  color: #555;
+  color: #475569;
   margin-bottom: 0;
+  font-weight: 400;
 }
 
 .detailGrid {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 32px;
+  gap: 40px;
-  margin-top: 32px;
+  margin-top: 40px;
 }
 
 .featuresList {
@@ -371,11 +498,12 @@
 
 .featureItem {
   position: relative;
-  padding: 12px 0 12px 24px;
+  padding: 16px 0 16px 32px;
-  font-size: 1rem;
+  font-size: 1.05rem;
-  color: #555;
+  color: #475569;
   line-height: 1.6;
-  border-bottom: 1px solid #f0f0f0;
+  border-bottom: 1px solid #f1f5f9;
+  font-weight: 500;
 }
 
 .featureItem:last-child {
@@ -386,62 +514,82 @@
   content: "✓";
   position: absolute;
   left: 0;
-  top: 12px;
+  top: 16px;
   color: #7400b8;
   font-weight: bold;
-  font-size: 14px;
+  font-size: 16px;
+  background: rgba(116, 0, 184, 0.1);
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .projectInfo {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 20px;
 }
 
 .infoItem {
   display: flex;
   align-items: flex-start;
-  gap: 12px;
+  gap: 16px;
-  padding: 16px;
+  padding: 20px;
-  background: #f8f9fa;
+  background: #f8fafc;
-  border-radius: 8px;
+  border-radius: 12px;
   border-left: 4px solid #7400b8;
+  transition: all 0.3s ease;
+}
+
+.infoItem:hover {
+  background: #f1f5f9;
+  transform: translateX(4px);
 }
 
 .infoItem:last-child {
   flex-direction: column;
-  gap: 8px;
+  gap: 12px;
 }
 
 .modalTechnologies {
   display: flex;
   flex-wrap: wrap;
-  gap: 8px;
+  gap: 10px;
-  margin-top: 8px;
+  margin-top: 12px;
 }
 
 .modalTechTag {
   background: rgba(116, 0, 184, 0.1);
   border: 1px solid rgba(116, 0, 184, 0.2);
   color: #7400b8;
-  font-weight: 500;
+  font-weight: 600;
-  border-radius: 16px;
+  border-radius: 20px;
-  padding: 4px 12px;
+  padding: 6px 14px;
-  font-size: 0.85rem;
+  font-size: 0.9rem;
+  transition: all 0.3s ease;
+}
+
+.modalTechTag:hover {
+  background: #7400b8;
+  color: white;
+  transform: translateY(-1px);
 }
 
 /* Responsive Design */
 @media (max-width: 768px) {
   .projectsSection {
-    padding: 60px 0;
+    padding: 80px 0;
   }
 
   .sectionTitle {
-    font-size: 2rem !important;
+    font-size: 2.5rem !important;
   }
 
   .projectImageContainer {
-    height: 160px;
+    height: 180px;
   }
 
   .projectModal {
@@ -449,6 +597,40 @@
     max-width: calc(100vw - 32px);
   }
 
+  .modalHeader {
+    padding: 30px 24px 24px;
+  }
+
+  .modalTitle {
+    font-size: 2rem !important;
+  }
+
+  .modalActions {
+    position: static;
+    margin-top: 20px;
+    justify-content: flex-start;
+  }
+
+  .projectDetails {
+    padding: 30px 24px;
+  }
+
+  .detailGrid {
+    grid-template-columns: 1fr;
+    gap: 30px;
+  }
+
+  .carouselItem {
+    height: 300px;
+  }
+
+  .actionButton {
+    height: 40px;
+    font-size: 0.95rem;
+  }
+}
+
+@media (max-width: 480px) {
   .modalHeader {
     padding: 24px 20px 20px;
   }
@@ -457,45 +639,15 @@
     font-size: 1.8rem !important;
   }
 
-  .modalActions {
-    position: static;
-    margin-top: 16px;
-    justify-content: flex-start;
-  }
-
   .projectDetails {
     padding: 24px 20px;
   }
 
-  .detailGrid {
-    grid-template-columns: 1fr;
-    gap: 24px;
-  }
-
   .carouselItem {
     height: 250px;
   }
 
-  .actionButton {
+  .sectionTitle {
-    height: 36px;
+    font-size: 2rem !important;
-    font-size: 0.9rem;
-  }
-}
-
-@media (max-width: 480px) {
-  .modalHeader {
-    padding: 20px 16px 16px;
-  }
-
-  .modalTitle {
-    font-size: 1.5rem !important;
-  }
-
-  .projectDetails {
-    padding: 20px 16px;
-  }
-
-  .carouselItem {
-    height: 200px;
   }
 }

src/app/components/Testimonials/TestimonialsSection.module.css

@@ -1,42 +1,72 @@
 /* File: src/components/TestimonialsSection/TestimonialsSection.module.css */
 .testimonialsSection {
-  padding: 100px 0;
+  padding: 120px 0;
-  background-color: #fff;
+  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
   position: relative;
   overflow: hidden;
 }
 
+.testimonialsSection::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="circles" width="30" height="30" patternUnits="userSpaceOnUse"><circle cx="15" cy="15" r="2" fill="%23e2e8f0" opacity="0.6"/></pattern></defs><rect width="100" height="100" fill="url(%23circles)"/></svg>');
+  opacity: 0.4;
+}
+
 .container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 16px;
   position: relative;
+  z-index: 1;
 }
 
 .sectionHeader {
   text-align: center;
-  margin-bottom: 60px;
+  margin-bottom: 80px;
 }
 
 .sectionTitle {
-  font-size: 2.5rem !important;
+  font-size: 3rem !important;
-  font-weight: 700 !important;
+  font-weight: 800 !important;
-  margin-bottom: 16px !important;
+  margin-bottom: 20px !important;
-    
+  background: linear-gradient(135deg, #7400b8 0%, #5e60ce 50%, #4ea8de 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
+  background-clip: text;
+  position: relative;
+  letter-spacing: -0.02em;
+}
+
+.sectionTitle::after {
+  content: "";
+  position: absolute;
+  bottom: -12px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 80px;
+  height: 5px;
+  background: linear-gradient(90deg, #7400b8, #6930c3);
+  border-radius: 3px;
+  box-shadow: 0 2px 8px rgba(116, 0, 184, 0.3);
 }
 
 .sectionSubtitle {
-  font-size: 1.1rem;
+  font-size: 1.2rem;
-  color: #666;
+  color: #64748b;
-  max-width: 600px;
+  max-width: 700px;
   margin: 0 auto;
+  line-height: 1.7;
+  font-weight: 400;
 }
 
 .showcaseContainer {
   position: relative;
-  padding: 20px 0;
+  padding: 40px 0;
 }
 
 .testimonialsCarousel {
@@ -45,49 +75,94 @@
 }
 
 .testimonialItem {
-  padding: 0 15px;
+  padding: 0 20px;
 }
 
 .testimonialCard {
   height: 100%;
-  border-radius: 12px;
+  border-radius: 20px;
   overflow: hidden;
-  transition: all 0.3s ease;
+  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
   border: none;
-  padding: 30px;
+  padding: 40px 30px;
+  background: white;
+  position: relative;
 }
 
-.clientName {
+.testimonialCard::before {
-  font-size: 1.2rem;
+  content: "";
-  color: #333;
+  position: absolute;
-  margin-bottom: 4px;
+  top: 20px;
+  left: 30px;
+  font-size: 4rem;
+  color: rgba(116, 0, 184, 0.1);
+  font-family: serif;
+  line-height: 1;
 }
 
-.clientTitle {
+.testimonialCard::after {
-  font-size: 0.9rem;
+  content: "";
+  position: absolute;
+  bottom: 20px;
+  right: 30px;
+  font-size: 4rem;
+  color: rgba(116, 0, 184, 0.1);
+  font-family: serif;
+  line-height: 1;
+  transform: rotate(180deg);
+}
+
+.testimonialCard:hover {
+  transform: translateY(-8px) scale(1.02);
+  box-shadow: 0 20px 48px rgba(116, 0, 184, 0.15);
 }
 
 .testimonialContent {
-  font-size: 1rem;
+  font-size: 1.1rem;
-  color: #555;
+  color: #475569;
-  line-height: 1.6;
+  line-height: 1.8;
   font-style: italic;
+  margin-bottom: 24px;
+  position: relative;
+  z-index: 1;
+  font-weight: 400;
+}
+
+.clientName {
+  font-size: 1.3rem;
+  color: #1e293b;
+  margin-bottom: 6px;
+  font-weight: 600;
+  position: relative;
+  z-index: 1;
+}
+
+.clientTitle {
+  font-size: 0.95rem;
+  color: #64748b;
+  font-weight: 500;
+  margin-bottom: 20px;
+  position: relative;
+  z-index: 1;
 }
 
 .projectInfo {
-  margin-top: 16px;
+  margin-top: 24px;
-  padding-top: 16px;
+  padding-top: 24px;
-  border-top: 1px solid #f0f0f0;
+  border-top: 2px solid #f1f5f9;
+  position: relative;
+  z-index: 1;
 }
 
 .projectLabel {
-  background: var(--primary);
+  background: linear-gradient(135deg, #7400b8 0%, #6930c3 100%);
-  -webkit-background-clip: text; /* For Safari */
+  -webkit-background-clip: text;
   background-clip: text;
-  color: transparent !important; /* Hide original text color */
+  color: transparent !important;
-
+  font-weight: 600;
   margin-right: 8px;
+  font-size: 0.9rem;
 }
 
 .technologiesList {
@@ -99,57 +174,170 @@
 
 .techTag {
   margin: 0;
-  background: #f5f5f5;
+  background: #f8fafc;
-  border-color: #d9d9d9;
+  border: 1px solid #e2e8f0;
-  color: #666;
+  color: #475569;
+  font-size: 0.8rem;
+  padding: 4px 10px;
+  border-radius: 12px;
+  font-weight: 500;
+  transition: all 0.3s ease;
+}
+
+.techTag:hover {
+  background: #7400b8;
+  color: white;
+  border-color: #7400b8;
+  transform: translateY(-1px);
 }
 
 .filledStar {
-  color: #faad14;
+  color: #fbbf24;
+  font-size: 1.1rem;
 }
 
 .emptyStar {
-  color: #d9d9d9;
+  color: #e2e8f0;
+  font-size: 1.1rem;
+}
+
+.carouselDots {
+  margin-top: 40px;
 }
 
 .carouselDots li button {
-  background: #d9d9d9 !important;
+  background: #d1d5db !important;
-  width: 10px !important;
+  width: 12px !important;
-  height: 10px !important;
+  height: 12px !important;
   border-radius: 50% !important;
+  transition: all 0.3s ease !important;
 }
 
 .carouselDots li.slick-active button {
-  background: #1890ff !important;
+  background: linear-gradient(135deg, #7400b8 0%, #6930c3 100%) !important;
+  transform: scale(1.2);
+  box-shadow: 0 2px 8px rgba(116, 0, 184, 0.3);
 }
 
 .viewAllContainer {
   display: flex;
   justify-content: center;
-  margin-top: 48px;
+  margin-top: 60px;
+}
+
+.viewAllButton {
+  height: 56px;
+  padding: 0 40px;
+  border-radius: 28px;
+  font-weight: 600;
+  font-size: 1.1rem;
+  background: linear-gradient(135deg, #7400b8 0%, #6930c3 100%);
+  color: white;
+  border: none;
+  box-shadow: 0 8px 24px rgba(116, 0, 184, 0.2);
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+
+.viewAllButton::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+  transition: left 0.6s ease;
+}
+
+.viewAllButton:hover::before {
+  left: 100%;
+}
+
+.viewAllButton:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 12px 32px rgba(116, 0, 184, 0.3);
+}
+
+/* Enhanced Animation for Testimonial Cards */
+.testimonialCard {
+  animation: fadeInUp 0.6s ease-out;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Staggered animation for multiple cards */
+.testimonialItem:nth-child(1) .testimonialCard {
+  animation-delay: 0.1s;
+}
+
+.testimonialItem:nth-child(2) .testimonialCard {
+  animation-delay: 0.2s;
+}
+
+.testimonialItem:nth-child(3) .testimonialCard {
+  animation-delay: 0.3s;
+}
+
+/* Enhanced hover effects */
+.testimonialCard:hover::before,
+.testimonialCard:hover::after {
+  color: rgba(116, 0, 184, 0.2);
+  transform: scale(1.1);
+  transition: all 0.3s ease;
+}
+
+.testimonialCard:hover .clientName {
+  color: #7400b8;
+  transition: color 0.3s ease;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .testimonialsSection {
+    padding: 80px 0;
+  }
+
+  .sectionTitle {
+    font-size: 2.5rem !important;
+  }
+
+  .testimonialCard {
+    padding: 30px 24px;
+  }
+
+  .testimonialCard::before,
+  .testimonialCard::after {
+    font-size: 3rem;
+  }
+
+  .testimonialContent {
+    font-size: 1rem;
+  }
+
+  .clientName {
+    font-size: 1.2rem;
   }
 
   .viewAllButton {
     height: 48px;
     padding: 0 32px;
-  border-radius: 24px;
-  font-weight: 500;
-    
-  color: white;
-  border: none;
-  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.15);
-  transition: all 0.3s ease;
-  cursor: pointer;
     font-size: 1rem;
   }
-
-.viewAllButton:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 6px 16px rgba(24, 144, 255, 0.2);
-   
 }
 
-@media (max-width: 768px) {
+@media (max-width: 480px) {
   .testimonialsSection {
     padding: 60px 0;
   }
@@ -158,7 +346,42 @@
     font-size: 2rem !important;
   }
 
+  .sectionSubtitle {
+    font-size: 1rem;
+  }
+
   .testimonialCard {
-    padding: 20px;
+    padding: 24px 20px;
+  }
+
+  .testimonialCard::before,
+  .testimonialCard::after {
+    font-size: 2.5rem;
+    top: 15px;
+    left: 20px;
+  }
+
+  .testimonialCard::after {
+    bottom: 15px;
+    right: 20px;
+  }
+
+  .testimonialContent {
+    font-size: 0.95rem;
+    line-height: 1.7;
+  }
+
+  .clientName {
+    font-size: 1.1rem;
+  }
+
+  .clientTitle {
+    font-size: 0.9rem;
+  }
+
+  .viewAllButton {
+    height: 44px;
+    padding: 0 28px;
+    font-size: 0.95rem;
   }
 }

src/app/page.module.css

@@ -6,6 +6,255 @@
   background-color: #fafafa;
 }
 
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 16px;
+  position: relative;
+}
+
+.sectionHeader {
+  text-align: center;
+  margin-bottom: 60px;
+}
+
+.sectionTitle {
+  font-size: 2.5rem !important;
+  font-weight: 700 !important;
+  margin-bottom: 16px !important;
+  background: linear-gradient(135deg, #7400b8 0%, #5e60ce 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  position: relative;
+}
+
+.sectionTitle::after {
+  content: "";
+  position: absolute;
+  bottom: -8px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 60px;
+  height: 4px;
+  background: linear-gradient(90deg, #7400b8, #6930c3);
+  border-radius: 2px;
+}
+
+.sectionSubtitle {
+  font-size: 1.1rem !important;
+  color: #666 !important;
+  max-width: 600px;
+  margin: 0 auto !important;
+  line-height: 1.6 !important;
+}
+
+/* Services Section */
+.servicesSection {
+  padding: 100px 0;
+  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+  position: relative;
+  overflow: hidden;
+}
+
+.servicesSection::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M 20 0 L 0 0 0 20" fill="none" stroke="%23e2e8f0" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
+  opacity: 0.3;
+}
+
+.servicesGrid {
+  position: relative;
+  z-index: 1;
+}
+
+.serviceCard {
+  height: 100%;
+  border-radius: 16px !important;
+  overflow: hidden;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  border: none !important;
+  background: white;
+  position: relative;
+}
+
+.serviceCard::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: linear-gradient(90deg, #7400b8, #6930c3);
+  transform: scaleX(0);
+  transition: transform 0.3s ease;
+}
+
+.serviceCard:hover::before {
+  transform: scaleX(1);
+}
+
+.serviceCard:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 20px 40px rgba(116, 0, 184, 0.15);
+}
+
+.serviceIcon {
+  width: 60px;
+  height: 60px;
+  border-radius: 16px;
+  background: linear-gradient(135deg, #7400b8 0%, #6930c3 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 20px;
+  font-size: 24px;
+  color: white;
+  transition: all 0.3s ease;
+}
+
+.serviceCard:hover .serviceIcon {
+  transform: scale(1.1) rotate(5deg);
+  box-shadow: 0 8px 20px rgba(116, 0, 184, 0.3);
+}
+
+.serviceTitle {
+  font-size: 1.4rem !important;
+  font-weight: 600 !important;
+  margin-bottom: 12px !important;
+  color: #333 !important;
+}
+
+.serviceDescription {
+  color: #666 !important;
+  line-height: 1.6 !important;
+  margin-bottom: 20px !important;
+}
+
+.serviceFeatures {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.serviceFeatures li {
+  position: relative;
+  padding: 8px 0 8px 20px;
+  color: #555;
+  font-size: 0.95rem;
+}
+
+.serviceFeatures li::before {
+  content: "✓";
+  position: absolute;
+  left: 0;
+  top: 8px;
+  color: #7400b8;
+  font-weight: bold;
+  font-size: 12px;
+}
+
+/* Statistics Section */
+.statisticsSection {
+  padding: 100px 0;
+  background: linear-gradient(135deg, #7400b8 0%, #5e60ce 100%);
+  position: relative;
+  overflow: hidden;
+  color: white;
+}
+
+.statisticsSection::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>');
+  opacity: 0.3;
+}
+
+.statisticsSection .sectionTitle {
+  color: white !important;
+  -webkit-text-fill-color: white !important;
+  background: none !important;
+}
+
+.statisticsSection .sectionSubtitle {
+  color: rgba(255, 255, 255, 0.8) !important;
+}
+
+.statsGrid {
+  position: relative;
+  z-index: 1;
+}
+
+.statCard {
+  text-align: center;
+  padding: 30px 20px;
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  transition: all 0.3s ease;
+}
+
+.statCard:hover {
+  transform: translateY(-5px);
+  background: rgba(255, 255, 255, 0.15);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+}
+
+.statIcon {
+  width: 50px;
+  height: 50px;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 16px;
+  font-size: 20px;
+  color: white;
+  transition: all 0.3s ease;
+}
+
+.statCard:hover .statIcon {
+  transform: scale(1.1);
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.statistic {
+  color: white !important;
+}
+
+.statistic :global(.ant-statistic-title) {
+  color: rgba(255, 255, 255, 0.8) !important;
+  font-size: 0.9rem !important;
+  margin-bottom: 8px !important;
+}
+
+.statistic :global(.ant-statistic-content) {
+  color: white !important;
+}
+
+.statistic :global(.ant-statistic-content-value) {
+  color: white !important;
+  font-size: 2.5rem !important;
+  font-weight: 700 !important;
+}
+
+.statistic :global(.ant-statistic-content-suffix) {
+  color: rgba(255, 255, 255, 0.8) !important;
+  font-size: 1.5rem !important;
+}
+
 .loaderContainer {
   height: 100vh;
   width: 100vw;
@@ -229,11 +478,34 @@
   overflow: hidden;
 }
 
+/* Enhanced Responsive Design */
 @media (max-width: 768px) {
   .section {
     padding: 60px 16px;
   }
   
+  .servicesSection,
+  .statisticsSection {
+    padding: 60px 0;
+  }
+  
+  .sectionTitle {
+    font-size: 2rem !important;
+  }
+  
+  .serviceCard {
+    margin-bottom: 20px;
+  }
+  
+  .statCard {
+    padding: 20px 15px;
+    margin-bottom: 20px;
+  }
+  
+  .statistic :global(.ant-statistic-content-value) {
+    font-size: 2rem !important;
+  }
+  
   .loaderContent {
     gap: 30px;
   }
@@ -271,6 +543,43 @@
 }
 
 @media (max-width: 480px) {
+  .servicesSection,
+  .statisticsSection {
+    padding: 40px 0;
+  }
+  
+  .sectionTitle {
+    font-size: 1.8rem !important;
+  }
+  
+  .sectionSubtitle {
+    font-size: 1rem !important;
+  }
+  
+  .serviceIcon {
+    width: 50px;
+    height: 50px;
+    font-size: 20px;
+  }
+  
+  .serviceTitle {
+    font-size: 1.2rem !important;
+  }
+  
+  .statCard {
+    padding: 15px 10px;
+  }
+  
+  .statIcon {
+    width: 40px;
+    height: 40px;
+    font-size: 16px;
+  }
+  
+  .statistic :global(.ant-statistic-content-value) {
+    font-size: 1.5rem !important;
+  }
+  
   .loaderContent {
     gap: 25px;
   }

src/app/page.tsx

@@ -1,7 +1,16 @@
 // File: src/pages/index.tsx
 "use client";
 
-import { Typography } from "antd";
+import {
+  BulbOutlined,
+  ClockCircleOutlined,
+  CodeOutlined,
+  ProjectOutlined,
+  RocketOutlined,
+  StarOutlined,
+  TeamOutlined
+} from "@ant-design/icons";
+import { Card, Col, Row, Statistic, Typography } from "antd";
 import { useEffect, useState } from "react";
 import Footer from "./components/Footer/Footer";
 import HeroSection from "./components/Hero/HeroSection";
@@ -10,7 +19,7 @@ import ProjectsShowcase from "./components/ProjectsShowcase/ProjectsShowcase";
 import TestimonialsSection from "./components/Testimonials/Testimonials";
 import styles from "./page.module.css";
 
-const { Title } = Typography;
+const { Title, Paragraph } = Typography;
 
 export default function Home() {
   const [showPreferences, setShowPreferences] = useState(true);
@@ -96,6 +105,155 @@ export default function Home() {
           <HeroSection />
         </section>
 
+        {/* Services Section */}
+        <section id="services" className={styles.servicesSection}>
+          <div className={styles.container}>
+            <div className={styles.sectionHeader}>
+              <Title level={2} className={styles.sectionTitle}>
+                Our Services
+              </Title>
+              <Paragraph className={styles.sectionSubtitle}>
+                We offer comprehensive solutions to transform your digital presence and drive business growth
+              </Paragraph>
+            </div>
+            
+            <Row gutter={[32, 32]} className={styles.servicesGrid}>
+              <Col xs={24} sm={12} lg={8}>
+                <Card className={styles.serviceCard} hoverable>
+                  <div className={styles.serviceIcon}>
+                    <CodeOutlined />
+                  </div>
+                  <Title level={4} className={styles.serviceTitle}>
+                    Web Development
+                  </Title>
+                  <Paragraph className={styles.serviceDescription}>
+                    Custom web applications built with modern technologies and best practices for optimal performance and user experience.
+                  </Paragraph>
+                  <ul className={styles.serviceFeatures}>
+                    <li>Responsive Design</li>
+                    <li>SEO Optimization</li>
+                    <li>Performance Tuning</li>
+                    <li>Security Implementation</li>
+                  </ul>
+                </Card>
+              </Col>
+              
+              <Col xs={24} sm={12} lg={8}>
+                <Card className={styles.serviceCard} hoverable>
+                  <div className={styles.serviceIcon}>
+                    <RocketOutlined />
+                  </div>
+                  <Title level={4} className={styles.serviceTitle}>
+                    Mobile Development
+                  </Title>
+                  <Paragraph className={styles.serviceDescription}>
+                    Native and cross-platform mobile applications that deliver exceptional user experiences across all devices.
+                  </Paragraph>
+                  <ul className={styles.serviceFeatures}>
+                    <li>iOS & Android Apps</li>
+                    <li>Cross-platform Solutions</li>
+                    <li>App Store Optimization</li>
+                    <li>Push Notifications</li>
+                  </ul>
+                </Card>
+              </Col>
+              
+              <Col xs={24} sm={12} lg={8}>
+                <Card className={styles.serviceCard} hoverable>
+                  <div className={styles.serviceIcon}>
+                    <BulbOutlined />
+                  </div>
+                  <Title level={4} className={styles.serviceTitle}>
+                    UI/UX Design
+                  </Title>
+                  <Paragraph className={styles.serviceDescription}>
+                    User-centered design solutions that create intuitive, engaging, and conversion-focused digital experiences.
+                  </Paragraph>
+                  <ul className={styles.serviceFeatures}>
+                    <li>User Research</li>
+                    <li>Wireframing & Prototyping</li>
+                    <li>Visual Design</li>
+                    <li>Usability Testing</li>
+                  </ul>
+                </Card>
+              </Col>
+            </Row>
+          </div>
+        </section>
+
+        {/* Statistics Section */}
+        <section id="statistics" className={styles.statisticsSection}>
+          <div className={styles.container}>
+            <div className={styles.sectionHeader}>
+              <Title level={2} className={styles.sectionTitle}>
+                Our Impact
+              </Title>
+              <Paragraph className={styles.sectionSubtitle}>
+                Numbers that speak for themselves - our commitment to excellence in every project
+              </Paragraph>
+            </div>
+            
+            <Row gutter={[48, 32]} className={styles.statsGrid}>
+              <Col xs={12} sm={6}>
+                <div className={styles.statCard}>
+                  <div className={styles.statIcon}>
+                    <ProjectOutlined />
+                  </div>
+                  <Statistic
+                    title="Projects Completed"
+                    value={150}
+                    suffix="+"
+                    className={styles.statistic}
+                  />
+                </div>
+              </Col>
+              
+              <Col xs={12} sm={6}>
+                <div className={styles.statCard}>
+                  <div className={styles.statIcon}>
+                    <TeamOutlined />
+                  </div>
+                  <Statistic
+                    title="Happy Clients"
+                    value={80}
+                    suffix="+"
+                    className={styles.statistic}
+                  />
+                </div>
+              </Col>
+              
+              <Col xs={12} sm={6}>
+                <div className={styles.statCard}>
+                  <div className={styles.statIcon}>
+                    <StarOutlined />
+                  </div>
+                  <Statistic
+                    title="Average Rating"
+                    value={4.9}
+                    suffix="/5"
+                    precision={1}
+                    className={styles.statistic}
+                  />
+                </div>
+              </Col>
+              
+              <Col xs={12} sm={6}>
+                <div className={styles.statCard}>
+                  <div className={styles.statIcon}>
+                    <ClockCircleOutlined />
+                  </div>
+                  <Statistic
+                    title="Years Experience"
+                    value={8}
+                    suffix="+"
+                    className={styles.statistic}
+                  />
+                </div>
+              </Col>
+            </Row>
+          </div>
+        </section>
+
         <section id="projects">
           <ProjectsShowcase />
         </section>

src/app/services/page.module.css

@@ -9,7 +9,7 @@
 .heroSection {
   position: relative;
   padding: 80px 0 60px;
-  background: linear-gradient(135deg, #0F0525 0%, #1a0b3a 50%, #2A0B45 100%);
+  background: linear-gradient(135deg, #0f0525 0%, #1a0b3a 50%, #2a0b45 100%);
   color: white;
   overflow: hidden;
 }
@@ -45,7 +45,8 @@
 }
 
 @keyframes float {
-  0%, 100% {
+  0%,
+  100% {
     transform: translateY(0px);
   }
   50% {
@@ -224,7 +225,11 @@
 .servicesBackground {
   position: absolute;
   inset: 0;
-  background: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, rgba(236, 72, 153, 0.05) 100%);
+  background: linear-gradient(
+    135deg,
+    rgba(139, 92, 246, 0.05) 0%,
+    rgba(236, 72, 153, 0.05) 100%
+  );
 }
 
 .servicesContainer {
@@ -275,7 +280,7 @@
 }
 
 .serviceCard::before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: 0;
@@ -452,23 +457,6 @@
   color: white;
 }
 
-.serviceStats {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  text-align: right;
-}
-
-.serviceStats .statItem {
-  font-size: 0.75rem;
-  color: #64748b;
-  line-height: 1.2;
-}
-
-.serviceStats .statItem strong {
-  color: #8b5cf6;
-}
-
 /* Process Section */
 .processSection {
   padding: 80px 0;
@@ -561,7 +549,7 @@
 /* CTA Section */
 .ctaSection {
   padding: 80px 0;
-  background: linear-gradient(135deg, #0F0525 0%, #1a0b3a 50%, #2A0B45 100%);
+  background: linear-gradient(135deg, #0f0525 0%, #1a0b3a 50%, #2a0b45 100%);
   color: white;
   text-align: center;
 }

src/app/services/page.tsx

@@ -327,14 +327,6 @@ export default function ServicesPage() {
                       <Button type="primary" className={styles.learnMoreBtn}>
                         Explore Service <ArrowRightOutlined />
                       </Button>
-                      <div className={styles.serviceStats}>
-                        <span className={styles.statItem}>
-                          <strong>24/7</strong> Support
-                        </span>
-                        <span className={styles.statItem}>
-                          <strong>100%</strong> Satisfaction
-                        </span>
-                      </div>
                     </div>
                   </div>
                 </div>