Problem

The About page currently displays all content as one large block of text, making it difficult to read and visually unappealing. Users have to scroll through a wall of text without any visual breaks or engaging elements.

Current State

• All content is displayed as a single paragraph
• No visual breaks or images to engage users
• Poor readability due to text density
• No interactive elements to enhance user experience

Desired Outcome

• Split content into logical, readable paragraphs
• Add one scroll-triggered fade-in image at a strategic point
• Improve overall visual appeal and user engagement
• Maintain responsive design

Technical Requirements

• Use Next.js Image component for optimized image loading
• Implement Intersection Observer API for scroll detection
• Add CSS transitions for smooth fade-in effect
• Ensure image is properly sized (600x400px recommended)

Step-by-Step Implementation Guide

Step 1: Update Content Structure

1. Open src/website/public/VoyageDescription.ts
2. Replace the current single string with an array of content sections
3. Each section should have:
   • type: 'paragraph' or type: 'image'
   • content: 'your text here' (for paragraphs)
   • imageSrc: '/your-image.jpg' (for images)
   • imageAlt: 'descriptive text' (for images)

Step 2: Split Text into Paragraphs

• Break the existing text into 3-5 logical paragraphs
• Each paragraph should focus on one main topic
• Don't worry about perfect paragraph breaks - just make it readable
• Example structure:

  {
    type: 'paragraph',
    content: 'First paragraph about the boat introduction...'
  },
  {
    type: 'paragraph', 
    content: 'Second paragraph about technical specifications...'
  }

Step 3: Add One Image Placeholder

• Add one image section between paragraphs (choose a good spot in the middle)
• Use descriptive alt text for accessibility
• Example:

  {
    type: 'image',
    content: '',
    imageSrc: '/polaris-boat.jpg',
    imageAlt: 'Polaris autonomous sailboat in the water'
  }

Step 4: Update About Component

1. Open src/website/views/components/About/About.tsx
2. Add 'use client' directive at the top
3. Import necessary React hooks and Next.js Image component
4. Add state for tracking visible images: const [visibleImages, setVisibleImages] = useState<Set<number>>(new Set())
5. Add refs for image elements: const imageRefs = useRef<(HTMLDivElement | null)[]>([])
6. Implement Intersection Observer in useEffect to detect when images come into view
7. Map through content sections to render paragraphs and images with conditional styling

Step 5: Add CSS Animations

1. Open src/website/views/components/About/about.module.css
2. Add styles for:
   • .content - container for all content with proper spacing
   • .paragraph - paragraph styling with line height and margins
   • .imageContainer - image wrapper with centering and transition
   • .fadeOut - initial hidden state (opacity: 0, transform: translateY(20px))
   • .fadeIn - visible state with smooth transition (opacity: 1, transform: translateY(0))
   • .image - image styling with rounded corners and shadow

Step 6: Add Image

1. Add the provided image to src/website/public/
2. Name it polaris-boat.jpg (or update the path in code)
3. Ensure image is properly sized (600x400px recommended)
4. Test that image loads correctly and fades in on scroll

Files to Modify

• src/website/public/VoyageDescription.ts - Content structure and data
• src/website/views/components/About/About.tsx - Component logic and rendering
• src/website/views/components/About/about.module.css - Styling and animations

Testing Checklist

• Image fades in smoothly when scrolling to it
• Text is properly split into paragraphs
• Image is responsive and properly sized
• No console errors
• Page loads without issues
• Animation works smoothly on different scroll speeds

Notes

• Here is the provided image to use:

• Paragraph breaks can be adjusted based on content flow
• Focus on readability and user experience