@faskai/ui-commons 0.0.0-alpha.13 → 0.0.0-alpha.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,82 +1,92 @@
1
1
  # Fask UI Commons
2
2
 
3
- A collection of reusable React components for Fask applications built with Material-UI.
3
+ A collection of reusable React components and data exports for Fask applications.
4
4
 
5
- ## Components
5
+ ## Data Exports
6
6
 
7
- ### BetaMarketingBanner
7
+ ### Beta Marketing Content
8
8
 
9
- A modern, lightweight marketing banner component that highlights USPs (Unique Selling Propositions) and Beta launch offer. Built with Tailwind CSS for maximum compatibility.
9
+ Centralized marketing content for Beta features and offers that can be used across different projects with client-specific styling.
10
10
 
11
- #### Features
11
+ #### betaMarketingFeatures
12
12
 
13
- - **Fastest AI Voice Chat** - Industry-leading response times
14
- - 🧠 **Self-Learning AI Agents** - Fine-tune with your data or bring your own LLM
15
- - 👆 **Easiest Setup** - 1-click deployment worldwide
16
- - 🌍 **Any Language** - Human-sounding in 100+ languages
17
- - 🎥 **Truly Multi-Modal** - Voice, Video, and Text channels
18
- - 📈 **Infinitely Scalable** - Grows with your business needs
13
+ Array of feature objects with emoji, title, and description:
19
14
 
20
- #### Props
15
+ ```tsx
16
+ import { betaMarketingFeatures } from '@faskai/ui-commons';
21
17
 
22
- ```typescript
23
- interface BetaMarketingBannerProps {
24
- variant?: 'full' | 'compact'; // Layout variant (default: 'full')
25
- showBetaOffer?: boolean; // Show/hide beta offer section (default: true)
26
- className?: string; // Additional Tailwind classes
27
- }
18
+ // Each feature contains:
19
+ // { emoji: string, title: string, description: string }
28
20
  ```
29
21
 
30
- #### Usage
31
-
32
- ```tsx
33
- import { BetaMarketingBanner } from '@faskai/ui-commons';
22
+ **Features included:**
23
+ - ⚡ **Fastest Voice** - Industry-leading response times
24
+ - 🧠 **Self-Learning** - Fine-tune with your data
25
+ - 👆 **Easiest Setup** - 1-click deployment worldwide
26
+ - 🌍 **Any Language** - Human-sounding in 100+ languages
27
+ - 🎥 **Truly Multi-Modal** - Voice, Video, and Text channels
28
+ - 📈 **Massively Scalable** - Unlimited concurrent calls and agents
34
29
 
35
- // Full banner with beta offer
36
- <BetaMarketingBanner />
30
+ #### betaOfferData
37
31
 
38
- // Without beta offer
39
- <BetaMarketingBanner showBetaOffer={false} />
32
+ Beta launch offer content with structured data:
40
33
 
41
- // With custom styling
42
- <BetaMarketingBanner className="mb-8 shadow-xl" />
34
+ ```tsx
35
+ import { betaOfferData } from '@faskai/ui-commons';
36
+
37
+ // Contains:
38
+ // - badge: "LIMITED TIME"
39
+ // - title: "🚀 Beta Launch Special"
40
+ // - description: string
41
+ // - callouts: Array<{emoji, title, description}>
42
+ // - cta: {text, url}
43
+ // - disclaimer: string
43
44
  ```
44
45
 
45
- #### Beta Offer Details
46
-
47
- - **50% OFF First Year** for limited customers
48
- - Links to: `https://biz.fask.ai/billing?price-tier=beta&period=year`
49
- - Includes animated "LIMITED TIME" badge
50
- - Modern call-to-action button
51
-
52
- #### Styling
46
+ **Callouts included:**
47
+ - 💰 **50% OFF First Year** - Exclusive Beta pricing
48
+ - 🤝 **Priority Support** - Direct access to founders
53
49
 
