npm - @retinalabsllc/zairusjs - Versions diffs - 14.0.15 → 14.0.25 - Mend

@retinalabsllc/zairusjs 14.0.15 → 14.0.25

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.

Files changed (5) hide show

package/dist/index.d.mts CHANGED Viewed

@@ -874,4 +874,33 @@ interface UniversalReferralPageProps {
 }
 declare const UniversalReferralPage: React.FC<UniversalReferralPageProps>;
-export { AppBento2, type AppBento2Props, type BannerProps, type BentoFeature, type BoardMember, type CompanyDetails, type ConsultantProfile, ConsultantShowcase, type ConsultantShowcaseProps, ContentGridBlock, type ContentGridBlockProps, type DocumentSectionData, type EmailContact, Faq, type FaqItem, type FaqProps, FeatureScroll, type FeatureScrollProps, Footer, type FooterColumn, type FooterLink, type FooterProps, GifFeatureCard, type GifFeatureCardProps, Header, type HeaderLink, type HeaderProps, type AppLogo$1 as HeroAppLogo, HeroSection, type HeroSectionProps, type HomeActionBtn, type LeaderboardItem, ManagedBoardBlock, type ManagedBoardBlockProps, ManagedContactBlock, type ManagedContactBlockProps, ManagedDocument, type ManagedDocumentProps, ManagedNewsletterSplitBlock, type ManagedNewsletterSplitBlockProps, ManagedNotFoundBlock, type ManagedNotFoundBlockProps, ManagedPricingBlock, type ManagedPricingBlockProps, ManagedProjectsBlock, type ManagedProjectsBlockProps, ManagedToaster, MedicalFeatureStatsBlock, MobileNav, type MobileNavItem, type MobileNavProps, type NavItem, type NotificationItem, NumberInput, type NumberInputProps, PageSpinner, type PageSpinnerProps, PipleAuth, type PipleAuthProps, type PlatformFeatureItem, PlatformFeatures, type PlatformFeaturesProps, PortfolioHero, type PortfolioHeroProps, type AppLogo as PricingAppLogo, type PricingFeature, type PricingPlan, type PricingTab, type ProjectItem, type ReferralProfile, type RewardItem, type RewardProfile, type ScrollFeature, type SocialContact, type SocialLink, type StatItem, TextInput, type TextInputProps, ThreeDActionButton, type ThreeDActionButtonProps, ThreeDButton, type ThreeDButtonProps, UniversalCardPage, type UniversalCardPageProps, UniversalErrorView, type UniversalErrorViewProps, UniversalHomeView, type UniversalHomeViewProps, UniversalOrganizationPage, type UniversalOrganizationPageProps, UniversalProfilePage, type UniversalProfilePageProps, UniversalProfileSettings, type UniversalProfileSettingsProps, type UniversalReferralItem, UniversalReferralPage, type UniversalReferralPageProps, UniversalRewardPage, type UniversalRewardPageProps, UniversalSecurityPage, type UniversalSecurityPageProps, UniversalSidebar, type UniversalSidebarProps, type UniversalTransaction, UniversalTransactionPage, type UniversalTransactionPageProps, UniversalVerificationPage, type UniversalVerificationPageProps, type UniversalWallet, UniversalWalletPage, type UniversalWalletPageProps, type VerificationStatus, WaitlistDialog, type WaitlistDialogProps };
+interface PricingFeature2 {
+    name: string;
+    value: boolean | string;
+}
+interface TierOption {
+    tierName: string;
+    priceUSD: number;
+    isYearly: boolean;
+    description: string;
+    features: PricingFeature2[];
+    acceptWaitlist: boolean;
+    acceptPreorder: boolean;
+    isAvailable?: boolean;
+}
+interface UniversalCardActionPageProps {
+    cardId: string;
+    cardType: 'VIRTUAL' | 'PHYSICAL';
+    currentTier: string;
+    hasPreordered: boolean;
+    onWaitlist: boolean;
+    tiers: TierOption[];
+    isLoadingData: boolean;
+    onBack?: () => void;
+    onConfirmAction: (tierName: string, action: 'pre_order' | 'join_waitlist' | 'upgrade') => Promise<{
+        success: boolean;
+    }>;
+}
+declare const UniversalCardActionPage: React.FC<UniversalCardActionPageProps>;
+export { AppBento2, type AppBento2Props, type BannerProps, type BentoFeature, type BoardMember, type CompanyDetails, type ConsultantProfile, ConsultantShowcase, type ConsultantShowcaseProps, ContentGridBlock, type ContentGridBlockProps, type DocumentSectionData, type EmailContact, Faq, type FaqItem, type FaqProps, FeatureScroll, type FeatureScrollProps, Footer, type FooterColumn, type FooterLink, type FooterProps, GifFeatureCard, type GifFeatureCardProps, Header, type HeaderLink, type HeaderProps, type AppLogo$1 as HeroAppLogo, HeroSection, type HeroSectionProps, type HomeActionBtn, type LeaderboardItem, ManagedBoardBlock, type ManagedBoardBlockProps, ManagedContactBlock, type ManagedContactBlockProps, ManagedDocument, type ManagedDocumentProps, ManagedNewsletterSplitBlock, type ManagedNewsletterSplitBlockProps, ManagedNotFoundBlock, type ManagedNotFoundBlockProps, ManagedPricingBlock, type ManagedPricingBlockProps, ManagedProjectsBlock, type ManagedProjectsBlockProps, ManagedToaster, MedicalFeatureStatsBlock, MobileNav, type MobileNavItem, type MobileNavProps, type NavItem, type NotificationItem, NumberInput, type NumberInputProps, PageSpinner, type PageSpinnerProps, PipleAuth, type PipleAuthProps, type PlatformFeatureItem, PlatformFeatures, type PlatformFeaturesProps, PortfolioHero, type PortfolioHeroProps, type AppLogo as PricingAppLogo, type PricingFeature, type PricingFeature2, type PricingPlan, type PricingTab, type ProjectItem, type ReferralProfile, type RewardItem, type RewardProfile, type ScrollFeature, type SocialContact, type SocialLink, type StatItem, TextInput, type TextInputProps, ThreeDActionButton, type ThreeDActionButtonProps, ThreeDButton, type ThreeDButtonProps, type TierOption, UniversalCardActionPage, type UniversalCardActionPageProps, UniversalCardPage, type UniversalCardPageProps, UniversalErrorView, type UniversalErrorViewProps, UniversalHomeView, type UniversalHomeViewProps, UniversalOrganizationPage, type UniversalOrganizationPageProps, UniversalProfilePage, type UniversalProfilePageProps, UniversalProfileSettings, type UniversalProfileSettingsProps, type UniversalReferralItem, UniversalReferralPage, type UniversalReferralPageProps, UniversalRewardPage, type UniversalRewardPageProps, UniversalSecurityPage, type UniversalSecurityPageProps, UniversalSidebar, type UniversalSidebarProps, type UniversalTransaction, UniversalTransactionPage, type UniversalTransactionPageProps, UniversalVerificationPage, type UniversalVerificationPageProps, type UniversalWallet, UniversalWalletPage, type UniversalWalletPageProps, type VerificationStatus, WaitlistDialog, type WaitlistDialogProps };

package/dist/index.d.ts CHANGED Viewed

@@ -874,4 +874,33 @@ interface UniversalReferralPageProps {
 }
 declare const UniversalReferralPage: React.FC<UniversalReferralPageProps>;
