# Blogs Page — Design Spec

**Page file:** `html/blogs.html`
**Page slug:** `blogs.html`
**Nav label:** Our Blogs
**H1:** Dark Circles Under Eyes: Causes, Types and Best Treatments (featured-post hero title)
**Component directory:** `html/blogs-components/`

## Purpose

Blog listing/discovery page for Centre for Sight health articles. Users can:
1. Read the featured blog post highlighted in the full-bleed hero slider
2. Search blog posts by keyword, month, and year
3. Browse and filter blog cards by category chip (11 categories + "All")
4. Read the 10 blog cards in the main grid and browse sidebar widgets
5. Navigate to adjacent pages via the pill-style pagination
6. Learn about CFS's story and why-choose propositions
7. Request a callback via the catch-all form

## Top-level sections (render order)

| # | Section | Component file | Shared? |
|---|---------|----------------|---------|
| 1 | Utility bar | `components/01-utility-bar.html` | Shared |
| 2 | Main nav | `components/02-main-nav.html` | Shared |
| 3 | Breadcrumb | `blogs-components/01-breadcrumb.html` | Per-page |
| 4 | Hero (featured-post slider) | `blogs-components/02-hero-banner.html` | Per-page |
| 5 | Search filter | `blogs-components/03-search-filter.html` | Per-page |
| 6 | Category filter (12 chips) | `blogs-components/04-category-filter.html` | Per-page |
| 7 | Main grid + sidebar (10 blog cards + 2 sidebar widgets) | `blogs-components/05-blog-card.html` + `blogs-components/06-sidebar-list.html` | Per-page |
| 8 | Pagination | `blogs-components/07-pagination.html` | Per-page |
| 9 | Our Story and Vision | `blogs-components/08-our-story.html` | Per-page |
| 10 | Why CFS chips | `blogs-components/09-why-cfs.html` | Per-page |
| 11 | Callback form | `blogs-components/10-callback-form.html` | Per-page |
| 12 | Footer | `components/15-footer.html` | Shared |
| 13 | Sticky bar | `components/16-sticky-bar.html` | Shared |

## Breakpoints

| Name | Width | Notes |
|------|-------|-------|
| Mobile | 375px | Single-column stack; hero full-bleed; grid single col; sidebar stacks below cards; chips wrap |
| Tablet | 768px | Blog grid 2-col; sidebar stacks below grid; category chips wrap naturally |
| Desktop | 1440px | Blog grid 2-col + sidebar 1-col (2fr/1fr split); chips single row; hero rounded corners |

Tailwind breakpoint in use: `lg:` = 1024px (project standard). Below `lg:` is treated as mobile/tablet.

## Design Tokens

All tokens declared in `css/input.css` (`@theme` block). No new tokens introduced by this page.

### Colors
- `--color-primary` / `text-primary` — `#2B286F` (navy): headings, chip labels, pagination pills, card titles, sidebar text
- `--color-accent` / `bg-accent` — `#FFCB05` (yellow): "All" chip (active), hero "Book An Appointment" CTA, callback submit (mobile)
- `bg-gray-100` / `bg-[#f1f1f1]` — sidebar widget bg, Our Story card bg, Why CFS card bg
- `bg-[#f7f7f7]` — `+91` prefix box in callback form
- `text-[#434343]` / `text-text-dark` — search filter placeholder and label text
- `text-[#1a1a1a]` — blog card key-takeaways snippet text

### Fonts
- `font-heading` (Poppins): hero H1 (22px/34px), hero snippet (14px/17px), chip labels (13px/15px), card titles (16px/18px), pagination (14px/15px), Our Story heading (30px/55px), Why CFS titles (20px/31px), callback eyebrow (18px/22px), callback heading (24px/38px)
- `font-body` (Lato): Our Story body paragraph (15px/21px), hero "Book An Appointment" button

### Container tokens
- `max-w-[var(--container-site)]` — 1440px outer page wrapper
- `max-w-[var(--container-inner)]` — 1380px inner content width (Our Story, Why CFS, callback form)

