From 1b2ca3173c85864cece521dda64bea4a170b0cf3 Mon Sep 17 00:00:00 2001
From: GotPop <gotpop@users.noreply.github.com>
Date: Thu, 1 Jan 2026 18:28:58 +0000
Subject: [PATCH 1/3] Theme

---
 src/app/theme.css | 209 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 209 insertions(+)

diff --git a/src/app/theme.css b/src/app/theme.css
index 04add63..8f134eb 100644
--- a/src/app/theme.css
+++ b/src/app/theme.css
@@ -1,3 +1,212 @@
 :root {
   --theme-accent-text: #ffffff;
 }
+
+/* View Transition animations for pagination navigation */
+/* Exit animations (old content leaving) */
+@keyframes slide-to-left {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes slide-to-right {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+}
+
+/* Enter animations (new content arriving) */
+@keyframes slide-from-left {
+  from {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slide-from-right {
+  from {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+html:active-view-transition-type(navigation-forward) {
+  &::view-transition-old(liam) {
+    animation-name: slide-to-right;
+  }
+  &::view-transition-new(liam) {
+    animation-name: slide-from-left;
+  }
+}
+
+html:active-view-transition-type(navigation-back) {
+  &::view-transition-old(liam) {
+    animation-name: slide-to-left;
+  }
+  &::view-transition-new(liam) {
+    animation-name: slide-from-right;
+  }
+}
+
+html:active-view-transition-type(navigation-forward) {
+  &::view-transition-old(post-1) {
+    animation-name: slide-to-right;
+  }
+  &::view-transition-new(post-1) {
+    animation-name: slide-from-left;
+  }
+
+  &::view-transition-old(post-2) {
+    animation-name: slide-to-right;
+  }
+  &::view-transition-new(post-2) {
+    animation-name: slide-from-left;
+  }
+
+  &::view-transition-old(post-3) {
+    animation-name: slide-to-right;
+  }
+  &::view-transition-new(post-3) {
+    animation-name: slide-from-left;
+  }
+
+  &::view-transition-old(post-4) {
+    animation-name: slide-to-right;
+  }
+  &::view-transition-new(post-4) {
+    animation-name: slide-from-left;
+  }
+
+  &::view-transition-old(post-5) {
+    animation-name: slide-to-right;
+  }
+  &::view-transition-new(post-5) {
+    animation-name: slide-from-left;
+  }
+
+  &::view-transition-old(post-6) {
+    animation-name: slide-to-right;
+  }
+  &::view-transition-new(post-6) {
+    animation-name: slide-from-left;
+  }
+
+  &::view-transition-old(post-7) {
+    animation-name: slide-to-right;
+  }
+  &::view-transition-new(post-7) {
+    animation-name: slide-from-left;
+  }
+
+  &::view-transition-old(post-8) {
+    animation-name: slide-to-right;
+  }
+  &::view-transition-new(post-8) {
+    animation-name: slide-from-left;
+  }
+
+  &::view-transition-old(post-9) {
+    animation-name: slide-to-right;
+  }
+  &::view-transition-new(post-9) {
+    animation-name: slide-from-left;
+  }
+
+  &::view-transition-old(post-10) {
+    animation-name: slide-to-right;
+  }
+  &::view-transition-new(post-10) {
+    animation-name: slide-from-left;
+  }
+}
+
+html:active-view-transition-type(navigation-back) {
+  &::view-transition-old(post-1) {
+    animation-name: slide-to-left;
+  }
+  &::view-transition-new(post-1) {
+    animation-name: slide-from-right;
+  }
+
+  &::view-transition-old(post-2) {
+    animation-name: slide-to-left;
+  }
+  &::view-transition-new(post-2) {
+    animation-name: slide-from-right;
+  }
+
+  &::view-transition-old(post-3) {
+    animation-name: slide-to-left;
+  }
+  &::view-transition-new(post-3) {
+    animation-name: slide-from-right;
+  }
+
+  &::view-transition-old(post-4) {
+    animation-name: slide-to-left;
+  }
+  &::view-transition-new(post-4) {
+    animation-name: slide-from-right;
+  }
+
+  &::view-transition-old(post-5) {
+    animation-name: slide-to-left;
+  }
+  &::view-transition-new(post-5) {
+    animation-name: slide-from-right;
+  }
+
+  &::view-transition-old(post-6) {
+    animation-name: slide-to-left;
+  }
+  &::view-transition-new(post-6) {
+    animation-name: slide-from-right;
+  }
+
+  &::view-transition-old(post-7) {
+    animation-name: slide-to-left;
+  }
+  &::view-transition-new(post-7) {
+    animation-name: slide-from-right;
+  }
+
+  &::view-transition-old(post-8) {
+    animation-name: slide-to-left;
+  }
+  &::view-transition-new(post-8) {
+    animation-name: slide-from-right;
+  }
+
+  &::view-transition-old(post-9) {
+    animation-name: slide-to-left;
+  }
+  &::view-transition-new(post-9) {
+    animation-name: slide-from-right;
+  }
+
+  &::view-transition-old(post-10) {
+    animation-name: slide-to-left;
+  }
+  &::view-transition-new(post-10) {
+    animation-name: slide-from-right;
+  }
+}

From cd8ce932714246f78edf3fc34c4ef7890ef1a180 Mon Sep 17 00:00:00 2001
From: GotPop <gotpop@users.noreply.github.com>
Date: Thu, 1 Jan 2026 19:01:09 +0000
Subject: [PATCH 2/3] Using correct transitions tapping into types

---
 package.json      |   4 +-
 src/app/theme.css | 155 +++-------------------------------------------
 yarn.lock         |  12 ++--
 3 files changed, 14 insertions(+), 157 deletions(-)

diff --git a/package.json b/package.json
index 10c405c..09319a7 100644
--- a/package.json
+++ b/package.json
@@ -33,8 +33,8 @@
   "dependencies": {
     "@aws-sdk/client-lambda": "^3.940.0",
     "@gotpop/scripts": "^0.1.7",
-    "@gotpop/storyblok": "^0.1.96",
-    "@gotpop/system": "^0.1.279",
+    "@gotpop/storyblok": "file:../system/packages/storyblok",
+    "@gotpop/system": "file:../system/packages/system",
     "@storyblok/react": "5.4.20",
     "next": "^16.1.1",
     "react": "19.2.0",
diff --git a/src/app/theme.css b/src/app/theme.css
index 8f134eb..bb0c132 100644
--- a/src/app/theme.css
+++ b/src/app/theme.css
@@ -2,8 +2,6 @@
   --theme-accent-text: #ffffff;
 }
 
-/* View Transition animations for pagination navigation */
-/* Exit animations (old content leaving) */
 @keyframes slide-to-left {
   from {
     opacity: 1;
@@ -26,7 +24,6 @@
   }
 }
 
-/* Enter animations (new content arriving) */
 @keyframes slide-from-left {
   from {
     opacity: 0;
@@ -50,163 +47,27 @@
 }
 
 html:active-view-transition-type(navigation-forward) {
-  &::view-transition-old(liam) {
-    animation-name: slide-to-right;
-  }
-  &::view-transition-new(liam) {
-    animation-name: slide-from-left;
-  }
-}
-
-html:active-view-transition-type(navigation-back) {
-  &::view-transition-old(liam) {
-    animation-name: slide-to-left;
-  }
-  &::view-transition-new(liam) {
-    animation-name: slide-from-right;
-  }
-}
-
-html:active-view-transition-type(navigation-forward) {
-  &::view-transition-old(post-1) {
-    animation-name: slide-to-right;
-  }
-  &::view-transition-new(post-1) {
-    animation-name: slide-from-left;
-  }
-
-  &::view-transition-old(post-2) {
-    animation-name: slide-to-right;
-  }
-  &::view-transition-new(post-2) {
-    animation-name: slide-from-left;
-  }
-
-  &::view-transition-old(post-3) {
-    animation-name: slide-to-right;
-  }
-  &::view-transition-new(post-3) {
-    animation-name: slide-from-left;
-  }
-
-  &::view-transition-old(post-4) {
-    animation-name: slide-to-right;
-  }
-  &::view-transition-new(post-4) {
-    animation-name: slide-from-left;
-  }
-
-  &::view-transition-old(post-5) {
-    animation-name: slide-to-right;
-  }
-  &::view-transition-new(post-5) {
-    animation-name: slide-from-left;
-  }
-
-  &::view-transition-old(post-6) {
-    animation-name: slide-to-right;
-  }
-  &::view-transition-new(post-6) {
-    animation-name: slide-from-left;
-  }
-
-  &::view-transition-old(post-7) {
-    animation-name: slide-to-right;
-  }
-  &::view-transition-new(post-7) {
-    animation-name: slide-from-left;
-  }
-
-  &::view-transition-old(post-8) {
-    animation-name: slide-to-right;
-  }
-  &::view-transition-new(post-8) {
-    animation-name: slide-from-left;
-  }
-
-  &::view-transition-old(post-9) {
-    animation-name: slide-to-right;
-  }
-  &::view-transition-new(post-9) {
-    animation-name: slide-from-left;
+  .hero-page {
+    view-transition-name: hero-page;
   }
 
-  &::view-transition-old(post-10) {
+  &::view-transition-old(hero-page) {
     animation-name: slide-to-right;
   }
-  &::view-transition-new(post-10) {
+  &::view-transition-new(hero-page) {
     animation-name: slide-from-left;
   }
 }
 
 html:active-view-transition-type(navigation-back) {
-  &::view-transition-old(post-1) {
-    animation-name: slide-to-left;
-  }
-  &::view-transition-new(post-1) {
-    animation-name: slide-from-right;
-  }
-
-  &::view-transition-old(post-2) {
-    animation-name: slide-to-left;
-  }
-  &::view-transition-new(post-2) {
-    animation-name: slide-from-right;
-  }
-
-  &::view-transition-old(post-3) {
-    animation-name: slide-to-left;
-  }
-  &::view-transition-new(post-3) {
-    animation-name: slide-from-right;
-  }
-
-  &::view-transition-old(post-4) {
-    animation-name: slide-to-left;
-  }
-  &::view-transition-new(post-4) {
-    animation-name: slide-from-right;
-  }
-
-  &::view-transition-old(post-5) {
-    animation-name: slide-to-left;
-  }
-  &::view-transition-new(post-5) {
-    animation-name: slide-from-right;
-  }
-
-  &::view-transition-old(post-6) {
-    animation-name: slide-to-left;
-  }
-  &::view-transition-new(post-6) {
-    animation-name: slide-from-right;
-  }
-
-  &::view-transition-old(post-7) {
-    animation-name: slide-to-left;
-  }
-  &::view-transition-new(post-7) {
-    animation-name: slide-from-right;
-  }
-
-  &::view-transition-old(post-8) {
-    animation-name: slide-to-left;
-  }
-  &::view-transition-new(post-8) {
-    animation-name: slide-from-right;
-  }
-
-  &::view-transition-old(post-9) {
-    animation-name: slide-to-left;
-  }
-  &::view-transition-new(post-9) {
-    animation-name: slide-from-right;
+  .hero-page {
+    view-transition-name: hero-page;
   }
 
-  &::view-transition-old(post-10) {
+  &::view-transition-old(hero-page) {
     animation-name: slide-to-left;
   }
-  &::view-transition-new(post-10) {
+  &::view-transition-new(hero-page) {
     animation-name: slide-from-right;
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 45ca6bb..e529066 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -663,17 +663,13 @@
   dependencies:
     dotenv "^16.0.0"
 
-"@gotpop/storyblok@^0.1.96":
+"@gotpop/storyblok@file:../system/packages/storyblok":
   version "0.1.96"
-  resolved "https://npm.pkg.github.com/download/@gotpop/storyblok/0.1.96/c798261a60918c0b2b453a5e14aafa0be2ebba1b#c798261a60918c0b2b453a5e14aafa0be2ebba1b"
-  integrity sha512-2vxXcTONJYxf8oDbB7T/Ab9hlZDn8gZnwXoplSl0FuKg8Jp1hvKCySxs7AdPnmGXv+4lGFaauT81DScch/fxiQ==
   dependencies:
-    "@storyblok/react" "^5.0.0"
+    "@storyblok/react" "5.4.20"
 
-"@gotpop/system@^0.1.279":
+"@gotpop/system@file:../system/packages/system":
   version "0.1.279"
-  resolved "https://npm.pkg.github.com/download/@gotpop/system/0.1.279/19df29d0df7a7152fda2d6a0158c29cf0b8926da#19df29d0df7a7152fda2d6a0158c29cf0b8926da"
-  integrity sha512-U1Mv9MbAIoR0rXg9ZY+j5eZ5ATWve+1VsvFmhlKr0a8gz3BZNAMCzjqm8uZvFjA6/Zon7+Il4Loy8DdYi+tn2Q==
   dependencies:
     "@next/font" "^14.2.15"
     motion "^12.23.26"
@@ -1777,7 +1773,7 @@
   dependencies:
     "@storyblok/region-helper" "1.3.1"
 
-"@storyblok/react@5.4.20", "@storyblok/react@^5.0.0":
+"@storyblok/react@5.4.20":
   version "5.4.20"
   resolved "https://registry.yarnpkg.com/@storyblok/react/-/react-5.4.20.tgz#fda0596ee12c4126a47d0170c74072d5cb57d9c0"
   integrity sha512-X49OvDJwVyCxKb+MQk2py0wY/IWy3yF0zaxGZw9aOq2U4kuBxH/34BQiUKtxhhMOBFeNacUm0HvcW6bg6DCmMg==

From 01463ab6127be4b16f51243cd0cac48d2127da46 Mon Sep 17 00:00:00 2001
From: GotPop <gotpop@users.noreply.github.com>
Date: Thu, 1 Jan 2026 19:03:11 +0000
Subject: [PATCH 3/3] Using correct transitions tapping into types

---
 package.json |  4 ++--
 yarn.lock    | 14 +++++++++-----
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index 09319a7..8cd73a6 100644
--- a/package.json
+++ b/package.json
@@ -33,8 +33,8 @@
   "dependencies": {
     "@aws-sdk/client-lambda": "^3.940.0",
     "@gotpop/scripts": "^0.1.7",
-    "@gotpop/storyblok": "file:../system/packages/storyblok",
-    "@gotpop/system": "file:../system/packages/system",
+    "@gotpop/storyblok": "^0.1.96",
+    "@gotpop/system": "^0.1.280",
     "@storyblok/react": "5.4.20",
     "next": "^16.1.1",
     "react": "19.2.0",
diff --git a/yarn.lock b/yarn.lock
index e529066..7590e1a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -663,13 +663,17 @@
   dependencies:
     dotenv "^16.0.0"
 
-"@gotpop/storyblok@file:../system/packages/storyblok":
+"@gotpop/storyblok@^0.1.96":
   version "0.1.96"
+  resolved "https://npm.pkg.github.com/download/@gotpop/storyblok/0.1.96/c798261a60918c0b2b453a5e14aafa0be2ebba1b#c798261a60918c0b2b453a5e14aafa0be2ebba1b"
+  integrity sha512-2vxXcTONJYxf8oDbB7T/Ab9hlZDn8gZnwXoplSl0FuKg8Jp1hvKCySxs7AdPnmGXv+4lGFaauT81DScch/fxiQ==
   dependencies:
-    "@storyblok/react" "5.4.20"
+    "@storyblok/react" "^5.0.0"
 
-"@gotpop/system@file:../system/packages/system":
-  version "0.1.279"
+"@gotpop/system@^0.1.280":
+  version "0.1.280"
+  resolved "https://npm.pkg.github.com/download/@gotpop/system/0.1.280/cff6e0eb618c7d635760137ec06b9f8925617d8a#cff6e0eb618c7d635760137ec06b9f8925617d8a"
+  integrity sha512-mqrzq7PNlp9v/vITBXNowLAGpgm2UvOPNR9Mn8voZnoFfyqcqgUTbq6i+F+C2y8BQVDPTbL/7ucqTjjfEk8nBw==
   dependencies:
     "@next/font" "^14.2.15"
     motion "^12.23.26"
@@ -1773,7 +1777,7 @@
   dependencies:
     "@storyblok/region-helper" "1.3.1"
 
-"@storyblok/react@5.4.20":
+"@storyblok/react@5.4.20", "@storyblok/react@^5.0.0":
   version "5.4.20"
   resolved "https://registry.yarnpkg.com/@storyblok/react/-/react-5.4.20.tgz#fda0596ee12c4126a47d0170c74072d5cb57d9c0"
   integrity sha512-X49OvDJwVyCxKb+MQk2py0wY/IWy3yF0zaxGZw9aOq2U4kuBxH/34BQiUKtxhhMOBFeNacUm0HvcW6bg6DCmMg==