Groundwork Website

A modern website for Groundwork featuring 5 distinct style variations showcasing different design approaches for regenerative agriculture investment platform.

Features

• 5 Distinct Style Variations: Switch between Minimalist, Editorial, Organic, Corporate, and Playful designs
• React + TypeScript: Modern, type-safe development
• Vite: Fast development and optimized builds
• Tailwind CSS: Utility-first styling
• GitHub Pages Ready: Automated deployment workflow

Local Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

Deployment to GitHub Pages

Initial Setup

1. Create a GitHub repository (if not already created):

   git init
   git add .
   git commit -m "Initial commit"
   git branch -M main
   git remote add origin https://github.com/YOUR_USERNAME/groundwork.git
   git push -u origin main

2. Enable GitHub Pages:

   • Go to your repository Settings → Pages
   • Under "Source", select "GitHub Actions"
   • The workflow will automatically deploy on push to main branch

Repository Name

The site is configured for a repository named groundwork. If your repository has a different name:

1. Update base in vite.config.ts:

   base: '/your-repo-name/',

2. The site will be available at: https://YOUR_USERNAME.github.io/your-repo-name/

Automatic Deployment

The GitHub Actions workflow (.github/workflows/deploy.yml) will:

• Build the site automatically on every push to main
• Deploy to GitHub Pages
• Handle all the necessary configuration

Style Variations

Use the style selector dropdown (top-right corner) to switch between:

1. Minimalist: Clean, modern, spacious design
2. Editorial: Bold, high-contrast, magazine-style
3. Organic: Flowing, nature-inspired, warm tones
4. Corporate: Structured, professional, grid-based
5. Playful: Dynamic, creative, experimental

Project Structure

groundwork/
├── .github/
│   └── workflows/
│       └── deploy.yml          # GitHub Pages deployment
├── src/
│   ├── components/
│   │   ├── heroes/             # Style-specific hero sections
│   │   ├── services/           # Style-specific service sections
│   │   └── ...                 # Other components
│   ├── contexts/
│   │   └── StyleContext.tsx    # Style management
│   └── ...
├── vite.config.ts              # Vite configuration (base path)
└── package.json

Color Palette

• Base: #FEFDFC - Light, Clear
• Growth (dark): #5B0802 - Organic, Earthy (top)
• Growth (green): #576148 - Organic, Earthy (bottom)
• Accent: #C7BCED - Bold, Vibrant
• Bridge: #F29539 - Warm, Inviting

License

Private project - All rights reserved