Refactor documentation view tabs

src/components/DocumentationView/AgentItems.tsx

@@ -0,0 +1,51 @@
+import { FileCode, CheckCircle, Sparkle } from '@phosphor-icons/react'
+
+export function AgentFileItem({ filename, path, description, features }: {
+  filename: string
+  path: string
+  description: string
+  features: string[]
+}) {
+  return (
+    <div className="space-y-3 border-l-2 border-accent pl-4">
+      <div className="space-y-1">
+        <div className="flex items-center gap-2">
+          <FileCode size={18} className="text-accent" />
+          <code className="text-sm font-semibold text-accent">{filename}</code>
+        </div>
+        <p className="text-xs text-muted-foreground font-mono">{path}</p>
+        <p className="text-sm text-foreground/90">{description}</p>
+      </div>
+      <div className="space-y-1">
+        <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">Key Features:</p>
+        <ul className="space-y-1">
+          {features.map((feature) => (
+            <li key={feature} className="text-sm text-foreground/80 flex items-start gap-2">
+              <CheckCircle size={14} weight="fill" className="text-accent mt-1 flex-shrink-0" />
+              <span>{feature}</span>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  )
+}
+
+export function IntegrationPoint({ component, capabilities }: { component: string; capabilities: string[] }) {
+  return (
+    <div className="space-y-2 border rounded-lg p-4 bg-card">
+      <h4 className="font-semibold text-sm flex items-center gap-2">
+        <Sparkle size={16} weight="duotone" className="text-accent" />
+        {component}
+      </h4>
+      <ul className="space-y-1">
+        {capabilities.map((capability) => (
+          <li key={capability} className="text-sm text-muted-foreground flex items-start gap-2">
+            <span className="text-accent">•</span>
+            <span>{capability}</span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}

src/components/DocumentationView/AgentsCoreServices.tsx

@@ -0,0 +1,25 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import agentsData from '@/data/documentation/agents-data.json'
+import { AgentFileItem } from './AgentItems'
+
+export function AgentsCoreServices() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Core AI Services</CardTitle>
+        <CardDescription>Primary modules handling AI operations</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {agentsData.coreServices.map((service) => (
+          <AgentFileItem
+            key={service.filename}
+            filename={service.filename}
+            path={service.path}
+            description={service.description}
+            features={service.features}
+          />
+        ))}
+      </CardContent>
+    </Card>
+  )
+}

src/components/DocumentationView/AgentsFutureEnhancements.tsx

@@ -0,0 +1,28 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Target, Package } from '@phosphor-icons/react'
+import agentsData from '@/data/documentation/agents-data.json'
+
+export function AgentsFutureEnhancements() {
+  return (
+    <Card className="bg-muted/50">
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Package size={20} weight="duotone" />
+          Future AI Enhancements
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <ul className="space-y-2 text-sm">
+          {agentsData.futureEnhancements.map((item) => (
+            <li key={item.title} className="flex items-start gap-2">
+              <Target size={16} className="text-accent mt-1 flex-shrink-0" />
+              <span>
+                <strong>{item.title}:</strong> {item.description}
+              </span>
+            </li>
+          ))}
+        </ul>
+      </CardContent>
+    </Card>
+  )
+}

src/components/DocumentationView/AgentsIntegrationPoints.tsx

@@ -0,0 +1,21 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import agentsData from '@/data/documentation/agents-data.json'
+import { IntegrationPoint } from './AgentItems'
+
+export function AgentsIntegrationPoints() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>AI Integration Points</CardTitle>
+        <CardDescription>Features enhanced by AI capabilities</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="grid gap-4">
+          {agentsData.integrationPoints.map((point) => (
+            <IntegrationPoint key={point.component} component={point.component} capabilities={point.capabilities} />
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

src/components/DocumentationView/AgentsOverviewSection.tsx

@@ -0,0 +1,22 @@
+import { Separator } from '@/components/ui/separator'
+import { FileCode } from '@phosphor-icons/react'
+import agentsData from '@/data/documentation/agents-data.json'
+
+export function AgentsOverviewSection() {
+  return (
+    <div className="space-y-4">
+      <h1 className="text-4xl font-bold flex items-center gap-3">
+        <FileCode size={36} weight="duotone" className="text-accent" />
+        {agentsData.title}
+      </h1>
+      <p className="text-lg text-muted-foreground">{agentsData.subtitle}</p>
+
+      <Separator />
+
+      <div className="space-y-4">
+        <h2 className="text-2xl font-semibold">AI Service Architecture</h2>
+        <p className="text-foreground/90 leading-relaxed">{agentsData.overview}</p>
+      </div>
+    </div>
+  )
+}

src/components/DocumentationView/AgentsPromptEngineering.tsx

@@ -0,0 +1,21 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import agentsData from '@/data/documentation/agents-data.json'
+
+export function AgentsPromptEngineering() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Prompt Engineering</CardTitle>
+        <CardDescription>How we optimize AI interactions</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {agentsData.promptEngineering.map((item) => (
+          <div key={item.title} className="space-y-2">
+            <h3 className="font-semibold">{item.title}</h3>
+            <p className="text-sm text-muted-foreground">{item.description}</p>
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  )
+}

src/components/DocumentationView/AgentsTab.tsx

@@ -0,0 +1,19 @@
+import { AgentsCoreServices } from './AgentsCoreServices'
+import { AgentsFutureEnhancements } from './AgentsFutureEnhancements'
+import { AgentsIntegrationPoints } from './AgentsIntegrationPoints'
+import { AgentsOverviewSection } from './AgentsOverviewSection'
+import { AgentsPromptEngineering } from './AgentsPromptEngineering'
+
+export function AgentsTab() {
+  return (
+    <div className="space-y-6">
+      <AgentsOverviewSection />
+      <div className="space-y-4">
+        <AgentsCoreServices />
+        <AgentsIntegrationPoints />
+        <AgentsPromptEngineering />
+        <AgentsFutureEnhancements />
+      </div>
+    </div>
+  )
+}

src/components/DocumentationView/CicdBestPracticesCard.tsx

@@ -0,0 +1,26 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { CheckCircle, Rocket } from '@phosphor-icons/react'
+import cicdData from '@/data/documentation/cicd-data.json'
+
+export function CicdBestPracticesCard() {
+  return (
+    <Card className="bg-muted/50">
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Rocket size={20} weight="duotone" />
+          Best Practices
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <ul className="space-y-2 text-sm">
+          {cicdData.bestPractices.map((practice) => (
+            <li key={practice} className="flex items-start gap-2">
+              <CheckCircle size={16} className="text-accent mt-1 flex-shrink-0" weight="fill" />
+              <span>{practice}</span>
+            </li>
+          ))}
+        </ul>
+      </CardContent>
+    </Card>
+  )
+}

src/components/DocumentationView/CicdBranchStrategySection.tsx

@@ -0,0 +1,48 @@
+import { Card, CardContent } from '@/components/ui/card'
+import { GitBranch } from '@phosphor-icons/react'
+import cicdData from '@/data/documentation/cicd-data.json'
+
+const toneStyles = {
+  green: {
+    card: 'bg-green-500/5 border-green-500/20',
+    icon: 'text-green-500'
+  },
+  blue: {
+    card: 'bg-blue-500/5 border-blue-500/20',
+    icon: 'text-blue-500'
+  },
+  purple: {
+    card: 'bg-purple-500/5 border-purple-500/20',
+    icon: 'text-purple-500'
+  },
+  orange: {
+    card: 'bg-orange-500/5 border-orange-500/20',
+    icon: 'text-orange-500'
+  }
+} as const
+
+export function CicdBranchStrategySection() {
+  return (
+    <div className="space-y-4">
+      <h2 className="text-2xl font-semibold">Branch Strategy</h2>
+      <div className="grid gap-4">
+        {cicdData.branches.map((branch) => {
+          const styles = toneStyles[branch.tone]
+          return (
+            <Card key={branch.name} className={styles.card}>
+              <CardContent className="pt-4 pb-4">
+                <div className="flex items-start gap-3">
+                  <GitBranch size={20} weight="duotone" className={`${styles.icon} mt-0.5`} />
+                  <div className="space-y-1">
+                    <h4 className="font-semibold">{branch.name}</h4>
+                    <p className="text-sm text-muted-foreground">{branch.description}</p>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

src/components/DocumentationView/CicdDockerCard.tsx

@@ -0,0 +1,49 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Separator } from '@/components/ui/separator'
+import { CheckCircle } from '@phosphor-icons/react'
+import cicdData from '@/data/documentation/cicd-data.json'
+
+export function CicdDockerCard() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Docker Configuration</CardTitle>
+        <CardDescription>Containerization for production deployment</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-2">
+          <h3 className="font-semibold">Files Included</h3>
+          <div className="space-y-2 ml-4">
+            {cicdData.docker.files.map((file) => (
+              <div key={file.name} className="space-y-1">
+                <code className="text-sm font-mono text-accent">{file.name}</code>
+                <p className="text-sm text-muted-foreground">{file.description}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <Separator />
+
+        <div className="space-y-2">
+          <h3 className="font-semibold">Docker Commands</h3>
+          <pre className="custom-mui-code-block">{cicdData.docker.commands}</pre>
+        </div>
+
+        <Separator />
+
+        <div className="space-y-2">
+          <h3 className="font-semibold">Features</h3>
+          <ul className="space-y-2 text-sm">
+            {cicdData.docker.features.map((feature) => (
+              <li key={feature} className="flex items-start gap-2">
+                <CheckCircle size={16} className="text-accent mt-1 flex-shrink-0" weight="fill" />
+                <span>{feature}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

src/components/DocumentationView/CicdEnvVarsCard.tsx

@@ -0,0 +1,39 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import cicdData from '@/data/documentation/cicd-data.json'
+
+export function CicdEnvVarsCard() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Environment Variables</CardTitle>
+        <CardDescription>Required configuration for CI/CD platforms</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-4">
+          <div className="overflow-x-auto">
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="border-b">
+                  <th className="text-left py-2 pr-4 font-semibold">Variable</th>
+                  <th className="text-left py-2 pr-4 font-semibold">Description</th>
+                  <th className="text-left py-2 font-semibold">Required</th>
+                </tr>
+              </thead>
+              <tbody className="text-muted-foreground">
+                {cicdData.environmentVariables.map((variable) => (
+                  <tr key={variable.variable} className="border-b">
+                    <td className="py-2 pr-4">
+                      <code className="text-accent">{variable.variable}</code>
+                    </td>
+                    <td className="py-2 pr-4">{variable.description}</td>
+                    <td className="py-2">{variable.required}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

src/components/DocumentationView/CicdItems.tsx

@@ -0,0 +1,56 @@
+import { Badge } from '@/components/ui/badge'
+import { Card, CardContent } from '@/components/ui/card'
+import { CheckCircle, GitBranch } from '@phosphor-icons/react'
+
+export function CICDPlatformItem({ name, file, description, features }: {
+  name: string
+  file: string
+  description: string
+  features: string[]
+}) {
+  return (
+    <div className="space-y-3 border-l-2 border-accent pl-4">
+      <div className="space-y-1">
+        <div className="flex items-center gap-2">
+          <GitBranch size={18} className="text-accent" />
+          <h3 className="text-base font-semibold">{name}</h3>
+        </div>
+        <code className="text-xs text-muted-foreground font-mono">{file}</code>
+        <p className="text-sm text-foreground/90">{description}</p>
+      </div>
+      <div className="space-y-1">
+        <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">Key Features:</p>
+        <ul className="space-y-1">
+          {features.map((feature) => (
+            <li key={feature} className="text-sm text-foreground/80 flex items-start gap-2">
+              <CheckCircle size={14} weight="fill" className="text-accent mt-1 flex-shrink-0" />
+              <span>{feature}</span>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  )
+}
+
+export function PipelineStageCard({ stage, description, duration }: {
+  stage: string
+  description: string
+  duration: string
+}) {
+  return (
+    <Card className="bg-primary/5 border-primary/20">
+      <CardContent className="pt-4 pb-4">
+        <div className="flex items-start justify-between gap-4">
+          <div className="space-y-1 flex-1">
+            <h4 className="font-semibold text-sm">{stage}</h4>
+            <p className="text-sm text-muted-foreground">{description}</p>
+          </div>
+          <Badge variant="secondary" className="text-xs whitespace-nowrap">
+            {duration}
+          </Badge>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

src/components/DocumentationView/CicdOverviewSection.tsx

@@ -0,0 +1,26 @@
+import { Separator } from '@/components/ui/separator'
+import { GitBranch } from '@phosphor-icons/react'
+import cicdData from '@/data/documentation/cicd-data.json'
+
+export function CicdOverviewSection() {
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center gap-4">
+        <div className="w-16 h-16 rounded-xl bg-gradient-to-br from-primary to-accent flex items-center justify-center">
+          <GitBranch size={32} weight="duotone" className="text-white" />
+        </div>
+        <div>
+          <h1 className="text-4xl font-bold">{cicdData.title}</h1>
+          <p className="text-lg text-muted-foreground">{cicdData.subtitle}</p>
+        </div>
+      </div>
+
+      <Separator />
+
+      <div className="space-y-4">
+        <h2 className="text-2xl font-semibold">Overview</h2>
+        <p className="text-foreground/90 leading-relaxed">{cicdData.overview}</p>
+      </div>
+    </div>
+  )
+}

src/components/DocumentationView/CicdPipelineSection.tsx

@@ -0,0 +1,21 @@
+import cicdData from '@/data/documentation/cicd-data.json'
+import { PipelineStageCard } from './CicdItems'
+
+export function CicdPipelineSection() {
+  return (
+    <div className="space-y-4">
+      <h2 className="text-2xl font-semibold">Pipeline Stages</h2>
+      <p className="text-foreground/90 leading-relaxed">{cicdData.pipeline.intro}</p>
+      <div className="grid gap-3">
+        {cicdData.pipeline.stages.map((stage) => (
+          <PipelineStageCard
+            key={stage.stage}
+            stage={stage.stage}
+            description={stage.description}
+            duration={stage.duration}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}

src/components/DocumentationView/CicdPlatformsCard.tsx

@@ -0,0 +1,24 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import cicdData from '@/data/documentation/cicd-data.json'
+import { CICDPlatformItem } from './CicdItems'
+
+export function CicdPlatformsCard() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Available Configurations</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {cicdData.platforms.map((platform) => (
+          <CICDPlatformItem
+            key={platform.name}
+            name={platform.name}
+            file={platform.file}
+            description={platform.description}
+            features={platform.features}
+          />
+        ))}
+      </CardContent>
+    </Card>
+  )
+}

src/components/DocumentationView/CicdQuickStartCard.tsx

@@ -0,0 +1,31 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Lightbulb } from '@phosphor-icons/react'
+import cicdData from '@/data/documentation/cicd-data.json'
+
+export function CicdQuickStartCard() {
+  return (
+    <Card className="bg-accent/10 border-accent/20">
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Lightbulb size={20} weight="duotone" className="text-accent" />
+          Quick Start
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-3">
+          {cicdData.quickStart.map((step) => (
+            <div key={step.step} className="space-y-2">
+              <h3 className="font-semibold flex items-center gap-2">
+                <span className="w-6 h-6 rounded-full bg-accent text-accent-foreground flex items-center justify-center text-sm">
+                  {step.step}
+                </span>
+                {step.title}
+              </h3>
+              <p className="text-sm text-foreground/80 ml-8">{step.description}</p>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

src/components/DocumentationView/CicdResourcesCard.tsx

@@ -0,0 +1,28 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { FileCode, Package } from '@phosphor-icons/react'
+import cicdData from '@/data/documentation/cicd-data.json'
+
+export function CicdResourcesCard() {
+  return (
+    <Card className="border-primary/30">
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Package size={20} weight="duotone" />
+          Additional Resources
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <ul className="space-y-2 text-sm">
+          {cicdData.resources.map((resource) => (
+            <li key={resource.label} className="flex items-start gap-2">
+              <FileCode size={16} className="text-accent mt-1 flex-shrink-0" />
+              <span>
+                <code className="text-accent">{resource.label}</code> - {resource.description}
+              </span>
+            </li>
+          ))}
+        </ul>
+      </CardContent>
+    </Card>
+  )
+}

src/components/DocumentationView/CicdTab.tsx

@@ -0,0 +1,25 @@
+import { CicdBestPracticesCard } from './CicdBestPracticesCard'
+import { CicdBranchStrategySection } from './CicdBranchStrategySection'
+import { CicdDockerCard } from './CicdDockerCard'
+import { CicdEnvVarsCard } from './CicdEnvVarsCard'
+import { CicdOverviewSection } from './CicdOverviewSection'
+import { CicdPipelineSection } from './CicdPipelineSection'
+import { CicdPlatformsCard } from './CicdPlatformsCard'
+import { CicdQuickStartCard } from './CicdQuickStartCard'
+import { CicdResourcesCard } from './CicdResourcesCard'
+
+export function CicdTab() {
+  return (
+    <div className="space-y-6">
+      <CicdOverviewSection />
+      <CicdPlatformsCard />
+      <CicdPipelineSection />
+      <CicdDockerCard />
+      <CicdEnvVarsCard />
+      <CicdBranchStrategySection />
+      <CicdQuickStartCard />
+      <CicdBestPracticesCard />
+      <CicdResourcesCard />
+    </div>
+  )
+}

src/components/DocumentationView/DocComponents.tsx

@@ -1,182 +0,0 @@
-import { Card, CardContent } from '@/components/ui/card'
-import { Badge } from '@/components/ui/badge'
-import { FileCode, CheckCircle, Sparkle, GitBranch } from '@phosphor-icons/react'
-
-export function FeatureItem({ icon, title, description }: { icon: React.ReactNode; title: string; description: string }) {
-  return (
-    <div className="flex gap-3">
-      <div className="text-accent mt-0.5">{icon}</div>
-      <div className="space-y-1">
-        <h4 className="font-semibold text-sm">{title}</h4>
-        <p className="text-sm text-muted-foreground">{description}</p>
-      </div>
-    </div>
-  )
-}
-
-export function AIFeatureCard({ title, description }: { title: string; description: string }) {
-  return (
-    <Card className="bg-primary/5 border-primary/20">
-      <CardContent className="pt-4 pb-4">
-        <div className="flex gap-3">
-          <Sparkle size={20} weight="duotone" className="text-accent flex-shrink-0 mt-0.5" />
-          <div className="space-y-1">
-            <h4 className="font-semibold text-sm">{title}</h4>
-            <p className="text-sm text-muted-foreground">{description}</p>
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
-
-export function RoadmapItem({ status, title, description, version }: { 
-  status: 'completed' | 'planned'
-  title: string
-  description: string
-  version: string 
-}) {
-  return (
-    <Card className={status === 'completed' ? 'bg-green-500/5 border-green-500/20' : 'bg-muted/50'}>
-      <CardContent className="pt-4 pb-4">
-        <div className="flex items-start justify-between gap-4">
-          <div className="space-y-1 flex-1">
-            <div className="flex items-center gap-2">
-              <h4 className="font-semibold">{title}</h4>
-              <Badge variant={status === 'completed' ? 'default' : 'secondary'} className="text-xs">
-                {version}
-              </Badge>
-            </div>
-            <p className="text-sm text-muted-foreground">{description}</p>
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
-
-export function AgentFileItem({ filename, path, description, features }: {
-  filename: string
-  path: string
-  description: string
-  features: string[]
-}) {
-  return (
-    <div className="space-y-3 border-l-2 border-accent pl-4">
-      <div className="space-y-1">
-        <div className="flex items-center gap-2">
-          <FileCode size={18} className="text-accent" />
-          <code className="text-sm font-semibold text-accent">{filename}</code>
-        </div>
-        <p className="text-xs text-muted-foreground font-mono">{path}</p>
-        <p className="text-sm text-foreground/90">{description}</p>
-      </div>
-      <div className="space-y-1">
-        <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">Key Features:</p>
-        <ul className="space-y-1">
-          {features.map((feature, idx) => (
-            <li key={idx} className="text-sm text-foreground/80 flex items-start gap-2">
-              <CheckCircle size={14} weight="fill" className="text-accent mt-1 flex-shrink-0" />
-              <span>{feature}</span>
-            </li>
-          ))}
-        </ul>
-      </div>
-    </div>
-  )
-}
-
-export function IntegrationPoint({ component, capabilities }: { component: string; capabilities: string[] }) {
-  return (
-    <div className="space-y-2 border rounded-lg p-4 bg-card">
-      <h4 className="font-semibold text-sm flex items-center gap-2">
-        <Sparkle size={16} weight="duotone" className="text-accent" />
-        {component}
-      </h4>
-      <ul className="space-y-1">
-        {capabilities.map((capability, idx) => (
-          <li key={idx} className="text-sm text-muted-foreground flex items-start gap-2">
-            <span className="text-accent">•</span>
-            <span>{capability}</span>
-          </li>
-        ))}
-      </ul>
-    </div>
-  )
-}
-
-export function CICDPlatformItem({ name, file, description, features }: {
-  name: string
-  file: string
-  description: string
-  features: string[]
-}) {
-  return (
-    <div className="space-y-3 border-l-2 border-accent pl-4">
-      <div className="space-y-1">
-        <div className="flex items-center gap-2">
-          <GitBranch size={18} className="text-accent" />
-          <h3 className="text-base font-semibold">{name}</h3>
-        </div>
-        <code className="text-xs text-muted-foreground font-mono">{file}</code>
-        <p className="text-sm text-foreground/90">{description}</p>
-      </div>
-      <div className="space-y-1">
-        <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">Key Features:</p>
-        <ul className="space-y-1">
-          {features.map((feature, idx) => (
-            <li key={idx} className="text-sm text-foreground/80 flex items-start gap-2">
-              <CheckCircle size={14} weight="fill" className="text-accent mt-1 flex-shrink-0" />
-              <span>{feature}</span>
-            </li>
-          ))}
-        </ul>
-      </div>
-    </div>
-  )
-}
-
-export function PipelineStageCard({ stage, description, duration }: {
-  stage: string
-  description: string
-  duration: string
-}) {
-  return (
-    <Card className="bg-primary/5 border-primary/20">
-      <CardContent className="pt-4 pb-4">
-        <div className="flex items-start justify-between gap-4">
-          <div className="space-y-1 flex-1">
-            <h4 className="font-semibold text-sm">{stage}</h4>
-            <p className="text-sm text-muted-foreground">{description}</p>
-          </div>
-          <Badge variant="secondary" className="text-xs whitespace-nowrap">
-            {duration}
-          </Badge>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
-
-export function SassComponentItem({ name, classes, description }: { name: string; classes: string[]; description: string }) {
-  return (
-    <div className="space-y-2 p-4 border rounded-lg bg-card">
-      <h4 className="font-semibold">{name}</h4>
-      <p className="text-sm text-muted-foreground">{description}</p>
-      <div className="space-y-1">
-        {classes.map((cls, idx) => (
-          <code key={idx} className="text-xs font-mono text-accent block">{cls}</code>
-        ))}
-      </div>
-    </div>
-  )
-}
-
-export function AnimationItem({ name, description }: { name: string; description: string }) {
-  return (
-    <div className="space-y-1 p-3 border rounded-lg bg-card">
-      <code className="text-xs font-mono text-accent">{name}</code>
-      <p className="text-xs text-muted-foreground">{description}</p>
-    </div>
-  )
-}

src/components/DocumentationView/FeatureItems.tsx

@@ -0,0 +1,30 @@
+import { Card, CardContent } from '@/components/ui/card'
+import { Sparkle } from '@phosphor-icons/react'
+
+export function FeatureItem({ icon, title, description }: { icon: React.ReactNode; title: string; description: string }) {
+  return (
+    <div className="flex gap-3">
+      <div className="text-accent mt-0.5">{icon}</div>
+      <div className="space-y-1">
+        <h4 className="font-semibold text-sm">{title}</h4>
+        <p className="text-sm text-muted-foreground">{description}</p>
+      </div>
+    </div>
+  )
+}
+
+export function AIFeatureCard({ title, description }: { title: string; description: string }) {
+  return (
+    <Card className="bg-primary/5 border-primary/20">
+      <CardContent className="pt-4 pb-4">
+        <div className="flex gap-3">
+          <Sparkle size={20} weight="duotone" className="text-accent flex-shrink-0 mt-0.5" />
+          <div className="space-y-1">
+            <h4 className="font-semibold text-sm">{title}</h4>
+            <p className="text-sm text-muted-foreground">{description}</p>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

src/components/DocumentationView/PwaFeaturesCard.tsx

@@ -0,0 +1,25 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { CheckCircle } from '@phosphor-icons/react'
+import pwaData from '@/data/documentation/pwa-data.json'
+
+export function PwaFeaturesCard() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>PWA Features</CardTitle>
+        <CardDescription>Native app capabilities in your browser</CardDescription>
+      </CardHeader>
+      <CardContent className="grid md:grid-cols-2 gap-4">
+        {pwaData.features.map((feature) => (
+          <div key={feature.title} className="space-y-2">
+            <div className="flex items-center gap-2">
+              <CheckCircle size={16} weight="fill" className="text-accent" />
+              <span className="font-semibold text-sm">{feature.title}</span>
+            </div>
+            <p className="text-xs text-muted-foreground ml-6">{feature.description}</p>
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  )
+}

src/components/DocumentationView/PwaInstallationSection.tsx

@@ -0,0 +1,36 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import pwaData from '@/data/documentation/pwa-data.json'
+
+function InstallationCard({ title, items }: { title: string; items: { title: string; steps: string[] }[] }) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-base">{title}</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-3 text-sm">
+        {items.map((item) => (
+          <div key={item.title}>
+            <div className="font-semibold mb-1">{item.title}</div>
+            <ol className="list-decimal list-inside space-y-1 text-muted-foreground ml-2">
+              {item.steps.map((step) => (
+                <li key={step}>{step}</li>
+              ))}
+            </ol>
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  )
+}
+
+export function PwaInstallationSection() {
+  return (
+    <div className="space-y-4">
+      <h2 className="text-2xl font-semibold">Installation</h2>
+      <div className="grid md:grid-cols-2 gap-4">
+        <InstallationCard title="Desktop Installation" items={pwaData.installation.desktop} />
+        <InstallationCard title="Mobile Installation" items={pwaData.installation.mobile} />
+      </div>
+    </div>
+  )
+}

src/components/DocumentationView/PwaOfflineSection.tsx

@@ -0,0 +1,50 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { CheckCircle, Wrench } from '@phosphor-icons/react'
+import pwaData from '@/data/documentation/pwa-data.json'
+
+function OfflineList({ items, accent }: { items: string[]; accent: boolean }) {
+  return (
+    <ul className={`space-y-2 text-sm ${accent ? 'text-foreground/80' : 'text-muted-foreground'}`}>
+      {items.map((item) => (
+        <li key={item} className="flex items-start gap-2">
+          <span className={accent ? 'text-accent mt-0.5' : 'mt-0.5'}>•</span>
+          <span>{item}</span>
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+export function PwaOfflineSection() {
+  return (
+    <div className="space-y-4">
+      <h2 className="text-2xl font-semibold">Offline Capabilities</h2>
+
+      <div className="grid md:grid-cols-2 gap-4">
+        <Card className="border-accent/50">
+          <CardHeader>
+            <CardTitle className="text-base flex items-center gap-2">
+              <CheckCircle size={20} weight="fill" className="text-accent" />
+              Works Offline
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <OfflineList items={pwaData.offline.worksOffline} accent />
+          </CardContent>
+        </Card>
+
+        <Card className="border-muted">
+          <CardHeader>
+            <CardTitle className="text-base flex items-center gap-2">
+              <Wrench size={20} weight="duotone" className="text-muted-foreground" />
+              Requires Internet
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <OfflineList items={pwaData.offline.requiresInternet} accent={false} />
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}

src/components/DocumentationView/PwaOverviewSection.tsx

@@ -0,0 +1,26 @@
+import { Separator } from '@/components/ui/separator'
+import { Rocket } from '@phosphor-icons/react'
+import pwaData from '@/data/documentation/pwa-data.json'
+
+export function PwaOverviewSection() {
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center gap-4">
+        <div className="w-16 h-16 rounded-xl bg-gradient-to-br from-primary to-accent flex items-center justify-center">
+          <Rocket size={32} weight="duotone" className="text-white" />
+        </div>
+        <div>
+          <h1 className="text-4xl font-bold">{pwaData.title}</h1>
+          <p className="text-lg text-muted-foreground">{pwaData.subtitle}</p>
+        </div>
+      </div>
+
+      <Separator />
+
+      <div className="space-y-4">
+        <h2 className="text-2xl font-semibold">Overview</h2>
+        <p className="text-foreground/90 leading-relaxed">{pwaData.overview}</p>
+      </div>
+    </div>
+  )
+}

src/components/DocumentationView/PwaProTipsCard.tsx

@@ -0,0 +1,28 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Lightbulb } from '@phosphor-icons/react'
+import pwaData from '@/data/documentation/pwa-data.json'
+
+export function PwaProTipsCard() {
+  return (
+    <Card className="bg-accent/10 border-accent/20">
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Lightbulb size={20} weight="duotone" className="text-accent" />
+          Pro Tips
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <ul className="space-y-2 text-sm">
+          {pwaData.proTips.map((tip) => (
+            <li key={tip.title} className="flex items-start gap-2">
+              <span className="text-accent mt-1">•</span>
+              <span>
+                <strong>{tip.title}:</strong> {tip.description}
+              </span>
+            </li>
+          ))}
+        </ul>
+      </CardContent>
+    </Card>
+  )
+}

src/components/DocumentationView/PwaSettingsCard.tsx

@@ -0,0 +1,29 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Separator } from '@/components/ui/separator'
+import pwaData from '@/data/documentation/pwa-data.json'
+
+export function PwaSettingsCard() {
+  return (
+    <div className="space-y-4">
+      <h2 className="text-2xl font-semibold">PWA Settings</h2>
+      <p className="text-foreground/90 leading-relaxed">
+        Navigate to the <strong>PWA</strong> tab to manage all Progressive Web App features:
+      </p>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Available Controls</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {pwaData.settings.map((setting, index) => (
+            <div key={setting.title} className="space-y-2">
+              <div className="font-semibold">{setting.title}</div>
+              <p className="text-sm text-muted-foreground">{setting.description}</p>
+              {index < pwaData.settings.length - 1 && <Separator />}
+            </div>
+          ))}
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

src/components/DocumentationView/PwaTab.tsx

@@ -0,0 +1,19 @@
+import { PwaFeaturesCard } from './PwaFeaturesCard'
+import { PwaInstallationSection } from './PwaInstallationSection'
+import { PwaOfflineSection } from './PwaOfflineSection'
+import { PwaOverviewSection } from './PwaOverviewSection'
+import { PwaProTipsCard } from './PwaProTipsCard'
+import { PwaSettingsCard } from './PwaSettingsCard'
+
+export function PwaTab() {
+  return (
+    <div className="space-y-6">
+      <PwaOverviewSection />
+      <PwaFeaturesCard />
+      <PwaInstallationSection />
+      <PwaSettingsCard />
+      <PwaOfflineSection />
+      <PwaProTipsCard />
+    </div>
+  )
+}

src/components/DocumentationView/ReadmeTab.tsx

@@ -1,7 +1,7 @@
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { Separator } from '@/components/ui/separator'
 import { Code, Database, Tree, PaintBrush, Flask, Play, Cube, Wrench, Gear, Rocket, Lightbulb, CheckCircle } from '@phosphor-icons/react'
-import { FeatureItem, AIFeatureCard } from './DocComponents'
+import { FeatureItem, AIFeatureCard } from './FeatureItems'
 import readmeData from '@/data/documentation/readme-data.json'
 
 const Sparkle = ({ size }: { size: number }) => <span style={{ fontSize: size }}>✨</span>

src/components/DocumentationView/RoadmapItem.tsx

@@ -0,0 +1,27 @@
+import { Card, CardContent } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+
+export function RoadmapItem({ status, title, description, version }: {
+  status: 'completed' | 'planned'
+  title: string
+  description: string
+  version: string
+}) {
+  return (
+    <Card className={status === 'completed' ? 'bg-green-500/5 border-green-500/20' : 'bg-muted/50'}>
+      <CardContent className="pt-4 pb-4">
+        <div className="flex items-start justify-between gap-4">
+          <div className="space-y-1 flex-1">
+            <div className="flex items-center gap-2">
+              <h4 className="font-semibold">{title}</h4>
+              <Badge variant={status === 'completed' ? 'default' : 'secondary'} className="text-xs">
+                {version}
+              </Badge>
+            </div>
+            <p className="text-sm text-muted-foreground">{description}</p>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

src/components/DocumentationView/RoadmapTab.tsx

@@ -0,0 +1,57 @@
+import { Separator } from '@/components/ui/separator'
+import { CheckCircle, Clock, MapPin } from '@phosphor-icons/react'
+import roadmapData from '@/data/documentation/roadmap-data.json'
+import { RoadmapItem } from './RoadmapItem'
+
+const sections = [
+  {
+    key: 'completed',
+    title: 'Completed Features',
+    icon: <CheckCircle size={24} weight="fill" className="text-green-500" />,
+    items: roadmapData.completed
+  },
+  {
+    key: 'planned',
+    title: 'Planned Features',
+    icon: <Clock size={24} weight="duotone" className="text-accent" />,
+    items: roadmapData.planned
+  }
+]
+
+export function RoadmapTab() {
+  return (
+    <div className="space-y-6">
+      <div className="space-y-4">
+        <h1 className="text-4xl font-bold flex items-center gap-3">
+          <MapPin size={36} weight="duotone" className="text-accent" />
+          {roadmapData.title}
+        </h1>
+        <p className="text-lg text-muted-foreground">{roadmapData.subtitle}</p>
+
+        <Separator />
+
+        <div className="space-y-6">
+          {sections.map((section) => (
+            <div key={section.key}>
+              <div className="flex items-center gap-3 mb-4">
+                {section.icon}
+                <h2 className="text-2xl font-semibold">{section.title}</h2>
+              </div>
+              <div className="space-y-3 ml-9">
+                {section.items.map((item) => (
+                  <RoadmapItem
+                    key={`${section.key}-${item.title}`}
+                    status={section.key === 'completed' ? 'completed' : 'planned'}
+                    title={item.title}
+                    description={item.description}
+                    version={item.version}
+                  />
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/DocumentationView/SassAnimationsCard.tsx

@@ -0,0 +1,21 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import sassData from '@/data/documentation/sass-data.json'
+import { AnimationItem } from './SassItems'
+
+export function SassAnimationsCard() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Animation Classes</CardTitle>
+        <CardDescription>Pre-built animation utilities</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
+          {sassData.animations.map((animation) => (
+            <AnimationItem key={animation.name} name={animation.name} description={animation.description} />
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

src/components/DocumentationView/SassBestPracticesCard.tsx

@@ -0,0 +1,26 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { CheckCircle, Target } from '@phosphor-icons/react'
+import sassData from '@/data/documentation/sass-data.json'
+
+export function SassBestPracticesCard() {
+  return (
+    <Card className="bg-muted/50">
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Target size={20} weight="duotone" />
+          Best Practices
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <ul className="space-y-2 text-sm">
+          {sassData.bestPractices.map((practice) => (
+            <li key={practice} className="flex items-start gap-2">
+              <CheckCircle size={16} className="text-accent mt-1 flex-shrink-0" weight="fill" />
+              <span>{practice}</span>
+            </li>
+          ))}
+        </ul>
+      </CardContent>
+    </Card>
+  )
+}

src/components/DocumentationView/SassComponentsCard.tsx

@@ -0,0 +1,26 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import sassData from '@/data/documentation/sass-data.json'
+import { SassComponentItem } from './SassItems'
+
+export function SassComponentsCard() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Available Components</CardTitle>
+        <CardDescription>Custom Material UI components built with Sass</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="grid gap-4 md:grid-cols-2">
+          {sassData.components.map((component) => (
+            <SassComponentItem
+              key={component.name}
+              name={component.name}
+              classes={component.classes}
+              description={component.description}
+            />
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

src/components/DocumentationView/SassFileStructureCard.tsx

@@ -0,0 +1,20 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import sassData from '@/data/documentation/sass-data.json'
+
+export function SassFileStructureCard() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>File Structure</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {sassData.fileStructure.map((item) => (
+          <div key={item.file} className="space-y-2">
+            <code className="text-sm font-mono text-accent">{item.file}</code>
+            <p className="text-sm text-muted-foreground ml-4">{item.description}</p>
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  )
+}

src/components/DocumentationView/SassItems.tsx

@@ -0,0 +1,22 @@
+export function SassComponentItem({ name, classes, description }: { name: string; classes: string[]; description: string }) {
+  return (
+    <div className="space-y-2 p-4 border rounded-lg bg-card">
+      <h4 className="font-semibold">{name}</h4>
+      <p className="text-sm text-muted-foreground">{description}</p>
+      <div className="space-y-1">
+        {classes.map((cls) => (
+          <code key={cls} className="text-xs font-mono text-accent block">{cls}</code>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export function AnimationItem({ name, description }: { name: string; description: string }) {
+  return (
+    <div className="space-y-1 p-3 border rounded-lg bg-card">
+      <code className="text-xs font-mono text-accent">{name}</code>
+      <p className="text-xs text-muted-foreground">{description}</p>
+    </div>
+  )
+}

src/components/DocumentationView/SassLayoutCard.tsx

@@ -0,0 +1,25 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Code } from '@phosphor-icons/react'
+import sassData from '@/data/documentation/sass-data.json'
+import { FeatureItem } from './FeatureItems'
+
+export function SassLayoutCard() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Layout Components</CardTitle>
+        <CardDescription>Sass-powered layout utilities</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {sassData.layoutComponents.map((item) => (
+          <FeatureItem
+            key={item.title}
+            icon={<Code size={18} />}
+            title={item.title}
+            description={item.description}
+          />
+        ))}
+      </CardContent>
+    </Card>
+  )
+}

src/components/DocumentationView/SassOverviewSection.tsx

@@ -0,0 +1,26 @@
+import { Separator } from '@/components/ui/separator'
+import { PaintBrush } from '@phosphor-icons/react'
+import sassData from '@/data/documentation/sass-data.json'
+
+export function SassOverviewSection() {
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center gap-4">
+        <div className="w-16 h-16 rounded-xl bg-gradient-to-br from-primary to-accent flex items-center justify-center">
+          <PaintBrush size={32} weight="duotone" className="text-white" />
+        </div>
+        <div>
+          <h1 className="text-4xl font-bold">{sassData.title}</h1>
+          <p className="text-lg text-muted-foreground">{sassData.subtitle}</p>
+        </div>
+      </div>
+
+      <Separator />
+
+      <div className="space-y-4">
+        <h2 className="text-2xl font-semibold">Overview</h2>
+        <p className="text-foreground/90 leading-relaxed">{sassData.overview}</p>
+      </div>
+    </div>
+  )
+}

src/components/DocumentationView/SassQuickStartCard.tsx

@@ -0,0 +1,30 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Separator } from '@/components/ui/separator'
+import { Rocket } from '@phosphor-icons/react'
+import sassData from '@/data/documentation/sass-data.json'
+
+export function SassQuickStartCard() {
+  return (
+    <Card className="bg-accent/5 border-accent/20">
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Rocket size={20} weight="duotone" />
+          Quick Start Example
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-2">
+          <h3 className="font-semibold">{sassData.quickStart.components.title}</h3>
+          <pre className="custom-mui-code-block">{sassData.quickStart.components.code}</pre>
+        </div>
+
+        <Separator />
+
+        <div className="space-y-2">
+          <h3 className="font-semibold">{sassData.quickStart.mixins.title}</h3>
+          <pre className="custom-mui-code-block">{sassData.quickStart.mixins.code}</pre>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

src/components/DocumentationView/SassTab.tsx

@@ -0,0 +1,23 @@
+import { SassAnimationsCard } from './SassAnimationsCard'
+import { SassBestPracticesCard } from './SassBestPracticesCard'
+import { SassComponentsCard } from './SassComponentsCard'
+import { SassFileStructureCard } from './SassFileStructureCard'
+import { SassLayoutCard } from './SassLayoutCard'
+import { SassOverviewSection } from './SassOverviewSection'
+import { SassQuickStartCard } from './SassQuickStartCard'
+import { SassUtilitiesCard } from './SassUtilitiesCard'
+
+export function SassTab() {
+  return (
+    <div className="space-y-6">
+      <SassOverviewSection />
+      <SassFileStructureCard />
+      <SassComponentsCard />
+      <SassLayoutCard />
+      <SassUtilitiesCard />
+      <SassAnimationsCard />
+      <SassQuickStartCard />
+      <SassBestPracticesCard />
+    </div>
+  )
+}

src/components/DocumentationView/SassUtilitiesCard.tsx

@@ -0,0 +1,33 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Separator } from '@/components/ui/separator'
+import { Lightbulb } from '@phosphor-icons/react'
+import sassData from '@/data/documentation/sass-data.json'
+
+export function SassUtilitiesCard() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Sass Utilities & Mixins</CardTitle>
+        <CardDescription>Reusable functions for custom styling</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-4">
+          {sassData.utilities.map((utility, index) => (
+            <div key={utility.title} className="space-y-2">
+              <h3 className="font-semibold flex items-center gap-2">
+                <Lightbulb size={18} weight="duotone" className="text-accent" />
+                {utility.title}
+              </h3>
+              <div className="ml-6 space-y-2 text-sm">
+                <p className="font-mono text-accent">{utility.mixin}</p>
+                <p className="text-muted-foreground">{utility.description}</p>
+                <pre className="custom-mui-code-block text-xs mt-2">{utility.snippet}</pre>
+              </div>
+              {index < sassData.utilities.length - 1 && <Separator />}
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

src/data/documentation/agents-data.json

@@ -1,4 +1,6 @@
 {
+  "title": "Agents Files",
+  "subtitle": "AI agent configuration and service architecture",
   "overview": "CodeForge uses a modular AI service architecture that integrates OpenAI's GPT models across all features. Each designer has specialized prompts and validation logic to ensure high-quality generated code.",
   "coreServices": [
     {

src/data/documentation/cicd-data.json

@@ -53,62 +53,66 @@
       ]
     }
   ],
-  "pipelineStages": [
-    {
-      "stage": "Lint",
-      "description": "ESLint and TypeScript type checking to ensure code quality",
-      "duration": "~1-2 min"
-    },
-    {
-      "stage": "Test",
-      "description": "Unit tests with coverage reporting and result artifacts",
-      "duration": "~2-3 min"
-    },
-    {
-      "stage": "Build",
-      "description": "Production build with artifact generation for deployment",
-      "duration": "~2-4 min"
-    },
-    {
-      "stage": "E2E Tests",
-      "description": "Playwright end-to-end tests with HTML reports",
-      "duration": "~3-5 min"
-    },
-    {
-      "stage": "Security",
-      "description": "npm audit and Trivy vulnerability scanning",
-      "duration": "~1-2 min"
-    },
-    {
-      "stage": "Docker Build",
-      "description": "Multi-stage Docker image build and push to registry",
-      "duration": "~3-5 min"
-    },
-    {
-      "stage": "Deploy",
-      "description": "Automated deployment to staging and production environments",
-      "duration": "~1-3 min"
-    }
-  ],
-  "dockerConfig": {
+  "pipeline": {
+    "intro": "All CI/CD configurations follow a similar multi-stage pipeline structure:",
+    "stages": [
+      {
+        "stage": "Lint",
+        "description": "ESLint and TypeScript type checking to ensure code quality",
+        "duration": "~1-2 min"
+      },
+      {
+        "stage": "Test",
+        "description": "Unit tests with coverage reporting and result artifacts",
+        "duration": "~2-3 min"
+      },
+      {
+        "stage": "Build",
+        "description": "Production build with artifact generation for deployment",
+        "duration": "~2-4 min"
+      },
+      {
+        "stage": "E2E Tests",
+        "description": "Playwright end-to-end tests with HTML reports",
+        "duration": "~3-5 min"
+      },
+      {
+        "stage": "Security",
+        "description": "npm audit and Trivy vulnerability scanning",
+        "duration": "~1-2 min"
+      },
+      {
+        "stage": "Docker Build",
+        "description": "Multi-stage Docker image build and push to registry",
+        "duration": "~3-5 min"
+      },
+      {
+        "stage": "Deploy",
+        "description": "Automated deployment to staging and production environments",
+        "duration": "~1-3 min"
+      }
+    ]
+  },
+  "docker": {
     "files": [
       {
-        "file": "Dockerfile",
+        "name": "Dockerfile",
         "description": "Multi-stage build with Node.js builder and Nginx runtime"
       },
       {
-        "file": "nginx.conf",
+        "name": "nginx.conf",
         "description": "Production Nginx configuration with health checks and caching"
       },
       {
-        "file": "docker-compose.yml",
+        "name": "docker-compose.yml",
         "description": "Local development and deployment orchestration"
       },
       {
-        "file": ".dockerignore",
+        "name": ".dockerignore",
         "description": "Optimized build context by excluding unnecessary files"
       }
     ],
+    "commands": "# Build image locally\ndocker build -t codeforge:local .\n\n# Run container\ndocker run -p 3000:80 codeforge:local\n\n# Use docker-compose\ndocker-compose up -d\n\n# Pull from registry\ndocker pull ghcr.io/<username>/<repo>:latest",
     "features": [
       "Multi-stage build reduces final image size to ~50MB",
       "Nginx serves static files with gzip compression",
@@ -121,54 +125,54 @@
     {
       "variable": "NODE_VERSION",
       "description": "Node.js version (default: 20)",
-      "required": false
+      "required": "No"
     },
     {
       "variable": "REGISTRY",
       "description": "Docker registry URL (default: ghcr.io)",
-      "required": false
+      "required": "No"
     },
     {
       "variable": "STAGING_WEBHOOK_URL",
       "description": "Webhook for staging deployments",
-      "required": false
+      "required": "Optional"
     },
     {
       "variable": "PRODUCTION_WEBHOOK_URL",
       "description": "Webhook for production deployments",
-      "required": false
+      "required": "Optional"
     },
     {
       "variable": "CODECOV_TOKEN",
       "description": "Codecov integration token",
-      "required": false
+      "required": "Optional"
     },
     {
       "variable": "SLACK_WEBHOOK",
       "description": "Slack webhook for notifications",
-      "required": false
+      "required": "Optional"
     }
   ],
-  "branchStrategy": [
+  "branches": [
     {
-      "branch": "main",
+      "name": "main",
       "description": "Production branch - deploys to production environment (manual approval required)",
-      "color": "green"
+      "tone": "green"
     },
     {
-      "branch": "develop",
+      "name": "develop",
       "description": "Development branch - automatically deploys to staging environment",
-      "color": "blue"
+      "tone": "blue"
     },
     {
-      "branch": "feature/*",
+      "name": "feature/*",
       "description": "Feature branches - runs tests only, no deployment",
-      "color": "purple"
+      "tone": "purple"
     },
     {
-      "branch": "v* tags",
+      "name": "v* tags",
       "description": "Version tags - triggers release workflow with artifacts and changelog",
-      "color": "orange"
+      "tone": "orange"
     }
   ],
   "quickStart": [
@@ -203,25 +207,25 @@
     "Use semantic versioning for releases (v1.0.0, v1.1.0, etc.)",
     "Configure Slack or email notifications for deployment status"
   ],
-  "additionalResources": [
+  "resources": [
     {
-      "file": "CI_CD_GUIDE.md",
+      "label": "CI_CD_GUIDE.md",
       "description": "Detailed setup guide for all platforms"
     },
     {
-      "file": ".github/workflows/",
+      "label": ".github/workflows/",
       "description": "GitHub Actions workflows"
     },
     {
-      "file": ".gitlab-ci.yml",
+      "label": ".gitlab-ci.yml",
       "description": "GitLab CI configuration"
     },
     {
-      "file": "Jenkinsfile",
+      "label": "Jenkinsfile",
       "description": "Jenkins pipeline definition"
     },
     {
-      "file": ".circleci/config.yml",
+      "label": ".circleci/config.yml",
       "description": "CircleCI configuration"
     }
   ]

src/data/documentation/pwa-data.json

@@ -31,7 +31,7 @@
   "installation": {
     "desktop": [
       {
-        "platform": "Chrome/Edge/Brave",
+        "title": "Chrome/Edge/Brave:",
         "steps": [
           "Look for install icon (⊕) in address bar",
           "Click \"Install\" or use prompt in app",
@@ -39,7 +39,7 @@
         ]
       },
       {
-        "platform": "Safari (macOS)",
+        "title": "Safari (macOS):",
         "steps": [
           "Click File → Add to Dock",
           "App appears in Dock"
@@ -48,15 +48,15 @@
     ],
     "mobile": [
       {
-        "platform": "iOS (Safari)",
+        "title": "iOS (Safari):",
         "steps": [
           "Tap Share button",
           "Select \"Add to Home Screen\"",
-          "Confirm installation"
+          "Tap \"Add\""
         ]
       },
       {
-        "platform": "Android (Chrome)",
+        "title": "Android (Chrome):",
         "steps": [
           "Tap menu (three dots)",
           "Select \"Install app\"",
@@ -87,7 +87,7 @@
       "description": "Install pending updates when new versions are available"
     }
   ],
-  "offlineCapabilities": {
+  "offline": {
     "worksOffline": [
       "View and edit existing projects",
       "Browse files and code",

src/data/documentation/roadmap-data.json

@@ -1,4 +1,6 @@
 {
+  "title": "Product Roadmap",
+  "subtitle": "Features delivered and planned for CodeForge development",
   "completed": [
     {
       "title": "Monaco Code Editor Integration",

src/data/documentation/sass-data.json

@@ -27,7 +27,13 @@
   "components": [
     {
       "name": "Buttons",
-      "classes": ["mui-custom-button--primary", "mui-custom-button--secondary", "mui-custom-button--accent", "mui-custom-button--outline", "mui-custom-button--ghost"],
+      "classes": [
+        "mui-custom-button--primary",
+        "mui-custom-button--secondary",
+        "mui-custom-button--accent",
+        "mui-custom-button--outline",
+        "mui-custom-button--ghost"
+      ],
       "description": "Custom styled buttons with hover effects and variants"
     },
     {
@@ -78,56 +84,62 @@
   ],
   "layoutComponents": [
     {
-      "name": "custom-mui-container",
+      "title": "custom-mui-container",
       "description": "Max-width container with responsive padding"
     },
     {
-      "name": "custom-mui-grid",
+      "title": "custom-mui-grid",
       "description": "CSS Grid layouts with responsive columns (--cols-1 to --cols-12, --responsive)"
     },
     {
-      "name": "custom-mui-flex",
+      "title": "custom-mui-flex",
       "description": "Flexbox utilities (--row, --col, --wrap, --center, --between, --around)"
     },
     {
-      "name": "custom-mui-stack",
+      "title": "custom-mui-stack",
       "description": "Vertical/horizontal stacks with configurable gaps"
     },
     {
-      "name": "custom-mui-surface",
+      "title": "custom-mui-surface",
       "description": "Interactive surfaces with elevation and hover effects"
     }
   ],
   "utilities": [
     {
-      "name": "@include respond-to($breakpoint)",
+      "title": "Responsive Design",
+      "mixin": "@include respond-to($breakpoint)",
       "description": "Generate media queries for xs, sm, md, lg, xl, 2xl breakpoints",
-      "example": "@include respond-to('lg') {\n  padding: 2rem;\n}"
+      "snippet": "@include respond-to('lg') {\n  padding: 2rem;\n}"
     },
     {
-      "name": "@include elevation($level)",
+      "title": "Elevation & Shadows",
+      "mixin": "@include elevation($level)",
       "description": "Apply box shadows with levels 1-4",
-      "example": "@include elevation(2);"
+      "snippet": "@include elevation(2);"
     },
     {
-      "name": "@include glassmorphism($blur, $opacity)",
+      "title": "Glassmorphism",
+      "mixin": "@include glassmorphism($blur, $opacity)",
       "description": "Create frosted glass effects with backdrop blur",
-      "example": "@include glassmorphism(16px, 0.1);"
+      "snippet": "@include glassmorphism(16px, 0.1);"
     },
     {
-      "name": "get-color($palette, $shade)",
+      "title": "Color Functions",
+      "mixin": "get-color($palette, $shade)",
       "description": "Access colors from predefined palettes (primary, secondary, accent, success, error, warning)",
-      "example": "color: get-color('primary', 500);"
+      "snippet": "color: get-color('primary', 500);"
     },
     {
-      "name": "@include truncate($lines)",
+      "title": "Text Truncation",
+      "mixin": "@include truncate($lines)",
       "description": "Truncate text with ellipsis after specified lines",
-      "example": "@include truncate(2);"
+      "snippet": "@include truncate(2);"
     },
     {
-      "name": "@include show-scrollbar($track, $thumb)",
+      "title": "Custom Scrollbars",
+      "mixin": "@include show-scrollbar($track, $thumb)",
       "description": "Style webkit scrollbars with custom colors",
-      "example": "@include show-scrollbar(rgba(0,0,0,0.1), rgba(0,0,0,0.3));"
+      "snippet": "@include show-scrollbar(rgba(0,0,0,0.1), rgba(0,0,0,0.3));"
     }
   ],
   "animations": [
@@ -142,6 +154,16 @@
     { "name": "animate-float", "description": "Floating up and down" },
     { "name": "animate-glow", "description": "Glowing shadow effect" }
   ],
+  "quickStart": {
+    "components": {
+      "title": "Using Custom Components",
+      "code": "import './styles/main.scss'\n\nfunction MyComponent() {\n  return (\n    <div className=\"custom-mui-container\">\n      <div className=\"custom-mui-grid custom-mui-grid--cols-3\">\n        <div className=\"mui-custom-card\">\n          <h3>Card Title</h3>\n          <p>Card content</p>\n          <button className=\"mui-custom-button mui-custom-button--primary\">\n            Click Me\n          </button>\n        </div>\n      </div>\n    </div>\n  )\n}"
+    },
+    "mixins": {
+      "title": "Creating Custom Styles with Mixins",
+      "code": "@use './styles/utilities' as *;\n@use './styles/variables' as *;\n\n.my-custom-component {\n  @include elevation(2);\n  @include responsive-padding(spacing('6'));\n  background: get-color('primary', 500);\n  \n  @include respond-to('md') {\n    @include elevation(3);\n  }\n  \n  &:hover {\n    @include glassmorphism(12px, 0.15);\n  }\n}"
+    }
+  },
   "bestPractices": [
     "Import main.scss in your index.css to access all Sass components and utilities",
     "Use @use instead of @import for better module encapsulation",