mirror of
https://github.com/storytold/artcraft.git
synced 2026-10-20 17:02:53 -04:00
marketing updates for the website (#722)
This is currently a draft / work in progress. --------- Co-authored-by: bflatastic <bombayapirat@gmail.com>
This commit is contained in:
Brandon Thomas
co-authored by
bflatastic
bflatastic
parent
5f832d5d17
commit
da859fc2f8
Binary file not shown.
|
After Width: | Height: | Size: 463 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Flux</title><path d="M0 20.683L12.01 2.5 24 20.683h-2.233L12.009 5.878 3.471 18.806h12.122l1.239 1.877H0z"></path><path d="M8.069 16.724l2.073-3.115 2.074 3.115H8.069zM18.24 20.683l-5.668-8.707h2.177l5.686 8.707h-2.196zM19.74 11.676l2.13-3.19 2.13 3.19h-4.26z"></path></svg>
|
||||
|
After Width: | Height: | Size: 438 B |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Kling</title><path clip-rule="evenodd" d="M5.493 21.234c-1.112-1.451-1.109-4.263-.081-7.459l-4.557-2.63a1.683 1.683 0 01-.85-1.304 1.505 1.505 0 01.08-.622 13.18 13.18 0 011.037-2.255c3.476-6.02 10.916-8.23 16.619-4.938.46.266.82.67 1.081 1.184.785 1.545.685 4.096-.234 6.954l4.557 2.631c.339.196.596.492.736.832a1.53 1.53 0 01.034 1.093 13.146 13.146 0 01-1.037 2.255c-3.476 6.02-10.916 8.23-16.619 4.938a2.6 2.6 0 01-.766-.68zm11.096-6.615c-2.073 3.591-5.808 5.316-8.343 3.852-1.267-.731-1.994-2.122-2.145-3.778-.095-1.035.036-2.173.4-3.32.217-.684.517-1.37.902-2.039l.008-.014c2.073-3.59 5.808-5.315 8.343-3.852.633.366 1.13.895 1.49 1.54.986 1.772.922 4.415-.285 6.914-.111.23-.232.457-.362.683l-.008.014z"></path></svg>
|
||||
|
After Width: | Height: | Size: 888 B |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Midjourney</title><path d="M22.369 17.676c-1.387 1.259-3.17 2.378-5.332 3.417.044.03.086.057.13.083l.018.01.019.012c.216.123.42.184.641.184.222 0 .426-.061.642-.184l.018-.011.019-.011c.14-.084.266-.178.492-.366l.178-.148c.279-.232.426-.342.625-.456.304-.174.612-.266.949-.266.337 0 .645.092.949.266l.023.014c.188.109.334.219.602.442l.178.148c.221.184.346.278.483.36l.028.017.018.01c.21.12.407.181.62.185h.022a.31.31 0 110 .618c-.337 0-.645-.092-.95-.266a3.137 3.137 0 01-.09-.054l-.022-.014-.022-.013-.02-.014a5.356 5.356 0 01-.49-.377l-.159-.132a3.836 3.836 0 00-.483-.36l-.027-.017-.019-.01a1.256 1.256 0 00-.641-.185c-.222 0-.426.061-.641.184l-.02.011-.018.011c-.14.084-.266.178-.492.366l-.158.132a5.125 5.125 0 01-.51.39l-.022.014-.022.014-.09.054a1.868 1.868 0 01-.95.266c-.337 0-.644-.092-.949-.266a3.137 3.137 0 01-.09-.054l-.022-.014-.022-.013-.026-.017a4.881 4.881 0 01-.425-.325.308.308 0 01-.12-.1l-.098-.081a3.836 3.836 0 00-.483-.36l-.027-.017-.019-.01a1.256 1.256 0 00-.641-.185c-.222 0-.426.061-.642.184l-.018.011-.019.011c-.14.084-.266.178-.492.366l-.158.132a5.125 5.125 0 01-.51.39l-.023.014-.022.014-.09.054A1.868 1.868 0 0112 22c-.337 0-.645-.092-.949-.266a3.137 3.137 0 01-.09-.054l-.022-.014-.022-.013-.021-.014a5.356 5.356 0 01-.49-.377l-.158-.132a3.836 3.836 0 00-.483-.36l-.028-.017-.018-.01a1.256 1.256 0 00-.642-.185c-.221 0-.425.061-.641.184l-.019.011-.018.011c-.141.084-.266.178-.492.366l-.158.132a5.125 5.125 0 01-.511.39l-.022.014-.022.014-.09.054a1.868 1.868 0 01-.986.264c-.746-.09-1.319-.38-1.89-.866l-.035-.03c-.047-.041-.118-.106-.192-.174l-.196-.181-.107-.1-.011-.01a1.531 1.531 0 00-.336-.253.313.313 0 00-.095-.03h-.005c-.119.022-.238.059-.361.11a.308.308 0 01-.077.061l-.008.005a.309.309 0 01-.126.034 5.66 5.66 0 00-.774.518l-.416.324-.055.043a6.542 6.542 0 01-.324.236c-.305.207-.552.315-.8.315a.31.31 0 01-.01-.618h.01c.09 0 .235-.062.438-.198l.04-.027c.077-.054.163-.117.27-.199l.385-.301.06-.047c.268-.206.506-.373.73-.505l-.633-1.21a.309.309 0 01.254-.451l20.287-1.305a.309.309 0 01.228.537zm-1.118.14L2.369 19.03l.423.809c.128-.045.256-.078.388-.1a.31.31 0 01.052-.005c.132 0 .26.032.386.093.153.073.294.179.483.35l.016.015.092.086.144.134.097.089c.065.06.125.114.16.144.485.418.948.658 1.554.736h.011a1.25 1.25 0 00.6-.172l.021-.011.019-.011.018-.011c.141-.084.266-.178.492-.366l.178-.148c.279-.232.426-.342.625-.456.305-.174.612-.266.95-.266.336 0 .644.092.948.266l.023.014c.188.109.335.219.603.442l.177.148c.222.184.346.278.484.36l.027.017.019.01c.215.124.42.185.641.185.222 0 .426-.061.641-.184l.019-.011.018-.011c.141-.084.267-.178.493-.366l.177-.148c.28-.232.427-.342.626-.456.304-.174.612-.266.949-.266.337 0 .644.092.949.266l.025.015c.187.109.334.22.603.443 1.867-.878 3.448-1.811 4.73-2.832l.02-.016zM3.653 2.026C6.073 3.06 8.69 4.941 10.8 7.258c2.46 2.7 4.109 5.828 4.637 9.149a.31.31 0 01-.421.335c-2.348-.945-4.54-1.258-6.59-1.02-1.739.2-3.337.792-4.816 1.703-.294.182-.62-.182-.405-.454 1.856-2.355 2.581-4.99 2.343-7.794-.195-2.292-1.031-4.61-2.284-6.709a.31.31 0 01.388-.442zM10.04 4.45c1.778.543 3.892 2.102 5.782 4.243 1.984 2.248 3.552 4.934 4.347 7.582a.31.31 0 01-.401.38l-.022-.01-.386-.154a10.594 10.594 0 00-.291-.112l-.016-.006c-.68-.247-1.199-.291-1.944-.101a.31.31 0 01-.375-.218C15.378 11.123 13.073 7.276 9.775 5c-.291-.201-.072-.653.266-.55zM4.273 2.996l.008.015c1.028 1.94 1.708 4.031 1.885 6.113.213 2.513-.31 4.906-1.673 7.092l-.02.031.003-.001c1.198-.581 2.47-.969 3.825-1.132l.055-.006c1.981-.23 4.083.029 6.309.837l.066.025-.007-.039c-.593-2.95-2.108-5.737-4.31-8.179l-.07-.078c-1.785-1.96-3.944-3.6-6.014-4.65l-.057-.028zm7.92 3.238l.048.048c2.237 2.295 3.885 5.431 4.974 9.191l.038.132.022-.004c.71-.133 1.284-.063 1.963.18l.027.01.066.024.046.018-.025-.073c-.811-2.307-2.208-4.62-3.936-6.594l-.058-.065c-1.02-1.155-2.103-2.132-3.15-2.856l-.015-.011z"></path></svg>
|
||||
|
After Width: | Height: | Size: 3.9 KiB |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>OpenAI</title><path d="M21.55 10.004a5.416 5.416 0 00-.478-4.501c-1.217-2.09-3.662-3.166-6.05-2.66A5.59 5.59 0 0010.831 1C8.39.995 6.224 2.546 5.473 4.838A5.553 5.553 0 001.76 7.496a5.487 5.487 0 00.691 6.5 5.416 5.416 0 00.477 4.502c1.217 2.09 3.662 3.165 6.05 2.66A5.586 5.586 0 0013.168 23c2.443.006 4.61-1.546 5.361-3.84a5.553 5.553 0 003.715-2.66 5.488 5.488 0 00-.693-6.497v.001zm-8.381 11.558a4.199 4.199 0 01-2.675-.954c.034-.018.093-.05.132-.074l4.44-2.53a.71.71 0 00.364-.623v-6.176l1.877 1.069c.02.01.033.029.036.05v5.115c-.003 2.274-1.87 4.118-4.174 4.123zM4.192 17.78a4.059 4.059 0 01-.498-2.763c.032.02.09.055.131.078l4.44 2.53c.225.13.504.13.73 0l5.42-3.088v2.138a.068.068 0 01-.027.057L9.9 19.288c-1.999 1.136-4.552.46-5.707-1.51h-.001zM3.023 8.216A4.15 4.15 0 015.198 6.41l-.002.151v5.06a.711.711 0 00.364.624l5.42 3.087-1.876 1.07a.067.067 0 01-.063.005l-4.489-2.559c-1.995-1.14-2.679-3.658-1.53-5.63h.001zm15.417 3.54l-5.42-3.088L14.896 7.6a.067.067 0 01.063-.006l4.489 2.557c1.998 1.14 2.683 3.662 1.529 5.633a4.163 4.163 0 01-2.174 1.807V12.38a.71.71 0 00-.363-.623zm1.867-2.773a6.04 6.04 0 00-.132-.078l-4.44-2.53a.731.731 0 00-.729 0l-5.42 3.088V7.325a.068.068 0 01.027-.057L14.1 4.713c2-1.137 4.555-.46 5.707 1.513.487.833.664 1.809.499 2.757h.001zm-11.741 3.81l-1.877-1.068a.065.065 0 01-.036-.051V6.559c.001-2.277 1.873-4.122 4.181-4.12.976 0 1.92.338 2.671.954-.034.018-.092.05-.131.073l-4.44 2.53a.71.71 0 00-.365.623l-.003 6.173v.002zm1.02-2.168L12 9.25l2.414 1.375v2.75L12 14.75l-2.415-1.375v-2.75z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
@@ -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: (
|
||||
<img
|
||||
src="/model-logos/flux.svg"
|
||||
alt="Flux logo"
|
||||
className="w-full h-full invert"
|
||||
/>
|
||||
),
|
||||
},
|
||||
{ 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: (
|
||||
<img
|
||||
src="/model-logos/midjourney.svg"
|
||||
alt="Midjourney logo"
|
||||
className="w-full h-full invert"
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "gpt-image-1",
|
||||
label: "GPT-Image 1",
|
||||
svg: (
|
||||
<img
|
||||
src="/model-logos/openai.svg"
|
||||
alt="OpenAI logo"
|
||||
className="w-full h-full invert"
|
||||
/>
|
||||
),
|
||||
},
|
||||
{ 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: (
|
||||
<img
|
||||
src="/model-logos/kling.svg"
|
||||
alt="Kling AI logo"
|
||||
className="w-full h-full invert"
|
||||
/>
|
||||
),
|
||||
},
|
||||
{ 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 (
|
||||
<div
|
||||
className={`select-none relative z-10 h-full overflow-hidden ${className}`}
|
||||
>
|
||||
{/* Gradient fade overlays */}
|
||||
<div className="absolute left-0 top-0 w-32 xl:w-96 h-full bg-gradient-to-r from-[#28282C] to-transparent z-10 pointer-events-none" />
|
||||
<div className="absolute right-0 top-0 w-32 xl:w-96 h-full bg-gradient-to-l from-[#28282C] to-transparent z-10 pointer-events-none" />
|
||||
|
||||
<div className="flex flex-col gap-5 h-full -mx-[280px] xl:-mx-8">
|
||||
{rows.map((row, rowIdx) => {
|
||||
const offset = rowOffsets[rowIdx] ?? 0;
|
||||
return (
|
||||
<div
|
||||
key={rowIdx}
|
||||
className="flex gap-5 whitespace-nowrap"
|
||||
style={{ marginLeft: offset }}
|
||||
>
|
||||
{row.map(({ id, label, svg }, idx) => {
|
||||
const isHighlight = highlight && highlight.toLowerCase() === id;
|
||||
return (
|
||||
<div
|
||||
key={idx}
|
||||
className={twMerge(
|
||||
baseBadgeClasses,
|
||||
label ? "" : "min-w-[180px]",
|
||||
isHighlight ? highlightClasses : ""
|
||||
)}
|
||||
>
|
||||
{svg ? (
|
||||
<span className="mr-2 w-6 h-6 inline-flex ">{svg}</span>
|
||||
) : null}
|
||||
{label}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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 = () => {
|
||||
<span className="text-white">
|
||||
Controllable AI
|
||||
<br />
|
||||
for Artists
|
||||
for{" "}
|
||||
<span className="relative after:absolute after:bottom-0 after:left-0 after:w-full after:h-[6px] md:after:h-[11px] after:bg-primary/80 after:mb-0 after:xl:mb-2">
|
||||
Artists
|
||||
</span>
|
||||
</span>
|
||||
</motion.h1>
|
||||
|
||||
{/* Subtitle */}
|
||||
<motion.p
|
||||
className="text-base sm:text-xl md:text-2xl lg:text-2xl text-white/70 mb-8 sm:mb-12 max-w-2xl mx-auto font-medium drop-shadow-[0_2px_12px_rgba(80,80,255,0.10)]"
|
||||
className="text-base mt-4 sm:text-xl md:text-2xl lg:text-2xl text-white/70 mb-8 sm:mb-12 max-w-2xl mx-auto font-medium drop-shadow-[0_2px_12px_rgba(80,80,255,0.10)]"
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
variants={fadeUpVariants}
|
||||
>
|
||||
Text prompting sucks. Bring your true vision to life with
|
||||
Text prompting sucks. Bring your true vision to life with
|
||||
unparalleled control and precision.
|
||||
</motion.p>
|
||||
|
||||
@@ -182,6 +194,229 @@ const Landing = () => {
|
||||
</main>
|
||||
|
||||
<div className="relative flex overflow-visible xl:items-center xl:pt-0 mb-4 md:mb-12 px-2 sm:px-4 md:px-0">
|
||||
{/* Gradient Orb for Section */}
|
||||
<div className="absolute left-[-200px] top-[-100px] w-[600px] h-[600px] rounded-full bg-gradient-to-br from-[#00AABA] via-blue-500 to-blue-700 opacity-15 blur-[120px] z-0 pointer-events-none" />
|
||||
<motion.div
|
||||
className="w-full flex flex-col items-center justify-center text-center pt-16 sm:pt-24 md:pt-32 px-2 sm:px-6 md:px-10"
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true }}
|
||||
variants={fadeUpVariants}
|
||||
>
|
||||
<motion.div className="relative" variants={fadeUpVariants}>
|
||||
<h1 className="relative mb-4 sm:mb-6 md:mb-10 font-bold text-3xl sm:text-4xl md:text-[3rem] lg:text-[4rem] xl:text-[4.5rem] !leading-tight text-shadow-lg">
|
||||
<span
|
||||
className="text-primary"
|
||||
style={{ textShadow: "0 0 15px var(--color-primary)" }}
|
||||
>
|
||||
Five Reasons{" "}
|
||||
</span>
|
||||
Why
|
||||
<br />
|
||||
ArtCraft is the
|
||||
<span
|
||||
className="text-primary"
|
||||
style={{ textShadow: "0 0 15px var(--color-primary)" }}
|
||||
>
|
||||
{" "}
|
||||
Best Tool
|
||||
</span>
|
||||
</h1>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Bento Box Grid Section */}
|
||||
<div className="overflow-visible pb-10 sm:pb-20 md:pb-28 lg:pb-32 relative px-4">
|
||||
{/* Gradient Orbs for Section */}
|
||||
<div className="absolute right-[-150px] top-[-100px] w-[500px] h-[500px] rounded-full bg-gradient-to-br from-[#00AABA] via-blue-500 to-blue-700 opacity-10 blur-[110px] z-0 pointer-events-none" />
|
||||
{/* <div className="absolute right-[-200px] bottom-[-100px] w-[600px] h-[600px] rounded-full bg-gradient-to-br from-blue-700 via-[#00AABA] to-pink-500 opacity-8 blur-[120px] z-0 pointer-events-none" /> */}
|
||||
|
||||
<motion.div
|
||||
className="mx-auto max-w-[88rem] md:px-6 lg:px-8"
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true }}
|
||||
variants={fadeUpVariants}
|
||||
>
|
||||
{/* Bento Grid Container */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-12 gap-6 sm:gap-8">
|
||||
{/* Reason #1 - Large Box */}
|
||||
<motion.div
|
||||
className="xl:col-span-6 bg-[#28282C] rounded-2xl sm:rounded-3xl p-6 lg:p-8 shadow-2xl transition-all duration-300 group"
|
||||
variants={fadeUpVariants}
|
||||
>
|
||||
<div className="flex xl:flex-col gap-4 lg:gap-8 h-full flex-col-reverse">
|
||||
<div className="grow h-40">
|
||||
<img
|
||||
src="/images/2d-3d.png"
|
||||
alt="2D and 3D"
|
||||
className="w-full h-full object-cover rounded-2xl"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col justify-between">
|
||||
<div>
|
||||
<h3 className="font-bold text-xl sm:text-2xl lg:text-3xl mb-3 sm:mb-4 leading-tight">
|
||||
Text Prompting Sucks
|
||||
</h3>
|
||||
<p className="text-white/80 text-sm sm:text-base lg:text-lg leading-relaxed">
|
||||
<span className="text-primary-400 font-semibold">
|
||||
Our tool lets you design visually, like Figma.
|
||||
</span>{" "}
|
||||
Draw on a canvas or work in a 3D space as if you're
|
||||
playing a video game.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Reason #2 - Medium Box */}
|
||||
<motion.div
|
||||
className="xl:col-span-6 bg-[#28282C] rounded-2xl sm:rounded-3xl p-6 lg:p-8 pb-0 lg:pb-0 shadow-2xl transition-all duration-300 group"
|
||||
variants={fadeUpVariants}
|
||||
>
|
||||
<div className="relative flex flex-col h-full">
|
||||
<h3 className="font-bold text-xl sm:text-2xl lg:text-3xl mb-3 sm:mb-4 leading-tight ">
|
||||
Desktop App
|
||||
</h3>
|
||||
<p className="text-white/80 text-sm sm:text-base mb-4 sm:mb-6 lg:text-lg leading-relaxed">
|
||||
<span className="text-primary-400 font-semibold">
|
||||
No more hunting for the hundredth tab.
|
||||
</span>{" "}
|
||||
Works on Windows, Mac, and soon Linux and Tablets. First class
|
||||
experience for real artists.
|
||||
</p>
|
||||
<div className="h-20 md:h-24 lg:h-36 xl:h-36 bg-white/[3%] border-[5px] border-white/[2%] rounded-t-2xl relative mt-12 lg:mt-16 xl:mt-24 select-none">
|
||||
<div className="absolute -top-20 left-1/2 -translate-x-1/2 flex gap-9 items-center justify-center drop-shadow-2xl z-20 scale-50 lg:scale-75 xl:scale-100">
|
||||
<img
|
||||
src="/images/windows-logo.png"
|
||||
alt="Windows Logo"
|
||||
draggable={false}
|
||||
className="h-32 rotate-6"
|
||||
/>
|
||||
<img
|
||||
src="/images/apple-logo.png"
|
||||
alt="Windows Logo"
|
||||
draggable={false}
|
||||
className="h-36 -rotate-6"
|
||||
/>
|
||||
<img
|
||||
src="/images/linux-logo.png"
|
||||
alt="Windows Logo"
|
||||
draggable={false}
|
||||
className="h-36 rotate-6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute left-0 bottom-0 w-full h-28 bg-gradient-to-t from-[#28282C] to-transparent z-10 pointer-events-none" />
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Reason #3 - Medium Box */}
|
||||
<motion.div
|
||||
className="xl:col-span-4 bg-[#28282C] rounded-2xl sm:rounded-3xl p-6 lg:p-8 shadow-2xl transition-all duration-300 group"
|
||||
variants={fadeUpVariants}
|
||||
>
|
||||
<div className="flex flex-col h-full">
|
||||
<h3 className="font-bold text-xl sm:text-2xl lg:text-3xl mb-3 sm:mb-4 leading-tight">
|
||||
It's Open Source
|
||||
</h3>
|
||||
<p className="text-white/80 text-sm sm:text-base lg:text-lg mb-4 sm:mb-6 leading-relaxed flex-1">
|
||||
We'll be releasing the code behind our desktop app, server,
|
||||
models, and infrastructure as{" "}
|
||||
<span className="text-primary-400 font-semibold">
|
||||
open source!
|
||||
</span>
|
||||
</p>
|
||||
<div className="flex justify-center items-center h-full p-4 lg:p-6 select-none">
|
||||
<img
|
||||
src="/images/github-logo.png"
|
||||
alt="GitHub Logo"
|
||||
className="h-20 md:h-32 lg:h-36"
|
||||
draggable={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Reason #4 - Large Box */}
|
||||
<motion.div
|
||||
className="xl:col-span-8 bg-[#28282C] rounded-2xl sm:rounded-3xl shadow-2xl transition-all duration-300 group overflow-hidden"
|
||||
variants={fadeUpVariants}
|
||||
>
|
||||
<div className="lg:flex-1 flex flex-col justify-between">
|
||||
<div className="p-6 lg:p-8">
|
||||
<h3 className="font-bold text-xl sm:text-2xl lg:text-3xl mb-3 sm:mb-4 leading-tight">
|
||||
Use Every Model
|
||||
</h3>
|
||||
<p className="text-white/80 text-sm sm:text-base lg:text-lg leading-relaxed">
|
||||
You'll be able to use{" "}
|
||||
<span className="text-primary-400 font-semibold">
|
||||
EVERY image and video model
|
||||
</span>{" "}
|
||||
all in one place. Log in with your existing subscriptions.
|
||||
</p>
|
||||
</div>
|
||||
<ModelBadgeGrid
|
||||
highlight="gpt-image-1"
|
||||
rowOffsets={[-70, -90, -160]}
|
||||
className="mt-3"
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Reason #5 - Full Width Box */}
|
||||
<motion.div
|
||||
className="xl:col-span-12 md:col-span-2 bg-[#28282C] rounded-2xl sm:rounded-3xl p-6 lg:p-8 shadow-2xl transition-all duration-300 group"
|
||||
variants={fadeUpVariants}
|
||||
>
|
||||
<div className="flex flex-col lg:flex-row gap-4 lg:gap-8 items-center">
|
||||
<div className="lg:flex-1">
|
||||
<h3 className="font-bold text-xl sm:text-2xl lg:text-3xl mb-3 sm:mb-4 leading-tight">
|
||||
Created by Artists and Filmmakers
|
||||
</h3>
|
||||
<p className="text-white/80 text-sm sm:text-base lg:text-lg leading-relaxed">
|
||||
<span className="text-primary-400 font-semibold">
|
||||
The other leading platforms were created by the Google ad
|
||||
team, crypto bros, and other non-artists.
|
||||
</span>{" "}
|
||||
<br />
|
||||
Not us. We're one of you.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-center items-center h-24 lg:h-28">
|
||||
{/* Film icon */}
|
||||
<div className="w-16 h-16 lg:w-20 lg:h-20 bg-pink-900 rounded-full flex items-center justify-center border-2 border-pink-600 shadow-lg z-10">
|
||||
<FontAwesomeIcon
|
||||
icon={faFilm}
|
||||
className="text-white text-xl lg:text-2xl"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Paint brush icon - center, most prominent */}
|
||||
<div className="w-20 h-20 lg:w-24 lg:h-24 bg-emerald-600 rounded-full flex items-center justify-center border-2 border-emerald-400 shadow-lg -ml-2 z-30">
|
||||
<FontAwesomeIcon
|
||||
icon={faPaintBrush}
|
||||
className="text-white text-2xl lg:text-3xl"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Camera icon */}
|
||||
<div className="w-16 h-16 lg:w-20 lg:h-20 bg-purple-900 rounded-full flex items-center justify-center border-2 border-purple-600 shadow-lg -ml-2 z-20">
|
||||
<FontAwesomeIcon
|
||||
icon={faCamera}
|
||||
className="text-white text-xl lg:text-2xl"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<div className="relative flex overflow-visible xl:items-center xl:pt-0 px-2 sm:px-4 md:px-0">
|
||||
{/* Gradient Orb for Section */}
|
||||
<div className="absolute left-[-200px] top-[-100px] w-[600px] h-[600px] rounded-full bg-gradient-to-br from-[#00AABA] via-blue-500 to-blue-700 opacity-15 blur-[120px] z-0 pointer-events-none" />
|
||||
<motion.div
|
||||
@@ -214,7 +449,7 @@ const Landing = () => {
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 mx-auto w-full max-w-[1200px] px-2 sm:px-4 md:px-16 lg:px-12 xl:px-32 pb-8 sm:pb-16 md:pb-24 lg:pb-32 overflow-visible px-4">
|
||||
<div className="relative z-10 mx-auto w-full max-w-[1200px] sm:px-4 md:px-16 lg:px-12 xl:px-32 pb-8 sm:pb-16 md:pb-24 lg:pb-32 overflow-visible px-4">
|
||||
{/* Gradient Orb for Section */}
|
||||
<div className="absolute right-[-250px] top-[-150px] w-[700px] h-[700px] rounded-full bg-gradient-to-br from-blue-700 via-[#00AABA] to-pink-500 opacity-[0.1] blur-[140px] z-0 pointer-events-none" />
|
||||
<motion.div
|
||||
@@ -247,7 +482,35 @@ const Landing = () => {
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<div className="overflow-visible py-10 sm:py-20 md:py-28 lg:py-32 relative px-4">
|
||||
<div className="relative flex overflow-visible xl:items-center xl:pt-0 mb-4 md:mb-12 px-2 sm:px-4 md:px-0">
|
||||
{/* Gradient Orb for Section */}
|
||||
<div className="absolute left-[-200px] top-[-100px] w-[600px] h-[600px] rounded-full bg-gradient-to-br from-[#00AABA] via-blue-500 to-blue-700 opacity-15 blur-[120px] z-0 pointer-events-none" />
|
||||
<motion.div
|
||||
className="w-full flex flex-col items-center justify-center text-center pt-16 sm:pt-24 md:pt-32 px-2 sm:px-6 md:px-10"
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true }}
|
||||
variants={fadeUpVariants}
|
||||
>
|
||||
<motion.div className="relative" variants={fadeUpVariants}>
|
||||
<h1 className="relative mb-4 sm:mb-6 md:mb-10 font-bold text-3xl sm:text-4xl md:text-[3rem] lg:text-[4rem] xl:text-[4.5rem] !leading-none text-shadow-lg">
|
||||
<span
|
||||
className="text-white leading-tight"
|
||||
style={{ textShadow: "0 0 15px var(--color-primary)" }}
|
||||
>
|
||||
We're Pulling You{" "}
|
||||
<span className="text-primary">
|
||||
Out
|
||||
<br />
|
||||
of Prompting
|
||||
</span>
|
||||
</span>
|
||||
</h1>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<div className="overflow-visible pb-10 sm:pb-20 md:pb-28 lg:pb-32 relative px-4">
|
||||
{/* Gradient Orb for Section */}
|
||||
<div className="absolute left-[-150px] bottom-[-100px] w-[500px] h-[500px] rounded-full bg-gradient-to-br from-[#00AABA] via-blue-500 to-blue-700 opacity-10 blur-[110px] z-0 pointer-events-none" />
|
||||
<motion.div
|
||||
@@ -263,7 +526,7 @@ const Landing = () => {
|
||||
variants={fadeUpVariants}
|
||||
>
|
||||
<div className="max-w-2xl lg:mx-0 mb-10 md:mb-16">
|
||||
<h2 className="relative font-bold text-4xl md:text-5xl lg:text-6xl !leading-tight">
|
||||
<h2 className="relative font-bold text-4xl md:text-5xl !leading-tight">
|
||||
Our tool lets you design, control, and achieve{" "}
|
||||
<span className="text-primary">perfect consistency</span>
|
||||
</h2>
|
||||
@@ -272,7 +535,7 @@ const Landing = () => {
|
||||
</motion.div>
|
||||
<div className="sm:px-2 sm:mx-auto lg:px-0">
|
||||
<div className="relative isolate overflow-hidden bg-indigo-500 sm:mx-auto sm:max-w-2xl sm:rounded-3xl sm:pr-0 lg:mx-0 lg:max-w-none">
|
||||
<div className="mx-auto max-w-full sm:max-w-2xl sm:mx-0 sm:max-w-none p-2 sm:p-4 bg-white/10 backdrop-blur-md rounded-2xl sm:rounded-3xl overflow-hidden shadow-2xl">
|
||||
<div className="mx-auto max-w-full sm:mx-0 sm:max-w-none p-2 sm:p-4 bg-white/10 backdrop-blur-md rounded-2xl sm:rounded-3xl overflow-hidden shadow-2xl">
|
||||
<video
|
||||
src="/videos/artcraft-3d-demo.mp4"
|
||||
autoPlay
|
||||
@@ -304,7 +567,7 @@ const Landing = () => {
|
||||
className="relative isolate overflow-hidden bg-indigo-500 sm:mx-auto sm:max-w-2xl sm:rounded-3xl sm:pr-0 lg:mx-0 lg:max-w-none"
|
||||
variants={fadeUpVariants}
|
||||
>
|
||||
<div className="mx-auto max-w-full sm:max-w-2xl sm:mx-0 sm:max-w-none p-2 sm:p-4 bg-white/10 backdrop-blur-md rounded-2xl sm:rounded-3xl overflow-hidden shadow-2xl">
|
||||
<div className="mx-auto max-w-full sm:mx-0 sm:max-w-none p-2 sm:p-4 bg-white/10 backdrop-blur-md rounded-2xl sm:rounded-3xl overflow-hidden shadow-2xl">
|
||||
<video
|
||||
src="/videos/artcraft-canvas-demo.mp4"
|
||||
autoPlay
|
||||
@@ -321,9 +584,9 @@ const Landing = () => {
|
||||
variants={fadeUpVariants}
|
||||
>
|
||||
<div className=" max-w-2xl lg:mx-0 mb-10 md:mb-16">
|
||||
<h2 className="relative font-bold text-4xl md:text-5xl lg:text-6xl xl:text-[3.8rem] !leading-tight">
|
||||
<h2 className="relative font-bold text-4xl md:text-5xl !leading-tight">
|
||||
<span className="text-primary">Patented</span> Brain to Art
|
||||
Interface lets you Sketch and Composite
|
||||
Interface lets you Sketch and Composite
|
||||
</h2>
|
||||
</div>
|
||||
<DiscordButton />
|
||||
@@ -332,7 +595,7 @@ const Landing = () => {
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 mx-auto w-full max-w-screen px-2 sm:px-4 py-10 sm:py-20 md:py-32 sm:px-8 lg:px-32 overflow-visible px-4">
|
||||
<div className="relative z-10 mx-auto w-full max-w-screen py-10 sm:py-20 md:py-32 sm:px-8 lg:px-32 overflow-visible px-4">
|
||||
{/* Gradient Orb for Section */}
|
||||
<div className="absolute left-[-250px] top-[-150px] w-[700px] h-[700px] rounded-full bg-gradient-to-br from-[#00AABA] via-blue-500 to-blue-700 opacity-[0.07] blur-[150px] z-0 pointer-events-none" />
|
||||
{/* Videos Section */}
|
||||
@@ -377,7 +640,7 @@ const Landing = () => {
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 mx-auto w-full max-w-[1400px] px-2 sm:px-4 pt-10 sm:pt-20 md:pt-32 pb-12 sm:pb-24 md:pb-40 lg:pb-56 sm:px-8 lg:px-32 overflow-visible px-4">
|
||||
<div className="relative z-10 mx-auto w-full max-w-[1400px] pt-10 sm:pt-20 md:pt-32 pb-12 sm:pb-24 md:pb-40 lg:pb-56 sm:px-8 lg:px-32 overflow-visible px-4">
|
||||
{/* Gradient Orb for Section */}
|
||||
<div className="absolute right-[-300px] bottom-[-100px] w-[800px] h-[800px] rounded-full bg-gradient-to-br from-blue-700 via-[#00AABA] to-pink-500 opacity-10 blur-[160px] z-0 pointer-events-none" />
|
||||
{/* Discord CTA Section */}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
const { createGlobPatternsForDependencies } = require("@nx/react/tailwind");
|
||||
const { join } = require("path");
|
||||
import colors from "tailwindcss/colors";
|
||||
import colors, { teal } from "tailwindcss/colors";
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
@@ -24,6 +24,12 @@ module.exports = {
|
||||
gray: colors.gray,
|
||||
black: colors.black,
|
||||
blue: colors.blue,
|
||||
orange: colors.orange,
|
||||
green: colors.green,
|
||||
emerald: colors.emerald,
|
||||
teal: colors.teal,
|
||||
yellow: colors.yellow,
|
||||
pink: colors.pink,
|
||||
purple: colors.purple,
|
||||
primary: {
|
||||
DEFAULT: "#2d81ff",
|
||||
|
||||
@@ -28,6 +28,9 @@
|
||||
"noEmit": true
|
||||
},
|
||||
"references": [
|
||||
{
|
||||
"path": "../../libs/model-list"
|
||||
},
|
||||
{
|
||||
"path": "../../libs/components/pagination"
|
||||
},
|
||||
@@ -73,6 +76,9 @@
|
||||
{
|
||||
"path": "../../libs/components/toaster"
|
||||
},
|
||||
{
|
||||
"path": "../../libs/components/login-modal"
|
||||
},
|
||||
{
|
||||
"path": "../../libs/components/model-selector"
|
||||
},
|
||||
@@ -82,9 +88,6 @@
|
||||
{
|
||||
"path": "../../libs/components/promptbox"
|
||||
},
|
||||
{
|
||||
"path": "../../libs/tauri-api"
|
||||
},
|
||||
{
|
||||
"path": "../../libs/components/popover"
|
||||
},
|
||||
@@ -94,9 +97,6 @@
|
||||
{
|
||||
"path": "../../libs/components/menu-icon-selector"
|
||||
},
|
||||
{
|
||||
"path": "../../libs/api"
|
||||
},
|
||||
{
|
||||
"path": "../../libs/components/tooltip"
|
||||
},
|
||||
@@ -109,9 +109,6 @@
|
||||
{
|
||||
"path": "../../libs/components/gravatar"
|
||||
},
|
||||
{
|
||||
"path": "../../libs/components/login-modal"
|
||||
},
|
||||
{
|
||||
"path": "../../libs/components/select"
|
||||
},
|
||||
@@ -139,8 +136,14 @@
|
||||
{
|
||||
"path": "../../libs/components/button"
|
||||
},
|
||||
{
|
||||
"path": "../../libs/tauri-api"
|
||||
},
|
||||
{
|
||||
"path": "../../libs/tauri-utils"
|
||||
},
|
||||
{
|
||||
"path": "../../libs/api"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -8,9 +8,6 @@
|
||||
{
|
||||
"path": "../../tauri-api"
|
||||
},
|
||||
{
|
||||
"path": "../../tauri-utils"
|
||||
},
|
||||
{
|
||||
"path": "../button"
|
||||
},
|
||||
|
||||
@@ -49,9 +49,6 @@
|
||||
{
|
||||
"path": "../../tauri-api/tsconfig.lib.json"
|
||||
},
|
||||
{
|
||||
"path": "../../tauri-utils/tsconfig.lib.json"
|
||||
},
|
||||
{
|
||||
"path": "../button/tsconfig.lib.json"
|
||||
},
|
||||
|
||||
@@ -2,6 +2,9 @@
|
||||
"files": [],
|
||||
"include": [],
|
||||
"references": [
|
||||
{
|
||||
"path": "../tab-selector"
|
||||
},
|
||||
{
|
||||
"path": "../button"
|
||||
},
|
||||
|
||||
@@ -43,6 +43,9 @@
|
||||
"src/**/*.tsx"
|
||||
],
|
||||
"references": [
|
||||
{
|
||||
"path": "../tab-selector/tsconfig.lib.json"
|
||||
},
|
||||
{
|
||||
"path": "../button/tsconfig.lib.json"
|
||||
},
|
||||
|
||||
@@ -2,14 +2,17 @@
|
||||
"files": [],
|
||||
"include": [],
|
||||
"references": [
|
||||
{
|
||||
"path": "../../model-list"
|
||||
},
|
||||
{
|
||||
"path": "../camera-settings-modal"
|
||||
},
|
||||
{
|
||||
"path": "../action-reminder-modal"
|
||||
"path": "../../soundboard"
|
||||
},
|
||||
{
|
||||
"path": "../../soundboard"
|
||||
"path": "../action-reminder-modal"
|
||||
},
|
||||
{
|
||||
"path": "../../tauri-api"
|
||||
|
||||
@@ -43,14 +43,17 @@
|
||||
"src/**/*.tsx"
|
||||
],
|
||||
"references": [
|
||||
{
|
||||
"path": "../../model-list/tsconfig.lib.json"
|
||||
},
|
||||
{
|
||||
"path": "../camera-settings-modal/tsconfig.lib.json"
|
||||
},
|
||||
{
|
||||
"path": "../action-reminder-modal/tsconfig.lib.json"
|
||||
"path": "../../soundboard/tsconfig.lib.json"
|
||||
},
|
||||
{
|
||||
"path": "../../soundboard/tsconfig.lib.json"
|
||||
"path": "../action-reminder-modal/tsconfig.lib.json"
|
||||
},
|
||||
{
|
||||
"path": "../../tauri-api/tsconfig.lib.json"
|
||||
|
||||
@@ -5,9 +5,6 @@
|
||||
{
|
||||
"path": "../modal"
|
||||
},
|
||||
{
|
||||
"path": "../label"
|
||||
},
|
||||
{
|
||||
"path": "../switch"
|
||||
},
|
||||
@@ -18,7 +15,7 @@
|
||||
"path": "../../soundboard"
|
||||
},
|
||||
{
|
||||
"path": "../../tauri-api"
|
||||
"path": "../login-modal"
|
||||
},
|
||||
{
|
||||
"path": "../../api"
|
||||
@@ -29,6 +26,12 @@
|
||||
{
|
||||
"path": "../button"
|
||||
},
|
||||
{
|
||||
"path": "../label"
|
||||
},
|
||||
{
|
||||
"path": "../../tauri-api"
|
||||
},
|
||||
{
|
||||
"path": "./tsconfig.lib.json"
|
||||
},
|
||||
|
||||
@@ -46,9 +46,6 @@
|
||||
{
|
||||
"path": "../modal/tsconfig.lib.json"
|
||||
},
|
||||
{
|
||||
"path": "../label/tsconfig.lib.json"
|
||||
},
|
||||
{
|
||||
"path": "../switch/tsconfig.lib.json"
|
||||
},
|
||||
@@ -59,7 +56,7 @@
|
||||
"path": "../../soundboard/tsconfig.lib.json"
|
||||
},
|
||||
{
|
||||
"path": "../../tauri-api/tsconfig.lib.json"
|
||||
"path": "../login-modal/tsconfig.lib.json"
|
||||
},
|
||||
{
|
||||
"path": "../../api/tsconfig.lib.json"
|
||||
@@ -69,6 +66,12 @@
|
||||
},
|
||||
{
|
||||
"path": "../button/tsconfig.lib.json"
|
||||
},
|
||||
{
|
||||
"path": "../label/tsconfig.lib.json"
|
||||
},
|
||||
{
|
||||
"path": "../../tauri-api/tsconfig.lib.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Executable
+26
@@ -0,0 +1,26 @@
|
||||
#!/usr/bin/env bash
|
||||
# This works on Linux and MacOS to launch the frontend dev server
|
||||
|
||||
root_dir=$(pwd)
|
||||
frontend_path="${root_dir}/frontend"
|
||||
|
||||
echo "Running Artcraft Website in Dev Mode..."
|
||||
echo ""
|
||||
|
||||
# Kill any process running on port 5741, which will block startup
|
||||
if lsof -i tcp:4200 &>/dev/null; then
|
||||
lsof -i tcp:4200 -t | xargs kill -9
|
||||
echo "Killed process running on port 4200"
|
||||
else
|
||||
echo "No process running on port 4200"
|
||||
fi
|
||||
|
||||
pushd "${frontend_path}" || exit
|
||||
|
||||
npm install --verbose
|
||||
|
||||
export VITE_ENVIRONMENT_TYPE="production"
|
||||
|
||||
nx dev artcraft-website
|
||||
|
||||
popd || exit
|
||||
Reference in New Issue
Block a user