work and created develop branch

Example Code/BasicClassComponent/index.js

@@ -0,0 +1,25 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types' //ES6
+import styles from './styles.module.css'
+
+export default class BasicClassComponent extends Component {
+    constructor(props){
+        super(props) 
+        this.state = {
+        
+        }
+    }
+
+    render(){
+        return (
+            <div >
+                <h1>Basic Component</h1>
+            </div>
+        )
+    }
+}
+
+BasicClassComponent.propTypes = {
+
+};
+

Example Code/BasicClassComponent/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "basicclasscomponent",
+  "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/"
+    }
+  ]
+}

Example Code/BasicFunctionComponent /index.js

@@ -0,0 +1,10 @@
+import styles from './styles.module.css'
+
+export const BasicFunctionComponent = () => {
+    return (
+        <div>
+            
+        </div>
+    )
+}
+export default BasicFunctionComponent;

Example Code/BasicFunctionComponent /package.json

@@ -0,0 +1,23 @@
+{
+  "name": "basicfunctioncomponent",
+  "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/"
+    }
+  ]
+}

Example Code/Card/index.css

@@ -0,0 +1,14 @@
+.card {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+    max-width: 80%;
+    margin: auto;
+    text-align: center;
+    padding: 1em;
+  }
+  
+  .close {
+    font-size: 1.5em;
+    float: right;
+    cursor: pointer;
+  }
+   

Example Code/Card/index.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import "./index.css";
+class Card extends React.Component {
+
+constructor( props ) {
+    super(props)
+    this.state = { show : true };
+}
+
+render() {
+        return (
+            <div className="card" >
+                <span
+                    className="close" onClick={this.props.dataclick}
+                    datatitle={this.props.title}>&times;</span>
+                <h3>{this.props.title}</h3>
+                <p>{this.props.content}</p>
+            </div>
+        );
+    }
+
+}
+export default Card;

Example Code/CardList/index.css

@@ -0,0 +1,3 @@
+.cardList {
+    
+    }

Example Code/CardList/index.js

@@ -0,0 +1,38 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import Card from "../Card/";
+import data from "../../data.json";
+
+class CardList extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.state = { cards: data.cards };
+    }
+
+    remove() {
+
+    }
+    render() {
+        return (
+            <div>
+                {
+                    this.state.cards.map((card, index) => {
+                        return <Card
+                            key={index}
+                            title={card.title}
+                            content={card.content}
+                            dataclick={this.remove}
+                        />
+                    })
+                  
+                });
+            }
+
+            </div>
+        );
+    }
+
+}
+export default CardList;
+

Example Code/Weather/index.js

@@ -0,0 +1,38 @@
+import React from "react";
+import styles from "./styles.module.css";
+class Weather extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      show: true,
+     
+    };
+    this.props = {
+      name : '',
+      temperature : '',
+      temperatureUnit : '',
+      detailedForecast : '',
+    }
+  }
+
+  render() {
+    return (
+      <div className="card">
+        <span
+          className="close"
+          onClick={this.props.dataclick}
+          datatitle={this.props.title}
+        >&times;
+        </span>
+      
+        <p>{this.props.name}</p>
+        <p>{this.props.temperature}</p>
+        <p>{this.props.temperatureUnit}</p>
+        <p>{this.props.detailedForecast}</p>
+      </div>
+    );
+  }
+  
+}
+
+export default Weather;

Example Code/Weather/styles.module.css

@@ -0,0 +1,14 @@
+.card {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+    max-width: 80%;
+    margin: auto;
+    text-align: center;
+    padding: 1em;
+  }
+  
+  .close {
+    font-size: 1.5em;
+    float: right;
+    cursor: pointer;
+  }
+   

Example Code/WeatherList/index.css

@@ -0,0 +1,3 @@
+.cardList {
+    
+    }

Example Code/WeatherList/index.js

