everything moved to src

src/app/Fragments/Armory/index.tsx

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

src/app/Fragments/Armory/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "armory",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./index",
+  "author": {
+    "name": "Sean Strawsburg",
+    "email": "sean@goforward.group",
+    "url": "https://goforward.group/"
+  },
+  "contributors": [
+    {
+      "name": "Don Strawsburg",
+      "email": "don@goforward.group",
+      "url": "https://goforward.group/"
+    },
+    {
+      "name": "Sean Strawsburg",
+      "email": "sean@goforward.group",
+      "url": "https://goforward.group/"
+    }
+  ]
+}

src/app/Fragments/Armory/style.module.scss

@@ -0,0 +1 @@
+@import '../../scss/variables.scss';

src/app/Fragments/Button/index.js

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import styles from './style.module.scss'
+
+const Button = ({
+  children,
+  className,
+  color = 'black',
+  type = 'button',
+  ...props
+}) => (
+  <button
+    className={`${className} Button Button_${color}`}
+    type={type}
+    {...props}
+  >
+    {children}
+  </button>
+);
+
+const ButtonUnobtrusive = ({
+  children,
+  className,
+  type = 'button',
+  ...props
+}) => (
+  <button
+    className={`${className} Button_unobtrusive`}
+    type={type}
+    {...props}
+  >
+    {children}
+  </button>
+);
+
+export { ButtonUnobtrusive };
+
+export default Button;

src/app/Fragments/Button/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "button",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./index",
+  "author": {
+    "name": "Sean Strawsburg",
+    "email": "sean@goforward.group",
+    "url": "https://goforward.group/"
+  },
+  "contributors": [
+    {
+      "name": "Don Strawsburg",
+      "email": "don@goforward.group",
+      "url": "https://goforward.group/"
+    },
+    {
+      "name": "Sean Strawsburg",
+      "email": "sean@goforward.group",
+      "url": "https://goforward.group/"
+    }
+  ]
+}

src/app/Fragments/Button/style.module.scss

@@ -0,0 +1,46 @@
+.Button {
+  padding: 10px;
+  background: none;
+  cursor: pointer;
+  transition: color 0.25s ease-in-out;
+  transition: background 0.25s ease-in-out;
+}
+
+.Button_white {
+  border: 1px solid #fff;
+  color: #fff;
+}
+
+.Button_white:hover {
+  color: #000;
+  background: #fff;
+}
+
+.Button_black {
+  border: 1px solid #000;
+  color: #000;
+}
+
+.Button_black:hover {
+  color: #fff;
+  background: #000;
+}
+
+.Button_unobtrusive {
+  padding: 0;
+  color: #000;
+  background: none;
+  border: none;
+  cursor: pointer;
+  opacity: 1;
+  transition: opacity 0.25s ease-in-out;
+  outline: none;
+}
+
+.Button_unobtrusive:hover {
+  opacity: 0.35;
+}
+
+.Button_unobtrusive:focus {
+  outline: none;
+}

src/app/Fragments/DSTPageHeader/index.js

@@ -0,0 +1,8 @@
+
+const DSTPageHeader = props => {
+    return (
+        <div>{props.title}</div>
+
+    )
+}
+export default DSTPageHeader

src/app/Fragments/DSTPageHeader/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "DSTPageHeader",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./index",
+  "author": {
+    "name": "Don Strawsburg",
+    "email": "don@goforward.group",
+    "url": "https://goforward.group/"
+  },
+  "contributors": [
+    {
+      "name": "Don Strawsburg",
+      "email": "don@goforward.group",
+      "url": "https://goforward.group/"
+    },
+    {
+      "name": "Sean Strawsburg",
+      "email": "sean@goforward.group",
+      "url": "https://goforward.group/"
+    }
+  ]
+}

src/app/Fragments/Error/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import styles from './style.module.css';
+
+const ErrorMessage = ({ error }) => (
+  <div className="ErrorMessage">
+    <small>{error.toString()}</small>
+  </div>
+);
+
+export default ErrorMessage;

src/app/Fragments/Error/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "error",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./index",
+  "author": {
+    "name": "Sean Strawsburg",
+    "email": "sean@goforward.group",
+    "url": "https://goforward.group/"
+  },
+  "contributors": [
+    {
+      "name": "Don Strawsburg",
+      "email": "don@goforward.group",
+      "url": "https://goforward.group/"
+    },
+    {
+      "name": "Sean Strawsburg",
+      "email": "sean@goforward.group",
+      "url": "https://goforward.group/"
+    }
+  ]
+}

src/app/Fragments/Error/style.module.css

@@ -0,0 +1,5 @@
+.ErrorMessage {
+  margin: 20px;
+  display: flex;
+  justify-content: center;
+}

src/app/Fragments/FooterLink/index.tsx

@@ -0,0 +1,13 @@
+import { ListItemText, Link } from "@mui/material";
+import styles from './styles.module.css'
+import { withStyles } from '@mui/material/styles';
+import styled from '@emotion/styled'
+import React from "react";
+
+export default function FooterLink(props) {
+    return (
+        <ListItemText inset >
+            <Link href={props.href}><a className={styles.navLinks}>{props.title}</a></Link>
+        </ListItemText>
+    )
+}

src/app/Fragments/FooterLink/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "footerlink",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./index",
+  "author": {
+    "name": "Sean Strawsburg",
+    "email": "sean@goforward.group",
+    "url": "https://goforward.group/"
+  },
+  "contributors": [
+    {
+      "name": "Don Strawsburg",
+      "email": "don@goforward.group",
+      "url": "https://goforward.group/"
+    },
+    {
+      "name": "Sean Strawsburg",
+      "email": "sean@goforward.group",
+      "url": "https://goforward.group/"
+    }
+  ]
+}

src/app/Fragments/FooterLink/styles.module.css

@@ -0,0 +1,5 @@
+
+.navLinks:hover {
+    font-weight: bold;
+    text-decoration : none;
+}

src/app/Fragments/GroundZero/index.tsx

@@ -0,0 +1,27 @@
+import { sectionLinks } from "@/app/lib/linkList/sectionLinks";
+import Link from "next/link";
+
+let linksArray = [
+    sectionLinks.BLOG,
+    sectionLinks.PRICEDROPS,
+    sectionLinks.BUILDS,
+    sectionLinks.BUILDGUIDES,
+];
+
+export const GroundZero = (props) => {
+    return (
+        (<div>
+            <h4>{props.titleText}</h4>
+            <ul>
+                {linksArray.map((link, index) => (
+                    <li key={index}>
+                        <Link href={link.URL}>
+                            {link.TEXT}
+                        </Link>
+                    </li>
+                ))}
+            </ul>
+        </div>)
+    );
+}
+export default GroundZero;