### Border radii
- `rounded-[17px]` — hero article (desktop only; none on mobile)
- `rounded-[14px]` — blog card (desktop)
- `rounded-[11px]` — sidebar widget, Our Story card, Why CFS cards, callback form wrapper card
- `rounded-[10px]` — blog card (mobile), callback form inner card
- `rounded-[7px]` — search filter inputs and dropdowns
- `rounded-[6px]` — callback form inputs, submit button
- `rounded-[5px]` — hero CTA buttons, blog card meta pill border-radius, sidebar thumbnail
- `rounded-[3px]` — blog card date/read-time meta pills
- `rounded-full` — category chips, pagination pills, hero arrow buttons, "Need Help?" pill, callback form `+91` prefix (n/a — uses `rounded-l-[5px]`)

---

## Section Details

### 1. Utility Bar
- **Purpose:** Site-wide top strip — phone numbers, email, links
- **Layout:** Single-row; left links, right contact details. Hidden on mobile.
- **Content fields:** Nav links (Media, Career, Empanelments, Collaborations, Investors, Education & Training)
- **Reuse:** `html/components/01-utility-bar.html` verbatim
- **Screenshot:** `docs/screenshots/blogs-utility-bar.png`

### 2. Main Nav
- **Purpose:** Primary site navigation with logo, main links, hamburger
- **Layout:** Horizontal desktop; collapsible full-screen overlay on mobile
- **Content fields:** Logo, nav links (About Us, Find an eye specialist, Specialities, Locate Us, Our Blogs), Book An Appointment CTA
- **Reuse:** `html/components/02-main-nav.html` verbatim
- **Screenshot:** `docs/screenshots/blogs-main-nav.png`

### 3. Breadcrumb
- **Purpose:** Positional navigation — "Home › Blogs"
- **Layout:** Single-row `<ol>` with chevron separators
- **Content fields:** Two items — "Home" (link to `/`) + "Blogs" (current page, `aria-current="page"`)
- **Component:** `html/blogs-components/01-breadcrumb.html`
- **Screenshot:** `docs/screenshots/blogs-breadcrumb.png`

### 4. Hero (Featured-Post Slider)
- **Purpose:** Full-bleed hero showcasing the featured blog post; slide controls for future multi-post expansion
- **Layout:** Single `<article>` spanning full container width. Fixed heights: 420px mobile / 480px tablet / 520px desktop. Left-aligned text panel over dark gradient overlay. Previous/next arrow buttons positioned at vertical midpoint.
- **Content fields:**
  - H1 text: "Dark Circles Under Eyes: Causes, Types and Best Treatments" (Poppins medium, 22px/34px)
  - Key takeaways snippet: "Key Takeaways: Dark circles can result from genetics, ageing…" (Poppins light, 14px/17px)
  - "Read More" button: ghost border-white CTA
  - "Book An Appointment" button: `bg-accent text-primary` uppercase
  - Hero background image: `assets/images/blog-hero-dark-circles.png`
  - Gradient overlay: `from-black/70 via-black/40 to-transparent` (mobile) / `from-black/60 via-black/30` (desktop)
- **Slider hooks:** `data-slider="featured-blog"` on `<section>`, `data-slider-prev` / `data-slider-next` on arrow buttons
- **Component:** `html/blogs-components/02-hero-banner.html`
- **Screenshot:** `docs/screenshots/blogs-hero.png`

### 5. Search Filter
- **Purpose:** Let users narrow the blog listing by keyword, month, and year
- **Layout:** `grid-cols-1 lg:grid-cols-3` — three inputs in a single row on desktop, stacked on mobile. "Need Help?" decorative pill positioned top-right (absolute on desktop, block on mobile).
- **Content fields:**
  - Text search input: placeholder "Search Blog…" (`id="blog-search"`, `name="q"`)
  - Month dropdown: 12 month options (`id="blog-month"`, `name="month"`)
  - Year dropdown: 2021–2026 options (`id="blog-year"`, `name="year"`)
  - "Need Help?" decorative pill (no JS, no link)
- **Stable JS hooks:** `data-blog-search-form` (form), `data-blog-search` (text input), `data-blog-month` (month select), `data-blog-year` (year select)
- **Component:** `html/blogs-components/03-search-filter.html`
- **Screenshot:** `docs/screenshots/blogs-search-filter.png`

