use constants.APP_NAME

src/components/Brand/BrandsList.tsx

@@ -5,7 +5,7 @@ import Brand from "./brand";
 import AddBrand from "./addBrand";
 import { addBrand, deleteBrand, editBrand } from "../../actions/brandActions";
 import Footer from "@components/site/Footer";
-
+import constants from "@src/lib/constants";
 interface Props {
   brands: brandType[];
 }
@@ -38,7 +38,7 @@ const BrandsList: 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 text-gray-800 font-medium">Ballistic Builder Brand</div>
+      <div className="text-5xl text-gray-800 font-medium">{constants.APP_NAME} 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/ComponentType/ComponentTypeList.tsx

@@ -4,6 +4,7 @@ import { componentTypeType } from "src/types/componentTypeType";
 import { componentType } from './componentType'
 // import AddBrand from "./addBrand";
 import { getData } from "src/actions/componentTypeActions";
+import constants from "@src/lib/constants";
 
 interface Props {
   componentType: componentType[];
@@ -37,7 +38,7 @@ const ComponentTypeList: FC<Props> = ({ componentType }) => {
   // 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 text-gray-800 font-medium">Ballistic Builder Brand</div>
+      <div className="text-5xl text-gray-800 font-medium">{constants.APP_NAME} 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/Header/index-no-chakura.tsx

@@ -1,4 +1,5 @@
 import Link from "next/link";
+import constants from '@lib/constants';
 
 export default function Header() {
   {/* Header Section */ }
@@ -6,7 +7,7 @@ export default function Header() {
     (
       <header className="bg-gray-800 text-white py-4 shadow-md">
         <div className="container mx-auto px-6 flex justify-between items-center">
-          <h1 className="text-2xl font-bold">Ballistic Builder</h1>
+          <h1 className="text-2xl font-bold">{constants.APP_NAME}</h1>
           <nav>
             <ul className="flex space-x-4">
               <li><Link href="#features" className="hover:underline">Features</Link></li>

src/components/Header/index.tsx

@@ -1,4 +1,5 @@
 import NextLink from 'next/link';
+import constants from '@src/lib/constants';
 
 const Header: React.FC = () => {
   return (
@@ -6,7 +7,7 @@ const Header: React.FC = () => {
       <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', maxWidth: '80rem', margin: '0 auto' }}>
         <h1 style={{ fontSize: '1.5rem', }}>
           <NextLink href="/" passHref style={{ color: '#FFFFFF', textDecoration: 'none' }}>
-            Ballistic Builder
+            {constants.APP_NAME}
           </NextLink>
         </h1>
         <nav style={{ display: 'flex', gap: '24px' }}>

src/components/site/About/index.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@components/ui/button"
+import constants from "@src/lib/constants";
 
 export default function About() {
 
@@ -9,11 +9,11 @@ export default function About() {
         <div className="container mx-auto px-6 text-center">
           <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,
+            {constants.APP_NAME} 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-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Click me test</Button>
+          <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Click me test</button>
           {/* <Button className="bg-gray-950 text-grey-100 hover:translate-y-[-2px] transition duration-300">Click me test</Button> */}
         </div>
       </section>

src/components/site/Footer/index.tsx

@@ -1,10 +1,12 @@
+import constants from "@src/lib/constants";
+
 export default function Footer() {
 
   return (
     (
       <footer className="bg-gray-950 text-white py-4">
         <div className="container mx-auto px-6 text-center">
-          <p>&copy; {new Date().getFullYear()} Ballistic Builder. All rights reserved.</p>
+          <p>&copy; {new Date().getFullYear()} {constants.APP_NAME}. All rights reserved.</p>
           <p>Built by Forward Group ⚡</p>
 
         </div>