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..1184379 --- /dev/null +++ b/components/contact/ContactSection.module.css @@ -0,0 +1,568 @@ +@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: #060812; /* Dark navy */ + position: relative; + overflow: hidden; + color: #ffffff; + font-family: "Inter", sans-serif; + padding: 100px 0; /* Reduced for better proportion */ + 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(6, 8, 18, 1) 70% + ); +} + +.container { + 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 - 52% */ +.leftSection { + flex: 0 0 52%; + position: relative; + display: flex; + flex-direction: column; + justify-content: center; +} + +.labelWrapper { + display: flex; + align-items: center; + gap: 16px; + margin-bottom: 32px; +} + +.label { + text-transform: uppercase; + letter-spacing: 0.3em; + font-size: 13px; + font-weight: 600; + color: #e8b962; +} + +.horizontalDivider { + width: 48px; + height: 1px; + background: linear-gradient(90deg, rgba(232, 185, 98, 0.4), transparent); + position: relative; +} + +.horizontalDivider .dot { + position: absolute; + left: 0; + top: -1.5px; + width: 4px; + height: 4px; + background: #e8b962; + border-radius: 50%; + box-shadow: 0 0 8px #e8b962; +} + +.heading { + font-family: "Cormorant Garamond", serif; + font-size: 4.5rem; /* Scaled down for elegance */ + font-weight: 400; + line-height: 1.1; + margin-bottom: 24px; +} + +.headingWhite { + color: #ffffff; +} + +.headingGold { + background: linear-gradient(135deg, #f2c572 0%, #b97a2e 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.description { + font-size: 1.05rem; /* Slightly smaller */ + color: #94a3b8; + line-height: 1.7; + margin-bottom: 56px; + font-weight: 300; + max-width: 85%; +} + +/* Feature Cards */ +.featuresHorizontal { + display: flex; + align-items: center; + gap: 32px; /* Scaled down */ +} + +.featureItem { + display: flex; + align-items: center; + gap: 16px; + 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: 56px; /* Increased to match reference */ + height: 56px; + border-radius: 50%; + 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; + flex-shrink: 0; +} + +.featureItem:hover { + transform: translateY(-4px); /* Slight lift */ +} + +.featureItem:hover .iconWrapper { + 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: 4px; +} + +.featureTitle { + font-size: 15px; + font-weight: 600; /* Slightly bolder */ + color: #ffffff; +} + +.featureDesc { + font-size: 12px; /* Smaller */ + color: rgba(148, 163, 184, 0.7); /* Reduced opacity */ +} + +/* Center Vertical Divider */ +.centerDivider { + position: absolute; + left: 54%; /* Placed between 52% and 48% */ + top: 0; + bottom: 0; + width: 1px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background: linear-gradient( + to bottom, + transparent, + rgba(232, 185, 98, 0.15) 50%, + transparent + ); +} + +.centerDot { + width: 5px; + height: 5px; + background: #e8b962; + border-radius: 50%; + box-shadow: 0 0 12px 2px rgba(232, 185, 98, 0.8); +} + +/* Right Section - 48% */ +.rightSection { + flex: 0 0 44%; /* 48% minus some gap spacing */ + display: flex; + justify-content: center; + align-items: center; +} + +.contactCard { + 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%; + 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: + 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 Flare and Glow */ +.cardGlowTopRight { + position: absolute; + top: -1px; + right: -1px; + width: 250px; + height: 250px; + background: radial-gradient( + circle at top right, + rgba(232, 185, 98, 0.3) 0%, + transparent 70% + ); + border-top-right-radius: 20px; + pointer-events: none; + z-index: 0; +} + +.cardGlowTopRight::after { + content: ""; + position: absolute; + 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% + ); + 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: 0 auto 24px auto; + display: flex; + justify-content: center; + align-items: center; + z-index: 1; +} + +.mailIconCircle { + width: 48px; + height: 48px; + border-radius: 50%; + border: 1px solid rgba(232, 185, 98, 0.3); + display: flex; + justify-content: center; + align-items: center; + z-index: 3; + background: #060812; + color: #e8b962; +} + +/* 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%); + z-index: 1; + opacity: 0; + animation: signalPulse 4.5s cubic-bezier(0.2, 0.6, 0.3, 1) infinite; /* Perfect medium pace */ +} + +@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, +.floatingDot3 { + position: absolute; + border-radius: 50%; + background: #e8b962; + box-shadow: 0 0 6px rgba(232, 185, 98, 0.8); + z-index: 4; +} + +.floatingDot1 { + top: 15%; + right: 20%; + width: 3px; + height: 3px; +} +.floatingDot2 { + 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: 2.2rem; /* Scaled down slightly */ + font-weight: 400; + text-align: center; + color: #ffffff; + margin-bottom: 8px; + z-index: 1; +} + +.cardSubtitle { + text-align: center; + color: #94a3b8; + font-size: 0.9rem; + margin-bottom: 48px; + z-index: 1; +} + +.form { + display: flex; + flex-direction: column; + width: 100%; + gap: 40px; /* Reduced from massive 56px */ + z-index: 1; + position: relative; +} + +.inputGroup { + position: relative; + width: 100%; + display: flex; + flex-direction: column; +} + +.input { + background: transparent; + border: none; + border-bottom: 1px solid rgba(232, 185, 98, 0.15); /* Thin gold underline */ + padding: 8px 32px 8px 0; + color: #ffffff; + font-family: "Inter", sans-serif; + font-size: 0.9rem; + outline: none; + width: 100%; + transition: all 0.3s ease; +} + +.textarea { + resize: vertical; + min-height: 48px; /* Scaled back */ +} + +.messageGroup { + margin-bottom: 8px; +} + +.input::placeholder { + color: rgba(255, 255, 255, 0.6); /* Slightly brighter labels */ + font-weight: 300; + transition: color 0.3s ease; +} + +.inputIcon { + position: absolute; + right: 0; /* Align perfectly on the right */ + top: 8px; + 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: 0; + left: 50%; /* Start from center */ + width: 0; + height: 1px; + 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 { + width: 100%; + left: 0; +} + +.input:focus ~ .inputIcon { + color: #e8b962; +} + +.input:focus::placeholder { + color: rgba(255, 255, 255, 0.4); +} + +/* Send Button */ +.submitRow { + position: absolute; + bottom: -48px; /* Moved down by approx 0.6cm (~24px) */ + left: 50%; + transform: translateX(-50%); +} + +.submitBtn { + width: 36px; /* Reduced by 40% (60px * 0.6) */ + height: 36px; + border-radius: 50%; + background: radial-gradient( + circle at top left, + #f2c572 0%, + #d4af37 100% + ); /* Smooth radial gold */ + border: none; + color: #030508; /* Deep black icon */ + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + 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.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: 1px; + margin-top: 1px; /* Visual centering tweak */ +} + +/* Responsive Design */ +@media (max-width: 1200px) { + .container { + flex-direction: column; + gap: 80px; + padding: 0 40px; + } + .leftSection { + flex: 0 0 auto; + width: 100%; + text-align: center; + align-items: center; + } + .labelWrapper { + justify-content: center; + } + .description { + margin: 0 auto 56px auto; + } + .featuresHorizontal { + justify-content: center; + flex-wrap: wrap; + } + .centerDivider { + display: none; + } + .rightSection { + flex: 0 0 auto; + width: 100%; + max-width: 600px; + } +} + +@media (max-width: 768px) { + .heading { + font-size: 4rem; + } + .contactSection { + padding: 100px 24px; + } + .featuresHorizontal { + flex-direction: column; + 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 new file mode 100644 index 0000000..31a5104 --- /dev/null +++ b/components/contact/ContactSection.tsx @@ -0,0 +1,241 @@ +"use client"; + +import React, { useState } from "react"; +import { + Bug, + Headphones, + MessageSquareText, + 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 - 52% */} +
+
+ 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 - 48% */} +
+
+ {/* Corner Glow */} +
+ +
+ {/* Continuous Signal Rings */} +
+
+
+ +
+ +
+
+
+
+
+ +

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" && ( )}