text udpates ux

frontend/src/pages/Settings/ImportExport.tsx

@@ -1,21 +1,68 @@
 import PageMeta from "../../components/common/PageMeta";
 import ComponentCard from "../../components/common/ComponentCard";
+import { Card } from "../../components/ui/card";
+import { Download, Upload, Database, FileArchive, CheckCircle } from 'lucide-react';
 
 export default function ImportExport() {
   return (
     <>
       <PageMeta title="Import/Export - IGNY8" description="Data management" />
       
-      <ComponentCard title="Coming Soon" desc="Data management">
-        <div className="text-center py-8">
-          <p className="text-gray-600 dark:text-gray-400">
-            Import/Export - Coming Soon
-          </p>
-          <p className="text-sm text-gray-500 dark:text-gray-400 mt-2">
-            Import and export data, manage backups, and transfer content
+      <Card className="p-8">
+        <div className="text-center py-8 max-w-3xl mx-auto">
+          <div className="mb-6 flex justify-center">
+            <div className="p-4 bg-brand-100 dark:bg-brand-900/30 rounded-full">
+              <Database className="w-12 h-12 text-brand-600 dark:text-brand-400" />
+            </div>
+          </div>
+          
+          <h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-3">
+            Coming Soon: Manage Your Data
+          </h1>
+          
+          <p className="text-lg text-gray-600 dark:text-gray-400 mb-8">
+            Import and Export Your Content - Backup your keywords, articles, and settings. Move your content to other platforms. Download everything safely.
           </p>
+
+          <div className="bg-gradient-to-br from-brand-50 to-purple-50 dark:from-brand-900/20 dark:to-purple-900/20 rounded-lg p-6 border border-brand-200 dark:border-brand-800">
+            <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+              What will be available:
+            </h2>
+            <div className="space-y-3 text-left">
+              <div className="flex items-start gap-3">
+                <CheckCircle className="w-5 h-5 text-success-600 dark:text-success-400 flex-shrink-0 mt-0.5" />
+                <div className="text-gray-700 dark:text-gray-300">
+                  <strong>Export your keywords as a file</strong> (backup or share)
+                </div>
+              </div>
+              <div className="flex items-start gap-3">
+                <CheckCircle className="w-5 h-5 text-success-600 dark:text-success-400 flex-shrink-0 mt-0.5" />
+                <div className="text-gray-700 dark:text-gray-300">
+                  <strong>Export all your articles</strong> in different formats
+                </div>
+              </div>
+              <div className="flex items-start gap-3">
+                <CheckCircle className="w-5 h-5 text-success-600 dark:text-success-400 flex-shrink-0 mt-0.5" />
+                <div className="text-gray-700 dark:text-gray-300">
+                  <strong>Import keywords from other sources</strong>
+                </div>
+              </div>
+              <div className="flex items-start gap-3">
+                <CheckCircle className="w-5 h-5 text-success-600 dark:text-success-400 flex-shrink-0 mt-0.5" />
+                <div className="text-gray-700 dark:text-gray-300">
+                  <strong>Backup and restore</strong> your entire account
+                </div>
+              </div>
+              <div className="flex items-start gap-3">
+                <CheckCircle className="w-5 h-5 text-success-600 dark:text-success-400 flex-shrink-0 mt-0.5" />
+                <div className="text-gray-700 dark:text-gray-300">
+                  <strong>Download your settings</strong> and configurations
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
-      </ComponentCard>
+      </Card>
     </>
   );
 }

frontend/src/pages/Settings/Publishing.tsx

