@adminide-stack/clock-tik-browser 12.0.18-alpha.2 → 12.0.18-alpha.4

package/lib/pages/Demo/index.js

@@ -0,0 +1,376 @@
+import {jsxs,Fragment,jsx}from'react/jsx-runtime';import {useState,useEffect}from'react';const DemoPage = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  useEffect(() => {
+    document.title = 'Watch Demo | Clockbook';
+    // Set body background color
+    document.body.style.backgroundColor = 'rgb(248, 250, 252)';
+    return () => {
+      document.body.style.backgroundColor = '';
+    };
+  }, []);
+  const openModal = () => {
+    setIsModalOpen(true);
+    // Prevent body scroll when modal is open
+    document.body.style.overflow = 'hidden';
+  };
+  const closeModal = () => {
+    setIsModalOpen(false);
+    // Restore body scroll when modal is closed
+    document.body.style.overflow = 'unset';
+  };
+  // Close modal on Escape key
+  useEffect(() => {
+    const handleEscape = e => {
+      if (e.key === 'Escape' && isModalOpen) {
+        closeModal();
+      }
+    };
+    if (isModalOpen) {
+      document.addEventListener('keydown', handleEscape);
+    }
+    return () => {
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, [isModalOpen]);
+  return jsxs(Fragment, {
+    children: [jsx("style", {
+      children: `
+                @keyframes fadeIn {
+                    from { opacity: 0; }
+                    to { opacity: 1; }
+                }
+                @keyframes zoomIn {
+                    from { transform: scale(0.95); opacity: 0; }
+                    to { transform: scale(1); opacity: 1; }
+                }
+                @keyframes float {
+                    0%, 100% { 
+                        transform: translateY(0px) translateX(0px) scale(1);
+                        opacity: 0.25;
+                    }
+                    25% { 
+                        transform: translateY(-50px) translateX(30px) scale(1.2);
+                        opacity: 0.35;
+                    }
+                    50% { 
+                        transform: translateY(-40px) translateX(-25px) scale(0.9);
+                        opacity: 0.3;
+                    }
+                    75% { 
+                        transform: translateY(-60px) translateX(20px) scale(1.15);
+                        opacity: 0.32;
+                    }
+                }
+                @keyframes floatReverse {
+                    0%, 100% { 
+                        transform: translateY(0px) translateX(0px) scale(1);
+                        opacity: 0.25;
+                    }
+                    25% { 
+                        transform: translateY(50px) translateX(-30px) scale(0.9);
+                        opacity: 0.35;
+                    }
+                    50% { 
+                        transform: translateY(40px) translateX(25px) scale(1.2);
+                        opacity: 0.3;
+                    }
+                    75% { 
+                        transform: translateY(60px) translateX(-20px) scale(1.15);
+                        opacity: 0.32;
+                    }
+                }
+                @keyframes floatHorizontal {
+                    0%, 100% { 
+                        transform: translateX(0px) translateY(0px) scale(1);
+                        opacity: 0.25;
+                    }
+                    33% { 
+                        transform: translateX(50px) translateY(-30px) scale(1.2);
+                        opacity: 0.35;
+                    }
+                    66% { 
+                        transform: translateX(-50px) translateY(30px) scale(0.9);
+                        opacity: 0.3;
+                    }
+                }
+            `
+    }), jsxs("div", {
+      className: "min-h-screen bg-[#057d78]",
+      children: [jsxs("section", {
+        className: "relative w-full overflow-hidden py-20",
+        children: [jsxs("div", {
+          className: "absolute inset-0 overflow-hidden",
+          children: [jsx("div", {
+            className: "absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full blur-3xl",
+            style: {
+              width: '600px',
+              height: '600px',
+              backgroundColor: 'rgba(255, 255, 255, 0.3)',
+              animation: 'float 8s ease-in-out infinite'
+            }
+          }), jsx("div", {
+            className: "absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 rounded-full blur-3xl",
+            style: {
+              width: '600px',
+              height: '600px',
+              backgroundColor: 'rgba(255, 255, 255, 0.3)',
+              animation: 'floatReverse 10s ease-in-out infinite'
+            }
+          }), jsx("div", {
+            className: "absolute -right-40 -top-40 rounded-full blur-3xl",
+            style: {
+              width: '500px',
+              height: '500px',
+              backgroundColor: 'rgba(255, 255, 255, 0.25)',
+              animation: 'floatHorizontal 12s ease-in-out infinite'
+            }
+          }), jsx("div", {
+            className: "absolute -left-40 bottom-0 rounded-full blur-3xl",
+            style: {
+              width: '500px',
+              height: '500px',
+              backgroundColor: 'rgba(255, 255, 255, 0.25)',
+              animation: 'floatReverse 9s ease-in-out infinite',
+              animationDelay: '2s'
+            }
+          }), jsx("div", {
+            className: "absolute top-1/4 left-1/4 rounded-full blur-2xl",
+            style: {
+              width: '400px',
+              height: '400px',
+              backgroundColor: 'rgba(255, 255, 255, 0.15)',
+              animation: 'float 15s ease-in-out infinite',
+              animationDelay: '1s'
+            }
+          }), jsx("div", {
+            className: "absolute bottom-1/4 right-1/4 rounded-full blur-2xl",
+            style: {
+              width: '400px',
+              height: '400px',
+              backgroundColor: 'rgba(255, 255, 255, 0.15)',
+              animation: 'floatReverse 14s ease-in-out infinite',
+              animationDelay: '3s'
+            }
+          })]
+        }), jsx("div", {
+          className: "container relative z-10 mx-auto px-4 pt-20 sm:px-8 md:px-16",
+          children: jsxs("div", {
+            className: "flex flex-col items-center justify-center",
+            children: [jsxs("div", {
+              className: "mb-16 text-center",
+              children: [jsxs("div", {
+                className: "mb-6 inline-flex items-center gap-2",
+                children: [jsx("div", {
+                  className: "h-0.5 w-8",
+                  style: {
+                    backgroundColor: 'rgb(249, 115, 22)'
+                  }
+                }), jsx("h6", {
+                  className: "text-sm font-semibold uppercase tracking-wider text-white",
+                  children: "clockbook"
+                })]
+              }), jsx("h1", {
+                className: "mb-8 text-4xl font-[300] leading-tight tracking-tight sm:text-5xl md:text-6xl lg:text-7xl text-white",
+                children: "Let's See a Demo"
+              }), jsx("p", {
+                className: "mx-auto max-w-3xl text-lg font-normal leading-relaxed sm:text-xl text-white",
+                children: "Discover how Clockbook can transform your workflow. Watch our comprehensive demo to see how our powerful platform helps you search, learn, and discover with advanced AI technologies and human insights."
+              })]
+            }), jsxs("div", {
+              className: "w-full max-w-5xl",
+              children: [jsxs("div", {
+                className: "group relative cursor-pointer overflow-hidden rounded-2xl shadow-2xl transition-all duration-500 hover:scale-[1.02] hover:shadow-[0_25px_50px_-12px_rgba(0,0,0,0.5)]",
+                onClick: openModal,
+                children: [jsx("div", {
+                  className: "absolute -inset-1 rounded-2xl opacity-0 blur-xl transition-opacity duration-500 group-hover:opacity-30",
+                  style: {
+                    backgroundColor: 'rgb(59, 130, 246)'
+                  }
+                }), jsxs("div", {
+                  className: "relative aspect-video w-full overflow-hidden rounded-2xl",
+                  style: {
+                    backgroundColor: 'rgb(241, 245, 249)'
+                  },
+                  children: [jsx("img", {
+                    src: "/static/images/banner-img-2.png",
+                    alt: "Watch Demo",
+                    className: "h-full w-full object-cover transition-transform duration-700 group-hover:scale-110",
+                    onError: e => {
+                      // Fallback if image doesn't exist
+                      e.currentTarget.style.display = 'none';
+                    }
+                  }), jsx("div", {
+                    className: "absolute inset-0",
+                    style: {
+                      background: 'linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2), transparent)'
+                    }
+                  }), jsx("div", {
+                    className: "absolute inset-0 flex items-center justify-center transition-all duration-300 group-hover:bg-black/20",
+                    style: {
+                      backgroundColor: 'rgba(0, 0, 0, 0)'
+                    },
+                    children: jsxs("div", {
+                      className: "relative",
+                      children: [jsx("div", {
+                        className: "absolute inset-0 animate-ping rounded-full bg-white/30"
+                      }), jsx("div", {
+                        className: "absolute inset-0 animate-pulse rounded-full bg-white/20"
+                      }), jsx("div", {
+                        className: "relative flex h-24 w-24 items-center justify-center rounded-full bg-white shadow-2xl transition-all duration-300 group-hover:scale-110 group-hover:bg-white/95",
+                        children: jsx("svg", {
+                          className: "ml-1 h-12 w-12 transition-transform duration-300 group-hover:scale-110",
+                          fill: "currentColor",
+                          viewBox: "0 0 24 24",
+                          style: {
+                            color: 'rgb(37, 99, 235)'
+                          },
+                          children: jsx("path", {
+                            d: "M8 5v14l11-7z"
+                          })
+                        })
+                      })]
+                    })
+                  }), jsx("div", {
+                    className: "absolute bottom-0 left-0 right-0 p-6",
+                    style: {
+                      background: 'linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent)'
+                    },
+                    children: jsxs("div", {
+                      className: "flex items-center gap-3 text-white",
+                      children: [jsx("div", {
+                        className: "flex h-10 w-10 items-center justify-center rounded-full bg-white/20 backdrop-blur-sm",
+                        children: jsx("svg", {
+                          className: "h-5 w-5",
+                          fill: "currentColor",
+                          viewBox: "0 0 24 24",
+                          children: jsx("path", {
+                            d: "M8 5v14l11-7z"
+                          })
+                        })
+                      }), jsxs("div", {
+                        children: [jsx("p", {
+                          className: "text-sm font-medium",
+                          children: "Watch Demo Video"
+                        }), jsx("p", {
+                          className: "text-xs text-white/70",
+                          children: "Click to play"
+                        })]
+                      })]
+                    })
+                  })]
+                })]
+              }), jsxs("div", {
+                className: "mt-8 flex items-center justify-center gap-2",
+                style: {
+                  color: 'rgb(148, 163, 184)'
+                },
+                children: [jsx("div", {
+                  className: "h-px w-12",
+                  style: {
+                    backgroundColor: 'rgb(203, 213, 225)'
+                  }
+                }), jsx("svg", {
+                  className: "h-4 w-4",
+                  fill: "currentColor",
+                  viewBox: "0 0 24 24",
+                  children: jsx("path", {
+                    d: "M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"
+                  })
+                }), jsx("div", {
+                  className: "h-px w-12",
+                  style: {
+                    backgroundColor: 'rgb(203, 213, 225)'
+                  }
+                })]
+              })]
+            })]
+          })
+        })]
+      }), isModalOpen && jsx("div", {
+        className: "fixed inset-0 z-50 flex items-center justify-center p-4 backdrop-blur-md transition-opacity duration-300",
+        style: {
+          backgroundColor: 'rgba(0, 0, 0, 0.9)',
+          animation: 'fadeIn 0.3s ease-in-out'
+        },
+        onClick: closeModal,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": "modal-title",
+        children: jsxs("div", {
+          className: "relative w-full max-w-6xl transition-all duration-300",
+          style: {
+            animation: 'zoomIn 0.3s ease-in-out'
+          },
+          onClick: e => e.stopPropagation(),
+          children: [jsx("div", {
+            className: "absolute -inset-1 rounded-2xl blur-2xl opacity-40",
+            style: {
+              backgroundColor: 'rgb(59, 130, 246)'
+            }
+          }), jsxs("div", {
+            className: "relative rounded-2xl shadow-2xl",
+            style: {
+              background: 'linear-gradient(to bottom right, rgb(17, 24, 39), rgb(31, 41, 55))',
+              border: '1px solid rgba(255, 255, 255, 0.1)'
+            },
+            children: [jsx("button", {
+              onClick: closeModal,
+              className: "absolute -right-4 -top-4 z-10 flex h-12 w-12 items-center justify-center rounded-full shadow-xl transition-all hover:scale-110 hover:shadow-2xl",
+              style: {
+                backgroundColor: 'rgb(255, 255, 255)'
+              },
+              onMouseEnter: e => e.currentTarget.style.backgroundColor = 'rgb(243, 244, 246)',
+              onMouseLeave: e => e.currentTarget.style.backgroundColor = 'rgb(255, 255, 255)',
+              "aria-label": "Close modal",
+              children: jsx("svg", {
+                className: "h-6 w-6",
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                style: {
+                  color: 'rgb(55, 65, 81)'
+                },
+                children: jsx("path", {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2.5,
+                  d: "M6 18L18 6M6 6l12 12"
+                })
+              })
+            }), jsxs("div", {
+              className: "border-b px-6 py-4",
+              style: {
+                background: 'linear-gradient(to right, rgba(31, 41, 55, 0.5), rgba(17, 24, 39, 0.5))',
+                borderColor: 'rgba(255, 255, 255, 0.1)'
+              },
+              children: [jsx("h2", {
+                className: "text-lg font-semibold text-white",
+                children: "Clockbook Demo"
+              }), jsx("p", {
+                className: "text-sm text-white/70",
+                children: "Watch how Clockbook transforms your workflow"
+              })]
+            }), jsx("div", {
+              className: "p-1",
+              children: jsx("div", {
+                className: "relative aspect-video w-full overflow-hidden rounded-lg",
+                style: {
+                  backgroundColor: 'rgb(0, 0, 0)'
+                },
+                children: jsx("iframe", {
+                  width: "100%",
+                  height: "100%",
+                  src: "https://www.youtube.com/embed/c_F7R5d4FcY",
+                  title: "Clockbook Demo",
+                  allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+                  allowFullScreen: true,
+                  className: "absolute inset-0"
+                })
+              })
+            })]
+          })]
+        })
+      })]
+    })]
+  });
+};export{DemoPage as default};//# sourceMappingURL=index.js.map

package/lib/pages/Demo/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/pages/Demo/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}

package/lib/pages/GetStarted/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/pages/GetStarted/index.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,cAAc,+CAuuBnB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/pages/GetStarted/index.tsx"],"names":[],"mappings":"AAsOA,QAAA,MAAM,cAAc,+CAiYnB,CAAC;AAEF,eAAe,cAAc,CAAC"}