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

feat: enhance UI with glowing effects and visual improvements

Browse Source 
- Added new MagicCard component for interactive hover effects with gradient lighting
- Enhanced CubeLight component with cyan glow effects and improved visual styling
- Added new GlowingEffect component for dynamic lighting animations
- Updated StackedCubesLight with ambient gradient background and smoother transitions
- Added tracking-wide property to CP text component for better readability
- Added new networkhero.png image asset
This commit is contained in:
sasha-astiadi
2025-10-24 20:41:42 +02:00
parent 94f4e72e57
commit 68b2119c76
8 changed files with 430 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,6 +4,7 @@ import { Globe } from "@/components/ui/Globe"
import { motion } from "framer-motion"
import { P, CT, CP, SectionHeader, Eyebrow } from "@/components/Texts"
import { CountUpNumber } from '@/components/CountUpNumber'
import { MagicCard } from '@/components/magicui/magic-card'
export function WorldMap() {
return (
@@ -62,13 +63,18 @@ export function WorldMap() {
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true, amount: 0.3 }}
transition={{ duration: 0.5, delay: 0.4, ease: "easeOut" }}
className="lg:absolute lg:top-12 lg:-left-12 w-80 rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
className="lg:absolute lg:top-12 lg:-left-12 w-80"
>
<div><CT color="light" className="uppercase tracking-wide">CORES</CT></div>
<div><CountUpNumber end={54958} className="mt-2 text-3xl font-bold text-white" /></div>
<CP color="light" className="mt-2 text-sm">
Total Central Processing Unit Cores available on the grid.
</CP>
<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"
>
<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>
<CP color="light" className="mt-2 text-sm">
Total Central Processing Unit Cores available on the grid.
</CP>
</MagicCard>
</motion.div>
<motion.div
@@ -76,13 +82,18 @@ export function WorldMap() {
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true, amount: 0.3 }}
transition={{ duration: 0.5, delay: 0.5, ease: "easeOut" }}
className="lg:absolute lg:-top-10 lg:right-0 w-80 rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
className="lg:absolute lg:-top-10 lg:right-0 w-80"
>
<div><CT color="light" className="uppercase tracking-wide">NODES</CT></div>
<div><CountUpNumber end={1493} className="mt-4 text-3xl font-bold text-white" /></div>
<CP color="light" className="mt-2 text-sm">
Total number of nodes on the grid.
</CP>
<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"
>
<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>
<CP color="light" className="mt-2 text-sm">
Total number of nodes on the grid.
</CP>
</MagicCard>
</motion.div>
<motion.div
@@ -90,13 +101,18 @@ export function WorldMap() {
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true, amount: 0.3 }}
transition={{ duration: 0.5, delay: 0.6, ease: "easeOut" }}
className="lg:absolute lg:bottom-28 lg:-left-12 w-80 rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
className="lg:absolute lg:bottom-28 lg:-left-12 w-80"
>
<div><CT color="light" className="uppercase tracking-wide">SSD CAPACITY</CT></div>
<div><CountUpNumber end={5388956} className="mt-2 text-3xl font-bold text-white" /></div>
<CP color="light" className="mt-2 text-sm">
Total GB amount of storage (SSD, HDD, & RAM) on the grid.
</CP>
<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"
>
<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>
<CP color="light" className="mt-2 text-sm">
Total GB amount of storage (SSD, HDD, & RAM) on the grid.
</CP>
</MagicCard>
</motion.div>
<motion.div
@@ -104,13 +120,18 @@ export function WorldMap() {
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true, amount: 0.3 }}
transition={{ duration: 0.5, delay: 0.7, ease: "easeOut" }}
className="lg:absolute lg:top-47 lg:right-0 w-80 rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
className="lg:absolute lg:top-47 lg:right-0 w-80"
>
<div><CT color="light" className="uppercase tracking-wide">COUNTRIES</CT></div>
<div><CountUpNumber end={44} className="mt-2 text-3xl font-bold text-white" /></div>
<CP color="light" className="mt-2 text-sm">
Total number of countries with active nodes.
</CP>
<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"
>
<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>
<CP color="light" className="mt-2 text-sm">
Total number of countries with active nodes.
</CP>
</MagicCard>
</motion.div>
</div>
</div>