Forward/ballistic-builder
3
0
Fork 0
mirror of https://gitea.gofwd.group/dstrawsb/ballistic-builder.git synced 2025-12-06 02:36:44 -05:00
Code Issues Packages Projects Releases Wiki Activity

added a single product page

Browse Source
This commit is contained in:
Sean S
2024-12-13 06:44:37 -05:00
parent cd0a2dedc3
commit 559dd5fe4c
3 changed files with 114 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
src/app/product/page.tsx Normal file
View File

@@ -0,0 +1,96 @@
import { NextPage } from "next";
export default function ProductPage() {
return (
<div className="p-4 pt-16 mx-auto max-w-screen-lg">
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
{/* Product Image */}
<div className="bg-white rounded-lg shadow-md p-4">
<img
src="https://www.radianweapons.com/receivers/lower-receivers/gallery/LOWER_RECEIVERS-1_6_1.jpg"
alt="Product Name"
className="w-full h-auto rounded-lg"
/>
</div>
{/* Product Info */}
<div>
<h1 className="text-3xl font-bold mb-4">Product Name</h1>
{/* Vendor Pricing Table */}
<div className="bg-white rounded-lg shadow-md p-4 mb-6">
<h2 className="text-xl font-semibold mb-4">Available From</h2>
<div className="overflow-x-auto">
<table className="min-w-full table-auto">
<thead>
<tr className="bg-gray-50 border-b">
<th className="px-4 py-2 text-left">Vendor</th>
<th className="px-4 py-2 text-left">Price</th>
<th className="px-4 py-2 text-left">Stock</th>
<th className="px-4 py-2 text-left">Action</th>
</tr>
</thead>
<tbody>
<tr className="border-b hover:bg-gray-50">
<td className="px-4 py-2">Vendor 1</td>
<td className="px-4 py-2">$199.99</td>
<td className="px-4 py-2">In Stock</td>
<td className="px-4 py-2">
<button className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
Buy Now
</button>
</td>
</tr>
<tr className="border-b hover:bg-gray-50">
<td className="px-4 py-2">Vendor 2</td>
<td className="px-4 py-2">$209.99</td>
<td className="px-4 py-2">Limited Stock</td>
<td className="px-4 py-2">
<button className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
Buy Now
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
{/* Product Description */}
<div className="bg-white rounded-lg shadow-md p-6 mb-8">
<h2 className="text-xl font-semibold mb-4">Product Description</h2>
<p className="text-gray-600">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
{/* Product Specifications */}
<div className="bg-white rounded-lg shadow-md p-6">
<h2 className="text-xl font-semibold mb-4">Specifications</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="border-b py-2">
<span className="font-medium">Manufacturer:</span> Company Name
</div>
<div className="border-b py-2">
<span className="font-medium">Model:</span> ABC-123
</div>
<div className="border-b py-2">
<span className="font-medium">Weight:</span> 2.5 lbs
</div>
<div className="border-b py-2">
<span className="font-medium">Dimensions:</span> 10" x 5" x 3"
</div>
<div className="border-b py-2">
<span className="font-medium">Material:</span> Aluminum
</div>
<div className="border-b py-2">
<span className="font-medium">Warranty:</span> 1 Year Limited
</div>
</div>
</div>
</div>
);
}

5
src/components/PopNav/page.tsx
View File

@@ -79,7 +79,10 @@ const navigation = {
], ],
}, },
], ],
pages: [{ name: "Brands", href: "/Brands" }], pages: [
{ name: "Brands", href: "/Brands" },
{ name: "Single Product", href: "/product" },
],
}; };
export default function PopNav() { export default function PopNav() {

106
src/styles/globals.css
View File

@@ -2,98 +2,20 @@
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
:root {
--background: #ffffff;
--foreground: #171717;
}
@media (prefers-color-scheme: dark) {
:root {
--background: #ededed;
--foreground: #0a0a0a;
}
}
body { body {
color: var(--foreground);
background: var(--background);
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
} }
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%;
--chart-1: 12 76% 61%;
--chart-2: 173 58% 39%;
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
--radius: 0.5rem;
}
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%;
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
--accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 212.7 26.8% 83.9%;
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
--chart-5: 340 75% 55%;
}
.tactical {
--background: #D9D4CC;
--foreground: #262621;
--card: #D9D4CC;
--card-foreground: #262621;
--popover: #D9D4CC;
--popover-foreground: #262621;
--primary: #7C8C58;
--primary-foreground: #D9D4CC;
--secondary: #BCBF63;
--secondary-foreground: #262621;
--muted: #BCBF63;
--muted-foreground: #262621;
--accent: #D98841;
--accent-foreground: #D9D4CC;
--destructive: #D98841;
--destructive-foreground: #D9D4CC;
--border: #7C8C58;
--input: #7C8C58;
--ring: #BCBF63;
--chart-1: #7C8C58;
--chart-2: #BCBF63;
--chart-3: #262621;
--chart-4: #D9D4CC;
--chart-5: #D98841;
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}