Skip to content

feat:Redesign Research & Contact Us Pages with Premium Biotech UI

Praveena Veeranki requested to merge research into dev

Description

This Merge Request overhauls the Research & Development and Contact Us pages to align with a premium, futuristic genomics aesthetic. It unifies the application's theme under a "Professional Blue" design system and resolves several UI/UX issues related to responsiveness and theme toggling.

Key Changes

1. Research & Development Services

  • Content Restructuring: Split the NGS Capabilities section into two high-density glassmorphism cards (Services List & Technology Advantage) for better readability.
  • Typography Refinement: Cleaned up taglines and descriptions by removing unnecessary quotes and periods.
  • Theme-Aware Hero: Fixed the hero overlay and button visibility to ensure high contrast in both light and dark modes.
  • New Sections: Integrated detailed grids for Research Collaborations, Bioinformatics, and Quality Compliance.

2. Contact Us Modernization

  • Visual Enhancements: Added a futuristic left-side canvas featuring floating DNA animations, glowing grid patterns, and glassmorphism info panels.
  • Thematic Unification: Migrated all teal/green accents to the project-standard Professional Blue (#0ea5e9).
  • Responsive Form: Redesigned the contact form with improved input states and clear focus indicators.

3. Global UI/UX Fixes

  • Navbar Stability: Resolved the "collapsing" and overlapping issues in the navigation bar by refining flexbox gaps and widths.
  • Text Visibility: Fixed accessibility issues where grey text was illegible on dark backgrounds in the "Partner With Us" and "Contact" sections.
  • Sticky Header Support: Added appropriate padding to top-level containers to prevent content from being cut off by the fixed navbar.

Verification Results

  • Verified theme toggling (Light/Dark) across both pages.
  • Tested responsiveness on mobile, tablet, and desktop viewports.
  • Confirmed all icons (lucide-react) and animations (framer-motion) are functional.

Checklist

  • All styles use CSS variables for theme support.
  • Layout is responsive and mobile-friendly.
  • Code is clean and matches the project's architecture.
  • Pushed to research branch.

Merge request reports