Updated website design. Added a birthday command generator

components/heading.tsx

@@ -0,0 +1,6 @@
+
+export function Heading({children}: {children: React.ReactNode}) {
+  return (
+    <h2 className="dark:text-gray-300 md:text-2xl text-lg pt-4 mx-4">{children}</h2>
+  );
+}

components/index.ts

@@ -0,0 +1,4 @@
+export * from "./title";
+export * from "./linkcard";
+export * from "./paragraph";
+export * from "./heading";

components/linkcard.tsx

@@ -1,6 +1,6 @@
 import Link from "next/link";
 
-export default function LinkCard(props: {
+export function LinkCard(props: {
   link: string;
   title: string;
   sub: string;
@@ -8,7 +8,7 @@ export default function LinkCard(props: {
   const { link, title, sub } = props;
   return (
     <Link href={link} passHref>
-        <a className="box-border p-2 bg-gray-50 dark:bg-gray-500 hover:bg-gray-100 hover:text-indigo-500 dark:hover:bg-gray-600 dark:hover:text-indigo-300 rounded-md">
+        <a className="box-border p-2 bg-gray-200 dark:text-gray-200 dark:bg-gray-600 hover:bg-gray-100 hover:text-indigo-500 dark:hover:bg-gray-500 dark:hover:text-indigo-400 rounded-md drop-shadow-lg hover:drop-shadow-2xl">
             <h2 className="px-4">{title} &rarr;</h2>
             <p className="px-4">{sub}</p>
         </a>

components/paragraph.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export function Paragraph ({children}: {children: React.ReactNode}) {
+  return (
+    <p className="px-4 dark:text-gray-300">
+        {children}
+    </p>
+  )
+}

components/title.tsx

@@ -0,0 +1,6 @@
+
+export function Title({ children, ...props }: { children: React.ReactNode }) {
+    return (
+        <h1 className="dark:text-gray-300 font-bold text-center md:text-6xl text-3xl pt-4 font-body">{children}</h1>
+    );
+}