Repository: macintushar/curiositi
Pull request #13: feat: better landing page in Web UI
Author: login: macintushar
Created: 2025-05-19T18:37:51Z | Merged: 2025-05-20T09:45:34Z



<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Introduced a comprehensive, redesigned landing page with multiple sections, including hero, features, how-it-works, use cases, pricing, header, and footer.
  - Added multiple new UI components such as feature cards, use case cards, pricing plan cards, themed logo, theme switcher, section layout, GitHub icon, accordion, and a versatile button component with multiple style variants and sizes.
  - Implemented theme switching and dark/light mode support with a new ThemeProvider and enhanced CSS theming using custom properties.
  - Added a new FAQ page with an interactive accordion for questions and answers.
  - Added fixed header and footer with responsive navigation and theme controls.
- **Chores**
  - Added new dependencies for UI components, theming, and utility functions.
  - Established configuration files for UI components and path aliases.
  - Introduced a utility function for optimized CSS class name merging.
  - Configured dynamic API request rewriting based on environment variables.
  - Added navigation and footer link constants with type definitions.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->


Diff:
diff --git a/clients/web/bun.lock b/clients/web/bun.lock
index b281351c..b8a043f5 100644
--- a/clients/web/bun.lock
+++ b/clients/web/bun.lock
@@ -4,10 +4,17 @@
     "": {
       "name": "web",
       "dependencies": {
+        "@radix-ui/react-accordion": "^1.2.10",
+        "@radix-ui/react-slot": "^1.2.2",
         "@t3-oss/env-nextjs": "^0.12.0",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "lucide-react": "^0.511.0",
         "next": "^15.2.3",
+        "next-themes": "^0.4.6",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
+        "tailwind-merge": "^3.3.0",
         "zod": "^3.24.2",
       },
       "devDependencies": {
@@ -22,6 +29,7 @@
         "prettier": "^3.5.3",
         "prettier-plugin-tailwindcss": "^0.6.11",
         "tailwindcss": "^4.0.15",
+        "tw-animate-css": "^1.3.0",
         "typescript": "^5.8.2",
         "typescript-eslint": "^8.27.0",
       },
@@ -148,6 +156,34 @@
 
     "@nolyfill/is-core-module": ["@nolyfill/is-core-module@1.0.39", "", {}, "sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA=="],
 
+    "@radix-ui/primitive": ["@radix-ui/primitive@1.1.2", "", {}, "sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA=="],
+
+    "@radix-ui/react-accordion": ["@radix-ui/react-accordion@1.2.10", "", { "dependencies": { "@radix-ui/primitive": "1.1.2", "@radix-ui/react-collapsible": "1.1.10", "@radix-ui/react-collection": "1.1.6", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-primitive": "2.1.2", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-x+URzV1siKmeXPSUIQ22L81qp2eOhjpy3tgteF+zOr4d1u0qJnFuyBF4MoQRhmKP6ivDxlvDAvqaF77gh7DOIw=="],
+
+    "@radix-ui/react-collapsible": ["@radix-ui/react-collapsible@1.1.10", "", { "dependencies": { "@radix-ui/primitive": "1.1.2", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-presence": "1.1.4", "@radix-ui/react-primitive": "2.1.2", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-O2mcG3gZNkJ/Ena34HurA3llPOEA/M4dJtIRMa6y/cknRDC8XY5UZBInKTsUwW5cUue9A4k0wi1XU5fKBzKe1w=="],
+
+    "@radix-ui/react-collection": ["@radix-ui/react-collection@1.1.6", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.2", "@radix-ui/react-slot": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-PbhRFK4lIEw9ADonj48tiYWzkllz81TM7KVYyyMMw2cwHO7D5h4XKEblL8NlaRisTK3QTe6tBEhDccFUryxHBQ=="],
+
+    "@radix-ui/react-compose-refs": ["@radix-ui/react-compose-refs@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg=="],
+
+    "@radix-ui/react-context": ["@radix-ui/react-context@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA=="],
+
+    "@radix-ui/react-direction": ["@radix-ui/react-direction@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw=="],
+
+    "@radix-ui/react-id": ["@radix-ui/react-id@1.1.1", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg=="],
+
+    "@radix-ui/react-presence": ["@radix-ui/react-presence@1.1.4", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA=="],
+
+    "@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.2", "", { "dependencies": { "@radix-ui/react-slot": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-uHa+l/lKfxuDD2zjN/0peM/RhhSmRjr5YWdk/37EnSv1nJ88uvG85DPexSm8HdFQROd2VdERJ6ynXbkCFi+APw=="],
+
+    "@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.2", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-y7TBO4xN4Y94FvcWIOIh18fM4R1A8S4q1jhoz4PNzOoHsFcN8pogcFmZrTYAm4F9VRUrWP/Mw7xSKybIeRI+CQ=="],
+
+    "@radix-ui/react-use-controllable-state": ["@radix-ui/react-use-controllable-state@1.2.2", "", { "dependencies": { "@radix-ui/react-use-effect-event": "0.0.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg=="],
+
+    "@radix-ui/react-use-effect-event": ["@radix-ui/react-use-effect-event@0.0.2", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA=="],
+
+    "@radix-ui/react-use-layout-effect": ["@radix-ui/react-use-layout-effect@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ=="],
+
     "@rtsao/scc": ["@rtsao/scc@1.1.0", "", {}, "sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g=="],
 
     "@rushstack/eslint-patch": ["@rushstack/eslint-patch@1.11.0", "", {}, "sha512-zxnHvoMQVqewTJr/W4pKjF0bMGiKJv1WX7bSrkl46Hg0QjESbzBROWK0Wg4RphzSOS5Jiy7eFimmM3UgMrMZbQ=="],
@@ -320,8 +356,12 @@
 
     "chownr": ["chownr@3.0.0", "", {}, "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g=="],
 
+    "class-variance-authority": ["class-variance-authority@0.7.1", "", { "dependencies": { "clsx": "^2.1.1" } }, "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg=="],
+
     "client-only": ["client-only@0.0.1", "", {}, "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="],
 
+    "clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
+
     "color": ["color@4.2.3", "", { "dependencies": { "color-convert": "^2.0.1", "color-string": "^1.9.0" } }, "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A=="],
 
     "color-convert": ["color-convert@2.0.1", "", { "dependencies": { "color-name": "~1.1.4" } }, "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ=="],
@@ -638,6 +678,8 @@
 
     "loose-envify": ["loose-envify@1.4.0", "", { "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" }, "bin": { "loose-envify": "cli.js" } }, "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q=="],
 
+    "lucide-react": ["lucide-react@0.511.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-VK5a2ydJ7xm8GvBeKLS9mu1pVK6ucef9780JVUjw6bAjJL/QXnd4Y0p7SPeOUMC27YhzNCZvm5d/QX0Tp3rc0w=="],
+
     "magic-string": ["magic-string@0.30.17", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0" } }, "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA=="],
 
     "math-intrinsics": ["math-intrinsics@1.1.0", "", {}, "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g=="],
@@ -676,6 +718,8 @@
 
     "next": ["next@15.3.2", "", { "dependencies": { "@next/env": "15.3.2", "@swc/counter": "0.1.3", "@swc/helpers": "0.5.15", "busboy": "1.6.0", "caniuse-lite": "^1.0.30001579", "postcss": "8.4.31", "styled-jsx": "5.1.6" }, "optionalDependencies": { "@next/swc-darwin-arm64": "15.3.2", "@next/swc-darwin-x64": "15.3.2", "@next/swc-linux-arm64-gnu": "15.3.2", "@next/swc-linux-arm64-musl": "15.3.2", "@next/swc-linux-x64-gnu": "15.3.2", "@next/swc-linux-x64-musl": "15.3.2", "@next/swc-win32-arm64-msvc": "15.3.2", "@next/swc-win32-x64-msvc": "15.3.2", "sharp": "^0.34.1" }, "peerDependencies": { "@opentelemetry/api": "^1.1.0", "@playwright/test": "^1.41.2", "babel-plugin-react-compiler": "*", "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "sass": "^1.3.0" }, "optionalPeers": ["@opentelemetry/api", "@playwright/test", "babel-plugin-react-compiler", "sass"], "bin": { "next": "dist/bin/next" } }, "sha512-CA3BatMyHkxZ48sgOCLdVHjFU36N7TF1HhqAHLFOkV6buwZnvMI84Cug8xD56B9mCuKrqXnLn94417GrZ/jjCQ=="],
 
+    "next-themes": ["next-themes@0.4.6", "", { "peerDependencies": { "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc", "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc" } }, "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA=="],
+
     "object-assign": ["object-assign@4.1.1", "", {}, "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="],
 
     "object-inspect": ["object-inspect@1.13.4", "", {}, "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew=="],
@@ -840,6 +884,8 @@
 
     "supports-preserve-symlinks-flag": ["supports-preserve-symlinks-flag@1.0.0", "", {}, "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="],
 
+    "tailwind-merge": ["tailwind-merge@3.3.0", "", {}, "sha512-fyW/pEfcQSiigd5SNn0nApUOxx0zB/dm6UDU/rEwc2c3sX2smWUNbapHv+QRqLGVp9GWX3THIa7MUGPo+YkDzQ=="],
+
     "tailwindcss": ["tailwindcss@4.1.6", "", {}, "sha512-j0cGLTreM6u4OWzBeLBpycK0WIh8w7kSwcUsQZoGLHZ7xDTdM69lN64AgoIEEwFi0tnhs4wSykUa5YWxAzgFYg=="],
 
     "tapable": ["tapable@2.2.1", "", {}, "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ=="],
@@ -858,6 +904,8 @@
 
     "tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
 
+    "tw-animate-css": ["tw-animate-css@1.3.0", "", {}, "sha512-jrJ0XenzS9KVuDThJDvnhalbl4IYiMQ/XvpA0a2FL8KmlK+6CSMviO7ROY/I7z1NnUs5NnDhlM6fXmF40xPxzw=="],
+
     "type-check": ["type-check@0.4.0", "", { "dependencies": { "prelude-ls": "^1.2.1" } }, "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew=="],
 
     "type-is": ["type-is@2.0.1", "", { "dependencies": { "content-type": "^1.0.5", "media-typer": "^1.1.0", "mime-types": "^3.0.0" } }, "sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw=="],
diff --git a/clients/web/components.json b/clients/web/components.json
new file mode 100644
index 00000000..a678827b
--- /dev/null
+++ b/clients/web/components.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}
\ No newline at end of file
diff --git a/clients/web/next.config.js b/clients/web/next.config.js
index 121c4f4c..c92af402 100644
--- a/clients/web/next.config.js
+++ b/clients/web/next.config.js
@@ -3,8 +3,17 @@
  * for Docker builds.
  */
 import "./src/env.js";
+import { env } from "./src/env.js";
 
 /** @type {import("next").NextConfig} */
-const config = {};
-
+const config = {
+  async rewrites() {
+    return [
+      {
+        source: "/api/v1/:path*",
+        destination: `${env.SERVER_URL}/api/v1/:path*`,
+      },
+    ];
+  },
+};
 export default config;
diff --git a/clients/web/package.json b/clients/web/package.json
index 89c38ab4..8f5ab5fc 100644
--- a/clients/web/package.json
+++ b/clients/web/package.json
@@ -16,10 +16,17 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.10",
+    "@radix-ui/react-slot": "^1.2.2",
     "@t3-oss/env-nextjs": "^0.12.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.511.0",
     "next": "^15.2.3",
+    "next-themes": "^0.4.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "tailwind-merge": "^3.3.0",
     "zod": "^3.24.2"
   },
   "devDependencies": {
@@ -34,6 +41,7 @@
     "prettier": "^3.5.3",
     "prettier-plugin-tailwindcss": "^0.6.11",
     "tailwindcss": "^4.0.15",
+    "tw-animate-css": "^1.3.0",
     "typescript": "^5.8.2",
     "typescript-eslint": "^8.27.0"
   },
diff --git a/clients/web/src/app/faq/page.tsx b/clients/web/src/app/faq/page.tsx
new file mode 100644
index 00000000..0940fe29
--- /dev/null
+++ b/clients/web/src/app/faq/page.tsx
@@ -0,0 +1,48 @@
+import Footer from "@/views/landing/footer";
+import Header from "@/views/landing/header";
+
+import { faqs } from "@/constants/faqs";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+
+export default function FAQPage() {
+  return (
+    <div className="flex min-h-screen w-full flex-col items-center">
+      <Header />
+      <main className="w-full flex-1 pt-4">
+        <section className="w-full py-20 md:py-32">
+          <div className="mx-auto max-w-3xl space-y-2 px-4 md:px-6">
+            <div className="flex flex-col gap-2 text-center">
+              <h1 className="text-gradient font-serif text-4xl font-medium tracking-tight md:text-5xl">
+                Frequently Asked Questions
+              </h1>
+              <p className="text-muted-foreground text-md max-w-2xl">
+                Curiositi combines your documents with live web data to deliver
+                context-aware answers using advanced AI and Retrieval-Augmented
+                Generation.
+              </p>
+            </div>
+            <div className="mt-6">
+              <Accordion type="multiple">
+                {faqs.map((faq, idx) => (
+                  <AccordionItem key={idx} value={faq.question}>
+                    <AccordionTrigger className="text-primary">
+                      {faq.question}
+                    </AccordionTrigger>
+                    <AccordionContent>{faq.answer}</AccordionContent>
+                  </AccordionItem>
+                ))}
+              </Accordion>
+            </div>
+          </div>
+        </section>
+      </main>
+      <Footer />
+    </div>
+  );
+}
diff --git a/clients/web/src/app/layout.tsx b/clients/web/src/app/layout.tsx
index 8d046043..68318df3 100644
--- a/clients/web/src/app/layout.tsx
+++ b/clients/web/src/app/layout.tsx
@@ -1,3 +1,4 @@
+import { ThemeProvider } from "@/components/themes/theme-provider";
 import { webMetaData } from "@/constants";
 import "@/styles/globals.css";
 
@@ -35,8 +36,18 @@ export default function RootLayout({
     <html
       lang="en"
       className={`${instrumentSans.variable} ${instrumentSerif.variable}`}
+      suppressHydrationWarning
     >
-      <body>{children}</body>
+      <body>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          {children}
+        </ThemeProvider>
+      </body>
     </html>
   );
 }
diff --git a/clients/web/src/app/page.tsx b/clients/web/src/app/page.tsx
index 5cda4643..2c5bff5b 100644
--- a/clients/web/src/app/page.tsx
+++ b/clients/web/src/app/page.tsx
@@ -1,19 +1,252 @@
 import Image from "next/image";
-import logo from "../assets/logo.svg";
 
-export default function HomePage() {
+import { Search, FileText, Globe, Zap, MessageSquare } from "lucide-react";
+
+import { Section } from "@/components/landing/section";
+import { FeatureCard } from "@/components/landing/feature-card";
+import { HowItWorksStep } from "@/components/landing/how-it-works-step";
+import { UseCaseCard } from "@/components/landing/use-case-card";
+import { PricingPlanCard } from "@/components/landing/pricing-plan-card";
+
+import { Button } from "@/components/ui/button";
+
+import agentFlowImage from "@/assets/images/agent-flow.png";
+import GithubIcon from "@/assets/icons/github-icon";
+import Header from "@/views/landing/header";
+import Footer from "@/views/landing/footer";
+
+import { ghURL } from "@/constants";
+
+export default function LandingPage() {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-center bg-emerald-950">
-      <div className="flex flex-col items-center justify-center gap-4 text-center">
-        {/* <h1 className="text-7xl font-extrabold text-white">curiositi</h1> */}
-        <Image src={logo as string} alt="curiositi" className="w-96" />
-        <h1 className="font-serif text-3xl text-stone-100">
-          Find what you need,{" "}
-          <span className="text-stone-100/50 italic">
-            anything from anywhere.
-          </span>
-        </h1>
-      </div>
-    </main>
+    <div className="flex min-h-screen w-full flex-col items-center scroll-smooth">
+      <Header />
+      <main className="w-full flex-1 pt-4">
+        <section className="w-full py-20 md:py-32 lg:py-40">
+          <div className="px-4 md:px-6">
+            <div className="animate-fade-up mx-auto max-w-3xl space-y-8 text-center">
+              <div className="bg-secondary text-secondary-foreground mb-4 inline-flex items-center justify-center gap-2 rounded-full px-3 py-1 text-sm font-medium">
+                <span>🎉</span>
+                <span>Introducing Curiositi!</span>
+                <span>🎉</span>
+              </div>
+              <h1 className="text-primary font-serif text-4xl font-medium tracking-tight text-balance md:text-5xl lg:text-6xl">
+                <span className="text-gradient">Get answers</span> from your
+                documents and the web
+              </h1>
+              <p className="text-muted-foreground mx-auto max-w-2xl text-xl">
+                Curiositi combines your documents with live web data to deliver
+                context-aware answers using advanced AI and Retrieval-Augmented
+                Generation.
+              </p>
+              <div className="flex flex-col justify-center gap-4 sm:flex-row">
+                <Button size="lg" className="rounded-full px-8">
+                  Try Curiositi Free
+                </Button>
+                <Button
+                  size="lg"
+                  variant="outline"
+                  className="rounded-full px-8"
+                >
+                  See Demo
+                </Button>
+              </div>
+            </div>
+
+            <div className="animate-fade-up animation-delay-200 mt-16 flex justify-center md:mt-24">
+              <div className="relative w-full max-w-4xl overflow-hidden rounded-lg border shadow-xl">
+                <div className="from-primary/10 to-primary/5 absolute inset-0 rounded-lg bg-gradient-to-br"></div>
+                <div className="bg-card relative h-full rounded-lg border-0 p-6">
+                  <div className="flex h-full flex-col">
+                    <div className="mb-6 flex items-center gap-2">
+                      <Search className="text-muted-foreground h-5 w-5" />
+                      <div className="bg-background flex-1 rounded-full px-4 py-2 text-sm">
+                        How does RAG improve AI responses?
+                      </div>
+                    </div>
+                    <div className="bg-background/50 mb-6 flex-1 rounded-lg p-6">
+                      <p className="text-sm leading-relaxed">
+                        Retrieval-Augmented Generation (RAG) improves AI
+                        responses by combining the power of large language
+                        models with specific information retrieval. When you ask
+                        a question, RAG first searches through your documents
+                        and the web to find relevant information, then uses this
+                        context to generate more accurate, up-to-date, and
+                        personalized answers.
+                      </p>
+                      <div className="border-border/40 mt-4 border-t pt-4">
+                        <p className="text-muted-foreground text-xs">
+                          Sources: Your Documents, Web Search (May 2025)
+                        </p>
+                      </div>
+                    </div>
+                    <div className="flex gap-2">
+                      <Button
+                        size="sm"
+                        variant="secondary"
+                        className="rounded-full"
+                      >
+                        <FileText className="mr-1 h-4 w-4" />
+                        Your Documents
+                      </Button>
+                      <Button
+                        size="sm"
+                        variant="secondary"
+                        className="rounded-full"
+                      >
+                        <Globe className="mr-1 h-4 w-4" />
+                        Web Data
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <Section
+          id="features"
+          className="bg-secondary/50"
+          title="Powerful AI with context-aware intelligence"
+          subtitle="Curiositi combines the best of AI language models with your data and the latest information from the web."
+          titlePrefix={
+            <div className="bg-primary/10 text-primary mb-2 inline-flex items-center justify-center rounded-full px-3 py-1 text-sm font-medium">
+              Features
+            </div>
+          }
+        >
+          <div className="mx-auto grid max-w-5xl items-start gap-8 py-12 md:grid-cols-3">
+            <FeatureCard
+              icon={<FileText className="h-6 w-6" />}
+              title="Document Intelligence"
+              description="Upload your documents, PDFs, spreadsheets, and presentations for instant insights and answers."
+              link="#"
+            />
+            <FeatureCard
+              icon={<Globe className="h-6 w-6" />}
+              title="Live Web Data"
+              description="Access real-time information from the web to complement your documents with the latest data."
+              link="#"
+            />
+            <FeatureCard
+              icon={<Zap className="h-6 w-6" />}
+              title="Hybrid RAG System"
+              description="Our advanced Retrieval-Augmented Generation system ensures precise, contextual answers every time."
+              link="#"
+            />
+          </div>
+        </Section>
+
+        <Section
+          id="how-it-works"
+          title="Retrieval-Augmented Generation"
+          subtitle="See how Curiositi combines your documents with web data to deliver precise answers."
+          titlePrefix={
+            <div className="bg-primary/10 text-primary mb-2 inline-flex items-center justify-center rounded-full px-3 py-1 text-sm font-medium">
+              How It Works
+            </div>
+          }
+        >
+          <div className="mx-auto grid max-w-5xl items-center gap-12 py-12 lg:grid-cols-2">
+            <div className="relative overflow-hidden rounded-xl border shadow-lg">
+              <div className="from-primary/5 absolute inset-0 bg-gradient-to-br to-transparent"></div>
+              <Image
+                src={agentFlowImage}
+                width={500}
+                height={400}
+                alt="RAG System Diagram"
+                className="h-auto w-full bg-white object-cover p-1"
+              />
+            </div>
+            <div className="space-y-8">
+              <HowItWorksStep
+                stepNumber={1}
+                title="Document Processing"
+                description="Upload your documents which are processed, indexed, and stored securely."
+              />
+              <HowItWorksStep
+                stepNumber={2}
+                title="Query Understanding"
+                description="When you ask a question, our AI understands the context and intent behind it."
+              />
+              <HowItWorksStep
+                stepNumber={3}
+                title="Retrieval"
+                description="The system retrieves relevant information from your documents and the web."
+              />
+              <HowItWorksStep
+                stepNumber={4}
+                title="Generation"
+                description="Using the retrieved context, our AI generates precise, tailored answers."
+              />
+            </div>
+          </div>
+        </Section>
+
+        <Section
+          id="use-cases"
+          className="bg-secondary/50"
+          title="How people are using Curiositi"
+          subtitle="Discover how Curiositi is transforming how people work with information."
+          titlePrefix={
+            <div className="bg-primary/10 text-primary mb-2 inline-flex items-center justify-center rounded-full px-3 py-1 text-sm font-medium">
+              Use Cases
+            </div>
+          }
+        >
+          <div className="mx-auto grid max-w-5xl gap-8 py-12 md:grid-cols-3">
+            <UseCaseCard
+              icon={<MessageSquare className="h-6 w-6" />}
+              title="Research & Analysis"
+              description="Use Curiositi to analyze documents and find connections across multiple sources, saving hours of manual work."
+            />
+            <UseCaseCard
+              icon={<MessageSquare className="h-6 w-6" />}
+              title="Knowledge Management"
+              description="Use Curiositi to make their internal knowledge bases accessible and actionable for all employees."
+            />
+            <UseCaseCard
+              icon={<MessageSquare className="h-6 w-6" />}
+              title="Study & Research"
+              description="Use Curiositi to research topics and generate content backed by accurate, up-to-date information based on their lectures, textbooks, and other documents."
+            />
+          </div>
+        </Section>
+
+        <Section
+          id="pricing"
+          title="Simple, transparent pricing"
+          subtitle="Choose the plan that's right for you and start getting better answers today."
+          titlePrefix={
+            <div className="bg-primary/10 text-primary mb-2 inline-flex items-center justify-center rounded-full px-3 py-1 text-sm font-medium">
+              Pricing
+            </div>
+          }
+        >
+          <div className="mx-auto flex max-w-5xl justify-center py-12">
+            <PricingPlanCard
+              title="Free"
+              description="Use Curiositi for free by deploying your own instance"
+              price=""
+              priceSuffix=""
+              features={[
+                "Upload unlimited documents",
+                "Unlimited queries",
+                "Unlimited web retrieval",
+                "Bring your own models",
+                "Own your data, forever",
+              ]}
+              ctaText="GitHub"
+              CtaExtra={<GithubIcon />}
+              ctaHref={ghURL}
+              className="w-full md:w-1/3"
+              ctaHrefExternal
+            />
+          </div>
+        </Section>
+      </main>
+      <Footer />
+    </div>
   );
 }
diff --git a/clients/web/src/assets/icons/github-icon.tsx b/clients/web/src/assets/icons/github-icon.tsx
new file mode 100644
index 00000000..cc7b3f43
--- /dev/null
+++ b/clients/web/src/assets/icons/github-icon.tsx
@@ -0,0 +1,13 @@
+export default function GithubIcon() {
+  return (
+    <svg
+      role="img"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      className="fill-white dark:fill-black"
+    >
+      <title>GitHub</title>
+      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+    </svg>
+  );
+}
diff --git a/clients/web/src/assets/images/agent-flow.png b/clients/web/src/assets/images/agent-flow.png
new file mode 100644
index 00000000..e004fcad
Binary files /dev/null and b/clients/web/src/assets/images/agent-flow.png differ
diff --git a/clients/web/src/assets/logo.svg b/clients/web/src/assets/logo.svg
deleted file mode 100644
index f17bb812..00000000
--- a/clients/web/src/assets/logo.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg width="345" height="80" viewBox="0 0 345 80" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M60.8727 62.3295V79.0559H65.6V62.3295C64.8258 62.4263 64.0369 62.4762 63.2364 62.4762C62.4359 62.4762 61.6469 62.4263 60.8727 62.3295ZM68.2245 61.8099L74.9553 78.1233L79.3239 76.3131L72.5926 59.998C71.233 60.7751 69.7682 61.388 68.2245 61.8099ZM74.8316 58.4966L90.4182 74.1158L93.761 70.766L78.1744 55.147C77.204 56.3982 76.0799 57.5241 74.8316 58.4966ZM79.6678 52.9116L108.626 64.9317L110.436 60.5555L81.4779 48.536C81.056 50.0823 80.4438 51.55 79.6678 52.9116ZM81.9991 45.8965H126V41.1594H81.9991C82.0956 41.9353 82.1455 42.7258 82.1455 43.528C82.1455 44.3301 82.0956 45.1206 81.9991 45.8965ZM81.4779 38.5202L110.436 26.5004L108.626 22.1242L79.6673 34.1439C80.4434 35.5058 81.056 36.9736 81.4779 38.5202ZM78.1739 31.9086L93.761 16.2899L90.4182 12.9401L74.8316 28.5591C76.0799 29.5316 77.2035 30.6575 78.1739 31.9086ZM72.5921 27.0579L79.3239 10.7428L74.9553 8.93261L68.2245 25.246C69.7682 25.6679 71.2326 26.2808 72.5921 27.0579ZM65.6 24.7264V8H60.8727V24.7264C61.6469 24.6296 62.4359 24.5797 63.2364 24.5797C64.0369 24.5797 64.8258 24.6296 65.6 24.7264ZM58.2483 25.246L51.5174 8.93261L47.1489 10.7428L53.8801 27.058C55.2397 26.2808 56.7045 25.6679 58.2483 25.246ZM51.6412 28.5593L35.8182 12.7033L32.4754 16.053L48.2984 31.9089C49.2688 30.6577 50.3929 29.5318 51.6412 28.5593ZM46.8049 34.1442L17.8462 22.1242L16.037 26.5004L44.9948 38.5202C45.4168 36.9736 46.0289 35.5061 46.8049 34.1442ZM44.4736 41.1594H0V45.8965H44.4736C44.3771 45.1206 44.3273 44.3301 44.3273 43.528C44.3273 42.7258 44.3771 41.9353 44.4736 41.1594ZM44.9948 48.536L16.037 60.5555L17.8462 64.9317L46.8049 52.9115C46.0289 51.5498 45.4168 50.0823 44.9948 48.536ZM48.2984 55.1469L32.4754 71.0029L35.8182 74.3526L51.6407 58.4965C50.3924 57.524 49.2688 56.398 48.2984 55.1469ZM51.5174 78.1233L58.2483 61.8099C56.7045 61.388 55.2397 60.775 53.8801 59.9978L47.1489 76.3131L51.5174 78.1233Z" fill="#059669"/>
-<path d="M77.4182 43.528C77.4182 35.6793 71.0688 29.3168 63.2364 29.3168C55.404 29.3168 49.0545 35.6793 49.0545 43.528C49.0545 51.3766 55.404 57.7391 63.2364 57.7391V62.4762C52.7932 62.4762 44.3273 53.9928 44.3273 43.528C44.3273 33.0631 52.7932 24.5797 63.2364 24.5797C73.6796 24.5797 82.1455 33.0631 82.1455 43.528C82.1455 53.9928 73.6796 62.4762 63.2364 62.4762V57.7391C71.0688 57.7391 77.4182 51.3766 77.4182 43.528Z" fill="#059669"/>
-<path d="M53.3091 43.528C53.3091 38.0339 57.7537 33.5801 63.2364 33.5801V38.3172C60.3645 38.3172 58.0364 40.6501 58.0364 43.528C58.0364 46.4058 60.3645 48.7387 63.2364 48.7387V53.4758C57.7537 53.4758 53.3091 49.022 53.3091 43.528Z" fill="#059669"/>
-<path d="M162.074 58.4646C157.661 58.4646 154.138 57.0128 151.505 54.1091C148.911 51.1668 147.614 47.5856 147.614 43.3656C147.614 39.1457 148.911 35.5839 151.505 32.6802C154.138 29.7379 157.661 28.2667 162.074 28.2667C165.597 28.2667 168.636 29.2346 171.192 31.1703C173.786 33.1061 175.276 35.7 175.663 38.9521H170.03C169.759 37.2873 168.888 35.9129 167.417 34.8289C165.946 33.7449 164.204 33.2029 162.19 33.2029C159.403 33.2029 157.254 34.1708 155.744 36.1065C154.234 38.0036 153.479 40.4233 153.479 43.3656C153.479 46.308 154.234 48.7471 155.744 50.6828C157.293 52.5799 159.461 53.5284 162.248 53.5284C164.223 53.5284 165.907 53.0444 167.301 52.0766C168.694 51.1087 169.624 49.7924 170.088 48.1276H175.663C175.199 51.2248 173.747 53.722 171.308 55.619C168.869 57.5161 165.791 58.4646 162.074 58.4646ZM205.554 28.7313V58H199.921V52.8315C199.147 54.6511 197.927 56.0449 196.262 57.0128C194.598 57.9806 192.662 58.4646 190.455 58.4646C187.164 58.4646 184.512 57.3806 182.499 55.2125C180.525 53.0444 179.537 50.2182 179.537 46.7339V28.7313H185.17V45.6305C185.17 47.9534 185.79 49.8311 187.029 51.2635C188.306 52.696 189.971 53.4122 192.023 53.4122C194.307 53.4122 196.185 52.5799 197.656 50.9151C199.166 49.2504 199.921 47.1404 199.921 44.5852V28.7313H205.554ZM224.72 33.6094C219.997 33.6094 217.635 37.3261 217.635 44.7594V58H212.002V28.7313H217.635V34.3643C218.293 32.3899 219.242 30.9574 220.481 30.0669C221.719 29.1765 223.365 28.7313 225.417 28.7313H228.959V33.6094H224.72ZM232.094 58V28.7313H237.727V58H232.094ZM231.745 16.4779H238.017V23.5628H231.745V16.4779ZM268.115 54.2253C265.289 57.0515 261.689 58.4646 257.314 58.4646C252.939 58.4646 249.319 57.0515 246.454 54.2253C243.628 51.3603 242.215 47.7405 242.215 43.3656C242.215 38.9908 243.628 35.3903 246.454 32.5641C249.319 29.6991 252.939 28.2667 257.314 28.2667C261.689 28.2667 265.289 29.6991 268.115 32.5641C270.941 35.3903 272.355 38.9908 272.355 43.3656C272.355 47.7405 270.941 51.3603 268.115 54.2253ZM257.314 53.5284C260.063 53.5284 262.289 52.5799 263.992 50.6828C265.734 48.7858 266.605 46.3467 266.605 43.3656C266.605 40.3846 265.734 37.9455 263.992 36.0484C262.289 34.1514 260.063 33.2029 257.314 33.2029C254.526 33.2029 252.261 34.1514 250.519 36.0484C248.816 37.9455 247.964 40.3846 247.964 43.3656C247.964 46.3467 248.816 48.7858 250.519 50.6828C252.261 52.5799 254.526 53.5284 257.314 53.5284ZM286.569 58.4646C283.124 58.4646 280.336 57.5741 278.207 55.7932C276.077 54.0123 274.916 51.5733 274.722 48.476H280.007C280.162 50.1408 280.801 51.4378 281.923 52.3669C283.085 53.2961 284.634 53.7607 286.569 53.7607C288.195 53.7607 289.512 53.3735 290.518 52.5992C291.564 51.8249 292.086 50.8958 292.086 49.8117C292.086 48.418 291.505 47.392 290.344 46.7339C289.221 46.037 287.847 45.5918 286.221 45.3982C284.595 45.1659 282.969 44.8755 281.343 44.5271C279.717 44.1399 278.323 43.3269 277.161 42.088C276.039 40.8104 275.477 39.0102 275.477 36.6873C275.477 34.1708 276.445 32.1382 278.381 30.5896C280.317 29.041 282.814 28.2667 285.872 28.2667C289.163 28.2667 291.835 29.1184 293.886 30.8219C295.977 32.4866 297.119 34.6934 297.313 37.4422H291.97C291.776 35.8936 291.06 34.7321 289.821 33.9578C288.621 33.1448 287.305 32.7383 285.872 32.7383C284.324 32.7383 283.085 33.0867 282.156 33.7836C281.227 34.4805 280.762 35.3903 280.762 36.513C280.762 37.8294 281.343 38.7779 282.504 39.3586C283.666 39.9393 285.059 40.3265 286.685 40.5201C288.311 40.6749 289.938 40.9459 291.564 41.3331C293.228 41.7202 294.641 42.5913 295.803 43.9464C296.964 45.3014 297.545 47.2178 297.545 49.6956C297.545 52.3669 296.538 54.4963 294.525 56.0836C292.551 57.6709 289.899 58.4646 286.569 58.4646ZM302.18 58V28.7313H307.814V58H302.18ZM301.832 16.4779H308.104V23.5628H301.832V16.4779ZM326.529 58C323.548 58 321.167 57.1483 319.386 55.4448C317.644 53.7413 316.773 51.399 316.773 48.418V33.6094H310.792V28.7313H315.089C316.212 28.7313 316.773 28.1699 316.773 27.0472V19.5557H322.406V28.7313H331.059V33.6094H322.406V48.2438C322.406 49.7924 322.813 50.9925 323.626 51.8443C324.439 52.696 325.542 53.1219 326.936 53.1219H331.059V58H326.529ZM334.878 58V28.7313H340.511V58H334.878ZM334.53 16.4779H340.802V23.5628H334.53V16.4779Z" fill="white"/>
-</svg>
diff --git a/clients/web/src/components/landing/feature-card.tsx b/clients/web/src/components/landing/feature-card.tsx
new file mode 100644
index 00000000..b7311062
--- /dev/null
+++ b/clients/web/src/components/landing/feature-card.tsx
@@ -0,0 +1,37 @@
+import Link from "next/link";
+import { ArrowRight } from "lucide-react";
+import React from "react";
+
+interface FeatureCardProps {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+  link: string;
+}
+
+export function FeatureCard({
+  icon,
+  title,
+  description,
+  link,
+}: FeatureCardProps) {
+  return (
+    <div className="group hover:bg-background flex flex-col space-y-4 rounded-lg p-6 transition-all">
+      <div className="bg-primary/10 flex h-12 w-12 items-center justify-center rounded-lg text-emerald-700">
+        {icon}
+      </div>
+      <div className="space-y-2">
+        <h3 className="text-xl font-medium">{title}</h3>
+        <p className="text-muted-foreground">{description}</p>
+      </div>
+      <div className="mt-auto pt-2">
+        <Link
+          href={link}
+          className="text-primary inline-flex items-center text-sm font-medium"
+        >
+          Learn more <ArrowRight className="ml-1 h-4 w-4" />
+        </Link>
+      </div>
+    </div>
+  );
+}
diff --git a/clients/web/src/components/landing/how-it-works-step.tsx b/clients/web/src/components/landing/how-it-works-step.tsx
new file mode 100644
index 00000000..3f680d94
--- /dev/null
+++ b/clients/web/src/components/landing/how-it-works-step.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+
+interface HowItWorksStepProps {
+  stepNumber: number;
+  title: string;
+  description: string;
+}
+
+export function HowItWorksStep({
+  stepNumber,
+  title,
+  description,
+}: HowItWorksStepProps) {
+  return (
+    <div className="flex items-start gap-4">
+      <div className="bg-primary text-primary-foreground flex h-8 w-8 shrink-0 items-center justify-center rounded-full">
+        {stepNumber}
+      </div>
+      <div className="space-y-1">
+        <h3 className="text-xl font-medium">{title}</h3>
+        <p className="text-muted-foreground">{description}</p>
+      </div>
+    </div>
+  );
+}
diff --git a/clients/web/src/components/landing/pricing-plan-card.tsx b/clients/web/src/components/landing/pricing-plan-card.tsx
new file mode 100644
index 00000000..3708ba43
--- /dev/null
+++ b/clients/web/src/components/landing/pricing-plan-card.tsx
@@ -0,0 +1,93 @@
+import { Button } from "@/components/ui/button";
+import type { LucideIcon } from "lucide-react";
+import Link from "next/link";
+import React from "react";
+
+interface PricingPlanCardProps {
+  title: string;
+  description: string;
+  price: string;
+  priceSuffix?: string;
+  features: string[];
+  isPopular?: boolean;
+  ctaText: string;
+  CtaExtra?: React.ReactNode;
+  CtaIcon?: LucideIcon;
+  ctaVariant?: "default" | "outline";
+  ctaHref?: string;
+  ctaHrefExternal?: boolean;
+  className?: string;
+}
+
+const CheckIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="text-primary mr-3 h-4 w-4"
+  >
+    <polyline points="20 6 9 17 4 12"></polyline>
+  </svg>
+);
+
+export function PricingPlanCard({
+  title,
+  description,
+  price,
+  priceSuffix = " /month",
+  features,
+  isPopular,
+  ctaText,
+  CtaExtra,
+  CtaIcon,
+  ctaVariant = "default",
+  ctaHref,
+  ctaHrefExternal = false,
+  className,
+}: PricingPlanCardProps) {
+  return (
+    <div
+      className={`bg-card rounded-lg border p-8 shadow-sm transition-all hover:shadow-md ${isPopular ? "relative shadow-lg hover:shadow-xl" : ""} ${className}`}
+    >
+      {isPopular && (
+        <div className="bg-primary text-primary-foreground absolute -top-4 right-0 left-0 mx-auto w-fit rounded-full px-4 py-1 text-sm font-medium">
+          Most Popular
+        </div>
+      )}
+      <div className="mb-6">
+        <h3 className="text-xl font-medium">{title}</h3>
+        <p className="text-muted-foreground mt-1">{description}</p>
+      </div>
+      <div className="mb-6">
+        <span className="text-4xl font-medium">{price}</span>
+        {price !== "Custom" && (
+          <span className="text-muted-foreground">{priceSuffix}</span>
+        )}
+      </div>
+      <ul className="mb-8 space-y-3">
+        {features.map((feature, index) => (
+          <li key={index} className="flex items-center">
+            <CheckIcon />
+            <span>{feature}</span>
+          </li>
+        ))}
+      </ul>
+      <Link href={ctaHref ?? "#"} target={ctaHrefExternal ? "_blank" : "_self"}>
+        <Button
+          variant={ctaVariant}
+          className={`w-full rounded-full ${ctaHrefExternal ? "cursor-pointer" : ""}`}
+        >
+          {CtaIcon && <CtaIcon className="h-4 w-4" />}
+          {CtaExtra && CtaExtra}
+          {ctaText}
+        </Button>
+      </Link>
+    </div>
+  );
+}
diff --git a/clients/web/src/components/landing/section.tsx b/clients/web/src/components/landing/section.tsx
new file mode 100644
index 00000000..ed82f747
--- /dev/null
+++ b/clients/web/src/components/landing/section.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+
+interface SectionProps {
+  id?: string;
+  className?: string;
+  title: string;
+  subtitle: string;
+  titlePrefix?: React.ReactNode;
+  children: React.ReactNode;
+}
+
+export function Section({
+  id,
+  className,
+  title,
+  subtitle,
+  titlePrefix,
+  children,
+}: SectionProps) {
+  return (
+    <section id={id} className={`w-full py-20 md:py-32 ${className}`}>
+      <div className="px-4 md:px-6">
+        <div className="flex flex-col items-center justify-center space-y-4 text-center">
+          <div className="max-w-3xl space-y-2">
+            {titlePrefix}
+            <h2 className="font-serif text-3xl font-medium tracking-tight text-emerald-700 md:text-4xl">
+              {title}
+            </h2>
+            <p className="text-muted-foreground text-xl">{subtitle}</p>
+          </div>
+        </div>
+        {children}
+      </div>
+    </section>
+  );
+}
diff --git a/clients/web/src/components/landing/use-case-card.tsx b/clients/web/src/components/landing/use-case-card.tsx
new file mode 100644
index 00000000..021aded4
--- /dev/null
+++ b/clients/web/src/components/landing/use-case-card.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+interface UseCaseCardProps {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+}
+
+export function UseCaseCard({ icon, title, description }: UseCaseCardProps) {
+  return (
+    <div className="group bg-card h-full rounded-lg border p-6 shadow-sm transition-all hover:shadow-md">
+      <div className="bg-primary/10 mb-6 flex h-12 w-12 items-center justify-center rounded-lg text-emerald-700">
+        {icon}
+      </div>
+      <h3 className="text-xl font-medium">{title}</h3>
+      <p className="text-muted-foreground mb-6">{description}</p>
+    </div>
+  );
+}
diff --git a/clients/web/src/components/themes/theme-provider.tsx b/clients/web/src/components/themes/theme-provider.tsx
new file mode 100644
index 00000000..189a2b1a
--- /dev/null
+++ b/clients/web/src/components/themes/theme-provider.tsx
@@ -0,0 +1,11 @@
+"use client";
+
+import * as React from "react";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+
+export function ThemeProvider({
+  children,
+  ...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}
diff --git a/clients/web/src/components/themes/theme-switcher.tsx b/clients/web/src/components/themes/theme-switcher.tsx
new file mode 100644
index 00000000..911b7688
--- /dev/null
+++ b/clients/web/src/components/themes/theme-switcher.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { SunMoonIcon } from "lucide-react";
+import { useTheme } from "next-themes";
+
+export default function ThemeSwitcher() {
+  const { theme, setTheme } = useTheme();
+  return (
+    <Button
+      size="icon"
+      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+      variant="outline"
+      className="cursor-pointer rounded-full"
+    >
+      <span className="sr-only">Toggle theme</span>
+      <SunMoonIcon />
+    </Button>
+  );
+}
diff --git a/clients/web/src/components/themes/themed-logo.tsx b/clients/web/src/components/themes/themed-logo.tsx
new file mode 100644
index 00000000..58b1a113
--- /dev/null
+++ b/clients/web/src/components/themes/themed-logo.tsx
@@ -0,0 +1,14 @@
+"use client";
+
+import Image from "next/image";
+
+import logo from "@/assets/icon.svg";
+
+export default function ThemedLogo({ height = 28 }: { height?: number }) {
+  return (
+    <div className="flex items-center gap-2">
+      <Image src={logo as string} alt="Curiositi" height={height} />
+      <span className="text-lg text-black dark:text-white">Curiositi</span>
+    </div>
+  );
+}
diff --git a/clients/web/src/components/ui/accordion.tsx b/clients/web/src/components/ui/accordion.tsx
new file mode 100644
index 00000000..4a8cca46
--- /dev/null
+++ b/clients/web/src/components/ui/accordion.tsx
@@ -0,0 +1,66 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDownIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
diff --git a/clients/web/src/components/ui/button.tsx b/clients/web/src/components/ui/button.tsx
new file mode 100644
index 00000000..a2df8dce
--- /dev/null
+++ b/clients/web/src/components/ui/button.tsx
@@ -0,0 +1,59 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
diff --git a/clients/web/src/constants.ts b/clients/web/src/constants.ts
index 4b9eed58..b894c2b9 100644
--- a/clients/web/src/constants.ts
+++ b/clients/web/src/constants.ts
@@ -1,7 +1,28 @@
 import { env } from "./env";
+import type { NavLink } from "./types";
 
 export const webMetaData = {
   siteName: "Curiositi",
   description: "Curiositi is an AI-powered search engine for your data.",
   url: env.BASE_URL,
 };
+
+export const ghURL = "https://github.com/macintushar/curiositi";
+
+export const navLinks: NavLink[] = [
+  { href: "/#features", label: "Features", isExternal: false },
+  { href: "/#how-it-works", label: "How It Works", isExternal: false },
+  { href: "/#use-cases", label: "Use Cases", isExternal: false },
+  { href: "/#pricing", label: "Pricing", isExternal: false },
+  { href: "/faq", label: "FAQ", isExternal: false },
+];
+
+export const footerLinks: NavLink[] = [
+  { href: "/#features", label: "Features", isExternal: false },
+  { href: "/faq", label: "FAQ", isExternal: false },
+  {
+    href: ghURL,
+    label: "GitHub",
+    isExternal: true,
+  },
+];
diff --git a/clients/web/src/constants/faqs.ts b/clients/web/src/constants/faqs.ts
new file mode 100644
index 00000000..77d9d77c
--- /dev/null
+++ b/clients/web/src/constants/faqs.ts
@@ -0,0 +1,51 @@
+export interface FAQ {
+  question: string;
+  answer: string;
+}
+
+export const faqs: FAQ[] = [
+  {
+    question: "What are Spaces in Curiositi?",
+    answer:
+      "Spaces are isolated environments for organizing and querying your documents. Each space acts as a separate knowledge base, allowing you to group related documents together and perform targeted searches within that context.",
+  },
+  {
+    question: "How do documents in a Space work?",
+    answer:
+      "When you upload documents to a Space, they are processed, split into chunks, and embedded into a vector store. This allows for semantic search and retrieval of relevant content when you ask questions. Each document maintains its association with the Space it belongs to.",
+  },
+  {
+    question: "Can I use multiple Spaces?",
+    answer:
+      "Yes! You can create multiple Spaces to organize different types of documents or topics. For example, you might have separate Spaces for technical documentation, research papers, and business reports.",
+  },
+  {
+    question: "What happens when I upload a file?",
+    answer:
+      "When you upload a file, Curiositi processes it by: 1) Validating the file type and format, 2) Extracting and cleaning the text content, 3) Splitting it into manageable chunks, 4) Generating embeddings for each chunk, and 5) Storing both the original file and its processed form.",
+  },
+  {
+    question: "What file types can I upload?",
+    answer: "Curiositi supports PDF, plain text, CSV, and Markdown files.",
+  },
+  {
+    question: "How do I create and organize Spaces?",
+    answer:
+      "Use the Spaces API endpoint to create named spaces, then upload your documents into each space to keep your data organized and queries scoped appropriately.",
+  },
+  {
+    question: "Which LLM and embedding providers are available?",
+    answer:
+      "Curiositi supports Ollama and OpenAI for both embeddings and completion. Configure your preferred providers via environment variables (DEFAULT_EMBEDDING_PROVIDER, OPENAI_API_KEY, OLLAMA_BASE_URL).",
+  },
+  {
+    question: "How does the Retrieval-Augmented Generation (RAG) system work?",
+    answer:
+      "The agent determines whether to answer directly or retrieve context. In space mode, it searches your uploaded documents; in general mode, it queries the web via SearXNG, then synthesizes a final response.",
+  },
+  {
+    question: "How do I perform a search?",
+    answer:
+      "Use the POST /api/v1/search endpoint with your input, model, session_id, space_id, provider, and thread_id to search within a space. For web-only queries, use POST /api/v1/search/general without space_id.",
+  },
+];
diff --git a/clients/web/src/lib/utils.ts b/clients/web/src/lib/utils.ts
new file mode 100644
index 00000000..bd0c391d
--- /dev/null
+++ b/clients/web/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
diff --git a/clients/web/src/styles/globals.css b/clients/web/src/styles/globals.css
index 24ab4b9c..466d0384 100644
--- a/clients/web/src/styles/globals.css
+++ b/clients/web/src/styles/globals.css
@@ -1,4 +1,7 @@
 @import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
 
 @theme {
   --font-sans:
@@ -9,3 +12,166 @@
     var(--font-instrument-serif), ui-serif, serif, "Apple Color Emoji",
     "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.21 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.21 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.21 0 0);
+  --primary: oklch(0.51 0.11 163.39);
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.39 0.08 156.98);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.5 0.01 271.25);
+  --accent: oklch(0.98 0.01 164.66);
+  --accent-foreground: oklch(0.39 0.08 156.98);
+  --destructive: oklch(0.64 0.21 25.39);
+  --border: oklch(0.93 0.01 261.82);
+  --input: oklch(0.93 0.01 261.82);
+  --ring: oklch(0.64 0.14 155.84);
+  --chart-1: oklch(0.65 0.22 36.49);
+  --chart-2: oklch(0.6 0.11 184.09);
+  --chart-3: oklch(0.4 0.07 227.04);
+  --chart-4: oklch(0.83 0.17 80.74);
+  --chart-5: oklch(0.77 0.17 65.49);
+  --sidebar: oklch(0.99 0 0);
+  --sidebar-foreground: oklch(0.14 0 0);
+  --sidebar-primary: oklch(0.2 0 0);
+  --sidebar-primary-foreground: oklch(0.99 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.2 0 0);
+  --sidebar-border: oklch(0.92 0 0);
+  --sidebar-ring: oklch(0.71 0 0);
+
+  --radius: 0.5rem;
+
+  --shadow-2xs: 0 1px 3px 0px oklch(0 0 0 / 0.01);
+  --shadow-xs: 0 1px 3px 0px oklch(0 0 0 / 0.01);
+  --shadow-sm:
+    0 1px 3px 0px oklch(0 0 0 / 0.03), 0 1px 2px -1px oklch(0 0 0 / 0.03);
+  --shadow:
+    0 1px 3px 0px oklch(0 0 0 / 0.03), 0 1px 2px -1px oklch(0 0 0 / 0.03);
+  --shadow-md:
+    0 1px 3px 0px oklch(0 0 0 / 0.03), 0 2px 4px -1px oklch(0 0 0 / 0.03);
+  --shadow-lg:
+    0 1px 3px 0px oklch(0 0 0 / 0.03), 0 4px 6px -1px oklch(0 0 0 / 0.03);
+  --shadow-xl:
+    0 1px 3px 0px oklch(0 0 0 / 0.03), 0 8px 10px -1px oklch(0 0 0 / 0.03);
+  --shadow-2xl: 0 1px 3px 0px oklch(0 0 0 / 0.07);
+}
+
+.dark {
+  --background: oklch(0.14 0 0);
+  --foreground: oklch(0.95 0 0);
+  --card: oklch(0.17 0 0);
+  --card-foreground: oklch(0.95 0 0);
+  --popover: oklch(0.14 0 0);
+  --popover-foreground: oklch(0.95 0 0);
+  --primary: oklch(0.64 0.14 155.84);
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(0.25 0.02 162.79);
+  --secondary-foreground: oklch(0.95 0 0);
+  --muted: oklch(0.24 0.01 163.9);
+  --muted-foreground: oklch(0.72 0.01 258.36);
+  --accent: oklch(0.25 0.02 162.79);
+  --accent-foreground: oklch(0.95 0 0);
+  --destructive: oklch(0.4 0.13 25.81);
+  --border: oklch(0.27 0.01 248.17);
+  --input: oklch(0.27 0.01 248.17);
+  --ring: oklch(0.64 0.14 155.84);
+  --chart-1: oklch(0.49 0.24 264.41);
+  --chart-2: oklch(0.7 0.16 159.71);
+  --chart-3: oklch(0.77 0.17 65.49);
+  --chart-4: oklch(0.62 0.26 305.39);
+  --chart-5: oklch(0.64 0.25 16.38);
+  --sidebar: oklch(0.2 0 0);
+  --sidebar-foreground: oklch(0.99 0 0);
+  --sidebar-primary: oklch(0.49 0.24 264.41);
+  --sidebar-primary-foreground: oklch(0.99 0 0);
+  --sidebar-accent: oklch(0.27 0 0);
+  --sidebar-accent-foreground: oklch(0.99 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.56 0 0);
+
+  --shadow-2xs: 0 1px 3px 0px oklch(0 0 0 / 0.01);
+  --shadow-xs: 0 1px 3px 0px oklch(0 0 0 / 0.01);
+  --shadow-sm:
+    0 1px 3px 0px oklch(0 0 0 / 0.03), 0 1px 2px -1px oklch(0 0 0 / 0.03);
+  --shadow:
+    0 1px 3px 0px oklch(0 0 0 / 0.03), 0 1px 2px -1px oklch(0 0 0 / 0.03);
+  --shadow-md:
+    0 1px 3px 0px oklch(0 0 0 / 0.03), 0 2px 4px -1px oklch(0 0 0 / 0.03);
+  --shadow-lg:
+    0 1px 3px 0px oklch(0 0 0 / 0.03), 0 4px 6px -1px oklch(0 0 0 / 0.03);
+  --shadow-xl:
+    0 1px 3px 0px oklch(0 0 0 / 0.03), 0 8px 10px -1px oklch(0 0 0 / 0.03);
+  --shadow-2xl: 0 1px 3px 0px oklch(0 0 0 / 0.07);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  --shadow-2xs: var(--shadow-2xs);
+  --shadow-xs: var(--shadow-xs);
+  --shadow-sm: var(--shadow-sm);
+  --shadow: var(--shadow);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-xl: var(--shadow-xl);
+  --shadow-2xl: var(--shadow-2xl);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+  .text-gradient {
+    @apply from-primary to-primary/70 bg-gradient-to-r bg-clip-text text-transparent;
+  }
+}
diff --git a/clients/web/src/types.ts b/clients/web/src/types.ts
new file mode 100644
index 00000000..760724e3
--- /dev/null
+++ b/clients/web/src/types.ts
@@ -0,0 +1,5 @@
+export type NavLink = {
+  href: string;
+  label: string;
+  isExternal: boolean;
+};
diff --git a/clients/web/src/views/landing/NavLink.tsx b/clients/web/src/views/landing/NavLink.tsx
new file mode 100644
index 00000000..1c89e4c5
--- /dev/null
+++ b/clients/web/src/views/landing/NavLink.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+export default function NavLink({
+  href,
+  label,
+}: {
+  href: string;
+  label: string;
+}) {
+  const currentPath = usePathname();
+  return (
+    <Link
+      href={href}
+      className={`text-muted-foreground hover:text-foreground text-sm font-medium transition-colors ${
+        currentPath === href ? "active text-primary" : ""
+      }`}
+    >
+      {label}
+    </Link>
+  );
+}
diff --git a/clients/web/src/views/landing/footer.tsx b/clients/web/src/views/landing/footer.tsx
new file mode 100644
index 00000000..15b85903
--- /dev/null
+++ b/clients/web/src/views/landing/footer.tsx
@@ -0,0 +1,48 @@
+import ThemedLogo from "@/components/themes/themed-logo";
+import Link from "next/link";
+import { footerLinks } from "@/constants";
+
+export default function Footer() {
+  return (
+    <footer className="bg-background w-full border-t">
+      <div className="flex flex-col gap-8 px-4 py-8 md:px-6">
+        <div className="flex flex-col items-start gap-4 md:flex-row md:items-center md:gap-8">
+          <Link href="/" className="flex items-center gap-2">
+            <ThemedLogo />
+          </Link>
+          <nav className="flex flex-wrap gap-6 md:ml-auto">
+            {footerLinks.map((link) => (
+              <Link
+                key={link.href + link.label}
+                href={link.href}
+                className="text-muted-foreground hover:text-foreground text-sm transition-colors"
+                target={link.isExternal ? "_blank" : "_self"}
+              >
+                {link.label}
+              </Link>
+            ))}
+          </nav>
+        </div>
+        <div className="flex flex-col items-start justify-between gap-4 md:flex-row md:items-center">
+          <p className="text-muted-foreground text-xs">
+            &copy; {new Date().getFullYear()} Curiositi. All rights reserved.
+          </p>
+          <div className="flex gap-6">
+            <Link
+              href="#"
+              className="text-muted-foreground hover:text-foreground text-xs transition-colors"
+            >
+              Terms of Service
+            </Link>
+            <Link
+              href="#"
+              className="text-muted-foreground hover:text-foreground text-xs transition-colors"
+            >
+              Privacy Policy
+            </Link>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
diff --git a/clients/web/src/views/landing/header.tsx b/clients/web/src/views/landing/header.tsx
new file mode 100644
index 00000000..242ca099
--- /dev/null
+++ b/clients/web/src/views/landing/header.tsx
@@ -0,0 +1,37 @@
+import Link from "next/link";
+
+import ThemeSwitcher from "@/components/themes/theme-switcher";
+import ThemedLogo from "@/components/themes/themed-logo";
+import { Button } from "@/components/ui/button";
+
+import { navLinks } from "@/constants";
+import NavLink from "./NavLink";
+
+export default function Header() {
+  return (
+    <header className="bg-background/80 fixed top-0 right-0 left-0 z-50 border-b backdrop-blur-md">
+      <div className="flex h-16 items-center justify-between px-4 md:px-6">
+        <Link href="/" className="flex items-center gap-2">
+          <ThemedLogo />
+        </Link>
+        <nav className="hidden gap-8 md:flex">
+          {navLinks.map((link, idx) => (
+            <NavLink key={idx} href={link.href} label={link.label} />
+          ))}
+        </nav>
+        <div className="flex items-center gap-4">
+          <Link
+            href="/login"
+            className="text-muted-foreground hover:text-foreground hidden text-sm font-medium transition-colors md:block"
+          >
+            Log In
+          </Link>
+          <Button variant="default" className="rounded-full">
+            Get Started
+          </Button>
+          <ThemeSwitcher />
+        </div>
+      </div>
+    </header>
+  );
+}


Reviews:
user: login: coderabbitai[bot]
body: **Actionable comments posted: 5**

<details>
<summary>🧹 Nitpick comments (15)</summary><blockquote>

<details>
<summary>clients/web/src/components/themes/theme-switcher.tsx (1)</summary><blockquote>

`1-19`: **Clean and effective theme switcher implementation!**

The component correctly implements theme toggling using the next-themes hook with an intuitive UI.


Consider adding an aria-label to improve accessibility:

```diff
 <Button
   size="icon"
   onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
   variant="outline"
   className="rounded-full"
+  aria-label={`Switch to ${theme === "dark" ? "light" : "dark"} theme`}
 >
   <SunMoonIcon />
 </Button>
```

</blockquote></details>
<details>
<summary>clients/web/src/components/landing/feature-card.tsx (1)</summary><blockquote>

`28-34`: **Consider enhancing accessibility for the link**

The "Learn more" link could benefit from a more descriptive accessible label for screen readers.


```diff
<Link
  href={link}
  className="text-primary inline-flex items-center text-sm font-medium"
+ aria-label={`Learn more about ${title}`}
>
  Learn more <ArrowRight className="ml-1 h-4 w-4" />
</Link>
```

</blockquote></details>
<details>
<summary>clients/web/src/components/landing/use-case-card.tsx (1)</summary><blockquote>

`24-24`: **Consider consistent ordering of utility classes**

For better maintainability, consider using a consistent order for utility classes. Classes for spacing (like margins) should be grouped together, followed by typography, colors, etc.


```diff
- <p className="text-muted-foreground mb-6">{description}</p>
+ <p className="mb-6 text-muted-foreground">{description}</p>
```

</blockquote></details>
<details>
<summary>clients/web/src/components/landing/how-it-works-step.tsx (1)</summary><blockquote>

`16-18`: **Consider enhancing accessibility for the step indicator**

For better screen reader support, consider adding an aria-label to the step number container.


```diff
- <div className="bg-primary text-primary-foreground flex h-8 w-8 shrink-0 items-center justify-center rounded-full">
+ <div className="bg-primary text-primary-foreground flex h-8 w-8 shrink-0 items-center justify-center rounded-full" aria-label={`Step ${stepNumber}`}>
  {stepNumber}
</div>
```

</blockquote></details>
<details>
<summary>clients/web/src/components/landing/section.tsx (2)</summary><blockquote>

`21-21`: **Use a className utility function instead of string interpolation**

According to the PR summary, there's a `cn()` utility function available. Using it would be more robust than string interpolation, especially for handling undefined values.


```diff
- <section id={id} className={`w-full py-20 md:py-32 ${className}`}>
+ <section id={id} className={cn("w-full py-20 md:py-32", className)}>
```

Don't forget to import the utility:

```diff
+ import { cn } from "../../lib/utils";
```

---

`22-22`: **Improve responsive padding for better small screen experience**

The current padding may be too restrictive on very small screens. Consider adding more responsive variants.


```diff
- <div className="px-4 md:px-6">
+ <div className="px-4 sm:px-6 lg:px-8">
```

</blockquote></details>
<details>
<summary>clients/web/src/components/landing/pricing-plan-card.tsx (3)</summary><blockquote>

`53-55`: **Use `cn()` for safer, cleaner class-name composition**

Building the `className` string manually risks accidental “undefined” tokens, duplicates, or subtle Tailwind collisions.  Using the same `cn()` helper you rely on elsewhere keeps the logic consistent and clearer.

```diff
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
...
-      className={`bg-card rounded-lg border p-8 shadow-sm transition-all hover:shadow-md ${isPopular ? "relative shadow-lg hover:shadow-xl" : ""} ${className}`}
+      className={cn(
+        "bg-card rounded-lg border p-8 shadow-sm transition-all hover:shadow-md",
+        isPopular && "relative shadow-lg hover:shadow-xl",
+        className,
+      )}
```

---

`66-69`: **Guard against empty price & suffix**

When `price === ""` the empty `<span>` still renders and `priceSuffix` might still show.  
Wrapping the whole block in a conditional avoids confusing blank space.

```diff
-      <div className="mb-6">
-        <span className="text-4xl font-medium">{price}</span>
-        {price !== "Custom" && (
-          <span className="text-muted-foreground">{priceSuffix}</span>
-        )}
-      </div>
+      {!!price && (
+        <div className="mb-6">
+          <span className="text-4xl font-medium">{price}</span>
+          {price !== "Custom" && !!priceSuffix && (
+            <span className="text-muted-foreground">{priceSuffix}</span>
+          )}
+        </div>
+      )}
```

---

`72-77`: **Prefer stable keys over array indices**

Using `index` as the React key can cause unnecessary re-renders if the list changes order.  
The feature text itself is unique enough for a stable key.

```diff
-        {features.map((feature, index) => (
-          <li key={index} className="flex items-center">
+        {features.map((feature) => (
+          <li key={feature} className="flex items-center">
```

</blockquote></details>
<details>
<summary>clients/web/src/app/page.tsx (1)</summary><blockquote>

`313-315`: **Minor: compute the year once**

`new Date()` runs on every render; extracting it to a constant (file-scope or outside the component) is a micro-optimisation that also keeps the JSX cleaner.

```diff
-            <p className="text-muted-foreground text-xs">
-              &copy; {new Date().getFullYear()} Curiositi. All rights reserved.
-            </p>
+            <p className="text-muted-foreground text-xs">
+              &copy; {currentYear} Curiositi. All rights reserved.
+            </p>
```

```ts
// near the top of the file
const currentYear = new Date().getFullYear()
```

</blockquote></details>
<details>
<summary>clients/web/src/styles/globals.css (5)</summary><blockquote>

`4-4`: **Re-evaluate custom variant vs. built-in dark mode**  
You’ve introduced `@custom-variant dark (&:is(.dark *));` to scope styles under a `.dark` wrapper. Tailwind ships with a built-in `dark:` variant when you set `darkMode: 'class'` in `tailwind.config.js`. Unless you have a strong reason to use a custom-variant plugin, consider switching to the native `dark:` prefix to reduce complexity and dependency footprint.

---

`16-24`: **Simplify radius scale calculations**  
The inline theme block computes four radii by manually applying `calc(var(--radius) ± Xpx)`. While explicit, this pattern is repetitive and error-prone. Consider abstracting these offsets into:  
1. A small Sass/Less map + mixin to generate steps dynamically.  
2. A PostCSS plugin or JavaScript script that auto-derives `radius-sm`, `radius-md`, etc., from a single scale definition.

---

`25-87`: **Reduce manual mapping of color aliases**  
The `@theme inline` section maps every core variable (`--background`, `--primary`, etc.) to a `--color-*` alias. Maintaining this list by hand can lead to drift as new theme variables are added. Options to improve maintainability:  
- Automate alias generation via a PostCSS script or a build-time utility.  
- Reference original variables directly in your components (e.g., `bg-[var(--background)]`), eliminating the need for aliases.

---

`89-154`: **Verify OKLCH browser support and provide fallbacks**  
You’re leveraging the modern `oklch()` color function heavily. As of now, some browsers do not fully support unprefixed OKLCH. To ensure visual consistency across your target audience:  
- Audit your browser support matrix for `oklch()` (e.g., with [caniuse.com]).  
- Introduce fallback definitions (hex, `lab()`, or CSS variables with a comma-separated fallback) for unsupported browsers.

---

`221-228`: **Scope global `@layer base` rules more narrowly**  
Applying `@apply border-border outline-ring/50` to every element via `*` can introduce performance overhead and unintended side effects (e.g., on third-party widgets or form controls). Consider:  
- Limiting the universal selector to specific element lists (e.g., `button, input, a`).  
- Applying outlines only on focus states (`:focus-visible`).  
- Auditing whether all components need the default border or if some should opt-in.

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**
**Cache: Disabled due to data retention organization setting**
**Knowledge Base: Disabled due to data retention organization setting**


<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between ac31791272e9435822bd1f80640fda1f62deb337 and 2bb00a3a414f217d72bd46757b2156e263305bc8.

</details>

<details>
<summary>⛔ Files ignored due to path filters (3)</summary>

* `clients/web/bun.lock` is excluded by `!**/*.lock`
* `clients/web/src/assets/images/agent-flow.png` is excluded by `!**/*.png`
* `clients/web/src/assets/logo-dark.svg` is excluded by `!**/*.svg`

</details>

<details>
<summary>📒 Files selected for processing (16)</summary>

* `clients/web/components.json` (1 hunks)
* `clients/web/package.json` (2 hunks)
* `clients/web/src/app/layout.tsx` (2 hunks)
* `clients/web/src/app/page.tsx` (1 hunks)
* `clients/web/src/assets/icons/github-icon.tsx` (1 hunks)
* `clients/web/src/components/landing/feature-card.tsx` (1 hunks)
* `clients/web/src/components/landing/how-it-works-step.tsx` (1 hunks)
* `clients/web/src/components/landing/pricing-plan-card.tsx` (1 hunks)
* `clients/web/src/components/landing/section.tsx` (1 hunks)
* `clients/web/src/components/landing/use-case-card.tsx` (1 hunks)
* `clients/web/src/components/themes/theme-provider.tsx` (1 hunks)
* `clients/web/src/components/themes/theme-switcher.tsx` (1 hunks)
* `clients/web/src/components/themes/themed-logo.tsx` (1 hunks)
* `clients/web/src/components/ui/button.tsx` (1 hunks)
* `clients/web/src/lib/utils.ts` (1 hunks)
* `clients/web/src/styles/globals.css` (2 hunks)

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>🧬 Code Graph Analysis (2)</summary>

<details>
<summary>clients/web/src/app/layout.tsx (1)</summary><blockquote>

<details>
<summary>clients/web/src/components/themes/theme-provider.tsx (1)</summary>

* `ThemeProvider` (6-11)

</details>

</blockquote></details>
<details>
<summary>clients/web/src/components/ui/button.tsx (1)</summary><blockquote>

<details>
<summary>clients/web/src/lib/utils.ts (1)</summary>

* `cn` (4-6)

</details>

</blockquote></details>

</details>

</details>

<details>
<summary>🔇 Additional comments (11)</summary><blockquote>

<details>
<summary>clients/web/package.json (1)</summary>

`19-19`: **Well-selected dependencies for UI enhancement and theming!**

The added packages create a solid foundation for the landing page redesign:
- UI components: `@radix-ui/react-slot`, `class-variance-authority`, `lucide-react`
- Styling utilities: `clsx`, `tailwind-merge`, `tw-animate-css`
- Theming: `next-themes`

These selections align perfectly with modern React UI development practices.



Also applies to: 21-23, 25-26, 28-28, 43-43

</details>
<details>
<summary>clients/web/src/app/layout.tsx (1)</summary>

`1-1`: **Excellent implementation of theme support!**

The ThemeProvider is properly configured with appropriate defaults:
- Using system preferences as the default theme
- Enabling system theme detection
- Disabling transitions to prevent visual flicker

Adding the suppressHydrationWarning attribute is a good practice to prevent React warnings when the server-rendered HTML doesn't match the client-side theme determination.



Also applies to: 39-49

</details>
<details>
<summary>clients/web/src/lib/utils.ts (1)</summary>

`1-6`: _⚠️ Potential issue_

**Incorrect usage of clsx function.**

The `clsx` function expects each argument to be passed individually, not as an array. The current implementation passes the entire array of inputs to `clsx`, which may not correctly merge class names.

Fix the implementation with this change:

```diff
export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(...inputs))
}
```

This ensures each class value is properly passed to the `clsx` function as individual arguments.



> Likely an incorrect or invalid review comment.

</details>
<details>
<summary>clients/web/src/components/themes/themed-logo.tsx (1)</summary>

`12-16`: **Verify logo theme assignment logic and add width property.**

There are two potential issues with this Image component implementation:

1. The theme logic appears reversed: when theme is "dark", it's using `logoLight`, and when theme is not "dark", it's using `logoDark`. Verify if this is intentional.

2. The Image component is missing a width property, which might cause layout issues as the image scales.


Consider this improved implementation:

```diff
<Image
-  src={theme === "dark" ? (logoLight as string) : (logoDark as string)}
+  src={theme === "dark" ? (logoDark as string) : (logoLight as string)}
  alt="Curiositi"
  height={height}
+  width={height * 4} // Adjust ratio based on your logo's actual dimensions
+  style={{ width: 'auto' }} // Maintain aspect ratio
/>
```

</details>
<details>
<summary>clients/web/src/components/themes/theme-provider.tsx (1)</summary>

`1-11`: **LGTM - Well-structured theme provider implementation.**

This is a clean implementation of a wrapper component for the `next-themes` provider. Using the `"use client"` directive is correct for client-side theme functionality, and the component properly forwards all props to the underlying provider.

</details>
<details>
<summary>clients/web/components.json (2)</summary>

`13-19`: **LGTM - Well-structured path aliases.**

The path aliases are well organized and follow common conventions for Next.js projects. These will help maintain clean imports throughout the codebase.

---

`6-12`: <details>
<summary>❓ Verification inconclusive</summary>

**Missing Tailwind config path.**

The `config` field in the tailwind section is empty. If you're using a custom Tailwind configuration, you should specify the path to your tailwind.config.js file.


```diff
"tailwind": {
-  "config": "",
+  "config": "tailwind.config.js",
  "css": "src/styles/globals.css",
  "baseColor": "neutral",
  "cssVariables": true,
  "prefix": ""
},
```

Run the following to verify your Tailwind configuration file location:

---

🏁 Script executed:

```shell
#!/bin/bash
# Find tailwind configuration files in the project
fd -t f "tailwind.config.(js|ts)" clients/web
```

Length of output: 47

---



</details>

**Review Tailwind config path**

I ran a search for any `tailwind.config.js` or `tailwind.config.ts` in the repo (including `clients/web`) and didn’t find one. 

• If you do have a custom Tailwind config (e.g. `tailwind.config.js`), please set the `config` field to its relative path.  
• If you’re relying on Tailwind’s defaults (no custom config), it’s safe to leave `"config": ""`.

Please verify whether a config file exists and update the field accordingly.

</details>
<details>
<summary>clients/web/src/components/landing/feature-card.tsx (1)</summary>

`1-37`: **Well-structured component with good use of utility classes**

The implementation is clean and follows React best practices with proper TypeScript typing. The layout and visual hierarchy are well-designed.

</details>
<details>
<summary>clients/web/src/components/landing/use-case-card.tsx (1)</summary>

`1-31`: **Clean implementation with good structure and visual hierarchy**

This component follows React best practices with proper TypeScript typing and logical organization of content.

</details>
<details>
<summary>clients/web/src/components/landing/how-it-works-step.tsx (1)</summary>

`1-25`: **Well-implemented step component with good visual hierarchy**

The component has good structure and proper TypeScript typing. The step indicator is visually distinctive and the layout is clean.

</details>
<details>
<summary>clients/web/src/components/landing/section.tsx (1)</summary>

`1-36`: **Section component provides good structure and consistent spacing**

This component offers a flexible way to create page sections with consistent styling and proper responsive behavior.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: NONE
submitted_at: 2025-05-19T18:42:32Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 1**

<details>
<summary>🧹 Nitpick comments (3)</summary><blockquote>

<details>
<summary>clients/web/src/components/themes/themed-logo.tsx (3)</summary><blockquote>

`5-5`: **Consider using a more specific alt text.**

The imported SVG is using the path alias `@/` which is good for maintainability. In line 10, you're using "Curiositi" as the alt text, but consider making it more descriptive like "Curiositi Logo" to improve accessibility.

---

`7-14`: **Looks good, with minor suggestions for improvement.**

The component is well structured with proper TypeScript typing and default prop values. The use of Tailwind for responsive design and dark mode support is good.

Consider these small improvements:
1. The `as string` type assertion on line 10 suggests a type mismatch. You might want to fix the underlying type issue instead of using a type assertion.
2. Consider adding a responsive size adjustment for smaller screens.



```diff
export default function ThemedLogo({ height = 28 }: { height?: number }) {
  return (
-    <div className="flex items-center gap-2">
-      <Image src={logo as string} alt="Curiositi" height={height} />
+    <div className="flex items-center gap-2">
+      <Image src={logo} alt="Curiositi Logo" height={height} width={height * 1.5} /> 
      <span className="text-lg text-black dark:text-white">Curiositi</span>
    </div>
  );
}
```

---

`11-11`: **Consider making the font size responsive.**

The text size is fixed at "text-lg" which might not scale well across different device sizes. Consider using responsive text classes to ensure readability across devices.


```diff
- <span className="text-lg text-black dark:text-white">Curiositi</span>
+ <span className="text-base md:text-lg text-black dark:text-white">Curiositi</span>
```

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**
**Cache: Disabled due to data retention organization setting**
**Knowledge Base: Disabled due to data retention organization setting**


<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 2bb00a3a414f217d72bd46757b2156e263305bc8 and 284dcce26e4090e68c941dc225796b0cdcf2d9a7.

</details>

<details>
<summary>⛔ Files ignored due to path filters (1)</summary>

* `clients/web/src/assets/logo.svg` is excluded by `!**/*.svg`

</details>

<details>
<summary>📒 Files selected for processing (1)</summary>

* `clients/web/src/components/themes/themed-logo.tsx` (1 hunks)

</details>

<details>
<summary>🔇 Additional comments (1)</summary><blockquote>

<details>
<summary>clients/web/src/components/themes/themed-logo.tsx (1)</summary>

`1-2`: **LGTM: Correctly using the "use client" directive.**

The "use client" directive is correctly placed at the top of the file, indicating this component will be rendered on the client-side in Next.js.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: NONE
submitted_at: 2025-05-19T19:37:00Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 3**

<details>
<summary>🧹 Nitpick comments (2)</summary><blockquote>

<details>
<summary>clients/web/src/app/page.tsx (2)</summary><blockquote>

`43-53`: **Consider adding a mobile navigation menu**

The navigation links are currently hidden on mobile screens (`hidden gap-8 md:flex`), but there's no alternative navigation for mobile users like a hamburger menu. This could impact usability on smaller devices.

Consider adding a mobile-friendly navigation toggle for smaller screens.

---

`242-255`: **Consider using different icons for each use case**

All three use case cards use the same `<MessageSquare />` icon. Different icons would provide better visual differentiation between the different use cases.

Consider using more specific icons that represent each use case more accurately, for example:
- Research & Analysis: `<Search />` or `<FileSearch />`
- Knowledge Management: `<Database />` or `<Book />`
- Study & Research: `<GraduationCap />` or `<Lightbulb />`

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**
**Cache: Disabled due to data retention organization setting**
**Knowledge Base: Disabled due to data retention organization setting**


<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 8a26378eac4b395110a440ac247f973440985145 and 859a9d9263d94076a7e4b661c30239eaf59efc6c.

</details>

<details>
<summary>📒 Files selected for processing (1)</summary>

* `clients/web/src/app/page.tsx` (1 hunks)

</details>

<details>
<summary>🔇 Additional comments (2)</summary><blockquote>

<details>
<summary>clients/web/src/app/page.tsx (2)</summary>

`35-333`: **Great comprehensive landing page implementation!**

The new landing page is well-structured with clear sections highlighting the product's features, how it works, use cases, and pricing. The design uses modern UI components with consistent styling, animations, and proper responsive layout for most elements.

Key improvements include:
- Complete information architecture with logical flow
- Strong visual hierarchy with section titles and prefixes
- Consistent design language with rounded corners and gradient effects
- Professional layout with proper spacing and alignment

---

`29-31`: <details>
<summary>✅ Verification successful</summary>

**Verify GitHub repository URL**

The GitHub link includes a username that matches the PR author's username: `macintushar/curiositi`. If this is a personal fork, consider whether it should point to the main organization repository instead.

---

🏁 Script executed:

```shell
#!/bin/bash
# Check if the repository exists and if there's a different organization repository
echo "Checking if https://github.com/macintushar/curiositi exists..."
curl -s -o /dev/null -w "%{http_code}" https://github.com/macintushar/curiositi
echo ""

# Check if there might be an organization repo with the same name
echo "Searching for organization repositories with similar names..."
gh search repos curiositi --limit 5 --sort stars
```

Length of output: 885

---



</details>

**GitHub repository URL is correct**

Verified that `https://github.com/macintushar/curiositi` exists (HTTP 200) and no organization-level repository with the same name was found. No changes are needed.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: NONE
submitted_at: 2025-05-19T20:17:22Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 2**

<details>
<summary>♻️ Duplicate comments (2)</summary><blockquote>

<details>
<summary>clients/web/src/app/page.tsx (2)</summary><blockquote>

`117-135`: **Fix non-functional feature links**

All feature cards have `link="#"` which are placeholder links that don't navigate anywhere. This impacts usability and prevents users from exploring features in depth.

Replace these placeholder links with actual routes or consider implementing feature detail pages.

---

`77-77`: **Update or parameterize the future date in source text**

The source text mentions "Web Search (May 2025)" which appears to be a future date. This might confuse users or make the content seem outdated later.

Either update to the current date or dynamically generate the date using JavaScript:

```diff
- Sources: Your Documents, Web Search (May 2025)
+ Sources: Your Documents, Web Search ({new Date().toLocaleString('en-US', {month: 'long', year: 'numeric'})})
```

</blockquote></details>

</blockquote></details>

<details>
<summary>🧹 Nitpick comments (3)</summary><blockquote>

<details>
<summary>clients/web/src/views/landing/header.tsx (1)</summary><blockquote>

`11-40`: **Consider enhancing accessibility**

The header could benefit from some accessibility improvements:
- Add a "Skip to main content" link for keyboard users
- Include appropriate ARIA attributes for the navigation menu
- Ensure all interactive elements are keyboard accessible



```diff
   return (
+    <>
+    <a href="#main-content" className="sr-only focus:not-sr-only focus:absolute focus:z-[60] focus:p-4 focus:bg-background">
+      Skip to main content
+    </a>
     <header className="bg-background/80 fixed top-0 right-0 left-0 z-50 border-b backdrop-blur-md">
       <div className="flex h-16 items-center justify-between px-4 md:px-6">
         <Link href="/" className="flex items-center gap-2">
           <ThemedLogo />
         </Link>
-        <nav className="hidden gap-8 md:flex">
+        <nav className="hidden gap-8 md:flex" aria-label="Main Navigation">
           {navLinks.map((link) => (
             <Link
               key={link.href}
               href={link.href}
               className="text-muted-foreground hover:text-foreground text-sm font-medium transition-colors"
+              aria-current={link.href === "/" ? "page" : undefined}
             >
               {link.label}
             </Link>
           ))}
         </nav>
```

</blockquote></details>
<details>
<summary>clients/web/src/app/page.tsx (2)</summary><blockquote>

`197-211`: **Diversify icons for use cases**

All three use case cards use the same `MessageSquare` icon, which reduces visual differentiation and makes it harder for users to quickly distinguish between the different use cases.


Consider using more specific icons for each use case to improve visual hierarchy and scannability:

```diff
            <UseCaseCard
-              icon={<MessageSquare className="h-6 w-6" />}
+              icon={<Search className="h-6 w-6" />}
              title="Research & Analysis"
              description="Use Curiositi to analyze documents and find connections across multiple sources, saving hours of manual work."
            />
            <UseCaseCard
-              icon={<MessageSquare className="h-6 w-6" />}
+              icon={<FileText className="h-6 w-6" />}
              title="Knowledge Management"
              description="Use Curiositi to make their internal knowledge bases accessible and actionable for all employees."
            />
            <UseCaseCard
-              icon={<MessageSquare className="h-6 w-6" />}
+              icon={<BookOpen className="h-6 w-6" />}
              title="Study & Research"
              description="Use Curiositi to research topics and generate content backed by accurate, up-to-date information based on their lectures, textbooks, and other documents."
            />
```

Don't forget to import the additional icons:
```diff
-import { Search, FileText, Globe, Zap, MessageSquare } from "lucide-react";
+import { Search, FileText, Globe, Zap, MessageSquare, BookOpen } from "lucide-react";
```

---

`24-24`: **Add ID to main content for accessibility**

To complement the "Skip to main content" accessibility link suggested for the header, add an ID to the main content section.


```diff
-      <main className="w-full flex-1 pt-4">
+      <main id="main-content" className="w-full flex-1 pt-4">
```

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**
**Cache: Disabled due to data retention organization setting**
**Knowledge Base: Disabled due to data retention organization setting**


<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 859a9d9263d94076a7e4b661c30239eaf59efc6c and 8ba27979b398eef27535849fca67ce6df36cb437.

</details>

<details>
<summary>⛔ Files ignored due to path filters (1)</summary>

* `clients/web/bun.lock` is excluded by `!**/*.lock`

</details>

<details>
<summary>📒 Files selected for processing (11)</summary>

* `clients/web/package.json` (2 hunks)
* `clients/web/src/app/faq/page.tsx` (1 hunks)
* `clients/web/src/app/page.tsx` (1 hunks)
* `clients/web/src/components/themes/theme-switcher.tsx` (1 hunks)
* `clients/web/src/components/ui/accordion.tsx` (1 hunks)
* `clients/web/src/constants.ts` (1 hunks)
* `clients/web/src/constants/faqs.ts` (1 hunks)
* `clients/web/src/styles/globals.css` (2 hunks)
* `clients/web/src/types.ts` (1 hunks)
* `clients/web/src/views/landing/footer.tsx` (1 hunks)
* `clients/web/src/views/landing/header.tsx` (1 hunks)

</details>

<details>
<summary>✅ Files skipped from review due to trivial changes (5)</summary>

* clients/web/src/types.ts
* clients/web/src/constants.ts
* clients/web/src/app/faq/page.tsx
* clients/web/src/views/landing/footer.tsx
* clients/web/src/constants/faqs.ts

</details>

<details>
<summary>🚧 Files skipped from review as they are similar to previous changes (3)</summary>

* clients/web/src/components/themes/theme-switcher.tsx
* clients/web/package.json
* clients/web/src/styles/globals.css

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>🧬 Code Graph Analysis (1)</summary>

<details>
<summary>clients/web/src/components/ui/accordion.tsx (1)</summary><blockquote>

<details>
<summary>clients/web/src/lib/utils.ts (1)</summary>

* `cn` (4-6)

</details>

</blockquote></details>

</details>

</details>

<details>
<summary>🔇 Additional comments (6)</summary><blockquote>

<details>
<summary>clients/web/src/components/ui/accordion.tsx (6)</summary>

`1-8`: **Well-structured imports and client directive.**

The "use client" directive is correctly placed at the top of the file, indicating this is a client-side component. The imports are organized logically, with React and Radix UI imports first, followed by internal utilities. The component is properly built on top of Radix UI primitives which provides accessibility features out of the box.

---

`9-13`: **Clean implementation of the root Accordion component.**

The Accordion component is a simple wrapper that correctly forwards all props to the underlying Radix UI component. The use of `data-slot="accordion"` provides a good hook for styling and testing.

---

`15-26`: **Well-structured AccordionItem with appropriate styling.**

The AccordionItem component properly handles class name merging with the utility function and applies consistent border styling. The `last:border-b-0` approach elegantly handles the last item's border removal. Props are correctly forwarded, and TypeScript typing is properly implemented.

---

`28-48`: **Comprehensive AccordionTrigger implementation with appropriate styling and accessibility.**

The AccordionTrigger component is well-implemented with:
- Proper nesting within AccordionPrimitive.Header
- Comprehensive styling for various states (focus, hover, disabled)
- Appropriate accessibility attributes
- Clean integration of the ChevronDownIcon with rotation animation

The class names are well-organized with clear intent for each style.

---

`50-64`: **Well-implemented AccordionContent with smooth animations.**

The AccordionContent component includes:
- Appropriate data attributes for styling
- Animation classes for smooth open/close transitions
- Proper content padding
- Correct prop forwarding

The use of data attributes for state-based animations is a clean approach.

---

`66-67`: **Clean named exports.**

The export statement is clean and follows best practices by using named exports for all four components. This allows for selective imports by consumers of this module.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: NONE
submitted_at: 2025-05-19T21:20:43Z

Review comments:
diff_hunk: @@ -0,0 +1,13 @@
+export default function GithubIcon() {
+  return (
+    <svg
+      role="img"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      className="fill-white dark:fill-black"
+    >
+      <title>GitHub</title>
+      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+    </svg>
+  );
+}
path: clients/web/src/assets/icons/github-icon.tsx
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Reverse the fill colors for better contrast**

The GitHub icon implementation has good accessibility with the role and title attributes, but the current color scheme will create visibility issues:

- `fill-white` in light mode creates a white icon on (likely) a light background
- `dark:fill-black` in dark mode creates a black icon on a dark background

Both combinations result in poor contrast.

Reverse the colors for proper visibility:

```diff
-  className="fill-white dark:fill-black"
+  className="fill-black dark:fill-white" 
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

```suggestion
export default function GithubIcon() {
  return (
    <svg
      role="img"
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
      className="fill-black dark:fill-white"
    >
      <title>GitHub</title>
      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
    </svg>
  );
}
```

</details>

<!-- suggestion_end -->

<details>
<summary>🤖 Prompt for AI Agents</summary>

```
In clients/web/src/assets/icons/github-icon.tsx lines 1 to 13, the fill colors
for the GitHub icon are set as white in light mode and black in dark mode,
causing poor contrast against the backgrounds. To fix this, swap the fill colors
so that the icon uses black fill in light mode and white fill in dark mode by
changing the className from "fill-white dark:fill-black" to "fill-black
dark:fill-white" to ensure proper visibility in both themes.
```

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-19T18:42:31Z
author_association: NONE
diff_hunk: @@ -0,0 +1,88 @@
+import { Button } from "@/components/ui/button";
+import type { LucideIcon } from "lucide-react";
+import Link from "next/link";
+import React from "react";
+
+interface PricingPlanCardProps {
+  title: string;
+  description: string;
+  price: string;
+  priceSuffix?: string;
+  features: string[];
+  isPopular?: boolean;
+  ctaText: string;
+  CtaExtra?: React.ReactNode;
+  CtaIcon?: LucideIcon;
+  ctaVariant?: "default" | "outline";
+  ctaHref?: string;
+  className?: string;
+}
+
+const CheckIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="text-primary mr-3 h-4 w-4"
+  >
+    <polyline points="20 6 9 17 4 12"></polyline>
+  </svg>
+);
+
+export function PricingPlanCard({
+  title,
+  description,
+  price,
+  priceSuffix = " /month",
+  features,
+  isPopular,
+  ctaText,
+  CtaExtra,
+  CtaIcon,
+  ctaVariant = "default",
+  ctaHref,
+  className,
+}: PricingPlanCardProps) {
+  return (
+    <div
+      className={`bg-card rounded-lg border p-8 shadow-sm transition-all hover:shadow-md ${isPopular ? "relative shadow-lg hover:shadow-xl" : ""} ${className}`}
+    >
+      {isPopular && (
+        <div className="bg-primary text-primary-foreground absolute -top-4 right-0 left-0 mx-auto w-fit rounded-full px-4 py-1 text-sm font-medium">
+          Most Popular
+        </div>
+      )}
+      <div className="mb-6">
+        <h3 className="text-xl font-medium">{title}</h3>
+        <p className="text-muted-foreground mt-1">{description}</p>
+      </div>
+      <div className="mb-6">
+        <span className="text-4xl font-medium">{price}</span>
+        {price !== "Custom" && (
+          <span className="text-muted-foreground">{priceSuffix}</span>
+        )}
+      </div>
+      <ul className="mb-8 space-y-3">
+        {features.map((feature, index) => (
+          <li key={index} className="flex items-center">
+            <CheckIcon />
+            <span>{feature}</span>
+          </li>
+        ))}
+      </ul>
+      <Link href={ctaHref ?? "#"}>
+        <Button variant={ctaVariant} className="w-full rounded-full">
+          {CtaIcon && <CtaIcon className="h-4 w-4" />}
+          {CtaExtra && CtaExtra}
+          {ctaText}
+        </Button>
+      </Link>
path: clients/web/src/components/landing/pricing-plan-card.tsx
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Fix invalid `<button>`-inside-`<a>` nesting**

`next/link` renders an `<a>` element. Wrapping a `<button>` inside that anchor breaks HTML semantics and can confuse screen-readers.  
Let the `Button` render the anchor via `asChild` instead:

```diff
-      <Link href={ctaHref ?? "#"}>
-        <Button variant={ctaVariant} className="w-full rounded-full">
-          {CtaIcon && <CtaIcon className="h-4 w-4" />}
-          {CtaExtra && CtaExtra}
-          {ctaText}
-        </Button>
-      </Link>
+      <Button
+        asChild
+        variant={ctaVariant}
+        className="w-full rounded-full"
+      >
+        <Link
+          href={ctaHref ?? "#"}
+          className="flex items-center justify-center gap-2"
+        >
+          {CtaIcon && <CtaIcon className="h-4 w-4" />}
+          {CtaExtra && CtaExtra}
+          {ctaText}
+        </Link>
+      </Button>
```



<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

```suggestion
      <Button
        asChild
        variant={ctaVariant}
        className="w-full rounded-full"
      >
        <Link
          href={ctaHref ?? "#"}
          className="flex items-center justify-center gap-2"
        >
          {CtaIcon && <CtaIcon className="h-4 w-4" />}
          {CtaExtra && CtaExtra}
          {ctaText}
        </Link>
      </Button>
```

</details>

<!-- suggestion_end -->

<details>
<summary>🤖 Prompt for AI Agents</summary>

```
In clients/web/src/components/landing/pricing-plan-card.tsx around lines 79 to
85, the Button component is wrapped inside a Link component, causing invalid
HTML with a button nested inside an anchor. To fix this, remove the Link wrapper
and instead pass the href and other link props directly to the Button component
using its asChild prop so that Button renders as an anchor element, preserving
correct semantics and accessibility.
```

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-19T18:42:31Z
author_association: NONE
diff_hunk: @@ -0,0 +1,59 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
path: clients/web/src/components/ui/button.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Forward the `ref` to support form libs & imperative focus**

Many libraries (React-Hook-Form, Radix primitives, etc.) expect to obtain a ref to the underlying element.  Wrapping the component in `React.forwardRef` solves this without changing the public API.

```diff
-function Button({
-  className,
-  variant,
-  size,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
-  }) {
-  const Comp = asChild ? Slot : "button"
-
-  return (
-    <Comp
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
-}
+const Button = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> &
+    VariantProps<typeof buttonVariants> & { asChild?: boolean }
+>(({ className, variant, size, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button"
+  return (
+    <Comp
+      ref={ref}
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+})
+Button.displayName = "Button"
```



<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

```suggestion
const Button = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<"button"> &
    VariantProps<typeof buttonVariants> & { asChild?: boolean }
>(({ className, variant, size, asChild = false, ...props }, ref) => {
  const Comp = asChild ? Slot : "button"

  return (
    <Comp
      ref={ref}
      data-slot="button"
      className={cn(buttonVariants({ variant, size, className }))}
      {...props}
    />
  )
})

Button.displayName = "Button"
```

</details>

<!-- suggestion_end -->

<details>
<summary>🤖 Prompt for AI Agents</summary>

```
In clients/web/src/components/ui/button.tsx around lines 38 to 57, the Button
component does not forward the ref to the underlying element, which is required
for compatibility with form libraries and imperative focus handling. Refactor
the Button component to use React.forwardRef, accept a ref parameter, and pass
it to the rendered component (Comp) via the ref prop, ensuring the public API
remains unchanged.
```

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-19T18:42:32Z
author_association: NONE
diff_hunk: @@ -9,3 +12,217 @@
     var(--font-instrument-serif), ui-serif, serif, "Apple Color Emoji",
     "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
+
+@theme inline {
+  --radius-sm:
+    calc(var(--radius) - 4px);
+  --radius-md:
+    calc(var(--radius) - 2px);
+  --radius-lg:
+    var(--radius);
+  --radius-xl:
+    calc(var(--radius) + 4px);
+  --color-background:
+    var(--background);
+  --color-foreground:
+    var(--foreground);
+  --color-card:
+    var(--card);
+  --color-card-foreground:
+    var(--card-foreground);
+  --color-popover:
+    var(--popover);
+  --color-popover-foreground:
+    var(--popover-foreground);
+  --color-primary:
+    var(--primary);
+  --color-primary-foreground:
+    var(--primary-foreground);
+  --color-secondary:
+    var(--secondary);
+  --color-secondary-foreground:
+    var(--secondary-foreground);
+  --color-muted:
+    var(--muted);
+  --color-muted-foreground:
+    var(--muted-foreground);
+  --color-accent:
+    var(--accent);
+  --color-accent-foreground:
+    var(--accent-foreground);
+  --color-destructive:
+    var(--destructive);
+  --color-border:
+    var(--border);
+  --color-input:
+    var(--input);
+  --color-ring:
+    var(--ring);
+  --color-chart-1:
+    var(--chart-1);
+  --color-chart-2:
+    var(--chart-2);
+  --color-chart-3:
+    var(--chart-3);
+  --color-chart-4:
+    var(--chart-4);
+  --color-chart-5:
+    var(--chart-5);
+  --color-sidebar:
+    var(--sidebar);
+  --color-sidebar-foreground:
+    var(--sidebar-foreground);
+  --color-sidebar-primary:
+    var(--sidebar-primary);
+  --color-sidebar-primary-foreground:
+    var(--sidebar-primary-foreground);
+  --color-sidebar-accent:
+    var(--sidebar-accent);
+  --color-sidebar-accent-foreground:
+    var(--sidebar-accent-foreground);
+  --color-sidebar-border:
+    var(--sidebar-border);
+  --color-sidebar-ring:
+    var(--sidebar-ring);
+}
+
+:root {
+  --radius:
+    0.625rem;
+  --background:
+    oklch(1 0 0);
+  --foreground:
+    oklch(0.145 0 0);
+  --card:
+    oklch(1 0 0);
+  --card-foreground:
+    oklch(0.145 0 0);
+  --popover:
+    oklch(1 0 0);
+  --popover-foreground:
+    oklch(0.145 0 0);
+  --primary:
+    oklch(0.205 0 0);
+  --primary-foreground:
+    oklch(0.985 0 0);
+  --secondary:
+    oklch(0.97 0 0);
+  --secondary-foreground:
+    oklch(0.205 0 0);
+  --muted:
+    oklch(0.97 0 0);
+  --muted-foreground:
+    oklch(0.556 0 0);
+  --accent:
+    oklch(0.97 0 0);
+  --accent-foreground:
+    oklch(0.205 0 0);
+  --destructive:
+    oklch(0.577 0.245 27.325);
+  --border:
+    oklch(0.922 0 0);
+  --input:
+    oklch(0.922 0 0);
+  --ring:
+    oklch(0.708 0 0);
+  --chart-1:
+    oklch(0.646 0.222 41.116);
+  --chart-2:
+    oklch(0.6 0.118 184.704);
+  --chart-3:
+    oklch(0.398 0.07 227.392);
+  --chart-4:
+    oklch(0.828 0.189 84.429);
+  --chart-5:
+    oklch(0.769 0.188 70.08);
+  --sidebar:
+    oklch(0.985 0 0);
+  --sidebar-foreground:
+    oklch(0.145 0 0);
+  --sidebar-primary:
+    oklch(0.205 0 0);
+  --sidebar-primary-foreground:
+    oklch(0.985 0 0);
+  --sidebar-accent:
+    oklch(0.97 0 0);
+  --sidebar-accent-foreground:
+    oklch(0.205 0 0);
+  --sidebar-border:
+    oklch(0.922 0 0);
+  --sidebar-ring:
+    oklch(0.708 0 0);
+}
+
+.dark {
+  --background:
+    oklch(0.145 0 0);
+  --foreground:
+    oklch(0.985 0 0);
+  --card:
+    oklch(0.205 0 0);
+  --card-foreground:
+    oklch(0.985 0 0);
+  --popover:
+    oklch(0.205 0 0);
+  --popover-foreground:
+    oklch(0.985 0 0);
+  --primary:
+    oklch(0.922 0 0);
+  --primary-foreground:
+    oklch(0.205 0 0);
+  --secondary:
+    oklch(0.269 0 0);
+  --secondary-foreground:
+    oklch(0.985 0 0);
+  --muted:
+    oklch(0.269 0 0);
+  --muted-foreground:
+    oklch(0.708 0 0);
+  --accent:
+    oklch(0.269 0 0);
+  --accent-foreground:
+    oklch(0.985 0 0);
+  --destructive:
+    oklch(0.704 0.191 22.216);
+  --border:
+    oklch(1 0 0 / 10%);
+  --input:
+    oklch(1 0 0 / 15%);
+  --ring:
+    oklch(0.556 0 0);
+  --chart-1:
+    oklch(0.488 0.243 264.376);
+  --chart-2:
+    oklch(0.696 0.17 162.48);
+  --chart-3:
+    oklch(0.769 0.188 70.08);
+  --chart-4:
+    oklch(0.627 0.265 303.9);
+  --chart-5:
+    oklch(0.645 0.246 16.439);
+  --sidebar:
+    oklch(0.205 0 0);
+  --sidebar-foreground:
+    oklch(0.985 0 0);
+  --sidebar-primary:
+    oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground:
+    oklch(0.985 0 0);
+  --sidebar-accent:
+    oklch(0.269 0 0);
+  --sidebar-accent-foreground:
+    oklch(0.985 0 0);
+  --sidebar-border:
+    oklch(1 0 0 / 10%);
+  --sidebar-ring:
+    oklch(0.556 0 0);
+}
path: clients/web/src/styles/globals.css
user: login: coderabbitai[bot]
body: _💡 Verification agent_

<details>
<summary>🧩 Analysis chain</summary>

**Ensure dark-mode overrides meet accessibility guidelines**  
The `.dark` block flips many variables, but critical UI states (links, hover states, focus rings) might still lack sufficient contrast or may be missing overrides. Please:  
1. Run automated contrast checks (e.g., using pa11y or axe).  
2. Verify that text and interactive elements meet WCAG AA ratios.  
3. Supplement any missing overrides for UI modifiers (e.g., `--link-hover`, `--button-active`).

---

To verify which theme variables are defined for links and buttons (and compare against `.dark`), let’s list the `.light` block and any custom properties containing “link” or “button”:

---

🏁 Script executed:

```shell
#!/bin/bash
# Show .light block context to compare variables
rg --color=never -n '\.light' -C20 clients/web/src/styles/globals.css

echo
echo "=== Variables with 'link' ==="
rg --color=never -n '^\s*--.*link' clients/web/src/styles/globals.css || true

echo
echo "=== Variables with 'button' ==="
rg --color=never -n '^\s*--.*button' clients/web/src/styles/globals.css || true
```

Length of output: 401

---



</details>

**Add missing link and button state overrides to the dark theme and verify contrast**  
Your `.dark` rules flip most color variables, but I don’t see any custom properties for links or buttons (e.g. `--link`, `--link-hover`, `--button`, `--button-active`, etc.) in either `.light` or `.dark`. Without these, interactive elements may fall back to default colors and fail WCAG AA contrasts.  

Please update `clients/web/src/styles/globals.css` to include at least:  
- `--link` & `--link-foreground`  
- `--link-hover` & `--link-active`  
- `--button` & `--button-foreground`  
- `--button-hover` & `--button-active`  
- `--focus-ring`  

Then run an accessibility checker (axe, pa11y, etc.) against both light and dark modes to confirm all text and controls meet the WCAG AA contrast ratio of 4.5:1.

<details>
<summary>🤖 Prompt for AI Agents</summary>

```
In clients/web/src/styles/globals.css between lines 156 and 219, the .dark CSS
block defines many color variables but lacks custom properties for link and
button states such as --link, --link-hover, --button, --button-active, and
--focus-ring. To fix this, add these missing variables to the .dark block with
appropriate color values ensuring sufficient contrast for interactive elements.
After adding these variables, run an accessibility checker like axe or pa11y to
verify that all text and UI controls meet WCAG AA contrast requirements.
```

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-19T18:42:32Z
author_association: NONE
diff_hunk: @@ -1,4 +1,7 @@
 @import "tailwindcss";
+@import "tw-animate-css";
path: clients/web/src/styles/globals.css
user: login: coderabbitai[bot]
body: _💡 Verification agent_

<details>
<summary>🧩 Analysis chain</summary>

**Validate external CSS import order and availability**  
The directive `@import "tw-animate-css";` depends on having the `tw-animate-css` package properly installed and configured in your PostCSS/Tailwind pipeline. Please verify that:
- `tw-animate-css` is listed under `dependencies` in `package.json`.  
- Your `postcss.config.js` (or equivalent) includes the `postcss-import` plugin and resolves this import before Tailwind processes utilities.  
- There are no conflicts with any `@tailwind base/components/utilities` directives elsewhere.  

Run this to confirm the package is installed and referenced in Tailwind’s config:

---

🏁 Script executed:

```shell
grep -R "\"tw-animate-css\"" package.json && grep -R "tw-animate-css" tailwind.config.js
```

Length of output: 87

---

To locate the correct `package.json` and verify the import, let’s search the repo for both the manifest and any Tailwind config, then grep for `tw-animate-css`:

---

🏁 Script executed:

```shell
#!/bin/bash
# 1. Find all package.json locations
echo "🔍 package.json files:"
find . -type f -name "package.json"

# 2. Search for the tw-animate-css dependency across the repo
echo -e "\n🔍 Searching for 'tw-animate-css' in all files:"
grep -R '"tw-animate-css"' . || echo "No matches found"

# 3. Locate all Tailwind config files
echo -e "\n🔍 tailwind.config.js files:"
find . -type f -name "tailwind.config.js"

# 4. Check each Tailwind config for the import
echo -e "\n🔍 Checking Tailwind configs for 'tw-animate-css':"
for cfg in $(find . -type f -name "tailwind.config.js"); do
  echo "  – In $cfg:"
  grep -H "tw-animate-css" "$cfg" || echo "    (no reference)"
done
```

Length of output: 927

---

Let’s locate any Tailwind and PostCSS configs and verify the import plugin setup:

---

🏁 Script executed:

```shell
#!/bin/bash
# 1. Find any Tailwind configuration files (js, ts, cjs, mjs)
echo "🔍 Tailwind config files:"
find . -type f -regex ".*tailwind\\.config\\..*"

# 2. Find any PostCSS configuration files
echo -e "\n🔍 PostCSS config files:"
find . -type f -name "postcss.config.*"

# 3. Check PostCSS configs for `postcss-import`
echo -e "\n🔍 Checking for 'postcss-import' in PostCSS configs:"
grep -R "postcss-import" -n .

# 4. Verify any build scripts referencing PostCSS or Tailwind in package.json
echo -e "\n🔍 Inspecting build scripts in clients/web/package.json:"
grep -R "\"build\"" -n clients/web/package.json | sed -n '1,10p'
```

Length of output: 626

---

Let’s verify your PostCSS setup and look for any other `@tailwind` directives:

---

🏁 Script executed:

```shell
#!/bin/bash
# 1. Check for postcss-import in your PostCSS config
echo "🔍 Checking for postcss-import in clients/web/postcss.config.js:"
grep -n "postcss-import" clients/web/postcss.config.js || echo "(postcss-import not found)"

# 2. Show the full PostCSS config for context
echo -e "\n🔍 Full contents of clients/web/postcss.config.js:"
sed -n '1,200p' clients/web/postcss.config.js

# 3. Search for other @tailwind directives in your styles folder
echo -e "\n🔍 Searching for additional @tailwind directives:"
grep -R -n "@tailwind" clients/web/src/styles || echo "(no other @tailwind directives found)"
```

Length of output: 735

---



</details>

**Configure CSS imports and Tailwind plugin**  
The `@import "tw-animate-css";` in `clients/web/src/styles/globals.css` won’t be processed without PostCSS-Import and a proper Tailwind setup. Please make the following fixes:

• In clients/web/postcss.config.js  
  - Replace the lone `"@tailwindcss/postcss"` entry with:  
    ```js
    export default {
      plugins: {
        'postcss-import': {},
        tailwindcss: {},
        autoprefixer: {},
      },
    };
    ```  

• Add a Tailwind config at clients/web/tailwind.config.js  
  ```js
  module.exports = {
    content: ['./src/**/*.{js,ts,jsx,tsx}'],
    theme: { extend: {} },
    plugins: [require('tw-animate-css')],
  };
  ```  

• In clients/web/src/styles/globals.css  
  Ensure you include Tailwind’s directives **after** the import:  
  ```css
  @import "tw-animate-css";
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
  ```  

These changes will allow PostCSS to resolve the CSS import and Tailwind to register the animations plugin.

<details>
<summary>🤖 Prompt for AI Agents</summary>

```
In clients/web/src/styles/globals.css at line 2, the @import "tw-animate-css";
directive requires proper PostCSS and Tailwind setup to work. Fix this by
updating clients/web/postcss.config.js to include the 'postcss-import' plugin
before Tailwind and autoprefixer, creating or updating
clients/web/tailwind.config.js to include the tw-animate-css plugin and specify
content paths, and modifying globals.css to add @tailwind base, components, and
utilities directives after the import statement. This ensures the CSS import is
resolved and Tailwind processes the animations plugin correctly.
```

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-19T18:42:32Z
author_association: NONE
diff_hunk: @@ -0,0 +1,14 @@
+"use client";
+
+import Image from "next/image";
+
+import logo from "@/assets/icon.svg";
+
+export default function ThemedLogo({ height = 28 }: { height?: number }) {
+  return (
+    <div className="flex items-center gap-2">
+      <Image src={logo as string} alt="Curiositi" height={height} />
path: clients/web/src/components/themes/themed-logo.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Fix type assertion with proper typing.**

The `as string` type assertion indicates a potential type issue with the imported SVG. This could be resolved by properly typing the import or using Next.js's image optimization more effectively.


```diff
- <Image src={logo as string} alt="Curiositi" height={height} />
+ <Image src={logo} alt="Curiositi Logo" height={height} />
```

If the issue persists, consider adding a proper type declaration for the SVG import:

```typescript
// Add to your types file or declare at the top of this file
declare module "*.svg" {
  const content: string;
  export default content;
}
```

<details>
<summary>🤖 Prompt for AI Agents</summary>

```
In clients/web/src/components/themes/themed-logo.tsx at line 10, the use of 'as
string' for the logo import indicates improper typing of the SVG import. To fix
this, add a proper TypeScript declaration for SVG files either in a global types
file or at the top of this file by declaring a module for '*.svg' that exports
the SVG content as a string. This will remove the need for the type assertion
and ensure correct typing for the imported SVG.
```

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-19T19:36:59Z
author_association: NONE
diff_hunk: @@ -1,19 +1,333 @@
+import Link from "next/link";
 import Image from "next/image";
-import logo from "../assets/logo.svg";
 
-export default function HomePage() {
+import { Search, FileText, Globe, Zap, MessageSquare } from "lucide-react";
+
+import { Section } from "@/components/landing/section";
+import { FeatureCard } from "@/components/landing/feature-card";
+import { HowItWorksStep } from "@/components/landing/how-it-works-step";
+import { UseCaseCard } from "@/components/landing/use-case-card";
+import { PricingPlanCard } from "@/components/landing/pricing-plan-card";
+
+import { Button } from "@/components/ui/button";
+import ThemedLogo from "@/components/themes/themed-logo";
+import ThemeSwitcher from "@/components/themes/theme-switcher";
+
+import agentFlowImage from "@/assets/images/agent-flow.png";
+import GithubIcon from "@/assets/icons/github-icon";
+
+const navLinks = [
+  { href: "#features", label: "Features" },
+  { href: "#how-it-works", label: "How It Works" },
+  { href: "#use-cases", label: "Use Cases" },
+  { href: "#pricing", label: "Pricing" },
+];
+
+const footerLinks = [
+  { href: "#features", label: "Features", isExternal: false },
+  {
+    href: "https://github.com/macintushar/curiositi",
+    label: "GitHub",
+    isExternal: true,
+  },
+];
+
+export default function LandingPage() {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-center bg-emerald-950">
-      <div className="flex flex-col items-center justify-center gap-4 text-center">
-        {/* <h1 className="text-7xl font-extrabold text-white">curiositi</h1> */}
-        <Image src={logo as string} alt="curiositi" className="w-96" />
-        <h1 className="font-serif text-3xl text-stone-100">
-          Find what you need,{" "}
-          <span className="text-stone-100/50 italic">
-            anything from anywhere.
-          </span>
-        </h1>
-      </div>
-    </main>
+    <div className="flex min-h-screen w-full flex-col items-center">
+      <header className="bg-background/80 fixed top-0 right-0 left-0 z-50 border-b backdrop-blur-md">
+        <div className="flex h-16 items-center justify-between px-4 md:px-6">
+          <Link href="/" className="flex items-center gap-2">
+            <ThemedLogo />
+          </Link>
+          <nav className="hidden gap-8 md:flex">
+            {navLinks.map((link) => (
+              <Link
+                key={link.href}
+                href={link.href}
+                className="text-muted-foreground hover:text-foreground text-sm font-medium transition-colors"
+              >
+                {link.label}
+              </Link>
+            ))}
+          </nav>
+          <div className="flex items-center gap-4">
+            <Link
+              href="/login"
+              className="text-muted-foreground hover:text-foreground hidden text-sm font-medium transition-colors md:block"
+            >
+              Log In
+            </Link>
+            <Button variant="default" className="rounded-full">
+              Get Started
+            </Button>
+            <ThemeSwitcher />
+          </div>
+        </div>
+      </header>
+      <main className="w-full flex-1 pt-4">
+        <section className="w-full py-20 md:py-32 lg:py-40">
+          <div className="px-4 md:px-6">
+            <div className="animate-fade-up mx-auto max-w-3xl space-y-8 text-center">
+              <div className="bg-secondary text-secondary-foreground mb-4 inline-flex items-center justify-center rounded-full px-3 py-1 text-sm font-medium">
+                <span>Introducing Curiositi</span>
+              </div>
+              <h1 className="font-serif text-4xl font-medium tracking-tight text-balance text-emerald-700 md:text-5xl lg:text-6xl">
+                <span className="text-gradient">Precise answers</span> from your
+                documents and the web
+              </h1>
+              <p className="text-muted-foreground mx-auto max-w-2xl text-xl">
+                Curiositi combines your documents with live web data to deliver
+                context-aware answers using advanced AI and Retrieval-Augmented
+                Generation.
+              </p>
+              <div className="flex flex-col justify-center gap-4 sm:flex-row">
+                <Button size="lg" className="rounded-full px-8">
+                  Try Curiositi Free
+                </Button>
+                <Button
+                  size="lg"
+                  variant="outline"
+                  className="rounded-full px-8"
+                >
+                  See Demo
+                </Button>
+              </div>
+            </div>
+
+            <div className="animate-fade-up animation-delay-200 mt-16 flex justify-center md:mt-24">
+              <div className="relative w-full max-w-4xl overflow-hidden rounded-lg border shadow-xl">
+                <div className="from-primary/10 to-primary/5 absolute inset-0 rounded-lg bg-gradient-to-br"></div>
+                <div className="bg-card relative h-full rounded-lg border-0 p-6">
+                  <div className="flex h-full flex-col">
+                    <div className="mb-6 flex items-center gap-2">
+                      <Search className="text-muted-foreground h-5 w-5" />
+                      <div className="bg-background flex-1 rounded-full px-4 py-2 text-sm">
+                        How does RAG improve AI responses?
+                      </div>
+                    </div>
+                    <div className="bg-background/50 mb-6 flex-1 rounded-lg p-6">
+                      <p className="text-sm leading-relaxed">
+                        Retrieval-Augmented Generation (RAG) improves AI
+                        responses by combining the power of large language
+                        models with specific information retrieval. When you ask
+                        a question, RAG first searches through your documents
+                        and the web to find relevant information, then uses this
+                        context to generate more accurate, up-to-date, and
+                        personalized answers.
+                      </p>
+                      <div className="border-border/40 mt-4 border-t pt-4">
+                        <p className="text-muted-foreground text-xs">
+                          Sources: Your Documents, Web Search (May 2025)
+                        </p>
+                      </div>
+                    </div>
+                    <div className="flex gap-2">
+                      <Button
+                        size="sm"
+                        variant="secondary"
+                        className="rounded-full"
+                      >
+                        <FileText className="mr-1 h-4 w-4" />
+                        Your Documents
+                      </Button>
+                      <Button
+                        size="sm"
+                        variant="secondary"
+                        className="rounded-full"
+                      >
+                        <Globe className="mr-1 h-4 w-4" />
+                        Web Data
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <Section
+          id="features"
+          className="bg-secondary/50"
+          title="Powerful AI with context-aware intelligence"
+          subtitle="Curiositi combines the best of AI language models with your data and the latest information from the web."
+          titlePrefix={
+            <div className="bg-primary/10 text-primary mb-2 inline-flex items-center justify-center rounded-full px-3 py-1 text-sm font-medium">
+              Features
+            </div>
+          }
+        >
+          <div className="mx-auto grid max-w-5xl items-start gap-8 py-12 md:grid-cols-3">
+            <FeatureCard
+              icon={<FileText className="h-6 w-6" />}
+              title="Document Intelligence"
+              description="Upload your documents, PDFs, spreadsheets, and presentations for instant insights and answers."
+              link="#"
+            />
+            <FeatureCard
+              icon={<Globe className="h-6 w-6" />}
+              title="Live Web Data"
+              description="Access real-time information from the web to complement your documents with the latest data."
+              link="#"
+            />
+            <FeatureCard
+              icon={<Zap className="h-6 w-6" />}
+              title="Hybrid RAG System"
+              description="Our advanced Retrieval-Augmented Generation system ensures precise, contextual answers every time."
+              link="#"
+            />
path: clients/web/src/app/page.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Fix non-functional feature links**

All feature cards have `link="#"` which are placeholder links that don't navigate anywhere. This impacts usability and prevents users from exploring features in depth.

Replace these placeholder links with actual routes or consider implementing feature detail pages.

<details>
<summary>🤖 Prompt for AI Agents</summary>

```
In clients/web/src/app/page.tsx around lines 161 to 179, the FeatureCard
components use placeholder links ("#") which do not navigate anywhere. Replace
these placeholder links with actual URLs or routes that lead to detailed pages
for each feature, or implement new feature detail pages and update the link
props accordingly to improve navigation and usability.
```

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-19T20:17:21Z
author_association: NONE
diff_hunk: @@ -1,19 +1,333 @@
+import Link from "next/link";
 import Image from "next/image";
-import logo from "../assets/logo.svg";
 
-export default function HomePage() {
+import { Search, FileText, Globe, Zap, MessageSquare } from "lucide-react";
+
+import { Section } from "@/components/landing/section";
+import { FeatureCard } from "@/components/landing/feature-card";
+import { HowItWorksStep } from "@/components/landing/how-it-works-step";
+import { UseCaseCard } from "@/components/landing/use-case-card";
+import { PricingPlanCard } from "@/components/landing/pricing-plan-card";
+
+import { Button } from "@/components/ui/button";
+import ThemedLogo from "@/components/themes/themed-logo";
+import ThemeSwitcher from "@/components/themes/theme-switcher";
+
+import agentFlowImage from "@/assets/images/agent-flow.png";
+import GithubIcon from "@/assets/icons/github-icon";
+
+const navLinks = [
+  { href: "#features", label: "Features" },
+  { href: "#how-it-works", label: "How It Works" },
+  { href: "#use-cases", label: "Use Cases" },
+  { href: "#pricing", label: "Pricing" },
+];
+
+const footerLinks = [
+  { href: "#features", label: "Features", isExternal: false },
+  {
+    href: "https://github.com/macintushar/curiositi",
+    label: "GitHub",
+    isExternal: true,
+  },
+];
+
+export default function LandingPage() {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-center bg-emerald-950">
-      <div className="flex flex-col items-center justify-center gap-4 text-center">
-        {/* <h1 className="text-7xl font-extrabold text-white">curiositi</h1> */}
-        <Image src={logo as string} alt="curiositi" className="w-96" />
-        <h1 className="font-serif text-3xl text-stone-100">
-          Find what you need,{" "}
-          <span className="text-stone-100/50 italic">
-            anything from anywhere.
-          </span>
-        </h1>
-      </div>
-    </main>
+    <div className="flex min-h-screen w-full flex-col items-center">
+      <header className="bg-background/80 fixed top-0 right-0 left-0 z-50 border-b backdrop-blur-md">
+        <div className="flex h-16 items-center justify-between px-4 md:px-6">
+          <Link href="/" className="flex items-center gap-2">
+            <ThemedLogo />
+          </Link>
+          <nav className="hidden gap-8 md:flex">
+            {navLinks.map((link) => (
+              <Link
+                key={link.href}
+                href={link.href}
+                className="text-muted-foreground hover:text-foreground text-sm font-medium transition-colors"
+              >
+                {link.label}
+              </Link>
+            ))}
+          </nav>
+          <div className="flex items-center gap-4">
+            <Link
+              href="/login"
+              className="text-muted-foreground hover:text-foreground hidden text-sm font-medium transition-colors md:block"
+            >
+              Log In
+            </Link>
+            <Button variant="default" className="rounded-full">
+              Get Started
+            </Button>
+            <ThemeSwitcher />
+          </div>
+        </div>
+      </header>
+      <main className="w-full flex-1 pt-4">
+        <section className="w-full py-20 md:py-32 lg:py-40">
+          <div className="px-4 md:px-6">
+            <div className="animate-fade-up mx-auto max-w-3xl space-y-8 text-center">
+              <div className="bg-secondary text-secondary-foreground mb-4 inline-flex items-center justify-center rounded-full px-3 py-1 text-sm font-medium">
+                <span>Introducing Curiositi</span>
+              </div>
+              <h1 className="font-serif text-4xl font-medium tracking-tight text-balance text-emerald-700 md:text-5xl lg:text-6xl">
+                <span className="text-gradient">Precise answers</span> from your
+                documents and the web
+              </h1>
+              <p className="text-muted-foreground mx-auto max-w-2xl text-xl">
+                Curiositi combines your documents with live web data to deliver
+                context-aware answers using advanced AI and Retrieval-Augmented
+                Generation.
+              </p>
+              <div className="flex flex-col justify-center gap-4 sm:flex-row">
+                <Button size="lg" className="rounded-full px-8">
+                  Try Curiositi Free
+                </Button>
+                <Button
+                  size="lg"
+                  variant="outline"
+                  className="rounded-full px-8"
+                >
+                  See Demo
+                </Button>
+              </div>
+            </div>
+
+            <div className="animate-fade-up animation-delay-200 mt-16 flex justify-center md:mt-24">
+              <div className="relative w-full max-w-4xl overflow-hidden rounded-lg border shadow-xl">
+                <div className="from-primary/10 to-primary/5 absolute inset-0 rounded-lg bg-gradient-to-br"></div>
+                <div className="bg-card relative h-full rounded-lg border-0 p-6">
+                  <div className="flex h-full flex-col">
+                    <div className="mb-6 flex items-center gap-2">
+                      <Search className="text-muted-foreground h-5 w-5" />
+                      <div className="bg-background flex-1 rounded-full px-4 py-2 text-sm">
+                        How does RAG improve AI responses?
+                      </div>
+                    </div>
+                    <div className="bg-background/50 mb-6 flex-1 rounded-lg p-6">
+                      <p className="text-sm leading-relaxed">
+                        Retrieval-Augmented Generation (RAG) improves AI
+                        responses by combining the power of large language
+                        models with specific information retrieval. When you ask
+                        a question, RAG first searches through your documents
+                        and the web to find relevant information, then uses this
+                        context to generate more accurate, up-to-date, and
+                        personalized answers.
+                      </p>
+                      <div className="border-border/40 mt-4 border-t pt-4">
+                        <p className="text-muted-foreground text-xs">
+                          Sources: Your Documents, Web Search (May 2025)
+                        </p>
+                      </div>
+                    </div>
+                    <div className="flex gap-2">
+                      <Button
+                        size="sm"
+                        variant="secondary"
+                        className="rounded-full"
+                      >
+                        <FileText className="mr-1 h-4 w-4" />
+                        Your Documents
+                      </Button>
+                      <Button
+                        size="sm"
+                        variant="secondary"
+                        className="rounded-full"
+                      >
+                        <Globe className="mr-1 h-4 w-4" />
+                        Web Data
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <Section
+          id="features"
+          className="bg-secondary/50"
+          title="Powerful AI with context-aware intelligence"
+          subtitle="Curiositi combines the best of AI language models with your data and the latest information from the web."
+          titlePrefix={
+            <div className="bg-primary/10 text-primary mb-2 inline-flex items-center justify-center rounded-full px-3 py-1 text-sm font-medium">
+              Features
+            </div>
+          }
+        >
+          <div className="mx-auto grid max-w-5xl items-start gap-8 py-12 md:grid-cols-3">
+            <FeatureCard
+              icon={<FileText className="h-6 w-6" />}
+              title="Document Intelligence"
+              description="Upload your documents, PDFs, spreadsheets, and presentations for instant insights and answers."
+              link="#"
+            />
+            <FeatureCard
+              icon={<Globe className="h-6 w-6" />}
+              title="Live Web Data"
+              description="Access real-time information from the web to complement your documents with the latest data."
+              link="#"
+            />
+            <FeatureCard
+              icon={<Zap className="h-6 w-6" />}
+              title="Hybrid RAG System"
+              description="Our advanced Retrieval-Augmented Generation system ensures precise, contextual answers every time."
+              link="#"
+            />
+          </div>
+        </Section>
+
+        <Section
+          id="how-it-works"
+          title="Retrieval-Augmented Generation"
+          subtitle="See how Curiositi combines your documents with web data to deliver precise answers."
+          titlePrefix={
+            <div className="bg-primary/10 text-primary mb-2 inline-flex items-center justify-center rounded-full px-3 py-1 text-sm font-medium">
+              How It Works
+            </div>
+          }
+        >
+          <div className="mx-auto grid max-w-5xl items-center gap-12 py-12 lg:grid-cols-2">
+            <div className="relative overflow-hidden rounded-xl border shadow-lg">
+              <div className="from-primary/5 absolute inset-0 bg-gradient-to-br to-transparent"></div>
+              <Image
+                src={agentFlowImage}
+                width={500}
+                height={400}
+                alt="RAG System Diagram"
+                className="h-auto w-full bg-white object-cover p-1"
+              />
+            </div>
+            <div className="space-y-8">
+              <HowItWorksStep
+                stepNumber={1}
+                title="Document Processing"
+                description="Upload your documents which are processed, indexed, and stored securely."
+              />
+              <HowItWorksStep
+                stepNumber={2}
+                title="Query Understanding"
+                description="When you ask a question, our AI understands the context and intent behind it."
+              />
+              <HowItWorksStep
+                stepNumber={3}
+                title="Retrieval"
+                description="The system retrieves relevant information from your documents and the web."
+              />
+              <HowItWorksStep
+                stepNumber={4}
+                title="Generation"
+                description="Using the retrieved context, our AI generates precise, tailored answers."
+              />
+            </div>
+          </div>
+        </Section>
+
+        <Section
+          id="use-cases"
+          className="bg-secondary/50"
+          title="How people are using Curiositi"
+          subtitle="Discover how Curiositi is transforming how people work with information."
+          titlePrefix={
+            <div className="bg-primary/10 text-primary mb-2 inline-flex items-center justify-center rounded-full px-3 py-1 text-sm font-medium">
+              Use Cases
+            </div>
+          }
+        >
+          <div className="mx-auto grid max-w-5xl gap-8 py-12 md:grid-cols-3">
+            <UseCaseCard
+              icon={<MessageSquare className="h-6 w-6" />}
+              title="Research & Analysis"
+              description="Researchers use Curiositi to analyze documents and find connections across multiple sources, saving hours of manual work."
+            />
+            <UseCaseCard
+              icon={<MessageSquare className="h-6 w-6" />}
+              title="Knowledge Management"
+              description="Companies use Curiositi to make their internal knowledge bases accessible and actionable for all employees."
+            />
+            <UseCaseCard
+              icon={<MessageSquare className="h-6 w-6" />}
+              title="Study & Research"
+              description="Students and researchers use Curiositi to research topics and generate content backed by accurate, up-to-date information based on their lectures, textbooks, and other documents."
+            />
+          </div>
+        </Section>
+
+        <Section
+          id="pricing"
+          title="Simple, transparent pricing"
+          subtitle="Choose the plan that's right for you and start getting better answers today."
+          titlePrefix={
+            <div className="bg-primary/10 text-primary mb-2 inline-flex items-center justify-center rounded-full px-3 py-1 text-sm font-medium">
+              Pricing
+            </div>
+          }
+        >
+          <div className="mx-auto flex max-w-5xl justify-center py-12">
+            <PricingPlanCard
+              title="Free"
+              description="Use Curiositi for free by deploying your own instance"
+              price=""
+              priceSuffix=""
+              features={[
+                "Upload unlimited documents",
+                "Unlimited queries",
+                "Unlimited web retrieval",
+                "Bring your own models",
+                "Own your data, forever",
+              ]}
+              ctaText="GitHub"
+              CtaExtra={<GithubIcon />}
+              ctaHref="https://github.com/macintushar/curiositi"
+              className="w-full md:w-1/3"
+              ctaHrefExternal
+            />
+          </div>
+        </Section>
+      </main>
+      <footer className="bg-background w-full border-t">
+        <div className="flex flex-col gap-8 px-4 py-8 md:px-6">
+          <div className="flex flex-col items-start gap-4 md:flex-row md:items-center md:gap-8">
+            <Link href="/" className="flex items-center gap-2">
+              <ThemedLogo />
+            </Link>
+            <nav className="flex flex-wrap gap-6 md:ml-auto">
+              {footerLinks.map((link) => (
+                <Link
+                  key={link.href + link.label}
+                  href={link.href}
+                  className="text-muted-foreground hover:text-foreground text-sm transition-colors"
+                  target={link.isExternal ? "_blank" : "_self"}
+                >
+                  {link.label}
+                </Link>
+              ))}
+            </nav>
+          </div>
+          <div className="flex flex-col items-start justify-between gap-4 md:flex-row md:items-center">
+            <p className="text-muted-foreground text-xs">
+              &copy; {new Date().getFullYear()} Curiositi. All rights reserved.
+            </p>
+            <div className="flex gap-6">
+              <Link
+                href="#"
+                className="text-muted-foreground hover:text-foreground text-xs transition-colors"
+              >
+                Terms of Service
+              </Link>
+              <Link
+                href="#"
+                className="text-muted-foreground hover:text-foreground text-xs transition-colors"
+              >
+                Privacy Policy
+              </Link>
+            </div>
path: clients/web/src/app/page.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Implement or remove placeholder legal links**

The Terms of Service and Privacy Policy links are pointing to "#", making them non-functional. Legal pages are important for compliance and user trust.

Either implement these pages or remove the links until they're ready. If they're in development, you could add a "Coming soon" tooltip or disable the links.

<details>
<summary>🤖 Prompt for AI Agents</summary>

```
In clients/web/src/app/page.tsx around lines 315 to 327, the Terms of Service
and Privacy Policy links currently point to "#" which makes them non-functional
placeholders. To fix this, either update the href attributes to point to the
actual legal pages if they exist, or remove these Link components entirely until
the pages are ready. Alternatively, if the pages are under development, disable
the links or add a "Coming soon" tooltip to inform users.
```

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-19T20:17:22Z
author_association: NONE
diff_hunk: @@ -1,19 +1,333 @@
+import Link from "next/link";
 import Image from "next/image";
-import logo from "../assets/logo.svg";
 
-export default function HomePage() {
+import { Search, FileText, Globe, Zap, MessageSquare } from "lucide-react";
+
+import { Section } from "@/components/landing/section";
+import { FeatureCard } from "@/components/landing/feature-card";
+import { HowItWorksStep } from "@/components/landing/how-it-works-step";
+import { UseCaseCard } from "@/components/landing/use-case-card";
+import { PricingPlanCard } from "@/components/landing/pricing-plan-card";
+
+import { Button } from "@/components/ui/button";
+import ThemedLogo from "@/components/themes/themed-logo";
+import ThemeSwitcher from "@/components/themes/theme-switcher";
+
+import agentFlowImage from "@/assets/images/agent-flow.png";
+import GithubIcon from "@/assets/icons/github-icon";
+
+const navLinks = [
+  { href: "#features", label: "Features" },
+  { href: "#how-it-works", label: "How It Works" },
+  { href: "#use-cases", label: "Use Cases" },
+  { href: "#pricing", label: "Pricing" },
+];
+
+const footerLinks = [
+  { href: "#features", label: "Features", isExternal: false },
+  {
+    href: "https://github.com/macintushar/curiositi",
+    label: "GitHub",
+    isExternal: true,
+  },
+];
+
+export default function LandingPage() {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-center bg-emerald-950">
-      <div className="flex flex-col items-center justify-center gap-4 text-center">
-        {/* <h1 className="text-7xl font-extrabold text-white">curiositi</h1> */}
-        <Image src={logo as string} alt="curiositi" className="w-96" />
-        <h1 className="font-serif text-3xl text-stone-100">
-          Find what you need,{" "}
-          <span className="text-stone-100/50 italic">
-            anything from anywhere.
-          </span>
-        </h1>
-      </div>
-    </main>
+    <div className="flex min-h-screen w-full flex-col items-center">
+      <header className="bg-background/80 fixed top-0 right-0 left-0 z-50 border-b backdrop-blur-md">
+        <div className="flex h-16 items-center justify-between px-4 md:px-6">
+          <Link href="/" className="flex items-center gap-2">
+            <ThemedLogo />
+          </Link>
+          <nav className="hidden gap-8 md:flex">
+            {navLinks.map((link) => (
+              <Link
+                key={link.href}
+                href={link.href}
+                className="text-muted-foreground hover:text-foreground text-sm font-medium transition-colors"
+              >
+                {link.label}
+              </Link>
+            ))}
+          </nav>
+          <div className="flex items-center gap-4">
+            <Link
+              href="/login"
+              className="text-muted-foreground hover:text-foreground hidden text-sm font-medium transition-colors md:block"
+            >
+              Log In
+            </Link>
+            <Button variant="default" className="rounded-full">
+              Get Started
+            </Button>
+            <ThemeSwitcher />
+          </div>
+        </div>
+      </header>
+      <main className="w-full flex-1 pt-4">
+        <section className="w-full py-20 md:py-32 lg:py-40">
+          <div className="px-4 md:px-6">
+            <div className="animate-fade-up mx-auto max-w-3xl space-y-8 text-center">
+              <div className="bg-secondary text-secondary-foreground mb-4 inline-flex items-center justify-center rounded-full px-3 py-1 text-sm font-medium">
+                <span>Introducing Curiositi</span>
+              </div>
+              <h1 className="font-serif text-4xl font-medium tracking-tight text-balance text-emerald-700 md:text-5xl lg:text-6xl">
+                <span className="text-gradient">Precise answers</span> from your
+                documents and the web
+              </h1>
+              <p className="text-muted-foreground mx-auto max-w-2xl text-xl">
+                Curiositi combines your documents with live web data to deliver
+                context-aware answers using advanced AI and Retrieval-Augmented
+                Generation.
+              </p>
+              <div className="flex flex-col justify-center gap-4 sm:flex-row">
+                <Button size="lg" className="rounded-full px-8">
+                  Try Curiositi Free
+                </Button>
+                <Button
+                  size="lg"
+                  variant="outline"
+                  className="rounded-full px-8"
+                >
+                  See Demo
+                </Button>
+              </div>
+            </div>
+
+            <div className="animate-fade-up animation-delay-200 mt-16 flex justify-center md:mt-24">
+              <div className="relative w-full max-w-4xl overflow-hidden rounded-lg border shadow-xl">
+                <div className="from-primary/10 to-primary/5 absolute inset-0 rounded-lg bg-gradient-to-br"></div>
+                <div className="bg-card relative h-full rounded-lg border-0 p-6">
+                  <div className="flex h-full flex-col">
+                    <div className="mb-6 flex items-center gap-2">
+                      <Search className="text-muted-foreground h-5 w-5" />
+                      <div className="bg-background flex-1 rounded-full px-4 py-2 text-sm">
+                        How does RAG improve AI responses?
+                      </div>
+                    </div>
+                    <div className="bg-background/50 mb-6 flex-1 rounded-lg p-6">
+                      <p className="text-sm leading-relaxed">
+                        Retrieval-Augmented Generation (RAG) improves AI
+                        responses by combining the power of large language
+                        models with specific information retrieval. When you ask
+                        a question, RAG first searches through your documents
+                        and the web to find relevant information, then uses this
+                        context to generate more accurate, up-to-date, and
+                        personalized answers.
+                      </p>
+                      <div className="border-border/40 mt-4 border-t pt-4">
+                        <p className="text-muted-foreground text-xs">
+                          Sources: Your Documents, Web Search (May 2025)
+                        </p>
+                      </div>
path: clients/web/src/app/page.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Update or parameterize the future date in source text**

The source text mentions "Web Search (May 2025)" which appears to be a future date. This might confuse users or make the content seem outdated later.

Either update to the current date or dynamically generate the date using JavaScript:

```diff
- Sources: Your Documents, Web Search (May 2025)
+ Sources: Your Documents, Web Search ({new Date().toLocaleString('en-US', {month: 'long', year: 'numeric'})})
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

```suggestion
                      <div className="border-border/40 mt-4 border-t pt-4">
                        <p className="text-muted-foreground text-xs">
                          Sources: Your Documents, Web Search ({new Date().toLocaleString('en-US', { month: 'long', year: 'numeric' })})
                        </p>
                      </div>
```

</details>

<!-- suggestion_end -->

<details>
<summary>🤖 Prompt for AI Agents</summary>

```
In clients/web/src/app/page.tsx around lines 119 to 123, the source text
includes a hardcoded future date "Web Search (May 2025)" which can become
outdated or confusing. Replace this static date with a dynamically generated
current date using JavaScript, such as extracting the current month and year,
and formatting it appropriately to display in the source text. This ensures the
date shown is always up-to-date without manual changes.
```

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-19T20:17:22Z
author_association: NONE
diff_hunk: @@ -0,0 +1,42 @@
+import Link from "next/link";
+
+import ThemeSwitcher from "@/components/themes/theme-switcher";
+import ThemedLogo from "@/components/themes/themed-logo";
+import { Button } from "@/components/ui/button";
+
+import { navLinks } from "@/constants";
+
+export default function Header() {
+  return (
+    <header className="bg-background/80 fixed top-0 right-0 left-0 z-50 border-b backdrop-blur-md">
+      <div className="flex h-16 items-center justify-between px-4 md:px-6">
+        <Link href="/" className="flex items-center gap-2">
+          <ThemedLogo />
+        </Link>
+        <nav className="hidden gap-8 md:flex">
+          {navLinks.map((link) => (
+            <Link
+              key={link.href}
+              href={link.href}
+              className="text-muted-foreground hover:text-foreground text-sm font-medium transition-colors"
+            >
+              {link.label}
+            </Link>
+          ))}
+        </nav>
+        <div className="flex items-center gap-4">
+          <Link
+            href="/login"
+            className="text-muted-foreground hover:text-foreground hidden text-sm font-medium transition-colors md:block"
+          >
+            Log In
+          </Link>
+          <Button variant="default" className="rounded-full">
+            Get Started
+          </Button>
path: clients/web/src/views/landing/header.tsx
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Add functionality to the "Get Started" button**

The "Get Started" button currently lacks an `href` attribute or `onClick` handler, which makes it non-functional. Users won't be able to progress to the next step in the journey.


```diff
-          <Button variant="default" className="rounded-full">
+          <Button variant="default" className="rounded-full" asChild>
+            <Link href="/signup">
             Get Started
+            </Link>
           </Button>
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

```suggestion
          <Button variant="default" className="rounded-full" asChild>
            <Link href="/signup">
              Get Started
            </Link>
          </Button>
```

</details>

<!-- suggestion_end -->

<details>
<summary>🤖 Prompt for AI Agents</summary>

```
In clients/web/src/views/landing/header.tsx around lines 34 to 36, the "Get
Started" button lacks functionality because it has no href attribute or onClick
handler. Add an appropriate href attribute if it should navigate to another
page, or implement an onClick handler to trigger the next step in the user
journey, ensuring the button performs the intended action when clicked.
```

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-19T21:20:42Z
author_association: NONE
diff_hunk: @@ -1,19 +1,250 @@
 import Image from "next/image";
-import logo from "../assets/logo.svg";
 
-export default function HomePage() {
+import { Search, FileText, Globe, Zap, MessageSquare } from "lucide-react";
+
+import { Section } from "@/components/landing/section";
+import { FeatureCard } from "@/components/landing/feature-card";
+import { HowItWorksStep } from "@/components/landing/how-it-works-step";
+import { UseCaseCard } from "@/components/landing/use-case-card";
+import { PricingPlanCard } from "@/components/landing/pricing-plan-card";
+
+import { Button } from "@/components/ui/button";
+
+import agentFlowImage from "@/assets/images/agent-flow.png";
+import GithubIcon from "@/assets/icons/github-icon";
+import Header from "@/views/landing/header";
+import Footer from "@/views/landing/footer";
+
+import { ghURL } from "@/constants";
+
+export default function LandingPage() {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-center bg-emerald-950">
-      <div className="flex flex-col items-center justify-center gap-4 text-center">
-        {/* <h1 className="text-7xl font-extrabold text-white">curiositi</h1> */}
-        <Image src={logo as string} alt="curiositi" className="w-96" />
-        <h1 className="font-serif text-3xl text-stone-100">
-          Find what you need,{" "}
-          <span className="text-stone-100/50 italic">
-            anything from anywhere.
-          </span>
-        </h1>
-      </div>
-    </main>
+    <div className="flex min-h-screen w-full flex-col items-center">
+      <Header />
+      <main className="w-full flex-1 pt-4">
+        <section className="w-full py-20 md:py-32 lg:py-40">
+          <div className="px-4 md:px-6">
+            <div className="animate-fade-up mx-auto max-w-3xl space-y-8 text-center">
+              <div className="bg-secondary text-secondary-foreground mb-4 inline-flex items-center justify-center rounded-full px-3 py-1 text-sm font-medium">
+                <span>🎉 Introducing Curiositi! 🎉</span>
+              </div>
+              <h1 className="text-primary font-serif text-4xl font-medium tracking-tight text-balance md:text-5xl lg:text-6xl">
+                <span className="text-gradient">Get answers</span> from your
+                documents and the web
+              </h1>
+              <p className="text-muted-foreground mx-auto max-w-2xl text-xl">
+                Curiositi combines your documents with live web data to deliver
+                context-aware answers using advanced AI and Retrieval-Augmented
+                Generation.
+              </p>
+              <div className="flex flex-col justify-center gap-4 sm:flex-row">
+                <Button size="lg" className="rounded-full px-8">
+                  Try Curiositi Free
+                </Button>
+                <Button
+                  size="lg"
+                  variant="outline"
+                  className="rounded-full px-8"
+                >
+                  See Demo
+                </Button>
path: clients/web/src/app/page.tsx
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Add functionality to CTA buttons**

Both "Try Curiositi Free" and "See Demo" buttons lack navigation or action handlers, making them non-functional. These are critical conversion points on the landing page.


```diff
-              <Button size="lg" className="rounded-full px-8">
+              <Button size="lg" className="rounded-full px-8" asChild>
+                <Link href="/signup">
                 Try Curiositi Free
+                </Link>
               </Button>
               <Button
                 size="lg"
                 variant="outline"
                 className="rounded-full px-8"
+                asChild
               >
+                <Link href="/demo">
                 See Demo
+                </Link>
               </Button>
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

```suggestion
                <Button size="lg" className="rounded-full px-8" asChild>
                  <Link href="/signup">
                    Try Curiositi Free
                  </Link>
                </Button>
                <Button
                  size="lg"
                  variant="outline"
                  className="rounded-full px-8"
                  asChild
                >
                  <Link href="/demo">
                    See Demo
                  </Link>
                </Button>
```

</details>

<!-- suggestion_end -->

<details>
<summary>🤖 Prompt for AI Agents</summary>

```
In clients/web/src/app/page.tsx around lines 41 to 50, the "Try Curiositi Free"
and "See Demo" buttons currently have no onClick handlers or navigation logic,
making them non-functional. Add appropriate onClick handlers or link components
to these buttons to navigate users to the relevant pages or trigger the intended
actions when clicked, ensuring these CTAs perform their conversion roles.
```

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-19T21:20:42Z
author_association: NONE

PR comments:
user: login: vercel[bot]
created_at: 2025-05-19T18:37:56Z
body: [vc]: #Tu8OdC97gpZWnV6VVWZZUCNCpdUWZvOsCkB0Dqqywz0=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJjdXJpb3NpdGktd2ViIiwiaW5zcGVjdG9yVXJsIjoiaHR0cHM6Ly92ZXJjZWwuY29tL3R1c2hhci1zZWx2YWt1bWFycy1wcm9qZWN0cy9jdXJpb3NpdGktd2ViL0NBWlFtM21WcENLem82WkRqeVJ6TEczTTQzU3UiLCJwcmV2aWV3VXJsIjoiY3VyaW9zaXRpLXdlYi1naXQtZmVhdC1sYW5kaW5nLXBhZ2UtdHVzaGFyLXNlbHZha3VtYXJzLXByb2plY3RzLnZlcmNlbC5hcHAiLCJuZXh0Q29tbWl0U3RhdHVzIjoiREVQTE9ZRUQiLCJsaXZlRmVlZGJhY2siOnsicmVzb2x2ZWQiOjAsInVucmVzb2x2ZWQiOjAsInRvdGFsIjowLCJsaW5rIjoiY3VyaW9zaXRpLXdlYi1naXQtZmVhdC1sYW5kaW5nLXBhZ2UtdHVzaGFyLXNlbHZha3VtYXJzLXByb2plY3RzLnZlcmNlbC5hcHAifSwicm9vdERpcmVjdG9yeSI6ImNsaWVudHMvd2ViIn1dfQ==
**The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)

| Name | Status | Preview | Comments | Updated (UTC) |
| :--- | :----- | :------ | :------- | :------ |
| **curiositi-web** | ✅ Ready ([Inspect](https://vercel.com/tushar-selvakumars-projects/curiositi-web/CAZQm3mVpCKzo6ZDjyRzLG3M43Su)) | [Visit Preview](https://curiositi-web-git-feat-landing-page-tushar-selvakumars-projects.vercel.app) | 💬 [**Add feedback**](https://vercel.live/open-feedback/curiositi-web-git-feat-landing-page-tushar-selvakumars-projects.vercel.app?via=pr-comment-feedback-link) | May 20, 2025 9:46am |


author_association: NONE
user: login: coderabbitai[bot]
created_at: 2025-05-19T18:37:58Z
body: <!-- This is an auto-generated comment: summarize by coderabbit.ai -->
<!-- This is an auto-generated comment: failure by coderabbit.ai -->

> [!CAUTION]
> ## Review failed
> 
> The pull request is closed.

<!-- end of auto-generated comment: failure by coderabbit.ai -->
<!-- walkthrough_start -->

## Walkthrough

This update introduces a comprehensive redesign of the Curiositi web client's landing page, adding new UI components, enhanced theming, and improved utility functions. Major additions include custom cards, theme management, a new button system, and a robust CSS theming structure supporting light and dark modes. Several new dependencies were added to support these features. The Next.js configuration was updated to include dynamic API rewrites. Additionally, a new FAQ page and accordion UI components were added, along with navigation and footer components and related link constants.

## Changes

| File(s)                                                                                  | Change Summary                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
|------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `clients/web/components.json`                                                            | Added a JSON configuration file specifying UI component settings, Tailwind CSS configuration, path aliases, and icon library.                                                                                                                                                                                                                                                                                                                                                                        |
| `clients/web/package.json`                                                               | Added dependencies: `@radix-ui/react-accordion`, `@radix-ui/react-slot`, `class-variance-authority`, `clsx`, `lucide-react`, `next-themes`, `tailwind-merge`; added devDependency: `tw-animate-css`.                                                                                                                                                                                                                                                                                                   |
| `clients/web/next.config.js`                                                             | Added import of environment variables and a dynamic rewrite rule mapping `/api/v1/*` requests to a backend server URL from environment config.                                                                                                                                                                                                                                                                                                                                                        |
| `clients/web/src/app/layout.tsx`                                                         | Modified RootLayout to wrap children in a ThemeProvider and added `suppressHydrationWarning` to `<html>`.                                                                                                                                                                                                                                                                                                                                                                                          |
| `clients/web/src/app/page.tsx`                                                           | Replaced minimal homepage with a full-featured landing page, including fixed header and footer, hero, features, how-it-works, use cases, pricing sections, using new UI components and organized link arrays. Default export renamed from `HomePage` to `LandingPage`.                                                                                                                                                                                                                              |
| `clients/web/src/app/faq/page.tsx`                                                       | Added new FAQ page component rendering a header, footer, and an accordion with multiple FAQ entries.                                                                                                                                                                                                                                                                                                                                                                                               |
| `clients/web/src/assets/icons/github-icon.tsx`                                           | Added a new exported React component rendering a GitHub SVG icon with accessibility features.                                                                                                                                                                                                                                                                                                                                                                                                       |
| `clients/web/src/components/landing/feature-card.tsx`<br>`clients/web/src/components/landing/how-it-works-step.tsx`<br>`clients/web/src/components/landing/pricing-plan-card.tsx`<br>`clients/web/src/components/landing/section.tsx`<br>`clients/web/src/components/landing/use-case-card.tsx` | Added new exported React components for landing page sections: `FeatureCard`, `HowItWorksStep`, `PricingPlanCard`, `Section`, and `UseCaseCard`, each with typed props and custom layouts.                                                                                                                                                                                                                                                                   |
| `clients/web/src/components/themes/theme-provider.tsx`<br>`clients/web/src/components/themes/theme-switcher.tsx`<br>`clients/web/src/components/themes/themed-logo.tsx` | Added new theme management components: `ThemeProvider` (wrapper for `next-themes`), `ThemeSwitcher` (toggle button), and `ThemedLogo` (renders logo based on theme).                                                                                                                                                                                                                                                                                                                               |
| `clients/web/src/components/ui/accordion.tsx`                                           | Added new accordion components wrapping Radix UI primitives: `Accordion`, `AccordionItem`, `AccordionTrigger`, and `AccordionContent` with custom styles and animations.                                                                                                                                                                                                                                                                                                                          |
| `clients/web/src/components/ui/button.tsx`                                               | Added a new customizable Button component with multiple variants and sizes, using `class-variance-authority` and `@radix-ui/react-slot`. Exported the `buttonVariants` config.                                                                                                                                                                                                                                                                                                                     |
| `clients/web/src/lib/utils.ts`                                                           | Added a utility function `cn` for merging and optimizing Tailwind CSS class names using `clsx` and `tailwind-merge`.                                                                                                                                                                                                                                                                                                                                                                               |
| `clients/web/src/constants.ts`                                                           | Added constants for navigation and footer links, and a GitHub URL constant, typed with a new `NavLink` type.                                                                                                                                                                                                                                                                                                                                                                                        |
| `clients/web/src/constants/faqs.ts`                                                     | Added FAQ interface and an array of FAQ objects with questions and answers related to Curiositi.                                                                                                                                                                                                                                                                                                                                                                                                     |
| `clients/web/src/types.ts`                                                               | Added a new `NavLink` type defining the structure for navigation link objects.                                                                                                                                                                                                                                                                                                                                                                                                                      |
| `clients/web/src/views/landing/footer.tsx`                                               | Added a new Footer component rendering a responsive footer with logo, navigation links, copyright notice, and static policy links.                                                                                                                                                                                                                                                                                                                                                                |
| `clients/web/src/views/landing/header.tsx`                                               | Added a new Header component rendering a fixed top navigation bar with logo, navigation menu, login link, get started button, and theme switcher.                                                                                                                                                                                                                                                                                                                                                   |
| `clients/web/src/views/landing/NavLink.tsx`                                             | Added a new NavLink component that highlights the active navigation link based on the current path.                                                                                                                                                                                                                                                                                                                                                                                                |
| `clients/web/src/styles/globals.css`                                                     | Extended global CSS with theme variables, dark mode support, color definitions, base styles, imported animation utilities, and utility classes for text balance and gradient.                                                                                                                                                                                                                                                                                                                     |

## Sequence Diagram(s)

```mermaid
sequenceDiagram
    participant User
    participant LandingPage
    participant ThemeProvider
    participant ThemeSwitcher
    participant Button
    participant Section/FeatureCard/etc.

    User->>LandingPage: Visit "/"
    LandingPage->>ThemeProvider: Wrap children for theme context
    LandingPage->>Section/FeatureCard/etc.: Render landing page sections
    LandingPage->>ThemeSwitcher: Render theme toggle button
    ThemeSwitcher->>ThemeProvider: Toggle theme (light/dark)
    LandingPage->>Button: Render buttons with variants
    Note over LandingPage,Section/FeatureCard/etc.: UI updates according to theme and interactions
```

## Poem

> In fields of code where themes now bloom,  
> A rabbit hops from room to room.  
> New buttons shine, the landing’s bright—  
> Cards and sections, pure delight!  
> With colors set for dark and light,  
> Our burrow’s ready, day or night.  
> Hippity-hop, the site feels right! 🐇✨

<!-- walkthrough_end -->
<!-- internal state start -->


<!-- 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 -->

<!-- internal state end -->

---

<details>
<summary>📜 Recent review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**
**Cache: Disabled due to data retention organization setting**
**Knowledge Base: Disabled due to data retention organization setting**


<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between af88af148a43450aa17b69c4c14db65ad9db8c5a and b603eb6d99246c127e6c3f3ac9fc2a21b23177a8.

</details>

<details>
<summary>📒 Files selected for processing (4)</summary>

* `clients/web/src/app/faq/page.tsx` (1 hunks)
* `clients/web/src/app/page.tsx` (1 hunks)
* `clients/web/src/views/landing/NavLink.tsx` (1 hunks)
* `clients/web/src/views/landing/header.tsx` (1 hunks)

</details>

</details>
<!-- finishing_touch_checkbox_start -->

<details open="true">
<summary>✨ Finishing Touches</summary>

- [ ] <!-- {"checkboxId": "7962f53c-55bc-4827-bfbf-6a18da830691"} --> 📝 Generate Docstrings

</details>

<!-- finishing_touch_checkbox_end -->
<!-- tips_start -->

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

<details>
<summary>❤️ Share</summary>

- [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai)
- [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai)
- [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai)
- [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

</details>

<details>
<summary>🪧 Tips</summary>

### Chat

There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai?utm_source=oss&utm_medium=github&utm_campaign=macintushar/curiositi&utm_content=13):

- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  - `I pushed a fix in commit <commit_id>, please review it.`
  - `Explain this complex logic.`
  - `Open a follow-up GitHub issue for this discussion.`
- Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples:
  - `@coderabbitai explain this code block.`
  -	`@coderabbitai modularize this function.`
- PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.`
  - `@coderabbitai read src/utils.ts and explain its main purpose.`
  - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.`
  - `@coderabbitai help me debug CodeRabbit configuration file.`

### Support

Need help? Create a ticket on our [support page](https://www.coderabbit.ai/contact-us/support) for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

### CodeRabbit Commands (Invoked using PR comments)

- `@coderabbitai pause` to pause the reviews on a PR.
- `@coderabbitai resume` to resume the paused reviews.
- `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
- `@coderabbitai full review` to do a full review from scratch and review all the files again.
- `@coderabbitai summary` to regenerate the summary of the PR.
- `@coderabbitai generate docstrings` to [generate docstrings](https://docs.coderabbit.ai/finishing-touches/docstrings) for this PR.
- `@coderabbitai generate sequence diagram` to generate a sequence diagram of the changes in this PR.
- `@coderabbitai resolve` resolve all the CodeRabbit review comments.
- `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository.
- `@coderabbitai help` to get help.

### Other keywords and placeholders

- Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed.
- Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description.
- Add `@coderabbitai` anywhere in the PR title to generate the title automatically.

### CodeRabbit Configuration File (`.coderabbit.yaml`)

- You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository.
- Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information.
- If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json`

### Documentation and Community

- Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit.
- Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback.
- Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

</details>

<!-- tips_end -->
author_association: NONE