-export { AppBento2, type AppBento2Props, type BannerProps, type BentoFeature, type BoardMember, type CompanyDetails, type ConsultantProfile, ConsultantShowcase, type ConsultantShowcaseProps, ContentGridBlock, type ContentGridBlockProps, type DocumentSectionData, type EmailContact, Faq, type FaqItem, type FaqProps, FeatureScroll, type FeatureScrollProps, Footer, type FooterColumn, type FooterLink, type FooterProps, GifFeatureCard, type GifFeatureCardProps, Header, type HeaderLink, type HeaderProps, type AppLogo$1 as HeroAppLogo, HeroSection, type HeroSectionProps, type HomeActionBtn, type LeaderboardItem, ManagedBoardBlock, type ManagedBoardBlockProps, ManagedContactBlock, type ManagedContactBlockProps, ManagedDocument, type ManagedDocumentProps, ManagedNewsletterSplitBlock, type ManagedNewsletterSplitBlockProps, ManagedNotFoundBlock, type ManagedNotFoundBlockProps, ManagedPricingBlock, type ManagedPricingBlockProps, ManagedProjectsBlock, type ManagedProjectsBlockProps, ManagedToaster, MedicalFeatureStatsBlock, MobileNav, type MobileNavItem, type MobileNavProps, type NavItem, type NotificationItem, NumberInput, type NumberInputProps, PageSpinner, type PageSpinnerProps, PipleAuth, type PipleAuthProps, type PlatformFeatureItem, PlatformFeatures, type PlatformFeaturesProps, PortfolioHero, type PortfolioHeroProps, type AppLogo as PricingAppLogo, type PricingFeature, type PricingPlan, type PricingTab, type ProjectItem, type ReferralProfile, type RewardItem, type RewardProfile, type ScrollFeature, type SocialContact, type SocialLink, type StatItem, TextInput, type TextInputProps, ThreeDActionButton, type ThreeDActionButtonProps, ThreeDButton, type ThreeDButtonProps, UniversalCardPage, type UniversalCardPageProps, UniversalErrorView, type UniversalErrorViewProps, UniversalHomeView, type UniversalHomeViewProps, UniversalOrganizationPage, type UniversalOrganizationPageProps, UniversalProfilePage, type UniversalProfilePageProps, UniversalProfileSettings, type UniversalProfileSettingsProps, type UniversalReferralItem, UniversalReferralPage, type UniversalReferralPageProps, UniversalRewardPage, type UniversalRewardPageProps, UniversalSecurityPage, type UniversalSecurityPageProps, UniversalSidebar, type UniversalSidebarProps, type UniversalTransaction, UniversalTransactionPage, type UniversalTransactionPageProps, UniversalVerificationPage, type UniversalVerificationPageProps, type UniversalWallet, UniversalWalletPage, type UniversalWalletPageProps, type VerificationStatus, WaitlistDialog, type WaitlistDialogProps };
+interface PricingFeature2 {
+    name: string;
+    value: boolean | string;
+}
+interface TierOption {
+    tierName: string;
+    priceUSD: number;
+    isYearly: boolean;
+    description: string;
+    features: PricingFeature2[];
+    acceptWaitlist: boolean;
+    acceptPreorder: boolean;
+    isAvailable?: boolean;
+}
+interface UniversalCardActionPageProps {
+    cardId: string;
+    cardType: 'VIRTUAL' | 'PHYSICAL';
+    currentTier: string;
+    hasPreordered: boolean;
+    onWaitlist: boolean;
+    tiers: TierOption[];
+    isLoadingData: boolean;
+    onBack?: () => void;
+    onConfirmAction: (tierName: string, action: 'pre_order' | 'join_waitlist' | 'upgrade') => Promise<{
+        success: boolean;
+    }>;
+}
+declare const UniversalCardActionPage: React.FC<UniversalCardActionPageProps>;
+export { AppBento2, type AppBento2Props, type BannerProps, type BentoFeature, type BoardMember, type CompanyDetails, type ConsultantProfile, ConsultantShowcase, type ConsultantShowcaseProps, ContentGridBlock, type ContentGridBlockProps, type DocumentSectionData, type EmailContact, Faq, type FaqItem, type FaqProps, FeatureScroll, type FeatureScrollProps, Footer, type FooterColumn, type FooterLink, type FooterProps, GifFeatureCard, type GifFeatureCardProps, Header, type HeaderLink, type HeaderProps, type AppLogo$1 as HeroAppLogo, HeroSection, type HeroSectionProps, type HomeActionBtn, type LeaderboardItem, ManagedBoardBlock, type ManagedBoardBlockProps, ManagedContactBlock, type ManagedContactBlockProps, ManagedDocument, type ManagedDocumentProps, ManagedNewsletterSplitBlock, type ManagedNewsletterSplitBlockProps, ManagedNotFoundBlock, type ManagedNotFoundBlockProps, ManagedPricingBlock, type ManagedPricingBlockProps, ManagedProjectsBlock, type ManagedProjectsBlockProps, ManagedToaster, MedicalFeatureStatsBlock, MobileNav, type MobileNavItem, type MobileNavProps, type NavItem, type NotificationItem, NumberInput, type NumberInputProps, PageSpinner, type PageSpinnerProps, PipleAuth, type PipleAuthProps, type PlatformFeatureItem, PlatformFeatures, type PlatformFeaturesProps, PortfolioHero, type PortfolioHeroProps, type AppLogo as PricingAppLogo, type PricingFeature, type PricingFeature2, type PricingPlan, type PricingTab, type ProjectItem, type ReferralProfile, type RewardItem, type RewardProfile, type ScrollFeature, type SocialContact, type SocialLink, type StatItem, TextInput, type TextInputProps, ThreeDActionButton, type ThreeDActionButtonProps, ThreeDButton, type ThreeDButtonProps, type TierOption, UniversalCardActionPage, type UniversalCardActionPageProps, UniversalCardPage, type UniversalCardPageProps, UniversalErrorView, type UniversalErrorViewProps, UniversalHomeView, type UniversalHomeViewProps, UniversalOrganizationPage, type UniversalOrganizationPageProps, UniversalProfilePage, type UniversalProfilePageProps, UniversalProfileSettings, type UniversalProfileSettingsProps, type UniversalReferralItem, UniversalReferralPage, type UniversalReferralPageProps, UniversalRewardPage, type UniversalRewardPageProps, UniversalSecurityPage, type UniversalSecurityPageProps, UniversalSidebar, type UniversalSidebarProps, type UniversalTransaction, UniversalTransactionPage, type UniversalTransactionPageProps, UniversalVerificationPage, type UniversalVerificationPageProps, type UniversalWallet, UniversalWalletPage, type UniversalWalletPageProps, type VerificationStatus, WaitlistDialog, type WaitlistDialogProps };

package/dist/index.js CHANGED Viewed

@@ -58,6 +58,7 @@ __export(index_exports, {
   TextInput: () => TextInput,
   ThreeDActionButton: () => ThreeDActionButton,
   ThreeDButton: () => ThreeDButton,
+  UniversalCardActionPage: () => UniversalCardActionPage,
   UniversalCardPage: () => UniversalCardPage,
   UniversalErrorView: () => UniversalErrorView,
   UniversalHomeView: () => UniversalHomeView,
@@ -1930,7 +1931,7 @@ var ConfirmationDialog = ({
     {
       onClick: onConfirm,
       disabled: isProcessing,
-      className: `flex-1 py-4 text-[13px] transition-colors disabled:opacity-50 flex justify-center items-center outline-none  ${isDestructive ? "text-red-500 hover:bg-red-50" : "text-black hover:bg-neutral-50"}`
+      className: `flex-1 py-4 text-[13px] transition-colors disabled:opacity-50 flex justify-center items-center outline-none  ${isDestructive ? "text-black hover:bg-red-50" : "text-black hover:bg-neutral-50"}`
     },
     isProcessing ? /* @__PURE__ */ import_react29.default.createElement(import_react30.HugeiconsIcon, { icon: import_core_free_icons10.Loading03Icon, className: "animate-spin", size: 18 }) : confirmText
   ))));
