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

package/README.md

@@ -6,16 +6,16 @@ A collection of reusable React components for Fask applications built with Mater
 
 ### BetaMarketingBanner
 
-A modern marketing banner component that highlights USPs (Unique Selling Propositions) and Beta launch offer.
+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
+- ⚡ **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
 
@@ -23,14 +23,14 @@ A modern marketing banner component that highlights USPs (Unique Selling Proposi
 interface BetaMarketingBannerProps {
   variant?: 'full' | 'compact';      // Layout variant (default: 'full')
   showBetaOffer?: boolean;           // Show/hide beta offer section (default: true)
-  className?: string;                // Additional CSS classes
+  className?: string;                // Additional Tailwind classes
 }
 ```
 
 #### Usage
 
 ```tsx
-import { BetaMarketingBanner } from 'fask-ui-commons';
+import { BetaMarketingBanner } from '@faskai/ui-commons';
 
 // Full banner with beta offer
 <BetaMarketingBanner />
@@ -39,24 +39,25 @@ import { BetaMarketingBanner } from 'fask-ui-commons';
 <BetaMarketingBanner showBetaOffer={false} />
 
 // With custom styling
-<BetaMarketingBanner className="my-custom-class" />
+<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" chip
-- Professional call-to-action button
+- Includes animated "LIMITED TIME" badge
+- Modern call-to-action button
 
 #### Styling
 
-The component uses Material-UI theming and includes:
-- Gradient backgrounds and borders
+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
+- Modern glassmorphism effects with backdrop-blur
 - Pulse animations for urgency
+- Zero external dependencies beyond React
 
 ## Installation
 
@@ -67,8 +68,7 @@ npm install fask-ui-commons
 ## Dependencies
 
 - React 18+
-- Material-UI 5+
-- @mui/icons-material
+- Tailwind CSS (for styling)
 
 ## License
 

package/dist/components/marketing/BetaMarketingBanner.js

@@ -1,140 +1,48 @@
 "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, {}),
+        emoji: '⚡',
         title: 'Fastest AI Voice Chat',
         description: 'Industry-leading response times',
-        color: '#2196F3',
+        bgColor: 'bg-blue-500',
     },
     {
-        icon: (0, jsx_runtime_1.jsx)(icons_material_1.Psychology, {}),
+        emoji: '🧠',
         title: 'Self-Learning AI Agents',
         description: 'Fine-tune with your data or bring your own LLM',
-        color: '#9C27B0',
+        bgColor: 'bg-purple-500',
     },
     {
-        icon: (0, jsx_runtime_1.jsx)(icons_material_1.TouchApp, {}),
+        emoji: '👆',
         title: 'Easiest Setup',
         description: '1-click deployment worldwide',
-        color: '#FF9800',
+        bgColor: 'bg-orange-500',
     },
     {
-        icon: (0, jsx_runtime_1.jsx)(icons_material_1.Language, {}),
+        emoji: '🌍',
         title: 'Any Language',
         description: 'Human-sounding in 100+ languages',
-        color: '#4CAF50',
+        bgColor: 'bg-green-500',
     },
     {
-        icon: (0, jsx_runtime_1.jsx)(icons_material_1.Videocam, {}),
+        emoji: '🎥',
         title: 'Truly Multi-Modal',
         description: 'Voice, Video, and Text channels',
-        color: '#F44336',
+        bgColor: 'bg-red-500',
     },
     {
-        icon: (0, jsx_runtime_1.jsx)(icons_material_1.TrendingUp, {}),
+        emoji: '📈',
         title: 'Infinitely Scalable',
         description: 'Grows with your business needs',
-        color: '#795548',
+        bgColor: 'bg-yellow-600',
     },
 ];
-function BetaMarketingBanner({ variant = 'full', showBetaOffer = true, className, }) {
-    const theme = (0, material_1.useTheme)();
+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.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." })] }) }))] }) }));
+    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 * from './components';
+export { GTMProvider } from './components/gtm/gtm-provider';
+export { default as BetaMarketingBanner } from './components/marketing/BetaMarketingBanner';

package/dist/index.js

@@ -1,17 +1,10 @@
 "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);
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./components"), exports);
+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,7 +1,7 @@
 {
   "name": "@faskai/ui-commons",
   "author": "Fask AI <arko@fask.ai>",
-  "version": "0.0.0-alpha.11",
+  "version": "0.0.0-alpha.12",
   "description": "Common UI components for Fask applications.",
   "private": false,
   "main": "dist/index.js",
@@ -14,10 +14,6 @@
     "build": "tsc"
   },
   "peerDependencies": {
-    "@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"
   },
@@ -26,10 +22,5 @@
     "next": "^14.0.0",
     "typescript": "^5.0.0"
   },
-  "dependencies": {
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.0",
-    "@mui/icons-material": "^7.1.2",
-    "@mui/material": "^7.1.2"
-  }
+  "dependencies": {}
 }