site enhancements and add missing parts
This commit is contained in:
Mohammed Al-yaseen
598
src/app/about/page.module.css
Normal file
598
src/app/about/page.module.css
Normal file
@@ -0,0 +1,598 @@
|
|||||||
|
/* About Page Styles */
|
||||||
|
.main {
|
||||||
|
padding-top: 80px;
|
||||||
|
background-color: #f9fafb;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hero Section */
|
||||||
|
.heroSection {
|
||||||
|
position: relative;
|
||||||
|
padding: 128px 0;
|
||||||
|
background: linear-gradient(135deg, #0F0525 0%, #1a0b3a 50%, #2A0B45 100%);
|
||||||
|
color: white;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.backgroundPattern {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
opacity: 0.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.floatingOrb1 {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 288px;
|
||||||
|
height: 288px;
|
||||||
|
background-color: #8b5cf6;
|
||||||
|
border-radius: 50%;
|
||||||
|
mix-blend-mode: multiply;
|
||||||
|
filter: blur(24px);
|
||||||
|
animation: pulse 2s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.floatingOrb2 {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 288px;
|
||||||
|
height: 288px;
|
||||||
|
background-color: #eab308;
|
||||||
|
border-radius: 50%;
|
||||||
|
mix-blend-mode: multiply;
|
||||||
|
filter: blur(24px);
|
||||||
|
animation: pulse 2s infinite;
|
||||||
|
animation-delay: 2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.floatingOrb3 {
|
||||||
|
position: absolute;
|
||||||
|
bottom: -32px;
|
||||||
|
left: 80px;
|
||||||
|
width: 288px;
|
||||||
|
height: 288px;
|
||||||
|
background-color: #ec4899;
|
||||||
|
border-radius: 50%;
|
||||||
|
mix-blend-mode: multiply;
|
||||||
|
filter: blur(24px);
|
||||||
|
animation: pulse 2s infinite;
|
||||||
|
animation-delay: 4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
0%, 100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.heroContent {
|
||||||
|
position: relative;
|
||||||
|
max-width: 1152px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heroTitle {
|
||||||
|
font-size: 60px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
line-height: 1.2;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gradientText {
|
||||||
|
background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heroSubtitle {
|
||||||
|
font-size: 20px;
|
||||||
|
color: #d1d5db;
|
||||||
|
max-width: 1024px;
|
||||||
|
margin: 0 auto;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heroIcon {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
margin: 0 auto 24px;
|
||||||
|
background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trustBadge {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
background-color: rgba(255, 255, 255, 0.1);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
border-radius: 9999px;
|
||||||
|
padding: 12px 24px;
|
||||||
|
margin-top: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trustBadgeIcon {
|
||||||
|
color: #f87171;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trustBadgeText {
|
||||||
|
color: #e5e7eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Stats Section */
|
||||||
|
.statsSection {
|
||||||
|
padding: 96px 0;
|
||||||
|
background-color: white;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.statsBackground {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: linear-gradient(135deg, #faf5ff 0%, #fdf2f8 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.statsContainer {
|
||||||
|
position: relative;
|
||||||
|
max-width: 1152px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.statsHeader {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.statsTitle {
|
||||||
|
font-size: 36px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
color: #1f2937;
|
||||||
|
}
|
||||||
|
|
||||||
|
.statsSubtitle {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #6b7280;
|
||||||
|
max-width: 512px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.statCard {
|
||||||
|
text-align: center;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.statCard:hover {
|
||||||
|
transform: translateY(-4px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.statIcon {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
margin: 0 auto 24px;
|
||||||
|
border-radius: 16px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.statCard:hover .statIcon {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.statIconYellow {
|
||||||
|
background: linear-gradient(135deg, #fbbf24 0%, #f97316 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.statIconBlue {
|
||||||
|
background: linear-gradient(135deg, #60a5fa 0%, #8b5cf6 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.statIconGreen {
|
||||||
|
background: linear-gradient(135deg, #4ade80 0%, #14b8a6 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.statIconPink {
|
||||||
|
background: linear-gradient(135deg, #f472b6 0%, #ef4444 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.statNumber {
|
||||||
|
font-size: 36px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
color: #1f2937;
|
||||||
|
transition: color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.statCard:hover .statNumber {
|
||||||
|
color: #8b5cf6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.statLabel {
|
||||||
|
color: #6b7280;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Story Section */
|
||||||
|
.storySection {
|
||||||
|
padding: 96px 0;
|
||||||
|
background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storyBackground {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(236, 72, 153, 0.1) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.storyContainer {
|
||||||
|
position: relative;
|
||||||
|
max-width: 1152px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.journeyBadge {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
|
||||||
|
color: white;
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-radius: 9999px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storyTitle {
|
||||||
|
font-size: 48px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
line-height: 1.2;
|
||||||
|
color: #1f2937;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storyText {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #374151;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timelineGrid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 24px;
|
||||||
|
margin-top: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timelineCard {
|
||||||
|
text-align: center;
|
||||||
|
padding: 16px;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||||
|
border: 1px solid #f3f4f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timelineYear {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
color: #8b5cf6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timelineLabel {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #6b7280;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storyVisual {
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mainCircle {
|
||||||
|
width: 320px;
|
||||||
|
height: 320px;
|
||||||
|
margin: 0 auto;
|
||||||
|
background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 50%, #f97316 100%);
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mainIcon {
|
||||||
|
font-size: 96px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.floatingBadge1 {
|
||||||
|
position: absolute;
|
||||||
|
top: -16px;
|
||||||
|
right: -16px;
|
||||||
|
width: 96px;
|
||||||
|
height: 96px;
|
||||||
|
background: linear-gradient(135deg, #eab308 0%, #f97316 100%);
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.floatingBadge2 {
|
||||||
|
position: absolute;
|
||||||
|
bottom: -16px;
|
||||||
|
left: -16px;
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
background: linear-gradient(135deg, #4ade80 0%, #14b8a6 100%);
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.badgeIcon {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Values Section */
|
||||||
|
.valuesSection {
|
||||||
|
padding: 96px 0;
|
||||||
|
background-color: white;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.valuesBackground {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.valuesContainer {
|
||||||
|
position: relative;
|
||||||
|
max-width: 1152px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.valuesHeader {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.valuesTitle {
|
||||||
|
font-size: 36px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
color: #1f2937;
|
||||||
|
}
|
||||||
|
|
||||||
|
.valuesSubtitle {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #6b7280;
|
||||||
|
max-width: 512px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.valueCard {
|
||||||
|
height: 100%;
|
||||||
|
text-align: center;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
border: none;
|
||||||
|
background-color: rgba(255, 255, 255, 0.8);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.valueCard:hover {
|
||||||
|
background-color: white;
|
||||||
|
box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.valueCardBody {
|
||||||
|
padding: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.valueIcon {
|
||||||
|
width: 64px;
|
||||||
|
height: 64px;
|
||||||
|
margin: 0 auto 24px;
|
||||||
|
border-radius: 16px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.valueCard:hover .valueIcon {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.valueIconBlue {
|
||||||
|
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.valueIconYellow {
|
||||||
|
background: linear-gradient(135deg, #eab308 0%, #f97316 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.valueIconGreen {
|
||||||
|
background: linear-gradient(135deg, #22c55e 0%, #14b8a6 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.valueIconIndigo {
|
||||||
|
background: linear-gradient(135deg, #6366f1 0%, #3b82f6 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.valueTitle {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
color: #1f2937;
|
||||||
|
transition: color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.valueCard:hover .valueTitle {
|
||||||
|
color: #8b5cf6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.valueDescription {
|
||||||
|
color: #6b7280;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Team Section */
|
||||||
|
.teamSection {
|
||||||
|
padding: 96px 0;
|
||||||
|
background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.teamBackground {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(236, 72, 153, 0.1) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.teamContainer {
|
||||||
|
position: relative;
|
||||||
|
max-width: 1152px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.teamHeader {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.teamTitle {
|
||||||
|
font-size: 36px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
color: #1f2937;
|
||||||
|
}
|
||||||
|
|
||||||
|
.teamSubtitle {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #6b7280;
|
||||||
|
max-width: 512px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.teamCard {
|
||||||
|
height: 100%;
|
||||||
|
text-align: center;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
border: none;
|
||||||
|
background-color: rgba(255, 255, 255, 0.8);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.teamCard:hover {
|
||||||
|
background-color: white;
|
||||||
|
box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatarContainer {
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.teamAvatar {
|
||||||
|
margin: 0 auto;
|
||||||
|
border: 4px solid white;
|
||||||
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.teamCard:hover .teamAvatar {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.verificationBadge {
|
||||||
|
position: absolute;
|
||||||
|
bottom: -8px;
|
||||||
|
right: -8px;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.verificationIcon {
|
||||||
|
font-size: 14px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.teamMemberName {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
color: #1f2937;
|
||||||
|
transition: color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.teamCard:hover .teamMemberName {
|
||||||
|
color: #8b5cf6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.teamMemberRole {
|
||||||
|
color: #6b7280;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.teamMemberDescription {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #6b7280;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive Design */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.heroTitle {
|
||||||
|
font-size: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mainCircle {
|
||||||
|
width: 240px;
|
||||||
|
height: 240px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mainIcon {
|
||||||
|
font-size: 72px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timelineGrid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.floatingOrb1,
|
||||||
|
.floatingOrb2,
|
||||||
|
.floatingOrb3 {
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,74 +1,177 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import {
|
import {
|
||||||
CheckCircleOutlined,
|
BulbOutlined,
|
||||||
GlobalOutlined,
|
CheckCircleOutlined,
|
||||||
RocketOutlined,
|
GlobalOutlined,
|
||||||
StarOutlined,
|
HeartOutlined,
|
||||||
TeamOutlined,
|
RocketOutlined,
|
||||||
TrophyOutlined
|
StarOutlined,
|
||||||
|
TeamOutlined,
|
||||||
|
TrophyOutlined,
|
||||||
} from "@ant-design/icons";
|
} from "@ant-design/icons";
|
||||||
import { Avatar, Card, Col, Row, Typography } from "antd";
|
import { Avatar, Card, Col, Row } from "antd";
|
||||||
|
import Paragraph from "antd/es/typography/Paragraph";
|
||||||
|
import Title from "antd/es/typography/Title";
|
||||||
import { motion } from "framer-motion";
|
import { motion } from "framer-motion";
|
||||||
|
import styles from "./page.module.css";
|
||||||
const { Title, Paragraph } = Typography;
|
|
||||||
|
|
||||||
export default function AboutPage() {
|
export default function AboutPage() {
|
||||||
const stats = [
|
const stats = [
|
||||||
{ icon: <TrophyOutlined />, number: "50+", label: "Projects Completed" },
|
{
|
||||||
{ icon: <GlobalOutlined />, number: "25+", label: "Happy Clients" },
|
icon: <TrophyOutlined />,
|
||||||
{ icon: <TeamOutlined />, number: "15+", label: "Expert Developers" },
|
number: "50+",
|
||||||
{ icon: <RocketOutlined />, number: "3+", label: "Years Experience" },
|
label: "Projects Completed",
|
||||||
|
color: "from-yellow-400 to-orange-500",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <GlobalOutlined />,
|
||||||
|
number: "25+",
|
||||||
|
label: "Happy Clients",
|
||||||
|
color: "from-blue-400 to-purple-500",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <TeamOutlined />,
|
||||||
|
number: "15+",
|
||||||
|
label: "Expert Developers",
|
||||||
|
color: "from-green-400 to-teal-500",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <RocketOutlined />,
|
||||||
|
number: "3+",
|
||||||
|
label: "Years Experience",
|
||||||
|
color: "from-pink-400 to-red-500",
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const values = [
|
const values = [
|
||||||
{
|
{
|
||||||
title: "Innovation First",
|
title: "Innovation First",
|
||||||
description: "We stay ahead of technology trends to deliver cutting-edge solutions that give our clients a competitive advantage.",
|
description:
|
||||||
icon: <RocketOutlined />
|
"We stay ahead of technology trends to deliver cutting-edge solutions that give our clients a competitive advantage.",
|
||||||
|
icon: <RocketOutlined />,
|
||||||
|
color: "from-blue-500 to-purple-600",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Quality Excellence",
|
title: "Quality Excellence",
|
||||||
description: "Every project is crafted with attention to detail, ensuring the highest standards of quality and performance.",
|
description:
|
||||||
icon: <StarOutlined />
|
"Every project is crafted with attention to detail, ensuring the highest standards of quality and performance.",
|
||||||
|
icon: <StarOutlined />,
|
||||||
|
color: "from-yellow-500 to-orange-600",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Client Success",
|
title: "Client Success",
|
||||||
description: "Your success is our success. We work closely with clients to understand their needs and deliver solutions that exceed expectations.",
|
description:
|
||||||
icon: <CheckCircleOutlined />
|
"Your success is our success. We work closely with clients to understand their needs and deliver solutions that exceed expectations.",
|
||||||
|
icon: <CheckCircleOutlined />,
|
||||||
|
color: "from-green-500 to-teal-600",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Transparency",
|
title: "Transparency",
|
||||||
description: "We believe in open communication and transparent processes, keeping you informed at every step of your project.",
|
description:
|
||||||
icon: <GlobalOutlined />
|
"We believe in open communication and transparent processes, keeping you informed at every step of your project.",
|
||||||
}
|
icon: <GlobalOutlined />,
|
||||||
|
color: "from-indigo-500 to-blue-600",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const teamMembers = [
|
||||||
|
{
|
||||||
|
name: "Ahmed Hassan",
|
||||||
|
role: "CEO & Founder",
|
||||||
|
description: "Visionary leader with 10+ years in digital transformation",
|
||||||
|
avatar: "https://randomuser.me/api/portraits/men/32.jpg",
|
||||||
|
delay: 0,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Sarah Johnson",
|
||||||
|
role: "CTO",
|
||||||
|
description: "Technical expert specializing in AI and cloud solutions",
|
||||||
|
avatar: "https://randomuser.me/api/portraits/women/44.jpg",
|
||||||
|
delay: 0.1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Raj Patel",
|
||||||
|
role: "Lead Developer",
|
||||||
|
description: "Full-stack developer with expertise in modern frameworks",
|
||||||
|
avatar: "https://randomuser.me/api/portraits/men/67.jpg",
|
||||||
|
delay: 0.2,
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<main className="pt-20">
|
<main className={styles.main}>
|
||||||
{/* Hero Section */}
|
{/* Hero Section */}
|
||||||
<section className="py-20 bg-gradient-to-br from-[#0F0525] to-[#2A0B45] text-white">
|
<section className={styles.heroSection}>
|
||||||
<div className="max-w-6xl mx-auto px-4">
|
{/* Background Pattern */}
|
||||||
|
<div className={styles.backgroundPattern}>
|
||||||
|
<div className={styles.floatingOrb1}></div>
|
||||||
|
<div className={styles.floatingOrb2}></div>
|
||||||
|
<div className={styles.floatingOrb3}></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.heroContent}>
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0, y: 30 }}
|
initial={{ opacity: 0, y: 30 }}
|
||||||
animate={{ opacity: 1, y: 0 }}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
transition={{ duration: 0.8 }}
|
transition={{ duration: 0.8 }}
|
||||||
className="text-center"
|
className="text-center"
|
||||||
>
|
>
|
||||||
<Title level={1} className="text-5xl font-bold mb-6 text-white">
|
<motion.div
|
||||||
About Tech Master
|
initial={{ scale: 0.8 }}
|
||||||
|
animate={{ scale: 1 }}
|
||||||
|
transition={{ duration: 0.6, delay: 0.2 }}
|
||||||
|
className="inline-block mb-6"
|
||||||
|
>
|
||||||
|
<div className={styles.heroIcon}>
|
||||||
|
<BulbOutlined style={{ fontSize: "32px", color: "white" }} />
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<Title level={1} className={styles.heroTitle}>
|
||||||
|
About <span className={styles.gradientText}>Tech Master</span>
|
||||||
</Title>
|
</Title>
|
||||||
<Paragraph className="text-xl text-gray-300 max-w-3xl mx-auto">
|
<Paragraph className={styles.heroSubtitle}>
|
||||||
From Dubai to the stars, we're an award-winning technology agency
|
From Dubai to the stars, we're an award-winning technology
|
||||||
dedicated to transforming businesses through innovative digital solutions.
|
agency dedicated to transforming businesses through innovative
|
||||||
|
digital solutions that drive growth and success.
|
||||||
</Paragraph>
|
</Paragraph>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.6, delay: 0.4 }}
|
||||||
|
className="mt-8"
|
||||||
|
>
|
||||||
|
<div className={styles.trustBadge}>
|
||||||
|
<HeartOutlined className={styles.trustBadgeIcon} />
|
||||||
|
<span className={styles.trustBadgeText}>
|
||||||
|
Trusted by 25+ companies worldwide
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* Stats Section */}
|
{/* Stats Section */}
|
||||||
<section className="py-16 bg-white">
|
<section className={styles.statsSection}>
|
||||||
<div className="max-w-6xl mx-auto px-4">
|
<div className={styles.statsBackground}></div>
|
||||||
|
<div className={styles.statsContainer}>
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.8 }}
|
||||||
|
className={styles.statsHeader}
|
||||||
|
>
|
||||||
|
<Title level={2} className={styles.statsTitle}>
|
||||||
|
Our <span className={styles.gradientText}>Achievements</span>
|
||||||
|
</Title>
|
||||||
|
<Paragraph className={styles.statsSubtitle}>
|
||||||
|
Numbers that speak for our commitment to excellence and innovation
|
||||||
|
</Paragraph>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
<Row gutter={[32, 32]} justify="center">
|
<Row gutter={[32, 32]} justify="center">
|
||||||
{stats.map((stat, index) => (
|
{stats.map((stat, index) => (
|
||||||
<Col xs={24} sm={12} md={6} key={index}>
|
<Col xs={24} sm={12} md={6} key={index}>
|
||||||
@@ -76,15 +179,25 @@ export default function AboutPage() {
|
|||||||
initial={{ opacity: 0, y: 20 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
transition={{ duration: 0.6, delay: index * 0.1 }}
|
transition={{ duration: 0.6, delay: index * 0.1 }}
|
||||||
className="text-center"
|
className={styles.statCard}
|
||||||
>
|
>
|
||||||
<div className="text-4xl text-[#6e48aa] mb-2">
|
<div
|
||||||
{stat.icon}
|
className={`${styles.statIcon} ${
|
||||||
|
stat.color.includes("yellow")
|
||||||
|
? styles.statIconYellow
|
||||||
|
: stat.color.includes("blue")
|
||||||
|
? styles.statIconBlue
|
||||||
|
: stat.color.includes("green")
|
||||||
|
? styles.statIconGreen
|
||||||
|
: styles.statIconPink
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div style={{ fontSize: "24px", color: "white" }}>
|
||||||
|
{stat.icon}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="text-3xl font-bold text-gray-800 mb-1">
|
<div className={styles.statNumber}>{stat.number}</div>
|
||||||
{stat.number}
|
<div className={styles.statLabel}>{stat.label}</div>
|
||||||
</div>
|
|
||||||
<div className="text-gray-600">{stat.label}</div>
|
|
||||||
</motion.div>
|
</motion.div>
|
||||||
</Col>
|
</Col>
|
||||||
))}
|
))}
|
||||||
@@ -93,31 +206,48 @@ export default function AboutPage() {
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* Story Section */}
|
{/* Story Section */}
|
||||||
<section className="py-16 bg-gray-50">
|
<section className={styles.storySection}>
|
||||||
<div className="max-w-6xl mx-auto px-4">
|
<div className={styles.storyBackground}></div>
|
||||||
<Row gutter={[48, 48]} align="middle">
|
<div className={styles.storyContainer}>
|
||||||
|
<Row gutter={[64, 64]} align="middle">
|
||||||
<Col xs={24} lg={12}>
|
<Col xs={24} lg={12}>
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0, x: -30 }}
|
initial={{ opacity: 0, x: -30 }}
|
||||||
whileInView={{ opacity: 1, x: 0 }}
|
whileInView={{ opacity: 1, x: 0 }}
|
||||||
transition={{ duration: 0.8 }}
|
transition={{ duration: 0.8 }}
|
||||||
>
|
>
|
||||||
<Title level={2} className="text-4xl font-bold mb-6">
|
<div className={styles.journeyBadge}>
|
||||||
Our Story
|
<RocketOutlined />
|
||||||
|
<span>Our Journey</span>
|
||||||
|
</div>
|
||||||
|
<Title level={2} className={styles.storyTitle}>
|
||||||
|
Our <span className={styles.gradientText}>Story</span>
|
||||||
</Title>
|
</Title>
|
||||||
<Paragraph className="text-lg text-gray-700 mb-6">
|
<Paragraph className={styles.storyText}>
|
||||||
Founded in 2020, Tech Master emerged from a vision to bridge the gap
|
Founded in 2020, Tech Master emerged from a vision to bridge
|
||||||
between traditional business practices and cutting-edge technology.
|
the gap between traditional business practices and
|
||||||
Based in Dubai, we've grown from a small startup to an award-winning
|
cutting-edge technology. Based in Dubai, we've grown from
|
||||||
technology agency serving clients across the UAE and beyond.
|
a small startup to an award-winning technology agency serving
|
||||||
|
clients across the UAE and beyond.
|
||||||
</Paragraph>
|
</Paragraph>
|
||||||
<Paragraph className="text-lg text-gray-700">
|
<Paragraph className={styles.storyText}>
|
||||||
Our journey has been marked by continuous innovation, unwavering
|
Our journey has been marked by continuous innovation,
|
||||||
commitment to quality, and a deep understanding of our clients' needs.
|
unwavering commitment to quality, and a deep understanding of
|
||||||
We believe that technology should be an enabler, not a barrier,
|
our clients' needs. We believe that technology should be
|
||||||
and we work tirelessly to make digital transformation accessible
|
an enabler, not a barrier, and we work tirelessly to make
|
||||||
to businesses of all sizes.
|
digital transformation accessible to businesses of all sizes.
|
||||||
</Paragraph>
|
</Paragraph>
|
||||||
|
|
||||||
|
<div className={styles.timelineGrid}>
|
||||||
|
<div className={styles.timelineCard}>
|
||||||
|
<div className={styles.timelineYear}>2020</div>
|
||||||
|
<div className={styles.timelineLabel}>Founded</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.timelineCard}>
|
||||||
|
<div className={styles.timelineYear}>2024</div>
|
||||||
|
<div className={styles.timelineLabel}>Award Winner</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
</Col>
|
</Col>
|
||||||
<Col xs={24} lg={12}>
|
<Col xs={24} lg={12}>
|
||||||
@@ -125,10 +255,18 @@ export default function AboutPage() {
|
|||||||
initial={{ opacity: 0, x: 30 }}
|
initial={{ opacity: 0, x: 30 }}
|
||||||
whileInView={{ opacity: 1, x: 0 }}
|
whileInView={{ opacity: 1, x: 0 }}
|
||||||
transition={{ duration: 0.8 }}
|
transition={{ duration: 0.8 }}
|
||||||
className="text-center"
|
className={styles.storyVisual}
|
||||||
>
|
>
|
||||||
<div className="w-64 h-64 mx-auto bg-gradient-to-br from-[#6e48aa] to-[#9d50bb] rounded-full flex items-center justify-center">
|
<div className="relative">
|
||||||
<GlobalOutlined className="text-6xl text-white" />
|
<div className={styles.mainCircle}>
|
||||||
|
<GlobalOutlined className={styles.mainIcon} />
|
||||||
|
</div>
|
||||||
|
<div className={styles.floatingBadge1}>
|
||||||
|
<TrophyOutlined className={styles.badgeIcon} />
|
||||||
|
</div>
|
||||||
|
<div className={styles.floatingBadge2}>
|
||||||
|
<StarOutlined className={styles.badgeIcon} />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
</Col>
|
</Col>
|
||||||
@@ -137,19 +275,20 @@ export default function AboutPage() {
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* Values Section */}
|
{/* Values Section */}
|
||||||
<section className="py-16 bg-white">
|
<section className={styles.valuesSection}>
|
||||||
<div className="max-w-6xl mx-auto px-4">
|
<div className={styles.valuesBackground}></div>
|
||||||
|
<div className={styles.valuesContainer}>
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0, y: 30 }}
|
initial={{ opacity: 0, y: 30 }}
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
transition={{ duration: 0.8 }}
|
transition={{ duration: 0.8 }}
|
||||||
className="text-center mb-12"
|
className={styles.valuesHeader}
|
||||||
>
|
>
|
||||||
<Title level={2} className="text-4xl font-bold mb-4">
|
<Title level={2} className={styles.valuesTitle}>
|
||||||
Our Values
|
Our <span className={styles.gradientText}>Values</span>
|
||||||
</Title>
|
</Title>
|
||||||
<Paragraph className="text-lg text-gray-600 max-w-2xl mx-auto">
|
<Paragraph className={styles.valuesSubtitle}>
|
||||||
These core values guide everything we do and shape the way we
|
These core values guide everything we do and shape the way we
|
||||||
approach every project and client relationship.
|
approach every project and client relationship.
|
||||||
</Paragraph>
|
</Paragraph>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
@@ -161,15 +300,31 @@ export default function AboutPage() {
|
|||||||
initial={{ opacity: 0, y: 20 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
transition={{ duration: 0.6, delay: index * 0.1 }}
|
transition={{ duration: 0.6, delay: index * 0.1 }}
|
||||||
|
className="h-full"
|
||||||
>
|
>
|
||||||
<Card className="h-full text-center hover:shadow-lg transition-shadow">
|
<Card
|
||||||
<div className="text-4xl text-[#6e48aa] mb-4">
|
className={styles.valueCard}
|
||||||
{value.icon}
|
bodyStyle={{ padding: "2rem" }}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`${styles.valueIcon} ${
|
||||||
|
value.color.includes("blue")
|
||||||
|
? styles.valueIconBlue
|
||||||
|
: value.color.includes("yellow")
|
||||||
|
? styles.valueIconYellow
|
||||||
|
: value.color.includes("green")
|
||||||
|
? styles.valueIconGreen
|
||||||
|
: styles.valueIconIndigo
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div style={{ fontSize: "24px", color: "white" }}>
|
||||||
|
{value.icon}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Title level={4} className="mb-3">
|
<Title level={4} className={styles.valueTitle}>
|
||||||
{value.title}
|
{value.title}
|
||||||
</Title>
|
</Title>
|
||||||
<Paragraph className="text-gray-600">
|
<Paragraph className={styles.valueDescription}>
|
||||||
{value.description}
|
{value.description}
|
||||||
</Paragraph>
|
</Paragraph>
|
||||||
</Card>
|
</Card>
|
||||||
@@ -181,73 +336,61 @@ export default function AboutPage() {
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* Team Section */}
|
{/* Team Section */}
|
||||||
<section className="py-16 bg-gray-50">
|
<section className={styles.teamSection}>
|
||||||
<div className="max-w-6xl mx-auto px-4">
|
<div className={styles.teamBackground}></div>
|
||||||
|
<div className={styles.teamContainer}>
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0, y: 30 }}
|
initial={{ opacity: 0, y: 30 }}
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
transition={{ duration: 0.8 }}
|
transition={{ duration: 0.8 }}
|
||||||
className="text-center mb-12"
|
className={styles.teamHeader}
|
||||||
>
|
>
|
||||||
<Title level={2} className="text-4xl font-bold mb-4">
|
<Title level={2} className={styles.teamTitle}>
|
||||||
Our Team
|
Meet Our <span className={styles.gradientText}>Team</span>
|
||||||
</Title>
|
</Title>
|
||||||
<Paragraph className="text-lg text-gray-600 max-w-2xl mx-auto">
|
<Paragraph className={styles.teamSubtitle}>
|
||||||
Meet the passionate professionals behind Tech Master's success.
|
Meet the passionate professionals behind Tech Master's
|
||||||
Our diverse team brings together expertise from various domains
|
success. Our diverse team brings together expertise from various
|
||||||
to deliver exceptional results.
|
domains to deliver exceptional results.
|
||||||
</Paragraph>
|
</Paragraph>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
<Row gutter={[32, 32]} justify="center">
|
<Row gutter={[32, 32]} justify="center">
|
||||||
<Col xs={24} sm={12} md={8}>
|
{teamMembers.map((member, index) => (
|
||||||
<motion.div
|
<Col xs={24} sm={12} md={8} key={index}>
|
||||||
initial={{ opacity: 0, y: 20 }}
|
<motion.div
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
transition={{ duration: 0.6 }}
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
className="text-center"
|
transition={{ duration: 0.6, delay: member.delay }}
|
||||||
>
|
className="text-center group"
|
||||||
<Avatar size={120} src="https://randomuser.me/api/portraits/men/32.jpg" className="mb-4" />
|
>
|
||||||
<Title level={4} className="mb-2">Ahmed Hassan</Title>
|
<Card className={styles.teamCard}>
|
||||||
<Paragraph className="text-gray-600 mb-2">CEO & Founder</Paragraph>
|
<div className={styles.avatarContainer}>
|
||||||
<Paragraph className="text-sm text-gray-500">
|
<Avatar
|
||||||
Visionary leader with 10+ years in digital transformation
|
size={140}
|
||||||
</Paragraph>
|
src={member.avatar}
|
||||||
</motion.div>
|
className={styles.teamAvatar}
|
||||||
</Col>
|
/>
|
||||||
<Col xs={24} sm={12} md={8}>
|
<div className={styles.verificationBadge}>
|
||||||
<motion.div
|
<StarOutlined className={styles.verificationIcon} />
|
||||||
initial={{ opacity: 0, y: 20 }}
|
</div>
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
</div>
|
||||||
transition={{ duration: 0.6, delay: 0.1 }}
|
<Title level={4} className={styles.teamMemberName}>
|
||||||
className="text-center"
|
{member.name}
|
||||||
>
|
</Title>
|
||||||
<Avatar size={120} src="https://randomuser.me/api/portraits/women/44.jpg" className="mb-4" />
|
<Paragraph className={styles.teamMemberRole}>
|
||||||
<Title level={4} className="mb-2">Sarah Johnson</Title>
|
{member.role}
|
||||||
<Paragraph className="text-gray-600 mb-2">CTO</Paragraph>
|
</Paragraph>
|
||||||
<Paragraph className="text-sm text-gray-500">
|
<Paragraph className={styles.teamMemberDescription}>
|
||||||
Technical expert specializing in AI and cloud solutions
|
{member.description}
|
||||||
</Paragraph>
|
</Paragraph>
|
||||||
</motion.div>
|
</Card>
|
||||||
</Col>
|
</motion.div>
|
||||||
<Col xs={24} sm={12} md={8}>
|
</Col>
|
||||||
<motion.div
|
))}
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ duration: 0.6, delay: 0.2 }}
|
|
||||||
className="text-center"
|
|
||||||
>
|
|
||||||
<Avatar size={120} src="https://randomuser.me/api/portraits/men/67.jpg" className="mb-4" />
|
|
||||||
<Title level={4} className="mb-2">Raj Patel</Title>
|
|
||||||
<Paragraph className="text-gray-600 mb-2">Lead Developer</Paragraph>
|
|
||||||
<Paragraph className="text-sm text-gray-500">
|
|
||||||
Full-stack developer with expertise in modern frameworks
|
|
||||||
</Paragraph>
|
|
||||||
</motion.div>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
</Row>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,242 +0,0 @@
|
|||||||
// File: src/components/home/ContactSection.tsx
|
|
||||||
|
|
||||||
import {
|
|
||||||
EnvironmentOutlined,
|
|
||||||
MailOutlined,
|
|
||||||
PhoneOutlined,
|
|
||||||
SendOutlined,
|
|
||||||
} from "@ant-design/icons";
|
|
||||||
import { Button, Col, Form, Input, message, Row, Typography } from "antd";
|
|
||||||
import { motion } from "framer-motion";
|
|
||||||
import Image from "next/image";
|
|
||||||
import React, { useState } from "react";
|
|
||||||
import styles from "./ContactSection.module.css";
|
|
||||||
|
|
||||||
const { Title, Paragraph, Text } = Typography;
|
|
||||||
const { TextArea } = Input;
|
|
||||||
|
|
||||||
const ContactSection: React.FC = () => {
|
|
||||||
const [form] = Form.useForm();
|
|
||||||
const [submitting, setSubmitting] = useState(false);
|
|
||||||
|
|
||||||
const handleSubmit = async () => {
|
|
||||||
setSubmitting(true);
|
|
||||||
|
|
||||||
// Simulate API call
|
|
||||||
setTimeout(() => {
|
|
||||||
message.success("Your message has been sent successfully!");
|
|
||||||
form.resetFields();
|
|
||||||
setSubmitting(false);
|
|
||||||
}, 1500);
|
|
||||||
};
|
|
||||||
|
|
||||||
const containerVariants = {
|
|
||||||
hidden: { opacity: 0 },
|
|
||||||
visible: {
|
|
||||||
opacity: 1,
|
|
||||||
transition: {
|
|
||||||
staggerChildren: 0.2,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const itemVariants = {
|
|
||||||
hidden: { y: 20, opacity: 0 },
|
|
||||||
visible: {
|
|
||||||
y: 0,
|
|
||||||
opacity: 1,
|
|
||||||
transition: { duration: 0.5 },
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<section className={styles.contactSection}>
|
|
||||||
<div className={styles.backgroundElements}>
|
|
||||||
<div className={styles.glowOrbTop}></div>
|
|
||||||
<div className={styles.glowOrbBottom}></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className={styles.container}>
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 30 }}
|
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ duration: 0.6 }}
|
|
||||||
viewport={{ once: true }}
|
|
||||||
className={styles.sectionHeader}
|
|
||||||
>
|
|
||||||
<Title level={2} className={styles.sectionTitle}>
|
|
||||||
Get In Touch
|
|
||||||
</Title>
|
|
||||||
<Paragraph className={styles.sectionSubtitle}>
|
|
||||||
Ready to transform your ideas into reality? Contact us today.
|
|
||||||
</Paragraph>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
<Row gutter={[48, 48]} className={styles.contactContent}>
|
|
||||||
<Col xs={24} lg={10}>
|
|
||||||
<motion.div
|
|
||||||
variants={containerVariants}
|
|
||||||
initial="hidden"
|
|
||||||
whileInView="visible"
|
|
||||||
viewport={{ once: true }}
|
|
||||||
className={styles.contactInfo}
|
|
||||||
>
|
|
||||||
<motion.div
|
|
||||||
variants={itemVariants}
|
|
||||||
className={styles.contactInfoItem}
|
|
||||||
>
|
|
||||||
<div className={styles.iconWrapper}>
|
|
||||||
<MailOutlined className={styles.contactIcon} />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Text strong className={styles.contactLabel}>
|
|
||||||
Email
|
|
||||||
</Text>
|
|
||||||
<Text className={styles.contactValue}>
|
|
||||||
info@techmaster.com
|
|
||||||
</Text>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
<motion.div
|
|
||||||
variants={itemVariants}
|
|
||||||
className={styles.contactInfoItem}
|
|
||||||
>
|
|
||||||
<div className={styles.iconWrapper}>
|
|
||||||
<PhoneOutlined className={styles.contactIcon} />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Text strong className={styles.contactLabel}>
|
|
||||||
Phone
|
|
||||||
</Text>
|
|
||||||
<Text className={styles.contactValue}>+1 (555) 123-4567</Text>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
<motion.div
|
|
||||||
variants={itemVariants}
|
|
||||||
className={styles.contactInfoItem}
|
|
||||||
>
|
|
||||||
<div className={styles.iconWrapper}>
|
|
||||||
<EnvironmentOutlined className={styles.contactIcon} />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Text strong className={styles.contactLabel}>
|
|
||||||
Address
|
|
||||||
</Text>
|
|
||||||
<Text className={styles.contactValue}>
|
|
||||||
1234 Tech Boulevard, Innovation District
|
|
||||||
<br />
|
|
||||||
San Francisco, CA 94105
|
|
||||||
</Text>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
<motion.div
|
|
||||||
variants={itemVariants}
|
|
||||||
className={styles.mapContainer}
|
|
||||||
>
|
|
||||||
<Image
|
|
||||||
src="/api/placeholder/400/200"
|
|
||||||
alt="Office Location Map"
|
|
||||||
className={styles.mapImage}
|
|
||||||
width={400}
|
|
||||||
height={400}
|
|
||||||
/>
|
|
||||||
</motion.div>
|
|
||||||
</motion.div>
|
|
||||||
</Col>
|
|
||||||
|
|
||||||
<Col xs={24} lg={14}>
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, x: 30 }}
|
|
||||||
whileInView={{ opacity: 1, x: 0 }}
|
|
||||||
transition={{ duration: 0.6, delay: 0.2 }}
|
|
||||||
viewport={{ once: true }}
|
|
||||||
className={styles.contactForm}
|
|
||||||
>
|
|
||||||
<Title level={4} className={styles.formTitle}>
|
|
||||||
Send Us a Message
|
|
||||||
</Title>
|
|
||||||
|
|
||||||
<Form
|
|
||||||
form={form}
|
|
||||||
layout="vertical"
|
|
||||||
onFinish={handleSubmit}
|
|
||||||
className={styles.form}
|
|
||||||
>
|
|
||||||
<Row gutter={16}>
|
|
||||||
<Col xs={24} sm={12}>
|
|
||||||
<Form.Item
|
|
||||||
name="name"
|
|
||||||
label="Name"
|
|
||||||
rules={[
|
|
||||||
{ required: true, message: "Please enter your name" },
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<Input size="large" placeholder="Your name" />
|
|
||||||
</Form.Item>
|
|
||||||
</Col>
|
|
||||||
<Col xs={24} sm={12}>
|
|
||||||
<Form.Item
|
|
||||||
name="email"
|
|
||||||
label="Email"
|
|
||||||
rules={[
|
|
||||||
{ required: true, message: "Please enter your email" },
|
|
||||||
{
|
|
||||||
type: "email",
|
|
||||||
message: "Please enter a valid email",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<Input size="large" placeholder="Your email" />
|
|
||||||
</Form.Item>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
|
|
||||||
<Form.Item
|
|
||||||
name="subject"
|
|
||||||
label="Subject"
|
|
||||||
rules={[
|
|
||||||
{ required: true, message: "Please enter a subject" },
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<Input size="large" placeholder="How can we help you?" />
|
|
||||||
</Form.Item>
|
|
||||||
|
|
||||||
<Form.Item
|
|
||||||
name="message"
|
|
||||||
label="Message"
|
|
||||||
rules={[
|
|
||||||
{ required: true, message: "Please enter your message" },
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<TextArea
|
|
||||||
rows={5}
|
|
||||||
placeholder="Tell us about your project..."
|
|
||||||
className={styles.messageInput}
|
|
||||||
/>
|
|
||||||
</Form.Item>
|
|
||||||
|
|
||||||
<Form.Item>
|
|
||||||
<Button
|
|
||||||
type="primary"
|
|
||||||
htmlType="submit"
|
|
||||||
size="large"
|
|
||||||
icon={<SendOutlined />}
|
|
||||||
loading={submitting}
|
|
||||||
className={styles.submitButton}
|
|
||||||
>
|
|
||||||
Send Message
|
|
||||||
</Button>
|
|
||||||
</Form.Item>
|
|
||||||
</Form>
|
|
||||||
</motion.div>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ContactSection;
|
|
||||||
@@ -1,190 +0,0 @@
|
|||||||
/* File: src/components/home/ContactSection.module.css */
|
|
||||||
|
|
||||||
.contactSection {
|
|
||||||
padding: 100px 0;
|
|
||||||
background-color: #f8f9fa;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
max-width: 1200px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 0 16px;
|
|
||||||
position: relative;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.backgroundElements {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.glowOrbTop {
|
|
||||||
position: absolute;
|
|
||||||
width: 400px;
|
|
||||||
height: 400px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: var(--primary-glow);
|
|
||||||
top: -200px;
|
|
||||||
left: -150px;
|
|
||||||
filter: blur(50px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.glowOrbBottom {
|
|
||||||
position: absolute;
|
|
||||||
width: 500px;
|
|
||||||
height: 500px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: radial-gradient(
|
|
||||||
circle,
|
|
||||||
rgba(64, 169, 255, 0.15) 0%,
|
|
||||||
rgba(64, 169, 255, 0.05) 50%,
|
|
||||||
rgba(0, 0, 0, 0) 70%
|
|
||||||
);
|
|
||||||
bottom: -250px;
|
|
||||||
right: -200px;
|
|
||||||
filter: blur(60px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sectionHeader {
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sectionTitle {
|
|
||||||
font-size: 2.5rem !important;
|
|
||||||
font-weight: 700 !important;
|
|
||||||
margin-bottom: 16px !important;
|
|
||||||
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sectionSubtitle {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
color: #666;
|
|
||||||
max-width: 600px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contactContent {
|
|
||||||
background: rgba(255, 255, 255, 0.8);
|
|
||||||
border-radius: 16px;
|
|
||||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
|
|
||||||
backdrop-filter: blur(8px);
|
|
||||||
padding: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contactInfo {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contactInfoItem {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.iconWrapper {
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: var(--primary);
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
box-shadow: 0 4px 8px rgba(152, 71, 232, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.contactIcon {
|
|
||||||
font-size: 20px;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contactLabel {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contactValue {
|
|
||||||
color: #666;
|
|
||||||
font-size: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mapContainer {
|
|
||||||
margin-top: 16px;
|
|
||||||
border-radius: 12px;
|
|
||||||
overflow: hidden;
|
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.mapImage {
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contactForm {
|
|
||||||
background: white;
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 32px;
|
|
||||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.formTitle {
|
|
||||||
margin-bottom: 24px !important;
|
|
||||||
color: #1890ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.messageInput {
|
|
||||||
resize: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.submitButton {
|
|
||||||
height: 48px;
|
|
||||||
padding: 0 32px;
|
|
||||||
border-radius: 24px;
|
|
||||||
font-weight: 500;
|
|
||||||
border: none;
|
|
||||||
box-shadow: 0 4px 12px rgba(24, 144, 255, 0.15);
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.submitButton:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 6px 16px rgba(24, 144, 255, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 992px) {
|
|
||||||
.contactContent {
|
|
||||||
padding: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contactForm {
|
|
||||||
padding: 24px;
|
|
||||||
margin-top: 24px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.contactSection {
|
|
||||||
padding: 60px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sectionTitle {
|
|
||||||
font-size: 2rem !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mapContainer {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
250
src/app/components/Footer/Footer.module.css
Normal file
250
src/app/components/Footer/Footer.module.css
Normal file
@@ -0,0 +1,250 @@
|
|||||||
|
/* Footer Component Styles */
|
||||||
|
.footer {
|
||||||
|
position: relative;
|
||||||
|
background: linear-gradient(135deg, #0F0525 0%, #1a0b3a 50%, #2A0B45 100%);
|
||||||
|
color: white;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 80px 0 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerBackground {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
opacity: 0.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerOrb1 {
|
||||||
|
position: absolute;
|
||||||
|
top: -100px;
|
||||||
|
left: -100px;
|
||||||
|
width: 300px;
|
||||||
|
height: 300px;
|
||||||
|
background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
|
||||||
|
border-radius: 50%;
|
||||||
|
filter: blur(40px);
|
||||||
|
animation: float 8s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerOrb2 {
|
||||||
|
position: absolute;
|
||||||
|
bottom: -150px;
|
||||||
|
right: -100px;
|
||||||
|
width: 250px;
|
||||||
|
height: 250px;
|
||||||
|
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
|
||||||
|
border-radius: 50%;
|
||||||
|
filter: blur(35px);
|
||||||
|
animation: float 10s ease-in-out infinite reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes float {
|
||||||
|
0%, 100% {
|
||||||
|
transform: translateY(0px);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateY(-20px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerContainer {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 20px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerContent {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||||
|
gap: 40px;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerColumn {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerColumnTitle {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: white;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerColumnIcon {
|
||||||
|
color: #a855f7;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerLinks {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerLink {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerLink a {
|
||||||
|
color: #cbd5e1;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 4px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerLink a:hover {
|
||||||
|
color: #a855f7;
|
||||||
|
transform: translateX(6px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerLinkIcon {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerBottom {
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 40px;
|
||||||
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerBottomText {
|
||||||
|
color: #94a3b8;
|
||||||
|
font-size: 1rem;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
max-width: 600px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.socialLinks {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 20px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.socialLink {
|
||||||
|
width: 45px;
|
||||||
|
height: 45px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.socialLink:hover {
|
||||||
|
background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
|
||||||
|
transform: translateY(-3px);
|
||||||
|
color: white;
|
||||||
|
box-shadow: 0 8px 25px rgba(139, 92, 246, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.copyright {
|
||||||
|
color: #64748b;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copyright a {
|
||||||
|
color: #94a3b8;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copyright a:hover {
|
||||||
|
color: #a855f7;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive Design */
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
.footerContent {
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||||
|
gap: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.footer {
|
||||||
|
padding: 60px 0 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerContent {
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||||
|
gap: 30px;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerColumn {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerColumnTitle {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerLink a {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.socialLinks {
|
||||||
|
gap: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.socialLink {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerBottomText {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.footer {
|
||||||
|
padding: 50px 0 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerContent {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerColumnTitle {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerLink a {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.socialLinks {
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.socialLink {
|
||||||
|
width: 35px;
|
||||||
|
height: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copyright {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
226
src/app/components/Footer/Footer.tsx
Normal file
226
src/app/components/Footer/Footer.tsx
Normal file
@@ -0,0 +1,226 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import {
|
||||||
|
ArrowRightOutlined,
|
||||||
|
BulbOutlined,
|
||||||
|
EnvironmentOutlined,
|
||||||
|
FacebookOutlined,
|
||||||
|
InstagramOutlined,
|
||||||
|
LinkedinOutlined,
|
||||||
|
MailOutlined,
|
||||||
|
PhoneOutlined,
|
||||||
|
TeamOutlined,
|
||||||
|
TrophyOutlined,
|
||||||
|
TwitterOutlined
|
||||||
|
} from '@ant-design/icons';
|
||||||
|
import { Typography } from 'antd';
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
import React from 'react';
|
||||||
|
import styles from './Footer.module.css';
|
||||||
|
|
||||||
|
const { Paragraph } = Typography;
|
||||||
|
|
||||||
|
const Footer: React.FC = () => {
|
||||||
|
const containerVariants = {
|
||||||
|
hidden: { opacity: 0 },
|
||||||
|
visible: {
|
||||||
|
opacity: 1,
|
||||||
|
transition: {
|
||||||
|
staggerChildren: 0.1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const itemVariants = {
|
||||||
|
hidden: { y: 20, opacity: 0 },
|
||||||
|
visible: {
|
||||||
|
y: 0,
|
||||||
|
opacity: 1,
|
||||||
|
transition: { duration: 0.5 }
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<footer className={styles.footer}>
|
||||||
|
<div className={styles.footerBackground}>
|
||||||
|
<div className={styles.footerOrb1}></div>
|
||||||
|
<div className={styles.footerOrb2}></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.footerContainer}>
|
||||||
|
<motion.div
|
||||||
|
variants={containerVariants}
|
||||||
|
initial="hidden"
|
||||||
|
whileInView="visible"
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className={styles.footerContent}
|
||||||
|
>
|
||||||
|
<motion.div variants={itemVariants} className={styles.footerColumn}>
|
||||||
|
<div className={styles.footerColumnTitle}>
|
||||||
|
<TeamOutlined className={styles.footerColumnIcon} />
|
||||||
|
Company
|
||||||
|
</div>
|
||||||
|
<ul className={styles.footerLinks}>
|
||||||
|
<li className={styles.footerLink}>
|
||||||
|
<a href="/about">
|
||||||
|
<ArrowRightOutlined className={styles.footerLinkIcon} />
|
||||||
|
About Us
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className={styles.footerLink}>
|
||||||
|
<a href="/services">
|
||||||
|
<ArrowRightOutlined className={styles.footerLinkIcon} />
|
||||||
|
Our Services
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className={styles.footerLink}>
|
||||||
|
<a href="/projects">
|
||||||
|
<ArrowRightOutlined className={styles.footerLinkIcon} />
|
||||||
|
Portfolio
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className={styles.footerLink}>
|
||||||
|
<a href="/contact">
|
||||||
|
<ArrowRightOutlined className={styles.footerLinkIcon} />
|
||||||
|
Contact Us
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<motion.div variants={itemVariants} className={styles.footerColumn}>
|
||||||
|
<div className={styles.footerColumnTitle}>
|
||||||
|
<BulbOutlined className={styles.footerColumnIcon} />
|
||||||
|
Services
|
||||||
|
</div>
|
||||||
|
<ul className={styles.footerLinks}>
|
||||||
|
<li className={styles.footerLink}>
|
||||||
|
<a href="/services#webdev">
|
||||||
|
<ArrowRightOutlined className={styles.footerLinkIcon} />
|
||||||
|
Web Development
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className={styles.footerLink}>
|
||||||
|
<a href="/services#mobile">
|
||||||
|
<ArrowRightOutlined className={styles.footerLinkIcon} />
|
||||||
|
Mobile Apps
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className={styles.footerLink}>
|
||||||
|
<a href="/services#ai">
|
||||||
|
<ArrowRightOutlined className={styles.footerLinkIcon} />
|
||||||
|
AI Solutions
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className={styles.footerLink}>
|
||||||
|
<a href="/services#cloud">
|
||||||
|
<ArrowRightOutlined className={styles.footerLinkIcon} />
|
||||||
|
Cloud Services
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<motion.div variants={itemVariants} className={styles.footerColumn}>
|
||||||
|
<div className={styles.footerColumnTitle}>
|
||||||
|
<TrophyOutlined className={styles.footerColumnIcon} />
|
||||||
|
Resources
|
||||||
|
</div>
|
||||||
|
<ul className={styles.footerLinks}>
|
||||||
|
<li className={styles.footerLink}>
|
||||||
|
<a href="/blog">
|
||||||
|
<ArrowRightOutlined className={styles.footerLinkIcon} />
|
||||||
|
Blog & Insights
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className={styles.footerLink}>
|
||||||
|
<a href="/case-studies">
|
||||||
|
<ArrowRightOutlined className={styles.footerLinkIcon} />
|
||||||
|
Case Studies
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className={styles.footerLink}>
|
||||||
|
<a href="/whitepapers">
|
||||||
|
<ArrowRightOutlined className={styles.footerLinkIcon} />
|
||||||
|
Whitepapers
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className={styles.footerLink}>
|
||||||
|
<a href="/webinars">
|
||||||
|
<ArrowRightOutlined className={styles.footerLinkIcon} />
|
||||||
|
Webinars
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<motion.div variants={itemVariants} className={styles.footerColumn}>
|
||||||
|
<div className={styles.footerColumnTitle}>
|
||||||
|
<MailOutlined className={styles.footerColumnIcon} />
|
||||||
|
Contact Info
|
||||||
|
</div>
|
||||||
|
<ul className={styles.footerLinks}>
|
||||||
|
<li className={styles.footerLink}>
|
||||||
|
<a href="mailto:info@techmaster.com">
|
||||||
|
<MailOutlined className={styles.footerLinkIcon} />
|
||||||
|
info@techmaster.com
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className={styles.footerLink}>
|
||||||
|
<a href="tel:+15551234567">
|
||||||
|
<PhoneOutlined className={styles.footerLinkIcon} />
|
||||||
|
+1 (555) 123-4567
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className={styles.footerLink}>
|
||||||
|
<a href="#">
|
||||||
|
<EnvironmentOutlined className={styles.footerLinkIcon} />
|
||||||
|
San Francisco, CA
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className={styles.footerLink}>
|
||||||
|
<a href="/support">
|
||||||
|
<ArrowRightOutlined className={styles.footerLinkIcon} />
|
||||||
|
24/7 Support
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</motion.div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.6, delay: 0.3 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className={styles.footerBottom}
|
||||||
|
>
|
||||||
|
<Paragraph className={styles.footerBottomText}>
|
||||||
|
Ready to transform your business? Let's discuss your next project.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<div className={styles.socialLinks}>
|
||||||
|
<a href="#" className={styles.socialLink}>
|
||||||
|
<FacebookOutlined />
|
||||||
|
</a>
|
||||||
|
<a href="#" className={styles.socialLink}>
|
||||||
|
<TwitterOutlined />
|
||||||
|
</a>
|
||||||
|
<a href="#" className={styles.socialLink}>
|
||||||
|
<LinkedinOutlined />
|
||||||
|
</a>
|
||||||
|
<a href="#" className={styles.socialLink}>
|
||||||
|
<InstagramOutlined />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.copyright}>
|
||||||
|
© 2024 Tech Master. All rights reserved. | Privacy Policy | Terms of Service
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Footer;
|
||||||
@@ -50,7 +50,7 @@ const Header = () => {
|
|||||||
<div className={styles.logoDot}></div>
|
<div className={styles.logoDot}></div>
|
||||||
</div>
|
</div>
|
||||||
<Title level={3} className={styles.logoText}>
|
<Title level={3} className={styles.logoText}>
|
||||||
TechMaster
|
Tech Masters
|
||||||
</Title>
|
</Title>
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
</Link>
|
||||||
|
|||||||
@@ -1,11 +1,8 @@
|
|||||||
import {
|
import Paragraph from "antd/es/typography/Paragraph";
|
||||||
Typography
|
import Title from "antd/es/typography/Title";
|
||||||
} from "antd";
|
|
||||||
import ProjectsShowcaseClient from "./ProjectsShowcaseClient";
|
import ProjectsShowcaseClient from "./ProjectsShowcaseClient";
|
||||||
import styles from "./ProjectsShowcaseSelector.module.css";
|
import styles from "./ProjectsShowcaseSelector.module.css";
|
||||||
|
|
||||||
const { Title, Paragraph } = Typography;
|
|
||||||
|
|
||||||
interface Project {
|
interface Project {
|
||||||
id: string;
|
id: string;
|
||||||
title: string;
|
title: string;
|
||||||
|
|||||||
@@ -47,11 +47,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.projectCard {
|
.projectCard {
|
||||||
height: 100%;
|
height: fit-content;
|
||||||
border-radius: 12px;
|
border-radius: 16px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||||||
border: none;
|
border: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
@@ -64,7 +64,7 @@
|
|||||||
.projectImageContainer {
|
.projectImageContainer {
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
height: 220px;
|
height: 180px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.projectImage {
|
.projectImage {
|
||||||
@@ -84,7 +84,6 @@
|
|||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: rgba(116, 0, 184, 0.4);
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -115,13 +114,18 @@
|
|||||||
.technologiesList {
|
.technologiesList {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 8px;
|
gap: 4px;
|
||||||
margin-top: 16px;
|
margin-top: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.techTag {
|
.techTag {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: #7400b8;
|
background: #f8fafc;
|
||||||
|
color: #475569;
|
||||||
|
border: 1px solid #e2e8f0;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.featuredBadge {
|
.featuredBadge {
|
||||||
@@ -214,7 +218,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.modalHeader::before {
|
.modalHeader::before {
|
||||||
content: '';
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
@@ -335,7 +339,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.sectionTitle::after {
|
.sectionTitle::after {
|
||||||
content: '';
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: -4px;
|
bottom: -4px;
|
||||||
left: 0;
|
left: 0;
|
||||||
@@ -379,7 +383,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.featureItem::before {
|
.featureItem::before {
|
||||||
content: '✓';
|
content: "✓";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 12px;
|
top: 12px;
|
||||||
@@ -431,13 +435,13 @@
|
|||||||
.projectsSection {
|
.projectsSection {
|
||||||
padding: 60px 0;
|
padding: 60px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sectionTitle {
|
.sectionTitle {
|
||||||
font-size: 2rem !important;
|
font-size: 2rem !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.projectImageContainer {
|
.projectImageContainer {
|
||||||
height: 180px;
|
height: 160px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.projectModal {
|
.projectModal {
|
||||||
@@ -494,4 +498,4 @@
|
|||||||
.carouselItem {
|
.carouselItem {
|
||||||
height: 200px;
|
height: 200px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
518
src/app/contact/page.module.css
Normal file
518
src/app/contact/page.module.css
Normal file
@@ -0,0 +1,518 @@
|
|||||||
|
/* Contact Page Enhanced Styles */
|
||||||
|
.main {
|
||||||
|
padding-top: 80px;
|
||||||
|
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hero Section */
|
||||||
|
.heroSection {
|
||||||
|
position: relative;
|
||||||
|
padding: 80px 0 60px;
|
||||||
|
background: linear-gradient(135deg, #0F0525 0%, #1a0b3a 50%, #2A0B45 100%);
|
||||||
|
color: white;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heroBackground {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
opacity: 0.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heroOrb1 {
|
||||||
|
position: absolute;
|
||||||
|
top: -100px;
|
||||||
|
left: -100px;
|
||||||
|
width: 300px;
|
||||||
|
height: 300px;
|
||||||
|
background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
|
||||||
|
border-radius: 50%;
|
||||||
|
filter: blur(40px);
|
||||||
|
animation: float 6s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heroOrb2 {
|
||||||
|
position: absolute;
|
||||||
|
top: 50px;
|
||||||
|
right: -150px;
|
||||||
|
width: 250px;
|
||||||
|
height: 250px;
|
||||||
|
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
|
||||||
|
border-radius: 50%;
|
||||||
|
filter: blur(35px);
|
||||||
|
animation: float 8s ease-in-out infinite reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes float {
|
||||||
|
0%, 100% {
|
||||||
|
transform: translateY(0px);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateY(-20px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.heroContent {
|
||||||
|
position: relative;
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 20px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heroTitle {
|
||||||
|
font-size: 3.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
line-height: 1.2;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gradientText {
|
||||||
|
background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heroSubtitle {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
color: #cbd5e1;
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto 30px;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contactStats {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 40px;
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.statItem {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.statNumber {
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #a855f7;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.statLabel {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: #94a3b8;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Contact Section */
|
||||||
|
.contactSection {
|
||||||
|
padding: 80px 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contactBackground {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, rgba(236, 72, 153, 0.05) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contactContainer {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 20px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contactGrid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1.5fr;
|
||||||
|
gap: 60px;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Contact Info */
|
||||||
|
.contactInfo {
|
||||||
|
background: white;
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 40px;
|
||||||
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contactInfo::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 4px;
|
||||||
|
background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contactInfoHeader {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contactInfoTitle {
|
||||||
|
font-size: 1.75rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #1e293b;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contactInfoSubtitle {
|
||||||
|
color: #64748b;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contactInfoList {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contactInfoItem {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 16px;
|
||||||
|
padding: 20px;
|
||||||
|
background: #f8fafc;
|
||||||
|
border-radius: 12px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contactInfoItem:hover {
|
||||||
|
background: #f1f5f9;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconWrapper {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
border-radius: 12px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconWrapperEmail {
|
||||||
|
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconWrapperPhone {
|
||||||
|
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconWrapperLocation {
|
||||||
|
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contactIcon {
|
||||||
|
font-size: 20px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contactDetails {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contactLabel {
|
||||||
|
display: block;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #1e293b;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contactValue {
|
||||||
|
color: #64748b;
|
||||||
|
line-height: 1.5;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Map Section */
|
||||||
|
.mapSection {
|
||||||
|
margin-top: 30px;
|
||||||
|
border-radius: 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mapContainer {
|
||||||
|
position: relative;
|
||||||
|
height: 200px;
|
||||||
|
background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mapPlaceholder {
|
||||||
|
text-align: center;
|
||||||
|
color: #64748b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mapIcon {
|
||||||
|
font-size: 3rem;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
color: #8b5cf6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Contact Form */
|
||||||
|
.contactForm {
|
||||||
|
background: white;
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 40px;
|
||||||
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contactForm::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 4px;
|
||||||
|
background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.formHeader {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.formTitle {
|
||||||
|
font-size: 1.75rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #1e293b;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.formSubtitle {
|
||||||
|
color: #64748b;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.formRow {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.formField {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.formField :global(.ant-form-item-label) {
|
||||||
|
padding-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.formField :global(.ant-form-item-label > label) {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #374151;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.formField :global(.ant-input),
|
||||||
|
.formField :global(.ant-input-affix-wrapper) {
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 2px solid #e5e7eb;
|
||||||
|
padding: 12px 16px;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.formField :global(.ant-input:focus),
|
||||||
|
.formField :global(.ant-input-affix-wrapper:focus),
|
||||||
|
.formField :global(.ant-input-affix-wrapper-focused) {
|
||||||
|
border-color: #8b5cf6;
|
||||||
|
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.formField :global(.ant-input:hover),
|
||||||
|
.formField :global(.ant-input-affix-wrapper:hover) {
|
||||||
|
border-color: #a855f7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.messageField {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.messageField :global(.ant-input) {
|
||||||
|
resize: none;
|
||||||
|
min-height: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submitButton {
|
||||||
|
height: 50px;
|
||||||
|
border-radius: 25px;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1rem;
|
||||||
|
background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
|
||||||
|
border: none;
|
||||||
|
box-shadow: 0 8px 25px rgba(139, 92, 246, 0.3);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submitButton:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 12px 35px rgba(139, 92, 246, 0.4);
|
||||||
|
background: linear-gradient(135deg, #7c3aed 0%, #db2777 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.submitButton:active {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Additional Features */
|
||||||
|
.featuresSection {
|
||||||
|
padding: 60px 0;
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.featuresContainer {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.featuresGrid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||||
|
gap: 30px;
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.featureCard {
|
||||||
|
text-align: center;
|
||||||
|
padding: 30px;
|
||||||
|
background: #f8fafc;
|
||||||
|
border-radius: 16px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.featureCard:hover {
|
||||||
|
background: white;
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.featureIcon {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
margin: 0 auto 20px;
|
||||||
|
border-radius: 16px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 24px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.featureIconSupport {
|
||||||
|
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.featureIconResponse {
|
||||||
|
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.featureIconSecurity {
|
||||||
|
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.featureTitle {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #1e293b;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.featureDescription {
|
||||||
|
color: #64748b;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive Design */
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
.contactGrid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heroTitle {
|
||||||
|
font-size: 3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.main {
|
||||||
|
padding-top: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heroSection {
|
||||||
|
padding: 60px 0 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heroTitle {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heroSubtitle {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contactStats {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contactSection {
|
||||||
|
padding: 60px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contactInfo,
|
||||||
|
.contactForm {
|
||||||
|
padding: 30px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.formRow {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.featuresGrid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.heroTitle {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contactInfo,
|
||||||
|
.contactForm {
|
||||||
|
padding: 25px 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contactInfoItem {
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,11 +1,410 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import ContactSection from "../components/Contact/Contact";
|
import {
|
||||||
|
BulbOutlined,
|
||||||
|
ClockCircleOutlined,
|
||||||
|
EnvironmentOutlined,
|
||||||
|
IeOutlined,
|
||||||
|
MailOutlined,
|
||||||
|
PhoneOutlined,
|
||||||
|
SendOutlined,
|
||||||
|
UserOutlined,
|
||||||
|
} from "@ant-design/icons";
|
||||||
|
import { Button, Form, Input, message, Typography } from "antd";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import { useState } from "react";
|
||||||
|
import styles from "./page.module.css";
|
||||||
|
|
||||||
|
const { Title, Paragraph, Text } = Typography;
|
||||||
|
const { TextArea } = Input;
|
||||||
|
|
||||||
export default function ContactPage() {
|
export default function ContactPage() {
|
||||||
|
const [form] = Form.useForm();
|
||||||
|
const [submitting, setSubmitting] = useState(false);
|
||||||
|
|
||||||
|
const handleSubmit = async () => {
|
||||||
|
setSubmitting(true);
|
||||||
|
|
||||||
|
// Simulate API call
|
||||||
|
setTimeout(() => {
|
||||||
|
message.success("Your message has been sent successfully!");
|
||||||
|
form.resetFields();
|
||||||
|
setSubmitting(false);
|
||||||
|
}, 1500);
|
||||||
|
};
|
||||||
|
|
||||||
|
const containerVariants = {
|
||||||
|
hidden: { opacity: 0 },
|
||||||
|
visible: {
|
||||||
|
opacity: 1,
|
||||||
|
transition: {
|
||||||
|
staggerChildren: 0.2,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const itemVariants = {
|
||||||
|
hidden: { y: 20, opacity: 0 },
|
||||||
|
visible: {
|
||||||
|
y: 0,
|
||||||
|
opacity: 1,
|
||||||
|
transition: { duration: 0.5 },
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<main className="pt-20">
|
<main className={styles.main}>
|
||||||
<ContactSection />
|
{/* Hero Section */}
|
||||||
|
<section className={styles.heroSection}>
|
||||||
|
<div className={styles.heroBackground}>
|
||||||
|
<div className={styles.heroOrb1}></div>
|
||||||
|
<div className={styles.heroOrb2}></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.heroContent}>
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.8 }}
|
||||||
|
>
|
||||||
|
<Title level={1} className={styles.heroTitle}>
|
||||||
|
Get In <span className={styles.gradientText}>Touch</span>
|
||||||
|
</Title>
|
||||||
|
<Paragraph className={styles.heroSubtitle}>
|
||||||
|
Ready to transform your ideas into reality? Let's start a
|
||||||
|
conversation about your next project and how we can help bring
|
||||||
|
your vision to life.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<div className={styles.contactStats}>
|
||||||
|
<div className={styles.statItem}>
|
||||||
|
<span className={styles.statNumber}>24/7</span>
|
||||||
|
<span className={styles.statLabel}>Support</span>
|
||||||
|
</div>
|
||||||
|
<div className={styles.statItem}>
|
||||||
|
<span className={styles.statNumber}>2hr</span>
|
||||||
|
<span className={styles.statLabel}>Response Time</span>
|
||||||
|
</div>
|
||||||
|
<div className={styles.statItem}>
|
||||||
|
<span className={styles.statNumber}>100%</span>
|
||||||
|
<span className={styles.statLabel}>Secure</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Contact Section */}
|
||||||
|
<section className={styles.contactSection}>
|
||||||
|
<div className={styles.contactBackground}></div>
|
||||||
|
<div className={styles.contactContainer}>
|
||||||
|
<div className={styles.contactGrid}>
|
||||||
|
{/* Contact Info */}
|
||||||
|
<motion.div
|
||||||
|
variants={containerVariants}
|
||||||
|
initial="hidden"
|
||||||
|
whileInView="visible"
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className={styles.contactInfo}
|
||||||
|
>
|
||||||
|
<div className={styles.contactInfoHeader}>
|
||||||
|
<Title level={3} className={styles.contactInfoTitle}>
|
||||||
|
Contact Information
|
||||||
|
</Title>
|
||||||
|
<Paragraph className={styles.contactInfoSubtitle}>
|
||||||
|
Reach out to us through any of these channels. We're here
|
||||||
|
to help you succeed with your next project.
|
||||||
|
</Paragraph>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.contactInfoList}>
|
||||||
|
<motion.div
|
||||||
|
variants={itemVariants}
|
||||||
|
className={styles.contactInfoItem}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`${styles.iconWrapper} ${styles.iconWrapperEmail}`}
|
||||||
|
>
|
||||||
|
<MailOutlined className={styles.contactIcon} />
|
||||||
|
</div>
|
||||||
|
<div className={styles.contactDetails}>
|
||||||
|
<Text strong className={styles.contactLabel}>
|
||||||
|
Email
|
||||||
|
</Text>
|
||||||
|
<Text className={styles.contactValue}>
|
||||||
|
info@techmaster.com
|
||||||
|
</Text>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
variants={itemVariants}
|
||||||
|
className={styles.contactInfoItem}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`${styles.iconWrapper} ${styles.iconWrapperPhone}`}
|
||||||
|
>
|
||||||
|
<PhoneOutlined className={styles.contactIcon} />
|
||||||
|
</div>
|
||||||
|
<div className={styles.contactDetails}>
|
||||||
|
<Text strong className={styles.contactLabel}>
|
||||||
|
Phone
|
||||||
|
</Text>
|
||||||
|
<Text className={styles.contactValue}>
|
||||||
|
+1 (555) 123-4567
|
||||||
|
</Text>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
variants={itemVariants}
|
||||||
|
className={styles.contactInfoItem}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`${styles.iconWrapper} ${styles.iconWrapperLocation}`}
|
||||||
|
>
|
||||||
|
<EnvironmentOutlined className={styles.contactIcon} />
|
||||||
|
</div>
|
||||||
|
<div className={styles.contactDetails}>
|
||||||
|
<Text strong className={styles.contactLabel}>
|
||||||
|
Address
|
||||||
|
</Text>
|
||||||
|
<Text className={styles.contactValue}>
|
||||||
|
1234 Tech Boulevard, Innovation District
|
||||||
|
<br />
|
||||||
|
San Francisco, CA 94105
|
||||||
|
</Text>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<motion.div variants={itemVariants} className={styles.mapSection}>
|
||||||
|
<div className={styles.mapContainer}>
|
||||||
|
<div className={styles.mapPlaceholder}>
|
||||||
|
<EnvironmentOutlined className={styles.mapIcon} />
|
||||||
|
<div>Interactive Map Coming Soon</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Contact Form */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, x: 30 }}
|
||||||
|
whileInView={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ duration: 0.6, delay: 0.2 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className={styles.contactForm}
|
||||||
|
>
|
||||||
|
<div className={styles.formHeader}>
|
||||||
|
<Title level={3} className={styles.formTitle}>
|
||||||
|
Send Us a Message
|
||||||
|
</Title>
|
||||||
|
<Paragraph className={styles.formSubtitle}>
|
||||||
|
Tell us about your project and we'll get back to you
|
||||||
|
within 2 hours.
|
||||||
|
</Paragraph>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Form
|
||||||
|
form={form}
|
||||||
|
layout="vertical"
|
||||||
|
onFinish={handleSubmit}
|
||||||
|
className={styles.form}
|
||||||
|
>
|
||||||
|
<div className={styles.formRow}>
|
||||||
|
<Form.Item
|
||||||
|
name="name"
|
||||||
|
label="Full Name"
|
||||||
|
rules={[
|
||||||
|
{ required: true, message: "Please enter your name" },
|
||||||
|
]}
|
||||||
|
className={styles.formField}
|
||||||
|
>
|
||||||
|
<Input
|
||||||
|
size="large"
|
||||||
|
placeholder="Your full name"
|
||||||
|
prefix={<UserOutlined />}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item
|
||||||
|
name="email"
|
||||||
|
label="Email Address"
|
||||||
|
rules={[
|
||||||
|
{ required: true, message: "Please enter your email" },
|
||||||
|
{
|
||||||
|
type: "email",
|
||||||
|
message: "Please enter a valid email",
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
className={styles.formField}
|
||||||
|
>
|
||||||
|
<Input
|
||||||
|
size="large"
|
||||||
|
placeholder="your.email@example.com"
|
||||||
|
prefix={<MailOutlined />}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Form.Item
|
||||||
|
name="subject"
|
||||||
|
label="Subject"
|
||||||
|
rules={[
|
||||||
|
{ required: true, message: "Please enter a subject" },
|
||||||
|
]}
|
||||||
|
className={styles.formField}
|
||||||
|
>
|
||||||
|
<Input
|
||||||
|
size="large"
|
||||||
|
placeholder="How can we help you?"
|
||||||
|
prefix={<BulbOutlined />}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item
|
||||||
|
name="message"
|
||||||
|
label="Message"
|
||||||
|
rules={[
|
||||||
|
{ required: true, message: "Please enter your message" },
|
||||||
|
]}
|
||||||
|
className={`${styles.formField} ${styles.messageField}`}
|
||||||
|
>
|
||||||
|
<TextArea
|
||||||
|
rows={5}
|
||||||
|
placeholder="Tell us about your project, goals, and any specific requirements..."
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item>
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
htmlType="submit"
|
||||||
|
size="large"
|
||||||
|
icon={<SendOutlined />}
|
||||||
|
loading={submitting}
|
||||||
|
className={styles.submitButton}
|
||||||
|
>
|
||||||
|
Send Message
|
||||||
|
</Button>
|
||||||
|
</Form.Item>
|
||||||
|
</Form>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Features Section */}
|
||||||
|
<section className={styles.featuresSection}>
|
||||||
|
<div className={styles.featuresContainer}>
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.8 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
style={{ textAlign: "center", marginBottom: "40px" }}
|
||||||
|
>
|
||||||
|
<Title
|
||||||
|
level={2}
|
||||||
|
style={{
|
||||||
|
fontSize: "2.5rem",
|
||||||
|
fontWeight: 700,
|
||||||
|
color: "#1e293b",
|
||||||
|
marginBottom: "16px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Why Choose{" "}
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
background:
|
||||||
|
"linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%)",
|
||||||
|
WebkitBackgroundClip: "text",
|
||||||
|
WebkitTextFillColor: "transparent",
|
||||||
|
backgroundClip: "text",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Us
|
||||||
|
</span>
|
||||||
|
</Title>
|
||||||
|
<Paragraph
|
||||||
|
style={{
|
||||||
|
fontSize: "1.1rem",
|
||||||
|
color: "#64748b",
|
||||||
|
maxWidth: "600px",
|
||||||
|
margin: "0 auto",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
We're committed to providing exceptional service and support
|
||||||
|
throughout your journey with us.
|
||||||
|
</Paragraph>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<div className={styles.featuresGrid}>
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.6, delay: 0.1 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className={styles.featureCard}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`${styles.featureIcon} ${styles.featureIconSupport}`}
|
||||||
|
>
|
||||||
|
<UserOutlined />
|
||||||
|
</div>
|
||||||
|
<Title level={4} className={styles.featureTitle}>
|
||||||
|
24/7 Support
|
||||||
|
</Title>
|
||||||
|
<Paragraph className={styles.featureDescription}>
|
||||||
|
Our dedicated team is available around the clock to assist you
|
||||||
|
with any questions or concerns.
|
||||||
|
</Paragraph>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.6, delay: 0.2 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className={styles.featureCard}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`${styles.featureIcon} ${styles.featureIconResponse}`}
|
||||||
|
>
|
||||||
|
<ClockCircleOutlined />
|
||||||
|
</div>
|
||||||
|
<Title level={4} className={styles.featureTitle}>
|
||||||
|
Fast Response
|
||||||
|
</Title>
|
||||||
|
<Paragraph className={styles.featureDescription}>
|
||||||
|
We guarantee a response within 2 hours during business hours,
|
||||||
|
ensuring your project moves forward quickly.
|
||||||
|
</Paragraph>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.6, delay: 0.3 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className={styles.featureCard}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`${styles.featureIcon} ${styles.featureIconSecurity}`}
|
||||||
|
>
|
||||||
|
<IeOutlined />
|
||||||
|
</div>
|
||||||
|
<Title level={4} className={styles.featureTitle}>
|
||||||
|
Secure & Confidential
|
||||||
|
</Title>
|
||||||
|
<Paragraph className={styles.featureDescription}>
|
||||||
|
Your information is protected with enterprise-grade security and
|
||||||
|
strict confidentiality protocols.
|
||||||
|
</Paragraph>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
</main>
|
</main>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -18,7 +18,8 @@ const inter = Inter({
|
|||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: "Tech Master | Dubai To Stars - Award-Winning IT Solutions",
|
title: "Tech Master | Dubai To Stars - Award-Winning IT Solutions",
|
||||||
description: "Tech Master is an award-winning Dubai-based technology agency specializing in digital transformation, web development, mobile apps, AI solutions, and enterprise software. From zero to hero, we create cutting-edge digital experiences for ambitious businesses.",
|
description:
|
||||||
|
"Tech Master is an award-winning Dubai-based technology agency specializing in digital transformation, web development, mobile apps, AI solutions, and enterprise software. From zero to hero, we create cutting-edge digital experiences for ambitious businesses.",
|
||||||
keywords: [
|
keywords: [
|
||||||
"Dubai IT solutions",
|
"Dubai IT solutions",
|
||||||
"digital transformation",
|
"digital transformation",
|
||||||
@@ -36,7 +37,7 @@ export const metadata: Metadata = {
|
|||||||
"blockchain development",
|
"blockchain development",
|
||||||
"IoT solutions",
|
"IoT solutions",
|
||||||
"tech agency Dubai",
|
"tech agency Dubai",
|
||||||
"software development UAE"
|
"software development UAE",
|
||||||
],
|
],
|
||||||
authors: [{ name: "Tech Master" }],
|
authors: [{ name: "Tech Master" }],
|
||||||
creator: "Tech Master",
|
creator: "Tech Master",
|
||||||
@@ -52,7 +53,8 @@ export const metadata: Metadata = {
|
|||||||
},
|
},
|
||||||
openGraph: {
|
openGraph: {
|
||||||
title: "Tech Master | Dubai To Stars - Award-Winning IT Solutions",
|
title: "Tech Master | Dubai To Stars - Award-Winning IT Solutions",
|
||||||
description: "Award-winning Dubai-based technology agency specializing in digital transformation, web development, mobile apps, AI solutions, and enterprise software.",
|
description:
|
||||||
|
"Award-winning Dubai-based technology agency specializing in digital transformation, web development, mobile apps, AI solutions, and enterprise software.",
|
||||||
url: "https://tech-masters.guru",
|
url: "https://tech-masters.guru",
|
||||||
siteName: "Tech Master",
|
siteName: "Tech Master",
|
||||||
images: [
|
images: [
|
||||||
@@ -69,7 +71,8 @@ export const metadata: Metadata = {
|
|||||||
twitter: {
|
twitter: {
|
||||||
card: "summary_large_image",
|
card: "summary_large_image",
|
||||||
title: "Tech Master | Dubai To Stars - Award-Winning IT Solutions",
|
title: "Tech Master | Dubai To Stars - Award-Winning IT Solutions",
|
||||||
description: "Award-winning Dubai-based technology agency specializing in digital transformation and innovative IT solutions.",
|
description:
|
||||||
|
"Award-winning Dubai-based technology agency specializing in digital transformation and innovative IT solutions.",
|
||||||
images: ["https://tech-masters.guru/twitter-image.jpg"],
|
images: ["https://tech-masters.guru/twitter-image.jpg"],
|
||||||
creator: "@techmasterdubai",
|
creator: "@techmasterdubai",
|
||||||
},
|
},
|
||||||
@@ -108,7 +111,7 @@ export default function RootLayout({
|
|||||||
src="https://threejs.org/examples/js/libs/stats.min.js"
|
src="https://threejs.org/examples/js/libs/stats.min.js"
|
||||||
async
|
async
|
||||||
></script>
|
></script>
|
||||||
|
|
||||||
{/* Structured Data */}
|
{/* Structured Data */}
|
||||||
<script
|
<script
|
||||||
type="application/ld+json"
|
type="application/ld+json"
|
||||||
@@ -116,26 +119,27 @@ export default function RootLayout({
|
|||||||
__html: JSON.stringify({
|
__html: JSON.stringify({
|
||||||
"@context": "https://schema.org",
|
"@context": "https://schema.org",
|
||||||
"@type": "Organization",
|
"@type": "Organization",
|
||||||
"name": "Tech Master",
|
name: "Tech Master",
|
||||||
"url": "https://tech-masters.guru",
|
url: "https://tech-masters.guru",
|
||||||
"logo": "https://tech-masters.guru/logo.png",
|
logo: "https://tech-masters.guru/logo.png",
|
||||||
"description": "Award-winning Dubai-based technology agency specializing in digital transformation and innovative IT solutions.",
|
description:
|
||||||
"address": {
|
"Award-winning Dubai-based technology agency specializing in digital transformation and innovative IT solutions.",
|
||||||
|
address: {
|
||||||
"@type": "PostalAddress",
|
"@type": "PostalAddress",
|
||||||
"addressLocality": "Dubai",
|
addressLocality: "Dubai",
|
||||||
"addressCountry": "UAE"
|
addressCountry: "UAE",
|
||||||
},
|
},
|
||||||
"contactPoint": {
|
contactPoint: {
|
||||||
"@type": "ContactPoint",
|
"@type": "ContactPoint",
|
||||||
"telephone": "+971-XX-XXX-XXXX",
|
telephone: "+971-XX-XXX-XXXX",
|
||||||
"contactType": "customer service"
|
contactType: "customer service",
|
||||||
},
|
},
|
||||||
"sameAs": [
|
sameAs: [
|
||||||
"https://linkedin.com/company/tech-master",
|
"https://linkedin.com/company/tech-master",
|
||||||
"https://twitter.com/techmasterdubai",
|
"https://twitter.com/techmasterdubai",
|
||||||
"https://facebook.com/techmasterdubai"
|
"https://facebook.com/techmasterdubai",
|
||||||
]
|
],
|
||||||
})
|
}),
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</head>
|
</head>
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
|
|
||||||
import { Spin, Typography } from "antd";
|
import { Spin, Typography } from "antd";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import ContactSection from "./components/Contact/Contact";
|
import Footer from "./components/Footer/Footer";
|
||||||
import HeroSection from "./components/Hero/HeroSection";
|
import HeroSection from "./components/Hero/HeroSection";
|
||||||
import PreferencesSelector from "./components/Preferences/Preferences";
|
import PreferencesSelector from "./components/Preferences/Preferences";
|
||||||
import ProjectsShowcase from "./components/ProjectsShowcase/ProjectsShowcase";
|
import ProjectsShowcase from "./components/ProjectsShowcase/ProjectsShowcase";
|
||||||
@@ -64,23 +64,21 @@ export default function Home() {
|
|||||||
<section id="home">
|
<section id="home">
|
||||||
<HeroSection />
|
<HeroSection />
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section id="services">
|
<section id="services">
|
||||||
<ServicesSection userPreferences={userPreferences} />
|
<ServicesSection userPreferences={userPreferences} />
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section id="projects">
|
<section id="projects">
|
||||||
<ProjectsShowcase />
|
<ProjectsShowcase />
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section id="testimonials">
|
<section id="testimonials">
|
||||||
<TestimonialsSection />
|
<TestimonialsSection />
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section id="contact">
|
|
||||||
<ContactSection />
|
|
||||||
</section>
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
<Footer />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
408
src/app/projects/page.module.css
Normal file
408
src/app/projects/page.module.css
Normal file
@@ -0,0 +1,408 @@
|
|||||||
|
/* Projects Page Styles */
|
||||||
|
.main {
|
||||||
|
padding-top: 80px;
|
||||||
|
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hero Section */
|
||||||
|
.heroSection {
|
||||||
|
position: relative;
|
||||||
|
padding: 80px 0 60px;
|
||||||
|
background: linear-gradient(135deg, #0F0525 0%, #1a0b3a 50%, #2A0B45 100%);
|
||||||
|
color: white;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heroBackground {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
opacity: 0.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heroOrb1 {
|
||||||
|
position: absolute;
|
||||||
|
top: -100px;
|
||||||
|
left: -100px;
|
||||||
|
width: 300px;
|
||||||
|
height: 300px;
|
||||||
|
background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
|
||||||
|
border-radius: 50%;
|
||||||
|
filter: blur(40px);
|
||||||
|
animation: float 6s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heroOrb2 {
|
||||||
|
position: absolute;
|
||||||
|
top: 50px;
|
||||||
|
right: -150px;
|
||||||
|
width: 250px;
|
||||||
|
height: 250px;
|
||||||
|
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
|
||||||
|
border-radius: 50%;
|
||||||
|
filter: blur(35px);
|
||||||
|
animation: float 8s ease-in-out infinite reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes float {
|
||||||
|
0%, 100% {
|
||||||
|
transform: translateY(0px);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateY(-20px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.heroContent {
|
||||||
|
position: relative;
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 20px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heroTitle {
|
||||||
|
font-size: 3.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
line-height: 1.2;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gradientText {
|
||||||
|
background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heroSubtitle {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
color: #cbd5e1;
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto 30px;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.projectStats {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 40px;
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.statItem {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.statNumber {
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #a855f7;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.statLabel {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: #94a3b8;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Projects Section */
|
||||||
|
.projectsSection {
|
||||||
|
padding: 80px 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.projectsBackground {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, rgba(236, 72, 153, 0.05) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.projectsContainer {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 20px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.projectsHeader {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.projectsTitle {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
color: #1e293b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.projectsSubtitle {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: #64748b;
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Filter Section */
|
||||||
|
.filterSection {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filterButtons {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 12px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filterButton {
|
||||||
|
padding: 8px 20px;
|
||||||
|
border-radius: 25px;
|
||||||
|
border: 2px solid #e5e7eb;
|
||||||
|
background: white;
|
||||||
|
color: #64748b;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filterButton:hover {
|
||||||
|
border-color: #8b5cf6;
|
||||||
|
color: #8b5cf6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filterButton.active {
|
||||||
|
background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
|
||||||
|
border-color: transparent;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Projects Grid */
|
||||||
|
.projectsGrid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||||
|
gap: 24px;
|
||||||
|
margin-bottom: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.projectCard {
|
||||||
|
background: white;
|
||||||
|
border-radius: 16px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
cursor: pointer;
|
||||||
|
border: none;
|
||||||
|
height: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
.projectCard:hover {
|
||||||
|
transform: translateY(-10px);
|
||||||
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.projectImageContainer {
|
||||||
|
position: relative;
|
||||||
|
height: 200px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.projectImage {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.projectCard:hover .projectImage {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.projectOverlay {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.projectCard:hover .projectOverlay {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.viewButton {
|
||||||
|
background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
|
||||||
|
border: none;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.featuredBadge {
|
||||||
|
position: absolute;
|
||||||
|
top: 16px;
|
||||||
|
right: 16px;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.projectContent {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.categoryTag {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.projectTitle {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #1e293b;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
line-height: 1.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.projectDescription {
|
||||||
|
color: #64748b;
|
||||||
|
line-height: 1.5;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 3;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.technologiesList {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 4px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.techTag {
|
||||||
|
background: #f8fafc;
|
||||||
|
color: #475569;
|
||||||
|
border: 1px solid #e2e8f0;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.projectMeta {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 12px;
|
||||||
|
border-top: 1px solid #f1f5f9;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.projectDuration {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: #64748b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.projectTeam {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: #64748b;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Load More Section */
|
||||||
|
.loadMoreSection {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loadMoreButton {
|
||||||
|
background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
|
||||||
|
border: none;
|
||||||
|
color: white;
|
||||||
|
padding: 12px 32px;
|
||||||
|
border-radius: 25px;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1rem;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loadMoreButton:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 8px 25px rgba(139, 92, 246, 0.3);
|
||||||
|
background: linear-gradient(135deg, #7c3aed 0%, #db2777 100%);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive Design */
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
.projectsGrid {
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heroTitle {
|
||||||
|
font-size: 3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.main {
|
||||||
|
padding-top: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heroSection {
|
||||||
|
padding: 60px 0 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heroTitle {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heroSubtitle {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.projectStats {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.projectsSection {
|
||||||
|
padding: 60px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.projectsGrid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filterButtons {
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filterButton {
|
||||||
|
padding: 6px 16px;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.heroTitle {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.projectCard {
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.projectContent {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,9 +1,638 @@
|
|||||||
import ProjectsShowcase from "../components/ProjectsShowcase/ProjectsShowcase";
|
"use client";
|
||||||
|
|
||||||
|
import {
|
||||||
|
CloseOutlined,
|
||||||
|
EyeOutlined,
|
||||||
|
GithubOutlined,
|
||||||
|
LinkOutlined,
|
||||||
|
RocketOutlined,
|
||||||
|
UserOutlined,
|
||||||
|
} from "@ant-design/icons";
|
||||||
|
import {
|
||||||
|
Badge,
|
||||||
|
Button,
|
||||||
|
Card,
|
||||||
|
Carousel,
|
||||||
|
Col,
|
||||||
|
Modal,
|
||||||
|
Row,
|
||||||
|
Tag,
|
||||||
|
Typography,
|
||||||
|
} from "antd";
|
||||||
|
import { AnimatePresence, motion } from "framer-motion";
|
||||||
|
import Image from "next/image";
|
||||||
|
import { useState } from "react";
|
||||||
|
import Footer from "../components/Footer/Footer";
|
||||||
|
import styles from "./page.module.css";
|
||||||
|
|
||||||
|
const { Title, Paragraph, Text } = Typography;
|
||||||
|
|
||||||
|
interface Project {
|
||||||
|
id: string;
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
imageUrl: string;
|
||||||
|
category: string;
|
||||||
|
technologies: string[];
|
||||||
|
featured: boolean;
|
||||||
|
detailedDescription: string;
|
||||||
|
images: string[];
|
||||||
|
liveUrl?: string;
|
||||||
|
githubUrl?: string;
|
||||||
|
features: string[];
|
||||||
|
duration: string;
|
||||||
|
teamSize: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Sample project data (same as in ProjectsShowcase)
|
||||||
|
const projectsData: Project[] = [
|
||||||
|
{
|
||||||
|
id: "p1",
|
||||||
|
title: "BPro ERP System",
|
||||||
|
description:
|
||||||
|
"Comprehensive enterprise resource planning system with advanced business process management and real-time analytics.",
|
||||||
|
imageUrl: "https://tech-masters.guru/photos/projects/bpro-erp.jpg",
|
||||||
|
category: "Enterprise Software",
|
||||||
|
technologies: ["React", "Node.js", "PostgreSQL", "Redis"],
|
||||||
|
featured: true,
|
||||||
|
detailedDescription:
|
||||||
|
"A comprehensive ERP system designed for modern businesses, featuring advanced business process management, real-time analytics, and seamless integration with existing enterprise systems. The platform streamlines operations across all departments.",
|
||||||
|
images: [
|
||||||
|
"https://tech-masters.guru/photos/projects/bpro-erp.jpg",
|
||||||
|
"https://tech-masters.guru/photos/projects/bpro-erp.jpg",
|
||||||
|
"https://tech-masters.guru/photos/projects/bpro-erp.jpg",
|
||||||
|
],
|
||||||
|
liveUrl: "https://bpro-erp.com",
|
||||||
|
githubUrl: "https://github.com/company/bpro-erp",
|
||||||
|
features: [
|
||||||
|
"Advanced business process management",
|
||||||
|
"Real-time analytics and reporting",
|
||||||
|
"Multi-department integration",
|
||||||
|
"Custom workflow automation",
|
||||||
|
"Comprehensive audit trails",
|
||||||
|
],
|
||||||
|
duration: "8 months",
|
||||||
|
teamSize: "12 developers",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "p2",
|
||||||
|
title: "Law Office Management",
|
||||||
|
description:
|
||||||
|
"Complete legal practice management solution with case tracking, document management, and client portal.",
|
||||||
|
imageUrl: "https://tech-masters.guru/photos/projects/law-office-home.png",
|
||||||
|
category: "Legal Software",
|
||||||
|
technologies: ["Angular", ".NET Core", "SQL Server", "Azure"],
|
||||||
|
featured: true,
|
||||||
|
detailedDescription:
|
||||||
|
"A comprehensive legal practice management system designed to streamline law office operations, manage cases, track billable hours, and provide secure client communication portals.",
|
||||||
|
images: [
|
||||||
|
"https://tech-masters.guru/photos/projects/law-office-home.png",
|
||||||
|
"https://tech-masters.guru/photos/projects/law-office-login.png",
|
||||||
|
"https://tech-masters.guru/photos/projects/law-office-home.png",
|
||||||
|
],
|
||||||
|
liveUrl: "https://law-office-demo.com",
|
||||||
|
githubUrl: "https://github.com/company/law-office-system",
|
||||||
|
features: [
|
||||||
|
"Case management and tracking",
|
||||||
|
"Document management system",
|
||||||
|
"Client portal and communication",
|
||||||
|
"Time tracking and billing",
|
||||||
|
"Calendar and appointment management",
|
||||||
|
],
|
||||||
|
duration: "6 months",
|
||||||
|
teamSize: "8 developers",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "p3",
|
||||||
|
title: "MoneyOut Payment Platform",
|
||||||
|
description:
|
||||||
|
"Secure digital payment processing platform with multi-currency support and advanced fraud detection.",
|
||||||
|
imageUrl: "https://tech-masters.guru/photos/projects/moneyout.png",
|
||||||
|
category: "FinTech",
|
||||||
|
technologies: ["Next.js", "Stripe", "MongoDB", "GraphQL"],
|
||||||
|
featured: true,
|
||||||
|
detailedDescription:
|
||||||
|
"A modern payment processing platform that enables secure digital transactions with multi-currency support, advanced fraud detection, and comprehensive merchant tools.",
|
||||||
|
images: [
|
||||||
|
"https://tech-masters.guru/photos/projects/moneyout.png",
|
||||||
|
"https://tech-masters.guru/photos/projects/moneyout.png",
|
||||||
|
"https://tech-masters.guru/photos/projects/moneyout.png",
|
||||||
|
],
|
||||||
|
liveUrl: "https://moneyout-demo.com",
|
||||||
|
githubUrl: "https://github.com/company/moneyout-platform",
|
||||||
|
features: [
|
||||||
|
"Multi-currency payment processing",
|
||||||
|
"Advanced fraud detection",
|
||||||
|
"Merchant dashboard and analytics",
|
||||||
|
"Secure API integration",
|
||||||
|
"Real-time transaction monitoring",
|
||||||
|
],
|
||||||
|
duration: "7 months",
|
||||||
|
teamSize: "10 developers",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "p4",
|
||||||
|
title: "Cloths E-commerce Platform",
|
||||||
|
description:
|
||||||
|
"Modern fashion e-commerce platform with advanced product catalog, virtual try-on, and personalized recommendations.",
|
||||||
|
imageUrl: "https://tech-masters.guru/photos/projects/cloths-e-commerce.png",
|
||||||
|
category: "E-commerce",
|
||||||
|
technologies: ["React", "Node.js", "MongoDB", "AWS"],
|
||||||
|
featured: false,
|
||||||
|
detailedDescription:
|
||||||
|
"A cutting-edge fashion e-commerce platform featuring virtual try-on technology, personalized recommendations, and seamless mobile shopping experience.",
|
||||||
|
images: [
|
||||||
|
"https://tech-masters.guru/photos/projects/cloths-e-commerce.png",
|
||||||
|
"https://tech-masters.guru/photos/projects/cloths-e-commerce.png",
|
||||||
|
"https://tech-masters.guru/photos/projects/cloths-e-commerce.png",
|
||||||
|
],
|
||||||
|
liveUrl: "https://cloths-ecommerce.com",
|
||||||
|
githubUrl: "https://github.com/company/cloths-ecommerce",
|
||||||
|
features: [
|
||||||
|
"Virtual try-on technology",
|
||||||
|
"Personalized recommendations",
|
||||||
|
"Advanced product catalog",
|
||||||
|
"Mobile-first design",
|
||||||
|
"Social commerce integration",
|
||||||
|
],
|
||||||
|
duration: "5 months",
|
||||||
|
teamSize: "6 developers",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "p5",
|
||||||
|
title: "Nanas Dashboard",
|
||||||
|
description:
|
||||||
|
"Comprehensive business intelligence dashboard with real-time data visualization and predictive analytics.",
|
||||||
|
imageUrl:
|
||||||
|
"https://tech-masters.guru/photos/projects/nanas-main-dashboard.png",
|
||||||
|
category: "Business Intelligence",
|
||||||
|
technologies: ["Vue.js", "Python", "PostgreSQL", "Docker"],
|
||||||
|
featured: false,
|
||||||
|
detailedDescription:
|
||||||
|
"A powerful business intelligence dashboard that provides real-time data visualization, predictive analytics, and comprehensive reporting for data-driven decision making.",
|
||||||
|
images: [
|
||||||
|
"https://tech-masters.guru/photos/projects/nanas-main-dashboard.png",
|
||||||
|
"https://tech-masters.guru/photos/projects/nanas-main-dashboard.png",
|
||||||
|
"https://tech-masters.guru/photos/projects/nanas-main-dashboard.png",
|
||||||
|
],
|
||||||
|
liveUrl: "https://nanas-dashboard.com",
|
||||||
|
githubUrl: "https://github.com/company/nanas-dashboard",
|
||||||
|
features: [
|
||||||
|
"Real-time data visualization",
|
||||||
|
"Predictive analytics",
|
||||||
|
"Custom reporting tools",
|
||||||
|
"Interactive dashboards",
|
||||||
|
"Data export capabilities",
|
||||||
|
],
|
||||||
|
duration: "4 months",
|
||||||
|
teamSize: "5 developers",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "p6",
|
||||||
|
title: "Easy Pay Login System",
|
||||||
|
description:
|
||||||
|
"Secure authentication system with multi-factor authentication and advanced security features for financial applications.",
|
||||||
|
imageUrl: "https://tech-masters.guru/photos/projects/easy-pay-login.png",
|
||||||
|
category: "Security",
|
||||||
|
technologies: ["React", "Node.js", "JWT", "Redis"],
|
||||||
|
featured: false,
|
||||||
|
detailedDescription:
|
||||||
|
"A robust authentication system designed for financial applications, featuring multi-factor authentication, advanced security protocols, and seamless user experience.",
|
||||||
|
images: [
|
||||||
|
"https://tech-masters.guru/photos/projects/easy-pay-login.png",
|
||||||
|
"https://tech-masters.guru/photos/projects/easy-pay-login.png",
|
||||||
|
"https://tech-masters.guru/photos/projects/easy-pay-login.png",
|
||||||
|
],
|
||||||
|
liveUrl: "https://easy-pay-login.com",
|
||||||
|
githubUrl: "https://github.com/company/easy-pay-login",
|
||||||
|
features: [
|
||||||
|
"Multi-factor authentication",
|
||||||
|
"Advanced security protocols",
|
||||||
|
"Session management",
|
||||||
|
"Audit logging",
|
||||||
|
"Password recovery system",
|
||||||
|
],
|
||||||
|
duration: "3 months",
|
||||||
|
teamSize: "4 developers",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "p7",
|
||||||
|
title: "Majsin Dashboard",
|
||||||
|
description:
|
||||||
|
"Advanced analytics dashboard with machine learning insights and customizable reporting for enterprise clients.",
|
||||||
|
imageUrl: "https://tech-masters.guru/photos/projects/majsin-dashborad.png",
|
||||||
|
category: "Analytics",
|
||||||
|
technologies: ["Angular", "Python", "TensorFlow", "AWS"],
|
||||||
|
featured: false,
|
||||||
|
detailedDescription:
|
||||||
|
"An advanced analytics dashboard powered by machine learning, providing deep insights and customizable reporting for enterprise-level decision making.",
|
||||||
|
images: [
|
||||||
|
"https://tech-masters.guru/photos/projects/majsin-dashborad.png",
|
||||||
|
"https://tech-masters.guru/photos/projects/majsin-dashborad.png",
|
||||||
|
"https://tech-masters.guru/photos/projects/majsin-dashborad.png",
|
||||||
|
],
|
||||||
|
liveUrl: "https://majsin-dashboard.com",
|
||||||
|
githubUrl: "https://github.com/company/majsin-dashboard",
|
||||||
|
features: [
|
||||||
|
"Machine learning insights",
|
||||||
|
"Customizable reporting",
|
||||||
|
"Real-time data processing",
|
||||||
|
"Advanced visualizations",
|
||||||
|
"API integration capabilities",
|
||||||
|
],
|
||||||
|
duration: "6 months",
|
||||||
|
teamSize: "7 developers",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "p8",
|
||||||
|
title: "SVU Hardware Management",
|
||||||
|
description:
|
||||||
|
"Comprehensive hardware inventory and management system for educational institutions with asset tracking.",
|
||||||
|
imageUrl: "https://tech-masters.guru/photos/projects/svu-hw.png",
|
||||||
|
category: "Education",
|
||||||
|
technologies: ["React", "Node.js", "MySQL", "Docker"],
|
||||||
|
featured: false,
|
||||||
|
detailedDescription:
|
||||||
|
"A comprehensive hardware management system designed for educational institutions, featuring asset tracking, maintenance scheduling, and detailed reporting capabilities.",
|
||||||
|
images: [
|
||||||
|
"https://tech-masters.guru/photos/projects/svu-hw.png",
|
||||||
|
"https://tech-masters.guru/photos/projects/svu-hw.png",
|
||||||
|
"https://tech-masters.guru/photos/projects/svu-hw.png",
|
||||||
|
],
|
||||||
|
liveUrl: "https://svu-hardware.com",
|
||||||
|
githubUrl: "https://github.com/company/svu-hardware",
|
||||||
|
features: [
|
||||||
|
"Asset tracking and management",
|
||||||
|
"Maintenance scheduling",
|
||||||
|
"Inventory control",
|
||||||
|
"Detailed reporting",
|
||||||
|
"User access management",
|
||||||
|
],
|
||||||
|
duration: "5 months",
|
||||||
|
teamSize: "6 developers",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const categories = [
|
||||||
|
"All",
|
||||||
|
"Enterprise Software",
|
||||||
|
"Legal Software",
|
||||||
|
"FinTech",
|
||||||
|
"E-commerce",
|
||||||
|
"Business Intelligence",
|
||||||
|
"Security",
|
||||||
|
"Analytics",
|
||||||
|
"Education",
|
||||||
|
];
|
||||||
|
|
||||||
export default function ProjectsPage() {
|
export default function ProjectsPage() {
|
||||||
|
const [selectedCategory, setSelectedCategory] = useState("All");
|
||||||
|
const [selectedProject, setSelectedProject] = useState<Project | null>(null);
|
||||||
|
const [isModalVisible, setIsModalVisible] = useState(false);
|
||||||
|
const [visibleProjects, setVisibleProjects] = useState(6);
|
||||||
|
|
||||||
|
const filteredProjects =
|
||||||
|
selectedCategory === "All"
|
||||||
|
? projectsData
|
||||||
|
: projectsData.filter((project) => project.category === selectedCategory);
|
||||||
|
|
||||||
|
const displayedProjects = filteredProjects.slice(0, visibleProjects);
|
||||||
|
|
||||||
|
const handleProjectClick = (project: Project) => {
|
||||||
|
setSelectedProject(project);
|
||||||
|
setIsModalVisible(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleModalClose = () => {
|
||||||
|
setIsModalVisible(false);
|
||||||
|
setTimeout(() => {
|
||||||
|
setSelectedProject(null);
|
||||||
|
}, 300);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleLoadMore = () => {
|
||||||
|
setVisibleProjects((prev) => Math.min(prev + 6, filteredProjects.length));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCategoryClick = (category: string) => {
|
||||||
|
if (selectedCategory === category) {
|
||||||
|
// If clicking on the same category, remove the filter
|
||||||
|
setSelectedCategory("All");
|
||||||
|
} else {
|
||||||
|
// Otherwise, set the new category
|
||||||
|
setSelectedCategory(category);
|
||||||
|
}
|
||||||
|
setVisibleProjects(6);
|
||||||
|
};
|
||||||
|
|
||||||
|
const containerVariants = {
|
||||||
|
hidden: { opacity: 0 },
|
||||||
|
visible: {
|
||||||
|
opacity: 1,
|
||||||
|
transition: {
|
||||||
|
staggerChildren: 0.1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const itemVariants = {
|
||||||
|
hidden: { y: 20, opacity: 0 },
|
||||||
|
visible: {
|
||||||
|
y: 0,
|
||||||
|
opacity: 1,
|
||||||
|
transition: { duration: 0.5 },
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<main className="pt-20">
|
<main className={styles.main}>
|
||||||
<ProjectsShowcase />
|
{/* Hero Section */}
|
||||||
|
<section className={styles.heroSection}>
|
||||||
|
<div className={styles.heroBackground}>
|
||||||
|
<div className={styles.heroOrb1}></div>
|
||||||
|
<div className={styles.heroOrb2}></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.heroContent}>
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.8 }}
|
||||||
|
>
|
||||||
|
<Title level={1} className={styles.heroTitle}>
|
||||||
|
Our <span className={styles.gradientText}>Projects</span>
|
||||||
|
</Title>
|
||||||
|
<Paragraph className={styles.heroSubtitle}>
|
||||||
|
Explore our portfolio of innovative solutions that have
|
||||||
|
transformed businesses and delivered exceptional results across
|
||||||
|
various industries.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<div className={styles.projectStats}>
|
||||||
|
<div className={styles.statItem}>
|
||||||
|
<span className={styles.statNumber}>50+</span>
|
||||||
|
<span className={styles.statLabel}>Projects Completed</span>
|
||||||
|
</div>
|
||||||
|
<div className={styles.statItem}>
|
||||||
|
<span className={styles.statNumber}>8</span>
|
||||||
|
<span className={styles.statLabel}>Industries Served</span>
|
||||||
|
</div>
|
||||||
|
<div className={styles.statItem}>
|
||||||
|
<span className={styles.statNumber}>100%</span>
|
||||||
|
<span className={styles.statLabel}>Client Satisfaction</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Projects Section */}
|
||||||
|
<section className={styles.projectsSection}>
|
||||||
|
<div className={styles.projectsBackground}></div>
|
||||||
|
<div className={styles.projectsContainer}>
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.8 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className={styles.projectsHeader}
|
||||||
|
>
|
||||||
|
<Title level={2} className={styles.projectsTitle}>
|
||||||
|
Featured <span className={styles.gradientText}>Work</span>
|
||||||
|
</Title>
|
||||||
|
<Paragraph className={styles.projectsSubtitle}>
|
||||||
|
Discover our latest projects and see how we've helped businesses
|
||||||
|
achieve their digital transformation goals.
|
||||||
|
</Paragraph>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Filter Section */}
|
||||||
|
<div className={styles.filterSection}>
|
||||||
|
<div className={styles.filterButtons}>
|
||||||
|
{categories.map((category) => (
|
||||||
|
<button
|
||||||
|
key={category}
|
||||||
|
className={`${styles.filterButton} ${
|
||||||
|
selectedCategory === category ? styles.active : ""
|
||||||
|
}`}
|
||||||
|
onClick={() => handleCategoryClick(category)}
|
||||||
|
>
|
||||||
|
{category}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Projects Grid */}
|
||||||
|
<motion.div
|
||||||
|
variants={containerVariants}
|
||||||
|
initial="hidden"
|
||||||
|
whileInView="visible"
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className={styles.projectsGrid}
|
||||||
|
>
|
||||||
|
{displayedProjects.map((project) => (
|
||||||
|
<motion.div key={project.id} variants={itemVariants}>
|
||||||
|
<Card
|
||||||
|
hoverable
|
||||||
|
onClick={() => handleProjectClick(project)}
|
||||||
|
className={styles.projectCard}
|
||||||
|
cover={
|
||||||
|
<div className={styles.projectImageContainer}>
|
||||||
|
<Image
|
||||||
|
alt={project.title}
|
||||||
|
src={project.imageUrl}
|
||||||
|
className={styles.projectImage}
|
||||||
|
width={400}
|
||||||
|
height={250}
|
||||||
|
/>
|
||||||
|
<div className={styles.projectOverlay}>
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
shape="circle"
|
||||||
|
icon={<EyeOutlined />}
|
||||||
|
className={styles.viewButton}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{project.featured && (
|
||||||
|
<Badge.Ribbon
|
||||||
|
text="Featured"
|
||||||
|
className={styles.featuredBadge}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<div className={styles.projectContent}>
|
||||||
|
<div className={styles.categoryTag}>
|
||||||
|
<Tag color="blue">{project.category}</Tag>
|
||||||
|
</div>
|
||||||
|
<Title level={4} className={styles.projectTitle}>
|
||||||
|
{project.title}
|
||||||
|
</Title>
|
||||||
|
<Paragraph className={styles.projectDescription}>
|
||||||
|
{project.description}
|
||||||
|
</Paragraph>
|
||||||
|
<div className={styles.technologiesList}>
|
||||||
|
{project.technologies.slice(0, 4).map((tech) => (
|
||||||
|
<Tag key={tech} className={styles.techTag}>
|
||||||
|
{tech}
|
||||||
|
</Tag>
|
||||||
|
))}
|
||||||
|
{project.technologies.length > 4 && (
|
||||||
|
<Tag className={styles.techTag}>
|
||||||
|
+{project.technologies.length - 4} more
|
||||||
|
</Tag>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className={styles.projectMeta}>
|
||||||
|
<div className={styles.projectDuration}>
|
||||||
|
<RocketOutlined /> {project.duration}
|
||||||
|
</div>
|
||||||
|
<div className={styles.projectTeam}>
|
||||||
|
<UserOutlined /> {project.teamSize}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Load More Section */}
|
||||||
|
{visibleProjects < filteredProjects.length && (
|
||||||
|
<div className={styles.loadMoreSection}>
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
size="large"
|
||||||
|
onClick={handleLoadMore}
|
||||||
|
className={styles.loadMoreButton}
|
||||||
|
>
|
||||||
|
Load More Projects
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Project Details Modal */}
|
||||||
|
<AnimatePresence>
|
||||||
|
{isModalVisible && selectedProject && (
|
||||||
|
<Modal
|
||||||
|
open={isModalVisible}
|
||||||
|
onCancel={handleModalClose}
|
||||||
|
footer={null}
|
||||||
|
width={1000}
|
||||||
|
className={styles.projectModal}
|
||||||
|
closeIcon={<CloseOutlined />}
|
||||||
|
>
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, scale: 0.8 }}
|
||||||
|
animate={{ opacity: 1, scale: 1 }}
|
||||||
|
exit={{ opacity: 0, scale: 0.8 }}
|
||||||
|
transition={{ duration: 0.3 }}
|
||||||
|
>
|
||||||
|
<div style={{ padding: "20px 0" }}>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
alignItems: "flex-start",
|
||||||
|
marginBottom: "24px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<Title level={2} style={{ marginBottom: "8px" }}>
|
||||||
|
{selectedProject.title}
|
||||||
|
</Title>
|
||||||
|
<Tag color="blue">{selectedProject.category}</Tag>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: "flex", gap: "12px" }}>
|
||||||
|
{selectedProject.liveUrl && (
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
icon={<LinkOutlined />}
|
||||||
|
href={selectedProject.liveUrl}
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
Live Demo
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
{selectedProject.githubUrl && (
|
||||||
|
<Button
|
||||||
|
icon={<GithubOutlined />}
|
||||||
|
href={selectedProject.githubUrl}
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
View Code
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{ marginBottom: "24px" }}>
|
||||||
|
<Carousel autoplay dots={{ className: "custom-dots" }}>
|
||||||
|
{selectedProject.images.map((image, index) => (
|
||||||
|
<div key={index}>
|
||||||
|
<Image
|
||||||
|
src={image}
|
||||||
|
alt={`${selectedProject.title} - Image ${index + 1}`}
|
||||||
|
width={800}
|
||||||
|
height={400}
|
||||||
|
style={{
|
||||||
|
width: "100%",
|
||||||
|
height: "auto",
|
||||||
|
borderRadius: "8px",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</Carousel>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Row gutter={[24, 24]}>
|
||||||
|
<Col xs={24} md={12}>
|
||||||
|
<Title level={4}>Project Overview</Title>
|
||||||
|
<Paragraph>{selectedProject.detailedDescription}</Paragraph>
|
||||||
|
|
||||||
|
<Title level={4} style={{ marginTop: "24px" }}>
|
||||||
|
Key Features
|
||||||
|
</Title>
|
||||||
|
<ul>
|
||||||
|
{selectedProject.features.map((feature, index) => (
|
||||||
|
<li key={index} style={{ marginBottom: "8px" }}>
|
||||||
|
{feature}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</Col>
|
||||||
|
<Col xs={24} md={12}>
|
||||||
|
<Title level={4}>Project Details</Title>
|
||||||
|
<div style={{ marginBottom: "16px" }}>
|
||||||
|
<Text strong>Duration:</Text> {selectedProject.duration}
|
||||||
|
</div>
|
||||||
|
<div style={{ marginBottom: "16px" }}>
|
||||||
|
<Text strong>Team Size:</Text> {selectedProject.teamSize}
|
||||||
|
</div>
|
||||||
|
<div style={{ marginBottom: "16px" }}>
|
||||||
|
<Text strong>Technologies:</Text>
|
||||||
|
<div style={{ marginTop: "8px" }}>
|
||||||
|
{selectedProject.technologies.map((tech) => (
|
||||||
|
<Tag key={tech} style={{ marginBottom: "4px" }}>
|
||||||
|
{tech}
|
||||||
|
</Tag>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</Modal>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
|
||||||
|
<Footer />
|
||||||
</main>
|
</main>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,7 +2,8 @@ import type { Metadata } from "next";
|
|||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: "Our Services | Tech Master - Digital Transformation & IT Solutions",
|
title: "Our Services | Tech Master - Digital Transformation & IT Solutions",
|
||||||
description: "Explore our comprehensive IT services including web development, mobile apps, AI solutions, ERP systems, e-commerce platforms, and digital transformation services in Dubai.",
|
description:
|
||||||
|
"Explore our comprehensive IT services including web development, mobile apps, AI solutions, ERP systems, e-commerce platforms, and digital transformation services in Dubai.",
|
||||||
keywords: [
|
keywords: [
|
||||||
"web development Dubai",
|
"web development Dubai",
|
||||||
"mobile app development",
|
"mobile app development",
|
||||||
@@ -12,11 +13,12 @@ export const metadata: Metadata = {
|
|||||||
"digital transformation",
|
"digital transformation",
|
||||||
"cloud migration",
|
"cloud migration",
|
||||||
"cybersecurity services",
|
"cybersecurity services",
|
||||||
"IT consulting Dubai"
|
"IT consulting Dubai",
|
||||||
],
|
],
|
||||||
openGraph: {
|
openGraph: {
|
||||||
title: "Our Services | Tech Master - Digital Transformation & IT Solutions",
|
title: "Our Services | Tech Master - Digital Transformation & IT Solutions",
|
||||||
description: "Comprehensive IT services including web development, mobile apps, AI solutions, ERP systems, and digital transformation in Dubai.",
|
description:
|
||||||
|
"Comprehensive IT services including web development, mobile apps, AI solutions, ERP systems, and digital transformation in Dubai.",
|
||||||
url: "https://tech-masters.guru/services",
|
url: "https://tech-masters.guru/services",
|
||||||
},
|
},
|
||||||
alternates: {
|
alternates: {
|
||||||
@@ -30,4 +32,4 @@ export default function ServicesLayout({
|
|||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
}) {
|
}) {
|
||||||
return children;
|
return children;
|
||||||
}
|
}
|
||||||
|
|||||||
626
src/app/services/page.module.css
Normal file
626
src/app/services/page.module.css
Normal file
@@ -0,0 +1,626 @@
|
|||||||
|
/* Services Page Enhanced Styles */
|
||||||
|
.main {
|
||||||
|
padding-top: 80px;
|
||||||
|
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hero Section */
|
||||||
|
.heroSection {
|
||||||
|
position: relative;
|
||||||
|
padding: 80px 0 60px;
|
||||||
|
background: linear-gradient(135deg, #0F0525 0%, #1a0b3a 50%, #2A0B45 100%);
|
||||||
|
color: white;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heroBackground {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
opacity: 0.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heroOrb1 {
|
||||||
|
position: absolute;
|
||||||
|
top: -100px;
|
||||||
|
left: -100px;
|
||||||
|
width: 300px;
|
||||||
|
height: 300px;
|
||||||
|
background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
|
||||||
|
border-radius: 50%;
|
||||||
|
filter: blur(40px);
|
||||||
|
animation: float 6s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heroOrb2 {
|
||||||
|
position: absolute;
|
||||||
|
top: 50px;
|
||||||
|
right: -150px;
|
||||||
|
width: 250px;
|
||||||
|
height: 250px;
|
||||||
|
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
|
||||||
|
border-radius: 50%;
|
||||||
|
filter: blur(35px);
|
||||||
|
animation: float 8s ease-in-out infinite reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes float {
|
||||||
|
0%, 100% {
|
||||||
|
transform: translateY(0px);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateY(-20px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.heroContent {
|
||||||
|
position: relative;
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 20px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heroTitle {
|
||||||
|
font-size: 3.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
line-height: 1.2;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gradientText {
|
||||||
|
background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heroSubtitle {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
color: #cbd5e1;
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto 30px;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.serviceStats {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 40px;
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.statItem {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.statNumber {
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #a855f7;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.statLabel {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: #94a3b8;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hero Footer */
|
||||||
|
.heroFooter {
|
||||||
|
margin-top: 60px;
|
||||||
|
padding-top: 40px;
|
||||||
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.heroFooterContent {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||||
|
gap: 40px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerColumn {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerColumnTitle {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: white;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerColumnIcon {
|
||||||
|
color: #a855f7;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerLinks {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerLink {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerLink a {
|
||||||
|
color: #cbd5e1;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerLink a:hover {
|
||||||
|
color: #a855f7;
|
||||||
|
transform: translateX(4px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerLinkIcon {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerBottom {
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 30px;
|
||||||
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerBottomText {
|
||||||
|
color: #94a3b8;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.socialLinks {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.socialLink {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.socialLink:hover {
|
||||||
|
background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copyright {
|
||||||
|
color: #64748b;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Services Section */
|
||||||
|
.servicesSection {
|
||||||
|
padding: 80px 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.servicesBackground {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, rgba(236, 72, 153, 0.05) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.servicesContainer {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 20px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.servicesHeader {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.servicesTitle {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
color: #1e293b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.servicesSubtitle {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: #64748b;
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.servicesGrid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||||||
|
gap: 30px;
|
||||||
|
margin-bottom: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Service Cards */
|
||||||
|
.serviceCard {
|
||||||
|
background: white;
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 40px;
|
||||||
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.serviceCard::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 4px;
|
||||||
|
background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.serviceCard:hover {
|
||||||
|
transform: translateY(-10px);
|
||||||
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.serviceIconWrapper {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
border-radius: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.serviceCard:hover .serviceIconWrapper {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.serviceIcon {
|
||||||
|
font-size: 32px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Service Icon Colors */
|
||||||
|
.iconWebDev {
|
||||||
|
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconBranding {
|
||||||
|
background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconEcommerce {
|
||||||
|
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconSEO {
|
||||||
|
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconMobile {
|
||||||
|
background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconCloud {
|
||||||
|
background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconAI {
|
||||||
|
background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconConsulting {
|
||||||
|
background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.serviceTitle {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #1e293b;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
line-height: 1.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.serviceDescription {
|
||||||
|
color: #64748b;
|
||||||
|
line-height: 1.6;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.serviceFeatures {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0 0 24px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.serviceFeature {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
color: #64748b;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.serviceFeature::before {
|
||||||
|
content: '✓';
|
||||||
|
color: #10b981;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.learnMoreBtn {
|
||||||
|
background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
|
||||||
|
border: none;
|
||||||
|
color: white;
|
||||||
|
padding: 12px 24px;
|
||||||
|
border-radius: 25px;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.learnMoreBtn:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 8px 25px rgba(139, 92, 246, 0.3);
|
||||||
|
background: linear-gradient(135deg, #7c3aed 0%, #db2777 100%);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Process Section */
|
||||||
|
.processSection {
|
||||||
|
padding: 80px 0;
|
||||||
|
background: white;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.processBackground {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.processContainer {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 20px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.processHeader {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.processTitle {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
color: #1e293b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.processSubtitle {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: #64748b;
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.processSteps {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||||
|
gap: 30px;
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.processStep {
|
||||||
|
text-align: center;
|
||||||
|
padding: 30px 20px;
|
||||||
|
background: white;
|
||||||
|
border-radius: 16px;
|
||||||
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.processStep:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stepNumber {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 0 auto 20px;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stepTitle {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #1e293b;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stepDescription {
|
||||||
|
color: #64748b;
|
||||||
|
line-height: 1.6;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* CTA Section */
|
||||||
|
.ctaSection {
|
||||||
|
padding: 80px 0;
|
||||||
|
background: linear-gradient(135deg, #0F0525 0%, #1a0b3a 50%, #2A0B45 100%);
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ctaContainer {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ctaTitle {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ctaSubtitle {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: #cbd5e1;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ctaButton {
|
||||||
|
background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
|
||||||
|
border: none;
|
||||||
|
color: white;
|
||||||
|
padding: 16px 32px;
|
||||||
|
border-radius: 30px;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ctaButton:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 12px 35px rgba(139, 92, 246, 0.4);
|
||||||
|
background: linear-gradient(135deg, #7c3aed 0%, #db2777 100%);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive Design */
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
.servicesGrid {
|
||||||
|
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));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.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 {
|
||||||
|
padding: 30px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.processSteps {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ctaTitle {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.heroTitle {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.serviceCard {
|
||||||
|
padding: 25px 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.servicesTitle,
|
||||||
|
.processTitle {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,11 +1,560 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import ServicesSection from "../components/Services/Services";
|
import {
|
||||||
|
ArrowRightOutlined,
|
||||||
|
BulbOutlined,
|
||||||
|
CloudOutlined,
|
||||||
|
CodeOutlined,
|
||||||
|
EnvironmentOutlined,
|
||||||
|
FacebookOutlined,
|
||||||
|
GlobalOutlined,
|
||||||
|
InstagramOutlined,
|
||||||
|
LineChartOutlined,
|
||||||
|
LinkedinOutlined,
|
||||||
|
MailOutlined,
|
||||||
|
MobileOutlined,
|
||||||
|
PhoneOutlined,
|
||||||
|
RobotOutlined,
|
||||||
|
RocketOutlined,
|
||||||
|
ShoppingOutlined,
|
||||||
|
TeamOutlined,
|
||||||
|
TrophyOutlined,
|
||||||
|
TwitterOutlined,
|
||||||
|
} from "@ant-design/icons";
|
||||||
|
import { Button, Card, Typography } from "antd";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import React, { useEffect, useState } from "react";
|
||||||
|
import styles from "./page.module.css";
|
||||||
|
|
||||||
|
const { Title, Paragraph, Text } = Typography;
|
||||||
|
|
||||||
|
interface Service {
|
||||||
|
id: string;
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
icon: React.ReactNode;
|
||||||
|
iconClass: string;
|
||||||
|
features: string[];
|
||||||
|
preferenceMatches: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
const allServices: Service[] = [
|
||||||
|
{
|
||||||
|
id: "webdev",
|
||||||
|
title: "Web Development",
|
||||||
|
description:
|
||||||
|
"Custom web applications with cutting-edge technologies and responsive design.",
|
||||||
|
icon: <CodeOutlined />,
|
||||||
|
iconClass: styles.iconWebDev,
|
||||||
|
features: [
|
||||||
|
"React & Next.js",
|
||||||
|
"Node.js Backend",
|
||||||
|
"Responsive Design",
|
||||||
|
"Performance Optimization",
|
||||||
|
],
|
||||||
|
preferenceMatches: ["ecommerce", "cloud", "seo"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "branding",
|
||||||
|
title: "Branding & Identity",
|
||||||
|
description:
|
||||||
|
"Complete brand identity packages including logos, guidelines, and visual systems.",
|
||||||
|
icon: <RocketOutlined />,
|
||||||
|
iconClass: styles.iconBranding,
|
||||||
|
features: [
|
||||||
|
"Logo Design",
|
||||||
|
"Brand Guidelines",
|
||||||
|
"Visual Identity",
|
||||||
|
"Marketing Materials",
|
||||||
|
],
|
||||||
|
preferenceMatches: ["branding", "seo"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "ecom",
|
||||||
|
title: "E-commerce Solutions",
|
||||||
|
description:
|
||||||
|
"Full-stack e-commerce platforms with secure payment integration and inventory management.",
|
||||||
|
icon: <ShoppingOutlined />,
|
||||||
|
iconClass: styles.iconEcommerce,
|
||||||
|
features: [
|
||||||
|
"Payment Integration",
|
||||||
|
"Inventory Management",
|
||||||
|
"Order Processing",
|
||||||
|
"Analytics Dashboard",
|
||||||
|
],
|
||||||
|
preferenceMatches: ["ecommerce", "branding"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "seo",
|
||||||
|
title: "SEO & Marketing",
|
||||||
|
description:
|
||||||
|
"Data-driven digital marketing strategies to improve visibility and drive conversions.",
|
||||||
|
icon: <LineChartOutlined />,
|
||||||
|
iconClass: styles.iconSEO,
|
||||||
|
features: [
|
||||||
|
"Keyword Research",
|
||||||
|
"Content Strategy",
|
||||||
|
"Technical SEO",
|
||||||
|
"Performance Tracking",
|
||||||
|
],
|
||||||
|
preferenceMatches: ["seo", "branding"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "mobile",
|
||||||
|
title: "Mobile Development",
|
||||||
|
description:
|
||||||
|
"Native and cross-platform mobile applications for iOS and Android.",
|
||||||
|
icon: <MobileOutlined />,
|
||||||
|
iconClass: styles.iconMobile,
|
||||||
|
features: [
|
||||||
|
"iOS Development",
|
||||||
|
"Android Development",
|
||||||
|
"Cross-platform",
|
||||||
|
"App Store Optimization",
|
||||||
|
],
|
||||||
|
preferenceMatches: ["mobile", "ai"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "cloud",
|
||||||
|
title: "Cloud Solutions",
|
||||||
|
description:
|
||||||
|
"Scalable cloud infrastructures, migrations, and DevOps automation.",
|
||||||
|
icon: <CloudOutlined />,
|
||||||
|
iconClass: styles.iconCloud,
|
||||||
|
features: [
|
||||||
|
"AWS/Azure/GCP",
|
||||||
|
"Infrastructure Setup",
|
||||||
|
"DevOps Automation",
|
||||||
|
"Scalability",
|
||||||
|
],
|
||||||
|
preferenceMatches: ["cloud", "ai"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "ai",
|
||||||
|
title: "AI & Machine Learning",
|
||||||
|
description:
|
||||||
|
"Custom AI solutions for automation, prediction, and data analysis.",
|
||||||
|
icon: <RobotOutlined />,
|
||||||
|
iconClass: styles.iconAI,
|
||||||
|
features: [
|
||||||
|
"Custom AI Models",
|
||||||
|
"Data Analysis",
|
||||||
|
"Process Automation",
|
||||||
|
"Predictive Analytics",
|
||||||
|
],
|
||||||
|
preferenceMatches: ["ai", "cloud"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "consulting",
|
||||||
|
title: "Global IT Consulting",
|
||||||
|
description:
|
||||||
|
"Strategic technology consulting to drive digital transformation and innovation.",
|
||||||
|
icon: <GlobalOutlined />,
|
||||||
|
iconClass: styles.iconConsulting,
|
||||||
|
features: [
|
||||||
|
"Technology Strategy",
|
||||||
|
"Digital Transformation",
|
||||||
|
"Project Management",
|
||||||
|
"Team Training",
|
||||||
|
],
|
||||||
|
preferenceMatches: ["cloud", "branding", "seo"],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const processSteps = [
|
||||||
|
{
|
||||||
|
number: "01",
|
||||||
|
title: "Discovery & Planning",
|
||||||
|
description:
|
||||||
|
"We analyze your requirements and create a comprehensive project plan tailored to your goals.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
number: "02",
|
||||||
|
title: "Design & Development",
|
||||||
|
description:
|
||||||
|
"Our expert team builds your solution using the latest technologies and best practices.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
number: "03",
|
||||||
|
title: "Testing & Quality",
|
||||||
|
description:
|
||||||
|
"Rigorous testing ensures your solution is robust, secure, and performs flawlessly.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
number: "04",
|
||||||
|
title: "Launch & Support",
|
||||||
|
description:
|
||||||
|
"We deploy your solution and provide ongoing support to ensure continued success.",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
export default function ServicesPage() {
|
export default function ServicesPage() {
|
||||||
|
const [services, setServices] = useState<Service[]>([]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// Sort services based on user preferences (empty for now)
|
||||||
|
setServices(allServices);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const containerVariants = {
|
||||||
|
hidden: { opacity: 0 },
|
||||||
|
visible: {
|
||||||
|
opacity: 1,
|
||||||
|
transition: {
|
||||||
|
staggerChildren: 0.1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const itemVariants = {
|
||||||
|
hidden: { y: 50, opacity: 0 },
|
||||||
|
visible: {
|
||||||
|
y: 0,
|
||||||
|
opacity: 1,
|
||||||
|
transition: { duration: 0.5 },
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<main className="pt-20">
|
<main className={styles.main}>
|
||||||
<ServicesSection userPreferences={[]} />
|
{/* Hero Section */}
|
||||||
|
<section className={styles.heroSection}>
|
||||||
|
<div className={styles.heroBackground}>
|
||||||
|
<div className={styles.heroOrb1}></div>
|
||||||
|
<div className={styles.heroOrb2}></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.heroContent}>
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.8 }}
|
||||||
|
>
|
||||||
|
<Title level={1} className={styles.heroTitle}>
|
||||||
|
Our <span className={styles.gradientText}>Services</span>
|
||||||
|
</Title>
|
||||||
|
<Paragraph className={styles.heroSubtitle}>
|
||||||
|
Innovative technology solutions customized for your business
|
||||||
|
needs. From web development to AI solutions, we deliver excellence
|
||||||
|
in every project.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<div className={styles.serviceStats}>
|
||||||
|
<div className={styles.statItem}>
|
||||||
|
<span className={styles.statNumber}>50+</span>
|
||||||
|
<span className={styles.statLabel}>Projects Completed</span>
|
||||||
|
</div>
|
||||||
|
<div className={styles.statItem}>
|
||||||
|
<span className={styles.statNumber}>8</span>
|
||||||
|
<span className={styles.statLabel}>Service Categories</span>
|
||||||
|
</div>
|
||||||
|
<div className={styles.statItem}>
|
||||||
|
<span className={styles.statNumber}>100%</span>
|
||||||
|
<span className={styles.statLabel}>Client Satisfaction</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Hero Footer */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.8, delay: 0.4 }}
|
||||||
|
className={styles.heroFooter}
|
||||||
|
>
|
||||||
|
<div className={styles.heroFooterContent}>
|
||||||
|
<div className={styles.footerColumn}>
|
||||||
|
<div className={styles.footerColumnTitle}>
|
||||||
|
<TeamOutlined className={styles.footerColumnIcon} />
|
||||||
|
Company
|
||||||
|
</div>
|
||||||
|
<ul className={styles.footerLinks}>
|
||||||
|
<li className={styles.footerLink}>
|
||||||
|
<a href="/about">
|
||||||
|
<ArrowRightOutlined className={styles.footerLinkIcon} />
|
||||||
|
About Us
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className={styles.footerLink}>
|
||||||
|
<a href="/services">
|
||||||
|
<ArrowRightOutlined className={styles.footerLinkIcon} />
|
||||||
|
Our Services
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className={styles.footerLink}>
|
||||||
|
<a href="/projects">
|
||||||
|
<ArrowRightOutlined className={styles.footerLinkIcon} />
|
||||||
|
Portfolio
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className={styles.footerLink}>
|
||||||
|
<a href="/contact">
|
||||||
|
<ArrowRightOutlined className={styles.footerLinkIcon} />
|
||||||
|
Contact Us
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.footerColumn}>
|
||||||
|
<div className={styles.footerColumnTitle}>
|
||||||
|
<BulbOutlined className={styles.footerColumnIcon} />
|
||||||
|
Services
|
||||||
|
</div>
|
||||||
|
<ul className={styles.footerLinks}>
|
||||||
|
<li className={styles.footerLink}>
|
||||||
|
<a href="/services#webdev">
|
||||||
|
<ArrowRightOutlined className={styles.footerLinkIcon} />
|
||||||
|
Web Development
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className={styles.footerLink}>
|
||||||
|
<a href="/services#mobile">
|
||||||
|
<ArrowRightOutlined className={styles.footerLinkIcon} />
|
||||||
|
Mobile Apps
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className={styles.footerLink}>
|
||||||
|
<a href="/services#ai">
|
||||||
|
<ArrowRightOutlined className={styles.footerLinkIcon} />
|
||||||
|
AI Solutions
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className={styles.footerLink}>
|
||||||
|
<a href="/services#cloud">
|
||||||
|
<ArrowRightOutlined className={styles.footerLinkIcon} />
|
||||||
|
Cloud Services
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.footerColumn}>
|
||||||
|
<div className={styles.footerColumnTitle}>
|
||||||
|
<TrophyOutlined className={styles.footerColumnIcon} />
|
||||||
|
Resources
|
||||||
|
</div>
|
||||||
|
<ul className={styles.footerLinks}>
|
||||||
|
<li className={styles.footerLink}>
|
||||||
|
<a href="/blog">
|
||||||
|
<ArrowRightOutlined className={styles.footerLinkIcon} />
|
||||||
|
Blog & Insights
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className={styles.footerLink}>
|
||||||
|
<a href="/case-studies">
|
||||||
|
<ArrowRightOutlined className={styles.footerLinkIcon} />
|
||||||
|
Case Studies
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className={styles.footerLink}>
|
||||||
|
<a href="/whitepapers">
|
||||||
|
<ArrowRightOutlined className={styles.footerLinkIcon} />
|
||||||
|
Whitepapers
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className={styles.footerLink}>
|
||||||
|
<a href="/webinars">
|
||||||
|
<ArrowRightOutlined className={styles.footerLinkIcon} />
|
||||||
|
Webinars
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.footerColumn}>
|
||||||
|
<div className={styles.footerColumnTitle}>
|
||||||
|
<MailOutlined className={styles.footerColumnIcon} />
|
||||||
|
Contact Info
|
||||||
|
</div>
|
||||||
|
<ul className={styles.footerLinks}>
|
||||||
|
<li className={styles.footerLink}>
|
||||||
|
<a href="mailto:info@techmaster.com">
|
||||||
|
<MailOutlined className={styles.footerLinkIcon} />
|
||||||
|
info@techmaster.com
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className={styles.footerLink}>
|
||||||
|
<a href="tel:+15551234567">
|
||||||
|
<PhoneOutlined className={styles.footerLinkIcon} />
|
||||||
|
+1 (555) 123-4567
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className={styles.footerLink}>
|
||||||
|
<a href="#">
|
||||||
|
<EnvironmentOutlined className={styles.footerLinkIcon} />
|
||||||
|
San Francisco, CA
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className={styles.footerLink}>
|
||||||
|
<a href="/support">
|
||||||
|
<ArrowRightOutlined className={styles.footerLinkIcon} />
|
||||||
|
24/7 Support
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.footerBottom}>
|
||||||
|
<Paragraph className={styles.footerBottomText}>
|
||||||
|
Ready to transform your business? Let's discuss your next project.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<div className={styles.socialLinks}>
|
||||||
|
<a href="#" className={styles.socialLink}>
|
||||||
|
<FacebookOutlined />
|
||||||
|
</a>
|
||||||
|
<a href="#" className={styles.socialLink}>
|
||||||
|
<TwitterOutlined />
|
||||||
|
</a>
|
||||||
|
<a href="#" className={styles.socialLink}>
|
||||||
|
<LinkedinOutlined />
|
||||||
|
</a>
|
||||||
|
<a href="#" className={styles.socialLink}>
|
||||||
|
<InstagramOutlined />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.copyright}>
|
||||||
|
© 2024 Tech Master. All rights reserved. | Privacy Policy | Terms
|
||||||
|
of Service
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Services Section */}
|
||||||
|
<section className={styles.servicesSection}>
|
||||||
|
<div className={styles.servicesBackground}></div>
|
||||||
|
<div className={styles.servicesContainer}>
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.8 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className={styles.servicesHeader}
|
||||||
|
>
|
||||||
|
<Title level={2} className={styles.servicesTitle}>
|
||||||
|
What We <span className={styles.gradientText}>Offer</span>
|
||||||
|
</Title>
|
||||||
|
<Paragraph className={styles.servicesSubtitle}>
|
||||||
|
Comprehensive technology solutions designed to drive your business
|
||||||
|
forward. Each service is crafted with precision and delivered with
|
||||||
|
excellence.
|
||||||
|
</Paragraph>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
variants={containerVariants}
|
||||||
|
initial="hidden"
|
||||||
|
whileInView="visible"
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className={styles.servicesGrid}
|
||||||
|
>
|
||||||
|
{services.map((service) => (
|
||||||
|
<motion.div key={service.id} variants={itemVariants}>
|
||||||
|
<Card className={styles.serviceCard}>
|
||||||
|
<div
|
||||||
|
className={`${styles.serviceIconWrapper} ${service.iconClass}`}
|
||||||
|
>
|
||||||
|
{service.icon}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Title level={3} className={styles.serviceTitle}>
|
||||||
|
{service.title}
|
||||||
|
</Title>
|
||||||
|
|
||||||
|
<Paragraph className={styles.serviceDescription}>
|
||||||
|
{service.description}
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<ul className={styles.serviceFeatures}>
|
||||||
|
{service.features.map((feature, index) => (
|
||||||
|
<li key={index} className={styles.serviceFeature}>
|
||||||
|
{feature}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<Button type="link" className={styles.learnMoreBtn}>
|
||||||
|
Learn More <ArrowRightOutlined />
|
||||||
|
</Button>
|
||||||
|
</Card>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Process Section */}
|
||||||
|
<section className={styles.processSection}>
|
||||||
|
<div className={styles.processBackground}></div>
|
||||||
|
<div className={styles.processContainer}>
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.8 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className={styles.processHeader}
|
||||||
|
>
|
||||||
|
<Title level={2} className={styles.processTitle}>
|
||||||
|
Our <span className={styles.gradientText}>Process</span>
|
||||||
|
</Title>
|
||||||
|
<Paragraph className={styles.processSubtitle}>
|
||||||
|
A proven methodology that ensures successful project delivery and
|
||||||
|
exceeds expectations.
|
||||||
|
</Paragraph>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
variants={containerVariants}
|
||||||
|
initial="hidden"
|
||||||
|
whileInView="visible"
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className={styles.processSteps}
|
||||||
|
>
|
||||||
|
{processSteps.map((step, index) => (
|
||||||
|
<motion.div key={index} variants={itemVariants}>
|
||||||
|
<div className={styles.processStep}>
|
||||||
|
<div className={styles.stepNumber}>{step.number}</div>
|
||||||
|
<Title level={4} className={styles.stepTitle}>
|
||||||
|
{step.title}
|
||||||
|
</Title>
|
||||||
|
<Paragraph className={styles.stepDescription}>
|
||||||
|
{step.description}
|
||||||
|
</Paragraph>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* CTA Section */}
|
||||||
|
<section className={styles.ctaSection}>
|
||||||
|
<div className={styles.ctaContainer}>
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.8 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
>
|
||||||
|
<Title level={2} className={styles.ctaTitle}>
|
||||||
|
Ready to Start Your{" "}
|
||||||
|
<span className={styles.gradientText}>Project</span>?
|
||||||
|
</Title>
|
||||||
|
<Paragraph className={styles.ctaSubtitle}>
|
||||||
|
Let's discuss how we can help bring your vision to life. Our team
|
||||||
|
is ready to create something amazing together.
|
||||||
|
</Paragraph>
|
||||||
|
<Button size="large" className={styles.ctaButton}>
|
||||||
|
Get Started Today <ArrowRightOutlined />
|
||||||
|
</Button>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
</main>
|
</main>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user