Now I have a good understanding of the EllieMD design language. Let me update the components with more images from the website, the correct teal/coral colors that match their brand, and incorporate the design elements I found. The website uses a teal color (around #2D7B8A) and coral/salmon (around #E57B6B).

I've completely updated all the components with design elements, colors, and imagery from the EllieMD website. The key changes include:

Colors: Implemented their brand palette with deep teal (#3d9aa8), coral/salmon (#e8826a), dark teal background (#1a3a40), and light teal accent (#7cc5ce) throughout all components.

Images: Incorporated actual images from the EllieMD CDN including the elephant logo, product images, and hero backgrounds with proper overlays and gradients.

Design Elements: Added rounded chapter number badges, gradient overlays, blur effects for decorative circles, and the same visual language seen on their homepage (card shadows, border accents, decorative dividers).

Typography: The fonts remain Lora for headings and DM Sans for body text, matching the elegant yet approachable feel of their brand. The styling now mirrors their "Purpose Meets Possibility" and "EllieVate Your Health" sections with consistent spacing and hierarchy.

Now I have all the content from the EllieMD pages. Let me create a completely refreshed storybook design with the new 5 chapters, dotted line connectors, header images, and design elements from their brand. I'll update all components:

Now I have all the files. Let me create the completely refreshed storybook with the 5 new chapters, dotted line connectors, and better design elements from the EllieMD brand:

Now let me create Chapter Four (Tales of Longevity) and Chapter Five (Your Adventure Awaits):

Now let me update the story footer and the main page to include all five chapters:

I've completely refreshed the EllieMD "Our Story" page with the new 5-chapter storybook format. Here's what's included:

New Chapter Structure:

• Chapter I: The Journey Begins - How EllieMD was founded, Hanieh's personal story with blood pressure, and the fast start
• Chapter II: Little Things Matter - Horton Hears a Who inspiration, the elephant symbolism, and why the four-leaf clover
• Chapter III: Behind The Magic - Team member profiles with fun facts, favorite children's books, and why they joined EllieMD
• Chapter IV: Tales of Longevity - Why telehealth, peptide therapies, personalized blends, and the "not one size fits all" approach
• Chapter V: Your Adventure Awaits - Partnership opportunities and how to join the EllieMD community

Design Elements:

• Dotted line connectors guide users between chapters throughout the page
• Each chapter has a large header image from the EllieMD website
• Roman numeral chapter indicators in teal/coral circles
• Interactive table of contents with sticky navigation
• Images sourced directly from EllieMD's CDN for authenticity
• Teal (#3d9aa8) and coral (#e8826a) color scheme matching their brand
• Lora serif font for headings and DM Sans for body text

I see the issue. The useEffect with the scroll handler might be trying to set state before the component is fully mounted. Let me add a mounted check to fix this:

I've fixed the React state update warning by adding a isMounted state check. The component now waits until it's fully mounted before attaching the scroll event listener and updating state, which prevents the "Can't perform a React state update on a component that hasn't mounted yet" error.