init

src/components/Button.tsx

@@ -0,0 +1,63 @@
+import Link from 'next/link'
+import clsx from 'clsx'
+
+const baseStyles = {
+  solid:
+    'group inline-flex items-center justify-center rounded-full py-2 px-4 text-sm font-semibold focus-visible:outline-2 focus-visible:outline-offset-2',
+  outline:
+    'group inline-flex ring-1 items-center justify-center rounded-full py-2 px-4 text-sm',
+}
+
+const variantStyles = {
+  solid: {
+    slate:
+      'bg-slate-900 text-white hover:bg-slate-700 hover:text-slate-100 active:bg-slate-800 active:text-slate-300 focus-visible:outline-slate-900',
+    blue: 'bg-blue-600 text-white hover:text-slate-100 hover:bg-blue-500 active:bg-blue-800 active:text-blue-100 focus-visible:outline-blue-600',
+    white:
+      'bg-white text-slate-900 hover:bg-blue-50 active:bg-blue-200 active:text-slate-600 focus-visible:outline-white',
+  },
+  outline: {
+    slate:
+      'ring-slate-200 text-slate-700 hover:text-slate-900 hover:ring-slate-300 active:bg-slate-100 active:text-slate-600 focus-visible:outline-blue-600 focus-visible:ring-slate-300',
+    white:
+      'ring-slate-700 text-white hover:ring-slate-500 active:ring-slate-700 active:text-slate-400 focus-visible:outline-white',
+  },
+}
+
+type ButtonProps = (
+  | {
+      variant?: 'solid'
+      color?: keyof typeof variantStyles.solid
+    }
+  | {
+      variant: 'outline'
+      color?: keyof typeof variantStyles.outline
+    }
+) &
+  (
+    | Omit<React.ComponentPropsWithoutRef<typeof Link>, 'color'>
+    | (Omit<React.ComponentPropsWithoutRef<'button'>, 'color'> & {
+        href?: undefined
+      })
+  )
+
+export function Button({ className, ...props }: ButtonProps) {
+  props.variant ??= 'solid'
+  props.color ??= 'slate'
+
+  className = clsx(
+    baseStyles[props.variant],
+    props.variant === 'outline'
+      ? variantStyles.outline[props.color]
+      : props.variant === 'solid'
+        ? variantStyles.solid[props.color]
+        : undefined,
+    className,
+  )
+
+  return typeof props.href === 'undefined' ? (
+    <button className={className} {...props} />
+  ) : (
+    <Link className={className} {...props} />
+  )
+}

src/components/CallToAction.tsx

@@ -0,0 +1,37 @@
+import Image from 'next/image'
+
+import { Button } from '@/components/Button'
+import { Container } from '@/components/Container'
+import backgroundImage from '@/images/background-call-to-action.jpg'
+
+export function CallToAction() {
+  return (
+    <section
+      id="get-started-today"
+      className="relative overflow-hidden bg-blue-600 py-32"
+    >
+      <Image
+        className="absolute top-1/2 left-1/2 max-w-none -translate-x-1/2 -translate-y-1/2"
+        src={backgroundImage}
+        alt=""
+        width={2347}
+        height={1244}
+        unoptimized
+      />
+      <Container className="relative">
+        <div className="mx-auto max-w-lg text-center">
+          <h2 className="font-display text-3xl tracking-tight text-white sm:text-4xl">
+            Get started today
+          </h2>
+          <p className="mt-4 text-lg tracking-tight text-white">
+            It’s time to take control of your books. Buy our software so you can
+            feel like you’re doing something productive.
+          </p>
+          <Button href="/register" color="white" className="mt-10">
+            Get 6 months free
+          </Button>
+        </div>
+      </Container>
+    </section>
+  )
+}

src/components/Container.tsx

