@faskai/ui-commons 0.0.0-alpha.2 → 0.0.0-alpha.21

package/README.md

@@ -1,20 +1,92 @@
 # Fask UI Commons
 
-A minimal package containing common UI components and utilities shared between Fask applications:
+A collection of reusable React components and data exports for Fask applications.
 
-* @/fask-web-app-v2 (B2C) is hosted at fask.ai
-* @/fask-biz-landing (B2B landing) is at fask.ai/business
-* @/powpal-web-app (B2B dashboard) is at biz.fask.ai
+## Data Exports
 
-## Installation
+### Beta Marketing Content
 
-```bash
-yarn add @faskai/ui-commons@0.0.0-alpha.01
+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:
+
+```tsx
+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:
+
+```tsx
+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
 ```
 
-## Usage
+**Callouts included:**
+- 💰 **50% OFF First Year** - Exclusive Beta pricing
+- 🤝 **Priority Support** - Direct access to founders
 
-### GTM Provider
+#### Usage Example
+
+```tsx
+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.
 
 ```tsx
 import { GTMProvider } from '@faskai/ui-commons';
@@ -28,7 +100,24 @@ function App() {
 }
 ```
 
-### Tracking Events
+## Installation
+
+```bash
+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
 
 ```tsx
 import { trackEvent, trackConversion, trackLinkedInConversion } from '@faskai/ui-commons';
@@ -64,16 +153,27 @@ yarn build
 yarn publish
 ```
 
-## Adding New Components
+## 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 component in `src/components/`
+1. Create your data export in `src/data/`
 2. Export it from `src/index.ts`
 3. Build the package with `yarn build`
-4. The component will be available in all consuming projects
+4. Import and use in your client projects with custom styling
 
-## Current Components
+## 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

package/dist/components/gtm/gtm-provider.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+interface GTMProviderProps {
+    gtmId: string;
+    children: ReactNode;
+}
+export declare function GTMProvider({ gtmId, children }: GTMProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/gtm/gtm-provider.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GTMProvider = GTMProvider;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const script_1 = __importDefault(require("next/script"));
+function GTMProvider({ gtmId, children }) {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(script_1.default, { id: "gtm-head", strategy: "afterInteractive", children: `
+          (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+          new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+          j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+          'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+          })(window,document,'script','dataLayer','${gtmId}');
+        ` }), (0, jsx_runtime_1.jsx)("noscript", { children: (0, jsx_runtime_1.jsx)("iframe", { src: `https://www.googletagmanager.com/ns.html?id=${gtmId}`, height: "0", width: "0", style: { display: 'none', visibility: 'hidden' } }) }), children] }));
+}

package/dist/components/index.d.ts

@@ -0,0 +1,2 @@
+export { GTMProvider } from './gtm/gtm-provider';
+export { default as BetaMarketingBanner } from './marketing/BetaMarketingBanner';

package/dist/components/index.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BetaMarketingBanner = exports.GTMProvider = void 0;
+var gtm_provider_1 = require("./gtm/gtm-provider");
+Object.defineProperty(exports, "GTMProvider", { enumerable: true, get: function () { return gtm_provider_1.GTMProvider; } });
+var BetaMarketingBanner_1 = require("./marketing/BetaMarketingBanner");
+Object.defineProperty(exports, "BetaMarketingBanner", { enumerable: true, get: function () { return __importDefault(BetaMarketingBanner_1).default; } });

package/dist/components/marketing/BetaMarketingBanner.d.ts

