enhance the home page UI
This commit is contained in:
Mohammed Al-yaseen
@@ -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's discuss your next project.
|
||||
</Paragraph>
|
||||
|
||||
<div className={styles.socialLinks}>
|
||||
|
||||
@@ -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,<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-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,<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-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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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,<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-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: 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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
162
src/app/page.tsx
162
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>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user