@@ -0,0 +1,13 @@
+import clsx from 'clsx'
+
+export function Container({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<'div'>) {
+  return (
+    <div
+      className={clsx('mx-auto max-w-7xl px-4 sm:px-6 lg:px-8', className)}
+      {...props}
+    />
+  )
+}

src/components/Faqs.tsx

@@ -0,0 +1,110 @@
+import Image from 'next/image'
+
+import { Container } from '@/components/Container'
+import backgroundImage from '@/images/background-faqs.jpg'
+
+const faqs = [
+  [
+    {
+      question: 'Does TaxPal handle VAT?',
+      answer:
+        'Well no, but if you move your company offshore you can probably ignore it.',
+    },
+    {
+      question: 'Can I pay for my subscription via purchase order?',
+      answer: 'Absolutely, we are happy to take your money in all forms.',
+    },
+    {
+      question: 'How do I apply for a job at TaxPal?',
+      answer:
+        'We only hire our customers, so subscribe for a minimum of 6 months and then let’s talk.',
+    },
+  ],
+  [
+    {
+      question: 'What was that testimonial about tax fraud all about?',
+      answer:
+        'TaxPal is just a software application, ultimately your books are your responsibility.',
+    },
+    {
+      question:
+        'TaxPal sounds horrible but why do I still feel compelled to purchase?',
+      answer:
+        'This is the power of excellent visual design. You just can’t resist it, no matter how poorly it actually functions.',
+    },
+    {
+      question:
+        'I found other companies called TaxPal, are you sure you can use this name?',
+      answer:
+        'Honestly not sure at all. We haven’t actually incorporated or anything, we just thought it sounded cool and made this website.',
+    },
+  ],
+  [
+    {
+      question: 'How do you generate reports?',
+      answer:
+        'You just tell us what data you need a report for, and we get our kids to create beautiful charts for you using only the finest crayons.',
+    },
+    {
+      question: 'Can we expect more inventory features?',
+      answer: 'In life it’s really better to never expect anything at all.',
+    },
+    {
+      question: 'I lost my password, how do I get into my account?',
+      answer:
+        'Send us an email and we will send you a copy of our latest password spreadsheet so you can find your information.',
+    },
+  ],
+]
+
+export function Faqs() {
+  return (
+    <section
+      id="faq"
+      aria-labelledby="faq-title"
+      className="relative overflow-hidden bg-slate-50 py-20 sm:py-32"
+    >
+      <Image
+        className="absolute top-0 left-1/2 max-w-none translate-x-[-30%] -translate-y-1/4"
+        src={backgroundImage}
+        alt=""
+        width={1558}
+        height={946}
+        unoptimized
+      />
+      <Container className="relative">
+        <div className="mx-auto max-w-2xl lg:mx-0">
+          <h2
+            id="faq-title"
+            className="font-display text-3xl tracking-tight text-slate-900 sm:text-4xl"
+          >
+            Frequently asked questions
+          </h2>
+          <p className="mt-4 text-lg tracking-tight text-slate-700">
+            If you can’t find what you’re looking for, email our support team
+            and if you’re lucky someone will get back to you.
+          </p>
+        </div>
+        <ul
+          role="list"
+          className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-8 lg:max-w-none lg:grid-cols-3"
+        >
+          {faqs.map((column, columnIndex) => (
+            <li key={columnIndex}>
+              <ul role="list" className="flex flex-col gap-y-8">
+                {column.map((faq, faqIndex) => (
+                  <li key={faqIndex}>
+                    <h3 className="font-display text-lg/7 text-slate-900">
+                      {faq.question}
+                    </h3>
+                    <p className="mt-4 text-sm text-slate-700">{faq.answer}</p>
+                  </li>
+                ))}
+              </ul>
+            </li>
+          ))}
+        </ul>
+      </Container>
+    </section>
+  )
+}

src/components/Fields.tsx

@@ -0,0 +1,47 @@
+import { useId } from 'react'
+import clsx from 'clsx'
+
+const formClasses =
+  'block w-full appearance-none rounded-md border border-gray-200 bg-gray-50 px-3 py-2 text-gray-900 placeholder-gray-400 focus:border-blue-500 focus:bg-white focus:outline-hidden focus:ring-blue-500 sm:text-sm'
+
+function Label({ id, children }: { id: string; children: React.ReactNode }) {
+  return (
+    <label
+      htmlFor={id}
+      className="mb-3 block text-sm font-medium text-gray-700"
+    >
+      {children}
+    </label>
+  )
+}
+
+export function TextField({
+  label,
+  type = 'text',
+  className,
+  ...props
+}: Omit<React.ComponentPropsWithoutRef<'input'>, 'id'> & { label: string }) {
+  let id = useId()
+
+  return (
+    <div className={className}>
+      {label && <Label id={id}>{label}</Label>}
+      <input id={id} type={type} {...props} className={formClasses} />
+    </div>
+  )
+}
+
+export function SelectField({
+  label,
+  className,
+  ...props
+}: Omit<React.ComponentPropsWithoutRef<'select'>, 'id'> & { label: string }) {
+  let id = useId()
+
+  return (
+    <div className={className}>
+      {label && <Label id={id}>{label}</Label>}
+      <select id={id} {...props} className={clsx(formClasses, 'pr-8')} />
+    </div>
+  )
+}

src/components/Footer.tsx

@@ -0,0 +1,50 @@
+import Link from 'next/link'
+
+import { Container } from '@/components/Container'
+import { Logo } from '@/components/Logo'
+import { NavLink } from '@/components/NavLink'
+
+export function Footer() {
+  return (
+    <footer className="bg-slate-50">
+      <Container>
+        <div className="py-16">
+          <Logo className="mx-auto h-10 w-auto" />
+          <nav className="mt-10 text-sm" aria-label="quick links">
+            <div className="-my-1 flex justify-center gap-x-6">
+              <NavLink href="#features">Features</NavLink>
+              <NavLink href="#testimonials">Testimonials</NavLink>
+              <NavLink href="#pricing">Pricing</NavLink>
+            </div>
+          </nav>
+        </div>
+        <div className="flex flex-col items-center border-t border-slate-400/10 py-10 sm:flex-row-reverse sm:justify-between">
+          <div className="flex gap-x-6">
+            <Link href="#" className="group" aria-label="TaxPal on X">
+              <svg
+                className="h-6 w-6 fill-slate-500 group-hover:fill-slate-700"
+                aria-hidden="true"
+                viewBox="0 0 24 24"
+              >
+                <path d="M13.3174 10.7749L19.1457 4H17.7646L12.7039 9.88256L8.66193 4H4L10.1122 12.8955L4 20H5.38119L10.7254 13.7878L14.994 20H19.656L13.3171 10.7749H13.3174ZM11.4257 12.9738L10.8064 12.0881L5.87886 5.03974H8.00029L11.9769 10.728L12.5962 11.6137L17.7652 19.0075H15.6438L11.4257 12.9742V12.9738Z" />
+              </svg>
+            </Link>
+            <Link href="#" className="group" aria-label="TaxPal on GitHub">
+              <svg
+                className="h-6 w-6 fill-slate-500 group-hover:fill-slate-700"
+                aria-hidden="true"
+                viewBox="0 0 24 24"
+              >
+                <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2Z" />
+              </svg>
+            </Link>
+          </div>
+          <p className="mt-6 text-sm text-slate-500 sm:mt-0">
+            Copyright &copy; {new Date().getFullYear()} TaxPal. All rights
+            reserved.
+          </p>
+        </div>
+      </Container>
+    </footer>
+  )
+}

src/components/Header.tsx

@@ -0,0 +1,117 @@
+'use client'
+
+import Link from 'next/link'
+import {
+  Popover,
+  PopoverButton,
+  PopoverBackdrop,
+  PopoverPanel,
+} from '@headlessui/react'
+import clsx from 'clsx'
+
+import { Button } from '@/components/Button'
+import { Container } from '@/components/Container'
+import { Logo } from '@/components/Logo'
+import { NavLink } from '@/components/NavLink'
+
+function MobileNavLink({
+  href,
+  children,
+}: {
+  href: string
+  children: React.ReactNode
+}) {
+  return (
+    <PopoverButton as={Link} href={href} className="block w-full p-2">
+      {children}
+    </PopoverButton>
+  )
+}
+
+function MobileNavIcon({ open }: { open: boolean }) {
+  return (
+    <svg
+      aria-hidden="true"
+      className="h-3.5 w-3.5 overflow-visible stroke-slate-700"
+      fill="none"
+      strokeWidth={2}
+      strokeLinecap="round"
+    >
+      <path
+        d="M0 1H14M0 7H14M0 13H14"
+        className={clsx(
+          'origin-center transition',
+          open && 'scale-90 opacity-0',
+        )}
+      />
+      <path
+        d="M2 2L12 12M12 2L2 12"
+        className={clsx(
+          'origin-center transition',
+          !open && 'scale-90 opacity-0',
+        )}
+      />
+    </svg>
+  )
+}
+
+function MobileNavigation() {
+  return (
+    <Popover>
+      <PopoverButton
+        className="relative z-10 flex h-8 w-8 items-center justify-center focus:not-data-focus:outline-hidden"
+        aria-label="Toggle Navigation"
+      >
+        {({ open }) => <MobileNavIcon open={open} />}
+      </PopoverButton>
+      <PopoverBackdrop
+        transition
+        className="fixed inset-0 bg-slate-300/50 duration-150 data-closed:opacity-0 data-enter:ease-out data-leave:ease-in"
+      />
+      <PopoverPanel
+        transition
+        className="absolute inset-x-0 top-full mt-4 flex origin-top flex-col rounded-2xl bg-white p-4 text-lg tracking-tight text-slate-900 shadow-xl ring-1 ring-slate-900/5 data-closed:scale-95 data-closed:opacity-0 data-enter:duration-150 data-enter:ease-out data-leave:duration-100 data-leave:ease-in"
+      >
+        <MobileNavLink href="#features">Features</MobileNavLink>
+        <MobileNavLink href="#testimonials">Testimonials</MobileNavLink>
+        <MobileNavLink href="#pricing">Pricing</MobileNavLink>
+        <hr className="m-2 border-slate-300/40" />
+        <MobileNavLink href="/login">Sign in</MobileNavLink>
+      </PopoverPanel>
+    </Popover>
+  )
+}
+
+export function Header() {
+  return (
+    <header className="py-10">
+      <Container>
+        <nav className="relative z-50 flex justify-between">
+          <div className="flex items-center md:gap-x-12">
+            <Link href="#" aria-label="Home">
+              <Logo className="h-10 w-auto" />
+            </Link>
+            <div className="hidden md:flex md:gap-x-6">
+              <NavLink href="#features">Features</NavLink>
+              <NavLink href="#testimonials">Testimonials</NavLink>
+              <NavLink href="#pricing">Pricing</NavLink>
+            </div>
+          </div>
+          <div className="flex items-center gap-x-5 md:gap-x-8">
+            <div className="hidden md:block">
+              <NavLink href="/login">Sign in</NavLink>
+            </div>
+            <Button href="/register" color="blue">
+              <span>
+                Get started <span className="hidden lg:inline">today</span>
+              </span>
+            </Button>
+            <div className="-mr-1 md:hidden">
+              <MobileNavigation />
+            </div>
+          </div>
+        </nav>
+      </Container>
+    </header>
+  )
+}

src/components/Hero.tsx

@@ -0,0 +1,86 @@
+import Image from 'next/image'
+
+import { Button } from '@/components/Button'
+import { Container } from '@/components/Container'
+import logoLaravel from '@/images/logos/laravel.svg'
+import logoMirage from '@/images/logos/mirage.svg'
+import logoStatamic from '@/images/logos/statamic.svg'
+import logoStaticKit from '@/images/logos/statickit.svg'
+import logoTransistor from '@/images/logos/transistor.svg'
+import logoTuple from '@/images/logos/tuple.svg'
+
+export function Hero() {
+  return (
+    <Container className="pt-20 pb-16 text-center lg:pt-32">
+      <h1 className="mx-auto max-w-4xl font-display text-5xl font-medium tracking-tight text-slate-900 sm:text-7xl">
+        Accounting{' '}
+        <span className="relative whitespace-nowrap text-blue-600">
+          <svg
+            aria-hidden="true"
+            viewBox="0 0 418 42"
+            className="absolute top-2/3 left-0 h-[0.58em] w-full fill-blue-300/70"
+            preserveAspectRatio="none"
+          >
+            <path d="M203.371.916c-26.013-2.078-76.686 1.963-124.73 9.946L67.3 12.749C35.421 18.062 18.2 21.766 6.004 25.934 1.244 27.561.828 27.778.874 28.61c.07 1.214.828 1.121 9.595-1.176 9.072-2.377 17.15-3.92 39.246-7.496C123.565 7.986 157.869 4.492 195.942 5.046c7.461.108 19.25 1.696 19.17 2.582-.107 1.183-7.874 4.31-25.75 10.366-21.992 7.45-35.43 12.534-36.701 13.884-2.173 2.308-.202 4.407 4.442 4.734 2.654.187 3.263.157 15.593-.78 35.401-2.686 57.944-3.488 88.365-3.143 46.327.526 75.721 2.23 130.788 7.584 19.787 1.924 20.814 1.98 24.557 1.332l.066-.011c1.201-.203 1.53-1.825.399-2.335-2.911-1.31-4.893-1.604-22.048-3.261-57.509-5.556-87.871-7.36-132.059-7.842-23.239-.254-33.617-.116-50.627.674-11.629.54-42.371 2.494-46.696 2.967-2.359.259 8.133-3.625 26.504-9.81 23.239-7.825 27.934-10.149 28.304-14.005.417-4.348-3.529-6-16.878-7.066Z" />
+          </svg>
+          <span className="relative">made simple</span>
+        </span>{' '}
+        for small businesses.
+      </h1>
+      <p className="mx-auto mt-6 max-w-2xl text-lg tracking-tight text-slate-700">
+        Most bookkeeping software is accurate, but hard to use. We make the
+        opposite trade-off, and hope you don’t get audited.
+      </p>
+      <div className="mt-10 flex justify-center gap-x-6">
+        <Button href="/register">Get 6 months free</Button>
+        <Button
+          href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
+          variant="outline"
+        >
+          <svg
+            aria-hidden="true"
+            className="h-3 w-3 flex-none fill-blue-600 group-active:fill-current"
+          >
+            <path d="m9.997 6.91-7.583 3.447A1 1 0 0 1 1 9.447V2.553a1 1 0 0 1 1.414-.91L9.997 5.09c.782.355.782 1.465 0 1.82Z" />
+          </svg>
+          <span className="ml-3">Watch video</span>
+        </Button>
+      </div>
+      <div className="mt-36 lg:mt-44">
+        <p className="font-display text-base text-slate-900">
+          Trusted by these six companies so far
+        </p>
+        <ul
+          role="list"
+          className="mt-8 flex items-center justify-center gap-x-8 sm:flex-col sm:gap-x-0 sm:gap-y-10 xl:flex-row xl:gap-x-12 xl:gap-y-0"
+        >
+          {[
+            [
+              { name: 'Transistor', logo: logoTransistor },
+              { name: 'Tuple', logo: logoTuple },
+              { name: 'StaticKit', logo: logoStaticKit },
+            ],
+            [
+              { name: 'Mirage', logo: logoMirage },
+              { name: 'Laravel', logo: logoLaravel },
+              { name: 'Statamic', logo: logoStatamic },
+            ],
+          ].map((group, groupIndex) => (
+            <li key={groupIndex}>
+              <ul
+                role="list"
+                className="flex flex-col items-center gap-y-8 sm:flex-row sm:gap-x-12 sm:gap-y-0"
+              >
+                {group.map((company) => (
+                  <li key={company.name} className="flex">
+                    <Image src={company.logo} alt={company.name} unoptimized />
+                  </li>
+                ))}
+              </ul>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </Container>
+  )
+}

src/components/Logo.tsx

@@ -0,0 +1,32 @@
+export function Logo(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg aria-hidden="true" viewBox="0 0 109 40" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0 20c0 11.046 8.954 20 20 20s20-8.954 20-20S31.046 0 20 0 0 8.954 0 20Zm20 16c-7.264 0-13.321-5.163-14.704-12.02C4.97 22.358 6.343 21 8 21h24c1.657 0 3.031 1.357 2.704 2.98C33.32 30.838 27.264 36 20 36Z"
+        fill="#2563EB"
+      />
+      <path
+        d="M55.528 26.57V15.842H52V13.97h9.108v1.872h-3.636V26.57h-1.944Z"
+        fill="#0F172A"
+      />
+      <path
+        d="M83.084 26.57v-12.6h5.346c.744 0 1.416.18 2.016.54a3.773 3.773 0 0 1 1.44 1.44c.36.612.54 1.302.54 2.07 0 .78-.18 1.482-.54 2.106a4 4 0 0 1-1.44 1.494c-.6.36-1.272.54-2.016.54h-2.646v4.41h-2.7Zm2.664-6.84h2.376c.288 0 .546-.072.774-.216.228-.156.408-.36.54-.612a1.71 1.71 0 0 0 .216-.864c0-.324-.072-.606-.216-.846a1.394 1.394 0 0 0-.54-.576 1.419 1.419 0 0 0-.774-.216h-2.376v3.33ZM106.227 26.57V13.25h2.556v13.32h-2.556Z"
+        fill="#2563EB"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M95.906 26.102c.636.432 1.35.648 2.142.648.444 0 .864-.066 1.26-.198a4.25 4.25 0 0 0 1.062-.558 3.78 3.78 0 0 0 .702-.668v1.244h2.574v-9.522h-2.538v1.248a3.562 3.562 0 0 0-.648-.672 3.13 3.13 0 0 0-1.026-.558 3.615 3.615 0 0 0-1.278-.216c-.828 0-1.566.216-2.214.648-.648.42-1.164 1.002-1.548 1.746-.372.732-.558 1.578-.558 2.538 0 .96.186 1.812.558 2.556.372.744.876 1.332 1.512 1.764Zm4.104-1.908c-.36.228-.78.342-1.26.342-.468 0-.882-.114-1.242-.342a2.387 2.387 0 0 1-.828-.954c-.204-.42-.306-.906-.306-1.458 0-.54.102-1.014.306-1.422.204-.408.48-.726.828-.954.36-.24.774-.36 1.242-.36.48 0 .9.12 1.26.36.36.228.636.546.828.954.204.408.306.882.306 1.422 0 .552-.102 1.038-.306 1.458a2.218 2.218 0 0 1-.828.954Z"
+        fill="#2563EB"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="m76.322 23.197 2.595 3.373h2.268l-3.662-4.787 3.338-4.663h-2.196l-2.162 3.334-2.554-3.334h-2.34l3.652 4.71-3.634 4.74h2.196l2.5-3.373ZM62.738 26.102a3.78 3.78 0 0 0 2.142.648c.456 0 .888-.072 1.296-.216.42-.144.798-.336 1.134-.576a3.418 3.418 0 0 0 .864-.835v1.447h1.872v-9.45h-1.872v1.45a3.118 3.118 0 0 0-.72-.82 3.2 3.2 0 0 0-1.062-.612 4.033 4.033 0 0 0-1.35-.216c-.828 0-1.578.21-2.25.63-.66.42-1.188 1.002-1.584 1.746-.384.732-.576 1.572-.576 2.52 0 .936.192 1.776.576 2.52.384.744.894 1.332 1.53 1.764Zm4.122-1.476c-.432.276-.93.414-1.494.414a2.682 2.682 0 0 1-1.476-.414 2.987 2.987 0 0 1-1.008-1.134c-.24-.492-.36-1.05-.36-1.674 0-.612.12-1.158.36-1.638.252-.48.588-.858 1.008-1.134a2.682 2.682 0 0 1 1.476-.414c.564 0 1.062.138 1.494.414.432.276.768.654 1.008 1.134.252.48.378 1.026.378 1.638 0 .624-.126 1.182-.378 1.674-.24.48-.576.858-1.008 1.134Z"
+        fill="#0F172A"
+      />
+    </svg>
+  )
+}

src/components/NavLink.tsx

@@ -0,0 +1,18 @@
+import Link from 'next/link'
+
+export function NavLink({
+  href,
+  children,
+}: {
+  href: string
+  children: React.ReactNode
+}) {
+  return (
+    <Link
+      href={href}
+      className="inline-block rounded-lg px-2 py-1 text-sm text-slate-700 hover:bg-slate-100 hover:text-slate-900"
+    >
+      {children}
+    </Link>
+  )
+}

src/components/Pricing.tsx

@@ -0,0 +1,182 @@
+import clsx from 'clsx'
+
+import { Button } from '@/components/Button'
+import { Container } from '@/components/Container'
+
+function SwirlyDoodle(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg
+      aria-hidden="true"
+      viewBox="0 0 281 40"
+      preserveAspectRatio="none"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M240.172 22.994c-8.007 1.246-15.477 2.23-31.26 4.114-18.506 2.21-26.323 2.977-34.487 3.386-2.971.149-3.727.324-6.566 1.523-15.124 6.388-43.775 9.404-69.425 7.31-26.207-2.14-50.986-7.103-78-15.624C10.912 20.7.988 16.143.734 14.657c-.066-.381.043-.344 1.324.456 10.423 6.506 49.649 16.322 77.8 19.468 23.708 2.65 38.249 2.95 55.821 1.156 9.407-.962 24.451-3.773 25.101-4.692.074-.104.053-.155-.058-.135-1.062.195-13.863-.271-18.848-.687-16.681-1.389-28.722-4.345-38.142-9.364-15.294-8.15-7.298-19.232 14.802-20.514 16.095-.934 32.793 1.517 47.423 6.96 13.524 5.033 17.942 12.326 11.463 18.922l-.859.874.697-.006c2.681-.026 15.304-1.302 29.208-2.953 25.845-3.07 35.659-4.519 54.027-7.978 9.863-1.858 11.021-2.048 13.055-2.145a61.901 61.901 0 0 0 4.506-.417c1.891-.259 2.151-.267 1.543-.047-.402.145-2.33.913-4.285 1.707-4.635 1.882-5.202 2.07-8.736 2.903-3.414.805-19.773 3.797-26.404 4.829Zm40.321-9.93c.1-.066.231-.085.29-.041.059.043-.024.096-.183.119-.177.024-.219-.007-.107-.079ZM172.299 26.22c9.364-6.058 5.161-12.039-12.304-17.51-11.656-3.653-23.145-5.47-35.243-5.576-22.552-.198-33.577 7.462-21.321 14.814 12.012 7.205 32.994 10.557 61.531 9.831 4.563-.116 5.372-.288 7.337-1.559Z"
+      />
+    </svg>
+  )
+}
+
+function CheckIcon({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg
+      aria-hidden="true"
+      className={clsx(
+        'h-6 w-6 flex-none fill-current stroke-current',
+        className,
+      )}
+      {...props}
+    >
+      <path
+        d="M9.307 12.248a.75.75 0 1 0-1.114 1.004l1.114-1.004ZM11 15.25l-.557.502a.75.75 0 0 0 1.15-.043L11 15.25Zm4.844-5.041a.75.75 0 0 0-1.188-.918l1.188.918Zm-7.651 3.043 2.25 2.5 1.114-1.004-2.25-2.5-1.114 1.004Zm3.4 2.457 4.25-5.5-1.187-.918-4.25 5.5 1.188.918Z"
+        strokeWidth={0}
+      />
+      <circle
+        cx={12}
+        cy={12}
+        r={8.25}
+        fill="none"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+function Plan({
+  name,
+  price,
+  description,
+  href,
+  features,
+  featured = false,
+}: {
+  name: string
+  price: string
+  description: string
+  href: string
+  features: Array<string>
+  featured?: boolean
+}) {
+  return (
+    <section
+      className={clsx(
+        'flex flex-col rounded-3xl px-6 sm:px-8',
+        featured ? 'order-first bg-blue-600 py-8 lg:order-none' : 'lg:py-8',
+      )}
+    >
+      <h3 className="mt-5 font-display text-lg text-white">{name}</h3>
+      <p
+        className={clsx(
+          'mt-2 text-base',
+          featured ? 'text-white' : 'text-slate-400',
+        )}
+      >
+        {description}
+      </p>
+      <p className="order-first font-display text-5xl font-light tracking-tight text-white">
+        {price}
+      </p>
+      <ul
+        role="list"
+        className={clsx(
+          'order-last mt-10 flex flex-col gap-y-3 text-sm',
+          featured ? 'text-white' : 'text-slate-200',
+        )}
+      >
+        {features.map((feature) => (
+          <li key={feature} className="flex">
+            <CheckIcon className={featured ? 'text-white' : 'text-slate-400'} />
+            <span className="ml-4">{feature}</span>
+          </li>
+        ))}
+      </ul>
+      <Button
+        href={href}
+        variant={featured ? 'solid' : 'outline'}
+        color="white"
+        className="mt-8"
+        aria-label={`Get started with the ${name} plan for ${price}`}
+      >
+        Get started
+      </Button>
+    </section>
+  )
+}
+
+export function Pricing() {
+  return (
+    <section
+      id="pricing"
+      aria-label="Pricing"
+      className="bg-slate-900 py-20 sm:py-32"
+    >
+      <Container>
+        <div className="md:text-center">
+          <h2 className="font-display text-3xl tracking-tight text-white sm:text-4xl">
+            <span className="relative whitespace-nowrap">
+              <SwirlyDoodle className="absolute top-1/2 left-0 h-[1em] w-full fill-blue-400" />
+              <span className="relative">Simple pricing,</span>
+            </span>{' '}
+            for everyone.
+          </h2>
+          <p className="mt-4 text-lg text-slate-400">
+            It doesn’t matter what size your business is, our software won’t
+            work well for you.
+          </p>
+        </div>
+        <div className="-mx-4 mt-16 grid max-w-2xl grid-cols-1 gap-y-10 sm:mx-auto lg:-mx-8 lg:max-w-none lg:grid-cols-3 xl:mx-0 xl:gap-x-8">
+          <Plan
+            name="Starter"
+            price="$9"
+            description="Good for anyone who is self-employed and just getting started."
+            href="/register"
+            features={[
+              'Send 10 quotes and invoices',
+              'Connect up to 2 bank accounts',
+              'Track up to 15 expenses per month',
+              'Manual payroll support',
+              'Export up to 3 reports',
+            ]}
+          />
+          <Plan
+            featured
+            name="Small business"
+            price="$15"
+            description="Perfect for small / medium sized businesses."
+            href="/register"
+            features={[
+              'Send 25 quotes and invoices',
+              'Connect up to 5 bank accounts',
+              'Track up to 50 expenses per month',
+              'Automated payroll support',
+              'Export up to 12 reports',
+              'Bulk reconcile transactions',
+              'Track in multiple currencies',
+            ]}
+          />
+          <Plan
+            name="Enterprise"
+            price="$39"
+            description="For even the biggest enterprise companies."
+            href="/register"
+            features={[
+              'Send unlimited quotes and invoices',
+              'Connect up to 15 bank accounts',
+              'Track up to 200 expenses per month',
+              'Automated payroll support',
+              'Export up to 25 reports, including TPS',
+            ]}
+          />
+        </div>
+      </Container>
+    </section>
+  )
+}

src/components/PrimaryFeatures.tsx

@@ -0,0 +1,158 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import Image from 'next/image'
+import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react'
+import clsx from 'clsx'
+
+import { Container } from '@/components/Container'
+import backgroundImage from '@/images/background-features.jpg'
+import screenshotExpenses from '@/images/screenshots/expenses.png'
+import screenshotPayroll from '@/images/screenshots/payroll.png'
+import screenshotReporting from '@/images/screenshots/reporting.png'
+import screenshotVatReturns from '@/images/screenshots/vat-returns.png'
+
+const features = [
+  {
+    title: 'Payroll',
+    description:
+      "Keep track of everyone's salaries and whether or not they've been paid. Direct deposit not supported.",
+    image: screenshotPayroll,
+  },
+  {
+    title: 'Claim expenses',
+    description:
+      "All of your receipts organized into one place, as long as you don't mind typing in the data by hand.",
+    image: screenshotExpenses,
+  },
+  {
+    title: 'VAT handling',
+    description:
+      "We only sell our software to companies who don't deal with VAT at all, so technically we do all the VAT stuff they need.",
+    image: screenshotVatReturns,
+  },
+  {
+    title: 'Reporting',
+    description:
+      'Easily export your data into an Excel spreadsheet where you can do whatever the hell you want with it.',
+    image: screenshotReporting,
+  },
+]
+
+export function PrimaryFeatures() {
+  let [tabOrientation, setTabOrientation] = useState<'horizontal' | 'vertical'>(
+    'horizontal',
+  )
+
+  useEffect(() => {
+    let lgMediaQuery = window.matchMedia('(min-width: 1024px)')
+
+    function onMediaQueryChange({ matches }: { matches: boolean }) {
+      setTabOrientation(matches ? 'vertical' : 'horizontal')
+    }
+
+    onMediaQueryChange(lgMediaQuery)
+    lgMediaQuery.addEventListener('change', onMediaQueryChange)
+
+    return () => {
+      lgMediaQuery.removeEventListener('change', onMediaQueryChange)
+    }
+  }, [])
+
+  return (
+    <section
+      id="features"
+      aria-label="Features for running your books"
+      className="relative overflow-hidden bg-blue-600 pt-20 pb-28 sm:py-32"
+    >
+      <Image
+        className="absolute top-1/2 left-1/2 max-w-none translate-x-[-44%] translate-y-[-42%]"
+        src={backgroundImage}
+        alt=""
+        width={2245}
+        height={1636}
+        unoptimized
+      />
+      <Container className="relative">
+        <div className="max-w-2xl md:mx-auto md:text-center xl:max-w-none">
+          <h2 className="font-display text-3xl tracking-tight text-white sm:text-4xl md:text-5xl">
+            Everything you need to run your books.
+          </h2>
+          <p className="mt-6 text-lg tracking-tight text-blue-100">
+            Well everything you need if you aren’t that picky about minor
+            details like tax compliance.
+          </p>
+        </div>
+        <TabGroup
+          className="mt-16 grid grid-cols-1 items-center gap-y-2 pt-10 sm:gap-y-6 md:mt-20 lg:grid-cols-12 lg:pt-0"
+          vertical={tabOrientation === 'vertical'}
+        >
+          {({ selectedIndex }) => (
+            <>
+              <div className="-mx-4 flex overflow-x-auto pb-4 sm:mx-0 sm:overflow-visible sm:pb-0 lg:col-span-5">
+                <TabList className="relative z-10 flex gap-x-4 px-4 whitespace-nowrap sm:mx-auto sm:px-0 lg:mx-0 lg:block lg:gap-x-0 lg:gap-y-1 lg:whitespace-normal">
+                  {features.map((feature, featureIndex) => (
+                    <div
+                      key={feature.title}
+                      className={clsx(
+                        'group relative rounded-full px-4 py-1 lg:rounded-l-xl lg:rounded-r-none lg:p-6',
+                        selectedIndex === featureIndex
+                          ? 'bg-white lg:bg-white/10 lg:ring-1 lg:ring-white/10 lg:ring-inset'
+                          : 'hover:bg-white/10 lg:hover:bg-white/5',
+                      )}
+                    >
+                      <h3>
+                        <Tab
+                          className={clsx(
+                            'font-display text-lg data-selected:not-data-focus:outline-hidden',
+                            selectedIndex === featureIndex
+                              ? 'text-blue-600 lg:text-white'
+                              : 'text-blue-100 hover:text-white lg:text-white',
+                          )}
+                        >
+                          <span className="absolute inset-0 rounded-full lg:rounded-l-xl lg:rounded-r-none" />
+                          {feature.title}
+                        </Tab>
+                      </h3>
+                      <p
+                        className={clsx(
+                          'mt-2 hidden text-sm lg:block',
+                          selectedIndex === featureIndex
+                            ? 'text-white'
+                            : 'text-blue-100 group-hover:text-white',
+                        )}
+                      >
+                        {feature.description}
+                      </p>
+                    </div>
+                  ))}
+                </TabList>
+              </div>
+              <TabPanels className="lg:col-span-7">
+                {features.map((feature) => (
+                  <TabPanel key={feature.title} unmount={false}>
+                    <div className="relative sm:px-6 lg:hidden">
+                      <div className="absolute -inset-x-4 top-[-6.5rem] bottom-[-4.25rem] bg-white/10 ring-1 ring-white/10 ring-inset sm:inset-x-0 sm:rounded-t-xl" />
+                      <p className="relative mx-auto max-w-2xl text-base text-white sm:text-center">
+                        {feature.description}
+                      </p>
+                    </div>
+                    <div className="mt-10 w-180 overflow-hidden rounded-xl bg-slate-50 shadow-xl shadow-blue-900/20 sm:w-auto lg:mt-0 lg:w-271.25">
+                      <Image
+                        className="w-full"
+                        src={feature.image}
+                        alt=""
+                        priority
+                        sizes="(min-width: 1024px) 67.8125rem, (min-width: 640px) 100vw, 45rem"
+                      />
+                    </div>
+                  </TabPanel>
+                ))}
+              </TabPanels>
+            </>
+          )}
+        </TabGroup>
+      </Container>
+    </section>
+  )
+}

src/components/SecondaryFeatures.tsx

@@ -0,0 +1,249 @@
+'use client'
+
+import { useId } from 'react'
+import Image, { type ImageProps } from 'next/image'
+import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react'
+import clsx from 'clsx'
+
+import { Container } from '@/components/Container'
+import screenshotContacts from '@/images/screenshots/contacts.png'
+import screenshotInventory from '@/images/screenshots/inventory.png'
+import screenshotProfitLoss from '@/images/screenshots/profit-loss.png'
+
+interface Feature {
+  name: React.ReactNode
+  summary: string
+  description: string
+  image: ImageProps['src']
+  icon: React.ComponentType
+}
+
+const features: Array<Feature> = [
+  {
+    name: 'Reporting',
+    summary: 'Stay on top of things with always up-to-date reporting features.',
+    description:
+      'We talked about reporting in the section above but we needed three items here, so mentioning it one more time for posterity.',
+    image: screenshotProfitLoss,
+    icon: function ReportingIcon() {
+      let id = useId()
+      return (
+        <>
+          <defs>
+            <linearGradient
+              id={id}
+              x1="11.5"
+              y1={18}
+              x2={36}
+              y2="15.5"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop offset=".194" stopColor="#fff" />
+              <stop offset={1} stopColor="#6692F1" />
+            </linearGradient>
+          </defs>
+          <path
+            d="m30 15-4 5-4-11-4 18-4-11-4 7-4-5"
+            stroke={`url(#${id})`}
+            strokeWidth={2}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </>
+      )
+    },
+  },
+  {
+    name: 'Inventory',
+    summary:
+      'Never lose track of what’s in stock with accurate inventory tracking.',
+    description:
+      'We don’t offer this as part of our software but that statement is inarguably true. Accurate inventory tracking would help you for sure.',
+    image: screenshotInventory,
+    icon: function InventoryIcon() {
+      return (
+        <>
+          <path
+            opacity=".5"
+            d="M8 17a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-2Z"
+            fill="#fff"
+          />
+          <path
+            opacity=".3"
+            d="M8 24a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-2Z"
+            fill="#fff"
+          />
+          <path
+            d="M8 10a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-2Z"
+            fill="#fff"
+          />
+        </>
+      )
+    },
+  },
+  {
+    name: 'Contacts',
+    summary:
+      'Organize all of your contacts, service providers, and invoices in one place.',
+    description:
+      'This also isn’t actually a feature, it’s just some friendly advice. We definitely recommend that you do this, you’ll feel really organized and professional.',
+    image: screenshotContacts,
+    icon: function ContactsIcon() {
+      return (
+        <>
+          <path
+            opacity=".5"
+            d="M25.778 25.778c.39.39 1.027.393 1.384-.028A11.952 11.952 0 0 0 30 18c0-6.627-5.373-12-12-12S6 11.373 6 18c0 2.954 1.067 5.659 2.838 7.75.357.421.993.419 1.384.028.39-.39.386-1.02.036-1.448A9.959 9.959 0 0 1 8 18c0-5.523 4.477-10 10-10s10 4.477 10 10a9.959 9.959 0 0 1-2.258 6.33c-.35.427-.354 1.058.036 1.448Z"
+            fill="#fff"
+          />
+          <path
+            d="M12 28.395V28a6 6 0 0 1 12 0v.395A11.945 11.945 0 0 1 18 30c-2.186 0-4.235-.584-6-1.605ZM21 16.5c0-1.933-.5-3.5-3-3.5s-3 1.567-3 3.5 1.343 3.5 3 3.5 3-1.567 3-3.5Z"
+            fill="#fff"
+          />
+        </>
+      )
+    },
+  },
+]
+
+function Feature({
+  feature,
+  isActive,
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<'div'> & {
+  feature: Feature
+  isActive: boolean
+}) {
+  return (
+    <div
+      className={clsx(className, !isActive && 'opacity-75 hover:opacity-100')}
+      {...props}
+    >
+      <div
+        className={clsx(
+          'w-9 rounded-lg',
+          isActive ? 'bg-blue-600' : 'bg-slate-500',
+        )}
+      >
+        <svg aria-hidden="true" className="h-9 w-9" fill="none">
+          <feature.icon />
+        </svg>
+      </div>
+      <h3
+        className={clsx(
+          'mt-6 text-sm font-medium',
+          isActive ? 'text-blue-600' : 'text-slate-600',
+        )}
+      >
+        {feature.name}
+      </h3>
+      <p className="mt-2 font-display text-xl text-slate-900">
+        {feature.summary}
+      </p>
+      <p className="mt-4 text-sm text-slate-600">{feature.description}</p>
+    </div>
+  )
+}
+
+function FeaturesMobile() {
+  return (
+    <div className="-mx-4 mt-20 flex flex-col gap-y-10 overflow-hidden px-4 sm:-mx-6 sm:px-6 lg:hidden">
+      {features.map((feature) => (
+        <div key={feature.summary}>
+          <Feature feature={feature} className="mx-auto max-w-2xl" isActive />
+          <div className="relative mt-10 pb-10">
+            <div className="absolute -inset-x-4 top-8 bottom-0 bg-slate-200 sm:-inset-x-6" />
+            <div className="relative mx-auto w-211 overflow-hidden rounded-xl bg-white shadow-lg ring-1 shadow-slate-900/5 ring-slate-500/10">
+              <Image
+                className="w-full"
+                src={feature.image}
+                alt=""
+                sizes="52.75rem"
+              />
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function FeaturesDesktop() {
+  return (
+    <TabGroup className="hidden lg:mt-20 lg:block">
+      {({ selectedIndex }) => (
+        <>
+          <TabList className="grid grid-cols-3 gap-x-8">
+            {features.map((feature, featureIndex) => (
+              <Feature
+                key={feature.summary}
+                feature={{
+                  ...feature,
+                  name: (
+                    <Tab className="data-selected:not-data-focus:outline-hidden">
+                      <span className="absolute inset-0" />
+                      {feature.name}
+                    </Tab>
+                  ),
+                }}
+                isActive={featureIndex === selectedIndex}
+                className="relative"
+              />
+            ))}
+          </TabList>
+          <TabPanels className="relative mt-20 overflow-hidden rounded-4xl bg-slate-200 px-14 py-16 xl:px-16">
+            <div className="-mx-5 flex">
+              {features.map((feature, featureIndex) => (
+                <TabPanel
+                  static
+                  key={feature.summary}
+                  className={clsx(
+                    'px-5 transition duration-500 ease-in-out data-selected:not-data-focus:outline-hidden',
+                    featureIndex !== selectedIndex && 'opacity-60',
+                  )}
+                  style={{ transform: `translateX(-${selectedIndex * 100}%)` }}
+                  aria-hidden={featureIndex !== selectedIndex}
+                >
+                  <div className="w-211 overflow-hidden rounded-xl bg-white shadow-lg ring-1 shadow-slate-900/5 ring-slate-500/10">
+                    <Image
+                      className="w-full"
+                      src={feature.image}
+                      alt=""
+                      sizes="52.75rem"
+                    />
+                  </div>
+                </TabPanel>
+              ))}
+            </div>
+            <div className="pointer-events-none absolute inset-0 rounded-4xl ring-1 ring-slate-900/10 ring-inset" />
+          </TabPanels>
+        </>
+      )}
+    </TabGroup>
+  )
+}
+
+export function SecondaryFeatures() {
+  return (
+    <section
+      id="secondary-features"
+      aria-label="Features for simplifying everyday business tasks"
+      className="pt-20 pb-14 sm:pt-32 sm:pb-20 lg:pb-32"
+    >
+      <Container>
+        <div className="mx-auto max-w-2xl md:text-center">
+          <h2 className="font-display text-3xl tracking-tight text-slate-900 sm:text-4xl">
+            Simplify everyday business tasks.
+          </h2>
+          <p className="mt-4 text-lg tracking-tight text-slate-700">
+            Because you’d probably be a little confused if we suggested you
+            complicate your everyday business tasks instead.
+          </p>
+        </div>
+        <FeaturesMobile />
+        <FeaturesDesktop />
+      </Container>
+    </section>
+  )
+}

src/components/SlimLayout.tsx

@@ -0,0 +1,25 @@
+import Image from 'next/image'
+
+import backgroundImage from '@/images/background-auth.jpg'
+
+export function SlimLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <div className="relative flex min-h-full shrink-0 justify-center md:px-12 lg:px-0">
+        <div className="relative z-10 flex flex-1 flex-col bg-white px-4 py-10 shadow-2xl sm:justify-center md:flex-none md:px-28">
+          <main className="mx-auto w-full max-w-md sm:px-4 md:w-96 md:max-w-sm md:px-0">
+            {children}
+          </main>
+        </div>
+        <div className="hidden sm:contents lg:relative lg:block lg:flex-1">
+          <Image
+            className="absolute inset-0 h-full w-full object-cover"
+            src={backgroundImage}
+            alt=""
+            unoptimized
+          />
+        </div>
+      </div>
+    </>
+  )
+}

src/components/Testimonials.tsx

@@ -0,0 +1,144 @@
+import Image from 'next/image'
+
+import { Container } from '@/components/Container'
+import avatarImage1 from '@/images/avatars/avatar-1.png'
+import avatarImage2 from '@/images/avatars/avatar-2.png'
+import avatarImage3 from '@/images/avatars/avatar-3.png'
+import avatarImage4 from '@/images/avatars/avatar-4.png'
+import avatarImage5 from '@/images/avatars/avatar-5.png'
+
+const testimonials = [
+  [
+    {
+      content:
+        'TaxPal is so easy to use I can’t help but wonder if it’s really doing the things the government expects me to do.',
+      author: {
+        name: 'Sheryl Berge',
+        role: 'CEO at Lynch LLC',
+        image: avatarImage1,
+      },
+    },
+    {
+      content:
+        'I’m trying to get a hold of someone in support, I’m in a lot of trouble right now and they are saying it has something to do with my books. Please get back to me right away.',
+      author: {
+        name: 'Amy Hahn',
+        role: 'Director at Velocity Industries',
+        image: avatarImage4,
+      },
+    },
+  ],
+  [
+    {
+      content:
+        'The best part about TaxPal is every time I pay my employees, my bank balance doesn’t go down like it used to. Looking forward to spending this extra cash when I figure out why my card is being declined.',
+      author: {
+        name: 'Leland Kiehn',
+        role: 'Founder of Kiehn and Sons',
+        image: avatarImage5,
+      },
+    },
+    {
+      content:
+        'There are so many things I had to do with my old software that I just don’t do at all with TaxPal. Suspicious but I can’t say I don’t love it.',
+      author: {
+        name: 'Erin Powlowski',
+        role: 'COO at Armstrong Inc',
+        image: avatarImage2,
+      },
+    },
+  ],
+  [
+    {
+      content:
+        'I used to have to remit tax to the EU and with TaxPal I somehow don’t have to do that anymore. Nervous to travel there now though.',
+      author: {
+        name: 'Peter Renolds',
+        role: 'Founder of West Inc',
+        image: avatarImage3,
+      },
+    },
+    {
+      content:
+        'This is the fourth email I’ve sent to your support team. I am literally being held in jail for tax fraud. Please answer your damn emails, this is important.',
+      author: {
+        name: 'Amy Hahn',
+        role: 'Director at Velocity Industries',
+        image: avatarImage4,
+      },
+    },
+  ],
+]
+
+function QuoteIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg aria-hidden="true" width={105} height={78} {...props}>
+      <path d="M25.086 77.292c-4.821 0-9.115-1.205-12.882-3.616-3.767-2.561-6.78-6.102-9.04-10.622C1.054 58.534 0 53.411 0 47.686c0-5.273.904-10.396 2.712-15.368 1.959-4.972 4.746-9.567 8.362-13.786a59.042 59.042 0 0 1 12.43-11.3C28.325 3.917 33.599 1.507 39.324 0l11.074 13.786c-6.479 2.561-11.677 5.951-15.594 10.17-3.767 4.219-5.65 7.835-5.65 10.848 0 1.356.377 2.863 1.13 4.52.904 1.507 2.637 3.089 5.198 4.746 3.767 2.41 6.328 4.972 7.684 7.684 1.507 2.561 2.26 5.5 2.26 8.814 0 5.123-1.959 9.19-5.876 12.204-3.767 3.013-8.588 4.52-14.464 4.52Zm54.24 0c-4.821 0-9.115-1.205-12.882-3.616-3.767-2.561-6.78-6.102-9.04-10.622-2.11-4.52-3.164-9.643-3.164-15.368 0-5.273.904-10.396 2.712-15.368 1.959-4.972 4.746-9.567 8.362-13.786a59.042 59.042 0 0 1 12.43-11.3C82.565 3.917 87.839 1.507 93.564 0l11.074 13.786c-6.479 2.561-11.677 5.951-15.594 10.17-3.767 4.219-5.65 7.835-5.65 10.848 0 1.356.377 2.863 1.13 4.52.904 1.507 2.637 3.089 5.198 4.746 3.767 2.41 6.328 4.972 7.684 7.684 1.507 2.561 2.26 5.5 2.26 8.814 0 5.123-1.959 9.19-5.876 12.204-3.767 3.013-8.588 4.52-14.464 4.52Z" />
+    </svg>
+  )
+}
+
+export function Testimonials() {
+  return (
+    <section
+      id="testimonials"
+      aria-label="What our customers are saying"
+      className="bg-slate-50 py-20 sm:py-32"
+    >
+      <Container>
+        <div className="mx-auto max-w-2xl md:text-center">
+          <h2 className="font-display text-3xl tracking-tight text-slate-900 sm:text-4xl">
+            Loved by businesses worldwide.
+          </h2>
+          <p className="mt-4 text-lg tracking-tight text-slate-700">
+            Our software is so simple that people can’t help but fall in love
+            with it. Simplicity is easy when you just skip tons of
+            mission-critical features.
+          </p>
+        </div>
+        <ul
+          role="list"
+          className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-6 sm:gap-8 lg:mt-20 lg:max-w-none lg:grid-cols-3"
+        >
+          {testimonials.map((column, columnIndex) => (
+            <li key={columnIndex}>
+              <ul role="list" className="flex flex-col gap-y-6 sm:gap-y-8">
+                {column.map((testimonial, testimonialIndex) => (
+                  <li key={testimonialIndex}>
+                    <figure className="relative rounded-2xl bg-white p-6 shadow-xl shadow-slate-900/10">
+                      <QuoteIcon className="absolute top-6 left-6 fill-slate-100" />
+                      <blockquote className="relative">
+                        <p className="text-lg tracking-tight text-slate-900">
+                          {testimonial.content}
+                        </p>
+                      </blockquote>
+                      <figcaption className="relative mt-6 flex items-center justify-between border-t border-slate-100 pt-6">
+                        <div>
+                          <div className="font-display text-base text-slate-900">
+                            {testimonial.author.name}
+                          </div>
+                          <div className="mt-1 text-sm text-slate-500">
+                            {testimonial.author.role}
+                          </div>
+                        </div>
+                        <div className="overflow-hidden rounded-full bg-slate-50">
+                          <Image
+                            className="h-14 w-14 object-cover"
+                            src={testimonial.author.image}
+                            alt=""
+                            width={56}
+                            height={56}
+                          />
+                        </div>
+                      </figcaption>
+                    </figure>
+                  </li>
+                ))}
+              </ul>
+            </li>
+          ))}
+        </ul>
+      </Container>
+    </section>
+  )
+}