Skip to content

Commit 050a90c

Browse files
devwebxyndevwebxyn
committed
Add social media kit and share assets
1 parent 031f511 commit 050a90c

16 files changed

Lines changed: 839 additions & 3 deletions

‎apps/frontend/.env‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
NEXT_PUBLIC_SITE_URL=
12
NEXT_PUBLIC_REPO_URL=https://github.com/devwebxyn/securemcp-lite
23
NEXT_PUBLIC_NPM_URL=https://www.npmjs.com/package/securemcp-lite
34
NEXT_PUBLIC_PROJECT_CHANNEL=public-release

‎apps/frontend/app/globals.css‎

Lines changed: 170 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -358,6 +358,169 @@ pre {
358358
display: block;
359359
}
360360

361+
.media-kit-page {
362+
padding-top: 4.2rem;
363+
}
364+
365+
.media-kit-shell {
366+
display: grid;
367+
gap: 1.75rem;
368+
}
369+
370+
.media-kit-heading h1 {
371+
margin: 0.85rem 0 1rem;
372+
max-width: 11ch;
373+
font-size: clamp(2.8rem, 5vw, 4.6rem);
374+
line-height: 0.94;
375+
letter-spacing: -0.06em;
376+
}
377+
378+
.media-kit-intro {
379+
display: flex;
380+
align-items: center;
381+
justify-content: space-between;
382+
gap: 1rem;
383+
flex-wrap: wrap;
384+
padding: 1.1rem 1.2rem;
385+
border-radius: var(--radius-lg);
386+
background: rgba(255, 247, 238, 0.72);
387+
border: 1px solid rgba(16, 32, 50, 0.08);
388+
box-shadow: var(--shadow);
389+
}
390+
391+
.media-kit-note {
392+
color: var(--muted);
393+
line-height: 1.7;
394+
}
395+
396+
.media-kit-actions {
397+
display: flex;
398+
gap: 0.8rem;
399+
flex-wrap: wrap;
400+
}
401+
402+
.media-kit-grid {
403+
display: grid;
404+
gap: 1.4rem;
405+
}
406+
407+
.media-card {
408+
display: grid;
409+
grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.1fr);
410+
gap: 1.2rem;
411+
padding: 1.2rem;
412+
border-radius: 28px;
413+
background: rgba(255, 248, 239, 0.76);
414+
border: 1px solid rgba(16, 32, 50, 0.08);
415+
box-shadow: var(--shadow);
416+
}
417+
418+
.media-card-preview {
419+
display: flex;
420+
align-items: center;
421+
justify-content: center;
422+
min-height: 320px;
423+
padding: 0.9rem;
424+
border-radius: 22px;
425+
background:
426+
radial-gradient(circle at top left, rgba(113, 245, 176, 0.16), transparent 34%),
427+
linear-gradient(180deg, rgba(12, 20, 34, 0.04), rgba(12, 20, 34, 0.08));
428+
}
429+
430+
.media-card-preview img {
431+
width: 100%;
432+
height: auto;
433+
display: block;
434+
border-radius: 18px;
435+
box-shadow: 0 24px 60px rgba(12, 20, 34, 0.18);
436+
}
437+
438+
.media-card-body {
439+
display: grid;
440+
gap: 1rem;
441+
align-content: start;
442+
}
443+
444+
.media-card-body h2 {
445+
margin: 0;
446+
font-size: clamp(1.6rem, 3vw, 2.4rem);
447+
letter-spacing: -0.04em;
448+
}
449+
450+
.media-card-body p,
451+
.media-usage span {
452+
color: var(--muted);
453+
line-height: 1.75;
454+
}
455+
456+
.media-card-meta {
457+
display: flex;
458+
gap: 0.65rem;
459+
flex-wrap: wrap;
460+
}
461+
462+
.media-pill {
463+
display: inline-flex;
464+
align-items: center;
465+
min-height: 34px;
466+
padding: 0 0.8rem;
467+
border-radius: 999px;
468+
background: rgba(12, 20, 34, 0.08);
469+
border: 1px solid rgba(12, 20, 34, 0.08);
470+
color: var(--navy);
471+
font-size: 0.88rem;
472+
font-weight: 700;
473+
}
474+
475+
.media-pill-soft {
476+
background: rgba(15, 141, 103, 0.1);
477+
color: #0c6a4f;
478+
}
479+
480+
.media-usage {
481+
display: grid;
482+
gap: 0.4rem;
483+
padding: 0.95rem 1rem;
484+
border-radius: 18px;
485+
background: rgba(255, 255, 255, 0.55);
486+
border: 1px solid rgba(16, 32, 50, 0.08);
487+
}
488+
489+
.media-card-actions {
490+
display: flex;
491+
gap: 0.8rem;
492+
flex-wrap: wrap;
493+
}
494+
495+
.media-kit-footer {
496+
display: grid;
497+
grid-template-columns: repeat(2, minmax(0, 1fr));
498+
gap: 1rem;
499+
}
500+
501+
.media-kit-footer-card {
502+
padding: 1.2rem;
503+
border-radius: var(--radius-lg);
504+
background: rgba(255, 248, 239, 0.76);
505+
border: 1px solid rgba(16, 32, 50, 0.08);
506+
box-shadow: var(--shadow);
507+
}
508+
509+
.media-kit-footer-card h2 {
510+
margin: 0 0 0.8rem;
511+
font-size: 1.3rem;
512+
letter-spacing: -0.03em;
513+
}
514+
515+
.media-checklist {
516+
margin: 0;
517+
padding-left: 1.1rem;
518+
display: grid;
519+
gap: 0.7rem;
520+
color: var(--muted);
521+
line-height: 1.7;
522+
}
523+
361524
.button-inline-icon-github {
362525
width: 16px;
363526
height: 16px;
@@ -1355,12 +1518,14 @@ pre {
13551518
.developer-grid,
13561519
.profile-grid,
13571520
.version-grid,
1521+
.media-kit-footer,
13581522
.profile-columns,
13591523
.version-columns,
13601524
.version-facts,
13611525
.three-up,
13621526
.two-up,
1363-
.footer-grid {
1527+
.footer-grid,
1528+
.media-card {
13641529
grid-template-columns: 1fr;
13651530
}
13661531

@@ -1405,4 +1570,8 @@ pre {
14051570
.docs-pager {
14061571
grid-template-columns: 1fr;
14071572
}
1573+
1574+
.media-kit-page {
1575+
padding-top: 2.8rem;
1576+
}
14081577
}

‎apps/frontend/app/layout.tsx‎

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,38 @@ import type { Metadata } from "next";
22

33
import { Footer } from "../components/footer";
44
import { Header } from "../components/header";
5+
import { siteConfig } from "../lib/site-config";
56

67
import "./globals.css";
78

9+
const siteUrl = siteConfig.siteUrl ? new URL(siteConfig.siteUrl) : undefined;
10+
const title = "SecureMCP-Lite";
11+
const description = "Local MCP firewall for AI agents. Policy-driven, stdio-first, easy to adopt.";
12+
813
export const metadata: Metadata = {
9-
title: "SecureMCP-Lite",
10-
description: "Local MCP firewall for AI agents. Policy-driven, stdio-first, easy to adopt.",
14+
metadataBase: siteUrl,
15+
title,
16+
description,
17+
openGraph: {
18+
title,
19+
description,
20+
type: "website",
21+
siteName: title,
22+
images: [
23+
{
24+
url: "/opengraph-image",
25+
width: 1200,
26+
height: 630,
27+
alt: "SecureMCP-Lite social card",
28+
},
29+
],
30+
},
31+
twitter: {
32+
card: "summary_large_image",
33+
title,
34+
description,
35+
images: ["/twitter-image"],
36+
},
1137
};
1238

1339
export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {

‎apps/frontend/app/media-kit/page.tsx‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
import type { Metadata } from "next";
2+
import Link from "next/link";
3+
4+
type SocialAsset = {
5+
title: string;
6+
description: string;
7+
dimensions: string;
8+
bestFor: string;
9+
imageSrc: string;
10+
imageAlt: string;
11+
downloadHref: string;
12+
previewHref: string;
13+
};
14+
15+
const socialAssets: SocialAsset[] = [
16+
{
17+
title: "Link Preview Card",
18+
description:
19+
"Wide social card for WhatsApp shares, Open Graph previews, Slack, Telegram, and any post that points back to the website.",
20+
dimensions: "1200 x 630 PNG",
21+
bestFor:
22+
"Best when you want the image to look strong in link unfurls and still work well for manual posting in landscape format.",
23+
imageSrc: "/social/securemcp-lite-og.png",
24+
imageAlt: "SecureMCP-Lite Open Graph preview card",
25+
downloadHref: "/social/securemcp-lite-og.png",
26+
previewHref: "/opengraph-image",
27+
},
28+
{
29+
title: "Manual Post Portrait",
30+
description:
31+
"Portrait launch card sized for manual posting to Instagram feeds, WhatsApp Status, and other mobile-first channels.",
32+
dimensions: "1080 x 1350 PNG",
33+
bestFor:
34+
"Best for manual uploads where you want a taller asset that fills more screen space and feels like a polished promo card.",
35+
imageSrc: "/social/securemcp-lite-instagram.png",
36+
imageAlt: "SecureMCP-Lite portrait post card",
37+
downloadHref: "/social/securemcp-lite-instagram.png",
38+
previewHref: "/social-post-image",
39+
},
40+
{
41+
title: "Twitter/X Variant",
42+
description:
43+
"Dedicated wide card for manual uploads to X, launch threads, social schedulers, and any tool that expects a landscape social image.",
44+
dimensions: "1200 x 630 PNG",
45+
bestFor:
46+
"Best when you want a separate export ready for manual social posting while still keeping the same visual language as the site preview card.",
47+
imageSrc: "/social/securemcp-lite-twitter.png",
48+
imageAlt: "SecureMCP-Lite Twitter card",
49+
downloadHref: "/social/securemcp-lite-twitter.png",
50+
previewHref: "/twitter-image",
51+
},
52+
];
53+
54+
export const metadata: Metadata = {
55+
title: "Media Kit",
56+
description: "Download SecureMCP-Lite social images for WhatsApp, Instagram, and manual launch posts.",
57+
};
58+
59+
export default function MediaKitPage() {
60+
return (
61+
<section className="section media-kit-page">
62+
<div className="container media-kit-shell">
63+
<div className="section-heading media-kit-heading">
64+
<div className="eyebrow">Media Kit</div>
65+
<h1>Click, preview, and download launch-ready post images.</h1>
66+
<p>
67+
This page gives you the final formats for manual sharing. Use the portrait image for Instagram and
68+
WhatsApp Status, and use the wide cards for link previews, X, or launch posts.
69+
</p>
70+
</div>
71+
72+
<div className="media-kit-intro">
73+
<div className="media-kit-note">
74+
<strong>Recommended:</strong> for a manual promo post, download the portrait card first. For link
75+
sharing, use the Open Graph card.
76+
</div>
77+
<div className="media-kit-actions">
78+
<Link className="button button-secondary" href="/docs">
79+
Back to docs
80+
</Link>
81+
<a className="button button-primary" href="/social/securemcp-lite-instagram.png" download>
82+
Download best manual post
83+
</a>
84+
</div>
85+
</div>
86+
87+
<div className="media-kit-grid">
88+
{socialAssets.map((asset) => (
89+
<article key={asset.title} className="media-card">
90+
<div className="media-card-preview">
91+
<img src={asset.imageSrc} alt={asset.imageAlt} />
92+
</div>
93+
94+
<div className="media-card-body">
95+
<div className="media-card-meta">
96+
<span className="media-pill">{asset.dimensions}</span>
97+
<span className="media-pill media-pill-soft">Ready to post</span>
98+
</div>
99+
<h2>{asset.title}</h2>
100+
<p>{asset.description}</p>
101+
<div className="media-usage">
102+
<strong>Best for</strong>
103+
<span>{asset.bestFor}</span>
104+
</div>
105+
106+
<div className="media-card-actions">
107+
<a className="button button-primary" href={asset.downloadHref} download>
108+
Download PNG
109+
</a>
110+
<a className="button button-tertiary" href={asset.previewHref} target="_blank" rel="noreferrer">
111+
Open live route
112+
</a>
113+
</div>
114+
</div>
115+
</article>
116+
))}
117+
</div>
118+
119+
<div className="media-kit-footer">
120+
<div className="media-kit-footer-card">
121+
<h2>Which one should you use?</h2>
122+
<ul className="media-checklist">
123+
<li>
124+
<strong>Instagram or manual image post:</strong> use <code>securemcp-lite-instagram.png</code>.
125+
</li>
126+
<li>
127+
<strong>WhatsApp link share or website preview:</strong> use <code>securemcp-lite-og.png</code>.
128+
</li>
129+
<li>
130+
<strong>X or social scheduler upload:</strong> use <code>securemcp-lite-twitter.png</code>.
131+
</li>
132+
</ul>
133+
</div>
134+
135+
<div className="media-kit-footer-card">
136+
<h2>Files available in the project</h2>
137+
<ul className="media-checklist">
138+
<li><code>apps/frontend/public/social/securemcp-lite-og.png</code></li>
139+
<li><code>apps/frontend/public/social/securemcp-lite-twitter.png</code></li>
140+
<li><code>apps/frontend/public/social/securemcp-lite-instagram.png</code></li>
141+
</ul>
142+
</div>
143+
</div>
144+
</div>
145+
</section>
146+
);
147+
}

0 commit comments

Comments
 (0)