@@ -3347,7 +3348,7 @@ var ManagedContactBlock = ({
 var import_react52 = __toESM(require("react"));
 var import_link7 = __toESM(require("next/link"));
 var import_image4 = __toESM(require("next/image"));
-var CheckIcon = ({ className = "" }) => /* @__PURE__ */ import_react52.default.createElement("svg", { viewBox: "0 0 24 24", fill: "none", className: `w-4 h-4 shrink-0 ${className}`, xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react52.default.createElement("circle", { cx: "12", cy: "12", r: "10", fill: "black" }), /* @__PURE__ */ import_react52.default.createElement("path", { d: "M8 12L11 15L16 9", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }));
+var CheckIcon = ({ className = "" }) => /* @__PURE__ */ import_react52.default.createElement("svg", { viewBox: "0 0 24 24", fill: "none", className: `w-4 h-4 shrink-0 ${className}`, xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react52.default.createElement("circle", { cx: "12", cy: "12", r: "10", fill: "#FCFD00" }), /* @__PURE__ */ import_react52.default.createElement("path", { d: "M8 12L11 15L16 9", stroke: "black", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }));
 var CrossIcon = ({ className = "" }) => /* @__PURE__ */ import_react52.default.createElement("svg", { viewBox: "0 0 24 24", fill: "none", className: `w-4 h-4 shrink-0 ${className}`, xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react52.default.createElement("circle", { cx: "12", cy: "12", r: "10", fill: "#F5F5F5" }), /* @__PURE__ */ import_react52.default.createElement("path", { d: "M15 9L9 15M9 9l6 6", stroke: "#D4D4D4", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }));
 var ManagedPricingBlock = ({
   tagline,
@@ -3857,23 +3858,6 @@ var import_react64 = __toESM(require("react"));
 var import_image11 = __toESM(require("next/image"));
 var import_react65 = require("@hugeicons/react");
 var import_core_free_icons21 = require("@hugeicons/core-free-icons");
-var ImageWithLoader2 = ({ src, alt, className, sizes }) => {
-  const [isLoading, setIsLoading] = (0, import_react64.useState)(true);
-  return /* @__PURE__ */ import_react64.default.createElement("div", { className: `relative overflow-hidden bg-neutral-100 ${className}` }, isLoading && /* @__PURE__ */ import_react64.default.createElement("div", { className: "absolute inset-0 flex items-center justify-center z-20 bg-neutral-100/50 backdrop-blur-sm transition-opacity duration-300" }, /* @__PURE__ */ import_react64.default.createElement(import_react65.HugeiconsIcon, { icon: import_core_free_icons21.Loading03Icon, size: 24, className: "animate-spin text-neutral-400" })), /* @__PURE__ */ import_react64.default.createElement(
-    import_image11.default,
-    {
-      src,
-      alt,
-      fill: true,
-      sizes: sizes || "(max-width: 768px) 100vw, 500px",
-      onLoad: () => setIsLoading(false),
-      className: `
-                    object-cover transition-all duration-1000 ease-out z-10
-                    ${isLoading ? "scale-105 blur-xl opacity-0" : "scale-100 blur-0 opacity-100"}
-                `
-    }
-  ));
-};
 var ContentGridBlock = ({
   header,
   leftCard,
@@ -3881,14 +3865,7 @@ var ContentGridBlock = ({
   middleBottomCard,
   rightCards
 }) => {
-  return /* @__PURE__ */ import_react64.default.createElement("section", { className: " w-full flex justify-center z-10 relative" }, /* @__PURE__ */ import_react64.default.createElement("div", { className: "max-w-300 w-full px-4 md:px-8 flex flex-col gap-12" }, /* @__PURE__ */ import_react64.default.createElement("div", { className: "flex flex-col lg:flex-row justify-between items-start lg:items-end gap-6 w-full" }, /* @__PURE__ */ import_react64.default.createElement("h2", { className: "text-3xl   tracking-tight text-black leading-[1.15] max-w-lg" }, header.titlePrefix, " ", /* @__PURE__ */ import_react64.default.createElement("span", { className: "gradient-text" }, header.highlightText))), /* @__PURE__ */ import_react64.default.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" }, /* @__PURE__ */ import_react64.default.createElement("div", { className: "flex flex-col justify-end" }, /* @__PURE__ */ import_react64.default.createElement("div", { className: "bg-black rounded-3xl p-8 flex flex-col h-80" }, /* @__PURE__ */ import_react64.default.createElement("p", { className: "text-[17px] text-white leading-snug  mb-4" }, leftCard.mainText), leftCard.tag && /* @__PURE__ */ import_react64.default.createElement("span", { className: "mb-auto text-[11px]  text-neutral-200  tracking-widest" }, leftCard.tag), /* @__PURE__ */ import_react64.default.createElement("div", { className: "flex items-center justify-between mt-8" }, /* @__PURE__ */ import_react64.default.createElement("div", null, /* @__PURE__ */ import_react64.default.createElement("h4", { className: "text-[15px]  text-white" }, leftCard.title), /* @__PURE__ */ import_react64.default.createElement("p", { className: "text-[13px] text-neutral-300" }, leftCard.subtitle)), /* @__PURE__ */ import_react64.default.createElement("div", { className: "w-10 h-10 rounded-full overflow-hidden relative" }, /* @__PURE__ */ import_react64.default.createElement(import_image11.default, { src: leftCard.thumbnailSrc, alt: leftCard.title, fill: true, className: "object-cover" }))))), /* @__PURE__ */ import_react64.default.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ import_react64.default.createElement("div", { className: "bg-white rounded-3xl p-8 flex flex-col relative h-75" }, /* @__PURE__ */ import_react64.default.createElement("div", { className: "absolute top-6 right-6 flex flex-col items-end gap-1" }, /* @__PURE__ */ import_react64.default.createElement("span", { className: "text-[11px] text-neutral-400  tracking-wide" }, middleTopCard.topRightLabel), /* @__PURE__ */ import_react64.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ import_react64.default.createElement("div", { className: "flex -space-x-2" }, middleTopCard.topRightAvatars.map((src, i) => /* @__PURE__ */ import_react64.default.createElement("div", { key: i, className: "w-7 h-7 rounded-full border-2 border-white overflow-hidden relative z-10" }, /* @__PURE__ */ import_react64.default.createElement(import_image11.default, { src, alt: "Avatar", fill: true, className: "object-cover", sizes: "28px" })))), /* @__PURE__ */ import_react64.default.createElement("span", { className: "text-sm  text-neutral-500" }, middleTopCard.topRightCount))), /* @__PURE__ */ import_react64.default.createElement("div", { className: "grow flex flex-col justify-center items-center py-6" }, /* @__PURE__ */ import_react64.default.createElement("div", { className: "px-5 py-2 rounded-full bg-neutral-50/50 border border-neutral-200 text-[13px] text-neutral-600" }, middleTopCard.badgePrefix, " ", /* @__PURE__ */ import_react64.default.createElement("span", { className: " text-black" }, middleTopCard.badgeHighlight), middleTopCard.badgeSuffix)), /* @__PURE__ */ import_react64.default.createElement("div", { className: "mt-auto" }, /* @__PURE__ */ import_react64.default.createElement("p", { className: "text-[11px] text-neutral-400  tracking-wide mb-1" }, middleTopCard.title), /* @__PURE__ */ import_react64.default.createElement("p", { className: "text-[14px] text-black  leading-snug pr-4" }, middleTopCard.description))), /* @__PURE__ */ import_react64.default.createElement("div", { className: "bg-white rounded-3xl p-8 flex flex-col h-80" }, /* @__PURE__ */ import_react64.default.createElement("div", { className: "flex justify-between items-start mb-6" }, /* @__PURE__ */ import_react64.default.createElement("div", null, /* @__PURE__ */ import_react64.default.createElement("h4", { className: "text-[15px]  text-black leading-tight" }, middleBottomCard.title), /* @__PURE__ */ import_react64.default.createElement("p", { className: "text-[13px] text-neutral-400" }, middleBottomCard.subtitle)), /* @__PURE__ */ import_react64.default.createElement("div", { className: "w-10 h-10 rounded-full overflow-hidden relative" }, /* @__PURE__ */ import_react64.default.createElement(import_image11.default, { src: middleBottomCard.thumbnailSrc, alt: middleBottomCard.title, fill: true, className: "object-cover" }))), /* @__PURE__ */ import_react64.default.createElement("div", { className: "mt-auto" }, /* @__PURE__ */ import_react64.default.createElement("p", { className: "text-[16px] text-black leading-snug  mb-4" }, middleBottomCard.mainText), middleBottomCard.tag && /* @__PURE__ */ import_react64.default.createElement("span", { className: "text-[11px]  text-neutral-400  tracking-widest" }, middleBottomCard.tag)))), /* @__PURE__ */ import_react64.default.createElement("div", { className: "flex flex-col gap-6" }, rightCards.slice(0, 2).map((card, idx) => /* @__PURE__ */ import_react64.default.createElement("div", { key: idx, className: "relative w-full h-80  text-white rounded-3xl overflow-hidden group" }, /* @__PURE__ */ import_react64.default.createElement(
-    ImageWithLoader2,
-    {
-      src: card.bgImageSrc,
-      alt: card.title,
-      className: "absolute inset-0 w-full h-full"
-    }
-  ), /* @__PURE__ */ import_react64.default.createElement("div", { className: "absolute inset-0 z-20 pointer-events-none" }), /* @__PURE__ */ import_react64.default.createElement("div", { className: "absolute inset-0 z-30 p-6 flex flex-col justify-end text-white" }, /* @__PURE__ */ import_react64.default.createElement("p", { className: "text-[14px]  leading-snug mb-3 pr-2 text-white/90" }, card.mainText), card.tag && /* @__PURE__ */ import_react64.default.createElement("span", { className: "mb-4 text-[11px]  text-white/50  tracking-widest" }, card.tag), /* @__PURE__ */ import_react64.default.createElement("div", { className: "pt-3" }, /* @__PURE__ */ import_react64.default.createElement("h4", { className: "text-[15px] text-white tracking-wide" }, card.title), /* @__PURE__ */ import_react64.default.createElement("p", { className: "text-[13px] text-white/60" }, card.subtitle)))))))));
+  return /* @__PURE__ */ import_react64.default.createElement("section", { className: " w-full flex justify-center z-10 relative" }, /* @__PURE__ */ import_react64.default.createElement("div", { className: "max-w-300 w-full px-4 md:px-8 flex flex-col gap-12" }, /* @__PURE__ */ import_react64.default.createElement("div", { className: "flex flex-col lg:flex-row justify-between items-start lg:items-end gap-6 w-full" }, /* @__PURE__ */ import_react64.default.createElement("h2", { className: "text-3xl   tracking-tight text-black leading-[1.15] max-w-lg" }, header.titlePrefix, " ", /* @__PURE__ */ import_react64.default.createElement("span", { className: "gradient-text" }, header.highlightText))), /* @__PURE__ */ import_react64.default.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" }, /* @__PURE__ */ import_react64.default.createElement("div", { className: "flex flex-col justify-end" }, /* @__PURE__ */ import_react64.default.createElement("div", { className: "bg-black rounded-3xl p-8 flex flex-col h-80" }, /* @__PURE__ */ import_react64.default.createElement("p", { className: "text-[17px] text-white leading-snug  mb-4" }, leftCard.mainText), leftCard.tag && /* @__PURE__ */ import_react64.default.createElement("span", { className: "mb-auto text-[11px]  text-neutral-200  tracking-widest" }, leftCard.tag), /* @__PURE__ */ import_react64.default.createElement("div", { className: "flex items-center justify-between mt-8" }, /* @__PURE__ */ import_react64.default.createElement("div", null, /* @__PURE__ */ import_react64.default.createElement("h4", { className: "text-[15px]  text-white" }, leftCard.title), /* @__PURE__ */ import_react64.default.createElement("p", { className: "text-[13px] text-neutral-300" }, leftCard.subtitle)), /* @__PURE__ */ import_react64.default.createElement("div", { className: "w-10 h-10 rounded-full overflow-hidden relative" }, /* @__PURE__ */ import_react64.default.createElement(import_image11.default, { src: leftCard.thumbnailSrc, alt: leftCard.title, fill: true, className: "object-cover" }))))), /* @__PURE__ */ import_react64.default.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ import_react64.default.createElement("div", { className: "bg-white rounded-3xl p-8 flex flex-col relative h-75" }, /* @__PURE__ */ import_react64.default.createElement("div", { className: "absolute top-6 right-6 flex flex-col items-end gap-1" }, /* @__PURE__ */ import_react64.default.createElement("span", { className: "text-[11px] text-neutral-400  tracking-wide" }, middleTopCard.topRightLabel), /* @__PURE__ */ import_react64.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ import_react64.default.createElement("div", { className: "flex -space-x-2" }, middleTopCard.topRightAvatars.map((src, i) => /* @__PURE__ */ import_react64.default.createElement("div", { key: i, className: "w-7 h-7 rounded-full border-2 border-white overflow-hidden relative z-10" }, /* @__PURE__ */ import_react64.default.createElement(import_image11.default, { src, alt: "Avatar", fill: true, className: "object-cover", sizes: "28px" })))), /* @__PURE__ */ import_react64.default.createElement("span", { className: "text-sm  text-neutral-500" }, middleTopCard.topRightCount))), /* @__PURE__ */ import_react64.default.createElement("div", { className: "grow flex flex-col justify-center items-center py-6" }, /* @__PURE__ */ import_react64.default.createElement("div", { className: "px-5 py-2 rounded-full bg-neutral-50/50 border border-neutral-200 text-[13px] text-neutral-600" }, middleTopCard.badgePrefix, " ", /* @__PURE__ */ import_react64.default.createElement("span", { className: " text-black" }, middleTopCard.badgeHighlight), middleTopCard.badgeSuffix)), /* @__PURE__ */ import_react64.default.createElement("div", { className: "mt-auto" }, /* @__PURE__ */ import_react64.default.createElement("p", { className: "text-[11px] text-neutral-400  tracking-wide mb-1" }, middleTopCard.title), /* @__PURE__ */ import_react64.default.createElement("p", { className: "text-[14px] text-black  leading-snug pr-4" }, middleTopCard.description))), /* @__PURE__ */ import_react64.default.createElement("div", { className: "bg-white rounded-3xl p-8 flex flex-col h-80" }, /* @__PURE__ */ import_react64.default.createElement("div", { className: "flex justify-between items-start mb-6" }, /* @__PURE__ */ import_react64.default.createElement("div", null, /* @__PURE__ */ import_react64.default.createElement("h4", { className: "text-[15px]  text-black leading-tight" }, middleBottomCard.title), /* @__PURE__ */ import_react64.default.createElement("p", { className: "text-[13px] text-neutral-400" }, middleBottomCard.subtitle)), /* @__PURE__ */ import_react64.default.createElement("div", { className: "w-10 h-10 rounded-full overflow-hidden relative" }, /* @__PURE__ */ import_react64.default.createElement(import_image11.default, { src: middleBottomCard.thumbnailSrc, alt: middleBottomCard.title, fill: true, className: "object-cover" }))), /* @__PURE__ */ import_react64.default.createElement("div", { className: "mt-auto" }, /* @__PURE__ */ import_react64.default.createElement("p", { className: "text-[16px] text-black leading-snug  mb-4" }, middleBottomCard.mainText), middleBottomCard.tag && /* @__PURE__ */ import_react64.default.createElement("span", { className: "text-[11px]  text-neutral-400  tracking-widest" }, middleBottomCard.tag)))), /* @__PURE__ */ import_react64.default.createElement("div", { className: "flex flex-col gap-6" }, rightCards.slice(0, 2).map((card, idx) => /* @__PURE__ */ import_react64.default.createElement("div", { key: idx, className: "relative w-full h-80 bg-[#FCFD00] text-black rounded-3xl overflow-hidden group" }, /* @__PURE__ */ import_react64.default.createElement("div", { className: "absolute inset-0 z-20 pointer-events-none" }), /* @__PURE__ */ import_react64.default.createElement("div", { className: "absolute inset-0 z-30 p-6 flex flex-col justify-end text-black" }, /* @__PURE__ */ import_react64.default.createElement("p", { className: "text-[14px]  leading-snug mb-3 pr-2 text-black/90" }, card.mainText), card.tag && /* @__PURE__ */ import_react64.default.createElement("span", { className: "mb-4 text-[11px]  text-black/50  tracking-widest" }, card.tag), /* @__PURE__ */ import_react64.default.createElement("div", { className: "pt-3" }, /* @__PURE__ */ import_react64.default.createElement("h4", { className: "text-[15px] text-black tracking-wide" }, card.title), /* @__PURE__ */ import_react64.default.createElement("p", { className: "text-[13px] text-black/60" }, card.subtitle)))))))));
 };
 // src/components/ManagedProjectsBlock.tsx
@@ -4221,6 +4198,196 @@ var UniversalReferralPage = ({
     /* @__PURE__ */ import_react71.default.createElement(import_react72.HugeiconsIcon, { icon: import_core_free_icons24.ArrowRight01Icon, size: 14 })
   )))))));
 };
+// src/components/UniversalCardActionPage.tsx
+var import_react73 = __toESM(require("react"));
+var import_react_confetti2 = __toESM(require("react-confetti"));
+var import_react_use2 = require("react-use");
+var import_react74 = require("@hugeicons/react");
+var import_core_free_icons25 = require("@hugeicons/core-free-icons");
+var CheckIcon2 = ({ className = "" }) => /* @__PURE__ */ import_react73.default.createElement("svg", { viewBox: "0 0 24 24", fill: "none", className: `w-4 h-4 shrink-0 ${className}`, xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react73.default.createElement("circle", { cx: "12", cy: "12", r: "10", fill: "#FCFD00" }), /* @__PURE__ */ import_react73.default.createElement("path", { d: "M8 12L11 15L16 9", stroke: "black", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }));
+var CrossIcon2 = ({ className = "" }) => /* @__PURE__ */ import_react73.default.createElement("svg", { viewBox: "0 0 24 24", fill: "none", className: `w-4 h-4 shrink-0 ${className}`, xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react73.default.createElement("circle", { cx: "12", cy: "12", r: "10", fill: "#F5F5F5" }), /* @__PURE__ */ import_react73.default.createElement("path", { d: "M15 9L9 15M9 9l6 6", stroke: "#D4D4D4", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }));
+var formatTierName = (name) => {
+  if (!name) return "";
+  return name.charAt(0).toUpperCase() + name.slice(1).toLowerCase();
+};
+var getTierGlow = (tier) => {
+  switch (tier.toUpperCase()) {
+    case "PLATINUM":
+      return "from-neutral-300";
+    case "PREMIUM":
+      return "from-purple-200";
+    case "GOLD":
+      return "from-yellow-200";
+    case "SILVER":
+      return "from-slate-300";
+    case "NEO":
+      return "from-cyan-200";
+    case "BASIC":
+      return "from-blue-200";
+    case "ONE":
+      return "from-emerald-200";
+    case "ZERO":
+      return "from-rose-200";
+    default:
+      return "from-neutral-200";
+  }
+};
+var UniversalCardActionPage = ({
+  cardType,
+  currentTier,
+  hasPreordered,
+  onWaitlist,
+  tiers,
+  isLoadingData,
+  onBack,
+  onConfirmAction
+}) => {
+  const onBackHandler = onBack ?? (() => {
+    if (typeof window !== "undefined") window.history.back();
+  });
+  const { width, height } = (0, import_react_use2.useWindowSize)();
+  const [selectedTier, setSelectedTier] = (0, import_react73.useState)(null);
+  const [intendedAction, setIntendedAction] = (0, import_react73.useState)(null);
+  const [isProcessing, setIsProcessing] = (0, import_react73.useState)(false);
+  const [showConfetti, setShowConfetti] = (0, import_react73.useState)(false);
+  const availableTiers = tiers.filter((t) => t.isAvailable || t.acceptPreorder || t.acceptWaitlist);
+  const handleTierClick = (tier, explicitAction) => {
+    setSelectedTier(tier);
+    setIntendedAction(explicitAction);
+  };
+  const processAction = async () => {
+    if (!selectedTier || !intendedAction) return;
+    setIsProcessing(true);
+    try {
+      const result = await onConfirmAction(selectedTier.tierName, intendedAction);
+      if (result.success) {
+        if (intendedAction === "pre_order") {
+          setShowConfetti(true);
+          setTimeout(() => setShowConfetti(false), 6e3);
+        }
+        setSelectedTier(null);
+        setIntendedAction(null);
+      }
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+  const getPrimaryButtonText = (tier) => {
+    const isCurrent = tier.tierName === currentTier;
+    if (isCurrent) {
+      if (hasPreordered) return "Secured (Pre-ordered)";
+      return "Pre-order Now";
+    }
+    if (hasPreordered) return "Unavailable";
+    return `Upgrade to ${formatTierName(tier.tierName)}`;
+  };
+  const getWaitlistButtonText = (tier) => {
+    const isCurrent = tier.tierName === currentTier;
+    if (isCurrent && (onWaitlist || hasPreordered)) return "Joined";
+    return "Join Waitlist";
+  };
+  return /* @__PURE__ */ import_react73.default.createElement("div", { className: "w-full" }, /* @__PURE__ */ import_react73.default.createElement(ManagedToaster, null), showConfetti && /* @__PURE__ */ import_react73.default.createElement("div", { className: "fixed inset-0 z-200 pointer-events-none" }, /* @__PURE__ */ import_react73.default.createElement(import_react_confetti2.default, { width, height, recycle: false, numberOfPieces: 500, gravity: 0.15 })), /* @__PURE__ */ import_react73.default.createElement("div", { className: "mb-6 flex max-w-3xl w-full mx-auto items-center px-1" }, /* @__PURE__ */ import_react73.default.createElement(
+    "button",
+    {
+      onClick: onBackHandler,
+      className: "flex items-center gap-2 text-neutral-500 hover:text-black transition-colors text-[13px] outline-none"
+    },
+    /* @__PURE__ */ import_react73.default.createElement(import_react74.HugeiconsIcon, { icon: import_core_free_icons25.ArrowLeft01Icon, size: 16 }),
+    " Back"
+  )), /* @__PURE__ */ import_react73.default.createElement("div", { className: "flex flex-col animate-in max-w-5xl w-full mx-auto fade-in duration-300" }, /* @__PURE__ */ import_react73.default.createElement("div", { className: "w-full flex flex-col items-center text-center mb-10 px-4" }, /* @__PURE__ */ import_react73.default.createElement("span", { className: "text-[10px] tracking-[0.4em] text-neutral-400 block uppercase mb-3" }, cardType, " CARD ACTIVATION"), /* @__PURE__ */ import_react73.default.createElement("h1", { className: "text-2xl sm:text-3xl text-black tracking-tight mb-2" }, "Select Your Tier"), /* @__PURE__ */ import_react73.default.createElement("p", { className: "text-xs text-neutral-500 max-w-lg" }, hasPreordered ? "You have already secured your card. Upgrades are disabled while your order is pending processing." : "Upgrade your tier or secure your card now. Pre-orders guarantee priority processing when the batch goes live.")), isLoadingData ? /* @__PURE__ */ import_react73.default.createElement("div", { className: "flex justify-center py-20" }, /* @__PURE__ */ import_react73.default.createElement(import_react74.HugeiconsIcon, { icon: import_core_free_icons25.Loading03Icon, size: 32, className: "animate-spin text-neutral-300" })) : /* @__PURE__ */ import_react73.default.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-5 w-full max-w-4xl mx-auto px-4" }, availableTiers.map((tier) => {
+    const isCurrent = tier.tierName === currentTier;
+    const isCardDisabled = hasPreordered && !isCurrent;
+    const isHighlighted = hasPreordered && isCurrent;
+    const isThisCardLoading = isProcessing && selectedTier?.tierName === tier.tierName;
+    const isPrimaryDisabled = isCardDisabled || isHighlighted || isThisCardLoading || !tier.acceptPreorder;
+    const isWaitlistDisabled = !isCurrent || isCurrent && (onWaitlist || hasPreordered) || isThisCardLoading || !tier.acceptWaitlist;
+    return /* @__PURE__ */ import_react73.default.createElement(
+      "div",
+      {
+        key: tier.tierName,
+        className: `relative bg-white rounded-3xl p-6 flex flex-col overflow-hidden transition-all duration-300
+                                        ${isCardDisabled ? "opacity-50 grayscale-50 pointer-events-none" : ""}
+                                    `
+      },
+      /* @__PURE__ */ import_react73.default.createElement(
+        "div",
+        {
+          className: `absolute -top-10 -right-10 w-48 h-48 bg-linear-to-bl ${getTierGlow(tier.tierName)} to-transparent opacity-40 blur-2xl rounded-full pointer-events-none`
+        }
+      ),
+      isThisCardLoading && /* @__PURE__ */ import_react73.default.createElement("div", { className: "absolute inset-0 z-50 flex items-center justify-center bg-white/40 backdrop-blur-[1px]" }, /* @__PURE__ */ import_react73.default.createElement(import_react74.HugeiconsIcon, { icon: import_core_free_icons25.Loading03Icon, size: 32, className: "animate-spin text-black" })),
+      /* @__PURE__ */ import_react73.default.createElement("div", { className: "mb-6 relative z-10" }, /* @__PURE__ */ import_react73.default.createElement("div", { className: "flex justify-between items-start mb-1" }, /* @__PURE__ */ import_react73.default.createElement("span", { className: "text-black text-sm tracking-widest " }, formatTierName(tier.tierName)), isCurrent && !hasPreordered && /* @__PURE__ */ import_react73.default.createElement("span", { className: "text-[9px] bg-neutral-100 text-neutral-600 px-2 py-1 rounded-full uppercase tracking-wider" }, "Current")), /* @__PURE__ */ import_react73.default.createElement("div", { className: "flex items-baseline gap-1 mt-2" }, /* @__PURE__ */ import_react73.default.createElement("h3", { className: "text-3xl font-light text-black" }, tier.priceUSD === 0 ? "Free" : `$${tier.priceUSD.toFixed(2)}`), tier.priceUSD > 0 && /* @__PURE__ */ import_react73.default.createElement("span", { className: "text-xs text-neutral-500" }, tier.isYearly ? "/ year" : "one-time")), /* @__PURE__ */ import_react73.default.createElement("p", { className: "text-[13px] text-neutral-500 mt-3 min-h-12 leading-relaxed" }, tier.description)),
+      /* @__PURE__ */ import_react73.default.createElement("div", { className: "flex flex-col gap-2.5 mb-6 relative z-10" }, /* @__PURE__ */ import_react73.default.createElement("div", { className: isPrimaryDisabled ? "opacity-50 pointer-events-none" : "" }, /* @__PURE__ */ import_react73.default.createElement(
+        ThreeDActionButton,
+        {
+          disabled: isPrimaryDisabled,
+          onClick: () => handleTierClick(tier, isCurrent ? "pre_order" : "upgrade"),
+          className: "w-full"
+        },
+        getPrimaryButtonText(tier)
+      )), /* @__PURE__ */ import_react73.default.createElement(
+        "button",
+        {
+          disabled: isWaitlistDisabled,
+          onClick: () => handleTierClick(tier, "join_waitlist"),
+          className: `w-full py-2.5 rounded-full text-xs tracking-wide transition-all outline-none border
+                                                ${isCurrent && (onWaitlist || hasPreordered) ? "bg-neutral-50 border-neutral-100 text-neutral-400 cursor-not-allowed" : "bg-white border-neutral-200 text-black hover:bg-neutral-50"}
+                                                disabled:opacity-40 disabled:cursor-not-allowed
+                                            `
+        },
+        getWaitlistButtonText(tier)
+      )),
+      /* @__PURE__ */ import_react73.default.createElement("div", { className: "flex flex-col gap-3 relative z-10" }, tier.features.map((feature, featureIdx) => {
+        const isAvailable = feature.value !== false;
+        const valueText = typeof feature.value === "string" ? feature.value : "";
+        return /* @__PURE__ */ import_react73.default.createElement("div", { key: featureIdx, className: "flex items-center gap-3" }, isAvailable ? /* @__PURE__ */ import_react73.default.createElement(CheckIcon2, null) : /* @__PURE__ */ import_react73.default.createElement(CrossIcon2, null), /* @__PURE__ */ import_react73.default.createElement("span", { className: `text-[12px] truncate ${isAvailable ? "text-neutral-800" : "text-neutral-400"}` }, feature.name, valueText && /* @__PURE__ */ import_react73.default.createElement("span", { className: "text-neutral-500 ml-1 " }, valueText)));
+      }))
+    );
+  }))), selectedTier && intendedAction !== "join_waitlist" && /* @__PURE__ */ import_react73.default.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ import_react73.default.createElement("div", { className: "absolute inset-0 bg-black/40", onClick: () => !isProcessing && setSelectedTier(null) }), /* @__PURE__ */ import_react73.default.createElement("div", { className: "relative w-full max-w-sm bg-white rounded-2xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ import_react73.default.createElement(
+    "div",
+    {
+      className: `absolute -top-10 -right-10 w-40 h-40 bg-linear-to-bl ${getTierGlow(selectedTier.tierName)} to-transparent opacity-40 blur-2xl rounded-full pointer-events-none`
+    }
+  ), /* @__PURE__ */ import_react73.default.createElement("div", { className: "flex items-center justify-between p-5 shrink-0 relative z-10" }, /* @__PURE__ */ import_react73.default.createElement("h3", { className: "text-[15px] text-black tracking-tight" }, "Confirm Action"), /* @__PURE__ */ import_react73.default.createElement(
+    "button",
+    {
+      disabled: isProcessing,
+      onClick: () => setSelectedTier(null),
+      className: "text-neutral-400 hover:text-black transition-colors outline-none disabled:opacity-50"
+    },
+    /* @__PURE__ */ import_react73.default.createElement(import_react74.HugeiconsIcon, { icon: import_core_free_icons25.CancelCircleIcon, size: 18 })
+  )), /* @__PURE__ */ import_react73.default.createElement("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-6 relative z-10" }, /* @__PURE__ */ import_react73.default.createElement("div", { className: "flex flex-col items-center justify-center mb-6" }, /* @__PURE__ */ import_react73.default.createElement("p", { className: "text-2xl text-black mb-1" }, selectedTier.priceUSD === 0 ? "Free" : `$${selectedTier.priceUSD.toFixed(2)}`), /* @__PURE__ */ import_react73.default.createElement("span", { className: `text-[10px] tracking-widest px-4 py-1.5 rounded-full bg-neutral-100 text-black mt-1` }, formatTierName(selectedTier.tierName), " ", formatTierName(cardType))), /* @__PURE__ */ import_react73.default.createElement("div", { className: "grid grid-cols-1 gap-y-6 mb-8 mt-4" }, /* @__PURE__ */ import_react73.default.createElement("div", null, /* @__PURE__ */ import_react73.default.createElement("span", { className: "text-[10px] tracking-[0.2em] text-neutral-400 block mb-1" }, "Action"), /* @__PURE__ */ import_react73.default.createElement("span", { className: "text-[13px] text-black " }, intendedAction === "upgrade" ? `Upgrade to ${formatTierName(selectedTier.tierName)}` : `Pre-order Card`)), intendedAction === "pre_order" && selectedTier.priceUSD > 0 && /* @__PURE__ */ import_react73.default.createElement("div", null, /* @__PURE__ */ import_react73.default.createElement("span", { className: "text-[10px] tracking-[0.2em] text-neutral-400 block mb-1" }, "Payment Notice"), /* @__PURE__ */ import_react73.default.createElement("span", { className: "text-[12px] text-neutral-600 leading-relaxed block" }, "By confirming, $", selectedTier.priceUSD.toFixed(2), " will be securely deducted from your USD asset balance to guarantee your order."))), /* @__PURE__ */ import_react73.default.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ import_react73.default.createElement(
+    ThreeDActionButton,
+    {
+      onClick: processAction,
+      isLoading: isProcessing,
+      className: "w-full"
+    },
+    "Confirm & Proceed"
+  ), /* @__PURE__ */ import_react73.default.createElement(
+    "button",
+    {
+      disabled: isProcessing,
+      onClick: () => setSelectedTier(null),
+      className: "w-full flex items-center justify-center py-2.5 rounded-full border border-neutral-200 text-black hover:bg-neutral-50 transition-colors outline-none text-[13px] mt-1 disabled:opacity-50"
+    },
+    "Cancel"
+  ))))), selectedTier && intendedAction === "join_waitlist" && /* @__PURE__ */ import_react73.default.createElement(
+    ConfirmationDialog,
+    {
+      isOpen: true,
+      title: "Join Waitlist",
+      message: `Are you sure you want to join the waitlist for the ${formatTierName(selectedTier.tierName)} ${formatTierName(cardType)} card? You will be notified via email when it becomes available.`,
+      confirmText: "Join Waitlist",
+      isDestructive: false,
+      isProcessing,
+      onClose: () => setSelectedTier(null),
+      onConfirm: processAction
+    }
+  ));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AppBento2,
@@ -4250,6 +4417,7 @@ var UniversalReferralPage = ({
   TextInput,
   ThreeDActionButton,
   ThreeDButton,
+  UniversalCardActionPage,
   UniversalCardPage,
   UniversalErrorView,
   UniversalHomeView,

package/dist/index.mjs CHANGED Viewed

@@ -1905,7 +1905,7 @@ var ConfirmationDialog = ({
     {
       onClick: onConfirm,
       disabled: isProcessing,
-      className: `flex-1 py-4 text-[13px] transition-colors disabled:opacity-50 flex justify-center items-center outline-none  ${isDestructive ? "text-red-500 hover:bg-red-50" : "text-black hover:bg-neutral-50"}`
+      className: `flex-1 py-4 text-[13px] transition-colors disabled:opacity-50 flex justify-center items-center outline-none  ${isDestructive ? "text-black hover:bg-red-50" : "text-black hover:bg-neutral-50"}`
     },
     isProcessing ? /* @__PURE__ */ React18.createElement(HugeiconsIcon12, { icon: Loading03Icon7, className: "animate-spin", size: 18 }) : confirmText
   ))));
