AgentBox Landing Page

A modern, animated landing page for AgentBox — a personal AI agent that lives in Telegram. Built with vanilla HTML, CSS, and JavaScript. Zero dependencies. Fully accessible.

Overview

The AgentBox landing page is a single-page static site showcasing the AgentBox Telegram AI agent. It includes interactive demos, animated statistics, testimonials, pricing tables, and a FAQ accordion — all built without JavaScript frameworks.

Key Features

• Animated Chat Demo — real-time typing simulation showing agent conversations
• Testimonial Carousel — auto-rotating user testimonials with dot navigation
• Pricing Toggle — monthly/yearly billing switch with animated price changes
• FAQ Accordion — keyboard-accessible expanding sections
• How It Works — step-by-step walkthrough with intersection observer animations
• Social Proof Stats — counter animations with real-time number display

Quick Start

Clone the repo and open index.html — that's it. No build step required.

# Clone
git clone https://github.com/sauravbhattacharya001/getagentbox.git
cd getagentbox

# Open directly
open index.html

# Or serve locally (Python)
python -m http.server 8000

# Or serve locally (Node)
npx serve .

Run Tests

npm install
npm test

# With coverage
npm run test:coverage

Project Structure

getagentbox/
├── index.html          # Main landing page
├── styles.css          # All styles (1000+ lines, dark theme)
├── app.js              # Interactive components (IIFE modules)
├── package.json        # Test dependencies (jest)
├── Dockerfile          # Production container (nginx)
├── docs/               # This documentation site
│   ├── index.html      # API reference & guides
│   └── getting-started.html
├── __tests__/          # Jest test suites
│   ├── app.test.js
│   ├── faq.test.js
│   ├── pricing.test.js
│   └── ...
└── .github/
    └── workflows/
        ├── ci.yml      # Build + test + lint
        ├── pages.yml   # GitHub Pages deploy
        ├── docker.yml  # Docker build/push
        └── codeql.yml  # Security scanning

ChatDemo

An animated chat window that simulates real-time conversations between a user and the AI agent. Features typing indicators, message-by-message reveal with configurable delays, and automatic scenario rotation.

Scenarios

Conversations are defined in the SCENARIOS object in app.js:

var SCENARIOS = Object.freeze({
  memory: [
    { role: 'user', text: 'What was that recipe from last week?' },
    { role: 'bot',  text: 'The pasta with sun-dried tomatoes! ...' },
  ],
  search: [ ... ],
  reminders: [ ... ],
  vision: [ ... ],
});

Configuration

Adding Scenarios

Add a new key to SCENARIOS and a matching tab button in index.html:

<!-- Add tab button -->
<button class="demo-tab" data-scenario="custom">My Feature</button>

// Add conversation in app.js
SCENARIOS.custom = [
  { role: 'user', text: 'Show me something cool' },
  { role: 'bot',  text: 'Here you go! ...' },
];

Testimonials

Auto-rotating carousel with fade transitions. Supports dot navigation and pause-on-hover.

Configuration

Adding Testimonials

<div class="testimonial-card">
  <div class="stars">⭐⭐⭐⭐⭐</div>
  <p class="testimonial-text">Amazing product!</p>
  <div class="testimonial-author">
    <div class="author-avatar">👩</div>
    <div>
      <div class="author-name">Jane Doe</div>
      <div class="author-role">Product Manager</div>
    </div>
  </div>
</div>

Pricing

Toggle-based pricing display with monthly/yearly billing. Yearly prices show a discount badge. The toggle animates smoothly between states.

Price Configuration

Prices are set as data-* attributes on each pricing card:

<div class="pricing-card"
     data-monthly="9.99"
     data-yearly="7.99">
  <span class="price-value">$9.99</span>
  <span class="price-period">/month</span>
</div>

The Pricing module reads these attributes and swaps values when the billing toggle is clicked.

FAQ

Accessible accordion component. Only one item opens at a time. Fully keyboard navigable with Enter and Space key support.

Accessibility

