Contact Heading and Contact Form Refactor

components.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/styles/globals.css",
+    "baseColor": "slate",
+    "cssVariables": false
+  },
+  "aliases": {
+    "components": "components",
+    "utils": "lib/utils/utils"
+  }
+}

package.json

@@ -22,7 +22,10 @@
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "@sendgrid/mail": "^7.7.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
     "framer-motion": "^6.5.1",
+    "lucide-react": "^0.279.0",
     "next": "^13.2.4",
     "next-sitemap": "^3.1.29",
     "posthog-js": "^1.33.0",
@@ -32,6 +35,8 @@
     "react-twitter-embed": "^4.0.4",
     "sharp": "^0.32.0",
     "storybook-addon-next": "^1.8.0",
+    "tailwind-merge": "^1.14.0",
+    "tailwindcss-animate": "^1.0.7",
     "zod": "^3.21.4"
   },
   "devDependencies": {

src/components/atoms/button/button.tsx

@@ -1,14 +1,37 @@
-import { Button as ChakraButtonComponent } from "@chakra-ui/react";
+import React from "react";
 
-interface ButtonProps
-  extends React.ComponentProps<typeof ChakraButtonComponent> {
-  //Add additional prop definitions here
+// Define a type for the possible "as" values
+type AsType = 'a' | 'button';
+
+// Create a union type for the allowed props based on "as" value
+type ElementProps = AsType extends 'a'
+  ? React.AnchorHTMLAttributes<HTMLAnchorElement>
+  : React.ButtonHTMLAttributes<HTMLButtonElement>;
+
+interface ButtonProps extends ElementProps {
+  as?: AsType;
+  href?: string;
 }
 
-const DefaultButton = (props: ButtonProps) => {
-  return (
-    <ChakraButtonComponent {...props}>{props.children}</ChakraButtonComponent>
-  );
+const DefaultButton = ({as = "button", children, className = "", ...props}: ButtonProps) => {
+  if( as === "a"){
+    const {...anchorProps} = props as React.AnchorHTMLAttributes<HTMLAnchorElement>;
+    return (
+      <a {...anchorProps} className={`${className} ` +
+      `inline-flex appearance-none items-center justify-center relative whitespace-nowrap align-middle outline outline-2 outline-transparent outline-offset-2 leading-tight font-semibold transition duration-200 h-10 min-w-[2.5rem] text-base px-4 py-3`}>
+        {children}
+      </a>
+    )
+  }
+  else{
+    const {...buttonProps} = props as React.ButtonHTMLAttributes<HTMLButtonElement>;
+    return (
+      <button {...buttonProps} className={`${className} ` +
+      `inline-flex appearance-none items-center justify-center relative whitespace-nowrap align-middle outline outline-2 outline-transparent outline-offset-2 leading-tight font-semibold transition duration-200 h-10 min-w-[2.5rem] text-base px-4 py-3`}>
+        {children}
+      </button>
+    )
+  }
 };
 
 export default DefaultButton;

src/components/atoms/nav-link/nav-link.tsx

@@ -14,19 +14,15 @@ const NavLink = ({ url, text, activeLink, button, externalLink, footer = false }
     >
       {footer === false && button === true ?
         <DefaultButton
-          className=""
-          variant="solid"
-          size="md"
-          colorScheme="facebook"
+          className="text-white rounded-md bg-[#385898] hover:bg-[#314E89] active:bg-[#29487D] focus-visible:shadow-[0_0_0_3px_rgb(66,153,225,0.6)]"
         >
-          <DefaultText className="text-white" fontSize="lg" as="span">
+          <DefaultText className="text-white text-lg leading-[21.6px]" as="span">
             {text}
           </DefaultText>
         </DefaultButton>
       : 
         <DefaultText
-          className={`${activeLink ? "border-b-2 border-blue-500 text-blue-500" : ""}`}
-          fontSize="lg"
+          className={`${activeLink ? "border-b-2 border-blue-500 text-blue-500" : ""} text-lg`}
           as="span">
           {text}
         </DefaultText>