Fask UI Commons

A collection of reusable React components and data exports for Fask applications.

Data Exports

Beta Marketing Content

Centralized marketing content for Beta features and offers that can be used across different projects with client-specific styling.

betaMarketingFeatures

Array of feature objects with emoji, title, and description:

import { betaMarketingFeatures } from '@faskai/ui-commons';

// Each feature contains:
// { emoji: string, title: string, description: string }

Features included:

• ⚡ Fastest Voice - Industry-leading response times
• 🧠 Self-Learning - Fine-tune with your data
• 👆 Easiest Setup - 1-click deployment worldwide
• 🌍 Any Language - Human-sounding in 100+ languages
• 🎥 Truly Multi-Modal - Voice, Video, and Text channels
• 📈 Massively Scalable - Unlimited concurrent calls and agents

betaOfferData

Beta launch offer content with structured data:

import { betaOfferData } from '@faskai/ui-commons';

// Contains:
// - badge: "LIMITED TIME"
// - title: "🚀 Beta Launch Special"
// - description: string
// - callouts: Array<{emoji, title, description}>
// - cta: {text, url}
// - disclaimer: string

Callouts included:

• 💰 50% OFF First Year - Exclusive Beta pricing
• 🤝 Priority Support - Direct access to founders

Usage Example

import { betaMarketingFeatures, betaOfferData } from '@faskai/ui-commons';

function BetaFeatures() {
  return (
    <section>
      {/* Features */}
      {betaMarketingFeatures.map((feature) => (
        <div key={feature.title}>
          <span>{feature.emoji}</span>
          <h3>{feature.title}</h3>
          <p>{feature.description}</p>
        </div>
      ))}
      
      {/* Beta Offer */}
      <div>
        <h2>{betaOfferData.title}</h2>
        <p>{betaOfferData.description}</p>
        {betaOfferData.callouts.map((callout) => (
          <div key={callout.title}>
            <span>{callout.emoji}</span>
            <h4>{callout.title}</h4>
            <p>{callout.description}</p>
          </div>
        ))}
        <a href={betaOfferData.cta.url}>{betaOfferData.cta.text}</a>
      </div>
    </section>
  );
}

Components

GTMProvider

Google Tag Manager integration for tracking and analytics.

import { GTMProvider } from '@faskai/ui-commons';

function App() {
  return (
    <GTMProvider gtmId="GTM-K62S389H">
      {/* Your app content */}
    </GTMProvider>
  );
}

Installation

npm install @faskai/ui-commons
# or
yarn add @faskai/ui-commons

Dependencies

• React 18+
• No styling dependencies (bring your own CSS framework)

License

Private - Fask AI

Tracking Events

import { trackEvent, trackConversion, trackLinkedInConversion } from '@faskai/ui-commons';

// Track custom events
trackEvent('button_click', { button_name: 'signup' });

// Track Google Ads conversions
trackConversion('AW-17123441126', 'DshBCLKT8s4aEObzi-U_');

// Track LinkedIn conversions
trackLinkedInConversion('123456789');

Development

# Install dependencies
yarn install

# Build the package
yarn build

# Watch for changes
yarn dev

Publishing

# Build and publish to npm
yarn build
yarn publish

Design Philosophy

This package follows a data-driven approach:

• Content centralization: Marketing copy and data managed in one place
• Styling flexibility: Each project implements its own design system
• Type safety: Full TypeScript support for all exports
• Zero styling opinions: No CSS dependencies or styling conflicts

Adding New Data

1. Create your data export in src/data/
2. Export it from src/index.ts
3. Build the package with yarn build
4. Import and use in your client projects with custom styling

Current Exports

• GTMProvider: Google Tag Manager integration
• betaMarketingFeatures: Beta feature content array
• betaOfferData: Beta offer structured data
• trackEvent: Custom event tracking
• trackConversion: Google Ads conversion tracking
• trackLinkedInConversion: LinkedIn Ads conversion tracking
• trackLinkedInLead: LinkedIn lead tracking