src/app/Fragments/GroundZero/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "groundzero",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./index",
+  "author": {
+    "name": "Sean Strawsburg",
+    "email": "sean@goforward.group",
+    "url": "https://goforward.group/"
+  },
+  "contributors": [
+    {
+      "name": "Don Strawsburg",
+      "email": "don@goforward.group",
+      "url": "https://goforward.group/"
+    },
+    {
+      "name": "Sean Strawsburg",
+      "email": "sean@goforward.group",
+      "url": "https://goforward.group/"
+    }
+  ]
+}

src/app/Fragments/GroundZero/style.module.scss

@@ -0,0 +1 @@
+@import '../../scss/variables.scss';

src/app/Fragments/Information/index.tsx

@@ -0,0 +1,27 @@
+import { infoLinks } from "@/app/lib/linkList/infoLinks";
+import Link from "next/link";
+let linksArray = [
+    infoLinks.ABOUT,
+    infoLinks.FAQ,
+    infoLinks.DISCLOSURE,
+    infoLinks.PRIVACYPOLICY,
+    infoLinks.PIP,
+    infoLinks.TOS
+];
+export const Information = (props) => {
+    return (
+        (<div>
+            <h4>{props.titleText}</h4>
+            <ul>
+                {linksArray.map((link, index) => (
+                    <li key={index}>
+                        <Link href={link.URL}>
+                            {link.TEXT}
+                        </Link>
+                    </li>
+                ))}
+            </ul>
+        </div>)
+    );
+}
+export default Information;

src/app/Fragments/Information/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "information",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./index",
+  "author": {
+    "name": "Sean Strawsburg",
+    "email": "sean@goforward.group",
+    "url": "https://goforward.group/"
+  },
+  "contributors": [
+    {
+      "name": "Don Strawsburg",
+      "email": "don@goforward.group",
+      "url": "https://goforward.group/"
+    },
+    {
+      "name": "Sean Strawsburg",
+      "email": "sean@goforward.group",
+      "url": "https://goforward.group/"
+    }
+  ]
+}

src/app/Fragments/Information/style.module.scss

@@ -0,0 +1 @@
+@import '../../scss/variables.scss';

src/app/Fragments/States/index.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { makeStyles } from '@mui/material/styles';
+import InputLabel from '@mui/material/InputLabel';
+import FormHelperText from '@mui/material/FormHelperText';
+import FormControl from '@mui/material/FormControl';
+import Select from '@mui/material/Select';
+import NativeSelect from '@mui/material/NativeSelect';
+import { useQuery, gql } from "@apollo/client";
+
+
+const useStyles = makeStyles((theme) => ({
+  formControl: {
+    margin: theme.spacing(1),
+    minWidth: 120,
+  },
+  selectEmpty: {
+    marginTop: theme.spacing(2),
+  },
+}));
+
+  const GET_STATES = gql`
+      {
+       states {
+    abbrev
+    name
+    }
+  }`
+
+export default function StateNativeSelects() {
+  const classes = useStyles();
+  const [state, setState] = React.useState({
+    abbrev: '',
+    name: '',
+  });
+
+  const handleChange = (event) => {
+    const name = event.target.name;
+    setState({
+      ...state,
+      [name]: event.target.value,
+    });
+  };
+
+const { loading, error, data } = useQuery(GET_STATES);
+
+  if (loading) return <p>Loading...</p>;
+  if (error) return <p>Error :(</p>;
+
+  return (
+    <div>
+      <FormControl className={classes.formControl}>
+        <InputLabel htmlFor="state-native-simple">State</InputLabel>
+        <Select
+          native
+          value={state.abbrev}
+          onChange={handleChange}
+          inputProps={{
+            name: 'abbrev',
+            id: 'abbrev-native-simple',
+          }}
+          >
+          <option aria-label="None" value="" />
+        {data.states.map(({ abbrev, name }) => (
+            <option value={abbrev}>{name}</option>
+          ))}          
+        </Select>
+      </FormControl>
+    </div>
+  );
+}

src/app/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/app/components/Base_Component/index.tsx

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

src/app/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/app/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/app/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/app/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/app/components/GB_Footer/FooterLinks/index.js

@@ -0,0 +1,53 @@
+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 { withStyles } from '@mui/material/styles';
+import styled from '@emotion/styled'
+import FooterLink from '@/src/app/Fragments/FooterLink';
+
+
+class FooterLinks extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+    }
+  }
+
+  render() {
+    const { classes } = this.props;
+    return (
+      <FooterLinksStyled>
+        <div className="footer-links">
+           <List component="nav" >
+              <React.Fragment>
+                <FooterLink href="/info/faq" title="FAQ" />
+                <FooterLink href="/info/tos" title="Terms Of Service" />
+                <FooterLink href="/info/contactus" title="Contact Us" />
+                <FooterLink href="/info/privacypolicy" title="Privacy Policy" />
+                <FooterLink href="/info/pip" title="Personal Information Policy" />
+                <FooterLink href="/info/disclosure" title="Disclosure" />
+                <FooterLink href="/info/about" title="About Us" />
+              </React.Fragment>
+            </List>
+        </div>
+      </FooterLinksStyled>
+    )
+  }
+}
+
+const FooterLinksStyled = styled.div`
+    .footer-links nav {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-around;
+      width: 100%;
+    }
+`
+// export default withStyles(useStyles)(FooterLinks);
+
+export default FooterLinks;

src/app/components/GB_Footer/FooterLinks/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "footerlinks",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./index",
+  "author": {
+    "name": "Don Strawsburg",
+    "email": "don@goforward.group",
+    "url": "https://goforward.group/"
+  },
+  "contributors": [
+    {
+      "name": "Don Strawsburg",
+      "email": "don@goforward.group",
+      "url": "https://goforward.group/"
+    },
+    {
+      "name": "Sean Strawsburg",
+      "email": "sean@goforward.group",
+      "url": "https://goforward.group/"
+    }
+  ]
+}

src/app/components/GB_Footer/FooterLinks/styles.module.css

@@ -0,0 +1,7 @@
+.navLinks {
+    color:#000;
+}
+.navLinks:hover {
+    font-weight: bold;
+    text-decoration : none;
+}

src/app/components/GB_Footer/index.tsx