54
- The component uses Tailwind CSS and includes:
55
- - Gradient backgrounds and emojis instead of icons
56
- - Hover animations and transitions
57
- - Responsive design for mobile/desktop
58
- - Modern glassmorphism effects with backdrop-blur
59
- - Pulse animations for urgency
60
- - Zero external dependencies beyond React
50
+ #### Usage Example
61
51
 
62
- ## Installation
52
+ ```tsx
53
+ import { betaMarketingFeatures, betaOfferData } from '@faskai/ui-commons';
63
54
 
64
- ```bash
65
- npm install fask-ui-commons
55
+ function BetaFeatures() {
56
+ return (
57
+ <section>
58
+ {/* Features */}
59
+ {betaMarketingFeatures.map((feature) => (
60
+ <div key={feature.title}>
61
+ <span>{feature.emoji}</span>
62
+ <h3>{feature.title}</h3>
63
+ <p>{feature.description}</p>
64
+ </div>
65
+ ))}
66
+
67
+ {/* Beta Offer */}
68
+ <div>
69
+ <h2>{betaOfferData.title}</h2>
70
+ <p>{betaOfferData.description}</p>
71
+ {betaOfferData.callouts.map((callout) => (
72
+ <div key={callout.title}>
73
+ <span>{callout.emoji}</span>
74
+ <h4>{callout.title}</h4>
75
+ <p>{callout.description}</p>
76
+ </div>
77
+ ))}
78
+ <a href={betaOfferData.cta.url}>{betaOfferData.cta.text}</a>
79
+ </div>
80
+ </section>
81
+ );
82
+ }
66
83
  ```
67
84
 
68
- ## Dependencies
69
-
70
- - React 18+
71
- - Tailwind CSS (for styling)
72
-
73
- ## License
74
-
75
- Private - Fask AI
85
+ ## Components
76
86
 
77
- ## Usage
87
+ ### GTMProvider
78
88
 
79
- ### GTM Provider
89
+ Google Tag Manager integration for tracking and analytics.
80
90
 
81
91
  ```tsx
82
92
  import { GTMProvider } from '@faskai/ui-commons';
@@ -90,7 +100,24 @@ function App() {
90
100
  }
91
101
  ```
92
102
 
93
- ### Tracking Events
103
+ ## Installation
104
+
105
+ ```bash
106
+ npm install @faskai/ui-commons
107
+ # or
108
+ yarn add @faskai/ui-commons
109
+ ```
110
+
111
+ ## Dependencies
112
+
113
+ - React 18+
114
+ - No styling dependencies (bring your own CSS framework)
115
+
116
+ ## License
117
+
118
+ Private - Fask AI
119
+
120
+ ## Tracking Events
94
121
 
95
122
  ```tsx
96
123
  import { trackEvent, trackConversion, trackLinkedInConversion } from '@faskai/ui-commons';
@@ -126,16 +153,27 @@ yarn build
126
153
  yarn publish
