diff --git a/frontend/apps/artcraft-website/public/images/2d-3d.png b/frontend/apps/artcraft-website/public/images/2d-3d.png new file mode 100644 index 0000000000..02e31e7da6 Binary files /dev/null and b/frontend/apps/artcraft-website/public/images/2d-3d.png differ diff --git a/frontend/apps/artcraft-website/public/images/apple-logo.png b/frontend/apps/artcraft-website/public/images/apple-logo.png new file mode 100644 index 0000000000..270b8a8495 Binary files /dev/null and b/frontend/apps/artcraft-website/public/images/apple-logo.png differ diff --git a/frontend/apps/artcraft-website/public/images/github-logo.png b/frontend/apps/artcraft-website/public/images/github-logo.png new file mode 100644 index 0000000000..6febd5f07b Binary files /dev/null and b/frontend/apps/artcraft-website/public/images/github-logo.png differ diff --git a/frontend/apps/artcraft-website/public/images/linux-logo.png b/frontend/apps/artcraft-website/public/images/linux-logo.png new file mode 100644 index 0000000000..f561a77ba5 Binary files /dev/null and b/frontend/apps/artcraft-website/public/images/linux-logo.png differ diff --git a/frontend/apps/artcraft-website/public/images/windows-logo.png b/frontend/apps/artcraft-website/public/images/windows-logo.png new file mode 100644 index 0000000000..3ac148b52b Binary files /dev/null and b/frontend/apps/artcraft-website/public/images/windows-logo.png differ diff --git a/frontend/apps/artcraft-website/public/model-logos/flux.svg b/frontend/apps/artcraft-website/public/model-logos/flux.svg new file mode 100644 index 0000000000..12a4ba1d76 --- /dev/null +++ b/frontend/apps/artcraft-website/public/model-logos/flux.svg @@ -0,0 +1 @@ +Flux \ No newline at end of file diff --git a/frontend/apps/artcraft-website/public/model-logos/kling.svg b/frontend/apps/artcraft-website/public/model-logos/kling.svg new file mode 100644 index 0000000000..32fb6bed29 --- /dev/null +++ b/frontend/apps/artcraft-website/public/model-logos/kling.svg @@ -0,0 +1 @@ +Kling \ No newline at end of file diff --git a/frontend/apps/artcraft-website/public/model-logos/midjourney.svg b/frontend/apps/artcraft-website/public/model-logos/midjourney.svg new file mode 100644 index 0000000000..e59e3b0709 --- /dev/null +++ b/frontend/apps/artcraft-website/public/model-logos/midjourney.svg @@ -0,0 +1 @@ +Midjourney \ No newline at end of file diff --git a/frontend/apps/artcraft-website/public/model-logos/openai.svg b/frontend/apps/artcraft-website/public/model-logos/openai.svg new file mode 100644 index 0000000000..50d94d6c10 --- /dev/null +++ b/frontend/apps/artcraft-website/public/model-logos/openai.svg @@ -0,0 +1 @@ +OpenAI \ No newline at end of file diff --git a/frontend/apps/artcraft-website/src/components/model-badge-grid.tsx b/frontend/apps/artcraft-website/src/components/model-badge-grid.tsx new file mode 100644 index 0000000000..1898698466 --- /dev/null +++ b/frontend/apps/artcraft-website/src/components/model-badge-grid.tsx @@ -0,0 +1,142 @@ +import { ReactNode } from "react"; +import { twMerge } from "tailwind-merge"; + +interface BadgeInfo { + id: string; + label?: string | ReactNode; + svg?: ReactNode | null; +} + +interface ModelBadgeGridProps { + className?: string; + highlight?: string; + rowOffsets?: number[]; +} + +const baseBadgeClasses = + "rounded-2xl px-6 py-3 text-2xl font-normal flex-shrink-0 bg-white/10 text-white/90 text-center h-[58px] flex items-center justify-center gap-1.5"; +const highlightClasses = + "bg-primary/30 text-white font-semibold shadow-lg border-2 border-primary/60"; + +const rows: BadgeInfo[][] = [ + [ + { id: "empty1", svg: null }, + { id: "empty2", svg: null }, + { id: "empty3", svg: null }, + { + id: "flux", + label: "Flux Pro 1.1 Ultra", + svg: ( + Flux logo + ), + }, + { id: "empty4", svg: null }, + + { id: "empty6", svg: null }, + { id: "empty7", svg: null }, + { id: "empty8", svg: null }, + ], + [ + { id: "empty9", svg: null }, + { + id: "midjourney", + label: "Midjourney", + svg: ( + Midjourney logo + ), + }, + { + id: "gpt-image-1", + label: "GPT-Image 1", + svg: ( + OpenAI logo + ), + }, + { id: "empty10", svg: null }, + + { id: "empty11", svg: null }, + { id: "empty12", svg: null }, + { id: "empty13", svg: null }, + { id: "empty14", svg: null }, + ], + [ + { id: "empty15", svg: null }, + { id: "empty16", svg: null }, + { id: "empty17", svg: null }, + { + id: "kling", + label: "Kling 2.1 Pro", + svg: ( + Kling AI logo + ), + }, + { id: "empty18", svg: null }, + { id: "empty19", svg: null }, + { id: "empty20", svg: null }, + { id: "empty21", svg: null }, + ], +]; + +export default function ModelBadgeGrid({ + className = "", + highlight, + rowOffsets = [], +}: ModelBadgeGridProps) { + return ( +
+ {/* Gradient fade overlays */} +
+
+ +
+ {rows.map((row, rowIdx) => { + const offset = rowOffsets[rowIdx] ?? 0; + return ( +
+ {row.map(({ id, label, svg }, idx) => { + const isHighlight = highlight && highlight.toLowerCase() === id; + return ( +
+ {svg ? ( + {svg} + ) : null} + {label} +
+ ); + })} +
+ ); + })} +
+
+ ); +} diff --git a/frontend/apps/artcraft-website/src/pages/landing2/landing2.tsx b/frontend/apps/artcraft-website/src/pages/landing2/landing2.tsx index 1ef6e69cee..d995e5fd34 100644 --- a/frontend/apps/artcraft-website/src/pages/landing2/landing2.tsx +++ b/frontend/apps/artcraft-website/src/pages/landing2/landing2.tsx @@ -3,16 +3,25 @@ import { motion } from "framer-motion"; import { Button } from "@storyteller/ui-button"; import { isMobile } from "react-device-detect"; import { faWindows, faApple } from "@fortawesome/free-brands-svg-icons"; -import { faVolumeMute, faVolumeHigh } from "@fortawesome/pro-solid-svg-icons"; +import { + faVolumeMute, + faVolumeHigh, + faFilm, + faPaintBrush, + faCamera, +} from "@fortawesome/pro-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import Footer from "../../components/footer"; import { useState, useRef, useEffect } from "react"; +import ModelBadgeGrid from "../../components/model-badge-grid"; //const MAC_LINK = "https://pub-3b58c874772a4e04b9c291815224128c.r2.dev/mac/ArtCraft_0.0.1_universal_2025.06.04.dmg"; -const MAC_LINK = "https://pub-3b58c874772a4e04b9c291815224128c.r2.dev/mac/ArtCraft_0.0.1_universal_2025.07.13.dmg"; +const MAC_LINK = + "https://pub-3b58c874772a4e04b9c291815224128c.r2.dev/mac/ArtCraft_0.0.1_universal_2025.07.13.dmg"; //const WINDOWS_LINK = "https://pub-3b58c874772a4e04b9c291815224128c.r2.dev/windows/ArtCraft_0.0.1_x64-setup_2025.06.04.exe"; -const WINDOWS_LINK = "https://pub-3b58c874772a4e04b9c291815224128c.r2.dev/windows/ArtCraft_0.0.1_x64-setup_2025.07.13.exe"; +const WINDOWS_LINK = + "https://pub-3b58c874772a4e04b9c291815224128c.r2.dev/windows/ArtCraft_0.0.1_x64-setup_2025.07.13.exe"; const fadeUpVariants = { hidden: { opacity: 0, y: 20 }, @@ -48,7 +57,7 @@ const Landing = () => { useEffect(() => { if (videoRef.current) { videoRef.current.muted = isMuted; - videoRef.current.volume = 0.14; + videoRef.current.volume = 0.1; } }, [isMuted]); @@ -82,18 +91,21 @@ const Landing = () => { Controllable AI
- for Artists + for{" "} + + Artists + {/* Subtitle */} - Text prompting sucks. Bring your true vision to life with + Text prompting sucks. Bring your true vision to life with unparalleled control and precision. @@ -192,18 +204,21 @@ const Landing = () => { variants={fadeUpVariants} > -

+

- Four Reasons + Five Reasons{" "} -  Why ArtCraft is the  + Why +
+ ArtCraft is the + {" "} Best Tool

@@ -211,9 +226,12 @@ const Landing = () => {
-
- {/* Gradient Orb for Section */} -
+ {/* Bento Box Grid Section */} +
+ {/* Gradient Orbs for Section */} +
+ {/*
*/} + { viewport={{ once: true }} variants={fadeUpVariants} > -
+ {/* Bento Grid Container */} +
+ {/* Reason #1 - Large Box */} -
-

- Reason #1. Text Prompting Sucks {" "} - Our tool lets you design visually, like Figma. It's as if you're playing a video game. -

+
+
+ 2D and 3D +
+
+
+

+ Text Prompting Sucks +

+

+ + Our tool lets you design visually, like Figma. + {" "} + Draw on a canvas or work in a 3D space as if you're + playing a video game. +

+
+
- -
-
-
-
-
-
-
- -
- -
- {/* Gradient Orb for Section */} -
- -
-
- -
-
- -
+ {/* Reason #2 - Medium Box */} -
-

- Reason #2. You'll be able to use EVERY (we mean EVERY) image and video model all in one place. You can log into your existing subscriptions and use them all in ArtCraft. -

+
+

+ Desktop App +

+

+ + No more hunting for the hundredth tab. + {" "} + Works on Windows, Mac, and soon Linux and Tablets. First class + experience for real artists. +

+
+
+ Windows Logo + Windows Logo + Windows Logo +
+
+
+
+ + + {/* Reason #3 - Medium Box */} + +
+

+ It's Open Source +

+

+ We'll be releasing the code behind our desktop app, server, + models, and infrastructure as{" "} + + open source! + +

+
+ GitHub Logo +
+
+ + + {/* Reason #4 - Large Box */} + +
+
+

+ Use Every Model +

+

+ You'll be able to use{" "} + + EVERY image and video model + {" "} + all in one place. Log in with your existing subscriptions. +

+
+ +
+ + + {/* Reason #5 - Full Width Box */} + +
+
+

+ Created by Artists and Filmmakers +

+

+ + The other leading platforms were created by the Google ad + team, crypto bros, and other non-artists. + {" "} +
+ Not us. We're one of you. +

+
+
+ {/* Film icon */} +
+ +
+ + {/* Paint brush icon - center, most prominent */} +
+ +
+ + {/* Camera icon */} +
+ +
+
-
- -
- {/* Gradient Orb for Section */} -
- -
- -
-

- Reason #3. It's a Desktop App - No more hunting for the hundreth tab. This app works on Windows, Mac, and soon Linux and Tablets. It's a first class experience for real artists. -

-
- - -
-
-
-
-
-
-
- -
- - -
- {/* Gradient Orb for Section */} -
- -
-
- -
-
- -
- -
-

- - Reason #4. It's Open Source - We'll be releasing the code behind our desktop app, server, models, and infrastructure as open source. You own this! -

-
- - -
- -
- -
- {/* Gradient Orb for Section */} -
- -
- -
-

- Reason #5. Artcraft was created by artists and filmmakers. - The other leading platforms were created by the Google ad team, crypto bros, and other non-artists. Not us. We're one of you. -

-
- - -
-
-
-
-
-
-
- -
- -
+
{/* Gradient Orb for Section */}
{
-
+
{/* Gradient Orb for Section */}
{
-
{/* Gradient Orb for Section */}
@@ -503,21 +493,24 @@ const Landing = () => { variants={fadeUpVariants} > -

+

- Again — We're Pulling You Out of Prompting + We're Pulling You{" "} + + Out +
+ of Prompting +

- - -
+
{/* Gradient Orb for Section */}
{ variants={fadeUpVariants} >
-

+

Our tool lets you design, control, and achieve{" "} perfect consistency

@@ -542,7 +535,7 @@ const Landing = () => {
-
+