hh

Author: gottasellemall69

.gitignore

@@ -35,28 +35,15 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
-/utils/cardDataApi.js
+
 .aider*
 server/changeStreamHandler.js
 .codex
+.vscode
 
-/.vscode/
 /rift
 /.gpteng
 repomix-output.*
-/public/*
-!/public/images/
-!/public/images/**
-!/public/yugioh-parallax/
-!/public/yugioh-parallax/**
-!/public/card-data/
-!/public/card-data/**
-!/public/favicon.ico
-!/public/logo-with-name-side.jpg
-!/public/next.svg
-!/public/robots.txt
-!/public/uRl6tFT0uQxyhWgCKm4TQjbIjMl4TcQYxVGVvGmt.jpg
-!/public/vercel.svg
 repomix.config.json
 prompt.md
 /skills

components/Layout.js

@@ -17,7 +17,7 @@ export default function Layout( { children } ) {
   };
 
   return (
-    <div className="relative mx-auto min-h-screen w-full glass dark:bg-gray-900">
+    <div className={ `relative mx-auto min-h-screen w-full glass backdrop ${ showYugiohBackground ? "overflow-x-hidden" : "" }` }>
       { showYugiohBackground ? <YugiohSiteBackground /> : null }
       <div className="relative z-10">
         <Dialog open={ isSidebarOpen } onClose={ setIsSidebarOpen } className="relative z-50 lg:hidden">

components/Yugioh/AlphabeticalIndex.js

@@ -16,19 +16,19 @@ const AlphabeticalIndex = () => {
 
   return (
     <>
-      <div className="w-full inline-block flex-col sm:flex-row my-10 m-2 mx-auto justify-between">
-        <span className="columns-2 p-2 mx-auto max-w-7xl">
-          <h1 className="text-2xl text-shadow text-center sm:text-left font-semibold mb-4 sm:text-nowrap sm:block">
+      <div className="mx-auto my-10 flex w-full max-w-7xl flex-col gap-6 px-2">
+        <section className="rounded-3xl border border-white/15 bg-black/65 px-6 py-6 shadow-2xl shadow-black/40 backdrop-blur-md">
+          <h1 className="text-center text-3xl font-semibold text-white sm:text-left">
             Alphabetical Index
           </h1>
-          <p className="text-base text-center sm:text-left text-gray-300 italic text-pretty sm:text-nowrap sm:inline sm:mx-auto">
-            Browse Yu-Gi-Oh! sets by letter...
+          <p className="mt-3 max-w-2xl text-center text-base italic text-white/78 sm:text-left">
+            Browse Yu-Gi-Oh! sets by opening letter and jump straight into each catalogue section.
           </p>
-        </span>
+        </section>
 
         <nav
           aria-label="Browse sets by starting letter"
-          className="mx-auto mt-5 max-w-7xl text-pretty text-shadow flex flex-wrap gap-2 place-content-center md:text-nowrap"
+          className="flex flex-wrap place-content-center gap-2 rounded-3xl border border-white/15 bg-black/60 p-4 shadow-2xl shadow-black/35 backdrop-blur-sm md:text-nowrap"
         >
           { letters.map( ( letter ) => {
             const isActive = letter === activeLetter;
@@ -41,7 +41,11 @@ const AlphabeticalIndex = () => {
                 } }
                 prefetch={ false }
                 aria-current={ isActive ? 'page' : undefined }
-                className={`mx-auto rounded px-3 py-2 leading-7 text-2xl font-bold transition hover:bg-stone-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white ${ isActive ? 'bg-white/10 text-white underline' : 'text-white/80 no-underline' }`}
+                className={ `rounded-xl border px-3 py-2 leading-7 text-2xl font-bold transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white ${
+                  isActive
+                    ? 'border-white/30 bg-white/16 text-white shadow-lg shadow-black/20 underline'
+                    : 'border-white/10 bg-black/35 text-white/85 no-underline hover:border-white/20 hover:bg-black/55'
+                }` }
               >
                 { letter }
               </Link>