Setup website

README.md

@@ -105,6 +105,7 @@ restman/
 │   ├── components/     # React UI components
 │   ├── *-storage.ts    # Data persistence modules
 │   └── *.ts            # Core utilities (HTTP, variables, tokens)
+├── website/            # Project website and landing page
 ├── docs/               # Documentation
 ├── media/              # Screenshots and assets
 ├── scripts/            # Build and utility scripts

package.json

@@ -5,16 +5,21 @@
   "description": "A powerful REST API client TUI built with Bun",
   "license": "MIT",
   "author": "cadamsdev",
+  "workspaces": [
+    "website"
+  ],
   "type": "module",
   "scripts": {
     "dev": "bun run ./index.tsx",
+    "dev:website": "bun --filter website dev",
     "start": "bun run ./index.tsx",
     "changeset": "changeset",
     "build:linux-x64": "bun run scripts/build-target.ts linux-x64",
     "build:linux-arm64": "bun run scripts/build-target.ts linux-arm64",
     "build:windows-x64": "bun run scripts/build-target.ts windows-x64",
     "build:darwin-arm64": "bun run scripts/build-target.ts darwin-arm64",
     "build": "bun build index.tsx --compile --outfile dist/restman",
+    "build:website": "bun --filter website generate",
     "fmt": "oxfmt",
     "fmt:check": "oxfmt --check",
     "lint": "oxlint --type-aware --type-check",

website/.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

website/app/app.vue

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <NuxtPage />
+  </div>
+</template>
+
+<style>
+@import '~/assets/css/main.css';
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 var(--spacing-md);
+}
+
+.gradient-text {
+  background: var(--gradient-primary);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+@media (max-width: 768px) {
+  .container {
+    padding: 0 var(--spacing-sm);
+  }
+}
+</style>

website/app/assets/css/main.css

@@ -0,0 +1,20 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
+@import './tokens.css';
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: var(--font-family-base);
+  background: var(--gradient-background);
+  color: var(--color-text-default);
+  min-height: 100vh;
+}
+
+code,
+pre {
+  font-family: var(--font-family-mono);
+}

website/app/assets/css/tokens.css

@@ -0,0 +1,106 @@
+/**
+ * Design tokens for the RestMan website
+ * Matches the TUI theme defined in src/tokens.ts
+ */
+
+:root {
+  /* Primary colors */
+  --color-primary: #cc8844;
+  --color-secondary: #bb7733;
+
+  /* Text colors */
+  --color-text-active: #ffffff;
+  --color-text-default: #e0e0e0;
+  --color-text-muted: #b0b0b0;
+  --color-text-placeholder: #808080;
+  --color-text-dim: #666666;
+
+  /* Border colors */
+  --color-border-default: #555555;
+  --color-border-light: rgba(255, 255, 255, 0.1);
+  --color-border-lighter: rgba(255, 255, 255, 0.2);
+
+  /* Background colors */
+  --color-bg-default: #1a1a1a;
+  --color-bg-dark: #222018;
+  --color-bg-darker: #2a2520;
+  --color-bg-card: rgba(255, 255, 255, 0.05);
+  --color-bg-nav: rgba(0, 0, 0, 0.3);
+  --color-bg-overlay: rgba(0, 0, 0, 0.2);
+
+  /* Terminal button colors */
+  --color-terminal-red: #ff5f56;
+  --color-terminal-yellow: #ffbd2e;
+  --color-terminal-green: #27c93f;
+
+  /* Code colors - matching RestMan TUI theme */
+  --color-code-prompt: #cc8844; /* Primary orange for prompts */
+  --color-code-output: #bb7733; /* Secondary brown-orange for output */
+  --color-code-text: #999999; /* Muted gray for text */
+
+  /* Accent colors */
+  --color-accent-yellow: #f1fa8c;
+
+  /* Gradients */
+  --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
+  --gradient-background: linear-gradient(135deg, #1a1a1a 0%, #2a2520 50%, #1a1a1a 100%);
+
+  /* Opacity values */
+  --opacity-primary-10: rgba(204, 136, 68, 0.1);
+  --opacity-primary-20: rgba(204, 136, 68, 0.2);
+  --opacity-primary-30: rgba(204, 136, 68, 0.3);
+  --opacity-primary-50: rgba(204, 136, 68, 0.5);
+
+  /* Shadows */
+  --shadow-primary-sm: 0 10px 25px var(--opacity-primary-30);
+  --shadow-primary-md: 0 10px 40px var(--opacity-primary-20);
+  --shadow-default: 0 10px 30px rgba(0, 0, 0, 0.3);
+  --shadow-terminal: 0 20px 60px rgba(0, 0, 0, 0.5);
+
+  /* Border radius */
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-full: 50%;
+
+  /* Spacing */
+  --spacing-xs: 0.5rem;
+  --spacing-sm: 1rem;
+  --spacing-md: 1.5rem;
+  --spacing-lg: 2rem;
+  --spacing-xl: 3rem;
+  --spacing-2xl: 4rem;
+  --spacing-3xl: 6rem;
+
+  /* Typography */
+  --font-family-base: 'Inter', sans-serif;
+  --font-family-mono: 'JetBrains Mono', monospace;
+
+  --font-size-xs: 0.9rem;
+  --font-size-sm: 0.95rem;
+  --font-size-base: 1rem;
+  --font-size-md: 1.125rem;
+  --font-size-lg: 1.25rem;
+  --font-size-xl: 1.5rem;
+  --font-size-2xl: 2rem;
+  --font-size-3xl: 2.5rem;
+  --font-size-4xl: 3.5rem;
+
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
+
+  --line-height-tight: 1.2;
+  --line-height-base: 1.5;
+  --line-height-relaxed: 1.6;
+  --line-height-loose: 1.8;
+
+  /* Transitions */
+  --transition-fast: 0.2s ease;
+  --transition-base: 0.3s ease;
+  --transition-slow: 0.5s ease;
+}

website/app/components/TerminalDemo.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="terminal-window">
+    <img src="/images/preview.png" alt="RestMan Terminal Interface Preview" class="preview-image" />
+  </div>
+</template>
+
+<style scoped>
+.terminal-window {
+  animation: slideInRight 0.6s ease-out;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+  background: var(--color-bg-dark);
+  border: 1px solid var(--color-border-light);
+}
+
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.preview-image {
+  width: 100%;
+  height: auto;
+  display: block;
+  border-radius: 8px;
+}
+
+/* Terminal component styles (for potential future use) */
+.terminal-header {
+  background: var(--color-bg-darker);
+  padding: 0.75rem var(--spacing-sm);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+
+.terminal-button {
+  width: 12px;
+  height: 12px;
+  border-radius: var(--radius-full);
+}
+
+.terminal-button.red {
+  background: var(--color-terminal-red);
+}
+
+.terminal-button.yellow {
+  background: var(--color-terminal-yellow);
+}
+
+.terminal-button.green {
+  background: var(--color-terminal-green);
+}
+
+.terminal-body {
+  padding: var(--spacing-md);
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-xs);
+  line-height: var(--line-height-relaxed);
+  color: var(--color-code-text);
+}
+
+.terminal-prompt {
+  color: var(--color-code-prompt);
+}
+
+.terminal-command {
+  color: var(--color-text-default);
+}
+
+.terminal-output {
+  color: var(--color-code-output);
+}
+</style>