NotReallyEight · NotReallyEight · Mar 27, 2026 · Mar 27, 2026 · Mar 27, 2026 · Mar 27, 2026
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fotografi-frame",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",
@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@gsap/react": "^2.1.2",
+    "@videojs/react": "^10.0.0-beta.11",
     "gsap": "^3.14.2",
     "next": "16.2.1",
     "react": "19.2.4",

diff --git a/src/app/(snap)/page.tsx b/src/app/(snap)/page.tsx
@@ -158,7 +158,15 @@ export default function Home() {
 
             {/* Productions Section */}
             <section className="text-white panel snap-start">
-              <div className="h-fit md:h-dvh py-8 md:py-0 flex flex-col items-center justify-center px-8 xl:px-[10dvw] space-y-12">
+              <div
+                className={`
+                    h-fit md:h-dvh
+                    py-8 md:py-0
+                    flex flex-col items-center justify-center
+                    px-8 xl:px-[10dvw]
+                    space-y-12
+                  `}
+              >
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 items-start">
                   <div className="font-family-secondary">
                     Cinematic Storytelling
@@ -240,13 +248,33 @@ export default function Home() {
                     </div>
                   </div>
 
-                  <div className="relative group aspect-video md:aspect-auto lg:aspect-3/2 overflow-hidden order-3 md:order-2">
+                  <div
+                    className={`
+                        relative group
+                        aspect-video md:aspect-auto lg:aspect-3/2
+                        overflow-hidden
+                        order-3 md:order-2
+                      `}
+                  >
                     <Image
                       alt="18th Birthdays Image"
                       src={images.birthdays.header[1]}
-                      className="w-full aspect-square object-cover object-bottom group-hover:scale-105 duration-(--grid-fade-in-duration)"
+                      className={`
+                          w-full
+                          aspect-square
+                          object-cover object-bottom
+                          group-hover:scale-105
+                          duration-(--grid-fade-in-duration)
+                        `}
+                    />
+                    <div
+                      className={`
+                          pointer-events-none absolute inset-0
+                          bg-linear-to-b from-black/60 to-black
+                          transition-opacity duration-(--grid-fade-in-duration)
+                          group-hover:opacity-80
+                        `}
                     />
-                    <div className="pointer-events-none absolute inset-0 bg-linear-to-b from-black/60 to-black transition-opacity duration-(--grid-fade-in-duration) group-hover:opacity-80" />
                   </div>
 
                   <div className="order-2 md:order-3">
@@ -293,13 +321,33 @@ export default function Home() {
                       primary={false}
                     />
                   </div>
-                  <div className="relative group aspect-square md:aspect-auto lg:aspect-square overflow-hidden md:order-1">
+                  <div
+                    className={`
+                        relative group
+                        aspect-square md:aspect-auto lg:aspect-square
+                        overflow-hidden
+                        md:order-1
+                      `}
+                  >
                     <Image
                       alt="18th Birthdays Image"
                       src={images.birthdays.header[1]}
-                      className="w-full aspect-square md:aspect-auto lg:aspect-square object-cover object-bottom group-hover:scale-105 duration-(--grid-fade-in-duration)"
+                      className={`
+                          w-full
+                          aspect-square md:aspect-auto lg:aspect-square
+                          object-cover object-bottom
+                          group-hover:scale-105
+                          duration-(--grid-fade-in-duration)
+                        `}
+                    />
+                    <div
+                      className={`
+                          pointer-events-none absolute inset-0
+                          bg-primary opacity-80
+                          transition-opacity duration-(--grid-fade-in-duration)
+                          group-hover:opacity-50
+                        `}
                     />
-                    <div className="pointer-events-none absolute inset-0 bg-primary opacity-80 transition-opacity duration-(--grid-fade-in-duration) group-hover:opacity-50" />
                     <div className="absolute bottom-8 left-8 flex flex-col h-fit border-l-2 border-l-accent px-4">
                       <div className="font-family-mono uppercase">
                         Trending now
@@ -329,7 +377,7 @@ export default function Home() {
                     <br />
                     Architecture
                   </div>
-                  <div className="font-family-regular-md xl:w-[75%]">
+                  <div className="font-family-regular-lg text-text-secondary xl:w-[75%]">
                     We build blazing fast, accessible, and visually stunning
                     websites using the latest stacks (React, Vue, WebGL). We
                     turn designs into interactive reality.
@@ -353,7 +401,7 @@ export default function Home() {
                     &#47;&#47; Rental
                   </div>
                   <div className="font-family-secondary">Gear Room</div>
-                  <div className="font-family-regular-md">
+                  <div className="font-family-regular-lg text-text-secondary">
                     Need a RED Komodo for the weekend? Or a full Aputure
                     lighting kit? Download our updated catalog or request a
                     quick quote.

diff --git a/src/app/events/_components/WorkProcessGrid.tsx b/src/app/events/_components/WorkProcessGrid.tsx
diff --git a/src/app/events/page.tsx b/src/app/events/page.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import type React from "react";
 import Navbar from "@/components/Navbar";
 import Footer from "@/components/Footer";
 import Metadata from "@/components/Metadata";
@@ -12,13 +13,50 @@ import SecondaryLink from "@/components/SecondaryLink";
 import Image from "next/image";
 import type { StaticImageData } from "next/image";
 import images from "@/utils/images";
-import WorkProcessGrid from "./_components/WorkProcessGrid";
+import WorkProcessGrid from "@/components/WorkProcessGrid";
+import {
+  FiMessageSquare,
+  FiCamera,
+  FiEdit,
+  FiDownloadCloud,
+} from "react-icons/fi";
 
 const PHILOSOPHY_IMAGES: StaticImageData[] = [
   images.birthdays.header[0],
   images.birthdays.header[1],
 ];
 
+const WORK_PROCESS_STEPS: {
+  description: string;
+  icon: React.ReactElement;
+  title: string;
+}[] = [
+  {
+    description:
+      "Defining goals, visual style, and key moments that must be captured.",
+    icon: <FiMessageSquare size={32} className="text-accent" />,
+    title: "01. Client Briefing",
+  },
+  {
+    description:
+      "Discreet, professional, and comprehensive documentation of your event.",
+    icon: <FiCamera size={32} className="text-accent" />,
+    title: "02. Event Coverage",
+  },
+  {
+    description:
+      "Color grading, editing, and cinematic retouching to our studio standard.",
+    icon: <FiEdit size={32} className="text-accent" />,
+    title: "03. Post-Production",
+  },
+  {
+    description:
+      "Full resolution digital gallery and cinematic highlight reel delivered.",
+    icon: <FiDownloadCloud size={32} className="text-accent" />,
+    title: "04. Delivery",
+  },
+];
+
 export default function Events() {
   const { isNavOpen } = useNav();
 
@@ -132,7 +170,7 @@ export default function Events() {
               From concept to delivery in 14 days.
             </div>
 
-            <WorkProcessGrid />
+            <WorkProcessGrid steps={WORK_PROCESS_STEPS} />
           </section>
 
           {/* Call to Action Section */}

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -26,6 +26,8 @@
 
   --transition-duration: 150ms;
   --grid-fade-in-duration: 500ms;
+
+  --media-border-radius: 0rem;
 }
 
 /*
@@ -44,6 +46,10 @@
   ::file-selector-button {
     border-color: var(--color-gray-200, currentcolor);
   }
+
+  .media-default-skin {
+    border-radius: var(--media-border-radius);
+  }
 }
 
 /* Hero */

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,4 +1,5 @@
 import "./globals.css";
+import "@videojs/react/video/skin.css";
 import { ibmPlexMono, inter, spaceGrotesk } from "./fonts";
 import { Metadata } from "next";
 import { NavProvider } from "@/contexts/NavContext";

diff --git a/src/app/productions/_components/ProductionCategoriesGrid.tsx b/src/app/productions/_components/ProductionCategoriesGrid.tsx
@@ -0,0 +1,83 @@
+import images from "@/utils/images";
+import Image, { StaticImageData } from "next/image";
+
+const PRODUCTION_CATEGORIES: {
+  title: string;
+  description: string;
+  src: StaticImageData;
+}[] = [
+  {
+    title: "Commercials",
+    description:
+      "High-impact brand storytelling designed for global reach and digital conversion. We build brand equity through precision framing.",
+    src: images.event[0],
+  },
+  {
+    title: "Event Videos",
+    description:
+      "Dynamic coverage for high-end activations, runway shows, and corporate summits. Capturing energy in its purest form.",
+    src: images.event[1],
+  },
+  {
+    title: "Documentaries",
+    description:
+      "Long-form narratives exploring human culture, technology, and art. Authentic stories told with a cinematic edge.",
+    src: images.event[2],
+  },
+  {
+    title: "Social Media",
+    description:
+      "Vertically optimized content that disrupts the scroll. Fast-paced, high-energy visuals for modern digital platforms.",
+    src: images.event[3],
+  },
+];
+
+const ProductionCategoriesGrid = () => (
+  <div className="grid grid-cols-1 md:grid-cols-2 gap-0 border border-border">
+    {PRODUCTION_CATEGORIES.map((category, index) => (
+      <div
+        key={`production-category-${index}`}
+        className={`
+              relative group
+              aspect-auto
+              overflow-hidden
+              ${index !== 0 ? "border-t border-border" : ""}
+            `}
+      >
+        <Image
+          alt={category.title}
+          src={category.src}
+          className={`
+              object-cover
+              opacity-50 saturate-0
+              group-hover:saturate-100
+              duration-(--transition-duration)
+            `}
+        />
+        <div
+          className={`
+              flex flex-col
+              absolute bottom-4 left-4
+              text-white
+            `}
+        >
+          <div
+            className={`
+              text-white
+              font-family-regular-lg
+              text-lg md:text-xl lg:text-2xl
+              font-bold uppercase
+            `}
+          >
+            {category.title}
+          </div>
+          <div className="font-family-regular-md w-[75%]">
+            {category.description}
+          </div>
+        </div>
+      </div>
+    ))}
+  </div>
+);
+
+export default ProductionCategoriesGrid;