Redesign sessions, speakers, session detail, about & sponsors

components/about/Team.tsx

@@ -22,49 +22,50 @@ function Team({ organizers: unOrderedOrgs }: { organizers: Organizer[] }) {
   })
   return (
     <>
-      <section className="l-container mt-4 md:mt-10">
-        <div className="flex flex-wrap md:py-16">
-          <div className="w-full text-center mb-2 md:mb-0 mt-4 md:mt-0 items-center justify-center">
-            <h2 className="title lowercase dark:text-accent-dark pt-6 md:pt-0">
-              <span>organizing</span> <span className="font-medium">team</span>
-            </h2>
+      <section className="s-container mt-8 md:mt-12">
+        <div className="w-full bg-primary rounded-4xl md:rounded-5xl px-6 py-8 md:px-12 md:py-12 text-left">
+          <div className="flex items-center text-white/80 text-sm md:text-base font-medium mb-3">
+            <div className="w-6 h-px bg-white/80 mr-3" />
+            meet the team
           </div>
+          <h2 className="font-display capitalize text-accent text-3xl md:text-5xl">
+            <span>organizing</span> <span>team</span>
+          </h2>
+          <p className="mt-4 text-white text-lg md:text-xl leading-relaxed lg:w-10/12">
+            Fluttercon Kenya is a Codescape Limited product, organized by the
+            same seasoned team behind Droidcon Kenya, ensuring seamless
+            integration between the two conferences.
+          </p>
         </div>
-        <p className="mb-4 md:mb-0 text-xl justify-center text-center">
-          Fluttercon Kenya is a Codescape Limited product, organized by the same
-          seasoned team behind Droidcon Kenya, ensuring seamless integration
-          between the two conferences.
-        </p>
       </section>
-      <section className="s-container">
+      <section className="s-container mt-8 md:mt-10">
         <div>
           <div className="items-center flex flex-wrap">
-            <div className="w-full px-0 md:px-24 mr-auto mb-4 md:mb-0 pb-0 lg:pb-16">
-              <div className="w-full flex-wrap grid sm:grid-cols-4 md:grid-cols-5 grid-cols-3 gap-2 lg:gap-4">
+            <div className="w-full mr-auto mb-4 md:mb-0 pb-0 lg:pb-16">
+              <div className="w-full flex-wrap grid sm:grid-cols-4 md:grid-cols-5 grid-cols-3 gap-4 md:gap-6">
                 {organizers.map((org) => (
                   <a
                     key={org.created_at}
                     target="_blank"
                     href={org.link}
-                    className="text-center"
                     rel="noreferrer"
+                    className="group flex flex-col h-full rounded-2xl overflow-hidden bg-white dark:bg-darker-dark border border-primary dark:border-primary shadow-md hover:shadow-xl hover:border-accent transition-all duration-200"
                   >
-                    <div className="flex justify-center">
-                      <div className="w-24 h-24 md:w-44 md:h-44 p-2 md:p-4 bg-green-c-2 rounded">
-                        <img
-                          className="w-full p-0 flex rounded-lg border border-accent-2"
-                          src={
-                            org.photo === null ? '/images/icon.png' : org.photo
-                          }
-                          alt={org.name}
-                        />
-                      </div>
+                    <div className="relative overflow-hidden bg-blue-600">
+                      <img
+                        className="w-full aspect-square object-cover grayscale contrast-125 mix-blend-screen group-hover:scale-105 transition-transform duration-300"
+                        src={
+                          org.photo === null ? '/images/icon.png' : org.photo
+                        }
+                        alt={org.name}
+                      />
+                      <span className="pointer-events-none absolute inset-0 mix-blend-overlay [background-image:radial-gradient(rgba(255,255,255,0.3)_1px,transparent_1.4px)] [background-size:6px_6px]" />
                     </div>
-                    <div className="self-start">
-                      <p className="mt-2 w-full text-base md:text-xl">
+                    <div className="p-2 md:p-3 text-center flex-1 flex flex-col justify-center">
+                      <p className="text-xs md:text-base font-bold text-accent dark:text-accent">
                         {org.name}
                       </p>
-                      <p className="text-xs md:text-sm text-light dark:text-light">
+                      <p className="text-[10px] md:text-xs text-black dark:text-white-dark mt-0.5 line-clamp-2">
                         {org.tagline}
                       </p>
                     </div>

components/error/index.tsx

@@ -1,29 +1,30 @@
+import Link from 'next/link'
 import { ErrorInterface } from '../../types/types'
-import TitleComponent from './Title'
-import MessageComponent from './Message'
 
 const ErrorComponent = ({ message, status }: ErrorInterface) => {
-  return (
-    <div className="bg-lighter dark:bg-black flex flex-col h-screen justify-center">
-      <div className="absolute top-[32%] left-[15%] rotate-[340deg]">
-        <img
-          src="/images/svg/colored-x.svg"
-          className="w-12 h-12 sm:w-16 sm:h-16 md:w-20 md:h20 lg:w-28 lg:h-28"
-          alt="fluttercon colored-x icon"
-        />
-      </div>
-
-      <div className="absolute top-[70%] right-[5%] sm:right-[7%] md:top-96 md:right-[7%] lg:right-[7%] xl:right-[10%] 2xl:right-[15%]">
-        <img
-          src="/images/element_left.png"
-          className="w-14 sm:w-24 sm:h-20 md:w-28 md:h-24 lg:w-36 lg:h-32"
-          alt="fluttercon element-x icon"
-        />
-      </div>
+  // Short codes (404, 500) render huge; word statuses (OFFLINE) render smaller.
+  const isShort = String(status).length <= 4
 
-      <TitleComponent status={status} />
-
-      <MessageComponent message={message} />
+  return (
+    <div className="s-container min-h-[75vh] flex flex-col items-center justify-center text-center py-16 md:py-24">
+      <p className="text-primary dark:text-primary font-bold uppercase tracking-wide text-sm md:text-base mb-3">
+        ( Error )
+      </p>
+      <h1
+        className={`relative font-display text-black dark:text-white-dark leading-none break-words max-w-full ${
+          isShort ? 'text-8xl md:text-[11rem]' : 'text-5xl md:text-8xl'
+        }`}
+      >
+        {status}
+        {/* halftone accent behind the code */}
+        <span className="pointer-events-none absolute -top-4 -right-6 w-24 h-24 [background-image:radial-gradient(#F73EDE_1.5px,transparent_1.7px)] [background-size:10px_10px] [mask-image:radial-gradient(circle_at_top_right,#000,transparent_70%)] [-webkit-mask-image:radial-gradient(circle_at_top_right,#000,transparent_70%)]" />
+      </h1>
+      <p className="mt-6 text-base md:text-lg text-black dark:text-white-dark max-w-md">
+        {message}
+      </p>
+      <Link href="/" className="btn-primary uppercase mt-8">
+        Head back home
+      </Link>
     </div>
   )
 }

components/sessions/FilterSessions.tsx

@@ -4,8 +4,8 @@ import { groupBy3, objIsEmpty } from '../../utils/helpers'
 import { Event, FilterInterface } from '../../types/types'
 
 interface FilterSessionProps {
-  setShowFilterSession: (showFilterSession: boolean) => void
-  filterSession: (filter: FilterInterface) => void
+  setShowFilterSession: (_showFilterSession: boolean) => void
+  filterSession: (_filter: FilterInterface) => void
   event: Event
 }
 
@@ -15,6 +15,7 @@ export const FilterSessions: NextPage<FilterSessionProps> = ({
   event,
 }) => {
   const [filter, setFilter] = useState<FilterInterface>({})
+  const [isOpen, setIsOpen] = useState(false)
 
   const [sessions3] = useState(event.cfs.cfs_settings.session_levels)
   const [sessions4] = useState(event.rooms.map((r) => r.title))
@@ -34,23 +35,36 @@ export const FilterSessions: NextPage<FilterSessionProps> = ({
     filterSession(filter)
   }, [filter, filterSession])
 
+  useEffect(() => {
+    setIsOpen(true)
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setShowFilterSession(false)
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [setShowFilterSession])
+
   return (
     <>
-      {/* <div
-        className="bg-transparent h-full top-0 left-0 z-10 w-1/6 sm:w-3/4 absolute"
+      <div
+        className="fixed inset-0 z-20 bg-transparent"
         onClick={() => setShowFilterSession(false)}
         aria-hidden="true"
-      /> */}
-      <div className="fixed right-0 top-0 w-25 bg-black dark:bg-black-dark z-20 text-white w-10/12 lg:w-1/4 md:w-1/3 h-screen transition-all ease-in-out duration-1000 transform translate-x-0">
+      />
+      <div
+        className={`fixed right-0 top-0 bg-black dark:bg-black-dark z-30 text-white w-10/12 lg:w-1/4 md:w-1/3 h-screen rounded-l-4xl overflow-y-auto transition-transform ease-in-out duration-300 transform ${
+          isOpen ? 'translate-x-0' : 'translate-x-full'
+        }`}
+      >
         <div className="bg-black dark:bg-black-dark relative">
           <div className="py-16 px-4 md:px-10">
-            <div className="flex justify-between">
+            <div className="flex justify-between items-center">
               <div className="text-secondary text-base">
                 <i className="fa fa-filter text-xl" /> &nbsp; Filter
                 &nbsp;&nbsp;
                 {!objIsEmpty(filter) && (
                   <span
-                    className="purple text-xs cursor-pointer"
+                    className="text-accent underline text-xs cursor-pointer"
                     onClick={() => setFilter({})}
                     aria-hidden
                   >
@@ -60,14 +74,17 @@ export const FilterSessions: NextPage<FilterSessionProps> = ({
               </div>
               <button
                 type="button"
-                className="text-base hover:cursor-pointer text-light uppercase"
+                aria-label="Close filters"
+                className="text-light hover:text-white transition-colors"
                 onClick={() => setShowFilterSession(false)}
               >
-                Cancel
+                <i className="fa fa-times text-xl" />
               </button>
             </div>
             <div className="mt-10">
-              <span className="my-4">Level</span>
+              <span className="block mb-3 text-sm font-semibold uppercase tracking-wide text-white/60">
+                Level
+              </span>
               {groupBy3(sessions3).map((sessions: string[]) => (
                 <div className="flex pb-1 flex-wrap" key={sessions[0]}>
                   <button
@@ -112,7 +129,9 @@ export const FilterSessions: NextPage<FilterSessionProps> = ({
             </div>
 
             <div className="mt-10">
-              <span className="my-4">Rooms</span>
+              <span className="block mb-3 text-sm font-semibold uppercase tracking-wide text-white/60">
+                Rooms
+              </span>
               {groupBy3(sessions4).map((sessions: string[]) => (
                 <div
                   key={sessions[0]}
@@ -165,7 +184,9 @@ export const FilterSessions: NextPage<FilterSessionProps> = ({
             </div>
 
             <div className="mt-10">
-              <span className="my-4">Session Types</span>
+              <span className="block mb-3 text-sm font-semibold uppercase tracking-wide text-white/60">
+                Session Types
+              </span>
               {groupBy3(sessions5).map((sessions: string[]) => (
                 <div
                   key={sessions[0]}

components/sessions/NoSessions.tsx

@@ -1,19 +1,9 @@
 export const NoSessions = () => {
   return (
-    <div className="l-container flex flex-wrap">
-      <div className="w-2/12 h-20 items-center justify-center text-right hidden lg:flex" />
-      <div className="w-full lg:w-10/12 flex bg-white dark:bg-black-dark rounded-lg">
-        <div className="h-auto w-full lg:h-24 shadow rounded-lg px-4 py-3 flex flex-col justify-center">
-          <div className="flex flex-wrap items-center">
-            <div className="w-10/12">
-              <div className="mb-2 dark:text-white">
-                Seems there are no seesions here from the filter or saved
-                session !
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
+    <div className="w-full flex items-center justify-center rounded-4xl bg-blue-50 dark:bg-darker-dark border border-blue-100 dark:border-white/10 px-6 py-12 text-center">
+      <p className="text-light dark:text-light-dark">
+        No sessions here yet — try another day or clear your filters.
+      </p>
     </div>
   )
 }

components/sessions/SessionDetails.tsx

@@ -1,61 +1,57 @@
 import { Session } from '../../types/types'
 import { hour } from '../../utils/helpers'
-import { StarIcon } from '../shared/StarIcon'
-// import { SessionDetailSkeleton } from './skeletons/SessionDetailSkeleton'
 
 export const SessionDetails = ({ session }: { session: Session }) => {
   return (
-    <div className="w-full flex-wrap content-start items-start lg:w-5/12 px-0 lg:px-6 flex border-r-0 lg:border-r border-l-0 lg:border-l border-green-200">
-      <div className="w-full flex flex-wrap py-4 items-center">
-        <h4 className="lowercase font-black text-2xl md:text-3xl text-primary dark:text-white-dark mr-0 md:mr-10">
-          Session
-        </h4>
-        <p className="text-px-14 gray w-full">
-          <span className="mr-2 md:ml-4 lg:ml-0">Level:</span>{' '}
-          <span className="uppercase text-xs text-white dark:text-dark text-px-10 bg-black dark:bg-white-dark py-0.5 px-2 rounded-full">
-            #{session.is_keynote ? 'Keynote' : session.session_level}
-          </span>
+    <div className="relative overflow-hidden w-full rounded-4xl md:rounded-5xl bg-accent p-6 md:p-12">
+      {/* halftone dots at the top of the card */}
+      <span className="pointer-events-none absolute top-0 left-0 right-0 h-28 z-0 [background-image:radial-gradient(rgba(255,255,255,0.5)_1.4px,transparent_1.6px)] [background-size:10px_10px] [mask-image:linear-gradient(to_bottom,#000,transparent)] [-webkit-mask-image:linear-gradient(to_bottom,#000,transparent)]" />
+      <div className="relative z-10">
+        <p className="text-primary dark:text-primary font-bold uppercase tracking-wide text-sm md:text-base mb-4">
+          ( Session )
         </p>
-      </div>
-      <div className="w-full flex items-start flex-col">
-        <div className="pt-4 md:pt-6">
+        <h1 className="font-display text-black dark:text-black text-4xl md:text-6xl leading-tight">
+          {session.title}
+        </h1>
+        <div className="flex flex-wrap items-center gap-x-2 gap-y-1 mt-4 text-black/80 dark:text-black/80 text-sm md:text-base font-medium">
+          <span>#{session.is_keynote ? 'Keynote' : session.session_level}</span>
+          {session.session_format && (
+            <>
+              <span>·</span>
+              <span>{session.session_format}</span>
+            </>
+          )}
+          <span>·</span>
+          <span>
+            {hour(session.start_date_time)} - {hour(session.end_date_time)}
+          </span>
+          {session.rooms?.length > 0 && (
+            <>
+              <span>·</span>
+              <span>
+                {session.rooms.map((room, i) => (
+                  <span key={room.id}>
+                    {room.title}
+                    {i + 1 < session.rooms.length ? ', ' : ''}
+                  </span>
+                ))}
+              </span>
+            </>
+          )}
+        </div>
+        <div className="flex flex-col md:flex-row gap-6 mt-6">
           {session.session_image && (
             <img
-              className="rounded-lg h-auto w-full"
+              className="rounded-2xl w-full md:w-64 md:flex-none self-start"
               src={session.session_image}
               alt="session"
             />
           )}
-        </div>
-        <h4 className="text-accent text-sm dark:text-accent-dark mt-4">
-          <span className="black">Category:</span> {session.session_category}{' '}
-          <span className="black">|</span>{' '}
-          <span className="black">Format:</span> {session.session_format}
-        </h4>
-        {/* <h4 className="text-accent text-sm dark:text-accent-dark mt-2">
-          <span className="black">Format:</span> {session.session_format}
-        </h4> */}
-        <h4 className="text-light text-sm dark:text-lighter-dark mt-2">
-          {' '}
-          {hour(session.start_date_time)} - {hour(session.end_date_time)}{' '}
-          |&nbsp;
-          {session.rooms.map((room, i) => (
-            <span key={room.id}>
-              {room.title} {i + 1 < session.rooms.length ? ',' : ''}
-            </span>
-          ))}
-        </h4>
-        <p className=" text-xl md:text-2xl mt-1 font-bold">{session.title}</p>
-        <h6 className="text-primary dark:text-white-dark font-bold mt-4 md:mt-10 w-full">
-          Session Description:
-        </h6>
-        <p className="p gray mt-2 break-words">{session.description}</p>
-
-        <div className="w-full justify-center md:justify-start flex flex-col mt-4 md:mt-10 mb-4 lg:mb-16">
-          <StarIcon isStar={false} session={session} />
+          <p className="flex-1 text-black dark:text-black leading-relaxed whitespace-pre-line break-words">
+            {session.description}
+          </p>
         </div>
       </div>
-      {/* <SessionDetailSkeleton /> */}
     </div>
   )
 }