Skip to main content

​
Clone the repository

Start by cloning the Sunflower Capital repository to your local machine: 
git clone <repository-url>
cd sunflower-nextjs
Replace <repository-url> with your actual Git repository URL. If you don’t have access to the repository yet, contact your team administrator.

​
Install dependencies

The project uses npm for package management. Install all required dependencies: 
npm install
This will install all dependencies defined in package.json:
  • next (^14.2.14) - React framework with App Router
  • react (^18) - UI library
  • react-dom (^18) - React DOM renderer
  • react-page-scroller (^3.0.1) - Full-page scrolling functionality
  • @glidejs/glide (^3.6.2) - Testimonials carousel
  • react-device-detect (^2.2.3) - Mobile/desktop detection
  • ua-parser-js (^1.0.39) - User agent parsing
  • @vercel/analytics (^1.5.0) - Vercel Analytics integration
  • @next/third-parties (^15.3.1) - Third-party script optimization
  • typescript (^5) - Type safety
  • tailwindcss (^3.4.10) - Utility-first CSS
  • autoprefixer (^10.4.20) - CSS vendor prefixes
  • eslint (^8) - Code linting
  • eslint-config-next (14.2.7) - Next.js ESLint config

​
Start the development server

Once dependencies are installed, start the local development server: 
npm run dev
The development server will start on http://localhost:3000.
1

Server starts

You’ll see output indicating Next.js has compiled successfully:
▲ Next.js 14.2.14
- Local:        http://localhost:3000
- Ready in 2.3s
2

Open browser

Navigate to http://localhost:3000 in your browser
3

View the site

You should see the Sunflower Capital hero section with animated flowers
Success! The page auto-updates as you edit files thanks to Fast Refresh.

​
Project structure

Understand the key directories and files: 
sunflower-nextjs/
├── src/
│   ├── app/
│   │   ├── page.tsx          # Main application component
│   │   ├── layout.tsx        # Root layout with metadata
│   │   ├── globals.css       # Global styles and animations
│   │   └── favicon.ico       # Site favicon
│   └── components/
│       ├── PortfolioTable.tsx    # Portfolio filtering table
│       ├── Testimonials.tsx      # Testimonials carousel
│       ├── Footer.tsx            # Footer component
│       ├── Ethos.tsx             # Investment philosophy
│       ├── DotNavigator.tsx      # Section navigation dots
│       └── DropDown.tsx          # Dropdown component
├── public/
│   ├── fonts/
│   │   ├── Arya/             # Arya font family
│   │   ├── Bitter/           # Bitter font family
│   │   └── app.css           # Font imports
│   └── images/
│       ├── flower-*.svg      # Animated flower SVGs
│       ├── sunflower-logo.svg
│       └── og-image.png      # Social sharing image
├── tailwind.config.ts        # Tailwind configuration
├── tsconfig.json             # TypeScript configuration
├── next.config.mjs           # Next.js configuration
└── package.json              # Dependencies and scripts

​
Verify installation

Test that everything is working correctly:

​
1. Check the hero section

The hero section should display:
  • “SUNFLOWER CAPITAL” title in Arya font
  • Multiple animated sunflower SVGs
  • Dark green (#03351A) background
  • Breathing animation on the center flower

​
2. Test scrolling

Scroll down (or use mouse wheel) to navigate through sections:
  1. Hero with animated flowers
  2. Mission statement on off-white background
  3. Ethos section with investment philosophy
  4. Portfolio table with filtering
  5. Testimonials carousel
  6. Footer with contact information

​
3. Test portfolio filtering

On desktop/landscape mode:
  • Click filter buttons like “AI/ML”, “Fintech”, “Developer”
  • Verify the portfolio table updates to show only matching companies
  • Click “All” to show all 56+ companies
On mobile/portrait mode:
  • Use the dropdown selector to filter by industry

​
4. Verify responsive behavior

  • Full flower layout visible
  • Dot navigation on right side
  • Filter buttons displayed horizontally
  • Three-column portfolio table

​
Edit your first page

Let’s make a simple change to verify hot reload works:
1

Open the main page

Open src/app/page.tsx in your code editor
2

Find the title

Locate the hero title around line 104-108:
src/app/page.tsx
<h1 className="title font-arya font-bold text-offwhite...">
  SUNFLOWER <br /> CAPITAL
</h1>
3

Make a change

Try modifying the text (just for testing):
<h1 className="title font-arya font-bold text-offwhite...">
  SUNFLOWER <br /> CAPITAL <br /> VENTURES
</h1>
4

View the change

Save the file and watch your browser automatically update without refresh
5

Revert the change

Undo your changes to restore the original title

​
Build for production

When you’re ready to create a production build: 
npm run build
This command:
  1. Compiles TypeScript to JavaScript
  2. Optimizes React components
  3. Processes and minifies CSS with Tailwind
  4. Optimizes images and fonts
  5. Generates static pages where possible
  6. Creates optimized bundles
The output will be placed in .next/ directory.

​
Start production server

After building, run the production server locally: 
npm run start
This serves the optimized production build on http://localhost:3000.
The production build is optimized for performance but takes longer to compile. Use npm run dev for development.

​
Run linting

Ensure your code follows Next.js best practices: 
npm run lint
This runs ESLint with Next.js configuration to catch:
  • React Hooks violations
  • Accessibility issues
  • Next.js-specific anti-patterns
  • TypeScript type errors

​
Common issues

If port 3000 is occupied, Next.js will automatically try 3001, 3002, etc. Or specify a custom port:
PORT=3001 npm run dev
Delete node_modules and reinstall:
rm -rf node_modules package-lock.json
npm install
Ensure you’re using Node.js 18+ and TypeScript 5:
node --version  # Should be v18.0.0 or higher
npx tsc --version  # Should be Version 5.x
Custom fonts are in public/fonts/. Verify the files exist:
ls public/fonts/Arya/
ls public/fonts/Bitter/
Font faces are defined in src/app/globals.css at lines 20-37.
Clear your browser cache and hard reload:
  • Chrome/Edge: Ctrl+Shift+R (Cmd+Shift+R on Mac)
  • Firefox: Ctrl+F5 (Cmd+Shift+R on Mac)
  • Safari: Cmd+Option+R

​
Environment variables

The project includes Google Analytics. To configure:
1

Create .env.local

Create a .env.local file in the root directory (already gitignored)
2

Add analytics ID

The Google Analytics ID is currently hardcoded in src/app/layout.tsx:98:
<GoogleAnalytics gaId="G-SR59L3T5LT" />
For local development, you may want to disable this or use a different ID.
Vercel Analytics works automatically when deployed to Vercel - no configuration needed.

​
Next steps

Now that you have the development environment running:

Customize styling

Learn how to customize colors, fonts, and animations

Deploy to Vercel

Deploy your site to production with automatic CI/CD

Portfolio component

Explore the portfolio table component and filtering

Architecture overview

Understand the application architecture and design

Build docs developers (and LLMs) love

Get started for freeTalk to us