From ae718f1948ae6b5aacaa25ad5fd547551802eec9 Mon Sep 17 00:00:00 2001
From: Adrian <73254487+apt105@users.noreply.github.com>
Date: Fri, 6 May 2022 04:01:04 +0100
Subject: [PATCH] Front page (#332)

* Update index.tsx

fix spacing of carousel and centre other objects. First draft

* Push layout fixes into CSS

* Update to use tailwindCSS
---
 src/pages/index.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 817c65c0..a1675791 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -182,12 +182,14 @@ function Home() {
         <Carousel autoPlay infiniteLoop showStatus={false} showThumbs={false}>
           {features.map((feature, index) => (
             <div key={index} className="flex p-12">
+              <div className="w-1/2">
               <img
                 className="my-auto h-40"
                 src={feature.imageUrl}
                 alt={feature.title}
               />
-              <div className="my-auto">
+              </div>
+              <div className="my-auto w-1/2" >
                 <h3 className="text-xl font-medium">{feature.title}</h3>
                 <p>{feature.description}</p>
               </div>
@@ -195,7 +197,7 @@ function Home() {
           ))}
         </Carousel>
 
-        <div className="flex w-full flex-col gap-4 bg-primaryDark p-4 shadow-inner">
+        <div className="flex w-full flex-col gap-4 bg-primaryDark p-4 shadow-inner mx-auto w-auto">
           <h3 className="text-xl font-bold">Connect with us.</h3>
           <div className="flex w-full overflow-x-auto">
             {SocialCards.map((card, index) => (
@@ -206,7 +208,7 @@ function Home() {
           </div>
         </div>
 
-        <div className="container flex flex-col">
+        <div className="container flex flex-col mx-auto w-auto">
           <h2 className="mb-2 text-xl font-medium">
             Getting started with Meshtastic is as easy as 1, 2, 3!
           </h2>