From 20a28a15330e5f9eb73ab36d4df04fe4425fcc1d Mon Sep 17 00:00:00 2001
From: Matthieu Napoli <matthieu@mnapoli.fr>
Date: Sat, 6 Jan 2024 18:04:00 +0100
Subject: [PATCH] Website: sentry checkout

---
 package.json                                  |   3 +
 .../src/components/sentry/SentryCheckout.jsx  | 123 +++++
 website/src/pages/sentry.mdx                  | 462 +++++++++---------
 website/src/pages/sentry/docs.mdx             |   2 +
 4 files changed, 372 insertions(+), 218 deletions(-)
 create mode 100644 website/src/components/sentry/SentryCheckout.jsx

diff --git a/package.json b/package.json
index 4c9aea7fd..9fdfdf030 100644
--- a/package.json
+++ b/package.json
@@ -14,5 +14,8 @@
         "eslint-config-prettier": "^8.8.0",
         "eslint-plugin-import": "^2.27.5",
         "prettier": "^2.8.8"
+    },
+    "dependencies": {
+        "@headlessui/react": "^1.7.17"
     }
 }
diff --git a/website/src/components/sentry/SentryCheckout.jsx b/website/src/components/sentry/SentryCheckout.jsx
new file mode 100644
index 000000000..d6b336b85
--- /dev/null
+++ b/website/src/components/sentry/SentryCheckout.jsx
@@ -0,0 +1,123 @@
+import { Fragment, useRef, useState } from 'react'
+import { Dialog, Switch, Transition } from '@headlessui/react';
+import { ArrowPathIcon } from '@heroicons/react/24/outline'
+
+function classNames(...classes) {
+    return classes.filter(Boolean).join(' ')
+}
+
+export default function SentryCheckout({ open, setOpen, price, linkSingle, linkSubscription }) {
+    const [renewalEnabled, setRenewalEnabled] = useState(false);
+    const cancelButtonRef = useRef(null);
+
+    return (
+        <Transition.Root show={open} as={Fragment}>
+            <Dialog as="div" className="relative z-10" initialFocus={cancelButtonRef} onClose={setOpen}>
+                <Transition.Child
+                    as={Fragment}
+                    enter="ease-out duration-300"
+                    enterFrom="opacity-0"
+                    enterTo="opacity-100"
+                    leave="ease-in duration-200"
+                    leaveFrom="opacity-100"
+                    leaveTo="opacity-0"
+                >
+                    <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+                </Transition.Child>
+
+                <div className="fixed inset-0 z-10 w-screen overflow-y-auto">
+                    <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+                        <Transition.Child
+                            as={Fragment}
+                            enter="ease-out duration-300"
+                            enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                            enterTo="opacity-100 translate-y-0 sm:scale-100"
+                            leave="ease-in duration-200"
+                            leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+                            leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                        >
+                            <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-xl">
+                                <div className="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
+                                    <div className="sm:flex sm:items-start">
+                                        <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
+                                            <ArrowPathIcon className="h-6 w-6 text-blue-600" aria-hidden="true" />
+                                        </div>
+                                        <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
+                                            <Dialog.Title as="h3" className="text-base font-semibold leading-6 text-gray-900">
+                                                Enable yearly license renewal?
+                                            </Dialog.Title>
+                                            <div className="mt-2">
+                                                <div className="text-sm text-gray-500">
+                                                    Do you want to enable automatic license renewal every year? You can
+                                                    cancel it anytime.
+                                                </div>
+                                                <div className="mt-2 text-sm text-gray-500">
+                                                    Without license renewal, you will stop receiving updates after 1
+                                                    year.
+                                                </div>
+                                            </div>
+                                            <Switch.Group as="div" className="mt-5 flex items-center">
+                                                <Switch
+                                                    checked={renewalEnabled}
+                                                    onChange={setRenewalEnabled}
+                                                    className={classNames(
+                                                        renewalEnabled ? '!bg-blue-500' : '!bg-gray-200',
+                                                        'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2'
+                                                    )}
+                                                >
+                                                    <span
+                                                        aria-hidden="true"
+                                                        className={classNames(
+                                                            renewalEnabled ? 'translate-x-5' : 'translate-x-0',
+                                                            'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out'
+                                                        )}
+                                                    />
+                                                </Switch>
+                                                <Switch.Label as="span" className="ml-3 text-sm">
+                                                    <span className="font-medium text-gray-900">Automatic license renewal</span>{' '}
+                                                    <span className="text-gray-500">(every year)</span>
+                                                </Switch.Label>
+                                            </Switch.Group>
+                                            {renewalEnabled ? (
+                                                <div className="mt-5 text-sm text-gray-500">
+                                                    {price}€ per year, cancel anytime, unlimited updates
+                                                </div>
+                                            ) : (
+                                                <div className="mt-5 text-sm text-gray-500">
+                                                    {price}€, one-time payment,{" "}
+                                                    <span className="text-gray-900 font-medium">
+                                                        {" "}no updates after 1 year
+                                                    </span>
+                                                </div>
+                                            )}
+                                        </div>
+                                    </div>
+                                </div>
+                                <div className="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
+                                    <button
+                                        type="button"
+                                        className="inline-flex w-full justify-center rounded-md !bg-blue-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:!bg-blue-600 sm:ml-3 sm:w-auto"
+                                        onClick={() => {
+                                            setOpen(false);
+                                            window.open(renewalEnabled ? linkSubscription : linkSingle, "_blank");
+                                        }}
+                                    >
+                                        Continue to checkout
+                                    </button>
+                                    <button
+                                        type="button"
+                                        className="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
+                                        onClick={() => setOpen(false)}
+                                        ref={cancelButtonRef}
+                                    >
+                                        Cancel
+                                    </button>
+                                </div>
+                            </Dialog.Panel>
+                        </Transition.Child>
+                    </div>
+                </div>
+            </Dialog>
+        </Transition.Root>
+    )
+}
diff --git a/website/src/pages/sentry.mdx b/website/src/pages/sentry.mdx
index f25c033dd..e6fbc5b62 100644
--- a/website/src/pages/sentry.mdx
+++ b/website/src/pages/sentry.mdx
@@ -4,238 +4,264 @@ import Image from 'next/image';
 import Breadcrumbs from '../components/Breadcrumbs';
 import { CheckIcon } from '@heroicons/react/20/solid'
 import { NextSeo } from 'next-seo';
