Helpfulabs Solutions Website

A modern, responsive website for Helpfulabs Solutions - a business automation and systemization consultancy serving small-to-medium businesses in Kenya and East Africa.

Website Information

• Domain: helpfulabssolutions.com
• Email: hello@helpfulabssolutions.com
• Logo: Custom logo.png included in public directory

Tech Stack

• Framework: Next.js 15 with App Router
• Language: TypeScript
• Styling: Tailwind CSS
• Fonts: Inter (body) + Poppins (headings)
• Images: Next.js Image optimization with WebP/AVIF support
• Deployment: Vercel (recommended)

Brand Colors

• Primary: #0B5563 (Deep Teal)
• Accent: #FF8A3D (Warm Orange)
• Success: #2D9A6A (Growth Green)
• Light: #F7FAFC (Background)
• Dark: #1F2937 (Text)

Project Structure

src/
├── app/                 # Next.js App Router pages
│   ├── layout.tsx      # Root layout with metadata
│   ├── page.tsx        # Home page
│   ├── about/          # About page
│   ├── services/       # Services page
│   └── packages/       # Packages page
├── components/         # Reusable React components
│   ├── Header.tsx      # Navigation header with logo
│   ├── Hero.tsx        # Hero section
│   ├── Footer.tsx      # Site footer with logo
│   ├── HowItWorks.tsx  # 3-Pillar System explanation
│   ├── FeaturedServices.tsx # Homepage services
│   ├── ServiceCard.tsx # Service display component
│   ├── PricingCard.tsx # Package pricing component
│   └── Testimonial.tsx # Social proof component
├── styles/
│   └── globals.css     # Global styles + Tailwind
└── lib/                # Utility functions (future)

public/
├── logo.png           # Main logo file
└── favicon.ico        # Site favicon

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Install dependencies:

npm install

2. Run the development server:

npm run dev

3. Open http://localhost:3000 in your browser.

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint

Features Implemented

✅ Technical Foundation

• Next.js 15 with App Router
• TypeScript configuration
• Tailwind CSS with custom brand theme
• Responsive design system
• SEO-optimized metadata with proper domain
• Logo integration with Next.js Image optimization

✅ Core Pages

• Home page with Hero, How It Works, Featured Services, Testimonial
• About page with company story, mission, and values
• Services page with detailed offerings and 3-Pillar System
• Packages page with ready-made solutions and pricing

✅ Core Components

• Header with logo and navigation (mobile responsive)
• Footer with logo and contact information
• Reusable ServiceCard and PricingCard components
• Custom button styles (primary, secondary, accent)

✅ Brand System

• Custom logo integration
• Color palette implementation
• Typography system (Inter + Poppins)
• Consistent spacing and layout
• Accessibility-focused design

Next Steps

Immediate (Phase 2)

• Create remaining page routes (/resources, /case-studies, /blog, /contact, /health-check)
• Implement Systems Health Check quiz component
• Create contact forms with email integration
• Add case studies pages

Short-term (Phase 3)

• Implement blog system with MDX
• Set up email integration (MailerLite/ConvertKit)
• Add more interactive components
• Create client portal authentication

Medium-term (Phase 4)

• Payment integration (Stripe)
• Digital product downloads
• Analytics and tracking
• Performance optimization

Design System

Logo Usage

• Main logo: /logo.png (180x60px recommended display size)
• Favicon: /favicon.ico
• Logo appears in header and footer
• Footer logo uses brightness-0 invert for white version

Button Classes

• .btn-primary - Main CTAs (brand color background)
• .btn-secondary - Secondary actions (outlined)
• .btn-accent - Special highlights (orange background)

Typography

• Headings: font-heading (Poppins)
• Body text: font-body (Inter)
• Use semantic HTML headings (h1, h2, h3, etc.)

Spacing

• Container: max-w-6xl mx-auto px-6
• Sections: py-16 lg:py-24
• Cards: p-6 or p-8

Deployment

Vercel (Recommended)

1. Push to GitHub
2. Connect repository to Vercel
3. Set custom domain: helpfulabssolutions.com
4. Deploy automatically on push

Manual Build

npm run build
npm run start

Contributing

1. Create feature branch from main
2. Make changes following the established patterns
3. Test locally with npm run dev
4. Submit pull request

Business Context

This website serves Helpfulabs Solutions' mission to bring "big business efficiency" to local small-medium businesses through:

• Business Systems Audits - Mapping current workflows and identifying inefficiencies
• Systemization Strategy - Creating repeatable processes and SOPs
• Financial Structuring - Profit First principles and cash flow management
• Process Automation - Implementing affordable tools and integrations

Target Audience: Small-to-medium product and service businesses in Kenya and East Africa (shops, salons, gyms, restaurants, clinics, repair shops).

Conversion Funnel: Systems Health Check → Email Capture → Discovery Call → Paid Engagement

Contact: hello@helpfulabssolutions.com

---

Built with ❤️ for local businesses in Kenya and East Africa.