feat: new community section from community branch (#917)

Co-authored-by: Ace <40604284+AceTheCreator@users.noreply.github.com>%0ACo-authored-by: Lukasz Gornicki <lpgornicki@gmail.com>

components/Calendar.js

@@ -1,25 +1,12 @@
-import moment from 'moment';
 import eventsData from '../config/meetings.json';
 import GoogleCalendarButton from './buttons/GoogleCalendarButton';
 import Heading from './typography/Heading';
+import { getEvents } from '../lib/staticHelpers';
 
 export default function Calendar({ className = '', size, text="text-left" }) {
   const CALENDAR_URL =
     'https://calendar.google.com/calendar/embed?src=c_q9tseiglomdsj6njuhvbpts11c%40group.calendar.google.com&ctz=UTC';
   const eventsExist = eventsData.length > 0;
-
-  function getEvents() {
-      let meetingsWithDates = eventsData.map((event) => ({
-        ...event,
-        date: moment(event.date),
-      }));
-      meetingsWithDates.sort((a, b) => a.date - b.date);
-      return meetingsWithDates
-        .filter((meeting) => meeting.date > new Date())
-        .slice(0, size || meetingsWithDates.length);
-  }
-
-
   return (
     <div
       className={`rounded-md border border-gray-200 overflow-hidden bg-white p-4`}
@@ -28,7 +15,7 @@ export default function Calendar({ className = '', size, text="text-left" }) {
         Upcoming events
       </Heading> 
       <ul>
-        {getEvents().map((event, index) => (
+        {getEvents(eventsData, size).map((event, index) => (
           <li key={index}>
             <a
               href={event.url}

components/Meeting.js

@@ -2,33 +2,50 @@ import YoutubeButton from './buttons/YoutubeButton';
 import Paragraph from './typography/Paragraph';
 import TextLink from './typography/TextLink';
 import Heading from './typography/Heading';
+import { ArrowRightIcon } from '@heroicons/react/outline';
 
 export default function Meeting({ 
     name = '', 
     purpose = '',
     host = '',
     hostProfile = '',
-    youtube = '' 
+    youtube = '', 
+    bg = ''
 }) {
 
   return (
-    <div className="rounded-md border border-gray-200 overflow-hidden bg-white p-4">
-        <Heading level="h2" typeStyle="heading-md-semibold">
-            { name }
-        </Heading>   
-        <Paragraph typeStyle="body-md" className="my-4">
-            <strong>Purpose:</strong> { purpose }
-        </Paragraph>
-        <Paragraph typeStyle="body-md" className="my-4">
-            <strong>Host:</strong> 
-            { hostProfile 
-                ? (<TextLink href={ hostProfile } target="_blank">
-                { host }
-                </TextLink>)
-                : ` ${host}.`
-            }
-        </Paragraph>
-        <YoutubeButton text="Watch recordings" href={ youtube }/>
-    </div>
+    <a href={youtube} target="_blank" rel="noreferrer">
+      <div
+        className={`meeting-card overflow-hidden p-4 bg-${bg} w-full lg:w-[300px] h-[300px] cursor-pointer hover:bg-dark hover:text-white flex flex-col justify-between`}
+      >
+        <div>
+          <h3 className="text-xl">{name}</h3>
+          <div>
+            <Paragraph typeStyle="body-sm" className="my-4" textColor="white">
+              {purpose}
+            </Paragraph>
+          </div>
+        </div>
+        <div className="flex items-center justify-between">
+          <Paragraph typeStyle="body-md" className="my-4">
+            <strong>Host:</strong>
+            {hostProfile ? (
+              <TextLink
+                href={hostProfile}
+                target="_blank"
+                className="hover:text-primary-500"
+              >
+                {host}
+              </TextLink>
+            ) : (
+              ` ${host}.`
+            )}
+          </Paragraph>
+          <div>
+            <ArrowRightIcon className="w-[20px] ml-3 text-slate-400" />
+          </div>
+        </div>
+      </div>
+    </a>
   );
 }

components/community/Card.js

@@ -0,0 +1,75 @@
+import Link from 'next/link';
+import React from 'react'
+import IconArrowUp from '../icons/ArrowUp';
+import Heading from '../typography/Heading';
+import Paragraph from '../typography/Paragraph';
+
+export default function SmallHomeCards({icon, tagline, taglineBg, type="large", heading, description, bg, btnText, btnBg, link}) {
+  if(type === "small"){
+    return (
+      <Link href={link} target="_blank">
+        <a target={link.includes('http') && '_blank'}>
+          <div
+            className={`p-3 cursor-pointer border shadow-xl rounded w-full border-[#ad20e2] ${bg}`}
+          >
+            <div className="p-2 rounded-xl bg-gray-100 text-center w-min text-xs flex justify-between">
+              <span>{icon}</span> <span className="ml-[5px]">{tagline}</span>
+            </div>
+            <div className="mt-3">
+              <Heading level="h1" typeStyle="heading-md">
+                {heading}
+              </Heading>
+            </div>
+            <div className="mt-2">
+              <Paragraph
+                textColor={bg ? 'text-black' : 'text-gray-600'}
+                typeStyle="body-sm"
+              >
+                {description}
+              </Paragraph>
+            </div>
+            <div className="text-right w-full flex justify-end">
+              <IconArrowUp className="w-[20px]" />
+            </div>
+          </div>
+        </a>
+      </Link>
+    );
+  }
+  return (
+    <div
+      className={`h-140 w-full shadow-xl rounded p-6 border ${
+        !bg && 'border-[#ad20e2]'
+      } ${bg}`}
+    >
+      <div
+        className={`p-2 rounded-xl text-center w-min text-xs flex justify-between ${taglineBg}`}
+      >
+        <span>{icon}</span> <span className="ml-[5px]">{tagline}</span>
+      </div>
+
+      <div className="mt-10">
+        <Heading
+          level="h1"
+          typeStyle="heading-lg"
+          textColor={bg && 'text-white'}
+        >
+          {heading}
+        </Heading>
+      </div>
+      <div className="mt-6">
+        <Paragraph textColor={bg && 'text-gray-400'}>{description}</Paragraph>
+      </div>
+      <div className="mt-10">
+        <Link href={link}>
+          <a>
+            <div className={`flex ${btnBg} cursor-pointer`}>
+              <IconArrowUp className={`w-[20px] ${btnBg}`} />{' '}
+              <span className="ml-2 text-sm">{btnText}</span>
+            </div>
+          </a>
+        </Link>
+      </div>
+    </div>
+  );
+}

components/community/Header.js

@@ -0,0 +1,47 @@
+import React from 'react'
+import IconRocket from '../icons/Rocket';
+import Heading from '../typography/Heading';
+import Button from '../buttons/Button';
+
+export default function Header({className = ''}) {
+  return (
+      <div className="text-center flex justify-center flex-col items-center mt-10 md:mt-0">
+        <Heading
+          className="countdown-text-gradient font-bold"
+          level="h6"
+          typeStyle="heading-xs"
+        >
+          AsyncAPI Community
+        </Heading>
+        <div className="mt-10">
+          <Heading level="h1" typeStyle="heading-xl" className="">
+            <span className="title block md:-mt-1 leading-[3rem]">
+              Welcome to the
+              <br /> AsyncAPI Community
+            </span>
+          </Heading>
+        </div>
+        <div className="mt-5 w-5/6">
+          <Heading
+            level="h2"
+            typeStyle="body-md"
+            textColor="text-gray-700"
+            className="text-slate-500 text-sm"
+          >
+            We're an OSS community that's passionate about AsyncAPI. Join us in
+            building the future of Event Driven APIs by asking questions,
+            sharing ideas, and building connections.
+          </Heading>
+        </div>
+        <div className="mt-10">
+          <Button
+            className="block md:inline-block focus:outline-none"
+            text="AsyncAPI Discussions"
+            href="https://github.com/orgs/asyncapi/discussions"
+            target="_blank"
+            icon={<IconRocket className="w-5 h-5 -mb-1 ml-1" />}
+          />
+        </div>
+      </div>
+  );
+}

components/community/Hero.js

@@ -0,0 +1,37 @@
+import orbitData from '../../config/orbitData.json';
+import Header from './Header';
+
+export default function Hero({ className = '' }) {
+  return (
+    <>
+      <div className="overflow-hidden orbits">
+        <div className="orbit-container">
+          <div id="first-orbit" className="orbit">
+            {orbitData[0].map((orbit) => (
+              <div key={orbit.id} className={orbit.id}>
+                <img src={orbit.img} alt={orbit.alt} className="orbit-img" />
+              </div>
+            ))}
+            <div className="w-full absolute h-full flex justify-center z-40">
+              <Header />
+            </div>
+          </div>
+          <div id="second-orbit" className="orbit">
+            {orbitData[1].map((orbit) => (
+              <div key={orbit.id} className={orbit.id}>
+                <img src={orbit.img} alt={orbit.alt} />
+              </div>
+            ))}
+          </div>
+          <div id="third-orbit" className="orbit">
+            {orbitData[2].map((orbit) => (
+              <div key={orbit.id} className={orbit.id}>
+                <img src={orbit.img} alt={orbit.alt} />
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

components/community/HomeCard.js

@@ -0,0 +1,40 @@
+import React from 'react'
+import Heading from '../typography/Heading';
+import Button from '../buttons/Button';
+
+export default function HomeCards({headline, title, description, btnText, link, className}) {
+  return (
+    <div className="z-40 mt-20 bg-white w-full md:h-130 rounded-lg shadow-xl md:flex md:justify-between">
+      <div className="p-10 flex justify-between w-full md:w-2/5 h-auto flex-col text-center md:text-left">
+        <div>
+          <Heading
+            level="h2"
+            typeStyle="heading-md"
+            textColor="text-purple-300"
+          >
+            {headline}
+          </Heading>
+        </div>
+        <div>
+          <Heading level="h2" typeStyle="heading-lg" className="mt-10">
+            {title}
+          </Heading>
+          <Heading
+            level="h2"
+            typeStyle="body-lg"
+            textColor="text-gray-700"
+            className="text-slate-500 text-sm mt-10"
+          >
+            {description}
+          </Heading>
+          <div className="mt-10">
+            <Button text={btnText} buttonSize="medium" href={link} />
+          </div>
+        </div>
+      </div>
+      <div
+        className={`w-full h-fit-content md:w-3/6 flex justify-end rounded-r-lg bg-cover bg-center ${className}`}
+      />
+    </div>
+  );
+}

components/icons/Ambassador.js

@@ -0,0 +1,31 @@
+export default function IconArrowDown({ className = '' }) {
+  return (
+    <svg
+      width="11"
+      height="7"
+      viewBox="0 0 512 512"
+      ill="#000000"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        d="M494.462,199.131c-9.25-9.25-21.001-15.101-33.751-16.935l0.031-119.217c0.001-2.52-1.101-4.914-3.015-6.552
+			c-1.914-1.638-4.447-2.358-6.94-1.967l-77.373,12.116c-4.195,0.656-7.288,4.27-7.288,8.518l-0.001,23.084l-246.52,49.785
+			c-4.668,0.943-7.688,5.49-6.744,10.157c0.826,4.091,4.423,6.917,8.442,6.917c0.566,0,1.139-0.056,1.715-0.172l243.106-49.095
+			l-0.002,40.208c0,4.761,3.859,8.621,8.62,8.622c0.001,0,0,0,0.001,0c4.761,0,8.621-3.859,8.621-8.62l0.006-73.508l60.128-9.416
+			l-0.086,336.877l-60.119-9.38l0.067-210.367c0.001-4.761-3.857-8.622-8.618-8.624c-0.001,0-0.002,0-0.003,0
+			c-4.76,0-8.62,3.858-8.621,8.619l-0.056,177.003L58.964,304.995l0.551-127.309l35.661-7.203c4.668-0.943,7.688-5.49,6.744-10.157
+			c-0.941-4.667-5.487-7.686-10.157-6.744l-42.548,8.593c-4.009,0.809-6.898,4.324-6.915,8.414l-0.095,21.991H8.621
+			c-4.762,0-8.621,3.86-8.621,8.621v83.121c0,4.761,3.859,8.621,8.621,8.621h33.153l-0.083,19.058
+			c-0.017,4.115,2.876,7.667,6.909,8.486l108.919,22.07l-23.899,97.845H93.582l3.653-92.705c0.187-4.758-3.517-8.766-8.275-8.955
+			c-4.759-0.177-8.766,3.519-8.953,8.275l-4.006,101.667c-0.092,2.344,0.775,4.623,2.4,6.314c1.625,1.691,3.869,2.646,6.214,2.646
+			h55.775c3.974,0,7.433-2.716,8.375-6.576l6.992-28.63l39.942,0.02c0.002,0,0.003,0,0.005,0c3.751,0,7.071-2.424,8.213-5.997
+			l19.363-60.591l142.776,28.9l-0.007,23.156c-0.002,4.25,3.093,7.866,7.292,8.521l77.362,12.07c0.444,0.07,0.886,0.103,1.329,0.103
+			c2.04,0,4.034-0.725,5.606-2.071c1.913-1.637,3.014-4.029,3.015-6.548l0.031-119.159c12.745-1.81,24.521-7.658,33.806-16.931
+			C517.848,260.537,517.836,222.505,494.462,199.131z M41.849,275.703H17.243v-65.878h24.89L41.849,275.703z M189.408,405.214
+			l-29.44-0.014l14.464-59.215l31.844,6.445L189.408,405.214z M482.297,271.718c-6.003,5.995-13.468,9.98-21.583,11.63
+			l-0.014-52.636l0.008-31.022c8.118,1.66,15.576,5.646,21.562,11.633C498.923,227.976,498.934,255.072,482.297,271.718z"
+      />
+    </svg>
+  );
+}

components/icons/ArrowUp.js

@@ -0,0 +1,11 @@
+export default function IconArrowUp({ className }) {
+  return (
+    <svg
+      className={className || 'inline-block'}
+      viewBox="0 0 32 32"
+    >
+      <path d="M25,0H7A7,7,0,0,0,0,7V25a7,7,0,0,0,7,7H25a7,7,0,0,0,7-7V7A7,7,0,0,0,25,0Zm5,25a5,5,0,0,1-5,5H7a5,5,0,0,1-5-5V7A5,5,0,0,1,7,2H25a5,5,0,0,1,5,5Z" />
+      <path d="M24,7H14V9h7.59L7.29,23.29l1.41,1.41L23,10.41V18h2V8A1,1,0,0,0,24,7Z" />
+    </svg>
+  );
+}