+import SentryCheckout from '../components/sentry/SentryCheckout';
+import { useState } from 'react';
 
 <NextSeo description="Sentry integration for PHP applications running on AWS Lambda. Track cold starts, event-driven invocations, and more." />
 
-export const features = [
-    {
-        name: 'Exception tracking.',
-        description: 'Add exception tracking to AWS Lambda handlers like SQS, EventBridge, S3 handlers, and more.',
-        icon: BugAntIcon,
-    },
-    {
-        name: 'Cold start tracking.',
-        description: 'Track cold starts and Bref startup duration in Sentry performance tracing.',
-        icon: ClockIcon,
-    },
-    {
-        name: 'Lambda handler performance tracking.',
-        description: 'Trace the performance of event-driven PHP Lambda handlers (SQS, EventBridge, etc.).',
-        icon: CodeBracketSquareIcon,
-    },
-    {
-        name: 'AWS SDK tracking.',
-        description: 'Measure AWS SDK calls in performance tracing to troubleshoot performance issues.',
-        icon: FingerPrintIcon,
-    },
-]
+<Sentry />
 
-<div className="py-8 pb-12">
-    <div className="mx-auto max-w-7xl px-6 lg:px-8">
-        <div className="mx-auto max-w-2xl sm:text-center">
-            <Breadcrumbs pages={[
-                { name: 'Sentry', href: '/sentry' },
-            ]} />
-            <h1 className="mt-20 sm:mt-24 text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
-                Sentry integration for AWS Lambda
-            </h1>
-            <div className="mt-6 text-lg leading-8 text-gray-600">
-                Advanced Sentry integration for PHP applications running on AWS Lambda. Track cold starts, event-driven invocations, and more.
-            </div>
-            <div className="mt-10 flex items-center justify-center gap-x-6">
-                <a
-                    href="/sentry/docs"
-                    className="rounded-md bg-blue-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500"
-                >
-                    Documentation
-                </a>
-                <a href="#pricing" className="text-sm font-semibold leading-6 text-gray-900">
-                    Pricing <span aria-hidden="true">→</span>
-                </a>
-            </div>
-        </div>
-    </div>
-    <div className="relative overflow-hidden pt-16">
-        <div className="mx-auto max-w-7xl px-6 lg:px-8">
-            <Image
-                src={sentry}
-                alt="Sentry integration for AWS Lambda"
-                className="mb-[-12%] rounded-xl shadow-2xl ring-1 ring-gray-900/10"
-            />
-            <div className="relative" aria-hidden="true">
-                <div className="absolute -inset-x-20 bottom-0 bg-gradient-to-t from-white pt-[7%]" />
-            </div>
-        </div>
-    </div>
-    <div className="mx-auto mt-16 max-w-7xl px-6 sm:mt-20 md:mt-24 lg:px-8">
-        <dl className="mx-auto grid max-w-2xl grid-cols-1 gap-x-6 gap-y-10 text-base leading-7 text-gray-600 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-2 lg:gap-x-8 lg:gap-y-16">
-            {features.map((feature) => (
-                <div key={feature.name} className="relative pl-9">
-                    <dt className="inline font-semibold text-gray-900">
-                        <feature.icon className="absolute left-1 top-1 h-5 w-5 text-blue-500"
-                                      aria-hidden="true" />
-                        {feature.name}
-                    </dt>
-                    {' '}
-                    <dd className="inline">{feature.description}</dd>
-                </div>
-            ))}
-        </dl>
-    </div>
-</div>
+export function Sentry() {
+    const [openCheckout, setOpenCheckout] = useState(false);
+    const [checkoutPrice, setCheckoutPrice] = useState('');
+    const [checkoutLinkSingle, setCheckoutLinkSingle] = useState('');
+    const [checkoutLinkSubscription, setCheckoutLinkSubscription] = useState('');
 
+    function classNames(...classes) {
+        return classes.filter(Boolean).join(' ')
+    }
 
-export const tiers = [
-    {
-        name: 'Single project',
-        id: 'single-license',
-        href: '#',
-        price: '€99',
-        features: [
-            'Single project',
-            'Unlimited users',
-            'Composer package & documentation',
-            'Free updates for one year',
-            'Optional yearly license renewals',
-        ],
-        featured: false,
-    },
-    {
-        name: 'Unlimited',
-        id: 'unlimited-license',
-        href: '#',
-        price: '€299',
-        features: [
-            'Unlimited projects',
-            'Unlimited users',
-            'Composer package & documentation',
-            'Free updates for one year',
-            'Optional yearly license renewals',
-            'Email support',
-        ],
-        featured: true,
-    },
-];
+    function doOpenCheckout(price, linkSingle, linkSubscription) {
+        setOpenCheckout(true);
+        setCheckoutPrice(price);
+        setCheckoutLinkSingle(linkSingle);
+        setCheckoutLinkSubscription(linkSubscription);
+    }
 
-export function classNames(...classes) {
-    return classes.filter(Boolean).join(' ')
-}
+    const tiers = [
+        {
+            name: 'Single project',
+            id: 'single-license',
+            linkSingle: 'https://bref.lemonsqueezy.com/checkout/buy/cfb8de93-1f0e-41fa-868b-4fa3ab68fea0',
+            linkSubscription: 'https://bref.lemonsqueezy.com/checkout/buy/0f4f58f4-4449-4fb9-89d6-c22b9fc41691',
+            price: '99',
+            features: [
+                'Single project',
+                'Unlimited users',
+                'Composer package & documentation',
+                'Free updates for one year',
+                'Optional yearly license renewals',
+            ],
+            featured: false,
+        },
+        {
+            name: 'Unlimited',
+            id: 'unlimited-license',
+            linkSingle: 'https://bref.lemonsqueezy.com/checkout/buy/e9d8ed0f-f0af-44e3-9718-742ac90e1e51',
+            linkSubscription: 'https://bref.lemonsqueezy.com/checkout/buy/0792799d-c2e8-402a-96d4-409bf4a6f04d',
+            price: '299',
+            features: [
+                'Unlimited projects',
+                'Unlimited users',
+                'Composer package & documentation',
+                'Free updates for one year',
+                'Optional yearly license renewals',
+                'Email support',
+            ],
+            featured: true,
+        },
+    ];
 
-<div id="pricing" className="relative isolate bg-white px-6 py-24 sm:py-32 lg:px-8">
-    <div className="absolute inset-x-0 -top-3 -z-10 transform-gpu overflow-hidden px-36 blur-3xl" aria-hidden="true">
-        <div
-            className="mx-auto aspect-[1155/678] w-[72.1875rem] bg-gradient-to-tr from-blue-100 to-blue-500 opacity-30"
-            style={{
-                clipPath:
-                    'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
-            }}
-        />
-    </div>
-    <div className="mx-auto max-w-2xl text-center lg:max-w-4xl">
-        <div className="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">
-            Simple pricing
-        </div>
-    </div>
-    <div className="mx-auto mt-6 max-w-2xl text-center text-lg leading-8 text-gray-600">
-        The license is a <strong>one-time purchase</strong> and includes free updates for a year.
-        You can optionally enable license renewals to receive all future updates.
-    </div>
-    <div className="mx-auto mt-16 grid max-w-lg grid-cols-1 items-center gap-y-6 sm:mt-20 sm:gap-y-0 lg:max-w-4xl lg:grid-cols-2">
-        {tiers.map((tier, tierIdx) => (
-            <div
-                key={tier.id}
-                className={classNames(
-                    tier.featured ? 'relative bg-white shadow-2xl' : 'bg-white/60 sm:mx-8 lg:mx-0',
-                    tier.featured
-                        ? ''
-                        : tierIdx === 0
-                            ? 'rounded-t-3xl sm:rounded-b-none lg:rounded-tr-none lg:rounded-bl-3xl'
-                            : 'sm:rounded-t-none lg:rounded-tr-3xl lg:rounded-bl-none',
-                    'rounded-3xl p-8 ring-1 ring-gray-900/10 sm:p-10'
-                )}
-            >
-                <h3 id={tier.id} className="text-base font-semibold leading-7 text-blue-600">
-                    {tier.name}
-                </h3>
-                <div className="mt-4 flex items-baseline gap-x-2">
-                    <span className="text-5xl font-bold tracking-tight text-gray-900">{tier.price}</span>
-                    <span className="text-xs text-gray-500">one-time payment</span>
-                </div>
-                <ul role="list" className="mt-8 space-y-3 text-sm leading-6 text-gray-600 sm:mt-10">
-                    {tier.features.map((feature) => (
-                        <li key={feature} className="flex gap-x-3">
-                            <CheckIcon className="h-6 w-5 flex-none text-blue-600" aria-hidden="true" />
-                            {feature}
-                        </li>
-                    ))}
-                </ul>
-                <a
-                    href={tier.href}
-                    aria-describedby={tier.id}
-                    className={classNames(
-                        tier.featured
-                            ? 'bg-blue-600 text-white shadow hover:bg-blue-500'
-                            : 'text-blue-600 ring-1 ring-inset ring-blue-200 hover:ring-blue-300',
-                        'mt-8 block rounded-md py-2.5 px-3.5 text-center text-sm font-semibold focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 sm:mt-10'
-                    )}
-                >
-                    Get started
-                </a>
-            </div>
-        ))}
-    </div>
-    <div className="mx-auto mt-12 grid max-w-lg text-gray-500 text-sm">
-        Invoices and receipts available for easy company reimbursement.
-    </div>
-</div>
+    const features = [
+        {
+            name: 'Exception tracking.',
+            description: 'Add exception tracking to AWS Lambda handlers like SQS, EventBridge, S3 handlers, and more.',
+            icon: BugAntIcon,
+        },
+        {
+            name: 'Cold start tracking.',
+            description: 'Track cold starts and Bref startup duration in Sentry performance tracing.',
+            icon: ClockIcon,
+        },
+        {
+            name: 'Lambda handler performance tracking.',
+            description: 'Trace the performance of event-driven PHP Lambda handlers (SQS, EventBridge, etc.).',
+            icon: CodeBracketSquareIcon,
+        },
+        {
+            name: 'AWS SDK tracking.',
+            description: 'Measure AWS SDK calls in performance tracing to troubleshoot performance issues.',
+            icon: FingerPrintIcon,
+        },
+    ];
 
+    const faqs = [
+        {
+            question: 'Where can I learn more about each feature?',
+            answer: 'You can find more information about each feature in <a href="/sentry/docs" class="link">the documentation</a>.',
+        },
+        {
+            question: 'What is a considered a "project"?',
+            answer: 'You can use a single project license on a single "service" or "application" (for example a Laravel or a Symfony project), regardless if you deploy it in multiple environments (like "dev", "staging", "production"…) or if you deploy multiple AWS Lambda functions in that application. However, if you deploy multiple applications, multiple services, or deploy the same application for multiple customers (aka multi-tenant), you need an "Unlimited" license (or a license for each application).',
+        },
+        {
+            question: 'Do I get invoices?',
+            answer: 'Yes, you will receive an invoice by email after your purchase.',
+        },
+        {
+            question: 'What is the refund policy?',
+            answer: '7-days, full refund, no questions asked.',
+        },
+        {
+            question: 'Can I use an unlimited license for all of my client projects?',
+            answer: 'Not exactly. An unlimited license provides you unlimited access to Nova for all of your projects, but it doesn\'t mean your client is also allowed to use your license. Your clients will need their own license to use Nova for their projects.',
+        },
+        {
+            question: 'Are there any bulk pricing options?',
+            answer: 'That is possible, please get in touch.',
+        },
+    ];
 
-export const faqs = [
-    {
-        question: 'Where can I learn more about each feature?',
-        answer: 'You can find more information about each feature in <a href="/sentry/docs" class="link">the documentation</a>.',
-    },
-    {
-        question: 'What is a considered a "project"?',
-        answer: 'You can use a single project license on a single "service" or "application" (for example a Laravel or a Symfony project), regardless if you deploy it in multiple environments (like "dev", "staging", "production"…) or if you deploy multiple AWS Lambda functions in that application. However, if you deploy multiple applications, multiple services, or deploy the same application for multiple customers (aka multi-tenant), you need an "Unlimited" license (or a license for each application).',
-    },
-    {
-        question: 'Do I get invoices?',
-        answer: 'Yes, you will receive an invoice by email after your purchase.',
-    },
-    {
-        question: 'What is the refund policy?',
-        answer: '7-days, full refund, no questions asked.',
-    },
-    {
-        question: 'Can I use an unlimited license for all of my client projects?',
-        answer: 'Not exactly. An unlimited license provides you unlimited access to Nova for all of your projects, but it doesn\'t mean your client is also allowed to use your license. Your clients will need their own license to use Nova for their projects.',
-    },
-    {
-        question: 'Are there any bulk pricing options?',
-        answer: 'That is possible, please get in touch.',
-    },
-]
+    return (
+        <div>
+            <SentryCheckout open={openCheckout} setOpen={setOpenCheckout} price={checkoutPrice}
+                            linkSingle={checkoutLinkSingle} linkSubscription={checkoutLinkSubscription} />
 
-<div id="faq" className="bg-white">
-    <div className="mx-auto max-w-7xl px-6 py-24 sm:pt-32 lg:px-8 lg:py-40">
-        <div className="lg:grid lg:grid-cols-12 lg:gap-8">
-            <div className="lg:col-span-5">
-                <h2 className="text-2xl font-bold leading-10 tracking-tight text-gray-900">Frequently asked questions</h2>
-                <div className="mt-4 text-base leading-7 text-gray-600">
-                    Can’t find the answer you’re looking for? Reach out <a href="mailto:matthieu@bref.sh" className="font-semibold text-blue-600 hover:text-blue-500">via email</a>.
+            <div className="py-8 pb-12">
+                <div className="mx-auto max-w-7xl px-6 lg:px-8">
+                    <div className="mx-auto max-w-2xl sm:text-center">
+                        <Breadcrumbs pages={[
+                            { name: 'Sentry', href: '/sentry' },
+                        ]} />
+                        <h1 className="mt-20 sm:mt-24 text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
+                            Sentry integration for AWS Lambda
+                        </h1>
+                        <div className="mt-6 text-lg leading-8 text-gray-600">
+                            Advanced Sentry integration for PHP applications running on AWS Lambda. Track cold starts, event-driven invocations, and more.
+                        </div>
+                        <div className="mt-10 flex items-center justify-center gap-x-6">
+                            <a
+                                href="/sentry/docs"
+                                className="rounded-md bg-blue-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500"
+                            >
+                                Documentation
+                            </a>
+                            <a href="#pricing" className="text-sm font-semibold leading-6 text-gray-900">
+                                Pricing <span aria-hidden="true">→</span>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <div className="relative overflow-hidden pt-16">
+                    <div className="mx-auto max-w-7xl px-6 lg:px-8">
+                        <Image
+                            src={sentry}
+                            alt="Sentry integration for AWS Lambda"
+                            className="mb-[-12%] rounded-xl shadow-2xl ring-1 ring-gray-900/10"
+                        />
+                        <div className="relative" aria-hidden="true">
+                            <div className="absolute -inset-x-20 bottom-0 bg-gradient-to-t from-white pt-[7%]" />
+                        </div>
+                    </div>
+                </div>
+                <div className="mx-auto mt-16 max-w-7xl px-6 sm:mt-20 md:mt-24 lg:px-8">
+                    <dl className="mx-auto grid max-w-2xl grid-cols-1 gap-x-6 gap-y-10 text-base leading-7 text-gray-600 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-2 lg:gap-x-8 lg:gap-y-16">
+                        {features.map((feature) => (
+                            <div key={feature.name} className="relative pl-9">
+                                <dt className="inline font-semibold text-gray-900">
+                                    <feature.icon className="absolute left-1 top-1 h-5 w-5 text-blue-500"
+                                                  aria-hidden="true" />
+                                    {feature.name}
+                                </dt>
+                                {' '}
+                                <dd className="inline">{feature.description}</dd>
+                            </div>
+                        ))}
+                    </dl>
                 </div>
             </div>
-            <div className="mt-10 lg:col-span-7 lg:mt-0">
-                <dl className="space-y-10">
-                    {faqs.map((faq) => (
-                        <div key={faq.question}>
-                            <dt className="text-base font-semibold leading-7 text-gray-900">{faq.question}</dt>
-                            <dd className="mt-2 text-base leading-7 text-gray-600" dangerouslySetInnerHTML={{ __html: faq.answer }}></dd>
+
+            <div id="pricing" className="relative isolate bg-white px-6 py-24 sm:py-32 lg:px-8">
+                <div className="absolute inset-x-0 -top-3 -z-10 transform-gpu overflow-hidden px-36 blur-3xl" aria-hidden="true">
+                    <div
+                        className="mx-auto aspect-[1155/678] w-[72.1875rem] bg-gradient-to-tr from-blue-100 to-blue-500 opacity-30"
+                        style={{
+                            clipPath:
+                                'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
+                        }}
+                    />
+                </div>
+                <div className="mx-auto max-w-2xl text-center lg:max-w-4xl">
+                    <div className="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">
+                        Simple pricing
+                    </div>
+                </div>
+                <div className="mx-auto mt-6 max-w-2xl text-center text-lg leading-8 text-gray-600">
+                    The license is a <strong>one-time purchase</strong> and includes free updates for a year.
+                    You can optionally enable license renewals to receive all future updates.
+                </div>
+                <div className="mx-auto mt-16 grid max-w-lg grid-cols-1 items-center gap-y-6 sm:mt-20 sm:gap-y-0 lg:max-w-4xl lg:grid-cols-2">
+                    {tiers.map((tier, tierIdx) => (
+                        <div
+                            key={tier.id}
+                            className={classNames(
+                                tier.featured ? 'relative bg-white shadow-2xl' : 'bg-white/60 sm:mx-8 lg:mx-0',
+                                tier.featured
+                                    ? ''
+                                    : tierIdx === 0
+                                        ? 'rounded-t-3xl sm:rounded-b-none lg:rounded-tr-none lg:rounded-bl-3xl'
+                                        : 'sm:rounded-t-none lg:rounded-tr-3xl lg:rounded-bl-none',
+                                'rounded-3xl p-8 ring-1 ring-gray-900/10 sm:p-10'
+                            )}
+                        >
+                            <h3 id={tier.id} className="text-base font-semibold leading-7 text-blue-600">
+                                {tier.name}
+                            </h3>
+                            <div className="mt-4 flex items-baseline gap-x-2">
+                                <span className="text-5xl font-bold tracking-tight text-gray-900">{tier.price}€</span>
+                                <span className="text-xs text-gray-500">one-time payment</span>
+                            </div>
+                            <ul role="list" className="mt-8 space-y-3 text-sm leading-6 text-gray-600 sm:mt-10">
+                                {tier.features.map((feature) => (
+                                    <li key={feature} className="flex gap-x-3">
+                                        <CheckIcon className="h-6 w-5 flex-none text-blue-600" aria-hidden="true" />
+                                        {feature}
+                                    </li>
+                                ))}
+                            </ul>
+                            <button
+                                type="button"
+                                onClick={() => doOpenCheckout(tier.price, tier.linkSingle, tier.linkSubscription)}
+                                aria-describedby={tier.id}
+                                className={classNames(
+                                    tier.featured
+                                        ? '!bg-blue-500 text-white shadow hover:!bg-blue-600'
+                                        : 'text-blue-600 ring-1 ring-inset ring-blue-200 hover:ring-blue-300',
+                                    'mt-8 block w-full rounded-md py-2.5 px-3.5 text-center text-sm font-semibold focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 sm:mt-10'
+                                )}
+                            >
+                                Get started
+                            </button>
                         </div>
                     ))}
-                </dl>
+                </div>
+                <div className="mx-auto mt-12 grid max-w-lg text-gray-500 text-sm">
+                    Invoices and receipts available for easy company reimbursement.
+                </div>
+            </div>
+
+            <div id="faq" className="bg-white">
+                <div className="mx-auto max-w-7xl px-6 py-24 sm:pt-32 lg:px-8 lg:py-40">
+                    <div className="lg:grid lg:grid-cols-12 lg:gap-8">
+                        <div className="lg:col-span-5">
+                            <h2 className="text-2xl font-bold leading-10 tracking-tight text-gray-900">Frequently asked questions</h2>
+                            <div className="mt-4 text-base leading-7 text-gray-600">
+                                Can’t find the answer you’re looking for? Reach out <a href="mailto:matthieu@bref.sh" className="font-semibold text-blue-600 hover:text-blue-500">via email</a>.
+                            </div>
+                        </div>
+                        <div className="mt-10 lg:col-span-7 lg:mt-0">
+                            <dl className="space-y-10">
+                                {faqs.map((faq) => (
+                                    <div key={faq.question}>
+                                        <dt className="text-base font-semibold leading-7 text-gray-900">{faq.question}</dt>
+                                        <dd className="mt-2 text-base leading-7 text-gray-600" dangerouslySetInnerHTML={{ __html: faq.answer }}></dd>
+                                    </div>
+                                ))}
+                            </dl>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
-    </div>
-</div>
+    )
+}
diff --git a/website/src/pages/sentry/docs.mdx b/website/src/pages/sentry/docs.mdx
index 865059d35..4df69118b 100644
--- a/website/src/pages/sentry/docs.mdx
+++ b/website/src/pages/sentry/docs.mdx
@@ -14,6 +14,8 @@ This package provides an advanced integration between Bref applications and [Sen
 - Capture exceptions and trace event handlers using the [function runtime](/docs/runtimes/function) (like EventBridge, SQS, S3…)
 - Trace AWS SDK calls in performance tracing
 
+Check out the documentation below for screenshots and more details.
+
 ## Installation
 
 Before getting started, make sure you have set up Sentry in your application ([documentation for PHP](https://docs.sentry.io/platforms/php/), [for Laravel](https://docs.sentry.io/platforms/php/guides/laravel/) or [for Symfony](https://docs.sentry.io/platforms/php/symfony/)).