The custom code element you just added won’t be visible in the editor here. Please go to the published page URL after publishing, you will be able to find your element there.
+Add Element
The custom code element you just added won’t be visible in the editor here. Please go to the published page URL after publishing, you will be able to find your element there.
+Add Element
+Add Element

Large Call to Action Headline

Small Call to Action Headline

Large Call to Action Headline

+Add Element
+Add Element

Small Call to Action Headline

Small Call to Action Headline

+Add Row
+Add Element
+Add Element
Insert here your custom code
+Add Row
import { useState, useEffect, useRef } from "react"; import { BookOpen, Map, MessageCircle, Crown, Flame, ChevronRight, Sparkles } from "lucide-react"; const TROPES = [ "Enemies to Lovers", "Morally Gray Hero", "Dark Fantasy", "Forced Proximity", "Power Imbalance", "Touch Her & Die", "He Falls First", "One Bed", "Forbidden Love", ]; const SPICE_LEVEL = 5; function FloatingParticle({ delay, x, size, duration }) { return (
); } function TropeTag({ label, index }) { return (
{label}
); } function FeatureCard({ icon: Icon, title, desc, delay }) { return (

{title}

{desc}

); } export default function NewsletterSignup() { const [email, setEmail] = useState(""); const [submitted, setSubmitted] = useState(false); const [isHoveringBtn, setIsHoveringBtn] = useState(false); const cursorRef = useRef(null); const handleSubmit = (e) => { if (e) e.preventDefault(); const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (emailRegex.test(email)) { setSubmitted(true); } }; useEffect(() => { const handleMouseMove = (e) => { if (cursorRef.current) { cursorRef.current.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`; } }; window.addEventListener("mousemove", handleMouseMove); return () => window.removeEventListener("mousemove", handleMouseMove); }, []); const particles = Array.from({ length: 25 }, (_, i) => ({ delay: Math.random() * 5, x: Math.random() * 100, size: Math.random() * 3 + 1, duration: Math.random() * 5 + 5, })); return (
{/* Interactive Cursor Light */}
{/* Atmospheric Background Effects */}
{/* Deep ambient glows */}
{/* Grain overlay */}
{/* Particles */} {particles.map((p, i) =>)}
{/* Main Content Wrapper */}
{/* Header / Hero */}
From the desk of Yung-Lung Chen

Every Debt
demands
a Reader

Dark fantasy. Devastating romance. Magic that costs everything. Join the inner circle and uncover secrets meant to stay buried.

{/* Split Section: Offer & Form */}
{/* Left: The Visual / Book Info */}
{/* Decorative corners */}
Free Prequel Novella

The Price of Fatum

A Ledger Lords Story

" Before the extraction. Before the debt. Before her. Cassian Ashford was the golden son of the most powerful family in the realm. Then he found the ledger that proved they built their empire on blood. "

Heat Level
{[1, 2, 3, 4, 5].map((n) => ( ))}
18+~15K Words
{/* Right: The Form & Tropes */}
{!submitted ? (

Unlock the Vault

Enter your email to instantly receive The Price of Fatum and secure your place in the inner circle.

setEmail(e.target.value)} required placeholder="Enter your email address..." className="w-full bg-[#050505] border border-[#2A2318] rounded-lg px-6 py-5 text-[#F0E6D0] font-['Cormorant_Garamond',serif] text-lg outline-none transition-all duration-300 focus:border-[#C9A84C] focus:shadow-[0_0_20px_rgba(201,168,76,0.1)] placeholder:text-[#3A3225] placeholder:italic" />

Your soul (and email) is safe. Unsubscribe at any time.

) : (

The Debt Is Sealed

Check your inbox. Your copy of The Price of Fatum is waiting. Welcome to the Ledger Lords.

)} {/* Tropes Cloud */}
Included Tropes
{TROPES.map((t, i) => ( ))}
{/* Divider */}
{/* Features / What You Get Grid */}

Inside the Inner Circle

Subscribers receive more than just updates. You gain access to the vault.

{/* Series Timeline */}

The Ledger Lords Series

{/* Connecting line */}
{[ { num: "I", title: "The Extraction", status: "Coming 2026", active: true }, { num: "II", title: "The Sovereignty", status: "Coming 2026", active: false }, { num: "III", title: "The Default", status: "Coming 2027", active: false }, { num: "IV", title: "The Reckoning", status: "Coming 2027", active: false }, ].map(({ num, title, status, active }, i) => (
{num}
{title}
{status}
))}
{/* Footer */}
); }