@@ -64,21 +65,21 @@ export default function Navbar() {
isCurrent
? "text-white"
: "text-white/60 hover:text-white",
- "relative rounded-md text-[15px] font-semibold transition-all"
+ "relative rounded-md text-[15px] font-semibold transition-all",
)}
>
{item.name}
diff --git a/frontend/apps/artcraft-website/src/pages/press-kit/index.ts b/frontend/apps/artcraft-website/src/pages/press-kit/index.ts
new file mode 100644
index 0000000000..acfcdb4955
--- /dev/null
+++ b/frontend/apps/artcraft-website/src/pages/press-kit/index.ts
@@ -0,0 +1 @@
+export { default } from "./press-kit";
diff --git a/frontend/apps/artcraft-website/src/pages/press-kit/press-kit-data.ts b/frontend/apps/artcraft-website/src/pages/press-kit/press-kit-data.ts
new file mode 100644
index 0000000000..7e81c0142d
--- /dev/null
+++ b/frontend/apps/artcraft-website/src/pages/press-kit/press-kit-data.ts
@@ -0,0 +1,110 @@
+// ============================================================================
+// PRESS KIT ASSET DATA
+// ============================================================================
+//
+// To add a new asset, copy one of the existing objects and modify:
+// - type: "video" | "image" | "embed" | "link"
+// - title: Display title for the asset
+// - description: Optional short description
+// - thumbnail: URL to thumbnail image (can be YouTube thumbnail or custom)
+// - embedUrl: For YouTube embeds (use embed format: youtube.com/embed/VIDEO_ID)
+// - videoUrl: Direct video URL for type="video" (uses downloadUrl if not provided)
+// - downloadUrl: Direct link to the downloadable file (e.g., Cloudflare R2 URL)
+// - downloadLabel: Optional custom label for download button (default: "Download")
+// - fileSize: Optional file size display (e.g., "1.2 GB")
+// - containThumbnail: If true, thumbnail uses object-contain with padding (good for logos)
+//
+// ============================================================================
+
+export interface PressKitAsset {
+ type: "video" | "image" | "embed" | "link";
+ title: string;
+ description?: string;
+ thumbnail?: string;
+ embedUrl?: string;
+ /** Direct video URL for type="video" - uses downloadUrl if not provided */
+ videoUrl?: string;
+ downloadUrl: string;
+ downloadLabel?: string;
+ fileSize?: string;
+ /** If true, thumbnail uses object-contain with padding (good for logos) */
+ containThumbnail?: boolean;
+}
+
+export interface PressKitCategory {
+ name: string;
+ description?: string;
+ assets: PressKitAsset[];
+}
+
+// ============================================================================
+// EDIT THIS DATA TO ADD PRESS KIT ASSETS
+// ============================================================================
+
+export const PRESS_KIT_CATEGORIES: PressKitCategory[] = [
+ {
+ name: "Promotional Videos",
+ description: "High-quality promotional videos for press coverage",
+ assets: [
+ // ArtCraft Commercial / Trailer (direct video, same as homepage)
+ {
+ type: "video",
+ title: "ArtCraft Commercial",
+ description: "Official ArtCraft commercial showcasing the app",
+ thumbnail: "/images/video-thumbnails/artcraft-commercial.png",
+ downloadUrl:
+ "https://pub-f7441936e5804042a1ea2bdc92e4dc71.r2.dev/artcraft_website_v2.mp4",
+ fileSize: "125 MB",
+ },
+ // Grinch: The Anime
+ {
+ type: "embed",
+ title: "Grinch: The Anime",
+ description: "Made using ArtCraft",
+ thumbnail: "https://img.youtube.com/vi/oqoCWdOwr2U/maxresdefault.jpg",
+ embedUrl: "https://www.youtube.com/embed/oqoCWdOwr2U",
+ downloadUrl: "", // Add R2 download link here
+ },
+ ],
+ },
+ {
+ name: "Logos & Branding",
+ description: "Official ArtCraft logos and branding assets",
+ assets: [
+ {
+ type: "image",
+ title: "ArtCraft Logo (PNG)",
+ thumbnail: "/images/artcraft-logo.png",
+ downloadUrl: "/images/artcraft-logo.png",
+ containThumbnail: true,
+ },
+ // Add more logo variants here:
+ // {
+ // type: "link",
+ // title: "Full Logo Pack (ZIP)",
+ // description: "All logos in PNG, SVG, and EPS formats",
+ // downloadUrl: "https://your-r2-bucket.r2.dev/artcraft-logo-pack.zip",
+ // fileSize: "12 MB",
+ // },
+ ],
+ },
+ {
+ name: "Screenshots & Media",
+ description: "High-resolution screenshots and promotional images",
+ assets: [
+ // Add screenshots here:
+ // {
+ // type: "image",
+ // title: "Editor Interface",
+ // thumbnail: "/images/screenshot-editor.jpg",
+ // downloadUrl: "https://your-r2-bucket.r2.dev/screenshot-editor-hires.png",
+ // },
+ ],
+ },
+ // Add more categories as needed:
+ // {
+ // name: "Tutorial Videos",
+ // description: "Step-by-step tutorials",
+ // assets: [],
+ // },
+];
diff --git a/frontend/apps/artcraft-website/src/pages/press-kit/press-kit.tsx b/frontend/apps/artcraft-website/src/pages/press-kit/press-kit.tsx
new file mode 100644
index 0000000000..9957f8c8f6
--- /dev/null
+++ b/frontend/apps/artcraft-website/src/pages/press-kit/press-kit.tsx
@@ -0,0 +1,310 @@
+import { useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+ faArrowDownToLine,
+ faPlay,
+ faImage,
+ faVideo,
+ faFileZipper,
+ faXmark,
+} from "@fortawesome/pro-solid-svg-icons";
+import Footer from "../../components/footer";
+import Seo from "../../components/seo";
+import { PRESS_KIT_CATEGORIES, type PressKitAsset } from "./press-kit-data";
+
+// ============================================================================
+// ASSET CARD COMPONENT
+// ============================================================================
+
+const AssetCard = ({
+ asset,
+ onOpenMedia,
+}: {
+ asset: PressKitAsset;
+ onOpenMedia: (asset: PressKitAsset) => void;
+}) => {
+ const getTypeIcon = () => {
+ switch (asset.type) {
+ case "video":
+ case "embed":
+ return faVideo;
+ case "image":
+ return faImage;
+ case "link":
+ return faFileZipper;
+ default:
+ return faImage;
+ }
+ };
+
+ const handleThumbnailClick = () => {
+ if (asset.type === "embed" && asset.embedUrl) {
+ onOpenMedia(asset);
+ } else if (asset.type === "video") {
+ onOpenMedia(asset);
+ }
+ };
+
+ return (
+
+ {/* Thumbnail */}
+
+ {asset.thumbnail ? (
+

+ ) : (
+
+
+
+ )}
+
+ {/* Play button overlay for videos and embeds */}
+ {(asset.type === "embed" || asset.type === "video") && (
+
+ )}
+
+ {/* Type badge - show "Video" for both video and embed types */}
+
+
+
+ {asset.type === "embed" ? "Video" : asset.type}
+
+
+
+
+ {/* Content */}
+
+
+ );
+};
+
+// ============================================================================
+// VIDEO MODAL COMPONENT
+// ============================================================================
+
+const VideoModal = ({
+ asset,
+ onClose,
+}: {
+ asset: PressKitAsset;
+ onClose: () => void;
+}) => {
+ const isEmbed = asset.type === "embed" && asset.embedUrl;
+ const videoSrc = asset.videoUrl || asset.downloadUrl;
+
+ return (
+
+
e.stopPropagation()}
+ >
+ {isEmbed ? (
+
+ ) : (
+
+ )}
+
+
+
+ );
+};
+
+// ============================================================================
+// PRESS KIT PAGE
+// ============================================================================
+
+export default function PressKitPage() {
+ const [activeMedia, setActiveMedia] = useState
(null);
+
+ const handleOpenMedia = (asset: PressKitAsset) => {
+ setActiveMedia(asset);
+ };
+
+ const handleCloseMedia = () => {
+ setActiveMedia(null);
+ };
+
+ // Filter out empty categories
+ const categoriesWithAssets = PRESS_KIT_CATEGORIES.filter(
+ (cat) => cat.assets.length > 0,
+ );
+
+ return (
+
+
+
+ {/* Hero Section */}
+
+ {/* Glowing Gradient Orb Background */}
+
+
+
+ {/* Header */}
+
+
+ Press Kit
+
+
+ Everything you need for press coverage, reviews, and content
+ creation. Download high-quality assets and promotional materials.
+
+
+
+ {/* Categories */}
+ {categoriesWithAssets.length > 0 ? (
+
+ {categoriesWithAssets.map((category) => (
+
+
+
+ {category.name}
+
+ {category.description && (
+
{category.description}
+ )}
+
+
+
+ {category.assets.map((asset, index) => (
+
+ ))}
+
+
+ ))}
+
+ ) : (
+
+
+
+
+
+ Press Kit Coming Soon
+
+
+ We're preparing our press assets. Check back soon for logos,
+ videos, and promotional materials.
+
+
+ )}
+
+ {/* Contact Section */}
+
+
+ Need Something Specific?
+
+
+ For specific press inquiries, interview requests, or custom
+ assets, reach out to us on Discord.
+
+
+ Contact Us on Discord
+
+
+
+
+
+
+
+ {/* Video Modal */}
+ {activeMedia && (
+
+ )}
+
+ );
+}