AZORES Infrastructure Portal

Comparison & Feature Overview Across All 4 Live Site Implementations

Original Baseline

AZORES 1

Original corporate layout featuring dark gradient mobile menu, revolving text pills, standard grid services, and classic contact footer.

Launch AZORES 1
White Navigation

AZORES 2

Clean white mobile menu drawer & white dropdown items, static specialization cards, and FontAwesome bullet icons in footer links.

Launch AZORES 2
Pill-to-Card + 3-Col

AZORES 3

Pill-to-card revolving marquee with circular thumbnails + center growth, 60 FPS GPU acceleration, and 3-column Services & Specialization pages.

Launch AZORES 3
Dual-Row Marquee

AZORES 4

2 bidirectional revolving rows (Top Left, Bottom Right), dynamic max-content pill auto-fit width, and hover-only card transformation.

Launch AZORES 4

Detailed Feature Comparison

Comprehensive matrix listing exact differences, interactive components, and page layouts across all 4 sites.

Feature / Page AZORES 1 (Original) AZORES 2 AZORES 3 AZORES 4
Mobile Drawer Menu Dark Blue Gradient Pure White (#ffffff) Dark Blue Gradient Dark Blue Gradient
Dropdown Submenus Dark Gradient Pure White + Blue Accents Dark Gradient Dark Gradient
Specialization Layout Single Revolving Row Static Cards Layout Single Revolving Row 2 Bidirectional Rows
Marquee Direction Leftward (Single Row) N/A (Static Grid) Leftward (Single Row) Top: Left | Bottom: Right
Card Growth Trigger Center Focus (Auto) Always Card State Center Focus & Hover User Interaction Only (Hover)
Pill Thumbnail Avatar No Thumbnails Full Card Images Circular 48px Avatar Circular 44px Avatar
Pill Width Handling Fixed 280px Width Fixed 280px Card Fixed 280px Card Dynamic Max-Content Auto-Fit
Services Page Layout Standard Auto Grid Standard Auto Grid 3-Column Grid + 240px Img Standard Auto Grid
Specialization Page Standard Grid Standard Grid 3-Column Grid + Dual Action Btns Standard Grid
Footer Link Bullet Icons Standard Text Links FontAwesome Angle Icons Standard Text Links Standard Text Links
Performance Tech Standard Marquee JS Standard CSS Grid GPU Accelerated (translateZ) GPU Accelerated (translateZ)

AZORES 1 Key Highlights

  • Original baseline design uploaded directly to hosting root `/azores/`.
  • Dark blue gradient mobile drawer and dropdown navigation menus.
  • Single revolving text pill marquee for specializations on the homepage.
  • Revolving cards link directly to sub-specialization pages (highways, bridges, etc.).
  • Clean, responsive footer with contact information and corporate logo.

AZORES 2 Key Highlights

  • Pure white background (`#ffffff`) for the mobile menu drawer with dark navy typography.
  • Pure white background for desktop and mobile dropdown submenus with blue accent borders.
  • Homepage Specialization section refactored into static full-size cards (`280px × 320px`).
  • Footer links feature FontAwesome angle-right bullet icons (`fa-angle-right`) with slide hover animations.

AZORES 3 Key Highlights

  • Specialization revolving marquee starts as 64px rounded pills with circular preview thumbnail avatars.
  • Pills smoothly expand into full cards as they revolve into center focus or are hovered.
  • Hardware-accelerated 60 FPS GPU rendering (`translateZ(0)`) eliminating animation lag.
  • Services page upgraded to a premium 3-column grid (`repeat(3, 1fr)`) with 240px image previews.
  • Specialization page upgraded to 3-column grid with frosted glass sector tags and dual action buttons (`Explore Details` & `Contact Us`).

AZORES 4 Key Highlights

  • Dual bidirectional revolving marquee rows (Top Row moving Left, Bottom Row moving Right).
  • Items revolve continuously as pills by default (no automatic card expansion when passing center focus).
  • Pills transform into full cards (`270px × 300px`) ONLY when the user explicitly hovers or interacts.
  • Dynamic `width: max-content` pill sizing with 24px right padding so long titles like **"INFRASTRUCTURE & HIGHWAYS"** fit perfectly with zero text truncation.