Content is user-generated and unverified.

Blog Interface Creation Prompt

Objective

Create a sophisticated, modern blog interface using React 18 that showcases long-form storytelling content (Michael Lewis-style investigative pieces) for an electrical contracting company. The interface should elevate technical content into engaging, readable experiences while maintaining professional credibility.

Technical Requirements

Core Framework

  • React 18 with functional components and hooks
  • TypeScript for type safety and better developer experience
  • Tailwind CSS for styling (utility-first approach)
  • Framer Motion for smooth animations and transitions
  • React Router DOM for navigation
  • Lucide React for consistent iconography

Architecture Principles

  • Component-based architecture with clear separation of concerns
  • Custom hooks for reusable logic (useScrollProgress, useReadingTime, etc.)
  • Responsive-first design (mobile → desktop)
  • Semantic HTML with proper accessibility attributes
  • Performance optimized with lazy loading and code splitting

Design System

Typography Hierarchy

  • Headlines: Large, bold serif font (Georgia or similar) for authority
  • Body Text: Clean sans-serif (system fonts) optimized for reading
  • Code/Technical: Monospace font for technical details
  • Line Height: 1.7 for body text (optimal readability)
  • Font Sizes: Responsive scaling (clamp() function)

Color Palette

  • Primary: Deep navy (#1e293b) for headings and emphasis
  • Secondary: Warm gray (#64748b) for body text
  • Accent: Electric blue (#3b82f6) for links and CTAs
  • Background: Off-white (#fefefe) with subtle paper texture
  • Borders: Light gray (#e2e8f0) for subtle divisions

Spacing & Layout

  • Max Width: 800px for optimal reading line length
  • Margins: Generous whitespace (2-4rem sections)
  • Grid System: CSS Grid for complex layouts, Flexbox for components
  • Vertical Rhythm: Consistent spacing multiples (0.5rem base)

Component Structure

BlogLayout Component

typescript
interface BlogLayoutProps {
  children: React.ReactNode;
  showSidebar?: boolean;
  showTableOfContents?: boolean;
}
  • Fixed navigation header with company branding
  • Sticky sidebar with recent posts/categories (optional)
  • Main content area with proper content width
  • Footer with contact information and social links

BlogPost Component

typescript
interface BlogPostProps {
  title: string;
  subtitle?: string;
  author: string;
  publishDate: Date;
  readingTime: number;
  content: string; // Markdown or structured content
  tags: string[];
  relatedPosts?: BlogPost[];
}
  • Hero section with title, subtitle, and meta information
  • Reading progress indicator (fixed position)
  • Content area with proper typography scaling
  • Social sharing buttons (subtle, non-intrusive)
  • Related posts section at bottom

BlogCard Component (for listings)

typescript
interface BlogCardProps {
  post: BlogPost;
  variant: 'featured' | 'standard' | 'compact';
  showExcerpt?: boolean;
}
  • Hover effects: subtle elevation, title color change
  • Featured variant: larger with hero image
  • Standard variant: horizontal layout with image
  • Compact variant: minimal for sidebar/related posts

Interactive Features

Hover Effects & Animations

  • Cards: Smooth lift effect (transform: translateY(-4px)) with shadow
  • Links: Underline animation using pseudo-elements
  • Buttons: Color transition with subtle scale (1.02x)
  • Images: Gentle zoom on hover (transform: scale(1.05))
  • Navigation: Highlight active page with smooth indicator

Reading Experience Enhancements

  • Reading Progress Bar: Fixed at top, updates as user scrolls
  • Estimated Reading Time: Calculated from word count (200 wpm average)
  • Table of Contents: Auto-generated from headings (H2, H3)
  • Smooth Scrolling: For anchor links and navigation
  • Text Size Controls: Allow readers to adjust font size preference

Micro-Interactions

  • Scroll Fade-ins: Content appears as user scrolls (Intersection Observer)
  • Loading States: Skeleton screens for content loading
  • Copy to Clipboard: For code snippets or quotes
  • Bookmark Feature: Save posts for later reading

Content Optimization

SEO Considerations

  • Meta Tags: Dynamic generation from post content
  • Schema Markup: Article structured data
  • OpenGraph Tags: For social media sharing
  • Canonical URLs: Proper URL structure
  • Sitemap Generation: Automatic XML sitemap

Performance Features

  • Image Optimization: Lazy loading with intersection observer
  • Code Splitting: Route-based chunking
  • Font Loading: Optimal font loading strategy (font-display: swap)
  • Bundle Size: Monitor and optimize (aim for < 100kb initial load)

Accessibility Requirements

WCAG Compliance

  • Color Contrast: Minimum 4.5:1 for body text, 3:1 for large text
  • Keyboard Navigation: Full site navigable via keyboard
  • Screen Reader: Proper ARIA labels and semantic HTML
  • Focus Management: Visible focus indicators
  • Alternative Text: Descriptive alt text for all images

Responsive Behavior

  • Mobile First: Touch-friendly interface (44px minimum touch targets)
  • Tablet Optimization: Proper layout for intermediate screen sizes
  • Desktop Enhancement: Progressive enhancement for larger screens
  • Print Styles: Optimized for printing (hide navigation, adjust fonts)

Content Management

Post Structure Support

  • Long-form Articles: 2000-5000 word pieces with proper section breaks
  • Code Examples: Syntax highlighted code blocks
  • Pull Quotes: Emphasized quotes that break up text
  • Image Galleries: Multiple images with captions
  • Embedded Media: YouTube videos, tweets, etc.

Navigation & Discovery

  • Category System: Organize by service type (Residential, Commercial, RV, etc.)
  • Tag System: Cross-cutting topics (Safety, Code Compliance, etc.)
  • Search Functionality: Client-side search with fuzzy matching
  • Related Posts: Algorithm based on tags and categories
  • Archive Pages: Chronological and categorical browsing

Implementation Example Structure

components/
├── layout/
│   ├── BlogLayout.tsx
│   ├── Header.tsx
│   └── Footer.tsx
├── blog/
│   ├── BlogPost.tsx
│   ├── BlogCard.tsx
│   ├── BlogList.tsx
│   └── ReadingProgress.tsx
├── ui/
│   ├── Button.tsx
│   ├── Badge.tsx
│   └── Typography.tsx
└── hooks/
    ├── useScrollProgress.ts
    ├── useReadingTime.ts
    └── useIntersectionObserver.ts

Content Integration

  • Support for Markdown content with custom renderers
  • Syntax highlighting for code blocks (Prism.js or similar)
  • Image optimization and responsive sizing
  • Video embed handling (YouTube, Vimeo)
  • Custom components for callouts, warnings, tips

Success Metrics

  • Reading Completion Rate: Track how many users finish articles
  • Time on Page: Measure engagement with long-form content
  • Social Shares: Track content virality
  • Contact Form Submissions: Measure conversion from content to leads
  • Core Web Vitals: Maintain excellent performance scores

Create a blog interface that transforms technical electrical contractor content into compelling digital storytelling experiences that rival mainstream publications while maintaining the professional authority needed to convert readers into clients.

Content is user-generated and unverified.
    React Blog Interface Creation Guide - Modern Design System | Claude