clean up

src/components/About/index.tsx

@@ -1,4 +1,6 @@
 import Link from "next/link";
+import { Button } from "@/components/ui/button"
+
 
 export default function About() {
 
@@ -7,12 +9,13 @@ export default function About() {
     (
       <section id="about" className="bg-gray-200 py-20">
         <div className="container mx-auto px-6 text-center">
-          <h3 className="text-3xl font-bold mb-6">About Us</h3>
+          <h3 className="text-3xl text-gray-700 font-bold mb-6 ">About Us</h3>
           <p className="text-gray-700">
             Ballistic Builder is your go-to platform for customizing, building,
             and exploring firearm parts. Designed for enthusiasts by
             enthusiasts, we make firearm building easy and accessible.
           </p>
+          <Button className="bg-gray-950 text-grey-100 hover:translate-y-[-2px] transition duration-300">Click me test</Button>
         </div>
       </section>
     )

src/components/Brand/brands.tsx

@@ -32,7 +32,7 @@ const Brands: FC<Props> = ({ brands }) => {
   // Rendering the brand List component
   return (
     <main className="flex mx-auto max-w-xl w-full min-h-screen flex-col items-center p-16">
-      <div className="text-5xl font-medium">Ballistic Builder Brand</div>
+      <div className="text-5xl text-gray-800 font-medium">Ballistic Builder Brand</div>
       <div className="w-full flex flex-col mt-8 gap-2">
         {/* Mapping through brand items and rendering brand component for each */}
         {brandItems.map((brand) => (

src/components/Navbar/index.tsx

@@ -11,9 +11,10 @@ import { Bars3Icon, BellIcon, XMarkIcon } from "@heroicons/react/24/outline";
 
 const navigation = [
   { name: "Home", href: "/", current: true },
-  { name: "Builder", href: "/builder", current: false },
-  { name: "Products", href: "#", current: false },
+  { name: "Builder", href: "/Builder", current: false },
+  { name: "Products", href: "/products", current: false },
   { name: "Completed Builds", href: "#", current: false },
+  { name: "Brands", href: "/Brands", current: false },
 ];
 
 function classNames(...classes) {

src/components/ui/button.tsx

@@ -1,40 +1,57 @@
-import type { ButtonProps as ChakraButtonProps } from "@chakra-ui/react"
-import {
-  AbsoluteCenter,
-  Button as ChakraButton,
-  Span,
-  Spinner,
-} from "@chakra-ui/react"
 import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
 
-interface ButtonLoadingProps {
-  loading?: boolean
-  loadingText?: React.ReactNode
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
 }
 
-export interface ButtonProps extends ChakraButtonProps, ButtonLoadingProps {}
-
-export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  function Button(props, ref) {
-    const { loading, disabled, loadingText, children, ...rest } = props
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
     return (
-      <ChakraButton disabled={loading || disabled} ref={ref} {...rest}>
-        {loading && !loadingText ? (
-          <>
-            <AbsoluteCenter display="inline-flex">
-              <Spinner size="inherit" color="inherit" />
-            </AbsoluteCenter>
-            <Span opacity={0}>{children}</Span>
-          </>
-        ) : loading && loadingText ? (
-          <>
-            <Spinner size="inherit" color="inherit" />
-            {loadingText}
-          </>
-        ) : (
-          children
-        )}
-      </ChakraButton>
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
     )
-  },
+  }
 )
+Button.displayName = "Button"
+
+export { Button, buttonVariants }