feat: add brand guidelines pages

components/DemoAnimation.js

@@ -3,6 +3,7 @@ import Typing from 'react-typing-animation'
 import MacWindow from './MacWindow'
 import ArrowRight from './icons/ArrowRight'
 import OpenInStudioButton from './buttons/OpenInStudioButton'
+import Heading from './typography/Heading'
 
 export default function DemoAnimation({ className = '' }) {
  const [started, setStarted] = useState(true)
@@ -216,10 +217,14 @@ export default function DemoAnimation({ className = '' }) {
  </div>
  <div className={`relative md:flex-1 md:ml-6 md:mb-0 transition-all duration-500 ease-in-out z-10`}>
  <div className={`md:text-left text-center mt-8 md:mt-0 lg:absolute lg:left-0 lg:top-0 lg:right-0 lg:ml-48 lg:mr-8 ${showControls ? 'block' : 'hidden'}`}>
- <h3 className="text-primary-800 text-2xl font-bold md:text-2xl mb-4">
+ <Heading
+ typeStyle="heading-md-bold"
+ level="h3"
+ className="mb-4"
+ >
  Play with it!
- </h3>
- <p className="text-gray-500 text-lg font-normal mb-6 max-w-3xl mx-auto mb-8">
+ </Heading>
+ <p className="text-gray-700 text-lg font-normal tracking mb-6 max-w-3xl mx-auto mb-8">
  Open this example on AsyncAPI Studio to get a better taste of the specification. No signup is required!
  </p>
  <OpenInStudioButton />

components/Footer.js

@@ -7,36 +7,31 @@ import Container from "./layout/Container"
 
 export default function Footer() {
  return (
- <div className="bg-white mt-12">
- <div className="bg-primary-900 py-12">
- <Container wide>
- <NewsletterSubscribe formName="form 2" dark />
- </Container>
- </div>
+ <div className="bg-gray-900 mt-12">
  <div className="max-w-screen-xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8">
  <nav className="-mx-5 -my-2 flex flex-wrap justify-center">
  <div className="px-5 py-2">
- <a href="/about" className="text-base leading-6 text-gray-500 hover:text-gray-900">
+ <a href="/about" className="text-base leading-6 text-gray-500 transition ease-in-out duration-300 hover:text-primary-300">
  About
  </a>
  </div>
  <div className="px-5 py-2">
- <a href="/blog" className="text-base leading-6 text-gray-500 hover:text-gray-900">
+ <a href="/blog" className="text-base leading-6 text-gray-500 transition ease-in-out duration-300 hover:text-primary-300">
  Blog
  </a>
  </div>
  <div className="px-5 py-2">
- <a href="https://asyncapi.threadless.com" target="_blank" className="text-base leading-6 text-gray-500 hover:text-gray-900">
+ <a href="https://asyncapi.threadless.com" target="_blank" className="text-base leading-6 text-gray-500 transition ease-in-out duration-300 hover:text-primary-300">
  Shop
  </a>
  </div>
  <div className="px-5 py-2">
- <a href="/jobs" className="text-base leading-6 text-gray-500 hover:text-gray-900">
+ <a href="/jobs" className="text-base leading-6 text-gray-500 transition ease-in-out duration-300 hover:text-primary-300">
  Jobs
  </a>
  </div>
  <div className="px-5 py-2">
- <a href="mailto:[email protected]" className="text-base leading-6 text-gray-500 hover:text-gray-900">
+ <a href="mailto:[email protected]" className="text-base leading-6 text-gray-500 transition ease-in-out duration-300 hover:text-primary-300">
  Press
  </a>
  </div>
@@ -72,7 +67,7 @@ export default function Footer() {
  Copyright &copy; AsyncAPI Project a Series of LF Projects, LLC.
  </p>
  <p className="text-center text-base leading-6 text-gray-400 mt-1">
- For web site terms of use, trademark policy and general project policies please see <a href="https://lfprojects.org" className="text-gray-700 underline" target="_blank">https://lfprojects.org</a>
+ For web site terms of use, trademark policy and general project policies please see <a href="https://lfprojects.org" className="text-primary-300 hover:text-primary-200 transition ease-in-out duration-300 underline" target="_blank">https://lfprojects.org</a>
  </p>
  </div>
  </div>

components/Hero.js

@@ -4,32 +4,34 @@ import OpenInStudioButton from './buttons/OpenInStudioButton'
 import Features from '../components/features'
 import DemoAnimation from './DemoAnimation'
 import AnnouncementHero from '../components/campaigns/AnnoucementHero'
+import Heading from './typography/Heading'
+import Paragraph from './typography/Paragraph'
 
 export default function Hero({ className = '' }) {
  return (
  <div className={`px-2 mt-12 ${className}`}>
  <div className="text-center">
  <AnnouncementHero />
- <h1 className="text-primary-800 text-2xl font-bold md:text-6xl mb-4 leading-snug">
+ <Heading level="h1" typeStyle="heading-xl" className="mb-4">
  Building the future of {` `}
- <span className="text-primary-400 block md:-mt-4">
+ <span className="block md:-mt-4">
  {" "}
  Event-Driven Architectures (EDA)
  </span>
- </h1>
- <h2 className="text-gray-500 text-lg font-normal mb-16 max-w-3xl mx-auto">
+ </Heading>
+ <Heading level="h2" typeStyle="body-lg" textColor="text-gray-700" className="mb-10 max-w-4xl mx-auto">
  Open-Source tools to easily build and maintain your event-driven
  architecture. All powered by the AsyncAPI specification, the {" "}
  <strong>industry standard</strong> for defining asynchronous APIs.
- </h2>
+ </Heading>
  <Button className="block md:inline-block" text="Read the docs" href="/docs/getting-started" icon={<ArrowRight className="-mb-1 h-5 w-5" />} />
  <OpenInStudioButton text='Open Studio' className="md:ml-2" />
- <p className="mt-4 text-xs text-gray-500">
+ <Paragraph typeStyle="body-sm" className="mt-4" textColor="text-gray-500">
  Proud to be part of the {" "}
  <a className="underline" href="https://www.linuxfoundation.org/">
  Linux Foundation
  </a>
- </p>
+ </Paragraph>
  </div>
  <div className="mt-8 md:mt-16">
  <DemoAnimation />