@eventcatalog/core 5.0.0-beta.9 → 5.0.0

package/eventcatalog/src/components/Settings/GeneralSettingsForm.tsx

@@ -179,193 +179,198 @@ export const GeneralSettingsForm = ({ canEdit, initial, apiBase }: Props) => {
   };
 
   return (
-    <form onSubmit={(e) => e.preventDefault()} className="divide-y divide-[rgb(var(--ec-page-border))]">
+    <>
       <Toaster richColors closeButton position="bottom-right" theme="system" />
-      {!canEdit && (
-        <div className="pb-6">
-          <ReadOnlyBanner />
-        </div>
-      )}
-
-      <Row
-        title="Theme"
-        description="Pick a built-in colour theme. Selection updates the preview live; click Save to persist."
-        canEdit={canEdit}
-        dirty={dirtyKeys.has('theme')}
-        saving={savingKey === 'theme'}
-        onSave={() => saveRow('theme')}
-        error={errors.theme}
+      <form
+        onSubmit={(e) => e.preventDefault()}
+        className="divide-y divide-[rgb(var(--ec-page-border))] border-t border-[rgb(var(--ec-page-border))]"
       >
-        <div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
-          {themeOptions(form.theme).map((t) => {
-            const preview = THEME_PREVIEWS[t] ?? { accent: '#888', bg: '#1a1a1a', label: t };
-            const isActive = form.theme === t;
-            const isCustom = !isKnownTheme(t);
-            return (
-              <button
-                type="button"
-                key={t}
-                onClick={() => setField('theme', t)}
-                disabled={!canEdit}
-                aria-pressed={isActive}
-                className={cn(
-                  'group relative flex flex-col overflow-hidden rounded-lg border text-left transition-all',
-                  'disabled:cursor-not-allowed disabled:opacity-50',
-                  isActive
-                    ? 'border-[rgb(var(--ec-accent))] ring-2 ring-[rgb(var(--ec-accent)/0.25)]'
-                    : 'border-[rgb(var(--ec-page-border))] hover:border-[rgb(var(--ec-page-text-muted)/0.6)]'
-                )}
-              >
-                <div className="relative h-14 w-full overflow-hidden" style={{ background: preview.bg }}>
-                  <div
-                    className="absolute -bottom-2 -right-2 h-12 w-12 rounded-full opacity-90 blur-md"
-                    style={{ background: preview.accent }}
-                    aria-hidden
-                  />
-                  <div
-                    className="absolute left-3 top-3 h-1.5 w-10 rounded-full opacity-90"
-                    style={{ background: preview.accent }}
-                    aria-hidden
-                  />
-                  <div
-                    className="absolute left-3 top-6 h-1 w-7 rounded-full opacity-60"
-                    style={{ background: 'rgba(255,255,255,0.4)' }}
-                    aria-hidden
-                  />
-                  {isActive && (
-                    <span className="absolute right-1.5 top-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-white text-black shadow-sm">
-                      <Check className="h-2.5 w-2.5" aria-hidden />
-                    </span>
-                  )}
-                </div>
-                <div className="flex items-center justify-between gap-2 px-3 py-2">
-                  <span className="text-[12px] font-medium capitalize text-[rgb(var(--ec-page-text))]">{preview.label}</span>
-                  {isCustom && (
-                    <span className="rounded-full border border-[rgb(var(--ec-page-border))] px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-[rgb(var(--ec-page-text-muted))]">
-                      custom
-                    </span>
+        {!canEdit && (
+          <div className="pb-6">
+            <ReadOnlyBanner />
+          </div>
+        )}
+
+        <Row
+          title="Theme"
+          description="Pick a built-in colour theme. Selection updates the preview live; click Save to persist."
+          canEdit={canEdit}
+          dirty={dirtyKeys.has('theme')}
+          saving={savingKey === 'theme'}
+          onSave={() => saveRow('theme')}
+          error={errors.theme}
+        >
+          <div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
+            {themeOptions(form.theme).map((t) => {
+              const preview = THEME_PREVIEWS[t] ?? { accent: '#888', bg: '#1a1a1a', label: t };
+              const isActive = form.theme === t;
+              const isCustom = !isKnownTheme(t);
+              return (
+                <button
+                  type="button"
+                  key={t}
+                  onClick={() => setField('theme', t)}
+                  disabled={!canEdit}
+                  aria-pressed={isActive}
+                  className={cn(
+                    'group relative flex flex-col overflow-hidden rounded-lg border text-left transition-all',
+                    'disabled:cursor-not-allowed disabled:opacity-50',
+                    isActive
+                      ? 'border-[rgb(var(--ec-page-text))] ring-2 ring-[rgb(var(--ec-page-text)/0.15)]'
+                      : 'border-[rgb(var(--ec-page-border))] hover:border-[rgb(var(--ec-page-text-muted)/0.6)]'
                   )}
-                </div>
-              </button>
-            );
-          })}
-        </div>
-      </Row>
+                >
+                  <div className="relative h-14 w-full overflow-hidden" style={{ background: preview.bg }}>
+                    <div
+                      className="absolute -bottom-2 -right-2 h-12 w-12 rounded-full opacity-90 blur-md"
+                      style={{ background: preview.accent }}
+                      aria-hidden
+                    />
+                    <div
+                      className="absolute left-3 top-3 h-1.5 w-10 rounded-full opacity-90"
+                      style={{ background: preview.accent }}
+                      aria-hidden
+                    />
+                    <div
+                      className="absolute left-3 top-6 h-1 w-7 rounded-full opacity-60"
+                      style={{ background: 'rgba(255,255,255,0.4)' }}
+                      aria-hidden
+                    />
+                    {isActive && (
+                      <span className="absolute right-1.5 top-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-white text-black shadow-sm">
+                        <Check className="h-2.5 w-2.5" aria-hidden />
+                      </span>
+                    )}
+                  </div>
+                  <div className="flex items-center justify-between gap-2 px-3 py-2">
+                    <span className="text-[12px] font-medium capitalize text-[rgb(var(--ec-page-text))]">{preview.label}</span>
+                    {isCustom && (
+                      <span className="rounded-full border border-[rgb(var(--ec-page-border))] px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-[rgb(var(--ec-page-text-muted))]">
+                        custom
+                      </span>
+                    )}
+                  </div>
+                </button>
+              );
+            })}
+          </div>
+        </Row>
 
-      <Row
-        title="Organization"
-        description="Used as the catalog name, the brand line next to the logo, and OpenGraph metadata."
-        canEdit={canEdit}
-        dirty={dirtyKeys.has('organization')}
-        saving={savingKey === 'organization'}
-        onSave={() => saveRow('organization')}
-        error={errors.organization}
-      >
-        <input
-          type="text"
-          value={form.organization}
-          onChange={handleChange('organization')}
-          disabled={!canEdit}
-          maxLength={100}
-          placeholder="Acme Inc."
-          className={cn(inputBase, errors.organization && inputError)}
-          required
-        />
-      </Row>
+        <Row
+          title="Organization"
+          description="Used as the catalog name, the brand line next to the logo, and OpenGraph metadata."
+          canEdit={canEdit}
+          dirty={dirtyKeys.has('organization')}
+          saving={savingKey === 'organization'}
+          onSave={() => saveRow('organization')}
+          error={errors.organization}
+        >
+          <input
+            type="text"
+            value={form.organization}
+            onChange={handleChange('organization')}
+            disabled={!canEdit}
+            maxLength={100}
+            placeholder="Acme Inc."
+            className={cn(inputBase, errors.organization && inputError)}
+            required
+          />
+        </Row>
 
-      <Row
-        title="Tagline"
-        description="A short subtitle shown beneath the organization name on the homepage."
-        canEdit={canEdit}
-        dirty={dirtyKeys.has('tagline')}
-        saving={savingKey === 'tagline'}
-        onSave={() => saveRow('tagline')}
-        error={errors.tagline}
-      >
-        <textarea
-          value={form.tagline}
-          onChange={handleChange('tagline')}
-          disabled={!canEdit}
-          maxLength={500}
-          rows={2}
-          placeholder="Discover and explore our events, services, and architecture."
-          className={cn(inputBase, 'resize-y', errors.tagline && inputError)}
-        />
-      </Row>
+        <Row
+          title="Tagline"
+          description="A short subtitle shown beneath the organization name on the homepage."
+          canEdit={canEdit}
+          dirty={dirtyKeys.has('tagline')}
+          saving={savingKey === 'tagline'}
+          onSave={() => saveRow('tagline')}
+          error={errors.tagline}
+        >
+          <textarea
+            value={form.tagline}
+            onChange={handleChange('tagline')}
+            disabled={!canEdit}
+            maxLength={500}
+            rows={2}
+            placeholder="Discover and explore our events, services, and architecture."
+            className={cn(inputBase, 'resize-y', errors.tagline && inputError)}
+          />
+        </Row>
 
-      <Row
-        title="Homepage link"
-        description="Where the logo links to. Useful for pointing back to your main site."
-        canEdit={canEdit}
-        dirty={dirtyKeys.has('homepageLink')}
-        saving={savingKey === 'homepageLink'}
-        onSave={() => saveRow('homepageLink')}
-        error={errors.homepageLink}
-      >
-        <input
-          type="url"
-          value={form.homepageLink}
-          onChange={handleChange('homepageLink')}
-          onBlur={handleUrlBlur('homepageLink')}
-          disabled={!canEdit}
-          placeholder="https://example.com"
-          className={cn(inputBase, monoInput, errors.homepageLink && inputError)}
-        />
-      </Row>
+        <Row
+          title="Homepage link"
+          description="Where the logo links to. Useful for pointing back to your main site."
+          canEdit={canEdit}
+          dirty={dirtyKeys.has('homepageLink')}
+          saving={savingKey === 'homepageLink'}
+          onSave={() => saveRow('homepageLink')}
+          error={errors.homepageLink}
+        >
+          <input
+            type="url"
+            value={form.homepageLink}
+            onChange={handleChange('homepageLink')}
+            onBlur={handleUrlBlur('homepageLink')}
+            disabled={!canEdit}
+            placeholder="https://example.com"
+            className={cn(inputBase, monoInput, errors.homepageLink && inputError)}
+          />
+        </Row>
 
-      <Row
-        title="Edit URL"
-        description="Base URL for the “Edit on GitHub” links shown on resource pages."
-        canEdit={canEdit}
-        dirty={dirtyKeys.has('editUrl')}
-        saving={savingKey === 'editUrl'}
-        onSave={() => saveRow('editUrl')}
-        error={errors.editUrl}
-      >
-        <input
-          type="url"
-          value={form.editUrl}
-          onChange={handleChange('editUrl')}
-          onBlur={handleUrlBlur('editUrl')}
-          disabled={!canEdit}
-          placeholder="https://github.com/org/repo/edit/main"
-          className={cn(inputBase, monoInput, errors.editUrl && inputError)}
-        />
-      </Row>
+        <Row
+          title="Edit URL"
+          description="Base URL for the “Edit on GitHub” links shown on resource pages."
+          canEdit={canEdit}
+          dirty={dirtyKeys.has('editUrl')}
+          saving={savingKey === 'editUrl'}
+          onSave={() => saveRow('editUrl')}
+          error={errors.editUrl}
+        >
+          <input
+            type="url"
+            value={form.editUrl}
+            onChange={handleChange('editUrl')}
+            onBlur={handleUrlBlur('editUrl')}
+            disabled={!canEdit}
+            placeholder="https://github.com/org/repo/edit/main"
+            className={cn(inputBase, monoInput, errors.editUrl && inputError)}
+          />
+        </Row>
 
-      <Row
-        title="Repository URL"
-        description="Link to your catalog's source repository. Shown in the header for quick navigation back to the code."
-        canEdit={canEdit}
-        dirty={dirtyKeys.has('repositoryUrl')}
-        saving={savingKey === 'repositoryUrl'}
-        onSave={() => saveRow('repositoryUrl')}
-        error={errors.repositoryUrl}
-      >
-        <input
-          type="url"
-          value={form.repositoryUrl}
-          onChange={handleChange('repositoryUrl')}
-          onBlur={handleUrlBlur('repositoryUrl')}
-          disabled={!canEdit}
-          placeholder="https://github.com/org/repo"
-          className={cn(inputBase, monoInput, errors.repositoryUrl && inputError)}
-        />
-      </Row>
+        <Row
+          title="Repository URL"
+          description="Link to your catalog's source repository. Shown in the header for quick navigation back to the code."
+          canEdit={canEdit}
+          dirty={dirtyKeys.has('repositoryUrl')}
+          saving={savingKey === 'repositoryUrl'}
+          onSave={() => saveRow('repositoryUrl')}
+          error={errors.repositoryUrl}
+        >
+          <input
+            type="url"
+            value={form.repositoryUrl}
+            onChange={handleChange('repositoryUrl')}
+            onBlur={handleUrlBlur('repositoryUrl')}
+            disabled={!canEdit}
+            placeholder="https://github.com/org/repo"
+            className={cn(inputBase, monoInput, errors.repositoryUrl && inputError)}
+          />
+        </Row>
 
-      <Row
-        title="Logo"
-        description="Image shown in the top-left corner. PNG, JPG, SVG, or WebP up to 2MB."
-        canEdit={canEdit}
-        // Logo upload saves itself directly; no inline Save button needed.
-        dirty={false}
-      >
-        <LogoUpload
+        <Row
+          title="Logo"
+          description="Image shown in the top-left corner. PNG, JPG, SVG, or WebP up to 2MB."
           canEdit={canEdit}
-          initialSrc={initial.logo?.src ? `${initial.logo.src}?t=${Date.now()}` : undefined}
-          apiUrl={`${apiBase}/logo`}
-        />
-      </Row>
-    </form>
+          // Logo upload saves itself directly; no inline Save button needed.
+          dirty={false}
+        >
+          <LogoUpload
+            canEdit={canEdit}
+            initialSrc={initial.logo?.src ? `${initial.logo.src}?t=${Date.now()}` : undefined}
+            apiUrl={`${apiBase}/logo`}
+          />
+        </Row>
+      </form>
+    </>
   );
 };

package/eventcatalog/src/components/Settings/LicenseSettings.tsx

@@ -1,7 +1,16 @@
 import { useEffect, useState } from 'react';
-import { ArrowUpRight, Clock, TriangleAlert } from 'lucide-react';
+import { ArrowUpRight, Clock, Info, Mail, TriangleAlert } from 'lucide-react';
 import { Row, cn } from './Row';
-import { getTrialStatus, LICENSE_FAQ_URL, LICENSE_REMINDER_DAYS, LICENSE_RENEW_URL, TRIAL_LENGTH_DAYS } from '@utils/trial';
+import {
+  BUY_BUSINESS_URL,
+  getTrialStatus,
+  LICENSE_FAQ_URL,
+  LICENSE_REMINDER_DAYS,
+  LICENSE_RENEW_URL,
+  PRICING_URL,
+  TALK_TO_US_URL,
+  TRIAL_LENGTH_DAYS,
+} from '@utils/trial';
 
 /**
  * The license status (see getLicenseStatus in @utils/license) with dates as unix ms, so it can be
@@ -35,7 +44,8 @@ const PILL_TONES: Record<Tone, string> = {
     'border-[rgb(var(--ec-badge-color-amber-text)/0.3)] bg-[rgb(var(--ec-badge-color-amber-background))] text-[rgb(var(--ec-badge-color-amber-text))]',
   danger:
     'border-[rgb(var(--ec-badge-color-red-text)/0.3)] bg-[rgb(var(--ec-badge-color-red-background))] text-[rgb(var(--ec-badge-color-red-text))]',
-  info: 'border-[rgb(var(--ec-accent)/0.3)] bg-[rgb(var(--ec-accent-subtle))] text-[rgb(var(--ec-accent))]',
+  // Black on light themes, white on dark: the catalog's accent colour reads as a warning
+  info: 'border-transparent bg-[rgb(var(--ec-page-text))] text-[rgb(var(--ec-page-bg))]',
   neutral: 'border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-bg))] text-[rgb(var(--ec-page-text-muted))]',
 };
 
@@ -120,11 +130,21 @@ const LicenseNotice = ({ license, now }: { license: LicenseProps; now: number })
         <p className="text-[13px] font-semibold">
           {expired ? 'Your commercial license has expired' : `Your commercial license expires in ${formatDays(daysLeft!)}`}
         </p>
-        <p className="text-[13px] opacity-90">
-          {expired
-            ? `It expired on ${formatDate(expiresAt)}. Renew it to keep using EventCatalog commercially.`
-            : `It expires on ${formatDate(expiresAt)}. Renew it before then to keep using EventCatalog commercially.`}
-        </p>
+        {expired ? (
+          <>
+            <p className="text-[13px] opacity-90">
+              It expired on {formatDate(expiresAt)}. Organisations that don't qualify for Free Use need a commercial license to
+              use EventCatalog in production.
+            </p>
+            <p className="text-[13px] opacity-90">
+              Your catalog keeps building and running. Renew to stay licensed, or talk to us if anything has changed.
+            </p>
+          </>
+        ) : (
+          <p className="text-[13px] opacity-90">
+            It expires on {formatDate(expiresAt)}. Renew it before then to keep using EventCatalog commercially.
+          </p>
+        )}
         <div className="flex flex-wrap items-center gap-3 pt-2">
           <a
             href={LICENSE_RENEW_URL}
@@ -135,6 +155,14 @@ const LicenseNotice = ({ license, now }: { license: LicenseProps; now: number })
             Renew license
             <ArrowUpRight className="h-3.5 w-3.5" aria-hidden />
           </a>
+          <a
+            href={TALK_TO_US_URL}
+            target="_blank"
+            rel="noreferrer"
+            className="text-[13px] font-medium underline underline-offset-2 hover:opacity-80"
+          >
+            Talk to us
+          </a>
           <a
             href={LICENSE_FAQ_URL}
             target="_blank"
@@ -149,6 +177,55 @@ const LicenseNotice = ({ license, now }: { license: LicenseProps; now: number })
   );
 };
 
+// Where a customer with a legacy key asks for a license.jwt (as the license FAQ does)
+const LICENSE_CONTACT_EMAIL = 'hello@eventcatalog.dev';
+
+/**
+ * A Scale or Starter plan uses a license key from before EventCatalog 5, checked online. It still works, but the
+ * customer should ask us for a license.jwt (checked offline) for their plan.
+ */
+const LegacyKeyNotice = ({ plan }: { plan: 'scale' | 'starter' }) => {
+  const subject = encodeURIComponent(`A license.jwt for our ${PLAN_NAMES[plan]} plan`);
+  return (
+    <div
+      role="note"
+      className="flex gap-3 rounded-lg border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-text)/0.05)] p-4 text-[rgb(var(--ec-page-text))]"
+    >
+      <Info className="mt-0.5 h-4 w-4 shrink-0 text-[rgb(var(--ec-page-text))]" aria-hidden />
+      <div className="space-y-1">
+        <p className="text-[13px] font-semibold">You're using a legacy license key</p>
+        <p className="text-[13px] text-[rgb(var(--ec-page-text-muted))]">
+          Your plan still works. Its key is from before EventCatalog 5.
+        </p>
+        <p className="text-[13px] text-[rgb(var(--ec-page-text-muted))]">
+          Contact us for a new key: a license.jwt file, checked offline.
+        </p>
+        <div className="pt-2">
+          <a
+            href={`mailto:${LICENSE_CONTACT_EMAIL}?subject=${subject}`}
+            className="inline-flex items-center gap-1.5 rounded-md bg-[rgb(var(--ec-page-text))] px-3.5 py-1.5 text-[13px] font-medium text-[rgb(var(--ec-page-bg))] shadow-sm transition-opacity hover:opacity-85"
+          >
+            Contact us for a new key
+            <Mail className="h-3.5 w-3.5" aria-hidden />
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// For organisations that don't need to pay: without it, the trial reads as "EventCatalog is now paid"
+const FreeUseNotice = () => (
+  <p className="text-[13px] leading-relaxed text-[rgb(var(--ec-content-text-muted,var(--ec-page-text-muted)))]">
+    <span className="font-medium text-[rgb(var(--ec-page-text))]">You may qualify for Free Use.</span> Under $10M revenue and $10M
+    raised, an individual or an open-source project? You can use EventCatalog for free.{' '}
+    <a href={LICENSE_RENEW_URL} target="_blank" rel="noreferrer" className="underline underline-offset-2 hover:opacity-80">
+      Get a free key at eventcatalog.cloud
+    </a>
+    .
+  </p>
+);
+
 const LicenseTable = ({ license, now }: { license: LicenseProps; now: number }) => {
   if (license.state === 'plan') {
     return (
@@ -243,46 +320,78 @@ interface Props {
   trialStartedAt?: number;
   /** When the page was rendered, unix ms: the first render matches the server's, then it counts from now */
   renderedAt: number;
+  /** EventCatalog's license (the Business Source License) on GitHub */
+  licenseUrl: string;
 }
 
-export const LicenseSettings = ({ license, trialStartedAt, renderedAt }: Props) => {
+export const LicenseSettings = ({ license, trialStartedAt, renderedAt, licenseUrl }: Props) => {
   const [now, setNow] = useState(renderedAt);
   useEffect(() => setNow(Date.now()), []);
+  // A catalog is on the trial or has a license: an expired license is shown (to renew), not the trial. As in the header.
+  const onTrial = license.state === 'none' || license.state === 'invalid';
+  // While the trial runs, buying starts from pricing; once it has ended, from the Business order form
+  const trialEnded = onTrial && getTrialStatus(trialStartedAt, now)?.ended;
 
   return (
-    <div className="divide-y divide-[rgb(var(--ec-page-border))]">
+    // A top border, as on the other settings pages
+    <div className="divide-y divide-[rgb(var(--ec-page-border))] border-t border-[rgb(var(--ec-page-border))]">
       <Row
         title="License"
-        description="EventCatalog is licensed under the Business Source License 1.1. Your license is read from the license.jwt file in the root of your catalog."
+        description={
+          <>
+            EventCatalog is licensed under the{' '}
+            <a href={licenseUrl} target="_blank" rel="noreferrer" className="underline underline-offset-2 hover:opacity-80">
+              Business Source License 1.1
+            </a>
+            . Your license is read from the license.jwt file in the root of your catalog. The{' '}
+            <a href={LICENSE_FAQ_URL} target="_blank" rel="noreferrer" className="underline underline-offset-2 hover:opacity-80">
+              license FAQ
+            </a>{' '}
+            explains who can use EventCatalog for free.
+          </>
+        }
+        aside={
+          (onTrial || license.state === 'expired') && (
+            <div className="space-y-3">
+              <FreeUseNotice />
+              <p className="text-[13px] leading-relaxed text-[rgb(var(--ec-content-text-muted,var(--ec-page-text-muted)))]">
+                Questions about licensing, or need something different? Get in touch and let us know how we can help.
+              </p>
+            </div>
+          )
+        }
         canEdit={false}
         dirty={false}
       >
         <div className="space-y-4">
           <LicenseTable license={license} now={now} />
           <LicenseNotice license={license} now={now} />
-          {/* The trial applies until there's a valid license or plan */}
-          {license.state !== 'plan' && (license.state !== 'licensed' || isExpired(license, now)) && (
-            <TrialTable trialStartedAt={trialStartedAt} now={now} />
+          {license.state === 'plan' && <LegacyKeyNotice plan={license.plan} />}
+          {onTrial && <TrialTable trialStartedAt={trialStartedAt} now={now} />}
+          {onTrial && (
+            <div className="flex flex-wrap gap-3">
+              <a
+                href={trialEnded ? BUY_BUSINESS_URL : PRICING_URL}
+                target="_blank"
+                rel="noreferrer"
+                className="inline-flex items-center gap-1.5 rounded-md bg-[rgb(var(--ec-page-text))] px-4 py-2 text-[13px] font-medium text-[rgb(var(--ec-page-bg))] shadow-sm transition-opacity hover:opacity-85"
+              >
+                {trialEnded ? 'Buy Business' : 'Buy a license'}
+                <ArrowUpRight className="h-3.5 w-3.5" aria-hidden />
+              </a>
+              <a
+                href={TALK_TO_US_URL}
+                target="_blank"
+                rel="noreferrer"
+                className="inline-flex items-center gap-1.5 rounded-md border border-[rgb(var(--ec-page-border))] px-4 py-2 text-[13px] font-medium text-[rgb(var(--ec-page-text))] transition-opacity hover:opacity-80"
+              >
+                Talk to us
+                <ArrowUpRight className="h-3.5 w-3.5" aria-hidden />
+              </a>
+            </div>
           )}
         </div>
       </Row>
-
-      <Row
-        title="Learn more"
-        description="Who can use EventCatalog for free, and when you need a commercial license."
-        canEdit={false}
-        dirty={false}
-      >
-        <a
-          href={LICENSE_FAQ_URL}
-          target="_blank"
-          rel="noreferrer"
-          className="inline-flex items-center gap-1.5 rounded-md bg-[rgb(var(--ec-page-text))] px-4 py-2 text-[13px] font-medium text-[rgb(var(--ec-page-bg))] shadow-sm transition-opacity hover:opacity-85"
-        >
-          Read the license FAQ
-          <ArrowUpRight className="h-3.5 w-3.5" aria-hidden />
-        </a>
-      </Row>
     </div>
   );
 };