@@ -68,9 +68,9 @@ export default function Publishing() {
   };
 
   const DESTINATIONS = [
-    { value: 'sites', label: 'IGNY8 Sites' },
-    { value: 'wordpress', label: 'WordPress' },
-    { value: 'shopify', label: 'Shopify' },
+    { value: 'sites', label: 'Publish to My Sites (using IGNY8)' },
+    { value: 'wordpress', label: 'Publish to WordPress (your self-hosted WordPress site)' },
+    { value: 'shopify', label: 'Publish to Shopify (your Shopify store)' },
   ];
 
   if (loading) {
@@ -90,10 +90,10 @@ export default function Publishing() {
       
       <div className="mb-6">
         <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
-          Publishing Settings
+          Where to Publish
         </h1>
         <p className="text-gray-600 dark:text-gray-400 mt-1">
-          Configure default publishing destinations and rules
+          Set up automatic publishing - Tell us where your content should go
         </p>
       </div>
 
@@ -103,10 +103,13 @@ export default function Publishing() {
           <div className="space-y-4">
             <div>
               <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-1">
-                Default Publishing Destinations
+                Where Should Articles Go?
               </h2>
               <p className="text-sm text-gray-600 dark:text-gray-400">
-                Select default platforms where content will be published
+                Choose which platforms get your articles - You can pick multiple
+              </p>
+              <p className="text-sm text-gray-600 dark:text-gray-400 mt-2">
+                When you publish an article, it will go to all the platforms you check here
               </p>
             </div>
 
@@ -129,10 +132,10 @@ export default function Publishing() {
           <div className="space-y-4">
             <div>
               <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-1">
-                Auto-Publish Settings
+                Automatic Publishing
               </h2>
               <p className="text-sm text-gray-600 dark:text-gray-400">
-                Automatically publish content when it's ready
+                Publish articles without asking me
               </p>
             </div>
 
@@ -140,15 +143,14 @@ export default function Publishing() {
               <Checkbox
                 checked={autoPublishEnabled}
                 onChange={(e) => setAutoPublishEnabled(e.target.checked)}
-                label="Enable auto-publish"
+                label="Automatically publish articles when they're finished and reviewed"
               />
             </div>
 
             {autoPublishEnabled && (
               <div className="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
                 <p className="text-sm text-blue-800 dark:text-blue-200">
-                  When enabled, content will be automatically published to selected destinations
-                  when generation is complete.
+                  When you turn this on, articles will publish to your site right away. You can still review them first if you want
                 </p>
               </div>
             )}
@@ -160,10 +162,10 @@ export default function Publishing() {
           <div className="space-y-4">
             <div>
               <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-1">
-                Auto-Sync Settings
+                Keep Everything Updated
               </h2>
               <p className="text-sm text-gray-600 dark:text-gray-400">
-                Configure automatic content synchronization with publishing platforms
+                Automatically sync articles between platforms
               </p>
             </div>
 
@@ -171,7 +173,7 @@ export default function Publishing() {
               <Checkbox
                 checked={autoSyncEnabled}
                 onChange={(e) => setAutoSyncEnabled(e.target.checked)}
-                label="Enable auto-sync"
+                label="Automatically update articles on all my platforms if I make changes"
               />
             </div>
 

frontend/src/pages/Settings/Sites.tsx

@@ -386,26 +386,26 @@ export default function Sites() {
 
   return (
     <>
-      <PageMeta title="Sites Management" description="Manage your sites and configure industries and sectors" />
+      <PageMeta title="Your Websites" description="Manage all your websites here - Add new sites, configure settings, and track content for each one" />
       
       <div className="space-y-8">
         <div className="flex items-center justify-between">
           <div>
-            <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Sites Management</h1>
+            <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Your Websites</h1>
             <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
-              Manage your sites, configure industries, and select sectors. Multiple sites can be active simultaneously.
+              Manage all your websites here - Add new sites, configure settings, and track content for each one
             </p>
           </div>
           <Button onClick={handleCreateSite} variant="primary">
-            + Add Site
+            + Add Another Website
           </Button>
         </div>
 
         {/* Info Alert */}
         <Alert
           variant="info"
-          title="Sites Configuration"
-          message="Each site can have up to 5 sectors selected from 15 major industries. Keywords and clusters are automatically associated with sectors. Multiple sites can be active simultaneously."
+          title="About Your Sites"
+          message="Active sites can receive new content. Inactive sites are paused. Each site can have up to 5 sectors selected from 15 major industries."
         />
 
         {/* Sites Grid */}