@@ -3343,7 +3343,7 @@ var ManagedContactBlock = ({
 import React31, { useState as useState22, useEffect as useEffect15, useRef as useRef9 } from "react";
 import Link7 from "next/link";
 import Image5 from "next/image";
-var CheckIcon = ({ className = "" }) => /* @__PURE__ */ React31.createElement("svg", { viewBox: "0 0 24 24", fill: "none", className: `w-4 h-4 shrink-0 ${className}`, xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React31.createElement("circle", { cx: "12", cy: "12", r: "10", fill: "black" }), /* @__PURE__ */ React31.createElement("path", { d: "M8 12L11 15L16 9", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }));
+var CheckIcon = ({ className = "" }) => /* @__PURE__ */ React31.createElement("svg", { viewBox: "0 0 24 24", fill: "none", className: `w-4 h-4 shrink-0 ${className}`, xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React31.createElement("circle", { cx: "12", cy: "12", r: "10", fill: "#FCFD00" }), /* @__PURE__ */ React31.createElement("path", { d: "M8 12L11 15L16 9", stroke: "black", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }));
 var CrossIcon = ({ className = "" }) => /* @__PURE__ */ React31.createElement("svg", { viewBox: "0 0 24 24", fill: "none", className: `w-4 h-4 shrink-0 ${className}`, xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React31.createElement("circle", { cx: "12", cy: "12", r: "10", fill: "#F5F5F5" }), /* @__PURE__ */ React31.createElement("path", { d: "M15 9L9 15M9 9l6 6", stroke: "#D4D4D4", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }));
 var ManagedPricingBlock = ({
   tagline,
@@ -3853,23 +3853,6 @@ import React39, { useState as useState26 } from "react";
 import Image12 from "next/image";
 import { HugeiconsIcon as HugeiconsIcon26 } from "@hugeicons/react";
 import { Loading03Icon as Loading03Icon15 } from "@hugeicons/core-free-icons";
-var ImageWithLoader2 = ({ src, alt, className, sizes }) => {
-  const [isLoading, setIsLoading] = useState26(true);
-  return /* @__PURE__ */ React39.createElement("div", { className: `relative overflow-hidden bg-neutral-100 ${className}` }, isLoading && /* @__PURE__ */ React39.createElement("div", { className: "absolute inset-0 flex items-center justify-center z-20 bg-neutral-100/50 backdrop-blur-sm transition-opacity duration-300" }, /* @__PURE__ */ React39.createElement(HugeiconsIcon26, { icon: Loading03Icon15, size: 24, className: "animate-spin text-neutral-400" })), /* @__PURE__ */ React39.createElement(
-    Image12,
-    {
-      src,
-      alt,
-      fill: true,
-      sizes: sizes || "(max-width: 768px) 100vw, 500px",
-      onLoad: () => setIsLoading(false),
-      className: `
-                    object-cover transition-all duration-1000 ease-out z-10
-                    ${isLoading ? "scale-105 blur-xl opacity-0" : "scale-100 blur-0 opacity-100"}
-                `
-    }
-  ));
-};
 var ContentGridBlock = ({
   header,
   leftCard,
@@ -3877,14 +3860,7 @@ var ContentGridBlock = ({
   middleBottomCard,
   rightCards
 }) => {
-  return /* @__PURE__ */ React39.createElement("section", { className: " w-full flex justify-center z-10 relative" }, /* @__PURE__ */ React39.createElement("div", { className: "max-w-300 w-full px-4 md:px-8 flex flex-col gap-12" }, /* @__PURE__ */ React39.createElement("div", { className: "flex flex-col lg:flex-row justify-between items-start lg:items-end gap-6 w-full" }, /* @__PURE__ */ React39.createElement("h2", { className: "text-3xl   tracking-tight text-black leading-[1.15] max-w-lg" }, header.titlePrefix, " ", /* @__PURE__ */ React39.createElement("span", { className: "gradient-text" }, header.highlightText))), /* @__PURE__ */ React39.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" }, /* @__PURE__ */ React39.createElement("div", { className: "flex flex-col justify-end" }, /* @__PURE__ */ React39.createElement("div", { className: "bg-black rounded-3xl p-8 flex flex-col h-80" }, /* @__PURE__ */ React39.createElement("p", { className: "text-[17px] text-white leading-snug  mb-4" }, leftCard.mainText), leftCard.tag && /* @__PURE__ */ React39.createElement("span", { className: "mb-auto text-[11px]  text-neutral-200  tracking-widest" }, leftCard.tag), /* @__PURE__ */ React39.createElement("div", { className: "flex items-center justify-between mt-8" }, /* @__PURE__ */ React39.createElement("div", null, /* @__PURE__ */ React39.createElement("h4", { className: "text-[15px]  text-white" }, leftCard.title), /* @__PURE__ */ React39.createElement("p", { className: "text-[13px] text-neutral-300" }, leftCard.subtitle)), /* @__PURE__ */ React39.createElement("div", { className: "w-10 h-10 rounded-full overflow-hidden relative" }, /* @__PURE__ */ React39.createElement(Image12, { src: leftCard.thumbnailSrc, alt: leftCard.title, fill: true, className: "object-cover" }))))), /* @__PURE__ */ React39.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ React39.createElement("div", { className: "bg-white rounded-3xl p-8 flex flex-col relative h-75" }, /* @__PURE__ */ React39.createElement("div", { className: "absolute top-6 right-6 flex flex-col items-end gap-1" }, /* @__PURE__ */ React39.createElement("span", { className: "text-[11px] text-neutral-400  tracking-wide" }, middleTopCard.topRightLabel), /* @__PURE__ */ React39.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React39.createElement("div", { className: "flex -space-x-2" }, middleTopCard.topRightAvatars.map((src, i) => /* @__PURE__ */ React39.createElement("div", { key: i, className: "w-7 h-7 rounded-full border-2 border-white overflow-hidden relative z-10" }, /* @__PURE__ */ React39.createElement(Image12, { src, alt: "Avatar", fill: true, className: "object-cover", sizes: "28px" })))), /* @__PURE__ */ React39.createElement("span", { className: "text-sm  text-neutral-500" }, middleTopCard.topRightCount))), /* @__PURE__ */ React39.createElement("div", { className: "grow flex flex-col justify-center items-center py-6" }, /* @__PURE__ */ React39.createElement("div", { className: "px-5 py-2 rounded-full bg-neutral-50/50 border border-neutral-200 text-[13px] text-neutral-600" }, middleTopCard.badgePrefix, " ", /* @__PURE__ */ React39.createElement("span", { className: " text-black" }, middleTopCard.badgeHighlight), middleTopCard.badgeSuffix)), /* @__PURE__ */ React39.createElement("div", { className: "mt-auto" }, /* @__PURE__ */ React39.createElement("p", { className: "text-[11px] text-neutral-400  tracking-wide mb-1" }, middleTopCard.title), /* @__PURE__ */ React39.createElement("p", { className: "text-[14px] text-black  leading-snug pr-4" }, middleTopCard.description))), /* @__PURE__ */ React39.createElement("div", { className: "bg-white rounded-3xl p-8 flex flex-col h-80" }, /* @__PURE__ */ React39.createElement("div", { className: "flex justify-between items-start mb-6" }, /* @__PURE__ */ React39.createElement("div", null, /* @__PURE__ */ React39.createElement("h4", { className: "text-[15px]  text-black leading-tight" }, middleBottomCard.title), /* @__PURE__ */ React39.createElement("p", { className: "text-[13px] text-neutral-400" }, middleBottomCard.subtitle)), /* @__PURE__ */ React39.createElement("div", { className: "w-10 h-10 rounded-full overflow-hidden relative" }, /* @__PURE__ */ React39.createElement(Image12, { src: middleBottomCard.thumbnailSrc, alt: middleBottomCard.title, fill: true, className: "object-cover" }))), /* @__PURE__ */ React39.createElement("div", { className: "mt-auto" }, /* @__PURE__ */ React39.createElement("p", { className: "text-[16px] text-black leading-snug  mb-4" }, middleBottomCard.mainText), middleBottomCard.tag && /* @__PURE__ */ React39.createElement("span", { className: "text-[11px]  text-neutral-400  tracking-widest" }, middleBottomCard.tag)))), /* @__PURE__ */ React39.createElement("div", { className: "flex flex-col gap-6" }, rightCards.slice(0, 2).map((card, idx) => /* @__PURE__ */ React39.createElement("div", { key: idx, className: "relative w-full h-80  text-white rounded-3xl overflow-hidden group" }, /* @__PURE__ */ React39.createElement(
-    ImageWithLoader2,
-    {
-      src: card.bgImageSrc,
-      alt: card.title,
-      className: "absolute inset-0 w-full h-full"
-    }
-  ), /* @__PURE__ */ React39.createElement("div", { className: "absolute inset-0 z-20 pointer-events-none" }), /* @__PURE__ */ React39.createElement("div", { className: "absolute inset-0 z-30 p-6 flex flex-col justify-end text-white" }, /* @__PURE__ */ React39.createElement("p", { className: "text-[14px]  leading-snug mb-3 pr-2 text-white/90" }, card.mainText), card.tag && /* @__PURE__ */ React39.createElement("span", { className: "mb-4 text-[11px]  text-white/50  tracking-widest" }, card.tag), /* @__PURE__ */ React39.createElement("div", { className: "pt-3" }, /* @__PURE__ */ React39.createElement("h4", { className: "text-[15px] text-white tracking-wide" }, card.title), /* @__PURE__ */ React39.createElement("p", { className: "text-[13px] text-white/60" }, card.subtitle)))))))));
+  return /* @__PURE__ */ React39.createElement("section", { className: " w-full flex justify-center z-10 relative" }, /* @__PURE__ */ React39.createElement("div", { className: "max-w-300 w-full px-4 md:px-8 flex flex-col gap-12" }, /* @__PURE__ */ React39.createElement("div", { className: "flex flex-col lg:flex-row justify-between items-start lg:items-end gap-6 w-full" }, /* @__PURE__ */ React39.createElement("h2", { className: "text-3xl   tracking-tight text-black leading-[1.15] max-w-lg" }, header.titlePrefix, " ", /* @__PURE__ */ React39.createElement("span", { className: "gradient-text" }, header.highlightText))), /* @__PURE__ */ React39.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" }, /* @__PURE__ */ React39.createElement("div", { className: "flex flex-col justify-end" }, /* @__PURE__ */ React39.createElement("div", { className: "bg-black rounded-3xl p-8 flex flex-col h-80" }, /* @__PURE__ */ React39.createElement("p", { className: "text-[17px] text-white leading-snug  mb-4" }, leftCard.mainText), leftCard.tag && /* @__PURE__ */ React39.createElement("span", { className: "mb-auto text-[11px]  text-neutral-200  tracking-widest" }, leftCard.tag), /* @__PURE__ */ React39.createElement("div", { className: "flex items-center justify-between mt-8" }, /* @__PURE__ */ React39.createElement("div", null, /* @__PURE__ */ React39.createElement("h4", { className: "text-[15px]  text-white" }, leftCard.title), /* @__PURE__ */ React39.createElement("p", { className: "text-[13px] text-neutral-300" }, leftCard.subtitle)), /* @__PURE__ */ React39.createElement("div", { className: "w-10 h-10 rounded-full overflow-hidden relative" }, /* @__PURE__ */ React39.createElement(Image12, { src: leftCard.thumbnailSrc, alt: leftCard.title, fill: true, className: "object-cover" }))))), /* @__PURE__ */ React39.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ React39.createElement("div", { className: "bg-white rounded-3xl p-8 flex flex-col relative h-75" }, /* @__PURE__ */ React39.createElement("div", { className: "absolute top-6 right-6 flex flex-col items-end gap-1" }, /* @__PURE__ */ React39.createElement("span", { className: "text-[11px] text-neutral-400  tracking-wide" }, middleTopCard.topRightLabel), /* @__PURE__ */ React39.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React39.createElement("div", { className: "flex -space-x-2" }, middleTopCard.topRightAvatars.map((src, i) => /* @__PURE__ */ React39.createElement("div", { key: i, className: "w-7 h-7 rounded-full border-2 border-white overflow-hidden relative z-10" }, /* @__PURE__ */ React39.createElement(Image12, { src, alt: "Avatar", fill: true, className: "object-cover", sizes: "28px" })))), /* @__PURE__ */ React39.createElement("span", { className: "text-sm  text-neutral-500" }, middleTopCard.topRightCount))), /* @__PURE__ */ React39.createElement("div", { className: "grow flex flex-col justify-center items-center py-6" }, /* @__PURE__ */ React39.createElement("div", { className: "px-5 py-2 rounded-full bg-neutral-50/50 border border-neutral-200 text-[13px] text-neutral-600" }, middleTopCard.badgePrefix, " ", /* @__PURE__ */ React39.createElement("span", { className: " text-black" }, middleTopCard.badgeHighlight), middleTopCard.badgeSuffix)), /* @__PURE__ */ React39.createElement("div", { className: "mt-auto" }, /* @__PURE__ */ React39.createElement("p", { className: "text-[11px] text-neutral-400  tracking-wide mb-1" }, middleTopCard.title), /* @__PURE__ */ React39.createElement("p", { className: "text-[14px] text-black  leading-snug pr-4" }, middleTopCard.description))), /* @__PURE__ */ React39.createElement("div", { className: "bg-white rounded-3xl p-8 flex flex-col h-80" }, /* @__PURE__ */ React39.createElement("div", { className: "flex justify-between items-start mb-6" }, /* @__PURE__ */ React39.createElement("div", null, /* @__PURE__ */ React39.createElement("h4", { className: "text-[15px]  text-black leading-tight" }, middleBottomCard.title), /* @__PURE__ */ React39.createElement("p", { className: "text-[13px] text-neutral-400" }, middleBottomCard.subtitle)), /* @__PURE__ */ React39.createElement("div", { className: "w-10 h-10 rounded-full overflow-hidden relative" }, /* @__PURE__ */ React39.createElement(Image12, { src: middleBottomCard.thumbnailSrc, alt: middleBottomCard.title, fill: true, className: "object-cover" }))), /* @__PURE__ */ React39.createElement("div", { className: "mt-auto" }, /* @__PURE__ */ React39.createElement("p", { className: "text-[16px] text-black leading-snug  mb-4" }, middleBottomCard.mainText), middleBottomCard.tag && /* @__PURE__ */ React39.createElement("span", { className: "text-[11px]  text-neutral-400  tracking-widest" }, middleBottomCard.tag)))), /* @__PURE__ */ React39.createElement("div", { className: "flex flex-col gap-6" }, rightCards.slice(0, 2).map((card, idx) => /* @__PURE__ */ React39.createElement("div", { key: idx, className: "relative w-full h-80 bg-[#FCFD00] text-black rounded-3xl overflow-hidden group" }, /* @__PURE__ */ React39.createElement("div", { className: "absolute inset-0 z-20 pointer-events-none" }), /* @__PURE__ */ React39.createElement("div", { className: "absolute inset-0 z-30 p-6 flex flex-col justify-end text-black" }, /* @__PURE__ */ React39.createElement("p", { className: "text-[14px]  leading-snug mb-3 pr-2 text-black/90" }, card.mainText), card.tag && /* @__PURE__ */ React39.createElement("span", { className: "mb-4 text-[11px]  text-black/50  tracking-widest" }, card.tag), /* @__PURE__ */ React39.createElement("div", { className: "pt-3" }, /* @__PURE__ */ React39.createElement("h4", { className: "text-[15px] text-black tracking-wide" }, card.title), /* @__PURE__ */ React39.createElement("p", { className: "text-[13px] text-black/60" }, card.subtitle)))))))));
 };
 // src/components/ManagedProjectsBlock.tsx
@@ -4235,6 +4211,200 @@ var UniversalReferralPage = ({
     /* @__PURE__ */ React43.createElement(HugeiconsIcon29, { icon: ArrowRight01Icon8, size: 14 })
   )))))));
 };
+// src/components/UniversalCardActionPage.tsx
+import React44, { useState as useState29 } from "react";
+import Confetti2 from "react-confetti";
+import { useWindowSize as useWindowSize2 } from "react-use";
+import { HugeiconsIcon as HugeiconsIcon30 } from "@hugeicons/react";
+import {
+  ArrowLeft01Icon as ArrowLeft01Icon11,
+  CancelCircleIcon as CancelCircleIcon7,
+  Loading03Icon as Loading03Icon19
+} from "@hugeicons/core-free-icons";
+var CheckIcon2 = ({ className = "" }) => /* @__PURE__ */ React44.createElement("svg", { viewBox: "0 0 24 24", fill: "none", className: `w-4 h-4 shrink-0 ${className}`, xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React44.createElement("circle", { cx: "12", cy: "12", r: "10", fill: "#FCFD00" }), /* @__PURE__ */ React44.createElement("path", { d: "M8 12L11 15L16 9", stroke: "black", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }));
+var CrossIcon2 = ({ className = "" }) => /* @__PURE__ */ React44.createElement("svg", { viewBox: "0 0 24 24", fill: "none", className: `w-4 h-4 shrink-0 ${className}`, xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React44.createElement("circle", { cx: "12", cy: "12", r: "10", fill: "#F5F5F5" }), /* @__PURE__ */ React44.createElement("path", { d: "M15 9L9 15M9 9l6 6", stroke: "#D4D4D4", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }));
+var formatTierName = (name) => {
+  if (!name) return "";
+  return name.charAt(0).toUpperCase() + name.slice(1).toLowerCase();
+};
+var getTierGlow = (tier) => {
+  switch (tier.toUpperCase()) {
+    case "PLATINUM":
+      return "from-neutral-300";
+    case "PREMIUM":
+      return "from-purple-200";
+    case "GOLD":
+      return "from-yellow-200";
+    case "SILVER":
+      return "from-slate-300";
+    case "NEO":
+      return "from-cyan-200";
+    case "BASIC":
+      return "from-blue-200";
+    case "ONE":
+      return "from-emerald-200";
+    case "ZERO":
+      return "from-rose-200";
+    default:
+      return "from-neutral-200";
+  }
+};
+var UniversalCardActionPage = ({
+  cardType,
+  currentTier,
+  hasPreordered,
+  onWaitlist,
+  tiers,
+  isLoadingData,
+  onBack,
+  onConfirmAction
+}) => {
+  const onBackHandler = onBack ?? (() => {
+    if (typeof window !== "undefined") window.history.back();
+  });
+  const { width, height } = useWindowSize2();
+  const [selectedTier, setSelectedTier] = useState29(null);
+  const [intendedAction, setIntendedAction] = useState29(null);
+  const [isProcessing, setIsProcessing] = useState29(false);
+  const [showConfetti, setShowConfetti] = useState29(false);
+  const availableTiers = tiers.filter((t) => t.isAvailable || t.acceptPreorder || t.acceptWaitlist);
+  const handleTierClick = (tier, explicitAction) => {
+    setSelectedTier(tier);
+    setIntendedAction(explicitAction);
+  };
+  const processAction = async () => {
+    if (!selectedTier || !intendedAction) return;
+    setIsProcessing(true);
+    try {
+      const result = await onConfirmAction(selectedTier.tierName, intendedAction);
+      if (result.success) {
+        if (intendedAction === "pre_order") {
+          setShowConfetti(true);
+          setTimeout(() => setShowConfetti(false), 6e3);
+        }
+        setSelectedTier(null);
+        setIntendedAction(null);
+      }
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+  const getPrimaryButtonText = (tier) => {
+    const isCurrent = tier.tierName === currentTier;
+    if (isCurrent) {
+      if (hasPreordered) return "Secured (Pre-ordered)";
+      return "Pre-order Now";
+    }
+    if (hasPreordered) return "Unavailable";
+    return `Upgrade to ${formatTierName(tier.tierName)}`;
+  };
+  const getWaitlistButtonText = (tier) => {
+    const isCurrent = tier.tierName === currentTier;
+    if (isCurrent && (onWaitlist || hasPreordered)) return "Joined";
+    return "Join Waitlist";
+  };
+  return /* @__PURE__ */ React44.createElement("div", { className: "w-full" }, /* @__PURE__ */ React44.createElement(ManagedToaster, null), showConfetti && /* @__PURE__ */ React44.createElement("div", { className: "fixed inset-0 z-200 pointer-events-none" }, /* @__PURE__ */ React44.createElement(Confetti2, { width, height, recycle: false, numberOfPieces: 500, gravity: 0.15 })), /* @__PURE__ */ React44.createElement("div", { className: "mb-6 flex max-w-3xl w-full mx-auto items-center px-1" }, /* @__PURE__ */ React44.createElement(
+    "button",
+    {
+      onClick: onBackHandler,
+      className: "flex items-center gap-2 text-neutral-500 hover:text-black transition-colors text-[13px] outline-none"
+    },
+    /* @__PURE__ */ React44.createElement(HugeiconsIcon30, { icon: ArrowLeft01Icon11, size: 16 }),
+    " Back"
+  )), /* @__PURE__ */ React44.createElement("div", { className: "flex flex-col animate-in max-w-5xl w-full mx-auto fade-in duration-300" }, /* @__PURE__ */ React44.createElement("div", { className: "w-full flex flex-col items-center text-center mb-10 px-4" }, /* @__PURE__ */ React44.createElement("span", { className: "text-[10px] tracking-[0.4em] text-neutral-400 block uppercase mb-3" }, cardType, " CARD ACTIVATION"), /* @__PURE__ */ React44.createElement("h1", { className: "text-2xl sm:text-3xl text-black tracking-tight mb-2" }, "Select Your Tier"), /* @__PURE__ */ React44.createElement("p", { className: "text-xs text-neutral-500 max-w-lg" }, hasPreordered ? "You have already secured your card. Upgrades are disabled while your order is pending processing." : "Upgrade your tier or secure your card now. Pre-orders guarantee priority processing when the batch goes live.")), isLoadingData ? /* @__PURE__ */ React44.createElement("div", { className: "flex justify-center py-20" }, /* @__PURE__ */ React44.createElement(HugeiconsIcon30, { icon: Loading03Icon19, size: 32, className: "animate-spin text-neutral-300" })) : /* @__PURE__ */ React44.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-5 w-full max-w-4xl mx-auto px-4" }, availableTiers.map((tier) => {
+    const isCurrent = tier.tierName === currentTier;
+    const isCardDisabled = hasPreordered && !isCurrent;
+    const isHighlighted = hasPreordered && isCurrent;
+    const isThisCardLoading = isProcessing && selectedTier?.tierName === tier.tierName;
+    const isPrimaryDisabled = isCardDisabled || isHighlighted || isThisCardLoading || !tier.acceptPreorder;
+    const isWaitlistDisabled = !isCurrent || isCurrent && (onWaitlist || hasPreordered) || isThisCardLoading || !tier.acceptWaitlist;
+    return /* @__PURE__ */ React44.createElement(
+      "div",
+      {
+        key: tier.tierName,
+        className: `relative bg-white rounded-3xl p-6 flex flex-col overflow-hidden transition-all duration-300
+                                        ${isCardDisabled ? "opacity-50 grayscale-50 pointer-events-none" : ""}
+                                    `
+      },
+      /* @__PURE__ */ React44.createElement(
+        "div",
+        {
+          className: `absolute -top-10 -right-10 w-48 h-48 bg-linear-to-bl ${getTierGlow(tier.tierName)} to-transparent opacity-40 blur-2xl rounded-full pointer-events-none`
+        }
+      ),
+      isThisCardLoading && /* @__PURE__ */ React44.createElement("div", { className: "absolute inset-0 z-50 flex items-center justify-center bg-white/40 backdrop-blur-[1px]" }, /* @__PURE__ */ React44.createElement(HugeiconsIcon30, { icon: Loading03Icon19, size: 32, className: "animate-spin text-black" })),
+      /* @__PURE__ */ React44.createElement("div", { className: "mb-6 relative z-10" }, /* @__PURE__ */ React44.createElement("div", { className: "flex justify-between items-start mb-1" }, /* @__PURE__ */ React44.createElement("span", { className: "text-black text-sm tracking-widest " }, formatTierName(tier.tierName)), isCurrent && !hasPreordered && /* @__PURE__ */ React44.createElement("span", { className: "text-[9px] bg-neutral-100 text-neutral-600 px-2 py-1 rounded-full uppercase tracking-wider" }, "Current")), /* @__PURE__ */ React44.createElement("div", { className: "flex items-baseline gap-1 mt-2" }, /* @__PURE__ */ React44.createElement("h3", { className: "text-3xl font-light text-black" }, tier.priceUSD === 0 ? "Free" : `$${tier.priceUSD.toFixed(2)}`), tier.priceUSD > 0 && /* @__PURE__ */ React44.createElement("span", { className: "text-xs text-neutral-500" }, tier.isYearly ? "/ year" : "one-time")), /* @__PURE__ */ React44.createElement("p", { className: "text-[13px] text-neutral-500 mt-3 min-h-12 leading-relaxed" }, tier.description)),
+      /* @__PURE__ */ React44.createElement("div", { className: "flex flex-col gap-2.5 mb-6 relative z-10" }, /* @__PURE__ */ React44.createElement("div", { className: isPrimaryDisabled ? "opacity-50 pointer-events-none" : "" }, /* @__PURE__ */ React44.createElement(
+        ThreeDActionButton,
+        {
+          disabled: isPrimaryDisabled,
+          onClick: () => handleTierClick(tier, isCurrent ? "pre_order" : "upgrade"),
+          className: "w-full"
+        },
+        getPrimaryButtonText(tier)
+      )), /* @__PURE__ */ React44.createElement(
+        "button",
+        {
+          disabled: isWaitlistDisabled,
+          onClick: () => handleTierClick(tier, "join_waitlist"),
+          className: `w-full py-2.5 rounded-full text-xs tracking-wide transition-all outline-none border
+                                                ${isCurrent && (onWaitlist || hasPreordered) ? "bg-neutral-50 border-neutral-100 text-neutral-400 cursor-not-allowed" : "bg-white border-neutral-200 text-black hover:bg-neutral-50"}
+                                                disabled:opacity-40 disabled:cursor-not-allowed
+                                            `
+        },
+        getWaitlistButtonText(tier)
+      )),
+      /* @__PURE__ */ React44.createElement("div", { className: "flex flex-col gap-3 relative z-10" }, tier.features.map((feature, featureIdx) => {
+        const isAvailable = feature.value !== false;
+        const valueText = typeof feature.value === "string" ? feature.value : "";
+        return /* @__PURE__ */ React44.createElement("div", { key: featureIdx, className: "flex items-center gap-3" }, isAvailable ? /* @__PURE__ */ React44.createElement(CheckIcon2, null) : /* @__PURE__ */ React44.createElement(CrossIcon2, null), /* @__PURE__ */ React44.createElement("span", { className: `text-[12px] truncate ${isAvailable ? "text-neutral-800" : "text-neutral-400"}` }, feature.name, valueText && /* @__PURE__ */ React44.createElement("span", { className: "text-neutral-500 ml-1 " }, valueText)));
+      }))
+    );
+  }))), selectedTier && intendedAction !== "join_waitlist" && /* @__PURE__ */ React44.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ React44.createElement("div", { className: "absolute inset-0 bg-black/40", onClick: () => !isProcessing && setSelectedTier(null) }), /* @__PURE__ */ React44.createElement("div", { className: "relative w-full max-w-sm bg-white rounded-2xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ React44.createElement(
+    "div",
+    {
+      className: `absolute -top-10 -right-10 w-40 h-40 bg-linear-to-bl ${getTierGlow(selectedTier.tierName)} to-transparent opacity-40 blur-2xl rounded-full pointer-events-none`
+    }
+  ), /* @__PURE__ */ React44.createElement("div", { className: "flex items-center justify-between p-5 shrink-0 relative z-10" }, /* @__PURE__ */ React44.createElement("h3", { className: "text-[15px] text-black tracking-tight" }, "Confirm Action"), /* @__PURE__ */ React44.createElement(
+    "button",
+    {
+      disabled: isProcessing,
+      onClick: () => setSelectedTier(null),
+      className: "text-neutral-400 hover:text-black transition-colors outline-none disabled:opacity-50"
+    },
+    /* @__PURE__ */ React44.createElement(HugeiconsIcon30, { icon: CancelCircleIcon7, size: 18 })
+  )), /* @__PURE__ */ React44.createElement("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-6 relative z-10" }, /* @__PURE__ */ React44.createElement("div", { className: "flex flex-col items-center justify-center mb-6" }, /* @__PURE__ */ React44.createElement("p", { className: "text-2xl text-black mb-1" }, selectedTier.priceUSD === 0 ? "Free" : `$${selectedTier.priceUSD.toFixed(2)}`), /* @__PURE__ */ React44.createElement("span", { className: `text-[10px] tracking-widest px-4 py-1.5 rounded-full bg-neutral-100 text-black mt-1` }, formatTierName(selectedTier.tierName), " ", formatTierName(cardType))), /* @__PURE__ */ React44.createElement("div", { className: "grid grid-cols-1 gap-y-6 mb-8 mt-4" }, /* @__PURE__ */ React44.createElement("div", null, /* @__PURE__ */ React44.createElement("span", { className: "text-[10px] tracking-[0.2em] text-neutral-400 block mb-1" }, "Action"), /* @__PURE__ */ React44.createElement("span", { className: "text-[13px] text-black " }, intendedAction === "upgrade" ? `Upgrade to ${formatTierName(selectedTier.tierName)}` : `Pre-order Card`)), intendedAction === "pre_order" && selectedTier.priceUSD > 0 && /* @__PURE__ */ React44.createElement("div", null, /* @__PURE__ */ React44.createElement("span", { className: "text-[10px] tracking-[0.2em] text-neutral-400 block mb-1" }, "Payment Notice"), /* @__PURE__ */ React44.createElement("span", { className: "text-[12px] text-neutral-600 leading-relaxed block" }, "By confirming, $", selectedTier.priceUSD.toFixed(2), " will be securely deducted from your USD asset balance to guarantee your order."))), /* @__PURE__ */ React44.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React44.createElement(
+    ThreeDActionButton,
+    {
+      onClick: processAction,
+      isLoading: isProcessing,
+      className: "w-full"
+    },
+    "Confirm & Proceed"
+  ), /* @__PURE__ */ React44.createElement(
+    "button",
+    {
+      disabled: isProcessing,
+      onClick: () => setSelectedTier(null),
+      className: "w-full flex items-center justify-center py-2.5 rounded-full border border-neutral-200 text-black hover:bg-neutral-50 transition-colors outline-none text-[13px] mt-1 disabled:opacity-50"
+    },
+    "Cancel"
+  ))))), selectedTier && intendedAction === "join_waitlist" && /* @__PURE__ */ React44.createElement(
+    ConfirmationDialog,
+    {
+      isOpen: true,
+      title: "Join Waitlist",
+      message: `Are you sure you want to join the waitlist for the ${formatTierName(selectedTier.tierName)} ${formatTierName(cardType)} card? You will be notified via email when it becomes available.`,
+      confirmText: "Join Waitlist",
+      isDestructive: false,
+      isProcessing,
+      onClose: () => setSelectedTier(null),
+      onConfirm: processAction
+    }
+  ));
+};
 export {
   AppBento2,
   ConsultantShowcase,
@@ -4263,6 +4433,7 @@ export {
   TextInput,
   ThreeDActionButton,
   ThreeDButton,
+  UniversalCardActionPage,
   UniversalCardPage,
   UniversalErrorView,
   UniversalHomeView,

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@retinalabsllc/zairusjs",
-  "version": "14.0.15",
+  "version": "14.0.25",
   "description": "A perceptive, Ai data driven Next.js UI component library.",
   "author": "Retina Labs Company",
   "license": "MIT",
@@ -52,6 +52,7 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.0.0",
+    "@types/canvas-confetti": "^1.9.0",
     "@types/node": "^20.0.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",