Merge pull request #7 from bartvdbraak/feat/content-and-style

New content, style and features
2025-04-27 17:41:21 +00:00 · 2023-06-15 01:56:47 +02:00 · 2023-06-15 01:56:47 +02:00 · ddfc979819
commit ddfc979819
parent ecd4af2fb2 43713f721a
26 changed files with 360 additions and 73 deletions
--- a/.depcheckrc
+++ b/.depcheckrc
@ -1,2 +1,2 @@
-ignores: ["@types/node", "@types/react-dom", "autoprefixer", "postcss", "@commitlint/config-conventional", "prettier"]
+ignores: ["@types/node", "@types/react-dom", "autoprefixer", "postcss", "@commitlint/config-conventional", "prettier", "@t3-oss/env-nextjs"]
 skip-missing: false
--- a/.env.example
+++ b/.env.example
@ -0,0 +1,4 @@
+# -----------------------------------------------------------------------------
+# App
+# -----------------------------------------------------------------------------
+NEXT_PUBLIC_APP_URL=http://localhost:3000
--- a/app/layout.tsx
+++ b/app/layout.tsx
@ -1,79 +1,96 @@
-import { Inter, Fjalla_One } from "next/font/google";
+import { Inter as FontSans } from "next/font/google";
+import localFont from "next/font/local";

+import "@/styles/globals.css";
+import { siteConfig } from "@/config/site";
+import { absoluteUrl, cn } from "@/lib/utils";
+import { Analytics } from "@/components/analytics";
+import { TailwindIndicator } from "@/components/tailwind-indicator";
 import { ThemeProvider } from "@/components/theme-provider";
-import "tailwindcss/tailwind.css";

