Merge pull request 'develop' (#2) from develop into main

Reviewed-on: https://gitea.gofwd.group/dstrawsb/ballistic-builder/pulls/2

app/components/Footer/FooterLinks/index copy.js

@@ -1,74 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types' //ES6
-import styles from './styles.module.css'
-import List from '@mui/material/List'
-import ListItem from '@mui/material/ListItem';
-import ListItemText from '@mui/material/ListItemText';
-import TypoGraphy from '@mui/material/Typography'
-import Link from 'next/link'
-import { makeStyles } from '@mui/material/styles';
-
-const useStyles = makeStyles((theme) => ({
-    root: {
-      width: '75%',
-      maxWidth: 260,
-     /* backgroundColor: theme.palette.background.paper, */
-     float : 'right',
-     marginRight:'2%',
-     fontSize : '.80em'
-
-
-    },
-  }));
-
-export default function FooterLinks()  {
-    
-        const classes = useStyles();
-        return (
-            <div className={classes.root}>
-                        <TypoGraphy variant="subtitle1" color="inherit"            >
-              <List component="nav" >
-               
-                  <ListItemText inset >
-                    <TypoGraphy color="inherit" variant="subtitle2">
-                      <Link href="/info/faq"><a className={styles.navLinks}>FAQ</a></Link>
-                    </TypoGraphy>
-                  </ListItemText>
-
-                    <ListItemText inset >
-                      <TypoGraphy color="inherit" variant="subtitle2">
-                        <Link href="/info/tos"><a className={styles.navLinks}>Terms Of Service</a></Link>
-                      </TypoGraphy>
-                    </ListItemText>
-
-                    <ListItemText inset>
-                      <TypoGraphy color="inherit" variant="subtitle2">
-                        <Link href="/info/contactus"><a className={styles.navLinks}>Contact Us</a></Link>
-                      </TypoGraphy>
-                    </ListItemText>
-
-                    <ListItemText inset>
-                      <TypoGraphy color="inherit" variant="subtitle2">
-                        <Link href="/info/privacypolicy"><a className={styles.navLinks}>Privacy Policy</a></Link>
-                      </TypoGraphy>
-                    </ListItemText>
-
-                    <ListItemText inset>
-                      <TypoGraphy color="inherit" variant="subtitle2">
-                        <Link href="/info/pip"><a className={styles.navLinks}>Personal Information Policy</a></Link>
-                      </TypoGraphy>
-                    </ListItemText>
-
-                  <ListItemText inset>
-                      <TypoGraphy color="inherit" variant="subtitle2">
-                        <Link href="/info/disclosure"><a className={styles.navLinks}>Disclosure</a></Link>
-                      </TypoGraphy>
-                  </ListItemText>
-         
-                  
-                </List>
-              </TypoGraphy>
-            </div>
-        )
-    }
-

package.json

@@ -3,14 +3,18 @@
   "version": "0.1.0",
   "private": "true",
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --turbo",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {
-    "@emotion/react": "^11.13.3",
-    "@emotion/styled": "^11.13.0",
+    "@chakra-ui/next-js": "^2.4.2",
+    "@chakra-ui/react": "^3.1.2",
+    "@emotion/react": "^11.13.5",
+    "@emotion/styled": "^11.13.5",
+    "@headlessui/react": "^2.2.0",
+    "@heroicons/react": "^2.2.0",
     "@mui/icons-material": "^6.1.7",
     "@mui/joy": "^5.0.0-beta.48",
     "@mui/material": "^6.1.7",
@@ -21,10 +25,13 @@
     "dotenv": "^16.4.5",
     "drizzle-orm": "^0.36.3",
     "fontsource-roboto": "^4.0.0",
+    "framer-motion": "^11.11.17",
     "next": "15.0.3",
+    "next-themes": "^0.4.3",
     "pg": "^8.13.1",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "react-icons": "^5.3.0"
   },
   "devDependencies": {
     "@types/node": "^20.17.6",

pages/builder.js

@@ -1,56 +0,0 @@
-import { useState } from "react";
-
-export default function Builder() {
-  const [build, setBuild] = useState([]);
-  const [part, setPart] = useState("");
-
-  const addPartToBuild = () => {
-    if (part) {
-      setBuild([...build, part]);
-      setPart("");
-    }
-  };
-
-  const removePartFromBuild = (index) => {
-    setBuild(build.filter((_, i) => i !== index));
-  };
-
-  return (
-    <div className="bg-gray-100 min-h-screen p-6">
-      <div className="max-w-3xl mx-auto">
-        <h1 className="text-3xl font-bold text-center mb-6">Build Your Firearm</h1>
-        <div className="bg-white shadow-md rounded p-6">
-          <div className="flex items-center space-x-4">
-            <input
-              type="text"
-              placeholder="Enter part name (e.g., Barrel, Scope)"
-              className="border border-gray-300 p-2 rounded w-full"
-              value={part}
-              onChange={(e) => setPart(e.target.value)}
-            />
-            <button
-              className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-700"
-              onClick={addPartToBuild}
-            >
-              Add Part
-            </button>
-          </div>
-          <h2 className="text-xl font-bold mt-6">Current Build</h2>
-          <ul className="list-disc list-inside mt-4">
-            {build.map((p, index) => (
-              <li key={index} className="flex justify-between items-center">
-                <span>{p}</span>
-                <button
-                  className="text-red-500 hover:underline"
-                  onClick={() => removePartFromBuild(index)}
-                >
-                  Remove
-                </button>
-              </li>
-            ))}
-          </ul>
-        </div>
-      </div>
-    </div>
-  );
-}

src/Fragments/Armory/index.tsx

@@ -1,6 +1,6 @@
-import { sectionLinks } from "@/app/lib/linkList/sectionLinks";
+import { sectionLinks } from "../../lib/linkList/sectionLinks";
 import Link from "next/link";
-import armoryLinks from "@/app/lib/linkList/sectionLinks";
+import armoryLinks from "../../lib/linkList/sectionLinks";
 
 let linksArray = [
     sectionLinks.UPPERS,
@@ -9,21 +9,21 @@ let linksArray = [
     sectionLinks.OPTICS,
     sectionLinks.ACCESSORIES,  
 ];
-export const Armory = (props) => {
+export const Armory = (props:any) => {
     return (
-        <div>
-            {armoryLinks.length}
+        (<div>
+            
             <h4>{props.titleText}</h4>
             <ul>
                 {linksArray.map((link, index) => (
                     <li key={index}>
                         <Link href={link.URL}>
-                            <a>{link.TEXT}</a>   
+                            {link.TEXT}   
                         </Link>
                     </li>
                 ))}
             </ul>
-        </div>
-    )
+        </div>)
+    );
 }
 export default Armory;

src/Fragments/GroundZero/index.tsx

@@ -10,19 +10,18 @@ let linksArray = [
 
 export const GroundZero = (props) => {
     return (
-        <div>
+        (<div>
             <h4>{props.titleText}</h4>
             <ul>
                 {linksArray.map((link, index) => (
                     <li key={index}>
                         <Link href={link.URL}>
-                            <a>{link.TEXT}</a>
+                            {link.TEXT}
                         </Link>
                     </li>
                 ))}
             </ul>
-        </div>
-
-    )
+        </div>)
+    );
 }
 export default GroundZero;

src/Fragments/Information/index.tsx

@@ -10,18 +10,18 @@ let linksArray = [
 ];
 export const Information = (props) => {
     return (
-        <div>
+        (<div>
             <h4>{props.titleText}</h4>
             <ul>
                 {linksArray.map((link, index) => (
                     <li key={index}>
                         <Link href={link.URL}>
-                            <a>{link.TEXT}</a>
+                            {link.TEXT}
                         </Link>
                     </li>
                 ))}
             </ul>
-        </div>
-    )
+        </div>)
+    );
 }
 export default Information;

src/app/layout-test.tsx

@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import localFont from "next/font/local";
+import { Providers } from './providers'
 import "./globals.css";
 
 const geistSans = localFont({
@@ -14,8 +15,8 @@ const geistMono = localFont({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Ballistic Builder",
+  description: "Freedom On",
 };
 
 export default function RootLayout({
@@ -25,10 +26,8 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        {children}
+      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`} >
+    {/*   <Providers>{children}</Providers> */}
       </body>
     </html>
   );

src/app/layout.tsx

@@ -0,0 +1,15 @@
+import "../styles/globals.css";
+export const metadata = {
+  title: 'Next.js',
+  description: 'Generated by Next.js',
+}
+
+export default function RootLayout({ children,}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}

src/app/page.tsx

@@ -0,0 +1,20 @@
+import FeaturesSection from "../components/FeaturesSection";
+import About from "../components/About";
+import Header from "../components/Header";
+import Hero from "../components/Hero";
+import Contact from "../components/Contact";
+import Footer from "../components/Footer ";
+import { ChakraProvider } from "@chakra-ui/react";
+
+export default function Home() {
+  return (
+    <div className="bg-gray-100 min-h-screen flex flex-col">
+      <Header />
+      <Hero />
+      <FeaturesSection />
+      <About />
+      <Contact />
+      <Footer />
+    </div>
+  );
+}

src/app/providers.tsx

@@ -0,0 +1,12 @@
+// app/providers.tsx
+'use client';
+
+import { ChakraProvider } from '@chakra-ui/react';
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+   
+      {children}
+   
+  );
+}

src/app/sign-up/page.tsx

@@ -0,0 +1,10 @@
+
+import { ChakraProvider } from "@chakra-ui/react";
+
+export default function SignUp() {
+  return (
+    <div className="bg-gray-100 min-h-screen flex flex-col">
+     Sign Up info goes here 
+    </div>
+  );
+}

src/components/About/index.tsx

@@ -0,0 +1,20 @@
+import Link from "next/link";
+
+export default function About() {
+
+  return (
+
+    (
+      <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>
+          <p className="text-gray-700">
+            Ballistic Builderis your go-to platform for customizing, building,
+            and exploring firearm parts. Designed for enthusiasts by
+            enthusiasts, we make firearm building easy and accessible.
+          </p>
+        </div>
+      </section>
+    )
+  )
+}

src/components/Base_Component/index.tsx

@@ -0,0 +1,10 @@
+import Link from "next/link";
+
+export default function BB_Base_Component() {
+
+  return (
+    (
+      <div />
+    )
+  )
+}

src/components/Contact/index.tsx

@@ -0,0 +1,24 @@
+import Link from "next/link";
+
+export default function Contact() {
+
+  return (
+    (
+      <section id="contact" className="py-20">
+        <div className="container mx-auto px-6 text-center">
+          <h3 className="text-3xl font-bold mb-6">Contact Us</h3>
+          <p className="text-gray-700 mb-6">
+            Have questions or feedback? We’d love to hear from you!
+          </p>
+          <Link
+            href="mailto:support@firearmbuilder.com"
+            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
+
+            Email Us
+
+          </Link>
+        </div>
+      </section>
+    )
+  )
+}

src/components/FeaturesSection/index.tsx

@@ -0,0 +1,34 @@
+import Link from "next/link";
+
+export default function FeaturesSection() {
+
+  return (
+    (
+      <section id="features" className="py-20">
+        <div className="container mx-auto px-6 text-center">
+          <h3 className="text-3xl font-bold mb-6">Features</h3>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            <div className="bg-white shadow-md p-6 rounded">
+              <h4 className="text-xl font-bold mb-2">Extensive Database</h4>
+              <p className="text-gray-600">
+                Access thousands of firearm parts from trusted resellers.
+              </p>
+            </div>
+            <div className="bg-white shadow-md p-6 rounded">
+              <h4 className="text-xl font-bold mb-2">Compatibility Checker</h4>
+              <p className="text-gray-600">
+                Ensure every part works perfectly together.
+              </p>
+            </div>
+            <div className="bg-white shadow-md p-6 rounded">
+              <h4 className="text-xl font-bold mb-2">Save & Share Builds</h4>
+              <p className="text-gray-600">
+                Save your builds or share them with friends.
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+    )
+  )
+}

src/components/Footer /index.tsx

@@ -0,0 +1,14 @@
+import Link from "next/link";
+
+export default function Footer() {
+
+  return (
+    (
+      <footer className="bg-gray-800 text-white py-4">
+        <div className="container mx-auto px-6 text-center">
+          <p>&copy; {new Date().getFullYear()} Firearm Builder. All rights reserved.</p>
+        </div>
+      </footer>
+    )
+  )
+}

src/components/GB_Footer/FooterLinks/index copy.js

@@ -0,0 +1,74 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types' //ES6
+import styles from './styles.module.css'
+import List from '@mui/material/List'
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import TypoGraphy from '@mui/material/Typography'
+import Link from 'next/link'
+import { makeStyles } from '@mui/material/styles';
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+      width: '75%',
+      maxWidth: 260,
+     /* backgroundColor: theme.palette.background.paper, */
+     float : 'right',
+     marginRight:'2%',
+     fontSize : '.80em'
+
+
+    },
+  }));
+
+export default function FooterLinks()  {
+    
+        const classes = useStyles();
+        return (
+          (<div className={classes.root}>
+            <TypoGraphy variant="subtitle1" color="inherit"            >
+  <List component="nav" >
+   
+      <ListItemText inset >
+        <TypoGraphy color="inherit" variant="subtitle2">
+          <Link href="/info/faq" className={styles.navLinks}>FAQ</Link>
+        </TypoGraphy>
+      </ListItemText>
+
+        <ListItemText inset >
+          <TypoGraphy color="inherit" variant="subtitle2">
+            <Link href="/info/tos" className={styles.navLinks}>Terms Of Service</Link>
+          </TypoGraphy>
+        </ListItemText>
+
+        <ListItemText inset>
+          <TypoGraphy color="inherit" variant="subtitle2">
+            <Link href="/info/contactus" className={styles.navLinks}>Contact Us</Link>
+          </TypoGraphy>
+        </ListItemText>
+
+        <ListItemText inset>
+          <TypoGraphy color="inherit" variant="subtitle2">
+            <Link href="/info/privacypolicy" className={styles.navLinks}>Privacy Policy</Link>
+          </TypoGraphy>
+        </ListItemText>
+
+        <ListItemText inset>
+          <TypoGraphy color="inherit" variant="subtitle2">
+            <Link href="/info/pip" className={styles.navLinks}>Personal Information Policy</Link>
+          </TypoGraphy>
+        </ListItemText>
+
+      <ListItemText inset>
+          <TypoGraphy color="inherit" variant="subtitle2">
+            <Link href="/info/disclosure" className={styles.navLinks}>Disclosure</Link>
+          </TypoGraphy>
+      </ListItemText>
+
+      
+    </List>
+  </TypoGraphy>
+          </div>)
+        );
+    }
+

src/components/GB_Footer/FooterLinks/index.js

@@ -8,7 +8,7 @@ import TypoGraphy from '@mui/material/Typography'
 import Link from 'next/link'
 import { withStyles } from '@mui/material/styles';
 import styled from '@emotion/styled'
-import FooterLink from '@/app/Fragments/FooterLink';
+import FooterLink from '@/src/Fragments/FooterLink';
 
 
 class FooterLinks extends React.Component {

src/components/GB_Footer/index.tsx

@@ -1,14 +1,14 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import styles from './styles.module.scss';
-import Copyright from "@/app/components/Info/Copyright";
+import Copyright from "@/src/components/GB_Info/Copyright";
 import FooterLinks from "./FooterLinks";
 import Link from "next/link";
-import { infoLinks } from "@/app/lib/linkList/infoLinks";
-import { sectionLinks } from "@/app/lib/linkList/sectionLinks";
-import Armory from '@/app/Fragments/Armory';
-import GroundZero from "@/app/Fragments/GroundZero";
-import Information from "@/app/Fragments/Information";
+import { infoLinks } from "@/src/lib/linkList/infoLinks";
+import { sectionLinks } from "@/src/lib/linkList/sectionLinks";
+import Armory from '@/src/Fragments/Armory';
+import GroundZero from "@/src/Fragments/GroundZero";
+import Information from "@/src/Fragments/Information";
 export const Footer = () => {
 
   return (
@@ -16,7 +16,7 @@ export const Footer = () => {
     //   <FooterLinks></FooterLinks>
     //   <Copyright></Copyright>
     // </div>
-    <>
+    (<>
       <footer className={styles.footer}>
         <nav className={styles.linksContainer}>
           <div className={styles.brand}>
@@ -33,7 +33,7 @@ export const Footer = () => {
         </nav>
       </footer>
       <Copyright></Copyright>
-    </>
+    </>)
   );
 }
 

src/components/GB_Header/index.tsx

@@ -21,30 +21,29 @@ export default class Header extends Component {
 
   render() {
     return (
-         <div>
+      (<div>
         <div className="topheader">
-            <Link href="/"><a className="logo">Gun Builder</a>
+          <Link href="/" legacyBehavior><a className="logo">Gun Builder</a>
           </Link>
         </div>
-
         <AppBar position="static">
         <Toolbar>
             <List component="nav">
               <ListItem component="div" className="nav-item">
                 <ListItemText inset>
-                      <Link href={sectionLinks.UPPERS.URL}><a className={styles.navLinks}>{sectionLinks.UPPERS.TEXT}</a></Link>
+                    <Link href={sectionLinks.UPPERS.URL} legacyBehavior><a className={styles.navLinks}>{sectionLinks.UPPERS.TEXT}</a></Link>
                 </ListItemText>
 
                   <ListItemText inset>
-                        <Link href={sectionLinks.PARTSLIST.URL}><a className={styles.navLinks}>{sectionLinks.PARTSLIST.TEXT}</a></Link>
+                      <Link href={sectionLinks.PARTSLIST.URL} legacyBehavior><a className={styles.navLinks}>{sectionLinks.PARTSLIST.TEXT}</a></Link>
                   </ListItemText>
 
                   <ListItemText inset>
-                        <Link href={sectionLinks.BUILDS.URL}><a className={styles.navLinks}>{sectionLinks.BUILDS.TEXT}</a></Link>
+                      <Link href={sectionLinks.BUILDS.URL} legacyBehavior><a className={styles.navLinks}>{sectionLinks.BUILDS.TEXT}</a></Link>
                   </ListItemText>
 
                   <ListItemText inset>
-                        <Link href={sectionLinks.BLOG.URL}><a className={styles.navLinks}>{sectionLinks.BLOG.TEXT}</a></Link>
+                      <Link href={sectionLinks.BLOG.URL} legacyBehavior><a className={styles.navLinks}>{sectionLinks.BLOG.TEXT}</a></Link>
                   </ListItemText>
 
                {/*    <ListItemText inset>
@@ -55,7 +54,6 @@ export default class Header extends Component {
               </List>
           </Toolbar>
         </AppBar>
-
         <style jsx>{`
                   header {
                     background:#101010;
@@ -97,8 +95,8 @@ export default class Header extends Component {
                     letter-spacing:2px;
                   }
                 `}</style>
-      </div>
-    )
+      </div>)
+    );
   }
 }
 

src/components/GB_Info/ContactUs/index.tsx

@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import TypoGraphy from '@mui/material/Typography';
 import PropTypes from 'prop-types' //ES6
 import styles from './styles.module.css';
-import constants from '@/app/lib/constants'
+import constants from '@/src/lib/constants'
 
 import { useQuery, useMutation, gql } from "@apollo/client";
 

src/components/GB_Info/Copyright/index.tsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { COMPANY_NAME, COMPANY_URL } from '@/app/lib/constants';
+import { COMPANY_NAME, COMPANY_URL } from '@/src/lib/constants';
 import Typography from '@mui/material/Typography';
 import MuiLink from '@mui/material/Link';
 import styles from './styles.module.css'
@@ -10,16 +10,15 @@ import styled from '@emotion/styled'
 export default class Copyright extends Component {
   render() {
     return (
-      <CopyStyled>
+      (<CopyStyled>
         <div className="copyright">&copy;&nbsp; {new Date().getFullYear()} {' '}
           <Link href={COMPANY_URL}>
-            <a>{COMPANY_NAME}</a>
+            {COMPANY_NAME}
           </Link>{' '}
           <span>All Rights Reserved.</span>
         </div>
-      </CopyStyled>
-
-    )
+      </CopyStyled>)
+    );
   }
 }
 

src/components/GB_Info/Disclosure/index.tsx

@@ -2,8 +2,8 @@ import React, { Component } from 'react'
 import TypoGraphy from '@mui/material/Typography';
 import PropTypes from 'prop-types' //ES6
 import styles from './styles.module.css';
-import constants from '@/app/lib/constants'
-import {SITE_CONT_TYPE} from '@/app/lib/constants'
+import constants from '@/src/lib/constants'
+import {SITE_CONT_TYPE} from '@/src/lib/constants'
 import { useQuery, useMutation, gql } from "@apollo/client";
 
 export default function Disclosure(props) {

src/components/GB_Info/PIP/index.tsx

@@ -3,7 +3,7 @@ import Head from 'next/head';
 import TypoGraphy from '@mui/material/Typography';
 import PropTypes from 'prop-types' //ES6
 import styles from './styles.module.css';
-import constants from '@/app/lib/constants'
+import constants from '@/src/lib/constants'
 import { useQuery, useMutation, gql } from "@apollo/client";
 
 export default function PIP(props) {

src/components/GB_Info/PrivacyPolicy/index.tsx

@@ -3,7 +3,7 @@ import TypoGraphy from '@mui/material/Typography';
 import Head from 'next/head';
 import PropTypes from 'prop-types' //ES6
 import styles from './styles.module.css';
-import constants from '@/app/lib/constants'
+import constants from '@/src/lib/constants'
 import { useQuery, useMutation, gql } from "@apollo/client";
 
 export default function PrivacyPolicy(props) {

src/components/GB_Info/TermsOfService/index.tsx

@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import Head from 'next/head';
 import TypoGraphy from '@mui/material/Typography';
 import PropTypes from 'prop-types' //ES6
-import constants from '@/app/lib/constants'
+import constants from '@/src/lib/constants'
 import { useQuery, useMutation, gql } from "@apollo/client";
 
 export default function TermsOfService(props) {

src/components/Header/Header.tsx

@@ -0,0 +1,39 @@
+import { Box, Flex, Link, Heading } from "@chakra-ui/react";
+import NextLink from "next/link";
+
+const Header: React.FC = () => {
+  return (
+    <>
+    <Box as="header" bg="primary" color="white" px="6" py="4" shadow="md">
+      <Flex justify="space-between" align="center" maxW="5xl" mx="auto">
+        <Heading as="h1" size="lg">
+          <NextLink href="/" passHref>
+            <Link color="white" _hover={{ textDecoration: "none" }}>
+              Ballistic Builder
+            </Link>
+          </NextLink>
+        </Heading>
+        <Flex as="nav" gap="6">
+          <NextLink href="/builder" passHref>
+            <Link color="white" _hover={{ textDecoration: "underline" }}>
+              Builder
+            </Link>
+          </NextLink>
+          <NextLink href="/products" passHref>
+            <Link color="white" _hover={{ textDecoration: "underline" }}>
+              Products
+            </Link>
+          </NextLink>
+          <NextLink href="/auth/signin" passHref>
+            <Link color="white" _hover={{ textDecoration: "underline" }}>
+              Sign In
+            </Link>
+          </NextLink>
+        </Flex>
+      </Flex>
+    </Box>
+    </>
+  );
+};
+
+export default Header;

src/components/Header/index.tsx

@@ -0,0 +1,23 @@
+import Link from "next/link";
+
+export default function Header() {
+  {/* Header Section */ }
+  return (
+    (
+      <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>
+          <nav>
+            <ul className="flex space-x-4">
+              <li><Link href="#features" className="hover:underline">Features</Link></li>
+              <li><Link href="/builder" className="hover:underline">Builder</Link></li>
+              <li><Link href="/products" className="hover:underline">Products</Link></li>
+              <li><Link href="#contact" className="hover:underline">Contact</Link></li>
+            </ul>
+          </nav>
+        </div>
+
+      </header>
+
+    )
+)}

src/components/Hero/index.tsx

@@ -0,0 +1,24 @@
+import Link from "next/link";
+
+export default function Hero() {
+    {/* Hero Section */ }
+    return (
+
+        <section className="bg-gray-700 text-white py-20 text-center">
+            <div className="container mx-auto px-6">
+                <h2 className="text-4xl font-bold mb-4">Build Your Dream Firearm</h2>
+                <p className="text-lg mb-6">
+                    Customize every component of your firearm with ease and precision.
+                </p>
+                <Link
+                    href="/builder"
+                    className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
+
+                    Get Started
+
+                </Link>
+            </div>
+        </section>
+
+    )
+}

src/components/HomeContent/index.tsx

@@ -0,0 +1,24 @@
+import Link from "next/link";
+import Header from "../Header";
+import Hero from "../Hero";
+import FeaturesSection from "../FeaturesSection";
+import About from "../About";
+import Contact from "../Contact";
+import Footer from "../Footer ";
+
+export default function HomeContent() {
+
+  return (
+    (
+      <>
+        <Header />
+        <Hero />
+        <FeaturesSection />
+        <About />
+        <Contact />
+        <Footer />
+      </>
+
+    )
+  )
+}

src/components/ui/accordion.tsx

@@ -0,0 +1,47 @@
+import { Accordion, HStack } from "@chakra-ui/react"
+import * as React from "react"
+import { LuChevronDown } from "react-icons/lu"
+
+interface AccordionItemTriggerProps extends Accordion.ItemTriggerProps {
+  indicatorPlacement?: "start" | "end"
+}
+
+export const AccordionItemTrigger = React.forwardRef<
+  HTMLButtonElement,
+  AccordionItemTriggerProps
+>(function AccordionItemTrigger(props, ref) {
+  const { children, indicatorPlacement = "end", ...rest } = props
+  return (
+    <Accordion.ItemTrigger {...rest} ref={ref}>
+      {indicatorPlacement === "start" && (
+        <Accordion.ItemIndicator rotate={{ base: "-90deg", _open: "0deg" }}>
+          <LuChevronDown />
+        </Accordion.ItemIndicator>
+      )}
+      <HStack gap="4" flex="1" textAlign="start" width="full">
+        {children}
+      </HStack>
+      {indicatorPlacement === "end" && (
+        <Accordion.ItemIndicator>
+          <LuChevronDown />
+        </Accordion.ItemIndicator>
+      )}
+    </Accordion.ItemTrigger>
+  )
+})
+
+interface AccordionItemContentProps extends Accordion.ItemContentProps {}
+
+export const AccordionItemContent = React.forwardRef<
+  HTMLDivElement,
+  AccordionItemContentProps
+>(function AccordionItemContent(props, ref) {
+  return (
+    <Accordion.ItemContent>
+      <Accordion.ItemBody {...props} ref={ref} />
+    </Accordion.ItemContent>
+  )
+})
+
+export const AccordionRoot = Accordion.Root
+export const AccordionItem = Accordion.Item

src/components/ui/action-bar.tsx

@@ -0,0 +1,40 @@
+import { ActionBar, Portal } from "@chakra-ui/react"
+import { CloseButton } from "./close-button"
+import * as React from "react"
+
+interface ActionBarContentProps extends ActionBar.ContentProps {
+  portalled?: boolean
+  portalRef?: React.RefObject<HTMLElement>
+}
+
+export const ActionBarContent = React.forwardRef<
+  HTMLDivElement,
+  ActionBarContentProps
+>(function ActionBarContent(props, ref) {
+  const { children, portalled = true, portalRef, ...rest } = props
+
+  return (
+    <Portal disabled={!portalled} container={portalRef}>
+      <ActionBar.Positioner>
+        <ActionBar.Content ref={ref} {...rest} asChild={false}>
+          {children}
+        </ActionBar.Content>
+      </ActionBar.Positioner>
+    </Portal>
+  )
+})
+
+export const ActionBarCloseTrigger = React.forwardRef<
+  HTMLButtonElement,
+  ActionBar.CloseTriggerProps
+>(function ActionBarCloseTrigger(props, ref) {
+  return (
+    <ActionBar.CloseTrigger {...props} asChild ref={ref}>
+      <CloseButton size="sm" />
+    </ActionBar.CloseTrigger>
+  )
+})
+
+export const ActionBarRoot = ActionBar.Root
+export const ActionBarSelectionTrigger = ActionBar.SelectionTrigger
+export const ActionBarSeparator = ActionBar.Separator