feat: improving root page styling (#289)

Signed-off-by: AlexNg <[email protected]>

client/src/pages/root.tsx

@@ -17,15 +17,18 @@ const RootPage: PageComponent = (props) => {
           loading="eager"
           height="600"
         ></img>
-        <div className="absolute bottom-6 left-1 mb-4 md:bottom-1/3 md:left-10 lg:bottom-1/2">
-          <h1 className="mb-4 text-base font-bold md:text-2xl lg:text-4xl">
-            Driving sustainable food possibilties
+        <div className="absolute top-1/2 mb-4 ml-2 flex size-fit -translate-y-1/2 flex-col md:bottom-1/3 md:left-10 lg:bottom-1/2">
+          <h1 className="text-2xl font-bold md:text-4xl lg:text-6xl">
+            GreenBites <span className="text-green-700">SG</span>
           </h1>
+          <h3 className="sm:mb-5 lg:mb-10 lg:text-4xl">
+            Driving sustainable food possibilties
+          </h3>
           <InternalLink
             href="/register"
             variant="secondary"
             size="default"
-            className="!bg-primary-light"
+            className="mt-5 w-fit !bg-primary-light"
           >
             Start Now
           </InternalLink>