Revert/lint action

.husky/pre-commit

@@ -1,3 +1,6 @@
+#!/bin/sh
+. "$(dirname -- "$0")/_/husky.sh"
+
 # lint and format staged files
 npx lint-staged
 

.husky/pre-push

@@ -1 +1,4 @@
-turbo build
+#!/bin/sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx turbo build

.husky/prepare-commit-msg

@@ -1 +1,4 @@
+#!/bin/sh
+. "$(dirname -- "$0")/_/husky.sh"
+
 exec < /dev/tty && npx cz --hook || true

.vscode/settings.json

@@ -1,4 +1,7 @@
 {
   "editor.formatOnPaste": true,
-  "editor.formatOnSave": true
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.stylelint": "explicit"
+  }
 }

README.md

@@ -30,6 +30,10 @@
   <a title="Commitizen friendly" href="https://commitizen-tools.github.io/commitizen/">
     <img src="https://img.shields.io/badge/commitizen-friendly-brightgreen.svg" alt="Commitizen friendly">
   </a>
+  <img src="https://github.com/rikhall1515/nextjs-project-template/actions/workflows/build.yml/badge.svg" alt="Build and Analysis Checks" />
+  <a title="scorecard" href="https://securityscorecards.dev/viewer/?uri=github.com/rikhall1515/nextjs-project-template">
+    <img src="https://api.securityscorecards.dev/projects/github.com/rikhall1515/nextjs-project-template/badge" alt="nodejs.org scorecard badge" />
+  </a>
   <br />
   <br />
 </p>

app/(public)/layout.tsx

@@ -0,0 +1,18 @@
+import CookieBanner from "@/components/cookies";
+import Footer from "@/components/footer";
+import Header from "@/components/header";
+
+export default function PublicLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <Header />
+      <main className="">{children}</main>
+      <Footer />
+      <CookieBanner />
+    </>
+  );
+}

app/globals.css

@@ -4,48 +4,124 @@
 
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
+    /* hsl(0 0% 98%) */
+    --background: 0 0% 98%;
+
+    /* hsl(274 84% 5%) */
+    --foreground: 274 84% 5%;
+
+    /* hsl(0 0% 100%) */
     --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
+
+    /* hsl(274 84% 5%) */
+    --card-foreground: 274 84% 5%;
+
+    /* hsl(0 0% 100%) */
     --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
+
+    /* hsl(274 84% 5%) */
+    --popover-foreground: 274 84% 5%;
+
+    /* hsl(274 90% 47%) */
+    --primary: 274 90% 47%;
+
+    /* hsl(270 40% 98%) */
+    --primary-foreground: 270 40% 98%;
+
+    /* hsl(238 82% 38%) */
+    --secondary: 238 82% 38%;
+
+    /* hsl(0 0% 98%) */
+    --secondary-foreground: 0 0% 98%;
+
+    /* hsl(270 40% 96%) */
+    --muted: 270 40% 96%;
+
+    /* hsl(250 16% 47%) */
+    --muted-foreground: 250 16% 47%;
+
+    /* hsl(169 90% 61%) */
+    --accent: 169 90% 61%;
+
+    /* hsl(274 47% 11%) */
+    --accent-foreground: 274 47% 11%;
+
+    /* hsl(0 84% 60%) */
+    --destructive: 0 84% 60%;
+
+    /* hsl(270 40% 98%) */
+    --destructive-foreground: 270 40% 98%;
+
+    /* hsl(270 32% 91%) */
+    --border: 270 32% 91%;
+
+    /* hsl(270 32% 91%) */
+    --input: 270 32% 91%;
+
+    /* hsl(274 84% 5%) */
+    --ring: 274 84% 5%;
     --radius: 0.5rem;
+    --page-x-spacing: 3rem;
+    --page-x-spacing2: 2rem;
   }
 
   .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
+    /* hsl(274 84% 5%) */
+    --background: 274 84% 5%;
+
+    /* hsl(270 40% 98%) */
+    --foreground: 270 40% 98%;
+
+    /* hsl(274 84% 10%) */
+    --card: 274 84% 10%;
+
+    /* hsl(270 40% 98%) */
+    --card-foreground: 270 40% 98%;
+
+    /* hsl(274 84% 10%) */
+    --popover: 274 84% 10%;
+
+    /* hsl(270 40% 98%) */
+    --popover-foreground: 270 40% 98%;
+
+    /* hsl(274 70% 61%) */
+    --primary: 274 70% 61%;
+
+    /* hsl(274 47% 11%) */
+    --primary-foreground: 274 47% 11%;
+
+    /* hsl(238 72% 58%) */
+    --secondary: 238 72% 58%;
+
+    /* hsl(270 40% 98%) */
+    --secondary-foreground: 270 40% 98%;
+
+    /* hsl(260 33% 18%) */
+    --muted: 260 33% 18%;
+
+    /* hsl(250 20% 65%) */
+    --muted-foreground: 250 20% 65%;
+
+    /* hsl(169 70% 41%) */
+    --accent: 169 70% 41%;
+
+    /* hsl(270 40% 98%) */
+    --accent-foreground: 270 40% 98%;
+
+    /* hsl(0 63% 33%) */
+    --destructive: 0 63% 33%;
+
+    /* hsl(270 40% 98%) */
+    --destructive-foreground: 270 40% 98%;
+
+    /* hsl(260 33% 18%) */
+    --border: 260 33% 18%;
+
+    /* hsl(260 33% 18%) */
+    --input: 260 33% 18%;
+
+    /* hsl(213 27% 84%) */
+    --ring: 270 27% 84%;
   }
 }
 
