From daa6702d9b06c383fac9d3097908183d8ddb29a8 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Fri, 12 Sep 2025 17:42:52 +0200
Subject: [PATCH]  ok

---
 src/components/HomeAbout.tsx | 63 +++++++++++++++++-------------------
 src/images/diamond.svg       |  1 +
 2 files changed, 30 insertions(+), 34 deletions(-)
 create mode 100644 src/images/diamond.svg

diff --git a/src/components/HomeAbout.tsx b/src/components/HomeAbout.tsx
index 2fefbbb..aa21cc9 100644
--- a/src/components/HomeAbout.tsx
+++ b/src/components/HomeAbout.tsx
@@ -5,13 +5,33 @@ import { motion } from 'framer-motion'
 import { TypeAnimation } from 'react-type-animation'
 import { Dialog, DialogPanel } from '@headlessui/react'
 import { Bars3Icon, XMarkIcon, ChevronDoubleDownIcon } from '@heroicons/react/24/outline'
+import Image from 'next/image'
+import diamondSvg from '@/images/diamond.svg'
 
 const navigation = [
   { name: 'Product', href: '#' },
   { name: 'Features', href: '#' },
   { name: 'Marketplace', href: '#' },
   { name: 'Company', href: '#' },
-]
+];
+
+const features = [
+  'Data Orchestration',
+  'Data Cleaning',
+  'Real-time Monitoring',
+  'Query Optimization',
+  'Report Generation',
+  'Metadata Management',
+  'Model Monitoring',
+  'Cost Optimization',
+  'API Integration',
+  'Access Control',
+  'Log Processing',
+  'Synthetic Data',
+  'Code Intelligence',
+  'Incident Automation',
+  'Data Discovery',
+];
 
 export function HomeAbout() {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
@@ -53,39 +73,14 @@ export function HomeAbout() {
             With Mycelium, you could deploy AI agents that handle your most complex workflows while maintaining complete data sovereignty and control.
           </motion.p>
           
-          <div className="absolute bottom-24 right-0 h-96 w-2/3 overflow-hidden">
-            <div className="animate-marquee-vertical space-y-4 text-right text-4xl font-medium text-[#2F3178]">
-              <p>Data Orchestration</p>
-              <p>Data Cleaning</p>
-              <p>Real-time Monitoring</p>
-              <p>Query Optimization</p>
-              <p>Report Generation</p>
-              <p>Metadata Management</p>
-              <p>Model Monitoring</p>
-              <p>Cost Optimization</p>
-              <p>API Integration</p>
-              <p>Access Control</p>
-              <p>Log Processing</p>
-              <p>Synthetic Data</p>
-              <p>Code Intelligence</p>
-              <p>Incident Automation</p>
-              <p>Data Discovery</p>
-              {/* Duplicate for seamless scroll */}
-              <p aria-hidden="true">Data Orchestration</p>
-              <p aria-hidden="true">Data Cleaning</p>
-              <p aria-hidden="true">Real-time Monitoring</p>
-              <p aria-hidden="true">Query Optimization</p>
-              <p aria-hidden="true">Report Generation</p>
-              <p aria-hidden="true">Metadata Management</p>
-              <p aria-hidden="true">Model Monitoring</p>
-              <p aria-hidden="true">Cost Optimization</p>
-              <p aria-hidden="true">API Integration</p>
-              <p aria-hidden="true">Access Control</p>
-              <p aria-hidden="true">Log Processing</p>
-              <p aria-hidden="true">Synthetic Data</p>
-              <p aria-hidden="true">Code Intelligence</p>
-              <p aria-hidden="true">Incident Automation</p>
-              <p aria-hidden="true">Data Discovery</p>
+          <div className="absolute bottom-24 right-0 h-96 w-full md:w-2/3 overflow-hidden">
+            <div className="animate-marquee-vertical space-y-8 text-right text-2xl md:text-4xl font-medium text-[#2F3178]">
+              {[...features, ...features].map((feature, index) => (
+                <div key={index} className="flex items-center justify-end gap-x-4" aria-hidden={index >= features.length}>
+                  <Image src={diamondSvg} alt="" className="h-6 w-6" />
+                  <p>{feature}</p>
+                </div>
+              ))}
             </div>
           </div>
         </div>
diff --git a/src/images/diamond.svg b/src/images/diamond.svg
new file mode 100644
index 0000000..8973089
--- /dev/null
+++ b/src/images/diamond.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="133" zoomAndPan="magnify" viewBox="0 0 99.75 143.999998" height="192" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><clipPath id="ad4ece1e12"><path d="M 0 4 L 99 4 L 99 140.796875 L 0 140.796875 Z M 0 4 " clip-rule="nonzero"/></clipPath></defs><g clip-path="url(#ad4ece1e12)"><path fill="#2f3178" d="M 77.738281 77.078125 C 63.597656 85.429688 53.351562 103.105469 50.84375 122.902344 C 49.804688 128.722656 51.226562 135.644531 49.382812 140.871094 C 47.300781 122.25 45.070312 100.476562 32.589844 86.886719 C 22.980469 77.566406 15.09375 71.984375 0 70.726562 C 8.601562 66.472656 19.144531 64.25 25.957031 55.871094 C 38.105469 43.089844 43.230469 25.175781 44.210938 7.707031 C 44.902344 -2.058594 46 10.890625 47.5625 13.621094 C 51.164062 24.210938 55.203125 34.78125 60.902344 44.460938 C 68.402344 57.957031 83.371094 64.710938 97.574219 68.765625 C 97.949219 68.875 98.300781 69.058594 98.582031 69.328125 C 99.933594 70.640625 95.613281 70.152344 92.695312 70.601562 C 87.152344 72.101562 82.546875 74.570312 77.738281 77.078125 Z M 77.738281 77.078125 " fill-opacity="1" fill-rule="nonzero"/><path fill="#2f3178" d="M 77.738281 77.078125 C 63.597656 85.429688 53.351562 103.105469 50.84375 122.902344 C 49.804688 128.722656 51.226562 135.644531 49.382812 140.871094 C 47.300781 122.25 45.070312 100.476562 32.589844 86.886719 C 22.980469 77.566406 15.09375 71.984375 0 70.726562 C 8.601562 66.472656 19.144531 64.25 25.957031 55.871094 C 38.105469 43.089844 43.230469 25.175781 44.210938 7.707031 C 44.902344 -2.058594 46 10.890625 47.5625 13.621094 C 51.164062 24.210938 55.203125 34.78125 60.902344 44.460938 C 68.402344 57.957031 83.371094 64.710938 97.574219 68.765625 C 97.949219 68.875 98.300781 69.058594 98.582031 69.328125 C 99.933594 70.640625 95.613281 70.152344 92.695312 70.601562 C 87.152344 72.101562 82.546875 74.570312 77.738281 77.078125 Z M 77.738281 77.078125 " fill-opacity="1" fill-rule="nonzero"/></g></svg>
\ No newline at end of file