forked from emre/www_projectmycelium_com
feat: update UI styling and add new page images
- Added new WebP images for different pages (agent, cloud, compute, gpu, network, storage) - Updated benefits section images with optimized WebP versions - Enhanced text styling: - Increased paragraph font size to text-xl on large screens - Adjusted H5 line height for better readability - Updated card paragraph text size to text-base - Refined visual design elements: - Changed cube stroke color to gray-600 for subtler appearance - Adjusted glow effects and gradients to
This commit is contained in:
@@ -35,8 +35,8 @@ const stackData = [
|
||||
];
|
||||
|
||||
export function StackedCubesLight() {
|
||||
const [active, setActive] = useState<string | null>("agent");
|
||||
const [selectedForMobile, setSelectedForMobile] = useState<string | null>("agent");
|
||||
const [active, setActive] = useState<string | null>("network");
|
||||
const [selectedForMobile, setSelectedForMobile] = useState<string | null>("network");
|
||||
|
||||
const handleCubeClick = (id: string) => {
|
||||
setSelectedForMobile((prev) => (prev === id ? null : id));
|
||||
@@ -49,10 +49,10 @@ export function StackedCubesLight() {
|
||||
return (
|
||||
<div className="flex flex-col items-center relative">
|
||||
{/* ✨ Ambient cyan-white gradient background */}
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-white via-cyan-50/40 to-white blur-3xl opacity-70 pointer-events-none" />
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-white via-cyan-50/30 to-white blur-3xl opacity-70 pointer-events-none" />
|
||||
<div
|
||||
className="relative w-full flex items-center justify-center lg:justify-center min-h-[450px] lg:min-h-[400px]"
|
||||
onMouseLeave={() => setActive("agent")}
|
||||
onMouseLeave={() => setActive("network")}
|
||||
>
|
||||
<motion.div
|
||||
className="relative lg:pl-0 pl-6 h-[300px] lg:h-[400px] w-64 sm:w-80 lg:w-96"
|
||||
@@ -77,8 +77,8 @@ export function StackedCubesLight() {
|
||||
<div
|
||||
className={`absolute inset-0 blur-2xl rounded-3xl transition-all duration-500 ${
|
||||
active === layer.id
|
||||
? "bg-cyan-300/40 opacity-70"
|
||||
: "bg-cyan-200/20 opacity-40"
|
||||
? "bg-cyan-300/20 opacity-20"
|
||||
: "bg-cyan-200/20 opacity-20"
|
||||
}`}
|
||||
/>
|
||||
<CubeLight
|
||||
|
||||
Reference in New Issue
Block a user