@@ -0,0 +1,43 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import styles from './styles.module.scss';
+import Copyright from "@/src/app/components/GB_Info/Copyright";
+import FooterLinks from "./FooterLinks";
+import Link from "next/link";
+import { infoLinks } from "@/src/app/lib/linkList/infoLinks";
+import { sectionLinks } from "@/src//app/lib/linkList/sectionLinks";
+import Armory from '@/src/app/Fragments/Armory';
+import GroundZero from "@/src/app/Fragments/GroundZero";
+import Information from "@/src/app/Fragments/Information";
+export const Footer = () => {
+
+  return (
+    // <div className={styles.Footer}>
+    //   <FooterLinks></FooterLinks>
+    //   <Copyright></Copyright>
+    // </div>
+    (<>
+      <footer className={styles.footer}>
+        <nav className={styles.linksContainer}>
+          <div className={styles.brand}>
+            <div className={styles.logo}>
+              <span>Logo</span>
+            </div>
+            <p>Find Parts.</p>
+            <p>Build Guns.</p>
+            <p>Freedom On.</p>
+          </div>          
+          <Armory titleText="Armory"/>
+          <GroundZero titleText="Ground Zero"/>
+          <Information titleText="Information"/>
+        </nav>
+      </footer>
+      <Copyright></Copyright>
+    </>)
+  );
+}
+
+
+Footer.propTypes = {};
+
+export default Footer;

src/app/components/GB_Footer/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "footer",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./index",
+  "author": {
+    "name": "Don Strawsburg",
+    "email": "don@goforward.group",
+    "url": "https://goforward.group/"
+  },
+  "contributors": [
+    {
+      "name": "Don Strawsburg",
+      "email": "don@goforward.group",
+      "url": "https://goforward.group/"
+    },
+    {
+      "name": "Sean Strawsburg",
+      "email": "sean@goforward.group",
+      "url": "https://goforward.group/"
+    }
+  ]
+}

src/app/components/GB_Footer/styles.module.scss

@@ -0,0 +1,59 @@
+@import '../../scss/variables.scss';
+
+.footer {
+    background: #4c5c3f;
+    min-height: 300px;
+    height: 100%;
+    padding: 1rem 0;
+    border-top: 2px solid #000;
+     
+    .brand {
+        font-weight: bolder;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+        font-size: 1.25em;
+        color:#FFF;
+        
+        .logo span {
+            display: inline-block;
+            height: 100px;
+            width: 100px;
+            background: #FFF;
+            color:#4c5c3f;
+            text-align: center;
+        }
+    }
+}
+
+.linksContainer {
+    display: flex;
+    justify-content: space-around;
+    align-items: flex-start;
+
+    ul {
+        display: flex;
+        flex-direction: column;
+        list-style: none;
+        padding: 0;
+    
+        li {
+            color:#FFF;
+
+            a {
+                color: #fff;
+                transition: all 500ms ease;
+
+                &:hover {
+                    color: #ADA17B;
+                    font-weight: bold;
+                }
+            }
+        }
+    }
+
+    h4 {
+        color: #FFF;
+        border-bottom: 2px solid #fff;
+        margin-bottom: 10px;
+    }
+}

src/app/components/GB_Header/index.tsx

@@ -0,0 +1,106 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types'; //ES6
+import styles from './styles.module.css';
+import Link from 'next/link';
+import AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+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 Button from '@mui/material//Button';
+import { infoLinks } from '@/app/lib/linkList/infoLinks';
+import  sectionLinks  from '@/app/lib/linkList/sectionLinks';
+
+export default class Header extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+    }
+  }
+
+  render() {
+    return (
+      (<div>
+        <div className="topheader">
+          <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} legacyBehavior><a className={styles.navLinks}>{sectionLinks.UPPERS.TEXT}</a></Link>
+                </ListItemText>
+
+                  <ListItemText inset>
+                      <Link href={sectionLinks.PARTSLIST.URL} legacyBehavior><a className={styles.navLinks}>{sectionLinks.PARTSLIST.TEXT}</a></Link>
+                  </ListItemText>
+
+                  <ListItemText inset>
+                      <Link href={sectionLinks.BUILDS.URL} legacyBehavior><a className={styles.navLinks}>{sectionLinks.BUILDS.TEXT}</a></Link>
+                  </ListItemText>
+
+                  <ListItemText inset>
+                      <Link href={sectionLinks.BLOG.URL} legacyBehavior><a className={styles.navLinks}>{sectionLinks.BLOG.TEXT}</a></Link>
+                  </ListItemText>
+
+               {/*    <ListItemText inset>
+                      <Link href="/admin"><a className={styles.navLinks}>Admin</a></Link>
+                  </ListItemText> */}
+                </ListItem>
+                
+              </List>
+          </Toolbar>
+        </AppBar>
+        <style jsx>{`
+                  header {
+                    background:#101010;
+                    color:#fff;
+                  }
+                   .topheader {
+                    background:#111;
+                    height: 4em;
+                    color: #000;
+                    display: flex;
+                    justify-content: center;
+                    flex-direction: column;
+                  }
+          
+                   .topheader a {
+                      color:#fff;
+                      padding-left: 15px;
+                      text-transform: uppercase;
+                      font-weight: bold;
+                      letter-spacing: 2px;
+                  }
+                   .nav {
+                    display: flex;
+                    background: #4c5d34;
+                  }
+                   ul {
+                    list-style: none;
+                    padding: 0;
+                    display: flex;
+                    margin: 0;
+                    height: 100%;
+                  }
+                   ul li {
+                    margin-right: 10px;
+                    padding:1em 1.5em;
+                    border-right:2px solid rgba(0,0,0,.3);
+                    text-transform: uppercase;
+                    font-weight:bold;
+                    letter-spacing:2px;
+                  }
+                `}</style>
+      </div>)
+    );
+  }
+}
+
+
+Header.propTypes = {
+
+};

src/app/components/GB_Header/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "header",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./index",
+  "author": {
+    "name": "Don Strawsburg",
+    "email": "don@goforward.group",
+    "url": "https://goforward.group/"
+  },
+  "contributors": [
+    {
+      "name": "Don Strawsburg",
+      "email": "don@goforward.group",
+      "url": "https://goforward.group/"
+    },
+    {
+      "name": "Sean Strawsburg",
+      "email": "sean@goforward.group",
+      "url": "https://goforward.group/"
+    }
+  ]
+}

src/app/components/GB_Header/styles.module.css

@@ -0,0 +1,13 @@
+.navLinks {
+    color:white;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    font-weight: bold;
+    transition: all 500ms ease;
+}
+.navLinks:hover {
+    text-decoration : none;
+}
+.nav-item:hover {
+   background-color: pink;
+}

