Changelog (#399)

* feat: add changelog feature and update site navigation

- Introduced a new Changelog page with pagination and detailed entry views.
- Added components for displaying changelog entries, pagination, and entry details.
- Updated site navigation to include a link to the new Changelog page.
- Enhanced localization for changelog-related texts in marketing.json.

* refactor: enhance Changelog page layout and entry display

- Increased the number of changelog entries displayed per page from 2 to 20 for better visibility.
- Improved the layout of the Changelog page by adjusting the container styles and removing unnecessary divs.
- Updated the ChangelogEntry component to enhance the visual presentation of entries, including a new date badge with an icon.
- Refined the CSS styles for Markdoc headings to improve typography and spacing.

* refactor: enhance Changelog page functionality and layout

- Increased the number of changelog entries displayed per page from 20 to 50 for improved user experience.
- Updated ChangelogEntry component to make the highlight prop optional and refined the layout for better visual clarity.
- Adjusted styles in ChangelogHeader and ChangelogPagination components for a more cohesive design.
- Removed unnecessary order fields from changelog markdown files to streamline content management.

* feat: enhance Changelog entry navigation and data loading

- Refactored ChangelogEntry page to load previous and next entries for improved navigation.
- Introduced ChangelogNavigation component to facilitate navigation between changelog entries.
- Updated ChangelogDetail component to display navigation links and entry details.
- Enhanced data fetching logic to retrieve all changelog entries alongside the current entry.
- Added localization keys for navigation text in marketing.json.

* Update package dependencies and enhance documentation layout

- Upgraded various packages including @turbo/gen and turbo to version 2.6.0, and react-hook-form to version 7.66.0.
- Updated lucide-react to version 0.552.0 across multiple packages.
- Refactored documentation layout components for improved styling and structure.
- Removed deprecated loading components and adjusted navigation elements for better user experience.
- Added placeholder notes in changelog entries for clarity.

apps/web/content/documentation/billing/subscriptions.mdoc

@@ -0,0 +1,143 @@
+---
+title: "Billing Overview"
+description: "Learn how to manage subscriptions and billing in your application."
+publishedAt: 2024-04-11
+order: 0
+status: "published"
+---
+
+> **Note:** This is mock/placeholder content for demonstration purposes.
+
+The billing system supports subscription-based pricing with multiple tiers and payment providers.
+
+## Supported Providers
+
+### Stripe
+Industry-standard payment processing with comprehensive features:
+- Credit card payments
+- Subscription management
+- Invoice generation
+- Tax calculation
+- Customer portal
+
+### Paddle
+Merchant of record solution that handles:
+- Global tax compliance
+- Payment processing
+- Subscription billing
+- Revenue recovery
+
+## Subscription Tiers
+
+Define your subscription tiers in the billing configuration:
+
+```typescript
+export const plans = [
+  {
+    id: 'free',
+    name: 'Free',
+    price: 0,
+    features: ['Feature 1', 'Feature 2'],
+  },
+  {
+    id: 'pro',
+    name: 'Professional',
+    price: 29,
+    interval: 'month',
+    features: ['All Free features', 'Feature 3', 'Feature 4'],
+  },
+  {
+    id: 'enterprise',
+    name: 'Enterprise',
+    price: 99,
+    interval: 'month',
+    features: ['All Pro features', 'Feature 5', 'Priority support'],
+  },
+];
+```
+
+## Subscription Lifecycle
+
+1. **Customer selects plan** - User chooses subscription tier
+2. **Payment processed** - Provider handles payment collection
+3. **Webhook received** - Your app receives confirmation
+4. **Subscription activated** - User gains access to features
+5. **Recurring billing** - Automatic renewal each period
+6. **Cancellation** - User can cancel anytime
+
+## Managing Subscriptions
+
+### Creating a Subscription
+
+```typescript
+import { createCheckoutSession } from '~/lib/billing/checkout';
+
+const session = await createCheckoutSession({
+  accountId: user.accountId,
+  planId: 'pro',
+  returnUrl: '/dashboard',
+});
+
+// Redirect user to payment page
+redirect(session.url);
+```
+
+### Checking Subscription Status
+
+```typescript
+import { getSubscription } from '~/lib/billing/subscription';
+
+const subscription = await getSubscription(accountId);
+
+if (subscription.status === 'active') {
+  // User has active subscription
+}
+```
+
+### Canceling a Subscription
+
+```typescript
+import { cancelSubscription } from '~/lib/billing/subscription';
+
+await cancelSubscription(subscriptionId);
+```
+
+## Webhook Handling
+
+Webhooks notify your application of billing events:
+
+```typescript
+export async function POST(request: Request) {
+  const signature = request.headers.get('stripe-signature');
+  const payload = await request.text();
+
+  const event = stripe.webhooks.constructEvent(
+    payload,
+    signature,
+    process.env.STRIPE_WEBHOOK_SECRET
+  );
+
+  switch (event.type) {
+    case 'customer.subscription.created':
+      await handleSubscriptionCreated(event.data.object);
+      break;
+    case 'customer.subscription.updated':
+      await handleSubscriptionUpdated(event.data.object);
+      break;
+    case 'customer.subscription.deleted':
+      await handleSubscriptionCanceled(event.data.object);
+      break;
+  }
+
+  return new Response('OK');
+}
+```
+
+## Testing
+
+Use test mode credentials for development:
+- Test card: 4242 4242 4242 4242
+- Any future expiry date
+- Any CVC
+
+All test transactions will appear in your provider's test dashboard.