Update press kit with current brand information and logos

Refactors the PressKit.tsx file to include updated logos, colors, and descriptions for all brand arms, including the new Nexus arm. Updates logo URLs and grid layouts to accommodate seven arms.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 9203795e-937a-4306-b81d-b4d5c78c240e
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 4552a51b-8e45-465b-a3e2-83fa58f79cd2
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/7c94b7a0-29c7-4f2e-94ef-44b2153872b7/9203795e-937a-4306-b81d-b4d5c78c240e/AwHoHV2
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sirpiglr 2025-12-06 00:56:04 +00:00 committed by MrPiglr
parent 1cbff4ed56
commit f83338a793
2 changed files with 317 additions and 80 deletions

View file

@ -53,7 +53,7 @@ localPort = 8044
externalPort = 3003
[[ports]]
localPort = 33301
localPort = 37875
externalPort = 3002
[[ports]]

View file

@ -1,5 +1,6 @@
import Layout from "@/components/Layout";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
Card,
CardContent,
@ -7,134 +8,370 @@ import {
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Download, ExternalLink } from "lucide-react";
export default function PressKit() {
const logos = [
{
label: "Logo (PNG, 512)",
label: "AeThex Logo (Primary)",
description: "Main wordmark for light/dark backgrounds",
href: "https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2F3979ec9a8a28471d900a80e94e2c45fe?format=png&width=512",
preview: "https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2F3979ec9a8a28471d900a80e94e2c45fe?format=webp&width=200",
},
{
label: "Logo (PNG, 1200)",
label: "AeThex Logo (High Res)",
description: "1200px wide for print and large displays",
href: "https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2F3979ec9a8a28471d900a80e94e2c45fe?format=png&width=1200",
preview: "https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2F3979ec9a8a28471d900a80e94e2c45fe?format=webp&width=200",
},
];
const colors = [
{ name: "AeThex Blue", hex: "#0a0aff" },
{ name: "Neon Blue", hex: "#2BC0FF" },
{ name: "Aethex Accent", hex: "#50C7FF" },
{ name: "Card BG", hex: "#0B0B12" },
const armLogos = [
{
label: "Staff",
color: "#7c3aed",
href: "https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2Fc0414efd7af54ef4b821a05d469150d0?format=png&width=512",
preview: "https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2Fc0414efd7af54ef4b821a05d469150d0?format=webp&width=80",
},
{
label: "Labs",
color: "#FBBF24",
href: "https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2Fd93f7113d34347469e74421c3a3412e5?format=png&width=512",
preview: "https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2Fd93f7113d34347469e74421c3a3412e5?format=webp&width=80",
},
{
label: "GameForge",
color: "#22C55E",
href: "https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2Fcd3534c1caa0497abfd44224040c6059?format=png&width=512",
preview: "https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2Fcd3534c1caa0497abfd44224040c6059?format=webp&width=80",
},
{
label: "Corp",
color: "#3B82F6",
href: "https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2F3772073d5b4b49e688ed02480f4cae43?format=png&width=512",
preview: "https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2F3772073d5b4b49e688ed02480f4cae43?format=webp&width=80",
},
{
label: "Foundation",
color: "#EF4444",
href: "https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2Fc02cb1bf5056479bbb3ea4bd91f0d472?format=png&width=512",
preview: "https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2Fc02cb1bf5056479bbb3ea4bd91f0d472?format=webp&width=80",
},
{
label: "Dev-Link",
color: "#06B6D4",
href: "https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2F9a96b43cbd7b49bb9d5434580319c793?format=png&width=512",
preview: "https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2F9a96b43cbd7b49bb9d5434580319c793?format=webp&width=80",
},
{
label: "Nexus",
color: "#A855F7",
href: "https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2F6df123b87a144b1fb99894d94198d97b?format=png&width=512",
preview: "https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2F6df123b87a144b1fb99894d94198d97b?format=webp&width=80",
},
];
const primaryColors = [
{ name: "AeThex Purple", hex: "#7C3AED", hsl: "250 100% 60%", usage: "Primary brand color" },
{ name: "Neon Blue", hex: "#60A5FA", hsl: "210 100% 70%", usage: "Accent highlights" },
{ name: "Neon Purple", hex: "#C084FC", hsl: "280 100% 70%", usage: "Gradient accents" },
];
const armColors = [
{ name: "Staff Purple", hex: "#7C3AED", usage: "Staff arm" },
{ name: "Labs Yellow", hex: "#FBBF24", usage: "Labs arm" },
{ name: "GameForge Green", hex: "#22C55E", usage: "GameForge arm" },
{ name: "Corp Blue", hex: "#3B82F6", usage: "Corp arm" },
{ name: "Foundation Red", hex: "#EF4444", usage: "Foundation arm" },
{ name: "Dev-Link Cyan", hex: "#06B6D4", usage: "Dev-Link arm" },
{ name: "Nexus Purple", hex: "#A855F7", usage: "Nexus arm" },
];
const backgrounds = [
{ name: "Deep Space", hex: "#030712", usage: "Primary background" },
{ name: "Card Dark", hex: "#0B0B12", usage: "Card backgrounds" },
{ name: "Border", hex: "#1E293B", usage: "Borders & dividers" },
{ name: "Muted Text", hex: "#94A3B8", usage: "Secondary text" },
];
const typography = [
{ name: "Inter", usage: "UI / Body" },
{ name: "JetBrains Mono", usage: "Code / Numeric" },
{ name: "Inter", usage: "UI / Body / Headlines", weight: "400-700", style: "Clean, modern sans-serif" },
{ name: "JetBrains Mono", usage: "Code / Numeric / Technical", weight: "400-600", style: "Monospace for code" },
];
const companyInfo = {
name: "AeThex",
tagline: "Build the Future",
description: "AeThex is an advanced development platform and community for builders. We provide tools, mentorship, and resources for creators to bring their ideas to life through Labs, GameForge, Corp, Foundation, and Dev-Link.",
founded: "2024",
website: "https://aethex.dev",
domains: [
{ domain: "aethex.dev", purpose: "Main platform" },
{ domain: "aethex.foundation", purpose: "Identity & passports" },
{ domain: "*.aethex.me", purpose: "Creator passports" },
{ domain: "*.aethex.space", purpose: "Project passports" },
],
};
return (
<Layout>
<div className="min-h-screen bg-aethex-gradient py-12">
<div className="container mx-auto max-w-6xl px-4 space-y-8">
<div className="text-center space-y-2">
<Badge variant="outline">Press Kit</Badge>
<div className="container mx-auto max-w-6xl px-4 space-y-10">
<div className="text-center space-y-3">
<Badge variant="outline" className="border-aethex-500/50 text-aethex-300">Press Kit</Badge>
<h1 className="text-4xl font-bold text-gradient-purple">
AeThex Brand Assets
</h1>
<p className="text-muted-foreground">
Download logos, view colors and typography, and read usage
guidelines.
<p className="text-muted-foreground max-w-2xl mx-auto">
Official logos, colors, typography, and usage guidelines for press and media.
</p>
</div>
<Card className="bg-card/50 border-border/50">
<CardHeader>
<CardTitle>Logos</CardTitle>
<CardDescription>Official wordmark and icon</CardDescription>
<CardTitle>About AeThex</CardTitle>
<CardDescription>Company overview for press use</CardDescription>
</CardHeader>
<CardContent className="grid sm:grid-cols-2 gap-3">
{logos.map((l) => (
<a
key={l.label}
href={l.href}
target="_blank"
rel="noreferrer"
className="rounded-lg border border-border/50 p-3 hover:border-aethex-400/50 transition"
>
{l.label}
</a>
))}
<CardContent className="space-y-4">
<div className="grid sm:grid-cols-2 gap-6">
<div>
<h3 className="font-semibold text-lg mb-2">{companyInfo.name}</h3>
<p className="text-sm text-muted-foreground mb-3">{companyInfo.description}</p>
<div className="space-y-1 text-sm">
<p><span className="text-muted-foreground">Tagline:</span> {companyInfo.tagline}</p>
<p><span className="text-muted-foreground">Founded:</span> {companyInfo.founded}</p>
</div>
</div>
<div>
<h4 className="font-medium mb-2">Official Domains</h4>
<div className="space-y-2">
{companyInfo.domains.map((d) => (
<div key={d.domain} className="flex items-center gap-2 text-sm">
<span className="text-aethex-400 font-mono">{d.domain}</span>
<span className="text-muted-foreground">- {d.purpose}</span>
</div>
))}
</div>
</div>
</div>
</CardContent>
</Card>
<Card className="bg-card/50 border-border/50">
<CardHeader>
<CardTitle>Colors</CardTitle>
<CardDescription>Primary palette</CardDescription>
<CardTitle>Primary Logo</CardTitle>
<CardDescription>Official AeThex wordmark</CardDescription>
</CardHeader>
<CardContent className="grid sm:grid-cols-2 lg:grid-cols-4 gap-3">
{colors.map((c) => (
<div
key={c.hex}
className="rounded-lg border border-border/50 p-3 space-y-2"
>
<CardContent>
<div className="grid sm:grid-cols-2 gap-4">
{logos.map((l) => (
<a
key={l.label}
href={l.href}
target="_blank"
rel="noreferrer"
className="rounded-lg border border-border/50 p-4 hover:border-aethex-400/50 transition group"
>
<div className="flex items-center gap-4">
<div className="w-16 h-16 rounded-lg bg-gradient-to-br from-slate-800 to-slate-900 flex items-center justify-center overflow-hidden">
<img src={l.preview} alt={l.label} className="w-12 h-12 object-contain" />
</div>
<div className="flex-1">
<div className="font-medium group-hover:text-aethex-400 transition">{l.label}</div>
<div className="text-sm text-muted-foreground">{l.description}</div>
</div>
<Download className="w-4 h-4 text-muted-foreground group-hover:text-aethex-400 transition" />
</div>
</a>
))}
</div>
</CardContent>
</Card>
<Card className="bg-card/50 border-border/50">
<CardHeader>
<CardTitle>Arm Logos</CardTitle>
<CardDescription>Individual logos for each AeThex arm</CardDescription>
</CardHeader>
<CardContent>
<div className="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-7 gap-4">
{armLogos.map((arm) => (
<a
key={arm.label}
href={arm.href}
target="_blank"
rel="noreferrer"
className="rounded-lg border border-border/50 p-4 hover:border-aethex-400/50 transition text-center group"
>
<div
className="w-12 h-12 mx-auto mb-2 rounded-lg flex items-center justify-center overflow-hidden"
style={{ backgroundColor: `${arm.color}20` }}
>
<img src={arm.preview} alt={arm.label} className="w-10 h-10 object-contain" />
</div>
<div className="text-sm font-medium" style={{ color: arm.color }}>{arm.label}</div>
</a>
))}
</div>
</CardContent>
</Card>
<Card className="bg-card/50 border-border/50">
<CardHeader>
<CardTitle>Primary Colors</CardTitle>
<CardDescription>Core brand palette</CardDescription>
</CardHeader>
<CardContent>
<div className="grid sm:grid-cols-3 gap-4">
{primaryColors.map((c) => (
<div
className="h-12 w-full rounded"
style={{ backgroundColor: c.hex }}
/>
<div className="text-sm text-muted-foreground">{c.name}</div>
<div className="text-xs">{c.hex}</div>
</div>
))}
key={c.hex}
className="rounded-lg border border-border/50 p-4 space-y-3"
>
<div
className="h-16 w-full rounded-lg"
style={{ backgroundColor: c.hex }}
/>
<div>
<div className="font-medium">{c.name}</div>
<div className="text-sm text-muted-foreground">{c.usage}</div>
</div>
<div className="flex gap-4 text-xs">
<span className="font-mono bg-slate-800 px-2 py-1 rounded">{c.hex}</span>
<span className="font-mono bg-slate-800 px-2 py-1 rounded">{c.hsl}</span>
</div>
</div>
))}
</div>
</CardContent>
</Card>
<Card className="bg-card/50 border-border/50">
<CardHeader>
<CardTitle>Arm Colors</CardTitle>
<CardDescription>Color palette for each arm division</CardDescription>
</CardHeader>
<CardContent>
<div className="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-7 gap-3">
{armColors.map((c) => (
<div
key={c.hex}
className="rounded-lg border border-border/50 p-3 space-y-2"
>
<div
className="h-10 w-full rounded"
style={{ backgroundColor: c.hex }}
/>
<div className="text-sm">{c.name}</div>
<div className="text-xs font-mono text-muted-foreground">{c.hex}</div>
</div>
))}
</div>
</CardContent>
</Card>
<Card className="bg-card/50 border-border/50">
<CardHeader>
<CardTitle>Background Colors</CardTitle>
<CardDescription>Dark theme palette</CardDescription>
</CardHeader>
<CardContent>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
{backgrounds.map((c) => (
<div
key={c.hex}
className="rounded-lg border border-border/50 p-3 space-y-2"
>
<div
className="h-10 w-full rounded border border-border/30"
style={{ backgroundColor: c.hex }}
/>
<div className="text-sm">{c.name}</div>
<div className="text-xs text-muted-foreground">{c.usage}</div>
<div className="text-xs font-mono text-muted-foreground">{c.hex}</div>
</div>
))}
</div>
</CardContent>
</Card>
<Card className="bg-card/50 border-border/50">
<CardHeader>
<CardTitle>Typography</CardTitle>
<CardDescription>Recommended families</CardDescription>
<CardDescription>Recommended font families</CardDescription>
</CardHeader>
<CardContent className="grid sm:grid-cols-2 gap-3">
{typography.map((t) => (
<div
key={t.name}
className="rounded-lg border border-border/50 p-3"
>
<div className="font-semibold">{t.name}</div>
<div className="text-sm text-muted-foreground">{t.usage}</div>
</div>
))}
<CardContent>
<div className="grid sm:grid-cols-2 gap-4">
{typography.map((t) => (
<div
key={t.name}
className="rounded-lg border border-border/50 p-4"
>
<div className="font-semibold text-lg" style={{ fontFamily: t.name === "JetBrains Mono" ? "monospace" : "inherit" }}>
{t.name}
</div>
<div className="text-sm text-muted-foreground mt-1">{t.style}</div>
<div className="mt-3 space-y-1 text-sm">
<p><span className="text-muted-foreground">Usage:</span> {t.usage}</p>
<p><span className="text-muted-foreground">Weights:</span> {t.weight}</p>
</div>
</div>
))}
</div>
</CardContent>
</Card>
<Card className="bg-card/50 border-border/50">
<CardHeader>
<CardTitle>Usage Guidelines</CardTitle>
<CardDescription>Do's and Don'ts</CardDescription>
<CardDescription>Do's and Don'ts for brand usage</CardDescription>
</CardHeader>
<CardContent className="text-sm text-muted-foreground space-y-2">
<ul className="list-disc pl-5 space-y-1">
<li>Use official logos without modification or distortion.</li>
<li>
Maintain clear space around marks; avoid busy backgrounds.
</li>
<li>
Do not imply partnership or endorsement without written
approval.
</li>
<li>
Link to{" "}
<a
href="https://aethex.biz"
className="text-aethex-400"
target="_blank"
rel="noreferrer"
>
aethex.biz
</a>{" "}
for official context.
</li>
</ul>
<CardContent className="space-y-6">
<div className="grid sm:grid-cols-2 gap-6">
<div>
<h4 className="font-medium text-green-400 mb-3">Do's</h4>
<ul className="list-disc pl-5 space-y-2 text-sm text-muted-foreground">
<li>Use official logos without modification or distortion</li>
<li>Maintain clear space around marks (minimum 20% of logo height)</li>
<li>Use on dark backgrounds for optimal visibility</li>
<li>Link to <a href="https://aethex.dev" className="text-aethex-400 hover:underline" target="_blank" rel="noreferrer">aethex.dev</a> for official context</li>
<li>Use arm-specific colors when referencing individual divisions</li>
</ul>
</div>
<div>
<h4 className="font-medium text-red-400 mb-3">Don'ts</h4>
<ul className="list-disc pl-5 space-y-2 text-sm text-muted-foreground">
<li>Do not stretch, rotate, or alter the logo proportions</li>
<li>Do not use on busy or conflicting backgrounds</li>
<li>Do not imply partnership or endorsement without written approval</li>
<li>Do not use outdated logos or assets</li>
<li>Do not recreate the logo with different fonts or colors</li>
</ul>
</div>
</div>
</CardContent>
</Card>
<Card className="bg-card/50 border-border/50">
<CardHeader>
<CardTitle>Press Contact</CardTitle>
<CardDescription>For media inquiries</CardDescription>
</CardHeader>
<CardContent>
<div className="flex flex-wrap gap-4">
<Button asChild variant="outline" className="border-aethex-500/50 hover:bg-aethex-500/10">
<a href="mailto:press@aethex.dev">
Contact Press Team
<ExternalLink className="ml-2 h-4 w-4" />
</a>
</Button>
<Button asChild variant="ghost">
<a href="https://aethex.dev" target="_blank" rel="noreferrer">
Visit aethex.dev
<ExternalLink className="ml-2 h-4 w-4" />
</a>
</Button>
</div>
</CardContent>
</Card>
</div>