KFG - Kids First Group

🔖 SUGGESTED BRANCH: task/2648-blogs-articles-page

h2. Overview

Develop the fully responsive "Blogs & Articles" page for the Forest Oasis Nursery website based on the provided UI design reference. Covers hero banner, blog listing grid, pagination, CTA section, schedule visit form, and footer — pixel-perfect and responsive across desktop, tablet, and mobile.

Detailed Explanation¶

Build the complete Blogs & Articles page matching the reference design:

• Sticky header/navbar with logo, nav, Register Now + Book a Tour buttons; mobile hamburger
• Full-width hero banner with dark overlay, center-aligned heading, curved wave bottom
• 4/2/1 column responsive blog card grid (desktop/tablet/mobile) with hover animation
• Pagination with prev/next buttons and active page highlight
• CTA section: "Schedule Your Private Tour with our Forest Oasis Experts" + gradient/wave
• Schedule a Visit form (8 fields: parent/child names, email, phone, location, child age) with validation and API/email integration placeholder
• Footer: logo, tagline, quick/explore/support links, social media icons

Use Cases¶

• Visitor browses blog articles and clicks "Read More" on a card
• User submits Schedule a Visit form to book a nursery tour
• Mobile user navigates articles on a single-column grid layout
• Admin paginates through multiple pages of blog entries

Requirements & Scope¶

• Hero Banner: full-width image, dark overlay, wave bottom shape, centered heading text: "Stories, insights and experiences from our Forest School journey."
• Blog Grid: 4 cols desktop / 2 cols tablet / 1 col mobile; equal-height cards with featured image, date, read time, title, description, "Read More" button, hover animation, rounded corners, border styling
• Pagination: previous/next buttons, active page indicator, responsive alignment
• CTA Section: gradient/wave background, title + description text
• Form Fields: Parent First Name, Parent Last Name, Email Address, Country Code + Mobile Number, Nursery Location dropdown, Child Age dropdown, Child First Name, Child Last Name
• Form Features: required field validation, proper error messages, responsive design, API/email submit placeholder
• Footer: logo, tagline, quick/explore/support link columns, social icons, responsive
• Responsive: Desktop, Tablet, Mobile (Chrome, Safari, Firefox, Edge)
• Performance: lazy loading for blog images, SEO-friendly HTML structure, optimized images

Out of Scope¶

• Backend blog CMS or database integration
• Actual blog content population (placeholder data acceptable)
• User authentication or login flows
• Header/navbar implementation if already a shared component

Design / Mockup Reference¶

• Reference: Attached screenshot (Blogs & Articles Page)
• Match typography, colors, spacing, border-radius, shadows precisely
• Decorative wave/background elements per design

Acceptance Criteria¶

• Page matches provided design reference
• Fully responsive across Desktop / Tablet / Mobile
• No UI breaking issues at any viewport
• All 8 form fields present with working validation and error messages
• Pagination renders and responds correctly
• Blog card hover animation functional
• All buttons and nav links functional
• Images lazy-load, page loads performantly
• Cross-browser tested: Chrome, Safari, Firefox, Edge
• SEO-friendly semantic HTML structure

Technical Implementation¶

• Stack: Next.js / React (existing project structure)
• Styling: CSS Modules / Tailwind / SCSS (match existing project conventions)
• Blog card grid: CSS Grid with responsive breakpoints
• Form: controlled components with client-side validation
• Lazy loading: next/image with loading="lazy" or Intersection Observer
• Wave/curved shapes: SVG or CSS clip-path

Dependencies¶

• Existing shared Header/Navbar component (if available)
• Image assets for hero banner and placeholder blog card images
• Brand color tokens and typography scale

Testing Strategy¶

• Visual: Compare each section against reference screenshot on all breakpoints
• Form: Test required field validation, error messages, submit placeholder
• Cross-browser: Chrome, Safari, Firefox, Edge
• Performance: Verify lazy loading active; check Lighthouse score
• Edge cases: Long blog titles, empty pagination, mobile menu toggle

Notes & Constraints¶

• Match existing project component naming and file structure conventions
• Use optimized/compressed images; prefer next/image for automatic optimization
• Ensure wave SVG elements do not overflow or cause horizontal scroll on mobile

Related Tasks¶

• Shared Header/Navbar component (if exists as separate task)