Speaker Individual Page

src/app/speakers/[id]/page.tsx

@@ -52,7 +52,8 @@ export default async function Page({ params }: Props) {
     );
   }
 
-  const mainSession: any | undefined = speaker.sessions?.[0];
+  const mainSession = speaker.sessions?.[0];
+  const sessionTitle = mainSession?.name;
   const formattedDate = mainSession?.date
     ? `${getEventMonth(mainSession.date, false)} ${getEventDay(mainSession.date)}`
     : undefined;
@@ -61,103 +62,187 @@ export default async function Page({ params }: Props) {
         onlyHours: true,
       })
     : undefined;
+  const sessionPlace = mainSession?.place || "Main Stage";
+
+  const SpeakerPhoto = ({ className = "" }: { className?: string }) => (
+    <div className={`relative flex justify-center ${className}`}>
+      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 md:-translate-x-[60%] -translate-y-1/2 w-[340px] h-[340px] md:w-[380px] md:h-[380px] bg-sinfo-quinary rounded-full overflow-hidden shadow-2xl">
+        <ImageWithFallback
+          src={speaker.img}
+          alt={speaker.name}
+          className="absolute inset-0 w-full h-full object-contain"
+          sizes="(max-width: 768px) 100vw, 50vw"
+          width={380}
+          height={380}
+        />
+      </div>
+    </div>
+  );
+
+  const SessionInfo = ({ className = "" }: { className?: string }) => (
+    mainSession ? (
+      <div className={`text-white ${className}`}>
+        <p className="font-bold text-xl md:text-2xl">{sessionPlace}</p>
+        <p className="text-lg md:text-xl">
+          {formattedDate || "February 17"} • {timeRange || "16h30-17h20"}
+        </p>
+      </div>
+    ) : null
+  );
+
+  const SessionTitleBox = ({ className = "" }: { className?: string }) => (
+    sessionTitle ? (
+      <div className={`bg-sinfo-primary border-4 border-white rounded-lg p-6 shadow-xl w-fit ${className}`}>
+        <p className="text-sinfo-quinary font-black uppercase text-2xl md:text-3xl leading-tight">
+          {sessionTitle}
+        </p>
+      </div>
+    ) : null
+  );
 
   return (
-    <main className="w-full">
-      <section className="bg-sinfo-primary text-white">
-        <div className="max-w-6xl mx-auto px-6 md:px-10 py-8 md:py-12">
-          {/* Header */}
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
-            <div className="md:col-span-2">
-              <h1 className="text-5xl md:text-7xl lg:text-8xl font-extrabold uppercase leading-[0.9] tracking-tighter">
+    <main className="w-full min-h-screen bg-sinfo-primary relative overflow-hidden">
+      {/* Decorative circles */}
+      <div className="absolute left-0 bottom-0 w-28 h-28 md:w-40 md:h-40 bg-sinfo-tertiary rounded-tr-full z-10" />
+      <div className="absolute right-0 bottom-0 w-28 h-28 md:w-40 md:h-40 bg-sinfo-secondary rounded-tl-full z-10" />
+
+      {/* Glowing line separator - positioned where circles end */}
+      <div className="absolute bottom-0 md:bottom-0 left-0 right-0 z-[5]">
+        <div className="w-full h-[3px] bg-gradient-to-r from-transparent via-white/50 to-transparent animate-pulse shadow-[0_0_10px_rgba(255,255,255,0.5)]" />
+      </div>
+
+      <div className="relative max-w-7xl mx-auto px-6 md:px-10 py-12 md:py-16">
+        {/* Top decorative elements - only visible on desktop */}
+        <div className="hidden md:block absolute top-4 right-8 md:top-6 md:right-16 z-20">
+          <ImageWithFallback
+            src="/images/decorative-images/star.png"
+            alt="Decorative star"
+            width={120}
+            height={120}
+            className="w-24 h-24 md:w-28 md:h-28"
+          />
+        </div>
+
+        {/* Main grid */}
+        <div className="flex flex-col md:grid md:grid-cols-2 gap-8 md:gap-12 md:items-start">
+          {/* Mobile layout - custom order */}
+          <div className="md:hidden space-y-8 relative">
+            {/* 1. Name and title */}
+            <div>
+              <h1 className="text-6xl font-black uppercase leading-[0.85] tracking-tight text-white">
                 {speaker.name}
               </h1>
               {(speaker.title || speaker.company?.name) && (
-                <p className="mt-4 text-sinfo-tertiary text-lg md:text-xl font-semibold">
+                <p className="mt-4 text-sinfo-tertiary text-xl font-bold">
                   {speaker.title}
-                  {speaker.company?.name ? ` @${speaker.company.name}` : ""}
                 </p>
               )}
             </div>
 
-            <div className="relative flex items-start justify-center md:justify-end">
-              {/* yellow pod with portrait */}
-              <div className="relative w-56 h-56 md:w-64 md:h-64 bg-sinfo-quinary rounded-[56px] rounded-tl-[120px] overflow-hidden shadow-lg">
+            {/* Star decoration after title, before photo */}
+            <div className="flex justify-end -mb-14">
+              <ImageWithFallback
+                src="/images/decorative-images/star.png"
+                alt="Decorative star"
+                width={80}
+                height={80}
+                className="w-24 h-24"
+              />
+            </div>
+
+            {/* 2. Photo with decorative elements */}
+            <div className="space-y-8 relative -mt-14">
+              {/* Speaker photo with yellow background */}
+              <SpeakerPhoto className="h-80" />
+
+              {/* Small decorative box */}
+              <div className="max-w-[180px] -mt-9">
                 <ImageWithFallback
-                  src={speaker.img}
-                  alt={speaker.name}
-                  className="absolute inset-0 w-full h-full object-cover"
-                  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
-                  width={250}
-                  height={250}
+                  src="/images/decorative-images/redElement.png"
+                  alt="Decorative element"
+                  width={140}
+                  height={140}
+                  className="w-28 h-28"
                 />
               </div>
             </div>
-          </div>
 
-          {/* Content row */}
-          <div className="mt-8 md:mt-10 grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8 items-start">
-            {/* big text block */}
-            <div className="md:col-span-2 bg-white rounded-lg p-4 md:p-6">
-              <div className="bg-gray-200 rounded-md p-6 md:p-10 text-black min-h-[260px] flex items-center">
-                <p className="text-base md:text-lg leading-relaxed whitespace-pre-line">
-                  {speaker.description}
-                </p>
-              </div>
+            {/* 3. Description box */}
+            <div className="bg-sinfo-light rounded-lg p-8 text-black flex items-center relative">
+              <p className="text-base font-bold leading-relaxed whitespace-pre-line">
+                {speaker.description || "Texto texto bla bla"}
+              </p>
             </div>
 
-            {/* right decorations and talk title */}
-            <div className="relative">
-              {/* plus icon */}
-              <div className="hidden md:block absolute right-4 top-24 w-10 h-10">
-                <span className="absolute left-1/2 top-0 bottom-0 w-[2px] bg-gray-400 -translate-x-1/2" />
-                <span className="absolute top-1/2 left-0 right-0 h-[2px] bg-gray-400 -translate-y-1/2" />
-              </div>
+            {/* 4. Session title box */}
+            <SessionTitleBox />
+
+            {/* 5. Session info */}
+            <SessionInfo />
+          </div>
 
-              {/* talk title */}
-              {(mainSession?.name || mainSession?.title) && (
-                <div className="mt-6 md:mt-24">
-                  <div className="bg-white rounded-lg p-4">
-                    <p className="text-sinfo-quinary font-extrabold uppercase text-xl leading-snug">
-                      {(mainSession.name || mainSession.title) as string}
-                    </p>
-                  </div>
-                </div>
+          {/* Desktop layout - original two columns */}
+          <div className="hidden md:block space-y-8">
+            {/* Name */}
+            <div>
+              <h1 className="text-7xl lg:text-8xl font-black uppercase leading-[0.85] tracking-tight text-white">
+                {speaker.name}
+              </h1>
+              {(speaker.title || speaker.company?.name) && (
+                <p className="mt-4 text-sinfo-tertiary text-2xl font-bold">
+                  {speaker.title}
+                </p>
               )}
             </div>
+
+            {/* Description box with light background */}
+            <div className="bg-sinfo-light rounded-lg p-10 text-black flex items-center">
+              <p className="text-lg font-bold leading-relaxed whitespace-pre-line">
+                {speaker.description || "Texto texto bla bla"}
+              </p>
+            </div>
+
+            {/* Session info */}
+            <SessionInfo />
           </div>
 
-          {/* Bottom band with session info */}
-          {(mainSession || true) && (
-            <div className="mt-8 md:mt-10">
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8 items-end">
-                <div className="md:col-span-2">
-                  <div className="text-sm md:text-base">
-                    {mainSession?.place && (
-                      <p className="font-bold">{mainSession.place}</p>
-                    )}
-                    {mainSession?.date && (
-                      <p>
-                        {formattedDate} • {timeRange}
-                      </p>
-                    )}
-                  </div>
-                </div>
-
-                {/* CTA */}
-                <div className="flex justify-center md:justify-end">
-                  <Link
-                    href="/speakers"
-                    className="bg-sinfo-senary text-white font-bold py-3 md:py-4 px-8 md:px-12 rounded-full text-lg md:text-xl uppercase shadow-lg hover:opacity-90 transition"
-                  >
-                    See all speakers
-                  </Link>
-                </div>
-              </div>
+          {/* Desktop right column - Photo and session title */}
+          <div className="hidden md:block space-y-8 relative">
+            {/* Speaker photo with yellow background */}
+            <SpeakerPhoto className="h-[340px]" />
+
+            {/* Decorative plus */}
+            <div className="absolute right-8 top-1/2 w-20 h-20">
+              <span className="absolute left-1/2 top-0 bottom-0 w-[4px] bg-white -translate-x-1/2" />
+              <span className="absolute top-1/2 left-0 right-0 h-[4px] bg-white -translate-y-1/2" />
+            </div>
+
+            {/* Small decorative box */}
+            <div className="max-w-[180px] -mt-9">
+              <ImageWithFallback
+                src="/images/decorative-images/redElement.png"
+                alt="Decorative element"
+                width={140}
+                height={140}
+                className="w-32 h-32"
+              />
             </div>
-          )}
+
+            {/* Session title box */}
+            <SessionTitleBox />
+          </div>
         </div>
-      </section>
+
+        {/* Bottom CTA button */}
+        <div className="mt-12 md:mt-16 flex justify-center relative z-10">
+          <Link
+            href="/speakers"
+            className="bg-sinfo-senary text-sinfo-primary font-black py-5 px-16 md:py-6 md:px-20 rounded-full text-xl md:text-2xl uppercase shadow-2xl hover:opacity-90 transition-opacity"
+          >
+            SEE ALL SPEAKERS
+          </Link>
+        </div>
+      </div>
     </main>
   );
-}
+}