Update MHD, add before-after slider, tune layouts

package.json

@@ -16,6 +16,7 @@
     "lucide-react": "^0.446.0",
     "prismjs": "^1.29.0",
     "react": "^18.3.1",
+    "react-before-after-slider-component": "^1.1.8",
     "react-dom": "^18.3.1",
     "react-masonry-css": "^1.0.16",
     "react-router-dom": "^6.26.2"

src/components/WorkTile.tsx

@@ -18,13 +18,9 @@ const WorkTile = ({
 
   return (
     <div
-      className={clsx(
-        'flex w-full flex-col gap-8 px-6 pb-12 sm:px-8 md:px-12',
-        title ? 'pt-6' : 'pt-12',
-        className
-      )}
+      className={clsx('relative flex w-full flex-col gap-8 px-6 pb-12 sm:px-8 md:px-12', className)}
     >
-      <span id={id} className="relative -top-12 block" />
+      <span id={id} className="absolute -top-12 block" />
       {top && <>{top}</>}
       <div className="flex flex-col gap-4 md:flex-row md:gap-12">
         {title && (

src/content/mhd/MhdPreview.tsx

@@ -1,5 +1,5 @@
 import WorkPreviewTile from '@/components/WorkPreviewTile'
-import preview from './images/mhd-home.png'
+import preview from './images/mhd-home.jpg'
 
 const MhdPreview = () => {
   return (

src/content/mhd/index.tsx

@@ -1,13 +1,23 @@
 import Paragraph from '@/components/Paragraph'
 import WorkTile from '@/components/WorkTile'
 import MasonryWrapper from '@/partials/MasonryWrapper'
+import ReactBeforeSliderComponent from 'react-before-after-slider-component'
+import 'react-before-after-slider-component/dist/build.css'
+import mhdAfter from './images/mhd-after.jpg'
+import mhdBefore from './images/mhd-before.jpg'
+import mhdHome from './images/mhd-home.jpg'
 import mhdLang from './images/mhd-lang.mp4'
-import mhdMain from './images/mhd-main.jpg'
-import mhdTest from './images/mhd-test.jpg'
 import mhdTrio from './images/mhd-trio.png'
 import mhdVideo from './images/mhd-video.png'
 import mhd from './images/mhd.mp4'
 
+const FIRST_IMAGE = {
+  imageUrl: mhdBefore,
+}
+const SECOND_IMAGE = {
+  imageUrl: mhdAfter,
+}
+
 const More = () => {
   return (
     <Paragraph>
@@ -25,8 +35,9 @@ const WorkMHD = () => {
       title="Ticket-buying redesign"
       more={<More />}
       text="A complete redesign of the ticket-buying experience for Bratislava public transport, from an completely new UX to a simpler, more intuitive ticket machine interface."
-      top={<img src={mhdTrio} className="mb-4" />}
+      top={<img src={mhdHome} />}
     >
+      <img src={mhdTrio} className="mb-4" />
       <MasonryWrapper>
         <div className="relative mx-auto mb-4 max-w-screen-xl">
           <img src={mhdVideo} alt="" />
@@ -44,11 +55,14 @@ const WorkMHD = () => {
             </video>
           </div>
         </div>
-        <img src={mhdMain} className="mb-4" />
-        <div className="mb-4 bg-[#BBE2DA]">
-          <img src={mhdTest} className="opacity-90" />
-        </div>
       </MasonryWrapper>
+      <ReactBeforeSliderComponent
+        currentPercentPosition={69}
+        delimiterColor="#222"
+        delimiterIconStyles={{ border: '2px #fff solid', cursor: 'ew-resize' }}
+        firstImage={FIRST_IMAGE}
+        secondImage={SECOND_IMAGE}
+      ></ReactBeforeSliderComponent>
     </WorkTile>
   )
 }

src/pages/Work.tsx

@@ -7,7 +7,7 @@ import WorkPhoto from '@/content/WorkPhoto'
 
 const Work = () => {
   return (
-    <div className="flex flex-col gap-16">
+    <div className="flex flex-col gap-32">
       <WorkMHD />
       <WorkKolbord />
       <WorkThankful />