AI Automation Service

A projectile into the future for AI in Business

Comment

Building fon.ai’s Website: My Journey

Inspiration

I’ve spent years fascinated by AI’s promise to reshape customer support. When I saw how fast-growing African startups struggled to scale with limited human agents and Bolt.new's recent elevations in the industry, I knew there was a gap: a sleek, lightweight site that not only explains AI automation but demonstrates it—complete with chatbots, scheduling, and transparent integrations. That mission drove every design and technical decision.

What I Learned and What it Does

  • Prompt-driven development: Crafting Bolt prompts taught me how to translate UI/UX requirements into precise, atomic directives—everything from hero animations to embedded blog copy.
  • CSS-only magic: I mastered namespace-scoped animations (opacity pulses, translateY loops) and fluid typography with clamp().
  • Progressive enhancement: Wrapping service-worker registration and mobile sidebar logic behind feature flags helped me safeguard functionality in unsupported environments (shout-out StackBlitz!).
  • Content as code: Embedding our 80-word knowledge-base articles directly into the prompt showed me how to treat blog data as a first-class, version-controlled asset.

How I Built It

  1. Design & Prototype: Sketches → Figma mockups → Bolt prompt drafts
  2. Frontend Tech: HTML5, scoped CSS modules, vanilla JS for toggles & smooth scrolling
  3. Blog & Chatbot: JSON feeds for blog and services pages, indexed at chatbot init for on-demand answers
  4. Interactions:
    • Hero section: opacity: 0.6→0.8→0.6 + translateY(0→5px→0) loops, purely CSS
    • “Read more” tabs: in-page expansion with focus traps and escape-key handlers
    • Sidebar: iOS-style backdrop blur + slide-in, mobile fix via media queries and JS toggle
  5. Deployment & QA: Feature-flagged merges, Lighthouse audits for performance & accessibility, rollback scripts for safety

Challenges Faced

  • Service Worker support: StackBlitz’s WebContainer didn’t support PWA registration. I had to stub out the call locally and gate it behind an environment check.
  • Mobile sidebar glitches: The slide-in menu initially blocked content and overflowed on small viewports—solved with a backdrop-filter blur on <body> and strict transform transitions.
  • Content cleanup: Removing all stray “Nigerian format:” boilerplate and dropping the “.com” from our email required a global search-and-replace across templates, JSON schemas, and chat prompts.
  • Responsive typography: Balancing readability and layout integrity across 320px–1920px widths meant endless iterations with clamp() and viewport units.

This project sharpened my ability to turn user stories—hero animations, contact flows, dynamic blogs—into robust, maintainable code. I’m proud that fon.ai’s site not only showcases AI in action but also stands on the pillars of performance, accessibility, and transparent design. The aim now for AI Agency is to establish as a business in the real world and aid prompt business executions.

Code block:

fon.ai Design System

A comprehensive design system implementation for fon.ai web application following exact specifications for optimal performance and accessibility.

🎨 Design Specifications

Typography

  • Font: Courier New (monospace)
  • Heading Hierarchy: Proper semantic structure (h1-h6)
  • Line Height: 1.6 for body text, 1.2 for headings

Color Palette

  • Primary Background: #F7F1E1 (cream)
  • Primary Text: #333333 (charcoal)
  • Primary Accent: #2B7A0B (deep green)

Button Component

  • Minimum Width: 180px (auto-adjusting)
  • Padding: 12px 24px
  • Border: 1px solid charcoal
  • Transition: 0.3s smooth
  • Hover State: Deep green background, cream text
  • Touch Target: Minimum 48px for mobile accessibility

📱 Responsive Design

Breakpoints

  • Mobile: 320px - 767px
  • Tablet: 768px - 1023px
  • Desktop: 1024px+

Layout Behavior

  • Mobile: Single column, full-width buttons, stacked cards
  • Tablet: 2-column grids where appropriate
  • Desktop: 3-column grids, consistent button widths

🏗️ Component Architecture

