restrucuring

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

app/components/Base_Component/index.tsx

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

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

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

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

app/components/GB_Footer/index.tsx

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import styles from './styles.module.scss';
-import Copyright from "@/app/components/Info/Copyright";
+import Copyright from "@/app/components/GB_Info/Copyright";
 import FooterLinks from "./FooterLinks";
 import Link from "next/link";
 import { infoLinks } from "@/app/lib/linkList/infoLinks";

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 = {
+
+};

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

app/components/Header/index.tsx

@@ -1,106 +1,23 @@
-import React, { Component } from 'react';
+import Link from "next/link";
-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 {
+export default function Header() {
-  constructor(props) {
+  {/* Header Section */ }
-    super(props)
+  return (
-    this.state = {
+    (
-    }
+      <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>
-  render() {
+          <nav>
-    return (
+            <ul className="flex space-x-4">
-      (<div>
+              <li><Link href="#features" className="hover:underline">Features</Link></li>
-        <div className="topheader">
+              <li><Link href="/builder" className="hover:underline">Builder</Link></li>
-          <Link href="/" legacyBehavior><a className="logo">Gun Builder</a>
+              <li><Link href="/products" className="hover:underline">Products</Link></li>
-          </Link>
+              <li><Link href="#contact" className="hover:underline">Contact</Link></li>
+            </ul>
+          </nav>
         </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>
+      </header>
-                      <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 = {
-
-};

app/components/Hero/index.tsx

@@ -1,45 +1,24 @@
-import React from 'react';
+import Link from "next/link";
-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 {
+export default function Hero() {
-  constructor(props) {
+    {/* Hero Section */ }
-    super(props);
-    this.state = {
-      show: true,
-    };
-  }
-
-  render() {
     return (
 
-      <div className="hero" styles={{ backgroundImage:`url({${this.props.image}})` }}>
+        <section className="bg-gray-700 text-white py-20 text-center">
-        <div className="hero-text">
+            <div className="container mx-auto px-6">
-          <h3>{this.props.heading}</h3>
+                <h2 className="text-4xl font-bold mb-4">Build Your Dream Firearm</h2>
-          <p>{this.props.subheading}</p>
+                <p className="text-lg mb-6">
-          <Button href={this.props.link} variant="contained" color="primary">
+                    Customize every component of your firearm with ease and precision.
-            {this.props.linktext}
+                </p>
-          </Button>
+                <Link
-        </div>
+                    href="/builder"
+                    className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
 
-        <style jsx>{`
+                    Get Started
-            .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>
-    );
-  }
 
+                </Link>
+            </div>
+        </section>
+
+    )
 }
-

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

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

app/page.tsx

@@ -1,97 +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 Section */}
+      <Header />
-      <header className="bg-gray-800 text-white py-4 shadow-md">
+      <Hero />
-        <div className="container mx-auto px-6 flex justify-between items-center">
+      <FeaturesSection />
-          <h1 className="text-2xl font-bold">Ballistic Builder</h1>
+      <About />
-          <nav>
+      <Contact />
-            <ul className="flex space-x-4">
+      <Footer />
-                <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>)
   );
 }