Marketing Pages¶

Purpose: Public-facing marketing and informational pages
Category: Marketing & Sales
Pages: 5 pages
Audience: Prospective customers

Overview¶

Marketing pages that showcase the product, educate visitors, and drive conversions.

1. Pricing Page¶

File: src/app/pricing/page.tsx (1,015 lines)
Route: /pricing
Type: Public
Purpose: Display subscription plans and drive plan selection

⭐ Largest Marketing Page - Dynamic Pricing with API

Key Features¶

Dynamic Plan Loading - Fetches from API
Multi-Currency Support - INR/USD auto-detection
Monthly/Yearly Toggle - Billing period switcher
Plan Comparison Table - Feature-by-feature comparison
Authentication Flow - Login/signup redirect for unauthenticated users
Payment Integration - Direct redirect to payment page

State Variables (7)¶

billingType ('monthly' | 'yearly') - Billing period
currency ('INR' | 'USD') - Currency based on geolocation
isModalOpen (boolean) - Contact sales modal
apiPlans (Plan[]) - Plans from API
loading (boolean) - Initial load state
error (string | null) - Error message

API Integration¶

Endpoint: GET /v2/subscriptions/plans

Response:

interface ApiResponse {
  plans: Plan[];
  count: number;
  server_id: string;
}

interface Plan {
  category: string; // "free" | "starter" | "pro" | "business" | "enterprise"
  pricing: {
    monthly: { INR: string; USD: string };
    yearly: { INR: string; USD: string };
  };
  offers: {
    monthly: { INR: string; USD: string }; // Discount %
    yearly: { INR: string; USD: string };
  };
  no_of_chatbots: number | null;
  no_of_chat_sessions: {
    monthly: number | null;
    yearly: number | null;
  } | null;
  website_pages_crawl_cap: {
    monthly: number | null;
    yearly: number | null;
  } | null;
  features: PlanFeatures;
}

interface PlanFeatures {
  analytics: boolean;
  form_submission_notification: boolean;
  custom_logo_on_avatar: boolean;
  chat_transcripts: boolean;
  playground: boolean;
  premium_avatars: boolean;
  llm_selection: boolean;
  // ... 20+ features
}

Currency Auto-Detection¶

Geolocation Services (Fallback Chain):

https://ipapi.co/json/
https://ipinfo.io/json
https://api.country.is/

Logic:

const detectUserCurrency = async () => {
  for (const service of geolocationServices) {
    const response = await fetch(service);
    const data = await response.json();
    const countryCode = data.country_code || data.country || data.countryCode;

    if (countryCode === "IN") {
      setCurrency("INR");
    } else {
      setCurrency("USD");
    }
  }
};

Fallback: USD if all services fail

Plan Categories (5)¶

Free - $0/month
Starter - Entry-level paid
Pro - Most popular (marked with badge)
Business - High-volume
Enterprise - Custom pricing ("Contact Sales")

Billing Toggle¶

Monthly: "Save 20%" discount
Yearly: "Save 30%" discount

Discount Calculation:

const discountPercent = plan.offers[billingType][currency];
const currentPrice = originalPrice * (1 - discountPercent / 100);

Authentication Flow¶

Unauthenticated User:

User clicks "Get Started"
Plan stored in sessionStorage.selectedPlanForPayment
Redirect to /signup
After signup/login, auto-redirect to /payment with plan

Authenticated User:

User clicks "Get Started"
Direct redirect to /payment?plan={encoded_plan}

Free Plan:

Skips payment
Direct redirect to /chatbots

Plan Color Coding¶

const planColorConfig = {
  free: { upperDivBgColor: "bg-[#02BBCD]", lowerDivBgColor: "bg-gray-100" },
  starter: { upperDivBgColor: "bg-[#02BBCD]", lowerDivBgColor: "bg-[#D9F5F8]" },
  pro: { upperDivBgColor: "bg-[#5534CB]", lowerDivBgColor: "bg-[#E6E1F7]" }, // Purple -"Popular"
  business: {
    upperDivBgColor: "bg-[#FF6622]",
    lowerDivBgColor: "bg-[#FFE0D3]",
  },
  enterprise: {
    upperDivBgColor: "bg-[#4285F4]",
    lowerDivBgColor: "bg-[#E3F2FD]",
  },
};

Feature Comparison Table¶

14 Features Compared:

Chat Sessions
Web Pages Crawl Cap
Number of Chatbots
Chatbot Analytics
Prompt Center
Customize Voice
Chat Transcripts
Playground
Form Center
Integrations Support
LLM Selection
Premium Avatars
Form Submission Notification
Agents (avatar galleries)

Avatar Galleries by Plan¶

Free: 2 avatars (Eva, Chris)
Starter: 6 avatars (Eva, Shyla, Chris, Myra, Jack, Emma)
Pro: 5 premium avatars
Business: 6 premium avatars
Enterprise: All + custom

Component: PopupModal
Trigger: "Contact Sales" or "Book a Demo" buttons
Purpose: Lead capture for Enterprise plan

