Skip to content

Remove non-production content from dashboard and canvas starters #72

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
SunilKumarKV wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Remove non-production content from dashboard and canvas starters #72

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
224 changes: 46 additions & 178 deletions apps/web/src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,59 +1,27 @@
import Link from "next/link";
import { RbcBadge } from "@/components/ui/rbc-badge";
import { RbcButton } from "@/components/ui/rbc-button";
import { studioNavItems } from "@/lib/navigation/studio-nav";

const studios = [
{
name: "Brand Studio",
status: "Next",
description:
"Create logo direction, color systems, typography, and reusable brand kits.",
},
const workflow = [
{
name: "Theme Studio",
status: "Ready",
description:
"Build token-powered glass, neon, SaaS, luxury, gaming, and minimal themes.",
title: "Define brand foundations",
description: "Set naming, logo mark text, and palette values for the workspace.",
},
{
name: "Component Studio",
status: "Ready",
description:
"Customize buttons, cards, inputs, badges, and future production UI blocks.",
title: "Tune validated tokens",
description: "Adjust theme colors and radii through the token engine.",
},
{
name: "Canvas Studio",
status: "V1 Ready",
description:
"Design visually with nodes, groups, templates, snap grid, import/export, and generated code.",
title: "Build reusable UI",
description: "Configure components and design layouts on the canvas.",
},
{
name: "Code Studio",
status: "Preview",
description:
"Generate React, Next.js, Tailwind, JSON tokens, and future RBC CLI assets.",
title: "Review generated artifacts",
description: "Export brand, theme, component, and canvas code from one place.",
},
] as const;

const workflow = [
"Choose a brand direction",
"Customize tokens and components",
"Design visually on canvas",
"Export production-ready code",
] as const;

function getStatusVariant(status: string): "neutral" | "success" | "warning" | "info" {
if (status.includes("Ready")) {
return "success";
}

if (status === "Next") {
return "info";
}

return "neutral";
}

export default function HomePage() {
return (
<main className="min-h-screen overflow-hidden bg-[radial-gradient(circle_at_top_left,rgba(99,102,241,0.22),transparent_34%),radial-gradient(circle_at_top_right,rgba(236,72,153,0.18),transparent_28%),linear-gradient(180deg,#f8fafc_0%,#eef2ff_45%,#f8fafc_100%)] text-slate-950 dark:bg-[radial-gradient(circle_at_top_left,rgba(129,140,248,0.18),transparent_34%),radial-gradient(circle_at_top_right,rgba(236,72,153,0.14),transparent_28%),linear-gradient(180deg,#020617_0%,#0f172a_48%,#020617_100%)] dark:text-white">
Expand All @@ -66,7 +34,7 @@ export default function HomePage() {
<div>
<p className="text-sm font-black tracking-tight">RainbowCode</p>
<p className="text-xs text-slate-500 dark:text-slate-400">
Global design-to-code studio
Design-to-code workspace
</p>
</div>
</Link>
Expand All @@ -78,9 +46,6 @@ export default function HomePage() {
<a href="#studios" className="hover:text-slate-950 dark:hover:text-white">
Studios
</a>
<a href="#code" className="hover:text-slate-950 dark:hover:text-white">
Code
</a>
</nav>

<Link href="/studio">
Expand All @@ -91,25 +56,24 @@ export default function HomePage() {
<section className="mx-auto grid max-w-7xl gap-10 px-5 pb-16 pt-10 sm:px-6 lg:grid-cols-[minmax(0,1fr)_520px] lg:px-8 lg:pb-24 lg:pt-16">
<div className="flex flex-col justify-center">
<div className="flex flex-wrap gap-2">
<RbcBadge variant="info">Founder Build</RbcBadge>
<RbcBadge variant="success">Canvas V1 Ready</RbcBadge>
<RbcBadge variant="neutral">Next.js + Tailwind Export</RbcBadge>
<RbcBadge variant="info">Production workspace</RbcBadge>
<RbcBadge variant="neutral">Local-first state</RbcBadge>
</div>

<h1 className="mt-6 max-w-4xl text-5xl font-black tracking-[-0.06em] text-slate-950 dark:text-white sm:text-7xl">
Design visually. Generate production-ready code.
Build the design system and the codebase together.
</h1>

<p className="mt-6 max-w-2xl text-base leading-8 text-slate-600 dark:text-slate-300 sm:text-lg">
RainbowCode is a global design-to-code platform where teams create
brand systems, themes, components, visual layouts, and export clean
code through the studio and future RBC CLI.
RainbowCode brings brand, theme, components, canvas layouts, and
generated artifacts into one studio so the visual system and the
exported code stay in sync.
</p>

<div className="mt-8 flex flex-wrap gap-3">
<Link href="/studio">
<RbcButton variant="primary" className="min-h-12 px-6">
Start Building
Open Workspace
</RbcButton>
</Link>

Expand All @@ -119,24 +83,6 @@ export default function HomePage() {
</RbcButton>
</a>
</div>

<div className="mt-10 grid gap-3 sm:grid-cols-3">
{[
["5", "Studios"],
["V1", "Canvas Engine"],
["100%", "Typed Foundation"],
].map(([value, label]) => (
<div
key={label}
className="rounded-3xl border border-white/70 bg-white/70 p-4 shadow-sm backdrop-blur-xl dark:border-white/10 dark:bg-slate-950/60"
>
<p className="text-3xl font-black tracking-tight">{value}</p>
<p className="mt-1 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">
{label}
</p>
</div>
))}
</div>
</div>

<div className="relative">
Expand All @@ -151,7 +97,7 @@ export default function HomePage() {
</div>

<span className="text-xs font-semibold text-slate-400">
rainbow-canvas.tsx
rainbowcode studio
</span>
</div>

Expand All @@ -162,20 +108,18 @@ export default function HomePage() {
</p>

<div className="mt-4 space-y-2">
{["Brand", "Theme", "Component", "Canvas", "Code"].map(
(item) => (
<div
key={item}
className={`rounded-2xl border px-3 py-2 text-sm ${
item === "Canvas"
? "border-indigo-400/50 bg-indigo-500/20 text-white"
: "border-white/10 text-slate-400"
}`}
>
{item}
</div>
),
)}
{studioNavItems.slice(1).map((item, index) => (
<div
key={item.href}
className={`rounded-2xl border px-3 py-2 text-sm ${
index === 3
? "border-indigo-400/50 bg-indigo-500/20 text-white"
: "border-white/10 text-slate-400"
}`}
>
{item.label}
</div>
))}
</div>
</aside>

Expand All @@ -193,10 +137,10 @@ export default function HomePage() {
</div>

<pre className="mt-4 max-h-52 overflow-auto rounded-[24px] border border-white/10 bg-black/40 p-4 text-xs leading-6 text-slate-200">
<code>{`export function Hero() {
<code>{`export function RainbowCanvas() {
return (
<section className="rounded-3xl bg-indigo-600">
<h1>Build beautiful interfaces faster</h1>
<section className="rounded-3xl bg-[var(--color-primary)]">
<h1>Design system workspace</h1>
</section>
);
}`}</code>
Expand All @@ -214,27 +158,26 @@ export default function HomePage() {
<div className="max-w-2xl">
<RbcBadge variant="info">Workflow</RbcBadge>
<h2 className="mt-4 text-3xl font-black tracking-tight text-slate-950 dark:text-white sm:text-5xl">
One pipeline from idea to installable UI.
One workspace from visual system to export.
</h2>
</div>

<div className="mt-10 grid gap-4 md:grid-cols-4">
{workflow.map((item, index) => (
<div
key={item}
key={item.title}
className="rounded-[30px] border border-white/70 bg-white/72 p-5 shadow-sm backdrop-blur-xl dark:border-white/10 dark:bg-slate-950/60"
>
<span className="grid size-10 place-items-center rounded-2xl bg-slate-950 text-sm font-black text-white dark:bg-white dark:text-slate-950">
{index + 1}
</span>

<h3 className="mt-5 text-base font-black text-slate-950 dark:text-white">
{item}
{item.title}
</h3>

<p className="mt-2 text-sm leading-6 text-slate-500">
Each step updates preview, tokens, exports, and future project
install paths.
{item.description}
</p>
</div>
))}
Expand All @@ -249,7 +192,7 @@ export default function HomePage() {
<div>
<RbcBadge variant="success">Studios</RbcBadge>
<h2 className="mt-4 text-3xl font-black tracking-tight text-slate-950 dark:text-white sm:text-5xl">
Built as a platform, not a toy editor.
Each product area maps to a real route in the app.
</h2>
</div>

Expand All @@ -258,98 +201,23 @@ export default function HomePage() {
</Link>
</div>

<div className="mt-10 grid gap-4 lg:grid-cols-5">
{studios.map((studio) => (
<div className="mt-10 grid gap-4 lg:grid-cols-3">
{studioNavItems.map((studio) => (
<article
key={studio.name}
key={studio.href}
className="rounded-[30px] border border-white/70 bg-white/72 p-5 shadow-sm backdrop-blur-xl transition hover:-translate-y-1 hover:shadow-xl dark:border-white/10 dark:bg-slate-950/60"
>
<RbcBadge variant={getStatusVariant(studio.status)}>
{studio.status}
<RbcBadge variant={studio.studio === "overview" ? "neutral" : "info"}>
{studio.label}
</RbcBadge>

<h3 className="mt-5 text-lg font-black text-slate-950 dark:text-white">
{studio.name}
</h3>

<p className="mt-3 text-sm leading-6 text-slate-500">
<p className="mt-4 text-sm leading-6 text-slate-500">
{studio.description}
</p>
</article>
))}
</div>
</section>

<section
id="code"
className="mx-auto max-w-7xl px-5 py-16 sm:px-6 lg:px-8"
>
<div className="overflow-hidden rounded-[40px] border border-white/70 bg-slate-950 shadow-[0_34px_120px_rgba(15,23,42,0.26)] dark:border-white/10">
<div className="grid gap-0 lg:grid-cols-[minmax(0,0.9fr)_minmax(0,1fr)]">
<div className="p-8 sm:p-10">
<RbcBadge variant="info">Code Studio</RbcBadge>

<h2 className="mt-5 text-3xl font-black tracking-tight text-white sm:text-5xl">
Export code your repo can actually use.
</h2>

<p className="mt-5 text-sm leading-7 text-slate-400 sm:text-base">
RainbowCode is being built with strict TypeScript, Next.js,
Tailwind, theme tokens, generated TSX, JSON import/export, and a
future RBC CLI installation workflow.
</p>

<div className="mt-8 flex flex-wrap gap-3">
<Link href="/studio">
<RbcButton variant="primary">Try Canvas Studio</RbcButton>
</Link>
</div>
</div>

<pre className="min-h-[360px] overflow-auto border-t border-white/10 bg-black/40 p-8 text-sm leading-7 text-slate-200 lg:border-l lg:border-t-0">
<code>{`npx rbc init

rbc add component button
rbc install theme neon-saas
rbc export canvas --format tsx

// Generated from visual design
export const theme = {
colors: {
primary: "#4f46e5",
background: "#ffffff"
},
radius: {
lg: "1rem"
}
};`}</code>
</pre>
</div>
</div>
</section>

<section className="mx-auto max-w-7xl px-5 py-16 sm:px-6 lg:px-8">
<div className="rounded-[40px] border border-white/70 bg-white/78 p-8 text-center shadow-[0_34px_120px_rgba(15,23,42,0.12)] backdrop-blur-xl dark:border-white/10 dark:bg-slate-950/70 sm:p-12">
<RbcBadge variant="success">Founder Standard</RbcBadge>

<h2 className="mx-auto mt-5 max-w-3xl text-3xl font-black tracking-tight text-slate-950 dark:text-white sm:text-5xl">
Start with Canvas. Build toward a full design system platform.
</h2>

<p className="mx-auto mt-5 max-w-2xl text-sm leading-7 text-slate-600 dark:text-slate-400 sm:text-base">
RainbowCode is moving step-by-step from working engine to
production-grade global startup product.
</p>

<div className="mt-8">
<Link href="/studio">
<RbcButton variant="primary" className="min-h-12 px-6">
Open RainbowCode Studio
</RbcButton>
</Link>
</div>
</div>
</section>
</main>
);
}
}
38 changes: 0 additions & 38 deletions apps/web/src/components/app-shell/code-panel.tsx
View file
Open in desktop

This file was deleted.

Loading
Loading