ContentBlock Component Instructions

Overview

Build a comprehensive ContentBlock component that displays promotional content sections similar to Netflix's "Enjoy on your TV" and "Watch everywhere" layouts. The component should support flexible layouts, different visual arrangements, and responsive design patterns.

• https://www.figma.com/design/UL3mFZrsl1CM4dGhTd0gyk/Rediflix-Design-System-2025?node-id=73-223&m=dev

Technical Implementation

1. ContentBlock Interface

You need to create a ContentBlockProps interface with the following properties:

interface ContentBlockProps {
  /**
   * The main headline text
   */
  headline: string;

  /**
   * The descriptive text below the headline
   */
  description: string;

  /**
   * The image to display alongside the content
   */
  image: string;

  /**
   * The layout direction of the content
   */
  layout?: 'left-to-right' | 'right-to-left';
}

2. Implementation Requirements

ContentBlock Component Structure:

• Use CSS Modules for styling
• Implement Class Variance Authority (CVA) for dynamic class management
• Support two layout directions: left-to-right and right-to-left
• Handle responsive design with mobile-first approach
• Include proper spacing and typography
• Support image display and positioning

CSS Requirements:

• Create base content block styles with proper spacing
• Implement layout-specific styles for text and image positioning
• Include responsive breakpoints for mobile, tablet, and desktop
• Add proper typography hierarchy for headlines and descriptions
• Support responsive image scaling and positioning
• Use CSS custom properties for consistent theming
• Implement smooth transitions and animations

Component Logic:

• Handle layout direction switching
• Support responsive behavior
• Pass through all necessary props to container elements
• Handle image loading and display

Usage Examples

Basic Content Blocks

// Left-to-right layout
<ContentBlock
  headline="Enjoy on your TV"
  description="Watch on Smart TVs, Playstation, Xbox, Chromecast, Apple TV, Blu-ray players, and more."
  image="/images/tv-showcase.jpg"
  layout="left-to-right"
/>

// Right-to-left layout
<ContentBlock
  headline="Watch everywhere"
  description="Stream unlimited movies and TV shows on your phone, tablet, laptop, and TV."
  image="/images/devices-showcase.jpg"
  layout="right-to-left"
/>

Layout Variations

// Left-to-right layout
<ContentBlock
  headline="Download your shows"
  description="Save your favorites easily and always have something to watch."
  image="/images/download-showcase.jpg"
  layout="left-to-right"
/>

// Right-to-left layout
<ContentBlock
  headline="Create profiles for kids"
  description="Send kids on adventures with their favorite characters in a space made just for them."
  image="/images/kids-showcase.jpg"
  layout="right-to-left"
/>

Mobile Responsive

// Responsive layout
<ContentBlock
  headline="Mobile First"
  description="This content adapts to different screen sizes."
  image="/images/mobile-showcase.jpg"
/>

Design System Integration

CSS Custom Properties:

• Define spacing variables for consistent padding and margins
• Create typography variables for headlines and descriptions
• Define responsive breakpoint variables
• Ensure all layouts use consistent design tokens

Layout System:

• Implement flexible grid system for content arrangement
• Support responsive image scaling and positioning
• Handle text overflow and wrapping gracefully

Image Requirements

Image Specifications

• Support various aspect ratios (16:9, 4:3, 1:1)
• Support lazy loading for performance

Implementation Notes

• Use CSS Modules following existing component patterns
• Implement Class Variance Authority (CVA) for dynamic class management
• Support both controlled and uncontrolled usage patterns
• Include proper TypeScript types with JSDoc comments
• Follow existing project structure and naming conventions
• Ensure tree-shakeable components for optimal bundle size

Component Hierarchy

ContentBlock/
├── ContentBlock.tsx              # Main component with layout logic
├── ContentBlock.module.css       # All styling for layouts and variants
├── ContentBlock.types.ts         # TypeScript interfaces
├── ContentBlock.stories.tsx      # Storybook stories for all variants
└── index.ts                     # Export file

Design Tokens Reference

• Background Colors: #000000 (dark), #FFFFFF (light)
• Text Colors: #FFFFFF (dark bg), #000000 (light bg)
• Spacing: Consistent padding and margins using CSS custom properties
• Typography: Large headlines, readable descriptions
• Breakpoints: Mobile-first responsive design
• Transitions: Smooth animations for layout changes

Usage Patterns

Netflix-Style Sections

// "Enjoy on your TV" section
<ContentBlock
  headline="Enjoy on your TV"
  description="Watch on Smart TVs, Playstation, Xbox, Chromecast, Apple TV, Blu-ray players, and more."
  image="/images/tv-showcase.jpg"
  layout="left-to-right"
/>

// "Watch everywhere" section
<ContentBlock
  headline="Watch everywhere"
  description="Stream unlimited movies and TV shows on your phone, tablet, laptop, and TV."
  image="/images/devices-showcase.jpg"
  layout="right-to-left"
/>

Custom Content

// Custom promotional content
<ContentBlock
  headline="Your Custom Headline"
  description="Your custom description text that explains the feature or benefit."
  image="/images/custom-showcase.jpg"
  layout="left-to-right"
/>

Notes

• Use CSS custom properties for colors to maintain consistency
• Implement proper TypeScript types for all layouts
• Consider using a design token system for scalable theming
• Ensure the component is tree-shakeable for optimal bundle size
• Add proper JSDoc comments for better developer experience
• The component supports both controlled and uncontrolled usage patterns
• Focus on performance optimization for image loading
• Implement proper error boundaries for image loading failures