From e640bdabc7d2210f3ab3e8b73baf0ed9762e1c9c Mon Sep 17 00:00:00 2001
From: Shivam Mishra <shivam.r.mishra9120@gmail.com>
Date: Wed, 4 Feb 2026 11:19:06 +0530
Subject: [PATCH 1/4] done with live preview

---
 LIVE_PREVIEW_SETUP.md                      | 275 ---------------------
 app/applications/[slug]/changelog/page.tsx |   5 -
 app/applications/[slug]/page.tsx           | 100 ++++++--
 app/applications/page.tsx                  |  10 +-
 app/faqs/page.tsx                          |  10 +-
 app/page.tsx                               |  78 +++++-
 app/support/page.tsx                       |   9 +-
 components/LivePreviewProvider.tsx         |  22 +-
 components/homepage/HeroSection.tsx        |  13 +-
 components/homepage/ValuePropositions.tsx  |  14 +-
 lib/contentstack.ts                        |  11 +-
 lib/livepreview.ts                         |  24 ++
 lib/utils.ts                               |  11 -
 13 files changed, 213 insertions(+), 369 deletions(-)
 delete mode 100644 LIVE_PREVIEW_SETUP.md
 create mode 100644 lib/livepreview.ts

diff --git a/LIVE_PREVIEW_SETUP.md b/LIVE_PREVIEW_SETUP.md
deleted file mode 100644
index 33fc69d..0000000
--- a/LIVE_PREVIEW_SETUP.md
+++ /dev/null
@@ -1,275 +0,0 @@
-# Contentstack Live Preview Setup
-
-This document explains the live preview implementation for the DevDocs application using Contentstack's Live Preview functionality.
-
-## Overview
-
-Live Preview allows you to see content changes in real-time as you edit entries in the Contentstack CMS, without needing to publish or refresh the page manually.
-
-## Implementation Components
-
-### 1. Contentstack Stack Configuration
-
-The Stack is configured in [lib/contentstack.ts](lib/contentstack.ts) with live preview settings:
-
-```typescript
-const Stack = contentstack.Stack({
-  api_key: process.env.NEXT_PUBLIC_CONTENTSTACK_API_KEY!,
-  delivery_token: process.env.NEXT_PUBLIC_CONTENTSTACK_DELIVERY_TOKEN!,
-  environment: process.env.NEXT_PUBLIC_CONTENTSTACK_ENVIRONMENT!,
-  live_preview: { 
-    preview_token: process.env.PREVIEW_TOKEN!, 
-    enable: true, 
-    host: 'rest-preview.contentstack.com' // AWS NA region
-  }, 
-});
-```
-
-### 2. Live Preview Provider Component
-
-Created [components/LivePreviewProvider.tsx](components/LivePreviewProvider.tsx) - a client-side component that initializes the Contentstack Live Preview Utils SDK.
-
-Key features:
-- **Automatic initialization** on component mount
-- **Environment-aware** - only enables in non-production environments
-- **Edit button support** - displays edit buttons in the Live Preview portal
-- **Debug mode** - enabled in development for troubleshooting
-- **SSR mode** - configured for Next.js server-side rendering
-
-Configuration:
-```typescript
-ContentstackLivePreview.init({
-  enable: process.env.NEXT_PUBLIC_CONTENTSTACK_ENVIRONMENT !== 'production',
-  cleanCslpOnProduction: process.env.NEXT_PUBLIC_CONTENTSTACK_ENVIRONMENT === 'production',
-  ssr: true,
-  stackDetails: {
-    apiKey: process.env.NEXT_PUBLIC_CONTENTSTACK_API_KEY!,
-    environment: process.env.NEXT_PUBLIC_CONTENTSTACK_ENVIRONMENT!,
-  },
-  clientUrlParams: {
-    host: 'app.contentstack.com', // AWS NA region
-  },
-  editButton: {
-    enable: true,
-    exclude: ['outsideLivePreviewPortal'],
-    position: 'top-right',
-  },
-});
-```
-
-### 3. Utility Function for Query Parameters
-
-Added `setLivePreviewQueryParams` function in [lib/utils.ts](lib/utils.ts) to handle live preview query parameters:
-
-```typescript
-export function setLivePreviewQueryParams(queryParams: Record<string, any>) {
-  if (queryParams?.live_preview) {
-    Stack.livePreviewQuery(queryParams as any);
-  }
-}
-```
-
-This function:
-- Checks if the request contains live preview parameters
-- Injects the live preview hash and ContentType UID into the Stack instance
-- Enables the delivery SDK to fetch preview content
-
-### 4. Root Layout Integration
-
-The `LivePreviewProvider` is included in [app/layout.tsx](app/layout.tsx) to initialize live preview globally:
-
-```typescript
-<SessionProvider>
-  <LivePreviewProvider />
-  <Header />
-  {children}
-  <Footer />
-</SessionProvider>
-```
-
-### 5. Page-Level Integration
-
-All pages that fetch content from Contentstack have been updated to accept and process search parameters:
-
-**Updated Pages:**
-- [app/page.tsx](app/page.tsx) - Homepage
-- [app/applications/page.tsx](app/applications/page.tsx) - Applications listing
-- [app/applications/[slug]/page.tsx](app/applications/[slug]/page.tsx) - Application details
-- [app/applications/[slug]/changelog/page.tsx](app/applications/[slug]/changelog/page.tsx) - Changelog
-- [app/faqs/page.tsx](app/faqs/page.tsx) - FAQs
-- [app/support/page.tsx](app/support/page.tsx) - Support page
-
-Example implementation:
-```typescript
-export default async function HomePage({
-  searchParams,
-}: {
-  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
-}) {
-  const params = await searchParams;
-  setLivePreviewQueryParams(params);
-  
-  const homepage = await getHomepageByQuery();
-  // ... rest of the component
-}
-```
-
-## Environment Variables
-
-Ensure these environment variables are set in your `.env.local`:
-
-```env
-NEXT_PUBLIC_CONTENTSTACK_API_KEY=your_api_key
-NEXT_PUBLIC_CONTENTSTACK_DELIVERY_TOKEN=your_delivery_token
-NEXT_PUBLIC_CONTENTSTACK_ENVIRONMENT=development
-PREVIEW_TOKEN=your_preview_token
-```
-
-## Dependencies
-
-The following npm packages are required (already installed):
-
-```json
-{
-  "contentstack": "^3.26.3",
-  "@contentstack/live-preview-utils": "^4.2.1"
-}
-```
-
-## How to Use Live Preview
-
-1. **Access Contentstack CMS**: Log in to your Contentstack account
-2. **Open an Entry**: Navigate to any content entry (e.g., homepage, application)
-3. **Click Live Preview**: Click the "Live Preview" button in the entry editor
-4. **Configure Preview URL**: Ensure the preview URL is set to your local development server (e.g., `http://localhost:3000`)
-5. **Edit Content**: Make changes to the entry content
-6. **See Real-time Updates**: Changes will appear instantly in the preview panel
-7. **Edit Buttons**: In the preview, you'll see edit buttons on editable content that take you back to the CMS
-
-## Testing Live Preview Locally
-
-1. Start the development server:
-   ```bash
-   npm run dev
-   ```
-
-2. Open your application at `http://localhost:3000`
-
-3. In Contentstack, open any entry and click "Live Preview"
-
-4. The preview should load your local application
-
-5. Make changes to the entry content and watch them update in real-time
-
-## Region-Specific Configuration
-
-If your Contentstack stack is in a different region, update the configuration:
-
-### In [lib/contentstack.ts](lib/contentstack.ts):
-```typescript
-host: 'eu-rest-preview.contentstack.com' // For EU region
-// or
-host: 'azure-na-rest-preview.contentstack.com' // For Azure NA
-```
-
-### In [components/LivePreviewProvider.tsx](components/LivePreviewProvider.tsx):
-```typescript
-clientUrlParams: {
-  host: 'eu-app.contentstack.com', // For EU region
-}
-```
-
-**Available regions:**
-- **AWS NA**: `rest-preview.contentstack.com` / `app.contentstack.com`
-- **AWS EU**: `eu-rest-preview.contentstack.com` / `eu-app.contentstack.com`
-- **Azure NA**: `azure-na-rest-preview.contentstack.com` / `azure-na-app.contentstack.com`
-- **Azure EU**: `azure-eu-rest-preview.contentstack.com` / `azure-eu-app.contentstack.com`
-- **GCP NA**: `gcp-na-rest-preview.contentstack.com` / `gcp-na-app.contentstack.com`
-
-## Troubleshooting
-
-### Live Preview not loading
-- Verify all environment variables are correctly set
-- Check that the preview token is valid
-- Ensure the development server is running
-- Check browser console for errors
-
-### Changes not reflecting
-- Make sure `ssr: true` is set in LivePreviewProvider
-- Verify that pages are calling `setLivePreviewQueryParams`
-- Check that the Stack instance is properly configured
-
-### Edit buttons not appearing
-- Ensure you're accessing the site through the Contentstack Live Preview panel
-- Check `editButton.enable` is set to `true`
-- Verify `editButton.exclude` settings
-
-### Debug mode
-To see detailed logs, the debug mode is enabled in development:
-```typescript
-debug: process.env.NEXT_PUBLIC_CONTENTSTACK_ENVIRONMENT !== 'production'
-```
-
-Check the browser console for live preview logs and events.
-
-## Production Considerations
-
-In production:
-- Live preview is automatically disabled
-- Data-CSLP attributes are cleaned from the HTML
-- Edit buttons are hidden
-- Debug logging is turned off
-
-This is controlled by the environment variable:
-```typescript
-enable: process.env.NEXT_PUBLIC_CONTENTSTACK_ENVIRONMENT !== 'production'
-```
-
-## Architecture
-
-```
-┌─────────────────────────────────────────────────────────────┐
-│                    Next.js Application                       │
-│  ┌───────────────────────────────────────────────────────┐  │
-│  │ Layout (app/layout.tsx)                               │  │
-│  │  └─ LivePreviewProvider (Client Component)            │  │
-│  │      └─ Initializes ContentstackLivePreview.init()    │  │
-│  └───────────────────────────────────────────────────────┘  │
-│                                                               │
-│  ┌───────────────────────────────────────────────────────┐  │
-│  │ Pages (Server Components)                             │  │
-│  │  ├─ Accept searchParams                               │  │
-│  │  ├─ Call setLivePreviewQueryParams(params)            │  │
-│  │  └─ Fetch content via Stack queries                   │  │
-│  └───────────────────────────────────────────────────────┘  │
-│                                                               │
-│  ┌───────────────────────────────────────────────────────┐  │
-│  │ Utilities (lib/utils.ts)                              │  │
-│  │  └─ setLivePreviewQueryParams()                       │  │
-│  │      └─ Stack.livePreviewQuery(params)                │  │
-│  └───────────────────────────────────────────────────────┘  │
-│                                                               │
-│  ┌───────────────────────────────────────────────────────┐  │
-│  │ Contentstack SDK (lib/contentstack.ts)                │  │
-│  │  └─ Stack initialized with live_preview config        │  │
-│  └───────────────────────────────────────────────────────┘  │
-└─────────────────────────────────────────────────────────────┘
-                            ↕
-                    Live Preview Utils SDK
-                            ↕
-┌─────────────────────────────────────────────────────────────┐
-│              Contentstack Live Preview Panel                 │
-│  ┌───────────────────────────────────────────────────────┐  │
-│  │ CMS Entry Editor ← → Preview Frame                    │  │
-│  │  • Real-time content updates                          │  │
-│  │  • Edit buttons on content                            │  │
-│  │  • Live hash in query params                          │  │
-│  └───────────────────────────────────────────────────────┘  │
-└─────────────────────────────────────────────────────────────┘
-```
-
-## Additional Resources
-
-- [Contentstack Live Preview Documentation](https://www.contentstack.com/docs/developers/set-up-live-preview)
-- [Live Preview Utils SDK](https://github.com/contentstack/live-preview-utils)
-- [Next.js Documentation](https://nextjs.org/docs)
diff --git a/app/applications/[slug]/changelog/page.tsx b/app/applications/[slug]/changelog/page.tsx
index 33314bc..c33f7e4 100644
--- a/app/applications/[slug]/changelog/page.tsx
+++ b/app/applications/[slug]/changelog/page.tsx
@@ -1,18 +1,13 @@
 import { getAllApplications, getChangelogsByApplicationUid } from '@/lib/queries';
-import { setLivePreviewQueryParams } from '@/lib/utils';
 import Link from 'next/link';
 import ChangelogList from '@/components/changelog/ChangelogList';
 
 export default async function ChangelogPage({
   params,
-  searchParams,
 }: {
   params: Promise<{ slug: string }>;
-  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
 }) {
   const { slug } = await params;
-  const urlParams = await searchParams;
-  setLivePreviewQueryParams(urlParams);
   
   // Get the application
   const applications = await getAllApplications();
diff --git a/app/applications/[slug]/page.tsx b/app/applications/[slug]/page.tsx
index 0bf96b4..2dfd321 100644
--- a/app/applications/[slug]/page.tsx
+++ b/app/applications/[slug]/page.tsx
@@ -1,20 +1,57 @@
+"use client";
+import { useEffect, useState } from 'react';
+import { useParams } from 'next/navigation';
+import { Application } from '@/types/application';
 import { getAllApplications } from '@/lib/queries';
-import { setLivePreviewQueryParams } from '@/lib/utils';
+import ContentstackLivePreview from '@contentstack/live-preview-utils';
 import Link from 'next/link';
 
-export default async function ApplicationDetailPage({
-  params,
-  searchParams,
-}: {
-  params: Promise<{ slug: string }>;
-  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
-}) {
-  const { slug } = await params;
-  const urlParams = await searchParams;
-  setLivePreviewQueryParams(urlParams);
-  
-  const applications = await getAllApplications();
-  const application = applications.find(app => app.uid === slug);
+export default function ApplicationDetailPage() {
+  const params = useParams();
+  const slug = params.slug as string;
+  const [application, setApplication] = useState<Application | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    async function fetchApplication() {
+      try {
+        setLoading(true);
+        const applications = await getAllApplications();
+        const app = applications.find(app => app.uid === slug);
+        setApplication(app || null);
+      } catch (error) {
+        console.error('Error fetching application:', error);
+      } finally {
+        setLoading(false);
+      }
+    }
+    
+    // Initial fetch
+    fetchApplication();
+
+    // Listen for live preview changes and refetch
+    const unsubscribe = ContentstackLivePreview.onEntryChange(() => {
+      console.log('Application entry changed in live preview - refetching...');
+      fetchApplication();
+    });
+
+    return () => {
+      if (unsubscribe && typeof unsubscribe === 'function') {
+        unsubscribe();
+      }
+    };
+  }, [slug]);
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600 mx-auto mb-4"></div>
+          <p className="text-gray-600">Loading application...</p>
+        </div>
+      </div>
+    );
+  }
 
   if (!application) {
     return (
@@ -53,22 +90,34 @@ export default async function ApplicationDetailPage({
         <div className="max-w-5xl mx-auto">
           <div className="flex items-start justify-between mb-6">
             <div>
-              <h1 className="text-4xl font-bold text-gray-900 mb-2">
+              <h1 
+                className="text-4xl font-bold text-gray-900 mb-2"
+                data-cslp={`application.${application.uid}.title`}
+              >
                 {application.title}
               </h1>
-              <p className="text-gray-600">
+              <p 
+                className="text-gray-600"
+                data-cslp={`application.${application.uid}.maintainer_name`}
+              >
                 by {application.maintainer_name || 'Unknown'}
               </p>
             </div>
             
             <div className="flex gap-2">
               {application.app_category && (
-                <span className="bg-indigo-100 text-indigo-700 px-4 py-2 rounded-lg text-sm font-medium">
+                <span 
+                  className="bg-indigo-100 text-indigo-700 px-4 py-2 rounded-lg text-sm font-medium"
+                  data-cslp={`application.${application.uid}.app_category`}
+                >
                   {application.app_category}
                 </span>
               )}
               {application.application_status && (
-                <span className="bg-green-100 text-green-700 px-4 py-2 rounded-lg text-sm font-medium">
+                <span 
+                  className="bg-green-100 text-green-700 px-4 py-2 rounded-lg text-sm font-medium"
+                  data-cslp={`application.${application.uid}.application_status`}
+                >
                   {application.application_status}
                 </span>
               )}
@@ -82,6 +131,7 @@ export default async function ApplicationDetailPage({
                 <span 
                   key={index}
                   className="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-xs"
+                  data-cslp={`application.${application.uid}.tags.${index}`}
                 >
                   #{tag}
                 </span>
@@ -99,6 +149,7 @@ export default async function ApplicationDetailPage({
                 target="_blank"
                 rel="noopener noreferrer"
                 className="bg-indigo-600 text-white px-6 py-2 rounded-lg font-semibold hover:bg-indigo-700 transition-colors inline-flex items-center"
+                data-cslp={`application.${application.uid}.url`}
               >
                 Visit Website
                 <svg className="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -124,6 +175,7 @@ export default async function ApplicationDetailPage({
       <div 
         className="rich-text text-gray-700"
         dangerouslySetInnerHTML={{ __html: application.main_description }}
+        data-cslp={`application.${application.uid}.main_description`}
       />
     </div>
   </section>
@@ -140,11 +192,18 @@ export default async function ApplicationDetailPage({
                 <div 
                   key={index}
                   className="bg-gray-50 rounded-lg p-6 border border-gray-200"
+                  data-cslp={`application.${application.uid}.app_key_features.${index}`}
                 >
-                  <h3 className="text-lg font-semibold text-gray-900 mb-3">
+                  <h3 
+                    className="text-lg font-semibold text-gray-900 mb-3"
+                    data-cslp={`application.${application.uid}.app_key_features.${index}.app_key_feature_title`}
+                  >
                     {feature.app_key_feature_title}
                   </h3>
-                  <p className="text-gray-600 text-sm leading-relaxed">
+                  <p 
+                    className="text-gray-600 text-sm leading-relaxed"
+                    data-cslp={`application.${application.uid}.app_key_features.${index}.app_key_features_description`}
+                  >
                     {feature.app_key_features_description}
                   </p>
                 </div>
@@ -161,6 +220,7 @@ export default async function ApplicationDetailPage({
       <h2 className="text-2xl font-bold text-gray-900 mb-6">Getting Started</h2>
       <div 
         className="rich-text text-gray-700"
+        data-cslp={`application.${application.uid}.getting_started`}
         dangerouslySetInnerHTML={{ __html: application.getting_started }}
       />
     </div>
diff --git a/app/applications/page.tsx b/app/applications/page.tsx
index 917aea2..8f7c368 100644
--- a/app/applications/page.tsx
+++ b/app/applications/page.tsx
@@ -1,15 +1,7 @@
 import { getAllApplications } from '@/lib/queries';
-import { setLivePreviewQueryParams } from '@/lib/utils';
 import ApplicationsContent from '@/components/applications/ApplicationsContent';
 
-export default async function ApplicationsPage({
-  searchParams,
-}: {
-  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
-}) {
-  const params = await searchParams;
-  setLivePreviewQueryParams(params);
-  
+export default async function ApplicationsPage() {
   const applications = await getAllApplications();
 
   return (
diff --git a/app/faqs/page.tsx b/app/faqs/page.tsx
index b64078c..620e8b6 100644
--- a/app/faqs/page.tsx
+++ b/app/faqs/page.tsx
@@ -1,18 +1,10 @@
 import { getFAQs } from '@/lib/queries'
-import { setLivePreviewQueryParams } from '@/lib/utils'
 import { FAQ } from '@/types/faq'
 import FAQClient from '@/components/faq/FAQClient'
 import FAQHeader from '@/components/faq/FAQHeader'
 import { WavyBackground } from '@/components/ui/wavy-background'
 
-export default async function FAQsPage({
-  searchParams,
-}: {
-  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
-}) {
-  const params = await searchParams;
-  setLivePreviewQueryParams(params);
-  
+export default async function FAQsPage() {
   const faqs: FAQ[] = await getFAQs()
   const categories = Array.from(
     new Set(
diff --git a/app/page.tsx b/app/page.tsx
index 08bfeea..767c2de 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,19 +1,75 @@
+'use client';
+
+import { useEffect, useState } from 'react';
 import { getHomepageByQuery } from '@/lib/queries';
-import { setLivePreviewQueryParams } from '@/lib/utils';
 import HeroSection from '@/components/homepage/HeroSection';
 import ValuePropositions from '@/components/homepage/ValuePropositions';
 import FeaturedApplications from '@/components/homepage/FeaturedApplications';
 import ContributionCTA from '@/components/homepage/ContributionCTA';
+import ContentstackLivePreview from '@contentstack/live-preview-utils';
+import Stack from '@/lib/contentstack';
+
+export default function HomePage() {
+  const [homepage, setHomepage] = useState<any>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    // Initialize live preview
+    ContentstackLivePreview.init({
+      enable: true,
+      ssr: false,
+      stackSdk: Stack,
+      stackDetails: {
+        apiKey: process.env.NEXT_PUBLIC_CONTENTSTACK_API_KEY!,
+        environment: process.env.NEXT_PUBLIC_CONTENTSTACK_ENVIRONMENT!,
+      },
+      clientUrlParams: {
+        protocol: 'https',
+        host: process.env.NEXT_PUBLIC_CONTENTSTACK_APP_HOST || 'app.contentstack.com',
+        port: 443,
+      },
+    });
+
+    // Fetch homepage data
+    async function fetchData() {
+      try {
+        setLoading(true);
+        const data = await getHomepageByQuery();
+        setHomepage(data);
+      } catch (err) {
+        console.error('Error fetching homepage:', err);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    // Initial fetch
+    fetchData();
+
+    // Listen for live preview changes and refetch
+    const unsubscribe = ContentstackLivePreview.onEntryChange(() => {
+      console.log('Homepage entry changed in live preview - refetching...');
+      fetchData();
+    });
+
+    // Cleanup
+    return () => {
+      if (unsubscribe && typeof unsubscribe === 'function') {
+        unsubscribe();
+      }
+    };
+  }, []);
 
-export default async function HomePage({
-  searchParams,
-}: {
-  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
-}) {
-  const params = await searchParams;
-  setLivePreviewQueryParams(params);
-  
-  const homepage = await getHomepageByQuery();
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-indigo-50 to-blue-50">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600 mx-auto mb-4"></div>
+          <p className="text-indigo-600 font-semibold">Loading homepage...</p>
+        </div>
+      </div>
+    );
+  }
 
   if (!homepage) {
     return (
@@ -35,10 +91,12 @@ export default async function HomePage({
       <HeroSection 
         title={homepage.title}
         description={homepage.hero_description}
+        entry_uid={homepage.uid}
       />
 
       <ValuePropositions 
         propositions={homepage.value_propositions}
+        entry_uid={homepage.uid}
       />
 
       <ContributionCTA
diff --git a/app/support/page.tsx b/app/support/page.tsx
index df485ed..182ef9e 100644
--- a/app/support/page.tsx
+++ b/app/support/page.tsx
@@ -1,5 +1,4 @@
 import { getSupportPage } from '@/lib/queries';
-import { setLivePreviewQueryParams } from '@/lib/utils';
 import SupportChannels from '@/app/support/SupportChannels';
 import SupportHeader from '@/components/support/SupportHeader';
 import { HeroParallax } from '@/components/ui/hero-parallax';
@@ -82,13 +81,7 @@ const supportResources = [
   },
 ];
 
-export default async function SupportPage({
-  searchParams,
-}: {
-  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
-}) {
-  const params = await searchParams;
-  setLivePreviewQueryParams(params);
+export default async function SupportPage() {
   
   const supportPage = await getSupportPage();
 
diff --git a/components/LivePreviewProvider.tsx b/components/LivePreviewProvider.tsx
index 2042cbd..736d934 100644
--- a/components/LivePreviewProvider.tsx
+++ b/components/LivePreviewProvider.tsx
@@ -2,27 +2,27 @@
 
 import { useEffect } from 'react';
 import ContentstackLivePreview from '@contentstack/live-preview-utils';
+import Stack from '@/lib/contentstack';
 
 export default function LivePreviewProvider() {
   useEffect(() => {
+    // Initialize live preview globally for all pages
     ContentstackLivePreview.init({
-      enable: process.env.NEXT_PUBLIC_CONTENTSTACK_ENVIRONMENT !== 'production',
-      cleanCslpOnProduction: process.env.NEXT_PUBLIC_CONTENTSTACK_ENVIRONMENT === 'production',
-      ssr: true,
+      enable: true,
+      ssr: false,
+      stackSdk: Stack,
+      editButton: {
+        enable: true,
+      },
       stackDetails: {
         apiKey: process.env.NEXT_PUBLIC_CONTENTSTACK_API_KEY!,
         environment: process.env.NEXT_PUBLIC_CONTENTSTACK_ENVIRONMENT!,
       },
       clientUrlParams: {
-        host: 'app.contentstack.com', // AWS NA region
-      },
-      editButton: {
-        enable: true,
-        exclude: ['outsideLivePreviewPortal'],
-        includeByQueryParameter: true,
-        position: 'top-right',
+        protocol: 'https',
+        host: process.env.NEXT_PUBLIC_CONTENTSTACK_APP_HOST || 'app.contentstack.com',
+        port: 443,
       },
-      debug: process.env.NEXT_PUBLIC_CONTENTSTACK_ENVIRONMENT !== 'production',
     });
   }, []);
 
diff --git a/components/homepage/HeroSection.tsx b/components/homepage/HeroSection.tsx
index 84d2982..6b7e7a1 100644
--- a/components/homepage/HeroSection.tsx
+++ b/components/homepage/HeroSection.tsx
@@ -4,9 +4,10 @@ import { useEffect, useRef } from 'react';
 interface HeroSectionProps {
   title: string;
   description: string;
+  entry_uid?: string; // Add entry UID for data-cslp
 }
 
-export default function HeroSection({ title, description }: HeroSectionProps) {
+export default function HeroSection({ title, description, entry_uid }: HeroSectionProps) {
   const canvasRef = useRef<HTMLCanvasElement>(null);
 
   useEffect(() => {
@@ -110,14 +111,20 @@ export default function HeroSection({ title, description }: HeroSectionProps) {
         </div>
 
         {/* Title */}
-        <h1 className="text-5xl md:text-6xl lg:text-7xl font-bold mb-6 leading-tight">
+        <h1 
+          className="text-5xl md:text-6xl lg:text-7xl font-bold mb-6 leading-tight"
+          data-cslp={entry_uid ? `homepage.${entry_uid}.title` : undefined}
+        >
           <span className="bg-gradient-to-r from-white via-gray-200 to-gray-300 bg-clip-text text-transparent drop-shadow-2xl">
             {title}
           </span>
         </h1>
 
         {/* Description */}
-        <p className="text-lg md:text-xl lg:text-2xl mb-10 text-gray-300 max-w-3xl mx-auto leading-relaxed font-light">
+        <p 
+          className="text-lg md:text-xl lg:text-2xl mb-10 text-gray-300 max-w-3xl mx-auto leading-relaxed font-light"
+          data-cslp={entry_uid ? `homepage.${entry_uid}.hero_description` : undefined}
+        >
           {description}
         </p>
 
diff --git a/components/homepage/ValuePropositions.tsx b/components/homepage/ValuePropositions.tsx
index ecf586d..a048eb7 100644
--- a/components/homepage/ValuePropositions.tsx
+++ b/components/homepage/ValuePropositions.tsx
@@ -7,11 +7,12 @@ interface ValueProposition {
 
 interface ValuePropositionsProps {
   propositions: ValueProposition[];
+  entry_uid?: string; // Add for data-cslp
 }
 
 const icons = [BookOpen, Zap, Users];
 
-export default function ValuePropositions({ propositions }: ValuePropositionsProps) {
+export default function ValuePropositions({ propositions, entry_uid }: ValuePropositionsProps) {
   return (
     <section className="py-20 bg-black relative overflow-hidden">
       {/* Subtle background blur effect */}
@@ -32,6 +33,7 @@ export default function ValuePropositions({ propositions }: ValuePropositionsPro
             <div 
               key={index}
               className="group relative bg-gradient-to-br from-gray-900 to-black p-10 rounded-2xl overflow-hidden transform hover:-translate-y-2 transition-all duration-300 border border-gray-800 shadow-2xl hover:shadow-gray-900/50 backdrop-blur-sm min-h-[400px] flex flex-col"
+              data-cslp={entry_uid ? `homepage.${entry_uid}.value_propositions.${index}` : undefined}
             >
               {/* Metallic gradient overlay */}
               <div className="absolute inset-0 bg-gradient-to-br from-gray-700/10 via-transparent to-gray-800/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
@@ -52,11 +54,17 @@ export default function ValuePropositions({ propositions }: ValuePropositionsPro
                   })()}
                 </div>
                 
-                <h3 className="text-2xl font-bold mb-4 bg-gradient-to-r from-gray-200 to-white bg-clip-text text-transparent group-hover:from-white group-hover:to-gray-100 transition-all duration-300">
+                <h3 
+                  className="text-2xl font-bold mb-4 bg-gradient-to-r from-gray-200 to-white bg-clip-text text-transparent group-hover:from-white group-hover:to-gray-100 transition-all duration-300"
+                  data-cslp={entry_uid ? `homepage.${entry_uid}.value_propositions.${index}.proposition_title` : undefined}
+                >
                   {prop.proposition_title}
                 </h3>
                 
-                <p className="text-gray-400 leading-relaxed group-hover:text-gray-300 transition-colors duration-300">
+                <p 
+                  className="text-gray-400 leading-relaxed group-hover:text-gray-300 transition-colors duration-300"
+                  data-cslp={entry_uid ? `homepage.${entry_uid}.value_propositions.${index}.proposition_description` : undefined}
+                >
                   {prop.proposition_description}
                 </p>
               </div>
diff --git a/lib/contentstack.ts b/lib/contentstack.ts
index 8b526dc..3ef2d25 100644
--- a/lib/contentstack.ts
+++ b/lib/contentstack.ts
@@ -4,12 +4,13 @@ const Stack = contentstack.Stack({
   api_key: process.env.NEXT_PUBLIC_CONTENTSTACK_API_KEY!,
   delivery_token: process.env.NEXT_PUBLIC_CONTENTSTACK_DELIVERY_TOKEN!,
   environment: process.env.NEXT_PUBLIC_CONTENTSTACK_ENVIRONMENT!,
+  preview_token: process.env.NEXT_PUBLIC_CONTENTSTACK_PREVIEW_TOKEN!,
+  // DO NOT include region - it causes DNS issues
   live_preview: { 
-        preview_token: process.env.PREVIEW_TOKEN!, 
-        enable: true, 
-        host: 'rest-preview.contentstack.com' 
-    }, 
-
+    preview_token: process.env.NEXT_PUBLIC_CONTENTSTACK_PREVIEW_TOKEN!, 
+    enable: true, 
+    host: 'rest-preview.contentstack.com'
+  },
 });
 
 export default Stack;
diff --git a/lib/livepreview.ts b/lib/livepreview.ts
new file mode 100644
index 0000000..2f3c49a
--- /dev/null
+++ b/lib/livepreview.ts
@@ -0,0 +1,24 @@
+import ContentstackLivePreview from '@contentstack/live-preview-utils';
+import Stack from './contentstack';
+
+export function LivePreviewInit() {
+  const apiKey = process.env.NEXT_PUBLIC_CONTENTSTACK_API_KEY;
+  const environment = process.env.NEXT_PUBLIC_CONTENTSTACK_ENVIRONMENT;
+
+  ContentstackLivePreview.init({
+    enable: true,
+    ssr: false,
+    stackSdk: Stack,
+    stackDetails: {
+      apiKey: apiKey,
+      environment: environment,
+    },
+    clientUrlParams: {
+      protocol: 'https',
+      host: process.env.NEXT_PUBLIC_CONTENTSTACK_APP_HOST || 'app.contentstack.com',
+      port: 443,
+    },
+  });
+}
+
+export const onEntryChange = ContentstackLivePreview.onEntryChange;
diff --git a/lib/utils.ts b/lib/utils.ts
index c7d2947..bd0c391 100644
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -1,17 +1,6 @@
 import { clsx, type ClassValue } from "clsx"
 import { twMerge } from "tailwind-merge"
-import Stack from './contentstack';
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
-
-/**
- * Set live preview query parameters for Contentstack
- * This enables live preview functionality by injecting live_preview hash and ContentType UID
- */
-export function setLivePreviewQueryParams(queryParams: Record<string, any>) {
-  if (queryParams?.live_preview) {
-    Stack.livePreviewQuery(queryParams as any);
-  }
-}

From 72a42ecb8e5ec716c9d480cbccfd0b2eea0110db Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 10 Feb 2026 13:09:32 +0000
Subject: [PATCH 2/4] Initial plan


From cdb784f53a88ee6708996d9c344dd3d6e9afb988 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 10 Feb 2026 13:13:32 +0000
Subject: [PATCH 3/4] Change footer background color to yellow

Co-authored-by: unboundedraj <242849807+unboundedraj@users.noreply.github.com>
---
 components/layout/Footer.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/components/layout/Footer.tsx b/components/layout/Footer.tsx
index bcc1647..0f70eb7 100644
--- a/components/layout/Footer.tsx
+++ b/components/layout/Footer.tsx
@@ -2,7 +2,7 @@ import Link from 'next/link';
 
 export default function Footer() {
   return (
-    <footer className="bg-black border-t border-gray-800">
+    <footer className="bg-yellow-400 border-t border-gray-800">
       <div className="max-w-7xl mx-auto px-6 py-12">
         <div className="flex flex-col md:flex-row items-center justify-between gap-6">
           {/* Brand */}
@@ -10,27 +10,27 @@ export default function Footer() {
             <div className="w-8 h-8 bg-white rounded flex items-center justify-center">
               <span className="text-black font-bold">D</span>
             </div>
-            <span className="text-white font-semibold">DevDocs</span>
+            <span className="text-black font-semibold">DevDocs</span>
           </div>
 
           {/* Links */}
           <div className="flex items-center gap-8 text-sm">
-            <Link href="/" className="text-gray-400 hover:text-white transition-colors">
+            <Link href="/" className="text-gray-700 hover:text-black transition-colors">
               Home
             </Link>
-            <Link href="/applications" className="text-gray-400 hover:text-white transition-colors">
+            <Link href="/applications" className="text-gray-700 hover:text-black transition-colors">
               Applications
             </Link>
-            <Link href="/support" className="text-gray-400 hover:text-white transition-colors">
+            <Link href="/support" className="text-gray-700 hover:text-black transition-colors">
               Support
             </Link>
-            <a href="#" className="text-gray-400 hover:text-white transition-colors">
+            <a href="#" className="text-gray-700 hover:text-black transition-colors">
               GitHub
             </a>
           </div>
 
           {/* Copyright */}
-          <div className="text-gray-500 text-sm">
+          <div className="text-gray-700 text-sm">
             © {new Date().getFullYear()} DevDocs
           </div>
         </div>

From 0255858ce8cd1f334ca3fcd12d473492c331cd0f Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 10 Feb 2026 13:15:01 +0000
Subject: [PATCH 4/4] Improve footer border contrast for accessibility

Co-authored-by: unboundedraj <242849807+unboundedraj@users.noreply.github.com>
---
 components/layout/Footer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/layout/Footer.tsx b/components/layout/Footer.tsx
index 0f70eb7..8484813 100644
--- a/components/layout/Footer.tsx
+++ b/components/layout/Footer.tsx
@@ -2,7 +2,7 @@ import Link from 'next/link';
 
 export default function Footer() {
   return (
-    <footer className="bg-yellow-400 border-t border-gray-800">
+    <footer className="bg-yellow-400 border-t border-gray-900">
       <div className="max-w-7xl mx-auto px-6 py-12">
         <div className="flex flex-col md:flex-row items-center justify-between gap-6">
           {/* Brand */}