@@ -0,0 +1,7 @@
+interface BetaMarketingBannerProps {
+    variant?: 'full' | 'compact';
+    showBetaOffer?: boolean;
+    className?: string;
+}
+export default function BetaMarketingBanner({ variant, showBetaOffer, className, }: BetaMarketingBannerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/marketing/BetaMarketingBanner.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = BetaMarketingBanner;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const features = [
+    {
+        emoji: '⚡',
+        title: 'Fastest AI Voice Chat',
+        description: 'Industry-leading response times',
+    },
+    {
+        emoji: '🧠',
+        title: 'Self-Learning AI Agents',
+        description: 'Fine-tune with your data or bring your own LLM',
+    },
+    {
+        emoji: '👆',
+        title: 'Easiest Setup',
+        description: '1-click deployment worldwide',
+    },
+    {
+        emoji: '🌍',
+        title: 'Any Language',
+        description: 'Human-sounding in 100+ languages',
+    },
+    {
+        emoji: '🎥',
+        title: 'Truly Multi-Modal',
+        description: 'Voice, Video, and Text channels',
+    },
+    {
+        emoji: '📈',
+        title: 'Infinitely Scalable',
+        description: 'Grows with your business needs',
+    },
+];
+function BetaMarketingBanner({ variant = 'full', showBetaOffer = true, className = '', }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `relative overflow-hidden rounded-2xl bg-gradient-to-br from-gray-50 via-white to-gray-100 ${className}`, children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-gray-600 to-gray-800" }), (0, jsx_runtime_1.jsxs)("div", { className: "max-w-6xl mx-auto px-4 py-8 md:py-12", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-center mb-8 md:mb-12", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-3xl md:text-4xl font-bold mb-4 text-gray-900", children: "Best-in-Class AI Features" }), (0, jsx_runtime_1.jsx)("p", { className: "text-lg text-gray-600 max-w-2xl mx-auto leading-relaxed", children: "Experience the future of customer engagement with our cutting-edge AI technology" })] }), (0, jsx_runtime_1.jsx)("div", { className: `grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 ${showBetaOffer ? 'mb-12' : ''}`, children: features.map((feature, index) => ((0, jsx_runtime_1.jsxs)("div", { className: "group bg-white/70 backdrop-blur-sm rounded-xl p-6 border border-gray-100 hover:border-gray-200 hover:shadow-lg hover:-translate-y-1 transition-all duration-300 text-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-14 h-14 rounded-full bg-gray-100 hover:bg-gray-200 flex items-center justify-center mx-auto mb-4 text-2xl shadow-md group-hover:shadow-lg transition-all duration-300", children: feature.emoji }), (0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-semibold text-gray-900 mb-2", children: feature.title }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-600 leading-relaxed", children: feature.description })] }, index))) }), showBetaOffer && ((0, jsx_runtime_1.jsxs)("div", { className: "bg-gradient-to-br from-green-50 to-blue-50 rounded-2xl border-2 border-green-200 p-6 md:p-8 relative overflow-hidden", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 bg-gradient-to-r from-green-100/20 to-blue-100/20 animate-pulse" }), (0, jsx_runtime_1.jsxs)("div", { className: "relative z-10", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-center mb-8", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex justify-center mb-4", children: (0, jsx_runtime_1.jsx)("span", { className: "inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-500 text-white animate-pulse", children: "LIMITED TIME" }) }), (0, jsx_runtime_1.jsx)("h3", { className: "text-2xl md:text-3xl font-bold text-gray-900 mb-2", children: "\uD83D\uDE80 Beta Launch Special" }), (0, jsx_runtime_1.jsx)("p", { className: "text-gray-600 max-w-lg mx-auto leading-relaxed", children: "Join our exclusive Beta program and get unprecedented access to our founders and AI technology." })] }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6 mb-8", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-white/60 backdrop-blur-sm rounded-xl p-6 border border-green-200 text-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-4xl mb-3", children: "\uD83D\uDCB0" }), (0, jsx_runtime_1.jsx)("h4", { className: "text-lg font-semibold text-gray-900 mb-2", children: "50% OFF First Year" }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-600 leading-relaxed", children: "Exclusive Beta pricing for early adopters. Save hundreds on your first year subscription." })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-white/60 backdrop-blur-sm rounded-xl p-6 border border-green-200 text-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-4xl mb-3", children: "\uD83E\uDD1D" }), (0, jsx_runtime_1.jsx)("h4", { className: "text-lg font-semibold text-gray-900 mb-2", children: "Priority Founder Support" }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-600 leading-relaxed", children: "Get immediate, direct access to our founders for support, feature requests, and guidance." })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [(0, jsx_runtime_1.jsx)("a", { href: "https://biz.fask.ai/billing?price-tier=beta&period=year", target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center px-8 py-3 rounded-lg bg-gray-900 hover:bg-gray-800 text-white font-semibold text-lg shadow-lg hover:shadow-xl hover:-translate-y-0.5 transition-all duration-300 border border-gray-900", children: "Subscribe Now" }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-gray-500 mt-4 opacity-80", children: "* Billed annually. Beta offer valid for limited customers only." })] })] })] }))] })] }));
+}

package/dist/data/betaMarketingData.d.ts

