Skip to main content

​
Overview

The Sunflower Capital website is a modern Next.js application featuring a unique full-page scrolling experience powered by ReactPageScroller. The architecture emphasizes performance, responsive design, and smooth animations.

​
Tech Stack

Next.js 14

App Router with React Server Components

TypeScript

Type-safe development throughout

Tailwind CSS

Utility-first styling with custom config

ReactPageScroller

Full-page vertical scrolling

​
Project Structure

src/
├── app/
│   ├── page.tsx          # Main application component
│   ├── layout.tsx        # Root layout with metadata
│   └── globals.css       # Global styles and animations
├── components/
│   ├── PortfolioTable.tsx   # Portfolio filtering and display
│   ├── Testimonials.tsx     # Client testimonials carousel
│   ├── DotNavigator.tsx     # Page navigation dots
│   ├── Ethos.tsx            # Company values (desktop)
│   ├── DropDown.tsx         # Expandable content sections
│   └── Footer.tsx           # Footer component
public/
├── images/               # SVG assets and graphics
└── fonts/                # Custom Arya and Bitter fonts

​
Core Dependencies

package.json
{
  "dependencies": {
    "next": "^14.2.14",
    "react": "^18",
    "react-dom": "^18",
    "react-page-scroller": "^3.0.1",
    "react-device-detect": "^2.2.3",
    "@vercel/analytics": "^1.5.0",
    "@next/third-parties": "^15.3.1"
  }
}

​
Application Flow

The main application (src/app/page.tsx) is a client component that manages six distinct full-page sections:
1

Hero Section

Animated sunflower garden with brand title and interactive center flower
2

Statement 1

Company mission statement with large typography
3

Ethos

Core values displayed via dropdown (desktop) or stacked cards (mobile)
4

Portfolio

Filterable table of portfolio companies with industry categorization
5

Testimonials

Founder testimonials and feedback
6

Footer/Contact

Contact information and social links

​
State Management Architecture

The application uses React hooks for state management, with key state variables controlling scroll behavior and UI:
src/app/page.tsx
const [loaded, setLoaded] = useState(false);
const [scrollEnabled, setScrollEnabled] = useState(true);
const [scrollUpEnabled, setScrollUpEnabled] = useState(true);
const [scrollDownEnabled, setScrollDownEnabled] = useState(true);
const [breatheEnabled, setBreatheEnabled] = useState(true);
const [currentPage, setCurrentPage] = useState(0);
const [mobile, setMobile] = useState(true);
const [lg, setLg] = useState(false);
Scroll Control Pattern: Child components (PortfolioTable, Testimonials) receive setters as props to control parent-level scroll behavior when users interact with scrollable content.

​
Key State Variables

  • scrollEnabled: Master control for all scrolling
  • scrollUpEnabled: Allows scrolling to previous page
  • scrollDownEnabled: Allows scrolling to next page
  • These are passed to ReactPageScroller via blockScrollUp and blockScrollDown
  • loaded: Controls initial fade-in animations
  • breatheEnabled: Enables/disables breathing animation on center flower
  • currentPage: Tracks active page index (0-5)
  • mobile: Detected via react-device-detect library’s isMobile
  • lg: Breakpoint tracking for viewport width >= 1024px

​
Layout and Metadata

The root layout (src/app/layout.tsx) provides SEO optimization and analytics:
src/app/layout.tsx
export const metadata: Metadata = {
  title: "Sunflower Capital",
  description:
    "We partner at the earliest stage with companies building foundational infrastructure for modern enterprises, critical industries, and the physical world.",
};
  • Open Graph meta tags for social sharing
  • Twitter Card metadata
  • Canonical URL definition
  • Structured data (JSON-LD) for organization
  • Mobile-optimized viewport settings

​
Custom Theming

The application uses a custom Tailwind configuration with brand-specific colors and typography: 
export default {
  theme: {
    fontFamily: {
      'arya': ['Arya', 'system-ui'],
      'bitter': ['Bitter', 'system-ui'],
      'bitter-italic': ['Bitter-italic', 'system-ui']
    },
    colors: {
      'offwhite': '#FFF9DE',
      'offblack': '#010101',
      'dark-brown': '#4F3A26',
      'dark-green': '#03351A',
      'darkish-brown': '#704F38',
      'light-grey': '#B9A89A',
    },
    screens: {
      'xs': '425px',
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1440px',
      '2xl': '1920px',
    },
  },
}

​
Performance Optimizations

Image Optimization

Next.js <Image> component with quality= for crisp SVGs

Font Loading

Preloaded custom fonts to prevent FOUT

Lazy Rendering

renderAllPagesOnFirstRender={true} for instant navigation

Analytics

Vercel Analytics and Google Analytics integration

​
Component Communication Pattern

Components communicate primarily through props and callbacks:
src/app/page.tsx
<PortfolioTable
  setScrollEnabled={setScrollEnabled}
  setScrollUpEnabled={setScrollUpEnabled}
  setScrollDownEnabled={setScrollDownEnabled}
  isMobile={isMobile}
/>
This pattern allows child components to temporarily disable page scrolling when users are interacting with internal scrollable areas (like the portfolio table).

​
Next Steps

Page Scrolling

Learn about ReactPageScroller implementation

Responsive Design

Explore mobile and desktop patterns

Build docs developers (and LLMs) love

Get started for freeTalk to us