chore: Add rebrand assets, implementation guide, and gitignore local settings
Adds brand-assets/ (SVGs, brand guide) and REBRAND-IMPLEMENTATION-GUIDE.md as reference docs. Removes .claude/settings.local.json from tracking (contains local permissions and tokens). Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
@@ -1,28 +0,0 @@
|
|||||||
{
|
|
||||||
"permissions": {
|
|
||||||
"allow": [
|
|
||||||
"Bash(tasklist:*)",
|
|
||||||
"Bash(findstr:*)",
|
|
||||||
"Bash(powershell -Command:*)",
|
|
||||||
"Bash(timeout:*)",
|
|
||||||
"Bash(netstat:*)",
|
|
||||||
"mcp__postgres__query",
|
|
||||||
"Bash(curl:*)",
|
|
||||||
"Bash(TOKEN=\"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiI0MjdjMDI1Ni00N2VmLTRiODAtYjZjNS1iODE5MDAyMzdhMjkiLCJleHAiOjE3Njk1NjA4NTgsInR5cGUiOiJhY2Nlc3MifQ.7eBGz7awT6BOPbfNv303zm4ERQBeUOGHLRPgQMgwchM\")",
|
|
||||||
"Bash(git add:*)",
|
|
||||||
"Bash(git commit:*)",
|
|
||||||
"Bash(git push:*)",
|
|
||||||
"Bash(dir /b \"C:\\\\Dev\\\\Projects\\\\patherly\")",
|
|
||||||
"Bash(npm create:*)",
|
|
||||||
"Bash(npm install:*)",
|
|
||||||
"Bash(npx tailwindcss:*)",
|
|
||||||
"Bash(node node_modules/tailwindcss/lib/cli.js:*)",
|
|
||||||
"Bash(npm exec:*)",
|
|
||||||
"Bash(npm uninstall:*)",
|
|
||||||
"Bash(npm run build:*)",
|
|
||||||
"Bash(npx tsc:*)",
|
|
||||||
"Bash(npm run type-check:*)",
|
|
||||||
"Bash(dir /b frontendsrccomponentssession frontendsrchooks)"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
3
.gitignore
vendored
3
.gitignore
vendored
@@ -206,6 +206,9 @@ marimo/_static/
|
|||||||
marimo/_lsp/
|
marimo/_lsp/
|
||||||
__marimo__/
|
__marimo__/
|
||||||
|
|
||||||
|
# Claude Code (local settings with permissions/tokens)
|
||||||
|
.claude/settings.local.json
|
||||||
|
|
||||||
# Railway CLI (local tooling)
|
# Railway CLI (local tooling)
|
||||||
node_modules/
|
node_modules/
|
||||||
package.json
|
package.json
|
||||||
|
|||||||
785
REBRAND-IMPLEMENTATION-GUIDE.md
Normal file
785
REBRAND-IMPLEMENTATION-GUIDE.md
Normal file
@@ -0,0 +1,785 @@
|
|||||||
|
# 🎨 ResolutionFlow Brand Rebuild - Implementation Guide
|
||||||
|
|
||||||
|
## 📋 Pre-Implementation Checklist
|
||||||
|
|
||||||
|
**Before starting, complete these safety steps:**
|
||||||
|
|
||||||
|
```powershell
|
||||||
|
cd C:\Dev\Projects\patherly
|
||||||
|
git add .
|
||||||
|
git commit -m "Pre-rebrand checkpoint - Patherly working state"
|
||||||
|
git checkout -b rebrand-to-resolutionflow
|
||||||
|
```
|
||||||
|
|
||||||
|
**Copy brand assets:**
|
||||||
|
- Place all 8 SVG files in: `C:\Dev\Projects\patherly\brand-assets\`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎯 Project Context
|
||||||
|
|
||||||
|
**Current State:**
|
||||||
|
- React + TypeScript + Tailwind CSS project
|
||||||
|
- Location: `C:\Dev\Projects\patherly\frontend\`
|
||||||
|
- Using shadcn/ui components
|
||||||
|
- "Patherly" hardcoded in AppLayout.tsx and LoginPage.tsx
|
||||||
|
- Default shadcn color scheme (not branded)
|
||||||
|
- No custom logo/favicon
|
||||||
|
|
||||||
|
**Target State:**
|
||||||
|
- Complete ResolutionFlow branding
|
||||||
|
- Purple gradient theme (#818cf8 → #a78bfa)
|
||||||
|
- Dark mode optimized
|
||||||
|
- Custom fonts (Plus Jakarta Sans, Inter, Outfit)
|
||||||
|
- Professional logo in header and favicon
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📦 PHASE 1: Asset Deployment
|
||||||
|
|
||||||
|
### 1.1 Create Asset Directories
|
||||||
|
|
||||||
|
```bash
|
||||||
|
mkdir -p frontend/public/icons
|
||||||
|
mkdir -p frontend/src/assets/brand
|
||||||
|
```
|
||||||
|
|
||||||
|
### 1.2 Copy Brand Assets
|
||||||
|
|
||||||
|
Copy files from `C:\Dev\Projects\patherly\brand-assets\` to:
|
||||||
|
|
||||||
|
| Source File | Destination |
|
||||||
|
|------------|-------------|
|
||||||
|
| `favicon.svg` | `frontend/public/icons/favicon.svg` |
|
||||||
|
| `icon.svg` | `frontend/public/icons/icon.svg` |
|
||||||
|
| `app-icon-gradient.svg` | `frontend/public/icons/app-icon-gradient.svg` |
|
||||||
|
| `logo-horizontal.svg` | `frontend/src/assets/brand/logo-horizontal.svg` |
|
||||||
|
| `logo-with-tagline.svg` | `frontend/src/assets/brand/logo-with-tagline.svg` |
|
||||||
|
| `icon.svg` | `frontend/src/assets/brand/icon.svg` |
|
||||||
|
|
||||||
|
### 1.3 Update index.html
|
||||||
|
|
||||||
|
**File:** `frontend/index.html`
|
||||||
|
|
||||||
|
Replace the entire `<head>` section with:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/icons/favicon.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>ResolutionFlow - Decision Tree Platform</title>
|
||||||
|
<meta name="description" content="Transform troubleshooting into guided workflows with automatic documentation" />
|
||||||
|
|
||||||
|
<!-- Google Fonts -->
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600&family=Outfit:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- PWA Icons -->
|
||||||
|
<link rel="apple-touch-icon" href="/icons/app-icon-gradient.svg" />
|
||||||
|
<meta name="theme-color" content="#09090b" />
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Prevent flash of wrong theme on initial load
|
||||||
|
(function() {
|
||||||
|
try {
|
||||||
|
const stored = JSON.parse(localStorage.getItem('theme-storage') || '{}');
|
||||||
|
const theme = stored.state?.theme || 'system';
|
||||||
|
const isDark = theme === 'dark' ||
|
||||||
|
(theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
|
||||||
|
if (isDark) document.documentElement.classList.add('dark');
|
||||||
|
} catch (e) {}
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎨 PHASE 2: Tailwind Theme Configuration
|
||||||
|
|
||||||
|
### 2.1 Update Tailwind Config
|
||||||
|
|
||||||
|
**File:** `frontend/tailwind.config.js`
|
||||||
|
|
||||||
|
Replace the entire file with:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
export default {
|
||||||
|
darkMode: ["class"],
|
||||||
|
content: [
|
||||||
|
"./index.html",
|
||||||
|
"./src/**/*.{js,ts,jsx,tsx}",
|
||||||
|
],
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
// ResolutionFlow Brand Colors
|
||||||
|
brand: {
|
||||||
|
gradient: {
|
||||||
|
from: '#818cf8',
|
||||||
|
to: '#a78bfa',
|
||||||
|
},
|
||||||
|
dark: {
|
||||||
|
DEFAULT: '#09090b',
|
||||||
|
card: '#18181b',
|
||||||
|
surface: '#12121c',
|
||||||
|
},
|
||||||
|
text: {
|
||||||
|
primary: '#ffffff',
|
||||||
|
secondary: '#a1a1aa',
|
||||||
|
muted: '#52525b',
|
||||||
|
},
|
||||||
|
border: '#27272a',
|
||||||
|
},
|
||||||
|
// shadcn/ui color system
|
||||||
|
border: "hsl(var(--border))",
|
||||||
|
input: "hsl(var(--input))",
|
||||||
|
ring: "hsl(var(--ring))",
|
||||||
|
background: "hsl(var(--background))",
|
||||||
|
foreground: "hsl(var(--foreground))",
|
||||||
|
primary: {
|
||||||
|
DEFAULT: "hsl(var(--primary))",
|
||||||
|
foreground: "hsl(var(--primary-foreground))",
|
||||||
|
},
|
||||||
|
secondary: {
|
||||||
|
DEFAULT: "hsl(var(--secondary))",
|
||||||
|
foreground: "hsl(var(--secondary-foreground))",
|
||||||
|
},
|
||||||
|
destructive: {
|
||||||
|
DEFAULT: "hsl(var(--destructive))",
|
||||||
|
foreground: "hsl(var(--destructive-foreground))",
|
||||||
|
},
|
||||||
|
muted: {
|
||||||
|
DEFAULT: "hsl(var(--muted))",
|
||||||
|
foreground: "hsl(var(--muted-foreground))",
|
||||||
|
},
|
||||||
|
accent: {
|
||||||
|
DEFAULT: "hsl(var(--accent))",
|
||||||
|
foreground: "hsl(var(--accent-foreground))",
|
||||||
|
},
|
||||||
|
popover: {
|
||||||
|
DEFAULT: "hsl(var(--popover))",
|
||||||
|
foreground: "hsl(var(--popover-foreground))",
|
||||||
|
},
|
||||||
|
card: {
|
||||||
|
DEFAULT: "hsl(var(--card))",
|
||||||
|
foreground: "hsl(var(--card-foreground))",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
borderRadius: {
|
||||||
|
lg: "var(--radius)",
|
||||||
|
md: "calc(var(--radius) - 2px)",
|
||||||
|
sm: "calc(var(--radius) - 4px)",
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Inter', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'],
|
||||||
|
heading: ['Plus Jakarta Sans', 'system-ui', 'sans-serif'],
|
||||||
|
label: ['Outfit', 'system-ui', 'sans-serif'],
|
||||||
|
},
|
||||||
|
backgroundImage: {
|
||||||
|
'gradient-brand': 'linear-gradient(90deg, #818cf8 0%, #a78bfa 100%)',
|
||||||
|
'gradient-brand-hover': 'linear-gradient(90deg, #6366f1 0%, #9333ea 100%)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎨 PHASE 3: Global Styles
|
||||||
|
|
||||||
|
### 3.1 Update Global CSS
|
||||||
|
|
||||||
|
**File:** `frontend/src/index.css`
|
||||||
|
|
||||||
|
Replace the entire file with:
|
||||||
|
|
||||||
|
```css
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
:root {
|
||||||
|
/* Light mode (fallback) */
|
||||||
|
--background: 0 0% 100%;
|
||||||
|
--foreground: 222.2 84% 4.9%;
|
||||||
|
--card: 0 0% 100%;
|
||||||
|
--card-foreground: 222.2 84% 4.9%;
|
||||||
|
--popover: 0 0% 100%;
|
||||||
|
--popover-foreground: 222.2 84% 4.9%;
|
||||||
|
--primary: 243 75% 59%;
|
||||||
|
--primary-foreground: 210 40% 98%;
|
||||||
|
--secondary: 210 40% 96.1%;
|
||||||
|
--secondary-foreground: 222.2 47.4% 11.2%;
|
||||||
|
--muted: 210 40% 96.1%;
|
||||||
|
--muted-foreground: 215.4 16.3% 46.9%;
|
||||||
|
--accent: 210 40% 96.1%;
|
||||||
|
--accent-foreground: 222.2 47.4% 11.2%;
|
||||||
|
--destructive: 0 84.2% 60.2%;
|
||||||
|
--destructive-foreground: 210 40% 98%;
|
||||||
|
--border: 214.3 31.8% 91.4%;
|
||||||
|
--input: 214.3 31.8% 91.4%;
|
||||||
|
--ring: 243 75% 59%;
|
||||||
|
--radius: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark {
|
||||||
|
/* ResolutionFlow Dark Theme */
|
||||||
|
--background: 240 10% 3.9%;
|
||||||
|
--foreground: 0 0% 100%;
|
||||||
|
--card: 240 10% 9.4%;
|
||||||
|
--card-foreground: 0 0% 100%;
|
||||||
|
--popover: 240 10% 9.4%;
|
||||||
|
--popover-foreground: 0 0% 100%;
|
||||||
|
--primary: 243 75% 59%;
|
||||||
|
--primary-foreground: 0 0% 100%;
|
||||||
|
--secondary: 240 5.9% 15%;
|
||||||
|
--secondary-foreground: 0 0% 100%;
|
||||||
|
--muted: 240 5.9% 15%;
|
||||||
|
--muted-foreground: 240 5% 64.9%;
|
||||||
|
--accent: 240 5.9% 15%;
|
||||||
|
--accent-foreground: 0 0% 100%;
|
||||||
|
--destructive: 0 62.8% 30.6%;
|
||||||
|
--destructive-foreground: 0 0% 100%;
|
||||||
|
--border: 240 5.9% 15%;
|
||||||
|
--input: 240 5.9% 15%;
|
||||||
|
--ring: 243 75% 59%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
* {
|
||||||
|
@apply border-border;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
@apply bg-background text-foreground;
|
||||||
|
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer utilities {
|
||||||
|
.text-gradient-brand {
|
||||||
|
@apply bg-gradient-brand bg-clip-text text-transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🔧 PHASE 4: Component Updates
|
||||||
|
|
||||||
|
### 4.1 Update AppLayout Component
|
||||||
|
|
||||||
|
**File:** `frontend/src/components/layout/AppLayout.tsx`
|
||||||
|
|
||||||
|
Replace the entire file with:
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
import { Link, useLocation, useNavigate, Outlet } from 'react-router-dom'
|
||||||
|
import { useAuthStore } from '@/store/authStore'
|
||||||
|
import { ThemeToggle } from '@/components/common/ThemeToggle'
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
export function AppLayout() {
|
||||||
|
const location = useLocation()
|
||||||
|
const navigate = useNavigate()
|
||||||
|
const { user, logout } = useAuthStore()
|
||||||
|
|
||||||
|
const handleLogout = async () => {
|
||||||
|
await logout()
|
||||||
|
navigate('/login')
|
||||||
|
}
|
||||||
|
|
||||||
|
const navItems = [
|
||||||
|
{ path: '/trees', label: 'Trees' },
|
||||||
|
{ path: '/sessions', label: 'Sessions' },
|
||||||
|
{ path: '/settings', label: 'Settings' },
|
||||||
|
]
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-background">
|
||||||
|
{/* Header */}
|
||||||
|
<header className="sticky top-0 z-50 border-b border-border bg-card backdrop-blur-sm">
|
||||||
|
<div className="container mx-auto flex h-16 items-center justify-between px-4">
|
||||||
|
<div className="flex items-center gap-8">
|
||||||
|
<Link to="/trees" className="flex items-center gap-2">
|
||||||
|
{/* Logo */}
|
||||||
|
<svg viewBox="0 0 40 40" fill="none" className="h-8 w-8">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="logo-grad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||||
|
<stop offset="0%" stopColor="#818cf8"/>
|
||||||
|
<stop offset="100%" stopColor="#a78bfa"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<circle cx="5" cy="7" r="2.5" fill="url(#logo-grad)" opacity="0.35"/>
|
||||||
|
<circle cx="5" cy="15" r="2.75" fill="url(#logo-grad)" opacity="0.5"/>
|
||||||
|
<circle cx="5" cy="25" r="2.75" fill="url(#logo-grad)" opacity="0.5"/>
|
||||||
|
<circle cx="5" cy="33" r="2.5" fill="url(#logo-grad)" opacity="0.35"/>
|
||||||
|
<path d="M7.5 7L14 17" stroke="url(#logo-grad)" strokeWidth="1" strokeLinecap="round" strokeDasharray="1 1.5" opacity="0.45"/>
|
||||||
|
<path d="M7.75 15L14 19" stroke="url(#logo-grad)" strokeWidth="1" strokeLinecap="round" opacity="0.6"/>
|
||||||
|
<path d="M7.75 25L14 21" stroke="url(#logo-grad)" strokeWidth="1" strokeLinecap="round" opacity="0.6"/>
|
||||||
|
<path d="M7.5 33L14 23" stroke="url(#logo-grad)" strokeWidth="1" strokeLinecap="round" strokeDasharray="1 1.5" opacity="0.45"/>
|
||||||
|
<circle cx="18" cy="20" r="5" fill="url(#logo-grad)" opacity="0.15"/>
|
||||||
|
<circle cx="18" cy="20" r="3.5" fill="url(#logo-grad)"/>
|
||||||
|
<path d="M21.5 20H35M35 20L30 15M35 20L30 25" stroke="url(#logo-grad)" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
{/* Wordmark */}
|
||||||
|
<span className="font-heading text-xl font-bold">
|
||||||
|
<span className="text-foreground">Resolution</span>
|
||||||
|
<span className="text-gradient-brand">Flow</span>
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<nav className="hidden items-center gap-1 sm:flex">
|
||||||
|
{navItems.map((item) => (
|
||||||
|
<Link
|
||||||
|
key={item.path}
|
||||||
|
to={item.path}
|
||||||
|
className={cn(
|
||||||
|
'rounded-md px-3 py-2 text-sm font-medium transition-colors',
|
||||||
|
location.pathname.startsWith(item.path)
|
||||||
|
? 'bg-accent text-accent-foreground'
|
||||||
|
: 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{item.label}
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<span className="hidden text-sm text-muted-foreground sm:block">
|
||||||
|
{user?.name || user?.email}
|
||||||
|
</span>
|
||||||
|
<ThemeToggle />
|
||||||
|
<button
|
||||||
|
onClick={handleLogout}
|
||||||
|
className={cn(
|
||||||
|
'rounded-md px-3 py-1.5 text-sm font-medium',
|
||||||
|
'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
Logout
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{/* Main Content */}
|
||||||
|
<main>
|
||||||
|
<Outlet />
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AppLayout
|
||||||
|
```
|
||||||
|
|
||||||
|
### 4.2 Update LoginPage Component
|
||||||
|
|
||||||
|
**File:** `frontend/src/pages/LoginPage.tsx`
|
||||||
|
|
||||||
|
Replace the entire file with:
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
import { useState } from 'react'
|
||||||
|
import { Link, useNavigate, useLocation } from 'react-router-dom'
|
||||||
|
import { useAuthStore } from '@/store/authStore'
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
export function LoginPage() {
|
||||||
|
const navigate = useNavigate()
|
||||||
|
const location = useLocation()
|
||||||
|
const { login, isLoading, error, clearError } = useAuthStore()
|
||||||
|
|
||||||
|
const [email, setEmail] = useState('')
|
||||||
|
const [password, setPassword] = useState('')
|
||||||
|
const [localError, setLocalError] = useState('')
|
||||||
|
|
||||||
|
const from = (location.state as { from?: { pathname: string } })?.from?.pathname || '/trees'
|
||||||
|
|
||||||
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault()
|
||||||
|
setLocalError('')
|
||||||
|
clearError()
|
||||||
|
|
||||||
|
if (!email || !password) {
|
||||||
|
setLocalError('Please enter both email and password')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
await login({ email, password })
|
||||||
|
navigate(from, { replace: true })
|
||||||
|
} catch {
|
||||||
|
// Error is set in the store
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex min-h-screen items-center justify-center bg-background px-4">
|
||||||
|
<div className="w-full max-w-md space-y-8">
|
||||||
|
{/* Header with Logo */}
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="mb-6 flex justify-center">
|
||||||
|
<svg viewBox="0 0 80 80" fill="none" className="h-20 w-20">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="login-logo-grad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||||
|
<stop offset="0%" stopColor="#818cf8"/>
|
||||||
|
<stop offset="100%" stopColor="#a78bfa"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<circle cx="10" cy="14" r="5" fill="url(#login-logo-grad)" opacity="0.35"/>
|
||||||
|
<circle cx="10" cy="30" r="5.5" fill="url(#login-logo-grad)" opacity="0.5"/>
|
||||||
|
<circle cx="10" cy="50" r="5.5" fill="url(#login-logo-grad)" opacity="0.5"/>
|
||||||
|
<circle cx="10" cy="66" r="5" fill="url(#login-logo-grad)" opacity="0.35"/>
|
||||||
|
<path d="M15 14L28 34" stroke="url(#login-logo-grad)" strokeWidth="2" strokeLinecap="round" strokeDasharray="2 3" opacity="0.45"/>
|
||||||
|
<path d="M15.5 30L28 38" stroke="url(#login-logo-grad)" strokeWidth="2" strokeLinecap="round" opacity="0.6"/>
|
||||||
|
<path d="M15.5 50L28 42" stroke="url(#login-logo-grad)" strokeWidth="2" strokeLinecap="round" opacity="0.6"/>
|
||||||
|
<path d="M15 66L28 46" stroke="url(#login-logo-grad)" strokeWidth="2" strokeLinecap="round" strokeDasharray="2 3" opacity="0.45"/>
|
||||||
|
<circle cx="36" cy="40" r="10" fill="url(#login-logo-grad)" opacity="0.15"/>
|
||||||
|
<circle cx="36" cy="40" r="7" fill="url(#login-logo-grad)"/>
|
||||||
|
<path d="M43 40H70M70 40L60 30M70 40L60 50" stroke="url(#login-logo-grad)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 className="font-heading text-3xl font-bold tracking-tight">
|
||||||
|
<span className="text-foreground">Resolution</span>
|
||||||
|
<span className="text-gradient-brand">Flow</span>
|
||||||
|
</h1>
|
||||||
|
<p className="mt-3 text-lg text-gradient-brand font-medium">
|
||||||
|
Decision Tree Platform
|
||||||
|
</p>
|
||||||
|
<p className="mt-2 text-sm text-muted-foreground">
|
||||||
|
Sign in to your account
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form onSubmit={handleSubmit} className="mt-8 space-y-6">
|
||||||
|
<div className="space-y-4 rounded-lg border border-border bg-card p-6 shadow-lg">
|
||||||
|
{(error || localError) && (
|
||||||
|
<div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive border border-destructive/20">
|
||||||
|
{localError || error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="email" className="block text-sm font-medium text-foreground mb-1">
|
||||||
|
Email address
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="email"
|
||||||
|
name="email"
|
||||||
|
type="email"
|
||||||
|
autoComplete="email"
|
||||||
|
required
|
||||||
|
value={email}
|
||||||
|
onChange={(e) => setEmail(e.target.value)}
|
||||||
|
className={cn(
|
||||||
|
'block w-full rounded-md border border-input bg-background px-3 py-2',
|
||||||
|
'text-foreground placeholder:text-muted-foreground',
|
||||||
|
'focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20',
|
||||||
|
'transition-colors'
|
||||||
|
)}
|
||||||
|
placeholder="you@example.com"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="password" className="block text-sm font-medium text-foreground mb-1">
|
||||||
|
Password
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="password"
|
||||||
|
name="password"
|
||||||
|
type="password"
|
||||||
|
autoComplete="current-password"
|
||||||
|
required
|
||||||
|
value={password}
|
||||||
|
onChange={(e) => setPassword(e.target.value)}
|
||||||
|
className={cn(
|
||||||
|
'block w-full rounded-md border border-input bg-background px-3 py-2',
|
||||||
|
'text-foreground placeholder:text-muted-foreground',
|
||||||
|
'focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20',
|
||||||
|
'transition-colors'
|
||||||
|
)}
|
||||||
|
placeholder="••••••••••"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={isLoading}
|
||||||
|
className={cn(
|
||||||
|
'w-full rounded-md px-4 py-2.5 text-sm font-semibold text-white',
|
||||||
|
'bg-gradient-brand hover:bg-gradient-brand-hover',
|
||||||
|
'focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2',
|
||||||
|
'disabled:cursor-not-allowed disabled:opacity-50',
|
||||||
|
'transition-all shadow-lg shadow-primary/20'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{isLoading ? 'Signing in...' : 'Sign in'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-center text-sm text-muted-foreground">
|
||||||
|
Don't have an account?{' '}
|
||||||
|
<Link
|
||||||
|
to="/register"
|
||||||
|
className="font-medium text-gradient-brand hover:underline"
|
||||||
|
>
|
||||||
|
Register
|
||||||
|
</Link>
|
||||||
|
</p>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default LoginPage
|
||||||
|
```
|
||||||
|
|
||||||
|
### 4.3 Update RegisterPage Component
|
||||||
|
|
||||||
|
**File:** `frontend/src/pages/RegisterPage.tsx`
|
||||||
|
|
||||||
|
**Changes needed:**
|
||||||
|
1. Add the logo SVG before the title (same as LoginPage)
|
||||||
|
2. Update title to match ResolutionFlow branding
|
||||||
|
3. Update submit button to use gradient styling
|
||||||
|
|
||||||
|
**Find this section:**
|
||||||
|
```typescript
|
||||||
|
<div className="text-center">
|
||||||
|
<h1 className="text-3xl font-bold tracking-tight text-foreground">Patherly</h1>
|
||||||
|
<p className="mt-2 text-muted-foreground">Create your account</p>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
**Replace with:**
|
||||||
|
```typescript
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="mb-6 flex justify-center">
|
||||||
|
<svg viewBox="0 0 80 80" fill="none" className="h-20 w-20">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="register-logo-grad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||||
|
<stop offset="0%" stopColor="#818cf8"/>
|
||||||
|
<stop offset="100%" stopColor="#a78bfa"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<circle cx="10" cy="14" r="5" fill="url(#register-logo-grad)" opacity="0.35"/>
|
||||||
|
<circle cx="10" cy="30" r="5.5" fill="url(#register-logo-grad)" opacity="0.5"/>
|
||||||
|
<circle cx="10" cy="50" r="5.5" fill="url(#register-logo-grad)" opacity="0.5"/>
|
||||||
|
<circle cx="10" cy="66" r="5" fill="url(#register-logo-grad)" opacity="0.35"/>
|
||||||
|
<path d="M15 14L28 34" stroke="url(#register-logo-grad)" strokeWidth="2" strokeLinecap="round" strokeDasharray="2 3" opacity="0.45"/>
|
||||||
|
<path d="M15.5 30L28 38" stroke="url(#register-logo-grad)" strokeWidth="2" strokeLinecap="round" opacity="0.6"/>
|
||||||
|
<path d="M15.5 50L28 42" stroke="url(#register-logo-grad)" strokeWidth="2" strokeLinecap="round" opacity="0.6"/>
|
||||||
|
<path d="M15 66L28 46" stroke="url(#register-logo-grad)" strokeWidth="2" strokeLinecap="round" strokeDasharray="2 3" opacity="0.45"/>
|
||||||
|
<circle cx="36" cy="40" r="10" fill="url(#register-logo-grad)" opacity="0.15"/>
|
||||||
|
<circle cx="36" cy="40" r="7" fill="url(#register-logo-grad)"/>
|
||||||
|
<path d="M43 40H70M70 40L60 30M70 40L60 50" stroke="url(#register-logo-grad)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 className="font-heading text-3xl font-bold tracking-tight">
|
||||||
|
<span className="text-foreground">Resolution</span>
|
||||||
|
<span className="text-gradient-brand">Flow</span>
|
||||||
|
</h1>
|
||||||
|
<p className="mt-3 text-lg text-gradient-brand font-medium">
|
||||||
|
Decision Tree Platform
|
||||||
|
</p>
|
||||||
|
<p className="mt-2 text-sm text-muted-foreground">
|
||||||
|
Create your account
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
**Find the submit button:**
|
||||||
|
```typescript
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={isLoading}
|
||||||
|
className={cn(
|
||||||
|
'w-full rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground',
|
||||||
|
// ... rest of classes
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
```
|
||||||
|
|
||||||
|
**Replace with:**
|
||||||
|
```typescript
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={isLoading}
|
||||||
|
className={cn(
|
||||||
|
'w-full rounded-md px-4 py-2.5 text-sm font-semibold text-white',
|
||||||
|
'bg-gradient-brand hover:bg-gradient-brand-hover',
|
||||||
|
'focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2',
|
||||||
|
'disabled:cursor-not-allowed disabled:opacity-50',
|
||||||
|
'transition-all shadow-lg shadow-primary/20'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🔍 PHASE 5: Search and Replace
|
||||||
|
|
||||||
|
Search for any remaining "Patherly" references in the codebase:
|
||||||
|
|
||||||
|
**Command to find references:**
|
||||||
|
```powershell
|
||||||
|
cd frontend/src
|
||||||
|
Select-String -Path . -Pattern "Patherly" -Recurse
|
||||||
|
```
|
||||||
|
|
||||||
|
**Replace all instances with "ResolutionFlow"**
|
||||||
|
|
||||||
|
Common places to check:
|
||||||
|
- Page titles
|
||||||
|
- Comments
|
||||||
|
- Error messages
|
||||||
|
- API descriptions
|
||||||
|
- Console logs
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ✅ PHASE 6: Verification Checklist
|
||||||
|
|
||||||
|
### 6.1 Start Development Server
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd frontend
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
### 6.2 Visual Checks
|
||||||
|
|
||||||
|
- [ ] **Login Page**
|
||||||
|
- Logo displays correctly
|
||||||
|
- ResolutionFlow branding visible
|
||||||
|
- Purple gradient on submit button
|
||||||
|
- Fonts loaded (Plus Jakarta Sans for title)
|
||||||
|
|
||||||
|
- [ ] **Register Page**
|
||||||
|
- Matches login page styling
|
||||||
|
- Logo and branding consistent
|
||||||
|
|
||||||
|
- [ ] **App Header**
|
||||||
|
- Logo in navbar
|
||||||
|
- "ResolutionFlow" wordmark (Resolution + Flow gradient)
|
||||||
|
- Navigation items styled correctly
|
||||||
|
|
||||||
|
- [ ] **Browser Tab**
|
||||||
|
- New favicon visible
|
||||||
|
- Title shows "ResolutionFlow"
|
||||||
|
|
||||||
|
- [ ] **Theme Toggle**
|
||||||
|
- Dark mode works
|
||||||
|
- Colors look correct in both modes
|
||||||
|
- Purple gradients visible
|
||||||
|
|
||||||
|
- [ ] **Console**
|
||||||
|
- No errors in browser console
|
||||||
|
- Fonts loading successfully
|
||||||
|
|
||||||
|
### 6.3 Functionality Checks
|
||||||
|
|
||||||
|
- [ ] Login works
|
||||||
|
- [ ] Registration works
|
||||||
|
- [ ] Navigation works
|
||||||
|
- [ ] Theme toggle works
|
||||||
|
- [ ] All existing features preserved
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎉 Success Criteria
|
||||||
|
|
||||||
|
✅ New ResolutionFlow logo in header
|
||||||
|
✅ Purple gradient theme throughout
|
||||||
|
✅ Custom fonts loaded (Plus Jakarta Sans, Inter, Outfit)
|
||||||
|
✅ No "Patherly" references remaining
|
||||||
|
✅ Favicon updated in browser tab
|
||||||
|
✅ Login/Register pages fully branded
|
||||||
|
✅ Dark mode optimized
|
||||||
|
✅ All existing functionality preserved
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📝 Post-Implementation
|
||||||
|
|
||||||
|
### Commit Changes
|
||||||
|
|
||||||
|
```powershell
|
||||||
|
git add .
|
||||||
|
git commit -m "Complete rebrand to ResolutionFlow - new logo, colors, fonts, and branding"
|
||||||
|
git push origin rebrand-to-resolutionflow
|
||||||
|
```
|
||||||
|
|
||||||
|
### Create Pull Request
|
||||||
|
|
||||||
|
Review the changes and merge into main when ready.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🆘 Rollback Plan
|
||||||
|
|
||||||
|
If something goes wrong:
|
||||||
|
|
||||||
|
```powershell
|
||||||
|
git checkout main
|
||||||
|
git branch -D rebrand-to-resolutionflow
|
||||||
|
```
|
||||||
|
|
||||||
|
This will discard all changes and return to your pre-rebrand state.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📋 Known Issues & Solutions
|
||||||
|
|
||||||
|
### Issue: Fonts Not Loading
|
||||||
|
|
||||||
|
**Solution:** Clear browser cache and hard refresh (Ctrl+Shift+R)
|
||||||
|
|
||||||
|
### Issue: Logo Not Showing
|
||||||
|
|
||||||
|
**Solution:** Check that SVG files were copied to correct directories
|
||||||
|
|
||||||
|
### Issue: Gradient Not Visible
|
||||||
|
|
||||||
|
**Solution:** Verify Tailwind config was updated and dev server was restarted
|
||||||
|
|
||||||
|
### Issue: Dark Mode Colors Wrong
|
||||||
|
|
||||||
|
**Solution:** Check that index.css was fully replaced with new CSS variables
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🔗 Reference Files
|
||||||
|
|
||||||
|
- Brand Guide: `brand-assets/brand-guide.html`
|
||||||
|
- App Mockups: `brand-assets/app-mockups.html`
|
||||||
|
- Original Assets: `brand-assets/*.svg`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Last Updated:** February 2026
|
||||||
|
**Version:** 1.0
|
||||||
|
**Status:** Ready for Implementation
|
||||||
30
brand-assets/app-icon-dark.svg
Normal file
30
brand-assets/app-icon-dark.svg
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
<svg viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="app-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||||
|
<stop offset="0%" stop-color="#818cf8"/>
|
||||||
|
<stop offset="100%" stop-color="#a78bfa"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- Background -->
|
||||||
|
<rect width="512" height="512" rx="96" fill="#12121c"/>
|
||||||
|
|
||||||
|
<!-- Icon scaled and centered -->
|
||||||
|
<g transform="translate(96, 96) scale(4)">
|
||||||
|
<!-- Input circles -->
|
||||||
|
<circle cx="10" cy="14" r="5" fill="url(#app-gradient)" opacity="0.25"/>
|
||||||
|
<circle cx="10" cy="30" r="5.5" fill="url(#app-gradient)" opacity="0.4"/>
|
||||||
|
<circle cx="10" cy="50" r="5.5" fill="url(#app-gradient)" opacity="0.4"/>
|
||||||
|
<circle cx="10" cy="66" r="5" fill="url(#app-gradient)" opacity="0.25"/>
|
||||||
|
<!-- Connecting lines -->
|
||||||
|
<path d="M15 14L28 34" stroke="url(#app-gradient)" stroke-width="2" stroke-linecap="round" stroke-dasharray="2 3" opacity="0.35"/>
|
||||||
|
<path d="M15.5 30L28 38" stroke="url(#app-gradient)" stroke-width="2" stroke-linecap="round" opacity="0.5"/>
|
||||||
|
<path d="M15.5 50L28 42" stroke="url(#app-gradient)" stroke-width="2" stroke-linecap="round" opacity="0.5"/>
|
||||||
|
<path d="M15 66L28 46" stroke="url(#app-gradient)" stroke-width="2" stroke-linecap="round" stroke-dasharray="2 3" opacity="0.35"/>
|
||||||
|
<!-- Center node with glow -->
|
||||||
|
<circle cx="36" cy="40" r="10" fill="url(#app-gradient)" opacity="0.12"/>
|
||||||
|
<circle cx="36" cy="40" r="7" fill="url(#app-gradient)" opacity="0.9"/>
|
||||||
|
<!-- Arrow -->
|
||||||
|
<path d="M43 40H70M70 40L60 30M70 40L60 50" stroke="url(#app-gradient)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.6 KiB |
30
brand-assets/app-icon-gradient.svg
Normal file
30
brand-assets/app-icon-gradient.svg
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
<svg viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="bg-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" stop-color="#818cf8"/>
|
||||||
|
<stop offset="100%" stop-color="#a78bfa"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- Background -->
|
||||||
|
<rect width="512" height="512" rx="96" fill="url(#bg-gradient)"/>
|
||||||
|
|
||||||
|
<!-- Icon scaled and centered (white version) -->
|
||||||
|
<g transform="translate(96, 96) scale(4)">
|
||||||
|
<!-- Input circles -->
|
||||||
|
<circle cx="10" cy="14" r="5" fill="white" opacity="0.4"/>
|
||||||
|
<circle cx="10" cy="30" r="5.5" fill="white" opacity="0.55"/>
|
||||||
|
<circle cx="10" cy="50" r="5.5" fill="white" opacity="0.55"/>
|
||||||
|
<circle cx="10" cy="66" r="5" fill="white" opacity="0.4"/>
|
||||||
|
<!-- Connecting lines -->
|
||||||
|
<path d="M15 14L28 34" stroke="white" stroke-width="2" stroke-linecap="round" stroke-dasharray="2 3" opacity="0.5"/>
|
||||||
|
<path d="M15.5 30L28 38" stroke="white" stroke-width="2" stroke-linecap="round" opacity="0.65"/>
|
||||||
|
<path d="M15.5 50L28 42" stroke="white" stroke-width="2" stroke-linecap="round" opacity="0.65"/>
|
||||||
|
<path d="M15 66L28 46" stroke="white" stroke-width="2" stroke-linecap="round" stroke-dasharray="2 3" opacity="0.5"/>
|
||||||
|
<!-- Center node with glow -->
|
||||||
|
<circle cx="36" cy="40" r="10" fill="white" opacity="0.2"/>
|
||||||
|
<circle cx="36" cy="40" r="7" fill="white"/>
|
||||||
|
<!-- Arrow -->
|
||||||
|
<path d="M43 40H70M70 40L60 30M70 40L60 50" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
729
brand-assets/app-mockups.html
Normal file
729
brand-assets/app-mockups.html
Normal file
@@ -0,0 +1,729 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>ResolutionFlow - App Mockups</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
background: #09090b;
|
||||||
|
color: #fff;
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 60px 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-header h1 {
|
||||||
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 300;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-header p {
|
||||||
|
color: #52525b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mockups-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 80px;
|
||||||
|
max-width: 1400px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mockup-section {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mockup-label {
|
||||||
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.15em;
|
||||||
|
color: #818cf8;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Browser Bar */
|
||||||
|
.browser-bar {
|
||||||
|
background: #18181b;
|
||||||
|
padding: 12px 16px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
border-bottom: 1px solid #27272a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.browser-dots {
|
||||||
|
display: flex;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.browser-dots span {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #3f3f46;
|
||||||
|
}
|
||||||
|
|
||||||
|
.browser-url {
|
||||||
|
flex: 1;
|
||||||
|
background: #27272a;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 6px 12px;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: #71717a;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Login Screen Mockup */
|
||||||
|
.login-mockup {
|
||||||
|
background: linear-gradient(145deg, #0f0f18 0%, #12121c 100%);
|
||||||
|
border-radius: 24px;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px solid #27272a;
|
||||||
|
max-width: 1000px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-content {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
min-height: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-left {
|
||||||
|
background: linear-gradient(135deg, rgba(129, 140, 248, 0.1) 0%, rgba(167, 139, 250, 0.05) 100%);
|
||||||
|
padding: 60px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
border-right: 1px solid #27272a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-logo {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-logo svg {
|
||||||
|
width: 64px;
|
||||||
|
height: 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-logo h1 {
|
||||||
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: -0.03em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-logo .resolution {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-logo .flow {
|
||||||
|
background: linear-gradient(90deg, #818cf8, #a78bfa);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-tagline {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
background: linear-gradient(90deg, #818cf8, #a78bfa);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-features {
|
||||||
|
text-align: left;
|
||||||
|
color: #a1a1aa;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
line-height: 2;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-features li {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-features svg {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-right {
|
||||||
|
padding: 60px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-form-header {
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-form-header h2 {
|
||||||
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-form-header p {
|
||||||
|
color: #71717a;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group label {
|
||||||
|
display: block;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #a1a1aa;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group input {
|
||||||
|
width: 100%;
|
||||||
|
background: #18181b;
|
||||||
|
border: 1px solid #27272a;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 14px 16px;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
color: #fff;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group input::placeholder {
|
||||||
|
color: #52525b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-btn {
|
||||||
|
width: 100%;
|
||||||
|
background: linear-gradient(135deg, #818cf8, #a78bfa);
|
||||||
|
border: none;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 14px 24px;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-divider {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
margin: 24px 0;
|
||||||
|
color: #52525b;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-divider::before,
|
||||||
|
.login-divider::after {
|
||||||
|
content: '';
|
||||||
|
flex: 1;
|
||||||
|
height: 1px;
|
||||||
|
background: #27272a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-login {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-btn {
|
||||||
|
flex: 1;
|
||||||
|
background: #18181b;
|
||||||
|
border: 1px solid #27272a;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 12px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 8px;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: #a1a1aa;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dashboard Mockup */
|
||||||
|
.dashboard-mockup {
|
||||||
|
background: #09090b;
|
||||||
|
border-radius: 24px;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px solid #27272a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-header {
|
||||||
|
background: #12121c;
|
||||||
|
padding: 16px 24px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
border-bottom: 1px solid #27272a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-logo {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-logo svg {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-logo h1 {
|
||||||
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-logo .resolution {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-logo .flow {
|
||||||
|
background: linear-gradient(90deg, #818cf8, #a78bfa);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-nav {
|
||||||
|
display: flex;
|
||||||
|
gap: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-nav a {
|
||||||
|
color: #71717a;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-nav a.active {
|
||||||
|
color: #818cf8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-user {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-user-avatar {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: linear-gradient(135deg, #818cf8, #a78bfa);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-user-name {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-content {
|
||||||
|
padding: 32px;
|
||||||
|
min-height: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-title {
|
||||||
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
||||||
|
font-size: 1.75rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-subtitle {
|
||||||
|
color: #71717a;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 20px;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card {
|
||||||
|
background: #18181b;
|
||||||
|
border: 1px solid #27272a;
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card-label {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: #71717a;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card-value {
|
||||||
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card-change {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: #22c55e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trees-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-card {
|
||||||
|
background: #18181b;
|
||||||
|
border: 1px solid #27272a;
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-icon {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
background: linear-gradient(135deg, rgba(129, 140, 248, 0.2), rgba(167, 139, 250, 0.1));
|
||||||
|
border-radius: 12px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-icon svg {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-info {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-name {
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-meta {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: #71717a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-arrow {
|
||||||
|
color: #52525b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.login-content {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
.login-left {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.dashboard-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
.trees-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
.dashboard-nav {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="page-header">
|
||||||
|
<h1>ResolutionFlow App Mockups</h1>
|
||||||
|
<p>How the brand looks in the actual application</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mockups-container">
|
||||||
|
<!-- Login Screen -->
|
||||||
|
<div class="mockup-section">
|
||||||
|
<span class="mockup-label">Login Screen</span>
|
||||||
|
<div class="login-mockup">
|
||||||
|
<div class="browser-bar">
|
||||||
|
<div class="browser-dots">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</div>
|
||||||
|
<div class="browser-url">resolutionflow.com/login</div>
|
||||||
|
</div>
|
||||||
|
<div class="login-content">
|
||||||
|
<div class="login-left">
|
||||||
|
<div class="login-logo">
|
||||||
|
<svg viewBox="0 0 64 64" fill="none">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="login-grad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||||
|
<stop offset="0%" stop-color="#818cf8"/>
|
||||||
|
<stop offset="100%" stop-color="#a78bfa"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<circle cx="8" cy="11" r="4" fill="url(#login-grad)" opacity="0.25"/>
|
||||||
|
<circle cx="8" cy="24" r="4.5" fill="url(#login-grad)" opacity="0.4"/>
|
||||||
|
<circle cx="8" cy="40" r="4.5" fill="url(#login-grad)" opacity="0.4"/>
|
||||||
|
<circle cx="8" cy="53" r="4" fill="url(#login-grad)" opacity="0.25"/>
|
||||||
|
<path d="M12 11L22 26" stroke="url(#login-grad)" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="2 2.5" opacity="0.35"/>
|
||||||
|
<path d="M12.5 24L22 30" stroke="url(#login-grad)" stroke-width="1.5" stroke-linecap="round" opacity="0.5"/>
|
||||||
|
<path d="M12.5 40L22 34" stroke="url(#login-grad)" stroke-width="1.5" stroke-linecap="round" opacity="0.5"/>
|
||||||
|
<path d="M12 53L22 38" stroke="url(#login-grad)" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="2 2.5" opacity="0.35"/>
|
||||||
|
<circle cx="28" cy="32" r="7" fill="url(#login-grad)" opacity="0.12"/>
|
||||||
|
<circle cx="28" cy="32" r="5" fill="url(#login-grad)" opacity="0.9"/>
|
||||||
|
<path d="M33 32H54M54 32L46 24M54 32L46 40" stroke="url(#login-grad)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
<h1><span class="resolution">Resolution</span><span class="flow">Flow</span></h1>
|
||||||
|
</div>
|
||||||
|
<p class="login-tagline">From issue to resolution, documented.</p>
|
||||||
|
<ul class="login-features">
|
||||||
|
<li>
|
||||||
|
<svg viewBox="0 0 20 20" fill="none">
|
||||||
|
<path d="M10 18a8 8 0 100-16 8 8 0 000 16z" stroke="#818cf8" stroke-width="1.5"/>
|
||||||
|
<path d="M7 10l2 2 4-4" stroke="#818cf8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
Guided troubleshooting workflows
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<svg viewBox="0 0 20 20" fill="none">
|
||||||
|
<path d="M10 18a8 8 0 100-16 8 8 0 000 16z" stroke="#818cf8" stroke-width="1.5"/>
|
||||||
|
<path d="M7 10l2 2 4-4" stroke="#818cf8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
Automatic documentation generation
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<svg viewBox="0 0 20 20" fill="none">
|
||||||
|
<path d="M10 18a8 8 0 100-16 8 8 0 000 16z" stroke="#818cf8" stroke-width="1.5"/>
|
||||||
|
<path d="M7 10l2 2 4-4" stroke="#818cf8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
Reduce context switching overhead
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<svg viewBox="0 0 20 20" fill="none">
|
||||||
|
<path d="M10 18a8 8 0 100-16 8 8 0 000 16z" stroke="#818cf8" stroke-width="1.5"/>
|
||||||
|
<path d="M7 10l2 2 4-4" stroke="#818cf8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
Built for MSP engineers
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="login-right">
|
||||||
|
<div class="login-form-header">
|
||||||
|
<h2>Welcome back</h2>
|
||||||
|
<p>Sign in to continue to ResolutionFlow</p>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Email</label>
|
||||||
|
<input type="email" placeholder="you@company.com">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Password</label>
|
||||||
|
<input type="password" placeholder="••••••••">
|
||||||
|
</div>
|
||||||
|
<button class="login-btn">Sign in</button>
|
||||||
|
<div class="login-divider">or continue with</div>
|
||||||
|
<div class="social-login">
|
||||||
|
<button class="social-btn">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
|
||||||
|
<path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
|
||||||
|
<path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
|
||||||
|
<path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
|
||||||
|
</svg>
|
||||||
|
Google
|
||||||
|
</button>
|
||||||
|
<button class="social-btn">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
|
||||||
|
</svg>
|
||||||
|
GitHub
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Dashboard -->
|
||||||
|
<div class="mockup-section">
|
||||||
|
<span class="mockup-label">Dashboard</span>
|
||||||
|
<div class="dashboard-mockup">
|
||||||
|
<div class="browser-bar">
|
||||||
|
<div class="browser-dots">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</div>
|
||||||
|
<div class="browser-url">resolutionflow.com/dashboard</div>
|
||||||
|
</div>
|
||||||
|
<div class="dashboard-header">
|
||||||
|
<div class="dashboard-logo">
|
||||||
|
<svg viewBox="0 0 40 40" fill="none">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="dash-grad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||||
|
<stop offset="0%" stop-color="#818cf8"/>
|
||||||
|
<stop offset="100%" stop-color="#a78bfa"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<circle cx="5" cy="7" r="2.5" fill="url(#dash-grad)" opacity="0.25"/>
|
||||||
|
<circle cx="5" cy="15" r="3" fill="url(#dash-grad)" opacity="0.4"/>
|
||||||
|
<circle cx="5" cy="25" r="3" fill="url(#dash-grad)" opacity="0.4"/>
|
||||||
|
<circle cx="5" cy="33" r="2.5" fill="url(#dash-grad)" opacity="0.25"/>
|
||||||
|
<path d="M7.5 7L14 17" stroke="url(#dash-grad)" stroke-width="1" stroke-linecap="round" stroke-dasharray="1.5 2" opacity="0.35"/>
|
||||||
|
<path d="M8 15L14 19" stroke="url(#dash-grad)" stroke-width="1" stroke-linecap="round" opacity="0.5"/>
|
||||||
|
<path d="M8 25L14 21" stroke="url(#dash-grad)" stroke-width="1" stroke-linecap="round" opacity="0.5"/>
|
||||||
|
<path d="M7.5 33L14 23" stroke="url(#dash-grad)" stroke-width="1" stroke-linecap="round" stroke-dasharray="1.5 2" opacity="0.35"/>
|
||||||
|
<circle cx="18" cy="20" r="5" fill="url(#dash-grad)" opacity="0.12"/>
|
||||||
|
<circle cx="18" cy="20" r="3.5" fill="url(#dash-grad)" opacity="0.9"/>
|
||||||
|
<path d="M22 20H36M36 20L30 14M36 20L30 26" stroke="url(#dash-grad)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
<h1><span class="resolution">Resolution</span><span class="flow">Flow</span></h1>
|
||||||
|
</div>
|
||||||
|
<nav class="dashboard-nav">
|
||||||
|
<a href="#" class="active">Dashboard</a>
|
||||||
|
<a href="#">Trees</a>
|
||||||
|
<a href="#">Sessions</a>
|
||||||
|
<a href="#">Reports</a>
|
||||||
|
</nav>
|
||||||
|
<div class="dashboard-user">
|
||||||
|
<span class="dashboard-user-name">Michael</span>
|
||||||
|
<div class="dashboard-user-avatar">M</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="dashboard-content">
|
||||||
|
<h2 class="dashboard-title">Welcome back, Michael</h2>
|
||||||
|
<p class="dashboard-subtitle">Here's what's happening with your troubleshooting workflows</p>
|
||||||
|
|
||||||
|
<div class="dashboard-grid">
|
||||||
|
<div class="stat-card">
|
||||||
|
<p class="stat-card-label">Sessions This Week</p>
|
||||||
|
<p class="stat-card-value">47</p>
|
||||||
|
<p class="stat-card-change">↑ 12% from last week</p>
|
||||||
|
</div>
|
||||||
|
<div class="stat-card">
|
||||||
|
<p class="stat-card-label">Docs Generated</p>
|
||||||
|
<p class="stat-card-value">43</p>
|
||||||
|
<p class="stat-card-change">↑ 8% from last week</p>
|
||||||
|
</div>
|
||||||
|
<div class="stat-card">
|
||||||
|
<p class="stat-card-label">Avg. Resolution Time</p>
|
||||||
|
<p class="stat-card-value">4.2m</p>
|
||||||
|
<p class="stat-card-change">↓ 15% faster</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 class="section-title">Recent Trees</h3>
|
||||||
|
<div class="trees-grid">
|
||||||
|
<div class="tree-card">
|
||||||
|
<div class="tree-icon">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="#818cf8" stroke-width="2">
|
||||||
|
<rect x="3" y="3" width="18" height="18" rx="2"/>
|
||||||
|
<path d="M3 9h18"/>
|
||||||
|
<path d="M9 21V9"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="tree-info">
|
||||||
|
<p class="tree-name">Citrix VDI Troubleshooting</p>
|
||||||
|
<p class="tree-meta">24 nodes • Last used 2h ago</p>
|
||||||
|
</div>
|
||||||
|
<span class="tree-arrow">→</span>
|
||||||
|
</div>
|
||||||
|
<div class="tree-card">
|
||||||
|
<div class="tree-icon">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="#818cf8" stroke-width="2">
|
||||||
|
<circle cx="12" cy="12" r="10"/>
|
||||||
|
<path d="M12 6v6l4 2"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="tree-info">
|
||||||
|
<p class="tree-name">Office 365 Email Issues</p>
|
||||||
|
<p class="tree-meta">18 nodes • Last used yesterday</p>
|
||||||
|
</div>
|
||||||
|
<span class="tree-arrow">→</span>
|
||||||
|
</div>
|
||||||
|
<div class="tree-card">
|
||||||
|
<div class="tree-icon">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="#818cf8" stroke-width="2">
|
||||||
|
<path d="M12 2L2 7l10 5 10-5-10-5z"/>
|
||||||
|
<path d="M2 17l10 5 10-5"/>
|
||||||
|
<path d="M2 12l10 5 10-5"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="tree-info">
|
||||||
|
<p class="tree-name">Network Connectivity</p>
|
||||||
|
<p class="tree-meta">31 nodes • Last used 3 days ago</p>
|
||||||
|
</div>
|
||||||
|
<span class="tree-arrow">→</span>
|
||||||
|
</div>
|
||||||
|
<div class="tree-card">
|
||||||
|
<div class="tree-icon">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="#818cf8" stroke-width="2">
|
||||||
|
<rect x="2" y="3" width="20" height="14" rx="2"/>
|
||||||
|
<path d="M8 21h8"/>
|
||||||
|
<path d="M12 17v4"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="tree-info">
|
||||||
|
<p class="tree-name">Active Directory Issues</p>
|
||||||
|
<p class="tree-meta">22 nodes • Last used 5 days ago</p>
|
||||||
|
</div>
|
||||||
|
<span class="tree-arrow">→</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1081
brand-assets/brand-guide.html
Normal file
1081
brand-assets/brand-guide.html
Normal file
File diff suppressed because it is too large
Load Diff
18
brand-assets/favicon.svg
Normal file
18
brand-assets/favicon.svg
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="fav-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||||
|
<stop offset="0%" stop-color="#818cf8"/>
|
||||||
|
<stop offset="100%" stop-color="#a78bfa"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- Simplified icon for small sizes -->
|
||||||
|
<!-- Input circles -->
|
||||||
|
<circle cx="5" cy="8" r="2.5" fill="url(#fav-gradient)" opacity="0.35"/>
|
||||||
|
<circle cx="5" cy="16" r="3" fill="url(#fav-gradient)" opacity="0.5"/>
|
||||||
|
<circle cx="5" cy="24" r="2.5" fill="url(#fav-gradient)" opacity="0.35"/>
|
||||||
|
<!-- Center node -->
|
||||||
|
<circle cx="14" cy="16" r="4" fill="url(#fav-gradient)"/>
|
||||||
|
<!-- Arrow -->
|
||||||
|
<path d="M18 16H28M28 16L24 12M28 16L24 20" stroke="url(#fav-gradient)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 825 B |
23
brand-assets/icon.svg
Normal file
23
brand-assets/icon.svg
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
<svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="resolutionflow-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||||
|
<stop offset="0%" stop-color="#818cf8"/>
|
||||||
|
<stop offset="100%" stop-color="#a78bfa"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<!-- Input circles (choices) -->
|
||||||
|
<circle cx="10" cy="14" r="5" fill="url(#resolutionflow-gradient)" opacity="0.25"/>
|
||||||
|
<circle cx="10" cy="30" r="5.5" fill="url(#resolutionflow-gradient)" opacity="0.4"/>
|
||||||
|
<circle cx="10" cy="50" r="5.5" fill="url(#resolutionflow-gradient)" opacity="0.4"/>
|
||||||
|
<circle cx="10" cy="66" r="5" fill="url(#resolutionflow-gradient)" opacity="0.25"/>
|
||||||
|
<!-- Connecting lines (outer dotted, inner solid) -->
|
||||||
|
<path d="M15 14L28 34" stroke="url(#resolutionflow-gradient)" stroke-width="2" stroke-linecap="round" stroke-dasharray="2 3" opacity="0.35"/>
|
||||||
|
<path d="M15.5 30L28 38" stroke="url(#resolutionflow-gradient)" stroke-width="2" stroke-linecap="round" opacity="0.5"/>
|
||||||
|
<path d="M15.5 50L28 42" stroke="url(#resolutionflow-gradient)" stroke-width="2" stroke-linecap="round" opacity="0.5"/>
|
||||||
|
<path d="M15 66L28 46" stroke="url(#resolutionflow-gradient)" stroke-width="2" stroke-linecap="round" stroke-dasharray="2 3" opacity="0.35"/>
|
||||||
|
<!-- Center node with glow -->
|
||||||
|
<circle cx="36" cy="40" r="10" fill="url(#resolutionflow-gradient)" opacity="0.12"/>
|
||||||
|
<circle cx="36" cy="40" r="7" fill="url(#resolutionflow-gradient)" opacity="0.9"/>
|
||||||
|
<!-- Arrow (documentation output) -->
|
||||||
|
<path d="M43 40H70M70 40L60 30M70 40L60 50" stroke="url(#resolutionflow-gradient)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.6 KiB |
32
brand-assets/logo-horizontal.svg
Normal file
32
brand-assets/logo-horizontal.svg
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
<svg viewBox="0 0 320 80" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="rf-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||||
|
<stop offset="0%" stop-color="#818cf8"/>
|
||||||
|
<stop offset="100%" stop-color="#a78bfa"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- Icon -->
|
||||||
|
<g transform="translate(0, 8)">
|
||||||
|
<!-- Input circles -->
|
||||||
|
<circle cx="10" cy="11" r="4" fill="url(#rf-gradient)" opacity="0.25"/>
|
||||||
|
<circle cx="10" cy="24" r="4.5" fill="url(#rf-gradient)" opacity="0.4"/>
|
||||||
|
<circle cx="10" cy="40" r="4.5" fill="url(#rf-gradient)" opacity="0.4"/>
|
||||||
|
<circle cx="10" cy="53" r="4" fill="url(#rf-gradient)" opacity="0.25"/>
|
||||||
|
<!-- Connecting lines -->
|
||||||
|
<path d="M14 11L24 27" stroke="url(#rf-gradient)" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="2 2.5" opacity="0.35"/>
|
||||||
|
<path d="M14.5 24L24 30" stroke="url(#rf-gradient)" stroke-width="1.5" stroke-linecap="round" opacity="0.5"/>
|
||||||
|
<path d="M14.5 40L24 34" stroke="url(#rf-gradient)" stroke-width="1.5" stroke-linecap="round" opacity="0.5"/>
|
||||||
|
<path d="M14 53L24 37" stroke="url(#rf-gradient)" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="2 2.5" opacity="0.35"/>
|
||||||
|
<!-- Center node with glow -->
|
||||||
|
<circle cx="30" cy="32" r="8" fill="url(#rf-gradient)" opacity="0.12"/>
|
||||||
|
<circle cx="30" cy="32" r="5.5" fill="url(#rf-gradient)" opacity="0.9"/>
|
||||||
|
<!-- Arrow -->
|
||||||
|
<path d="M36 32H56M56 32L48 24M56 32L48 40" stroke="url(#rf-gradient)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Text -->
|
||||||
|
<text x="72" y="50" font-family="'Plus Jakarta Sans', 'Segoe UI', sans-serif" font-size="28" font-weight="700" letter-spacing="-0.5">
|
||||||
|
<tspan fill="#ffffff">Resolution</tspan><tspan fill="url(#rf-gradient)">Flow</tspan>
|
||||||
|
</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.8 KiB |
37
brand-assets/logo-with-tagline.svg
Normal file
37
brand-assets/logo-with-tagline.svg
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
<svg viewBox="0 0 320 100" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="rf-gradient-tag" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||||
|
<stop offset="0%" stop-color="#818cf8"/>
|
||||||
|
<stop offset="100%" stop-color="#a78bfa"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- Icon -->
|
||||||
|
<g transform="translate(0, 8)">
|
||||||
|
<!-- Input circles -->
|
||||||
|
<circle cx="10" cy="11" r="4" fill="url(#rf-gradient-tag)" opacity="0.25"/>
|
||||||
|
<circle cx="10" cy="24" r="4.5" fill="url(#rf-gradient-tag)" opacity="0.4"/>
|
||||||
|
<circle cx="10" cy="40" r="4.5" fill="url(#rf-gradient-tag)" opacity="0.4"/>
|
||||||
|
<circle cx="10" cy="53" r="4" fill="url(#rf-gradient-tag)" opacity="0.25"/>
|
||||||
|
<!-- Connecting lines -->
|
||||||
|
<path d="M14 11L24 27" stroke="url(#rf-gradient-tag)" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="2 2.5" opacity="0.35"/>
|
||||||
|
<path d="M14.5 24L24 30" stroke="url(#rf-gradient-tag)" stroke-width="1.5" stroke-linecap="round" opacity="0.5"/>
|
||||||
|
<path d="M14.5 40L24 34" stroke="url(#rf-gradient-tag)" stroke-width="1.5" stroke-linecap="round" opacity="0.5"/>
|
||||||
|
<path d="M14 53L24 37" stroke="url(#rf-gradient-tag)" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="2 2.5" opacity="0.35"/>
|
||||||
|
<!-- Center node with glow -->
|
||||||
|
<circle cx="30" cy="32" r="8" fill="url(#rf-gradient-tag)" opacity="0.12"/>
|
||||||
|
<circle cx="30" cy="32" r="5.5" fill="url(#rf-gradient-tag)" opacity="0.9"/>
|
||||||
|
<!-- Arrow -->
|
||||||
|
<path d="M36 32H56M56 32L48 24M56 32L48 40" stroke="url(#rf-gradient-tag)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Text -->
|
||||||
|
<text x="72" y="50" font-family="'Plus Jakarta Sans', 'Segoe UI', sans-serif" font-size="28" font-weight="700" letter-spacing="-0.5">
|
||||||
|
<tspan fill="#ffffff">Resolution</tspan><tspan fill="url(#rf-gradient-tag)">Flow</tspan>
|
||||||
|
</text>
|
||||||
|
|
||||||
|
<!-- Tagline -->
|
||||||
|
<text x="72" y="75" font-family="'Plus Jakarta Sans', 'Segoe UI', sans-serif" font-size="13" font-weight="500" fill="url(#rf-gradient-tag)">
|
||||||
|
From issue to resolution, documented.
|
||||||
|
</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.0 KiB |
Reference in New Issue
Block a user