added pagehero

This commit is contained in:
2024-12-12 10:09:32 -05:00
parent 67cba8ca10
commit 94772623cd
5 changed files with 73 additions and 14 deletions

View File

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

View File

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