feat: integrate PhotoSwipe lightbox, enhance scrollbar functionality, and update layout components

- Added a new PhotoSwipe component for image lightbox functionality in the layout.
- Enhanced scrollbar component with an auto-hide delay feature.
- Updated global styles to improve scrollbar appearance and added styles for PhotoSwipe.
- Included new Head layout component for better SEO and meta tag management.
- Added images to existing posts for improved visual content.

This commit improves user experience with enhanced image viewing and layout consistency.

src/styles/global.css

@@ -7,7 +7,7 @@ html {
   --at-apply: 'scroll-smooth antialiased text-62.5%';
 }
 body {
-  --at-apply: 'bg-background text-secondary text-1.6rem';
+  --at-apply: 'bg-background c-secondary text-1.6rem';
 }
 @supports not (view-transition-name: none) {
   body {
@@ -17,30 +17,33 @@ body {
 * {
   scrollbar-width: none;
   -ms-overflow-style: none;
-}
-*::-webkit-scrollbar {
-  display: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
 }
 h1, h2, h3 {
     text-rendering: optimizeLegibility;
   }
 h1 {
-  --at-apply: 'text-[3.6rem]';
+  --at-apply: 'text-3.6rem';
 }
 h2 {
-  --at-apply: 'text-[3rem]';
+  --at-apply: 'text-3rem';
 }
 h3 {
-  --at-apply: 'text-[2.4rem]';
+  --at-apply: 'text-2.4rem';
 }
 h4 {
-  --at-apply: 'text-[2rem]';
+  --at-apply: 'text-2rem';
 }
 h5 {
-  --at-apply: 'text-[1.8rem]';
+  --at-apply: 'text-1.8rem';
 }
 h6 {
-  --at-apply: 'text-[1.6rem]';
+  --at-apply: 'text-1.6rem';
+}
+article img {
+  cursor: zoom-in;
 }
 /* Horizontal reveal animation on theme toggle */
 @keyframes reveal {
@@ -64,4 +67,4 @@ html:not(.dark) {
   transition: none;
   animation: none;
   z-index: -1;
-}
+}