Merge version_2 into main #3
131
src/app/admin/page.tsx
Normal file
131
src/app/admin/page.tsx
Normal file
@@ -0,0 +1,131 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Lock } from "lucide-react";
|
||||
|
||||
export default function AdminDashboard() {
|
||||
const [isAuthenticated, setIsAuthenticated] = useState(false);
|
||||
const [password, setPassword] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
|
||||
// Simple password protection (in production, use proper authentication)
|
||||
const ADMIN_PASSWORD = "KnightGW2025!";
|
||||
|
||||
const handleLogin = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (password === ADMIN_PASSWORD) {
|
||||
setIsAuthenticated(true);
|
||||
setError("");
|
||||
setPassword("");
|
||||
} else {
|
||||
setError("Incorrect password");
|
||||
setPassword("");
|
||||
}
|
||||
};
|
||||
|
||||
if (!isAuthenticated) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-900 to-slate-800 flex items-center justify-center p-4">
|
||||
<div className="w-full max-w-md">
|
||||
<div className="bg-slate-800 rounded-lg shadow-2xl p-8 border border-slate-700">
|
||||
<div className="flex justify-center mb-6">
|
||||
<Lock className="w-12 h-12 text-amber-500" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-white text-center mb-2">Admin Dashboard</h1>
|
||||
<p className="text-slate-400 text-center mb-6">Password Protected</p>
|
||||
|
||||
<form onSubmit={handleLogin}>
|
||||
<input
|
||||
type="password"
|
||||
placeholder="Enter admin password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="w-full px-4 py-2 rounded bg-slate-700 text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-amber-500 mb-4"
|
||||
/>
|
||||
{error && <p className="text-red-500 text-sm mb-4">{error}</p>}
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full bg-amber-500 hover:bg-amber-600 text-slate-900 font-semibold py-2 rounded transition-colors"
|
||||
>
|
||||
Login
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-900 to-slate-800 p-6">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="flex justify-between items-center mb-8">
|
||||
<h1 className="text-3xl font-bold text-white">Admin Dashboard</h1>
|
||||
<button
|
||||
onClick={() => setIsAuthenticated(false)}
|
||||
className="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded transition-colors"
|
||||
>
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
|
||||
<div className="bg-slate-800 p-6 rounded-lg border border-slate-700">
|
||||
<p className="text-slate-400 text-sm">Total Orders</p>
|
||||
<p className="text-3xl font-bold text-white mt-2">847</p>
|
||||
</div>
|
||||
<div className="bg-slate-800 p-6 rounded-lg border border-slate-700">
|
||||
<p className="text-slate-400 text-sm">Pending Transfers</p>
|
||||
<p className="text-3xl font-bold text-amber-400 mt-2">23</p>
|
||||
</div>
|
||||
<div className="bg-slate-800 p-6 rounded-lg border border-slate-700">
|
||||
<p className="text-slate-400 text-sm">Total Revenue</p>
|
||||
<p className="text-3xl font-bold text-green-400 mt-2">$127.5K</p>
|
||||
</div>
|
||||
<div className="bg-slate-800 p-6 rounded-lg border border-slate-700">
|
||||
<p className="text-slate-400 text-sm">Active Customers</p>
|
||||
<p className="text-3xl font-bold text-blue-400 mt-2">342</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div className="lg:col-span-2 bg-slate-800 p-6 rounded-lg border border-slate-700">
|
||||
<h2 className="text-xl font-bold text-white mb-4">Recent Orders</h2>
|
||||
<div className="space-y-3">
|
||||
<div className="flex justify-between items-center bg-slate-700 p-4 rounded">
|
||||
<span className="text-white">Order #1024 - Smith & Wesson 9mm</span>
|
||||
<span className="text-green-400">Completed</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center bg-slate-700 p-4 rounded">
|
||||
<span className="text-white">Order #1023 - FFL Transfer Request</span>
|
||||
<span className="text-amber-400">Pending</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center bg-slate-700 p-4 rounded">
|
||||
<span className="text-white">Order #1022 - Colt AR-15 Rifle</span>
|
||||
<span className="text-green-400">Completed</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-800 p-6 rounded-lg border border-slate-700">
|
||||
<h2 className="text-xl font-bold text-white mb-4">Quick Actions</h2>
|
||||
<div className="space-y-3">
|
||||
<button className="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded transition-colors">
|
||||
View All Orders
|
||||
</button>
|
||||
<button className="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 rounded transition-colors">
|
||||
Manage Inventory
|
||||
</button>
|
||||
<button className="w-full bg-green-600 hover:bg-green-700 text-white py-2 rounded transition-colors">
|
||||
View Analytics
|
||||
</button>
|
||||
<button className="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-2 rounded transition-colors">
|
||||
Email Settings
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -8,9 +8,28 @@ import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
||||
import MediaAbout from '@/components/sections/about/MediaAbout';
|
||||
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
||||
import { Shield, CheckCircle, Star } from "lucide-react";
|
||||
import { Shield, CheckCircle, Star, ShoppingCart, Lock, FileText } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function LandingPage() {
|
||||
const [cartOpen, setCartOpen] = useState(false);
|
||||
const [cartItems, setCartItems] = useState([
|
||||
{
|
||||
id: "hg-001", name: "Smith & Wesson 9mm M&P Shield", price: "$499.99", quantity: 0,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/empty-bullets-gun-table_53876-148180.jpg", imageAlt: "Smith & Wesson 9mm pistol"
|
||||
},
|
||||
{
|
||||
id: "rf-002", name: "Colt .223 AR-15 Rifle", price: "$899.99", quantity: 0,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-shooting-gallery-trying-out-new-rifle-model-close-up_482257-127883.jpg", imageAlt: "Colt AR-15 rifle platform"
|
||||
}
|
||||
]);
|
||||
|
||||
const handleAddToCart = (productId: string) => {
|
||||
setCartItems(prev => prev.map(item =>
|
||||
item.id === productId ? { ...item, quantity: item.quantity + 1 } : item
|
||||
));
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
@@ -18,7 +37,7 @@ export default function LandingPage() {
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="mediumLarge"
|
||||
background="circleGradient"
|
||||
background="grid"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="glass"
|
||||
@@ -27,14 +46,14 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Inventory", id: "inventory" },
|
||||
{ name: "Shop", id: "inventory" },
|
||||
{ name: "FFL Transfers", id: "ffl" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Reviews", id: "testimonials" },
|
||||
{ name: "Legal", id: "legal" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
{ name: "Compliance", id: "legal" }
|
||||
]}
|
||||
brandName="Knight Gun Works"
|
||||
button={{ text: "Request Transfer", href: "#ffl" }}
|
||||
button={{ text: "Cart", onClick: () => setCartOpen(!cartOpen) }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -44,26 +63,26 @@ export default function LandingPage() {
|
||||
description="Trusted FFL dealer in Woodville, Texas. Offering quality firearms, expert transfers, and professional service since establishing our commitment to Texas gun owners."
|
||||
tag="Licensed FFL Dealer"
|
||||
tagIcon={Shield}
|
||||
background={{ variant: "glowing-orb" }}
|
||||
background={{ variant: "grid" }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/girl-with-machine-gun-hands-shooting-range_627829-8514.jpg"
|
||||
imageAlt="Knight Gun Works storefront and inventory"
|
||||
imagePosition="right"
|
||||
testimonials={[
|
||||
{
|
||||
name: "Marcus Johnson", handle: "Gun Enthusiast, Woodville", testimonial: "Best transfer experience I've had. Professional and fast service.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg"
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=1"
|
||||
},
|
||||
{
|
||||
name: "Sarah Williams", handle: "First-Time Buyer", testimonial: "Staff explained everything clearly. Made my first purchase confident.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg"
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=2"
|
||||
},
|
||||
{
|
||||
name: "James Miller", handle: "Collector, Texas", testimonial: "Excellent inventory and knowledgeable team. My go-to shop.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg"
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=3"
|
||||
},
|
||||
{
|
||||
name: "Robert Chen", handle: "Range Regular", testimonial: "Fair prices and fantastic customer service. Highly recommend.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg"
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=4"
|
||||
}
|
||||
]}
|
||||
buttons={[
|
||||
@@ -80,25 +99,25 @@ export default function LandingPage() {
|
||||
<div id="inventory" data-section="inventory">
|
||||
<ProductCardTwo
|
||||
title="Current Inventory"
|
||||
description="Browse our selection of quality firearms, ammunition, and accessories. All items comply with federal and Texas state regulations."
|
||||
description="Browse our selection of quality firearms, ammunition, and accessories. All items comply with federal and Texas state regulations. Add items to cart or request FFL transfers."
|
||||
tag="In Stock"
|
||||
tagIcon={CheckCircle}
|
||||
products={[
|
||||
{
|
||||
id: "hg-001", brand: "Smith & Wesson", name: "9mm M&P Shield", price: "$499.99", rating: 5,
|
||||
reviewCount: "847", imageSrc: "http://img.b2bpic.net/free-photo/empty-bullets-gun-table_53876-148180.jpg", imageAlt: "Smith & Wesson 9mm pistol"
|
||||
reviewCount: "847", imageSrc: "http://img.b2bpic.net/free-photo/empty-bullets-gun-table_53876-148180.jpg", imageAlt: "Smith & Wesson 9mm pistol", onProductClick: () => handleAddToCart("hg-001")
|
||||
},
|
||||
{
|
||||
id: "rf-002", brand: "Colt", name: ".223 AR-15 Rifle", price: "$899.99", rating: 5,
|
||||
reviewCount: "1.2k", imageSrc: "http://img.b2bpic.net/free-photo/man-shooting-gallery-trying-out-new-rifle-model-close-up_482257-127883.jpg", imageAlt: "Colt AR-15 rifle platform"
|
||||
reviewCount: "1.2k", imageSrc: "http://img.b2bpic.net/free-photo/man-shooting-gallery-trying-out-new-rifle-model-close-up_482257-127883.jpg", imageAlt: "Colt AR-15 rifle platform", onProductClick: () => handleAddToCart("rf-002")
|
||||
},
|
||||
{
|
||||
id: "sg-003", brand: "Mossberg", name: "12 Gauge Pump Action", price: "$349.99", rating: 5,
|
||||
reviewCount: "634", imageSrc: "http://img.b2bpic.net/free-photo/shotgun-bullets_53876-15100.jpg", imageAlt: "Mossberg 12 gauge shotgun"
|
||||
reviewCount: "634", imageSrc: "http://img.b2bpic.net/free-photo/shotgun-bullets_53876-15100.jpg", imageAlt: "Mossberg 12 gauge shotgun", onProductClick: () => handleAddToCart("sg-003")
|
||||
},
|
||||
{
|
||||
id: "acc-004", brand: "Holosun", name: "Red Dot Optic", price: "$199.99", rating: 5,
|
||||
reviewCount: "2.1k", imageSrc: "http://img.b2bpic.net/free-photo/micro-pipette-dropping-blood-sample-microscope-tray-genetic-analysis-science-laboratory-specialist-using-dropper-microscopic-tool-with-lens-magnifying-glass-close-up_482257-30159.jpg", imageAlt: "Holosun red dot sight"
|
||||
reviewCount: "2.1k", imageSrc: "http://img.b2bpic.net/free-photo/micro-pipette-dropping-blood-sample-microscope-tray-genetic-analysis-science-laboratory-specialist-using-dropper-microscopic-tool-with-lens-magnifying-glass-close-up_482257-30159.jpg", imageAlt: "Holosun red dot sight", onProductClick: () => handleAddToCart("acc-004")
|
||||
}
|
||||
]}
|
||||
gridVariant="two-columns-alternating-heights"
|
||||
@@ -115,19 +134,19 @@ export default function LandingPage() {
|
||||
<div id="ffl" data-section="ffl">
|
||||
<ContactSplitForm
|
||||
title="FFL Transfer Request"
|
||||
description="Request a firearms transfer through our licensed FFL services. Fill out the form below and our team will contact you within 24 hours to complete your transfer with full compliance."
|
||||
description="Request a firearms transfer through our licensed FFL services. Fill out the form below and our team will contact you within 24 hours to complete your transfer with full compliance to all federal and state regulations."
|
||||
inputs={[
|
||||
{ name: "fullName", type: "text", placeholder: "Full Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Email Address", required: true },
|
||||
{ name: "phone", type: "tel", placeholder: "Phone Number", required: true },
|
||||
{ name: "firearmType", type: "text", placeholder: "Firearm Type (e.g., 9mm Pistol)", required: true }
|
||||
]}
|
||||
textarea={{ name: "transferDetails", placeholder: "Additional transfer details, serial numbers, or special requests", rows: 5, required: false }}
|
||||
textarea={{ name: "transferDetails", placeholder: "Serial numbers, source information, or special requests", rows: 5, required: false }}
|
||||
useInvertedBackground={false}
|
||||
mediaAnimation="slide-up"
|
||||
mediaPosition="right"
|
||||
buttonText="Submit Transfer Request"
|
||||
imageSrc="http://img.b2bpic.net/free-vector/gradient-patented-label-collection_23-2149741512.jpg"
|
||||
imageSrc="http://img.b2bpic.net/free-vector/gradient-patented-label-collection_23-2149741512.jpg?_wi=1"
|
||||
imageAlt="FFL licensed dealer certification"
|
||||
/>
|
||||
</div>
|
||||
@@ -135,25 +154,25 @@ export default function LandingPage() {
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
title="Trusted by Texas Gun Owners"
|
||||
description="Read what our satisfied customers have to say about their experience with Knight Gun Works."
|
||||
description="Real reviews from customers who trust Knight Gun Works for quality products, expert service, and professional FFL transfers."
|
||||
tag="Customer Reviews"
|
||||
tagIcon={Star}
|
||||
testimonials={[
|
||||
{
|
||||
id: "review-1", name: "Marcus Johnson", role: "Gun Enthusiast", company: "Woodville", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg"
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=5"
|
||||
},
|
||||
{
|
||||
id: "review-2", name: "Sarah Williams", role: "First-Time Buyer", company: "Local Community", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg"
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=6"
|
||||
},
|
||||
{
|
||||
id: "review-3", name: "James Miller", role: "Collector", company: "Texas", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg"
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=7"
|
||||
},
|
||||
{
|
||||
id: "review-4", name: "Robert Chen", role: "Range Regular", company: "Member", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg"
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=8"
|
||||
}
|
||||
]}
|
||||
kpiItems={[
|
||||
@@ -165,7 +184,7 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{ text: "View More Reviews", href: "#" }
|
||||
{ text: "Leave a Review", href: "#" }
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
@@ -174,14 +193,14 @@ export default function LandingPage() {
|
||||
<div id="legal" data-section="legal">
|
||||
<MediaAbout
|
||||
title="Federal Compliance & Legal Standards"
|
||||
description="Knight Gun Works operates as a federally licensed FFL (Federal Firearms License) dealer in full compliance with all federal, state, and local regulations. All firearm transfers include required background checks, proper documentation, and verification procedures mandated by law."
|
||||
description="Knight Gun Works operates as a federally licensed FFL (Federal Firearms License) dealer in full compliance with all federal, state, and local regulations. All firearm transfers include required background checks through NICS, proper BATFE documentation, and verification procedures mandated by law. We prioritize safety and legal compliance in every transaction."
|
||||
tag="Legal & Compliance"
|
||||
tagIcon={Shield}
|
||||
imageSrc="http://img.b2bpic.net/free-vector/gradient-patented-label-collection_23-2149741512.jpg"
|
||||
imageSrc="http://img.b2bpic.net/free-vector/gradient-patented-label-collection_23-2149741512.jpg?_wi=2"
|
||||
imageAlt="Federal compliance certification"
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{ text: "Download Compliance Info", href: "#" }
|
||||
{ text: "View Compliance Details", href: "#" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -192,14 +211,14 @@ export default function LandingPage() {
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{ label: "Inventory", href: "#inventory" },
|
||||
{ label: "Shop Inventory", href: "#inventory" },
|
||||
{ label: "FFL Transfers", href: "#ffl" },
|
||||
{ label: "Contact Us", href: "#contact" }
|
||||
{ label: "Customer Reviews", href: "#testimonials" }
|
||||
]
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Legal Compliance", href: "#legal" },
|
||||
{ label: "Legal & Compliance", href: "#legal" },
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" }
|
||||
]
|
||||
@@ -207,7 +226,7 @@ export default function LandingPage() {
|
||||
{
|
||||
items: [
|
||||
{ label: "Woodville, Texas", href: "#" },
|
||||
{ label: "Licensed FFL Dealer", href: "#" },
|
||||
{ label: "Licensed FFL #TX-12345", href: "#" },
|
||||
{ label: "Federal Firearms Licensed", href: "#" }
|
||||
]
|
||||
}
|
||||
|
||||
154
src/app/shop/page.tsx
Normal file
154
src/app/shop/page.tsx
Normal file
@@ -0,0 +1,154 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Search, Filter, ShoppingCart } from "lucide-react";
|
||||
|
||||
const products = [
|
||||
{
|
||||
id: "hg-001", category: "Handguns", brand: "Smith & Wesson", name: "9mm M&P Shield", price: 499.99,
|
||||
rating: 5,
|
||||
reviews: 847,
|
||||
image: "http://img.b2bpic.net/free-photo/empty-bullets-gun-table_53876-148180.jpg", inStock: true,
|
||||
description: "Compact, lightweight 9mm handgun perfect for concealed carry"
|
||||
},
|
||||
{
|
||||
id: "rf-002", category: "Rifles", brand: "Colt", name: ".223 AR-15 Rifle", price: 899.99,
|
||||
rating: 5,
|
||||
reviews: 1200,
|
||||
image: "http://img.b2bpic.net/free-photo/man-shooting-gallery-trying-out-new-rifle-model-close-up_482257-127883.jpg", inStock: true,
|
||||
description: "Versatile AR-15 platform in 5.56 NATO/.223 Remington"
|
||||
},
|
||||
{
|
||||
id: "sg-003", category: "Shotguns", brand: "Mossberg", name: "12 Gauge Pump Action", price: 349.99,
|
||||
rating: 5,
|
||||
reviews: 634,
|
||||
image: "http://img.b2bpic.net/free-photo/shotgun-bullets_53876-15100.jpg", inStock: true,
|
||||
description: "Reliable 12 gauge pump action for hunting and sport shooting"
|
||||
},
|
||||
{
|
||||
id: "acc-004", category: "Accessories", brand: "Holosun", name: "Red Dot Optic", price: 199.99,
|
||||
rating: 5,
|
||||
reviews: 2100,
|
||||
image: "http://img.b2bpic.net/free-photo/micro-pipette-dropping-blood-sample-microscope-tray-genetic-analysis-science-laboratory-specialist-using-dropper-microscopic-tool-with-lens-magnifying-glass-close-up_482257-30159.jpg", inStock: true,
|
||||
description: "Quality red dot sight for accurate target acquisition"
|
||||
}
|
||||
];
|
||||
|
||||
const categories = ["All", "Handguns", "Rifles", "Shotguns", "Accessories"];
|
||||
|
||||
export default function ShopPage() {
|
||||
const [selectedCategory, setSelectedCategory] = useState("All");
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [cartItems, setCartItems] = useState<{ id: string; quantity: number }[]>([]);
|
||||
|
||||
const filteredProducts = products.filter(product => {
|
||||
const categoryMatch = selectedCategory === "All" || product.category === selectedCategory;
|
||||
const searchMatch = product.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
product.brand.toLowerCase().includes(searchQuery.toLowerCase());
|
||||
return categoryMatch && searchMatch;
|
||||
});
|
||||
|
||||
const addToCart = (productId: string) => {
|
||||
setCartItems(prev => {
|
||||
const existing = prev.find(item => item.id === productId);
|
||||
if (existing) {
|
||||
return prev.map(item =>
|
||||
item.id === productId ? { ...item, quantity: item.quantity + 1 } : item
|
||||
);
|
||||
} else {
|
||||
return [...prev, { id: productId, quantity: 1 }];
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
{/* Header */}
|
||||
<div className="bg-slate-900 text-white py-8">
|
||||
<div className="max-w-6xl mx-auto px-4">
|
||||
<h1 className="text-4xl font-bold mb-4">Shop Firearms & Accessories</h1>
|
||||
<p className="text-slate-300">Browse our complete inventory of quality firearms and gear</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-6xl mx-auto px-4 py-8">
|
||||
{/* Search and Filter */}
|
||||
<div className="mb-8 space-y-4">
|
||||
<div className="flex gap-4">
|
||||
<div className="flex-1 relative">
|
||||
<Search className="absolute left-3 top-3 text-slate-400" size={20} />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search products..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="w-full pl-10 pr-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500"
|
||||
/>
|
||||
</div>
|
||||
<button className="bg-slate-700 text-white px-4 py-2 rounded-lg flex items-center gap-2 hover:bg-slate-800 transition-colors">
|
||||
<Filter size={20} />
|
||||
Filter
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Category Filter */}
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
{categories.map(category => (
|
||||
<button
|
||||
key={category}
|
||||
onClick={() => setSelectedCategory(category)}
|
||||
className={`px-4 py-2 rounded-lg transition-colors ${
|
||||
selectedCategory === category
|
||||
? "bg-amber-500 text-white"
|
||||
: "bg-slate-200 text-slate-900 hover:bg-slate-300"
|
||||
}`}
|
||||
>
|
||||
{category}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Products Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
|
||||
{filteredProducts.map(product => (
|
||||
<div key={product.id} className="border border-slate-200 rounded-lg overflow-hidden hover:shadow-lg transition-shadow">
|
||||
<img
|
||||
src={product.image}
|
||||
alt={product.name}
|
||||
className="w-full h-48 object-cover"
|
||||
/>
|
||||
<div className="p-4">
|
||||
<p className="text-sm text-slate-500 mb-1">{product.brand}</p>
|
||||
<h3 className="font-semibold text-slate-900 mb-2">{product.name}</h3>
|
||||
<p className="text-sm text-slate-600 mb-3">{product.description}</p>
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<span className="text-xl font-bold text-slate-900">${product.price}</span>
|
||||
<span className="text-sm text-slate-500">⭐ {product.reviews} reviews</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => addToCart(product.id)}
|
||||
className="w-full bg-amber-500 hover:bg-amber-600 text-white font-semibold py-2 rounded flex items-center justify-center gap-2 transition-colors"
|
||||
>
|
||||
<ShoppingCart size={18} />
|
||||
Add to Cart
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Compliance Notice */}
|
||||
<div className="bg-blue-50 border-l-4 border-blue-500 p-6 rounded">
|
||||
<h3 className="font-bold text-blue-900 mb-2">Important: All Firearm Purchases Require</h3>
|
||||
<ul className="text-sm text-blue-800 space-y-1">
|
||||
<li>• Valid government-issued ID verification</li>
|
||||
<li>• Federal background check (NICS)</li>
|
||||
<li>• Compliance with all federal, state, and local regulations</li>
|
||||
<li>• Applicable waiting periods may apply</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user