From 1f1f1f58b3116dec34cf98144a7be76b7328a842 Mon Sep 17 00:00:00 2001
From: Missy Turco <missyturco8@gmail.com>
Date: Thu, 30 Dec 2021 14:04:03 -0500
Subject: [PATCH 1/5] left-align text block next to homepage animation

---
 components/DemoAnimation.js              | 2 +-
 components/Hero.js                       | 2 +-
 components/buttons/OpenInStudioButton.js | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/DemoAnimation.js b/components/DemoAnimation.js
index 5b4c00886c91..19209f99201e 100644
--- a/components/DemoAnimation.js
+++ b/components/DemoAnimation.js
@@ -215,7 +215,7 @@ export default function DemoAnimation({ className = '' }) {
           </MacWindow>
         </div>
         <div className={`relative md:flex-1 md:ml-1 md:mb-0 transition-all duration-500 ease-in-out z-10`}>
-          <div className={`text-center mt-8 lg:mt-0 lg:absolute lg:left-0 lg:top-0 lg:right-0 lg:ml-48 lg:mr-8 ${showControls ? 'block' : 'hidden'}`}>
+          <div className={`md:text-left text-center mt-8 lg: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">
               Play with it!
             </h3>
diff --git a/components/Hero.js b/components/Hero.js
index fffb21fc6d37..81bed3d6d290 100644
--- a/components/Hero.js
+++ b/components/Hero.js
@@ -23,7 +23,7 @@ export default function Hero({ className = '' }) {
           <strong>industry standard</strong> for defining asynchronous APIs.
         </h2>
         <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' />
+        <OpenInStudioButton text='Open Studio' className="md:ml-2" />
         <p className="mt-4 text-xs text-gray-500">
           Proud to be part of the {" "}
           <a className="underline" href="https://www.linuxfoundation.org/">
diff --git a/components/buttons/OpenInStudioButton.js b/components/buttons/OpenInStudioButton.js
index 04d2e7e053da..9b4562c7d20a 100644
--- a/components/buttons/OpenInStudioButton.js
+++ b/components/buttons/OpenInStudioButton.js
@@ -1,11 +1,11 @@
 import Button from './Button'
 import IconRocket from '../icons/Rocket'
 
-export default function OpenInStudioButton({ text = 'Open in Studio' }) {
+export default function OpenInStudioButton({ text = 'Open in Studio', className = '' }) {
   const sampleSpec = encodeURI('https://raw.githubusercontent.com/asyncapi/asyncapi/v2.2.0/examples/simple.yml')
   return (
     <Button
-      className="block mt-2 md:mt-0 md:inline-block md:ml-2"
+      className={`text-center block mt-2 md:mt-0 md:inline-block ${className}`}
       bgClassName="bg-green-500"
       text={text}
       href={`https://studio.asyncapi.com?url=${sampleSpec}`}

From d75a9d4a748932e1074feabffc8345697d6eb45e Mon Sep 17 00:00:00 2001
From: Missy Turco <missyturco8@gmail.com>
Date: Thu, 30 Dec 2021 14:04:30 -0500
Subject: [PATCH 2/5] add borders to card items matching style of cards in the
 docs

---
 components/features/index.jsx         | 2 +-
 components/navigation/BlogPostItem.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/features/index.jsx b/components/features/index.jsx
index e373dee511a6..cd3c82c4cb22 100644
--- a/components/features/index.jsx
+++ b/components/features/index.jsx
@@ -62,7 +62,7 @@ export default function Features() {
         <div className="mt-12 text-left">
           <div className="grid  grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
             {features.map((feature) => (
-              <div key={feature.name} className="flex flex-col justify-between shadow-lg rounded-lg px-6 pb-8">
+              <div key={feature.name} className="flex flex-col justify-between border border-gray-200 shadow-lg rounded-lg px-6 pb-8">
                 <div>
                   <h3 className="mt-8 text-lg font-medium text-gray-900 tracking-tight">
                     {feature.name}
diff --git a/components/navigation/BlogPostItem.js b/components/navigation/BlogPostItem.js
index f8aacd705c04..1ccc029d3cda 100644
--- a/components/navigation/BlogPostItem.js
+++ b/components/navigation/BlogPostItem.js
@@ -21,7 +21,7 @@ export default function BlogPostItem({ post, className = '' }) {
   }
 
   return (
-    <div className={`flex flex-col rounded-lg shadow-lg overflow-hidden ${className}`}>
+    <div className={`flex flex-col border border-gray-200 rounded-lg shadow-md divide-y divide-gray-200 transition-all duration-300 ease-in-out hover:shadow-lg overflow-hidden ${className}`}>
       <a href={post.slug} className="flex-shrink-0">
         <img className="h-48 w-full object-cover" src={post.cover} alt="" />
       </a>

From e1502c1ca49ef2c06acde995e187dd0887c20a20 Mon Sep 17 00:00:00 2001
From: Missy Turco <missyturco8@gmail.com>
Date: Fri, 31 Dec 2021 10:10:15 -0500
Subject: [PATCH 3/5] matched gird gap of features section with that of the
 blog section

---
 components/features/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/features/index.jsx b/components/features/index.jsx
index cd3c82c4cb22..6b32c50a5302 100644
--- a/components/features/index.jsx
+++ b/components/features/index.jsx
@@ -60,7 +60,7 @@ export default function Features() {
           Improving the current state of Event-Driven Architectures (EDA)
         </p>
         <div className="mt-12 text-left">
-          <div className="grid  grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
+          <div className="grid  grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
             {features.map((feature) => (
               <div key={feature.name} className="flex flex-col justify-between border border-gray-200 shadow-lg rounded-lg px-6 pb-8">
                 <div>

From 90ddede0f01df13c97658769444e9a9359143a95 Mon Sep 17 00:00:00 2001
From: Missy Turco <missyturco8@gmail.com>
Date: Mon, 3 Jan 2022 09:23:51 -0500
Subject: [PATCH 4/5] adjust box shadow size in features section and add hover
 state

---
 components/features/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/features/index.jsx b/components/features/index.jsx
index 6b32c50a5302..7b927faf4472 100644
--- a/components/features/index.jsx
+++ b/components/features/index.jsx
@@ -62,7 +62,7 @@ export default function Features() {
         <div className="mt-12 text-left">
           <div className="grid  grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
             {features.map((feature) => (
-              <div key={feature.name} className="flex flex-col justify-between border border-gray-200 shadow-lg rounded-lg px-6 pb-8">
+              <div key={feature.name} className="flex flex-col justify-between border border-gray-200 shadow-md hover:shadow-lg transition-all duration-300 ease-in-out rounded-lg px-6 pb-8">
                 <div>
                   <h3 className="mt-8 text-lg font-medium text-gray-900 tracking-tight">
                     {feature.name}

From 33f85e1f30ae440238b769c0057fffec90292c4f Mon Sep 17 00:00:00 2001
From: Missy Turco <missyturco8@gmail.com>
Date: Mon, 3 Jan 2022 09:24:16 -0500
Subject: [PATCH 5/5] adjust spacing in responsive DemoAnimation component

---
 components/DemoAnimation.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/DemoAnimation.js b/components/DemoAnimation.js
index 19209f99201e..9f1bdc2ddc93 100644
--- a/components/DemoAnimation.js
+++ b/components/DemoAnimation.js
@@ -214,8 +214,8 @@ export default function DemoAnimation({ className = '' }) {
             { (showDisplayName || showDisplayNameDescription) && renderEmail(() => setShowEmail(true)) }
           </MacWindow>
         </div>
-        <div className={`relative md:flex-1 md:ml-1 md:mb-0 transition-all duration-500 ease-in-out z-10`}>
-          <div className={`md:text-left text-center mt-8 lg:mt-0 lg:absolute lg:left-0 lg:top-0 lg:right-0 lg:ml-48 lg:mr-8 ${showControls ? 'block' : 'hidden'}`}>
+        <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">
               Play with it!
             </h3>