src/app/components/GB_Hero/index.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import Typography from '@mui/material/Typography';
+import MuiLink from '@mui/material/Link';
+import Button from '@mui/material/Button';
+
+export default class Hero extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      show: true,
+    };
+  }
+
+  render() {
+    return (      
+
+      <div className="hero" styles={{ backgroundImage:`url({${this.props.image}})` }}>
+        <div className="hero-text">
+          <h3>{this.props.heading}</h3>
+          <p>{this.props.subheading}</p>
+          <Button href={this.props.link} variant="contained" color="primary">
+            {this.props.linktext}
+          </Button>
+        </div>
+
+        <style jsx>{`
+            .hero {
+                // background:url('/gb-hero.jpg');
+                background-size:cover;
+                min-height:35vw;
+                color: #fff;
+                display:flex;
+                justify-content: center;
+                flex-direction: column;
+            }
+            .hero-text {
+              padding: 2em;
+            }
+        `}</style>
+      </div>
+    );
+  }
+
+}
+

src/app/components/GB_Hero/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "hero",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./index",
+  "author": {
+    "name": "Don Strawsburg",
+    "email": "don@goforward.group",
+    "url": "https://goforward.group/"
+  },
+  "contributors": [
+    {
+      "name": "Don Strawsburg",
+      "email": "don@goforward.group",
+      "url": "https://goforward.group/"
+    },
+    {
+      "name": "Sean Strawsburg",
+      "email": "sean@goforward.group",
+      "url": "https://goforward.group/"
+    }
+  ]
+}

src/app/components/GB_Info/About/index.tsx

@@ -0,0 +1,35 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types' //ES6
+import styles from './styles.module.css'
+import { useQuery, useMutation, gql } from "@apollo/client";
+
+export default function About(props) {
+
+    const GET_SITE_CONTENT = gql`
+    query Get_Site_Content {
+      site_contents(where: {content_id: {_eq: "ABOUTUS"}}, order_by: {content: asc}) {
+        id
+        content_id
+        content
+      }
+     }
+   `;
+
+    const { loading, error, data } = useQuery(GET_SITE_CONTENT);
+    if (loading) return "Loading ...";
+    if (error) return `Error! ${error.message}`;
+
+    return (
+        <div >
+            <h1>About</h1>
+            {data.site_contents.map((site_content: { content: any; }) => (
+                <span dangerouslySetInnerHTML={{ __html: site_content.content }} />
+            ))}
+        </div>
+    )
+}
+
+
+About.propTypes = {
+
+};

src/app/components/GB_Info/About/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "about",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./index",
+  "author": {
+    "name": "Don Strawsburg",
+    "email": "don@goforward.group",
+    "url": "https://goforward.group/"
+  },
+  "contributors": [
+    {
+      "name": "Don Strawsburg",
+      "email": "don@goforward.group",
+      "url": "https://goforward.group/"
+    },
+    {
+      "name": "Sean Strawsburg",
+      "email": "sean@goforward.group",
+      "url": "https://goforward.group/"
+    }
+  ]
+}

src/app/components/GB_Info/ContactUs/index.tsx

@@ -0,0 +1,39 @@
+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 '@/src/app/lib/constants'
+
+import { useQuery, useMutation, gql } from "@apollo/client";
+
+export default function ContactUs(props) {
+
+    const GET_SITE_CONTENT = gql`
+        query Get_Site_Content {
+          site_contents(where: {content_id: {_eq: "CONTACTUS"}}, order_by: {content: asc}) {
+            id
+            content_id
+            content
+          }
+         }
+       `;
+
+    const { loading, error, data } = useQuery(GET_SITE_CONTENT);
+    if (loading) return "Loading ...";
+    if (error) return `Error! ${error.message}`;
+
+    return (
+        <div>
+            <TypoGraphy paragraph='true' variant="body" color="inherit" >
+                {data.site_contents.map((site_content: { content: any; }) => (
+                    <span dangerouslySetInnerHTML={{ __html: site_content.content }} />
+                ))}
+            </TypoGraphy>
+        </div>
+    )
+
+}
+
+ContactUs.propTypes = {
+
+};

src/app/components/GB_Info/ContactUs/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "contactus",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./index",
+  "author": {
+    "name": "Don Strawsburg",
+    "email": "don@goforward.group",
+    "url": "https://goforward.group/"
+  },
+  "contributors": [
+    {
+      "name": "Don Strawsburg",
+      "email": "don@goforward.group",
+      "url": "https://goforward.group/"
+    },
+    {
+      "name": "Sean Strawsburg",
+      "email": "sean@goforward.group",
+      "url": "https://goforward.group/"
+    }
+  ]
+}

src/app/components/GB_Info/Copyright/index.tsx

@@ -0,0 +1,40 @@
+import React, { Component } from 'react';
+import { COMPANY_NAME, COMPANY_URL } from '@/src/app/lib/constants';
+import Typography from '@mui/material/Typography';
+import MuiLink from '@mui/material/Link';
+import styles from './styles.module.css'
+import Link from 'next/link'
+import styled from '@emotion/styled'
+
+
+export default class Copyright extends Component {
+  render() {
+    return (
+      (<CopyStyled>
+        <div className="copyright">&copy;&nbsp; {new Date().getFullYear()} {' '}
+          <Link href={COMPANY_URL}>
+            {COMPANY_NAME}
+          </Link>{' '}
+          <span>All Rights Reserved.</span>
+        </div>
+      </CopyStyled>)
+    );
+  }
+}
+
+const CopyStyled = styled.div`
+    .copyright {
+      background:  #4c5c3f;
+      font-size:.80em;
+      text-transform: uppercase;
+      color:#FFF;
+      display: block;
+      width:100%;
+      text-align:center;
+
+        a {
+          color:#FFF;
+          text-decoration:none;
+        }
+    }
+`

src/app/components/GB_Info/Copyright/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "copyright",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./index",
+  "author": {
+    "name": "Don Strawsburg",
+    "email": "don@goforward.group",
+    "url": "https://goforward.group/"
+  },
+  "contributors": [
+    {
+      "name": "Don Strawsburg",
+      "email": "don@goforward.group",
+      "url": "https://goforward.group/"
+    },
+    {
+      "name": "Sean Strawsburg",
+      "email": "sean@goforward.group",
+      "url": "https://goforward.group/"
+    }
+  ]
+}

src/app/components/GB_Info/Copyright/styles.module.css

