diff --git a/src/app/components/Contact/ContactSection.module.css b/src/app/components/Contact/ContactSection.module.css index fce5bd7..b30a2c3 100644 --- a/src/app/components/Contact/ContactSection.module.css +++ b/src/app/components/Contact/ContactSection.module.css @@ -1,187 +1,190 @@ /* 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: radial-gradient(circle, rgba(24, 144, 255, 0.15) 0%, rgba(24, 144, 255, 0.05) 50%, rgba(0, 0, 0, 0) 70%); - 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; - background: linear-gradient(90deg, #1890ff, #096dd9); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - } - - .sectionSubtitle { - font-size: 1.1rem; - color: #666; - max-width: 600px; - margin: 0 auto; - } - + 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 { - 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; + padding: 24px; } - - .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: linear-gradient(135deg, #1890ff, #096dd9); - display: flex; - justify-content: center; - align-items: center; - box-shadow: 0 4px 8px rgba(24, 144, 255, 0.25); - } - - .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); + padding: 24px; + margin-top: 24px; } - - .formTitle { - margin-bottom: 24px !important; - color: #1890ff; +} + +@media (max-width: 768px) { + .contactSection { + padding: 60px 0; } - - .messageInput { - resize: none; + + .sectionTitle { + font-size: 2rem !important; } - - .submitButton { - height: 48px; - padding: 0 32px; - border-radius: 24px; - font-weight: 500; - background: linear-gradient(90deg, #1890ff, #096dd9); - border: none; - box-shadow: 0 4px 12px rgba(24, 144, 255, 0.15); - transition: all 0.3s ease; + + .mapContainer { + margin-bottom: 0; } - - .submitButton:hover { - transform: translateY(-2px); - box-shadow: 0 6px 16px rgba(24, 144, 255, 0.2); - background: linear-gradient(90deg, #40a9ff, #1890ff); - } - - @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; - } - } \ No newline at end of file +} diff --git a/src/app/components/Header/Header.module.css b/src/app/components/Header/Header.module.css index 0ceeaaa..1540633 100644 --- a/src/app/components/Header/Header.module.css +++ b/src/app/components/Header/Header.module.css @@ -21,11 +21,13 @@ } .logoContainer { + /* background: var(--primary) !important; */ display: flex; align-items: center; } .logoText { + color: #6e48aa !important; margin: 0 !important; font-weight: 700 !important; font-size: 1.5rem !important; diff --git a/src/app/components/Preferences/PreferencesSelector.module.css b/src/app/components/Preferences/PreferencesSelector.module.css index e8e26cc..221772c 100644 --- a/src/app/components/Preferences/PreferencesSelector.module.css +++ b/src/app/components/Preferences/PreferencesSelector.module.css @@ -46,7 +46,6 @@ .continueButton { min-width: 200px; height: 48px; - background: linear-gradient(90deg, #1890ff, #096dd9); border: none; border-radius: 24px; font-weight: 500; @@ -54,7 +53,6 @@ } .continueButton:hover { - background: linear-gradient(90deg, #40a9ff, #1890ff); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(24, 144, 255, 0.2); } diff --git a/src/app/components/ProjectsShowcase/ProjectsShowcaseSelector.module.css b/src/app/components/ProjectsShowcase/ProjectsShowcaseSelector.module.css index 72c978b..9ddd4b0 100644 --- a/src/app/components/ProjectsShowcase/ProjectsShowcaseSelector.module.css +++ b/src/app/components/ProjectsShowcase/ProjectsShowcaseSelector.module.css @@ -23,7 +23,7 @@ font-size: 2.5rem !important; font-weight: 700 !important; margin-bottom: 16px !important; - background: linear-gradient(90deg, #1890ff, #096dd9); + -webkit-background-clip: text; -webkit-text-fill-color: transparent; } @@ -91,13 +91,13 @@ .viewButton { background: #fff; - color: #1890ff; + color: #6e48aa; border: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .viewButton:hover { - background: #1890ff; + background: #6e48aa; color: #fff; } @@ -114,6 +114,7 @@ .techTag { margin: 0; + color: #6e48aa; } .featuredBadge { @@ -151,7 +152,7 @@ padding: 0 32px; border-radius: 24px; font-weight: 500; - background: linear-gradient(90deg, #1890ff, #096dd9); + border: none; box-shadow: 0 4px 12px rgba(24, 144, 255, 0.15); transition: all 0.3s ease; @@ -160,7 +161,7 @@ .viewAllButton:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(24, 144, 255, 0.2); - background: linear-gradient(90deg, #40a9ff, #1890ff); + } @media (max-width: 768px) { diff --git a/src/app/components/Services/ServicesSelector.module.css b/src/app/components/Services/ServicesSelector.module.css index b703c87..f5ec340 100644 --- a/src/app/components/Services/ServicesSelector.module.css +++ b/src/app/components/Services/ServicesSelector.module.css @@ -30,7 +30,7 @@ width: 500px; height: 500px; border-radius: 50%; - background: radial-gradient(circle, rgba(64, 169, 255, 0.2) 0%, rgba(24, 144, 255, 0.1) 50%, rgba(0, 0, 0, 0) 70%); + background: var(--primary-glow); top: -150px; right: -100px; filter: blur(50px); @@ -45,7 +45,7 @@ font-size: 2.5rem !important; font-weight: 700 !important; margin-bottom: 16px !important; - background: linear-gradient(90deg, #1890ff, #096dd9); + -webkit-background-clip: text; -webkit-text-fill-color: transparent; } @@ -81,7 +81,7 @@ .serviceIcon { font-size: 3rem; - color: #1890ff; + color: #6e48aa; } .learnMoreBtn { @@ -95,8 +95,8 @@ .servicesSection { padding: 60px 0; } - + .sectionTitle { font-size: 2rem !important; } -} \ No newline at end of file +} diff --git a/src/app/components/Testimonials/TestimonialsSection.module.css b/src/app/components/Testimonials/TestimonialsSection.module.css index baa14de..e5ddfd7 100644 --- a/src/app/components/Testimonials/TestimonialsSection.module.css +++ b/src/app/components/Testimonials/TestimonialsSection.module.css @@ -22,7 +22,7 @@ font-size: 2.5rem !important; font-weight: 700 !important; margin-bottom: 16px !important; - background: linear-gradient(90deg, #1890ff, #096dd9); + -webkit-background-clip: text; -webkit-text-fill-color: transparent; } @@ -134,7 +134,7 @@ padding: 0 32px; border-radius: 24px; font-weight: 500; - background: linear-gradient(90deg, #1890ff, #096dd9); + color: white; border: none; box-shadow: 0 4px 12px rgba(24, 144, 255, 0.15); @@ -146,7 +146,7 @@ .viewAllButton:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(24, 144, 255, 0.2); - background: linear-gradient(90deg, #40a9ff, #1890ff); + } @media (max-width: 768px) { diff --git a/src/app/globals.css b/src/app/globals.css index b79857f..4f74b0a 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -2,6 +2,13 @@ --background: #ffffff; --foreground: #171717; --primary: linear-gradient(135deg, #6e48aa 0%, #9d50bb 100%); + --secondary: linear-gradient(135deg, #00c1d4 0%, #ff5f6d 100%); + --primary-glow: radial-gradient( + circle, + rgba(152, 71, 232, 0.2) 0%, + rgba(71, 1, 90, 0.1) 50%, + rgba(0, 0, 0, 0) 70% + ); } @media (prefers-color-scheme: dark) { diff --git a/src/app/theme/themeConfig.ts b/src/app/theme/themeConfig.ts index 3c157b9..f9ddbd5 100644 --- a/src/app/theme/themeConfig.ts +++ b/src/app/theme/themeConfig.ts @@ -3,7 +3,8 @@ import type { ThemeConfig } from "antd"; // Cosmic Gradient Palette (Bright/Futuristic) export const gradientColors = { - primary: "linear-gradient(135deg, #6e48aa 0%, #9d50bb 100%)", + // note: gradient color doesn't take effects on texts + primary: "#6e48aa", // "linear-gradient(135deg, #6e48aa 0%, #9d50bb 100%)", secondary: "linear-gradient(135deg, #00C1D4 0%, #FF5F6D 100%)", darkSpace: "linear-gradient(to right, #0F0525, #2A0B45)", }; @@ -35,6 +36,9 @@ export const themeConfig: ThemeConfig = { colorTextHeading: gradientColors.primary, colorLink: gradientColors.primary, // Nebula pink }, + Tag:{ + colorPrimary: gradientColors.primary, + } }, };