init

src/app/(auth)/login/page.tsx

@@ -0,0 +1,59 @@
+import { type Metadata } from 'next'
+import Link from 'next/link'
+
+import { Button } from '@/components/Button'
+import { TextField } from '@/components/Fields'
+import { Logo } from '@/components/Logo'
+import { SlimLayout } from '@/components/SlimLayout'
+
+export const metadata: Metadata = {
+  title: 'Sign In',
+}
+
+export default function Login() {
+  return (
+    <SlimLayout>
+      <div className="flex">
+        <Link href="/" aria-label="Home">
+          <Logo className="h-10 w-auto" />
+        </Link>
+      </div>
+      <h2 className="mt-20 text-lg font-semibold text-gray-900">
+        Sign in to your account
+      </h2>
+      <p className="mt-2 text-sm text-gray-700">
+        Don’t have an account?{' '}
+        <Link
+          href="/register"
+          className="font-medium text-blue-600 hover:underline"
+        >
+          Sign up
+        </Link>{' '}
+        for a free trial.
+      </p>
+      <form action="#" className="mt-10 grid grid-cols-1 gap-y-8">
+        <TextField
+          label="Email address"
+          name="email"
+          type="email"
+          autoComplete="email"
+          required
+        />
+        <TextField
+          label="Password"
+          name="password"
+          type="password"
+          autoComplete="current-password"
+          required
+        />
+        <div>
+          <Button type="submit" variant="solid" color="blue" className="w-full">
+            <span>
+              Sign in <span aria-hidden="true">&rarr;</span>
+            </span>
+          </Button>
+        </div>
+      </form>
+    </SlimLayout>
+  )
+}

src/app/(auth)/register/page.tsx

@@ -0,0 +1,88 @@
+import { type Metadata } from 'next'
+import Link from 'next/link'
+
+import { Button } from '@/components/Button'
+import { SelectField, TextField } from '@/components/Fields'
+import { Logo } from '@/components/Logo'
+import { SlimLayout } from '@/components/SlimLayout'
+
+export const metadata: Metadata = {
+  title: 'Sign Up',
+}
+
+export default function Register() {
+  return (
+    <SlimLayout>
+      <div className="flex">
+        <Link href="/" aria-label="Home">
+          <Logo className="h-10 w-auto" />
+        </Link>
+      </div>
+      <h2 className="mt-20 text-lg font-semibold text-gray-900">
+        Get started for free
+      </h2>
+      <p className="mt-2 text-sm text-gray-700">
+        Already registered?{' '}
+        <Link
+          href="/login"
+          className="font-medium text-blue-600 hover:underline"
+        >
+          Sign in
+        </Link>{' '}
+        to your account.
+      </p>
+      <form
+        action="#"
+        className="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-2"
+      >
+        <TextField
+          label="First name"
+          name="first_name"
+          type="text"
+          autoComplete="given-name"
+          required
+        />
+        <TextField
+          label="Last name"
+          name="last_name"
+          type="text"
+          autoComplete="family-name"
+          required
+        />
+        <TextField
+          className="col-span-full"
+          label="Email address"
+          name="email"
+          type="email"
+          autoComplete="email"
+          required
+        />
+        <TextField
+          className="col-span-full"
+          label="Password"
+          name="password"
+          type="password"
+          autoComplete="new-password"
+          required
+        />
+        <SelectField
+          className="col-span-full"
+          label="How did you hear about us?"
+          name="referral_source"
+        >
+          <option>AltaVista search</option>
+          <option>Super Bowl commercial</option>
+          <option>Our route 34 city bus ad</option>
+          <option>The “Never Use This” podcast</option>
+        </SelectField>
+        <div className="col-span-full">
+          <Button type="submit" variant="solid" color="blue" className="w-full">
+            <span>
+              Sign up <span aria-hidden="true">&rarr;</span>
+            </span>
+          </Button>
+        </div>
+      </form>
+    </SlimLayout>
+  )
+}

src/app/layout.tsx

@@ -0,0 +1,45 @@
+import { type Metadata } from 'next'
+import { Inter, Lexend } from 'next/font/google'
+import clsx from 'clsx'
+
+import '@/styles/tailwind.css'
+
+export const metadata: Metadata = {
+  title: {
+    template: '%s - TaxPal',
+    default: 'TaxPal - Accounting made simple for small businesses',
+  },
+  description:
+    'Most bookkeeping software is accurate, but hard to use. We make the opposite trade-off, and hope you don’t get audited.',
+}
+
+const inter = Inter({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-inter',
+})
+
+const lexend = Lexend({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-lexend',
+})
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html
+      lang="en"
+      className={clsx(
+        'h-full scroll-smooth bg-white antialiased',
+        inter.variable,
+        lexend.variable,
+      )}
+    >
+      <body className="flex h-full flex-col">{children}</body>
+    </html>
+  )
+}

src/app/not-found.tsx

@@ -0,0 +1,27 @@
+import Link from 'next/link'
+
+import { Button } from '@/components/Button'
+import { Logo } from '@/components/Logo'
+import { SlimLayout } from '@/components/SlimLayout'
+
+export default function NotFound() {
+  return (
+    <SlimLayout>
+      <div className="flex">
+        <Link href="/" aria-label="Home">
+          <Logo className="h-10 w-auto" />
+        </Link>
+      </div>
+      <p className="mt-20 text-sm font-medium text-gray-700">404</p>
+      <h1 className="mt-3 text-lg font-semibold text-gray-900">
+        Page not found
+      </h1>
+      <p className="mt-3 text-sm text-gray-700">
+        Sorry, we couldn’t find the page you’re looking for.
+      </p>
+      <Button href="/" className="mt-10">
+        Go back home
+      </Button>
+    </SlimLayout>
+  )
+}

src/app/page.tsx

@@ -0,0 +1,27 @@
+import { CallToAction } from '@/components/CallToAction'
+import { Faqs } from '@/components/Faqs'
+import { Footer } from '@/components/Footer'
+import { Header } from '@/components/Header'
+import { Hero } from '@/components/Hero'
+import { Pricing } from '@/components/Pricing'
+import { PrimaryFeatures } from '@/components/PrimaryFeatures'
+import { SecondaryFeatures } from '@/components/SecondaryFeatures'
+import { Testimonials } from '@/components/Testimonials'
+
+export default function Home() {
+  return (
+    <>
+      <Header />
+      <main>
+        <Hero />
+        <PrimaryFeatures />
+        <SecondaryFeatures />
+        <CallToAction />
+        <Testimonials />
+        <Pricing />
+        <Faqs />
+      </main>
+      <Footer />
+    </>
+  )
+}