Skip to content

feat: updated site redesign changes #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
opeyemiariyo-netizen wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: updated site redesign changes #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
220 changes: 91 additions & 129 deletions CLAUDE.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,29 +2,13 @@

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## Task Tracking (Beads / bd)

Use `bd` for all tasks/issues (no markdown TODO lists).

```bash
bd ready # Start of session
bd create "Title" -p 1 --description "..." # Create work
bd update <id> --status in_progress # Begin task
bd close <id> --reason "Done" # Complete task
bd sync # End of session
```

After upgrading `bd`: run `bd info --whats-new` and `bd hooks install` if warned.

## Repository Overview

Intent Solutions landing page - **Claude Code Systems** is the primary service (build + train). Additional services include AI agents, private AI infrastructure, and automation.
Intent Solutions landing page - Professional website showcasing customizable Intent Agent Models (IAM), private AI infrastructure, automation services, and education resources.

- **Active Project**: `astro-site/` (Astro 5.14 + React 19 islands)
- **GCP Project**: `intent-landing-page`
- **Deployed at**: https://intentsolutions.io (Firebase Hosting)
- **Plugin Marketplace**: https://claudecodeplugins.io (258+ plugins)
- **Booking Link**: https://calendar.app.google/Wqbt8EJuEh5xvvV58
**Active Project**: `/astro-site` (Astro 5.14 + React 19 islands)
**Deployed at**: https://intentsolutions.io
**Deployment**: Netlify (auto-deploy on push to main)

## Commands

Expand All @@ -33,134 +17,112 @@ All commands run from `astro-site/` directory:
```bash
# Development
bun install # Install dependencies
bun run dev # Dev server at localhost:4321
bun run dev # Dev server at http://localhost:4321
bun run build # Production build
bun run preview # Preview production build

# Firebase Deployment
firebase deploy # Deploy all (hosting, functions, firestore)
firebase deploy --only hosting # Deploy static site only
firebase deploy --only functions # Deploy Cloud Functions only
firebase emulators:start # Local dev with emulators

# Testing (Playwright)
bun run test # All E2E tests headless
bun run test # Run all E2E tests headless
bun run test:ui # Interactive Playwright UI
bun run test:headed # Run with visible browser
bun run test:debug # Step-through debugging
npx playwright test tests/e2e/survey-complete-flow.spec.ts # Single test
bun run test:report # View HTML test report
bun run test:chromium # Chrome only
bun run test:firefox # Firefox only
bun run test:webkit # Safari only
bun run test:mobile # Mobile devices only
bun run test:all # All browsers + mobile
npx playwright install # First-time browser setup
```

## Architecture

### Astro + React Islands Pattern
- **Astro pages** (`.astro`) handle routing and static content
- **React components** (`.tsx`) are hydrated client-side for interactivity
- Layout wrapper: `src/layouts/Layout.astro` provides SEO, fonts, meta tags
Copy link

@gemini-code-assist gemini-code-assist bot Mar 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The documentation mentions src/layouts/Layout.astro as the layout wrapper. However, the redesign introduced src/layouts/LayoutRedesign.astro, which is now used across the site. This should be updated to avoid confusing the AI assistant this file is intended for.

Suggested change
- Layout wrapper: `src/layouts/Layout.astro` provides SEO, fonts, meta tags
- Layout wrapper: `src/layouts/LayoutRedesign.astro` provides SEO, fonts, meta tags

- Navigation: `src/components/SiteNav.astro` (Astro component)
- Interactive sections: `Hero.tsx`, `Products.tsx`, `Services.tsx`, `Contact.tsx` (React islands with Framer Motion)

Pages are static Astro files; interactive sections use React islands with `client:load` (immediate) or `client:visible` (lazy) hydration:

```astro
<!-- src/pages/index.astro -->
<Hero client:load /> <!-- Hydrates immediately (above fold) -->
<ClaudeCodeTiers client:visible /> <!-- Hydrates when scrolled into view -->
```

- **Pages**: `src/pages/*.astro` - Routing and static content
- **Layout**: `src/layouts/Layout.astro` - SEO (astro-seo), fonts, Firebase Analytics
- **React Islands**: `src/components/*.tsx` - Interactive sections with Framer Motion

### Form Submission Flow (Firebase)

1. User submits form → POST to `/api/contact` or `/api/partner`
2. Firebase Hosting rewrites to Cloud Function
3. Function validates with Zod, saves to Firestore `contactSubmissions`
4. Sends emails via Resend API (thank-you + notification)
5. Returns JSON response

### Cloud Functions

Located in `astro-site/functions/src/`:
- `index.ts` - Function exports (submitContact, submitPartnerInquiry, submitSurvey)
- `services/firestore.ts` - Firestore write operations
- `services/email.ts` - Resend email templates
- `types/index.ts` - TypeScript interfaces

### Firestore Schema

Collection: `contactSubmissions`
```typescript
{
name: string,
email: string,
message: string,
company?: string,
phone?: string,
interest: 'consulting' | 'learn' | 'colab' | 'other',
projectType?: 'ai-ml' | 'workflow-automation' | 'gcp' | 'strategy',
budget?: 'under-5k' | '5k-15k' | '15k-50k' | '50k-plus' | 'discuss',
timeline?: 'immediate' | 'this-month' | 'this-quarter' | 'exploring',
formType: 'enhanced-contact' | 'partner-inquiry' | 'survey',
status: 'new' | 'contacted' | 'converted' | 'closed',
createdAt: Timestamp,
emailsSent?: { thankYou?: Timestamp, leadNotification?: Timestamp }
}
```

### Environment/Secrets

