's'

app/vip/components/LandingPage.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useState } from "react";
 import { LandingHero } from "./landing/LandingHero";
 import { AssetStats } from "./landing/AssetStats";
 import { TopicEbookShowcase } from "./landing/TopicEbookShowcase";
@@ -7,31 +8,36 @@ import { CompareSection } from "./landing/CompareSection";
 import { CommunityPreview } from "./landing/CommunityPreview";
 import { FAQSection } from "./landing/FAQSection";
 import { LandingCTA } from "./landing/LandingCTA";
-import { LoginBlock } from "./landing/LoginBlock";
+import { LoginModal } from "./landing/LoginModal";
 
 type LandingPageProps = {
   onJoin: () => void;
-  onLogin: () => void;
   onVerify: (userId: string) => Promise<boolean>;
   onVerifySuccess: () => void;
 };
 
 export function LandingPage({
   onJoin,
-  onLogin,
   onVerify,
   onVerifySuccess,
 }: LandingPageProps) {
+  const [loginModalOpen, setLoginModalOpen] = useState(false);
+
   return (
     <>
       <LandingHero />
       <AssetStats />
-      <TopicEbookShowcase />
+      <TopicEbookShowcase onLockedClick={() => setLoginModalOpen(true)} />
       <CompareSection />
       <CommunityPreview />
       <FAQSection />
-      <LandingCTA onJoin={onJoin} onLogin={onLogin} />
-      <LoginBlock onVerify={onVerify} onSuccess={onVerifySuccess} />
+      <LandingCTA onJoin={onJoin} onLogin={() => setLoginModalOpen(true)} />
+      <LoginModal
+        open={loginModalOpen}
+        onClose={() => setLoginModalOpen(false)}
+        onVerify={onVerify}
+        onSuccess={onVerifySuccess}
+      />
     </>
   );
 }