ourworld_web/www_projectmycelium_com
22
0
Fork 0
forked from emre/www_projectmycelium_com
Code Issues 4 Pull Requests 1 Projects Releases Activity

Compare commits

merge into: ourworld_web:development_backup
Branches Tags
ourworld_web:main ourworld_web:development ourworld_web:development_ehab ourworld_web:development_logos ourworld_web:development_sasha ourworld_web:development_backup ourworld_web:development_v3 ourworld_web:main_backup ourworld_web:main_sasha_dark emre:development_sasha emre:development emre:development_backup emre:main emre:main_backup emre:main_sasha_dark
...
pull from: ourworld_web:main
Branches Tags
ourworld_web:main ourworld_web:development ourworld_web:development_ehab ourworld_web:development_logos ourworld_web:development_sasha ourworld_web:development_backup ourworld_web:development_v3 ourworld_web:main_backup ourworld_web:main_sasha_dark emre:development_sasha emre:development emre:development_backup emre:main emre:main_backup emre:main_sasha_dark

140 Commits
developmen ... main

Author SHA1 Message Date
sasha-astiadi
67fb2fd4ac refactor: remove arrow icons and clean up "Explore Docs" button text across multiple hero sections 
- Removed arrow icon (→) from "Explore Docs" buttons in CloudHeroNew, GpuHero, and StorageHero components
- Removed ArrowRightIcon from HomeCTA "Explore Docs" button
- Fixed whitespace formatting in CloudArchitecture "Explore Docs" button
- Added comment block in Homepod for commented out "Explore Docs" button
 2025-11-24 15:07:56 +01:00
sasha-astiadi
3071e87a9d Merge branch 'development' 2025-11-24 14:56:34 +01:00
sasha-astiadi
a0fb98409f refactor: update CallToAction "Join the Network" button to scroll to download section instead of node-how-it-works 
- Changed smoothScrollToElement target from 'node-how-it-works' to 'download' section
- Maintained 1200ms scroll duration
 2025-11-24 14:50:19 +01:00
sasha-astiadi
c9335d2c5a refactor: update CallToAction "Join the Network" button to use smooth scroll instead of navigation link 
- Changed Button from navigation link with to="/network" to onClick handler with smooth scroll behavior
- Added smoothScrollToElement import from @/utils/scroll
- Implemented smooth scroll to #node-how-it-works section with 1200ms duration
- Removed to prop from Button component
 2025-11-24 14:40:44 +01:00
sasha-astiadi
05974f5b0e Merge branch 'development' 2025-11-24 14:17:42 +01:00
sasha-astiadi
6b4c7b3329 refactor: implement smart navigation for "Get Mycelium Connector" button with smooth scroll utility 
- Added smoothScrollToElement utility function in src/utils/scroll.ts with easeInOutQuad animation and configurable duration
- Changed Header and HeaderDark "Get Mycelium Connector" button from static /download link to onClick handler with conditional navigation
- Added handleGetConnectorClick function that scrolls to #download section when on /network page, otherwise navigates to /network
- Change
 2025-11-24 14:13:40 +01:00
sasha-astiadi
a22a8ddcc9 refactor: update navigation links in CallToAction and NodeHero components 
- Changed CallToAction "Join the Network" button from /network#download to /network
- Changed NodeHero "Explore Docs" button from #node-architecture anchor to external ThreeFold hosting FAQ link with target="_blank"
 2025-11-24 13:29:07 +01:00
sasha-astiadi
a00c090162 Merge branch 'development' 2025-11-24 13:10:41 +01:00
sasha-astiadi
8e621c28b3 refactor: update NodeHero "How it works" button to use smooth scroll with onClick handler instead of anchor link 
- Changed Button from anchor link with to="#node-getting-started" to onClick handler with smooth scroll behavior
- Added id="node-how-it-works" to NodeSteps section for scroll target
- Removed as="a" prop from Button component
- Implemented scrollIntoView with smooth behavior and start block positioning
 2025-11-24 13:09:22 +01:00
ehab-hassan
3a217c2d66 updated search keyword 2025-11-24 10:17:16 +02:00
ehab-hassan
ea8c3546c9 addedd png logo for google search 2025-11-23 13:20:37 +02:00
ehab-hassan
c784783242 added sitemap 2025-11-23 12:35:59 +02:00
sasha-astiadi
09ac38f598 refactor: remove unused imports from MediaColors and MediaType components 
- Removed unused Eyebrow and P imports from MediaColors component
- Removed unused logo_light and logo_dark data arrays from MediaColors component
- Removed unused H4 import from MediaType component
 2025-11-21 17:52:35 +01:00
sasha-astiadi
c68a46691f refactor: improve MediaHero and MediaType responsive design for mobile and tablet viewports 
- Changed MediaHero H4 top margin from mt-8 to lg:mt-8 mt-4 for better mobile spacing
- Changed download button icon size from h-12 w-12 to h-5 w-5 md:h-6 md:w-6 with responsive padding and text sizing
- Changed logo_dark grid gap from gap-2 lg:gap-0 to gap-0 for consistent spacing
- Changed logo_dark border color from border-gray-100 to border-gray-800 for better dark background contrast
- Changed Media
 2025-11-21 17:51:20 +01:00
sasha-astiadi
5a6d58dd85 refactor: enhance MediaType typography section with download button and text primitive examples 
- Added download button for Mulish font family with hover states and download icon
- Changed H3 title color from default to text-gray-900 and removed top margin
- Added descriptive paragraph explaining Mycelium's type scale
- Added typography showcase section displaying all text primitives (Eyebrow, H3, P, CT, CP) with usage specifications and examples
- Changed MediaColors Deep Gray description text
 2025-11-21 17:41:39 +01:00
sasha-astiadi
fdd0109ffc refactor: remove unused audience images and add Media Kit page route 
- Deleted 8 audience images from public/images/audience/ directory (1.jpg through 8.jpg)
- Deleted 8 audience images from public/images/audiences/ directory (1.jpg through 8.jpg)
- Added lazy-loaded MediaPage route at /mediakit path in App.tsx
- Added Media Kit navigation link to Footer component with hover styling
 2025-11-21 17:32:30 +01:00
sasha-astiadi
1ec9741283 refactor: update logomark and main logo SVG dimensions and colors for improved visual consistency 
- Changed logomark.svg dimensions from 77x72 to 100x100 and updated viewBox, added transform and clip paths for repositioned elements
- Changed stroke color from #43d7ff to #22d3ee across all logo SVG elements
- Updated Footer logomark size from h-13 w-13 to h-20 w-20 and removed ml-4 margin
- Changed mainlogo.svg stroke width from 9 to 8 and adjusted transform matrices and coordinates for better alignment
 2025-11-21 16:20:57 +01:00
sasha-astiadi
5d7272ff6c refactor: update cyan accent colors from cyan-500 to cyan-400 across Button, Text, and multiple page components for consistent branding 
- Changed Button solid cyan variant hover from bg-cyan-600 to bg-cyan-400 and active from bg-cyan-600 to bg-cyan-500
- Changed Button outline variants hover/active states from cyan-500 to cyan-400 across cyan, gray, and white variants
- Changed Button link dark variant hover from text-cyan-500 to text-cyan-400
- Changed Text component accent and cyan color variants
 2025-11-21 16:16:46 +01:00
sasha-astiadi
c68b4e5de9 Merge branch 'development' 2025-11-20 13:37:31 +01:00
sasha-astiadi
c3b171e3b2 refactor: update cyan accent colors from cyan-400 to cyan-500 across multiple components for improved contrast 
- Changed AgentBento subtitle text from text-cyan-400 to text-cyan-500
- Changed CloudIntro key capabilities label from text-cyan-400 to text-cyan-500
- Changed ComputeCapabilities eyebrow from text-cyan-400 to text-cyan-500
- Changed GpuCapabilities link from text-cyan-400/hover:text-cyan-300 to text-cyan-500/hover:text-cyan-400
- Changed GpuOverview eyebrow from text-cyan-400 to text-cyan-500
 2025-11-20 13:35:10 +01:00