Secrets managed via Firebase:
```bash
firebase functions:secrets:set RESEND_API_KEY
firebase functions:secrets:set RESEND_FROM_EMAIL
```
### Netlify Functions
- `netlify/functions/survey-webhook.js` - Survey form processing
- `netlify/functions/submission-created.js` - Form submission handler
- Functions directory configured in `netlify.toml`

### Testing Infrastructure
- E2E tests in `tests/e2e/` using Playwright
- Test server runs on port 8080 (see `playwright.config.ts`)
- Multi-browser: Chrome, Firefox, Safari + mobile devices (iPhone 12, Pixel 5, iPad Pro)
- Test artifacts: `test-results/` for reports, screenshots on failure

## Core Positioning

### Intent Agent Models (IAM)
- **IAM** = Intent Agent Models - fully customizable AI agent building blocks
- **IAE** = Intent Agent Engine - the framework powering IAM
- **M1/M2/M3** = Pre-configured IAE packages (starters for common use cases)
- **Key Message**: "We customize any IAM for any workflow"

### PipelinePilot MVP
- **What**: Live production SDR automation platform
- **How**: Built with 4 customized IAM agents
- **Purpose**: Proof of IAM customizability
- **URL**: https://pipelinepilot-prod.web.app
- **4 Agents**: Orchestrator, Data Captain, Content Analyst, Readiness Auditor

### Site Principles
- Model-agnostic (Claude, OpenAI, Gemini, Llama, Mistral, Qwen, fine-tunes, local)
- Transparent pricing (flat fee + usage pass-through)
- Vertex-first security for production (with n8n for orchestration)
- No vendor lock-in messaging

## Routes

| Path | Purpose |
|------|---------|
| `/` | Homepage with hero, products, services, contact |
| `/agents` | IAM packages (M1/M2/M3) + PipelinePilot example |
| `/private-ai` | Model-agnostic private AI infrastructure |
| `/automation` | n8n automation + Vertex comparison |
| `/cloud` | Google Cloud services |
| `/about` | About page |
| `/resellers` | White-label reseller program |
| `/learn` | Education hub |
| `/learn/pricing` | Transparent pricing explanation |
| `/learn/security` | Vertex vs self-hosted comparison |
| `/learn/models` | Model-agnostic delivery (9 model families) |
| `/survey` | HUSTLE survey flow (15 sections, 76 questions) |
| `/survey/1-15` | Individual survey sections |

## Tech Stack

- E2E tests in `astro-site/tests/e2e/` using Playwright
- Test server auto-starts on port 8080 (`bun run dev --port 8080`)
- Projects: Desktop Chrome/Firefox/Safari, iPhone 12/12 Pro, Pixel 5, iPad Pro
- **Framework**: Astro 5.14 (SSG)
- **UI**: React 19 islands (partial hydration)
- **Styling**: Tailwind CSS 4 (via `@tailwindcss/vite`)
- **Animations**: Framer Motion
- **Forms**: React Hook Form + Zod validation + Netlify Forms
- **Testing**: Playwright (E2E)
- **Deployment**: Netlify (auto-deploy on push to main)

## Design System

Theme in `src/styles/global.css` (Charcoal Slate / Theme 7):

| Class | Purpose |
|-------|---------|
| `card-slate` | Semi-transparent cards with backdrop blur |
| `btn-primary` | Zinc-200 background buttons |
| `btn-secondary` | Transparent with zinc border |
| `btn-sm` | Smaller button padding |
| `text-hero` | 3.5rem/2.5rem mobile hero text |
| `text-h1`, `text-h2` | Heading sizes with tight tracking |
| `transition-smooth` | Cubic-bezier transitions |

Colors: Zinc palette (950-50), Inter font family.

## Key Pages

| Route | Purpose |
|-------|---------|
| `/` | Homepage - Claude Code Systems + secondary services |
| `/learn` | Learn with Jeremy - training, coaching, workshops |
| `/colab` | Colab with Jeremy - partnerships, joint ventures |
| `/contact` | Standalone contact page |
| `/agents` | AI Agents (Intent Agent Models) |
| `/private-ai` | Private AI infrastructure |
| `/automation` | n8n automation services |
| `/cloud` | Google Cloud services |
| `/resellers` | Distribution partner program |
| `/learn/pricing` | How pricing works |
| `/learn/security` | Vertex vs self-hosted comparison |
| `/learn/models` | Model-agnostic delivery |
- **Colors**: Zinc palette (900-50)
- **Typography**: Inter font family
- **Key Classes**: `card-slate`, `btn-primary`, `text-h1`, `transition-smooth`
- **Theme**: `src/styles/global.css`

## Content Guidelines

**Do**:
- Lead with Claude Code Systems as the primary service
- Emphasize "build + train" positioning
- Reference 258+ plugins as proof of capability
- Offer flexible contact options (Discord, WhatsApp, LinkedIn, X, phone)
- Show tiered packages clearly

**Don't**:
- Bury Claude Code under other services
- Require rigid form fields (let people choose their contact method)
- Over-emphasize secondary services on homepage
### Messaging Do's
- Emphasize IAM customizability
- Position PipelinePilot as proof of customization
- Show model-agnostic flexibility
- Be transparent about pricing
- Recommend Vertex for production with clear reasoning

### Messaging Don'ts
- Don't imply vendor lock-in
- Don't say "3 agents" as a product cap
- Don't link IAM to specific platforms (LinkedIn, etc.)
- Don't hide pricing or make it opaque
- Don't imply Vertex is the only option
1 change: 1 addition & 0 deletions astro-site/.astro/content-assets.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export default new Map();
1 change: 1 addition & 0 deletions astro-site/.astro/content-modules.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export default new Map();
Loading
Loading