From 86b010cb940e708aaf2e4ce83e0e88c489ec83d0 Mon Sep 17 00:00:00 2001 From: nitin mohan Date: Tue, 30 Jun 2026 23:57:06 +0530 Subject: [PATCH 1/3] feat(ui): add premium contact section and refine support experience --- app/(public)/contact/page.tsx | 8 +- components/contact/ContactSection.module.css | 519 +++++++++++++++++++ components/contact/ContactSection.tsx | 230 ++++++++ components/navbar.tsx | 8 +- 4 files changed, 762 insertions(+), 3 deletions(-) create mode 100644 components/contact/ContactSection.module.css create mode 100644 components/contact/ContactSection.tsx diff --git a/app/(public)/contact/page.tsx b/app/(public)/contact/page.tsx index 5490ec2..cfd070f 100644 --- a/app/(public)/contact/page.tsx +++ b/app/(public)/contact/page.tsx @@ -1,3 +1,9 @@ +import ContactSection from "@/components/contact/ContactSection"; + export default function ContactPage() { - return
Contact Page
; + return ( +
+ +
+ ); } diff --git a/components/contact/ContactSection.module.css b/components/contact/ContactSection.module.css new file mode 100644 index 0000000..112adb0 --- /dev/null +++ b/components/contact/ContactSection.module.css @@ -0,0 +1,519 @@ +@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:wght@300;400;500;600&display=swap"); + +.contactSection { + background-color: #030508; + position: relative; + overflow: hidden; + color: #f6f7fa; + font-family: "Inter", sans-serif; + padding: 120px 80px; + display: flex; + justify-content: center; + align-items: center; + min-height: 800px; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} + +/* Background Effects */ +.bgEffects { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + pointer-events: none; + z-index: 0; +} + +.radialGradient { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 150vw; + height: 150vh; + background: radial-gradient( + circle, + rgba(12, 18, 32, 0.4) 0%, + rgba(5, 8, 16, 1) 70% + ); +} + +.container { + max-width: 1100px; + width: 100%; + display: flex; + position: relative; + z-index: 1; + align-items: center; + justify-content: space-between; +} + +/* Left Section */ +.leftSection { + flex: 0 0 50%; + padding-right: 60px; + position: relative; + display: flex; + flex-direction: column; + justify-content: center; +} + +.labelWrapper { + display: flex; + align-items: center; + gap: 16px; + margin-bottom: 24px; +} + +.label { + text-transform: uppercase; + letter-spacing: 0.25em; + font-size: 0.75rem; + font-weight: 500; + color: #d4af37; +} + +.horizontalDivider { + display: flex; + align-items: center; + width: 40px; +} + +.horizontalDivider .line { + flex: 1; + height: 1px; + background: rgba(212, 175, 55, 0.25); +} + +.horizontalDivider .dot { + width: 3px; + height: 3px; + background: #d4af37; + border-radius: 50%; + box-shadow: 0 0 6px rgba(212, 175, 55, 0.6); +} + +.heading { + font-family: "Cormorant Garamond", serif; + font-size: 4rem; + font-weight: 400; + line-height: 1.1; + margin-bottom: 20px; +} + +.headingWhite { + color: #f6f7fa; +} + +.headingGold { + color: #d4af37; +} + +.description { + font-size: 1rem; + color: #94a3b8; + line-height: 1.6; + max-width: 90%; + margin-bottom: 40px; + font-weight: 300; +} + +/* Horizontal Features */ +.featuresHorizontal { + display: flex; + align-items: center; + gap: 28px; +} + +.featureItem { + display: flex; + align-items: center; + gap: 16px; + transition: opacity 0.2s; +} + +.iconWrapper { + display: flex; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + border-radius: 50%; + background: rgba(10, 14, 24, 0.4); + border: 1px solid rgba(212, 175, 55, 0.2); + color: #d4af37; + transition: all 0.3s ease; + box-shadow: 0 0 4px rgba(212, 175, 55, 0.05); +} + +.featureItem:hover .iconWrapper { + box-shadow: 0 0 10px rgba(212, 175, 55, 0.2); + transform: scale(1.05); +} + +.featureText { + display: flex; + flex-direction: column; + gap: 2px; +} + +.featureTitle { + font-size: 0.9rem; + font-weight: 500; + color: #f6f7fa; +} + +.featureDesc { + font-size: 0.8rem; + color: #7a8494; +} + +/* Center Vertical Divider */ +.centerDivider { + position: absolute; + left: 50%; + top: 10%; + bottom: 10%; + width: 1px; + display: flex; + flex-direction: column; + align-items: center; + transform: translateX(-50%); +} + +.verticalLineTop { + flex: 1; + width: 1px; + background: linear-gradient(to bottom, transparent, rgba(212, 175, 55, 0.1)); +} + +.centerDot { + width: 3px; + height: 3px; + background: #d4af37; + border-radius: 50%; + box-shadow: 0 0 8px rgba(212, 175, 55, 0.6); + margin: 10px 0; +} + +.verticalLineBottom { + flex: 1; + width: 1px; + background: linear-gradient(to bottom, rgba(212, 175, 55, 0.1), transparent); +} + +/* Right Section */ +.rightSection { + flex: 0 0 50%; + display: flex; + justify-content: center; + align-items: center; + padding-left: 40px; +} + +.contactCard { + background: rgba(8, 12, 18, 0.4); + backdrop-filter: blur(24px); + -webkit-backdrop-filter: blur(24px); + border: 1px solid rgba(212, 175, 55, 0.08); + border-radius: 20px; + padding: 48px 40px; + width: 100%; + max-width: 420px; + position: relative; + display: flex; + flex-direction: column; + align-items: center; + box-shadow: + 40px -40px 100px -20px rgba(212, 175, 55, 0.04), + -40px 40px 100px -20px rgba(212, 175, 55, 0.02), + 0 20px 40px rgba(0, 0, 0, 0.6); +} + +/* Sharp Top-Right Glow */ +.cardGlowTopRight { + position: absolute; + top: -1px; + right: -1px; + width: 60px; + height: 60px; + border-top-right-radius: 20px; + box-shadow: inset -2px 2px 8px rgba(232, 185, 85, 0.5); + background: radial-gradient( + circle at top right, + rgba(232, 185, 85, 0.8) 0%, + transparent 60% + ); + pointer-events: none; + z-index: 2; +} + +/* Soft Bottom-Left Glow */ +.contactCard::after { + content: ""; + position: absolute; + bottom: -1px; + left: -1px; + width: 150px; + height: 150px; + background: radial-gradient( + circle at bottom left, + rgba(212, 175, 55, 0.08) 0%, + transparent 60% + ); + border-bottom-left-radius: 28px; + pointer-events: none; + z-index: 0; +} + +.heroIconWrapper { + position: relative; + width: 100px; + height: 100px; + margin-top: 0; + margin-bottom: 24px; + display: flex; + justify-content: center; + align-items: center; + z-index: 1; +} + +.mailIconCircle { + width: 48px; + height: 48px; + border-radius: 50%; + border: 1px solid rgba(212, 175, 55, 0.3); + display: flex; + justify-content: center; + align-items: center; + z-index: 2; + background: rgba(8, 12, 18, 0.8); +} + +.heroIcon { + color: #d4af37; +} + +.heroCircles { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 100%; + height: 100%; + z-index: 1; +} + +.heroCircles::before, +.heroCircles::after { + content: ""; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + border-radius: 50%; + border: 1px solid rgba(212, 175, 55, 0.15); +} + +.heroCircles::before { + width: 100%; + height: 100%; +} + +.heroCircles::after { + width: 140%; + height: 140%; + border-color: rgba(212, 175, 55, 0.05); +} + +.floatingDot1, +.floatingDot2 { + position: absolute; + width: 3px; + height: 3px; + background: #d4af37; + border-radius: 50%; + box-shadow: 0 0 6px rgba(212, 175, 55, 0.8); + z-index: 3; +} + +.floatingDot1 { + top: -10px; + right: 10px; +} + +.floatingDot2 { + bottom: 10px; + left: -10px; +} + +.cardHeading { + font-family: "Cormorant Garamond", serif; + font-size: 1.8rem; + font-weight: 400; + text-align: center; + color: #f6f7fa; + margin-bottom: 8px; + z-index: 1; +} + +.cardSubtitle { + text-align: center; + color: #a0abba; + font-size: 0.85rem; + font-weight: 300; + margin-bottom: 40px; + z-index: 1; +} + +.form { + display: flex; + flex-direction: column; + width: 100%; + gap: 24px; + z-index: 1; +} + +.inputGroup { + position: relative; + width: 100%; + display: flex; + flex-direction: column; +} + +.input { + background: transparent; + border: none; + padding: 8px 32px 8px 0; + color: #f6f7fa; + font-family: "Inter", sans-serif; + font-size: 0.85rem; + outline: none; + width: 100%; +} + +.textarea { + resize: vertical; + min-height: 40px; +} + +.messageGroup { + margin-bottom: 16px; +} + +.input::placeholder { + color: rgba(255, 255, 255, 0.3); + font-weight: 300; +} + +.inputIcon { + position: absolute; + right: 4px; + top: 8px; + color: rgba(255, 255, 255, 0.25); + pointer-events: none; + transition: color 0.3s ease; +} + +.inputLine { + position: absolute; + bottom: -6px; + left: 0; + width: 100%; + height: 1px; + background: rgba(255, 255, 255, 0.08); + transition: background 0.3s; +} + +.input:focus ~ .inputLine { + background: rgba(212, 175, 55, 0.6); +} + +.input:focus ~ .inputIcon { + color: #d4af37; +} + +.submitRow { + display: flex; + justify-content: flex-end; + width: 100%; + margin-top: 12px; +} + +.submitBtn { + width: 48px; + height: 48px; + border-radius: 50%; + background: linear-gradient(135deg, #e8c27d 0%, #d8a354 100%); + border: none; + color: #060913; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); + box-shadow: 0 4px 12px rgba(212, 175, 55, 0.2); +} + +.submitBtn:hover { + transform: scale(1.05); + box-shadow: 0 6px 16px rgba(212, 175, 55, 0.3); +} + +.btnIcon { + margin-right: 2px; +} + +/* Responsive Design */ +@media (max-width: 1024px) { + .container { + flex-direction: column; + gap: 60px; + } + .leftSection { + padding-right: 0; + text-align: center; + } + .labelWrapper { + justify-content: center; + } + .description { + margin: 0 auto 40px auto; + } + .featuresHorizontal { + justify-content: center; + flex-wrap: wrap; + } + .centerDivider { + display: none; + } + .rightSection { + padding-left: 0; + } +} + +@media (max-width: 768px) { + .heading { + font-size: 3.5rem; + } + .contactSection { + padding: 80px 24px; + } + .featuresHorizontal { + flex-direction: column; + align-items: flex-start; + gap: 16px; + } +} diff --git a/components/contact/ContactSection.tsx b/components/contact/ContactSection.tsx new file mode 100644 index 0000000..83ee3b9 --- /dev/null +++ b/components/contact/ContactSection.tsx @@ -0,0 +1,230 @@ +"use client"; + +import React, { useState } from "react"; +import { + Bug, + Headphones, + MessageSquare, + Mail, + Send, + User, + Tag, + PenLine, +} from "lucide-react"; +import styles from "./ContactSection.module.css"; + +export default function ContactSection() { + const [formData, setFormData] = useState({ + name: "", + email: "", + subject: "", + message: "", + }); + + const handleChange = ( + e: React.ChangeEvent + ) => { + setFormData((prev) => ({ + ...prev, + [e.target.name]: e.target.value, + })); + }; + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + console.log("Form submitted:", formData); + }; + + return ( +
+ {/* Background Effects */} +
+
+
+ +
+ {/* Left Section */} +
+
+ CONTACT US +
+
+
+
+
+ +

