@faskai/ui-commons 0.0.0-alpha.1 → 0.0.0-alpha.11

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 marketing banner component that highlights USPs (Unique Selling Propositions) and Beta launch offer.
+
+#### 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 CSS classes
+}
+```
+
+#### Usage
+
+```tsx
+import { BetaMarketingBanner } from 'fask-ui-commons';
+
+// Full banner with beta offer
+<BetaMarketingBanner />
+
+// Without beta offer
+<BetaMarketingBanner showBetaOffer={false} />
+
+// With custom styling
+<BetaMarketingBanner className="my-custom-class" />
+```
+
+#### 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" chip
+- Professional call-to-action button
+
+#### Styling
+
+The component uses Material-UI theming and includes:
+- Gradient backgrounds and borders
+- Hover animations and transitions
+- Responsive design for mobile/desktop
+- Modern glassmorphism effects
+- Pulse animations for urgency
 
 ## Installation
 
 ```bash
-yarn add @faskai/ui-commons@0.0.0-alpha.01
+npm install fask-ui-commons
 ```
 
+## Dependencies
+
+- React 18+
+- Material-UI 5+
+- @mui/icons-material
+
+## License
+
+Private - Fask AI
+
 ## Usage
 
 ### GTM Provider

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

@@ -1,18 +1,7 @@
 import { ReactNode } from 'react';
-declare global {
-    interface Window {
-        dataLayer: any[];
-        gtag: (...args: any[]) => void;
-    }
-}
 interface GTMProviderProps {
     gtmId: string;
     children: ReactNode;
-    environment?: 'development' | 'production';
 }
-export declare function GTMProvider({ gtmId, children, environment }: GTMProviderProps): import("react/jsx-runtime").JSX.Element;
-export declare function trackEvent(eventName: string, parameters?: Record<string, any>): void;
-export declare function trackConversion(conversionId: string, conversionLabel?: string, value?: number): void;
-export declare function trackLinkedInConversion(conversionId: string, value?: number): void;
-export declare function trackLinkedInLead(): void;
+export declare function GTMProvider({ gtmId, children }: GTMProviderProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,72 +1,17 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { useEffect } from 'react';
-export function GTMProvider({ gtmId, children, environment = 'production' }) {
-    useEffect(() => {
-        // Initialize dataLayer
-        window.dataLayer = window.dataLayer || [];
-        // Load GTM script
-        const script = document.createElement('script');
-        script.innerHTML = `
-      (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}');
-    `;
-        document.head.appendChild(script);
-        // Add noscript iframe
-        const noscript = document.createElement('noscript');
-        const iframe = document.createElement('iframe');
-        iframe.src = `https://www.googletagmanager.com/ns.html?id=${gtmId}`;
-        iframe.height = '0';
-        iframe.width = '0';
-        iframe.style.display = 'none';
-        iframe.style.visibility = 'hidden';
-        noscript.appendChild(iframe);
-        document.body.insertBefore(noscript, document.body.firstChild);
-        return () => {
-            // Cleanup
-            if (script.parentNode) {
-                script.parentNode.removeChild(script);
-            }
-            if (noscript.parentNode) {
-                noscript.parentNode.removeChild(noscript);
-            }
-        };
-    }, [gtmId]);
-    return _jsx(_Fragment, { children: children });
-}
-// Helper function to track custom events
-export function trackEvent(eventName, parameters) {
-    if (typeof window !== 'undefined' && window.dataLayer) {
-        window.dataLayer.push({
-            event: eventName,
-            ...parameters,
-        });
-    }
-}
-// Helper function to track conversions
-export function trackConversion(conversionId, conversionLabel, value) {
-    if (typeof window !== 'undefined' && window.gtag) {
-        window.gtag('event', 'conversion', {
-            send_to: conversionLabel ? `${conversionId}/${conversionLabel}` : conversionId,
-            value: value,
-        });
-    }
-}
-// Helper function to track LinkedIn conversions
-export function trackLinkedInConversion(conversionId, value) {
-    trackEvent('linkedin_conversion', {
-        conversion_id: conversionId,
-        value: value,
-    });
-}
-// Helper function to track LinkedIn leads
-export function trackLinkedInLead() {
-    if (typeof window !== 'undefined') {
-        trackEvent('linkedin_lead', {
-            page_location: window.location.href,
-            page_title: document.title,
-        });
-    }
+"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,140 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = BetaMarketingBanner;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_material_1 = require("@mui/icons-material");
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+const features = [
+    {
+        icon: (0, jsx_runtime_1.jsx)(icons_material_1.Speed, {}),
+        title: 'Fastest AI Voice Chat',
+        description: 'Industry-leading response times',
+        color: '#2196F3',
+    },
+    {
+        icon: (0, jsx_runtime_1.jsx)(icons_material_1.Psychology, {}),
+        title: 'Self-Learning AI Agents',
+        description: 'Fine-tune with your data or bring your own LLM',
+        color: '#9C27B0',
+    },
+    {
+        icon: (0, jsx_runtime_1.jsx)(icons_material_1.TouchApp, {}),
+        title: 'Easiest Setup',
+        description: '1-click deployment worldwide',
+        color: '#FF9800',
+    },
+    {
+        icon: (0, jsx_runtime_1.jsx)(icons_material_1.Language, {}),
+        title: 'Any Language',
+        description: 'Human-sounding in 100+ languages',
+        color: '#4CAF50',
+    },
+    {
+        icon: (0, jsx_runtime_1.jsx)(icons_material_1.Videocam, {}),
+        title: 'Truly Multi-Modal',
+        description: 'Voice, Video, and Text channels',
+        color: '#F44336',
+    },
+    {
+        icon: (0, jsx_runtime_1.jsx)(icons_material_1.TrendingUp, {}),
+        title: 'Infinitely Scalable',
+        description: 'Grows with your business needs',
+        color: '#795548',
+    },
+];
+function BetaMarketingBanner({ variant = 'full', showBetaOffer = true, className, }) {
+    const theme = (0, material_1.useTheme)();
+    const handleSubscribeClick = () => {
+        window.open('https://biz.fask.ai/billing?price-tier=beta&period=year', '_blank');
+    };
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, { className: className, sx: {
+            background: `linear-gradient(135deg, ${(0, material_1.alpha)(theme.palette.primary.main, 0.1)} 0%, ${(0, material_1.alpha)(theme.palette.secondary.main, 0.05)} 100%)`,
+            borderRadius: 3,
+            overflow: 'hidden',
+            position: 'relative',
+            '&::before': {
+                content: '""',
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                right: 0,
+                height: '4px',
+                background: `linear-gradient(90deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,
+            },
+        }, children: (0, jsx_runtime_1.jsxs)(material_1.Container, { maxWidth: "lg", sx: { py: { xs: 4, md: 6 } }, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { textAlign: "center", sx: { mb: { xs: 4, md: 6 } }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h3", component: "h2", gutterBottom: true, sx: {
+                                fontSize: { xs: '2rem', md: '2.5rem' },
+                                fontWeight: 700,
+                                background: `linear-gradient(45deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,
+                                backgroundClip: 'text',
+                                WebkitBackgroundClip: 'text',
+                                WebkitTextFillColor: 'transparent',
+                                mb: 2,
+                            }, children: "Best-in-Class AI Features" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", color: "text.secondary", sx: { maxWidth: 600, mx: 'auto', lineHeight: 1.6 }, children: "Experience the future of customer engagement with our cutting-edge AI technology" })] }), (0, jsx_runtime_1.jsx)(material_1.Grid, { container: true, spacing: 3, sx: { mb: showBetaOffer ? 5 : 0 }, children: features.map((feature, index) => ((0, jsx_runtime_1.jsx)(material_1.Grid, { size: { xs: 12, sm: 6, md: 4 }, children: (0, jsx_runtime_1.jsx)(material_1.Card, { elevation: 0, sx: {
+                                height: '100%',
+                                background: (0, material_1.alpha)(theme.palette.background.paper, 0.8),
+                                backdropFilter: 'blur(10px)',
+                                border: `1px solid ${(0, material_1.alpha)(theme.palette.divider, 0.1)}`,
+                                transition: 'all 0.3s ease-in-out',
+                                '&:hover': {
+                                    transform: 'translateY(-4px)',
+                                    boxShadow: `0 8px 32px ${(0, material_1.alpha)(feature.color, 0.2)}`,
+                                    border: `1px solid ${(0, material_1.alpha)(feature.color, 0.3)}`,
+                                },
+                            }, children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { sx: { p: 3, textAlign: 'center' }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                                            width: 56,
+                                            height: 56,
+                                            borderRadius: '50%',
+                                            background: `linear-gradient(135deg, ${feature.color}, ${(0, material_1.alpha)(feature.color, 0.7)})`,
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            justifyContent: 'center',
+                                            mx: 'auto',
+                                            mb: 2,
+                                            color: 'white',
+                                        }, children: react_1.default.cloneElement(feature.icon, { fontSize: 'large' }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", component: "h3", gutterBottom: true, sx: { fontWeight: 600, color: 'text.primary' }, children: feature.title }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: "text.secondary", sx: { lineHeight: 1.5 }, children: feature.description })] }) }) }, index))) }), showBetaOffer && ((0, jsx_runtime_1.jsx)(material_1.Card, { elevation: 0, sx: {
+                        background: `linear-gradient(135deg, ${(0, material_1.alpha)(theme.palette.success.main, 0.1)}, ${(0, material_1.alpha)(theme.palette.primary.main, 0.05)})`,
+                        border: `2px solid ${(0, material_1.alpha)(theme.palette.success.main, 0.2)}`,
+                        borderRadius: 3,
+                        overflow: 'hidden',
+                        position: 'relative',
+                    }, children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { sx: { p: { xs: 3, md: 4 }, textAlign: 'center' }, children: [(0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "row", justifyContent: "center", sx: { mb: 2 }, children: (0, jsx_runtime_1.jsx)(material_1.Chip, { label: "LIMITED TIME", size: "small", sx: {
+                                        background: theme.palette.success.main,
+                                        color: 'white',
+                                        fontWeight: 600,
+                                        fontSize: '0.75rem',
+                                        animation: 'pulse 2s infinite',
+                                        '@keyframes pulse': {
+                                            '0%': { opacity: 1 },
+                                            '50%': { opacity: 0.8 },
+                                            '100%': { opacity: 1 },
+                                        },
+                                    } }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h4", component: "h3", gutterBottom: true, sx: {
+                                    fontSize: { xs: '1.75rem', md: '2.25rem' },
+                                    fontWeight: 700,
+                                    color: 'text.primary',
+                                    mb: 1,
+                                }, children: "\uD83D\uDE80 Beta Launch Special" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h5", sx: {
+                                    color: theme.palette.success.main,
+                                    fontWeight: 600,
+                                    mb: 2,
+                                }, children: "50% OFF First Year" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", color: "text.secondary", sx: { mb: 3, maxWidth: 500, mx: 'auto', lineHeight: 1.6 }, children: "Join our exclusive Beta program and save 50% on your first year. Limited spots available for early adopters." }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", size: "large", onClick: handleSubscribeClick, sx: {
+                                    background: `linear-gradient(45deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,
+                                    color: 'white',
+                                    px: 4,
+                                    py: 1.5,
+                                    fontSize: '1.1rem',
+                                    fontWeight: 600,
+                                    borderRadius: 2,
+                                    boxShadow: `0 4px 20px ${(0, material_1.alpha)(theme.palette.primary.main, 0.4)}`,
+                                    transition: 'all 0.3s ease-in-out',
+                                    '&:hover': {
+                                        transform: 'translateY(-2px)',
+                                        boxShadow: `0 6px 28px ${(0, material_1.alpha)(theme.palette.primary.main, 0.5)}`,
+                                        background: `linear-gradient(45deg, ${theme.palette.primary.dark}, ${theme.palette.secondary.dark})`,
+                                    },
+                                }, children: "Subscribe Now" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", display: "block", color: "text.secondary", sx: { mt: 2, opacity: 0.8 }, children: "* Billed annually. Offer valid for limited customers only." })] }) }))] }) }));
+}

package/dist/index.d.ts

@@ -1 +1 @@
-export { GTMProvider, trackConversion, trackEvent, trackLinkedInConversion, trackLinkedInLead } from './components/gtm/gtm-provider';
+export * from './components';

package/dist/index.js

@@ -1 +1,17 @@
-export { GTMProvider, trackConversion, trackEvent, trackLinkedInConversion, trackLinkedInLead } from './components/gtm/gtm-provider';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components"), exports);

package/package.json

@@ -1,43 +1,35 @@
 {
   "name": "@faskai/ui-commons",
   "author": "Fask AI <arko@fask.ai>",
-  "version": "0.0.0-alpha.01",
-  "description": "Common UI components and utilities for Fask applications",
+  "version": "0.0.0-alpha.11",
+  "description": "Common UI components for Fask applications.",
   "private": false,
-  "type": "module",
   "main": "dist/index.js",
-  "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
-  "browser": "dist/index.esm.js",
   "sideEffects": false,
   "files": [
     "dist"
   ],
-  "exports": {
-    ".": {
-      "import": "./dist/index.esm.js",
-      "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"
+    "@emotion/react": ">=11.0.0",
+    "@emotion/styled": ">=11.0.0",
+    "@mui/icons-material": ">=5.0.0",
+    "@mui/material": ">=5.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": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^7.1.2",
+    "@mui/material": "^7.1.2"
+  }
+}