-import { Metadata } from "next";
-
-export const metadata: Metadata = {
+export const metadata = {
  title: {
-    default: "hellob.art",
-    template: "%s | hellob.art",
+    default: siteConfig.name,
+    template: `%s | ${siteConfig.name}`,
  },
-  description: "a simple portfolio made by bart van der braak",
-  metadataBase: new URL("https://hellob.art"),
+  description: siteConfig.description,
+  keywords: [
+    "Next.js",
+    "React",
+    "Tailwind CSS",
+    "Server Components",
+    "Radix UI",
+  ],
+  authors: [
+    {
+      name: "Bart van der Braak",
+      url: siteConfig.url,
+    },
+  ],
+  creator: "shadcn",
+  themeColor: [
+    { media: "(prefers-color-scheme: light)", color: "white" },
+    { media: "(prefers-color-scheme: dark)", color: "black" },
+  ],
  openGraph: {
-    title: "hellob.art",
-    description: "a simple portfolio made by bart van der braak",
-    url: "https://hellob.art",
-    siteName: "hellob.art",
-    locale: "en-US",
    type: "website",
-  },
-  robots: {
-    index: true,
-    follow: true,
-    googleBot: {
-      index: true,
-      follow: true,
-      "max-video-preview": -1,
-      "max-image-preview": "large",
-      "max-snippet": -1,
-    },
+    locale: "en_US",
+    url: siteConfig.url,
+    title: siteConfig.name,
+    description: siteConfig.description,
+    siteName: siteConfig.name,
  },
  twitter: {
-    title: "hellob.art",
    card: "summary_large_image",
+    title: siteConfig.name,
+    description: siteConfig.description,
+    images: [`${siteConfig.url}/og.jpg`],
+    creator: "@bartvdbraak",
  },
  icons: {
-    shortcut: "/favicon.png",
+    icon: "/favicon.ico",
+    shortcut: "/favicon-16x16.png",
+    apple: "/apple-touch-icon.png",
  },
+  manifest: `${siteConfig.url}/site.webmanifest`,
 };

 interface RootLayoutProps {
  children: React.ReactNode;
 }

-const inter = Inter({
+const fontSans = FontSans({
  subsets: ["latin"],
-  variable: "--font-inter",
+  variable: "--font-sans",
 });

-const fjallaOne = Fjalla_One({
-  subsets: ["latin"],
-  weight: "400",
-  variable: "--font-fjalla-one",
+// Font files can be colocated inside of `pages`
+const fontHeading = localFont({
+  src: "../assets/fonts/CalSans-SemiBold.woff2",
+  variable: "--font-heading",
 });

 interface RootLayoutProps {
  children: React.ReactNode;
 }

-export default async function RootLayout({ children }: RootLayoutProps) {
+export default function RootLayout({ children }: RootLayoutProps) {
  return (
-    <>
-      <html
-        lang="en"
-        suppressHydrationWarning
-        className={[inter.variable, fjallaOne.variable].join(" ")}
-      >
+    <html lang="en" suppressHydrationWarning>
      <head />
-        <body className="min-h-screen antialiased">
-          <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
+      <body
+        className={cn(
+          "min-h-screen bg-background font-sans antialiased",
+          fontSans.variable,
+          fontHeading.variable
+        )}
+      >
+        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
          {children}
+          <Analytics />
+          <TailwindIndicator />
        </ThemeProvider>
      </body>
    </html>
-    </>
  );
 }
--- a/assets/fonts/CalSans-SemiBold.ttf
+++ b/assets/fonts/CalSans-SemiBold.ttf
--- a/assets/fonts/CalSans-SemiBold.woff
+++ b/assets/fonts/CalSans-SemiBold.woff
--- a/assets/fonts/CalSans-SemiBold.woff2
+++ b/assets/fonts/CalSans-SemiBold.woff2
--- a/assets/fonts/Inter-Bold.ttf
+++ b/assets/fonts/Inter-Bold.ttf
--- a/assets/fonts/Inter-Regular.ttf
+++ b/assets/fonts/Inter-Regular.ttf
--- a/components/analytics.tsx
+++ b/components/analytics.tsx
@ -0,0 +1,7 @@
+"use client";
+
+import { Analytics as VercelAnalytics } from "@vercel/analytics/react";
+
+export function Analytics() {
+  return <VercelAnalytics />;
+}
--- a/components/tailwind-indicator.tsx
+++ b/components/tailwind-indicator.tsx
@ -0,0 +1,16 @@
+export function TailwindIndicator() {
+  if (process.env.NODE_ENV === "production") return null;
+
+  return (
+    <div className="fixed bottom-1 left-1 z-50 flex h-6 w-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-white">
+      <div className="block sm:hidden">xs</div>
+      <div className="hidden sm:block md:hidden lg:hidden xl:hidden 2xl:hidden">
+        sm
+      </div>
+      <div className="hidden md:block lg:hidden xl:hidden 2xl:hidden">md</div>
+      <div className="hidden lg:block xl:hidden 2xl:hidden">lg</div>
+      <div className="hidden xl:block 2xl:hidden">xl</div>
+      <div className="hidden 2xl:block">2xl</div>
+    </div>
+  );
+}
--- a/config/site.ts
+++ b/config/site.ts
@ -1,7 +1,6 @@
 export const siteConfig = {
-  name: "Taxonomy",
-  description:
-    "An open source application built using the new router, server components and everything new in Next.js 13.",
+  name: "hellob.art",
+  description: "a simple portfolio made by bart van der braak.",
  url: "https://hellob.art",
  ogImage: "https://hellob.art/og.jpg",
  links: {
--- a/env.mjs
+++ b/env.mjs
@ -0,0 +1,15 @@
+import { createEnv } from "@t3-oss/env-nextjs";
+import { z } from "zod";
+
+export const env = createEnv({
+  server: {
+    // This is optional because it's only used in development.
+    // See https://next-auth.js.org/deployment.
+  },
+  client: {
+    NEXT_PUBLIC_APP_URL: z.string().min(1),
+  },
+  runtimeEnv: {
+    NEXT_PUBLIC_APP_URL: process.env.NEXT_PUBLIC_APP_URL,
+  },
+});
--- a/lib/utils.ts
+++ b/lib/utils.ts
@ -1,6 +1,8 @@
 import { ClassValue, clsx } from "clsx";
 import { twMerge } from "tailwind-merge";

+import { env } from "@/env.mjs";
+
 export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
 }
@ -13,3 +15,7 @@ export function formatDate(input: string | number): string {
    year: "numeric",
  });
 }
+
+export function absoluteUrl(path: string) {
+  return `${env.NEXT_PUBLIC_APP_URL}${path}`;
+}
--- a/package.json
+++ b/package.json
@ -17,9 +17,12 @@
    "format:check": "prettier . --check --cache"
  },
  "dependencies": {
+    "@t3-oss/env-nextjs": "^0.4.0",
+    "@tailwindcss/typography": "^0.5.9",
    "@types/node": "20.3.1",
    "@types/react": "18.2.12",
    "@types/react-dom": "18.2.5",
+    "@vercel/analytics": "^1.0.1",
    "autoprefixer": "10.4.14",
    "class-variance-authority": "^0.6.0",
    "clsx": "^1.2.1",
@ -32,6 +35,7 @@
    "react-dom": "18.2.0",
    "tailwind-merge": "^1.13.1",
    "tailwindcss": "3.3.2",
+    "tailwindcss-animate": "^1.0.6",
    "typescript": "5.1.3"
  },
  "devDependencies": {
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -1,6 +1,16 @@
 lockfileVersion: '6.0'

+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
 dependencies:
+  '@t3-oss/env-nextjs':
+    specifier: ^0.4.0
+    version: 0.4.0(typescript@5.1.3)(zod@3.21.4)
+  '@tailwindcss/typography':
+    specifier: ^0.5.9
+    version: 0.5.9(tailwindcss@3.3.2)
  '@types/node':
    specifier: 20.3.1
    version: 20.3.1
@ -10,6 +20,9 @@ dependencies:
  '@types/react-dom':
    specifier: 18.2.5
    version: 18.2.5
+  '@vercel/analytics':
+    specifier: ^1.0.1
+    version: 1.0.1
  autoprefixer:
    specifier: 10.4.14
    version: 10.4.14(postcss@8.4.24)
@ -46,6 +59,9 @@ dependencies:
  tailwindcss:
    specifier: 3.3.2
    version: 3.3.2
+  tailwindcss-animate:
+    specifier: ^1.0.6
+    version: 1.0.6(tailwindcss@3.3.2)
  typescript:
    specifier: 5.1.3
    version: 5.1.3
@ -307,6 +323,39 @@ packages:
      tslib: 2.5.3
    dev: false

+  /@t3-oss/env-core@0.4.0(typescript@5.1.3)(zod@3.21.4):
+    resolution: {integrity: sha512-6JlMp0Vru15q/axHzBKsQQjiyGS6k+EsZBY1iErGVmOGzNSoVluBahnYFP7tEkwZ7KoRgSq4NRIc1Ez7SVYuxQ==}
+    peerDependencies:
+      typescript: '>=4.7.2'
+      zod: ^3.0.0
+    dependencies:
+      typescript: 5.1.3
+      zod: 3.21.4
+    dev: false
+
+  /@t3-oss/env-nextjs@0.4.0(typescript@5.1.3)(zod@3.21.4):
+    resolution: {integrity: sha512-K1u2i+S/uEhjfg++FqWlOzS6x237EARRbWGowH2MkDkFu2q7ZJSiJBJT8e47L7NHWH5IyZrTCM6BdOxyWEnQuQ==}
+    peerDependencies:
+      typescript: '>=4.7.2'
+      zod: ^3.0.0
+    dependencies:
+      '@t3-oss/env-core': 0.4.0(typescript@5.1.3)(zod@3.21.4)
+      typescript: 5.1.3
+      zod: 3.21.4
+    dev: false
+
+  /@tailwindcss/typography@0.5.9(tailwindcss@3.3.2):
+    resolution: {integrity: sha512-t8Sg3DyynFysV9f4JDOVISGsjazNb48AeIYQwcL+Bsq5uf4RYL75C1giZ43KISjeDGBaTN3Kxh7Xj/vRSMJUUg==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders'
+    dependencies:
+      lodash.castarray: 4.4.0
+      lodash.isplainobject: 4.0.6
+      lodash.merge: 4.6.2
+      postcss-selector-parser: 6.0.10
+      tailwindcss: 3.3.2
+    dev: false
+
  /@types/json5@0.0.29:
    resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
    dev: false
@ -399,6 +448,10 @@ packages:
      eslint-visitor-keys: 3.4.1
    dev: false

+  /@vercel/analytics@1.0.1:
+    resolution: {integrity: sha512-Ux0c9qUfkcPqng3vrR0GTrlQdqNJ2JREn/2ydrVuKwM3RtMfF2mWX31Ijqo1opSjNAq6rK76PwtANw6kl6TAow==}
+    dev: false
+
  /acorn-jsx@5.3.2(acorn@8.8.2):
    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
    peerDependencies:
@ -1801,6 +1854,14 @@ packages:
      p-locate: 5.0.0
    dev: false

+  /lodash.castarray@4.4.0:
+    resolution: {integrity: sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==}
+    dev: false
+
+  /lodash.isplainobject@4.0.6:
+    resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==}
+    dev: false
+
  /lodash.merge@4.6.2:
    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
    dev: false
@ -2192,6 +2253,14 @@ packages:
      postcss-selector-parser: 6.0.13
    dev: false

+  /postcss-selector-parser@6.0.10:
+    resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
+    engines: {node: '>=4'}
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+    dev: false
+
  /postcss-selector-parser@6.0.13:
    resolution: {integrity: sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==}
    engines: {node: '>=4'}
@ -2545,6 +2614,14 @@ packages:
    resolution: {integrity: sha512-tRtRN22TDokGi2TuYSvuHQuuW6BJ/zlUEG+iYpAQ9i66msc/0eU/+HPccbPnNNH0mCPp0Ob8thaC8Uy9CxHitQ==}
    dev: false

+  /tailwindcss-animate@1.0.6(tailwindcss@3.3.2):
+    resolution: {integrity: sha512-4WigSGMvbl3gCCact62ZvOngA+PRqhAn7si3TQ3/ZuPuQZcIEtVap+ENSXbzWhpojKB8CpvnIsrwBu8/RnHtuw==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders'
+    dependencies:
+      tailwindcss: 3.3.2
+    dev: false
+
  /tailwindcss@3.3.2:
    resolution: {integrity: sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w==}
    engines: {node: '>=14.0.0'}
@ -2767,7 +2844,3 @@ packages:
  /zod@3.21.4:
    resolution: {integrity: sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==}
    dev: false
-
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false
--- a/public/android-chrome-192x192.png
+++ b/public/android-chrome-192x192.png
--- a/public/android-chrome-512x512.png
+++ b/public/android-chrome-512x512.png
--- a/public/apple-touch-icon.png
+++ b/public/apple-touch-icon.png
--- a/public/favicon-16x16.png
+++ b/public/favicon-16x16.png
--- a/public/favicon-32x32.png
+++ b/public/favicon-32x32.png
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/logo.svg
+++ b/public/logo.svg
@ -1,8 +1,8 @@
 <svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path
    d="M4 12C5.65685 12 7 10.6569 7 9C7 7.34315 5.65685 6 4 6C2.34315 6 1 7.34315 1 9C1 10.6569 2.34315 12 4 12Z"
-    stroke="#D9D9D9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
-  <path d="M1 4V12" stroke="#D9D9D9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+    stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+  <path d="M1 4V12" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
  <path
    d="M9 1L8.36667 2.93333C8.33424 3.03374 8.27844 3.12501 8.20386 3.19965C8.12928 3.27429 8.03805 3.33016 7.93767 3.36267L6 4L7.93333 4.63333C8.03374 4.66576 8.12501 4.72156 8.19965 4.79614C8.27429 4.87072 8.33016 4.96195 8.36267 5.06233L9 7L9.63333 5.06667C9.66576 4.96626 9.72156 4.87499 9.79614 4.80035C9.87072 4.72571 9.96195 4.66984 10.0623 4.63733L12 4L10.0667 3.36667C9.96626 3.33424 9.87499 3.27844 9.80035 3.20386C9.72571 3.12928 9.66984 3.03805 9.63733 2.93767L9 1Z"
    stroke="#EAAF17" stroke-linecap="round" stroke-linejoin="round" />
--- a/public/og.jpg
+++ b/public/og.jpg
--- a/public/site.webmanifest
+++ b/public/site.webmanifest
@ -0,0 +1,19 @@
+{
+    "name": "hellob.art",
+    "short_name": "hellob.art",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#5c5c5c",
+    "background_color": "#5c5c5c",
+    "display": "standalone"
+}
--- a/styles/globals.css
+++ b/styles/globals.css
@ -0,0 +1,81 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 47.4% 11.2%;
+
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 47.4% 11.2%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 47.4% 11.2%;
+
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: 0 100% 50%;
+    --destructive-foreground: 210 40% 98%;
+
+    --ring: 215 20.2% 65.1%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 224 71% 4%;
+    --foreground: 213 31% 91%;
+
+    --muted: 223 47% 11%;
+    --muted-foreground: 215.4 16.3% 56.9%;
+
+    --accent: 216 34% 17%;
+    --accent-foreground: 210 40% 98%;
+
+    --popover: 224 71% 4%;
+    --popover-foreground: 215 20.2% 65.1%;
+
+    --border: 216 34% 17%;
+    --input: 216 34% 17%;
+
+    --card: 224 71% 4%;
+    --card-foreground: 213 31% 91%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 1.2%;
+
+    --secondary: 222.2 47.4% 11.2%;
+    --secondary-foreground: 210 40% 98%;
+
+    --destructive: 0 63% 31%;
+    --destructive-foreground: 210 40% 98%;
+
+    --ring: 216 34% 17%;
+
+    --radius: 0.5rem;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+}
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -1,36 +1,82 @@
 const { fontFamily } = require("tailwindcss/defaultTheme");
-const colors = require("tailwindcss/colors");

 /** @type {import('tailwindcss').Config} */
 module.exports = {
  content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{ts,tsx}",
+    "./components/**/*.{ts,tsx}",
+    "./ui/**/*.{ts,tsx}",
+    "./content/**/*.{md,mdx}",
  ],
+  darkMode: ["class"],
  theme: {
    container: {
      center: true,
-      padding: "1.5rem",
+      padding: "2rem",
      screens: {
-        "2xl": "1440px",
+        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
-        primary: colors.zinc,
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: `var(--radius)`,
+        md: `calc(var(--radius) - 2px)`,
+        sm: "calc(var(--radius) - 4px)",
      },
      fontFamily: {
-        sans: ["Inter", "var(--font-inter)", ...fontFamily.sans],
-        display: ["Fjalla One", "var(--font-fjalla-one)"],
+        sans: ["var(--font-sans)", ...fontFamily.sans],
+        heading: ["var(--font-heading)", ...fontFamily.sans],
      },
-      backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
-        filter: "brightness(120%) saturate(120%) blur(2px)",
+      keyframes: {
+        "accordion-down": {
+          from: { height: 0 },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: 0 },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
-  plugins: [],
+  plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
 };