IDHEAL Vertical Pillar Architecture Site

Overview

This site features a striking four-column vertical pillar architecture where each section acts as a distinct portal for the brand's main divisions. It is a powerful clone reference for organizations needing to balance deep content categories with a high-impact, minimalist aesthetic driven by oversized typography and interactive column expansion.

Design System

• Color Palette & Visual Hierarchy: The design uses a monochrome black-and-white base accented by high-saturation primary colors (Blue, Red, Green, Pink) assigned to specific categories. Each column uses a colored dot indicator and matching border-colors to categorize content without overwhelming the clean space.
• Typography System: Extremely bold, oversized sans-serif letters (ID, HE, AL) serve as both branding and structural anchors at the top of the viewport. Body text uses a mix of serif for headlines (e.g., 'ÉLIRE DOMICILE') and a clean sans-serif for functional descriptions (e.g., 'Institut', 'Hautes études').
• Page Structure: The layout relies on flex flex-wrap containers where each pillar is a .home-cols__col. The header is integrated into these columns via SVG logos, followed by segmented content areas including image sliders, text blocks, and article cards.
• Reusable Components:
  • Pill Badges: Small rounded status/category indicators with colored dots.
  • Slick Sliders: Integrated slick-slider with custom numerical paging (e.g., '1/2').
  • Interactive Article Cards: Cards with an image top and a structured text bottom containing metadata (dates) and a '+ lire la suite' call-to-action.
  • Footer Marquee: A CSS-animated auto-scroller containing a horizontal ticker of news and links.
• Interaction & Motion: The implementation uses transition classes on column widths. Columns respond to hover/scroll with transformations (translateY) and opacity fades to reveal inner content (home-cols__col-inner).
• Implementation Clues: The site uses the Slick carousel library and a modular CSS approach with utility classes for spacing (sm-row, xl-row) and flexbox layouts.

Use Cases

• Who should clone this: Research institutes, architecture firms, or design agencies with 3-5 distinct sub-brands or service areas that require equal visual weight on a landing page.
• Effective Remixes: Portfolio sites where each column represents a different medium (e.g., Photography, Video, Design) or non-profits showcasing different mission pillars.
• Remix Directions: Swap the massive 'IDHEAL' background text for high-contrast imagery or different brand initials. The content hierarchy can be adapted by keeping the pillar structure but replacing the image sliders with video backgrounds or data visualization widgets.
• Clone Scope: A full-page clone is ideal to capture the unique scroll behavior; however, the marquee footer or the category-coded article card system can be extracted as standalone components.