143 lines
6.3 KiB
TypeScript
143 lines
6.3 KiB
TypeScript
"use client";
|
|
import { motion } from "framer-motion";
|
|
import Image from "next/image";
|
|
import serverIcon1 from "@/assets/images/server-1-icon.svg";
|
|
import serverIcon2 from "@/assets/images/server-2-icon.svg";
|
|
import serverIcon3 from "@/assets/images/server-3-icon.svg";
|
|
import serverIcon4 from "@/assets/images/server-4-icon.svg";
|
|
|
|
export default function Box() {
|
|
return (
|
|
<motion.div
|
|
initial={{
|
|
y: 25,
|
|
opacity: 0,
|
|
}}
|
|
whileInView={{
|
|
y: 0,
|
|
opacity: 1,
|
|
}}
|
|
viewport={{
|
|
once: true,
|
|
}}
|
|
className="relative p-5 border border-white/5 bg-[#0E1618]/10 backdrop-blur-sm"
|
|
>
|
|
<h3 className="mb-1 font-medium uppercase text-[#0CE77E]">Live and preparing servers</h3>
|
|
|
|
<p className="mb-4 text-sm text-white/75">List of our GPUs and their current status</p>
|
|
|
|
<div className="py-4 border-t border-[#0CE77E]/25 grid grid-cols-[250px_auto] items-center">
|
|
<div className="flex items-center gap-4">
|
|
<Image src={serverIcon1} alt="" className="w-[40px] h-[40px]" />
|
|
|
|
<div>
|
|
<h3 className="font-medium text-[#0CE77E]">GAMING GPUs</h3>
|
|
<p className="text-sm text-white/75">Total GPUs : 52</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex">
|
|
<div className="flex-1 h-[28px] px-5 bg-[#0CE77E] flex items-center">
|
|
<p className="text-sm font-semibold uppercase text-[#0B1315]">Ready : 38</p>
|
|
</div>
|
|
|
|
<div className="h-[28px] px-5 bg-[#0A492F] flex items-center">
|
|
<p className="text-sm font-medium uppercase text-[#0CE77E]">PREPARING : 14</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="py-4 border-t border-[#0CE77E]/25 grid grid-cols-[250px_auto] items-center">
|
|
<div className="flex items-center gap-4">
|
|
<Image src={serverIcon2} alt="" className="w-[40px] h-[40px]" />
|
|
|
|
<div>
|
|
<h3 className="font-medium text-[#E2F410]">Datacenter GPUs</h3>
|
|
<p className="text-sm text-white/75">Total GPUs : 45</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex">
|
|
<div className="flex-1 h-[28px] px-5 bg-[#0CE77E] flex items-center">
|
|
<p className="text-sm font-semibold uppercase text-[#0B1315]">Ready : 33</p>
|
|
</div>
|
|
|
|
<div className="h-[28px] px-5 bg-[#0A492F] flex items-center">
|
|
<p className="text-sm font-medium uppercase text-[#0CE77E]">PREPARING : 12</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="py-4 border-t border-[#0CE77E]/25 grid grid-cols-[250px_auto] items-center">
|
|
<div className="flex items-center gap-4">
|
|
<Image src={serverIcon3} alt="" className="w-[40px] h-[40px]" />
|
|
|
|
<div>
|
|
<h3 className="font-medium text-[#F65927]">Integrated GPUs</h3>
|
|
<p className="text-sm text-white/75">Total GPUs : 17</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex">
|
|
<div className="flex-1 h-[28px] px-5 bg-[#0CE77E] flex items-center">
|
|
<p className="text-sm font-semibold uppercase text-[#0B1315]">Ready : 12</p>
|
|
</div>
|
|
|
|
<div className="h-[28px] px-5 bg-[#0A492F] flex items-center">
|
|
<p className="text-sm font-medium uppercase text-[#0CE77E]">PREPARING : 5</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="py-4 border-t border-[#0CE77E]/25 grid grid-cols-[250px_auto] items-center">
|
|
<div className="flex items-center gap-4">
|
|
<Image src={serverIcon4} alt="" className="w-[40px] h-[40px]" />
|
|
|
|
<div>
|
|
<h3 className="font-medium text-[#0CBFE7]">AI GPUs</h3>
|
|
<p className="text-sm text-white/75">Total GPUs : 61</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex">
|
|
<div className="flex-1 h-[28px] px-5 bg-[#0CE77E] flex items-center">
|
|
<p className="text-sm font-semibold uppercase text-[#0B1315]">Ready : 44</p>
|
|
</div>
|
|
|
|
<div className="h-[28px] px-5 bg-[#0A492F] flex items-center">
|
|
<p className="text-sm font-medium uppercase text-[#0CE77E]">PREPARING : 17</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<span className="absolute -top-px -left-px group-hover:opacity-0 duration-200">
|
|
<svg width="6" height="5" viewBox="0 0 6 5" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M1 0V4.5" stroke="#0CE77E" />
|
|
<path d="M5.5 0.5L1 0.5" stroke="#0CE77E" />
|
|
</svg>
|
|
</span>
|
|
|
|
<span className="absolute -bottom-px -left-px group-hover:opacity-0 duration-200">
|
|
<svg width="6" height="5" viewBox="0 0 6 5" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M1 4.5V0" stroke="#0CE77E" />
|
|
<path d="M5.5 4L1 4" stroke="#0CE77E" />
|
|
</svg>
|
|
</span>
|
|
|
|
<span className="absolute -top-px -right-px group-hover:opacity-0 duration-200">
|
|
<svg width="6" height="5" viewBox="0 0 6 5" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M5 0V4.5" stroke="#0CE77E" />
|
|
<path d="M0.5 0.5L5 0.5" stroke="#0CE77E" />
|
|
</svg>
|
|
</span>
|
|
|
|
<span className="absolute -bottom-px -right-px group-hover:opacity-0 duration-200">
|
|
<svg width="6" height="5" viewBox="0 0 6 5" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M5 4.5V0" stroke="#0CE77E" />
|
|
<path d="M0.5 4L5 4" stroke="#0CE77E" />
|
|
</svg>
|
|
</span>
|
|
</motion.div>
|
|
);
|
|
}
|