ourworld_web/www_projectmycelium_com
23
0
Fork 0
forked from emre/www_projectmycelium_com
Code Issues 4 Pull Requests Releases Activity

feat: update UI styling and add new page images

Browse Source 
- 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:
sasha-astiadi
2025-10-31 03:01:17 +01:00
parent ea1ef853f1
commit dd4eba2215
21 changed files with 41 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Texts.tsx
View File

@@ -88,7 +88,7 @@ export const H4 = createTextComponent(
)
export const P = createTextComponent(
'p',
'text-base lg:text-lg leading-relaxed'
'text-base lg:text-xl leading-relaxed'
)
export const Small = createTextComponent(
'small',
@@ -100,7 +100,7 @@ export const Subtle = createTextComponent(
)
export const H5 = createTextComponent(
'h5',
'text-xl lg:text-2xl font-light leading-snug tracking-normal'
'text-xl lg:text-2xl font-light lg:leading-snug leading-[0.85] tracking-normal'
)
export const Eyebrow = createTextComponent(
'h2',
@@ -160,4 +160,4 @@ export const DownloadCardDescription = createTextComponent(
)
export const CT = createTextComponent('span', 'text-lg lg:text-xl font-semibold')
export const CP = createTextComponent('p', 'text-sm lg:text-sm tracking-wide leading-[1.525] font-light')
export const CP = createTextComponent('p', 'text-sm lg:text-base tracking-wide leading-[1.525] font-light')

16
src/components/ui/CubeLight.tsx
View File

@@ -26,7 +26,7 @@ const CubeSvg: React.FC<React.SVGProps<SVGSVGElement> & { index: number }> = ({
<path
fill={`url(#cube-gradient-${index})`}
d="M491.651 144.747L287.198 227.339C265.219 236.22 241.783 236.22 219.802 227.339L15.3486 144.747C-5.11621 136.479 -5.11621 97.5191 15.3486 89.2539L219.802 6.65884C241.783 -2.21961 265.219 -2.21961 287.198 6.65884L491.651 89.2539C512.116 97.5191 512.116 136.479 491.651 144.747Z"
stroke="rgba(59, 130, 246, 0.25)"
stroke="rgba(107, 114, 128, 0.3)"
strokeWidth="0.5"
/>
<defs>
@@ -79,8 +79,8 @@ export function CubeLight({
<div
className={`absolute inset-0 blur-3xl rounded-2xl transition-all duration-500 ${
isActive
? "bg-blue-400/40 opacity-70"
: "bg-blue-200/20 opacity-40"
? "bg-cyan-400/20 opacity-30"
: "bg-cyan-200/20 opacity-40"
}`}
/>
@@ -90,8 +90,8 @@ export function CubeLight({
className="w-48 sm:w-64 lg:w-80 h-auto relative"
style={{
filter: isActive
? "drop-shadow(0 0 25px rgba(59, 130, 246, 0.4)) brightness(1.1)"
: "drop-shadow(0 0 10px rgba(59, 130, 246, 0.15)) brightness(1)",
? "drop-shadow(0 0 15px rgba(34, 211, 238, 0.25)) brightness(1.05)"
: "drop-shadow(0 0 10px rgba(34, 211, 238, 0.15)) brightness(1)",
transition: "all 0.4s ease",
}}
/>
@@ -99,10 +99,10 @@ export function CubeLight({
{/* Title overlay */}
<div className="absolute inset-0 flex items-center justify-center">
<h3
className="text-blue-900 text-sm lg:text-base font-medium text-center px-4"
className="text-cyan-900 text-sm lg:text-base font-medium text-center px-4"
style={{
textShadow:
"0 0 15px rgba(255,255,255,0.8), 0 0 25px rgba(59, 130, 246, 0.5)",
"0 0 15px rgba(255,255,255,0.8), 0 0 25px rgba(34, 211, 238, 0.5)",
}}
>
{title}
@@ -131,7 +131,7 @@ export function CubeLight({
y1="1"
x2="120"
y2="1"
stroke="rgba(59, 130, 246, 0.6)"
stroke="rgba(34, 211, 238, 0.6)"
strokeWidth="1"
opacity="0.8"
/>

12
src/components/ui/StackedCubesLight.tsx
View File

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

2
src/components/ui/apple-cards-carousel.tsx
View File

@@ -93,7 +93,7 @@ export const Carousel = ({ items, initialScroll = 0 }: CarouselProps) => {
},
}}
key={"card" + index}
className="rounded-3xl last:pr-[5%] md:last:pr-[33%]"
className="rounded-3xl last:pr-[5%] md:last:pr-[33%] "
>
{item}
</motion.div>

13
src/pages/home/CallToAction.tsx
View File

@@ -6,26 +6,23 @@ export function CallToAction() {
return (
<section
id="get-started"
className="relative overflow-hidden bg-gray-900 py-32"
className="relative overflow-hidden bg-gray-900 lg:py-32 py-24"
>
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
<CircleBackground color="#06b6d4" className="animate-spin-slower" />
</div>
<Container className="relative">
<div className="mx-auto max-w-2xl text-center">
<div className="mx-auto max-w-xl text-center">
<h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl">
Activate Your Sovereign <br />Mycelium Stack
</h2>
<p className="mt-6 text-lg text-gray-300">
Provision cloud workloads, mesh them through the encrypted Mycelium Network, and unlock AI experiences without surrendering control of your infrastructure or your data.
Mesh cloud workloads through the encrypted Mycelium Network and unlock AI experiences without ever surrendering control of your infrastructure, performance, or data.
</p>
<div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4">
<Button to="/cloud" variant="solid" color="white">
<Button to="/cloud" variant="solid" color="cyan">
Start Deployment
</Button>
<Button to="/download" variant="solid" color="cyan">
Get Mycelium Connector
</Button>
<Button
to="https://threefold.info/mycelium_network/docs/"
as="a"
@@ -33,7 +30,7 @@ export function CallToAction() {
variant="outline"
color="white"
>
Docs
Explore Docs
</Button>
</div>
</div>

7
src/pages/home/HomeBenefits.tsx
View File

@@ -2,7 +2,7 @@ import createGlobe from "cobe";
import { useEffect, useRef } from "react";
import { motion } from "motion/react";
import { IconBrandYoutubeFilled } from "@tabler/icons-react";
import { H2, P } from '@/components/Texts'
import { H2, P, Eyebrow } from '@/components/Texts'
export function HomeBenefits() {
@@ -33,8 +33,11 @@ export function HomeBenefits() {
},
];
return (
<div className="relative z-20 py-10 lg:py-40 max-w-7xl mx-auto">
<div className="relative z-20 py-10 lg:py-24 max-w-7xl mx-auto">
<div className="px-12">
<Eyebrow className="text-center text-cyan-500">
Benefits
</Eyebrow>
<H2 className="text-3xl lg:text-5xl lg:leading-tight max-w-5xl mx-auto text-center tracking-tight font-medium text-black dark:text-white">
Why It Changes Everything
</H2>

10
src/pages/home/HomeGlobe.tsx
View File

@@ -35,7 +35,7 @@ export function WorldMap() {
>
<Eyebrow color="accent">Decentralized Network</Eyebrow>
<SectionHeader color="light">Project Mycelium is Live.</SectionHeader>
<P className=" mt-4 text-base leading-relaxed" color="light">
<P className=" mt-4" color="light">
Project Mycelium enables anyone to deploy
their own Internet infrastructure, anywhere.
</P>
@@ -67,7 +67,7 @@ export function WorldMap() {
>
<MagicCard
gradientColor="#334155"
className="shadow-xl shadow-cyan-500/15 border border-gray-500/50 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-xl hover:shadow-cyan-500/20"
className="border border-gray-500/30 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-xl hover:shadow-cyan-500/20"
>
<div><CT color="light" className="uppercase tracking-wide [text-shadow:0_0_12px_var(--color-cyan-500)]">CORES</CT></div>
<div><CountUpNumber end={54958} className="mt-2 text-3xl font-bold text-white [text-shadow:0_0_12px_var(--color-cyan-500)]" /></div>
@@ -86,7 +86,7 @@ export function WorldMap() {
>
<MagicCard
gradientColor="#334155"
className="shadow-xl shadow-cyan-500/15 border border-gray-500/50 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-xl hover:shadow-cyan-500/20"
className="border border-gray-500/30 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-xl hover:shadow-cyan-500/20"
>
<div><CT color="light" className="uppercase tracking-wide [text-shadow:0_0_12px_var(--color-cyan-500)]">NODES</CT></div>
<div><CountUpNumber end={1493} className="mt-4 text-3xl font-bold text-white [text-shadow:0_0_12px_var(--color-cyan-500)]" /></div>
@@ -105,7 +105,7 @@ export function WorldMap() {
>
<MagicCard
gradientColor="#334155"
className="shadow-xl shadow-cyan-500/15 border border-gray-500/50 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-xl hover:shadow-cyan-500/20"
className="border border-gray-500/30 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-xl hover:shadow-cyan-500/20"
>
<div><CT color="light" className="uppercase tracking-wide [text-shadow:0_0_12px_var(--color-cyan-500)]">SSD CAPACITY</CT></div>
<div><CountUpNumber end={5388956} className="mt-2 text-3xl font-bold text-white [text-shadow:0_0_12px_var(--color-cyan-500)]" /></div>
@@ -124,7 +124,7 @@ export function WorldMap() {
>
<MagicCard
gradientColor="#334155"
className="shadow-xl shadow-cyan-500/15 border border-gray-500/50 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-xl hover:shadow-cyan-500/20"
className="border border-gray-500/30 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-xl hover:shadow-cyan-500/20"
>
<div><CT color="light" className="uppercase tracking-wide [text-shadow:0_0_12px_var(--color-cyan-500)]">COUNTRIES</CT></div>
<div><CountUpNumber end={44} className="mt-2 text-3xl font-bold text-white [text-shadow:0_0_12px_var(--color-cyan-500)]" /></div>

12
src/pages/home/HomeSlider.tsx
View File

@@ -26,12 +26,12 @@ export function HomeSlider() {
}
import networkImage from "@/images/slider/network1.jpg";
import agentImage from "@/images/slider/agent1.jpg";
import cloudImage from "@/images/slider/cloud1.jpg";
import gpuImage from "@/images/slider/gpu1.jpg";
import computeImage from "@/images/slider/compute1.jpg";
import storageImage from "@/images/slider/storage1.jpg";
import networkImage from "/images/pages/network.webp";
import agentImage from "/images/pages/agent.webp";
import cloudImage from "/images/pages/cloud.webp";
import gpuImage from "/images/pages/gpu.webp";
import computeImage from "/images/pages/compute.webp";
import storageImage from "/images/pages/storage.webp";
const data = [
{

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

@@ -7,7 +7,7 @@ import { FadeIn } from "@/components/ui/FadeIn";
export function StackSectionLight() {
return (
<section className="relative w-full overflow-hidden py-24 lg:py-40 isolate">
<section className="relative w-full overflow-hidden py-24 isolate">
{/* === Background Layer === */}
<div className="absolute inset-0 z-0 bg-transparent">
{/* Central main aura */}
@@ -15,7 +15,7 @@ export function StackSectionLight() {
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(180,255,255,0.55) 0%, rgba(0,210,255,0.35) 35%, rgba(255,255,255,0) 55%)",
"radial-gradient(circle, rgba(180,255,255,0.55) 0%, rgba(0,210,255,0.35) 5%, rgba(255,255,255,0) 10%)",
filter: "blur(140px)",
}}
animate={{