Devcon 7 - Design updates

app/[lang]/devcon-7/page.tsx

@@ -1,17 +1,19 @@
-import React from "react"
-import { Metadata } from "next"
+import React from 'react'
+import { Metadata } from 'next'
 
-import { Devcon7Booths } from "./sections/Devcon7Booths"
-import { Devcon7Header } from "./sections/Devcon7Header"
-import { Devcon7Section } from "./sections/Devcon7Section"
+import { Devcon7Booths } from './sections/Devcon7Booths'
+import { Devcon7Header } from './sections/Devcon7Header'
+import { Devcon7Section } from './sections/Devcon7Section'
+
+import { Devcon7Slider } from './sections/Devcon7Slider'
 
 export const metadata: Metadata = {
-  title: "Devon 7",
-  description: "PSE x Devcon 7 Southeast Asia",
+  title: 'Devon 7',
+  description: 'PSE x Devcon 7 Southeast Asia',
   openGraph: {
     images: [
       {
-        url: "/devcon-7-cover.png",
+        url: '/devcon-7-cover.png',
         width: 1200,
         height: 630,
       },
@@ -23,9 +25,12 @@ export default async function DevconPage() {
   return (
     <>
       <div className="flex flex-col lg:pb-[120px]">
-        <Devcon7Header />
+        <div className="flex flex-col">
+          <Devcon7Header />
+          <Devcon7Slider />
+        </div>
+
         <div className="flex flex-col gap-10 lg:gap-14 pt-8 lg:pt-[60px] mx-auto max-w-[950px]">
-          <Devcon7Booths />
           <Devcon7Section />
         </div>
       </div>

app/[lang]/devcon-7/sections/Devcon7Header.tsx

@@ -1,8 +1,8 @@
-import Image from "next/image"
+import Image from 'next/image'
 
 export const Devcon7Header = () => {
   return (
-    <div className="relative h-[180px] lg:h-[300px]">
+    <div className="relative h-[135px] lg:h-[135px]">
       <Image
         src="/images/devcon-7-mobile.svg"
         alt="Devcon 7 Banner"

app/[lang]/devcon-7/sections/Devcon7Section.tsx

@@ -1,27 +1,36 @@
-"use client"
+'use client'
 
-import { useState } from "react"
-import Link from "next/link"
-import { events } from "@/data/events/devcon-7"
-import { cva } from "class-variance-authority"
+import { useEffect, useState } from 'react'
+import Link from 'next/link'
+import { events } from '@/data/events/devcon-7'
+import { cva } from 'class-variance-authority'
+import { Button } from '@/components/ui/button'
+import { useTranslation } from '@/app/i18n/client'
 
-import { cn } from "@/lib/utils"
-import { Icons } from "@/components/icons"
+import { cn } from '@/lib/utils'
+import { Icons } from '@/components/icons'
 
-const tableSection = cva("lg:grid lg:grid-cols-[200px_1fr_160px_20px] lg:gap-8")
+const tableSection = cva('lg:grid lg:grid-cols-[200px_1fr_160px_20px] lg:gap-8')
 const tableSectionTitle = cva(
-  "text-anakiwa-500 text-base lg:text-xs font-sans leading-5 tracking-[2.5px] uppercase font-bold lg:pb-3"
+  'text-anakiwa-500 text-base lg:text-xs font-sans leading-5 tracking-[2.5px] uppercase font-bold lg:pb-3'
 )
 
-const EventCard = ({ event = {}, speakers = [], location = "" }: any) => {
+const EventCard = ({ event = {}, speakers = [], location = '' }: any) => {
   const [isOpen, setIsOpen] = useState(false)
 
+  const getYouTubeEmbedURL = (url: string) => {
+    const match = url.match(
+      /(?:youtube\.com\/(?:watch\?v=|live\/)|youtu\.be\/)([^?&]+)/
+    )
+    return match ? `https://www.youtube.com/embed/${match[1]}` : null
+  }
+
   return (
     <div
       className={cn(
-        "flex flex-col gap-3",
+        'flex flex-col gap-3',
         tableSection(),
-        "py-4 px-6 lg:p-0 lg:pt-[30px] lg:pb-5 border-b border-b-tuatara-200"
+        'py-4 px-6 lg:p-0 lg:pt-[30px] lg:pb-5 border-b border-b-tuatara-200'
       )}
     >
       <div className="flex flex-col gap-1 order-3 lg:order-1">
@@ -42,88 +51,117 @@ const EventCard = ({ event = {}, speakers = [], location = "" }: any) => {
                 {location}
               </span>
             </div>
+            <div className="flex flex-wrap lg:flex-col gap-1 pt-1">
+              {speakers?.map((speaker: any, index: number) => {
+                return (
+                  <Link
+                    key={index}
+                    className="text-sm text-anakiwa-500 underline break-all"
+                    href={speaker.url ?? '#'}
+                  >
+                    {speaker.label}
+                  </Link>
+                )
+              })}
+            </div>
           </div>
         </div>
       </div>
-      <div className="flex flex-col gap-[10px] lg:order-2 order-2">
-        <Link
-          href={event?.url ?? "#"}
-          target="_blank"
-          className="text-[22px] leading-[24px] text-tuatara-950 underline font-display hover:text-anakiwa-500 font-bold duration-200"
-        >
-          {event?.title}
-        </Link>
+      <div className="flex flex-col justify-start gap-[10px] lg:order-2 order-2">
+        <div className="flex items-center justify-between">
+          <Link
+            href={event?.url ?? '#'}
+            target="_blank"
+            className="text-[22px] inline-flex leading-[24px] text-tuatara-950 underline font-display hover:text-anakiwa-500 font-bold duration-200"
+          >
+            {event?.title}
+          </Link>
+          <button
+            className="lg:hidden flex"
+            onClick={() => {
+              setIsOpen(!isOpen)
+            }}
+          >
+            {isOpen ? (
+              <Icons.minus
+                className={cn(
+                  'size-5 ml-auto',
+                  'transition-transform duration-200'
+                )}
+              />
+            ) : (
+              <Icons.plus
+                className={cn(
+                  'size-5 ml-auto',
+                  'transition-transform duration-200'
+                )}
+              />
+            )}
+          </button>
+        </div>
         <div
           className={cn(
-            "lg:max-h-none lg:opacity-100 lg:block",
-            "transition-all duration-300 overflow-hidden",
-            isOpen ? "max-h-[1000px] opacity-100" : "max-h-0 opacity-0",
-            "lg:transition-none lg:overflow-visible"
+            'lg:max-h-none lg:opacity-100 lg:block',
+            'transition-all duration-300 overflow-hidden',
+            isOpen ? 'max-h-[1000px] opacity-100' : 'max-h-0 opacity-0',
+            'lg:transition-none lg:overflow-visible'
           )}
         >
           <span className="text-base leading-6 text-tuatara-950 font-sans font-normal">
             {event?.description}
           </span>
+          <div className="pt-2 flex lg:!hidden">
+            {event?.youtubeLink && (
+              <iframe
+                width="100%"
+                height="230"
+                src={getYouTubeEmbedURL(event?.youtubeLink) ?? ''}
+                allowFullScreen
+                style={{ borderRadius: '10px', overflow: 'hidden' }}
+              />
+            )}
+          </div>
         </div>
       </div>
 
-      <div className="lg:order-3 order-1 grid gap-5 pb-3 lg:pb-0 grid-cols-[1fr_32px] lg:grid-cols-1">
-        <div className="flex flex-wrap lg:flex-col gap-1">
-          {speakers?.map((speaker: any, index: number) => {
-            return (
-              <Link
-                key={index}
-                className="text-sm text-anakiwa-500 underline break-all"
-                href={speaker.url ?? "#"}
-              >
-                {speaker.label}
-              </Link>
-            )
-          })}
-        </div>
-        <button
-          className="lg:hidden flex"
-          onClick={() => {
-            setIsOpen(!isOpen)
-          }}
-        >
-          {isOpen ? (
-            <Icons.minus
-              className={cn(
-                "size-5 ml-auto",
-                "transition-transform duration-200"
-              )}
-            />
-          ) : (
-            <Icons.plus
-              className={cn(
-                "size-5 ml-auto",
-                "transition-transform duration-200"
-              )}
+      <div className="relative lg:order-3 grid gap-5 pb-3 lg:pb-0 grid-cols-[1fr_32px] lg:grid-cols-1">
+        <div className="hidden lg:flex flex-wrap lg:flex-col gap-1">
+          {event?.youtubeLink && (
+            <iframe
+              width="240"
+              height="140"
+              src={getYouTubeEmbedURL(event?.youtubeLink) ?? ''}
+              allowFullScreen
+              style={{ borderRadius: '10px', overflow: 'hidden' }}
             />
           )}
-        </button>
+        </div>
       </div>
 
       <div className="order-4 lg:flex hidden"></div>
     </div>
   )
 }
 
-export const Devcon7Section = () => {
+export const Devcon7Section = ({ lang }: any) => {
+  const { t } = useTranslation(lang, 'devcon-7')
+
   return (
     <div className="flex flex-col gap-10 relative">
-      <div className="flex flex-col lg:container">
+      <div className="flex flex-col gap-3 lg:gap-10 lg:container">
         <div
-          className={cn(tableSection(), "lg:border-b lg:border-anakiwa-200")}
+          className={cn(
+            tableSection(),
+            '!hidden lg:border-b lg:border-anakiwa-200'
+          )}
         >
-          <div className={cn(tableSectionTitle(), "lg:flex hidden")}>
+          <div className={cn(tableSectionTitle(), 'lg:flex hidden')}>
             Details
           </div>
-          <div className={cn(tableSectionTitle(), "lg:text-left text-center")}>
+          <div className={cn(tableSectionTitle(), 'lg:text-left text-center')}>
             Talks
           </div>
-          <div className={cn(tableSectionTitle(), "lg:flex hidden")}>
+          <div className={cn(tableSectionTitle(), 'lg:flex hidden')}>
             Speakers
           </div>
           <div className="lg:flex hidden"></div>

app/[lang]/devcon-7/sections/Devcon7Slider.tsx

@@ -0,0 +1,88 @@
+'use client'
+
+import React, { useEffect, useState } from 'react'
+import Slider from 'react-slick'
+
+import 'slick-carousel/slick/slick.css'
+import 'slick-carousel/slick/slick-theme.css'
+import Image from 'next/image'
+
+const AnySlider = Slider as any
+
+export const Devcon7Slider = () => {
+  const settings = {
+    dots: true,
+    infinite: true,
+    speed: 500,
+    slidesToShow: 4.2,
+    slidesToScroll: 1,
+    autoplay: true,
+    responsive: [
+      {
+        breakpoint: 1400,
+        settings: {
+          slidesToShow: 5.4,
+          slidesToScroll: 1,
+          infinite: true,
+          dots: true,
+        },
+      },
+      {
+        breakpoint: 1024,
+        settings: {
+          slidesToShow: 4.2,
+          slidesToScroll: 1,
+          infinite: true,
+          dots: true,
+        },
+      },
+      {
+        breakpoint: 600,
+        settings: {
+          slidesToShow: 1,
+          slidesToScroll: 1,
+          initialSlide: 1,
+        },
+      },
+    ],
+    appendDots: (dots: React.ReactNode) => (
+      <div
+        style={{
+          borderRadius: '10px',
+          padding: '10px',
+        }}
+      >
+        <ul style={{ margin: '0px' }}> {dots} </ul>
+      </div>
+    ),
+    customPaging: (i: number) => <div className="h-4 w-4 rounded-full  mt-5" />,
+  }
+
+  const images = [
+    '/images/devcon-7/devcon-7-overview-1.jpg',
+    '/images/devcon-7/devcon-7-overview-2.jpg',
+    '/images/devcon-7/devcon-7-overview-3.jpg',
+    '/images/devcon-7/devcon-7-overview-4.jpg',
+    '/images/devcon-7/devcon-7-overview-5.jpg',
+    '/images/devcon-7/devcon-7-overview-6.jpg',
+  ]
+
+  return (
+    <AnySlider {...settings}>
+      {images.map((image, index) => (
+        <div
+          key={index}
+          className="relative h-[320px] w-full bg-cover bg-center overflow-hidden"
+          style={{ backgroundImage: `url(${image})` }}
+        >
+          <Image
+            src={image}
+            alt={`Devcon 7 Overview ${index + 1}`}
+            fill
+            className="object-cover w-full"
+          />
+        </div>
+      ))}
+    </AnySlider>
+  )
+}

app/[lang]/page.tsx

@@ -105,8 +105,6 @@ export default function IndexPage({ params: { lang } }: any) {
 
         <WhatWeDo lang={lang} />
 
-        <ConnectWithUs lang={lang} />
-
         <Banner
           title={common('connectWithUs')}
           subtitle={common('connectWithUsDescription')}