forked from emre/www_projectmycelium_com
sasha-astiadi
c68a46691f
- 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
187 lines
8.1 KiB
TypeScript
187 lines
8.1 KiB
TypeScript
'use client'
|
|
|
|
import { H3, H4, P } from '@/components/Texts'
|
|
|
|
const logo_light = [
|
|
{
|
|
id: 'logomark_svg',
|
|
title: 'Logomark (SVG)',
|
|
image: '/images/mediakit/logo_light/logomark.svg',
|
|
},
|
|
{
|
|
id: 'logomark_png',
|
|
title: 'Logomark (PNG)',
|
|
image: '/images/mediakit/logo_light/logomark.png',
|
|
},
|
|
{
|
|
id: 'logo_svg',
|
|
title: 'Logo (SVG)',
|
|
image: '/images/mediakit/logo_light/logo.svg',
|
|
},
|
|
{
|
|
id: 'logo_png',
|
|
title: 'Logo (PNG)',
|
|
image: '/images/mediakit/logo_light/logo.png',
|
|
},
|
|
]
|
|
|
|
const logo_dark = [
|
|
{
|
|
id: 'logomark_svg',
|
|
title: 'Logomark (SVG)',
|
|
image: '/images/mediakit/logo_dark/logomark.svg',
|
|
},
|
|
{
|
|
id: 'logomark_png',
|
|
title: 'Logomark (PNG)',
|
|
image: '/images/mediakit/logo_dark/logomark.png',
|
|
},
|
|
{
|
|
id: 'logo_svg',
|
|
title: 'Logo (SVG)',
|
|
image: '/images/mediakit/logo_dark/logo_dark.svg',
|
|
},
|
|
{
|
|
id: 'logo_png',
|
|
title: 'Logo (PNG)',
|
|
image: '/images/mediakit/logo_dark/logo_dark.png',
|
|
},
|
|
]
|
|
|
|
export function MediaHero() {
|
|
return (
|
|
<div className="">
|
|
<div className="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-100 bg-white overflow-hidden">
|
|
<div className="px-6 lg:py-12">
|
|
<div className="max-w-7xl lg:pl-6">
|
|
<H3 as="h1" className="mt-4">
|
|
Media Kit
|
|
</H3>
|
|
<P className="mt-4 text-gray-600 max-w-2xl">
|
|
Download official Mycelium logos for light and dark backgrounds in SVG and PNG formats.
|
|
</P>
|
|
|
|
<H4 className="lg:mt-8 mt-4 text-gray-800 tracking-normal flex items-center gap-2">
|
|
<span>Mycelium Logos (Light)</span>
|
|
<a
|
|
href="/images/mediakit/logo_light.zip"
|
|
download
|
|
className="inline-flex items-center justify-center rounded-full p-1 text-gray-800 hover:text-cyan-600 hover:bg-cyan-50 transition-colors text-[10px] md:text-xs md:p-1.5"
|
|
aria-label="Download Mycelium light logos zip"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
className="h-5 w-5 md:h-6 md:w-6"
|
|
>
|
|
<path d="M10 2a.75.75 0 0 1 .75.75v8.19l2.22-2.22a.75.75 0 1 1 1.06 1.06l-3.5 3.5a.75.75 0 0 1-1.06 0l-3.5-3.5a.75.75 0 0 1 1.06-1.06l2.22 2.22V2.75A.75.75 0 0 1 10 2Z" />
|
|
<path d="M3.5 12.75a.75.75 0 0 1 .75.75v1.5h11.5v-1.5a.75.75 0 0 1 1.5 0v2.25a.75.75 0 0 1-.75.75H4.25A.75.75 0 0 1 3.5 15v-1.5a.75.75 0 0 1 .75-.75Z" />
|
|
</svg>
|
|
</a>
|
|
</H4>
|
|
|
|
<div className="mt-6 max-w-7xl mx-auto">
|
|
<dl className="grid grid-cols-1 lg:grid-cols-4 gap-2 lg:gap-0">
|
|
{logo_light.map((item) => (
|
|
<div
|
|
key={item.id}
|
|
className="group gap-2 bg-white px-4 py-2 border border-gray-100 lg:border-t lg:border-b border-l-0.5 border-r-0.5 transition-all duration-300 ease-in-out hover:scale-[1.02] hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20"
|
|
>
|
|
<img
|
|
src={item.image}
|
|
alt={item.title}
|
|
className="h-20 w-auto object-contain opacity-90"
|
|
/>
|
|
<div className="text-left">
|
|
<h3 className="flex items-center gap-2 text-base font-semibold tracking-wide text-gray-900 mb-2">
|
|
<span>{item.title}</span>
|
|
<a
|
|
href={item.image}
|
|
download
|
|
className="inline-flex items-center justify-center rounded-full p-1 text-gray-900 hover:text-cyan-600 hover:bg-cyan-50 transition-colors"
|
|
aria-label={`Download ${item.title}`}
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
className="h-6 w-6"
|
|
>
|
|
<path d="M10 2a.75.75 0 0 1 .75.75v8.19l2.22-2.22a.75.75 0 1 1 1.06 1.06l-3.5 3.5a.75.75 0 0 1-1.06 0l-3.5-3.5a.75.75 0 0 1 1.06-1.06l2.22 2.22V2.75A.75.75 0 0 1 10 2Z" />
|
|
<path d="M3.5 12.75a.75.75 0 0 1 .75.75v1.5h11.5v-1.5a.75.75 0 0 1 1.5 0v2.25a.75.75 0 0 1-.75.75H4.25A.75.75 0 0 1 3.5 15v-1.5a.75.75 0 0 1 .75-.75Z" />
|
|
</svg>
|
|
</a>
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</dl>
|
|
</div>
|
|
|
|
<H4 className="mt-8 text-gray-800 tracking-normal flex items-center gap-2">
|
|
<span>Mycelium Logos (Dark)</span>
|
|
<a
|
|
href="/images/mediakit/logo_dark.zip"
|
|
download
|
|
className="inline-flex items-center justify-center rounded-full p-1 text-gray-800 hover:text-cyan-600 hover:bg-cyan-50 transition-colors text-[10px] md:text-xs md:p-1.5"
|
|
aria-label="Download Mycelium dark logos zip"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
className="h-5 w-5 md:h-6 md:w-6"
|
|
>
|
|
<path d="M10 2a.75.75 0 0 1 .75.75v8.19l2.22-2.22a.75.75 0 1 1 1.06 1.06l-3.5 3.5a.75.75 0 0 1-1.06 0l-3.5-3.5a.75.75 0 0 1 1.06-1.06l2.22 2.22V2.75A.75.75 0 0 1 10 2Z" />
|
|
<path d="M3.5 12.75a.75.75 0 0 1 .75.75v1.5h11.5v-1.5a.75.75 0 0 1 1.5 0v2.25a.75.75 0 0 1-.75.75H4.25A.75.75 0 0 1 3.5 15v-1.5a.75.75 0 0 1 .75-.75Z" />
|
|
</svg>
|
|
</a>
|
|
</H4>
|
|
|
|
<div className="bg-[#121212] w-full max-w-8xl mx-auto mt-6">
|
|
<dl className="grid grid-cols-1 lg:grid-cols-4 gap-0">
|
|
{logo_dark.map((item) => (
|
|
<div
|
|
key={item.id}
|
|
className="group gap-2 bg-[#121212] px-4 py-2 border border-gray-800 lg:border-t lg:border-b border-l-0.5 border-r-0.5 transition-all duration-300 ease-in-out hover:scale-[1.02] hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20"
|
|
>
|
|
<img
|
|
src={item.image}
|
|
alt={item.title}
|
|
className="h-20 w-auto object-contain opacity-90"
|
|
/>
|
|
<div className="text-left">
|
|
<h3 className="flex items-center gap-2 text-base font-semibold tracking-wide text-white mb-2">
|
|
<span>{item.title}</span>
|
|
<a
|
|
href={item.image}
|
|
download
|
|
className="inline-flex items-center justify-center rounded-full p-1 text-white hover:text-cyan-600 hover:bg-cyan-50 transition-colors"
|
|
aria-label={`Download ${item.title}`}
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
className="h-6 w-6"
|
|
>
|
|
<path d="M10 2a.75.75 0 0 1 .75.75v8.19l2.22-2.22a.75.75 0 1 1 1.06 1.06l-3.5 3.5a.75.75 0 0 1-1.06 0l-3.5-3.5a.75.75 0 0 1 1.06-1.06l2.22 2.22V2.75A.75.75 0 0 1 10 2Z" />
|
|
<path d="M3.5 12.75a.75.75 0 0 1 .75.75v1.5h11.5v-1.5a.75.75 0 0 1 1.5 0v2.25a.75.75 0 0 1-.75.75H4.25A.75.75 0 0 1 3.5 15v-1.5a.75.75 0 0 1 .75-.75Z" />
|
|
</svg>
|
|
</a>
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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>
|
|
</div>
|
|
)
|
|
}
|