@@ -0,0 +1,7 @@
+.white {
+    color: white;
+    font-size: .5em;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    font-family: "hind";
+}

src/app/components/GB_Info/Disclosure/index.tsx

@@ -0,0 +1,54 @@
+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 '@/src/app/lib/constants'
+import {SITE_CONT_TYPE} from '@/src/app/lib/constants'
+import { useQuery, useMutation, gql } from "@apollo/client";
+
+export default function Disclosure(props) {
+
+    const GET_SITE_CONTENT = gql`
+        query Get_Site_Content {
+          site_contents(where: {content_id: {_eq: ${SITE_CONT_TYPE.DISCLOSURE}}}, order_by: {content: asc}) {
+            id
+            content_id
+            content
+          }
+         }
+       `;
+
+    const { loading, error, data } = useQuery(GET_SITE_CONTENT);
+    if (loading) return "Loading ...";
+    if (error) return `Error! ${error.message}`;
+    return (
+        <div>
+            <TypoGraphy paragraph={true} variant="body1" color="inherit" >
+                {constants.SITE_NAME}, owned by {constants.COMPANY_NAME}, receives compensation through affiliate relationships with merchants listed on this site. Please know that this in no way affects reviews, benchmarks, content, or this site's opinions of products, services, manufacturers, partners, or merchants.
+                    </TypoGraphy>
+            <TypoGraphy paragraph={true} variant="body1" color="inherit" >
+                The mission of   {constants.SITE_NAME}  is to provide the best functionality for this site's users, regardless of any potential affiliate commissions.
+                    {constants.SITE_NAME} does not accept donations. Instead, income received from affiliate relationships funds site maintenance and feature development. If you desire to donate to PCPartPicker, I kindly ask that you consider donating to a charitable organization instead. I am particularly fond of the NRA, a non-profit organization that provides safety training to gun owners.
+                    </TypoGraphy>
+            <div>
+                {data.site_contents.map((site_content: { content: any; }) => (
+                    <span dangerouslySetInnerHTML={{ __html: site_content.content }} />
+                ))}
+            </div>
+            <TypoGraphy paragraph={true} variant="body1" color="inherit" >
+                Thanks,
+                    </TypoGraphy>
+            <TypoGraphy paragraph={true} variant="body1" color="inherit" >
+                {constants.COMPANY_NAME}
+            </TypoGraphy>
+            <TypoGraphy paragraph={true} variant="body1" color="inherit" >
+                {constants.SITE_NAME} is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to amazon.com.
+                    </TypoGraphy>
+        </div>
+    )
+}
+
+
+Disclosure.propTypes = {
+
+};

src/app/components/GB_Info/Disclosure/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "disclosure",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./index",
+  "author": {
+    "name": "Don Strawsburg",
+    "email": "don@goforward.group",
+    "url": "https://goforward.group/"
+  },
+  "contributors": [
+    {
+      "name": "Don Strawsburg",
+      "email": "don@goforward.group",
+      "url": "https://goforward.group/"
+    },
+    {
+      "name": "Sean Strawsburg",
+      "email": "sean@goforward.group",
+      "url": "https://goforward.group/"
+    }
+  ]
+}

src/app/components/GB_Info/Faq/index.tsx

@@ -0,0 +1,34 @@
+import React, { Component } from 'react';
+import styles from './styles.module.css'
+import { useQuery, useMutation, gql } from "@apollo/client";
+
+export default function Faq(props) {
+
+  const GET_SITE_CONTENT_FAQ = gql`
+  query Get_Site_Content_Faq {
+    site_contents(where: {content_id: {_eq: "FAQ"}}, order_by: {content: asc}) {
+      id
+      content_id
+      content
+    }
+   }
+ `;
+
+  const { loading, error, data } = useQuery(GET_SITE_CONTENT_FAQ);
+  if(loading) return "Loading ...";
+  if(error) return `Error! ${error.message}` ;
+  
+  return (
+
+    <div className="faq container">
+      {props.children} 
+      <h3>Frequently Asked Questions</h3>
+      <div>
+        {data.site_contents.map((site_content: { content: any; }) => (
+          <span dangerouslySetInnerHTML={{__html: site_content.content}}/>
+        ))}
+
+      </div>
+    </div>
+  )
+}

src/app/components/GB_Info/Faq/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "faq",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./index",
+  "author": {
+    "name": "Don Strawsburg",
+    "email": "don@goforward.group",
+    "url": "https://goforward.group/"
+  },
+  "contributors": [
+    {
+      "name": "Don Strawsburg",
+      "email": "don@goforward.group",
+      "url": "https://goforward.group/"
+    },
+    {
+      "name": "Sean Strawsburg",
+      "email": "sean@goforward.group",
+      "url": "https://goforward.group/"
+    }
+  ]
+}

src/app/components/GB_Info/PIP/index.tsx

@@ -0,0 +1,39 @@
+import React, { Component } from 'react'
+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 '@/src/app/lib/constants'
+import { useQuery, useMutation, gql } from "@apollo/client";
+
+export default function PIP(props) {
+    const GET_SITE_CONTENT = gql`
+    query Get_Site_Content {
+      site_contents(where: {content_id: {_eq: "PIP"}}, order_by: {content: asc}) {
+        id
+        content_id
+        content
+      }
+     }
+   `;
+
+    const { loading, error, data } = useQuery(GET_SITE_CONTENT);
+    if (loading) return "Loading ...";
+    if (error) return `Error! ${error.message}`;
+    
+    return (
+        <div>
+            <Head title="Personal Information" />
+            <TypoGraphy paragraph='true' variant="body" color="inherit" >
+
+                {data.site_contents.map((site_content: { content: any; }) => (
+                    <span dangerouslySetInnerHTML={{ __html: site_content.content }} />
+                ))}              
+                </TypoGraphy>
+        </div>
+    )
+}
+
+PIP.propTypes = {
+
+};

src/app/components/GB_Info/PIP/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "pip",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./index",
+  "author": {
+    "name": "Don Strawsburg",
+    "email": "don@goforward.group",
+    "url": "https://goforward.group/"
+  },
+  "contributors": [
+    {
+      "name": "Don Strawsburg",
+      "email": "don@goforward.group",
+      "url": "https://goforward.group/"
+    },
+    {
+      "name": "Sean Strawsburg",
+      "email": "sean@goforward.group",
+      "url": "https://goforward.group/"
+    }
+  ]
+}

src/app/components/GB_Info/PrivacyPolicy/index.tsx

