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

refactor: standardize background color to #121212

Browse Source 
- Replaced inconsistent gray-900 and #171717 background colors with unified #121212 across all pages
- Removed unused imports from multiple component files
- Cleaned up trailing spaces in className attributes
This commit is contained in:
sasha-astiadi
2025-11-08 01:02:42 +01:00
parent 22e2e4b80c
commit a7dd803da2
28 changed files with 44 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/main.tsx
View File

@@ -1,7 +1,7 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './styles/tailwind.css'
import App from './App.tsx'
import App from './App'
createRoot(document.getElementById('root')!).render(
<StrictMode>

6
src/pages/agents/AgentBento.tsx
View File

@@ -94,12 +94,12 @@ export function AgentBento() {
>
{!card.noBorder && (
<div
className={`absolute inset-0 rounded-md border border-gray-800 bg-[#111212] ${card.rounded}`}
className={`absolute inset-0 rounded-md border border-gray-800 bg-[#111212] `}
/>
)}
<div
className={`relative flex lg:h-90 flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] ${card.innerRounded}`}
className={`relative flex lg:h-90 flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] `}
>
{/* ✅ VIDEO instead of animation */}
{card.video ? (
@@ -145,7 +145,7 @@ export function AgentBento() {
{!card.noBorder && (
<div
className={`pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 ${card.rounded}`}
className={`pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 `}
/>
)}
</div>

2
src/pages/agents/BentoSection.tsx
View File

@@ -69,7 +69,7 @@ export function BentoSection() {
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, amount: 0.2 }}
transition={{ duration: 0.45, delay: index * 0.1, ease: 'easeOut' }}
className="overflow-hidden rounded-2xl border border-gray-800 bg-gray-900 p-6 transition-all duration-300 hover:scale-105 hover:border-cyan-500 hover:shadow-lg"
className="overflow-hidden rounded-2xl border border-gray-800 bg-[#121212] p-6 transition-all duration-300 hover:scale-105 hover:border-cyan-500 hover:shadow-lg"
>
<video
src={item.video}

2
src/pages/agents/Companies.tsx
View File

@@ -1,7 +1,5 @@
"use client";
import { motion } from "framer-motion";
import { P, Eyebrow } from "@/components/Texts";
import { InfiniteMovingCards } from "@/components/magicui/infinite-moving-cards";

4
src/pages/cloud/CalltoAction.tsx
View File

@@ -5,9 +5,9 @@ import { Button } from "@/components/Button";
export function CallToAction() {
return (
<section className="relative overflow-hidden bg-gray-900">
<section className="relative overflow-hidden bg-[#121212]">
{/* ✅ Top horizontal line with spacing */}
<div className="max-w-7xl bg-[#111111] mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
<div className="max-w-7xl bg-[#121212] mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
<div className="w-full border-t border-l border-r border-gray-800" />
{/* ✅ Main boxed area */}

2
src/pages/cloud/CloudFeatures.tsx
View File

@@ -406,7 +406,7 @@ export function CloudFeatures() {
<section
id="overview"
aria-label="Features for investing all your money"
className="bg-gray-900 py-20 sm:py-32"
className="bg-[#121212] py-20 sm:py-32"
>
<Container>
<div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-3xl">

2
src/pages/cloud/archive/CloudGettingStarted.tsx
View File

@@ -69,7 +69,7 @@ export function CloudGettingStarted() {
return (
<section
id="getting-started"
className="relative overflow-hidden bg-gray-900 py-24 sm:py-32"
className="relative overflow-hidden bg-[#121212] py-24 sm:py-32"
>
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(34,211,238,0.12),_transparent_60%)]" />
<Container className="relative">

2
src/pages/compute/CallToAction.tsx
View File

@@ -5,7 +5,7 @@ import { Button } from "@/components/Button";
export function CallToAction() {
return (
<section className="relative overflow-hidden bg-gray-900">
<section className="relative overflow-hidden bg-[#121212] ">
{/* ✅ Top horizontal line with spacing */}
<div className="max-w-7xl bg-[#111111] mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
<div className="w-full border-t border-l border-r border-gray-800" />

4
src/pages/compute/ComputeArchitecture.tsx
View File

@@ -55,9 +55,9 @@ const deterministicCards = [
export function ComputeArchitecture() {
return (
<section className="relative w-full bg-[#171717] overflow-hidden">
<section className="relative w-full bg-[#121212] overflow-hidden">
{/* ✅ Top horizontal line */}
<div className="max-w-7xl bg-[#171717] mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
<div className="max-w-7xl bg-[#121212] mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
<div className="w-full border-t border-l border-r border-gray-800" />
<div className="mx-auto bg-[#111111] max-w-2xl px-6 lg:max-w-7xl lg:px-10 border border-t-0 border-b-0 border-gray-800">

2
src/pages/compute/ComputeCodeTabs.tsx
View File

@@ -72,7 +72,7 @@ export function ComputeCodeTabs() {
/>
<div className="mx-auto max-w-2xl sm:mx-0 sm:max-w-none">
<div className="w-screen overflow-hidden rounded-tl-xl bg-gray-900 ring-1 ring-white/10">
<div className="w-screen overflow-hidden rounded-tl-xl bg-[#121212] ring-1 ring-white/10">
{/* FILE TABS */}
<div className="flex bg-gray-800/40 ring-1 ring-white/5">

2
src/pages/compute/archive/ComputeDeveloperExperience.tsx
View File

@@ -99,7 +99,7 @@ export function ComputeDeveloperExperience() {
{sample.description}
</p>
</div>
<div className="mt-auto bg-gray-900 p-6">
<div className="mt-auto bg-[#121212] p-6">
<pre className="overflow-auto text-left text-xs leading-relaxed text-cyan-100">
<code>{sample.code}</code>
</pre>

4
src/pages/download/DevHub.tsx
View File

@@ -36,7 +36,7 @@ const features = [
export function DevHub() {
return (
<div className="bg-gray-900 py-24 sm:py-32">
<div className="bg-[#121212] py-24 sm:py-32">
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-5">
<div className="col-span-2">
@@ -54,7 +54,7 @@ export function DevHub() {
href={feature.href}
target="_blank"
rel="noopener noreferrer"
className="block rounded-2xl border border-gray-800 bg-gray-900/40 p-6 shadow-sm transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:bg-gray-800 hover:shadow-lg hover:shadow-cyan-500/20"
className="block rounded-2xl border border-gray-800 bg-[#121212] /40 p-6 shadow-sm transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:bg-gray-800 hover:shadow-lg hover:shadow-cyan-500/20"
>
<feature.icon aria-hidden="true" className="mb-4 h-6 w-6 flex-none text-cyan-500" />
<dt className="font-semibold text-white">{feature.name}</dt>

2
src/pages/gpu/GpuDesign.tsx
View File

@@ -1,5 +1,3 @@
import { Container } from '@/components/Container'
import { Eyebrow, H3, CT } from '@/components/Texts'
import {
BoltIcon,
BanknotesIcon,

1
src/pages/gpu/GpuOverview.tsx
View File

@@ -8,7 +8,6 @@ import {
import { Container } from '@/components/Container'
import { Eyebrow, SectionHeader, P } from '@/components/Texts'
import { Button } from '@/components/Button'
const coreFeatures = [
{

2
src/pages/gpu/archive/GpuGettingStarted.tsx
View File

@@ -42,7 +42,7 @@ export function GpuGettingStarted() {
return (
<section
id="gpu-getting-started"
className="relative overflow-hidden bg-gray-900 py-24 sm:py-32"
className="relative overflow-hidden bg-[#121212] py-24 sm:py-32"
>
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(34,211,238,0.12),transparent_60%)]" />
<Container className="relative">

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

@@ -3,9 +3,9 @@ import { Button } from '@/components/Button'
export function CallToAction() {
return (
<section className='relative overflow-hidden bg-gray-900'>
<section className='relative overflow-hidden bg-[#121212]'>
{/* ✅ Top horizontal line with spacing */}
<div className="max-w-7xl bg-[#111111] mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
<div className="max-w-7xl bg-[#121212] mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
{/* === Content === */}
<div className="w-full border-t border-l border-r border-gray-800 " />
<div

2
src/pages/home/StackSectionDark.tsx
View File

@@ -7,7 +7,7 @@ import { FadeIn } from "@/components/ui/FadeIn";
export function StackSectionDark() {
return (
<section className="relative w-full bg-[#171717] overflow-hidden">
<section className="relative w-full bg-[#121212] overflow-hidden">
{/* ✅ Top horizontal line with spacing */}
<div className="max-w-7xl bg-[#111111] mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
<div className="w-full border-t border-l border-r border-gray-800" />

2
src/pages/home/archive/HomeFeaturesDark.tsx
View File

@@ -42,7 +42,7 @@ export function HomeFeaturesDark() {
<div className="mx-auto mt-16 max-w-2xl lg:max-w-7xl">
<div className="grid grid-cols-1 gap-x-12 gap-y-12 lg:grid-cols-3">
{features.map((feature) => (
<div key={feature.name} className="relative flex flex-col p-8 rounded-3xl border border-gray-800 bg-gray-900/50 backdrop-blur-lg overflow-hidden shadow-2xl hover:shadow-cyan-500/40 hover:border-cyan-500 hover:scale-105 transform transition-all duration-300">
<div key={feature.name} className="relative flex flex-col p-8 rounded-3xl border border-gray-800 bg-[#121212] /50 backdrop-blur-lg overflow-hidden shadow-2xl hover:shadow-cyan-500/40 hover:border-cyan-500 hover:scale-105 transform transition-all duration-300">
<div className="w-20 h-20 bg-gray-800/80 rounded-full flex items-center justify-center">
<feature.icon className="h-12 w-12 text-cyan-500" />
</div>

2
src/pages/network/About.tsx
View File

@@ -6,7 +6,7 @@ export function About() {
return (
<section
id="about"
className="relative overflow-hidden bg-gray-900 py-20 lg:py-32 lg:top-0 top-0"
className="relative overflow-hidden bg-[#121212] py-20 lg:py-32 lg:top-0 top-0"
>
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
<CircleBackground color="#06b6d4" className="animate-spin-slower" />

2
src/pages/network/Features.tsx
View File

@@ -3,7 +3,7 @@ import MessageBus from './animations/MessageBus'
import ProxyDetection from './animations/ProxyDetection'
import ProxyForwarding from './animations/ProxyForwarding'
import ContentDistribution from './animations/ContentDistribution'
import { H2, P, H3, CT, CP, Eyebrow } from '@/components/Texts'
import { P, H3, Eyebrow } from '@/components/Texts'
export function Features() {
return (

2
src/pages/network/Hero.tsx
View File

@@ -2,7 +2,7 @@ import { useId } from 'react'
import { Container } from '@/components/Container'
import { Button } from '@/components/Button'
import phoneFrame from '../../images/phoneframe.png'
import { H3, Eyebrow, P, CT, CP } from "@/components/Texts";
import { H3, P, CT } from "@/components/Texts";
function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
let id = useId()

16
src/pages/network/NetworkUsecases.tsx
View File

@@ -1,7 +1,7 @@
"use client";
import { useRef } from "react";
import { Eyebrow, SectionHeader, P, CT, CP } from "@/components/Texts";
import { Eyebrow, SectionHeader, P } from "@/components/Texts";
import { IoArrowBackOutline, IoArrowForwardOutline } from "react-icons/io5";
import {
LockClosedIcon,
@@ -100,20 +100,22 @@ export function NetworkUsecases() {
) : (
<>
{/* ✅ Icon above title */}
{item.icon && (
<div className="h-10 w-10 flex items-center justify-center rounded-xl bg-gray-100 mb-4">
<item.icon className="h-6 w-6 text-cyan-600" />
</div>
)}
<CT className="text-lg font-semibold text-gray-900">
<p className="text-lg font-semibold text-gray-900">
{item.title}
</CT>
</p>
<CP className="mt-2 text-gray-600 leading-snug">
<p className="mt-2 text-gray-600 leading-snug">
{item.description}
</CP>
<CP className="mt-3 text-xs font-medium text-cyan-700">
</p>
<p className="mt-3 text-xs font-medium text-cyan-700">
{item.ideal}
</CP>
</p>
</>
)}
</li>

2
src/pages/storage/CallToAction.tsx
View File

@@ -5,7 +5,7 @@ import { Button } from "@/components/Button";
export function CallToAction() {
return (
<section className="relative overflow-hidden bg-gray-900">
<section className="relative overflow-hidden bg-[#121212] ">
{/* ✅ Top horizontal line with spacing */}
<div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
<div className="w-full border-t border-l border-r border-gray-800" />

6
src/pages/storage/StorageArchitecture.tsx
View File

@@ -2,7 +2,7 @@
import { useState } from "react";
import { Container } from "@/components/Container";
import { Eyebrow, SectionHeader, P, H3, H4, H5, CT, CP } from "@/components/Texts";
import { Eyebrow, P, H3, H5, CP } from "@/components/Texts";
const architecture = [
{
@@ -49,7 +49,7 @@ export function StorageArchitecture() {
{architecture.map((item, index) => (
<button
key={item.title}
className={`w-full border bg-[#171717] text-left border-white/10 p-4 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/8
className={`w-full border bg-[#121212] text-left border-white/10 p-4 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/8
${active === index
? "border-cyan-400 shadow-md"
: "border-gray-800 hover:border-cyan-200 hover:shadow-sm"}`}
@@ -61,7 +61,7 @@ export function StorageArchitecture() {
</div>
{/* RIGHT — 2 columns */}
<div className="lg:col-span-2 flex items-center justify-center border border-gray-800 bg-[#171717] p-10 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/8" >
<div className="lg:col-span-2 flex items-center justify-center border border-gray-800 bg-[#121212] p-10 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/8" >
<div
key={active} // ✅ force smooth transition
className="transition-opacity duration-300 opacity-100 animate-fade"

2
src/pages/storage/StorageCapabilitiesNew.tsx
View File

@@ -1,7 +1,7 @@
"use client";
import { useRef } from "react";
import { Eyebrow, CP, CT, H5 } from "@/components/Texts";
import { Eyebrow, H5 } from "@/components/Texts";
import { IoArrowBackOutline, IoArrowForwardOutline } from "react-icons/io5";
const capabilities = [

2
src/pages/storage/StorageCoreValue.tsx
View File

@@ -1,7 +1,7 @@
"use client";
import { Container } from "@/components/Container";
import { H3, P, Eyebrow, CT, CP } from "@/components/Texts";
import { H3, P, Eyebrow, CT } from "@/components/Texts";
import Encrypted from "./animation/Encrypted";
import SelfHealing from "./animation/SelfHealing";
import Residency from "./animation/Residency";

2
src/pages/storage/StorageOverview.tsx
View File

@@ -1,4 +1,4 @@
import { Eyebrow, SectionHeader, P, Small } from '@/components/Texts'
import { Small } from '@/components/Texts'
const highlights = [
{

2
src/pages/storage/archive/StorageDeveloperExperience.tsx
View File

@@ -75,7 +75,7 @@ export function StorageDeveloperExperience() {
return (
<section
id="storage-developer-experience"
className="bg-gray-900 py-24 sm:py-32"
className="bg-[#121212] py-24 sm:py-32"
>
<Container>
<div className="mx-auto max-w-3xl text-center">