@faskai/ui-commons 0.0.0-alpha.10 → 0.0.0-alpha.12

package/README.md

@@ -1,17 +1,79 @@
 # Fask UI Commons
 
-A minimal package containing common UI components and utilities shared between Fask applications:
+A collection of reusable React components for Fask applications built with Material-UI.
 
-* @/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
+## Components
+
+### BetaMarketingBanner
+
+A modern, lightweight marketing banner component that highlights USPs (Unique Selling Propositions) and Beta launch offer. Built with Tailwind CSS for maximum compatibility.
+
+#### Features
+
+- ⚡ **Fastest AI Voice Chat** - Industry-leading response times
+- 🧠 **Self-Learning AI Agents** - Fine-tune with your data or bring your own LLM
+- 👆 **Easiest Setup** - 1-click deployment worldwide
+- 🌍 **Any Language** - Human-sounding in 100+ languages
+- 🎥 **Truly Multi-Modal** - Voice, Video, and Text channels
+- 📈 **Infinitely Scalable** - Grows with your business needs
+
+#### Props
+
+```typescript
+interface BetaMarketingBannerProps {
+  variant?: 'full' | 'compact';      // Layout variant (default: 'full')
+  showBetaOffer?: boolean;           // Show/hide beta offer section (default: true)
+  className?: string;                // Additional Tailwind classes
+}
+```
+
+#### Usage
+
+```tsx
+import { BetaMarketingBanner } from '@faskai/ui-commons';
+
+// Full banner with beta offer
+<BetaMarketingBanner />
+
+// Without beta offer
+<BetaMarketingBanner showBetaOffer={false} />
+
+// With custom styling
+<BetaMarketingBanner className="mb-8 shadow-xl" />
+```
+
+#### Beta Offer Details
+
+- **50% OFF First Year** for limited customers
+- Links to: `https://biz.fask.ai/billing?price-tier=beta&period=year`
+- Includes animated "LIMITED TIME" badge
+- Modern call-to-action button
+
+#### Styling
+
+The component uses Tailwind CSS and includes:
+- Gradient backgrounds and emojis instead of icons
+- Hover animations and transitions
+- Responsive design for mobile/desktop
+- Modern glassmorphism effects with backdrop-blur
+- Pulse animations for urgency
+- Zero external dependencies beyond React
 
 ## Installation
 
 ```bash
-yarn add @faskai/ui-commons@0.0.0-alpha.01
+npm install fask-ui-commons
 ```
 
+## Dependencies
+
+- React 18+
+- Tailwind CSS (for styling)
+
+## License
+
+Private - Fask AI
+
 ## Usage
 
 ### GTM Provider

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,48 @@
+"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',
+        bgColor: 'bg-blue-500',
+    },
+    {
+        emoji: '🧠',
+        title: 'Self-Learning AI Agents',
+        description: 'Fine-tune with your data or bring your own LLM',
+        bgColor: 'bg-purple-500',
+    },
+    {
+        emoji: '👆',
+        title: 'Easiest Setup',
+        description: '1-click deployment worldwide',
+        bgColor: 'bg-orange-500',
+    },
+    {
+        emoji: '🌍',
+        title: 'Any Language',
+        description: 'Human-sounding in 100+ languages',
+        bgColor: 'bg-green-500',
+    },
+    {
+        emoji: '🎥',
+        title: 'Truly Multi-Modal',
+        description: 'Voice, Video, and Text channels',
+        bgColor: 'bg-red-500',
+    },
+    {
+        emoji: '📈',
+        title: 'Infinitely Scalable',
+        description: 'Grows with your business needs',
+        bgColor: 'bg-yellow-600',
+    },
+];
+function BetaMarketingBanner({ variant = 'full', showBetaOffer = true, className = '', }) {
+    const handleSubscribeClick = () => {
+        window.open('https://biz.fask.ai/billing?price-tier=beta&period=year', '_blank');
+    };
+    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." })] })] }))] })] }));
+}

package/dist/index.d.ts

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

package/dist/index.js

@@ -1,5 +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.GTMProvider = void 0;
+exports.BetaMarketingBanner = 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 BetaMarketingBanner_1 = require("./components/marketing/BetaMarketingBanner");
+Object.defineProperty(exports, "BetaMarketingBanner", { enumerable: true, get: function () { return __importDefault(BetaMarketingBanner_1).default; } });

package/package.json

@@ -1,13 +1,15 @@
 {
   "name": "@faskai/ui-commons",
   "author": "Fask AI <arko@fask.ai>",
-  "version": "0.0.0-alpha.10",
+  "version": "0.0.0-alpha.12",
   "description": "Common UI components for Fask applications.",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "build": "tsc"
   },
@@ -19,5 +21,6 @@
     "@types/react": "^18.0.0",
     "next": "^14.0.0",
     "typescript": "^5.0.0"
-  }
+  },
+  "dependencies": {}
 }