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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user