shop page created

src/app/earthquakes/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import Sidebar from "@components/Sidebar";
+import Sidebar from "@/components/sidebar";
-import Map from "@/components/Map";
+import Map from "@/components/map";
 import { useState, useMemo } from "react";
 
 export default function Earthquakes() {

src/app/layout.tsx

@@ -1,5 +1,5 @@
 import type { Metadata } from "next";
-import Navbar from "@components/navbar";
+import Navbar from "@/components/navbar";
 import { Inter } from "next/font/google";
 import "./globals.css";
 

src/app/observatories/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import Sidebar from "@components/Sidebar";
+import Sidebar from "@/components/sidebar";
-import Map from "@/components/Map";
+import Map from "@/components/map";
 import { useState, useMemo } from "react";
 
 export default function Observatories() {

src/app/our-mission/page.tsx

@@ -1,5 +1,6 @@
 "use client";
 
-export default function Page(){
+export default function Page()
+{
     return( <p>Our mission</p>)
 }

src/app/shop/page.tsx

@@ -1,7 +1,121 @@
-export default function Shop() {
+"use client";
+import Sidebar from "@/components/sidebar";
+import { useState } from "react";
+
+// Artifacts Data
+const artifacts = [
+  { id: 1, name: "Golden Scarab", description: "An ancient Egyptian artifact symbolizing rebirth.", location: "Cairo, Egypt", image: "/images/artifact1.jpg", price: 150 },
+  { id: 2, name: "Aztec Sunstone", description: "A replica of the Aztec calendar (inscriptions intact).", location: "Peru", image: "/images/artifact2.jpg", price: 200 },
+  { id: 3, name: "Medieval Chalice", description: "Used by royalty in medieval ceremonies.", location: "Cambridge, England", image: "/images/artifact3.jpg", price: 120 },
+  { id: 4, name: "Roman Coin", description: "An authentic Roman coin from the 2nd century CE.", location: "Rome, Italy", image: "/images/artifact4.jpg", price: 80 },
+  { id: 5, name: "Samurai Mask", description: "Replica of Japanese Samurai battle masks.", location: "Tokyo, Japan", image: "/images/artifact5.jpg", price: 300 },
+  { id: 6, name: "Ancient Greek Vase", description: "Depicts Greek mythology.", location: "Athens, Greece", image: "/images/artifact6.jpg", price: 250 },
+  { id: 7, name: "Incan Pendant", description: "Represents the Sun God Inti.", location: "India", image: "/images/artifact7.jpg", price: 175 },
+  { id: 8, name: "Persian Carpet Fragment", description: "Ancient Persian artistry.", location: "Petra, Jordan", image: "/images/artifact8.jpg", price: 400 },
+  { id: 9, name: "Stone Buddha", description: "Authentic stone Buddha carving.", location: "India", image: "/images/artifact9.jpg", price: 220 },
+  { id: 10, name: "Victorian Brooch", description: "A beautiful Victorian-era brooch with a ruby centre.", location: "Oxford, England", image: "/images/artifact10.jpg", price: 150 },
+  { id: 11, name: "Ancient Scroll", description: "A mysterious scroll from ancient times.", location: "Madrid, Spain", image: "/images/artifact11.jpg", price: 500 },
+  { id: 12, name: "Ming Dynasty Porcelain", description: "Porcelain from China's Ming Dynasty.", location: "Beijing, China", image: "/images/artifact12.jpg", price: 300 },
+  { id: 13, name: "African Tribal Mask", description: "A unique tribal mask from Africa.", location: "Nigeria", image: "/images/artifact13.jpg", price: 250 },
+  { id: 14, name: "Crystal Skull", description: "A mystical pre-Columbian artifact.", location: "Colombia", image: "/images/artifact14.jpg", price: 1000 },
+  { id: 15, name: "Medieval Armor Fragment", description: "A fragment of medieval knight's armor.", location: "Normandy, France", image: "/images/artifact15.jpg", price: 400 },
+];
+
+// ArtifactCard Component
+const ArtifactCard = ({ artifact }) => {
+  const [selectedCurrency, setSelectedCurrency] = useState("USD");
+  const conversionRates = { USD: 1, EUR: 0.94, GBP: 0.81 };
+  const convertPrice = (price, currency) => (price * conversionRates[currency]).toFixed(2);
+
   return (
-    <div className="w-full h-full">
+    <div className="flex flex-col bg-white shadow-md rounded-md overflow-hidden">
-      <p>Shop</p>
+      <img src={artifact.image} alt={artifact.name} className="w-full h-56 object-cover" />
+      <div className="p-4">
+        <h3 className="text-lg font-bold">{artifact.name}</h3>
+        <p className="text-gray-700 mb-2">{artifact.description}</p>
+        <p className="text-gray-500 mb-2">{artifact.location}</p>
+        <div className="flex items-center justify-between mt-4">
+          <p className="text-red-600 font-bold text-lg">
+            {selectedCurrency}: {convertPrice(artifact.price, selectedCurrency)}
+          </p>
+          <select
+            value={selectedCurrency}
+            onChange={(e) => setSelectedCurrency(e.target.value)}
+            className="border border-gray-300 rounded-md px-3 py-2 text-sm"
+          >
+            <option value="USD">USD ($)</option>
+            <option value="EUR">EUR (€)</option>
+            <option value="GBP">GBP (£)</option>
+          </select>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// Shop Component
+export default function Shop() {
+  const [currentPage, setCurrentPage] = useState(1);
+  const artifactsPerPage = 6;
+
+  const indexOfLastArtifact = currentPage * artifactsPerPage;
+  const indexOfFirstArtifact = indexOfLastArtifact - artifactsPerPage;
+  const currentArtifacts = artifacts.slice(indexOfFirstArtifact, indexOfLastArtifact);
+
+  const handleNextPage = () => {
+    if (indexOfLastArtifact < artifacts.length) setCurrentPage((prev) => prev + 1);
+  };
+
+  const handlePreviousPage = () => {
+    if (currentPage > 1) setCurrentPage((prev) => prev - 1);
+  };
+
+  return (
+    <div className="relative bg-gray-100 min-h-screen flex">
+      {/* Artifact Grid */}
+      <div className="flex-grow grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 p-6 max-w-[calc(100%-18rem)]">
+        {currentArtifacts.map((artifact) => (
+          <ArtifactCard key={artifact.id} artifact={artifact} />
+        ))}
+      </div>
+
+      {/* Footer Fixed at Bottom */}
+      <footer className="fixed bottom-0 left-0 bg-white border-t border-gray-300 w-[calc(100%-18rem)] py-4 text-center flex justify-center items-center">
+        <button
+          onClick={handlePreviousPage}
+          disabled={currentPage === 1}
+          className={`mx-2 px-4 py-2 bg-blue-500 text-white rounded-md font-bold shadow-md ${
+            currentPage === 1 ? "opacity-50 cursor-not-allowed" : "hover:bg-blue-600"
+          }`}
+        >
+          &larr; Previous
+        </button>
+        <button
+          onClick={handleNextPage}
+          disabled={indexOfLastArtifact >= artifacts.length}
+          className={`mx-2 px-4 py-2 bg-blue-500 text-white rounded-md font-bold shadow-md ${
+            indexOfLastArtifact >= artifacts.length ? "opacity-50 cursor-not-allowed" : "hover:bg-blue-600"
+          }`}
+        >
+          Next &rarr;
+        </button>
+      </footer>
+
+      {/* Sidebar Positioned Against the Right Edge */}
+      <aside className="w-72 bg-white shadow-lg p-4 fixed top-10 right-0 h-full">
+        <Sidebar
+          logTitle="Shop Artifacts"
+          logSubtitle="Record new artifacts - name, description, image, location and price"
+          recentsTitle="Recent Updates"
+          events={[/* example events if needed */]}
+          selectedEventId=""
+          setSelectedEventId={() => {}}
+          hoveredEventId=""
+          setHoveredEventId={() => {}}
+          button1Name="Add New Artifact"
+          button2Name="Search Artifacts"
+        />
+      </aside>
     </div>
   );
 }

src/app/the-team/page.tsx

@@ -1,5 +1,6 @@
 "use client";
 
-export default function Page(){
+export default function Page()
+{
     return( <p>The Team</p>)
 }