fix: more enhancement to UI (#1402)

* replaced image format

* removed unused component

* moved ambassadors content to a new file

* created components for community section

* changes implemented

* .

* added shadow to cards and bd color

* added suggested changes

* .

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/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>
+  );
+}

components/slack/index.js

@@ -24,7 +24,7 @@ export default function Slack({
       </div>
       <div className="flex-1 py-2">
         <SlackMessage
-          avatar="/img/homepage/lukasz-homepage-slack.jpg"
+          avatar="/img/homepage/lukasz-homepage-slack.webp"
           name="Lukasz Gornicki"
           text={
             <>
@@ -41,7 +41,7 @@ export default function Slack({
           ]}
         />
         <SlackMessage
-          avatar="/img/homepage/eve-and-chan.png"
+          avatar="/img/homepage/eve-and-chan.webp"
           name="Eve & Chan"
           text={
             <span className="text-gray-500">

config/ambassador_lists.json

@@ -0,0 +1,66 @@
+{
+    "contents": [
+      {
+        "title": "Written content",
+        "details": "Write guides, step-by-step tutorials, community documentation, AsyncAPI blog posts, and beyond.",
+        "icon": "/img/illustrations/blog.svg"
+      },
+      {
+        "title": "Video content",
+        "details": "Produce educational videos on YouTube and other platforms for AsyncAPI.",
+        "icon": "/img/illustrations/video-creation.svg"
+      },
+      {
+        "title": "Live streams",
+        "details": "Moderate or host live streams that demo the AsyncAPI ecosystem.",
+        "icon": "/img/illustrations/live.svg"
+      },
+      {
+        "title": "Give talks",
+        "details": "Speak at meetups and conferences; we’ll help with slides, abstract submissions, and travel budget.",
+        "icon": "/img/illustrations/speaking.svg"
+      },
+      {
+        "title": "Interactive Learning",
+        "details": "Gamify educational content and create interactive learning paths for teaching AsycnAPI and event-driven architectures.",
+        "icon": "/img/illustrations/learning-app.svg"
+      },
+      {
+        "title": "Build real-life usecases example",
+        "details": "Develop real-life usecase project example using the AsyncaAPI specification",
+        "icon": "/img/illustrations/codes.svg"
+      },
+      {
+        "title": "AsyncAPI Contributions",
+        "details": "Collaborate with the AsyncAPI community via diverse contributions and improvements.",
+        "icon": "/img/illustrations/advisor.svg"
+      },
+      {
+        "title": "Gather Use-Cases",
+        "details": "Collect data from existing AsyncAPI users and create use-case studies.",
+        "icon": "/img/illustrations/meeting.jpg"
+      }
+    ],
+    "tokens": [
+      {
+        "emoji": "🗺️",
+        "title": "Travel",
+        "details": "Ambassadors are provided free entry to AsyncAPI conferences."
+      },
+      {
+        "emoji": "🌟",
+        "title": "Recognition",
+        "details": "Ambassadors receive community-wide recognition."
+      },
+      {
+        "emoji": "🎁",
+        "title": "Special Swags",
+        "details": "Community members recognize you by gifting you exclusive AsyncAPI Ambassador swag."
+      },
+      {
+        "emoji": "🧰",
+        "title": "Workshop Swags",
+        "details": "Ambassadors are gifted swag from AsyncAPI conferences and workshops."
+      }
+    ]
+}