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__/
|
||||
|
||||
# Claude Code (local settings with permissions/tokens)
|
||||
.claude/settings.local.json
|
||||
|
||||
# Railway CLI (local tooling)
|
||||
node_modules/
|
||||
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