127
154
  ```
128
155
 
129
- ## Adding New Components
156
+ ## Design Philosophy
157
+
158
+ This package follows a **data-driven approach**:
159
+
160
+ - **Content centralization**: Marketing copy and data managed in one place
161
+ - **Styling flexibility**: Each project implements its own design system
162
+ - **Type safety**: Full TypeScript support for all exports
163
+ - **Zero styling opinions**: No CSS dependencies or styling conflicts
164
+
165
+ ## Adding New Data
130
166
 
131
- 1. Create your component in `src/components/`
167
+ 1. Create your data export in `src/data/`
132
168
  2. Export it from `src/index.ts`
133
169
  3. Build the package with `yarn build`
134
- 4. The component will be available in all consuming projects
170
+ 4. Import and use in your client projects with custom styling
135
171
 
136
- ## Current Components
172
+ ## Current Exports
137
173
 
138
174
  - **GTMProvider**: Google Tag Manager integration
175
+ - **betaMarketingFeatures**: Beta feature content array
176
+ - **betaOfferData**: Beta offer structured data
139
177
  - **trackEvent**: Custom event tracking
140
178
  - **trackConversion**: Google Ads conversion tracking
141
179
  - **trackLinkedInConversion**: LinkedIn Ads conversion tracking
@@ -7,42 +7,33 @@ const features = [
7
7
  emoji: '⚡',
8
8
  title: 'Fastest AI Voice Chat',
9
9
  description: 'Industry-leading response times',
10
- bgColor: 'bg-blue-500',
11
10
  },
12
11
  {
13
12
  emoji: '🧠',
14
13
  title: 'Self-Learning AI Agents',
15
14
  description: 'Fine-tune with your data or bring your own LLM',
16
- bgColor: 'bg-purple-500',
17
15
  },
18
16
  {
19
17
  emoji: '👆',
20
18
  title: 'Easiest Setup',
21
19
  description: '1-click deployment worldwide',
22
- bgColor: 'bg-orange-500',
23
20
  },
24
21
  {
25
22
  emoji: '🌍',
26
23
  title: 'Any Language',
27
24
  description: 'Human-sounding in 100+ languages',
28
- bgColor: 'bg-green-500',
29
25
  },
30
26
  {
31
27
  emoji: '🎥',
32
28
  title: 'Truly Multi-Modal',
33
29
  description: 'Voice, Video, and Text channels',
34
- bgColor: 'bg-red-500',
35
30
  },
36
31
  {
37
32
  emoji: '📈',
38
33
  title: 'Infinitely Scalable',
39
34
  description: 'Grows with your business needs',
40
- bgColor: 'bg-yellow-600',
41
35
  },
42
36
  ];
43
37
  function BetaMarketingBanner({ variant = 'full', showBetaOffer = true, className = '', }) {
44
- const handleSubscribeClick = () => {
45
- window.open('https://biz.fask.ai/billing?price-tier=beta&period=year', '_blank');
46
- };
47
- return ((0, jsx_runtime_1.jsxs)("div", { className: `relative overflow-hidden rounded-2xl bg-gradient-to-br from-blue-50 via-white to-purple-50 ${className}`, children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-blue-500 to-purple-500" }), (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 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent", 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 ${feature.bgColor} flex items-center justify-center mx-auto mb-4 text-2xl shadow-lg group-hover:shadow-xl transition-shadow 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 text-center 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.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-xl md:text-2xl font-bold text-green-600 mb-4", children: "50% OFF First Year" }), (0, jsx_runtime_1.jsx)("p", { className: "text-gray-600 mb-6 max-w-lg mx-auto leading-relaxed", children: "Join our exclusive Beta program and save 50% on your first year. Limited spots available for early adopters." }), (0, jsx_runtime_1.jsx)("button", { onClick: handleSubscribeClick, className: "inline-flex items-center px-8 py-3 rounded-lg bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-semibold text-lg shadow-lg hover:shadow-xl hover:-translate-y-0.5 transition-all duration-300", children: "Subscribe Now" }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-gray-500 mt-4 opacity-80", children: "* Billed annually. Offer valid for limited customers only." })] })] }))] })] }));
38
+ 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." })] })] })] }))] })] }));
48
39
  }
@@ -0,0 +1,20 @@
1
+ export declare const betaMarketingFeatures: {
2
+ emoji: string;
3
+ title: string;
4
+ description: string;
5
+ }[];
6
+ export declare const betaOfferData: {
7
+ badge: string;
8
+ title: string;
9
+ description: string;
10
+ callouts: {
11
+ emoji: string;
12
+ title: string;
13
+ description: string;
14
+ }[];
15
+ cta: {
16
+ text: string;
17
+ url: string;
18
+ };
19
+ disclaimer: string;
20
+ };
@@ -0,0 +1,57 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.betaOfferData = exports.betaMarketingFeatures = void 0;
4
+ exports.betaMarketingFeatures = [
5
+ {
6
+ emoji: '⚡',
7
+ title: 'Fastest AI Voice Chat',
8
+ description: 'Industry-leading response times',
9
+ },
10
+ {
11
+ emoji: '🧠',
12
+ title: 'Self-Learning AI Agents',
13
+ description: 'Fine-tune with your data or bring your own LLM',
14
+ },
15
+ {
16
+ emoji: '👆',
17
+ title: 'Easiest Setup',
18
+ description: '1-click deployment worldwide',
19
+ },
20
+ {
21
+ emoji: '🌍',
22
+ title: 'Any Language',
23
+ description: 'Human-sounding in 100+ languages',
24
+ },
25
+ {
26
+ emoji: '🎥',
27
+ title: 'Truly Multi-Modal',
28
+ description: 'Voice, Video, and Text channels',
29
+ },
30
+ {
31
+ emoji: '📈',
32
+ title: 'Infinitely Scalable',
33
+ description: 'Grows with your business needs',
34
+ },
35
+ ];
36
+ exports.betaOfferData = {
37
+ badge: 'LIMITED TIME',
38
+ title: '🚀 Beta Launch Special',
39
+ description: 'Join our exclusive Beta program and get unprecedented access to our founders and AI technology.',
40
+ callouts: [
41
+ {
42
+ emoji: '💰',
43
+ title: '50% OFF First Year',
44
+ description: 'Exclusive Beta pricing for early adopters. Save hundreds on your first year subscription.',
45
+ },
46
+ {
47
+ emoji: '🤝',
48
+ title: 'Priority Founder Support',
49
+ description: 'Get immediate, direct access to our founders for support, feature requests, and guidance.',
50
+ },
51
+ ],
52
+ cta: {
53
+ text: 'Subscribe Now',
54
+ url: 'https://biz.fask.ai/billing?price-tier=beta&period=year',
55
+ },
56
+ disclaimer: '* Billed annually. Beta offer valid for limited customers only.',
57
+ };
package/dist/index.d.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  export { GTMProvider } from './components/gtm/gtm-provider';
2
2
  export { default as BetaMarketingBanner } from './components/marketing/BetaMarketingBanner';
3
+ export { betaMarketingFeatures, betaOfferData } from './data/betaMarketingData';
package/dist/index.js CHANGED
@@ -3,8 +3,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.BetaMarketingBanner = exports.GTMProvider = void 0;
6
+ exports.betaOfferData = exports.betaMarketingFeatures = exports.BetaMarketingBanner = exports.GTMProvider = void 0;
7
7
  var gtm_provider_1 = require("./components/gtm/gtm-provider");
8
8
  Object.defineProperty(exports, "GTMProvider", { enumerable: true, get: function () { return gtm_provider_1.GTMProvider; } });
9
9
  var BetaMarketingBanner_1 = require("./components/marketing/BetaMarketingBanner");
10
10
  Object.defineProperty(exports, "BetaMarketingBanner", { enumerable: true, get: function () { return __importDefault(BetaMarketingBanner_1).default; } });
11
+ var betaMarketingData_1 = require("./data/betaMarketingData");
12
+ Object.defineProperty(exports, "betaMarketingFeatures", { enumerable: true, get: function () { return betaMarketingData_1.betaMarketingFeatures; } });
13
+ Object.defineProperty(exports, "betaOfferData", { enumerable: true, get: function () { return betaMarketingData_1.betaOfferData; } });
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@faskai/ui-commons",
3
3
  "author": "Fask AI <arko@fask.ai>",
4
- "version": "0.0.0-alpha.13",
4
+ "version": "0.0.0-alpha.14",
5
5
  "description": "Common UI components for Fask applications.",
6
6
  "private": false,
7
7
  "main": "dist/index.js",