forked from emre/www_projectmycelium_com
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
This commit is contained in:
137
src/pages/mediakit/MediaColors.tsx
Normal file
137
src/pages/mediakit/MediaColors.tsx
Normal file
@@ -0,0 +1,137 @@
|
||||
'use client'
|
||||
|
||||
import { Eyebrow, H3, P, H4, CT, CP } 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 MediaColors() {
|
||||
return (
|
||||
<section className="relative w-full bg-[#121212] overflow-hidden">
|
||||
{/* TOP LINE */}
|
||||
<div className="max-w-7xl bg-[#121212] mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
|
||||
<div className="w-full border-t border-l border-r border-gray-800" />
|
||||
{/* Inner padding */}
|
||||
<div className="max-w-7xl relative px-6 lg:px-8 py-12 bg-[#111111] border border-t-0 border-b-0 border-gray-800 max-w-7xl mx-auto">
|
||||
<H3 as="h1" className="mt-4 text-white">
|
||||
Colors
|
||||
</H3>
|
||||
{/* primary */}
|
||||
<H4 className="mt-8 text-gray-200 tracking-normal flex items-center gap-2">
|
||||
<span>Primary Colors</span>
|
||||
|
||||
</H4>
|
||||
|
||||
<div className="mt-8 grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div className=" border border-gray-800 bg-[#111111] p-5 flex flex-col justify-between">
|
||||
<div>
|
||||
<CT className="text-sm font-medium text-white">Dark Gray</CT>
|
||||
<CP className="text-xs text-gray-200 mt-1">Primary background for dark surfaces and key sections.</CP>
|
||||
</div>
|
||||
<div className="mt-4 h-16 w-full border border-gray-700 bg-[#111111]" />
|
||||
<p className="mt-3 text-xs text-gray-500">Hex: #111111</p>
|
||||
</div>
|
||||
|
||||
<div className="border border-gray-800 bg-[#ffffff] p-5 flex flex-col justify-between">
|
||||
<div>
|
||||
<CT className="text-sm font-medium text-gray-900">White</CT>
|
||||
<CP className="text-xs text-gray-600 mt-1">Base surface color for light areas and content blocks.</CP>
|
||||
</div>
|
||||
<div className="mt-4 h-16 w-full border border-gray-200 bg-[#ffffff]" />
|
||||
<p className="mt-3 text-xs text-gray-500">Hex: #ffffff</p>
|
||||
</div>
|
||||
|
||||
<div className="border border-cyan-500/40 bg-[#0b1720] p-5 flex flex-col justify-between">
|
||||
<div>
|
||||
<CT className="text-sm font-medium text-cyan-300">Vivid Azure</CT>
|
||||
<CP className="text-xs text-cyan-100 mt-1">Accent color used for highlights, links, and actions.</CP>
|
||||
</div>
|
||||
<div className="mt-4 h-16 w-full bg-[#22d3ee]" />
|
||||
<p className="mt-3 text-xs text-cyan-100">Hex: #22d3ee</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<H4 className="mt-12 text-gray-200 tracking-normal flex items-center gap-2">
|
||||
<span>Secondary Colors</span>
|
||||
</H4>
|
||||
|
||||
<div className="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div className="border border-gray-800 bg-[#121212] p-5 flex flex-col justify-between">
|
||||
<div>
|
||||
<CT className="text-sm font-medium text-gray-200">Deep Gray</CT>
|
||||
<CP className="text-xs text-gray-500 mt-1">Supporting background for overlays and dark UI elements.</CP>
|
||||
</div>
|
||||
<div className="mt-4 h-16 w-full border border-gray-700 bg-[#121212]" />
|
||||
<p className="mt-3 text-xs text-gray-500">Hex: #121212</p>
|
||||
</div>
|
||||
|
||||
<div className="border border-gray-800 bg-[#fdfdfd] p-5 flex flex-col justify-between">
|
||||
<div>
|
||||
<CT className="text-sm font-medium text-gray-900">Soft White</CT>
|
||||
<CP className="text-xs text-gray-600 mt-1">Subtle light background for sections and cards.</CP>
|
||||
</div>
|
||||
<div className="mt-4 h-16 w-full border border-gray-200 bg-[#fdfdfd]" />
|
||||
<p className="mt-3 text-xs text-gray-500">Hex: #fdfdfd</p>
|
||||
</div>
|
||||
|
||||
<div className="border border-cyan-500/40 bg-[#0b1720] p-5 flex flex-col justify-between">
|
||||
<div>
|
||||
<CT className="text-sm font-medium text-cyan-300">Dark Azure</CT>
|
||||
<CP className="text-xs text-cyan-100 mt-1">Secondary accent color for highlights and focus states.</CP>
|
||||
</div>
|
||||
<div className="mt-4 h-16 w-full bg-[#06B6D4]" />
|
||||
<p className="mt-3 text-xs text-cyan-100">Hex: #06B6D4</p>
|
||||
</div>
|
||||
</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>
|
||||
)
|
||||
}
|
||||
186
src/pages/mediakit/MediaHero.tsx
Normal file
186
src/pages/mediakit/MediaHero.tsx
Normal file
@@ -0,0 +1,186 @@
|
||||
'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="mt-8 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-xs"
|
||||
aria-label="Download Mycelium light logos zip"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
className="h-12 w-12"
|
||||
>
|
||||
<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-xs"
|
||||
aria-label="Download Mycelium dark logos zip"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
className="h-12 w-12"
|
||||
>
|
||||
<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-2 lg:gap-0">
|
||||
{logo_dark.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="group gap-2 bg-[#121212] 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-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>
|
||||
)
|
||||
}
|
||||
23
src/pages/mediakit/MediaPage.tsx
Normal file
23
src/pages/mediakit/MediaPage.tsx
Normal file
@@ -0,0 +1,23 @@
|
||||
import React from 'react';
|
||||
import { AnimatedSection } from '@/components/AnimatedSection';
|
||||
import { MediaHero } from './MediaHero';
|
||||
import { MediaColors } from './MediaColors';
|
||||
import { MediaType } from './MediaType';
|
||||
|
||||
const MediaPage: React.FC = () => {
|
||||
return (
|
||||
<>
|
||||
<AnimatedSection>
|
||||
<MediaHero />
|
||||
</AnimatedSection>
|
||||
<AnimatedSection>
|
||||
<MediaColors />
|
||||
</AnimatedSection>
|
||||
<AnimatedSection>
|
||||
<MediaType />
|
||||
</AnimatedSection>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default MediaPage;
|
||||
26
src/pages/mediakit/MediaType.tsx
Normal file
26
src/pages/mediakit/MediaType.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
'use client'
|
||||
|
||||
import { H3, P, H4 } from '@/components/Texts'
|
||||
|
||||
export function MediaType() {
|
||||
return (
|
||||
<div className="">
|
||||
{/* Boxed container */}
|
||||
<div
|
||||
className="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-100 bg-white overflow-hidden"
|
||||
>
|
||||
{/* Inner padding */}
|
||||
<div className="px-6 lg:py-12">
|
||||
<div className="max-w-7xl lg:pl-6">
|
||||
<H3 as="h1" className="mt-4">
|
||||
Typography
|
||||
</H3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* ✅ Bottom horizontal line with spacing */}
|
||||
<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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user