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
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