Skip to content

feat:Redesign Contact Us page with futuristic biotech theme and responsive layout

Praveena Veeranki requested to merge research into dev

🚀 Overview: Contact Us Page Premium Redesign

This MR transforms the basic "Contact Us" section into a premium, futuristic biotech/genomics interface inspired by modern SaaS and high-end healthcare startups (e.g., Moderna, Illumina).

🎨 Key Changes

UI/UX & Aesthetics

  • Futuristic Background: Added a dynamic mesh gradient background with animated particles, floating glow circles, and subtle DNA-inspired CSS patterns.
  • Glassmorphism Design: Implemented semi-transparent panels and cards with sophisticated blur effects and subtle borders.
  • Micro-interactions: Integrated framer-motion for smooth entrance animations and interactive hover states on cards and form elements.
  • Theme Integration: Fully synced the color palette, typography, and spacing with the application's global design system (Light/Dark mode compatible).

Functional Updates

  • Form Expansion: Added Phone Number and City fields to capture more detailed inquiry information.
  • Layout Optimization:
    • Moved the heading to align perfectly with the contact grid.
    • Balanced the 4 mini-cards and the contact form for a symmetrical, high-end enterprise look.
    • Compacted the form design to improve readability and visual flow.
  • Icon Clean-up: Streamlined the UI by removing unnecessary icons as per the latest design direction.

🛠️ Technical Details

  • Files Modified: ContactUs.jsx, ContactUs.css.
  • Dependencies Used: lucide-react for iconography, framer-motion for animations.
  • Responsiveness: Fully optimized for mobile, tablet, and desktop viewports.

✅ Verification Results

  • Verified HMR updates on local dev server.
  • Tested form state management and submission alert.
  • Confirmed responsive grid stacking on mobile breakpoints.
  • Validated theme variable consistency across light and dark modes.

Merge request reports