adding footer

src/components/Footer.tsx

@@ -0,0 +1,39 @@
+import GitHub from "./IconGithub";
+
+export default function Footer() {
+  return (
+    <footer
+    className="w-11/12 max-w-5xl mx-auto mt-24 sm:!mt-28 mb-8 flex items-center justify-between"
+    >
+      <span className="flex items-center gap-4">
+        <a
+          className="hover:underline flex gap-2 items-center"
+          href="https://github.com/poppyseedDev/polkadot-fandom-page"
+        >
+          <GitHub class="h-5 w-5 text-gray-500" />
+          Source
+        </a>
+      </span>
+      <a
+        className="text-sm text-gray-400 hidden items-center gap-2 sm:!flex"
+        href="https://kodadot.xyz"
+      >
+        Powered by
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          aria-hidden="true"
+          role="img"
+          width={28 / 32 * 20}
+          height={20}
+          preserveAspectRatio="xMidYMid meet"
+          viewBox="0 0 256 256"
+        >
+          <image href="/logo.svg" height="256" width="256" />
+        </svg>
+        <span className="text-gray-600">
+          KodaDot
+        </span>
+      </a>
+    </footer>
+  );
+}

src/components/IconGithub.tsx

@@ -0,0 +1,24 @@
+export default function IconGithub(props: { class?: string }) {
+    return (
+      <svg
+        className={props.class}
+        width="14"
+        height="14"
+        viewBox="0 0 14 14"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g clip-path="url(#clip0_1989_191)">
+          <path
+            d="M7.00001 0C3.13391 0 0 3.21295 0 7.17755C0 10.3482 2.0055 13.0388 4.7873 13.9875C5.1373 14.0534 5.26471 13.832 5.26471 13.6414C5.26471 13.4716 5.25912 13.0195 5.25561 12.4212C3.3082 12.8547 2.8973 11.4589 2.8973 11.4589C2.5795 10.6291 2.1203 10.4084 2.1203 10.4084C1.48471 9.96418 2.16861 9.97279 2.16861 9.97279C2.87071 10.0229 3.24032 10.7122 3.24032 10.7122C3.86472 11.8085 4.87903 11.4918 5.27732 11.3084C5.34171 10.8448 5.52232 10.5288 5.72251 10.3497C4.16851 10.1684 2.534 9.55218 2.534 6.80211C2.534 6.01893 2.807 5.37764 3.2543 4.87605C3.1822 4.69476 2.94211 3.96463 3.32289 2.97722C3.32289 2.97722 3.91089 2.78376 5.24789 3.71238C5.77305 3.55992 6.37629 3.47184 6.99948 3.4709C7.59448 3.47377 8.19351 3.5533 8.7528 3.71238C10.0891 2.78376 10.6757 2.97649 10.6757 2.97649C11.0579 3.9646 10.8171 4.69475 10.7457 4.87603C11.1937 5.3776 11.4653 6.0189 11.4653 6.80208C11.4653 9.55931 9.82799 10.1662 8.26908 10.3439C8.52037 10.5653 8.74368 11.0031 8.74368 11.6731C8.74368 12.6318 8.73529 13.4064 8.73529 13.6414C8.73529 13.8335 8.86129 14.057 9.21689 13.9868C12.0205 13.0032 14 10.3285 14 7.18046C14 7.17943 14 7.17841 14 7.17738C14 3.21278 10.8654 0 7.00001 0Z"
+            fill="currentColor"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_1989_191">
+            <rect width="14" height="14" fill="white" />
+          </clipPath>
+        </defs>
+      </svg>
+    );
+  }

src/components/ProductAction.tsx

@@ -0,0 +1,20 @@
+import Image from "next/image";
+
+
+
+export default function ProductAction({ id }: { id: string}) {
+    const handleClick = () => {
+        const url = `https://kodadot.xyz/bsx/gallery/${id}`;
+        window.open(url, '_blank')
+      };
+
+    return (
+        <button
+          onClick={handleClick}
+          className={`w-full bg-gray-700 border border-transparent rounded-md py-3 px-8 flex items-center justify-center text-base font-medium text-white hover:bg-gray-900`}
+        >
+          Visit on Kodadot
+        </button>
+      );
+
+}

src/components/ProductDetails.tsx

@@ -1,3 +1,5 @@
+import Image from "next/image";
+import ProductAction from "./ProductAction";
 
 interface Metadata {
     name: string;
@@ -47,8 +49,50 @@ export default function Product({ item }: { item: String}) {
               </div>
             </div>
           </div>
+
+
+          <section
+          aria-labelledby="information-heading"
+          className="mt-12 pt-6 border-t-1 border-gray-200"
+        >
+          <h2 id="information-heading" className="sr-only">
+            Product information
+          </h2>
+
+          <div className="mt-4 space-y-6">
+            <p
+              className={"text-base text-gray-600"}
+            >Description</p>
+          </div>
+        </section>
+      </div>
+
+      {/* Product image */}
+      <div
+        className="aspect-square w-full bg-white rounded-xl border-2 border-gray-200 mt-12 lg:mt-0 lg:col-start-2 lg:row-span-2 lg:self-start"
+      >
+        <div className="rounded-lg overflow-hidden">
+            <Image
+              id="productImage"
+              src="/Luna1.jpeg"
+              alt="test"
+              width="400"
+              height="400"
+              className="w-full h-full object-center object-contain"
+            />
+
         </div>
-        </div>
+      </div>
+
+      {/* Product form */}
+      <div className="mt-12 lg:max-w-lg lg:col-start-1 lg:row-start-2 lg:self-start">
+        <section aria-labelledby="options-heading">
+          <div className="mt-4">
+            <ProductAction id="{item.id}" />
+          </div>
+        </section>
+      </div>
+    </div>
     )
 
 }

src/pages/products/[product].tsx

@@ -7,6 +7,7 @@ import ProductDetails from '@/components/ProductDetails'
 import { extendFields, getClient } from '@kodadot1/uniquery'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
+import Footer from '@/components/Footer'
 
 export async function getStaticPaths() {
     return {
@@ -61,6 +62,7 @@ export default function Product({ productId }: InferGetStaticPropsType<typeof ge
       </div>
       <ProductDetails item="productId" />
       </main>
+      <Footer />
     </>
   )
 }