@adminide-stack/clock-tik-browser 12.0.17-alpha.0 → 12.0.17-alpha.2

package/lib/pages/LandingPage/index.js

@@ -1,209 +1,661 @@
-import {jsx,jsxs}from'react/jsx-runtime';import {Button}from'@admin-layout/tailwind-ui/shardui/button.js';import {useNavigate,Link}from'@remix-run/react';import {HeroSection}from'./components/HeroSection.js';import {CategoriesSection}from'./components/CategoriesSection.js';import {FeaturedSection}from'./components/FeaturedSection.js';import {ResourcesSection}from'./components/ResourcesSection.js';import {Icons}from'./components/Icons.js';import {Images}from'./components/Assets.js';const LandingPage = () => {
-  const navigate = useNavigate();
-  const handleSearch = query => {
-    console.log('Searching for:', query);
-    // Implement search functionality
+import {jsxs,jsx}from'react/jsx-runtime';import {useState,useRef,useEffect,useMemo}from'react';import {Link}from'@remix-run/react';import {Button}from'@admin-layout/tailwind-ui/shardui/button.js';import {Images}from'./components/Assets.js';import {Section,Container}from'./components/Section.js';import {BuildingSoftwareScene}from'./components/BuildingSoftwareScene.js';import {InvestigationCard}from'./components/InvestigationCard.js';import {InfrastructureTabs}from'./components/InfrastructureTabs.js';import {LearningCard}from'./components/LearningCard.js';import {TrendingUp,Shield}from'lucide-react';import {ControlCard}from'./components/ControlCard.js';const LandingPage = () => {
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const [heroImageLoaded, setHeroImageLoaded] = useState(false);
+  const [introMinDone, setIntroMinDone] = useState(prefersReducedMotion);
+  const [introMaxDone, setIntroMaxDone] = useState(prefersReducedMotion);
+  const [scrollY, setScrollY] = useState(0);
+  const heroRef = useRef(null);
+  const investigationRef = useRef(null);
+  const infrastructureRef = useRef(null);
+  const controlRef = useRef(null);
+  useEffect(() => {
+    const handleScroll = () => {
+      setScrollY(window.scrollY);
+    };
+    window.addEventListener('scroll', handleScroll, {
+      passive: true
+    });
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+  const getHeroProgress = () => {
+    if (!heroRef.current) return 0;
+    const rect = heroRef.current.getBoundingClientRect();
+    const sectionHeight = heroRef.current.offsetHeight;
+    const progress = Math.max(0, Math.min(1, (window.innerHeight - rect.top) / sectionHeight));
+    return progress;
   };
-  const handleCategoryClick = categoryHref => {
-    navigate(categoryHref);
+  const getInvestigationProgress = () => {
+    if (!investigationRef.current) return 0;
+    const rect = investigationRef.current.getBoundingClientRect();
+    const progress = Math.max(0, Math.min(1, (window.innerHeight - rect.top) / window.innerHeight));
+    return progress * 100;
   };
-  const handleArticleClick = articleHref => {
-    navigate(articleHref);
+  const getInfrastructureProgress = () => {
+    if (!infrastructureRef.current) return 0;
+    const rect = infrastructureRef.current.getBoundingClientRect();
+    const sectionHeight = infrastructureRef.current.offsetHeight;
+    const progress = Math.max(0, Math.min(1, (window.innerHeight - rect.top) / sectionHeight));
+    return Math.floor(progress * 3);
   };
-  const handleResourceClick = resourceHref => {
-    navigate(resourceHref);
-  };
-  // Mock data for categories
-  const categories = [{
-    id: 'getting-started',
-    href: '/get-started',
-    title: 'Getting Started',
-    description: 'Perplexity overview, examples, and tips.',
-    icon: jsx(Icons.GettingStarted, {
-      width: 24,
-      height: 24
-    })
-  }, {
-    id: 'account-management',
-    href: '/help-center/account-management',
-    title: 'Account Management',
-    description: 'Account features, security, and usage.',
-    icon: jsx(Icons.AccountManagement, {
-      width: 24,
-      height: 24
-    })
-  }, {
-    id: 'billing',
-    href: '/help-center/subscription-billing',
-    title: 'Billing & Subscriptions',
-    description: 'Payment, subscription info, and cancellation.',
-    icon: jsx(Icons.Billing, {
-      width: 24,
-      height: 24
-    })
-  }, {
-    id: 'product-features',
-    href: '/help-center/product-features',
-    title: 'Product Features',
-    description: 'Spaces, pages, Focus, and Threads.',
-    icon: jsx(Icons.ProductFeatures, {
-      width: 24,
-      height: 24
-    })
-  }, {
-    id: 'troubleshooting',
-    href: '/help-center/troubleshooting',
-    title: 'Troubleshooting',
-    description: 'Find solutions to common issues.',
-    icon: jsx(Icons.Troubleshooting, {
-      width: 24,
-      height: 24
-    })
-  }, {
-    id: 'api',
-    title: 'API',
-    href: '/help-center/scope-api',
-    description: 'Explore our API and get answers to FAQs.',
-    icon: jsx(Icons.Api, {
-      width: 24,
-      height: 24
-    })
-  }];
-  // Mock data for featured articles
-  const featuredArticles = [{
-    id: 'getting-started-with-perplexity',
-    title: 'Getting started with Yantra',
-    href: '/get-started',
-    description: 'Perplexity is an AI-powered answer engine that searches the internet in real-time to answer any question.'
-  }, {
-    id: 'perplexity-expands-publisher',
-    title: 'Yantra Expands Publisher Program with 15 New Media Partners',
-    href: '/help-center/spaces-library',
-    description: 'Perplexity has added major media partners to its publisher revenue-sharing program.'
-  }, {
-    id: 'student-guide-spaces',
-    title: "A student's guide to using Yantra Spaces",
-    href: '/help-center/student-hub',
-    description: 'Create a collaborative knowledge hub for your course, team, or study group. Ask questions, create notes, and organize resources - all in one place.'
-  }];
-  // Mock data for resources
-  const resources = [{
-    id: 'security',
-    title: 'Security & Trust Center',
-    href: '/help-center/data-privacy',
-    description: 'Access our security tools, terms of service, and data protection policies.',
-    icon: jsx(Icons.Security, {
-      width: 24,
-      height: 24
-    }),
-    ctaText: 'EXPLORE'
-  }, {
-    id: 'feedback',
-    title: 'Feedback',
-    href: '/feedback',
-    description: 'Have questions or ideas? Share product feedback and help us create a better experience for you.',
-    icon: jsx(Icons.Feedback, {
-      width: 24,
-      height: 24
-    }),
-    ctaText: 'SHARE YOUR THOUGHTS'
-  }, {
-    id: 'contact',
-    title: 'Contact Us',
-    href: '/contact-us',
-    description: 'Learn how to reach out to us via Discord, email, or our Intercom integration for support, feedback, and community help.',
-    icon: jsx(Icons.Contact, {
-      width: 24,
-      height: 24
-    }),
-    ctaText: 'GET IN TOUCH'
-  }];
-  // Featured product section (Supply)
-  const featuredProduct = {
-    title: 'Yantra Supply',
-    description: 'Thoughtfully-designed essentials that celebrate the pursuit of knowledge.',
-    ctaText: 'Visit the Shop',
-    image: Images.supply.products
+  const getControlProgress = () => {
+    if (!controlRef.current) return 0;
+    const rect = controlRef.current.getBoundingClientRect();
+    const viewportHeight = window.innerHeight;
+    // Start animating when section enters viewport, complete when it's centered
+    const startOffset = viewportHeight;
+    const endOffset = viewportHeight * 0.5;
+    const progress = Math.max(0, Math.min(1, (startOffset - rect.top) / (startOffset - endOffset)));
+    return progress;
   };
+  const heroProgress = getHeroProgress();
+  const investigationProgress = getInvestigationProgress();
+  const infrastructureTab = getInfrastructureProgress();
+  const controlProgress = getControlProgress();
+  const introLocked = !prefersReducedMotion && !(introMinDone && (heroImageLoaded || introMaxDone));
+  useBodyScrollLock(introLocked);
+  useEffect(() => {
+    if (prefersReducedMotion) return;
+    const min = window.setTimeout(() => setIntroMinDone(true), 1500);
+    const max = window.setTimeout(() => setIntroMaxDone(true), 3600);
+    return () => {
+      window.clearTimeout(min);
+      window.clearTimeout(max);
+    };
+  }, [prefersReducedMotion]);
   return jsxs("div", {
-    className: "min-h-screen bg-background",
-    children: [jsx(HeroSection, {
-      title: "How can we help?",
-      subtitle: "Get answers to all things Yantra.",
-      onSearch: handleSearch
-    }), jsx("section", {
-      className: "py-16",
+    className: "min-h-screen bg-background text-foreground",
+    children: [jsx(LandingPageStyles, {}), jsx(ClockbookHero, {
+      reducedMotion: prefersReducedMotion,
+      onHeroImageLoaded: () => setHeroImageLoaded(true),
+      introLocked: introLocked,
+      onSkipIntro: () => {
+        setIntroMinDone(true);
+        setIntroMaxDone(true);
+      }
+    }), jsx("div", {
+      ref: heroRef,
+      className: "relative",
+      style: {
+        height: '3200px'
+      },
+      children: jsxs("div", {
+        className: "h-screen sticky top-0 left-0 bg-[#070707] transition-all duration-100 overflow-hidden",
+        children: [jsx("div", {
+          className: "flex flex-col items-center justify-center h-[calc(100vh-56px)] relative",
+          children: jsx(BuildingSoftwareScene, {
+            progress: heroProgress
+          })
+        }), jsx("div", {
+          className: "crt pointer-events-none fixed inset-0 z-[999]"
+        })]
+      })
+    }), jsx("div", {
+      ref: investigationRef,
+      className: "relative min-h-[1200px]",
+      children: jsxs("div", {
+        className: "sticky top-0 py-20",
+        children: [jsxs("h2", {
+          className: "text-5xl font-semibold text-center mb-20",
+          style: {
+            color: 'var(--gray-900)'
+          },
+          children: ["It's time to ", jsx("span", {
+            className: "italic",
+            children: "rethink"
+          }), " ", jsx("br", {}), " infrastructure."]
+        }), jsx(InvestigationCard, {
+          progress: investigationProgress
+        })]
+      })
+    }), jsx("div", {
+      ref: infrastructureRef,
+      className: "relative min-h-[2700px]",
       children: jsx("div", {
-        className: "container mx-auto px-16",
-        children: jsxs("div", {
-          className: "flex flex-col items-start justify-between gap-10 md:flex-row",
-          children: [jsx("div", {
-            className: "h-60 w-full overflow-hidden rounded-lg shadow-md md:h-72 md:w-1/3",
-            children: jsx("img", {
-              src: Images.faq.person,
-              alt: "Person looking at bookshelves",
-              className: "h-full w-full object-cover"
-            })
+        className: "sticky top-0 py-20",
+        children: jsx(InfrastructureTabs, {
+          activeTab: infrastructureTab
+        })
+      })
+    }), jsx("div", {
+      className: "max-w-[1054px] mx-auto px-5 py-32",
+      children: jsxs("div", {
+        className: "flex gap-8",
+        children: [jsx("div", {
+          className: "flex-1",
+          children: jsx("h2", {
+            className: "text-4xl font-semibold mb-4 sticky top-20",
+            style: {
+              color: 'var(--gray-900)'
+            },
+            children: "Learning from your decisions, patterns, and goals."
+          })
+        }), jsxs("div", {
+          className: "w-[392px] space-y-5",
+          children: [jsx(LearningCard, {
+            icon: jsx(TrendingUp, {
+              className: "w-6 h-6"
+            }),
+            title: "Rollback changes and add a batch endpoint",
+            description: "Similar to how issues were resolved in previous incidents."
+          }), jsx(LearningCard, {
+            icon: jsx(Shield, {
+              className: "w-6 h-6"
+            }),
+            title: "Apply preload and caching safeguards",
+            description: "Patterns show API calls tied to userID should be preloaded or deduped."
           }), jsxs("div", {
-            className: "w-full space-y-5 md:w-2/3",
-            children: [jsx("h2", {
-              className: "text-2xl font-bold text-foreground",
-              children: "FAQs"
+            className: "p-5 rounded-2xl bg-[#EAEAEA] border border-black/5",
+            children: [jsx("h3", {
+              className: "text-base font-semibold mb-2",
+              style: {
+                color: 'var(--gray-900)'
+              },
+              children: "Goals updated"
             }), jsx("p", {
-              className: "text-lg text-muted-foreground",
-              children: "Answers to your general, technical, enterprise, and API-related questions."
-            }), jsx(Link, {
-              to: "/help-center",
-              children: jsx(Button, {
-                variant: "outline",
-                className: "mt-4 border-primary px-6 py-2.5 text-primary hover:bg-primary/10",
-                children: "Get Answers"
-              })
+              className: "text-sm mb-4",
+              style: {
+                color: 'var(--gray-600)'
+              },
+              children: "Your team prioritizes latency and keeping the UI responsive for this application."
+            }), jsx("div", {
+              className: "h-32 bg-black/5 rounded-lg"
+            })]
+          })]
+        })]
+      })
+    }), jsxs("div", {
+      ref: controlRef,
+      className: "max-w-[1004px] mx-auto px-5 py-32",
+      children: [jsx("h2", {
+        className: "text-4xl font-semibold text-center mb-12",
+        style: {
+          color: 'var(--gray-900)'
+        },
+        children: "With you always in control."
+      }), jsx(ControlCard, {
+        progress: controlProgress
+      })]
+    }), jsxs(Section, {
+      tone: "dark",
+      className: "relative overflow-hidden",
+      children: [jsx("div", {
+        className: "pointer-events-none absolute inset-0",
+        style: {
+          background: 'radial-gradient(1000px 700px at 15% 20%, rgba(246, 201, 69, 0.12), transparent 60%), radial-gradient(900px 650px at 90% 70%, rgba(255, 255, 255, 0.10), transparent 60%)'
+        }
+      }), jsx("div", {
+        className: "pointer-events-none absolute inset-0 cb-noise"
+      }), jsx(Container, {
+        className: "relative py-16 sm:py-24",
+        children: jsx("div", {
+          className: "mx-auto max-w-4xl text-center",
+          children: jsxs(ScrollReveal, {
+            reducedMotion: prefersReducedMotion,
+            children: [jsx("p", {
+              className: "text-xs font-medium uppercase tracking-[0.3em] text-white/60",
+              children: "Your privacy is our responsibility"
+            }), jsx("h2", {
+              className: "mt-4 text-balance text-3xl font-semibold tracking-tight sm:text-5xl",
+              children: "Trust isn't a feature. It's the business model."
+            }), jsx("p", {
+              className: "mt-6 text-pretty text-base leading-relaxed text-white/70 sm:text-lg",
+              children: "We believe that trust is paramount in a relationship. We do not own or sell your data, and we most certainly do not bank on advertising-based business models. The only way we make money is from the software license fees you pay us."
+            })]
+          })
+        })
+      })]
+    }), jsx(Section, {
+      tone: "default",
+      children: jsx(Container, {
+        className: "py-14 sm:py-20",
+        children: jsxs("div", {
+          className: "mx-auto max-w-6xl",
+          children: [jsxs(ScrollReveal, {
+            reducedMotion: prefersReducedMotion,
+            children: [jsx("p", {
+              className: "text-sm font-medium text-muted-foreground",
+              children: "The core values and principles that drive us"
+            }), jsx("h2", {
+              className: "mt-3 text-balance text-3xl font-semibold tracking-tight sm:text-4xl",
+              children: "Built with a long view."
+            })]
+          }), jsxs("div", {
+            className: "mt-10 grid gap-4 lg:grid-cols-3",
+            children: [jsx(ValueCard, {
+              title: "Long-term commitment",
+              description: "We've built a foundation on sustainable, profitable operations that understand the real challenges growing businesses face. We take pride in running a business that's powered by you, our customer, with a genuine commitment to your success."
+            }), jsx(ValueCard, {
+              title: "Focus on research and development",
+              description: "Software is our craft and we back it up with relentless investments in R&D. We prefer to own the entire technology stack, continuously innovating to deliver integrated solutions for time tracking, HR, communications, marketing, and financial management."
+            }), jsx(ValueCard, {
+              title: "Customer-first philosophy",
+              description: "Throughout our journey, it's our customers' trust and goodwill that has helped us establish a strong position in the market. No matter the size of your business, we're here to help you grow \u2014 from startups to enterprises."
+            })]
+          }), jsxs("div", {
+            className: "mt-12 flex flex-wrap items-center justify-between gap-4 rounded-2xl border border-foreground/10 bg-muted/30 px-6 py-6 sm:px-8",
+            children: [jsxs("div", {
+              children: [jsx("p", {
+                className: "text-base font-medium",
+                children: "Ready to run your business on Clockbook?"
+              }), jsx("p", {
+                className: "mt-1 text-sm text-muted-foreground",
+                children: "Get started in minutes. Scale for years."
+              })]
+            }), jsxs("div", {
+              className: "flex flex-wrap gap-3",
+              children: [jsx(Link, {
+                to: "https://app-v10.clockbook.com/",
+                target: "_blank",
+                children: jsx(Button, {
+                  className: "h-11 bg-[#E33A2C] px-6 text-white hover:bg-[#c82f23]",
+                  children: "Sign up"
+                })
+              }), jsx(Link, {
+                to: "/contact-us",
+                children: jsx(Button, {
+                  className: "h-11 bg-[#111827] px-6 text-white hover:bg-black",
+                  children: "Talk to sales"
+                })
+              })]
             })]
           })]
         })
       })
-    }), jsx(CategoriesSection, {
-      title: "Top categories",
-      categories: categories,
-      onCategoryClick: handleCategoryClick
-    }), jsx(FeaturedSection, {
-      title: "Featured articles",
-      articles: featuredArticles,
-      onArticleClick: handleArticleClick
-    }), jsx("section", {
-      className: "bg-muted/50 py-16",
+    })]
+  });
+};
+function LandingPageStyles() {
+  // Inline CSS so this module doesn't rely on any external CSS pipeline.
+  return jsx("style", {
+    // eslint-disable-next-line react/no-danger
+    dangerouslySetInnerHTML: {
+      __html: `
+/* --- Clockbook Landing Effects (scoped by cb- prefix) --- */
+.cb-noise {
+  opacity: 0.18;
+  background-image:
+    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.12) 0, rgba(255,255,255,0.00) 35%),
+    radial-gradient(circle at 80% 60%, rgba(255,255,255,0.10) 0, rgba(255,255,255,0.00) 45%),
+    repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0, rgba(255,255,255,0.02) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 3px),
+    repeating-linear-gradient(90deg, rgba(255,255,255,0.015) 0, rgba(255,255,255,0.015) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 3px);
+  mix-blend-mode: overlay;
+}
+
+.cb-fade-in {
+  animation: cbFadeIn 900ms cubic-bezier(.2,.9,.2,1) both;
+}
+
+.cb-reveal-line {
+  --d: 0ms;
+  animation: cbRevealUp 900ms cubic-bezier(.2,.9,.2,1) both;
+  animation-delay: var(--d);
+}
+
+.cb-letter {
+  display: inline-block;
+  --i: 0;
+  animation: cbLetterIn 900ms cubic-bezier(.2,.9,.2,1) both;
+  animation-delay: calc(var(--i) * 34ms + 120ms);
+}
+
+.cb-gradient-text {
+  background: linear-gradient(90deg, #ffffff 0%, #F6C945 35%, #E33A2C 70%, #ffffff 100%);
+  background-size: 220% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  animation: cbShimmer 6s ease-in-out infinite;
+}
+
+.cb-shimmer-mask {
+  background: linear-gradient(120deg, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.10) 45%, rgba(255,255,255,0.0) 70%);
+  background-size: 220% 100%;
+  animation: cbShimmer 6s ease-in-out infinite;
+  mix-blend-mode: overlay;
+  pointer-events: none;
+}
+
+.cb-float {
+  animation: cbFloat 7s ease-in-out infinite;
+}
+
+.cb-parallax-card {
+  transform: translate3d(0, 0, 0);
+  will-change: transform;
+}
+
+.cb-scroll-cue {
+  animation: cbCue 2.2s ease-in-out infinite;
+}
+
+.cb-intro-lock {
+  /* keeps layout stable while scroll is locked */
+  overscroll-behavior: none;
+}
+
+.cb-skip-enter {
+  animation: cbToastIn 420ms cubic-bezier(.2,.9,.2,1) both;
+}
+
+.cb-toast-enter {
+  animation: cbToastIn 420ms cubic-bezier(.2,.9,.2,1) both;
+}
+
+.cb-word {
+  display: inline-block;
+  opacity: 0;
+  transform: translateY(18px);
+  filter: blur(8px);
+  animation: cbWordIn 760ms cubic-bezier(.2,.9,.2,1) both;
+  animation-delay: calc(var(--i) * 60ms + var(--d, 0ms));
+}
+
+.cb-crt {
+  background-image:
+    radial-gradient(1200px 800px at 50% 20%, rgba(255,255,255,0.08), rgba(0,0,0,0) 60%),
+    repeating-linear-gradient(0deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 1px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 4px);
+  mix-blend-mode: overlay;
+  opacity: 0.7;
+  pointer-events: none;
+}
+
+.cb-reduced,
+.cb-reduced .cb-letter,
+.cb-reduced.cb-letter {
+  animation: none !important;
+  transition: none !important;
+}
+
+@keyframes cbFadeIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes cbRevealUp {
+  from { opacity: 0; transform: translateY(18px); filter: blur(8px); }
+  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
+}
+
+@keyframes cbLetterIn {
+  from { opacity: 0; transform: translateY(22px) scale(0.98); filter: blur(10px); }
+  to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
+}
+
+@keyframes cbShimmer {
+  0%   { background-position: 0% 50%; }
+  50%  { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+
+@keyframes cbFloat {
+  0%   { transform: translateY(0px); }
+  50%  { transform: translateY(-10px); }
+  100% { transform: translateY(0px); }
+}
+
+@keyframes cbCue {
+  0%, 100% { transform: translateY(0px); opacity: 0.65; }
+  50%      { transform: translateY(8px); opacity: 1; }
+}
+
+@keyframes cbToastIn {
+  from { opacity: 0; transform: translateX(10px) translateY(6px); filter: blur(8px); }
+  to   { opacity: 1; transform: translateX(0) translateY(0); filter: blur(0); }
+}
+
+@keyframes cbWordIn {
+  from { opacity: 0; transform: translateY(18px); filter: blur(8px); }
+  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cb-fade-in, .cb-reveal-line, .cb-letter, .cb-gradient-text, .cb-shimmer-mask, .cb-float, .cb-scroll-cue, .cb-toast-enter, .cb-word {
+    animation: none !important;
+  }
+}
+`
+    }
+  });
+}
+function AnimatedWord({
+  word,
+  className,
+  reducedMotion
+}) {
+  const letters = useMemo(() => word.split(''), [word]);
+  return jsx("h1", {
+    className: [className || '', 'leading-none'].join(' '),
+    children: jsx("span", {
+      className: ['cb-gradient-text', reducedMotion ? 'cb-reduced' : ''].join(' '),
+      children: letters.map((ch, idx) => jsx("span", {
+        className: "cb-letter",
+        style: {
+          ['--i']: idx
+        },
+        children: ch === ' ' ? '\u00A0' : ch
+      }, `${ch}-${idx}`))
+    })
+  });
+}
+function ClockbookHero({
+  reducedMotion,
+  onHeroImageLoaded,
+  introLocked,
+  onSkipIntro
+}) {
+  return jsxs(Section, {
+    tone: "dark",
+    className: ['relative overflow-hidden', introLocked ? 'cb-intro-lock' : ''].join(' '),
+    children: [jsx("div", {
+      className: "pointer-events-none absolute inset-0",
+      style: {
+        background: 'radial-gradient(1200px 800px at 20% 10%, rgba(255, 255, 255, 0.12), transparent 55%), radial-gradient(900px 700px at 80% 30%, rgba(246, 201, 69, 0.12), transparent 55%), radial-gradient(900px 700px at 60% 90%, rgba(227, 58, 44, 0.12), transparent 55%)'
+      }
+    }), jsx("div", {
+      className: "pointer-events-none absolute inset-0 cb-noise"
+    }), jsx(Container, {
+      className: "relative py-14 sm:py-20",
       children: jsx("div", {
-        className: "container mx-auto px-16",
+        className: "mx-auto max-w-5xl",
         children: jsxs("div", {
-          className: "flex flex-col items-center justify-between gap-10 rounded-xl bg-card p-8 shadow-sm md:flex-row",
-          children: [jsxs("div", {
-            className: "w-full space-y-5 md:w-1/2",
-            children: [jsx("h2", {
-              className: "text-3xl font-bold tracking-tight text-foreground",
-              children: featuredProduct.title
-            }), jsx("p", {
-              className: "text-lg text-muted-foreground",
-              children: featuredProduct.description
-            }), jsx(Button, {
-              variant: "outline",
-              className: "mt-4 border-primary px-6 py-2.5 text-primary hover:bg-primary/10",
-              children: featuredProduct.ctaText
+          className: "flex flex-col items-center text-center",
+          children: [jsx("p", {
+            className: "cb-fade-in text-xs font-medium uppercase tracking-[0.3em] text-white/60",
+            children: "Clockbook"
+          }), jsxs("div", {
+            className: "mt-6",
+            children: [jsx(AnimatedWord, {
+              word: "CLOCKBOOK",
+              reducedMotion: reducedMotion,
+              className: "text-5xl font-semibold tracking-tight sm:text-7xl lg:text-8xl"
+            }), jsx("div", {
+              className: "mt-4 overflow-hidden",
+              children: jsx("p", {
+                className: ['cb-reveal-line text-balance text-lg font-medium text-white/80 sm:text-2xl', reducedMotion ? 'cb-reduced' : ''].join(' '),
+                style: {
+                  ['--d']: '140ms'
+                },
+                children: "The Operating System for Business"
+              })
+            })]
+          }), jsx("p", {
+            className: "cb-fade-in mt-6 max-w-3xl text-pretty text-base leading-relaxed text-white/70 sm:text-lg",
+            children: "Run your entire business on Clockbook with our unified cloud platform, designed to help you break down silos between departments and increase organizational efficiency."
+          }), jsxs("div", {
+            className: "cb-fade-in mt-8 flex flex-wrap justify-center gap-3",
+            children: [jsx(Link, {
+              to: "/get-started",
+              children: jsx(Button, {
+                className: "h-11 bg-[#E33A2C] px-6 text-white hover:bg-[#c82f23]",
+                children: "Get started"
+              })
+            }), jsx(Link, {
+              to: "/help-center",
+              children: jsx(Button, {
+                className: "h-11 border border-white/15 bg-white/5 px-6 text-white hover:bg-white/10",
+                children: "Explore the platform"
+              })
+            })]
+          }), jsxs("div", {
+            className: "mt-12 w-full max-w-6xl",
+            children: [jsxs("div", {
+              className: "relative mx-auto overflow-hidden rounded-2xl border border-white/10 bg-white/5 shadow-[0_30px_120px_rgba(0,0,0,0.55)]",
+              children: [jsx("div", {
+                className: "absolute inset-0 cb-shimmer-mask"
+              }), jsx("img", {
+                src: Images.marketing.dashboard,
+                alt: "Clockbook dashboard preview",
+                className: ['h-[260px] w-full object-cover sm:h-[380px] lg:h-[460px]', reducedMotion ? '' : 'cb-float'].join(' '),
+                loading: "lazy",
+                onLoad: onHeroImageLoaded
+              })]
+            }), jsxs("div", {
+              className: "cb-fade-in mt-6 flex items-center justify-center gap-3 text-sm text-white/55",
+              children: [jsx("span", {
+                className: "h-1.5 w-1.5 rounded-full bg-white/40"
+              }), jsx("span", {
+                children: "Your business's success, powered by our platform's intelligence"
+              })]
             })]
-          }), jsx("div", {
-            className: "h-72 w-full overflow-hidden rounded-lg shadow-md md:w-1/2",
-            children: jsx("img", {
-              src: featuredProduct.image,
-              alt: "Yantra Supply Products",
-              className: "h-full w-full object-cover"
+          }), !reducedMotion && introLocked ? jsx("div", {
+            className: "cb-skip-enter mt-8",
+            children: jsx("button", {
+              type: "button",
+              onClick: onSkipIntro,
+              className: "rounded-full border border-white/15 bg-white/5 px-4 py-2 text-xs font-medium uppercase tracking-[0.22em] text-white/70 hover:bg-white/10",
+              children: "Skip intro"
             })
-          })]
+          }) : null]
         })
       })
-    }), jsx(ResourcesSection, {
-      title: "More resources",
-      resources: resources,
-      onResourceClick: handleResourceClick
+    }), jsx("div", {
+      className: "pb-12",
+      children: jsx(ScrollCue, {
+        reducedMotion: reducedMotion
+      })
+    })]
+  });
+}
+function ScrollCue({
+  reducedMotion
+}) {
+  return jsx("div", {
+    className: ['mx-auto flex w-full max-w-7xl justify-center', reducedMotion ? 'cb-reduced' : ''].join(' '),
+    children: jsxs("div", {
+      className: "cb-scroll-cue flex items-center gap-2 text-xs font-medium uppercase tracking-[0.25em] text-white/50",
+      children: [jsx("span", {
+        children: "Scroll"
+      }), jsx("span", {
+        className: "inline-flex h-6 w-4 items-start justify-center rounded-full border border-white/20",
+        children: jsx("span", {
+          className: "mt-1 h-1.5 w-1.5 rounded-full bg-white/60"
+        })
+      })]
+    })
+  });
+}
+function useBodyScrollLock(locked) {
+  const lockedRef = useRef(false);
+  useEffect(() => {
+    if (typeof document === 'undefined') return;
+    if (lockedRef.current === locked) return;
+    lockedRef.current = locked;
+    const docEl = document.documentElement;
+    const body = document.body;
+    const prevOverflow = docEl.style.overflow;
+    const prevBodyOverflow = body.style.overflow;
+    const prevent = e => {
+      e.preventDefault();
+    };
+    if (locked) {
+      docEl.style.overflow = 'hidden';
+      body.style.overflow = 'hidden';
+      // Prevent trackpad / touch scrolling in some browsers
+      window.addEventListener('wheel', prevent, {
+        passive: false
+      });
+      window.addEventListener('touchmove', prevent, {
+        passive: false
+      });
+    }
+    return () => {
+      docEl.style.overflow = prevOverflow;
+      body.style.overflow = prevBodyOverflow;
+      window.removeEventListener('wheel', prevent);
+      window.removeEventListener('touchmove', prevent);
+    };
+  }, [locked]);
+}
+function usePrefersReducedMotion() {
+  const [reduced, setReduced] = useState(false);
+  useEffect(() => {
+    if (typeof window === 'undefined' || !window.matchMedia) return;
+    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
+    const update = () => setReduced(mq.matches);
+    update();
+    // Safari fallback
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const anyMq = mq;
+    if (mq.addEventListener) mq.addEventListener('change', update);else if (anyMq.addListener) anyMq.addListener(update);
+    return () => {
+      if (mq.removeEventListener) mq.removeEventListener('change', update);else if (anyMq.removeListener) anyMq.removeListener(update);
+    };
+  }, []);
+  return reduced;
+}
+function useInView(options) {
+  const ref = useRef(null);
+  const [inView, setInView] = useState(false);
+  useEffect(() => {
+    if (typeof window === 'undefined' || !ref.current) return;
+    if (!('IntersectionObserver' in window)) {
+      setInView(true);
+      return;
+    }
+    const observer = new IntersectionObserver(entries => {
+      const entry = entries[0];
+      if (entry?.isIntersecting) setInView(true);
+    }, {
+      root: options.root || null,
+      rootMargin: options.rootMargin || '0px',
+      threshold: options.threshold || 0.1
+    });
+    observer.observe(ref.current);
+    return () => observer.disconnect();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [options.rootMargin, options.threshold]);
+  return [ref, inView];
+}
+function ScrollReveal({
+  children,
+  reducedMotion
+}) {
+  const [ref, inView] = useInView({
+    rootMargin: '-10% 0px -10% 0px',
+    threshold: 0.12
+  });
+  const active = reducedMotion ? true : inView;
+  return jsx("div", {
+    ref: ref,
+    className: ['transition-all duration-700', active ? 'translate-y-0 opacity-100' : 'translate-y-4 opacity-0'].join(' '),
+    style: active ? undefined : {
+      filter: 'blur(8px)'
+    },
+    children: children
+  });
+}
+function ValueCard({
+  title,
+  description
+}) {
+  return jsxs("div", {
+    className: "rounded-2xl border border-foreground/10 bg-background p-6 shadow-sm",
+    children: [jsx("p", {
+      className: "text-xs font-medium uppercase tracking-[0.22em] text-muted-foreground",
+      children: title
+    }), jsx("p", {
+      className: "mt-4 text-sm leading-relaxed text-muted-foreground",
+      children: description
     })]
   });
-};export{LandingPage as default};//# sourceMappingURL=index.js.map
+}export{LandingPage as default};//# sourceMappingURL=index.js.map