Loading & Error States¶

Loading:

<div className="animate-spin h-32 w-32 border-b-2 border-orange-500"></div>
<p>Loading pricing plans...</p>

Error:

<p className="text-red-600">{error}</p>
<button onClick={fetchPricingData}>Retry</button>

Responsive Design¶

Desktop:

Side-by-side plan cards
Full comparison table
Horizontal toggle

Mobile:

Stacked plan cards
Scrollable comparison table
Vertical toggle with labels

SEO¶

Title: "Choose the Right Plan to Build Smarter AI Chatbots"
Description: "Browse our flexible monthly and yearly plans..."
Structured pricing data (JSON-LD assumed)

Components Used¶

PopupModal - Contact sales form
Footer - Page footer
ToastContainer - Notifications
ImageGrid - Avatar display component

Session Storage¶

selectedPlanForPayment - Plan selection for post-auth
isLoggedIn, authToken - Auth status
subscriptionActive - Existing subscription check

Dependencies¶

next/navigation (useRouter)
react (useState, useEffect)
react-toastify (toast)

2. Homepage¶

File: src/app/page.tsx (41 lines)
Route: /
Type: Public
Purpose: Marketing homepage with dynamic CMS content

🌐 Strapi CMS-Driven - Server-Side Rendered

Implementation Type¶

Server Component:

export const dynamic = "force-dynamic";

Forces dynamic rendering - No static generation, always fresh from CMS

Metadata Generation¶

Dynamic SEO from Strapi:

export async function generateMetadata(): Promise<Metadata> {
  const data = await getPageData();

  if (!data) return { title: "Not Found" };
  const meta = data?.metaData;

  return {
    title: meta.metaTitle || meta.title,
    description: meta.metaDescription || "",
    keywords:
      "Best AI Chatbots, Conversational AI Assistant, AI Chatbot for Businesses, AI powered chatbot, AI Virtual Assistants, AI Talking Bots, AI Chatbot characters",
    openGraph: {
      title: meta.metaTitle || meta.title,
      description: meta.metaDescription || "",
      images: `https://machineavatars.com/home-img-og.jpg`,
    },
    twitter: {
      card: "summary_large_image",
      title: meta.metaTitle || meta.title,
      description: meta.metaDescription || "",
      images: `https://machineavatars.com/home-img-og.jpg`,
    },
    other: {
      "facebook-domain-verification": "gpmlwvzu5bhfd2gulq7h6604zp3k9y",
    },
  };
}

Hardcoded SEO Keywords:

Best AI Chatbots
Conversational AI Assistant
AI Chatbot for Businesses
AI powered chatbot
AI Virtual Assistants
AI Talking Bots
AI Chatbot characters

Social Media:

Open Graph Image: https://machineavatars.com/home-img-og.jpg
Twitter Card: Large image summary
Facebook Domain Verification: gpmlwvzu5bhfd2gulq7h6604zp3k9y

Server-Side Data Fetching¶

CMS Integration:

export default async function MachinePage() {
  const page = await getPageData();

  if (!page)
    return <div className="p-8 text-center text-xl">404 - Page not found</div>;

  return <HomePageClient sections={page.sections} />;
}

Strapi Function:

import { getPageData } from "@/lib/strapi";

Data Structure:

page.metaData - SEO metadata
page.sections - Dynamic homepage sections

Client Component¶

HomePageClient:

Receives sections prop from server
Renders dynamic sections from Strapi CMS
Location: src/app/components/HomePageClient.tsx

Section Types (19 documented earlier):

Hero Section
Features Grid
How It Works
Use Cases
Testimonials
CTA Section
etc. (see index.md for full list)

404 Handling¶

Fallback UI:

<div className="p-8 text-center text-xl">404 - Page not found</div>

Shows when Strapi returns no data

File Size¶

41 lines total:

Import statements: 3 lines
Metadata function: 25 lines
Page component: 13 lines

Minimal server code - All complexity in:

@/lib/strapi - CMS API client
HomePageClient - Section rendering

Environment Variables¶

Strapi API:

Base URL configured in @/lib/strapi
API token (if required)
Content type: homepage or similar

Performance¶

Dynamic SSR:

Fresh data on every request
No static caching
SEO-friendly server rendering
Fast Time To First Byte (TTFB)

Trade-off:

Dynamic = slower than static
Benefit = Always fresh CMS content

CMS Structure (Strapi)¶

Expected Response:

{
  metaData: {
    title: string;
    metaTitle: string;
    metaDescription: string;
  }
  sections: Array<{
    type: string;
    content: any;
    // ... section-specific fields
  }>;
}

3. About Us¶

File: src/app/about-us/page.tsx
Route: /about-us
Type: Public
Purpose: Company information and team

Content:

Company mission
Team members
Company values
Timeline/milestones

4. AI Agents¶

File: src/app/ai-agents/page.tsx
Route: /ai-agents
Type: Public
Purpose: Product features and capabilities