@@ -0,0 +1,35 @@
+import React, { Component } from 'react'
+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 '@/src/app/lib/constants'
+import { useQuery, useMutation, gql } from "@apollo/client";
+
+export default function PrivacyPolicy(props) {
+        const GET_SITE_CONTENT = gql`
+        query Get_Site_Content {
+          site_contents(where: {content_id: {_eq: "PP"}}, order_by: {content: asc}) {
+            id
+            content_id
+            content
+          }
+         }
+       `;
+
+        const { loading, error, data } = useQuery(GET_SITE_CONTENT);
+        if (loading) return "Loading ...";
+        if (error) return `Error! ${error.message}`;
+
+        return (
+            <div>
+                <Head title="Privacy Policy" />
+                <TypoGraphy paragraph='true' variant="body" color="inherit" >
+                    {data.site_contents.map((site_content: { content: any; }) => (
+                        <span dangerouslySetInnerHTML={{ __html: site_content.content }} />
+                    ))}
+                </TypoGraphy>
+            </div>
+        )
+    }
+   

src/app/components/GB_Info/PrivacyPolicy/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "privacypolicy",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./index",
+  "author": {
+    "name": "Don Strawsburg",
+    "email": "don@goforward.group",
+    "url": "https://goforward.group/"
+  },
+  "contributors": [
+    {
+      "name": "Don Strawsburg",
+      "email": "don@goforward.group",
+      "url": "https://goforward.group/"
+    },
+    {
+      "name": "Sean Strawsburg",
+      "email": "sean@goforward.group",
+      "url": "https://goforward.group/"
+    }
+  ]
+}

src/app/components/GB_Info/TermsOfService/index.tsx

@@ -0,0 +1,38 @@
+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 '@/src/app/lib/constants'
+import { useQuery, useMutation, gql } from "@apollo/client";
+
+export default function TermsOfService(props) {
+    const GET_SITE_CONTENT = gql`
+    query Get_Site_Content {
+      site_contents(where: {content_id: {_eq: "TOS"}}, order_by: {content: asc}) {
+        id
+        content_id
+        content
+      }
+     }
+   `;
+
+    const { loading, error, data } = useQuery(GET_SITE_CONTENT);
+    if (loading) return "Loading ...";
+    if (error) return `Error! ${error.message}`;
+    return (
+        <div>
+            <Head title="Terms Of Service" />
+            <TypoGraphy paragraph='true' variant="body" color="inherit" >
+                <div>
+                    {data.site_contents.map((site_content: { content: any; }) => (
+                        <span dangerouslySetInnerHTML={{ __html: site_content.content }} />
+                    ))}
+                </div>
+            </TypoGraphy>
+        </div>
+    )
+}
+
+TermsOfService.propTypes = {
+
+};

src/app/components/GB_Info/TermsOfService/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "termsofservice",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./index.tsx",
+  "author": {
+    "name": "Don Strawsburg",
+    "email": "don@goforward.group",
+    "url": "https://goforward.group/"
+  },
+  "contributors": [
+    {
+      "name": "Don Strawsburg",
+      "email": "don@goforward.group",
+      "url": "https://goforward.group/"
+    },
+    {
+      "name": "Sean Strawsburg",
+      "email": "sean@goforward.group",
+      "url": "https://goforward.group/"
+    }
+  ]
+}

src/app/components/GB_SignIn/index.tsx

@@ -0,0 +1,132 @@
+import React from 'react';
+import Avatar from '@mui/material/Avatar';
+import Button from '@mui/material/Button';
+import CssBaseline from '@mui/material/CssBaseline';
+import TextField from '@mui/material/TextField';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import Link from '@mui/material/Link';
+import Paper from '@mui/material/Paper';
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
+import Typography from '@mui/material/Typography';
+import { makeStyles } from '@mui/material/styles';
+import styles from "./styles.module.css";
+
+function Copyright() {
+  return (
+    <Typography variant="body2" color="textSecondary" align="center">
+      {'Copyright © '}
+      <Link color="inherit" href="https://material-ui.com/">
+        Your Website
+      </Link>{' '}
+      {new Date().getFullYear()}
+      {'.'}
+    </Typography>
+  );
+}
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    height: '100vh',
+  },
+  image: {
+    backgroundImage: 'url(https://source.unsplash.com/random)',
+    backgroundRepeat: 'no-repeat',
+    backgroundColor:
+      theme.palette.type === 'light' ? theme.palette.grey[50] : theme.palette.grey[900],
+    backgroundSize: 'cover',
+    backgroundPosition: 'center',
+  },
+  paper: {
+    margin: theme.spacing(8, 4),
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+  },
+  avatar: {
+    margin: theme.spacing(1),
+    backgroundColor: theme.palette.secondary.main,
+  },
+  form: {
+    width: '100%', // Fix IE 11 issue.
+    marginTop: theme.spacing(1),
+  },
+  submit: {
+    margin: theme.spacing(3, 0, 2),
+  },
+}));
+
+export default function SignInSide() {
+  const classes = useStyles();
+
+  return (
+    <Grid container component="main" className={classes.root}>
+      <CssBaseline />
+      <Grid item xs={false} sm={4} md={7} className={classes.image} />
+      <Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
+        <div className={classes.paper}>
+          <Avatar className={classes.avatar}>
+            <LockOutlinedIcon />
+          </Avatar>
+          <Typography component="h1" variant="h5">
+            Sign in
+          </Typography>
+          <form className={classes.form} noValidate>
+            <TextField
+              variant="outlined"
+              margin="normal"
+              required
+              fullWidth
+              id="email"
+              label="Email Address"
+              name="email"
+              autoComplete="email"
+              autoFocus
+            />
+            <TextField
+              variant="outlined"
+              margin="normal"
+              required
+              fullWidth
+              name="password"
+              label="Password"
+              type="password"
+              id="password"
+              autoComplete="current-password"
+            />
+            <FormControlLabel
+              control={<Checkbox value="remember" color="primary" />}
+              label="Remember me"
+            />
+            <Button
+              type="submit"
+              fullWidth
+              variant="contained"
+              color="primary"
+              className={classes.submit}
+            >
+              Sign In
+            </Button>
+            <Grid container>
+              <Grid item xs>
+                <Link href="#" variant="body2">
+                  Forgot password?
+                </Link>
+              </Grid>
+              <Grid item>
+                <Link href="#" variant="body2">
+                  {"Don't have an account? Sign Up"}
+                </Link>
+              </Grid>
+            </Grid>
+            <Box mt={5}>
+              <Copyright />
+            </Box>
+          </form>
+        </div>
+      </Grid>
+    </Grid>
+  );
+}

