Spaces:
Runtime error
Runtime error
| import { useEffect, useRef, useState, type FormEvent } from "react"; | |
| import { Link, useNavigate } from "react-router-dom"; | |
| import SkyCanvas from "../components/SkyCanvas"; | |
| import FeatureShowcase from "../components/FeatureShowcase"; | |
| import PricingTiers from "../components/PricingTiers"; | |
| import "../styles/showcase.css"; | |
| import { PublicFooter, PublicNav } from "../components/PublicChrome"; | |
| import { blogPosts } from "../content/blogPosts"; | |
| import { useAuth } from "../hooks/useAuth"; | |
| import { | |
| ArrowRightIcon, | |
| ConstellationIcon, | |
| HelmetIcon, | |
| LaunchWindowIcon, | |
| LaunchpadIcon, | |
| OrbitIcon, | |
| RocketIcon, | |
| SignalIcon, | |
| TelescopeIcon, | |
| } from "../components/icons/Icons"; | |
| export const PENDING_SOURCE_KEY = "ns_pending_source"; | |
| // Bump after re-rendering public/demo.mp4 so browsers and the CDN fetch the new file. | |
| const DEMO_VERSION = 5; | |
| const FEATURES = [ | |
| { | |
| icon: TelescopeIcon, | |
| label: "Research chat", | |
| title: "Ask your archive anything", | |
| body: "Every answer cites the exact passage it came from. If you never wrote it, Notestack says so.", | |
| }, | |
| { | |
| icon: ConstellationIcon, | |
| label: "Mind Constellation", | |
| title: "Fly through your ideas", | |
| body: "Open a notebook as a galaxy of topics. Switch the shape, dive in and see the posts behind every star.", | |
| }, | |
| { | |
| icon: SignalIcon, | |
| label: "Audio overview", | |
| title: "Two hosts, your ideas", | |
| body: "Turn a post or a whole notebook into a natural two host conversation, voiced by ElevenLabs.", | |
| }, | |
| { | |
| icon: LaunchWindowIcon, | |
| label: "Video", | |
| title: "Narrated videos you can edit", | |
| body: "Pick a post and a template, then edit every scene with a live preview. Landscape for YouTube, vertical for Reels.", | |
| }, | |
| { | |
| icon: RocketIcon, | |
| label: "Launch Kit", | |
| title: "One post, every platform", | |
| body: "Threads, LinkedIn, Substack Notes, hooks, quote cards and an SEO pack in one click.", | |
| }, | |
| { | |
| icon: HelmetIcon, | |
| label: "Voices", | |
| title: "Sounds like you", | |
| body: "Notestack learns your tone from your posts, and you can describe, pick or clone a voice for narration.", | |
| }, | |
| { | |
| icon: OrbitIcon, | |
| label: "Memory", | |
| title: "Remembers who you write for", | |
| body: "Short notes about your audience and style, learned from your chats and yours to edit anytime.", | |
| }, | |
| { | |
| icon: LaunchpadIcon, | |
| label: "Launchpad", | |
| title: "Schedule the countdown", | |
| body: "Plan every launch on one calendar and resurface evergreen posts when they matter again.", | |
| }, | |
| ]; | |
| const STEPS = [ | |
| { n: "01", title: "Point it at your writing", body: "Any blog, newsletter or site URL, or upload markdown, text, HTML and PDF files." }, | |
| { n: "02", title: "Watch them come into orbit", body: "Posts are cleaned, indexed and embedded in minutes." }, | |
| { n: "03", title: "Launch", body: "Ask, listen, render and publish, all grounded in what you wrote." }, | |
| ]; | |
| /** The narrated demo. Browsers only autoplay muted, so a button turns the captain's log on. */ | |
| function DemoVideo() { | |
| const ref = useRef<HTMLVideoElement>(null); | |
| const [muted, setMuted] = useState(true); | |
| const toggle = () => { | |
| const v = ref.current; | |
| if (!v) return; | |
| if (muted) { | |
| v.currentTime = 0; // start the narration from the top | |
| v.muted = false; | |
| void v.play(); | |
| } else { | |
| v.muted = true; | |
| } | |
| setMuted(!muted); | |
| }; | |
| return ( | |
| <div className="demo-frame card arrive"> | |
| <div className="demo-bar mono"> | |
| <span>Mission log · 00:46</span> | |
| <button type="button" className="demo-sound" onClick={toggle} aria-pressed={!muted}> | |
| {muted ? "Play with sound" : "Mute"} | |
| </button> | |
| </div> | |
| <div className="demo-stage"> | |
| <video | |
| ref={ref} | |
| className="demo-video" | |
| src={`/demo.mp4?v=${DEMO_VERSION}`} | |
| poster={`/demo-poster.jpg?v=${DEMO_VERSION}`} | |
| autoPlay | |
| muted | |
| loop | |
| playsInline | |
| preload="metadata" | |
| aria-label="Notestack product demo, narrated: connect any blog, site or markdown, ask your archive, hear an audio overview and launch posts" | |
| /> | |
| {muted && ( | |
| <button type="button" className="demo-unmute" onClick={toggle} aria-label="Play the demo with sound"> | |
| <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"> | |
| <path d="M4 9v6h4l5 4V5L8 9H4z" /> | |
| <path d="M16.5 8.5a5 5 0 0 1 0 7M19 6a8.5 8.5 0 0 1 0 12" /> | |
| </svg> | |
| Hear the captain's log | |
| </button> | |
| )} | |
| </div> | |
| </div> | |
| ); | |
| } | |
| /** Sections drift in out of the depth as they reach the viewport, like planets on approach. */ | |
| function useArrivals() { | |
| useEffect(() => { | |
| const els = Array.from(document.querySelectorAll<HTMLElement>(".arrive")); | |
| if (!("IntersectionObserver" in window) || window.matchMedia("(prefers-reduced-motion: reduce)").matches) { | |
| els.forEach((el) => el.classList.add("arrived")); | |
| return; | |
| } | |
| const io = new IntersectionObserver( | |
| (entries) => { | |
| for (const e of entries) { | |
| if (e.isIntersecting) { | |
| e.target.classList.add("arrived"); | |
| io.unobserve(e.target); | |
| } | |
| } | |
| }, | |
| { threshold: 0.35, rootMargin: "0px 0px -12% 0px" }, | |
| ); | |
| els.forEach((el) => io.observe(el)); | |
| return () => io.disconnect(); | |
| }, []); | |
| } | |
| export default function Landing() { | |
| const [url, setUrl] = useState(""); | |
| const navigate = useNavigate(); | |
| const { user } = useAuth(); | |
| useArrivals(); | |
| const onSubmit = (e: FormEvent) => { | |
| e.preventDefault(); | |
| // Always go to sign in / sign up. A pasted URL rides along and starts connecting after signup | |
| // (Welcome picks it up); signed in writers go straight to Mission Control, which does the same. | |
| const value = url.trim(); | |
| if (value) { | |
| try { | |
| sessionStorage.setItem(PENDING_SOURCE_KEY, value); | |
| } catch { | |
| /* ignore */ | |
| } | |
| } | |
| navigate(user ? "/app" : "/auth?mode=signup"); | |
| }; | |
| return ( | |
| <div className="page"> | |
| <SkyCanvas travel /> | |
| <PublicNav /> | |
| <main> | |
| <section className="hero"> | |
| <div className="container hero-inner"> | |
| <p className="eyebrow"> | |
| <Link to="/notebooklm-alternative" className="eyebrow-link"> | |
| The ultimate NotebookLM alternative | |
| </Link>{" "} | |
| for writers, bloggers and newsletters | |
| </p> | |
| <h1 className="hero-title"> | |
| Your knowledge, | |
| <br /> | |
| <span className="glow-text shimmer">in orbit.</span> | |
| </h1> | |
| <p className="hero-sub muted"> | |
| Notestack turns your blog, newsletter, site or markdown files into a research notebook you can question, | |
| podcasts you can publish and launch kits for every platform. Every word traced back to what you actually wrote. | |
| </p> | |
| <form className="hero-form" onSubmit={onSubmit}> | |
| <label htmlFor="hero-url" className="sr-only"> | |
| Your blog, newsletter or site URL | |
| </label> | |
| <input | |
| id="hero-url" | |
| className="input" | |
| placeholder="yourblog.com or yourname.substack.com" | |
| value={url} | |
| onChange={(e) => setUrl(e.target.value)} | |
| autoComplete="url" | |
| inputMode="url" | |
| /> | |
| <button type="submit" className="btn btn-primary"> | |
| Start Exploring | |
| <ArrowRightIcon size={18} /> | |
| </button> | |
| </form> | |
| <p className="mono hero-meta"> | |
| Works with Substack, Ghost, WordPress, Medium, any RSS feed or site, and markdown files.{" "} | |
| <Link to="/auth?mode=signup">Upload files instead</Link> | |
| </p> | |
| </div> | |
| <div className="horizon" aria-hidden="true"> | |
| <span className="horizon-flare" /> | |
| <span className="horizon-glint g1" /> | |
| <span className="horizon-glint g2" /> | |
| <span className="horizon-glint g3" /> | |
| </div> | |
| <div className="hero-sweep" aria-hidden="true" /> | |
| </section> | |
| <section className="section demo"> | |
| <div className="container"> | |
| <DemoVideo /> | |
| </div> | |
| </section> | |
| <section id="features" className="section"> | |
| <div className="container"> | |
| <p className="eyebrow">What you get</p> | |
| <h2 className="section-title">Everything your writing can become</h2> | |
| <div className="feature-grid"> | |
| {FEATURES.map(({ icon: Icon, label, title, body }, i) => ( | |
| <article key={label} className="card feature arrive" style={{ ["--i" as string]: i % 3 }}> | |
| <div className="feature-label"> | |
| <Icon /> | |
| <span className="mono">{label}</span> | |
| </div> | |
| <h3>{title}</h3> | |
| <p className="muted">{body}</p> | |
| </article> | |
| ))} | |
| </div> | |
| </div> | |
| </section> | |
| <section id="tour" className="section tour"> | |
| <div className="container"> | |
| <p className="eyebrow">The tour</p> | |
| <h2 className="section-title">Seven stops across your archive</h2> | |
| <FeatureShowcase /> | |
| </div> | |
| </section> | |
| <section className="section"> | |
| <div className="container"> | |
| <p className="eyebrow">How it works</p> | |
| <h2 className="section-title">Three steps to liftoff</h2> | |
| <ol className="steps"> | |
| {STEPS.map((s, i) => ( | |
| <li key={s.n} className="step arrive" style={{ ["--i" as string]: i }}> | |
| <span className="step-n mono">{s.n}</span> | |
| <h3>{s.title}</h3> | |
| <p className="muted">{s.body}</p> | |
| </li> | |
| ))} | |
| </ol> | |
| </div> | |
| </section> | |
| <section id="pricing" className="section"> | |
| <div className="container"> | |
| <p className="eyebrow">Pricing</p> | |
| <h2 className="section-title">Pick your trajectory</h2> | |
| <PricingTiers /> | |
| </div> | |
| </section> | |
| <section className="section"> | |
| <div className="container"> | |
| <p className="eyebrow">From the blog</p> | |
| <h2 className="section-title">Field notes</h2> | |
| <div className="blog-grid"> | |
| {blogPosts.slice(0, 3).map((p, i) => ( | |
| <Link key={p.slug} to={`/blogs/${p.slug}`} className="card blog-card arrive" style={{ ["--i" as string]: i }}> | |
| <span className="mono muted"> | |
| {p.category} · {p.readTime} | |
| </span> | |
| <h3>{p.title}</h3> | |
| <p className="muted">{p.description}</p> | |
| </Link> | |
| ))} | |
| </div> | |
| </div> | |
| </section> | |
| <section className="section final-cta arrive"> | |
| <div className="container"> | |
| <h2 className="section-title">Clear skies ahead.</h2> | |
| <p className="muted">Paste your URL above or start with an empty notebook.</p> | |
| <Link to="/auth?mode=signup" className="btn btn-primary"> | |
| Start free | |
| </Link> | |
| </div> | |
| </section> | |
| </main> | |
| <PublicFooter /> | |
| </div> | |
| ); | |
| } | |