### 6. Category Filter
- **Purpose:** Filter blog cards by speciality/topic category chip
- **Layout:** `flex flex-wrap justify-center gap-2 lg:gap-3` — chips wrap on mobile, fit single row on desktop (11 categories + "All" = 12 chips)
- **Content fields (12 chips):**
  - All (default active, `bg-accent text-primary`)
  - Cataract (`data-category="cataract"`)
  - LASIK (`data-category="lasik"`)
  - Glaucoma (`data-category="glaucoma"`)
  - Retinoblastoma (`data-category="retinoblastoma"`)
  - Squint Eye Treatment (`data-category="squint"`)
  - Cornea Transplant (`data-category="cornea"`)
  - Myopia (`data-category="myopia"`)
  - Low Vision Aids (`data-category="low-vision-aids"`)
  - Retina & Uvea (`data-category="retina-uvea"`)
  - Oculoplasty (`data-category="oculoplasty"`)
  - Lorem Ipsum (`data-category="lorem-ipsum"`) — **explicit placeholder for content team**
- **Active state:** active chip `bg-accent text-primary`; inactive chips `border border-primary bg-white text-primary`
- **Stable JS hooks:** `data-category-filter` (list), `data-category-chip` + `data-category="<slug>"` (each chip)
- **Component:** `html/blogs-components/04-category-filter.html`
- **Screenshot:** `docs/screenshots/blogs-category-filter.png`

### 7. Main Grid + Sidebar
- **Purpose:** Primary blog card listing (main) + curated blog widgets (sidebar)
- **Layout:** `<main id="blogs-grid">` wraps the full two-column split. Outer grid: `grid-cols-1 lg:grid-cols-[2fr_1fr]`. Main column: `<ul>` with `grid-cols-1 sm:grid-cols-2` — 10 blog cards in a 2-column sub-grid. Sidebar column: 2 stacked `<aside>` widgets.
- **Blog card anatomy (`05-blog-card.html`):**
  - `aspect-[5/3]` image with `scale-105` hover — placeholder `blog-cataracts.png`
  - H3 title (Poppins medium 16px/18px, `text-primary`)
  - Key takeaways paragraph (Poppins light 13px/14px, `text-[#1a1a1a]`, `line-clamp-2`)
  - Date meta pill (Poppins light 11px/12px, `bg-gray-100`)
  - Read time meta pill with clock icon (same style)
- **Stable hook:** `data-blog-card` + `data-category="<slug>"` on each card `<a>`
- **Sidebar widget anatomy (`06-sidebar-list.html`):**
  - `bg-gray-100 rounded-[11px]` container
  - Widget H3 heading (Poppins medium 16px/18px)
  - List of items: 72×54px thumbnail + title (line-clamp-2) + date pill
  - Widget 1: "Reader's Favourite" (sorted by view count in Drupal)
  - Widget 2: "Hindi Blogs" (filtered by `field_language=hi` in Drupal)
- **Stable hook:** `data-sidebar-list-item` on each sidebar `<a>`
- **Component:** `html/blogs-components/05-blog-card.html` + `html/blogs-components/06-sidebar-list.html`
- **Screenshot:** `docs/screenshots/blogs-grid.png`, `docs/screenshots/blogs-sidebar.png`

### 8. Pagination
- **Purpose:** Navigate between pages of blog results
- **Layout:** Centered `<ul>` of pill links — pages 1, 2, 3, …, 12. Active page: `bg-primary text-white`. Inactive: `border border-primary bg-white text-primary`. Ellipsis `…` between page 3 and page 12 (decorative, `aria-hidden`).
- **Content fields:** Page numbers (computed by Drupal Views pager; "12" is layout-demo placeholder)
- **Stable JS hooks:** `data-page-link` on each `<a>`, `data-active="true"` on current page
- **Component:** `html/blogs-components/07-pagination.html`
- **Screenshot:** `docs/screenshots/blogs-pagination.png`

