Integrate OpenTelemetry monitoring and enhance UI responsiveness

docker-compose.yml

@@ -0,0 +1,39 @@
+version: '3.8'
+
+services:
+  rabbitmq:
+    image: rabbitmq:3-management
+    container_name: healix-rabbitmq
+    ports:
+      - "5672:5672"
+      - "15672:15672"
+    environment:
+      RABBITMQ_DEFAULT_USER: guest
+      RABBITMQ_DEFAULT_PASS: guest
+    volumes:
+      - rabbitmq_data:/var/lib/rabbitmq
+
+  redis:
+    image: redis:7-alpine
+    container_name: healix-redis
+    ports:
+      - "6379:6379"
+    volumes:
+      - redis_data:/data
+
+  elasticsearch:
+    image: elasticsearch:8.13.0
+    container_name: healix-elasticsearch
+    environment:
+      - discovery.type=single-node
+      - xpack.security.enabled=false
+      - ES_JAVA_OPTS=-Xms512m -Xmx512m
+    ports:
+      - "9200:9200"
+    volumes:
+      - es_data:/usr/share/elasticsearch/data
+
+volumes:
+  rabbitmq_data:
+  redis_data:
+  es_data:  

frontend/web/Web Folder Structure #U2013 Usage Guide.md

@@ -0,0 +1,19 @@
+Web Folder Structure – Usage Guide
+This document explains the purpose and usage of each folder and important file inside the
+frontend/web structure used in modern scalable applications.
+• web/app: Contains all Next.js routes, pages, layouts, and global styles. This is where UI pages
+are defined.
+• web/components: Reusable UI components like buttons, navbar, footer, cards. No business
+logic here.
+• web/hooks: Custom React hooks such as authentication or data fetching helpers.
+• web/lib: Core utilities like API configuration, authentication helpers, and shared logic.
+• web/services: Handles communication with backend APIs (auth, product, order services).
+• web/public: Static assets like images, icons, and SVGs.
+• web/styles: Optional folder for themes, CSS modules, or design tokens.
+• web/types: TypeScript interfaces and types shared across the app.
+• middleware.ts: Used for route protection, authentication checks, and redirects.
+• next.config.ts: Next.js configuration file.
+• package.json: Project dependencies and scripts.
+• tsconfig.json: TypeScript configuration.
+This structure follows industry best practices and is suitable for scaling applications similar to
+Amazon, Flipkart, or other large platforms.

frontend/web/src/app/globals.css

@@ -144,3 +144,18 @@
     @apply bg-background text-foreground;
   }
 }
+
+/* ── Mobile Responsive Fixes ── */
+html,
+body {
+  overflow-x: hidden;
+  max-width: 100vw;
+}
+
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+.no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}

frontend/web/src/components/landingpage/Footer.tsx

