From c0f554b65e38b8d0308bea1e252be025bc33191c Mon Sep 17 00:00:00 2001
From: Ahmed Cool Projects
 <72823374+AhmedCoolProjects@users.noreply.github.com>
Date: Tue, 6 Dec 2022 01:45:03 +0100
Subject: [PATCH] fixing hero buttons layout on small mobile screens (#1695)

## Description

<!-- Insert PR description-->

## Type of change

<!--- Please check the type of change your PR introduces: --->
- [ ] :sunflower: Feature
- [x] :bug: Bugfix
- [ ] :world_map: Documentation
- [ ] :robot: Test
- [ ] :computer: CI/Deployment
- [ ] :hamster: Trivial/Minor

## Issue(s)

<!-- Can reference multiple issues. Use one of the following "magic
words" - "closes, fixes" to auto-close the Github issue. -->
* #<issue>

## Test Plan

<!-- How will this be tested prior to merging.-->
- [ ] :muscle: Manual
- [ ] :zap: Unit test
- [ ] :green_heart: E2E

Co-authored-by: Georgi Matev <gmatev@alcion.ai>
Co-authored-by: Georgi Matev <georgi.matev@gmail.com>
---
 website/src/components/parts/Hero.js | 2 +-
 website/tailwind.config.js           | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/website/src/components/parts/Hero.js b/website/src/components/parts/Hero.js
index 037cc606b..d4b6baee4 100644
--- a/website/src/components/parts/Hero.js
+++ b/website/src/components/parts/Hero.js
@@ -33,7 +33,7 @@ export default function Hero() {
             </p>
           </div>
 
-          <div className="mt-12 !z-10 mb-6 space-x-4">
+          <div className="mt-12 !z-10 mb-6 flex flex-col 2xs:flex-row items-center justify-center 2xs:space-y-0 space-y-4 2xs:space-x-4">
             <a
               href="../docs/quickstart"
               className="text-2xl !z-10 !no-underline hover:text-white py-2 px-6 font-bold btn bg-indigo-800 hover:bg-indigo-900 border-indigo-800 hover:border-indigo-900 text-white rounded-md"
diff --git a/website/tailwind.config.js b/website/tailwind.config.js
index 65b16cfde..78298c087 100644
--- a/website/tailwind.config.js
+++ b/website/tailwind.config.js
@@ -1,9 +1,10 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ["./src/**/*.{js,jsx,ts,tsx}"],
-  darkMode: ['class', '[data-theme="dark"]'],
+  darkMode: ["class", '[data-theme="dark"]'],
   theme: {
     screens: {
+      "2xs": "400px",
       xs: "540px",
       sm: "640px",
       md: "768px",
@@ -62,4 +63,4 @@ module.exports = {
     },
   },
   plugins: [require("tw-elements/dist/plugin")],
-};
\ No newline at end of file
+};