moved stuff out of app since it is used for routing

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