feat: sellingpoint-section

package.json

@@ -20,6 +20,7 @@
     "@tanstack/react-table": "^8.17.3",
     "axios": "^1.6.8",
     "clsx": "^2.1.1",
+    "eslint-plugin-storybook": "^0.8.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tailwind-merge": "^2.3.0"

src/apps/home/default.tsx

@@ -2,13 +2,15 @@ import { Navbar } from "@/components";
 import { FC, ReactElement } from "react";
 import { Hero } from "@/routes/home/modules/hero";
 import { About } from "@/routes/home/modules/about";
+import { SellingPoint } from "@/routes/home/modules/sellingpoint";
 
 export const LandingPage: FC = (): ReactElement => {
   return (
     <>
       <Navbar />
       <Hero />
       <About />
+      <SellingPoint />
     </>
   );
 };

src/routeTree.gen.ts

@@ -16,6 +16,7 @@ import { Route as RouteImport } from './routes/route'
 import { Route as HomeIndexImport } from './routes/home/index'
 import { Route as HomeDefaultImport } from './routes/home/default'
 import { Route as HomeModulesIndexImport } from './routes/home/modules/index'
+import { Route as HomeModulesSellingpointImport } from './routes/home/modules/sellingpoint'
 import { Route as HomeModulesHeroImport } from './routes/home/modules/hero'
 import { Route as HomeModulesAboutImport } from './routes/home/modules/about'
 
@@ -46,6 +47,11 @@ const HomeModulesIndexRoute = HomeModulesIndexImport.update({
   getParentRoute: () => rootRoute,
 } as any)
 
+const HomeModulesSellingpointRoute = HomeModulesSellingpointImport.update({
+  path: '/home/modules/sellingpoint',
+  getParentRoute: () => rootRoute,
+} as any)
+
 const HomeModulesHeroRoute = HomeModulesHeroImport.update({
   path: '/home/modules/hero',
   getParentRoute: () => rootRoute,
@@ -102,6 +108,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof HomeModulesHeroImport
       parentRoute: typeof rootRoute
     }
+    '/home/modules/sellingpoint': {
+      id: '/home/modules/sellingpoint'
+      path: '/home/modules/sellingpoint'
+      fullPath: '/home/modules/sellingpoint'
+      preLoaderRoute: typeof HomeModulesSellingpointImport
+      parentRoute: typeof rootRoute
+    }
     '/home/modules/': {
       id: '/home/modules/'
       path: '/home/modules'
@@ -121,6 +134,7 @@ export const routeTree = rootRoute.addChildren({
   HomeIndexRoute,
   HomeModulesAboutRoute,
   HomeModulesHeroRoute,
+  HomeModulesSellingpointRoute,
   HomeModulesIndexRoute,
 })
 
@@ -137,6 +151,7 @@ export const routeTree = rootRoute.addChildren({
         "/home/",
         "/home/modules/about",
         "/home/modules/hero",
+        "/home/modules/sellingpoint",
         "/home/modules/"
       ]
     },
@@ -158,6 +173,9 @@ export const routeTree = rootRoute.addChildren({
     "/home/modules/hero": {
       "filePath": "home/modules/hero.tsx"
     },
+    "/home/modules/sellingpoint": {
+      "filePath": "home/modules/sellingpoint.tsx"
+    },
     "/home/modules/": {
       "filePath": "home/modules/index.ts"
     }

src/routes/home/default.tsx

@@ -4,13 +4,15 @@ import { FC, Fragment, ReactElement } from "react";
 import { createRoute } from "@tanstack/react-router";
 import { rootRoute } from "../template";
 import { About } from "./modules/about";
+import { SellingPoint } from "./modules/sellingpoint";
 
 const LandingPage: FC = (): ReactElement => {
   return (
     <Fragment>
       <Navbar />
       <Hero />
       <About />
+      <SellingPoint />
     </Fragment>
   );
 };

src/routes/home/modules/sellingpoint.tsx

@@ -0,0 +1,35 @@
+import { FC, ReactElement } from "react";
+
+export const SellingPoint: FC = (): ReactElement => {
+  return (
+    <section className="p-8">
+      <h2 className="px-9 text-4xl font-bold mb-4 text-blue-900">Program Kerja</h2>
+      <p className="px-9 mb-8">Berikut Program Kerja Periode Kepengurusan 2024 - 2025</p>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 px-9">
+        <div className="bg-white p-6 rounded-lg shadow-md">
+          <h3 className="text-xl font-bold mb-2 text-blue-900">Melakukan penilaian diri</h3>
+          <p>
+            Pahami kondisi mental Anda dengan menyelesaikan tes dan kuestioner yang mudah digunakan.
+          </p>
+        </div>
+        <div className="bg-white p-6 rounded-lg shadow-md">
+          <h3 className="text-xl font-bold mb-2 text-blue-900">Mendapatkan Analisis AI</h3>
+          <p>
+            Dapatkan saran yang dipersonalisasi berdasarkan data diri dan keluhan Anda, dianalisis
+            dengan teknologi AI canggih.
+          </p>
+        </div>
+        <div className="bg-white p-6 rounded-lg shadow-md">
+          <h3 className="text-xl font-bold mb-2 text-blue-900">Temukan Bantuan Professional</h3>
+          <p>
+            Temukan faskes dan psikolog terdekat yang sesuai dengan kebutuhan Anda dengan mudah.
+          </p>
+        </div>
+        <div className="bg-white p-6 rounded-lg shadow-md">
+          <h3 className="text-xl font-bold mb-2 text-blue-900">Pelajari Lebih Dalam</h3>
+          <p>Akses informasi dan edukasi terpercaya tentang berbagai topik kesehatan mental.</p>
+        </div>
+      </div>
+    </section>
+  );
+};