+ We're here to +
+ help you. +

+ +

+ Have a question, found a bug, or need support? +
+ Let us know — we'll get back to you as soon as possible. +

+ +
+ {/* Feature 1 */} +
+
+ +
+
+

Report Issues

+

Help us improve

+
+
+ + {/* Feature 2 */} +
+
+ +
+
+

Get Support

+

We're here to help

+
+
+ + {/* Feature 3 */} +
+
+ +
+
+

Share Feedback

+

Your feedback matters

+
+
+
+
+ + {/* Center Vertical Divider */} +
+
+
+
+
+ + {/* Right Section */} +
+
+ {/* Corner Glows */} +
+ +
+
+
+ +
+
+
+
+ +

Send us a message

+

+ We'll respond as soon as possible. +

+ +
+
+ + + +
+
+ +
+ + + +
+
+ +
+ + + +
+
+ +
+ + + +
+
+ +
+ +
+
+
+
+
+
+ ); +} diff --git a/components/navbar.tsx b/components/navbar.tsx index 2301c26..53438af 100644 --- a/components/navbar.tsx +++ b/components/navbar.tsx @@ -169,12 +169,16 @@ export default function Navbar() { href={link.href} onClick={(e) => handleNavClick(e, link.href)} className={`group relative px-4 py-2 text-[14.5px] tracking-[0.01em] transition-colors duration-200 rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/50 ${ + link.label === "Contact" + ? "bg-white/10 hover:bg-white/15 border border-white/10 shadow-sm" + : "" + } ${ isActive ? "text-white font-semibold" : "text-slate-300 font-medium hover:text-white" }`} > - {isActive && ( + {isActive && link.label !== "Contact" && ( {link.label} {/* Hover Underline */} - {!isActive && ( + {!isActive && link.label !== "Contact" && ( )} From e328097926ebeb7ffcea36dc879a28d1063aafbd Mon Sep 17 00:00:00 2001 From: nitin mohan Date: Wed, 1 Jul 2026 00:46:53 +0530 Subject: [PATCH 2/3] fixed int format --- components/contact/ContactSection.module.css | 431 +++++++++++-------- components/contact/ContactSection.tsx | 43 +- 2 files changed, 267 insertions(+), 207 deletions(-) diff --git a/components/contact/ContactSection.module.css b/components/contact/ContactSection.module.css index 112adb0..1184379 100644 --- a/components/contact/ContactSection.module.css +++ b/components/contact/ContactSection.module.css @@ -1,12 +1,12 @@ @import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:wght@300;400;500;600&display=swap"); .contactSection { - background-color: #030508; + background-color: #060812; /* Dark navy */ position: relative; overflow: hidden; - color: #f6f7fa; + color: #ffffff; font-family: "Inter", sans-serif; - padding: 120px 80px; + padding: 100px 0; /* Reduced for better proportion */ display: flex; justify-content: center; align-items: center; @@ -46,24 +46,25 @@ background: radial-gradient( circle, rgba(12, 18, 32, 0.4) 0%, - rgba(5, 8, 16, 1) 70% + rgba(6, 8, 18, 1) 70% ); } .container { - max-width: 1100px; + max-width: 1160px; /* Reduced to fix the 'too big' issue */ width: 100%; + padding: 0 40px; display: flex; position: relative; z-index: 1; align-items: center; justify-content: space-between; + gap: 64px; /* Scaled down gap */ } -/* Left Section */ +/* Left Section - 52% */ .leftSection { - flex: 0 0 50%; - padding-right: 60px; + flex: 0 0 52%; position: relative; display: flex; flex-direction: column; @@ -74,216 +75,223 @@ display: flex; align-items: center; gap: 16px; - margin-bottom: 24px; + margin-bottom: 32px; } .label { text-transform: uppercase; - letter-spacing: 0.25em; - font-size: 0.75rem; - font-weight: 500; - color: #d4af37; + letter-spacing: 0.3em; + font-size: 13px; + font-weight: 600; + color: #e8b962; } .horizontalDivider { - display: flex; - align-items: center; - width: 40px; -} - -.horizontalDivider .line { - flex: 1; + width: 48px; height: 1px; - background: rgba(212, 175, 55, 0.25); + background: linear-gradient(90deg, rgba(232, 185, 98, 0.4), transparent); + position: relative; } .horizontalDivider .dot { - width: 3px; - height: 3px; - background: #d4af37; + position: absolute; + left: 0; + top: -1.5px; + width: 4px; + height: 4px; + background: #e8b962; border-radius: 50%; - box-shadow: 0 0 6px rgba(212, 175, 55, 0.6); + box-shadow: 0 0 8px #e8b962; } .heading { font-family: "Cormorant Garamond", serif; - font-size: 4rem; + font-size: 4.5rem; /* Scaled down for elegance */ font-weight: 400; line-height: 1.1; - margin-bottom: 20px; + margin-bottom: 24px; } .headingWhite { - color: #f6f7fa; + color: #ffffff; } .headingGold { - color: #d4af37; + background: linear-gradient(135deg, #f2c572 0%, #b97a2e 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; } .description { - font-size: 1rem; + font-size: 1.05rem; /* Slightly smaller */ color: #94a3b8; - line-height: 1.6; - max-width: 90%; - margin-bottom: 40px; + line-height: 1.7; + margin-bottom: 56px; font-weight: 300; + max-width: 85%; } -/* Horizontal Features */ +/* Feature Cards */ .featuresHorizontal { display: flex; align-items: center; - gap: 28px; + gap: 32px; /* Scaled down */ } .featureItem { display: flex; align-items: center; gap: 16px; - transition: opacity 0.2s; + transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); + cursor: pointer; } .iconWrapper { display: flex; align-items: center; justify-content: center; - width: 40px; - height: 40px; + width: 56px; /* Increased to match reference */ + height: 56px; border-radius: 50%; - background: rgba(10, 14, 24, 0.4); - border: 1px solid rgba(212, 175, 55, 0.2); - color: #d4af37; + background: rgba(232, 185, 98, 0.08); /* Clean, slightly warmer flat fill */ + border: 1px solid rgba(232, 185, 98, 0.05); /* Extremely subtle edge */ + color: #e8b962; transition: all 0.3s ease; - box-shadow: 0 0 4px rgba(212, 175, 55, 0.05); + flex-shrink: 0; +} + +.featureItem:hover { + transform: translateY(-4px); /* Slight lift */ } .featureItem:hover .iconWrapper { - box-shadow: 0 0 10px rgba(212, 175, 55, 0.2); - transform: scale(1.05); + box-shadow: 0 0 16px rgba(232, 185, 98, 0.25); /* Icon glow */ + border-color: rgba(232, 185, 98, 0.5); /* Subtle border glow */ } .featureText { display: flex; flex-direction: column; - gap: 2px; + gap: 4px; } .featureTitle { - font-size: 0.9rem; - font-weight: 500; - color: #f6f7fa; + font-size: 15px; + font-weight: 600; /* Slightly bolder */ + color: #ffffff; } .featureDesc { - font-size: 0.8rem; - color: #7a8494; + font-size: 12px; /* Smaller */ + color: rgba(148, 163, 184, 0.7); /* Reduced opacity */ } /* Center Vertical Divider */ .centerDivider { position: absolute; - left: 50%; - top: 10%; - bottom: 10%; + left: 54%; /* Placed between 52% and 48% */ + top: 0; + bottom: 0; width: 1px; display: flex; flex-direction: column; align-items: center; - transform: translateX(-50%); -} - -.verticalLineTop { - flex: 1; - width: 1px; - background: linear-gradient(to bottom, transparent, rgba(212, 175, 55, 0.1)); + justify-content: center; + background: linear-gradient( + to bottom, + transparent, + rgba(232, 185, 98, 0.15) 50%, + transparent + ); } .centerDot { - width: 3px; - height: 3px; - background: #d4af37; + width: 5px; + height: 5px; + background: #e8b962; border-radius: 50%; - box-shadow: 0 0 8px rgba(212, 175, 55, 0.6); - margin: 10px 0; -} - -.verticalLineBottom { - flex: 1; - width: 1px; - background: linear-gradient(to bottom, rgba(212, 175, 55, 0.1), transparent); + box-shadow: 0 0 12px 2px rgba(232, 185, 98, 0.8); } -/* Right Section */ +/* Right Section - 48% */ .rightSection { - flex: 0 0 50%; + flex: 0 0 44%; /* 48% minus some gap spacing */ display: flex; justify-content: center; align-items: center; - padding-left: 40px; } .contactCard { - background: rgba(8, 12, 18, 0.4); - backdrop-filter: blur(24px); - -webkit-backdrop-filter: blur(24px); - border: 1px solid rgba(212, 175, 55, 0.08); - border-radius: 20px; - padding: 48px 40px; + background: rgba(10, 14, 24, 0.5); /* Transparent with blur */ + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border: 1px solid rgba(232, 185, 98, 0.12); + border-radius: 20px; /* Subtle rounded border */ + padding: 56px 48px; /* Reduced to fix huge card size */ width: 100%; - max-width: 420px; position: relative; display: flex; flex-direction: column; align-items: center; + box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4); + transition: + box-shadow 0.4s ease, + border-color 0.4s ease; +} + +/* Soft golden border glow only on hover */ +.contactCard:hover { + border-color: rgba(232, 185, 98, 0.18); /* Reduced by 40% */ box-shadow: - 40px -40px 100px -20px rgba(212, 175, 55, 0.04), - -40px 40px 100px -20px rgba(212, 175, 55, 0.02), - 0 20px 40px rgba(0, 0, 0, 0.6); + 0 24px 60px rgba(0, 0, 0, 0.5), + 0 0 40px rgba(232, 185, 98, 0.05) inset, + /* Reduced by 40% */ 0 0 40px rgba(232, 185, 98, 0.05); /* Reduced by 40% */ } -/* Sharp Top-Right Glow */ +/* Sharp Top-Right Flare and Glow */ .cardGlowTopRight { position: absolute; top: -1px; right: -1px; - width: 60px; - height: 60px; - border-top-right-radius: 20px; - box-shadow: inset -2px 2px 8px rgba(232, 185, 85, 0.5); + width: 250px; + height: 250px; background: radial-gradient( circle at top right, - rgba(232, 185, 85, 0.8) 0%, - transparent 60% + rgba(232, 185, 98, 0.3) 0%, + transparent 70% ); + border-top-right-radius: 20px; pointer-events: none; - z-index: 2; + z-index: 0; } -/* Soft Bottom-Left Glow */ -.contactCard::after { +.cardGlowTopRight::after { content: ""; position: absolute; - bottom: -1px; - left: -1px; - width: 150px; - height: 150px; - background: radial-gradient( - circle at bottom left, - rgba(212, 175, 55, 0.08) 0%, - transparent 60% + top: 0; + right: 0; + bottom: 0; + left: 0; + border-top-right-radius: 20px; + border-top: 1px solid rgba(255, 255, 255, 0.8); + border-right: 1px solid rgba(255, 255, 255, 0.8); + -webkit-mask-image: radial-gradient( + circle at top right, + black 0%, + transparent 40% ); - border-bottom-left-radius: 28px; - pointer-events: none; - z-index: 0; + mask-image: radial-gradient(circle at top right, black 0%, transparent 40%); } +/* Removed the sharp glowing dot from the top right corner as requested */ + +/* Top Icon */ .heroIconWrapper { position: relative; width: 100px; height: 100px; - margin-top: 0; - margin-bottom: 24px; + margin: 0 auto 24px auto; display: flex; justify-content: center; align-items: center; @@ -294,87 +302,88 @@ width: 48px; height: 48px; border-radius: 50%; - border: 1px solid rgba(212, 175, 55, 0.3); + border: 1px solid rgba(232, 185, 98, 0.3); display: flex; justify-content: center; align-items: center; - z-index: 2; - background: rgba(8, 12, 18, 0.8); -} - -.heroIcon { - color: #d4af37; + z-index: 3; + background: #060812; + color: #e8b962; } -.heroCircles { +/* Continuous Signal Rings */ +.signalRing { position: absolute; top: 50%; left: 50%; + width: 48px; + height: 48px; + border-radius: 50%; + border: 1px solid rgba(232, 185, 98, 0.2); /* Balanced border opacity */ transform: translate(-50%, -50%); - width: 100%; - height: 100%; z-index: 1; + opacity: 0; + animation: signalPulse 4.5s cubic-bezier(0.2, 0.6, 0.3, 1) infinite; /* Perfect medium pace */ } -.heroCircles::before, -.heroCircles::after { - content: ""; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - border-radius: 50%; - border: 1px solid rgba(212, 175, 55, 0.15); -} - -.heroCircles::before { - width: 100%; - height: 100%; -} - -.heroCircles::after { - width: 140%; - height: 140%; - border-color: rgba(212, 175, 55, 0.05); +@keyframes signalPulse { + 0% { + transform: translate(-50%, -50%) scale(1); + opacity: 0.5; /* Visible but not blinding */ + } + 100% { + transform: translate(-50%, -50%) scale(3); /* Good, noticeable expansion */ + opacity: 0; + } } +/* Tiny glowing particles around rings */ .floatingDot1, -.floatingDot2 { +.floatingDot2, +.floatingDot3 { position: absolute; - width: 3px; - height: 3px; - background: #d4af37; border-radius: 50%; - box-shadow: 0 0 6px rgba(212, 175, 55, 0.8); - z-index: 3; + background: #e8b962; + box-shadow: 0 0 6px rgba(232, 185, 98, 0.8); + z-index: 4; } .floatingDot1 { - top: -10px; - right: 10px; + top: 15%; + right: 20%; + width: 3px; + height: 3px; } - .floatingDot2 { - bottom: 10px; - left: -10px; + bottom: 20%; + left: 15%; + width: 2px; + height: 2px; +} +.floatingDot3 { + top: 30%; + left: 10%; + width: 2px; + height: 2px; + opacity: 0.6; } +/* Form Heading */ .cardHeading { font-family: "Cormorant Garamond", serif; - font-size: 1.8rem; + font-size: 2.2rem; /* Scaled down slightly */ font-weight: 400; text-align: center; - color: #f6f7fa; + color: #ffffff; margin-bottom: 8px; z-index: 1; } .cardSubtitle { text-align: center; - color: #a0abba; - font-size: 0.85rem; - font-weight: 300; - margin-bottom: 40px; + color: #94a3b8; + font-size: 0.9rem; + margin-bottom: 48px; z-index: 1; } @@ -382,8 +391,9 @@ display: flex; flex-direction: column; width: 100%; - gap: 24px; + gap: 40px; /* Reduced from massive 56px */ z-index: 1; + position: relative; } .inputGroup { @@ -396,101 +406,128 @@ .input { background: transparent; border: none; + border-bottom: 1px solid rgba(232, 185, 98, 0.15); /* Thin gold underline */ padding: 8px 32px 8px 0; - color: #f6f7fa; + color: #ffffff; font-family: "Inter", sans-serif; - font-size: 0.85rem; + font-size: 0.9rem; outline: none; width: 100%; + transition: all 0.3s ease; } .textarea { resize: vertical; - min-height: 40px; + min-height: 48px; /* Scaled back */ } .messageGroup { - margin-bottom: 16px; + margin-bottom: 8px; } .input::placeholder { - color: rgba(255, 255, 255, 0.3); + color: rgba(255, 255, 255, 0.6); /* Slightly brighter labels */ font-weight: 300; + transition: color 0.3s ease; } .inputIcon { position: absolute; - right: 4px; + right: 0; /* Align perfectly on the right */ top: 8px; - color: rgba(255, 255, 255, 0.25); + color: rgba(255, 255, 255, 0.3); pointer-events: none; transition: color 0.3s ease; } +/* Animate underline and soft gold glow on focus */ .inputLine { position: absolute; - bottom: -6px; - left: 0; - width: 100%; + bottom: 0; + left: 50%; /* Start from center */ + width: 0; height: 1px; - background: rgba(255, 255, 255, 0.08); - transition: background 0.3s; + background: #e8b962; + box-shadow: 0 0 8px rgba(232, 185, 98, 0.6); /* Soft golden glow */ + transition: + width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), + left 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); } .input:focus ~ .inputLine { - background: rgba(212, 175, 55, 0.6); + width: 100%; + left: 0; } .input:focus ~ .inputIcon { - color: #d4af37; + color: #e8b962; +} + +.input:focus::placeholder { + color: rgba(255, 255, 255, 0.4); } +/* Send Button */ .submitRow { - display: flex; - justify-content: flex-end; - width: 100%; - margin-top: 12px; + position: absolute; + bottom: -48px; /* Moved down by approx 0.6cm (~24px) */ + left: 50%; + transform: translateX(-50%); } .submitBtn { - width: 48px; - height: 48px; + width: 36px; /* Reduced by 40% (60px * 0.6) */ + height: 36px; border-radius: 50%; - background: linear-gradient(135deg, #e8c27d 0%, #d8a354 100%); + background: radial-gradient( + circle at top left, + #f2c572 0%, + #d4af37 100% + ); /* Smooth radial gold */ border: none; - color: #060913; + color: #030508; /* Deep black icon */ display: flex; justify-content: center; align-items: center; cursor: pointer; - transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); - box-shadow: 0 4px 12px rgba(212, 175, 55, 0.2); + box-shadow: + 0 0 30px rgba(232, 185, 98, 0.18), + /* Reduced by 50% */ 0 0 60px rgba(232, 185, 98, 0.07); /* Reduced by 50% */ + transition: + transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), + box-shadow 0.3s ease; } .submitBtn:hover { - transform: scale(1.05); - box-shadow: 0 6px 16px rgba(212, 175, 55, 0.3); + transform: scale(1.08); /* Gentle scale animation */ + box-shadow: + 0 0 40px rgba(232, 185, 98, 0.25), + /* Reduced by 50% */ 0 0 80px rgba(232, 185, 98, 0.1); /* Reduced by 50% */ } .btnIcon { - margin-right: 2px; + margin-right: 1px; + margin-top: 1px; /* Visual centering tweak */ } /* Responsive Design */ -@media (max-width: 1024px) { +@media (max-width: 1200px) { .container { flex-direction: column; - gap: 60px; + gap: 80px; + padding: 0 40px; } .leftSection { - padding-right: 0; + flex: 0 0 auto; + width: 100%; text-align: center; + align-items: center; } .labelWrapper { justify-content: center; } .description { - margin: 0 auto 40px auto; + margin: 0 auto 56px auto; } .featuresHorizontal { justify-content: center; @@ -500,20 +537,32 @@ display: none; } .rightSection { - padding-left: 0; + flex: 0 0 auto; + width: 100%; + max-width: 600px; } } @media (max-width: 768px) { .heading { - font-size: 3.5rem; + font-size: 4rem; } .contactSection { - padding: 80px 24px; + padding: 100px 24px; } .featuresHorizontal { flex-direction: column; - align-items: flex-start; - gap: 16px; + align-items: center; + gap: 24px; + } + .contactCard { + padding: 48px 32px; + } + .submitRow { + position: relative; + bottom: 0; + display: flex; + justify-content: flex-end; + margin-top: 32px; } } diff --git a/components/contact/ContactSection.tsx b/components/contact/ContactSection.tsx index 83ee3b9..065c3eb 100644 --- a/components/contact/ContactSection.tsx +++ b/components/contact/ContactSection.tsx @@ -4,7 +4,7 @@ import React, { useState } from "react"; import { Bug, Headphones, - MessageSquare, + MessageSquareText, Mail, Send, User, @@ -43,12 +43,11 @@ export default function ContactSection() {
- {/* Left Section */} + {/* Left Section - 52% */}
CONTACT US
-
@@ -69,7 +68,7 @@ export default function ContactSection() { {/* Feature 1 */}
- +

Report Issues

@@ -80,7 +79,7 @@ export default function ContactSection() { {/* Feature 2 */}
- +

Get Support

@@ -91,7 +90,7 @@ export default function ContactSection() { {/* Feature 3 */}
- +

Share Feedback

@@ -103,24 +102,36 @@ export default function ContactSection() { {/* Center Vertical Divider */}
-
-
- {/* Right Section */} + {/* Right Section - 48% */}
- {/* Corner Glows */} + {/* Corner Glow */}
-
+ {/* Continuous Signal Rings */} +
+
+
+
+

Send us a message

@@ -145,7 +156,7 @@ export default function ContactSection() { />
@@ -167,7 +178,7 @@ export default function ContactSection() { />
@@ -187,7 +198,7 @@ export default function ContactSection() { onChange={handleChange} required /> - +
@@ -206,7 +217,7 @@ export default function ContactSection() { >
@@ -218,7 +229,7 @@ export default function ContactSection() { className={styles.submitBtn} aria-label="Send Message" > - +
From 422953b730679cc9d80a3bea5d0c4dc4c8afd000 Mon Sep 17 00:00:00 2001 From: nitin mohan Date: Wed, 1 Jul 2026 00:50:01 +0530 Subject: [PATCH 3/3] fixed check error --- components/contact/ContactSection.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/components/contact/ContactSection.tsx b/components/contact/ContactSection.tsx index 065c3eb..31a5104 100644 --- a/components/contact/ContactSection.tsx +++ b/components/contact/ContactSection.tsx @@ -53,7 +53,7 @@ export default function ContactSection() {

- We're here to + We're here to
help you.

@@ -61,7 +61,7 @@ export default function ContactSection() {

Have a question, found a bug, or need support?
- Let us know — we'll get back to you as soon as possible. + Let us know — we'll get back to you as soon as possible.

@@ -83,7 +83,7 @@ export default function ContactSection() {

Get Support

-

We're here to help

+

We're here to help

@@ -136,7 +136,7 @@ export default function ContactSection() {

Send us a message

- We'll respond as soon as possible. + We'll respond as soon as possible.