Add Testimonials section with user feedback

src/app.jsx

@@ -474,6 +474,8 @@
         
                                            
                                 React.createElement(SecurityFeatures, { key: 'security-features' }),
+
+                                React.createElement(Testimonials, { key: 'testimonials' }),
         
                                 React.createElement(UniqueFeatureSlider, { key: 'unique-features-slider' }),
         

src/components/ui/SecurityFeatures.jsx

@@ -5,7 +5,7 @@ const SecurityFeatures = () => {
     { id: 'feature3', color: '#ff8800', icon: 'fas fa-lock accent-orange', title: 'AES-GCM 256 Encryption', desc: 'Authenticated encryption standard' },
     { id: 'feature4', color: '#00ffff', icon: 'fas fa-sync-alt accent-cyan', title: 'Perfect Forward Secrecy', desc: 'Automatic key rotation every 5 minutes' },
     { id: 'feature5', color: '#0088ff', icon: 'fas fa-signature accent-blue', title: 'ECDSA P-384 Signatures', desc: 'Digital signatures for message integrity' },
-    { id: 'feature6', color: '#ff0044', icon: 'fas fa-shield-alt accent-red', title: 'SAS Security', desc: 'Revolutionary key exchange & MITM protection' }
+    { id: 'feature6', color: '#f87171', icon: 'fas fa-shield-alt accent-red', title: 'SAS Security', desc: 'Revolutionary key exchange & MITM protection' }
   ];
 
   React.useEffect(() => {

src/components/ui/Testimonials.jsx

@@ -0,0 +1,123 @@
+const Testimonials = () => {
+  const testimonials = [
+    { id: "t1",  rating: 5.0, text: "The interface feels modern and smooth. It saves me at least 2 hours every day when managing design tasks."},
+    { id: "t2",  rating: 5.0, text: "Finally, a solution that blends speed with simplicity. My team adopted it within a week without training."},
+    { id: "t3",  rating: 5.0, text: "I can track progress in real time and get a clear overview of our workflow. It feels empowering."},
+    { id: "t4",  rating: 5.0, text: "Our pipeline visibility improved dramatically. I no longer need to manually track updates."},
+    { id: "t5",  rating: 5.0, text: "The security-first approach gives me peace of mind. We handle sensitive data with confidence now."},
+    { id: "t6",  rating: 5.0, text: "User feedback cycles are now twice as fast. It helps us test and ship features quickly."}
+  ];
+
+  React.useEffect(() => {
+    const colUp = document.querySelector(".col-up");
+    const colDown = document.querySelector(".col-down");
+    const wrapper = document.querySelector(".testimonials-wrapper");
+
+    if (!colUp || !colDown || !wrapper) return;
+
+    let paused = false;
+    const speed = 0.5;
+    let animationId;
+
+    const cloneCards = (container) => {
+      const cards = Array.from(container.children);
+      cards.forEach(card => {
+        const clone = card.cloneNode(true);
+        container.appendChild(clone);
+      });
+    };
+
+    cloneCards(colUp);
+    cloneCards(colDown);
+
+    const getHalfHeight = (el) => {
+      const children = Array.from(el.children);
+      const halfCount = children.length / 2;
+      let height = 0;
+      for (let i = 0; i < halfCount; i++) {
+        height += children[i].offsetHeight;
+        if (i < halfCount - 1) height += 24; 
+      }
+      return height;
+    };
+
+    let y1 = 0;
+    const maxScroll1 = getHalfHeight(colUp);
+    const maxScroll2 = getHalfHeight(colDown);
+    let y2 = -maxScroll2; 
+
+    function animate() {
+      if (!paused) {
+        y1 -= speed;
+        y2 += speed;
+
+        if (Math.abs(y1) >= maxScroll1) {
+          y1 = 0;
+        }
+        
+        if (y2 >= 0) {
+          y2 = -maxScroll2;
+        }
+
+        colUp.style.transform = `translateY(${y1}px)`;
+        colDown.style.transform = `translateY(${y2}px)`;
+      }
+      animationId = requestAnimationFrame(animate);
+    }
+
+    animate();
+
+    const handleMouseEnter = () => { paused = true; };
+    const handleMouseLeave = () => { paused = false; };
+
+    wrapper.addEventListener("mouseenter", handleMouseEnter);
+    wrapper.addEventListener("mouseleave", handleMouseLeave);
+
+    return () => {
+      cancelAnimationFrame(animationId);
+      wrapper.removeEventListener("mouseenter", handleMouseEnter);
+      wrapper.removeEventListener("mouseleave", handleMouseLeave);
+    };
+  }, []);
+
+  const renderCard = (t, index) => (
+    <div key={`${t.id}-${index}`} className="card bg-neutral-900 rounded-xl p-5 shadow-md w-72 text-sm text-white flex-shrink-0">
+      <div className="flex items-center mb-2 text-yellow-400">
+        {"★".repeat(Math.floor(t.rating))}
+        <span className="ml-2 text-secondary">{t.rating.toFixed(1)}</span>
+      </div>
+      <p className="text-secondary mb-3">{t.text}</p>
+    </div>
+  );
+
+  return (
+    <section className="py-14 px-6 bg-transparent">
+      <div className="grid grid-cols-1 lg:grid-cols-5 gap-12 max-w-7xl mx-auto items-center">
+        <div className="lg:col-span-2 flex flex-col justify-center">
+          <p className="text-sm text-secondary mb-2">Testimonials</p>
+          <h2 className="text-2xl sm:text-3xl font-bold text-white mb-4 leading-snug">
+            What our users are saying
+          </h2>
+          <p className="text-secondary text-sm">
+            We continuously listen to our community and improve every day.
+          </p>
+        </div>
+
+        <div className="lg:col-span-3 testimonials-wrapper flex gap-6 overflow-hidden relative h-[420px]">
+          <div className="pointer-events-none absolute top-0 left-0 w-full h-16 bg-gradient-to-b from-[#1f1f1f]/90 to-transparent z-20"></div>
+          <div className="pointer-events-none absolute bottom-0 left-0 w-full h-16 bg-gradient-to-t from-[#1f1f1f]/90 to-transparent z-20"></div>
+
+          <div className="col-up flex flex-col gap-6">
+            {testimonials.map((t, i) => renderCard(t, i))}
+          </div>
+
+          <div className="col-down flex flex-col gap-6">
+            {testimonials.map((t, i) => renderCard(t, i))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+window.Testimonials = Testimonials;

src/scripts/app-boot.js

@@ -8,6 +8,7 @@ import '../components/ui/Header.jsx';
 import '../components/ui/DownloadApps.jsx';
 import '../components/ui/UniqueFeatureSlider.jsx';
 import '../components/ui/SecurityFeatures.jsx';
+import '../components/ui/Testimonials.jsx';
 import '../components/ui/ComparisonTable.jsx';
 import '../components/ui/Roadmap.jsx';
 import '../components/ui/FileTransfer.jsx';

src/scripts/bootstrap-modules.js

@@ -37,6 +37,7 @@
       loadReactComponent('../components/ui/ComparisonTable.jsx'),
       loadReactComponent('../components/ui/UniqueFeatureSlider.jsx'),
       loadReactComponent('../components/ui/SecurityFeatures.jsx'),
+      loadReactComponent('../components/ui/Testimonials.jsx'),
       loadReactComponent('../components/ui/Roadmap.jsx'),
       loadReactComponent('../components/ui/FileTransfer.jsx'),
     ]);