diff options
Diffstat (limited to 'apps/web/src/app')
| -rw-r--r-- | apps/web/src/app/brand/page.tsx | 536 |
1 files changed, 268 insertions, 268 deletions
diff --git a/apps/web/src/app/brand/page.tsx b/apps/web/src/app/brand/page.tsx index a7085154..94e3f3e1 100644 --- a/apps/web/src/app/brand/page.tsx +++ b/apps/web/src/app/brand/page.tsx @@ -1,268 +1,268 @@ -"use client";
-
-import type { CSSProperties } from "react";
-import Image from "next/image";
-import Link from "next/link";
-import { Check, Copy, Download } from "lucide-react";
-import { useState } from "react";
-import { BasePage } from "@/app/base-page";
-import { Button } from "@/components/ui/button";
-import { Card } from "@/components/ui/card";
-import { Separator } from "@/components/ui/separator";
-import { cn } from "@/utils/ui";
-
-function downloadAsset(src: string) {
- const filename = src.split("/").pop() ?? "asset.svg";
- const a = document.createElement("a");
- a.href = src;
- a.download = filename;
- a.click();
-}
-
-async function copyAsset(src: string) {
- const res = await fetch(src);
- const text = await res.text();
- await navigator.clipboard.writeText(text);
-}
-
-const ALL_ASSETS = () => ASSET_SECTIONS.flatMap((s) => s.assets);
-
-type AssetTheme = "dark" | "light" | "icon";
-
-interface AssetVariant {
- src: string;
- theme: AssetTheme;
- label: string;
- width: number;
- height: number;
-}
-
-interface AssetSection {
- title: string;
- description: string;
- cols: "1" | "2";
- assets: AssetVariant[];
-}
-
-const ASSET_SECTIONS: AssetSection[] = [
- {
- title: "Symbol",
- description:
- "Use the symbol on its own when the OpenCut name is already present nearby or space is limited.",
- cols: "2",
- assets: [
- {
- src: "/logos/opencut/symbol.svg",
- theme: "dark",
- label: "Symbol",
- width: 400,
- height: 400,
- },
- {
- src: "/logos/opencut/symbol-light.svg",
- theme: "light",
- label: "Symbol",
- width: 400,
- height: 400,
- },
- ],
- },
- {
- title: "Lockup",
- description:
- "The full lockup combines the symbol and wordmark. Prefer this in most contexts where you have enough horizontal space.",
- cols: "2",
- assets: [
- {
- src: "/logos/opencut/logo.svg",
- theme: "dark",
- label: "Logo",
- width: 1809,
- height: 400,
- },
- {
- src: "/logos/opencut/logo-light.svg",
- theme: "light",
- label: "Logo",
- width: 1809,
- height: 400,
- },
- {
- src: "/logos/opencut/text.svg",
- theme: "dark",
- label: "Text",
- width: 1760,
- height: 400,
- },
- {
- src: "/logos/opencut/text-light.svg",
- theme: "light",
- label: "Text",
- width: 1760,
- height: 400,
- },
- ],
- },
-];
-
-export default function BrandPage() {
- return (
- <BasePage
- maxWidth="6xl"
- title="Brand"
- description={
- <>
- Download OpenCut brand assets for use in your projects.{" "}
- <Link
- href="#guidelines"
- className="underline underline-offset-4"
- onClick={() =>
- document
- .getElementById("guidelines")
- ?.scrollIntoView({ behavior: "smooth" })
- }
- >
- Read the brand guidelines.
- </Link>
- </>
- }
- action={
- <Button
- variant="outline"
- size="lg"
- className="mx-auto gap-2"
- onClick={() => {
- ALL_ASSETS().forEach((asset, i) => {
- setTimeout(() => downloadAsset(asset.src), i * 200);
- });
- }}
- >
- <Download />
- Download all
- </Button>
- }
- >
- <div className="flex flex-col gap-10">
- {ASSET_SECTIONS.map((section) => (
- <div key={section.title} className="flex flex-col gap-4">
- <div className="flex flex-col gap-1">
- <h2 className="font-semibold text-lg">{section.title}</h2>
- <p className="text-muted-foreground text-sm">
- {section.description}
- </p>
- </div>
- <div
- className={cn(
- "grid gap-3",
- section.cols === "2"
- ? "grid-cols-1 sm:grid-cols-2"
- : "grid-cols-1",
- )}
- >
- {section.assets.map((variant) => (
- <AssetCard key={variant.src} variant={variant} />
- ))}
- </div>
- </div>
- ))}
- </div>
-
- <Separator />
-
- <div id="guidelines" className="flex flex-col gap-8 text-sm">
- <div className="flex flex-col gap-3">
- <h2 className="font-semibold text-lg">Usage</h2>
- <p className="text-muted-foreground text-base leading-relaxed">
- OpenCut is open source — the code is free to use under its license.
- That license does not cover the name or logo. You can say you use
- OpenCut, that your project integrates with OpenCut, or that it was
- built on top of OpenCut. You cannot name your product OpenCut, imply
- we made or endorse your product, or use the marks commercially
- without asking first. For anything unclear, reach out at{" "}
- <Link
- href="mailto:brand@opencut.app"
- className="underline underline-offset-4"
- >
- brand@opencut.app
- </Link>
- .
- </p>
- </div>
-
- <div className="flex flex-col gap-3">
- <h2 className="font-semibold text-lg">What's not allowed</h2>
- <ul className="text-muted-foreground text-base flex flex-col gap-2 leading-relaxed">
- {[
- "Using OpenCut in the name of your product, service, or domain.",
- "Implying that OpenCut made, sponsors, or endorses your work.",
- "Using the logo or name on merchandise or commercial marketing.",
- "Modifying the marks.",
- ].map((item) => (
- <li key={item} className="flex gap-2">
- <span className="mt-0.5 shrink-0">-</span>
- <span>{item}</span>
- </li>
- ))}
- </ul>
- </div>
- </div>
- </BasePage>
- );
-}
-
-const CHECKER_STYLES: Record<"dark" | "light", CSSProperties> = {
- light: {
- backgroundImage:
- "linear-gradient(45deg, #292929 25%, transparent 25%), linear-gradient(-45deg, #292929 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #292929 75%), linear-gradient(-45deg, transparent 75%, #292929 75%)",
- backgroundSize: "18px 18px",
- backgroundPosition: "0 0, 0 9px, 9px -9px, -9px 0px",
- backgroundColor: "#000",
- },
- dark: {
- backgroundImage:
- "linear-gradient(45deg, #e0e0e0 25%, transparent 25%), linear-gradient(-45deg, #e0e0e0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e0e0e0 75%), linear-gradient(-45deg, transparent 75%, #e0e0e0 75%)",
- backgroundSize: "18px 18px",
- backgroundPosition: "0 0, 0 9px, 9px -9px, -9px 0px",
- backgroundColor: "#f5f5f5",
- },
-};
-
-function AssetCard({ variant }: { variant: AssetVariant }) {
- const [copied, setCopied] = useState(false);
-
- async function handleCopy() {
- await copyAsset(variant.src);
- setCopied(true);
- setTimeout(() => setCopied(false), 2000);
- }
-
- return (
- <Card
- className="group relative overflow-hidden"
- style={
- variant.theme === "icon" ? undefined : CHECKER_STYLES[variant.theme]
- }
- >
- <div className="flex h-56 items-center justify-center px-12 py-8">
- <Image
- src={variant.src}
- alt={variant.label}
- width={variant.width}
- height={variant.height}
- className="max-h-16 w-auto select-none object-contain"
- draggable={false}
- unoptimized
- />
- </div>
-
- <Button
- variant="outline"
- size="icon"
- className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 size-9"
- onClick={handleCopy}
- >
- {copied ? <Check /> : <Copy />}
- </Button>
- </Card>
- );
-}
+"use client"; + +import type { CSSProperties } from "react"; +import Image from "next/image"; +import Link from "next/link"; +import { Check, Copy, Download } from "lucide-react"; +import { useState } from "react"; +import { BasePage } from "@/app/base-page"; +import { Button } from "@/components/ui/button"; +import { Card } from "@/components/ui/card"; +import { Separator } from "@/components/ui/separator"; +import { cn } from "@/utils/ui"; + +function downloadAsset(src: string) { + const filename = src.split("/").pop() ?? "asset.svg"; + const a = document.createElement("a"); + a.href = src; + a.download = filename; + a.click(); +} + +async function copyAsset(src: string) { + const res = await fetch(src); + const text = await res.text(); + await navigator.clipboard.writeText(text); +} + +const ALL_ASSETS = () => ASSET_SECTIONS.flatMap((s) => s.assets); + +type AssetTheme = "dark" | "light" | "icon"; + +interface AssetVariant { + src: string; + theme: AssetTheme; + label: string; + width: number; + height: number; +} + +interface AssetSection { + title: string; + description: string; + cols: "1" | "2"; + assets: AssetVariant[]; +} + +const ASSET_SECTIONS: AssetSection[] = [ + { + title: "Symbol", + description: + "Use the symbol on its own when the OpenCut name is already present nearby or space is limited.", + cols: "2", + assets: [ + { + src: "/logos/opencut/symbol.svg", + theme: "dark", + label: "Symbol", + width: 400, + height: 400, + }, + { + src: "/logos/opencut/symbol-light.svg", + theme: "light", + label: "Symbol", + width: 400, + height: 400, + }, + ], + }, + { + title: "Lockup", + description: + "The full lockup combines the symbol and wordmark. Prefer this in most contexts where you have enough horizontal space.", + cols: "2", + assets: [ + { + src: "/logos/opencut/logo.svg", + theme: "dark", + label: "Logo", + width: 1809, + height: 400, + }, + { + src: "/logos/opencut/logo-light.svg", + theme: "light", + label: "Logo", + width: 1809, + height: 400, + }, + { + src: "/logos/opencut/text.svg", + theme: "dark", + label: "Text", + width: 1760, + height: 400, + }, + { + src: "/logos/opencut/text-light.svg", + theme: "light", + label: "Text", + width: 1760, + height: 400, + }, + ], + }, +]; + +export default function BrandPage() { + return ( + <BasePage + maxWidth="6xl" + title="Brand" + description={ + <> + Download OpenCut brand assets for use in your projects.{" "} + <Link + href="#guidelines" + className="underline underline-offset-4" + onClick={() => + document + .getElementById("guidelines") + ?.scrollIntoView({ behavior: "smooth" }) + } + > + Read the brand guidelines. + </Link> + </> + } + action={ + <Button + variant="outline" + size="lg" + className="mx-auto gap-2" + onClick={() => { + ALL_ASSETS().forEach((asset, i) => { + setTimeout(() => downloadAsset(asset.src), i * 200); + }); + }} + > + <Download /> + Download all + </Button> + } + > + <div className="flex flex-col gap-10"> + {ASSET_SECTIONS.map((section) => ( + <div key={section.title} className="flex flex-col gap-4"> + <div className="flex flex-col gap-1"> + <h2 className="font-semibold text-lg">{section.title}</h2> + <p className="text-muted-foreground text-sm"> + {section.description} + </p> + </div> + <div + className={cn( + "grid gap-3", + section.cols === "2" + ? "grid-cols-1 sm:grid-cols-2" + : "grid-cols-1", + )} + > + {section.assets.map((variant) => ( + <AssetCard key={variant.src} variant={variant} /> + ))} + </div> + </div> + ))} + </div> + + <Separator /> + + <div id="guidelines" className="flex flex-col gap-8 text-sm"> + <div className="flex flex-col gap-3"> + <h2 className="font-semibold text-lg">Usage</h2> + <p className="text-muted-foreground text-base leading-relaxed"> + OpenCut is open source — the code is free to use under its license. + That license does not cover the name or logo. You can say you use + OpenCut, that your project integrates with OpenCut, or that it was + built on top of OpenCut. You cannot name your product OpenCut, imply + we made or endorse your product, or use the marks commercially + without asking first. For anything unclear, reach out at{" "} + <Link + href="mailto:brand@opencut.app" + className="underline underline-offset-4" + > + brand@opencut.app + </Link> + . + </p> + </div> + + <div className="flex flex-col gap-3"> + <h2 className="font-semibold text-lg">What's not allowed</h2> + <ul className="text-muted-foreground text-base flex flex-col gap-2 leading-relaxed"> + {[ + "Using OpenCut in the name of your product, service, or domain.", + "Implying that OpenCut made, sponsors, or endorses your work.", + "Using the logo or name on merchandise or commercial marketing.", + "Modifying the marks.", + ].map((item) => ( + <li key={item} className="flex gap-2"> + <span className="mt-0.5 shrink-0">-</span> + <span>{item}</span> + </li> + ))} + </ul> + </div> + </div> + </BasePage> + ); +} + +const CHECKER_STYLES: Record<"dark" | "light", CSSProperties> = { + light: { + backgroundImage: + "linear-gradient(45deg, #292929 25%, transparent 25%), linear-gradient(-45deg, #292929 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #292929 75%), linear-gradient(-45deg, transparent 75%, #292929 75%)", + backgroundSize: "18px 18px", + backgroundPosition: "0 0, 0 9px, 9px -9px, -9px 0px", + backgroundColor: "#000", + }, + dark: { + backgroundImage: + "linear-gradient(45deg, #e0e0e0 25%, transparent 25%), linear-gradient(-45deg, #e0e0e0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e0e0e0 75%), linear-gradient(-45deg, transparent 75%, #e0e0e0 75%)", + backgroundSize: "18px 18px", + backgroundPosition: "0 0, 0 9px, 9px -9px, -9px 0px", + backgroundColor: "#f5f5f5", + }, +}; + +function AssetCard({ variant }: { variant: AssetVariant }) { + const [copied, setCopied] = useState(false); + + async function handleCopy() { + await copyAsset(variant.src); + setCopied(true); + setTimeout(() => setCopied(false), 2000); + } + + return ( + <Card + className="group relative overflow-hidden" + style={ + variant.theme === "icon" ? undefined : CHECKER_STYLES[variant.theme] + } + > + <div className="flex h-56 items-center justify-center px-12 py-8"> + <Image + src={variant.src} + alt={variant.label} + width={variant.width} + height={variant.height} + className="max-h-16 w-auto select-none object-contain" + draggable={false} + unoptimized + /> + </div> + + <Button + variant="outline" + size="icon" + className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 size-9" + onClick={handleCopy} + > + {copied ? <Check /> : <Copy />} + </Button> + </Card> + ); +} |