// Delete this file and put your own home page in app/actions/controller.tsx
import type { Handle, RemixNode } from 'remix/ui'
import { css } from 'remix/ui'
import { PromptButton } from '../assets/prompt-button.tsx'
import { Document } from './document.tsx'
const FONT_STACK =
"'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace"
export function HomePage() {
return () => (
}>
)
}
function HomeHead() {
return () => (
<>
)
}
function Masthead() {
return () => (
Welcome to
)
}
function Columns() {
return () => (
)
}
function GetStartedCard() {
return () => (
Get started
} label="Remix API" />
}
label="Join Discord"
/>
)
}
function CodingWithAiCard() {
return () => (
Coding with AI?
Navigate to this project folder using your preferred AI-powered tool, and try copying any
of these prompts into the agent chat:
)
}
function CardLink(handle: Handle<{ href: string; icon: RemixNode; label: string }>) {
return () => {
let { href, icon, label } = handle.props
return (
{icon}{label}
)
}
}
function IconSlot(handle: Handle<{ children: RemixNode; rotated?: boolean }>) {
return () => {
let { children, rotated = false } = handle.props
return (
{children}
)
}
}
function Footer() {
return () => (
)
}
const cardStyle = css({
background: 'var(--surface-3)',
borderRadius: '20px',
padding: '32px 16px 16px',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
gap: '32px',
})
const cardHeaderStyle = css({
margin: 0,
width: '100%',
padding: '0 16px',
display: 'flex',
alignItems: 'flex-start',
fontSize: '14px',
fontWeight: 700,
lineHeight: 1.5,
textTransform: 'uppercase',
letterSpacing: '0.1em',
color: 'var(--text-primary)',
})
// ----- SVG icons -----
// Inline so the page is fully self-contained with no external icon assets.
function AtomIcon() {
return () => (
)
}
function DiscordFaceIcon() {
return () => (
)
}
function GitHubIcon() {
return () => (
)
}
function XIcon() {
return () => (
)
}
function YouTubeIcon() {
return () => (
)
}
function DiscordIcon() {
return () => (
)
}
function FooterWordmark() {
// Same wordmark used for both light and dark mode; the text paths use
// currentColor so they inherit `--text-primary` from .
return () => (
)
}
function RemixWordmarkHero() {
// Single SVG used for both themes: bracket characters keep their decorative
// colors; the "REMIX" letterforms use currentColor so they inherit
// `--text-primary` from (light or dark).
return () => (
)
}