Transform testimonials into recorded meetups

app/(default)/page.tsx

@@ -7,15 +7,15 @@ import Hero from '@/components/hero'
 import Values from '@/components/values'
 import Newsletter from '@/components/newsletter'
 import About from '@/components/about'
-import Testimonials from '@/components/testimonials'
+import Meetups from '@/components/meetups'
 
 export default function Home() {
   return (
     <>
       <Hero />
       <About />
       <Values />
-      <Testimonials />
+      <Meetups />
       <Newsletter />
     </>
   )

components/meetups.tsx

@@ -0,0 +1,29 @@
+import YoutubeVideo from './youtube-video'
+import videos from './videos'
+
+export default function Meetups() {
+  return (
+    <section>
+      <div className="max-w-6xl mx-auto px-4 sm:px-6">
+        <div className="py-12 md:py-20 border-t border-gray-800">
+          {/* Section header */}
+          <div className="max-w-2xl mx-auto text-center pb-12 md:pb-20">
+            <h2 className="h2 mb-4">Encontros passados</h2>
+          </div>
+
+          {/* Testimonials */}
+          <div className="max-w-sm mx-auto grid gap-4 lg:grid-cols-2 items-start lg:max-w-none">
+            {/* 1st testimonial */}
+            {videos.map((video, index) => (
+              <div data-aos="fade-down" key={index}>
+                <div className="relative inline-flex flex-col">
+                  <YoutubeVideo title={video.title} videoId={video.videoId} />
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

components/videos.tsx

@@ -0,0 +1,38 @@
+export default [
+  {
+    title: 'Meetup #10 - Desafios e aprendizados na construção de interfaces na Web3 - Lauro Gripa',
+    videoId: 'n-VPKiILTN0'
+  },
+  {
+    title: 'Meetup #09 - Programação em Bitcoin - Lohann Ferreira',
+    videoId: '0LSd8g8S06c'
+  },
+  {
+    title: 'Meetup #08 - ZKP & Starlight',
+    videoId: '8oU6jLs4mFk'
+  },
+  {
+    title: 'Meetup #06 - Yul & Solidity compiler - Matheus Aguiar (Solidity core team)',
+    videoId: 'IaQhOyxLu9I'
+  },
+  {
+    title: 'Meetup #05 - MEV - Leonardo Papais',
+    videoId: 'zaP4Wd0KI98'
+  },
+  {
+    title: 'Meetup #04 - Foundry (Fabio Hildebrand)',
+    videoId: 'khduvkkLwrA'
+  },
+  {
+    title: 'Meetup #02 - Ethereum Nodes - Everton Fraga',
+    videoId: 'Lq-nqqxTlkQ'
+  },
+  {
+    title: 'Meetup #01 - Account Abstraction - Pt 2 (Antônio)',
+    videoId: '1NKiqAj5HI4'
+  },
+  {
+    title: 'Meetup #01 - Account Abstraction - Pt1(Picnic)',
+    videoId: 'EyaUUjixFzY'
+  }
+]

components/youtube-video.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+
+const isBrowser = () => typeof window !== 'undefined'
+
+let aspectRatio = 16 / 9
+let defaultWidth = 1152
+let maxWidth = 480
+let viewportWidth = isBrowser() ? window.innerWidth : defaultWidth
+let frameWidth = viewportWidth < maxWidth ? viewportWidth * 0.9 : maxWidth
+let frameHeight = frameWidth / aspectRatio
+
+const YouTubeVideo = ({ videoId, title }: { videoId: string; title: string }) => (
+  <div style={{ display: 'flex', padding: '20px', float: 'left' }}>
+    <iframe
+      width={frameWidth}
+      height={frameHeight}
+      src={`https://www.youtube.com/embed/${videoId}`}
+      title={title}
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+      allowFullScreen
+    ></iframe>
+  </div>
+)
+
+export default YouTubeVideo