• role="button" and tabindex="0" on question elements
• aria-expanded dynamically toggled
• aria-hidden="true" on toggle icons
• Keyboard handler for Enter and Space

Adding Questions

<div class="faq-item">
  <div class="faq-question"
       role="button"
       tabindex="0"
       aria-expanded="false">
    <span>Your question here?</span>
    <span class="faq-toggle" aria-hidden="true">+</span>
  </div>
  <div class="faq-answer">
    <p>Your answer here.</p>
  </div>
</div>

How It Works

Step-by-step feature walkthrough using intersection observer for scroll-triggered fade-in animations. Steps animate in sequence as the user scrolls down.

Animation Behavior

• Uses IntersectionObserver with 0.2 threshold
• Each step fades in with a staggered delay (100ms per step)
• Respects prefers-reduced-motion — skips animation if set
• Steps only animate once (observer disconnects after trigger)

Stats

Animated counter display for social proof metrics. Numbers count up from zero to their target value with easing.

Configuration

<div class="stat" data-count="10000">
  <div class="stat-number">0</div>
  <div class="stat-label">Active Users</div>
</div>

Theming

The landing page uses a dark gradient theme defined in styles.css. Key colors and spacing can be customized by editing CSS custom properties or the style values directly.

Key Colors

Typography

System font stack: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif. No external fonts are loaded.

Content Customization

All content is in index.html — no build step or template engine. Edit directly.

• Hero Section: Update the h1, tagline, and CTA link
• Features: Modify the .feature cards (emoji + title + description)
• Chat Demos: Edit SCENARIOS in app.js
• Pricing: Update data-monthly/data-yearly attributes
• Testimonials: Edit .testimonial-card elements
• FAQ: Edit .faq-item elements
• Stats: Update data-count attributes
• Footer: Update Telegram bot link and social links

Analytics

Optional privacy-friendly analytics via GoatCounter. No cookies, no tracking, GDPR compliant.

<!-- Replace with your GoatCounter endpoint -->
<script data-goatcounter="https://yoursite.goatcounter.com/count"
        async src="https://gc.zgo.at/count.js"></script>

To disable analytics entirely, remove the GoatCounter script tag from index.html.

GitHub Pages

The site auto-deploys to GitHub Pages on every push to master via the pages.yml workflow.

Setup

1. Go to Settings → Pages in your GitHub repo
2. Set Source to "GitHub Actions"
3. Push to master — the workflow deploys automatically

Live site: sauravbhattacharya001.github.io/getagentbox

Docker

# Build
docker build -t agentbox-landing .

# Run
docker run -p 8080:80 agentbox-landing

# Or use the pre-built image
docker pull ghcr.io/sauravbhattacharya001/getagentbox:latest
docker run -p 8080:80 ghcr.io/sauravbhattacharya001/getagentbox:latest

The Dockerfile uses a multi-stage nginx setup with security-hardened configuration.

Self Hosting

Since this is a static site, any web server works:

# Nginx
server {
    listen 80;
    root /var/www/agentbox;
    index index.html;
    location / {
        try_files $uri $uri/ =404;
    }
}

# Apache
DocumentRoot "/var/www/agentbox"

# Caddy
:80 {
    root * /var/www/agentbox
    file_server
}

API Reference

All components are implemented as IIFEs (Immediately Invoked Function Expressions) in app.js. They auto-initialize on DOM ready.

ChatDemo Methods

Testimonials Methods

Accessibility

The landing page follows WCAG 2.1 AA guidelines:

• Keyboard Navigation: All interactive elements are focusable and operable with keyboard
• Screen Readers: Semantic HTML, ARIA attributes, meaningful alt text
• Motion: Respects prefers-reduced-motion — disables animations when set
• Color Contrast: All text meets minimum 4.5:1 contrast ratio
• Focus Indicators: Visible focus rings on all interactive elements
• FAQ Accessibility: role="button", aria-expanded, keyboard Enter/Space support

Security

Security headers configured in index.html meta tags and Dockerfile nginx config:

See SECURITY.md for vulnerability reporting.

GitHub · Live Demo · MIT License