Feature #2648
Updated by Askarali T 3 months ago
🔖 *SUGGESTED BRANCH:* task/2648-blogs-articles-page task/{id}-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. h2. 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 h2. 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 h2. 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 h2. 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 h2. Design / Mockup Reference * Reference: Attached screenshot (Blogs & Articles Page) * Match typography, colors, spacing, border-radius, shadows precisely * Decorative wave/background elements per design h2. 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 h2. 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 h2. Dependencies * Existing shared Header/Navbar component (if available) * Image assets for hero banner and placeholder blog card images * Brand color tokens and typography scale h2. 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 h2. 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 h2. Related Tasks * Shared Header/Navbar component (if exists as separate task)