+
{/* Logo */}
-
-
+
+
- {/* Navigation Links */}
-
-
- About
-
-
- Blog
-
-
- FAQ
-
-
- In the News
-
-
- {t('menu.merch')}
-
-
- Try it
-
-
+ {/* Desktop nav. Hidden below lg because five links plus a CTA cannot
+ fit a phone width without wrapping or overflowing. */}
+
+ {navItems.map((item) => renderNavLink(item, linkClass))}
+
+
+
+ {/* Mobile: keep the CTA visible — it is the point of the page — and
+ move everything else behind the menu. */}
+
+
+
+
+
+
+
+ {/* The sheet's built-in close button inherits `currentColor` at
+ 70% opacity, which is invisible against dark green — force it
+ light along with the panel text. */}
+
+ Menu
+
+ Divine site navigation
+
+
+ {navItems.map((item) =>
+ renderNavLink(
+ item,
+ "text-base font-medium text-brand-off-white hover:text-brand-green transition-colors",
+ () => setMenuOpen(false),
+ ),
+ )}
+
+
+
diff --git a/src/components/family/StoreBadgesCta.tsx b/src/components/family/StoreBadgesCta.tsx
index c0f252b3..97a669ad 100644
--- a/src/components/family/StoreBadgesCta.tsx
+++ b/src/components/family/StoreBadgesCta.tsx
@@ -3,22 +3,7 @@
import { trackEvent } from "@/lib/analytics";
import { HubSpotSignup } from "@/components/HubSpotSignup";
-
-const APP_STORE_BASE = "https://apps.apple.com/us/app/divine-video/id6747959501";
-const PLAY_STORE_BASE = "https://play.google.com/store/apps/details";
-
-export function buildStoreLinks(campaign: string) {
- const utm = new URLSearchParams({
- utm_source: "divine_site",
- utm_medium: "family_page",
- utm_campaign: campaign,
- });
- const play = new URLSearchParams({ id: "co.openvine.app" });
- return {
- appStore: `${APP_STORE_BASE}?${utm.toString()}`,
- playStore: `${PLAY_STORE_BASE}?${play.toString()}&${utm.toString()}`,
- };
-}
+import { buildStoreLinks } from "@/lib/mobileStoreLinks";
interface StoreBadgesCtaProps {
/** utm_campaign value; use the route slug */
diff --git a/src/components/showcase/FamilyWelcomeSection.test.tsx b/src/components/showcase/FamilyWelcomeSection.test.tsx
new file mode 100644
index 00000000..defe50a4
--- /dev/null
+++ b/src/components/showcase/FamilyWelcomeSection.test.tsx
@@ -0,0 +1,30 @@
+// ABOUTME: Tests for the showcase homepage's family / Divine Greenlight section
+// ABOUTME: Locks the two outbound destinations and the heading contract
+
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { FamilyWelcomeSection } from "./FamilyWelcomeSection";
+
+describe("FamilyWelcomeSection", () => {
+ it("points families at the family hub", () => {
+ render(
);
+
+ const link = screen.getByRole("link", { name: /family resources page/i });
+ expect(link).toHaveAttribute("href", "/family");
+ });
+
+ it("sends readers to exactly one destination", () => {
+ render(
);
+
+ // The block deliberately carries a single call to action. /kids stays
+ // reachable through the footer, and Greenlight is a section within it.
+ expect(screen.getAllByRole("link")).toHaveLength(1);
+ });
+
+ it("renders as an h2 section so it nests under the page h1", () => {
+ render(
);
+
+ expect(screen.getByRole("heading", { level: 2 })).toBeInTheDocument();
+ });
+});
diff --git a/src/components/showcase/FamilyWelcomeSection.tsx b/src/components/showcase/FamilyWelcomeSection.tsx
new file mode 100644
index 00000000..936910df
--- /dev/null
+++ b/src/components/showcase/FamilyWelcomeSection.tsx
@@ -0,0 +1,34 @@
+// ABOUTME: Homepage copy block on healthier social media, linking the kids policy, family hub, and Greenlight
+// ABOUTME: Styled to match the joyscrolling block above it — heading plus one muted paragraph
+
+import { SectionHeader } from "@/components/brand/SectionHeader";
+import { cn } from "@/lib/utils";
+
+// Inline link treatment for body copy on a light surface, same as the static pages.
+const LINK_CLASS =
+ "text-brand-dark-green dark:text-brand-green underline underline-offset-2 hover:opacity-80";
+
+export function FamilyWelcomeSection({ className }: { className?: string }) {
+ return (
+
+
+ Building a healthier social media experience
+
+
+ We believe the challenges of an increasingly digital world call for better
+ solutions than blanket bans or mass surveillance. As part of our commitment to a
+ more
+ human-centered internet, we’ve created research-backed tools to help families
+ build healthy online habits together. Visit our{" "}
+
+ family resources page
+ {" "}
+ to learn more.
+
+
+ );
+}
diff --git a/src/components/showcase/PhoneFrame.tsx b/src/components/showcase/PhoneFrame.tsx
new file mode 100644
index 00000000..825ca582
--- /dev/null
+++ b/src/components/showcase/PhoneFrame.tsx
@@ -0,0 +1,43 @@
+// ABOUTME: A phone device bezel wrapping the showcase reel on larger screens
+// ABOUTME: On phones the device IS the frame, so it renders full-bleed instead
+
+import { type ReactNode } from 'react';
+import { cn } from '@/lib/utils';
+
+interface PhoneFrameProps {
+ children: ReactNode;
+ className?: string;
+}
+
+/**
+ * Wrap content in a phone-shaped bezel on tablet/desktop, giving the showcase
+ * the "you're looking at the app" feel. On real phones (< sm) a bezel around
+ * content the viewer is already holding in a phone would be silly, so it
+ * degrades to a simple rounded, full-width surface at a portrait aspect.
+ */
+export function PhoneFrame({ children, className }: PhoneFrameProps) {
+ return (
+
+ {/* Speaker/camera notch — decorative, hidden from a11y. */}
+
+
{children}
+
+ );
+}
diff --git a/src/components/showcase/ShowcasePhone.tsx b/src/components/showcase/ShowcasePhone.tsx
new file mode 100644
index 00000000..fbbaf43a
--- /dev/null
+++ b/src/components/showcase/ShowcasePhone.tsx
@@ -0,0 +1,29 @@
+// ABOUTME: Presentational phone-frame panel for the showcase reel
+// ABOUTME: Renders the loading, populated, and empty states; layout lives in the page
+
+import { PhoneFrame } from '@/components/showcase/PhoneFrame';
+import { ShowcaseReel } from '@/components/showcase/ShowcaseReel';
+import { Skeleton } from '@/components/ui/skeleton';
+import type { ParsedVideoData } from '@/types/video';
+
+interface ShowcasePhoneProps {
+ isLoading: boolean;
+ isEmpty: boolean;
+ videos: ParsedVideoData[];
+}
+
+export function ShowcasePhone({ isLoading, isEmpty, videos }: ShowcasePhoneProps) {
+ return (
+
+ {isLoading && }
+ {!isLoading && videos.length > 0 && }
+ {isEmpty && (
+
+
+ Curated clips will loop here soon.
+
+
+ );
+}
diff --git a/src/components/showcase/ShowcaseReel.tsx b/src/components/showcase/ShowcaseReel.tsx
new file mode 100644
index 00000000..efb137d1
--- /dev/null
+++ b/src/components/showcase/ShowcaseReel.tsx
@@ -0,0 +1,155 @@
+// ABOUTME: Vertical scroll-snap reel of curated videos, framed like a phone
+// ABOUTME: Tap top/bottom or arrow-key through it in a loop; read-only, share only
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useShowcaseShare } from '@/hooks/useShowcaseShare';
+import { getVideoShareData } from '@/lib/shareUtils';
+import { ShowcaseSlide } from '@/components/showcase/ShowcaseSlide';
+import { isWrap, wrapIndex } from '@/lib/wrapIndex';
+import type { ParsedVideoData } from '@/types/video';
+
+interface ShowcaseReelProps {
+ videos: ParsedVideoData[];
+}
+
+export function ShowcaseReel({ videos }: ShowcaseReelProps) {
+ const scrollerRef = useRef
(null);
+ const slideRefs = useRef>([]);
+ const [activeIndex, setActiveIndex] = useState(0);
+ // One mute state for the whole reel: starts muted (required for autoplay),
+ // and once the viewer unmutes it stays that way as they swipe.
+ const [muted, setMuted] = useState(true);
+ const share = useShowcaseShare();
+
+ const onToggleMute = useCallback(() => setMuted((m) => !m), []);
+
+ const onShare = useCallback(
+ (video: ParsedVideoData) => share(getVideoShareData(video)),
+ [share],
+ );
+
+ // The slide occupying most of the viewport is the "active" one that plays.
+ useEffect(() => {
+ const scroller = scrollerRef.current;
+ if (!scroller) return;
+
+ const observer = new IntersectionObserver(
+ (entries) => {
+ for (const entry of entries) {
+ if (entry.isIntersecting && entry.intersectionRatio >= 0.6) {
+ const idx = Number((entry.target as HTMLElement).dataset.index);
+ if (!Number.isNaN(idx)) setActiveIndex(idx);
+ }
+ }
+ },
+ { root: scroller, threshold: [0.6] },
+ );
+
+ for (const el of slideRefs.current) {
+ if (el) observer.observe(el);
+ }
+ return () => observer.disconnect();
+ }, [videos.length]);
+
+ // Step the reel by a number of slides, looping past either end.
+ //
+ // The current slide comes from the scroller's own scrollTop rather than from
+ // `activeIndex`: that state is set by an IntersectionObserver callback, so it
+ // trails the actual scroll position by a frame or more. Reading it here meant
+ // a second tap landing before the observer caught up computed its target from
+ // a stale index and jumped to the wrong clip. Scroll position is authoritative
+ // and always current.
+ const stepSlides = useCallback(
+ (delta: number) => {
+ const scroller = scrollerRef.current;
+ if (!scroller) return;
+ const count = videos.length;
+ if (count === 0) return;
+
+ const current = Math.round(scroller.scrollTop / scroller.clientHeight);
+ const requested = current + delta;
+ // Scroll the reel container itself rather than scrollIntoView(), which would
+ // also scroll every ancestor — including the window — and shove the whole
+ // page up so the phone's top clips under the header. Each slide is exactly
+ // the scroller's height, so slide N sits at N × clientHeight.
+ //
+ // A wrap jumps instantly instead of animating: smooth-scrolling from the
+ // last slide back to the first would rewind through every clip in between,
+ // which reads as a glitch rather than a loop.
+ scroller.scrollTo({
+ top: wrapIndex(requested, count) * scroller.clientHeight,
+ behavior: isWrap(requested, count) ? 'auto' : 'smooth',
+ });
+ },
+ [videos.length],
+ );
+
+ // Arrow keys page the reel when it (or a child) holds focus — the keyboard
+ // equivalent of the tap zones.
+ const onKeyDown = useCallback(
+ (e: React.KeyboardEvent) => {
+ if (e.key === 'ArrowDown') {
+ e.preventDefault();
+ stepSlides(1);
+ } else if (e.key === 'ArrowUp') {
+ e.preventDefault();
+ stepSlides(-1);
+ }
+ },
+ [stepSlides],
+ );
+
+ return (
+
+
+ {videos.map((video, index) => (
+
{ slideRefs.current[index] = el; }}
+ data-index={index}
+ className="h-full w-full"
+ >
+ stepSlides(-1)}
+ onTapNext={() => stepSlides(1)}
+ />
+
+ ))}
+
+
+ {/* Divine wordmark watermark, top-left, in white like the in-app overlay.
+ The source SVG is the brand-green wordmark; `brightness-0 invert`
+ recolors it to solid white without needing a separate asset.
+ Pointer-events-none so it never intercepts a tap; drop shadow keeps it
+ legible over a light video frame. */}
+
+
+ {/* Progress dots — which video of how many. Non-interactive. */}
+
+ {videos.map((_, index) => (
+
+ ))}
+
+
+
+
+ {/* Invisible tap zones: top half → previous, bottom half → next, like the
+ app. These sit above the video but BELOW the caption and share button
+ (which have higher z-index), so those stay tappable. A tap fires the
+ click; a drag scrolls the reel, so swiping still works. Arrow keys on
+ the reel cover keyboard users, so these are hidden from a11y. */}
+
+
+
+ {/* Read-only caption: creator, title, optional description — on a flat
+ translucent panel so it stays legible over any frame. (Brand rules
+ forbid gradient scrims on layout surfaces, so this is a solid blurred
+ block rather than a fade.) No interactive engagement controls. */}
+
+
+
+ {avatar && (
+
+ )}
+
+ {displayName}
+
+
+ {video.title && (
+
+ {video.title}
+
+ )}
+ {description && (
+
+ {description}
+
+ )}
+
+
+
+ {/* Controls, grouped top-right above the tap zones. */}
+
+
+
+
+
Promise },
- coordinates: string[],
- signal: AbortSignal
-): Promise {
- if (coordinates.length === 0) return [];
-
- // Parse coordinates to extract pubkeys and d-tags
- const filters: NostrFilter[] = [];
- const coordinateMap = new Map();
-
- coordinates.forEach(coord => {
- const [kind, pubkey, dTag] = coord.split(':');
- const kindNum = parseInt(kind, 10);
- if (VIDEO_KINDS.includes(kindNum) && pubkey && dTag) {
- coordinateMap.set(`${pubkey}:${dTag}`, { pubkey, dTag });
- }
- });
-
- // Group by pubkey for efficient querying
- const pubkeyGroups = new Map();
- coordinateMap.forEach(({ pubkey, dTag }) => {
- if (!pubkeyGroups.has(pubkey)) {
- pubkeyGroups.set(pubkey, []);
- }
- pubkeyGroups.get(pubkey)!.push(dTag);
- });
-
- // Create filters for each pubkey group
- pubkeyGroups.forEach((dTags, pubkey) => {
- filters.push({
- kinds: VIDEO_KINDS,
- authors: [pubkey],
- '#d': dTags,
- limit: dTags.length
- });
- });
-
- if (filters.length === 0) return [];
-
- const events = await nostr.query(filters, { signal });
-
- // Parse and order videos according to list order
- const videoMap = new Map();
-
- events.forEach(event => {
- const vineId = getVineId(event);
- if (!vineId) return;
-
- const videoEvent = parseVideoEvent(event);
- if (!videoEvent?.videoMetadata?.url) return;
-
- const key = `${event.pubkey}:${vineId}`;
- videoMap.set(key, {
- id: event.id,
- pubkey: event.pubkey,
- kind: SHORT_VIDEO_KIND,
- createdAt: event.created_at,
- originalVineTimestamp: getOriginalVineTimestamp(event),
- content: event.content,
- videoUrl: videoEvent.videoMetadata.url,
- fallbackVideoUrls: videoEvent.videoMetadata?.fallbackUrls,
- hlsUrl: videoEvent.videoMetadata?.hlsUrl,
- thumbnailUrl: getThumbnailUrl(videoEvent),
- title: videoEvent.title,
- duration: videoEvent.videoMetadata?.duration,
- hashtags: videoEvent.hashtags || [],
- vineId,
- loopCount: getLoopCount(event),
- likeCount: getOriginalLikeCount(event),
- repostCount: getOriginalRepostCount(event),
- commentCount: getOriginalCommentCount(event),
- proofMode: getProofModeData(event),
- origin: getOriginPlatform(event),
- isVineMigrated: isVineMigrated(event),
- reposts: [] // List videos don't include repost data
- });
- });
-
- // Return videos in the order they appear in the list
- const orderedVideos: ParsedVideoData[] = [];
- coordinates.forEach(coord => {
- const [_, pubkey, dTag] = coord.split(':');
- const key = `${pubkey}:${dTag}`;
- const video = videoMap.get(key);
- if (video) {
- orderedVideos.push(video);
- }
- });
-
- return orderedVideos;
-}
-
const PlayOrderIcon = ({ order }: { order?: PlayOrder }) => {
switch (order) {
case 'shuffle':
@@ -262,7 +167,7 @@ export default function ListDetailPage() {
// Fetch videos in the list
const { data: videos, isLoading: videosLoading } = useQuery({
- queryKey: ['list-videos', pubkey, listId, list?.videoCoordinates],
+ queryKey: ['list-videos', pubkey, listId, list?.videoCoordinates, list?.videoEventIds],
queryFn: async (context) => {
if (!list) return [];
@@ -271,7 +176,7 @@ export default function ListDetailPage() {
AbortSignal.timeout(10000)
]);
- return fetchListVideos(nostr, list.videoCoordinates, signal);
+ return fetchListVideos(nostr, [...list.videoCoordinates, ...list.videoEventIds], signal);
},
enabled: !!list
});
diff --git a/src/pages/OpenSourcePage.tsx b/src/pages/OpenSourcePage.tsx
index f693054a..b071f6e7 100644
--- a/src/pages/OpenSourcePage.tsx
+++ b/src/pages/OpenSourcePage.tsx
@@ -8,6 +8,7 @@ import { Badge } from '@/components/ui/badge';
import { GithubLogo as Github, Globe, DeviceMobile as Smartphone, Code as Code2, Users, Heart } from '@phosphor-icons/react';
import { ZendeskWidget } from '@/components/ZendeskWidget';
import { MarketingLayout } from '@/components/MarketingLayout';
+import { isShowcaseMode } from '@/config/webMode';
import { useTranslation } from 'react-i18next';
export function OpenSourcePage() {
@@ -46,7 +47,14 @@ export function OpenSourcePage() {
- Web: You're already here! Start exploring
+ Web:{' '}
+ {isShowcaseMode() ? (
+ Documents and a curated preview—the full app lives on mobile
+ ) : (
+ <>
+ You're already here! Start exploring
+
+ )}
diff --git a/src/pages/ShowcasePage.tsx b/src/pages/ShowcasePage.tsx
new file mode 100644
index 00000000..ab6b21b0
--- /dev/null
+++ b/src/pages/ShowcasePage.tsx
@@ -0,0 +1,91 @@
+// ABOUTME: Public homepage in showcase mode — what Divine is, where to get it, a curated taste
+// ABOUTME: No login, no open feeds; every content route it links to is a document
+
+import { useHead, useSeoMeta } from "@unhead/react";
+
+import { MarketingLayout } from "@/components/MarketingLayout";
+import { SectionHeader } from "@/components/brand/SectionHeader";
+import { GetAppButton } from "@/components/GetAppButton";
+import { ShowcasePhone } from "@/components/showcase/ShowcasePhone";
+import { FamilyWelcomeSection } from "@/components/showcase/FamilyWelcomeSection";
+import { useCuratedShowcase } from "@/hooks/useCuratedShowcase";
+
+export default function ShowcasePage() {
+ const { videos, isLoading, isUnconfigured } = useCuratedShowcase();
+ const isEmpty = !isLoading && videos.length === 0;
+
+ useSeoMeta({
+ title: "Divine — short video on an open protocol",
+ description:
+ "Six-second loops, no algorithm feeding you slop. Get Divine on iOS, Android, Zapstore, or build it yourself.",
+ });
+
+ useHead({
+ link: [{ rel: "canonical", href: "https://divine.video/" }],
+ });
+
+ return (
+
+ );
+}
diff --git a/src/pages/ShowcaseVideoPage.tsx b/src/pages/ShowcaseVideoPage.tsx
new file mode 100644
index 00000000..94af1f1a
--- /dev/null
+++ b/src/pages/ShowcaseVideoPage.tsx
@@ -0,0 +1,131 @@
+// ABOUTME: Public single-video landing in showcase mode — the target of shared links
+// ABOUTME: One video in a phone frame, download CTAs, safety-gated; no app shell, no login
+
+import { useEffect, useRef, useState } from 'react';
+import { useParams, Link } from 'react-router-dom';
+import { useSeoMeta } from '@unhead/react';
+import { ShareNetwork } from '@phosphor-icons/react';
+
+import { MarketingLayout } from '@/components/MarketingLayout';
+import { Skeleton } from '@/components/ui/skeleton';
+import { DownloadRow } from '@/components/DownloadRow';
+import { PhoneFrame } from '@/components/showcase/PhoneFrame';
+import { useShowcaseVideo } from '@/hooks/useShowcaseVideo';
+import { useAuthor } from '@/hooks/useAuthor';
+import { useShowcaseShare } from '@/hooks/useShowcaseShare';
+import { getVideoShareData } from '@/lib/shareUtils';
+import { resolveDisplayName } from '@/lib/showcaseDisplayName';
+import { getSafeProfileImage } from '@/lib/imageUtils';
+import { parseAspectRatio, pickObjectFit } from '@/lib/showcaseVideoFit';
+
+export default function ShowcaseVideoPage() {
+ const { id } = useParams<{ id: string }>();
+ const { data: video, isLoading } = useShowcaseVideo(id);
+ const author = useAuthor(video?.pubkey);
+ const share = useShowcaseShare();
+ const videoRef = useRef
+
+ ))}
+