add baseline

front/src/components/ArrowButton.tsx

@@ -3,7 +3,7 @@ export function ArrowButton({ onClick }: { onClick: () => void }) {
     <button
       className="p-2 rounded-full bg-white hover:bg-gray-200 
                  text-primary hover:ring-1 ring-primary transition-all 
-                 duration-100 ease-in-out active:translate-y-1"
+                 duration-100 ease-in-out active:translate-y-1 my-2"
       onClick={onClick}
     >
       ↓

front/src/components/ScheduleForm.tsx

@@ -86,7 +86,7 @@ export function ScheduleForm() {
     }
   }
   return (
-    <section className="max-w-2xl w-full mx-auto rounded-2xl shadow-lg p-7 bg-white -mt-40">
+    <section className="max-w-2xl w-full mx-auto rounded-2xl shadow-lg p-7 bg-white">
       {renderError()}
       <Card customClass="bg-transparent grid grid-flow-row gap-4">
         <SelectMode

front/src/pages/HomePage.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 import { useRef } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { ArrowButton } from '@/components/ArrowButton';
@@ -23,15 +24,26 @@ export default function HomePage() {
   };
 
   return (
-    <div className="">
-      <div className="main h-screen">
+    <div className="flex flex-col items-center">
+      <div className="main flex flex-col w-full">
         <NavBar />
+        <div className="p-6 bg-white text-center text-gray-800 bg-opacity-65 rounded-lg shadow-lg my-6 max-w-2xl mx-auto">
+          <p className="text-lg font-semibold">
+            Syntra is a cutting-edge dApp powered by Massa's autonomous smart
+            contracts, designed to simplify token scheduling like never before.
+          </p>
+          <p className="text-lg mt-2">
+            Whether you're tipping content creators or managing token vesting,
+            Syntra ensures seamless, automated transactions.
+          </p>
+        </div>
         <div className="flex flex-col justify-center items-center gap-10 h-full">
           <ScheduleForm />
           <ArrowButton onClick={scrollToList} />
         </div>
       </div>
-      <div ref={scheduleTableRef} className="h-screen  bg-white">
+
+      <div ref={scheduleTableRef} className="h-screen bg-white w-full my-6 ">
         <ScheduleTablesSection />
       </div>
     </div>

front/src/store/store.ts

@@ -73,7 +73,10 @@ async function initPollEvent(connectedAccount: Provider) {
   setEventPollerStop(stopPolling);
 }
 
-function handleTransferEvents(data: rpcTypes.OutputEvents, schedules: Schedule[]) {
+function handleTransferEvents(
+  data: rpcTypes.OutputEvents,
+  schedules: Schedule[],
+) {
   const { refreshBalances } = useTokenStore.getState();
   const { tokens } = useTokenStore.getState();
 

front/vite.config.ts

@@ -11,19 +11,25 @@ export default ({ mode }) => {
   process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };
 
   // see https://github.com/davidmyersdev/vite-plugin-node-polyfills/issues/81#issuecomment-2325104572
-  const nodePolyfillsFix = (options?: PolyfillOptions | undefined): PluginOption => {
+  const nodePolyfillsFix = (
+    options?: PolyfillOptions | undefined,
+  ): PluginOption => {
     return {
       ...nodePolyfills(options),
       resolveId(source: string) {
-        const m = /^vite-plugin-node-polyfills\/shims\/(buffer|global|process)$/.exec(source)
+        const m =
+          /^vite-plugin-node-polyfills\/shims\/(buffer|global|process)$/.exec(
+            source,
+          );
         if (m) {
-          return `node_modules/vite-plugin-node-polyfills/shims/${m[1]}/dist/index.cjs`
+          return `node_modules/vite-plugin-node-polyfills/shims/${m[1]}/dist/index.cjs`;
         }
-      }
-    }
-  }
+      },
+    };
+  };
 
   return defineConfig({
+    // eslint-disable-next-line new-cap
     plugins: [nodePolyfillsFix(), react(), ViteImageOptimizer(), visualizer()],
     server: {
       fs: {