openml-stack · Barshan-Majumdar · Apr 12, 2026 · Apr 12, 2026 · Apr 12, 2026 · Apr 12, 2026
diff --git a/client/.env.example b/client/.env.example
@@ -1 +1,7 @@
-VITE_API_URL=http://localhost:8080 #backend url
+# ==========================================
+# Frontend Environment Variables (.env)
+# ==========================================
+# Note: Vite requires environment variables to be prefixed with 'VITE_'
+
+# The base URL for your Node.js backend API
+VITE_API_URL=http://localhost:8080
diff --git a/client/index.html b/client/index.html
@@ -4,6 +4,9 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/SentiLog.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
     <title>SentiLog-AI: AI-powered sentiment insights for your world</title>
   </head>
   <body>

diff --git a/client/src/components/About.jsx b/client/src/components/About.jsx
@@ -33,8 +33,8 @@ const About = () => {
             {/* Overview */}
             <h2
                 className={`relative z-10 text-5xl font-extrabold mb-8 text-center tracking-tight transition-colors duration-300 ${theme === "dark"
-                    ? "text-gray-100 bg-gradient-to-r from-purple-400 via-pink-500 to-blue-500 bg-clip-text text-transparent"
-                    : "text-gray-900 bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 bg-clip-text text-transparent"
+                    ? "text-gray-100 bg-gradient-to-r from-sky-400 via-blue-500 to-blue-500 bg-clip-text text-transparent"
+                    : "text-gray-900 bg-gradient-to-r from-sky-600 to-blue-700 dark:from-sky-700 dark:to-blue-800 bg-clip-text text-transparent"
                     }`}
                 data-aos="fade-left"
             >
@@ -83,13 +83,13 @@ const About = () => {
                         title: "📰 News Bias Filtering System",
                         desc: "Analyzes current news articles in real-time to detect political bias — Left, Right, or Neutral — enabling users to view multiple perspectives and make balanced judgments.",
                         gradientLight: "from-blue-400 to-blue-600",
-                        gradientDark: "from-purple-600 to-pink-500",
+                        gradientDark: "from-sky-600 to-blue-500",
                     },
                     {
                         title: "📓 Mood Journaling",
                         desc: "Track daily moods and emotions over time. AI-powered sentiment analysis uncovers patterns, emotional trends, and possible external influences.",
-                        gradientLight: "from-pink-400 to-pink-600",
-                        gradientDark: "from-purple-500 to-blue-600",
+                        gradientLight: "from-blue-400 to-blue-600",
+                        gradientDark: "from-sky-500 to-blue-600",
                     },
                 ].map(({ title, desc, gradientLight, gradientDark }, i) => (
                     <div

diff --git a/client/src/components/AnimatedBackground.jsx b/client/src/components/AnimatedBackground.jsx
@@ -5,7 +5,7 @@ const AnimatedBackground = ({ theme }) => (
     {/* Solid background */}
     <div 
       className={`absolute inset-0 w-full h-full transition-colors duration-300 ${
-        theme === 'dark' ? 'bg-gradient-to-br from-gray-900 via-slate-900 to-black' : 'bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50'
+        theme === 'dark' ? 'bg-slate-900' : 'bg-slate-100'
       }`}
     />
 

diff --git a/client/src/components/BackToTop.jsx b/client/src/components/BackToTop.jsx
@@ -22,7 +22,7 @@ const BackToTopButton = () => {
     return (
         <button
             onClick={scrollToTop}
-            className="fixed bottom-12 right-8 px-6 py-3 bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 text-white font-semibold rounded-full shadow-lg hover:scale-105 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-purple-300 z-50"
+            className="fixed bottom-12 right-8 px-6 py-3 bg-gradient-to-r from-sky-600 to-blue-700 dark:from-sky-700 dark:to-blue-800 text-white font-semibold rounded-full shadow-lg hover:scale-105 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-purple-300 z-50"
         >
             Back To Top ↑
         </button>

diff --git a/client/src/components/FeatureCards.jsx b/client/src/components/FeatureCards.jsx
@@ -73,16 +73,16 @@ const FeatureCards = () => {
               data-aos={feature.aos}
               to={feature.link}
               key={feature.key}
-              className={`group relative backdrop-blur-sm rounded-3xl p-8 text-center border shadow-xl hover:shadow-2xl transition-all duration-500 transform hover:scale-105 cursor-pointer overflow-hidden ${
+              className={`group relative glass-panel rounded-3xl p-8 text-center shadow-[0_8px_30px_rgb(0,0,0,0.04)] hover:shadow-[0_8px_30px_rgb(0,0,0,0.12)] transition-all duration-500 transform hover:-translate-y-2 cursor-pointer overflow-hidden ${
                 theme === 'dark'
-                  ? 'bg-gray-800/60 border-gray-700/50 hover:border-gray-600'
-                  : 'bg-white/80 border-gray-200/50 hover:border-gray-300'
+                  ? 'border-white/5 hover:border-white/20'
+                  : 'border-zinc-200 hover:border-zinc-300'
               }`}
               onMouseEnter={() => setHovered(feature.key)}
               onMouseLeave={() => setHovered(null)}
             >
               {/* Background Gradient Overlay */}
-              <div className="absolute inset-0 opacity-0 group-hover:opacity-10 transition-opacity duration-500 bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500"></div>
+              <div className="absolute inset-0 opacity-0 group-hover:opacity-10 transition-opacity duration-500 bg-gradient-to-br from-sky-600 to-blue-700 dark:from-sky-700 dark:to-blue-800"></div>
 
               {/* Content */}
               <div className="relative z-10 flex flex-col items-center justify-center h-full">
@@ -130,8 +130,8 @@ const FeatureCards = () => {
               {/* Bottom Gradient Bar */}
               <div className={`absolute bottom-0 left-0 w-full h-1 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left ${
                 feature.key === 'news' ? 'bg-gradient-to-r from-blue-400 to-blue-600' :
-                feature.key === 'journal' ? 'bg-gradient-to-r from-purple-400 to-purple-600' :
-                'bg-gradient-to-r from-pink-400 to-pink-600'
+                feature.key === 'journal' ? 'bg-gradient-to-r from-sky-400 to-sky-600' :
+                'bg-gradient-to-r from-blue-400 to-blue-600'
               }`}></div>
             </Link>
           ))}

diff --git a/client/src/components/Footer.jsx b/client/src/components/Footer.jsx
@@ -25,7 +25,7 @@ const Footer = () => {
   }, []);
 
   return (
-    <footer className="bg-gradient-to-b from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-950 border-t border-slate-200 dark:border-slate-800">
+    <footer className="bg-gradient-to-b from-zinc-50 to-zinc-100 dark:from-zinc-900 dark:to-zinc-950 border-t border-zinc-200 dark:border-zinc-800">
       <div className="max-w-7xl mx-auto px-6 pt-16 pb-10">
         <div
           className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12"
@@ -38,10 +38,10 @@ const Footer = () => {
             data-aos-delay="100"
           >
             <div className="flex items-center space-x-3 mb-6">
-              <div className="p-2 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl">
+              <div className="p-2 bg-gradient-to-br from-blue-500 to-sky-600 rounded-xl">
                 <Zap className="h-6 w-6 text-white" />
               </div>
-              <h3 className="text-2xl font-bold bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">
+              <h3 className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-sky-600 bg-clip-text text-transparent">
                 SentiLog AI
               </h3>
             </div>
@@ -54,25 +54,25 @@ const Footer = () => {
                 href="https://github.com/openml-stack/SentiLog-AI"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="p-2 rounded-lg bg-slate-200 dark:bg-slate-800 hover:bg-slate-300 dark:hover:bg-slate-700 transition-colors"
+                className="p-2 rounded-lg bg-zinc-200 dark:bg-zinc-800 hover:bg-zinc-300 dark:hover:bg-zinc-700 transition-colors"
               >
-                <Github className="h-5 w-5 text-slate-700 dark:text-slate-300" />
+                <Github className="h-5 w-5 text-zinc-700 dark:text-zinc-300" />
               </a>
               <a
                 href="https://linkedin.com"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="p-2 rounded-lg bg-slate-200 dark:bg-slate-800 hover:bg-slate-300 dark:hover:bg-slate-700 transition-colors"
+                className="p-2 rounded-lg bg-zinc-200 dark:bg-zinc-800 hover:bg-zinc-300 dark:hover:bg-zinc-700 transition-colors"
               >
-                <Linkedin className="h-5 w-5 text-slate-700 dark:text-slate-300" />
+                <Linkedin className="h-5 w-5 text-zinc-700 dark:text-zinc-300" />
               </a>
               <a
                 href="mailto:vivekprakash.st@gmail.com"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="p-2 rounded-lg bg-slate-200 dark:bg-slate-800 hover:bg-slate-300 dark:hover:bg-slate-700 transition-colors"
+                className="p-2 rounded-lg bg-zinc-200 dark:bg-zinc-800 hover:bg-zinc-300 dark:hover:bg-zinc-700 transition-colors"
               >
-                <Mail className="h-5 w-5 text-slate-700 dark:text-slate-300" />
+                <Mail className="h-5 w-5 text-zinc-700 dark:text-zinc-300" />
               </a>
             </div>
           </div>

diff --git a/client/src/components/HeroSection.jsx b/client/src/components/HeroSection.jsx
@@ -1,5 +1,6 @@
 import React, { useContext, useEffect, useState } from "react";
 import { ThemeContext } from "../context/ThemeContext";
+import { motion } from "framer-motion";
 
 const scrollToDemo = () => {
   const demo = document.getElementById("live-demo-section");
@@ -124,15 +125,18 @@ const HeroSection = () => {
     >
       <AnimatedBackground theme={theme} />
       <div className="relative z-20 flex flex-col items-center justify-center px-4">
-        <h1
+        <motion.h1
+          initial={{ opacity: 0, y: 30 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, ease: "easeOut" }}
           className={`text-4xl md:text-5xl lg:text-6xl font-extrabold mb-6 tracking-tight leading-tight transition-colors duration-300 ${
             theme === 'dark' ? 'text-gray-100' : 'text-gray-900'
           }`}
         >
-          <span className="bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 bg-clip-text text-transparent animate-gradient-move bg-300%">
+          <span className="bg-gradient-to-r from-sky-600 to-blue-700 dark:from-sky-700 dark:to-blue-800 bg-clip-text text-transparent animate-gradient-move bg-300%">
             SentiLog{" "}
             <span className="relative inline-block px-2">
-              <span className="text-white bg-gradient-to-r from-pink-500 to-blue-500 px-2 py-1 rounded shadow-lg">
+              <span className="text-white bg-gradient-to-br from-sky-400 to-blue-600 dark:from-sky-500 dark:to-blue-700 px-2 py-1 rounded shadow-lg">
                 AI
               </span>
             </span>
@@ -145,23 +149,32 @@ const HeroSection = () => {
           >
             AI-powered sentiment insights for your world
           </span>
-        </h1>
+        </motion.h1>
 
-        <p
+        <motion.p
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.2, ease: "easeOut" }}
           className={`text-base md:text-lg lg:text-xl mb-8 max-w-2xl mx-auto transition-colors duration-300 ${
-            theme === 'dark' ? 'text-gray-300' : 'text-gray-600'
+            theme === 'dark' ? 'text-zinc-400' : 'text-zinc-600'
           }`}
         >
           Experience real-time emotion and sentiment analysis. Discover patterns
           in news and your own mood, powered by advanced AI.
-        </p>
+        </motion.p>
 
-        <button
-          onClick={scrollToDemo}
-          className="px-8 py-4 bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 text-white text-lg font-semibold rounded-full shadow-lg hover:scale-105 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-purple-300"
+        <motion.div
+           initial={{ opacity: 0, scale: 0.9 }}
+           animate={{ opacity: 1, scale: 1 }}
+           transition={{ duration: 0.5, delay: 0.4, ease: "easeOut" }}
         >
-          Try Live Demo
-        </button>
+          <button
+            onClick={scrollToDemo}
+            className="px-8 py-4 bg-gradient-to-r from-sky-600 to-blue-700 dark:from-sky-700 dark:to-blue-800 text-white text-lg font-semibold rounded-full shadow-lg hover:shadow-pink-500/30 hover:scale-105 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-purple-300"
+          >
+            Try Live Demo
+          </button>
+        </motion.div>
       </div>
     </section>
   );

diff --git a/client/src/components/HowItWorks.jsx b/client/src/components/HowItWorks.jsx
@@ -24,7 +24,7 @@ const StepCard = ({ icon: Icon, title, description, step, delay }) => {
         }}
       >
         {/* Animated Border Glow */}
-        <div className="absolute inset-0 rounded-2xl bg-gradient-to-r from-purple-500/20 via-pink-500/20 to-blue-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 -z-10" />
+        <div className="absolute inset-0 rounded-2xl bg-gradient-to-r from-sky-500/20 via-blue-500/20 to-blue-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 -z-10" />
 
         {/* Icon Container */}
         <div className="flex justify-center mb-6">
@@ -38,7 +38,7 @@ const StepCard = ({ icon: Icon, title, description, step, delay }) => {
             <Icon size={32} className="text-white" />
 
             {/* Pulse Effect */}
-            <div className="absolute inset-0 rounded-full bg-gradient-to-r from-purple-400 to-pink-400 opacity-0 group-hover:opacity-30 group-hover:animate-ping" />
+            <div className="absolute inset-0 rounded-full bg-gradient-to-r from-sky-400 to-blue-400 opacity-0 group-hover:opacity-30 group-hover:animate-ping" />
           </div>
         </div>
 
@@ -153,12 +153,12 @@ const HowItWorks = () => {
       </div>
       {/* Decorative floating elements */}
       <div
-        className="hidden md:block absolute top-20 left-10 w-40 h-40 rounded-full bg-gradient-to-r from-purple-400 to-pink-400 opacity-20 animate-bounce"
+        className="hidden md:block absolute top-20 left-10 w-40 h-40 rounded-full bg-gradient-to-r from-sky-400 to-blue-400 opacity-20 animate-bounce"
         style={{ animationDelay: "0s" }}
       />
 
       <div
-        className="hidden md:block absolute bottom-20 right-1/4 w-20 h-20 rounded-full bg-gradient-to-r from-blue-400 to-purple-400 opacity-25 animate-bounce"
+        className="hidden md:block absolute bottom-20 right-1/4 w-20 h-20 rounded-full bg-gradient-to-r from-blue-400 to-sky-400 opacity-25 animate-bounce"
         style={{ animationDelay: "2s" }}
       />
     </section>