Introduction

<ReactPageScroller
  customPageNumber={currentPage}
  blockScrollUp={!scrollEnabled && !scrollUpEnabled} 
  blockScrollDown={!scrollEnabled && !scrollDownEnabled}
  onBeforePageScroll={beforePageChange}
  renderAllPagesOnFirstRender={true}
>
  {/* Hero section with animated flowers */}
  <div id="hero" className="...">
    {/* Sunflower Capital title and flower animations */}
  </div>
  
  {/* Mission statement */}
  <div id="statement1" className="...">
    {/* Company mission */}
  </div>
  
  {/* Ethos section */}
  <div id="statement2" className="...">
    {/* Investment philosophy */}
  </div>
  
  {/* Portfolio table */}
  <div id="portfolio" className="...">
    <PortfolioTable />
  </div>
  
  {/* Testimonials carousel */}
  <div id="testimonials" className="...">
    <Testimonials />
  </div>
  
  {/* Contact footer */}
  <div id="footer" className="...">
    {/* Contact information and social links */}
  </div>
</ReactPageScroller>

colors: {
  'offwhite': '#FFF9DE',
  'offblack': '#010101',
  'dark-brown': '#4F3A26',
  'dark-green': '#03351A',  // Primary brand color
  'white': '#FFFFFF',
  'darkish-brown': '#704F38',
  'light-grey': '#B9A89A',
}

@keyframes breathe {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.breathe {
  animation: breathe 3s ease-in-out infinite; 
}

const expandFlower = () => {
  if (!breatheEnabled) return;
  setBreatheEnabled(false);
  const centerflower = document.getElementById("center-flower");
  
  setTimeout(() => {
    centerflower.style.transition = "transform 2s ease-in-out";
    if (window.innerHeight > window.innerWidth) {
      centerflower.style.transform = "scale(160)";
    } else {
      centerflower.style.transform = "scale(80)";
    }
  }, 10);
  
  // Show message "From Seed to Sunflower"
  // Reset after animation completes
};

const [mobile, setMobile] = useState(true);
const [lg, setLg] = useState(false);

useEffect(() => {
  const handleResize = () => {
    setLg(window.innerWidth >= 1024);
  };
  setMobile(isMobile);
  setLg(window.innerWidth >= 1024);
  
  window.addEventListener("resize", handleResize);
  return () => window.removeEventListener("resize", handleResize);
}, []);

screens: {
  'xs': '425px',
  'sm': '640px',
  'md': '768px',
  'lg': '1024px',
  'xl': '1440px',
  '2xl': '1920px',
}