From 7bcbea35e1878d89a2f1b520fdd1c7d90a94eaf5 Mon Sep 17 00:00:00 2001 From: Mohammed Al-yaseen Date: Sat, 2 Aug 2025 15:15:37 +0300 Subject: [PATCH] enhance the home page UI --- src/app/components/Footer/Footer.tsx | 24 +- .../ProjectsShowcaseSelector.module.css | 430 ++++++++++++------ .../TestimonialsSection.module.css | 331 +++++++++++--- src/app/page.module.css | 309 +++++++++++++ src/app/page.tsx | 162 ++++++- src/app/services/page.module.css | 82 ++-- src/app/services/page.tsx | 8 - 7 files changed, 1084 insertions(+), 262 deletions(-) diff --git a/src/app/components/Footer/Footer.tsx b/src/app/components/Footer/Footer.tsx index 0cc39c3..abfe613 100644 --- a/src/app/components/Footer/Footer.tsx +++ b/src/app/components/Footer/Footer.tsx @@ -1,17 +1,17 @@ "use client"; import { - ArrowRightOutlined, - BulbOutlined, - EnvironmentOutlined, - FacebookOutlined, - InstagramOutlined, - LinkedinOutlined, - MailOutlined, - PhoneOutlined, - TeamOutlined, - TrophyOutlined, - TwitterOutlined + ArrowRightOutlined, + BulbOutlined, + EnvironmentOutlined, + FacebookOutlined, + InstagramOutlined, + LinkedinOutlined, + MailOutlined, + PhoneOutlined, + TeamOutlined, + TrophyOutlined, + TwitterOutlined } from '@ant-design/icons'; import { Typography } from 'antd'; import { motion } from 'framer-motion'; @@ -196,7 +196,7 @@ const Footer: React.FC = () => { className={styles.footerBottom} > - Ready to transform your business? Let's discuss your next project. + Ready to transform your business? Let's discuss your next project.
diff --git a/src/app/components/ProjectsShowcase/ProjectsShowcaseSelector.module.css b/src/app/components/ProjectsShowcase/ProjectsShowcaseSelector.module.css index 76ab392..6de9edb 100644 --- a/src/app/components/ProjectsShowcase/ProjectsShowcaseSelector.module.css +++ b/src/app/components/ProjectsShowcase/ProjectsShowcaseSelector.module.css @@ -1,44 +1,73 @@ /* File: src/components/home/ProjectsShowcase.module.css */ .projectsSection { - padding: 100px 0; - background-color: #fff; + padding: 120px 0; + 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,'); + 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-weight: 700 !important; - margin-bottom: 16px !important; - background: linear-gradient(135deg, #7400b8 0%, #5e60ce 100%); + font-size: 3rem !important; + font-weight: 800 !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; - color: #666; - max-width: 600px; + font-size: 1.2rem; + color: #64748b; + 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; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); + transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); + 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); - box-shadow: 0 12px 24px rgba(116, 0, 184, 0.15); + transform: translateY(-12px) scale(1.02); + 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; - margin-top: 12px; + gap: 6px; + margin-top: 16px; } .techTag { @@ -123,67 +187,123 @@ background: #f8fafc; color: #475569; border: 1px solid #e2e8f0; - font-size: 0.75rem; - padding: 2px 6px; - border-radius: 8px; + 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); } .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; - margin-top: 40px; + gap: 20px; + 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; - color: #666; + font-size: 1rem; + 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; - padding: 0 32px; - border-radius: 24px; - font-weight: 500; + height: 56px; + padding: 0 40px; + border-radius: 28px; + 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); - transition: all 0.3s ease; + box-shadow: 0 8px 24px rgba(116, 0, 184, 0.2); + 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); - box-shadow: 0 6px 16px rgba(116, 0, 184, 0.2); + transform: translateY(-3px); + 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; - color: #666; - transition: color 0.3s ease; + font-size: 20px; + color: #64748b; + 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,'); - opacity: 0.3; + opacity: 0.4; } .modalTitleSection { @@ -235,41 +356,44 @@ .modalTitle { color: white !important; - font-size: 2.2rem !important; - font-weight: 700 !important; - margin-bottom: 12px !important; - text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + font-size: 2.5rem !important; + font-weight: 800 !important; + margin-bottom: 16px !important; + 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; - padding: 4px 12px; + font-weight: 600; + padding: 6px 16px; border-radius: 20px; + backdrop-filter: blur(10px); } .modalActions { position: absolute; - top: 32px; - right: 32px; + top: 40px; + right: 40px; display: flex; - gap: 12px; + gap: 16px; z-index: 1; } .actionButton { - height: 40px; - border-radius: 20px; - font-weight: 500; + height: 44px; + border-radius: 22px; + 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; - height: 8px; + width: 10px; + 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-weight: 600 !important; - margin-bottom: 16px !important; - color: #333; + font-size: 1.6rem !important; + font-weight: 700 !important; + margin-bottom: 20px !important; + color: #1e293b; position: relative; } .sectionTitle::after { content: ""; position: absolute; - bottom: -4px; + bottom: -6px; left: 0; - width: 40px; - height: 3px; + width: 50px; + height: 4px; background: linear-gradient(90deg, #7400b8, #6930c3); border-radius: 2px; } .projectDescription { - font-size: 1.1rem; - line-height: 1.7; - color: #555; + font-size: 1.15rem; + line-height: 1.8; + color: #475569; margin-bottom: 0; + font-weight: 400; } .detailGrid { display: grid; grid-template-columns: 1fr 1fr; - gap: 32px; - margin-top: 32px; + gap: 40px; + margin-top: 40px; } .featuresList { @@ -371,11 +498,12 @@ .featureItem { position: relative; - padding: 12px 0 12px 24px; - font-size: 1rem; - color: #555; + padding: 16px 0 16px 32px; + font-size: 1.05rem; + 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; - padding: 16px; - background: #f8f9fa; - border-radius: 8px; + gap: 16px; + padding: 20px; + background: #f8fafc; + 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; - margin-top: 8px; + gap: 10px; + 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; - border-radius: 16px; - padding: 4px 12px; - font-size: 0.85rem; + font-weight: 600; + border-radius: 20px; + padding: 6px 14px; + 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 { - height: 36px; - 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; + .sectionTitle { + font-size: 2rem !important; } } diff --git a/src/app/components/Testimonials/TestimonialsSection.module.css b/src/app/components/Testimonials/TestimonialsSection.module.css index e5ddfd7..0fd9018 100644 --- a/src/app/components/Testimonials/TestimonialsSection.module.css +++ b/src/app/components/Testimonials/TestimonialsSection.module.css @@ -1,42 +1,72 @@ /* File: src/components/TestimonialsSection/TestimonialsSection.module.css */ .testimonialsSection { - padding: 100px 0; - background-color: #fff; + padding: 120px 0; + 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,'); + 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-weight: 700 !important; - margin-bottom: 16px !important; - + font-size: 3rem !important; + font-weight: 800 !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; - color: #666; - max-width: 600px; + font-size: 1.2rem; + color: #64748b; + 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; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); + transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08); border: none; - padding: 30px; + padding: 40px 30px; + background: white; + position: relative; } -.clientName { - font-size: 1.2rem; - color: #333; - margin-bottom: 4px; +.testimonialCard::before { + content: ""; + position: absolute; + top: 20px; + left: 30px; + font-size: 4rem; + color: rgba(116, 0, 184, 0.1); + font-family: serif; + line-height: 1; } -.clientTitle { - font-size: 0.9rem; +.testimonialCard::after { + 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; - color: #555; - line-height: 1.6; + font-size: 1.1rem; + color: #475569; + 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; - padding-top: 16px; - border-top: 1px solid #f0f0f0; + margin-top: 24px; + padding-top: 24px; + border-top: 2px solid #f1f5f9; + position: relative; + z-index: 1; } .projectLabel { - background: var(--primary); - -webkit-background-clip: text; /* For Safari */ + background: linear-gradient(135deg, #7400b8 0%, #6930c3 100%); + -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; - border-color: #d9d9d9; - color: #666; + background: #f8fafc; + border: 1px solid #e2e8f0; + 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; - width: 10px !important; - height: 10px !important; + background: #d1d5db !important; + width: 12px !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: 48px; - padding: 0 32px; - border-radius: 24px; - font-weight: 500; - + 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 4px 12px rgba(24, 144, 255, 0.15); - transition: all 0.3s ease; + 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; - font-size: 1rem; + 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); - box-shadow: 0 6px 16px rgba(24, 144, 255, 0.2); - + 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; + font-size: 1rem; + } +} + +@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; } } diff --git a/src/app/page.module.css b/src/app/page.module.css index 01c864d..890c1d8 100644 --- a/src/app/page.module.css +++ b/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,'); + 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,'); + 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; } diff --git a/src/app/page.tsx b/src/app/page.tsx index a848858..9f135d6 100644 --- a/src/app/page.tsx +++ b/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() { + {/* Services Section */} +
+
+
+ + Our Services + + + We offer comprehensive solutions to transform your digital presence and drive business growth + +
+ + + + +
+ +
+ + Web Development + + + Custom web applications built with modern technologies and best practices for optimal performance and user experience. + +
    +
  • Responsive Design
    • +
  • SEO Optimization
    • +
  • Performance Tuning
    • +
  • Security Implementation
    • +
+ + + + + +
+ +
+ + Mobile Development + + + Native and cross-platform mobile applications that deliver exceptional user experiences across all devices. + +
    +
  • iOS & Android Apps
    • +
  • Cross-platform Solutions
    • +
  • App Store Optimization
    • +
  • Push Notifications
    • +
+ + + + + +
+ +
+ + UI/UX Design + + + User-centered design solutions that create intuitive, engaging, and conversion-focused digital experiences. + +
    +
  • User Research
    • +
  • Wireframing & Prototyping
    • +
  • Visual Design
    • +
  • Usability Testing
    • +
+ + + +
+
+ + {/* Statistics Section */} +
+
+
+ + Our Impact + + + Numbers that speak for themselves - our commitment to excellence in every project + +
+ + + +
+
+ +
+ +
+ + + +
+
+ +
+ +
+ + + +
+
+ +
+ +
+ + + +
+
+ +
+ +
+ + +
+
+
diff --git a/src/app/services/page.module.css b/src/app/services/page.module.css index 51cddbf..6887851 100644 --- a/src/app/services/page.module.css +++ b/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; } @@ -613,11 +601,11 @@ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; } - + .heroTitle { font-size: 3rem; } - + .processSteps { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } @@ -627,76 +615,76 @@ .main { padding-top: 60px; } - + .heroSection { padding: 60px 0 40px; } - + .heroTitle { font-size: 2.5rem; } - + .heroSubtitle { font-size: 1.1rem; } - + .serviceStats { flex-direction: column; gap: 20px; } - + .heroFooterContent { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; } - + .footerColumn { text-align: center; } - + .socialLinks { gap: 15px; } - + .servicesSection { padding: 60px 0; } - + .servicesGrid { grid-template-columns: 1fr; gap: 20px; } - + .serviceCard { margin: 0 10px; } - + .cardHeader { padding: 24px 20px 20px; } - + .cardContent { padding: 0 20px 24px; } - + .cardFooter { flex-direction: column; gap: 16px; align-items: stretch; } - + .serviceStats { text-align: center; flex-direction: row; justify-content: center; gap: 20px; } - + .processSteps { grid-template-columns: 1fr; gap: 20px; } - + .ctaTitle { font-size: 2rem; } @@ -706,30 +694,30 @@ .heroTitle { font-size: 2rem; } - + .serviceCard { margin: 0 5px; } - + .cardHeader { padding: 20px 16px 16px; } - + .cardContent { padding: 0 16px 20px; } - + .serviceIconWrapper { width: 60px; height: 60px; } - + .serviceIcon { font-size: 24px; } - + .servicesTitle, .processTitle { font-size: 2rem; } -} \ No newline at end of file +} diff --git a/src/app/services/page.tsx b/src/app/services/page.tsx index 920ab27..2586ca7 100644 --- a/src/app/services/page.tsx +++ b/src/app/services/page.tsx @@ -327,14 +327,6 @@ export default function ServicesPage() { -
- - 24/7 Support - - - 100% Satisfaction - -