### 9. Our Story and Vision
- **Purpose:** Trust-building prose block about CFS's founding and mission
- **Layout:** Full-width `bg-gray-100` card (`rounded-[11px]`, padding 70px H desktop), constrained to `container-inner`. Single heading + single body paragraph.
- **Content fields:**
  - Heading: "Our Story and Vision" (Poppins light, 30px/55px)
  - Body: founding paragraph (Lato 400, 15px/21px) — 1996, Prof. Dr. Mahipal S. Sachdev, 350+ doctors, 95+ centres, NABH accreditation
- **Component:** `html/blogs-components/08-our-story.html`
- **Screenshot:** `docs/screenshots/blogs-our-story.png`

### 10. Why CFS Chips
- **Purpose:** Four feature-highlight cards summarising CFS differentiators
- **Layout:** `grid-cols-2 lg:grid-cols-4` — 4 columns desktop, 2 mobile. Each card: `bg-gray-100`, radius 11px, hover → `bg-primary` with white text transition.
- **Content fields (4 cards):**
  1. "Eye Care Specialists"
  2. "Advanced Technology"
  3. "Comprehensive Services"
  4. "Patient-Centered Care"
- Each card: H3 (Poppins light 20px/31px) + decorative 68px horizontal line (`bg-black` → `bg-white` on hover)
- **Stable JS hook:** `data-why-cfs-card` (hover-only, CSS transitions; no JS required)
- **Component:** `html/blogs-components/09-why-cfs.html`
- **Screenshot:** `docs/screenshots/blogs-why-cfs.png`

### 11. Callback Form
- **Purpose:** Catch-all lead capture — "Could not find what you are looking for?"
- **Layout:** Full-width section with `bg-primary` panel (with background image overlay `callback-bg.png`). White card (`478×439` desktop, radius 11px) on left side holds form. Mobile: card goes full-width (`mx-5 my-5 w-[calc(100%-2.5rem)]`) with semi-transparent primary overlay.
- **Content fields:**
  - Eyebrow: "Could not find what you are looking for?" (Poppins light, 18px/22px)
  - Heading: "Request a Callback" (Poppins normal, 24px/38px)
  - Full name input (`id="callback-name"`, `name="full_name"`, placeholder "Full name")
  - Phone input with `+91` prefix (`id="callback-phone"`, `name="phone"`, placeholder "Mobile Number")
  - Submit label: desktop "Book An Appointment" (`bg-primary text-white`) / mobile "Submit" (`bg-accent text-primary`)
- **Variant:** "Could not find" eyebrow variant (post-fix, matching specialities/eye-specialists pattern)
- **Stable JS hook:** `data-callback-form`
- **Component:** `html/blogs-components/10-callback-form.html`
- **Screenshot:** `docs/screenshots/blogs-callback.png`

### 12. Footer
- **Purpose:** Site-wide footer — quick links, contact, social, copyright
- **Layout:** Multi-column grid with CFS logo, link groups, phone/address, social icons
- **Reuse:** `html/components/15-footer.html` verbatim
- **Screenshot:** `docs/screenshots/blogs-footer.png`

### 13. Sticky Bar
- **Purpose:** Persistent bottom bar (mobile) / chat bubble (desktop) for quick actions
- **Layout:** Full-width fixed bar on mobile; right-fixed circular chat icon on desktop
- **Reuse:** `html/components/16-sticky-bar.html` verbatim
- **Screenshot:** `docs/screenshots/blogs-sticky-bar.png`

## Responsive strategy

Follow existing project convention: **single DOM, Tailwind breakpoint utilities**. No duplicate mobile-specific blocks.

| Section | Mobile (375px) | Desktop (1440px) |
|---------|---------------|------------------|
| Hero | Full-bleed, no border radius, arrows close to edges | Rounded `rounded-[17px]`, padded sides, larger arrows |
| Search filter | Single-column stacked inputs | 3-col grid |
| Category filter | Chips wrap to multiple rows | Chips fit single row |
| Blog grid | 1 column | 2-column card grid + 1/3-width sidebar (2fr/1fr) |
| Sidebar | Stacks below grid | Right-hand column, sticky optional |
| Pagination | Centered pills, same layout | Same layout, slightly larger |
| Our Story | Smaller text, centred | Full-width card, larger text |
| Why CFS | 2 columns | 4 columns |
| Callback form | Full-width card, semi-transparent bg overlay | Left card + decorative right bg |