Another round of documentation design/content amends (#1562)

Last bit of design and content updates (minor padding/centring and the
discord link pointing to the correct discord invite)

I have also added the following scripts to the `package.json`

```
"preview-build": "docusaurus build",
"preview-install": "docusaurus install"
```
These are for more easily running vercel deploys manually (as the vercel
has issues running the prepare script) - note that to deploy and preview
it successfully you'd still need to update the config to `warn` for
broken links and the update landing page to `/` as of right now (due to
vercel/docusaurus limitations)

docs/package.json

@@ -5,6 +5,8 @@
   "scripts": {
     "docusaurus": "docusaurus",
     "prepare": "yarn enrich-document-metadata && yarn regenerate-plantuml",
+    "preview-build": "docusaurus build",
+    "preview-install": "docusaurus install",
     "build": "yarn prepare && docusaurus build",
     "build-dev": "yarn prepare && docusaurus build --no-minify -l en",
     "start": "yarn dummy-spec && docusaurus start",

docs/src/components/homepage/Carousel/Carousel.tsx

@@ -19,7 +19,7 @@ type Props = {
 
 const CarouselEntry: FC<Props> = ({ idx, src, description }) => {
   return (
-    <div className="flex items-center gap-6 h-full">
+    <div className="flex items-center gap-6 h-full justify-center">
       <div className="basis-[40%]">
         <img src={src} className="w-full rounded-lg object-cover" />
       </div>

docs/src/components/homepage/Carousel/ResponsiveCarousel.tsx

@@ -24,11 +24,11 @@ type Props = {
 
 const CarouselEntryDescription: FC<Props> = ({ description, idx }) => {
   return (
-    <div className="flex flex-col tablet:max-w-[478px] max-w-80 tablet:pt-6 pt-14 tablet:min-h-64 min-h-[350px] tablet:order-1 order-2 self-center">
+    <div className="flex flex-col tablet:max-w-[478px] max-w-80 tablet:pt-6 pt-14 tablet:order-1 order-2 self-center">
       <div className="flex flex-col tablet:gap-4 max-w-md gap-8">
         <p>{description}</p>
         {idx === 0 && (
-          <div className="flex gap-4 tablet:flex-row flex-col">
+          <div className="flex gap-4 tablet:flex-row flex-col justify-between">
             <span className="inline-flex gap-[5px]">
               <Square className="mt-1" />
               Passengers <span className="font-bold">(Participants)</span>
@@ -52,7 +52,7 @@ type ControlProps = {
 const Controls: FC<ControlProps> = ({ showing, onClickBullet, ...props }) => {
   return (
     <div
-      className="inline-flex mt-auto gap-4 pt-14 self-center order-1 tablet:order-2 tablet:pt-3"
+      className="inline-flex mt-auto gap-4 pt-14 self-center order-1 tablet:order-2"
       {...props}
     >
       {HowItWorksCarouselContent.map((_, index) => (

docs/src/theme/Footer/Links/MultiColumn/index.js

@@ -46,7 +46,7 @@ export default function FooterLinksMultiColumn({ columns }) {
     <div
       className={clsx(
         "grid gap-10 pb-10 max-w-md",
-        "laptop:flex laptop:pb-0 laptop:gap-7",
+        "tablet:flex tablet:max-w-full laptop:pb-0 laptop:gap-7",
         isLandingPage
           ? "w-full laptop:max-w-[750px]"
           : "basis-5/6 laptop:max-w-full"

docs/src/theme/Navbar/Content/index.js

@@ -78,7 +78,7 @@ export default function NavbarContent() {
             <GithubSmall />
           </a>
           <a
-            href="https://github.com/cardano-scaling/hydra"
+            href="https://discord.com/invite/Qq5vNTg9PT"
             target="_blank"
             rel="noopener noreferrer"
             className="hover:text-teal-light mx-3 py-1"