From 69b183aa995c3afb3d739aa1b5a142d73af21a61 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sun, 29 Oct 2023 21:09:23 -0500
Subject: [PATCH] Refine film simulation animation

---
 src/app/(static)/film/animate/page.tsx | 38 ++++++++++++++++++--------
 1 file changed, 27 insertions(+), 11 deletions(-)

diff --git a/src/app/(static)/film/animate/page.tsx b/src/app/(static)/film/animate/page.tsx
index 4e2f1f89..602f05d6 100644
--- a/src/app/(static)/film/animate/page.tsx
+++ b/src/app/(static)/film/animate/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import InfoBlock from '@/components/InfoBlock';
+import SiteGrid from '@/components/SiteGrid';
 import { cc } from '@/utility/css';
 import { FILM_SIMULATION_FORM_INPUT_OPTIONS } from '@/vendors/fujifilm';
 import PhotoFujifilmSimulation from
@@ -18,16 +18,32 @@ export default function FilmPage() {
   });
 
   return (
-    <InfoBlock className="w-[250px] h-[125px] m-36 scale-150">
-      <div className={cc(
-        'w-[250px] h-[125px]',
-        'flex justify-start items-center pl-12',
+    <SiteGrid
+      contentMain={<div className={cc(
+        'flex items-center justify-center min-h-[30rem]',
       )}>
-        <PhotoFujifilmSimulation
-          simulation={FILM_SIMULATION_FORM_INPUT_OPTIONS[index].value}
-          showIconFirst
-        />
-      </div>
-    </InfoBlock>
+        <div className="w-[250px] scale-150">
+          <div className="dark:text-gray-500/50 uppercase">
+            Film Simulation:
+          </div>
+          <PhotoFujifilmSimulation
+            simulation={FILM_SIMULATION_FORM_INPUT_OPTIONS[index].value}
+            showIconFirst
+          />
+          <div className="mt-4 text-dim relative">
+            <div>
+              <div>35mm 53mm</div>
+              <div>ƒ/1.4</div>
+              <div>1/3200s</div>
+              <div>ISO 125</div>
+            </div>
+            <div className={cc(
+              'absolute top-0 left-[-2px] right-0 bottom-0',
+              'bg-gradient-to-t from-black to-[rgba(0,0,0,0.5)]',
+            )} />
+          </div>
+        </div>
+      </div>}
+    />
   );
 }