emre/www_projectmycelium_com
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: redesign storage hero section with new layout and visuals

Browse Source 
- Replaced spinning circular animation with new static hero image (storagehero2.png)
- Updated hero section layout to right-aligned image with left content format
- Changed messaging to focus on data/intelligence relationship and storage capabilities
- Simplified component by removing BackgroundIllustration and ContactForm
- Updated CTA from "Join Waitlist" to "Talk to an expert"
- Added "STORAGE" label with cyan accent color
- Improved responsive design
This commit is contained in:
sasha-astiadi
2025-10-24 16:42:16 +02:00
parent be74079de2
commit c0df7c21a7
3 changed files with 28 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

144
src/pages/storage/StorageHero.tsx
View File

@@ -1,125 +1,37 @@
'use client'
import { useId, useState } from 'react'
import { Button } from '../../components/Button'
import { Container } from '../../components/Container'
import ContactForm from '../../components/ContactForm'
function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
const id = useId()
export function StorageHero() {
return (
<div {...props}>
<svg
viewBox="0 0 1026 1026"
fill="none"
aria-hidden="true"
className="absolute inset-0 h-full w-full animate-spin-slow"
>
<path
d="M1025 513c0 282.77-229.23 512-512 512S1 795.77 1 513 230.23 1 513 1s512 229.23 512 512Z"
stroke="#D4D4D4"
strokeOpacity="0.7"
<div className="relative bg-white">
<div className="relative h-80 overflow-hidden bg-transparent md:absolute md:right-0 md:h-full md:w-1/3 lg:w-1/2">
<img
alt=""
src="/images/storagehero2.png"
className="size-full object-cover"
/>
<path
d="M513 1025C230.23 1025 1 795.77 1 513"
stroke={`url(#${id}-gradient-1)`}
strokeLinecap="round"
/>
<defs>
<linearGradient
id={`${id}-gradient-1`}
x1="1"
y1="513"
x2="1"
y2="1025"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#06b6d4" />
<stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
</linearGradient>
</defs>
</svg>
<svg
viewBox="0 0 1026 1026"
fill="none"
aria-hidden="true"
className="absolute inset-0 h-full w-full animate-spin-reverse-slower"
>
<path
d="M913 513c0 220.914-179.086 400-400 400S113 733.914 113 513s179.086-400 400-400 400 179.086 400 400Z"
stroke="#D4D4D4"
strokeOpacity="0.7"
/>
<path
d="M913 513c0 220.914-179.086 400-400 400"
stroke={`url(#${id}-gradient-2)`}
strokeLinecap="round"
/>
<defs>
<linearGradient
id={`${id}-gradient-2`}
x1="913"
y1="513"
x2="913"
y2="913"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#06b6d4" />
<stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
</linearGradient>
</defs>
</svg>
</div>
<div className="relative mx-auto max-w-7xl py-24 sm:py-32 lg:px-8 lg:py-40">
<div className="pr-6 pl-6 md:mr-auto md:w-2/3 md:pr-16 lg:w-1/2 lg:pl-0 lg:pr-24 xl:pr-32">
<h2 className="text-base/7 font-semibold text-cyan-500">STORAGE</h2>
<p className="mt-2 text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">If GPUs are the engine, data is the lifeblood of intelligence.</p>
<p className="mt-6 text-base/7 text-gray-600">
Mycelium interconnects autonomous nodes with unified storage that adapts to every workload — from high-throughput object stores to parallel file systems.
Rooted in open standards, it ensures speed, resilience, and true data sovereignty.
</p>
<div className="mt-8">
<Button
href="#"
className="inline-flex rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
>
{' '}
Talk to an expert{' '}
</Button>
</div>
</div>
</div>
</div>
)
}
export function StorageHero() {
const [isContactOpen, setIsContactOpen] = useState(false)
return (
<>
<div className="overflow-hidden pb-24 lg:py-32 lg:pb-0">
<Container>
<div className="flex flex-col-reverse gap-y-16 lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
<div className="relative z-10 mx-auto max-w-2xl lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6">
<h1 className="text-4xl font-medium tracking-tight text-gray-900 lg:text-6xl">
Mycelium Storage
</h1>
<h2 className="mt-6 text-xl leading-normal tracking-tight text-gray-600 lg:text-2xl">
Decentralized storage for a new internet.
</h2>
<p className="mt-6 text-lg leading-tight text-gray-600 lg:text-xl lg:leading-normal">
A decentralized storage layer for the Mycelium platform—secure, resilient, and built for a new generation of applications.
</p>
<div className="mt-8 flex flex-wrap gap-x-6 gap-y-4">
<Button variant="solid" color="cyan" onClick={() => setIsContactOpen(true)}>
Join the Waitlist
</Button>
</div>
</div>
<div className="relative mt-0 lg:mt-10 lg:col-span-5 lg:row-span-2 xl:col-span-6">
<BackgroundIllustration className="absolute left-1/2 top-4 h-[1026px] w-[1026px] -translate-x-1/2 stroke-gray-300/70 sm:top-16 lg:-top-12 lg:ml-12" />
<div className="mx-auto h-[420px] max-w-[640px] mask-[linear-gradient(to_bottom,white_60%,transparent)] lg:absolute lg:-inset-x-10 lg:-top-24 lg:h-auto lg:pt-10 xl:-bottom-36">
<img
src="/images/cloud_icon.png"
alt="Mycelium Storage illustration"
className="mx-auto w-full max-w-[520px]"
width={1024}
height={1024}
/>
</div>
</div>
</div>
</Container>
</div>
<ContactForm
isOpen={isContactOpen}
onClose={() => setIsContactOpen(false)}
title="Join the Waitlist"
formType="storage_waitlist"
/>
</>
)
}