emre/www_projectmycelium_com
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update cube component color scheme from cyan to blue

Browse Source 
- Changed cube gradient colors from cyan to blue for better visual consistency
- Updated glow effects and shadows to use blue (rgba(59, 130, 246)) instead of cyan
- Modified background aura gradients in StackSection for enhanced depth perception
- Replaced HomeFeaturesDark component with new HomeSlider in HomePage layout
- Added isolate property to StackSection to prevent gradient bleeding
- Enhanced background layer in StackSection with additional
This commit is contained in:
sasha-astiadi
2025-10-24 21:16:41 +02:00
parent 68b2119c76
commit 8844ec8a63
9 changed files with 540 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/pages/home/HomePage.tsx
View File

@@ -5,6 +5,7 @@ import { StackSectionLight } from './StackSection'
import { WorldMap } from './HomeGlobe'
import { HomeBenefits } from './HomeBenefits'
import { CallToAction } from './CallToAction'
import { HomeSlider } from './HomeSlider'
export default function HomePage() {
@@ -24,7 +25,7 @@ export default function HomePage() {
<AnimatedSection>
<HomeFeaturesDark />
<HomeSlider />
</AnimatedSection>
<AnimatedSection>

84
src/pages/home/HomeSlider.tsx Normal file
View File

@@ -0,0 +1,84 @@
"use client";
import React from "react";
import { Carousel, Card } from "@/components/ui/apple-cards-carousel";
import { H2, H3, P } from "@/components/Texts";
export function HomeSlider() {
const cards = data.map((card, index) => (
<Card key={card.src} card={card} index={index} />
));
return (
<div className="w-full h-full py-20 bg-black">
<div className="max-w-7xl mx-auto pl-4">
<H3 className="text-left text-white">
Discover the Mycelium Ecosystem
</H3>
<div className="mt-4 max-w-3xl">
<P className="text-left text-neutral-400">
From compute and networking to intelligent automation, these components work together to empower users, developers, and organizations to build freely, without intermediaries.
</P>
</div>
</div>
<Carousel items={cards} />
</div>
);
}
const DummyContent = () => {
return (
<div className="bg-neutral-800 p-8 md:p-14 rounded-3xl mb-4 max-w-3xl">
<P className="text-neutral-400 text-base md:text-2xl font-sans mx-auto">
Mycelium is a decentralized compute network that allows you to run AI models and other software on a global network of devices. Mycelium is built on top of the Mycelium Network, a decentralized network of devices that are connected to each other and to the internet.
</P>
<img
src="/images/gallery/1.webp"
alt="Macbook mockup from Aceternity UI"
height="500"
width="500"
className="md:w-1/2 md:h-1/2 h-full w-full mx-auto object-cover"
/>
</div>
);
};
const data = [
{
category: "DePIN",
title: "Mycelium Network",
src: "/images/gallery/9.webp",
content: <DummyContent />,
},
{
category: "AI Agent",
title: "Mycelium Agent",
src: "/images/gallery/2.webp",
content: <DummyContent />,
},
{
category: "Cloud",
title: "Mycelium Cloud",
src: "/images/gallery/3.webp",
content: <DummyContent />,
},
{
category: "GPU",
title: "Mycelium GPU",
src: "/images/gallery/4.webp",
content: <DummyContent />,
},
{
category: "Compute",
title: "Mycelium Compute",
src: "/images/gallery/5.webp",
content: <DummyContent />,
},
{
category: "Storage",
title: "Mycelium Storage",
src: "/images/gallery/6.webp",
content: <DummyContent />,
},
];

40
src/pages/home/StackSection.tsx
View File

@@ -7,35 +7,53 @@ import { FadeIn } from "@/components/ui/FadeIn";
export function StackSectionLight() {
return (
<section className="relative w-full overflow-hidden py-24 lg:py-40">
<section className="relative w-full overflow-hidden py-24 lg:py-40 isolate">
{/* === Background Layer === */}
<div className="absolute inset-0 -z-10 bg-transparent">
{/* === Center Radial Glow Aura === */}
<div className="absolute inset-0 z-0 bg-transparent">
{/* Central main aura */}
<motion.div
className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[1200px] h-[1200px] rounded-full pointer-events-none"
style={{
background:
"radial-gradient(circle, rgba(173,255,255,0.5) 0%, rgba(0,220,255,0.3) 30%, rgba(255,255,255,0) 70%)",
filter: "blur(120px)",
"radial-gradient(circle, rgba(180,255,255,0.55) 0%, rgba(0,210,255,0.35) 35%, rgba(255,255,255,0) 55%)",
filter: "blur(140px)",
}}
animate={{
opacity: [0.6, 0.8, 0.6],
opacity: [0.5, 0.8, 0.5],
scale: [1, 1.05, 1],
}}
transition={{
duration: 8,
duration: 9,
repeat: Infinity,
ease: "easeInOut",
}}
/>
{/* Faint cyan mist in the back for depth */}
<motion.div
className="absolute left-[70%] top-[30%] -translate-x-1/2 -translate-y-1/2 w-[1600px] h-[1600px] rounded-full pointer-events-none"
style={{
background:
"radial-gradient(circle, rgba(100,220,255,0.25) 0%, rgba(200,255,255,0.15) 50%, rgba(255,255,255,0) 90%)",
filter: "blur(200px)",
}}
animate={{
opacity: [0.2, 0.35, 0.2],
scale: [1, 1.1, 1],
}}
transition={{
duration: 12,
repeat: Infinity,
ease: "easeInOut",
delay: 3,
}}
/>
</div>
{/* === Content === */}
<div className="relative mx-auto max-w-7xl px-6 lg:px-8 grid grid-cols-1 lg:grid-cols-3 gap-16 items-center">
{/* Left Column - Text */}
<div className="text-center lg:text-left">
<div className="text-center lg:text-left z-10">
<FadeIn>
<Eyebrow color="accent">Technology Layers</Eyebrow>
<SectionHeader color="dark" className="text-4xl sm:text-5xl font-semibold">
@@ -53,7 +71,7 @@ export function StackSectionLight() {
</div>
{/* Right Column - Animated Stack */}
<div className="lg:col-span-2 flex items-center justify-center lg:justify-start relative">
<div className="lg:col-span-2 flex items-center justify-center lg:justify-start relative z-10">
<motion.div
initial={{ y: 30, opacity: 0 }}
whileInView={{ y: 0, opacity: 1 }}