@@ -2,20 +2,24 @@ import React from 'react';
 
 export default function Footer() {
   return (
-    <footer className="bg-[#5D9F3C] text-white py-16 px-10">
-      <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-12">
+    <footer className="bg-[#5D9F3C] text-white py-10 md:py-16 px-6 md:px-10">
+      <div className="max-w-7xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12">
         {/* Story Column */}
-        <div className="md:col-span-1">
-          <h2 className="text-2xl font-bold mb-6">HEALIX STORY</h2>
-          <p className="text-lg leading-relaxed opacity-90">
+        <div className="col-span-2 md:col-span-1">
+          <h2 className="text-xl md:text-2xl font-bold mb-4 md:mb-6">
+            HEALIX STORY
+          </h2>
+          <p className="text-sm md:text-lg leading-relaxed opacity-90">
             Bringing premium products to your doorstep with quality and trust.
           </p>
         </div>
 
         {/* Quick Links */}
         <div>
-          <h3 className="font-bold mb-6 text-xl">Quick Links</h3>
-          <ul className="space-y-3 opacity-90">
+          <h3 className="font-bold mb-4 md:mb-6 text-base md:text-xl">
+            Quick Links
+          </h3>
+          <ul className="space-y-2 md:space-y-3 opacity-90 text-sm md:text-base">
             <li>
               <a href="#" className="hover:underline">
                 Home
@@ -41,8 +45,10 @@ export default function Footer() {
 
         {/* Customer Support */}
         <div>
-          <h3 className="font-bold mb-6 text-xl">Customer support</h3>
-          <ul className="space-y-3 opacity-90">
+          <h3 className="font-bold mb-4 md:mb-6 text-base md:text-xl">
+            Customer support
+          </h3>
+          <ul className="space-y-2 md:space-y-3 opacity-90 text-sm md:text-base">
             <li>
               <a href="#" className="hover:underline">
                 Shipping Policy
@@ -68,14 +74,21 @@ export default function Footer() {
 
         {/* Contact */}
         <div>
-          <h3 className="font-bold mb-6 text-xl">Contact</h3>
-          <ul className="space-y-3 opacity-90">
+          <h3 className="font-bold mb-4 md:mb-6 text-base md:text-xl">
+            Contact
+          </h3>
+          <ul className="space-y-2 md:space-y-3 opacity-90 text-sm md:text-base">
             <li>+91-7458946131</li>
             <li>support@gmail.com</li>
             <li>Kochi, Kerala</li>
           </ul>
         </div>
       </div>
+
+      {/* Copyright */}
+      <div className="mt-8 md:mt-12 pt-6 border-t border-white/20 text-center text-sm opacity-80">
+        © 2025 Healix. All rights reserved.
+      </div>
     </footer>
   );
 }

frontend/web/src/components/landingpage/Hero.tsx

@@ -39,9 +39,8 @@ export default function HealixPage() {
 
   function resolveImage(src?: string | null) {
     if (!src) return '/placeholder.png';
-    if (src.startsWith('http')) {
+    if (src.startsWith('http'))
       return `/api/proxy?url=${encodeURIComponent(src)}`;
-    }
     return `/api/proxy?url=${encodeURIComponent(S3_BASE + src)}`;
   }
 
@@ -50,47 +49,42 @@ export default function HealixPage() {
       try {
         const res =
           (await productService.getProducts()) as ProductApiResponse[];
-        console.log('API Response:', res);
-
-        // Map API data to gallery items safely
         const formatted: GalleryItem[] = res
           .map((dt) => {
             const product = dt.current_version as ProductVersion | undefined;
-            if (!product) return null; // skip products without a current version
+            if (!product) return null;
             return {
               id: dt._id,
-              text: product.name ? product.name : `Unnamed Product`,
+              text: product.name ? product.name : 'Unnamed Product',
               image: resolveImage(product.images?.[0] ?? ''),
             };
           })
-          .filter((item): item is GalleryItem => item !== null); // type-safe filter
-
+          .filter((item): item is GalleryItem => item !== null);
         setProducts(formatted);
       } catch (err) {
         console.error('Failed to fetch products:', err);
       }
     }
-
     fetchProducts();
   }, []);
 
   return (
     <div className="min-h-screen bg-white font-sans text-slate-900">
-      {/* Top Banner Navigation */}
+      {/* Benefits Marquee Banner */}
       <div className="border-b border-gray-100">
-        <div className=" mx-auto px-4">
-          <p className="text-center py-6 text-sm font-medium text-gray-600">
+        <div className="mx-auto px-4">
+          <p className="text-center py-4 md:py-6 text-sm font-medium text-gray-600">
             Benefits That Support Your Everyday Wellness
           </p>
-          <div className="flex overflow-x-auto no-scrollbar justify-between items-center py-4 border-t border-gray-100">
+          <div className="flex overflow-x-auto no-scrollbar items-center py-3 md:py-4 border-t border-gray-100">
             <Marquee pauseOnClick={false} pauseOnHover={false}>
               {categories.map((cat, idx) => (
                 <div
                   key={idx}
-                  className="flex items-center space-x-2 px-6 border-r last:border-r-0 border-gray-200 whitespace-nowrap"
+                  className="flex items-center space-x-2 px-4 md:px-6 border-r last:border-r-0 border-gray-200 whitespace-nowrap"
                 >
                   {cat.icon}
-                  <span className="text-sm font-bold uppercase tracking-tight">
+                  <span className="text-xs md:text-sm font-bold uppercase tracking-tight">
                     {cat.label}
                   </span>
                 </div>
@@ -100,23 +94,20 @@ export default function HealixPage() {
         </div>
       </div>
 
-      {/* Hero Section */}
-      <section className="max-w-4xl mx-auto text-center py-20 px-6">
-        <h1 className="text-3xl md:text-4xl leading-snug font-medium mb-10">
+      {/* About / Mission Section */}
+      <section className="max-w-4xl mx-auto text-center py-10 md:py-20 px-4 md:px-6">
+        <h1 className="text-2xl md:text-3xl lg:text-4xl leading-snug font-medium mb-8 md:mb-10">
           At <span className="text-[#5D9F3C] font-bold">Healix,</span> we are
-          passionate about <br />
-          delivering clean, nutrient-dense products <br />
-          that support a <span className="text-[#5D9F3C]">healthier</span>{' '}
-          lifestyle. Rooted in <br />
-          the
+          passionate about delivering clean, nutrient-dense products that
+          support a <span className="text-[#5D9F3C]">healthier</span> lifestyle.
+          Rooted in the{' '}
           <span className="text-[#5D9F3C]">science of wellness,</span> our store
-          sources <br /> <span className="text-[#5D9F3C]">high-quality</span>{' '}
-          ingredients and
-          <span className="text-[#5D9F3C] ">
-            follows <br />
-            sustainable, transparent practices
+          sources <span className="text-[#5D9F3C]">high-quality</span>{' '}
+          ingredients and{' '}
+          <span className="text-[#5D9F3C]">
+            follows sustainable, transparent practices
           </span>{' '}
-          to <br /> protect your health.
+          to protect your health.
         </h1>
         <button className="bg-[#10E36E] hover:bg-[#0dc961] text-white px-8 py-3 rounded-full font-semibold flex items-center gap-2 mx-auto transition-all">
           Learn More
@@ -128,10 +119,10 @@ export default function HealixPage() {
 
       {/* Circular Gallery */}
       <section>
-        <h2 className="text-center text-xl font-medium">
+        <h2 className="text-center text-lg md:text-xl font-medium px-4">
           Your Daily Essential for Better Health
         </h2>
-        <div className="h-[500px] w-full relative mb-6">
+        <div className="h-[280px] md:h-[500px] w-full relative mb-6">
           <CircularGallery
             items={products}
             bend={2}
@@ -140,13 +131,13 @@ export default function HealixPage() {
             scrollSpeed={1.5}
             scrollEase={0.05}
             font="bold 30px 'Inter', sans-serif"
-            onCardClick={(id: string) => router.push(`/store/${id}`)} // <-- Next.js navigation
+            onCardClick={(id: string) => router.push(`/store/${id}`)}
           />
         </div>
 
         {/* Bottom CTA */}
         <div className="text-center px-6 mb-10">
-          <p className="text-gray-600 text-sm max-w-md mx-auto mb-8">
+          <p className="text-gray-600 text-sm max-w-md mx-auto mb-6 md:mb-8">
             Explore our full range of targeted nutrition products designed to
             help you feel and perform your best every day.
           </p>

frontend/web/src/components/landingpage/HeroText.tsx

@@ -1,28 +1,28 @@
-import Container from './ Container';
+import Container from './Container';
 
 const HeroText = () => {
   return (
-    <section className="text-center mt-10 mb-0">
+    <section className="text-center mt-8 md:mt-10 mb-0">
       <Container>
-        <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-2 leading-tight">
+        <h1 className="text-3xl md:text-5xl font-bold text-gray-900 mb-2 leading-tight">
           Pure Nutrition for <br />
           Your Wellness Journey
         </h1>
 
-        <p className="text-gray-500 text-md md:text-xg mb-10 max-w-xl mx-auto">
+        <p className="text-gray-500 text-sm md:text-md mb-8 md:mb-10 max-w-xl mx-auto">
           Clean, targeted formulas that fuel your gut,
           <br className="hidden md:block" />
           mind, and energy every day.
         </p>
 
         {/* Search */}
-        <div className="flex items-center bg-white border border-gray-200 p-2 pl-6 rounded-full shadow-sm max-w-md mx-auto">
+        <div className="flex items-center bg-white border border-gray-200 p-2 pl-4 md:pl-6 rounded-full shadow-sm max-w-md mx-auto w-full">
           <input
             type="text"
             placeholder="Search your product"
-            className="flex-grow outline-none text-gray-600 bg-transparent"
+            className="flex-grow outline-none text-gray-600 bg-transparent text-sm"
           />
-          <button className="bg-[#00DC58] hover:bg-[#00c950] text-white px-8 py-3 rounded-full font-semibold">
+          <button className="flex-shrink-0 bg-[#00DC58] hover:bg-[#00c950] text-white px-5 md:px-8 py-2.5 md:py-3 rounded-full font-semibold text-sm">
             Search
           </button>
         </div>