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

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={{