Skip to content

feat: implement press kit page with guidelines and zip download (#86) #114

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ositaemmanuel653-netizen wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

feat: implement press kit page with guidelines and zip download (#86) #114

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added public/press-kit.zip
View file
Open in desktop
Binary file not shown.
82 changes: 74 additions & 8 deletions src/pages/Press.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,6 +190,71 @@ Wraith Protocol was founded with the conviction that privacy is not a premium fe
</p>
</section>

{/* Brand guidelines */}
<section className="flex flex-col gap-4">
<h2 className="font-mono text-[10px] font-semibold tracking-[1.5px] text-outline">
BRAND GUIDELINES
</h2>
<div className="flex flex-col gap-8">
<div className="flex flex-col gap-2">
<h3 className="font-heading text-lg font-bold text-on-surface">Clear Space</h3>
<p className="font-body text-[14px] text-on-surface-variant">
Always maintain a minimum clear space around the logo to ensure visibility and impact. The minimum clear space is equal to the height of the logomark.
</p>
<div className="mt-4 flex items-center justify-center border border-outline-variant bg-surface-container p-8">
<div className="relative border border-dashed border-primary p-6">
<span className="absolute -top-3 left-1/2 -translate-x-1/2 bg-surface-container px-2 font-mono text-[10px] text-primary">
X
</span>
<span className="absolute -left-3 top-1/2 -translate-y-1/2 bg-surface-container py-2 font-mono text-[10px] text-primary">
X
</span>
<span className="absolute -bottom-3 left-1/2 -translate-x-1/2 bg-surface-container px-2 font-mono text-[10px] text-primary">
X
</span>
<span className="absolute -right-3 top-1/2 -translate-y-1/2 bg-surface-container py-2 font-mono text-[10px] text-primary">
X
</span>
<img src="/press-kit/wraith-logo-dark.svg" alt="Clear space example" className="h-8" />
</div>
</div>
</div>

<div className="flex flex-col gap-2">
<h3 className="font-heading text-lg font-bold text-on-surface">Misuse Examples</h3>
<p className="font-body text-[14px] text-on-surface-variant">
To maintain brand integrity, please avoid the following common misuses of our logo.
</p>
<div className="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-3">
<div className="flex flex-col gap-2">
<div className="flex h-32 items-center justify-center border border-outline-variant bg-surface-container p-4">
<img src="/press-kit/wraith-logo-dark.svg" alt="Distorted" className="h-8 origin-center scale-y-150" />
</div>
<p className="text-center font-body text-[12px] text-on-surface-variant">
Do not distort or stretch
</p>
</div>
<div className="flex flex-col gap-2">
<div className="flex h-32 items-center justify-center border border-outline-variant bg-surface-container p-4">
<img src="/press-kit/wraith-logo-dark.svg" alt="Rotated" className="h-8 rotate-12" />
</div>
<p className="text-center font-body text-[12px] text-on-surface-variant">
Do not rotate
</p>
</div>
<div className="flex flex-col gap-2">
<div className="flex h-32 items-center justify-center border border-outline-variant bg-surface-container p-4">
<img src="/press-kit/wraith-logo-dark.svg" alt="Wrong color" className="h-8 opacity-50 sepia hue-rotate-180" />
</div>
<p className="text-center font-body text-[12px] text-on-surface-variant">
Do not change colors
</p>
</div>
</div>
</div>
</div>
</section>

{/* Typography */}
<section className="flex flex-col gap-4">
<h2 className="font-mono text-[10px] font-semibold tracking-[1.5px] text-outline">
Expand Down Expand Up @@ -256,17 +321,18 @@ Wraith Protocol was founded with the conviction that privacy is not a premium fe
<h2 className="font-mono text-[10px] font-semibold tracking-[1.5px] text-outline">
DOWNLOAD
</h2>
<p className="font-body text-[13px] leading-[1.6] text-on-surface-variant">
Individual SVG files are available above. A ZIP archive of the full press kit is
available on request — email us at{' '}
<div className="flex flex-col gap-4 border border-outline-variant bg-surface-container p-6 sm:flex-row sm:items-center sm:justify-between">
<p className="max-w-md font-body text-[13px] leading-[1.6] text-on-surface-variant">
Download the complete press kit including high-resolution logos (SVG and PNG formats for light and dark modes) and brand guidelines.
</p>
<a
href="mailto:press@usewraith.xyz"
className="text-primary underline underline-offset-2"
href="/press-kit.zip"
download
className="inline-flex h-10 shrink-0 items-center justify-center bg-primary px-6 font-mono text-[12px] font-bold text-surface transition-opacity hover:opacity-90"
>
press@usewraith.xyz
DOWNLOAD ZIP
</a>
.
</p>
</div>
</section>

{/* Press contact */}
Expand Down
Loading