feat: implement hybrid database architecture and frontend encryption

- Add PostgreSQL + SQLite hybrid database support with automatic switching
- Implement frontend AES-GCM + RSA-OAEP encryption for sensitive data
- Add comprehensive DatabaseInterface with all required methods
- Fix compilation issues with interface consistency
- Update all database method signatures to use DatabaseInterface
- Add missing UpdateTraderInitialBalance method to PostgreSQL implementation
- Integrate RSA public key distribution via /api/config endpoint
- Add frontend crypto service with proper error handling
- Support graceful degradation between encrypted and plaintext transmission
- Add directory creation for RSA keys and PEM parsing fixes
- Test both SQLite and PostgreSQL modes successfully
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: tinkle-community <tinklefund@gmail.com>

web/src/components/landing/FeaturesSection.tsx

@@ -10,61 +10,78 @@ interface FeaturesSectionProps {
 
 export default function FeaturesSection({ language }: FeaturesSectionProps) {
   return (
-    <AnimatedSection id='features'>
-      <div className='max-w-7xl mx-auto'>
-        <motion.div className='text-center mb-16' initial={{ opacity: 0, y: 30 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }}>
+    <AnimatedSection id="features">
+      <div className="max-w-7xl mx-auto">
+        <motion.div
+          className="text-center mb-16"
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+        >
           <motion.div
-            className='inline-flex items-center gap-2 px-4 py-2 rounded-full mb-6'
-            style={{ background: 'rgba(240, 185, 11, 0.1)', border: '1px solid rgba(240, 185, 11, 0.2)' }}
+            className="inline-flex items-center gap-2 px-4 py-2 rounded-full mb-6"
+            style={{
+              background: 'rgba(240, 185, 11, 0.1)',
+              border: '1px solid rgba(240, 185, 11, 0.2)',
+            }}
             whileHover={{ scale: 1.05 }}
           >
-            <Rocket className='w-4 h-4' style={{ color: 'var(--brand-yellow)' }} />
-            <span className='text-sm font-semibold' style={{ color: 'var(--brand-yellow)' }}>
+            <Rocket
+              className="w-4 h-4"
+              style={{ color: 'var(--brand-yellow)' }}
+            />
+            <span
+              className="text-sm font-semibold"
+              style={{ color: 'var(--brand-yellow)' }}
+            >
               {t('coreFeatures', language)}
             </span>
           </motion.div>
-          <h2 className='text-4xl font-bold mb-4' style={{ color: 'var(--brand-light-gray)' }}>
+          <h2
+            className="text-4xl font-bold mb-4"
+            style={{ color: 'var(--brand-light-gray)' }}
+          >
             {t('whyChooseNofx', language)}
           </h2>
-          <p className='text-lg' style={{ color: 'var(--text-secondary)' }}>
+          <p className="text-lg" style={{ color: 'var(--text-secondary)' }}>
             {t('openCommunityDriven', language)}
           </p>
         </motion.div>
 
-        <div className='grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto'>
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto">
           <CryptoFeatureCard
-            icon={<Code className='w-8 h-8' />}
+            icon={<Code className="w-8 h-8" />}
             title={t('openSourceSelfHosted', language)}
             description={t('openSourceDesc', language)}
             features={[
               t('openSourceFeatures1', language),
               t('openSourceFeatures2', language),
               t('openSourceFeatures3', language),
-              t('openSourceFeatures4', language)
+              t('openSourceFeatures4', language),
             ]}
             delay={0}
           />
           <CryptoFeatureCard
-            icon={<Cpu className='w-8 h-8' />}
+            icon={<Cpu className="w-8 h-8" />}
             title={t('multiAgentCompetition', language)}
             description={t('multiAgentDesc', language)}
             features={[
               t('multiAgentFeatures1', language),
               t('multiAgentFeatures2', language),
               t('multiAgentFeatures3', language),
-              t('multiAgentFeatures4', language)
+              t('multiAgentFeatures4', language),
             ]}
             delay={0.1}
           />
           <CryptoFeatureCard
-            icon={<Lock className='w-8 h-8' />}
+            icon={<Lock className="w-8 h-8" />}
             title={t('secureReliableTrading', language)}
             description={t('secureDesc', language)}
             features={[
               t('secureFeatures1', language),
               t('secureFeatures2', language),
               t('secureFeatures3', language),
-              t('secureFeatures4', language)
+              t('secureFeatures4', language),
             ]}
             delay={0.2}
           />
@@ -73,4 +90,3 @@ export default function FeaturesSection({ language }: FeaturesSectionProps) {
     </AnimatedSection>
   )
 }
-