+
+ ArtCraft®
+
+
+
+
+
+
+
+
+
+
+
+
+ ARTCRAFT — IMG / VID / 3D — OPEN SOURCE
+
+
+ )}
+
+ );
+};
diff --git a/frontend/apps/artcraft-website/src/pages/landing4/components/section-community.tsx b/frontend/apps/artcraft-website/src/pages/landing4/components/section-community.tsx
new file mode 100644
index 0000000000..4bd6993dcd
--- /dev/null
+++ b/frontend/apps/artcraft-website/src/pages/landing4/components/section-community.tsx
@@ -0,0 +1,58 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faDiscord, faGithub } from "@fortawesome/free-brands-svg-icons";
+import { SOCIAL_LINKS } from "../../../config/links";
+import { LineMaskHeading, MonoLabel, SectionHeader } from "./ui";
+
+// /07 — Community. Back to the dark chapter (the boundary sentinel before
+// this section scrubs the root vars). Two 50/50 hairline cells; the whole
+// cell is the anchor and inverts to flare on hover.
+export const SectionCommunity = () => (
+ <>
+ {/* Chapter boundary: paper → dark */}
+
+
+ BUILT IN, <>THE OPEN.]}
+ />
+
+
+
+
+ THE TOOLKIT]}
+ />
+
+
+
+ {/* Index list */}
+
+ -
+ {FEATURES.map((feature, i) => (
+
-
+ ++ {/* Mobile-only inline video */} +
+ {String(i + 1).padStart(2, "0")} + +++ + + + +{feature.label} ++ {feature.title} +
++ {feature.description} +
++++ ++
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+ /08 — DOWNLOAD
+
+ V2.X — PUBLIC BUILD — {new Date().getFullYear()}
+
+
+
+
+ OWN YOUR,
+ TOOLS.,
+ ]}
+ />
+
+
+
+
+
+ Or use on Web →
+
+
+
+
+
+ {[25, 50, 75].map((left) => (
+
+ ))}
+
+
+
+ {/* Top metadata row */}
+
+
+ EST. 2024 — OPEN SOURCE
+
+ IMG / VID / 3D
+
+ N 37°46′ — W 122°25′
+
+
+ {/* Headline */}
+
+ CONTROLLABLE,
+ <>
+ AI FOR
+ ,
+ ARTISTS,
+ ]}
+ />
+
+
+ {/* Bottom row: figure video right, mono coordinates left */}
+ + ArtCraft is an open desktop app for AI image, video, and 3D. Every + model, one canvas, zero prompt-wrestling. +
+ + {/* CTAs */} +
+
+
+ Use on Web
+
+
+ MAC OS — WINDOWS — LINUX
+
+
+
+
+
+ ARTCRAFT — DESKTOP + WEB
+ V2.X — PUBLIC BUILD
+
+
+
+
+
+
+
+
+
+ MADE WITH, <>ARTCRAFT]}
+ />
+
+
+
+
+
+
+
+
+
+
+ {smallFilms.map((film, i) => (
+
+
+
+
+
+
+ ))}
+
+
+
+
+
+
+
+
+ /02 STATEMENT
+
+
+
+ {MANIFESTO_WORDS.map((word, i) => (
+
+ EVERY MODEL., ONE CANVAS.]}
+ />
+
+
+ + Text prompting is neat, but artists crave control. Use every frontier + model from one desktop canvas — no tab-hopping, no per-site + subscriptions. +
+
+ {PROVIDERS.map((provider) => (
+
+
+ 
+
+ {provider.name}
+
+
+ ))}
+
+
+ +
+
+ MORE EVERY WEEK
+
+
+ STOP RENTING, YOUR TOOLS]}
+ />
+
+
+ + ArtCraft is yours to own and keep, forever. No subscriptions needed, no + aggregator middleman, no rent payments. +
+
+ {/* The subscription web — ledger of grievances */}
+
+
+ ✕ THE SUBSCRIPTION WEB
+
+
+ {/* ArtCraft — ink block panel */}
+ -
+ {RENTAL_ROWS.map((row) => (
+
- + + ✕ + + {row} + + ))} +
+
+ LICENSE — YOURS / SERVERS — OPTIONAL
+
+
+
+ ✓ ARTCRAFT
+
+ -
+ {OWNERSHIP_ROWS.map((row) => (
+
- + + ✓ + + + {row} + + + ))} +
+
+ /{number}
+ {label}
+
+ {right ? {right} : null}
+
+);
+
+// Four plus-sign markers pinned at the corners of a relative parent.
+export const PlusCorners = () => (
+ <>
+
+
+
+
+
+);
+
+// 1px-bordered media frame with an optional mono caption strip underneath.
+export const HairlineFrame = ({
+ children,
+ caption,
+ className = "",
+}: {
+ children: ReactNode;
+ caption?: string;
+ className?: string;
+}) => (
+ {children}
+ {caption ? (
+
+ {TICKER_ITEMS.map((item) => (
+
+ {item} ✳
+
+ ))}
+
+ );
+ return (
+
+
+ );
+};
+
+// Lazy autoplay video: defers fetch + decoder spin-up until the element nears
+// the viewport (same pattern as landing3's LazyAutoplayVideo).
+export const LazyAutoplayVideo = ({
+ src,
+ className,
+}: {
+ src: string;
+ className?: string;
+}) => {
+ const ref = useRef
+ {copy}
+ {copy}
+
+
+
+
+
+ setShowDownloadModal(false)}
+ />
+
+ );
+};
+
+export default Landing4;
diff --git a/frontend/apps/artcraft-website/tailwind.config.js b/frontend/apps/artcraft-website/tailwind.config.js
index 077775685e..c07f7a7c47 100644
--- a/frontend/apps/artcraft-website/tailwind.config.js
+++ b/frontend/apps/artcraft-website/tailwind.config.js
@@ -29,6 +29,15 @@ module.exports = {
"Arial",
"sans-serif",
],
+ // Landing4 (brutalist landing) type system
+ "brut-display": [
+ "Bricolage Grotesque",
+ "Outfit",
+ "system-ui",
+ "sans-serif",
+ ],
+ "brut-body": ["Inter", "system-ui", "sans-serif"],
+ "brut-mono": ["Space Mono", "ui-monospace", "monospace"],
},
},
colors: {
@@ -90,6 +99,18 @@ module.exports = {
950: "#3E3E41",
},
"base-fg": "rgb(255 255 255 /