clean up

src/app/Builder/page.tsx

@@ -0,0 +1,10 @@
+// app/builder/page.js
+
+export default function BuilderPage() {
+  return (
+    <div>
+      <h1>About Us</h1>
+      <p>This is the about page.</p>
+    </div>
+  );
+}

src/app/Builder2/page.tsx

@@ -1,9 +0,0 @@
-
-export default async function BuilderPage() {
-  return (
-    <div className="bg-gray-100 min-h-screen flex flex-col">
-        <h1>Build Your Dream Rifle</h1>
-    </div>
-  );
-}
-

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 }

src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

src/pages/builder-old.js

@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 
-export default function Builder() {
+export default function BuilderOld() {
   const [products, setProducts] = useState([]); // Available products from the API
   const [build, setBuild] = useState([]); // User's selected parts
   const [loading, setLoading] = useState(true);

src/styles/globals.css

@@ -2,20 +2,71 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
+body {
+  font-family: Arial, Helvetica, sans-serif;
 }
 
-@media (prefers-color-scheme: dark) {
+@layer base {
   :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --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%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+  }
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
   }
 }
 
-body {
-  color: var(--foreground);
-  background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
 }