@@ -0,0 +1,24 @@
+export declare const betaMarketingHeader: {
+    title: string;
+    description: string;
+};
+export declare const betaMarketingFeatures: {
+    emoji: string;
+    title: string;
+    description: string;
+}[];
+export declare const betaOfferData: {
+    badge: string;
+    title: string;
+    description: string;
+    callouts: {
+        emoji: string;
+        title: string;
+        description: string;
+    }[];
+    cta: {
+        text: string;
+        url: string;
+    };
+    disclaimer: string;
+};

package/dist/data/betaMarketingData.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.betaOfferData = exports.betaMarketingFeatures = exports.betaMarketingHeader = void 0;
+exports.betaMarketingHeader = {
+    title: 'Best-in-Class AI Phone Calling',
+    description: 'Experience the future of customer engagement with our personalized inbound and outbound, voice and video calling AI.',
+};
+exports.betaMarketingFeatures = [
+    {
+        emoji: '⚡',
+        title: 'Fastest Voice',
+        description: 'Industry-leading response times',
+    },
+    {
+        emoji: '🧠',
+        title: 'Self-Learning',
+        description: 'Fine-tune with your data',
+    },
+    {
+        emoji: '👆',
+        title: 'Easiest Setup',
+        description: '1-click deployment worldwide',
+    },
+    {
+        emoji: '🌍',
+        title: 'Any Language',
+        description: 'Human-sounding in 100+ languages',
+    },
+    {
+        emoji: '🎥',
+        title: 'Truly Multi-Modal',
+        description: 'Voice, Video, and Text channels',
+    },
+    {
+        emoji: '📈',
+        title: 'Massively Scalable',
+        description: 'Unlimited concurrent calls and agents',
+    },
+];
+exports.betaOfferData = {
+    badge: 'LIMITED TIME',
+    title: 'Beta Launch Special',
+    description: 'Join our exclusive Beta program and get unprecedented access to our founders and AI technology.',
+    callouts: [
+        {
+            emoji: '💰',
+            title: '50% OFF First Year',
+            description: 'Exclusive Beta pricing for early adopters. Save hundreds on your first year subscription.',
+        },
+        {
+            emoji: '🤝',
+            title: 'Priority Support',
+            description: 'Get immediate, direct access to our founders for support, feature requests, and guidance.',
+        },
+    ],
+    cta: {
+        text: 'Subscribe Now',
+        url: 'https://biz.fask.ai/billing?price-tier=beta&period=year',
+    },
+    disclaimer: 'Beta offer valid for limited customers only.',
+};

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { GTMProvider } from './components/gtm/gtm-provider';
+export { betaMarketingFeatures, betaMarketingHeader, betaOfferData } from './data/betaMarketingData';

package/dist/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.betaOfferData = exports.betaMarketingHeader = exports.betaMarketingFeatures = exports.GTMProvider = void 0;
+var gtm_provider_1 = require("./components/gtm/gtm-provider");
+Object.defineProperty(exports, "GTMProvider", { enumerable: true, get: function () { return gtm_provider_1.GTMProvider; } });
+var betaMarketingData_1 = require("./data/betaMarketingData");
+Object.defineProperty(exports, "betaMarketingFeatures", { enumerable: true, get: function () { return betaMarketingData_1.betaMarketingFeatures; } });
+Object.defineProperty(exports, "betaMarketingHeader", { enumerable: true, get: function () { return betaMarketingData_1.betaMarketingHeader; } });
+Object.defineProperty(exports, "betaOfferData", { enumerable: true, get: function () { return betaMarketingData_1.betaOfferData; } });

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@faskai/ui-commons",
   "author": "Fask AI <arko@fask.ai>",
-  "version": "0.0.0-alpha.02",
-  "description": "Common UI components and utilities for Fask applications",
+  "version": " 0.0.0-alpha.21",
+  "description": "Common UI components for Fask applications.",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -10,30 +10,17 @@
   "files": [
     "dist"
   ],
-  "exports": {
-    ".": {
-      "require": "./dist/index.js",
-      "types": "./dist/index.d.ts"
-    }
-  },
   "scripts": {
-    "build": "tsc",
-    "dev": "tsc --watch",
-    "clean": "rm -rf dist",
-    "prepare": "yarn build"
+    "build": "tsc"
   },
   "peerDependencies": {
-    "next": "^14.0.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "next": ">=13.0.0",
+    "react": ">=18.0.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "@types/node": "^20.0.0",
-    "typescript": "^5.0.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "next": "^14.0.0",
+    "typescript": "^5.0.0"
   },
-  "packageManager": "yarn@1.22.22"
-}
+  "dependencies": {}
+}