Mention fair usage for storage and bandwidth

apps/web/components/marketing/pricing-section.tsx

@@ -55,7 +55,7 @@ export default function PricingSection({ unit_amount = 500, addons = [] }) {
                 </div>
                 <ul
                   role="list"
-                  className="mt-8 grid grid-cols-1 gap-4 text-sm leading-6 text-gray-200 sm:grid-cols-2 sm:gap-6"
+                  className="mt-6 grid grid-cols-1 gap-2 text-sm leading-6 text-gray-200 sm:grid-cols-2 sm:gap-3"
                 >
                   {features.map((feature) => (
                     <li key={feature} className="flex gap-x-3">
@@ -67,6 +67,14 @@ export default function PricingSection({ unit_amount = 500, addons = [] }) {
                     </li>
                   ))}
                 </ul>
+                <p className="mt-6 text-sm text-gray-400">
+                  <span className="font-bold text-indigo-400">
+                    Fair usage applies to storage and bandwidth per page.
+                  </span>{" "}
+                  We don&apos;t impose hard limits, but we may reach out if your
+                  usage significantly exceeds typical patterns. We&apos;re here
+                  to support growing teams, not restrict them.
+                </p>
               </div>
               <div className="-mt-2 p-2 lg:mt-0 lg:w-full lg:max-w-md lg:flex-shrink-0">
                 <div className="rounded-2xl bg-gray-950 py-6 text-center ring-1 ring-inset ring-gray-900/5 lg:flex lg:flex-col lg:justify-center lg:py-16">

apps/web/pages/pricing.tsx

@@ -12,6 +12,20 @@ export default function Pricing({ unit_amount, addons }) {
 
       <PricingSection unit_amount={unit_amount} addons={addons} />
 
+      <div className="bg-gray-900 py-8 text-center">
+        <p className="text-sm text-gray-400">
+          Questions about pricing?{" "}
+          <a
+            href="https://techulus.atlassian.net/servicedesk/customer/portal/1/group/1/create/2"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-indigo-400 hover:text-indigo-300"
+          >
+            Contact support
+          </a>
+        </p>
+      </div>
+
       <StartForFreeFooter />
       <FooterComponent />
     </div>

packages/react-sdk/LICENSE

@@ -0,0 +1,7 @@
+Copyright 2025 Techulus
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

packages/react-sdk/README.md

@@ -74,13 +74,46 @@ Render prop component exposing:
 ```tsx
 import { usePosts } from '@changespage/react';
 
-// Client-only (fetches on mount)
-const { posts, hasMore, loading, loadMore } = usePosts({ client, limit: 10 });
+function ChangelogList() {
+  const { posts, hasMore, loading, error, loadMore, refetch } = usePosts({
+    client,
+    limit: 10,
+  });
+
+  if (error) {
+    return (
+      <div>
+        <p>Error: {error.message}</p>
+        <button onClick={refetch}>Try again</button>
+      </div>
+    );
+  }
+
+  if (loading && posts.length === 0) {
+    return <div>Loading...</div>;
+  }
 
-// With SSR initial data (skips initial fetch)
-const { posts, hasMore, loading, loadMore } = usePosts({
+  return (
+    <div>
+      {posts.map(post => (
+        <article key={post.id}>{post.title}</article>
+      ))}
+      {hasMore && (
+        <button onClick={loadMore} disabled={loading}>
+          {loading ? 'Loading...' : 'Load more'}
+        </button>
+      )}
+    </div>
+  );
+}
+```
+
+For SSR, pass initial data to skip the client-side fetch:
+
+```tsx
+const { posts, hasMore, loading, error, loadMore, refetch } = usePosts({
   client,
-  initialData: { posts: initialPosts, hasMore: initialHasMore },
+  initialData: { posts: serverPosts, hasMore: serverHasMore },
   limit: 10,
 });
 ```

packages/react-sdk/src/components/ChangelogPost.tsx

@@ -1,15 +1,15 @@
 import type { ChangelogPostProps, ChangelogPostRenderProps } from "../types";
 import { formatDate, parseDate } from "../utils";
 
-export function ChangelogPost({ post, children }: ChangelogPostProps) {
+export function ChangelogPost({ post, locale, children }: ChangelogPostProps) {
   const renderProps: ChangelogPostRenderProps = {
     id: post.id,
     title: post.title,
     content: post.content,
     plainText: post.plain_text_content,
     tags: post.tags,
     date: parseDate(post.publication_date),
-    formattedDate: formatDate(post.publication_date),
+    formattedDate: formatDate(post.publication_date, locale),
     url: post.url,
   };
 

packages/react-sdk/src/hooks/index.ts

@@ -1,2 +1,6 @@
 export { usePosts } from "./usePosts";
-export type { UsePostsOptions, UsePostsResult } from "./usePosts";
+export type {
+  UsePostsInitialData,
+  UsePostsOptions,
+  UsePostsResult,
+} from "./usePosts";

packages/react-sdk/src/hooks/usePosts.ts

@@ -20,6 +20,7 @@ export interface UsePostsResult {
   loading: boolean;
   error: Error | null;
   loadMore: () => Promise<void>;
+  refetch: () => Promise<void>;
 }
 
 export function usePosts({
@@ -84,11 +85,27 @@ export function usePosts({
     }
   }, [client, posts.length, limit, loading, hasMore]);
 
+  const refetch = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      const result = await client.getPosts({ limit, offset: 0 });
+      setPosts(result.posts);
+      setHasMore(result.hasMore);
+    } catch (e) {
+      setError(e instanceof Error ? e : new Error(String(e)));
+    } finally {
+      setLoading(false);
+    }
+  }, [client, limit]);
+
   return {
     posts,
     hasMore,
     loading,
     error,
     loadMore,
+    refetch,
   };
 }

packages/react-sdk/src/index.ts

@@ -12,4 +12,8 @@ export type {
   Post,
   PostTag,
 } from "./types";
-export type { UsePostsOptions, UsePostsResult } from "./hooks";
+export type {
+  UsePostsInitialData,
+  UsePostsOptions,
+  UsePostsResult,
+} from "./hooks";

packages/react-sdk/src/types.ts

@@ -42,6 +42,7 @@ export interface ChangelogPostRenderProps {
 
 export interface ChangelogPostProps {
   post: Post;
+  locale?: string;
   children: (props: ChangelogPostRenderProps) => ReactNode;
 }
 

packages/react-sdk/src/utils.ts

@@ -12,11 +12,14 @@ export function getTagLabel(tag: PostTag): string {
   return tagLabels[tag] ?? tag;
 }
 
-export function formatDate(dateString: string | null): string {
+export function formatDate(
+  dateString: string | null,
+  locale: string = "en-US"
+): string {
   if (!dateString) return "";
 
   const date = new Date(dateString);
-  return date.toLocaleDateString("en-US", {
+  return date.toLocaleDateString(locale, {
     year: "numeric",
     month: "long",
     day: "numeric",