From 5e0ca78287a42de6b9ca1352d825baf53ab78011 Mon Sep 17 00:00:00 2001
From: Satoshi S <73622805+Satoshi-Sh@users.noreply.github.com>
Date: Thu, 21 Dec 2023 03:02:59 -0600
Subject: [PATCH] feat: add founder section (#322)

---
 src/app/page.jsx                |  2 ++
 src/components/Founder.jsx      | 34 +++++++++++++++++++++++++
 src/components/Founders.jsx     | 45 +++++++++++++++++++++++++++++++++
 src/components/InfoSection.jsx  | 12 +++++++++
 src/components/YouTubeEmbed.jsx | 16 ++++++++++++
 5 files changed, 109 insertions(+)
 create mode 100644 src/components/Founder.jsx
 create mode 100644 src/components/Founders.jsx
 create mode 100644 src/components/InfoSection.jsx
 create mode 100644 src/components/YouTubeEmbed.jsx

diff --git a/src/app/page.jsx b/src/app/page.jsx
index ad98741..d1007f7 100644
--- a/src/app/page.jsx
+++ b/src/app/page.jsx
@@ -7,6 +7,7 @@ import { Moderators } from '@/components/Moderators'
 import { PrimaryFeatures } from '@/components/PrimaryFeatures'
 import { SecondaryFeatures } from '@/components/SecondaryFeatures'
 import { Testimonials } from '@/components/Testimonials'
+import { Founders } from '@/components/Founders'
 
 export default function Home() {
   return (
@@ -19,6 +20,7 @@ export default function Home() {
         <Newsletter />
         <Testimonials />
         <Moderators />
+        <Founders />
         <Faqs />
       </main>
       <Footer />
diff --git a/src/components/Founder.jsx b/src/components/Founder.jsx
new file mode 100644
index 0000000..346de46
--- /dev/null
+++ b/src/components/Founder.jsx
@@ -0,0 +1,34 @@
+import { YouTubeEmbed } from './YouTubeEmbed'
+import { InfoSectipn } from './InfoSection'
+
+export const Founder = ({
+  name,
+  title,
+  videoId,
+  description,
+  isReverse = false,
+}) => {
+  return (
+    <div>
+      {isReverse ? (
+        <div className="mt-10 flex  flex-col gap-10 pb-10 md:flex-row">
+          <InfoSectipn title={title} name={name} description={description} />
+          <YouTubeEmbed videoId={videoId} className="flex-grow-2" />
+        </div>
+      ) : (
+        <div className="mt-10  flex flex-col gap-10 md:flex-row">
+          <YouTubeEmbed
+            videoId={videoId}
+            className="flex-grow-2 order-2 md:order-1"
+          />
+          <InfoSectipn
+            title={title}
+            name={name}
+            description={description}
+            className="order-1 md:order-2"
+          />
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/src/components/Founders.jsx b/src/components/Founders.jsx
new file mode 100644
index 0000000..d1d6790
--- /dev/null
+++ b/src/components/Founders.jsx
@@ -0,0 +1,45 @@
+import { Container } from '@/components/Container'
+import { H2 } from '@/components/Headings'
+import { Founder } from './Founder'
+
+const founders = [
+  {
+    name: 'Eddie Jaoude',
+    title: 'Why EddieHub was founded',
+    videoId: 'RnH9udLsAKk',
+    description:
+      '"Collaboration First, Code Second quickly became what the community members live by"',
+  },
+  {
+    name: 'Sara Jaoude',
+    title: "Find out about EddieHub's aims",
+    videoId: 'eWetvRusfUU',
+    description: '"Open Source is our hobby, our passion - not just our job"',
+  },
+]
+
+export function Founders() {
+  return (
+    <section
+      id="founders"
+      aria-label="founders"
+      className="bg-primary-600 pb-16 pt-20 text-white"
+    >
+      <Container>
+        <div className="md:text-center">
+          <H2>EddieHub Founders</H2>
+          {founders.map((founder, id) => (
+            <Founder
+              key={id}
+              name={founder.name}
+              title={founder.title}
+              videoId={founder.videoId}
+              description={founder.description}
+              isReverse={id % 2 === 1}
+            />
+          ))}
+        </div>
+      </Container>
+    </section>
+  )
+}
diff --git a/src/components/InfoSection.jsx b/src/components/InfoSection.jsx
new file mode 100644
index 0000000..5ac3e79
--- /dev/null
+++ b/src/components/InfoSection.jsx
@@ -0,0 +1,12 @@
+import clsx from 'clsx'
+export const InfoSectipn = ({ title, name, description, className }) => {
+  return (
+    <div className={clsx('flex-grow-1 flex-1 text-left', className)}>
+      <h3 className="rounded-full bg-primary-500 p-2 text-xl font-bold">
+        {title}
+      </h3>
+      <h4 className="my-3 text-lg font-bold">{name}</h4>
+      <p className="text-lg italic">{description}</p>
+    </div>
+  )
+}
diff --git a/src/components/YouTubeEmbed.jsx b/src/components/YouTubeEmbed.jsx
new file mode 100644
index 0000000..c4015f1
--- /dev/null
+++ b/src/components/YouTubeEmbed.jsx
@@ -0,0 +1,16 @@
+import clsx from 'clsx'
+
+export const YouTubeEmbed = ({ videoId, className }) => {
+  return (
+    <div className={clsx('my-3 aspect-video md:my-0', className)}>
+      <iframe
+        width="100%"
+        height="110%"
+        src={`https://www.youtube.com/embed/${videoId}`}
+        title="YouTube video player"
+        allowFullScreen
+        className="mx-auto rounded-2xl"
+      ></iframe>
+    </div>
+  )
+}