feat(help): Add Time Blocks section to comprehensive help docs

- Add Time Blocks section to HelpComprehensive.tsx with block levels,
  types, recurrence patterns, and key features documentation
- Add complete helpComprehensive translations for en, es, fr, de
- Update HelpContracts.tsx styling
- Enhance FeaturesPage.tsx and HomePage.tsx

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

frontend/src/pages/marketing/FeaturesPage.tsx

@@ -7,7 +7,10 @@ import {
   Server,
   Database,
   Lock,
-  CheckCircle2
+  CheckCircle2,
+  FileSignature,
+  FileCheck,
+  Scale
 } from 'lucide-react';
 import CodeBlock from '../../components/marketing/CodeBlock';
 import CTASection from '../../components/marketing/CTASection';
@@ -153,6 +156,95 @@ def execute(context):
         </div>
       </section>
 
+      {/* Feature 3: Digital Contracts */}
+      <section className="py-20 bg-gray-50 dark:bg-gray-800/50">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="grid lg:grid-cols-2 gap-16 items-center">
+            <div>
+              <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-teal-100 dark:bg-teal-900/30 text-teal-600 dark:text-teal-400 text-sm font-medium mb-6">
+                <Scale className="w-4 h-4" />
+                <span>{t('marketing.features.contracts.badge')}</span>
+              </div>
+              <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-6">
+                {t('marketing.features.contracts.title')}
+              </h2>
+              <p className="text-lg text-gray-600 dark:text-gray-400 mb-8">
+                {t('marketing.features.contracts.description')}
+              </p>
+
+              <ul className="space-y-4">
+                {[
+                  t('marketing.features.contracts.features.templates'),
+                  t('marketing.features.contracts.features.eSignature'),
+                  t('marketing.features.contracts.features.auditTrail'),
+                  t('marketing.features.contracts.features.pdfGeneration')
+                ].map((item) => (
+                  <li key={item} className="flex items-center gap-3">
+                    <CheckCircle2 className="w-5 h-5 text-green-500" />
+                    <span className="text-gray-700 dark:text-gray-300">{item}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+
+            <div className="relative">
+              <div className="absolute -inset-4 bg-teal-500/20 rounded-3xl blur-2xl" />
+              <div className="relative rounded-2xl bg-gray-900 border border-gray-800 p-8 overflow-hidden">
+                <div className="space-y-6">
+                  {/* Contract Preview Mock */}
+                  <div className="p-4 bg-white dark:bg-gray-100 rounded-lg">
+                    <div className="flex items-center gap-3 mb-4">
+                      <FileSignature className="w-8 h-8 text-teal-600" />
+                      <div>
+                        <div className="text-sm font-semibold text-gray-900">Service Agreement</div>
+                        <div className="text-xs text-gray-500">Awaiting signature</div>
+                      </div>
+                    </div>
+                    <div className="h-2 w-full bg-gray-200 rounded mb-2" />
+                    <div className="h-2 w-3/4 bg-gray-200 rounded mb-2" />
+                    <div className="h-2 w-5/6 bg-gray-200 rounded" />
+                  </div>
+
+                  {/* Compliance Badge */}
+                  <div className="flex items-center justify-between p-4 bg-gray-800 rounded-lg border border-gray-700">
+                    <div className="flex items-center gap-3">
+                      <FileCheck className="w-6 h-6 text-green-400" />
+                      <span className="text-sm text-gray-300">ESIGN Act Compliant</span>
+                    </div>
+                    <CheckCircle2 className="w-5 h-5 text-green-500" />
+                  </div>
+
+                  <div className="grid grid-cols-2 gap-4">
+                    <div className="flex gap-4">
+                      <div className="p-2 bg-teal-900/30 rounded-lg text-teal-400 h-fit">
+                        <Scale className="w-6 h-6" />
+                      </div>
+                      <div>
+                        <h3 className="font-semibold text-white text-sm mb-1">{t('marketing.features.contracts.compliance.title')}</h3>
+                        <p className="text-xs text-gray-400">
+                          {t('marketing.features.contracts.compliance.description')}
+                        </p>
+                      </div>
+                    </div>
+                    <div className="flex gap-4">
+                      <div className="p-2 bg-purple-900/30 rounded-lg text-purple-400 h-fit">
+                        <Zap className="w-6 h-6" />
+                      </div>
+                      <div>
+                        <h3 className="font-semibold text-white text-sm mb-1">{t('marketing.features.contracts.automation.title')}</h3>
+                        <p className="text-xs text-gray-400">
+                          {t('marketing.features.contracts.automation.description')}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
       <CTASection />
     </div>
   );