Skip to content

Commit d4f13c8

Browse files
PartnerProgramPartnerProgram
authored
Update index.html
1 parent 9a432e0 commit d4f13c8

1 file changed

Lines changed: 66 additions & 65 deletions

File tree

‎index.html‎

Lines changed: 66 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -5,62 +5,63 @@
55
<title>Recast — Compact Click-Through (Realistic Catalog)</title>
66
<meta name="viewport" content="width=device-width, initial-scale=1">
77
<meta name="color-scheme" content="dark light">
8-
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'">
9-
<noscript><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet"></noscript>
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
1011
<script src="https://cdn.tailwindcss.com"></script>
1112
<link rel="preconnect" href="https://unpkg.com">
1213
<script src="https://unpkg.com/lucide@latest"></script>
1314
<style>
14-
:root{
15-
--re-navy:#F7F9FB;
16-
--re-blue-mid:#0A1C60;
17-
--re-blue-bright:#0070F3;
18-
--re-blue-hover:#005AD0;
19-
--re-green:#10B981;
20-
--re-gray:#E2E8F0;
21-
--re-white:#FFFFFF;
22-
--radius:12px;
23-
--border-subtle:#E2E8F0;
15+
:root {
16+
--bg-main: #f9fafb;
17+
--text-primary: #111827;
18+
--primary: #2563eb;
19+
--primary-hover: #1d4ed8;
20+
--radius: 1rem;
21+
--border-subtle: #e5e7eb;
22+
--shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
23+
--shadow-hover: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
2424
}
25-
html,body{
26-
background:var(--re-navy);
27-
color:var(--re-blue-mid);
28-
font-family:Inter,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
25+
html, body {
26+
background: var(--bg-main);
27+
color: var(--text-primary);
28+
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
2929
}
30-
.focus-ring:focus-visible{outline:2px solid rgba(0,0,0,0.3);outline-offset:2px}
31-
.section-card{border-radius:var(--radius);border:1px solid var(--border-subtle);background:#FFFFFF;box-shadow:0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06)}
32-
.sub-card{border-radius:var(--radius);border:1px solid var(--border-subtle);background:#F7F9FB}
33-
.tile{width:.45rem;height:.45rem;border-radius:0;background:#E2E8F0;opacity:.9}
34-
.run .tile{animation:tilePulse 1s ease-in-out var(--d,0s) 1 forwards}
35-
@keyframes tilePulse{0%{transform:scale(.7);background:var(--re-gray);opacity:.4}60%{transform:scale(1);background:var(--re-blue-bright);opacity:1}100%{background:var(--re-gray);opacity:.9}}
36-
.flow-bar{height:.22rem;border-radius:0;transform-origin:left center;transform:scaleX(0)}
37-
.run .flow-bar{animation:barGrow .9s ease forwards var(--d,0s)}
38-
@keyframes barGrow{to{transform:scaleX(1)}}
39-
.bolt-line{width:.22rem;border-radius:0;transform-origin:top center;transform:scaleY(0)}
40-
.run .bolt-line{animation:boltDrop .9s ease forwards var(--d,0s)}
41-
@keyframes boltDrop{to{transform:scaleY(1)}}
42-
.logo-ring{width:2.1rem;height:2.1rem;border-radius:9999px;display:grid;place-items:center;background:#FFFFFF;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);transition:all 0.2s ease}
43-
.logo-ring:hover{box-shadow:0 0 8px rgba(0,112,243,0.5)}
44-
.logo-wrap{display:flex;align-items:center;gap:.4rem;position:relative}
45-
.logo-name{font-size:.7rem;color:#4A5568;opacity:0;transform:translateX(-10px);transition:all 0.3s ease}
46-
.show-labels .logo-wrap{flex-direction:column;align-items:flex-start;gap:0.2rem}
47-
.show-labels .logo-name{opacity:1;transform:translateX(0);white-space:normal;text-align:left}
48-
.show-labels .logo-wrap .logo-ring{width:1.8rem;height:1.8rem}
49-
.run .logo-ring{animation:appLiftPulse 1.2s cubic-bezier(.2,.8,.2,1) var(--d,0s) 1 forwards}
50-
@keyframes appLiftPulse{0%{transform:translateY(0) scale(1);filter:saturate(.4);opacity:.65}30%{transform:translateY(-4px) scale(1.05)}60%{transform:translateY(-2px) scale(1.02);filter:saturate(1);opacity:1}100%{transform:translateY(0) scale(1)}}
51-
.user-beam{height:.38rem;border-radius:0;transform-origin:left center;transform:scaleX(0)}
52-
.run .user-beam{animation:barGrow 1s ease forwards var(--d,0s)}
53-
.badge{width:1.15rem;height:1.15rem;border-radius:0;opacity:0;transform:translateY(-6px) scale(.9)}
54-
.run .badge{animation:badgeDrop .8s ease-out var(--d,0s) forwards}
55-
@keyframes badgeDrop{to{opacity:1;transform:translateY(0) scale(1)}}
56-
.cat-row{display:grid;grid-template-columns:15ch 1fr;gap:.5rem;align-items:center;border-top:1px solid var(--re-gray);padding-top:0.5rem}
57-
.cat-row:first-child{border-top:none;padding-top:0}
58-
.cat-title{font-size:.7rem;letter-spacing:.08em;display:flex;align-items:center;gap:0.5rem}
59-
.re-primary{background:#0070F3!important;color:#fff!important;border:0;border-radius:var(--radius)}
60-
.re-primary:hover{background:#005AD0!important}
61-
.re-primary:focus-visible{outline:2px solid rgba(0,0,0,0.3);outline-offset:2px}
62-
.re-secondary{background:transparent!important;color:#0A1C60!important;border:2px solid #0A1C60!important;border-radius:var(--radius)}
63-
.re-secondary:hover{color:#0070F3!important;border-color:#0070F3!important}
30+
.focus-ring:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
31+
.section-card { border-radius: var(--radius); background: #ffffff; box-shadow: var(--shadow-card); transition: box-shadow 300ms ease, transform 300ms ease; }
32+
.section-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
33+
.sub-card { border-radius: calc(var(--radius) / 1.5); border: 1px solid var(--border-subtle); background: #f9fafb; transition: box-shadow 300ms ease; }
34+
.tile { width: 0.45rem; height: 0.45rem; border-radius: 2px; background: #e5e7eb; opacity: 0.9; }
35+
.run .tile { animation: tilePulse 1s ease-in-out var(--d, 0s) 1 forwards; }
36+
@keyframes tilePulse { 0% { transform: scale(0.7); background: #e5e7eb; opacity: 0.4; } 60% { transform: scale(1); background: var(--primary); opacity: 1; } 100% { background: #e5e7eb; opacity: 0.9; } }
37+
.flow-bar { height: 0.22rem; border-radius: 2px; transform-origin: left center; transform: scaleX(0); }
38+
.run .flow-bar { animation: barGrow 0.9s ease forwards var(--d, 0s); }
39+
@keyframes barGrow { to { transform: scaleX(1); } }
40+
.bolt-line { width: 0.22rem; border-radius: 2px; transform-origin: top center; transform: scaleY(0); }
41+
.run .bolt-line { animation: boltDrop 0.9s ease forwards var(--d, 0s); }
42+
@keyframes boltDrop { to { transform: scaleY(1); } }
43+
.logo-ring { width: 2.1rem; height: 2.1rem; border-radius: 9999px; display: grid; place-items: center; background: #ffffff; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1); transition: all 0.3s ease; }
44+
.logo-ring:hover { box-shadow: 0 0 8px rgba(37,99,235,0.3); transform: scale(1.05); }
45+
.logo-wrap { display: flex; align-items: center; gap: 0.4rem; position: relative; transition: all 300ms ease; }
46+
.logo-name { font-size: 0.7rem; color: #6b7280; opacity: 0; transform: translateX(-10px); transition: all 0.3s ease; }
47+
.show-labels .logo-wrap { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
48+
.show-labels .logo-name { opacity: 1; transform: translateX(0); white-space: normal; text-align: left; }
49+
.show-labels .logo-wrap .logo-ring { width: 1.8rem; height: 1.8rem; }
50+
.run .logo-ring { animation: appLiftPulse 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) var(--d, 0s) 1 forwards; }
51+
@keyframes appLiftPulse { 0% { transform: translateY(0) scale(1); filter: saturate(0.4); opacity: 0.65; } 30% { transform: translateY(-4px) scale(1.05); } 60% { transform: translateY(-2px) scale(1.02); filter: saturate(1); opacity: 1; } 100% { transform: translateY(0) scale(1); } }
52+
.user-beam { height: 0.38rem; border-radius: 2px; transform-origin: left center; transform: scaleX(0); }
53+
.run .user-beam { animation: barGrow 1s ease forwards var(--d, 0s); }
54+
.badge { width: 1.15rem; height: 1.15rem; border-radius: 9999px; opacity: 0; transform: translateY(-6px) scale(0.9); }
55+
.run .badge { animation: badgeDrop 0.8s ease-out var(--d, 0s) forwards; }
56+
@keyframes badgeDrop { to { opacity: 1; transform: translateY(0) scale(1); } }
57+
.cat-row { display: grid; grid-template-columns: 15ch 1fr; gap: 0.5rem; align-items: center; border-top: 1px solid #e5e7eb; padding-top: 0.5rem; transition: all 300ms ease; }
58+
.cat-row:first-child { border-top: none; padding-top: 0; }
59+
.cat-title { font-size: 0.7rem; letter-spacing: 0.08em; display: flex; align-items: center; gap: 0.5rem; }
60+
.re-primary { background: var(--primary) !important; color: #fff !important; border: 0; border-radius: 9999px; padding: 0.5rem 1.5rem; transition: background 0.2s ease, transform 0.2s ease; }
61+
.re-primary:hover { background: var(--primary-hover) !important; transform: scale(1.02); }
62+
.re-primary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
63+
.re-secondary { background: transparent !important; color: var(--text-primary) !important; border: 2px solid var(--text-primary) !important; border-radius: 9999px; padding: 0.5rem 1.5rem; transition: all 0.2s ease, transform 0.2s ease; }
64+
.re-secondary:hover { color: var(--primary) !important; border-color: var(--primary) !important; transform: scale(1.02); }
6465
@media (prefers-reduced-motion: reduce) {
6566
.accordion-content { transition: none !important; }
6667
}
@@ -70,15 +71,15 @@
7071
.modal-closed .modal-content { transform: scale(0.95); opacity: 0; }
7172
.check-appear{opacity:0;animation:fadeInOut 1.5s ease var(--d,0s) forwards}
7273
@keyframes fadeInOut{0%{opacity:0}30%{opacity:1}70%{opacity:1}100%{opacity:0}}
73-
.flow-connect{background-image:linear-gradient(to right, transparent 50%, var(--re-gray) 50%);background-size:4px 1px;background-repeat:repeat-x;height:1px;opacity:0.5}
74-
.end-user-expand{transition:all 0.5s ease;transform:scale(1.05);background:var(--re-white);border-color:var(--re-green)}
74+
.flow-connect{background-image:linear-gradient(to right, transparent 50%, #e5e7eb 50%);background-size:4px 1px;background-repeat:repeat-x;height:1px;opacity:0.5}
75+
.end-user-expand{transition:all 0.5s ease;transform:scale(1.05);background:#ffffff;border-color:#10b981}
7576
.icon-launch{animation:iconLaunch 0.5s ease forwards}
7677
@keyframes iconLaunch{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1)}}
7778
.tagline-fade{opacity:0;animation:fadeIn 1s ease 10s forwards}
7879
@keyframes fadeIn{to{opacity:1}}
79-
.overlay-tag{opacity:0;transition:opacity 0.3s ease;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(255,255,255,0.9);padding:1rem;border-radius:var(--radius);box-shadow:0 4px 6px rgba(0,0,0,0.1);z-index:10}
80+
.overlay-tag{opacity:0;transition:opacity 0.3s ease;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(255,255,255,0.9);padding:1rem;border-radius:var(--radius);box-shadow:var(--shadow-card);z-index:10}
8081
.show-labels .overlay-tag{opacity:1;transition-delay:0.5s}
81-
.meta-label{font-size:0.6rem;color:#4A5568;opacity:0;transform:translateY(5px);transition:all 0.3s ease;position:relative;top:auto;left:auto;z-index:5;white-space:nowrap;display:flex;flex-direction:column;gap:0.1rem;align-items:flex-start;width:100%;justify-content:flex-start}
82+
.meta-label{font-size:0.6rem;color:#6b7280;opacity:0;transform:translateY(5px);transition:all 0.3s ease;position:relative;top:auto;left:auto;z-index:5;white-space:nowrap;display:flex;flex-direction:column;gap:0.1rem;align-items:flex-start;width:100%;justify-content:flex-start}
8283
.show-labels .meta-label{opacity:1;transform:translateY(0)}
8384
.show-labels .cat-row{grid-template-columns:15ch 1fr;gap:1rem}
8485
.show-labels #flowCard .flex-wrap{gap:1rem}
@@ -107,7 +108,7 @@
107108
editBuffers: { change: { intro: '', bullets: '', analyst: '' }, now: { intro: '', bullets: '', analyst: '' }, recast: { intro: '', bullets: '', analyst: '' } },
108109
currentState: {
109110
change: {
110-
intro: "Everyone's saying the same thing: the app layer is the bottleneck. McKinsey calls it \"the final mile of digital transformation.\ Forrester warns that \"endpoint complexity is now the biggest drag on IT productivity.",
111+
intro: "Everyone's saying the same thing: the app layer is the bottleneck. McKinsey calls it \"the final mile of digital transformation.\" Forrester warns that \"endpoint complexity is now the biggest drag on IT productivity.\"",
111112
bullets: [
112113
'The work has outgrown the tools. Thousands of apps. Hybrid platforms. Endless updates. Manual processes simply don\'t scale anymore.',
113114
'Teams can\'t keep up. Headcount is flat, but demand has exploded. IT is running at 120% capacity — doing more with less isn\'t sustainable.',
@@ -137,7 +138,7 @@
137138
defaultsCurrentState() {
138139
return JSON.parse(JSON.stringify({
139140
change: {
140-
intro: "Everyone's saying the same thing: the app layer is the bottleneck. McKinsey calls it \"the final mile of digital transformation.\ Forrester warns that \"endpoint complexity is now the biggest drag on IT productivity.",
141+
intro: "Everyone's saying the same thing: the app layer is the bottleneck. McKinsey calls it \"the final mile of digital transformation.\" Forrester warns that \"endpoint complexity is now the biggest drag on IT productivity.\"",
141142
bullets: [
142143
'The work has outgrown the tools. Thousands of apps. Hybrid platforms. Endless updates. Manual processes simply don\'t scale anymore.',
143144
'Teams can\'t keep up. Headcount is flat, but demand has exploded. IT is running at 120% capacity — doing more with less isn\'t sustainable.',
@@ -187,8 +188,8 @@
187188
],
188189
closer: 'Configured once — Delivered everywhere.',
189190
timeline: false,
190-
bgHeader: 'bg-[var(--re-navy)]',
191-
bgContent: 'bg-slate-50'
191+
bgHeader: 'bg-[#f9fafb]',
192+
bgContent: 'bg-[#f9fafb]'
192193
},
193194
{
194195
id: 'onboarding',
@@ -203,8 +204,8 @@
203204
],
204205
closer: 'From first call to production in weeks, not months.',
205206
timeline: true,
206-
bgHeader: 'bg-[var(--re-navy)]',
207-
bgContent: 'bg-slate-50'
207+
bgHeader: 'bg-[#f9fafb]',
208+
bgContent: 'bg-[#f9fafb]'
208209
},
209210
{
210211
id: 'trust',
@@ -219,8 +220,8 @@
219220
],
220221
closer: 'Trusted by organizations that can’t afford downtime.',
221222
timeline: false,
222-
bgHeader: 'bg-[var(--re-navy)]',
223-
bgContent: 'bg-slate-50'
223+
bgHeader: 'bg-[#f9fafb]',
224+
bgContent: 'bg-[#f9fafb]'
224225
}
225226
];
226227
const onboardingMiniTimelineEnabled = true;
@@ -241,8 +242,8 @@
241242
<h1 class="text-[40px] md:text-[56px] font-semibold leading-tight"><span style="color:#0070F3">Re</span><span style="color:#0A1C60">cast</span> Software</h1>
242243
<p class="mt-2 max-w-2xl text-[16px] leading-[1.5] text-[#4A5568]">
243244
${STATE.activeTab==='problems'
244-
? 'Recast Application Workspace connects SCCM, Intune, Citrix, VMware, Azure Virtual Desktop, and more—making the tools you already use faster, smarter, and easier to manage'
245-
: 'Recast Application Workspace connects SCCM, Intune, Citrix, VMware, Azure Virtual Desktop, and more—making the tools you already use faster, smarter, and easier to manage'}
245+
? 'Recast works across SCCM, Intune, Citrix, VMware Workspace ONE, and more—making the tools you already use faster, smarter, and easier to manage'
246+
: 'Recast works across SCCM, Intune, Citrix, VMware Workspace ONE, and more—making the tools you already use faster, smarter, and easier to manage'}
246247
</p>
247248
</div>
248249
<div class="relative mx-auto max-w-6xl px-4">
@@ -1113,7 +1114,7 @@ <h2 id="cs-editor-title" class="text-xl font-semibold tracking-normal">Edit Curr
11131114
const overlay = document.getElementById('overlayTag');
11141115
if(STATE.showLabels){
11151116
overlay.classList.remove('hidden');
1116-
setTimeout(()=>{ overlay.classList.add('hidden'); }, 3000);
1117+
setTimeout(()=>{ overlay.classList.add('hidden'); },3000);
11171118
}
11181119
}
11191120
function buildFlow(){

0 commit comments

Comments
 (0)