Branding page + branding assets

2 files changed, 143 insertions, 0 deletions

diff --git a/apps/website/src/components/page/branding/BrandingImage.astro b/apps/website/src/components/page/branding/BrandingImage.astro
new file mode 100644
index 0000000..f85364d
--- /dev/null
+++ b/apps/website/src/components/page/branding/BrandingImage.astro
@@ -0,0 +1,30 @@
+---
+interface Props {
+	type: 'badges' | 'logos' | 'mods'
+	name: string
+	altText?: string
+	extensions?: ('png' | 'svg')[]
+	maxWidth?: number
+	background?: string
+}
+
+const {
+	name,
+	type,
+	altText,
+	background = 'white',
+	maxWidth = 300,
+	extensions = ['png', 'svg'],
+} = Astro.props;
+
+const path = `/media/branding/${type}/${name}`;
+---
+
+<div class={`relative rounded-md bg-${background} border border-1 border-gray-400 flex flex-col justify-center items-center p-8`}>
+	<div class="absolute top-0 right-0 flex flex-row gap-x-2">
+		{extensions.map(ext => (
+			<a target="_blank" class="text-xs px-0.5 hover:underline" href={`${path}.${ext}`}>.{ext.toUpperCase()}</a>
+		))}
+	</div>
+	<img style={`max-width: ${maxWidth}px;`} src={`${path}.svg`} alt={altText}>
+</div>
diff --git a/apps/website/src/pages/branding.astro b/apps/website/src/pages/branding.astro
new file mode 100644
index 0000000..d1e05b4
--- /dev/null
+++ b/apps/website/src/pages/branding.astro
@@ -0,0 +1,113 @@
+---
+import Header from '@components/base/Header.astro';
+import Paragraph from '@components/base/Paragraph.astro';
+import Section from '@components/base/Section.astro';
+import BrandingImage from '@components/page/branding/BrandingImage.astro';
+import Layout from '@layouts/Layout.astro';
+
+const mods = ['behindyou', 'chatting', 'crashpatch', 'damagetint', 'evergreenhud', 'glintcolorizer', 'keystrokes', 'overflowanimations', 'polyblur', 'polynametag', 'polysprint', 'polytime', 'polyweather', 'vanillahud'];
+---
+
+<Layout>
+	<Section class="justify-center items-start pt-32">
+		<div class="flex flex-col justify-start items-start w-full text-navy-peony">
+			<Header>
+				Polyfrost Branding
+			</Header>
+			<Paragraph>
+				We usually don't mind people mentioning our name or using our logos - in fact, we really appreciate the free promo. All we ask is to use our provided work responsibly, and contact us first.
+			</Paragraph>
+		</div>
+	</Section>
+
+	<Section wrapperClass="bg-blue-75" class="py-12 flex-col">
+		<div class="w-full text-navy-peony text-center flex flex-col justify-center items-center">
+			<Header>
+				Our Brand
+			</Header>
+			<Paragraph class="max-w-[500px]">
+				Introducing... our brand logos in all of their glory. We just ask to not edit, distort, recolor, or reconfigure any assets below.
+			</Paragraph>
+		</div>
+
+		<div class="flex flex-col gap-y-12 mt-8">
+			<div class="flex flex-col">
+				<Header size="sm" class="text-navy-peony">
+					Our Logo, with text
+				</Header>
+				<Paragraph class="max-w-[500px] text-gray-400" size="xs">
+					Super cool.
+				</Paragraph>
+				<div class="flex flex-row justify-evenly items-center flex-wrap my-8 gap-2">
+					<BrandingImage name="logo_1" type="logos" />
+					<BrandingImage name="logo_2" type="logos" />
+				</div>
+			</div>
+			<div class="flex flex-col">
+				<Header size="sm" class="text-navy-peony">
+					Our Logo, when you don't wanna read
+				</Header>
+				<Paragraph class="max-w-[500px] text-gray-400" size="xs">
+					Even cooler.
+				</Paragraph>
+				<div class="flex flex-row justify-evenly items-center flex-wrap my-8 gap-2">
+					<BrandingImage name="logo_3" type="logos" />
+					<BrandingImage name="logo_4" type="logos" />
+				</div>
+			</div>
+			<div class="flex flex-col">
+				<Header size="sm" class="text-navy-peony">
+					OneConfig logo, with text
+				</Header>
+				<Paragraph class="max-w-[500px] text-gray-400" size="xs">
+					The one and only.
+				</Paragraph>
+				<div class="flex flex-row justify-evenly items-center flex-wrap my-8 gap-2">
+					<BrandingImage name="logo_5" type="logos" />
+					<BrandingImage name="logo_6" type="logos" />
+				</div>
+			</div>
+			<div class="flex flex-col">
+				<Header size="sm" class="text-navy-peony">
+					OneConfig logo, when you don't wanna read
+				</Header>
+				<Paragraph class="max-w-[500px] text-gray-400" size="xs">
+					The one and only.
+				</Paragraph>
+				<div class="flex flex-row justify-evenly items-center flex-wrap my-8 gap-2">
+					<BrandingImage name="logo_7" type="logos" />
+					<BrandingImage name="logo_8" type="logos" />
+				</div>
+			</div>
+		</div>
+	</Section>
+
+	<Section wrapperClass="bg-[#11171C]" class="py-12 flex-col text-blue-100 gap-y-8">
+		<div class="flex flex-col items-start justify-start">
+			<Header size="md">
+				OneConfig badges
+			</Header>
+			<Paragraph size="sm" class="text-[#78818D]">
+				When you want to show off OneConfig in your mods. Credits to Devin's Badges for the design.
+			</Paragraph>
+			<div class="my-4 flex flex-row flex-wrap gap-2 text-white">
+				{Array.from({ length: 4 }, (_, i) => (
+					<BrandingImage background="transparent" name={`badge_${i + 1}`} type="badges" />
+				))}
+			</div>
+		</div>
+		<div class="flex flex-col items-start justify-start">
+			<Header size="md">
+				All of our mod icons
+			</Header>
+			<Paragraph size="sm" class="text-[#78818D]">
+				We have... a lot of those... (original EvergreenHUD logo by isXander)
+			</Paragraph>
+			<div class="my-4 flex flex-row flex-wrap gap-2 text-white">
+				{mods.map(mod => (
+					<BrandingImage background="transparent" name={mod} type="mods" />
+				))}
+			</div>
+		</div>
+	</Section>
+</Layout>