hanzo.ai/app/(marketing)/dataroom/dataroom-client.tsx

'use client'

import { BarChart3, Book, Building2, Code, ExternalLink, Eye, Fingerprint, FolderLock, Globe, Mail, Paintbrush, Shield, Users, Webhook } from "lucide-react"
import { Github } from "@/components/brand"
import Pricing from "@/components/dataroom/Pricing"
import { Cards } from "@/components/product/ProductLanding"
import { Text } from "@hanzo/ui"
import { useI18n } from "@hanzo/i18n/react"
import { Aside, LINK } from "@/components/products/Aside"
import { Lede } from "@/components/products/Lede"
import { phrase } from "@hanzo/i18n"
import { Steps } from "@/components/preview/steps"
import { ProductFooter } from "@/components/products/ProductFooter"
import { Start } from "@/components/products/Start"

const DOCS = "https://docs.hanzo.ai/docs/cli/dataroom"
const REPO = "https://github.com/hanzoai/dataroom"

/** A link, shared, one step at a time, walked beside the heading: the page's own words. */
const LINK_LIFE = [
  { title: phrase('Add the documents'), body: phrase('A folder tree rather than a single file, shared as one link.') },
  { title: phrase('Set who may open it'), body: phrase('A password, a verified email, an NDA to accept, an expiry date, downloads off. Set them per link.') },
  { title: phrase('Send the link'), body: phrase('You send a link instead of an attachment, and the link keeps working for you after it leaves.') },
  { title: phrase('See what they read'), body: phrase('Time spent on each page, how far they got, and whether they came back.') },
  { title: phrase('Change your mind'), body: phrase('Access can change after the link has gone, which an emailed PDF never allowed.') },
]

export default function DataroomClient() {
  const { t } = useI18n()
  return (
    <>
      <Lede
        preview={<Steps title={phrase('A link, shared')} icon={<FolderLock size={12} color="currentColor" />} steps={LINK_LIFE} />}
        badge={t("Secure Document Sharing")}
        badgeIcon={FolderLock}
        title="Hanzo Dataroom"
        actions={[
          { label: t('Try Hanzo'), href: '/login', icon: ExternalLink },
          { label: t('Documentation'), href: DOCS },
        ]}
      >
        {t('You send a link instead of an attachment, and the link keeps working for you after it leaves.')}
      </Lede>

      <Cards
        grid={{
          title: t('A link you still control'),
          sub: t('Every setting here is per link, so one document can be shared ten different ways.'),
          items: [
            { icon: BarChart3, title: t('Page-by-page analytics'), body: t('Time spent on each page, how far they got, and whether they came back. Which page an investor re-read twice tells you what the next call is about.') },
            { icon: FolderLock, title: t('Data rooms'), body: t('A folder tree rather than a single file, shared as one link. Diligence is forty documents and a hundred questions, and both sides need to know what is in scope.') },
            { icon: Shield, title: t('Access controls'), body: t('A password, a verified email, an NDA to accept, an expiry date, downloads off. Set them per link, so the same document can be open to one person and shut to another.') },
            { icon: Paintbrush, title: t('Custom Branding'), body: t('White-label with your logo, colors, and custom domain. Present a professional experience to investors.') },
            { icon: Eye, title: t('Watermarking'), body: t("The viewer's own email printed across every page. It does not make a screenshot impossible; it makes an anonymous one impossible, which is the part that changes behaviour.") },
            { icon: Mail, title: t('Email verification'), body: t('A code to the address before the document opens. Otherwise a forwarded link is a stranger, and your analytics are counting the wrong person.') },
            { icon: Globe, title: t('Custom Domains'), body: t('Use your own domain for sharing links. Build trust with a branded URL.') },
            { icon: Webhook, title: t('Webhooks'), body: t('A view fires an event. Knowing someone opened the deck while you are still in the thread is worth more than knowing it on Monday.') },
            { icon: Users, title: t('Team Management'), body: t('Multi-tenant workspaces with role-based access. Manage sharing across your organization.') },
            { icon: Fingerprint, title: t('SSO Authentication'), body: t('Passkeys, Google, LinkedIn, SAML SSO, and Hanzo IAM single sign-on.') },
          ],
        }}
      />

      <Pricing />

      <Aside
        title={t("Built on Open Source")}
        links={[
          { label: 'hanzoai/dataroom', href: REPO, icon: Github },
          { label: t('Upstream: {repo}', { repo: 'mfts/papermark' }), href: 'https://github.com/mfts/papermark', icon: ExternalLink },
        ]}
      >
        {t('Hanzo Dataroom is built on {papermark}, the open-source DocSend alternative. We contribute back to the community and extend it with Hanzo IAM integration, multi-tenant workspaces, and enterprise features.', {
          papermark: (
            <Text render="a" {...{ href: 'https://www.papermark.io', target: '_blank', rel: 'noopener noreferrer' }} color={LINK.color}>
              Papermark
            </Text>
          ),
        })}
      </Aside>

      <Cards
        grid={{
          title: t('Upload one document and send the link'),
          sub: t('You will know whether it was read before you have to ask.'),
          items: [
            { icon: FolderLock, title: t('Start Sharing'), body: t('Share documents with real-time analytics'), link: { label: t('Try Hanzo'), href: '/login' } },
            { icon: Book, title: t('Documentation'), body: t('Explore our guides and API references'), link: { label: t('View Docs'), href: DOCS } },
            { icon: Code, title: t('For Developers'), body: t('Integrate document sharing into your apps'), link: { label: t('View on GitHub'), href: REPO } },
          ],
        }}
      />

      <Aside title={t("Need a Custom Solution?")} links={[{ label: t('Contact Sales'), href: '/contact-sales', icon: Building2 }]}>
        {t('Our team can help you design a tailored data room setup for your fundraising or due diligence needs.')}
      </Aside>

      <Start title={t("Get started with Dataroom")} docs={DOCS} repo={REPO} />
      <ProductFooter slug="dataroom" name="Dataroom" />
    </>
  )
}