Develop

README.md

@@ -2,7 +2,6 @@
 
 > Professional multilingual AI-first platform with advanced LangChain-based agent orchestration, emotional intelligence, and real-time customer support de-escalation.
 
-[![Built with bolt.new](https://img.shields.io/badge/Built%20with-bolt.new-blue?style=for-the-badge)](https://bolt.new)
 [![Powered by Supabase](https://img.shields.io/badge/Powered%20by-Supabase-green?style=for-the-badge)](https://supabase.com)
 [![LangChain Integration](https://img.shields.io/badge/LangChain-Orchestration-orange?style=for-the-badge)](https://langchain.com)
 [![Hosted on Netlify](https://img.shields.io/badge/Hosted%20on-Netlify-00C7B7?style=for-the-badge)](https://netlify.com)
@@ -375,7 +374,6 @@ We welcome contributions to improve the LangChain AI Agent Orchestration system!
 We're grateful to our amazing sponsors who make this LangChain-powered platform possible:
 
 ### 🥇 **Platinum Sponsors**
-- **[bolt.new](https://bolt.new)** - AI-powered development platform
 - **[Supabase](https://supabase.com)** - Backend infrastructure and conversation memory
 - **[ElevenLabs](https://elevenlabs.io)** - Voice AI and emotion detection
 - **[Tavus](https://tavus.io)** - AI avatar generation and video synthesis

apps/backend-api/package.json

@@ -37,14 +37,12 @@
   },
   "devDependencies": {
     "@types/cors": "^2.8.17",
-    "@types/dotenv": "^8.2.3",
     "@types/express": "^4.17.21",
     "@types/multer": "^1.4.13",
     "@types/node": "^20.8.0",
-    "dotenv-cli": "^7.3.0",
     "eslint": "^8.57.0",
     "jest": "^29.7.0",
-    "tsx": "^4.0.0",
+    "tsx": "^4.20.3",
     "typescript": "^5.2.2"
   }
 }

apps/web-frontend/package.json

@@ -44,13 +44,14 @@
     "zustand": "^4.4.0"
   },
   "devDependencies": {
-    "@types/dotenv": "^8.2.3",
     "@types/node": "^20.8.0",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.1",
     "@types/uuid": "^10.0.0",
     "@vitejs/plugin-react": "^4.2.0",
     "autoprefixer": "^10.4.21",
+    "eslint": "^8.57.0",
+    "jest": "^29.7.0",
     "postcss": "^8.5.4",
     "tailwindcss": "^3.4.17",
     "typescript": "^5.2.2",

apps/web-frontend/src/components/AgentCard.tsx

@@ -22,21 +22,18 @@ const AgentCard: React.FC<AgentCardProps> = ({
       initial={{ opacity: 0, y: 20 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ duration: 0.5 }}
-      className="relative p-6 bg-white/5 backdrop-blur-md border border-white/10 rounded-xl overflow-hidden group hover:border-white/20 transition-all duration-300"
+      className="relative dashboard-container p-6 group"
     >
-      {/* Background Gradient */}
-      <div className="absolute inset-0 bg-gradient-to-br from-purple-500/10 to-blue-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
-
       {/* Content */}
       <div className="relative z-10">
         {/* Icon */}
-        <div className={`w-12 h-12 rounded-xl bg-gradient-to-r ${color} flex items-center justify-center mb-4`}>
+        <div className={`dashboard-icon-container w-12 h-12 rounded-xl bg-gradient-to-r ${color} flex items-center justify-center mb-4`}>
           <Icon className="w-6 h-6 text-white" />
         </div>
 
         {/* Title & Description */}
-        <h3 className="text-xl font-bold text-white mb-2">{name}</h3>
-        <p className="text-gray-400 mb-4">{description}</p>
+        <h3 className="text-xl font-bold text-white mb-2 text-shadow">{name}</h3>
+        <p className="text-gray-300 mb-4">{description}</p>
 
         {/* Capabilities */}
         <div className="space-y-2">

apps/web-frontend/src/components/AgentContact.tsx

@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { motion } from 'framer-motion';
-import { Send } from 'lucide-react';
+import { Send, User, Mail, Building, MessageSquare } from 'lucide-react';
 
 const AgentContact = () => {
   const [formData, setFormData] = useState({
@@ -25,18 +25,27 @@ const AgentContact = () => {
   };
 
   return (
-    <div className="relative p-8 bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl overflow-hidden">
-      {/* Background Gradient */}
-      <div className="absolute inset-0 bg-gradient-to-br from-purple-500/10 to-blue-500/10 opacity-50"></div>
+    <div className="dashboard-container">
+      {/* Distributed ambient lighting */}
+      <div className="absolute inset-0 bg-gradient-to-br from-purple-500/5 via-transparent to-blue-500/5 pointer-events-none" />
+      <div className="absolute top-4 right-4 w-32 h-32 bg-purple-500/10 rounded-full blur-3xl" />
+      <div className="absolute bottom-4 left-4 w-24 h-24 bg-blue-500/10 rounded-full blur-2xl" />
 
-      {/* Content */}
       <div className="relative z-10">
-        <h3 className="text-2xl font-bold text-white mb-6">Get in Touch</h3>
+        <div className="flex items-center gap-3 mb-6">
+          <div className="dashboard-icon-container p-3">
+            <MessageSquare className="w-6 h-6 text-white" />
+          </div>
+          <h3 className="text-2xl font-bold text-white">Get in Touch</h3>
+        </div>
 
         <form onSubmit={handleSubmit} className="space-y-6">
           {/* Name */}
           <div>
-            <label htmlFor="name" className="block text-sm font-medium text-gray-300 mb-2">
+            <label htmlFor="name" className="flex items-center gap-2 text-sm font-medium text-gray-300 mb-3">
+              <div className="dashboard-icon-container p-1.5">
+                <User className="w-4 h-4 text-white" />
+              </div>
               Name
             </label>
             <input
@@ -45,15 +54,18 @@ const AgentContact = () => {
               name="name"
               value={formData.name}
               onChange={handleChange}
-              className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-purple-500 transition-colors"
+              className="w-full px-4 py-3 bg-black/20 border border-white/10 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-purple-500/50 focus:ring-1 focus:ring-purple-500/20 transition-all duration-300 backdrop-blur-sm"
               placeholder="Your name"
               required
             />
           </div>
 
           {/* Email */}
           <div>
-            <label htmlFor="email" className="block text-sm font-medium text-gray-300 mb-2">
+            <label htmlFor="email" className="flex items-center gap-2 text-sm font-medium text-gray-300 mb-3">
+              <div className="dashboard-icon-container p-1.5">
+                <Mail className="w-4 h-4 text-white" />
+              </div>
               Email
             </label>
             <input
@@ -62,15 +74,18 @@ const AgentContact = () => {
               name="email"
               value={formData.email}
               onChange={handleChange}
-              className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-purple-500 transition-colors"
+              className="w-full px-4 py-3 bg-black/20 border border-white/10 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-purple-500/50 focus:ring-1 focus:ring-purple-500/20 transition-all duration-300 backdrop-blur-sm"
               placeholder="your@email.com"
               required
             />
           </div>
 
           {/* Company */}
           <div>
-            <label htmlFor="company" className="block text-sm font-medium text-gray-300 mb-2">
+            <label htmlFor="company" className="flex items-center gap-2 text-sm font-medium text-gray-300 mb-3">
+              <div className="dashboard-icon-container p-1.5">
+                <Building className="w-4 h-4 text-white" />
+              </div>
               Company
             </label>
             <input
@@ -79,14 +94,17 @@ const AgentContact = () => {
               name="company"
               value={formData.company}
               onChange={handleChange}
-              className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-purple-500 transition-colors"
+              className="w-full px-4 py-3 bg-black/20 border border-white/10 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-purple-500/50 focus:ring-1 focus:ring-purple-500/20 transition-all duration-300 backdrop-blur-sm"
               placeholder="Your company"
             />
           </div>
 
           {/* Message */}
           <div>
-            <label htmlFor="message" className="block text-sm font-medium text-gray-300 mb-2">
+            <label htmlFor="message" className="flex items-center gap-2 text-sm font-medium text-gray-300 mb-3">
+              <div className="dashboard-icon-container p-1.5">
+                <MessageSquare className="w-4 h-4 text-white" />
+              </div>
               Message
             </label>
             <textarea
@@ -95,7 +113,7 @@ const AgentContact = () => {
               value={formData.message}
               onChange={handleChange}
               rows={4}
-              className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-purple-500 transition-colors resize-none"
+              className="w-full px-4 py-3 bg-black/20 border border-white/10 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-purple-500/50 focus:ring-1 focus:ring-purple-500/20 transition-all duration-300 resize-none backdrop-blur-sm"
               placeholder="How can we help you?"
               required
             />
@@ -106,10 +124,12 @@ const AgentContact = () => {
             whileHover={{ scale: 1.02 }}
             whileTap={{ scale: 0.98 }}
             type="submit"
-            className="w-full px-8 py-3 bg-gradient-to-r from-purple-500 to-blue-500 text-white rounded-lg font-semibold hover:opacity-90 transition-opacity flex items-center justify-center gap-2"
+            className="group w-full px-8 py-4 border border-white/20 rounded-lg font-semibold bg-black/20 backdrop-blur-sm hover:border-white/30 hover:bg-black/30 transition-all duration-300 flex items-center justify-center gap-3"
           >
-            Send Message
-            <Send className="w-4 h-4" />
+            <div className="dashboard-icon-container p-2 group-hover:border-white/30">
+              <Send className="w-4 h-4 text-white" />
+            </div>
+            <span className="text-white">Send Message</span>
           </motion.button>
         </form>
       </div>

apps/web-frontend/src/components/AgentFAQ.tsx

@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import { ChevronDown } from 'lucide-react';
+import { ChevronDown, HelpCircle } from 'lucide-react';
 
 const AgentFAQ = () => {
   const [openIndex, setOpenIndex] = useState<number | null>(null);
@@ -31,21 +31,37 @@ const AgentFAQ = () => {
   return (
     <div className="space-y-4">
       {faqs.map((faq, index) => (
-        <div
+        <motion.div
           key={index}
-          className="relative bg-white/5 backdrop-blur-md border border-white/10 rounded-xl overflow-hidden"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: index * 0.1 }}
+          className="group relative border border-white/10 rounded-xl bg-black/20 backdrop-blur-sm overflow-hidden hover:border-white/20 transition-all duration-300"
         >
+          {/* Background gradient on hover */}
+          <div className="absolute inset-0 bg-gradient-to-r from-purple-500/5 to-blue-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+
           {/* Question */}
           <button
             onClick={() => setOpenIndex(openIndex === index ? null : index)}
-            className="w-full p-6 text-left flex items-center justify-between"
+            className="relative z-10 w-full p-6 text-left flex items-center gap-4"
           >
-            <span className="text-lg font-semibold text-white">{faq.question}</span>
-            <ChevronDown
-              className={`w-5 h-5 text-gray-400 transition-transform duration-300 ${
-                openIndex === index ? 'transform rotate-180' : ''
-              }`}
-            />
+            {/* Icon */}
+            <div className="dashboard-icon-container p-2 group-hover:border-white/30">
+              <HelpCircle className="w-5 h-5 text-white" />
+            </div>
+
+            {/* Content */}
+            <div className="flex-1 flex items-center justify-between">
+              <span className="text-lg font-semibold text-white">{faq.question}</span>
+              <div className="dashboard-icon-container p-2 group-hover:border-white/30">
+                <ChevronDown
+                  className={`w-4 h-4 text-white transition-transform duration-300 ${
+                    openIndex === index ? 'transform rotate-180' : ''
+                  }`}
+                />
+              </div>
+            </div>
           </button>
 
           {/* Answer */}
@@ -56,15 +72,15 @@ const AgentFAQ = () => {
                 animate={{ height: 'auto', opacity: 1 }}
                 exit={{ height: 0, opacity: 0 }}
                 transition={{ duration: 0.3 }}
-                className="overflow-hidden"
+                className="relative z-10 overflow-hidden"
               >
-                <div className="p-6 pt-0 text-gray-300">
+                <div className="px-6 pb-6 text-gray-300 ml-16">
                   {faq.answer}
                 </div>
               </motion.div>
             )}
           </AnimatePresence>
-        </div>
+        </motion.div>
       ))}
     </div>
   );

apps/web-frontend/src/components/DashboardPreview.tsx

@@ -1,13 +1,8 @@
-import React from 'react';
-import { motion } from 'framer-motion';
 import { Bot, MessageSquare, Zap, Shield } from 'lucide-react';
 
 const DashboardPreview = () => {
   return (
-    <div className="relative p-8 bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl overflow-hidden">
-      {/* Background Gradient */}
-      <div className="absolute inset-0 bg-gradient-to-br from-purple-500/10 to-blue-500/10 opacity-50"></div>
-
+    <div className="relative p-8 border-2 border-gray-600/30 rounded-2xl overflow-hidden hover:border-purple-500/50 hover:bg-gray-800/20 transition-all duration-300 hover:shadow-lg hover:shadow-purple-500/10">
       {/* Content */}
       <div className="relative z-10">
         <h3 className="text-2xl font-bold text-white mb-6">Dashboard Preview</h3>
@@ -22,10 +17,12 @@ const DashboardPreview = () => {
           ].map((stat, index) => (
             <div
               key={index}
-              className="p-4 bg-white/5 rounded-xl border border-white/10"
+              className="p-4 border-2 border-gray-600/30 rounded-xl hover:border-purple-500/50 hover:bg-gray-800/20 transition-all duration-300"
             >
               <div className="flex items-center gap-3 mb-2">
-                <stat.icon className="w-5 h-5 text-purple-400" />
+                <div className="border-2 border-purple-500/30 rounded-lg p-1">
+                  <stat.icon className="w-5 h-5 text-purple-400" />
+                </div>
                 <span className="text-gray-400 text-sm">{stat.label}</span>
               </div>
               <div className="text-2xl font-bold text-white">{stat.value}</div>
@@ -58,7 +55,7 @@ const DashboardPreview = () => {
           ].map((activity, index) => (
             <div
               key={index}
-              className="p-4 bg-white/5 rounded-xl border border-white/10 flex items-center justify-between"
+              className="p-4 border-2 border-gray-600/30 rounded-xl hover:border-purple-500/50 hover:bg-gray-800/20 transition-all duration-300 flex items-center justify-between"
             >
               <div className="flex items-center gap-3">
                 <div className={`w-2 h-2 rounded-full ${