docs: updat frontend guide to show new libraries

apps/web/content/docs/ar/frontend/meta.json

@@ -1,4 +1,4 @@
 {
   "title": "الواجهة الأمامية",
-  "pages": ["kit"]
+  "pages": ["nextjs-solana"]
 }

apps/web/content/docs/de/frontend/meta.json

@@ -1,4 +1,4 @@
 {
   "title": "Frontend",
-  "pages": ["kit"]
+  "pages": ["nextjs-solana"]
 }

apps/web/content/docs/el/frontend/meta.json

@@ -1,4 +1,4 @@
 {
   "title": "Frontend",
-  "pages": ["kit"]
+  "pages": ["nextjs-solana"]
 }

apps/web/content/docs/en/frontend/client.mdx

@@ -0,0 +1,104 @@
+---
+title: "@solana/client"
+description: Build lean Solana frontends with the headless Solana client runtime.
+---
+
+`@solana/client` keeps the runtime surface lean. One store, one RPC stack, and a wallet registry power
+the different helpers so the same instance can back CLIs, scripts, or full UIs. Actions, watchers, and
+helpers all share cache, subscriptions, and wallet sessions through that single client.
+
+<Callout type="info">
+When you are building a purely React experience it is usually faster to start with
+[`@solana/react-hooks`](/docs/frontend/react-hooks). The hooks package wraps this same client runtime and
+exposes ready-made hooks so you only drop to the headless client when you need extra control.
+</Callout>
+
+## Install
+
+```terminal
+$ npm install @solana/client
+```
+
+Use any package manager; the client runs in browsers, workers, React, Svelte, or server-side runtimes.
+
+## Create a client once
+
+Choose Wallet Standard connectors (auto discovery is the fastest way to start), then create the client.
+This single object exposes the store, actions, watchers, and helpers.
+
+```ts
+import { autoDiscover, createClient } from "@solana/client";
+
+const client = createClient({
+  endpoint: "https://api.devnet.solana.com",
+  websocketEndpoint: "wss://api.devnet.solana.com",
+  walletConnectors: autoDiscover(),
+});
+
+await client.actions.connectWallet("wallet-standard:phantom");
+const balance = await client.actions.fetchBalance("Fke...address");
+console.log(balance.lamports?.toString());
+```
+
+The client store tracks cluster config, subscriptions, pending transactions, and wallet sessions. You can
+provide your own Zustand store if you need persistence or multi-tab coordination.
+
+## Wallet orchestration
+
+Connectors encapsulate Wallet Standard metadata plus connect/disconnect logic. Register the built-in
+`phantom()`, `solflare()`, `backpack()`, or `autoDiscover()` helpers, or wrap custom providers with
+`createWalletStandardConnector`. All wallet actions (connect, disconnect, sign, send) flow through the
+client registry so every consumer stays in sync.
+
+## Actions, watchers, and helpers
+
+- **Actions** wrap common RPC reads and writes while updating the store (e.g., `fetchAccount`,
+  `requestAirdrop`, `setCluster`).
+- **Watchers** multiplex websocket subscriptions, stream updates into the store, and give you abort
+  handles for cleanup.
+- **Helpers** expose higher-level flows such as SOL transfers, SPL token helpers, signature polling, and
+  transaction pools.
+
+```ts
+const abortWatcher = client.watchers.watchBalance(
+  { address: "Fke...address" },
+  (lamports) => {
+    console.log("live balance", lamports.toString());
+  },
+);
+
+// Later when the component unmounts or the flow ends
+abortWatcher.abort();
+```
+
+## Transaction helper pattern
+
+The transaction helper owns blockhash refresh, fee payer resolution, and signing. You can prepare,
+inspect, and send with whatever UX you prefer.
+
+```ts
+const prepared = await client.helpers.transaction.prepare({
+  authority: client.store.getState().wallet.session!,
+  instructions: [instructionA, instructionB],
+});
+
+await client.helpers.transaction.simulate(prepared, { commitment: "processed" });
+const signature = await client.helpers.transaction.send(prepared);
+console.log("submitted", signature.toString());
+```
+
+Use `prepareAndSend` for a pre-built flow (simulation plus logging) or call `sign` / `toWire` to collect
+signatures manually before relaying the wire format yourself.
+
+## Common patterns for Solana devs
+
+- **Headless state machines**: Run the client inside API routes, scripts, or workers to reuse the same
+  wallet + RPC orchestration logic that powers your UI.
+- **Realtime dashboards**: Combine watchers (balances, accounts, signatures) with your preferred UI
+  library; the client handles websocket fan-out and cache invalidation.
+- **Custom stores**: Inject your own Zustand store to hydrate from IndexedDB/localStorage, mirror state to
+  server sessions, or coordinate between browser tabs.
+- **Bridge to React hooks**: Pass a configured client instance to `@solana/react-hooks` when you want
+  ergonomic hooks on top of the same runtime.
+- **Testability**: The single client interface can be mocked in unit tests, making it easy to simulate
+  RPC responses or wallet sessions without a browser wallet present.

apps/web/content/docs/en/frontend/index.mdx

@@ -0,0 +1,44 @@
+---
+title: Frontend
+description: Learn about building interfaces for Solana Programs.
+---
+
+Frontend development on Solana involves working with Programs, wallets and
+popular JavaScript frameworks like React. Interacting with these components
+requires handling connection, transaction creation and reading from Solana
+Accounts.
+
+To help with this work, a variety Solana Client libraries are available in different frameworks.
+
+## Main libraries
+
+
+
+<Cards>
+  <Card title="@solana/client" href="https://github.com/solana-foundation/framework-kit/tree/main/packages/client">
+   - Simple Solana client bundling RPC, wallets, transactions 
+   - Includes built-in state store, actions, watchers, connectors
+  </Card>
+    <Card title="@solana/react-hooks" href="https://github.com/solana-foundation/framework-kit/tree/main/packages/react-hooks">
+   - Complete hooks for wallets, balances, transfers, signatures, queries
+   - React provider hooks wrapping `@solana/client` runtime state
+  </Card>
+    <Card title="@solana/web3-compat" href="https://github.com/solana-foundation/framework-kit/tree/main/packages/web3-compat">
+   - Web3.js compatible toolkit to simplify upgrading.
+   - Newer internals relying on a mix of web3.js and kit.
+  </Card>
+    <Card title="@solana/kit" href="https://github.com/solana-foundation/framework-kit/tree/main/packages/web3-compat">
+   - Low level Solana SDK powering the other Solana libraries like `@solana/react-hooks`
+   - Fully tree-shakable, uses modern web standard and powers
+  </Card>
+</Cards>
+
+
+<Callout type="warn" title="@solana/web3.js is deprecated`">
+  Many Solana ecosystem projects still rely on the deprecated `@solana/web3.js`.
+  Prefer `@solana/web3-compat` to simplify your migration path.
+</Callout>
+
+- [@solana/client guide](/docs/frontend/client): lean, headless runtime for RPC, wallets, and transactions.
+- [@solana/react-hooks guide](/docs/frontend/react-hooks): React hooks layered on the same client runtime.
+- [@solana/web3-compat guide](/docs/frontend/web3-compat): compatibility layer to migrate from `@solana/web3.js` to Kit powered stacks.