ehab-hassan
ed995113df remove nvm 2025-11-20 13:20:23 +02:00
ehab-hassan
357b2f58c3 update SEO 2025-11-20 13:14:14 +02:00
sasha-astiadi
7d8ae1d26d refactor: add responsive vertical translation to animation SVGs with lg breakpoint 
- Changed vertical translate classes to only apply on large screens (lg:) across agent animations (AgentCoordination, DeterministicExecution, Fungistor, Herodb, MOSSandboxes, MyceliumMesh)
- Changed NoCentral home animation from -translate-y-10 to lg:-translate-y-10
- Updated pods animations with mobile-first approach: Connectivity (-translate-y-12 mobile, lg:translate-y-0), DataControl (maintains -translate-y-12 on
 2025-11-19 19:01:17 +01:00
sasha-astiadi
3c4da26ecb refactor: reduce cyan glow opacity in CallToAction components across all pages for subtler visual effect 
- Changed fillOpacity from 0.4 to 0.3 in mycelium-cyan-glow radial gradient circles across agents, cloud, compute, gpu, home, network, nodes, pods, and storage CallToAction components
 2025-11-19 18:49:53 +01:00
sasha-astiadi
023921a6cc refactor: adjust NoSinglePoint animation width from 720 to 760 for improved aspect ratio alignment 
- Changed W constant from 720 to 760 to better match aspect ratio with other home animations
 2025-11-19 18:45:34 +01:00
sasha-astiadi
8e033a3c21 refactor: add vertical translation to agent animation SVGs for improved positioning 
- Added -translate-y-6 to AgentCoordination and DeterministicExecution SVGs
- Added -translate-y-16 to Fungistor and MOSSandboxes SVGs
- Added -translate-y-18 to Herodb SVG
- Added -translate-y-4 to MyceliumMesh SVG
 2025-11-19 18:43:54 +01:00
sasha-astiadi
01b1c20b60 refactor: adjust AgentHeroAlt text container width and split description into two paragraphs 
- Changed max-w-2xl to max-w-xl for narrower text container
- Split description text into two separate P components with mt-4 spacing between them for improved readability
 2025-11-19 18:37:36 +01:00
sasha-astiadi
c962743737 refactor: adjust text colors, animation positioning, and hover effects across multiple components 
- Changed AgentHeroAlt and Homepod description text from text-gray-800 to text-gray-600 for softer contrast
- Added vertical translation to animation SVGs: NoCentral (-translate-y-10), DataControl (-translate-y-12), Security (translate-y-6), Resilience (translate-y-5)
- Updated Resilience and Security danger color from red (#ff4d4d) to gray (#9ca3af)
- Changed NodeBenefits card border from border-gray-300
 2025-11-19 18:33:56 +01:00
sasha-astiadi
e62c4a5688 refactor: standardize background color from off-white to pure white across multiple components 
- Changed bg-[#FDFDFD] to bg-white in AgentPro, CloudPros, and PodsPro intro sections
- Added explicit bg-white class to PodsFeatures Container component for consistency
 2025-11-19 18:19:04 +01:00
sasha-astiadi
6b735b5a40 refactor: update line-height in CP text component and increase vertical padding in NodeSpecs cards 
- Changed CP component line-height from leading-tight to leading-normal for improved readability
- Increased NodeSpecs inner card vertical padding from py-4 to py-6 for better spacing
 2025-11-19 18:15:54 +01:00
sasha-astiadi
7b9cf135e4 refactor: update button colors in CallToAction and Hero components for improved contrast 
- Changed link button color from cyan to white in agents, home, and network CallToAction components
- Updated network Hero secondary button from dark to gray outline variant
 2025-11-19 18:13:30 +01:00
sasha-astiadi
544d7d541b refactor: remove unused video assets from public directory 
- Deleted 14 unused MP4 video files (agent, benefits, chip_vid, cloud, cta, deterministic, fungistor, herodb, mesh, mhero, mycelium2, sandbox, universal)
- Removed 1 unused JPG image file (benefits.jpg)
 2025-11-19 18:05:36 +01:00
sasha-astiadi
b21f874a05 refactor: adjust spacing and text styling in network feature components 
- Reduced NetworkCapabilities description margin from mt-3 to mt-2 and removed text-lg class
- Changed PrimaryFeatures mobile description from color="secondary" to text-gray-200 with mt-2 (note: appears to have typo "mt-" instead of "mt-2")
 2025-11-19 18:04:06 +01:00
sasha-astiadi
e6b194e8c7 refactor: adjust spacing and styling across multiple components for visual consistency 
- Increased HomeAurora subtitle margin from mt-4 to mt-6 for better spacing
- Added bg-white to HomeDesign content container for explicit background
- Removed bg-white from HomeTab top separator div
- Reduced network Hero title margin from mt-8 to mt-4 and second paragraph margin from mt-6 to mt-4
- Changed network Hero secondary button variant from cyan to dark
- Reduced NetworkPros title margin from mt-4 to mt-2
 2025-11-19 18:00:35 +01:00
sasha-astiadi
a8105a0551 refactor: replace custom links with Button component in CallToAction components 
- Replaced custom <a> tag with Button component (as="a", variant="link", color="cyan") in agents CallToAction
- Replaced Link component with Button component (variant="link", color="cyan") in network CallToAction
- Removed unused Link import from network CallToAction
- Standardized link styling across CallToAction components for consistency
 2025-11-19 17:51:30 +01:00
sasha-astiadi
de5d990fc9 refactor: update page title/description and enhance HomeTab card hover effects 
- Changed page title from "Unleash the Power of Decentralized Networks" to "Built for Digital Sovereignty"
- Updated meta description to emphasize sovereign peer-to-peer network and user-controlled infrastructure
- Refactored HomeTab card hover effects: moved scale transform from inner div to parent Link element
- Added border-transparent with hover:border-cyan-500 to card outline divs for cleaner hover state
- Remove
 2025-11-19 17:45:39 +01:00
sasha-astiadi
29d2b76db9 refactor: adjust PodsHow layout spacing and reorder bottom border elements 
- Added lg:-mt-8 negative margin to left content div for better vertical alignment on large screens
- Reordered bottom border elements: moved full-width border-b before max-w-7xl container
- Added bg-transparent class to max-w-7xl container div
- Added descriptive comment for bottom horizontal line section
 2025-11-19 17:34:32 +01:00
sasha-astiadi
a0beec808e refactor: adjust PodsWhat grid gap and icon size for better visual balance 
- Reduced grid gap from gap-12 to gap-8 for tighter spacing between pod cards
- Increased icon dimensions from h-6 w-6 to h-10 w-10 for improved visual prominence
 2025-11-19 17:31:52 +01:00
sasha-astiadi
96c445aa41 refactor: update outline gray button border color from gray-300 to gray-200 
- Changed border-gray-300 to border-gray-200 in outline gray variant for consistency with other border color updates across the application
 2025-11-19 17:29:30 +01:00
sasha-astiadi
ce4b4b3360 refactor: update border colors from gray-200 to gray-100 in HomeDesign and add overflow-hidden to pods CallToAction 
- Changed border-gray-200 to border-gray-100 across HomeDesign component borders and benefit cards
- Added overflow-hidden class to pods CallToAction main container div
 2025-11-19 17:25:34 +01:00
sasha-astiadi
c849c74a53 refactor: enhance CallToAction cyan glow visibility and add overflow-hidden across all pages 
- Increased cyan radial glow fillOpacity from 0.2 to 0.4 for better visibility
- Added overflow-hidden class to main container div to prevent glow overflow
- Applied changes consistently across agents, cloud, compute, gpu, network, nodes, pods, and storage CallToAction components
 2025-11-19 17:23:08 +01:00
sasha-astiadi
7bc895d8be refactor: update favicon and adjust Footer tagline and NoSinglePoint animation dimensions 
- Replaced favicon.ico with new version
- Changed Footer tagline from "Unleash the Power of Decentralization" to "Built for Digital Sovereignty"
- Adjusted NoSinglePoint animation dimensions from 720x540 to 720x420 for better alignment with other home animations
- Updated dimension comments to reflect aspect ratio and visual height alignment goals
 2025-11-19 17:15:03 +01:00
sasha-astiadi
c0b84fd578 refactor: optimize logomark.svg file size and structure 
- Minified SVG markup by removing unnecessary whitespace and line breaks
- Consolidated SVG definition into single line for improved loading performance
- Maintained all visual attributes and rendering properties
- No changes to actual logo appearance or dimensions
 2025-11-19 16:49:53 +01:00
sasha-astiadi
6d96ff9ea8 refactor: remove placeholder CTAs and links across multiple pages 
- Removed unused Button imports from AgentHeroAlt, GallerySection, ComputeCapabilities, and StorageCapabilitiesNew
- Replaced placeholder buttons/links with TODO comments indicating future implementation
- Changed StorageCoreValue value items from <a> to <div> and removed href/target/rel attributes
- Added descriptive TODO comments explaining what was previously rendered and what needs to be added
- Affected components: AgentHeroAlt (
 2025-11-19 16:42:48 +01:00
sasha-astiadi
f1e1721b25 refactor: simplify MailerLite integration in Homepod component 
- Removed unused React import
- Removed comments about global types file setup
- Replaced window.ml_account type checking with inline type assertion using (window as any)
- Simplified function existence check to use typeof === 'function'
- Streamlined inline comments for clarity
 2025-11-19 16:09:47 +01:00
sasha-astiadi
aed3e8ed25 Merge branch 'development_ehab' into development 2025-11-19 16:07:45 +01:00
sasha-astiadi
f126287018 refactor: add line break to HomeAurora heading for improved readability 
- Added <br /> tag to split "Private, Distributed Infrastructure Built" and "for Digital Sovereignty" across two lines
- Removed trailing whitespace from first line of heading text
 2025-11-19 16:05:15 +01:00
sasha-astiadi
9f1e78e116 refactor: hide empty architecture card placeholder on mobile 
- Added hidden md:flex classes to empty architecture card placeholder div
- Maintains desktop visibility while hiding on mobile for better responsive layout
 2025-11-19 16:03:05 +01:00
ehab-hassan
d469bb7b99 add wishlist 2025-11-19 16:23:53 +02:00
sasha-astiadi
97fdf3aa4f Merge remote-tracking branch 'origin/development_ehab' into development 2025-11-19 13:10:57 +01:00
sasha-astiadi
c1ca5e35f0 refactor: add link variant to Button component and enhance CallToAction and HomeDesign styling 
- Added 'link' variant to Button with baseStyles and variantStyles for cyan, white, and dark colors
- Updated Button type definitions to include link variant with proper color options
- Refactored default variant/color logic to use explicit conditionals for type safety
- Changed outline variant border from single to border-2 and added font-semibold
- Updated outline variant hover states to include text
 2025-11-19 13:09:29 +01:00
sasha-astiadi
e5ed88b676 refactor: update DevHub and DownloadHero layout with consistent borders and spacing 
- Changed DevHub from div to section with max-w-8xl container
- Added top spacing divider with py-6 and gray-800 borders to DevHub
- Added top and side borders (border-t, border-l, border-r) to DevHub content area
- Changed DevHub background to #111111 with reduced padding (py-12)
- Added bottom border and spacing divider to DevHub matching NetworkDownload pattern
- Changed DownloadHero from div to section with i
 2025-11-19 12:56:36 +01:00
sasha-astiadi
6beb9c1432 refactor: update logo assets and fix logo paths in Header and Footer components 
- Added mainlogo.png to public/images directory
- Created mainlogo.svg and logomark.svg in src/images/logos directory
- Updated Header and HeaderDark to use mainlogo.svg instead of logo_1.png
- Fixed Footer logomark path from /images/logomark.svg to src/images/logos/logomark.svg
 2025-11-19 12:48:55 +01:00
sasha-astiadi
a9f53224cf refactor: add spacing divider below NodeProducts bottom border 
- Removed bg-[#121212] from bottom border div
- Added transparent spacing divider with py-6 padding and gray-800 side borders
- Updated comment to indicate spacing addition
 2025-11-19 12:33:28 +01:00
sasha-astiadi
3df73ec418 refactor: add mobile hero images to AgentHeroAlt, NodeHero, and Homepod and adjust padding 
- Added mobile-only hero images with mb-8 spacing and md:hidden visibility
  - AgentHeroAlt: /images/mobile/agents.jpg
  - NodeHero: /images/mobile/nodes.jpg
  - Homepod: /images/mobile/pods.jpg
- Changed vertical padding from py-16 to pb-12 pt-4 for mobile, maintaining lg:py-24 for desktop
- Positioned mobile images above content with w-full and object-cover styling
 2025-11-19 12:32:07 +01:00
sasha-astiadi
c6efc29ab6 refactor: add mobile hero image to CloudHeroNew and adjust padding 
- Added mobile-only hero image (/images/mobile/cloudpage.jpg) with mb-8 spacing and md:hidden visibility
- Changed vertical padding from py-16 to pb-12 pt-4 for mobile, maintaining lg:py-24 for desktop
- Positioned mobile image above content with w-full and object-cover styling
 2025-11-19 12:27:06 +01:00
sasha-astiadi
bec52e7185 refactor: add mobile hero image to HomeAurora and adjust padding 
- Added mobile-only hero image (/images/mobile/homepage.jpg) with mb-8 spacing and md:hidden visibility
- Changed vertical padding from py-16 to pb-12 pt-8 for mobile, maintaining lg:py-32 for desktop
- Positioned mobile image above content with w-full and object-cover styling
 2025-11-19 12:24:22 +01:00
sasha-astiadi
29f713cd2f refactor: make CallToAction description text responsive across all pages 
- Changed text-lg to lg:text-lg text-base for responsive font sizing on mobile
- Applied to description paragraphs in CallToAction components across agents, compute, gpu, home, network, nodes, pods, and storage pages
- Added leading-normal class to PodsHow animated text span for consistent line height
 2025-11-19 12:11:27 +01:00
sasha-astiadi
d8a7a7331a refactor: add device icons to PodsFeatures cards and wrap PodsPage sections with AnimatedSection 
- Added useId import for unique gradient IDs in SVG icons
- Created six device icon components: DeviceArrowIcon, DeviceCardsIcon, DeviceClockIcon, DeviceListIcon, DeviceLockIcon, DeviceChartIcon
- Mapped icons array to use cases with corresponding device icons
- Updated PodsFeatures to render icons above card titles with h-8 w-8 sizing
- Added mt-6 spacing to card titles for icon separation
- Wrapped all
 2025-11-19 12:11:19 +01:00
ehab-hassan
3f89d1c441 add some padding at mobile 2025-11-19 11:20:12 +02:00
ehab-hassan
fa30aeff43 make map load fast 2025-11-19 10:56:29 +02:00
ehab-hassan
cbbc87cc29 update map with nodes dynamic 2025-11-19 10:24:15 +02:00
ehab-hassan
8dfc46cabe Replace static actual grid data 2025-11-18 16:43:23 +02:00
sasha-astiadi
00c5f7f880 refactor: revert border colors from gray-200 to gray-100 in SecondaryFeatures 
- Changed border-gray-200 back to border-gray-100 for top/bottom horizontal lines and spacing dividers
- Maintained border-gray-200 for main container borders
 2025-11-18 14:56:28 +01:00
sasha-astiadi
2dbcda4997 refactor: update border colors from gray-100 to gray-200 in SecondaryFeatures 
- Changed all border-gray-100 classes to border-gray-200 for increased contrast
- Applied to top/bottom horizontal lines, container borders, and feature card borders
 2025-11-18 14:55:27 +01:00
sasha-astiadi
979d151537 refactor: reduce top margin in Nodes CallToAction CTA section 
- Changed top margin from mt-10 to mt-6 for CTA cards container for tighter spacing
 2025-11-18 14:54:04 +01:00
sasha-astiadi
252e2335c2 refactor: add text-black color to NodeSteps circle numbers for better contrast 
- Added text-black class to step number circles to ensure proper text visibility against white background
 2025-11-18 14:53:18 +01:00
sasha-astiadi
9b2c406e9e refactor: update HomeGlobe grid statistics values 
- Updated CORES count from 54958 to 31611
- Updated NODES count from 1493 to 1153
- Updated SSD CAPACITY from 5388956 to 4203991 GB
 2025-11-18 14:48:12 +01:00
sasha-astiadi
791216433c refactor: add bottom border and spacing to AgentBento section 
- Added horizontal border line with border-gray-800 styling
- Added transparent spacer div with py-6 padding and max-w-7xl container
- Applied vertical borders (left/right only) to spacer using border-t-0 border-b-0
 2025-11-18 14:45:29 +01:00
sasha-astiadi
a4a6c95612 refactor: add bidirectional scrolling support to InfiniteMovingCards component 
- Added infinite-scroll-right keyframe animation with 50% translateX for right direction
- Updated InfiniteMovingCards to conditionally apply animate-infinite-scroll or animate-infinite-scroll-right based on direction prop
- Added animate-infinite-scroll-right class with linear infinite animation using CSS variable duration
 2025-11-18 14:43:53 +01:00
sasha-astiadi
da5cf2d4a2 refactor: remove unused props and imports, standardize Eyebrow styling in SecondaryFeatures and StorageFeatures 
- Removed unused onGetStartedClick prop from CloudHeroNew component
- Removed unused H3 and P imports from NetworkDownload
- Added H3, P, and Eyebrow imports to SecondaryFeatures
- Replaced generic elements with typography components (Eyebrow, H3, P) in SecondaryFeatures
- Changed Eyebrow styling to text-cyan-500 uppercase tracking-[0.16em] in SecondaryFeatures
- Updated description text
 2025-11-18 14:36:58 +01:00
sasha-astiadi
d2e2e87a0c refactor: improve NodeProducts, NodeSpecs, and NodeSteps layout and styling with optimized images 
- Optimized binary images: agent1.png, ainode.png, autonomous.png, edge.png, edgenode.png, encryptednode.png, energy.png, fullstack.png, uptime.png
- Changed NodeProducts grid gap from gap-16 lg:gap-24 to gap-4 lg:gap-24 for tighter mobile spacing
- Added order-2 lg:order-1 to text area and order-1 lg:order-2 to image for mobile layout swap
- Replaced custom button styles with Button component using
 2025-11-18 14:26:52 +01:00
sasha-astiadi
a8d91a1624 refactor: improve NodeHero and NodeBenefits typography and layout with AnimatedSection wrappers 
- Changed NodeBenefits from SectionHeader to H3 component with mt-2 and text-white
- Updated NodeBenefits description from P color="light" to text-gray-200
- Changed benefit cards border-radius from rounded-2xl to rounded-md
- Added responsive padding to benefit cards: lg:p-8 p-6
- Updated benefit description from text-gray-200 to font-light text-gray-300
- Removed NodeHero background image inline style in
 2025-11-18 12:59:48 +01:00
sasha-astiadi
f9ee299362 refactor: improve CallToAction typography and AgentBento mobile layout across pages 
- Added leading-normal to all CallToAction description paragraphs for better readability
- Changed AgentBento empty animation placeholder to hidden on mobile using hidden md:flex
- Reduced top margin from mt-8 to mt-6 for agents CallToAction CTA cards
- Changed "Follow Development" link margin from mt-5 to lg:mt-5 mt-0 for responsive spacing
- Applied leading-normal changes to agents, compute, gpu, home, network, nodes
 2025-11-18 12:50:36 +01:00
sasha-astiadi
8509b80f47 refactor: improve AgentUseCase layout and typography with responsive background image 
- Added leading-normal to CT text component for better readability
- Changed AgentHeroAlt background image to only display on md+ screens using md:bg-[url(...)] classes
- Removed inline style attribute in favor of Tailwind classes for background image
- Updated AgentUseCase to use typography components (H3, CT, CP) instead of generic elements
- Changed Eyebrow color from text-cyan-600 to text-cyan-500
- Adjuste
 2025-11-18 12:47:51 +01:00
sasha-astiadi
7d6bbc2763 refactor: improve spacing and typography in Pods CallToAction section 
- Added leading-normal to description paragraphs for better readability
- Reduced top margin from mt-10 to mt-6 for benefits list and CTA cards
- Changed benefits grid gap from gap-y-3 to gap-y-1 lg:gap-y-3 for tighter mobile spacing
- Reduced horizontal gap between CTA cards from gap-x-10 to gap-x-8
 2025-11-18 12:38:41 +01:00
sasha-astiadi
4cf6f63139 refactor: increase description text size and restore Eyebrow styling in AgentPro and CloudPros 
- Changed description text from text-sm to text-base in both AgentPro and CloudPros
- Restored uppercase tracking-[0.16em] styling to CloudPros Eyebrow component
 2025-11-18 12:31:18 +01:00
sasha-astiadi
ef9865862b refactor: standardize Eyebrow styling and improve CloudHeroNew typography across pages 
- Changed all Eyebrow components from uppercase tracking-[0.16em] text-cyan-600 to text-cyan-500
- Applied changes to AgentPro, CloudPros, HomeDesign, NetworkPros, PodsDesign, and PodsPro
- Updated CloudHeroNew to hide background image on mobile using md:bg-[url(...)] classes
- Replaced inline style with Tailwind classes for background image in CloudHeroNew
- Converted CloudHeroNew description from two separate
 2025-11-18 12:30:55 +01:00
ehab-hassan
8fdcf1777d update statics to be dynamic 2025-11-18 13:28:20 +02:00
sasha-astiadi
503fe26303 refactor: improve Hero and NetworkDownload mobile responsiveness and layout 
- Reduced Hero section bottom padding from pb-24 to pb-12 on mobile
- Added mt-8 top margin to Hero image container on mobile
- Hidden BackgroundIllustration on mobile using hidden md:block
- Removed fixed height from Hero image container and added flex centering
- Changed Hero image from w-auto to w-full for better mobile scaling
- Removed manual link and simplified NetworkDownload description text
- Reduced NetworkDownload gri
 2025-11-18 12:23:16 +01:00
sasha-astiadi
39b20f30a4 refactor: reduce gap spacing in HomeDesign benefits grid from gap-4 to gap-2 
- Changed mobile grid gap from gap-4 to gap-2 while maintaining lg:gap-0 for desktop
 2025-11-18 12:13:46 +01:00
sasha-astiadi
d53f2d943f refactor: make Button text responsive and hide HomeAurora background on mobile 
- Changed Button text size from text-base to text-sm md:text-base for both solid and outline variants
- Updated HomeAurora background image to only display on md+ screens using bg-none md:bg-[url(...)]
- Removed inline style attribute in favor of Tailwind class for background image
- Cleaned up extra spacing in className
 2025-11-18 12:12:05 +01:00
sasha-astiadi
3213179ff6 refactor: convert "Deploy in Cloud" buttons to external links across home and network pages 
- Changed all "Deploy in Cloud" buttons from internal /cloud routes to external myceliumcloud.tf links
- Updated Button components to use as="a" with target="_blank" and rel="noopener noreferrer"
- Removed arrow character from some button labels for consistency
- Applied changes to CallToAction, HomeAurora, HomeHero, and HomeNew components
 2025-11-18 12:00:22 +01:00
sasha-astiadi
c289c63856 refactor: update CTA buttons with external links and navigation improvements 
- Changed "Deploy a Model" button in agents CallToAction to external link (myceliumcloud.tf) with target="_blank"
- Updated "Host a Node" button path from /host to /nodes in agents and cloud CallToAction
- Changed cloud CallToAction "Start Deploying" button to external link with target="_blank"
- Updated CloudHeroNew buttons to external links for myceliumcloud.tf and docs
- Removed onGetStartedClick handler from CloudHeroNew in
 2025-11-18 11:56:33 +01:00
sasha-astiadi
6329d2dcac refactor: convert NodeSpecs from image-based bento grid to icon-based horizontal layout 
- Replaced placeholder Tailwind images with local image assets (/images/*.png)
- Changed card layout from vertical image-over-text to horizontal icon-beside-text
- Reduced image size from h-80 full-width to h-16 w-16 icon size with object-contain
- Updated flex direction from flex-col to flex-row with items-center alignment
- Adjusted padding and spacing (p-8 on card, reduced mt-2 to mt-1 on title)
- Removed "
 2025-11-17 17:36:44 +01:00
sasha-astiadi
3604b47137 refactor: convert NodeSpecs to bento grid layout with updated typography components 
- Replaced Heroicons with typography components (Eyebrow, H3, P, Small, CT, CP)
- Changed from card grid to bento grid layout with image-based cards
- Added category labels and placeholder images to each specification card
- Removed hover effects and icon-based design in favor of image-focused layout
- Updated container structure from Container component to standard section with max-w-7xl
- Removed border decorations an
 2025-11-17 17:10:47 +01:00
sasha-astiadi
fe0e231204 refactor: add Small import to CloudPros typography components 
- Added Small to existing Eyebrow, H3, and P imports for component availability
 2025-11-17 16:12:47 +01:00
sasha-astiadi
da539a5e55 refactor: replace Small with Eyebrow component in CloudPros intro section 
- Changed import from Small to Eyebrow for consistent typography
- Updated "Cloud Advantages" text to use Eyebrow component instead of Small
 2025-11-17 16:12:31 +01:00
sasha-astiadi
b7e003a680 refactor: update intro section width and eyebrow text in CloudPros 
- Changed max-width from max-w-3xl to max-w-4xl for wider content area
- Updated eyebrow text from "Agent Advantage" to "Cloud Advantages" for consistency
 2025-11-17 16:11:41 +01:00
sasha-astiadi
0324b2e8ad refactor: add infinite-scroll animation keyframes to Tailwind config 
- Added infinite-scroll animation with translateX from 0 to -50%
- Animation supports horizontal scrolling effects for carousel/ticker components
 2025-11-17 16:07:39 +01:00
sasha-astiadi
49d9c22de3 refactor: remove unused imports and variables in CloudPros and DataControl 
- Removed unused Eyebrow import from CloudPros
- Removed unused loop index variable 'i' from gates mapping in DataControl
 2025-11-17 16:07:20 +01:00
sasha-astiadi
828fe93f46 refactor: reduce spacing and adjust typography in CallToAction and NetworkDownload 
- Changed paragraph spacing from mt-6 to mt-2 in CallToAction for tighter layout
- Reduced top margin on cards container from mt-10 to mt-8
- Replaced "Follow Development" Button with styled anchor link featuring underline and arrow
- Added hover effects with cyan color transition to new anchor link
- Reduced heading size in NetworkDownload from text-5xl/6xl to text-4xl/5xl
 2025-11-17 16:05:54 +01:00
sasha-astiadi
8b04b668b6 refactor: update text color in NodeBenefits feature descriptions 
- Changed CP component color prop from "light" to direct gray-200 class for consistent styling
 2025-11-17 15:58:14 +01:00
sasha-astiadi
618e1b0f5b refactor: improve punctuation consistency and add spacing in multiple components 
- Replaced em dashes with commas in AgentPro descriptions for "Local Execution" and "Private Data Access"
- Changed em dash to comma in CloudPros description for better readability
- Removed em dash in NetworkUsecases "Service-to-Service Networking" description
- Added bottom spacing elements to NodeBenefits with border styling and padding
 2025-11-17 15:56:40 +01:00
sasha-astiadi
e46848b98d refactor: increase vertical padding on large screens in NodeHero 
- Changed lg:py-16 to lg:py-24 for consistent spacing with other hero sections
 2025-11-17 15:52:37 +01:00
sasha-astiadi
1fb08e83f2 refactor: add centered intro sections and update typography imports in CloudPros and NetworkPros 
- Added Eyebrow, H3, and P imports to CloudPros and NetworkPros
- Replaced raw h3 and p tags with typography components in CloudPros
- Added centered "Why It's Revolutionary" intro section to NetworkPros with eyebrow, heading, and description
- Updated NetworkPros grid with top margin (mt-8) for spacing
- Changed Homepod eyebrow text from "MYCELIUM PODS" to "Mycelium Pods - Coming Soon"
 2025-11-17 15:51:37 +01:00
sasha-astiadi
fb35ede79d feat: add centered intro section to HomeDesign and hover effects to HomeTab cards 
- Added centered "Who's it For" intro section to HomeDesign with eyebrow, heading, and description
- Imported Eyebrow, H3, and P components for consistent typography
- Updated HomeDesign grid item styling with top margin and adjusted border classes
- Added hover effects to all HomeTab cards with scale, border color, and shadow transitions
- Applied consistent hover styling (scale-105, cyan border, and cyan shadow)
 2025-11-17 15:46:02 +01:00
sasha-astiadi
1a34508699 refactor: rename and update pod animations with improved visuals and consistency 
- Renamed NoCentral to DataControl with enhanced data ownership visualization
- Renamed NoExtraction to Connectivity with full mesh P2P topology
- Renamed NoSinglePoint to Security with improved styling
- Renamed NoControl to Resilience with consistent styling
- Added lg:-mt-12 margin to Security and Resilience animations for alignment
- Updated DataControl to show explicit permission gates and bi-directional replication
 2025-11-17 15:12:55 +01:00
sasha-astiadi
97da7ba907 refactor: reduce horizontal padding on large screens in PodsBento 
- Changed lg:px-10 to lg:px-8 for more consistent spacing with other sections
 2025-11-17 15:00:53 +01:00
sasha-astiadi
2b7559ab47 refactor: redesign pods page with bento grid layout and improved benefits sections 
- Increased CloudHeroNew vertical padding on large screens (lg:py-16 to lg:py-24)
- Reduced spacing between description paragraphs in CloudHeroNew (mt-4 to mt-2)
- Created PodsBento component with animated bento grid showcasing pod benefits
- Added animations for data control, connectivity, security, and resilience features
- Refactored PodsDesign from accordion layout to centered intro with 4-column grid
- Create
 2025-11-17 15:00:41 +01:00
sasha-astiadi
3ab559aa84 refactor: remove unused imports across multiple components 
- Fixed CloudPros export name from AgentPro to CloudPros
- Removed unused H1, H4, and H3Icon imports from HomeAurora
- Removed unused H3, P, and Eyebrow imports from NetworkDownload
- Changed motion.H3 and motion.P to lowercase motion.h3 and motion.p in NetworkDownload
- Removed unused Small import from PodsFeatures
- Removed unused IconClockHour5 import from PodsHow
 2025-11-17 14:43:39 +01:00
sasha-astiadi
57c39a8b2b feat: refactor pods page with simplified content and improved animations 
- Added agent1.png image asset
- Refactored InfiniteMovingCards component with cleaner animation logic and improved duplication handling
- Changed default speed from "fast" to "slow" and simplified animation setup
- Updated AgentBento title from "Augmented Intelligence Fabric" to "Intelligence Fabric"
- Increased Homepod vertical padding on large screens (lg:py-16 to lg:py-24)
- Removed "Feature" label from PodsFeatures use
 2025-11-17 14:39:23 +01:00
sasha-astiadi
6ff539b3fc feat: add AgentPro section and refactor AgentUsecase layout 
- Created AgentPro component highlighting local execution, mesh connectivity, private data access, and portability advantages
- Replaced horizontal scrolling carousel in AgentUsecase with responsive grid layout
- Added "Blend local + remote intelligence" use case to AgentUsecase
- Removed slider navigation buttons and replaced with static grid display
- Replaced AgentDesign with AgentPro in AgentsPage component order
- Increased hero section padding on
 2025-11-17 14:12:17 +01:00
sasha-astiadi
29e2d942de refactor: improve punctuation and grammar consistency across components 
- Replaced em dashes with commas for better readability in descriptions
- Standardized punctuation in aria-labels (changed "—" to ",")
- Removed unnecessary em dashes in favor of commas or removed punctuation
- Fixed inconsistent spacing around punctuation marks
- Improved sentence flow in multiple component descriptions
 2025-11-17 13:52:42 +01:00
sasha-astiadi
def0972762 feat: streamline cloud and pods pages with improved CTAs and content 
- Replaced CloudCodeTabs with static reserve image in CloudIntro
- Added dynamic action buttons (Deploy, Follow Development, View Docs) to CloudIntro tabs
- Removed CloudFeaturesLight section from CloudPage
- Enhanced Pods CallToAction with benefits checklist and expanded early adopter messaging
- Added CTA buttons to Homepod component with waitlist and docs links
- Removed PodsBenefits section from PodsPage
- Updated Homepod description
 2025-11-17 13:01:56 +01:00
sasha-astiadi
1c37cc08ee feat: add network download section and update network page styling 
- Created NetworkDownload component with platform-specific download cards for iOS, macOS, Windows, Android, and Linux
- Added hover effects and external links to app stores and GitHub releases
- Replaced NetworkUsecases with NetworkDownload in NetworkPage component order
- Renamed CloudPros to NetworkPros for consistency
- Updated NetworkPros styling from light theme to dark theme with improved contrast and hover states
- Change
 2025-11-17 12:44:23 +01:00
sasha-astiadi
0eef2cd013 feat: add scroll-to-top behavior and hash anchor navigation 
- Added ScrollToTop component to handle navigation scroll behavior
- Implemented smooth scrolling to hash anchors when present in URL
- Added automatic scroll to top on route changes
- Imported useLocation and useEffect hooks for scroll management
 2025-11-17 12:27:24 +01:00
sasha-astiadi
3cd41ab1d9 refactor: simplify hero section with updated typography and spacing 
- Replaced H1 with H3 and added Eyebrow component for "Project MYCELIUM" label
- Removed promotional banner about booking a call
- Improved text hierarchy and reduced vertical spacing (mt-8 to mt-4)
- Added max-width constraint to description text for better readability
- Removed unused H3Icon import
 2025-11-17 12:23:27 +01:00
sasha-astiadi
3121251272 refactor: remove unused imports and add icon null check 
- Removed unused ShieldCheckIcon import from NodeProducts
- Removed unused Small component import from NodeSpecs
- Added conditional rendering for Icon in PodsWhat to prevent errors when icon is undefined
 2025-11-14 22:59:24 +01:00
sasha-astiadi
56ceac1319 refactor: remove dark mode styling from agent and home pages 
- Simplified styling by removing dark mode classes (dark:bg-*, dark:text-*, dark:border-*)
- Added explicit text color classes for better consistency
- Fixed animation container layout with proper centering and sizing
 2025-11-14 22:51:19 +01:00
sasha-astiadi
a3028ff448 feat: add cyan glow effects and new network resilience animation 
- Added cyan radial glow SVG to CallToAction components across all product pages for visual consistency
- Created NoSinglePoint animation demonstrating redundant network paths and resilience against single point failures
- Updated HomeArchitecture layout to better center and display animations with improved flex positioning
 2025-11-14 22:23:11 +01:00
sasha-astiadi
33821987aa refactor: streamline page components and simplify UI elements 
- Removed unused HomeAudience component from HomePage
- Renamed NetworkPros to CloudPros for clarity
- Removed bullet point lists from PodsFeatures to simplify presentation
- Replaced PodCapabilities with PodsWhat and removed PodsComing section
 2025-11-14 21:53:21 +01:00
sasha-astiadi
678da4b66c feat: redesign cloud page with improved content structure and visual hierarchy 
- Replaced CloudHostingNew with new CloudIntro component featuring tabbed interface for Kubernetes, VDC, and QSFS capabilities
- Added CloudCodeTabs component with interactive code examples and syntax highlighting
- Created CloudPros section highlighting platform architecture, reliability, compatibility, and scalability
- Updated hero section copy to emphasize sovereign edge infrastructure and simplified messaging
- Remove
 2025-11-14 18:15:04 +01:00
sasha-astiadi
326efc9fbd refactor: rename Node page to Nodes and reorganize network page sections 
- Renamed NodePage component and directory to NodesPage/nodes for consistency
- Updated all navigation links from "Node" to "Nodes" across headers and footer
- Replaced anchor tags with React Router Link components for proper SPA navigation
- Reorganized NetworkPage component order and added NetworkPros section
- Converted NetworkUsecases from horizontal slider to responsive grid layout
- Added new use cases for adaptive mesh and compute fabric
- Update
 2025-11-14 17:01:29 +01:00
sasha-astiadi
3a656ef5e9 fix: correct node route path from /node to /nodes 2025-11-14 16:20:26 +01:00
sasha-astiadi
cf32cd081c feat: update network CTA with improved messaging and navigation 
- Changed heading from "Start" to "Connect" and refined description for clarity
- Replaced two-button layout with three-option navigation (Join Network, Deploy in Cloud, Host a Node)
- Updated button destinations and styling to better guide user journey
 2025-11-14 16:16:08 +01:00
sasha-astiadi
1950342b7a feat: simplify network page messaging and update feature descriptions 
- Streamlined hero and features sections with clearer, more direct value propositions
- Updated network capabilities to emphasize unified connectivity over technical details
- Replaced technical feature descriptions with user-focused benefits (DNS, VPN, publishing, AI)
 2025-11-14 16:16:00 +01:00
sasha-astiadi
d1fc11ce80 refactor: simplify navigation structure and update homepage content 
- Removed Cloud dropdown menu and flattened navigation to direct links (Network, Cloud, Pods, Agents, Node)
- Reordered navigation items for better flow and renamed "Nodes" to "Node" for consistency
- Updated homepage hero and CTA sections with clearer messaging focused on digital sovereignty and infrastructure control
- Added new bento grid images for visual refresh
 2025-11-14 15:41:21 +01:00
sasha-astiadi
48954151c9 Mycelium unifies everything 2025-11-14 13:39:25 +01:00
sasha-astiadi
61e368e27e refactor: add type assertion for node selection 2025-11-14 13:07:25 +01:00
sasha-astiadi
d8524ef181 feat: redesign node products section with interactive configuration selector 
- Replaced static grid layout with dynamic two-column design featuring live product switching
- Added configuration selector allowing users to toggle between AI Node and Compute Node options
- Enhanced product information with detailed features, descriptions, and direct purchase/learn more CTAs
 2025-11-14 13:03:06 +01:00
sasha-astiadi
c44d9158f2 feat: add node setup guide and product recommendations 
- Created NodeSteps component with 4-step horizontal stepper showing node hosting process
- Added NodeProducts component displaying recommended Edge AI and Edge Compute nodes
- Integrated new components into NodePage with supporting product images
 2025-11-14 12:43:43 +01:00
sasha-astiadi
359afc3360 feat: add nodes page with hosting information and benefits 
- Created new NodePage with hero section explaining the Mycelium node network
- Added NodeBenefits component showcasing three key advantages of hosting nodes
- Integrated nodes route into navigation (header, footer, and routing configuration)
 2025-11-14 12:14:28 +01:00
sasha-astiadi
96a17a668a fix: improve text contrast in hero sections 2025-11-13 15:28:39 +01:00
sasha-astiadi
c93974ea3e style: remove trailing whitespace and adjust background opacity 2025-11-13 15:27:33 +01:00
sasha-astiadi
f1f8f50871 refactor: replace paragraph tag with P component in AgentHeroAlt 2025-11-13 15:27:00 +01:00
sasha-astiadi
e4b2d66a76 fix: update homepage pod description text styling 2025-11-13 15:25:59 +01:00
sasha-astiadi
b208fe7f2a refactor: convert agent bento cards from videos to React animation components 
- Replaced video paths with imported animation components (Fungistor, Herodb, MOSSandboxes, etc.)
- Added new AgentDesign and AgentUseCase sections to agents page
- Updated hero copy to emphasize private, sovereign AI and 2026 timeline
- Reorganized page layout with new sections between existing components
 2025-11-13 15:24:46 +01:00
sasha-astiadi
7b80ab84c9 feat: add comprehensive Pods landing page sections 
- Created new sections including benefits grid, federation design, upcoming features, and call-to-action
- Added pricing tiers component with three Pod subscription levels
- Updated existing sections with refined messaging and improved visual hierarchy
 2025-11-13 14:52:24 +01:00
sasha-astiadi
aa6f475050 feat: redesign pods page with enhanced UI and animations 
- Replaced HomeBlink with HomeAurora component for improved visual experience
- Added PodCapabilities horizontal slider with interactive navigation controls
- Created PodsFeatures section showcasing use cases with hover animations
- Updated PodsHow layout with bullet points and new PodsFlow animation component
 2025-11-13 14:04:13 +01:00
sasha-astiadi
5c2fcecbd9 feat: add dark theme header component with navigation 
- Created HeaderDark component with responsive navigation including Cloud dropdown menu with breadcrumb-style display
- Implemented mobile menu with slide-out panel using Headless UI Dialog
- Integrated HeaderDark into HomeHostingDark page for consistent dark theme experience
 2025-11-12 16:53:04 +01:00
sasha-astiadi
e5cf6ee362 refactor: remove unused imports and variables 
- Removed unused React imports from components (now using named imports only)
- Removed unused cursor state and onMouseMove handler from text-hover-effect
- Removed unused H1 import from HomeBlink
 2025-11-12 16:26:51 +01:00
sasha-astiadi
e9c1fd795e refactor: remove unused Button import from HomeAudience 2025-11-12 16:24:22 +01:00
sasha-astiadi
be95ea97c4 refactor: remove unused CTA buttons from HomeAudience component 2025-11-12 16:23:07 +01:00
sasha-astiadi
9c47ea39fc refactor: adjust horizontal padding to vertical padding in HomeBlink container 2025-11-12 16:20:32 +01:00
sasha-astiadi
7a0675a408 feat: add animated text hover effect to home headline 
- Created TextHoverEffect component with animated gradient mask and stroke drawing
- Replaced static H1 title with interactive HomeHeadline component featuring auto-looping animation
- Enhanced visual appeal with cyan gradient glow and smooth reveal effects
 2025-11-12 16:19:17 +01:00
sasha-astiadi
37d4371288 feat: update CallToAction component styling and add cyan glow effect 
- Replaced hardcoded heading and paragraph elements with reusable H3 and P components
- Added cyan radial glow SVG overlay to HomeBlink for enhanced visual atmosphere
- Updated audience images (7.jpg and 8.jpg)
 2025-11-12 15:59:18 +01:00
sasha-astiadi
dfe71dd4eb refactor: remove unused import and fix typo in HomePage 2025-11-12 15:51:00 +01:00
sasha-astiadi
eba1bb7047 feat: add architecture section with animated illustrations 
- Created HomeArchitecture component showcasing decentralized network principles with SVG animations
- Added animated illustrations for mesh networking, no extraction, no control, and no central servers
- Enhanced CallToAction with cyan radial glow effect for visual emphasis
- Fixed audience gallery image paths to use correct /images/audiences/ directory
 2025-11-12 15:47:58 +01:00
sasha-astiadi
0d9f357881 feat: add dark theme support and update homepage content 
- Integrated next-themes for dark mode theming with default dark theme
- Added new UI components (GridBlink, Spotlight) and enhanced world map with cyan glow effects
- Updated homepage messaging to emphasize Mycelium as a living network with new audience imagery
 2025-11-12 15:18:34 +01:00
217 changed files with 10814 additions and 839 deletions
Expand all files Collapse all files

1
google5dd3a8b700455c0e.html Normal file
View File

@@ -0,0 +1 @@
google-site-verification: google5dd3a8b700455c0e.html

7
index.html
View File

@@ -2,10 +2,13 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/png" href="/favicon-32.png" sizes="32x32" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Project Mycelium - Unleash the Power of Decentralized Networks</title>
<meta name="description" content="Project Mycelium's technology enables anyone to deploy their own Internet infrastructure, anywhere." />
<meta name="google-site-verification" content="rRrZkMEhdC4yFe_BrENEzYmy2bRfD-VE6RTRiDJNLkg" />
<title>Project Mycelium - Built for Digital Sovereignty</title>
<meta name="description" content="Discover Project Mycelium. A sovereign peer-to-peer network for private communication, storage, and compute. Build and run your digital environment on infrastructure you control." />
<meta name="keywords" content="Project Mycelium, ProjectMycelium, projectmycelium, Mycelium, decentralized network, peer-to-peer infrastructure, private storage, secure compute, sovereign cloud, edge cloud" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;700&display=swap" rel="stylesheet" />

11
package-lock.json generated
View File

@@ -28,6 +28,7 @@
"framer-motion": "^10.18.0",
"lucide-react": "^0.544.0",
"motion": "^12.23.24",
"next-themes": "^0.4.6",
"popmotion": "^11.0.5",
"react": "^18.3.1",
"react-countup": "^6.5.3",
@@ -9417,6 +9418,16 @@
"dev": true,
"license": "MIT"
},
"node_modules/next-themes": {
"version": "0.4.6",
"resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
"integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==",
"license": "MIT",
"peerDependencies": {
"react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
}
},
"node_modules/node-releases": {
"version": "2.0.26",
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.26.tgz",

1
package.json
View File

@@ -30,6 +30,7 @@
"framer-motion": "^10.18.0",
"lucide-react": "^0.544.0",
"motion": "^12.23.24",
"next-themes": "^0.4.6",
"popmotion": "^11.0.5",
"react": "^18.3.1",
"react-countup": "^6.5.3",

BIN
public/favicon-32.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

BIN
public/images/6b080b431e628e15126de0893db49e1a.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 65 KiB

BIN
public/images/Modern Metallic Home Symbol.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
public/images/agent1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 618 KiB

BIN
public/images/ainode.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 508 KiB

BIN
public/images/autonomous.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 63 KiB

BIN
public/images/bento-03-mobile-friendly.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 56 KiB

BIN
public/images/bento-cloud2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 208 KiB

BIN
public/images/bento-network.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 259 KiB

BIN
public/images/cons.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 793 KiB

BIN
public/images/dev.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 801 KiB

BIN
public/images/edge.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

BIN
public/images/edgenode.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 792 KiB

BIN
public/images/encryptednode.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 55 KiB

BIN
public/images/energy.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 56 KiB

BIN
public/images/fullstack.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 57 KiB

2
public/images/logomark.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 66 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
public/images/mainlogo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
public/images/mediakit/logo_dark.zip Normal file
View File

Binary file not shown.

BIN
public/images/mediakit/logo_dark/logo_dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

1
public/images/mediakit/logo_dark/logo_dark.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
public/images/mediakit/logo_dark/logomark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

1
public/images/mediakit/logo_dark/logomark.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" zoomAndPan="magnify" viewBox="0 0 75 74.999997" height="100" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><clipPath id="17cc7c511f"><path d="M 0.679688 0.28125 L 48.441406 0.28125 L 48.441406 5 L 0.679688 5 Z M 0.679688 0.28125 " clip-rule="nonzero"/></clipPath><clipPath id="871aafab52"><path d="M 0.679688 36 L 48.441406 36 L 48.441406 40.601562 L 0.679688 40.601562 Z M 0.679688 36 " clip-rule="nonzero"/></clipPath><clipPath id="08bb39558f"><rect x="0" width="49" y="0" height="41"/></clipPath></defs><g transform="matrix(1, 0, 0, 1, 13, 17)"><g clip-path="url(#08bb39558f)"><g clip-path="url(#17cc7c511f)"><path stroke-linecap="butt" transform="matrix(0.559221, 0, 0, 0.559221, 3.099571, 0.434943)" fill="none" stroke-linejoin="miter" d="M -0.00342307 4.000082 L 76.539934 4.000082 " stroke="#22d3ee" stroke-width="8" stroke-opacity="1" stroke-miterlimit="4"/></g><path fill="#22d3ee" d="M 3.097656 18.003906 L 29.941406 18.003906 L 29.941406 22.480469 L 3.097656 22.480469 M 34.414062 18.003906 L 45.902344 18.003906 L 45.902344 22.480469 L 34.414062 22.480469 " fill-opacity="1" fill-rule="nonzero"/><g clip-path="url(#871aafab52)"><path stroke-linecap="butt" transform="matrix(0.559221, 0, 0, 0.559221, 3.099571, 36.091279)" fill="none" stroke-linejoin="miter" d="M -0.00342307 3.999929 L 76.539934 3.999929 " stroke="#22d3ee" stroke-width="8" stroke-opacity="1" stroke-miterlimit="4"/></g></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
public/images/mediakit/logo_light.zip Normal file
View File

Binary file not shown.

BIN
public/images/mediakit/logo_light/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

1
public/images/mediakit/logo_light/logo.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
public/images/mediakit/logo_light/logomark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

1
public/images/mediakit/logo_light/logomark.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" zoomAndPan="magnify" viewBox="0 0 75 74.999997" height="100" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><clipPath id="17cc7c511f"><path d="M 0.679688 0.28125 L 48.441406 0.28125 L 48.441406 5 L 0.679688 5 Z M 0.679688 0.28125 " clip-rule="nonzero"/></clipPath><clipPath id="871aafab52"><path d="M 0.679688 36 L 48.441406 36 L 48.441406 40.601562 L 0.679688 40.601562 Z M 0.679688 36 " clip-rule="nonzero"/></clipPath><clipPath id="08bb39558f"><rect x="0" width="49" y="0" height="41"/></clipPath></defs><g transform="matrix(1, 0, 0, 1, 13, 17)"><g clip-path="url(#08bb39558f)"><g clip-path="url(#17cc7c511f)"><path stroke-linecap="butt" transform="matrix(0.559221, 0, 0, 0.559221, 3.099571, 0.434943)" fill="none" stroke-linejoin="miter" d="M -0.00342307 4.000082 L 76.539934 4.000082 " stroke="#22d3ee" stroke-width="8" stroke-opacity="1" stroke-miterlimit="4"/></g><path fill="#22d3ee" d="M 3.097656 18.003906 L 29.941406 18.003906 L 29.941406 22.480469 L 3.097656 22.480469 M 34.414062 18.003906 L 45.902344 18.003906 L 45.902344 22.480469 L 34.414062 22.480469 " fill-opacity="1" fill-rule="nonzero"/><g clip-path="url(#871aafab52)"><path stroke-linecap="butt" transform="matrix(0.559221, 0, 0, 0.559221, 3.099571, 36.091279)" fill="none" stroke-linejoin="miter" d="M -0.00342307 3.999929 L 76.539934 3.999929 " stroke="#22d3ee" stroke-width="8" stroke-opacity="1" stroke-miterlimit="4"/></g></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
public/images/mobile/agents.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
public/images/mobile/cloudpage.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
public/images/mobile/homepage.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
public/images/mobile/nodes.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
public/images/mobile/pods.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
public/images/pod1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
public/images/podsimg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
public/images/seekers.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 990 KiB

BIN
public/images/uptime.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

6
public/robots.txt Normal file
View File

@@ -0,0 +1,6 @@
User-agent: *
Allow: /
Sitemap: https://www.projectmycelium.com/sitemap.xml

59
public/sitemap.xml Normal file
View File

@@ -0,0 +1,59 @@
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://www.projectmycelium.com/</loc>
<changefreq>weekly</changefreq>
<priority>1.0</priority>
</url>
<url>
<loc>https://www.projectmycelium.com/cloud</loc>
<changefreq>weekly</changefreq>
<priority>0.9</priority>
</url>
<url>
<loc>https://www.projectmycelium.com/network</loc>
<changefreq>weekly</changefreq>
<priority>0.9</priority>
</url>
<url>
<loc>https://www.projectmycelium.com/agents</loc>
<changefreq>weekly</changefreq>
<priority>0.8</priority>
</url>
<url>
<loc>https://www.projectmycelium.com/download</loc>
<changefreq>monthly</changefreq>
<priority>0.7</priority>
</url>
<url>
<loc>https://www.projectmycelium.com/compute</loc>
<changefreq>weekly</changefreq>
<priority>0.8</priority>
</url>
<url>
<loc>https://www.projectmycelium.com/storage</loc>
<changefreq>weekly</changefreq>
<priority>0.8</priority>
</url>
<url>
<loc>https://www.projectmycelium.com/gpu</loc>
<changefreq>weekly</changefreq>
<priority>0.8</priority>
</url>
<url>
<loc>https://www.projectmycelium.com/pods</loc>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
</url>
<url>
<loc>https://www.projectmycelium.com/nodes</loc>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
</url>
<url>
<loc>https://www.projectmycelium.com/mediakit</loc>
<changefreq>monthly</changefreq>
<priority>0.7</priority>
</url>
</urlset>

BIN
public/videos/agent.mp4
View File

Binary file not shown.

BIN
public/videos/benefits.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 156 KiB

BIN
public/videos/benefits.mp4
View File

Binary file not shown.

BIN
public/videos/chip_vid.mp4
View File

Binary file not shown.

BIN
public/videos/cloud.mp4
View File

Binary file not shown.

BIN
public/videos/cta.mp4
View File

Binary file not shown.

BIN
public/videos/deterministic.mp4
View File

Binary file not shown.

BIN
public/videos/fungistor.mp4
View File

Binary file not shown.

BIN
public/videos/herodb.mp4
View File

Binary file not shown.

BIN
public/videos/mesh.mp4
View File

Binary file not shown.

BIN
public/videos/mhero.mp4
View File

Binary file not shown.

BIN
public/videos/mycelium2.mp4
View File

Binary file not shown.

BIN
public/videos/sandbox.mp4
View File

Binary file not shown.

BIN
public/videos/universal.mp4
View File

Binary file not shown.

2
src/App.css
View File

@@ -14,6 +14,8 @@
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}

28
src/App.tsx
View File

@@ -1,6 +1,6 @@
import { HashRouter, Routes, Route } from 'react-router-dom';
import { HashRouter, Routes, Route, useLocation } from 'react-router-dom';
import { Layout } from './components/Layout';
import { lazy, Suspense } from 'react';
import { lazy, Suspense, useEffect } from 'react';
const HomePage = lazy(() => import('./pages/home/HomePage'));
const CloudPage = lazy(() => import('./pages/cloud/CloudPage'));
@@ -11,10 +11,32 @@ const ComputePage = lazy(() => import('./pages/compute/ComputePage'));
const StoragePage = lazy(() => import('./pages/storage/StoragePage'));
const GpuPage = lazy(() => import('./pages/gpu/GpuPage'));
const PodsPage = lazy(() => import('./pages/pods/PodsPage'));
const NodesPage = lazy(() => import('./pages/nodes/NodesPage'));
const MediaPage = lazy(() => import('./pages/mediakit/MediaPage'));
function ScrollToTop() {
const { pathname, hash } = useLocation();
useEffect(() => {
if (hash) {
const id = hash.replace('#', '');
const element = document.getElementById(id);
if (element) {
element.scrollIntoView({ behavior: 'smooth', block: 'start' });
return;
}
}
window.scrollTo({ top: 0, left: 0, behavior: 'auto' });
}, [pathname, hash]);
return null;
}
function App() {
return (
<HashRouter>
<ScrollToTop />
<Suspense fallback={<div>Loading...</div>}>
<Routes>
<Route path="/" element={<Layout />}>
@@ -27,6 +49,8 @@ function App() {
<Route path="storage" element={<StoragePage />} />
<Route path="gpu" element={<GpuPage />} />
<Route path="pods" element={<PodsPage />} />
<Route path="nodes" element={<NodesPage />} />
<Route path="mediakit" element={<MediaPage />} />
</Route>
</Routes>
</Suspense>

BIN
src/assets/fonts/Mulish.zip Normal file
View File

Binary file not shown.

BIN
src/assets/fonts/Mulish/Mulish-Italic-VariableFont_wght.ttf Normal file
View File

Binary file not shown.

BIN
src/assets/fonts/Mulish/Mulish-VariableFont_wght.ttf Normal file
View File

Binary file not shown.

93
src/assets/fonts/Mulish/OFL.txt Normal file
View File

@@ -0,0 +1,93 @@
Copyright 2016 The Mulish Project Authors (https://github.com/googlefonts/mulish)
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
https://openfontlicense.org
-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).
"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.
"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.
PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.
5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are
not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.

79
src/assets/fonts/Mulish/README.txt Normal file
View File

@@ -0,0 +1,79 @@
Mulish Variable Font
====================
This download contains Mulish as both variable fonts and static fonts.
Mulish is a variable font with this axis:
wght
This means all the styles are contained in these files:
Mulish/Mulish-VariableFont_wght.ttf
Mulish/Mulish-Italic-VariableFont_wght.ttf
If your app fully supports variable fonts, you can now pick intermediate styles
that aren’t available as static fonts. Not all apps support variable fonts, and
in those cases you can use the static font files for Mulish:
Mulish/static/Mulish-ExtraLight.ttf
Mulish/static/Mulish-Light.ttf
Mulish/static/Mulish-Regular.ttf
Mulish/static/Mulish-Medium.ttf
Mulish/static/Mulish-SemiBold.ttf
Mulish/static/Mulish-Bold.ttf
Mulish/static/Mulish-ExtraBold.ttf
Mulish/static/Mulish-Black.ttf
Mulish/static/Mulish-ExtraLightItalic.ttf
Mulish/static/Mulish-LightItalic.ttf
Mulish/static/Mulish-Italic.ttf
Mulish/static/Mulish-MediumItalic.ttf
Mulish/static/Mulish-SemiBoldItalic.ttf
Mulish/static/Mulish-BoldItalic.ttf
Mulish/static/Mulish-ExtraBoldItalic.ttf
Mulish/static/Mulish-BlackItalic.ttf
Get started
-----------
1. Install the font files you want to use
2. Use your app's font picker to view the font family and all the
available styles
Learn more about variable fonts
-------------------------------
https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
https://variablefonts.typenetwork.com
https://medium.com/variable-fonts
In desktop apps
https://theblog.adobe.com/can-variable-fonts-illustrator-cc
https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
Online
https://developers.google.com/fonts/docs/getting_started
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
Installing fonts
MacOS: https://support.apple.com/en-us/HT201749
Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
Android Apps
https://developers.google.com/fonts/docs/android
https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
License
-------
Please read the full license text (OFL.txt) to understand the permissions,
restrictions and requirements for usage, redistribution, and modification.
You can use them in your products & projects – print or digital,
commercial or otherwise.
This isn't legal advice, please consider consulting a lawyer and see the full
license for all details.

BIN
src/assets/fonts/Mulish/static/Mulish-Black.ttf Normal file
View File

Binary file not shown.

BIN
src/assets/fonts/Mulish/static/Mulish-BlackItalic.ttf Normal file
View File

Binary file not shown.

BIN
src/assets/fonts/Mulish/static/Mulish-Bold.ttf Normal file
View File

Binary file not shown.

BIN
src/assets/fonts/Mulish/static/Mulish-BoldItalic.ttf Normal file
View File

Binary file not shown.

BIN
src/assets/fonts/Mulish/static/Mulish-ExtraBold.ttf Normal file
View File

Binary file not shown.

BIN
src/assets/fonts/Mulish/static/Mulish-ExtraBoldItalic.ttf Normal file
View File

Binary file not shown.

BIN
src/assets/fonts/Mulish/static/Mulish-ExtraLight.ttf Normal file
View File

Binary file not shown.

BIN
src/assets/fonts/Mulish/static/Mulish-ExtraLightItalic.ttf Normal file
View File

Binary file not shown.

BIN
src/assets/fonts/Mulish/static/Mulish-Italic.ttf Normal file
View File

Binary file not shown.

BIN
src/assets/fonts/Mulish/static/Mulish-Light.ttf Normal file
View File

Binary file not shown.

BIN
src/assets/fonts/Mulish/static/Mulish-LightItalic.ttf Normal file
View File

Binary file not shown.

BIN
src/assets/fonts/Mulish/static/Mulish-Medium.ttf Normal file
View File

Binary file not shown.

BIN
src/assets/fonts/Mulish/static/Mulish-MediumItalic.ttf Normal file
View File

Binary file not shown.

BIN
src/assets/fonts/Mulish/static/Mulish-Regular.ttf Normal file
View File

Binary file not shown.

BIN
src/assets/fonts/Mulish/static/Mulish-SemiBold.ttf Normal file
View File

Binary file not shown.

BIN
src/assets/fonts/Mulish/static/Mulish-SemiBoldItalic.ttf Normal file
View File

Binary file not shown.

58
src/components/Button.tsx
View File

@@ -3,23 +3,30 @@ import clsx from 'clsx'
const baseStyles = {
solid:
'inline-flex justify-center rounded-full py-2 px-5 text-base font-semibold transition-colors',
'inline-flex justify-center rounded-full py-2 px-5 text-sm md:text-base font-semibold transition-colors',
outline:
'inline-flex justify-center bg-transparent rounded-full border py-[calc(--spacing(2)-1px)] px-[calc(--spacing(5)-1px)] text-base transition-colors',
'inline-flex justify-center bg-transparent font-semibold rounded-full border border-2 py-[calc(--spacing(2)-1px)] px-[calc(--spacing(5)-1px)] text-sm md:text-base transition-colors',
link:
'inline-flex items-center text-sm md:text-base font-semibold transition-colors',
}
const variantStyles = {
solid: {
cyan: 'relative overflow-hidden bg-cyan-500 text-white before:absolute before:inset-0 active:before:bg-transparent hover:before:bg-white/10 active:bg-cyan-600 active:text-white/80 before:transition-colors',
cyan: 'relative overflow-hidden bg-cyan-500 text-white before:absolute before:inset-0 hover:bg-cyan-400 active:before:bg-transparent hover:before:bg-white/10 active:bg-cyan-500 active:text-white/80 before:transition-colors',
white:
'bg-white text-cyan-900 hover:bg-white/90 active:bg-white/90 active:text-cyan-900/70',
gray: 'bg-gray-800 text-white hover:bg-gray-900 active:bg-gray-800 active:text-white/80',
green: 'bg-green-500 text-white hover:bg-green-600',
},
outline: {
cyan: 'border-cyan-500 text-cyan-500',
gray: 'border-gray-300 text-gray-700 hover:border-cyan-500 active:border-cyan-500',
white: 'border-gray-300 text-white hover:border-cyan-500 active:border-cyan-500',
cyan: 'border-cyan-500 text-cyan-500 hover:border-cyan-400 hover:text-cyan-400 active:border-cyan-400',
gray: 'border-gray-200 text-gray-600 hover:text-cyan-400 hover:border-cyan-400 active:border-cyan-400',
white: 'border-gray-300 text-white hover:text-cyan-400 hover:border-cyan-400 active:border-cyan-400',
},
link: {
cyan: 'text-cyan-400 underline hover:text-cyan-300',
white: 'text-white underline hover:text-cyan-300',
dark: 'text-gray-900 underline hover:text-cyan-400',
},
}
@@ -30,7 +37,11 @@ type ButtonProps = (
}
| {
variant: 'outline'
color?: (keyof typeof variantStyles.outline) | 'cyan'
color?: keyof typeof variantStyles.outline
}
| {
variant: 'link'
color?: keyof typeof variantStyles.link
}
) &
(
@@ -43,16 +54,33 @@ type ButtonProps = (
)
export function Button({ className, as, ...props }: ButtonProps) {
props.variant ??= 'solid'
props.color ??= 'gray'
// Set safe defaults per variant so color always matches a valid palette key
if (!props.variant) {
props.variant = 'solid'
}
if (!props.color) {
if (props.variant === 'solid') {
props.color = 'gray'
} else if (props.variant === 'outline') {
props.color = 'gray'
} else if (props.variant === 'link') {
props.color = 'cyan'
}
}
const variant = props.variant
const color = props.color as string
className = clsx(
baseStyles[props.variant],
props.variant === 'outline'
? variantStyles.outline[props.color]
: props.variant === 'solid'
? variantStyles.solid[props.color]
: undefined,
baseStyles[variant],
variant === 'outline'
? variantStyles.outline[color as keyof typeof variantStyles.outline]
: variant === 'solid'
? variantStyles.solid[color as keyof typeof variantStyles.solid]
: variant === 'link'
? variantStyles.link[color as keyof typeof variantStyles.link]
: undefined,
className,
)

29
src/components/Footer.tsx
View File

@@ -8,27 +8,30 @@ export function Footer() {
<div className="flex flex-col items-start justify-between gap-y-12 pt-16 pb-6 lg:flex-row lg:items-center lg:py-8">
<div>
<div className="flex items-center text-gray-900">
<img src="/images/logomark.svg" alt="Mycelium Logomark" className="h-15 w-15 flex-none" />
<div className="ml-4">
<p className="text-base font-semibold">Project Mycelium</p>
<p className="mt-1 text-sm">Unleash the Power of Decentralization</p>
<img src="/images/logomark.svg" alt="Mycelium Logomark" className="h-20 w-20 flex-none" />
<div className="">
<p className="text-base lg:text-lg font-semibold">Project Mycelium</p>
<p className="mt-1 text-sm">Built for Digital Sovereignty</p>
</div>
</div>
<nav className="mt-10 flex gap-8">
<Link to="/" className="text-sm text-gray-700 hover:text-cyan-500 transition-colors">
Home
<Link to="/network" className="text-sm text-gray-700 hover:text-cyan-500 transition-colors">
Network
</Link>
<Link to="/cloud" className="text-sm text-gray-700 hover:text-cyan-500 transition-colors">
Cloud
</Link>
<Link to="/network" className="text-sm text-gray-700 hover:text-cyan-500 transition-colors">
Network
<Link to="/pods" className="text-sm text-gray-700 hover:text-cyan-500 transition-colors">
Pods
</Link>
<Link to="/agents" className="text-sm text-gray-700 hover:text-cyan-500 transition-colors">
Agents
</Link>
<Link to="/pods" className="text-sm text-gray-700 hover:text-cyan-500 transition-colors">
Pods
<Link to="/nodes" className="text-sm text-gray-700 hover:text-cyan-500 transition-colors">
Nodes
</Link>
<Link to="/mediakit" className="text-sm text-gray-700 hover:text-cyan-500 transition-colors">
Media Kit
</Link>
</nav>
</div>
@@ -49,11 +52,11 @@ export function Footer() {
</div>
</div>
</div>
<div className="flex flex-col items-center border-t border-gray-100 pt-8 pb-12 md:flex-row-reverse md:justify-between md:pt-6">
<div className="flex flex-col items-center border-t border-gray-100 py-8 md:flex-row-reverse md:justify-between md:pt-6">
<p className="mt-6 text-sm text-gray-500 md:mt-0">
&copy; Copyright{' '}
<a href="https://www.threefold.io" target="_blank" rel="noopener noreferrer" className="hover:text-cyan-500 transition-colors">
ThreeFold
<a href="https://ourworld.tf/" target="_blank" rel="noopener noreferrer" className="font-semibold hover:text-cyan-500 transition-colors">
OurWorld
</a>{' '}
{new Date().getFullYear()}. All rights reserved.
</p>

104
src/components/Header.tsx
View File

@@ -1,31 +1,25 @@
import { useState } from 'react'
import { Link, useLocation } from 'react-router-dom'
import { Dropdown } from './ui/Dropdown'
import { ChevronDownIcon } from '@heroicons/react/20/solid'
import { Link, useLocation, useNavigate } from 'react-router-dom'
import { smoothScrollToElement } from '@/utils/scroll'
import { Container } from './Container'
import { Button } from './Button'
import pmyceliumLogo from '../images/logos/logo_1.png'
import pmyceliumLogo from '../images/logos/mainlogo.svg'
import { Dialog } from '@headlessui/react'
import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
const cloudNavItems = [
{ name: 'Cloud', href: '/cloud' },
{ name: 'Compute', href: '/compute' },
{ name: 'Storage', href: '/storage' },
{ name: 'GPU', href: '/gpu' },
]
export function Header() {
const location = useLocation()
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
const getCurrentPageName = () => {
const currentPath = location.pathname;
if (currentPath.startsWith('/compute')) return 'Compute';
if (currentPath.startsWith('/storage')) return 'Storage';
if (currentPath.startsWith('/gpu')) return 'GPU';
return 'Cloud';
};
const navigate = useNavigate()
const location = useLocation()
const handleGetConnectorClick = () => {
if (location.pathname === '/network') {
smoothScrollToElement('download', 1200)
} else {
navigate('/network')
}
}
return (
<header className="bg-white">
@@ -36,28 +30,24 @@ export function Header() {
<img src={pmyceliumLogo} alt="Mycelium" className="h-8 w-auto" />
</Link>
<div className="hidden lg:flex lg:gap-10">
<Dropdown
buttonContent={
<>
{['Compute', 'Storage', 'GPU'].includes(getCurrentPageName()) ? (
<>
<span className="text-gray-500">Cloud {' >'} </span>
<span>{getCurrentPageName()}</span>
</>
) : (
'Cloud'
)}
<ChevronDownIcon className="h-5 w-5" aria-hidden="true" />
</>
}
items={cloudNavItems}
/>
<Link
to="/network"
className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors"
>
Network
</Link>
<Link
to="/cloud"
className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors"
>
Cloud
</Link>
<Link
to="/pods"
className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors"
>
Pods
</Link>
<Link
to="/agents"
className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors"
@@ -65,10 +55,10 @@ export function Header() {
Agents
</Link>
<Link
to="/pods"
to="/nodes"
className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors"
>
Pods
Nodes
</Link>
</div>
</div>
@@ -83,7 +73,7 @@ export function Header() {
>
Deploy Now
</Button>
<Button to="/download" variant="solid" color="cyan">
<Button variant="solid" color="cyan" onClick={handleGetConnectorClick}>
Get Mycelium Connector
</Button>
</div>
@@ -124,16 +114,6 @@ export function Header() {
<div className="mt-6 flow-root">
<div className="-my-6 divide-y divide-gray-500/10">
<div className="space-y-2 py-6">
{cloudNavItems.map((item) => (
<Link
key={item.name}
to={item.href}
className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
onClick={() => setMobileMenuOpen(false)}
>
{item.name}
</Link>
))}
<Link
to="/network"
className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
@@ -141,6 +121,20 @@ export function Header() {
>
Network
</Link>
<Link
to="/cloud"
className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
onClick={() => setMobileMenuOpen(false)}
>
Cloud
</Link>
<Link
to="/pods"
className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
onClick={() => setMobileMenuOpen(false)}
>
Pods
</Link>
<Link
to="/agents"
className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
@@ -149,11 +143,11 @@ export function Header() {
Agents
</Link>
<Link
to="/pods"
to="/nodes"
className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
onClick={() => setMobileMenuOpen(false)}
>
Pods
Nodes
</Link>
</div>
<div className="py-6">
@@ -168,7 +162,15 @@ export function Header() {
>
Start Deployment
</Button>
<Button to="/download" variant="solid" color="cyan" className="mt-4 w-full" onClick={() => setMobileMenuOpen(false)}>
<Button
variant="solid"
color="cyan"
className="mt-4 w-full"
onClick={() => {
setMobileMenuOpen(false)
handleGetConnectorClick()
}}
>
Get Mycelium Connector
</Button>
</div>

183
src/components/HeaderDark.tsx Normal file
View File

@@ -0,0 +1,183 @@
import { useState } from 'react'
import { Link, useLocation, useNavigate } from 'react-router-dom'
import { smoothScrollToElement } from '@/utils/scroll'
import { Container } from './Container'
import { Button } from './Button'
import pmyceliumLogo from '../images/logos/mainlogo.svg'
import { Dialog } from '@headlessui/react'
import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
export function HeaderDark() {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
const navigate = useNavigate()
const location = useLocation()
const handleGetConnectorClick = () => {
if (location.pathname === '/network') {
smoothScrollToElement('download', 1200)
} else {
navigate('/network')
}
}
return (
<header className="bg-[#111111]">
<nav className="border-b border-gray-800">
<Container className="flex bg-transparent justify-between py-4">
<div className="relative z-10 flex items-center gap-16">
<Link to="/" aria-label="Home">
<img src={pmyceliumLogo} alt="Mycelium" className="h-8 w-auto" />
</Link>
<div className="hidden lg:flex lg:gap-10">
<Link
to="/network"
className="text-base/7 tracking-tight text-gray-300 hover:text-cyan-400 transition-colors"
>
Network
</Link>
<Link
to="/cloud"
className="text-base/7 tracking-tight text-gray-300 hover:text-cyan-400 transition-colors"
>
Cloud
</Link>
<Link
to="/pods"
className="text-base/7 tracking-tight text-gray-300 hover:text-cyan-400 transition-colors"
>
Pods
</Link>
<Link
to="/agents"
className="text-base/7 tracking-tight text-gray-300 hover:text-cyan-400 transition-colors"
>
Agents
</Link>
<Link
to="/nodes"
className="text-base/7 tracking-tight text-gray-300 hover:text-cyan-400 transition-colors"
>
Nodes
</Link>
</div>
</div>
<div className="flex items-center gap-6">
<div className="flex items-center gap-6 max-lg:hidden">
<Button
to="https://myceliumcloud.tf"
variant="outline"
as="a"
target="_blank"
rel="noopener noreferrer"
>
Deploy Now
</Button>
<Button variant="solid" color="cyan" onClick={handleGetConnectorClick}>
Get Mycelium Connector
</Button>
</div>
<div className="lg:hidden">
<button
type="button"
className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-300 hover:text-cyan-400 transition-colors"
onClick={() => setMobileMenuOpen(true)}
>
<span className="sr-only">Open main menu</span>
<Bars3Icon className="h-6 w-6" aria-hidden="true" />
</button>
</div>
</div>
</Container>
</nav>
<Dialog as="div" className="lg:hidden" open={mobileMenuOpen} onClose={setMobileMenuOpen}>
<div className="fixed inset-0 z-10" />
<Dialog.Panel className="fixed inset-y-0 right-0 z-10 w-full overflow-y-auto bg-[#111111] px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-200/10">
<div className="flex items-center justify-between">
<Link to="#" className="-m-1.5 p-1.5">
<span className="sr-only">Mycelium</span>
<img
className="h-8 w-auto"
src={pmyceliumLogo}
alt=""
/>
</Link>
<button
type="button"
className="-m-2.5 rounded-md p-2.5 text-gray-300 hover:text-cyan-400 transition-colors"
onClick={() => setMobileMenuOpen(false)}
>
<span className="sr-only">Close menu</span>
<XMarkIcon className="h-6 w-6" aria-hidden="true" />
</button>
</div>
<div className="mt-6 flow-root">
<div className="-my-6 divide-y divide-gray-500/20">
<div className="space-y-2 py-6">
<Link
to="/network"
className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-white hover:bg-gray-800"
onClick={() => setMobileMenuOpen(false)}
>
Network
</Link>
<Link
to="/cloud"
className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-white hover:bg-gray-800"
onClick={() => setMobileMenuOpen(false)}
>
Cloud
</Link>
<Link
to="/pods"
className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-white hover:bg-gray-800"
onClick={() => setMobileMenuOpen(false)}
>
Pods
</Link>
<Link
to="/agents"
className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-white hover:bg-gray-800"
onClick={() => setMobileMenuOpen(false)}
>
Agents
</Link>
<Link
to="/nodes"
className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-white hover:bg-gray-800"
onClick={() => setMobileMenuOpen(false)}
>
Nodes
</Link>
</div>
<div className="py-6">
<Button
to="https://myceliumcloud.tf"
variant="outline"
as="a"
target="_blank"
rel="noopener noreferrer"
className="w-full"
onClick={() => setMobileMenuOpen(false)}
>
Start Deployment
</Button>
<Button
variant="solid"
color="cyan"
className="mt-4 w-full"
onClick={() => {
setMobileMenuOpen(false)
handleGetConnectorClick()
}}
>
Get Mycelium Connector
</Button>
</div>
</div>
</div>
</Dialog.Panel>
</Dialog>
</header>
)
}

9
src/components/HomeHeadline.tsx Normal file
View File

@@ -0,0 +1,9 @@
import { TextHoverEffect } from "@/components/ui/text-hover-effect";
export function HomeHeadline() {
return (
<div className="flex items-center justify-center h-auto max-h-[200px]">
<TextHoverEffect text="MYCELIUM" />
</div>
);
}

34
src/components/Layout.tsx
View File

@@ -1,8 +1,42 @@
import { useEffect } from 'react'
import { Outlet } from 'react-router-dom'
import { Footer } from './Footer'
import { Header } from './Header'
export function Layout() {
useEffect(() => {
if (typeof window === 'undefined') return
if (document.getElementById('mailerlite-universal')) return
const script = document.createElement('script')
script.id = 'mailerlite-universal'
script.innerHTML = `
(function(m,a,i,l,e,r){
m['MailerLiteObject']=e;
function f(){
var c={a:arguments,q:[]};
var r=this.push(c);
return "number"!=typeof r?r:f.bind(c.q);
}
f.q=f.q||[];
m[e]=m[e]||f.bind(f.q);
m[e].q=m[e].q||f.q;
r=a.createElement(i);
var _=a.getElementsByTagName(i)[0];
r.async=1;
r.src=l+'?v'+(~~(new Date().getTime()/1000000));
_.parentNode.insertBefore(r,_);
})(window, document, 'script', 'https://static.mailerlite.com/js/universal.js', 'ml');
window.ml_account = ml('accounts', '1778010', 'x2d3d9f8n1', 'load');
`
document.body.appendChild(script)
return () => {
script.remove()
}
}, [])
return (
<div className="bg-[#fdfdfd] antialiased relative" style={{ fontFamily: 'var(--font-inter)' }}>

8
src/components/Texts.tsx
View File

@@ -12,8 +12,8 @@ const colorVariants = {
primary: 'text-gray-900',
secondary: 'text-gray-600',
light: 'text-gray-50',
accent: 'text-cyan-500',
cyan: 'text-cyan-50',
accent: 'text-cyan-400',
cyan: 'text-cyan-400',
white: 'text-white',
dark: 'text-gray-950',
tertiary: 'text-gray-700',
@@ -162,5 +162,5 @@ export const DownloadCardDescription = createTextComponent(
'text-base/7 leading-normal tracking-normal'
)
export const CT = createTextComponent('span', 'text-base lg:text-lg font-medium')
export const CP = createTextComponent('p', 'text-sm lg:text-base tracking-wide leading-tight font-light')
export const CT = createTextComponent('span', 'text-base lg:text-lg leading-normal font-medium')
export const CP = createTextComponent('p', 'text-sm lg:text-base tracking-wide leading-normal font-light')

86
src/components/magicui/infinite-moving-cards.tsx
View File

@@ -1,12 +1,12 @@
"use client";
import { cn } from "@/lib/utils";
import React, { useCallback, useEffect, useState } from "react";
import React, { useEffect, useRef, useState } from "react";
export const InfiniteMovingCards = ({
items,
direction = "left",
speed = "fast",
speed = "slow",
pauseOnHover = true,
className,
}: {
@@ -15,43 +15,39 @@ export const InfiniteMovingCards = ({
speed?: "fast" | "normal" | "slow";
pauseOnHover?: boolean;
className?: string;
}): JSX.Element => {
const containerRef = React.useRef<HTMLDivElement>(null);
const scrollerRef = React.useRef<HTMLUListElement>(null);
const [start, setStart] = useState(false);
const getSpeed = useCallback(() => {
if (containerRef.current) {
if (speed === "fast") {
containerRef.current.style.setProperty("--animation-duration", "20s");
} else if (speed === "normal") {
containerRef.current.style.setProperty("--animation-duration", "40s");
} else {
containerRef.current.style.setProperty("--animation-duration", "80s");
}
}
}, [speed]);
const addAnimation = useCallback(() => {
if (containerRef.current && scrollerRef.current) {
const scrollerContent = Array.from(scrollerRef.current.children);
scrollerContent.forEach((item) => {
const duplicatedItem = item.cloneNode(true);
if (scrollerRef.current) {
scrollerRef.current.appendChild(duplicatedItem);
}
});
getSpeed();
setStart(true);
}
}, [getSpeed]);
}) => {
const containerRef = useRef<HTMLDivElement>(null);
const scrollerRef = useRef<HTMLUListElement>(null);
const [isReady, setIsReady] = useState(false);
useEffect(() => {
addAnimation();
}, [addAnimation]);
if (!scrollerRef.current) return;
const children = Array.from(scrollerRef.current.children);
// duplicate each item ONCE
children.forEach((item) => {
const clone = item.cloneNode(true);
scrollerRef.current!.appendChild(clone);
});
// set speed variable
const duration =
speed === "fast" ? "20s" : speed === "normal" ? "40s" : "80s";
containerRef.current?.style.setProperty(
"--animation-duration",
duration
);
// set direction variable
containerRef.current?.style.setProperty(
"--animation-direction",
direction === "left" ? "forwards" : "reverse"
);
setIsReady(true);
}, [direction, speed]);
return (
<div
@@ -61,16 +57,16 @@ export const InfiniteMovingCards = ({
<ul
ref={scrollerRef}
className={cn(
"flex min-w-full shrink-0 gap-16 py-4 w-max flex-nowrap",
start && "animate-scroll",
pauseOnHover && "hover:[animation-play-state:paused]",
"flex w-max shrink-0 gap-16 py-4",
isReady &&
(direction === "left"
? "animate-infinite-scroll"
: "animate-infinite-scroll-right"),
pauseOnHover && "hover:[animation-play-state:paused]"
)}
style={{
"--animation-direction": direction === "left" ? "forwards" : "reverse",
} as React.CSSProperties}
>
{items.map((item, idx) => (
<li className="relative flex-shrink-0" key={idx}>
{items.map((item, i) => (
<li key={i} className="flex-shrink-0">
{item}
</li>
))}

122
src/components/ui/DynamicMapContainer.tsx Normal file
View File

@@ -0,0 +1,122 @@
import { useState, useEffect } from 'react';
import WorldMap from './world-map';
import { motion } from 'framer-motion';
// Interface for the simplified data passed to WorldMap
interface GeoNode {
lat: number;
lng: number;
label?: string;
color?: string;
}
// Interface for the raw data structure expected from the gridproxy API
interface RawNode {
node_id: number;
location: {
latitude: string; // API often returns these as strings
longitude: string; // API often returns these as strings
city: string;
country: string;
};
// ... other raw fields you don't need
}
const clusterNodes = (nodeList: GeoNode[], cellSize = 2) => {
const buckets = new Map<
string,
{ latSum: number; lngSum: number; count: number }
>();
nodeList.forEach((node) => {
const latBucket = Math.round(node.lat / cellSize) * cellSize;
const lngBucket = Math.round(node.lng / cellSize) * cellSize;
const key = `${latBucket}|${lngBucket}`;
const bucket = buckets.get(key);
if (bucket) {
bucket.latSum += node.lat;
bucket.lngSum += node.lng;
bucket.count += 1;
} else {
buckets.set(key, {
latSum: node.lat,
lngSum: node.lng,
count: 1,
});
}
});
return Array.from(buckets.values()).map((bucket) => {
const avgLat = bucket.latSum / bucket.count;
const avgLng = bucket.lngSum / bucket.count;
const count = bucket.count;
let color = "#06b6d4";
if (count > 20) {
color = "#0891b2";
} else if (count > 5) {
color = "#22d3ee";
}
return {
lat: avgLat,
lng: avgLng,
color,
label: `${count} nodes`,
};
});
};
function DynamicMapContainer() {
const [loading, setLoading] = useState(true);
const [nodes, setNodes] = useState<GeoNode[]>([]);
const API_URL = "https://gridproxy.grid.tf/nodes?healthy=true&size=500";
useEffect(() => {
async function fetchNodeData() {
try {
const response = await fetch(API_URL);
const data: RawNode[] = await response.json();
const geoNodes: GeoNode[] = data
.filter((node: RawNode) => node.location && node.location.latitude && node.location.longitude)
.map((node: RawNode) => ({
lat: parseFloat(node.location.latitude),
lng: parseFloat(node.location.longitude),
label: `${node.location.city}, ${node.location.country} (${node.node_id})`,
}));
const clusteredNodes = clusterNodes(geoNodes);
setNodes(clusteredNodes);
} catch (error) {
console.error("Failed to fetch node data:", error);
} finally {
setLoading(false);
}
}
fetchNodeData();
}, []);
// While fetching, show a loading state
if (loading) {
return (
<div className="flex justify-center items-center w-full aspect-[2/1] bg-[#111111] rounded-lg text-cyan-500">
<motion.span
animate={{ rotate: 360 }}
transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
className="text-4xl"
>
🌎
</motion.span>
<p className="ml-4">Loading nodes...</p>
</div>
);
}
// After data is loaded, render the map
return <WorldMap nodes={nodes} />;
}
export default DynamicMapContainer;

64
src/components/ui/GridBlink.tsx Normal file
View File

@@ -0,0 +1,64 @@
"use client";
import { useEffect, useRef } from "react";
export function GridBlink() {
const svgRef = useRef<SVGSVGElement>(null);
const maxActive = 3; // ✅ limit active squares
useEffect(() => {
const svg = svgRef.current;
if (!svg) return;
const squares = Array.from(svg.querySelectorAll<SVGRectElement>(".blink-square"));
function scheduleBlink() {
// ✅ only blink if we have too few active
const currentlyActive = squares.filter(sq => sq.classList.contains("active"));
if (currentlyActive.length < maxActive) {
const sq = squares[Math.floor(Math.random() * squares.length)];
sq.classList.add("active");
const duration = 800 + Math.random() * 1000; // ✅ slower fade-out
setTimeout(() => {
sq.classList.remove("active");
}, duration);
}
// ✅ slower scheduling
setTimeout(scheduleBlink, 300 + Math.random() * 600);
}
scheduleBlink();
}, []);
const rows = 20;
const cols = 32;
const size = 40;
return (
<svg
ref={svgRef}
className="pointer-events-none absolute inset-0 z-0"
style={{ width: "100%", height: "100%" }}
>
{Array.from({ length: rows * cols }).map((_, i) => {
const x = (i % cols) * size;
const y = Math.floor(i / cols) * size;
return (
<rect
key={i}
className="blink-square"
x={x}
y={y}
width={size}
height={size}
fill="transparent"
stroke="#efefef"
strokeWidth="1"
/>
);
})}
</svg>
);
}

16
src/components/ui/floating-navbar.tsx
View File

@@ -6,9 +6,10 @@ import {
useScroll,
useMotionValueEvent,
} from "motion/react";
import { Link } from "react-router-dom";
import { Link, useLocation, useNavigate } from "react-router-dom";
import { cn } from "@/lib/utils";
import { Button } from "../Button";
import { smoothScrollToElement } from "@/utils/scroll";
export const FloatingNav = ({
@@ -23,8 +24,17 @@ export const FloatingNav = ({
className?: string;
}) => {
const { scrollYProgress } = useScroll();
const [visible, setVisible] = useState(true);
const navigate = useNavigate();
const location = useLocation();
const handleGetConnectorClick = () => {
if (location.pathname === "/network") {
smoothScrollToElement("download", 1200);
} else {
navigate("/network");
}
};
useMotionValueEvent(scrollYProgress, "change", (current) => {
if (typeof current === "number") {
@@ -80,7 +90,7 @@ export const FloatingNav = ({
>
<span className="hidden sm:block text-sm">Docs</span>
</a>
<Button to="/download" variant="solid" color="cyan">
<Button variant="solid" color="cyan" onClick={handleGetConnectorClick}>
Get Mycelium Connector
</Button>
</div>

63
src/components/ui/spotlight.tsx Normal file
View File

@@ -0,0 +1,63 @@
import { cn } from "@/lib/utils";
type SpotlightProps = {
className?: string;
fill?: string;
};
export const Spotlight = ({ className, fill }: SpotlightProps) => {
return (
<svg
className={cn(
"animate-spotlight pointer-events-none absolute z-[1] h-[169%] w-[138%] lg:w-[84%] opacity-100 mix-blend-screen",
className
)}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 3787 2842"
fill="none"
>
<g filter="url(#filter)">
<ellipse
cx="1924.71"
cy="273.501"
rx="1924.71"
ry="273.501"
transform="matrix(-0.822377 -0.568943 -0.568943 0.822377 3631.88 2291.09)"
fill={fill || "url(#spotlightGradient)"}
fillOpacity="1"
/>
</g>
<defs>
{/* ✅ Cyan radial gradient */}
<radialGradient
id="spotlightGradient"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(2200 1600) rotate(90) scale(1800 2800)"
>
<stop offset="0%" stopColor="#00eaff" stopOpacity="0.95" />
<stop offset="40%" stopColor="#00eaff" stopOpacity="0.35" />
<stop offset="100%" stopColor="#00eaff" stopOpacity="0" />
</radialGradient>
<filter
id="filter"
x="0.860352"
y="0.838989"
width="3785.16"
height="2840.26"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="151" result="effect1_foregroundBlur" />
</filter>
</defs>
</svg>
);
};

139
src/components/ui/text-hover-effect.tsx Normal file
View File

@@ -0,0 +1,139 @@
"use client";
import { useRef, useEffect, useState } from "react";
import { motion, useAnimation } from "motion/react";
export const TextHoverEffect = ({
text,
duration = 6, // loop duration
}: {
text: string;
duration?: number;
}) => {
const svgRef = useRef<SVGSVGElement>(null);
const controls = useAnimation();
const [hovered, setHovered] = useState(false);
// ✅ Animate mask looping automatically
useEffect(() => {
const loop = async () => {
while (true) {
await controls.start({
cx: ["20%", "80%", "50%"],
cy: ["20%", "80%", "50%"],
transition: {
duration,
ease: "easeInOut",
repeat: 0,
},
});
}
};
loop();
}, [controls, duration]);
return (
<svg
ref={svgRef}
width="100%"
height="100%"
viewBox="0 0 300 100"
xmlns="http://www.w3.org/2000/svg"
onMouseEnter={() => setHovered(true)}
onMouseLeave={() => setHovered(false)}
className="select-none"
>
<defs>
{/* ✅ Softer cyan gradient */}
<linearGradient id="textGradient" gradientUnits="userSpaceOnUse">
{hovered ? (
<>
<stop offset="0%" stopColor="#7df3ff" />
<stop offset="40%" stopColor="#4adffa" />
<stop offset="70%" stopColor="#18c5e8" />
<stop offset="100%" stopColor="#0aaecb" />
</>
) : (
<>
<stop offset="0%" stopColor="#7df3ff33" />
<stop offset="100%" stopColor="#0aaecb33" />
</>
)}
</linearGradient>
{/* ✅ Mask with autoplay motion */}
<motion.radialGradient
id="revealMask"
gradientUnits="userSpaceOnUse"
r="45%"
animate={controls}
initial={{ cx: "50%", cy: "50%" }}
>
<stop offset="0%" stopColor="white" />
<stop offset="100%" stopColor="black" />
</motion.radialGradient>
{/* ✅ Glow */}
<filter id="glow">
<feGaussianBlur stdDeviation="3.2" result="blur" />
<feMerge>
<feMergeNode in="blur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<mask id="textMask">
<rect x="0" y="0" width="100%" height="100%" fill="url(#revealMask)" />
</mask>
</defs>
{/* ✅ Background faint stroke */}
<text
x="50%"
y="50%"
textAnchor="middle"
dominantBaseline="middle"
strokeWidth="0.15"
className="fill-transparent stroke-neutral-300 dark:stroke-neutral-800 font-[helvetica] text-7xl font-bold"
style={{ opacity: hovered ? 0.25 : 0.1 }}
>
{text}
</text>
{/* ✅ Line drawing animation always plays too */}
<motion.text
x="50%"
y="50%"
textAnchor="middle"
dominantBaseline="middle"
strokeWidth="0.25"
className="fill-transparent stroke-cyan-300 font-[helvetica] text-7xl font-bold"
initial={{ strokeDashoffset: 600, strokeDasharray: 600 }}
animate={{
strokeDashoffset: 0,
strokeDasharray: 600,
}}
transition={{
duration: 2.2,
ease: "easeInOut",
}}
>
{text}
</motion.text>
{/* ✅ Final filled glowing cyan text (mask reveals it) */}
<text
x="50%"
y="50%"
textAnchor="middle"
dominantBaseline="middle"
stroke="url(#textGradient)"
strokeWidth="1.1"
mask="url(#textMask)"
filter="url(#glow)"
className="font-[helvetica] text-7xl font-bold fill-[url(#textGradient)]"
>
{text}
</text>
</svg>
);
};

218
src/components/ui/world-map.tsx
View File

@@ -1,7 +1,7 @@
"use client";
import { useRef } from "react";
import { motion } from "motion/react";
import { motion } from "framer-motion";
import DottedMap from "dotted-map";
interface MapProps {
@@ -9,158 +9,152 @@ interface MapProps {
start: { lat: number; lng: number; label?: string };
end: { lat: number; lng: number; label?: string };
}>;
// New prop for dynamic standalone nodes
nodes?: Array<{ lat: number; lng: number; label?: string; color?: string }>;
lineColor?: string;
}
export default function WorldMap({
dots = [],
nodes = [],
lineColor = "#06b6d4",
}: MapProps) {
const svgRef = useRef<SVGSVGElement>(null);
const map = new DottedMap({ height: 100, grid: "diagonal" });
// ✅ Force dark-dotted map theme
const map = new DottedMap({ height: 100, grid: "diagonal" });
const svgMap = map.getSVG({
radius: 0.22,
color: "#FFFFFF40", // Hardcoded for dark theme
color: "#06b6d480",
shape: "circle",
backgroundColor: "black", // Hardcoded for dark theme
backgroundColor: "#111111",
});
// ✅ Point projection stays the same
// Projects lat/lng to the SVG's 800x400 viewBox coordinates
const projectPoint = (lat: number, lng: number) => {
const x = (lng + 180) * (800 / 360);
const y = (90 - lat) * (400 / 180);
const y = (90 - lat) * (400 / 180) + 45;
return { x, y };
};
const createCurvedPath = (
start: { x: number; y: number },
end: { x: number; y: number }
) => {
const createCurvedPath = (start: any, end: any) => {
const midX = (start.x + end.x) / 2;
const midY = Math.min(start.y, end.y) - 50;
// Creates an arc that bows upward by 50 units
const midY = Math.min(start.y, end.y) - 50;
return `M ${start.x} ${start.y} Q ${midX} ${midY} ${end.x} ${end.y}`;
};
return (
<div className="w-full aspect-[2/1] dark:bg-black bg-white rounded-lg relative font-sans">
<div className="w-full aspect-[2/1] bg-[#111111] rounded-lg relative font-sans">
<img
src={`data:image/svg+xml;utf8,${encodeURIComponent(svgMap)}`}
className="h-full w-full [mask-image:linear-gradient(to_bottom,transparent,white_10%,white_90%,transparent)] pointer-events-none select-none"
className="h-full w-full pointer-events-none select-none opacity-[0.6]"
alt="world map"
height="495"
width="1056"
draggable={false}
/>
{/* ✅ Lines + points + new standalone nodes */}
<svg
ref={svgRef}
viewBox="0 0 800 400"
className="w-full h-full absolute inset-0 pointer-events-none select-none"
>
{dots.map((dot, i) => {
const startPoint = projectPoint(dot.start.lat, dot.start.lng);
const endPoint = projectPoint(dot.end.lat, dot.end.lng);
{/* Glowing path gradient DEFS */}
<defs>
<linearGradient id="path-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stopColor="black" stopOpacity="0" />
<stop offset="5%" stopColor={lineColor} stopOpacity="1" />
<stop offset="95%" stopColor={lineColor} stopOpacity="1" />
<stop offset="100%" stopColor="black" stopOpacity="0" />
</linearGradient>
</defs>
{/* ✅ DYNAMIC STANDALONE NODE DOTS (New Section) */}
{nodes.map((node, i) => {
const p = projectPoint(node.lat, node.lng);
const dotColor = node.color || lineColor;
return (
<g key={`path-group-${i}`}>
<motion.path
d={createCurvedPath(startPoint, endPoint)}
fill="none"
stroke="url(#path-gradient)"
strokeWidth="1"
initial={{
pathLength: 0,
}}
animate={{
pathLength: 1,
}}
transition={{
duration: 1,
delay: 0.5 * i,
ease: "easeOut",
}}
key={`start-upper-${i}`}
></motion.path>
<g key={`node-${i}`}>
{/* Outer pulsing circle */}
<circle cx={p.x} cy={p.y} r="2" fill={dotColor} opacity="0.5">
<animate
attributeName="r"
from="2"
to="7"
dur="1.4s"
repeatCount="indefinite"
/>
<animate
attributeName="opacity"
from="0.6"
to="0"
dur="1.4s"
repeatCount="indefinite"
/>
</circle>
{/* Inner fixed circle */}
<circle cx={p.x} cy={p.y} r="2" fill={dotColor} />
</g>
);
})}
<defs>
<linearGradient id="path-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stopColor="white" stopOpacity="0" />
<stop offset="5%" stopColor={lineColor} stopOpacity="1" />
<stop offset="95%" stopColor={lineColor} stopOpacity="1" />
<stop offset="100%" stopColor="white" stopOpacity="0" />
</linearGradient>
</defs>
{/* ✅ Animated curved travel lines (Existing Logic) */}
{dots.map((dot, i) => {
const startPoint = projectPoint(dot.start.lat, dot.start.lng);
const endPoint = projectPoint(dot.end.lat, dot.end.lng);
{dots.map((dot, i) => (
<g key={`points-group-${i}`}>
<g key={`start-${i}`}>
<circle
cx={projectPoint(dot.start.lat, dot.start.lng).x}
cy={projectPoint(dot.start.lat, dot.start.lng).y}
r="2"
fill={lineColor}
/>
<circle
cx={projectPoint(dot.start.lat, dot.start.lng).x}
cy={projectPoint(dot.start.lat, dot.start.lng).y}
r="2"
fill={lineColor}
opacity="0.5"
>
<animate
attributeName="r"
from="2"
to="8"
dur="1.5s"
begin="0s"
repeatCount="indefinite"
/>
<animate
attributeName="opacity"
from="0.5"
to="0"
dur="1.5s"
begin="0s"
repeatCount="indefinite"
/>
</circle>
return (
<motion.path
key={`path-${i}`}
d={createCurvedPath(startPoint, endPoint)}
fill="none"
stroke="url(#path-gradient)"
strokeWidth="1"
initial={{ pathLength: 0 }}
animate={{ pathLength: 1 }}
transition={{
duration: 1,
delay: 0.5 * i,
ease: "easeOut",
}}
/>
);
})}
{/* ✅ Start & end points with pulsing cyan glow (Existing Logic) */}
{dots.map((dot, i) => {
const s = projectPoint(dot.start.lat, dot.start.lng);
const e = projectPoint(dot.end.lat, dot.end.lng);
return (
<g key={`points-${i}`}>
{[s, e].map((p, idx) => (
<g key={idx}>
<circle cx={p.x} cy={p.y} r="2" fill={lineColor} />
<circle cx={p.x} cy={p.y} r="2" fill={lineColor} opacity="0.5">
<animate
attributeName="r"
from="2"
to="7"
dur="1.4s"
repeatCount="indefinite"
/>
<animate
attributeName="opacity"
from="0.6"
to="0"
dur="1.4s"
repeatCount="indefinite"
/>
</circle>
</g>
))}
</g>
<g key={`end-${i}`}>
<circle
cx={projectPoint(dot.end.lat, dot.end.lng).x}
cy={projectPoint(dot.end.lat, dot.end.lng).y}
r="2"
fill={lineColor}
/>
<circle
cx={projectPoint(dot.end.lat, dot.end.lng).x}
cy={projectPoint(dot.end.lat, dot.end.lng).y}
r="2"
fill={lineColor}
opacity="0.5"
>
<animate
attributeName="r"
from="2"
to="8"
dur="1.5s"
begin="0s"
repeatCount="indefinite"
/>
<animate
attributeName="opacity"
from="0.5"
to="0"
dur="1.5s"
begin="0s"
repeatCount="indefinite"
/>
</circle>
</g>
</g>
))}
);
})}
</svg>
</div>
);
}
}

1
src/images/logos/logomark.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="77" zoomAndPan="magnify" viewBox="0 0 57.75 54" height="72" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><clipPath id="6b820d2194"><path d="M 0.402344 0 L 57.101562 0 L 57.101562 6 L 0.402344 6 Z M 0.402344 0 " clip-rule="nonzero"/></clipPath><clipPath id="3794aac157"><path d="M 0.402344 23 L 57 23 L 57 30 L 0.402344 30 Z M 0.402344 23 " clip-rule="nonzero"/></clipPath><clipPath id="a8068b094c"><path d="M 0.402344 46 L 57.101562 46 L 57.101562 53 L 0.402344 53 Z M 0.402344 46 " clip-rule="nonzero"/></clipPath></defs><g clip-path="url(#6b820d2194)"><path stroke-linecap="butt" transform="matrix(0.736364, 0, 0, 0.736364, 0.402273, 0.00000196364)" fill="none" stroke-linejoin="miter" d="M 0.000096737 3.999805 L 76.537522 3.999805 " stroke="#43d7ff" stroke-width="8" stroke-opacity="1" stroke-miterlimit="4"/></g><g clip-path="url(#3794aac157)"><path fill="#43d7ff" d="M 0.402344 23.136719 L 35.746094 23.136719 L 35.746094 29.027344 L 0.402344 29.027344 M 41.636719 23.136719 L 56.761719 23.136719 L 56.761719 29.027344 L 41.636719 29.027344 " fill-opacity="1" fill-rule="nonzero"/></g><g clip-path="url(#a8068b094c)"><path stroke-linecap="butt" transform="matrix(0.736364, 0, 0, 0.736364, 0.402273, 46.951043)" fill="none" stroke-linejoin="miter" d="M 0.000096737 4.002635 L 76.537522 4.002635 " stroke="#43d7ff" stroke-width="8" stroke-opacity="1" stroke-miterlimit="4"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

1
src/images/logos/mainlogo.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

5
src/main.tsx
View File

@@ -1,10 +1,13 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { ThemeProvider } from 'next-themes'
import './styles/tailwind.css'
import App from './App'
createRoot(document.getElementById('root')!).render(
<StrictMode>
<App />
<ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
<App />
</ThemeProvider>
</StrictMode>,
)

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

@@ -1,15 +1,32 @@
"use client";
import { Eyebrow, H3, P } from "@/components/Texts";
import AgentCoordination from "./animations/AgentCoordination";
import DeterministicExecution from "./animations/DeterministicExecution";
import Fungistor from "./animations/Fungistor";
import Herodb from "./animations/Herodb";
import MOSSandboxes from "./animations/MOSSandboxes";
import MyceliumMesh from "./animations/MyceliumMesh";
const bentos = [
const bentos: {
id: string;
eyebrow?: string;
title: string;
subtitle?: string;
description: string;
animation: React.ComponentType | null;
colSpan: string;
rowSpan: string;
custom?: boolean;
noBorder?: boolean;
}[] = [
{
id: "core",
eyebrow: "ARCHITECTURE",
title: "Deterministic by Design",
title: "Intelligence Fabric",
description:
"Every workload runs exactly as declared: no drift, no hidden state, no surprises.",
video: null,
"The sovereign substrate for autonomous AI. Stateless, geo-aware, end-to-end encrypted—and verifiable from intent to execution.",
animation: null,
colSpan: "lg:col-span-3",
rowSpan: "lg:row-span-1",
custom: true,
@@ -23,7 +40,7 @@ const bentos = [
subtitle: "Long-Term AI Memory",
description:
"Erasure coding + compression slash storage bloat by up to 10× vs basic replication. Source-encrypted shards are geo-dispersed—lose pieces, rebuild perfectly from a quorum.",
video: "/videos/fungistor.mp4",
animation: Fungistor,
colSpan: "lg:col-span-3",
rowSpan: "lg:row-span-1",
},
@@ -33,7 +50,7 @@ const bentos = [
subtitle: "Active AI Memory",
description:
"Multimodal vector+keyword retrieval makes RAG feel instant across text, image, audio. Time-aware, policy-guarded context keeps results fresh while access stays governed.",
video: "/videos/herodb.mp4",
animation: Herodb,
colSpan: "lg:col-span-3",
rowSpan: "lg:row-span-1",
},
@@ -43,7 +60,7 @@ const bentos = [
subtitle: "Secure Agent Workspaces",
description:
"Attested, signed workspaces spin up ≈5s worldwide—ready to execute. Hardware isolation and scoped egress: run hard, tear down clean, zero residue.",
video: "/videos/herodb.mp4",
animation: MOSSandboxes,
colSpan: "lg:col-span-3",
rowSpan: "lg:row-span-1",
},
@@ -53,7 +70,7 @@ const bentos = [
subtitle: "Secure Communication Network",
description:
"A private, public-key fabric with self-healing multi-path routing. Glides through NATs and firewalls—direct, low-latency, no middlemen.",
video: "/videos/mesh.mp4",
animation: MyceliumMesh,
colSpan: "lg:col-span-2",
rowSpan: "lg:row-span-1",
},
@@ -63,7 +80,7 @@ const bentos = [
subtitle: "Verifiable Code Execution",
description:
"Declare intent, get a hash; remote attestation proves that is what runs. Reproducible builds, signed artifacts, immutable logs—supply chain, sealed.",
video: "/videos/deterministic.mp4",
animation: DeterministicExecution,
colSpan: "lg:col-span-2",
rowSpan: "lg:row-span-1",
},
@@ -73,7 +90,7 @@ const bentos = [
subtitle: "Sovereign Workflow Management",
description:
"Your private agent conducts swarms of specialists in parallel. Policies fan out work; human checkpoints keep you in command.",
video: "/videos/agent.mp4",
animation: AgentCoordination,
colSpan: "lg:col-span-2",
rowSpan: "lg:row-span-1",
},
@@ -101,20 +118,12 @@ export function AgentBento() {
<div
className={`relative flex lg:h-90 flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] `}
>
{/* ✅ VIDEO instead of animation */}
{card.video ? (
<div className="lg:h-64 h-48 w-full overflow-hidden bg-transparent flex items-center">
<video
src={card.video}
autoPlay
loop
muted
playsInline
className="w-full h-full object-cover"
/>
{card.animation ? (
<div className="lg:h-64 h-48 w-full overflow-hidden bg-transparent flex items-center justify-center">
<div className="w-full h-full object-cover"><card.animation /></div>
</div>
) : (
<div className="h-48 w-full flex items-center justify-center bg-transparent" />
<div className="hidden md:flex md:h-48 w-full items-center justify-center bg-transparent" />
)}
<div className="px-8 pt-4 pb-6">
@@ -127,7 +136,7 @@ export function AgentBento() {
) : (
<>
{/* ✅ NEW SUBTITLE */}
<p className="text-sm text-cyan-400">{card.subtitle}</p>
<p className="text-sm text-cyan-500">{card.subtitle}</p>
<p className="mt-1 text-lg font-medium lg:text-xl tracking-tight text-white">
{card.title}
@@ -152,6 +161,9 @@ export function AgentBento() {
))}
</div>
</div>
{/* ✅ Bottom horizontal line with spacing */}
<div className="w-full border-b border-gray-800" />
<div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
</section>
);
}

56
src/pages/agents/AgentDesign.tsx Normal file
View File

@@ -0,0 +1,56 @@
import {
ComputerDesktopIcon,
ArrowsRightLeftIcon,
CircleStackIcon,
} from '@heroicons/react/24/solid'
const benefits = [
{
id: 1,
title: 'Each agent operates entirely inside your environment',
icon: ComputerDesktopIcon,
},
{
id: 2,
title: 'They communicate peer-to-peer across trusted nodes',
icon: ArrowsRightLeftIcon,
},
{
id: 3,
title: 'They access data locally without exposing it to external providers',
icon: CircleStackIcon,
},
]
export function AgentDesign() {
return (
<section className="w-full max-w-8xl mx-auto bg-transparent">
{/* ✅ Top horizontal line with spacing */}
<div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
<div className="w-full border border-l border-r border-gray-100" />
{/* ✅ Main content */}
<div className="mx-auto max-w-7xl border-gray-100">
<dl className="grid grid-cols-1 gap-4 lg:gap-6 lg:grid-cols-3 text-center ">
{benefits.map((item) => (
<div
key={item.id}
className="flex flex-col items-center bg-white py-10 px-4 border border-gray-100 lg:border-t-0 lg:border-b-0"
>
<item.icon className="h-10 w-10 text-cyan-500 mb-4" />
<h3 className="text-base font-medium text-black max-w-xs">
{item.title}
</h3>
</div>
))}
</dl>
</div>
{/* ✅ Bottom horizontal line with spacing */}
<div className="w-full border border-gray-100" />
<div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
</section>
)
}

Some files were not shown because too many files have changed in this diff Show More