feat: homepage features styling

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={`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>

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/">

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}`}

components/features/index.jsx

@@ -60,9 +60,9 @@ 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 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}

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>