src/app/components/GB_SignIn/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "signin",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./index",
+  "author": {
+    "name": "Don Strawsburg",
+    "email": "don@goforward.group",
+    "url": "https://goforward.group/"
+  },
+  "contributors": [
+    {
+      "name": "Don Strawsburg",
+      "email": "don@goforward.group",
+      "url": "https://goforward.group/"
+    },
+    {
+      "name": "Sean Strawsburg",
+      "email": "sean@goforward.group",
+      "url": "https://goforward.group/"
+    }
+  ]
+}

src/app/components/GB_SignIn/styles.module.css

@@ -0,0 +1 @@
+

src/app/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/app/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/app/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/app/globals.css

@@ -0,0 +1,21 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: Arial, Helvetica, sans-serif;
+}

src/app/layout.tsx

@@ -0,0 +1,35 @@
+import type { Metadata } from "next";
+import localFont from "next/font/local";
+import "./globals.css";
+
+const geistSans = localFont({
+  src: "./fonts/GeistVF.woff",
+  variable: "--font-geist-sans",
+  weight: "100 900",
+});
+const geistMono = localFont({
+  src: "./fonts/GeistMonoVF.woff",
+  variable: "--font-geist-mono",
+  weight: "100 900",
+});
+
+export const metadata: Metadata = {
+  title: "Ballistic Builder",
+  description: "Freedom On",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}

src/app/lib/client.ts

@@ -0,0 +1,5 @@
+import { PrismaClient } from '@prisma/client'
+
+let prisma = new PrismaClient()
+
+export default prisma

src/app/lib/constants.ts

@@ -0,0 +1,28 @@
+export const APP_NAME = "The Gun Bag - Gun Builder";
+export const COMPANY_NAME = "DarkShark Technologies, LLC";
+export const COMPANY_URL = "https://goforward.group";
+export const AUTHOR = "DarkShark Technologies, LLC";
+export const META_KEYWORDS = "Pew Pew";
+export const META_DESCRIPTION = "Pow Pow";
+export default {
+  APP_NAME: 'The Gun Bag - Gun Builder',
+  SITE_NAME: 'Gun Builder',
+  COMPANY_NAME: 'DarkShark Technologies, LLC',
+  COMPANY_URL: 'https://goforward.group',
+  AUTHOR: 'DarkShark Technologies, LLC',
+  META_KEYWORDS: 'Pew Pew',
+  META_DESCRIPTION: 'Pow Pow',
+  PJAM_RAINIER: 'https://api.pepperjamnetwork.com/20120402/publisher/creative/product?apiKey=17c11367569cc10dce51e6a5900d0c7c8b390c9cb2d2cecc25b3ed53a3b8649b&format=json&programIds=8713',
+  PJAM_BARRETTA: 'https://api.pepperjamnetwork.com/20120402/publisher/creative/product?apiKey=17c11367569cc10dce51e6a5900d0c7c8b390c9cb2d2cecc25b3ed53a3b8649b&format=json&programIds=8342'
+}
+
+
+export enum SITE_CONT_TYPE {
+  CONTACTUS = "CONTACTUS",
+  PRIVACYPOLICY = "PP",
+  PERSONALINFOPOLICY = "PIP",
+  FAQ = "FAQ",
+  TERMSOFSERVICE = "TOS",
+  ABOUTUS="ABOUTUS",
+  DISCLOSURE="DISCLOSURE"
+}

src/app/lib/linkList/infoLinks.js

@@ -0,0 +1,38 @@
+export const infoLinks = {
+    ABOUT: {
+        URL: "/info/about",
+        TEXT: "About Us",
+        TIP: "About Us"
+    },
+    TOS: {
+        URL: "/info/tos",
+        TEXT: "Terms Of Service",
+        TIP: "Terms Of Service"
+    },
+    PRIVACYPOLICY: {
+        URL: "/info/privacypolicy",
+        TEXT: "Privacy Policy",
+        TIP: "Privacy Policy"
+    },
+    FAQ: {
+        URL: "/info/faq",
+        TEXT: "FAQ",
+        TIP: "FAQ"
+    },
+    DISCLOSURE: {
+        URL: "/info/disclosure",
+        TEXT: "Disclosure",
+        TIP: "Disclosure",
+    },
+    PIP: {
+        URL: "/info/pip",
+        TEXT: "Personal Information Policy",
+        TIP: "Personal Information Policy"
+    },
+    CONTACTUS: {
+        URL: "/info/contactus",
+        TEXT: "Contact Us",
+        TIP: "Contact Us"
+    }
+};
+export default infoLinks;

src/app/lib/linkList/sectionLinks.js

@@ -0,0 +1,86 @@
+export const sectionLinks = {
+    UPPERS: {
+        URL: "/products/rifleuppers",
+        TEXT: "Rifle Uppers",
+        TIP: "Rifle Uppers"
+    },
+    LOWERS: {
+        URL: "/products/lowers",
+        TEXT: "Lowers",
+        TIP: "Lowers" 
+    },
+    PARTSLIST: {
+        URL: "/products/partslist",
+        TEXT: "Parts List",
+        TIP: "Parts List" 
+    },
+    OPTICS: {
+        URL: "/products/optics",
+        TEXT: "Optics",
+        TIP: "Optics"
+    },
+    BARRELS: {
+        URL: "/products/barrels",
+        TEXT: "Barrels",
+        TIP: "Barrels"
+    },
+    ACCESSORIES: {
+        URL: "/products/accessories",
+        TEXT: "Accessories",
+        TIP: "Accessories"
+    },
+    BUILDGUIDES: {
+        URL: "/knowledge/guides",
+        TEXT: "Guides",
+        TIP: "Guides",
+    },
+    BLOG: {
+        URL: "/blog",
+        TEXT: "Blog",
+        TIP: "Blog"
+    },
+    PRICEDROPS: {
+        URL: "/knowledge/pricedrops",
+        TEXT: "Price Drops",
+        TIP: "Price Drops"
+    },
+    BUILDS: {
+        URL: "/builds",
+        TEXT: "Builds",
+        TIP: "Builds"
+    }
+};
+
+export const armoryLinks = [
+    {UPPERS: {
+        URL: "/products/rifleuppers",
+        TEXT: "Rifle Uppers",
+        TIP: "Rifle Uppers"
+    }},
+    {LOWERS: {
+        URL: "/products/lowers",
+        TEXT: "Lowers",
+        TIP: "Lowers" 
+    }},
+    {PARTSLIST: {
+        URL: "/products/partslist",
+        TEXT: "Parts List",
+        TIP: "Parts List" 
+    }},
+    {OPTICS: {
+        URL: "/products/optics",
+        TEXT: "Optics",
+        TIP: "Optics"
+    }},
+    {BARRELS: {
+        URL: "/products/barrels",
+        TEXT: "Barrels",
+        TIP: "Barrels"
+    }},
+    {ACCESSORIES: {
+        URL: "/products/accessories",
+        TEXT: "Accessories",
+        TIP: "Accessories"
+    }}];
+
+export default sectionLinks;

