We build blazing fast, accessible, and visually stunning
websites using the latest stacks (React, Vue, WebGL). We
turn designs into interactive reality.
@@ -353,7 +353,7 @@ export default function Home() {
// Rental
Gear Room
-
+
Need a RED Komodo for the weekend? Or a full Aputure
lighting kit? Download our updated catalog or request a
quick quote.
From 7c6d8d23f22405df74182de3bc9273739df06aee Mon Sep 17 00:00:00 2001
From: Antonio Wang <--edit>
Date: Fri, 27 Mar 2026 09:33:10 +0100
Subject: [PATCH 03/11] feat: add WorkProcessGrid component for displaying
process steps
---
src/components/WorkProcessGrid.tsx | 46 ++++++++++++++++++++++++++++++
1 file changed, 46 insertions(+)
create mode 100644 src/components/WorkProcessGrid.tsx
diff --git a/src/components/WorkProcessGrid.tsx b/src/components/WorkProcessGrid.tsx
new file mode 100644
index 0000000..571dbb3
--- /dev/null
+++ b/src/components/WorkProcessGrid.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+
+type Props = {
+ steps: {
+ description: string;
+ icon: React.ReactElement;
+ title: string;
+ }[];
+};
+
+const WorkProcessGrid = ({ steps }: Props) => (
+
+ {steps.map((step, index) => (
+
+ {step.icon}
+
+ {step.title}
+
+
+ {step.description}
+
+
+ ))}
+
+);
+
+export default WorkProcessGrid;
From aeb8d980f122556cd7457ec794485d01812dfd2d Mon Sep 17 00:00:00 2001
From: Antonio Wang <--edit>
Date: Fri, 27 Mar 2026 09:33:28 +0100
Subject: [PATCH 04/11] feat: refactor WorkProcessGrid integration and define
process steps in Events page
---
.../events/_components/WorkProcessGrid.tsx | 75 -------------------
src/app/events/page.tsx | 41 +++++++++-
2 files changed, 39 insertions(+), 77 deletions(-)
delete mode 100644 src/app/events/_components/WorkProcessGrid.tsx
diff --git a/src/app/events/_components/WorkProcessGrid.tsx b/src/app/events/_components/WorkProcessGrid.tsx
deleted file mode 100644
index 6d64266..0000000
--- a/src/app/events/_components/WorkProcessGrid.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import React from "react";
-import {
- FiCamera,
- FiDownloadCloud,
- FiEdit,
- FiMessageSquare,
-} from "react-icons/fi";
-
-const WORK_PROCESS_STEPS: {
- description: string;
- icon: React.ReactElement;
- title: string;
-}[] = [
- {
- description:
- "Defining goals, visual style, and key moments that must be captured.",
- icon: ,
- title: "01. Client Briefing",
- },
- {
- description:
- "Discreet, professional, and comprehensive documentation of your event.",
- icon: ,
- title: "02. Event Coverage",
- },
- {
- description:
- "Color grading, editing, and cinematic retouching to our studio standard.",
- icon: ,
- title: "03. Post-Production",
- },
- {
- description:
- "Full resolution digital gallery and cinematic highlight reel delivered.",
- icon: ,
- title: "04. Delivery",
- },
-];
-
-const WorkProcessGrid = () => (
-
- {WORK_PROCESS_STEPS.map((step, index) => (
-
- {step.icon}
-
- {step.title}
-
-
- {step.description}
-
-
- ))}
-
-);
-
-export default WorkProcessGrid;
diff --git a/src/app/events/page.tsx b/src/app/events/page.tsx
index a6c2ddc..f43b6cb 100644
--- a/src/app/events/page.tsx
+++ b/src/app/events/page.tsx
@@ -12,13 +12,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: ,
+ title: "01. Client Briefing",
+ },
+ {
+ description:
+ "Discreet, professional, and comprehensive documentation of your event.",
+ icon: ,
+ title: "02. Event Coverage",
+ },
+ {
+ description:
+ "Color grading, editing, and cinematic retouching to our studio standard.",
+ icon: ,
+ title: "03. Post-Production",
+ },
+ {
+ description:
+ "Full resolution digital gallery and cinematic highlight reel delivered.",
+ icon: ,
+ title: "04. Delivery",
+ },
+];
+
export default function Events() {
const { isNavOpen } = useNav();
@@ -132,7 +169,7 @@ export default function Events() {
From concept to delivery in 14 days.
-
+
{/* Call to Action Section */}
From 4b6beab538937a0acb68a8cb8b034f3f0ac6ed22 Mon Sep 17 00:00:00 2001
From: Antonio Wang <--edit>
Date: Fri, 27 Mar 2026 09:33:36 +0100
Subject: [PATCH 05/11] feat: add media border radius variable and apply to
media-default-skin
---
src/app/globals.css | 6 ++++++
1 file changed, 6 insertions(+)
diff --git a/src/app/globals.css b/src/app/globals.css
index 106c502..f604bb5 100644
--- 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 */
From 800e09ecc93f316ddd53ccab9cc1872dc456c37e Mon Sep 17 00:00:00 2001
From: Antonio Wang <--edit>
Date: Fri, 27 Mar 2026 09:33:45 +0100
Subject: [PATCH 06/11] feat: add components for production categories,
selected productions, showcase reel video player, and visual language section
---
.../_components/ProductionCategoriesGrid.tsx | 115 ++++++++++++++++++
.../_components/SelectedProductionsGrid.tsx | 70 +++++++++++
.../_components/ShowcaseReelVideoPlayer.tsx | 32 +++++
.../_components/VisualLanguageSection.tsx | 53 ++++++++
4 files changed, 270 insertions(+)
create mode 100644 src/app/productions/_components/ProductionCategoriesGrid.tsx
create mode 100644 src/app/productions/_components/SelectedProductionsGrid.tsx
create mode 100644 src/app/productions/_components/ShowcaseReelVideoPlayer.tsx
create mode 100644 src/app/productions/_components/VisualLanguageSection.tsx
diff --git a/src/app/productions/_components/ProductionCategoriesGrid.tsx b/src/app/productions/_components/ProductionCategoriesGrid.tsx
new file mode 100644
index 0000000..97e9767
--- /dev/null
+++ b/src/app/productions/_components/ProductionCategoriesGrid.tsx
@@ -0,0 +1,115 @@
+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 = () => (
+ //
+
+ We believe every frame is an architectural decision. Our approach to
+ video production is rooted in structural integrity—treating the
+ viewport as a canvas for depth and tension.
+
+
+ By blending the brutalist aesthetic with cinematic warmth, we create
+ content that feels both monumental and deeply personal. We don't
+ just capture events; we curate them into enduring visual legacies.
+
+
+);
+
+export default VisualLanguageSection;
From 5133760ce6eea91ad3971ba814cd12ef3fe0558d Mon Sep 17 00:00:00 2001
From: Antonio Wang <--edit>
Date: Fri, 27 Mar 2026 09:33:48 +0100
Subject: [PATCH 07/11] feat: enhance productions page with new components and
layout adjustments
---
src/app/productions/page.tsx | 342 +++++++++++++++--------------------
1 file changed, 145 insertions(+), 197 deletions(-)
diff --git a/src/app/productions/page.tsx b/src/app/productions/page.tsx
index 3afed52..5729f35 100644
--- a/src/app/productions/page.tsx
+++ b/src/app/productions/page.tsx
@@ -1,226 +1,174 @@
"use client";
+import Button from "@/components/Button";
+import Metadata from "@/components/Metadata";
import Navbar from "@/components/Navbar";
-import HorizontalSeparatorLine from "@/components/HorizontalSeparatorLine";
-import Gsap from "gsap";
-import { ScrollSmoother } from "gsap/ScrollSmoother";
-import { ScrollTrigger } from "gsap/ScrollTrigger";
-import { useGSAP } from "@gsap/react";
-import { useRef } from "react";
-import images from "@/utils/images";
-import Image from "next/image";
-import { createSmoothWrapper } from "@/utils/gsap";
-
-const productionVideos: {
+import { useNav } from "@/contexts/NavContext";
+import { Activity, Suspense } from "react";
+import ShowcaseReelVideoPlayer from "./_components/ShowcaseReelVideoPlayer";
+import Footer from "@/components/Footer";
+import SelectedProductionsGrid from "./_components/SelectedProductionsGrid";
+import ProductionCategoriesGrid from "./_components/ProductionCategoriesGrid";
+import VisualLanguageSection from "./_components/VisualLanguageSection";
+import WorkProcessGrid from "@/components/WorkProcessGrid";
+import {
+ FiMessageSquare,
+ FiEdit,
+ FiDownloadCloud,
+ FiFilm,
+} from "react-icons/fi";
+
+const WORK_PROCESS_STEPS: {
+ description: string;
+ icon: React.ReactElement;
title: string;
- id: string;
}[] = [
{
- title: "Silarus - La Moda che Scorre",
- id: "aW9yPWg4ryA",
+ description:
+ "Scripting, storyboarding, and strategic alignment to define the visual north star.",
+ icon: ,
+ title: "01. Concept & Planning",
},
{
- title: "Spot Morra De Sanctis - CASA Sanremo",
- id: "upkRLaQNOFc",
+ description:
+ "Execution with industry-standard glass and lighting by our specialized field crew.",
+ icon: ,
+ title: "02. Shooting",
},
{
- title: "10 Anni InfoIrpinia",
- id: "FwNtA1SdZSQ",
+ description:
+ "Non-linear assembly, sound design, and color grading for a distinct aesthetic.",
+ icon: ,
+ title: "03. Editing",
+ },
+ {
+ description:
+ "Platform-optimized assets delivered through our secure client cloud.",
+ icon: ,
+ title: "04. Final Delivery",
},
];
-Gsap.registerPlugin(ScrollSmoother, ScrollTrigger);
-
-export default function Works() {
- const scrollSmootherWrapper = useRef(null);
-
- useGSAP(
- () => {
- // Horizontal scrolling gallery
- const panels = Gsap.utils.toArray(".horizontal-gallery-panel");
- const mainEl = document.querySelector("main");
-
- if (mainEl === null) return;
-
- const panelsOffsetWidth = (
- document.querySelector(
- ".horizontal-gallery-container"
- ) as unknown as HTMLElement
- ).offsetWidth;
-
- createSmoothWrapper({
- content: "#smooth-content",
- wrapper: "#smooth-wrapper",
- });
-
- Gsap.to(panels, {
- x: -panelsOffsetWidth,
- ease: "none",
- scrollTrigger: {
- trigger: ".horizontal-gallery-container",
- pin: true,
- pinSpacing: true,
- scrub: 1,
- end: `+=${panelsOffsetWidth}`,
- },
- });
-
- // Brands images marquee infinite scroll
- const marquee = document.querySelector(
- ".marquee"
- ) as unknown as HTMLElement | null;
-
- if (!marquee) return;
-
- // Get the children elements from the marquee div
- const marqueeChildren = Array.from(marquee.children) as HTMLElement[];
-
- // Wait for any images inside the marquee to load so measurements are accurate
- void (async () => {
- const marqueeImages = Array.from(marquee.querySelectorAll("img"));
- await Promise.all(
- marqueeImages.map((img) =>
- img.complete
- ? Promise.resolve()
- : new Promise((res) => {
- img.addEventListener("load", res, { once: true });
- })
- )
- );
-
- // One set of a marquee (if there are 8 images it's gonna be the width of 8 images combined)
- const singleSetWidth = marquee.scrollWidth;
- // The target width: usually we want pretty much more than the viewport
- // obviously because otherwise there's gonna be empty spaces
- const targetWidth = window.innerWidth + singleSetWidth;
-
- while (marquee.scrollWidth < targetWidth) {
- const fragment = document.createDocumentFragment();
- // For every child of the marquee children, append it to the document fragment
- for (const child of marqueeChildren)
- fragment.appendChild(child.cloneNode(true));
-
- // As a result, append the document fragment to the marquee
- marquee.appendChild(fragment);
- }
-
- const totalWidth = singleSetWidth;
- let x = 0;
- const speed = 1;
-
- // Once the thing reaches the end then we can "snap" without snapping as it's
- // smoothly to the initial position (which is going to be 0).
- const setX = Gsap.quickSetter(marquee, "x", "px");
- const tick = () => {
- x -= speed;
- if (x <= -totalWidth) x += totalWidth;
- setX(x);
- };
-
- Gsap.ticker.add(tick);
- })();
- },
- {
- scope: scrollSmootherWrapper,
- }
- );
+export default function Productions() {
+ const { isNavOpen } = useNav();
return (
<>
- {/* Meta tags */}
- Lavori - Frame
-
-
-
- {/* Navbar */}
-
-
-
-
-
- I Nostri Lavori
-
-
-
- Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque
- faucibus ex sapien vitae pellentesque sem placerat. In id cursus
- mi pretium tellus duis convallis. Tempus leo eu aenean sed diam
- urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum
- egestas. Iaculis massa nisl malesuada lacinia integer nunc
- posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad
- litora torquent per conubia nostra inceptos himenaeos.
-