add -a

src/components/Products.tsx

@@ -27,7 +27,7 @@ const products = [
     id: 3,
     colSpan: "lg:col-span-2",
     rounded: "rounded-[calc(var(--radius-lg)+1px)] lg:rounded-bl-[calc(2rem+1px)]",
-    img: "/images/3nodes.png",
+    img: "/images/aibox.png",
     title: "AIBox",
     desc: "A self-hosted AI compute solution powered by ThreeFold.",
     color: "indigo-400",
@@ -37,7 +37,7 @@ const products = [
     id: 4,
     colSpan: "lg:col-span-2",
     rounded: "rounded-[calc(var(--radius-lg)+1px)]",
-    img: "/images/3nodes.png",
+    img: "/images/3phone.png",
     title: "3Phone",
     desc: "OwnPhone is the first secure device in the 3Phone family designed to work seamlessly with the ThreeFold Grid.",
     color: "indigo-400",
@@ -47,7 +47,7 @@ const products = [
     id: 5,
     colSpan: "lg:col-span-2",
     rounded: "rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-b-[calc(2rem+1px)] lg:rounded-br-[calc(2rem+1px)]",
-    img: "/images/3nodes.png",
+    img: "/images/3router.png",
     title: "3Router",
     desc: "Smart routers ensure shortest-path connections between nodes and phones with end-to-end encryption.",
     color: "indigo-400",
@@ -58,7 +58,7 @@ const products = [
 export function ProductsPreview() {
 
   return (
-    <section className="w-full bg-transparent px-4 py-8 sm:px-6 mt-12 sm:pb-12 lg:px-8 relative">
+    <section className="w-full bg-transparent px-4 py-8 sm:px-6 mt-12 sm:pb-12 lg:px-6 relative">
     {/* Gradient Blob Component */}
       <div className="absolute w-[400px] h-[200px] bg-gradient-to-br from-[#505050] to-[#7e7e7e] opacity-40 rounded-full blur-[150px] bottom-[200px] left-[-150px] z-0" />
       <div className="absolute w-[200px] h-[100px] bg-gradient-to-br from-[#505050] to-[#7e7e7e] opacity-50 rounded-full blur-[150px] top-[200px] right-[-150px] z-0" />
@@ -87,16 +87,16 @@ export function ProductsPreview() {
             <div key={product.id} className={`relative ${product.colSpan}`}>
               <div className={`absolute inset-0 rounded-lg bg-gray-100 ${product.bgRounded}`} />
               <div className={`relative flex h-full flex-col lg:flex-row overflow-hidden ${product.rounded}`}>
-                <div className="flex justify-center items-center h-15 lg:h-40 lg:w-1/4 p-2">
+                <div className={`flex justify-center items-center h-15 ${product.id > 2 ? 'lg:h-48' : 'lg:h-40'} lg:w-1/4 p-2`}>
                   <img
                     alt={`${product.title} screenshot`}
                     src={product.img}
                     className="w-full lg:w-full h-full object-contain p-2"
                   />
                 </div>
-                <div className="p-4 flex-1 flex flex-col justify-center">
+                <div className="pl-2 pr-6 flex-1 flex flex-col justify-center">
                   <p className="lg:mt-0 mt-4 text-lg lg:text-xl font-medium tracking-tight text-white">{product.title}</p>
-                  <p className="mt-2 max-w-lg text-sm/6 text-gray-600">
+                  <p className="mt-2 max-w-lg text-sm/6 leading-tight text-gray-600">
                     {product.desc}
                   </p>
                 </div>