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

refactor: update DevHub and DownloadHero layout with consistent borders and spacing

Browse Source 
- 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
This commit is contained in:
sasha-astiadi
2025-11-19 12:56:36 +01:00
parent 6beb9c1432
commit e5ed88b676
2 changed files with 24 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -36,8 +36,12 @@ const features = [
export function DevHub() {
return (
<div className="bg-[#121212] py-24 sm:py-32">
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<section className="bg-[#121212] w-full max-w-8xl mx-auto">
{/* Top spacing + border */}
<div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800" />
<div className="w-full border-t border-l border-r border-gray-800" />
<div className="relative px-6 lg:px-6 py-12 bg-[#111111] border border-t-0 border-b-0 border-gray-800 max-w-7xl mx-auto">
<div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-5">
<div className="col-span-2">
<h2 className="mb-2 text-base font-semibold leading-7 text-cyan-500">Get Started</h2>
@@ -63,7 +67,11 @@ export function DevHub() {
))}
</dl>
</div>
</div>
</div>
</div>
{/* Bottom horizontal line with spacing (match NetworkDownload) */}
<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>
)
}

19
src/pages/download/DownloadHero.tsx
View File

@@ -40,14 +40,14 @@ const features = [
export function DownloadHero() {
return (
<div className="py-16 sm:py-32">
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<section id="download" className="w-full max-w-8xl mx-auto bg-transparent">
<div className="mx-auto max-w-7xl px-6 lg:px-8 bg-white pt-24 pb-12 border border-t-0 border-b-0 border-gray-100">
<div className="mx-auto max-w-2xl lg:mx-0">
<motion.h2
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
className="text-5xl font-medium tracking-tight text-gray-900 lg:text-6xl"
className="text-4xl font-medium tracking-tight text-gray-900 lg:text-5xl"
>
Download Mycelium Network
</motion.h2>
@@ -55,7 +55,7 @@ export function DownloadHero() {
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: 0.2 }}
className="mt-6 text-lg text-gray-600 lg:leading-8"
className="mt-8 text-lg text-gray-600 lg:leading-8"
>
Get Mycelium Network for Android, Windows, macOS, and iOS to securely connect, store, and interact with the decentralized network—seamlessly and efficiently. Not sure how it works?{' '}
<a
@@ -68,8 +68,9 @@ export function DownloadHero() {
</a>
</motion.p>
</div>
<div className="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
<dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 md:grid-cols-2 lg:max-w-none lg:grid-cols-4">
<div className="mx-auto mt-8 max-w-2xl lg:mt-12 lg:max-w-none">
<dl className="grid max-w-xl grid-cols-1 gap-x-8 lg:gap-y-16 gap-y-8 md:grid-cols-2 lg:max-w-none lg:grid-cols-4">
{features.map((feature) => (
<div
key={feature.name}
@@ -99,6 +100,10 @@ export function DownloadHero() {
</dl>
</div>
</div>
</div>
{/* Bottom horizontal line with spacing (match NetworkDownload) */}
<div className="w-full border-b 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>
)
}