@@ -54,7 +130,115 @@
     @apply border-border;
   }
 
+  h1 {
+    @apply text-5xl;
+  }
+
+  h2 {
+    @apply text-4xl;
+  }
+
+  h3 {
+    @apply text-3xl;
+  }
+
+  h4 {
+    @apply text-2xl;
+  }
+
+  h5,
+  h6 {
+    @apply text-xl;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @apply font-bold
+      text-foreground;
+  }
+
+  p {
+    @apply text-foreground;
+  }
+
   body {
     @apply bg-background text-foreground;
   }
+
+  @media (width >= 64rem) {
+    :root {
+      --page-x-spacing: 8rem;
+      --page-x-spacing2: 7rem;
+    }
+  }
+}
+
+@layer utilities {
+  .pxPage {
+    @apply px-6 m:px-[--page-x-spacing];
+  }
+
+  .pxPageTwo {
+    @apply px-6 m:px-[--page-x-spacing2];
+  }
+
+  .checkBox + span {
+    animation: check-bounce 250ms;
+
+    @apply border-[1rem] border-primary;
+  }
+
+  .checkBox + span::before {
+    @apply absolute left-2 top-2 content-[""];
+
+    animation: checked 125ms 250ms forwards;
+    border-bottom: 4px solid transparent;
+    border-right: 4px solid transparent;
+    transform: rotate(45deg);
+    transform-origin: 0% 100%;
+  }
+
+  @keyframes checked {
+    0% {
+      height: 0;
+      transform: translate(0, 0) rotate(45deg);
+      width: 0;
+
+      @apply border-white;
+    }
+
+    33% {
+      height: 0;
+      transform: translate(0, 0) rotate(45deg);
+      width: 8px;
+
+      @apply border-white;
+    }
+
+    100% {
+      height: 16px;
+      transform: translate(0, -8px) rotate(45deg);
+      width: 8px;
+
+      @apply border-white;
+    }
+  }
+
+  @keyframes check-bounce {
+    0% {
+      transform: scale(1);
+    }
+
+    33% {
+      transform: scale(0.7);
+    }
+
+    100% {
+      transform: scale(1);
+    }
+  }
 }

components/cookies/index.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { CookieConsent } from "react-cookie-consent";
+
+import { useCookieContext } from "@/context/cookie";
+
+export default function CookieBanner() {
+  const consent = useCookieContext();
+
+  return consent.hasConsentValue ? (
+    <></>
+  ) : (
+    <>
+      <CookieConsent
+        enableDeclineButton
+        sameSite="strict"
+        flipButtons
+        cookieName="giftistguide_consent"
+        buttonText="Accept all"
+        declineButtonText="Decline all"
+        onAccept={() => {
+          consent.setHasConsentValue(true);
+        }}
+        onDecline={() => {
+          consent.setHasConsentValue(true);
+        }}
+        style={{
+          background: "hsl(var(--popover))",
+          color: "hsl(var(--popover-foreground))",
+          borderTop: "1px hsl(var(--border))",
+        }}
+        buttonStyle={{
+          background: "hsl(var(--primary))",
+          color: "white",
+          borderRadius: "0.35rem",
+        }}
+        declineButtonStyle={{
+          border: "1px hsl(var(--ring))",
+          background: "hsl(var(--secondary))",
+          color: "hsl(var(--secondary-foreground))",
+        }}
+        buttonClasses=""
+        declineButtonClasses=""
+      >
+        This website uses cookies to enhance the user experience.
+      </CookieConsent>
+    </>
+  );
+}

components/footer/index.tsx

@@ -9,7 +9,7 @@ export default function Footer() {
           <span className="mb-6 block text-2xl font-extrabold">
             {env.NEXT_PUBLIC_SITE_NAME}
           </span>
-          <div className="m:flex-row flex w-full flex-col items-start justify-between gap-6">
+          <div className="flex w-full flex-col items-start justify-between gap-6 m:flex-row">
             <div className="!w-[10rem] flex-shrink-0 text-sm text-black">
               @ {year}{" "}
               <a href="/" className="ml-1 hover:underline">