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: --->
- [ ] 🌻 Feature
- [x] 🐛 Bugfix
- [ ] 🗺️ Documentation
- [ ] 🤖 Test
- [ ] 💻 CI/Deployment
- [ ] 🐹 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.-->
- [ ] 💪 Manual
- [ ] ⚡ Unit test
- [ ] 💚 E2E

Co-authored-by: Georgi Matev <gmatev@alcion.ai>
Co-authored-by: Georgi Matev <georgi.matev@gmail.com>

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"

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")],
-};
+};