From 559dd5fe4cc7471bdee7733b41227bb2c67dd9a3 Mon Sep 17 00:00:00 2001 From: Sean S Date: Fri, 13 Dec 2024 06:44:37 -0500 Subject: [PATCH] added a single product page --- src/app/product/page.tsx | 96 +++++++++++++++++++++++++++++ src/components/PopNav/page.tsx | 5 +- src/styles/globals.css | 106 +++++---------------------------- 3 files changed, 114 insertions(+), 93 deletions(-) create mode 100644 src/app/product/page.tsx diff --git a/src/app/product/page.tsx b/src/app/product/page.tsx new file mode 100644 index 0000000..31cc7d9 --- /dev/null +++ b/src/app/product/page.tsx @@ -0,0 +1,96 @@ +import { NextPage } from "next"; + +export default function ProductPage() { + return ( +
+
+ {/* Product Image */} +
+ Product Name +
+ + {/* Product Info */} +
+

Product Name

+ + {/* Vendor Pricing Table */} +
+

Available From

+
+ + + + + + + + + + + + + + + + + + + + + + + +
VendorPriceStockAction
Vendor 1$199.99In Stock + +
Vendor 2$209.99Limited Stock + +
+
+
+
+
+ + {/* Product Description */} +
+

Product Description

+

+ 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. +

+
+ + {/* Product Specifications */} +
+

Specifications

+
+
+ Manufacturer: Company Name +
+
+ Model: ABC-123 +
+
+ Weight: 2.5 lbs +
+
+ Dimensions: 10" x 5" x 3" +
+
+ Material: Aluminum +
+
+ Warranty: 1 Year Limited +
+
+
+
+ ); +} diff --git a/src/components/PopNav/page.tsx b/src/components/PopNav/page.tsx index 5b413b2..f04f2a7 100644 --- a/src/components/PopNav/page.tsx +++ b/src/components/PopNav/page.tsx @@ -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() { diff --git a/src/styles/globals.css b/src/styles/globals.css index de8e250..419d70d 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -2,98 +2,20 @@ @tailwind components; @tailwind utilities; +:root { + --background: #ffffff; + --foreground: #171717; +} + +@media (prefers-color-scheme: dark) { + :root { + --background: #ededed; + --foreground: #0a0a0a; + } +} + body { + color: var(--foreground); + background: var(--background); 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; - } -}