src/app/lib/script.ts

@@ -0,0 +1,17 @@
+import { PrismaClient } from '@prisma/client'
+
+const prisma = new PrismaClient()
+
+async function main() {
+  // ... you will write your Prisma Client queries here
+}
+
+main()
+  .then(async () => {
+    await prisma.$disconnect()
+  })
+  .catch(async (e) => {
+    console.error(e)
+    await prisma.$disconnect()
+    process.exit(1)
+  })

src/app/page.tsx

@@ -0,0 +1,20 @@
+import Link from "next/link";
+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 ";
+
+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/pages/api/products.js

@@ -0,0 +1,9 @@
+export default function handler(req, res) {
+    const products = [
+      { id: 1, name: "Barrel A", description: "High-quality steel barrel.", price: 120 },
+      { id: 2, name: "Scope X", description: "Precision optical scope.", price: 300 },
+      { id: 3, name: "Stock Z", description: "Ergonomic polymer stock.", price: 80 },
+    ];
+  
+    res.status(200).json(products);
+  }

src/app/pages/builder.js

@@ -0,0 +1,87 @@
+import { useState, useEffect } from "react";
+
+export default function Builder() {
+  const [products, setProducts] = useState([]); // Available products from the API
+  const [build, setBuild] = useState([]); // User's selected parts
+  const [loading, setLoading] = useState(true);
+
+  // Fetch available products on page load
+  useEffect(() => {
+    async function fetchProducts() {
+      try {
+        const response = await fetch("/api/products"); // Replace with your actual API endpoint
+        const data = await response.json();
+        setProducts(data);
+        setLoading(false);
+      } catch (error) {
+        console.error("Error fetching products:", error);
+        setLoading(false);
+      }
+    }
+    fetchProducts();
+  }, []);
+
+  // Add a product to the build
+  const addToBuild = (product) => {
+    setBuild((prevBuild) => [...prevBuild, product]);
+  };
+
+  // Remove a product from the build
+  const removeFromBuild = (productId) => {
+    setBuild((prevBuild) => prevBuild.filter((item) => item.id !== productId));
+  };
+
+  return (
+    <div className="bg-gray-100 min-h-screen p-6">
+      <div className="max-w-5xl mx-auto">
+        <h1 className="text-3xl font-bold text-center mb-6">Build Your Firearm</h1>
+
+        {/* Available Products */}
+        <div className="bg-white shadow-md rounded p-6 mb-6">
+          <h2 className="text-xl font-bold mb-4">Available Products</h2>
+          {loading ? (
+            <p className="text-gray-700">Loading products...</p>
+          ) : (
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+              {products.map((product) => (
+                <div key={product.id} className="bg-gray-100 shadow rounded p-4">
+                  <h3 className="text-lg font-bold">{product.name}</h3>
+                  <p className="text-gray-700">{product.description}</p>
+                  <p className="text-gray-900 font-bold">${product.price}</p>
+                  <button
+                    className="bg-blue-500 text-white px-4 py-2 rounded mt-4 hover:bg-blue-700"
+                    onClick={() => addToBuild(product)}
+                  >
+                    Add to Build
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Current Build */}
+        <div className="bg-white shadow-md rounded p-6">
+          <h2 className="text-xl font-bold mb-4">Current Build</h2>
+          {build.length === 0 ? (
+            <p className="text-gray-700">No parts added yet. Start building your firearm!</p>
+          ) : (
+            <ul className="list-disc list-inside">
+              {build.map((item) => (
+                <li key={item.id} className="flex justify-between items-center">
+                  <span>{item.name}</span>
+                  <button
+                    className="text-red-500 hover:underline"
+                    onClick={() => removeFromBuild(item.id)}
+                  >
+                    Remove
+                  </button>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/pages/oldindex.js

@@ -0,0 +1,97 @@
+import Link from "next/link";
+
+export default function Home() {
+  return (
+    (<div className="bg-gray-100 min-h-screen flex flex-col">
+      {/* Header Section */}
+      <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">Firearm 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>
+      {/* Hero Section */}
+      <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>
+      {/* Features Section */}
+      <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>
+      {/* About Section */}
+      <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">
+            Firearm 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>
+        </div>
+      </section>
+      {/* Contact Section */}
+      <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>
+      {/* Footer Section */}
+      <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>
+    </div>)
+  );
+}

src/app/pages/page-orig.tsx

@@ -0,0 +1,97 @@
+import Link from "next/link";
+
+export default function Home() {
+  return (
+    (<div className="bg-gray-100 min-h-screen flex flex-col">
+      {/* Header Section */}
+      <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>
+      {/* Hero Section */}
+      <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>
+      {/* Features Section */}
+      <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>
+      {/* About Section */}
+      <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>
+      {/* Contact Section */}
+      <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>
+      {/* Footer Section */}
+      <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>
+    </div>)
+  );
+}

src/app/pages/products.js

@@ -0,0 +1,43 @@
+import { useEffect, useState } from "react";
+
+export default function Products() {
+  const [products, setProducts] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  // Fetch products from an API
+  useEffect(() => {
+    async function fetchProducts() {
+      try {
+        const response = await fetch("https://api.example.com/products");
+        const data = await response.json();
+        setProducts(data);
+        setLoading(false);
+      } catch (error) {
+        console.error("Error fetching products:", error);
+        setLoading(false);
+      }
+    }
+    fetchProducts();
+  }, []);
+
+  return (
+    <div className="bg-gray-100 min-h-screen p-6">
+      <div className="max-w-5xl mx-auto">
+        <h1 className="text-3xl font-bold text-center mb-6">Products</h1>
+        {loading ? (
+          <p className="text-center text-gray-700">Loading products...</p>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {products.map((product) => (
+              <div key={product.id} className="bg-white shadow-md rounded p-4">
+                <h2 className="text-xl font-bold mb-2">{product.name}</h2>
+                <p className="text-gray-700 mb-2">{product.description}</p>
+                <p className="text-gray-900 font-bold">${product.price}</p>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}