feat: dark / light theme almost complete

frontend/src/pages/HomePage/FeatureCard.tsx

@@ -17,7 +17,7 @@ export const FeatureCard = ({ title, description, imageSrc, imageAlt }: FeatureC
       transition={{ duration: 0.5 }}
       whileHover={{ y: -5 }}
     >
-      <div className="overflow-hidden rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
+      <div className="overflow-hidden rounded-lg bg-white/5 border border-white/10 shadow-lg shadow-black/30 hover:border-white/20 hover:shadow-xl hover:shadow-black/40 transition-all duration-300">
         <div className="relative h-56 overflow-hidden">
           <img
             src={imageSrc}
@@ -25,9 +25,9 @@ export const FeatureCard = ({ title, description, imageSrc, imageAlt }: FeatureC
             className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
           />
         </div>
-        <div className="bg-white p-6">
-          <h3 className="text-xl font-bold text-gray-900 mb-2">{title}</h3>
-          <p className="text-gray-600 leading-relaxed">{description}</p>
+        <div className="p-6">
+          <h3 className="text-xl font-bold text-avus mb-2">{title}</h3>
+          <p className="text-titanio leading-relaxed">{description}</p>
         </div>
       </div>
     </motion.div>

frontend/src/pages/HomePage/FeaturesGrid.tsx

@@ -53,13 +53,13 @@ const features = [
 
 export const FeaturesGrid = () => {
   return (
-    <section className="py-16 px-4 md:px-8 bg-gray-50">
+    <section className="py-16 px-4 md:px-8 bg-[#1D1A18] border-t border-white/5">
       <div className="max-w-7xl mx-auto">
         <div className="text-center mb-12">
           <p className="text-primary-500 text-sm font-semibold uppercase tracking-wide mb-2">
             Our Features
           </p>
-          <h2 className="text-3xl md:text-4xl font-bold text-gray-900">What We Offer</h2>
+          <h2 className="text-3xl md:text-4xl font-bold text-avus">What We Offer</h2>
         </div>
 
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
@@ -69,7 +69,7 @@ export const FeaturesGrid = () => {
         </div>
 
         <div className="text-center mt-12">
-          <p className="text-lg text-gray-600 mb-6">
+          <p className="text-lg text-titanio mb-6">
             We are a cloud-based platform accessible anywhere, anytime.
           </p>
         </div>

frontend/src/pages/HomePage/HeroCarousel.tsx

@@ -71,17 +71,6 @@ export const HeroCarousel = () => {
                 className="w-full h-full object-cover"
               />
               <div className="absolute inset-0 bg-gradient-to-b from-black/60 via-black/40 to-black/60" />
-              <div className="absolute inset-0 flex flex-col items-center justify-center text-center px-4">
-                <p className="text-white text-sm md:text-base font-semibold uppercase tracking-widest mb-4">
-                  Welcome to
-                </p>
-                <h1 className="text-white text-4xl md:text-6xl lg:text-7xl font-bold mb-6 leading-tight">
-                  MOTOVAULTPRO
-                </h1>
-                <button className="bg-primary-500 hover:bg-primary-700 text-white font-semibold py-3 px-8 rounded-lg transition-colors duration-300">
-                  Learn More
-                </button>
-              </div>
             </div>
           </div>
         ))}
@@ -121,12 +110,12 @@ export const HeroCarousel = () => {
         .hero-carousel .slick-prev:before,
         .hero-carousel .slick-next:before {
           font-size: 50px;
-          opacity: 0.75;
+          opacity: 0.6;
         }
 
         .hero-carousel .slick-prev:hover:before,
         .hero-carousel .slick-next:hover:before {
-          opacity: 1;
+          opacity: 0.9;
         }
       `}</style>
     </div>