This commit is contained in:
2025-09-05 16:39:35 +02:00
parent 6d35b9dd05
commit 4bea627e6d
5 changed files with 7 additions and 7 deletions

BIN
public/images/3phone.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

BIN
public/images/3router.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

BIN
public/images/aibox.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.4 KiB

BIN
public/images/hgu-04.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 124 KiB

View File

@@ -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>