featured speakers fix

efdevcon · Sep 25, 2024 · 9f7dff7 · 9f7dff7
1 parent 33131bf
commit 9f7dff7
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 80 deletions.
diff --git a/devcon/src/components/domain/index/featured-speakers-dc7/index.tsx b/devcon/src/components/domain/index/featured-speakers-dc7/index.tsx
@@ -230,31 +230,33 @@ const Contributor = React.memo(
 
     return (
       <Popover open={isHovered}>
-        <PopoverTrigger onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
-          <div className="inline-block mx-4 hover:scale-105 transition-all duration-300 cursor-pointer py-2 pt-3 group">
-            <div className="flex flex-col items-center text-center">
-              <div className="relative">
-                <Image
-                  src={contributor.avatarUrl}
-                  alt={contributor.name}
-                  width={80}
-                  height={80}
-                  className="rounded-full w-20 h-20 mb-2 object-cover"
-                />
-                <Image
-                  src={randomButterfly}
-                  alt="Butterfly"
-                  width={40}
-                  height={40}
-                  className={`absolute -top-2 ${getButterflyPosition(
-                    randomButterfly
-                  )} opacity-0 group-hover:opacity-100 transition-opacity duration-300`}
-                />
-              </div>
-              <p className="text-[#706ABD] text-lg font-semibold">{contributor.name}</p>
-              <div className="h-10">
-                <p className="text-[#706ABD] text-sm mt-1">{truncateText(contributor.role, 30)}</p>
-              </div>
+        <PopoverTrigger
+          onMouseEnter={() => setIsHovered(true)}
+          onMouseLeave={() => setIsHovered(false)}
+          className="mx-4 group cursor-pointer py-2 pt-3 outline-none border-none"
+        >
+          <div className="flex flex-col items-center text-center">
+            <div className="relative">
+              <Image
+                src={contributor.avatarUrl}
+                alt={contributor.name}
+                width={80}
+                height={80}
+                className="rounded-full w-20 h-20 mb-2 object-cover"
+              />
+              <Image
+                src={randomButterfly}
+                alt="Butterfly"
+                width={40}
+                height={40}
+                className={`absolute -top-2 ${getButterflyPosition(
+                  randomButterfly
+                )} opacity-0 group-hover:opacity-100 transition-opacity duration-300`}
+              />
+            </div>
+            <p className="text-[#706ABD] text-lg font-semibold">{contributor.name}</p>
+            <div className="">
+              <p className="text-[#706ABD] text-sm">{truncateText(contributor.role, 25)}</p>
             </div>
           </div>
         </PopoverTrigger>
@@ -327,7 +329,7 @@ const FeaturedSpeakers = () => {
   const secondHalf = contributors.slice(half)
 
   return (
-    <div className="mt-8">
+    <div className="mt-8 mb-4">
       <h2 className="font-secondary mb-6">Featured Speakers</h2>
       <HighlightedSpeakers />
       <div className="flex flex-col mt-8">

diff --git a/devcon/src/pages/index.tsx b/devcon/src/pages/index.tsx
@@ -5,17 +5,17 @@ import { pageHOC } from 'context/pageHOC'
 import { GetBlogs } from 'services/blogs'
 import { DEFAULT_APP_PAGE } from 'utils/constants'
 import { getGlobalData } from 'services/global'
-import { News } from 'components/domain/news'
+// import { News } from 'components/domain/news'
 import getNews from 'services/news'
 import { Header } from 'components/common/layouts/header'
 import { Footer } from 'components/common/layouts/footer'
 import { Hero } from 'components/domain/index/hero'
 import css from './index.module.scss'
 import TrackList from 'components/domain/index/track-list'
-import About from 'components/domain/index/about'
+// import About from 'components/domain/index/about'
 // import FeaturedSpeakers from 'components/domain/index/featured-speakers'
-import CallsToAction from 'components/domain/index/ctas'
-import Image from 'next/legacy/image'
+// import CallsToAction from 'components/domain/index/ctas'
+// import Image from 'next/legacy/image'
 import themes from './themes.module.scss'
 import ImageNew from 'next/image'
 import CircleBackground from 'assets/images/background-circles.png'
@@ -25,8 +25,8 @@ import { GetContentSections } from 'services/page'
 import { useTina } from 'tinacms/dist/react'
 import { client } from '../../tina/__generated__/client'
 import { PagesQuery, PagesIndex, PagesFaq_General, PagesProgramming } from '../../tina/__generated__/types'
-import TitleDevcon from 'assets/images/devcon-title.svg'
-import LogoFlowers from 'assets/images/dc-7/logo-flowers.png'
+// import TitleDevcon from 'assets/images/devcon-title.svg'
+// import LogoFlowers from 'assets/images/dc-7/logo-flowers.png'
 import InfiniteScroller from 'lib/components/infinite-scroll'
 import StatsAnimation from 'components/domain/index/hero/stats-anim'
 import RTDGrants from 'assets/images/dc-7/rtd-grants.png'
@@ -44,7 +44,7 @@ import CalendarExport from 'lib/assets/images/modal-export.png'
 import moment from 'moment'
 import ChevronDown from 'assets/icons/chevron-down.svg'
 import ChevronUp from 'assets/icons/chevron-up.svg'
-import DC7OverlayRight from './images/dc-7/overlay-right-dc7.png'
+// import DC7OverlayRight from './images/dc-7/overlay-right-dc7.png'
 import Petals from 'assets/icons/petals.svg'
 import SwipeToScroll from 'components/common/swipe-to-scroll'
 import { useDraggableLink } from 'components/domain/devcon-week/schedule'

diff --git a/devcon/src/pages/programming.tsx b/devcon/src/pages/programming.tsx
@@ -21,7 +21,7 @@ import { Link } from 'components/common/link'
 import { Button } from 'lib/components/button'
 import ChevronDown from 'assets/icons/chevron-down.svg'
 import ChevronUp from 'assets/icons/chevron-up.svg'
-
+import FeaturedSpeakers from 'components/domain/index/featured-speakers-dc7'
 import CoreProtocol from 'assets/images/programming/CoreProtocol.png'
 import Cypherpunk from 'assets/images/programming/Cypherpunk.png'
 import Usability from 'assets/images/programming/Usability.png'
@@ -39,52 +39,53 @@ export default pageHOC(function Programming(props: any) {
   const faq = pages.faq
   const [openFAQ, setOpenFAQ] = React.useState<string | null>(null)
 
-  const formattedTracks = (() => {
-    const tracks = pages.track_descriptions
-
-    return tracks?.map((track: any) => {
-      let trackLogo = CoreProtocol
-
-      if (track.id === 'core-protocol') {
-        trackLogo = CoreProtocol
-      }
-      if (track.id === 'cypherpunk') {
-        trackLogo = Cypherpunk
-      }
-      if (track.id === 'usability') {
-        trackLogo = Usability
-      }
-      if (track.id === 'real-world-ethereum') {
-        trackLogo = RealWorldEthereum
-      }
-      if (track.id === 'applied-cryptography') {
-        trackLogo = AppliedCryptography
-      }
-      if (track.id === 'crypto-economics') {
-        trackLogo = CryptoEconomics
-      }
-      if (track.id === 'coordination') {
-        trackLogo = Coordination
-      }
-      if (track.id === 'developer-experience') {
-        trackLogo = DeveloperExperience
-      }
-      if (track.id === 'security') {
-        trackLogo = Security
-      }
-      if (track.id === 'layer-2s') {
-        trackLogo = Layer2
-      }
-
-      return {
-        id: track.id,
-        title: track.name,
-        body: track.description,
-        tags: track.tags,
-        logo: trackLogo,
-      }
-    })
-  })() || []
+  const formattedTracks =
+    (() => {
+      const tracks = pages.track_descriptions
+
+      return tracks?.map((track: any) => {
+        let trackLogo = CoreProtocol
+
+        if (track.id === 'core-protocol') {
+          trackLogo = CoreProtocol
+        }
+        if (track.id === 'cypherpunk') {
+          trackLogo = Cypherpunk
+        }
+        if (track.id === 'usability') {
+          trackLogo = Usability
+        }
+        if (track.id === 'real-world-ethereum') {
+          trackLogo = RealWorldEthereum
+        }
+        if (track.id === 'applied-cryptography') {
+          trackLogo = AppliedCryptography
+        }
+        if (track.id === 'crypto-economics') {
+          trackLogo = CryptoEconomics
+        }
+        if (track.id === 'coordination') {
+          trackLogo = Coordination
+        }
+        if (track.id === 'developer-experience') {
+          trackLogo = DeveloperExperience
+        }
+        if (track.id === 'security') {
+          trackLogo = Security
+        }
+        if (track.id === 'layer-2s') {
+          trackLogo = Layer2
+        }
+
+        return {
+          id: track.id,
+          title: track.name,
+          body: track.description,
+          tags: track.tags,
+          logo: trackLogo,
+        }
+      })
+    })() || []
 
   return (
     <Page theme={themes['purple']}>
@@ -150,6 +151,10 @@ export default pageHOC(function Programming(props: any) {
         <div className="pb-4"></div>
       </div>
 
+      <div className="section">
+        <FeaturedSpeakers />
+      </div>
+
       <div className="section mt-8" id="rfp">
         <div className={cn('flex flex-col justify-between gap-4 pb-8 pt-8 border-top border-bottom relative')}>
           <div className={`${indexCss['scrolling-text-background']} ${indexCss['alternate']} ${css['fade-color']}`}>