feat:contact us page redesign
Overview This Merge Request implements a comprehensive redesign of the Contact Us page, transitioning it to a premium, biotech-themed split-screen layout. The new design focuses on high-impact visuals, modern typography, and sophisticated theme support for both Light and Dark modes.
Key Changes
- Immersive Split-Screen UI
Left Panel: A dynamic feature area anchored by a minimalist, pill-shaped "Let's Connect" speech bubble. Right Panel: A clean, optimized contact form designed for high conversion and professional aesthetic. 2. Sophisticated Color Palette & Theme Support
Light Mode: Left side uses a crisp Light Cyan (#d6f5ff) foundation. Focal elements (Bubble & "Send Message" button) use a vibrant Teal Blue (#0077b6) with matching Light Cyan text. Sidebar contact info is rendered in Dark Blue (#1e3a8a) for maximum legibility. Dark Mode: Unified the entire background to a deep, professional Darkish Royal Blue (#0a192f). Implemented a "Clean Inversion" where the speech bubble switches to White with Dark Blue text, creating a sharp focal anchor. Forced all sidebar contact details and icons to Pure White for optimal visibility against the dark backdrop. 3. UX & Typography Enhancements
Substantially increased font sizes across the page (Titles: 3.5rem, Input Labels: 1.1rem, Contact Info: 1.35rem) to ensure accessibility and premium feel. Optimized vertical rhythm and padding to ensure the layout fits within a standard screen viewport ("Fit-to-Screen") across various resolutions. Replaced the "Pop-Up" entrance with a smooth, horizontal Slide-In animation from the left using framer-motion. 4. Technical Polish
Refined form input borders to use a subtle Light Cyan accent in light mode. Implemented high-contrast white backgrounds for form inputs in dark mode to ensure they "pop" against the teal/blue panels. Standardized all transitions (0.4s) for a synchronized and elegant theme-switching experience. Verification Results Verified Light/Dark mode transitions via data-theme selectors. Confirmed responsive behavior on desktop and mobile viewports. Validated accessibility (contrast ratios) for all contact information text. Tested "Send Message" button interactions and hover states.