Core Components

  • Button - Primary/secondary variants with consistent sizing
  • Card - Reusable content containers with hover effects
  • Grid - Responsive grid system (1-4 columns)
  • Container - Content width management
  • Section - Page section wrapper with padding
  • Input - Form inputs with accessibility features
  • Heading - Semantic heading components
  • Text - Typography component with size/weight variants
  • ProgressiveImage - Optimized image loading

Page Layouts

Homepage

  • Full-width hero with cream background
  • H1: "AI that works while you sleep..."
  • H2: "24/7 AI workflows. No code. Immediate ROI."
  • Two centered, equal-width CTAs

Pricing Page

  • Charcoal hero section with cream text
  • 3-column pricing grid
  • Consistent button placement at card bottoms

Blog

  • 3-column desktop grid (single column mobile)
  • Featured post spans full width
  • Cards with cream background and charcoal borders

⚡ Performance Optimizations

Load Time Requirements

  • Target: Under 2 seconds
  • Progressive Image Loading: Lazy loading with placeholders
  • Minimal Animations: Fade-in on scroll only
  • Optimized Assets: Compressed images and minified code

Technical Features

  • Hardware-accelerated animations
  • Intersection Observer for scroll effects
  • Debounced scroll events
  • Web Vitals tracking (LCP, FID, CLS)

♿ Accessibility Standards

WCAG Compliance

  • Contrast Ratios: All combinations meet AA standards (4.5:1 minimum)
  • Keyboard Navigation: Full keyboard accessibility
  • Screen Reader Support: Proper ARIA labels and semantic HTML
  • Focus Management: Visible focus indicators and logical tab order

Accessibility Features

  • Skip links for keyboard users
  • Proper heading hierarchy
  • Touch-friendly targets (48px minimum)
  • High contrast mode support
  • Reduced motion support
  • Screen reader announcements

🛠️ Development

Installation

npm install

Development Server

npm run dev

Build

npm run build

Linting

npm run lint

📁 Project Structure

src/
├── components/
│   ├── DesignSystem.tsx    # Core component library
│   ├── Navbar.tsx          # Navigation component
│   └── Footer.tsx          # Footer component
├── pages/
│   ├── Homepage.tsx        # Homepage layout
│   ├── Pricing.tsx         # Pricing page layout
│   └── Blog.tsx            # Blog page layout
├── utils/
│   ├── performance.ts      # Performance utilities
│   └── accessibility.ts    # Accessibility helpers
├── index.css              # Global styles and design tokens
└── App.tsx                # Main application component

🎯 Key Features

Design System Benefits

  • Consistency: Unified visual language across all pages
  • Maintainability: Centralized component library
  • Scalability: Easy to extend and modify
  • Performance: Optimized for speed and efficiency
  • Accessibility: WCAG AA compliant

Component Features

  • TypeScript support for type safety
  • Responsive design built-in
  • Accessibility features included
  • Performance optimizations
  • Consistent API across components

📊 Performance Metrics

Target Metrics

  • LCP: < 2.5 seconds
  • FID: < 100 milliseconds
  • CLS: < 0.1
  • Lighthouse Score: 90+ across all categories

Optimization Techniques

  • Progressive image loading
  • Code splitting
  • Lazy loading
  • Efficient animations
  • Minimal JavaScript bundle

🔧 Customization

Design Tokens

All design values are centralized in src/index.css using CSS custom properties and Tailwind configuration.

Component Variants

Components support multiple variants and can be easily extended with new styles while maintaining consistency.

Responsive Behavior

Grid systems and components automatically adapt to different screen sizes using mobile-first responsive design principles.

📝 Usage Examples

Button Component

<Button variant="primary" size="large" href="#contact">
  BOOK STRATEGY CALL
</Button>

Grid Layout

<Grid columns={3} gap="lg">
  {items.map(item => (
    <Card key={item.id}>
      <Heading level={3}>{item.title}</Heading>
      <Text>{item.description}</Text>
    </Card>
  ))}
</Grid>

Responsive Section

<Section background="charcoal" border>
  <Container size="lg">
    <Heading level={2} className="text-cream">
      Section Title
    </Heading>
  </Container>
</Section>

This design system provides a solid foundation for building consistent, accessible, and performant web applications while maintaining the unique aesthetic and functionality requirements of the fon.ai brand.

Share this project:

Updates