_index.tsx

import type { MetaFunction } from 'react-router'
import SVGBanner from '~/assets/images/landing/illustration_banner.svg?url'
import SVGButton from '~/assets/images/landing/illustration_button.svg?url'
import SVGLinkGenerator from '~/assets/images/landing/illustration_link_generator.svg?url'
import SVGRevShareGenerator from '~/assets/images/landing/illustration_rev_share.svg?url'
import SVGWidget from '~/assets/images/landing/illustration_widget.svg?url'
import SVGHeadingVector from '~/assets/images/landing/tools-heading-vector.svg?url'
import { ToolCard } from '~/components/redesign/components/landing/ToolCard'
import { Heading1, Heading3 } from '~/components/redesign/Typography'

const DEFAULT_TITLE = 'Publisher Tools'
const DEFAULT_DESCRIPTION = 'Choose and customize your tools!'
const DEFAULT_IMAGE_URL = 'https://webmonetization.org/img/wm-social.png'
const DEFAULT_URL = 'https://webmonetization.org/tools'
const SITE_NAME = 'Web Monetization'

const setupTools = [
  {
    title: 'Link tag generator',
    description:
      'Generate the <link rel="monetization"> tag required to enable Web Monetization on your web pages.',
    tags: [
      'Web Monetization',
      'Easy integration',
      'Easy setup',
      'HTML tag',
      'No code',
    ],
    icon: SVGLinkGenerator,
    link: '/link-tag/',
  },
  {
    title: 'Probabilistic revenue share',
    description:
      'Split Web Monetization revenue across multiple payment pointers/wallets using probabilistic algorithms',
    tags: [
      'Web Monetization',
      'Shared revenue',
      'Automatic split',
      'Fair payout',
    ],
    icon: SVGRevShareGenerator,
    link: '/prob-revshare/',
  },
]

const interactionTools = [
  {
    title: 'Banner',
    description: (
      <>
        Show a customizable banner to introduce Web Monetization.
        <br />
        The banner disappears when dismissed or the extension is installed.
      </>
    ),
    tags: [
      'Web Monetization',
      'Visibility boost',
      'Audience education',
      'Engagement',
    ],
    icon: SVGBanner,
    link: '/banner',
  },
  {
    title: 'Widget',
    description: (
      <>
        A floating icon that lets visitors support you with one-time payments.
        <br />
        No extension needed, simple and flexible.
      </>
    ),
    tags: [
      'Web Monetization',
      'One time support',
      'Pay with Interledger',
      'Engagement',
    ],
    icon: SVGWidget,
    link: '/widget',
  },
  {
    title: 'Call-to-Action button',
    description: (
      <>
        The most classic, yet one of the most effective methods in order to link
        to your supporters.
        <br />
        Ladies and gents, the button!
      </>
    ),
    tags: ['flawless', 'dynamic', 'high click rate', 'button'],
    icon: SVGButton,
    link: '/button',
    disabled: true,
  },
].filter((e) => !e.disabled)

export const meta: MetaFunction = () => {
  const title = DEFAULT_TITLE
  const description = DEFAULT_DESCRIPTION
  const imageUrl = DEFAULT_IMAGE_URL
  const pageUrl = DEFAULT_URL

  return [
    { title },
    { name: 'description', content: description },
    { property: 'og:title', content: title },
    { property: 'og:description', content: description },
    { property: 'og:image', content: imageUrl },
    { property: 'og:url', content: pageUrl },
    { property: 'og:type', content: 'website' },
    { property: 'og:site_name', content: SITE_NAME },
    { tagName: 'link', rel: 'canonical', href: pageUrl },
  ]
}

export default function Index() {
  return (
    <div className="bg-interface-bg-main min-h-screen flex flex-col gap-2xl items-center pt-5xl pb-xl px-0">
      <div className="flex flex-col gap-2xl items-center justify-start px-md py-0 w-full max-w-[1280px]">
        <div className="flex flex-col gap-xs items-center justify-start p-0 w-full">
          <Heading1 className="!leading-normal !text-[42px] max-xl:!text-style-h2-semibold text-center">
            {DEFAULT_TITLE}
          </Heading1>
          <img
            alt=""
            className="block max-w-none h-[23px] w-[442px] max-xl:h-[13px] max-xl:w-[247px]"
            src={SVGHeadingVector}
          />
        </div>

        <p className="text-style-h5 !text-landing-content text-center w-full max-xl:!text-style-body-standard">
          Use our suite of tools to set up and promote Web Monetization.
          <br />
          Encourage your visitors to support your content and website.
        </p>
      </div>

      <div
        id="content"
        className="flex flex-col gap-2.5 items-center justify-start p-0 w-full"
      >
        <section
          className="max-w-[1280px] w-full flex flex-col gap-md items-center justify-start px-md py-0"
          aria-labelledby="heading-setup-tools"
        >
          <Heading3
            className="w-full max-xl:text-center"
            id="heading-setup-tools"
          >
            Setup tools
          </Heading3>

          <p className="text-style-h5 !text-landing-content text-center w-full max-xl:!text-style-small-standard max-xl:text-center xl:text-left">
            Get started quickly with tools designed to help you set up Web
            Monetization on your website
          </p>

          <ul
            className="grid gap-lg w-full justify-items-center"
            style={{
              gridTemplateColumns: 'repeat(auto-fit, minmax(19rem, 1fr))',
            }}
          >
            {setupTools.map((tool, index) => (
              <li key={index}>
                <ToolCard
                  title={tool.title}
                  tags={tool.tags}
                  icon={tool.icon}
                  to={tool.link || ''}
                  target={tool.link ? undefined : '_blank'}
                >
                  {tool.description}
                </ToolCard>
              </li>
            ))}
            <div className="w-[340px] opacity-0 max-xl:hidden" />
          </ul>
        </section>

        <section
          className="max-w-[1280px] w-full flex flex-col gap-md items-center justify-start px-md py-0"
          aria-labelledby="heading-interaction-tools"
        >
          <Heading3
            className="w-full max-xl:text-center"
            id="heading-interaction-tools"
          >
            Interaction tools
          </Heading3>

          <p className="text-style-h5 !text-landing-content text-center w-full max-xl:!text-style-small-standard max-xl:text-center xl:text-left">
            Add lightweight and embeddable tools, like banners and widgets, to
            your site with simple scripts.
            <br />
            They&apos;re easily customizable, helping you connect with your
            audience to encourage Web Monetization support.
          </p>

          <ul
            className="grid gap-lg w-full justify-items-center"
            style={{
              gridTemplateColumns: 'repeat(auto-fit, minmax(19rem, 1fr))',
            }}
          >
            {interactionTools.map((tool, index) => (
              <li key={index}>
                <ToolCard
                  title={tool.title}
                  tags={tool.tags}
                  icon={tool.icon}
                  to={tool.link}
                >
                  {tool.description}
                </ToolCard>
              </li>
            ))}
            <div className="w-[340px] opacity-0 max-xl:hidden" />
          </ul>
        </section>
      </div>
    </div>
  )
}