add optional className prop to NavLink component and reduce Foundation section padding

src/components/NavLink.tsx

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

src/components/home/Foundation.tsx

@@ -34,7 +34,7 @@ const foundations = [
 
 export function Foundation() {
   return (
-    <div className="bg-transparent py-16">
+    <div className="bg-transparent py-12">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <div className="mx-auto grid max-w-2xl grid-cols-1 gap-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-5">
           <div className="col-span-2">