feat(talks/photo-highlights-section): new visuals

src/components/pages/talks/photo-highlights-section-item.tsx

@@ -1,50 +1,63 @@
-import Image from 'next/image';
-import Link from 'next/link';
 import { FunctionComponent, PropsWithChildren } from 'react';
 
-import Typography from 'components/shared/typography';
+import { FeaturedTalk } from 'services/content/talks';
+
+import Link from 'components/shared/link';
+import { randomElement } from 'utils/array';
 
 //  ---------------------------------------------------------------------------
-//  TYPES
+//  UTILS
 //  ---------------------------------------------------------------------------
 
-export type PhotoHighlightsSectionItemProps = {
-  talkSlug: string;
-  eventName: string;
-  photoURL: string;
+const getGradientClass = () => {
+  const gradients = [
+    'bg-gradient-to-br from-purple-600 via-pink-500 to-blue-600',
+    'bg-gradient-to-tr from-blue-600 via-teal-500 to-purple-600',
+    'bg-gradient-to-bl from-orange-500 via-pink-500 to-blue-600',
+    'bg-gradient-to-r from-green-500 via-teal-500 to-blue-500',
+    'bg-gradient-to-tl from-yellow-500 via-red-500 to-pink-500',
+    'bg-gradient-to-l from-indigo-500 via-purple-500 to-pink-500',
+    'bg-gradient-to-tr from-green-500 via-blue-500 to-purple-500',
+    'bg-gradient-to-br from-red-500 via-orange-500 to-yellow-500',
+    'bg-gradient-to-bl from-blue-500 via-cyan-500 to-teal-500',
+    'bg-gradient-to-r from-purple-500 via-pink-500 to-red-500',
+    'bg-gradient-to-tr from-green-500 via-yellow-500 to-orange-500',
+    'bg-gradient-to-bl from-blue-500 via-indigo-500 to-violet-500',
+  ];
+
+  return randomElement(gradients);
 };
 
 //  ---------------------------------------------------------------------------
 //  UI
 //  ---------------------------------------------------------------------------
 
-const PhotoHighlightsSectionItem: FunctionComponent<PropsWithChildren<PhotoHighlightsSectionItemProps>> = (props) => {
-  const { photoURL, talkSlug, eventName } = props;
+const PhotoHighlightsSectionItem: FunctionComponent<PropsWithChildren<FeaturedTalk>> = (props) => {
+  const { photoURL, talkSlug, talkTitle, eventName, eventLocation } = props;
 
   return (
-    <Link
-      key={talkSlug}
-      href={talkSlug}
-      shallow
-      className="group relative mb-5 block w-full cursor-zoom-in after:pointer-events-none after:absolute after:inset-0 after:rounded-lg"
-    >
-      <figure className="relative max-w-sm cursor-pointer">
-        <Image
-          alt={eventName}
-          className="h-auto max-w-lg rounded-lg group-hover:grayscale"
-          src={photoURL}
-          width={720}
-          height={480}
-          style={{
-            maxWidth: '100%',
-            height: 'auto',
-          }}
-        />
-        <figcaption className="absolute bottom-0 hidden w-full p-2 text-center backdrop-blur-sm group-hover:block">
-          <Typography.lead className="drop-shadow-[3px_3px_3px_rgba(0,0,0,0.8)]">{eventName}</Typography.lead>
-        </figcaption>
-      </figure>
-    </Link>
+    <div className="group relative h-[280px] w-full overflow-hidden rounded-2xl">
+      <div className="absolute inset-0 z-10 bg-black/40"></div>
+      <div className={`absolute inset-0 z-20 opacity-60 mix-blend-soft-light ${getGradientClass()}`}></div>
+      <div
+        className="absolute inset-0 z-30 bg-black/50 bg-[radial-gradient(#fff_1px,transparent_1px)] 
+                      mix-blend-multiply [background-size:16px_16px]"
+      ></div>
+      <img
+        src={photoURL}
+        alt={eventName}
+        className="absolute inset-0 z-0 h-full w-full object-cover object-center transition-transform duration-300 group-hover:scale-110"
+      />
+      <div className="relative z-40 flex h-full flex-col justify-end p-6">
+        <span className="mb-2 text-sm text-gray-300">{eventLocation}</span>
+        <Link key={talkSlug} href={talkSlug} className="block">
+          <h3 className="mb-2 text-2xl font-bold text-white transition-colors duration-200 group-hover:text-gray-300">
+            {eventName}
+          </h3>
+        </Link>
+        <p className="text-sm text-gray-300">{talkTitle}</p>
+      </div>
+    </div>
   );
 };
 

src/components/pages/talks/photo-highlights-section.tsx

@@ -1,18 +1,18 @@
 import { FunctionComponent, PropsWithChildren } from 'react';
 
+import { FeaturedTalk } from 'services/content/talks';
+
 import SectionContainer from 'components/shared/section-container';
 import SectionHeading from 'components/shared/section-heading';
 
-import PhotoHighlightsSectionItem, {
-  PhotoHighlightsSectionItemProps,
-} from 'components/pages/talks/photo-highlights-section-item';
+import PhotoHighlightsSectionItem from 'components/pages/talks/photo-highlights-section-item';
 
 //  ---------------------------------------------------------------------------
 //  TYPES
 //  ---------------------------------------------------------------------------
 
 export type PhotoHighlightsSectionProps = {
-  items: Array<PhotoHighlightsSectionItemProps>;
+  items: Array<FeaturedTalk>;
 };
 
 //  ---------------------------------------------------------------------------
@@ -23,12 +23,12 @@ const PhotoHighlightsSection: FunctionComponent<PropsWithChildren<PhotoHighlight
   return (
     <SectionContainer>
       <SectionHeading title="Captured Highlights" />
-      <div className="my-8 columns-2 gap-4 sm:columns-3">
-        <div className="relative mb-4 h-40">
+      <div className="mx-auto max-w-7xl">
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
           {items.map((item) => (
             <PhotoHighlightsSectionItem key={`${item.talkSlug}-${item.eventName}`} {...item} />
           ))}
-        </div>
+        </div>{' '}
       </div>
     </SectionContainer>
   );