added pagehero

src/app/Armory/page.tsx

@@ -1,8 +1,13 @@
 import { NextPage } from "next";
+import PageHero from "@components/PageHero";
 
 export default function ArmoryPage() {
   return (
-    <div className="p-4 pt-16 mx-auto max-w-screen-md">
+    <div>
+      <PageHero 
+              title="The Armory"
+            />
+      <div className="p-4 pt-16 mx-auto max-w-screen-md">
       <h1 className="text-2xl font-bold mb-4 text-gray-600">AR-15 Builder</h1>
       <p className="text-gray-600 mb-6">
         Select components to build your custom AR-15.
@@ -51,5 +56,6 @@ export default function ArmoryPage() {
         </table>
       </div>
     </div>
+    </div>
   );
 }

src/app/Products/page.tsx

@@ -1,16 +1,57 @@
+import PageHero from "@components/PageHero";
+
 export default function ProductsPage() {
     return (
-      <div className="container mx-auto p-4">
-        <h1 className="text-2xl font-bold mb-4 text-gray-900">Products</h1>
-        <div className="grid gap-4">
-          <div className="p-4 border rounded shadow text-gray-900">
-            <h2 className="font-semibold ">Sample Lower Receiver</h2>
-            <p>Price: $199.99</p>
-            <button className="mt-2 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
-              Buy Now
-            </button>
-          </div>
-        </div>
+      <div>
+        <PageHero 
+        title="Builder"
+      />
+        <div className="container mx-auto p-4">
+        <div className="bg-white rounded-lg shadow-md p-6 overflow-x-auto text-gray-600">
+        <table className="min-w-full table-auto">
+          <thead>
+            <tr className="bg-gray-50 border-b">
+              <th className="px-4 py-2 text-left">Component</th>
+              <th className="px-4 py-2 text-left">Selection</th>
+              <th className="px-4 py-2 text-left">Caliber</th>
+              <th className="px-4 py-2 text-left">Price</th>
+              <th className="px-4 py-2 text-left">Shipping</th>
+              <th className="px-4 py-2 text-left">Where</th>
+            </tr>
+          </thead>
+          <tbody>
+            {[
+              "Lower Receiver",
+              "Upper Receiver",
+              "Barrel",
+              "Handguard",
+              "Bolt Carrier Group",
+              "Charging Handle",
+              "Buffer Tube",
+              "Stock",
+              "Grip",
+              "Trigger",
+              "Magazine"
+            ].map((component) => (
+              <tr key={component} className="border-b hover:bg-gray-50">
+                <td className="px-4 py-2">{component}</td>
+                <td className="px-4 py-2">
+                  <button className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
+                    Choose a Part
+                  </button>
+                </td>
+                <td className="px-4 py-2">-</td>
+                <td className="px-4 py-2">-</td>
+                <td className="px-4 py-2">-</td>
+                <td className="px-4 py-2">-</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
       </div>
+    </div>
+      
+      </div>
+      
     );
   }

src/components/Navbar/index.tsx

@@ -15,7 +15,6 @@ const navigation = [
   { name: "Armory", href: "/Armory", current: false },
   { name: "Products", href: "/Products", current: false },
   { name: "Db Data", href: "/Products/lowers", current: false },
-  { name: "Completed Builds", href: "#", current: false },
   { name: "Brands", href: "/Brands", current: false },
 ];
 

src/components/PageHero/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+interface PageHeroProps {
+  title: string;
+}
+
+export default function PageHero({ title }: PageHeroProps) {
+  return (
+    <div className="mb-6 bg-slate-700 text-center py-10">
+      <h1 className="text-2xl uppercase font-bold">{title}</h1>
+    </div>
+  );
+} 

src/components/PopNav/page.tsx

@@ -41,7 +41,7 @@ const navigation = {
           id: 'lower-parts',
           name: 'Lower Parts',
           items: [
-            { name: 'Lower Receivers', href: '#' },
+            { name: 'Lower Receivers', href: '/Products/lowers' },
             { name: 'Grips', href: '#' },
             { name: 'Stocks', href: '#' },
             { name: 'Triggers', href: '#' },