test

.env.example

@@ -2,4 +2,4 @@ COMPANY_NAME="Vercel Inc."
 SITE_NAME="Next.js Commerce"
 SHOPIFY_REVALIDATION_SECRET=""
 SHOPIFY_STOREFRONT_ACCESS_TOKEN=""
-SHOPIFY_STORE_DOMAIN="[your-shopify-store-subdomain].myshopify.com"
+SHOPIFY_STORE_DOMAIN=""

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "useTabs": false
+}

.vscode/settings.json

@@ -2,8 +2,8 @@
   "typescript.tsdk": "node_modules/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll": "explicit",
-    "source.organizeImports": "explicit",
-    "source.sortMembers": "explicit"
+    // "source.fixAll": "explicit",
+    // "source.organizeImports": "explicit",
+    // "source.sortMembers": "explicit"
   }
 }

app/[page]/layout.tsx

@@ -1,4 +1,4 @@
-import Footer from 'components/layout/footer';
+import Footer from 'components/layout/footer'
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
@@ -8,5 +8,5 @@ export default function Layout({ children }: { children: React.ReactNode }) {
       </div>
       <Footer />
     </>
-  );
+  )
 }

app/assets/base.css

@@ -0,0 +1,127 @@
+:root {
+  --primary: #ffffff;
+  --primary-2: #f1f3f5;
+  --secondary: #000000;
+  --secondary-2: #111;
+  --selection: var(--cyan);
+  --text-base: #000000;
+  --text-primary: #000000;
+  --text-secondary: white;
+  --hover: rgba(0, 0, 0, 0.075);
+  --hover-1: rgba(0, 0, 0, 0.15);
+  --hover-2: rgba(0, 0, 0, 0.25);
+  --cyan: #22b8cf;
+  --green: #37b679;
+  --red: #da3c3c;
+  --purple: #f81ce5;
+  --blue: #0070f3;
+  --pink: #ff0080;
+  --pink-light: #ff379c;
+  --magenta: #eb367f;
+  --violet: #7928ca;
+  --violet-dark: #4c2889;
+  --accent-0: #fff;
+  --accent-1: #fafafa;
+  --accent-2: #eaeaea;
+  --accent-3: #999999;
+  --accent-4: #888888;
+  --accent-5: #666666;
+  --accent-6: #444444;
+  --accent-7: #333333;
+  --accent-8: #111111;
+  --accent-9: #000;
+  --font-sans: -apple-system, system-ui, BlinkMacSystemFont, 'Helvetica Neue',
+    'Helvetica', sans-serif;
+}
+
+[data-theme='dark'] {
+  --primary: #000000;
+  --primary-2: #111;
+  --secondary: #ffffff;
+  --secondary-2: #f1f3f5;
+  --hover: rgba(255, 255, 255, 0.075);
+  --hover-1: rgba(255, 255, 255, 0.15);
+  --hover-2: rgba(255, 255, 255, 0.25);
+  --selection: var(--purple);
+  --text-base: white;
+  --text-primary: white;
+  --text-secondary: black;
+  --accent-9: #fff;
+  --accent-8: #fafafa;
+  --accent-7: #eaeaea;
+  --accent-6: #999999;
+  --accent-5: #888888;
+  --accent-4: #666666;
+  --accent-3: #444444;
+  --accent-2: #333333;
+  --accent-1: #111111;
+  --accent-0: #000;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+html,
+body {
+  height: 100%;
+  box-sizing: border-box;
+  touch-action: manipulation;
+  font-family: var(--font-sans);
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background-color: var(--primary);
+  color: var(--text-primary);
+  overscroll-behavior-x: none;
+}
+
+body {
+  position: relative;
+  min-height: 100%;
+  margin: 0;
+}
+
+a {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+.animated {
+  animation-duration: 1s;
+  animation-fill-mode: both;
+  -webkit-animation-duration: 1s;
+  -webkit-animation-fill-mode: both;
+}
+
+.fadeIn {
+  animation-name: fadeIn;
+  -webkit-animation-name: fadeIn;
+}
+
+@-webkit-keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@media not all and (min-resolution: 0.001dpcm) {
+  img[loading='lazy'] {
+    clip-path: inset(0.5px);
+  }
+}

app/assets/chrome-bug.css

@@ -0,0 +1,12 @@
+/**
+ * Chrome has a bug with transitions on load since 2012!
+ *
+ * To prevent a "pop" of content, you have to disable all transitions until
+ * the page is done loading.
+ *
+ * https://lab.laukstein.com/bug/input
+ * https://twitter.com/timer150/status/1345217126680899584
+ */
+body.loading * {
+  transition: none !important;
+}

app/assets/components.css

@@ -0,0 +1,5 @@
+/*
+.fit {
+  min-height: calc(100vh - 88px);
+}
+*/

app/assets/main.css

@@ -0,0 +1,3 @@
+@import './base.css';
+@import './components.css';
+@import './utilities.css';

app/data/Gloves.tsx

@@ -0,0 +1,70 @@
+import LATEX_FOAM from '../images/gloves/top_navbar/latex_foam.jpeg'
+import WRINKLED_FOAM from '../images/gloves/top_navbar/wrinkled_foam.jpeg'
+import PU_COATED from '../images/gloves/top_navbar/pu_coated.jpeg'
+import PU_CUT_RESISTANT from '../images/gloves/top_navbar/cut_resistant.jpeg'
+import NITRILE_CUT_RESISTANT from '../images/gloves/top_navbar/nitrile_cut_resistant.jpeg'
+import LATEX_CUT_RESISTANT from '../images/gloves/top_navbar/latex_cut_resistant.jpeg'
+import NITRILE_COATED from '../images/gloves/top_navbar/nitrile_coated.jpeg'
+import SPANDEX from '../images/gloves/top_navbar/spandex.jpeg'
+import COTTON_LATEX from '../images/gloves/top_navbar/latex.jpeg'
+import WINTER from '../images/gloves/top_navbar/winter.jpeg'
+import LEATHER from '../images/gloves/top_navbar/leather.jpeg'
+
+import LATEX_FOAM_CONTENT_IMAGE from '../images/gloves/content/latex_foam.jpeg'
+import WRINKLED_FOAM_CONTENT_IMAGE from '../images/gloves/content/wrinkled_foam.jpeg'
+import PU_COATED_CONTENT_IMAGE from '../images/gloves/content/pu_coated.jpeg'
+import PU_CUT_RESISTANT_CONTENT_IMAGE from '../images/gloves/content/cut_resistant.jpeg'
+import NITRILE_CUT_RESISTANT_CONTENT_IMAGE from '../images/gloves/content/nitrile_cut_resistant.jpeg'
+import LATEX_CUT_RESISTANT_CONTENT_IMAGE from '../images/gloves/content/latex_cut_resistant.jpeg'
+import NITRILE_COATED_CONTENT_IMAGE from '../images/gloves/content/nitrile_coated.jpeg'
+import SPANDEX_CONTENT_IMAGE from '../images/gloves/content/spandex.jpeg'
+import COTTON_LATEX_CONTENT_IMAGE from '../images/gloves/content/cotton_latex.jpeg'
+import WINTER_CONTENT_IMAGE from '../images/gloves/content/winter.jpeg'
+import LEATHER_CONTENT_IMAGE from '../images/gloves/content/leather.jpeg'
+
+export const GLOVES_DATA = {
+  LATEX_FOAM: {
+    navbarImage: LATEX_FOAM,
+    contentImage: LATEX_FOAM_CONTENT_IMAGE,
+  },
+  WRINKLED_FOAM: {
+    navbarImage: WRINKLED_FOAM,
+    contentImage: WRINKLED_FOAM_CONTENT_IMAGE,
+  },
+  PU_COATED: {
+    navbarImage: PU_COATED,
+    contentImage: PU_COATED_CONTENT_IMAGE,
+  },
+  PU_CUT_RESISTANT: {
+    navbarImage: PU_CUT_RESISTANT,
+    contentImage: PU_CUT_RESISTANT_CONTENT_IMAGE,
+  },
+  NITRILE_CUT_RESISTANT: {
+    navbarImage: NITRILE_CUT_RESISTANT,
+    contentImage: NITRILE_CUT_RESISTANT_CONTENT_IMAGE,
+  },
+  LATEX_CUT_RESISTANT: {
+    navbarImage: LATEX_CUT_RESISTANT,
+    contentImage: LATEX_CUT_RESISTANT_CONTENT_IMAGE,
+  },
+  NITRILE_COATED: {
+    navbarImage: NITRILE_COATED,
+    contentImage: NITRILE_COATED_CONTENT_IMAGE,
+  },
+  SPANDEX: {
+    navbarImage: SPANDEX,
+    contentImage: SPANDEX_CONTENT_IMAGE,
+  },
+  COTTON_LATEX: {
+    navbarImage: COTTON_LATEX,
+    contentImage: COTTON_LATEX_CONTENT_IMAGE,
+  },
+  WINTER: {
+    navbarImage: WINTER,
+    contentImage: WINTER_CONTENT_IMAGE,
+  },
+  LEATHER: {
+    navbarImage: LEATHER,
+    contentImage: LEATHER_CONTENT_IMAGE,
+  },
+}

app/data/Industrial.tsx

@@ -0,0 +1,24 @@
+import PALLET_TRUCKS from '../images/industrial/top_navbar/pallet_trucks.jpg'
+import WAREHOUSE_RACKS from '../images/industrial/top_navbar/warehouse_racks.png'
+import WAREHOUSE_ACCESSORIES from '../images/industrial/top_navbar/warehouse_acc.png'
+import FORKLIFTS from '../images/industrial/top_navbar/forklifts.png'
+import FENCES from '../images/industrial/top_navbar/fences.png'
+
+export const INDUSTRIAL_DATA = {
+  PALLET_TRUCKS: {
+    navbarImage: PALLET_TRUCKS,
+    // contentImage: LATEX_FOAM_CONTENT_IMAGE,
+  },
+  WAREHOUSE_RACKS: {
+    navbarImage: WAREHOUSE_RACKS,
+  },
+  WAREHOUSE_ACCESSORIES: {
+    navbarImage: WAREHOUSE_ACCESSORIES,
+  },
+  FORKLIFTS: {
+    navbarImage: FORKLIFTS,
+  },
+  FENCES: {
+    navbarImage: FENCES,
+  },
+}