@@ -0,0 +1,54 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import Weather from "../Weather";
+
+class WeatherList extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.state = { periods: [] };
+    }
+
+    remove() {
+
+    }
+    render() {
+        return (
+            <div>
+                {
+                    this.state.periods.map((period, index) => {
+                        return <Weather
+                            key={index}
+                            name={period.name}
+                            temperature={period.temperature}
+                            temperatureUnit={period.temperatureUnit}
+                            detailedForecast={period.detailedForecast}
+                            dataclick={this.remove}
+                        />
+                    })
+                  
+                });
+            }
+
+            </div>
+        );
+    }
+    getData() {
+        fetch("https://api.weather.gov/gridpoints/MLB/25,69/forecast")
+           .then(response => response.json())       
+           .then(data => this.setState({ periods : data.properties.periods}))
+           .then(data => console.log(data));  
+           this.setState({
+               detailedForcast : 'Test Detailed forcast',
+               name : 'Test data',
+               temperature : '90',
+               temperatureUnit : 'Celcius'});
+   
+       }
+     
+     componentDidMount() { 
+         this.getData();
+     }
+
+}
+export default WeatherList;

Example Code/fetchData.tsx

@@ -0,0 +1,11 @@
+export default async function Page() {
+    let data = await fetch('https://api.vercel.app/blog')
+    let posts = await data.json()
+    return (
+      <ul>
+        {posts.map((post) => (
+          <li key={post.id}>{post.title}</li>
+        ))}
+      </ul>
+    )
+  }

components/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"><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>
+        )
+    }
+

components/Footer/FooterLinks/index.js

@@ -0,0 +1,68 @@
+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 '@/fragments/FooterLink';
+
+// SS - IDK what this is. It feels hacky..
+// DS - Because it is hacky, its stupid javascript magic
+// const useStyles = theme => ({ //const makes a constant, => defines a function, 
+// so it looks like useStyles will end up beign a function that is actually the theme function
+// the useStyles function will have properties in root, so useStyles.root
+//  root: {
+//    width: '75%',
+//    maxWidth: 260,
+//    /* backgroundColor: theme.palette.background.paper, */
+//    float: 'right',
+//    marginRight: '2%',
+//    fontSize: '.80em'
+//  },
+// }); 
+// }
+
+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;

components/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/"
+    }
+  ]
+}

components/Footer/FooterLinks/styles.module.css

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

components/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 "@/components/Info/Copyright";
+import FooterLinks from "./FooterLinks";
+import Link from "next/link";
+import { infoLinks } from "@/lib/linkList/infoLinks";
+import { sectionLinks } from "@/lib/linkList/sectionLinks";
+import Armory from '@/fragments/Armory';
+import GroundZero from "@/fragments/GroundZero";
+import Information from "@/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;

components/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/"
+    }
+  ]
+}

components/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;
+    }
+}

components/Header/index.tsx

@@ -0,0 +1,108 @@
+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 '@/lib/linkList/infoLinks';
+import  sectionLinks  from '@/lib/linkList/sectionLinks';
+
+export default class Header extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+    }
+  }
+
+  render() {
+    return (
+         <div>
+          <div className="topheader">
+            <Link href="/"><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>
+                  </ListItemText>
+
+                    <ListItemText inset>
+                        <Link href={sectionLinks.PARTSLIST.URL}><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>
+                    </ListItemText>
+
+                    <ListItemText inset>
+                        <Link href={sectionLinks.BLOG.URL}><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 = {
+
+};

components/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/"
+    }
+  ]
+}

components/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;
+}

components/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>
+    );
+  }
+
+}
+

components/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/"
+    }
+  ]
+}

components/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>
+  );
+}

components/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/"
+    }
+  ]
+}

components/SignIn/styles.module.css

@@ -0,0 +1 @@
+

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"
+}

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;

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;

package.json

@@ -9,18 +9,27 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "react": "19.0.0-rc-66855b96-20241106",
-    "react-dom": "19.0.0-rc-66855b96-20241106",
-    "next": "15.0.3"
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@mui/icons-material": "^6.1.7",
+    "@mui/joy": "^5.0.0-beta.48",
+    "@mui/material": "^6.1.7",
+    "@mui/styles": "^6.1.7",
+    "@mui/system": "^6.1.7",
+    "@mui/x-data-grid": "^7.22.2",
+    "fontsource-roboto": "^4.0.0",
+    "next": "15.0.3",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "15.0.3",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
-    "eslint": "^8",
-    "eslint-config-next": "15.0.3"
+    "typescript": "^5"
   }
 }