Hugging Face's logo

Spaces:
DjayChucko
/
EnablingSales
Running

App Files
DjayChucko commited on
Commit
a7c1800
·
verified ·
1 Parent(s): ebafed6

add third page named "Scorecard" and use the attached image somewhere visible on the page

Browse files
Files changed (3) hide show
  1. index.html +4 -4
  2. scorecard.html +236 -0
  3. value-mapper.html +4 -4
index.html CHANGED
@@ -48,8 +48,8 @@
48
  <nav class="hidden md:flex space-x-8">
49
  <a href="index.html" class="nav-link active py-2 px-1 text-white">Home</a>
50
  <a href="value-mapper.html" class="nav-link py-2 px-1 text-white hover:text-primary transition-colors">Mapper</a>
51
- <a href="about.html" class="nav-link py-2 px-1 text-white hover:text-primary transition-colors">Scorecard</a>
52
- <a href="strategy.html" class="nav-link py-2 px-1 text-white hover:text-primary transition-colors">About</a>
53
  </nav>
54
  <!-- Theme Toggle -->
55
  <div class="flex items-center space-x-4">
@@ -72,8 +72,8 @@
72
  <div class="flex flex-col space-y-3">
73
  <a href="index.html" class="nav-link active py-2 px-1 text-white">Home</a>
74
  <a href="value-mapper.html" class="nav-link py-2 px-1 text-white hover:text-primary transition-colors">Mapper</a>
75
- <a href="about.html" class="nav-link py-2 px-1 text-white hover:text-primary transition-colors">Scorecard</a>
76
- <a href="strategy.html" class="nav-link py-2 px-1 text-white hover:text-primary transition-colors">About</a>
77
  </div>
78
  </div>
79
  </div>
 
48
  <nav class="hidden md:flex space-x-8">
49
  <a href="index.html" class="nav-link active py-2 px-1 text-white">Home</a>
50
  <a href="value-mapper.html" class="nav-link py-2 px-1 text-white hover:text-primary transition-colors">Mapper</a>
51
+ <a href="scorecard.html" class="nav-link py-2 px-1 text-white hover:text-primary transition-colors">Scorecard</a>
52
+ <a href="strategy.html" class="nav-link py-2 px-1 text-white hover:text-primary transition-colors">About</a>
53
  </nav>
54
  <!-- Theme Toggle -->
55
  <div class="flex items-center space-x-4">
 
72
  <div class="flex flex-col space-y-3">
73
  <a href="index.html" class="nav-link active py-2 px-1 text-white">Home</a>
74
  <a href="value-mapper.html" class="nav-link py-2 px-1 text-white hover:text-primary transition-colors">Mapper</a>
75
+ <a href="scorecard.html" class="nav-link py-2 px-1 text-white hover:text-primary transition-colors">Scorecard</a>
76
+ <a href="strategy.html" class="nav-link py-2 px-1 text-white hover:text-primary transition-colors">About</a>
77
  </div>
78
  </div>
79
  </div>
scorecard.html ADDED
@@ -0,0 +1,236 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="scroll-smooth">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <meta name="description" content="ValueVortex Navigator - Scorecard">
7
+ <title>Pod Value Mapper | Scorecard</title>
8
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <script>
13
+ tailwind.config = {
14
+ darkMode: 'class',
15
+ theme: {
16
+ extend: {
17
+ colors: {
18
+ primary: '#6366f1',
19
+ secondary: '#8b5cf6',
20
+ dark: '#1e293b'
21
+ }
22
+ }
23
+ }
24
+ }
25
+ </script>
26
+ <style>
27
+ .nav-link.active {
28
+ @apply text-primary font-medium border-b-2 border-primary;
29
+ }
30
+ .card-hover {
31
+ @apply transition-all duration-300 hover:scale-105 hover:shadow-xl;
32
+ }
33
+ .hamburger-line {
34
+ @apply w-6 h-0.5 bg-current transition-all duration-300;
35
+ }
36
+ </style>
37
+ </head>
38
+ <body class="bg-gray-50 dark:bg-dark text-gray-800 dark:text-gray-200 min-h-screen flex flex-col relative">
39
+ <!-- Header -->
40
+ <header class="sticky top-0 z-50 bg-black/80 dark:bg-dark/80 backdrop-blur-md shadow-sm">
41
+ <div class="container mx-auto px-4 py-3">
42
+ <div class="flex justify-between items-center">
43
+ <!-- Logo -->
44
+ <a href="index.html" class="flex items-center space-x-2">
45
+ <span class="text-xl font-bold text-white font-heading">McGPT</span>
46
+ </a>
47
+ <!-- Desktop Navigation -->
48
+ <nav class="hidden md:flex space-x-8">
49
+ <a href="index.html" class="nav-link py-2 px-1 text-white hover:text-primary transition-colors">Home</a>
50
+ <a href="value-mapper.html" class="nav-link py-2 px-1 text-white hover:text-primary transition-colors">Mapper</a>
51
+ <a href="scorecard.html" class="nav-link active py-2 px-1 text-white">Scorecard</a>
52
+ <a href="strategy.html" class="nav-link py-2 px-1 text-white hover:text-primary transition-colors">About</a>
53
+ </nav>
54
+ <!-- Theme Toggle -->
55
+ <div class="flex items-center space-x-4">
56
+ <button id="themeToggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
57
+ <i data-feather="moon" class="hidden dark:block"></i>
58
+ <i data-feather="sun" class="block dark:hidden"></i>
59
+ </button>
60
+ <!-- Mobile Menu Button -->
61
+ <button id="mobileMenuButton" class="md:hidden flex flex-col space-y-1.5 p-2">
62
+ <span class="hamburger-line"></span>
63
+ <span class="hamburger-line"></span>
64
+ <span class="hamburger-line"></span>
65
+ </button>
66
+ </div>
67
+ </div>
68
+ <!-- Mobile Navigation -->
69
+ <div id="mobileMenu" class="hidden md:hidden py-4 border-t mt-3">
70
+ <div class="flex flex-col space-y-3">
71
+ <a href="index.html" class="nav-link py-2 px-1 text-white hover:text-primary transition-colors">Home</a>
72
+ <a href="value-mapper.html" class="nav-link py-2 px-1 text-white hover:text-primary transition-colors">Mapper</a>
73
+ <a href="scorecard.html" class="nav-link active py-2 px-1 text-white">Scorecard</a>
74
+ <a href="strategy.html" class="nav-link py-2 px-1 text-white hover:text-primary transition-colors">About</a>
75
+ </div>
76
+ </div>
77
+ </div>
78
+ </header>
79
+
80
+ <!-- Main Content -->
81
+ <main class="flex-grow">
82
+ <div class="container mx-auto px-4 py-16">
83
+ <div class="text-center mb-12">
84
+ <h1 class="text-4xl md:text-5xl font-bold mb-4 text-white">Sales Performance Scorecard</h1>
85
+ <p class="text-xl text-gray-300 max-w-2xl mx-auto">
86
+ Track and optimize your sales performance with our comprehensive scoring system
87
+ </p>
88
+ </div>
89
+
90
+ <!-- Scorecard Image -->
91
+ <div class="flex justify-center mb-16">
92
+ <img src="https://huggingface.co/spaces/DjayChucko/valuevortex-navigator/resolve/main/images/Gemini_Generated_Image_3ro0wl3ro0wl3ro0.png"
93
+ alt="Sales Scorecard"
94
+ class="rounded-xl shadow-2xl border-4 border-primary/50 max-w-full h-auto">
95
+ </div>
96
+
97
+ <!-- Metrics Section -->
98
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
99
+ <!-- Metric 1 -->
100
+ <div class="bg-gray-800/90 p-6 rounded-xl shadow-lg backdrop-blur-sm">
101
+ <div class="flex items-center mb-4">
102
+ <div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center mr-4">
103
+ <i data-feather="trending-up" class="text-primary"></i>
104
+ </div>
105
+ <h3 class="text-xl font-bold">Conversion Rate</h3>
106
+ </div>
107
+ <p class="text-gray-300">Measure how effectively you're converting leads into customers with our real-time tracking.</p>
108
+ </div>
109
+
110
+ <!-- Metric 2 -->
111
+ <div class="bg-gray-800/90 p-6 rounded-xl shadow-lg backdrop-blur-sm">
112
+ <div class="flex items-center mb-4">
113
+ <div class="w-12 h-12 rounded-lg bg-secondary/10 flex items-center justify-center mr-4">
114
+ <i data-feather="clock" class="text-secondary"></i>
115
+ </div>
116
+ <h3 class="text-xl font-bold">Cycle Time</h3>
117
+ </div>
118
+ <p class="text-gray-300">Track the average time it takes to move a lead through your sales pipeline.</p>
119
+ </div>
120
+
121
+ <!-- Metric 3 -->
122
+ <div class="bg-gray-800/90 p-6 rounded-xl shadow-lg backdrop-blur-sm">
123
+ <div class="flex items-center mb-4">
124
+ <div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center mr-4">
125
+ <i data-feather="dollar-sign" class="text-primary"></i>
126
+ </div>
127
+ <h3 class="text-xl font-bold">Deal Size</h3>
128
+ </div>
129
+ <p class="text-gray-300">Monitor the average value of your closed deals and identify trends.</p>
130
+ </div>
131
+ </div>
132
+
133
+ <!-- CTA Section -->
134
+ <div class="text-center">
135
+ <h2 class="text-3xl font-bold mb-6 text-white">Ready to Elevate Your Sales Performance?</h2>
136
+ <p class="text-gray-300 mb-8 max-w-2xl mx-auto">
137
+ Start tracking your key metrics today and gain actionable insights to improve your sales strategy.
138
+ </p>
139
+ <a href="value-mapper.html" class="inline-block bg-gradient-to-r from-primary to-secondary text-white px-8 py-4 rounded-lg font-bold shadow-lg hover:from-primary/90 hover:to-secondary/90 transition-all duration-300">
140
+ Get Started Now
141
+ </a>
142
+ </div>
143
+ </div>
144
+ </main>
145
+
146
+ <!-- Footer -->
147
+ <footer class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm border-t border-gray-200 dark:border-gray-700">
148
+ <div class="container mx-auto px-4 py-8">
149
+ <div class="flex flex-col md:flex-row justify-between items-center">
150
+ <div class="mb-6 md:mb-0">
151
+ <a href="index.html" class="flex items-center space-x-2">
152
+ <span class="text-lg font-bold text-white font-heading">McGPT</span>
153
+ </a>
154
+ <p class="text-gray-600 dark:text-gray-300 mt-2 text-sm">
155
+ Navigating your sales success with AI since 2023
156
+ </p>
157
+ </div>
158
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-8">
159
+ <div>
160
+ <h3 class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-4">Resources</h3>
161
+ <ul class="space-y-2">
162
+ <li><a href="about.html" class="text-gray-600 dark:text-gray-300 hover:text-primary transition-colors">Onboarding</a></li>
163
+ <li><a href="strategy.html" class="text-gray-600 dark:text-gray-300 hover:text-primary transition-colors">Strategy</a></li>
164
+ <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary transition-colors">Blog</a></li>
165
+ </ul>
166
+ </div>
167
+ <div>
168
+ <h3 class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-4">Company</h3>
169
+ <ul class="space-y-2">
170
+ <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary transition-colors">About</a></li>
171
+ <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary transition-colors">Careers</a></li>
172
+ <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary transition-colors">Contact</a></li>
173
+ </ul>
174
+ </div>
175
+ <div class="col-span-2 md:col-span-1">
176
+ <h3 class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-4">Connect</h3>
177
+ <div class="flex space-x-4">
178
+ <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary transition-colors">
179
+ <i data-feather="twitter"></i>
180
+ </a>
181
+ <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary transition-colors">
182
+ <i data-feather="linkedin"></i>
183
+ </a>
184
+ <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary transition-colors">
185
+ <i data-feather="github"></i>
186
+ </a>
187
+ </div>
188
+ </div>
189
+ </div>
190
+ </div>
191
+ <div class="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700 text-center text-sm text-gray-500 dark:text-gray-400">
192
+ <p>&copy; 2023 McGPT Navigator. All rights reserved.</p>
193
+ </div>
194
+ </div>
195
+ </footer>
196
+
197
+ <script>
198
+ // Mobile Menu Toggle
199
+ const mobileMenuButton = document.getElementById('mobileMenuButton');
200
+ const mobileMenu = document.getElementById('mobileMenu');
201
+
202
+ mobileMenuButton.addEventListener('click', () => {
203
+ mobileMenu.classList.toggle('hidden');
204
+ mobileMenuButton.classList.toggle('open');
205
+ });
206
+
207
+ // Theme Toggle
208
+ const themeToggle = document.getElementById('themeToggle');
209
+ const html = document.documentElement;
210
+
211
+ themeToggle.addEventListener('click', () => {
212
+ html.classList.toggle('dark');
213
+ localStorage.theme = html.classList.contains('dark') ? 'dark' : 'light';
214
+ });
215
+
216
+ // Set initial theme - always dark by default
217
+ html.classList.add('dark');
218
+ localStorage.theme = 'dark';
219
+
220
+ // Set active nav link
221
+ const currentPage = window.location.pathname.split('/').pop() || 'index.html';
222
+ document.querySelectorAll('.nav-link').forEach(link => {
223
+ const linkHref = link.getAttribute('href');
224
+ if ((currentPage === 'index.html' && linkHref === 'index.html') ||
225
+ (currentPage !== 'index.html' && linkHref === currentPage)) {
226
+ link.classList.add('active');
227
+ } else {
228
+ link.classList.remove('active');
229
+ }
230
+ });
231
+
232
+ // Feather Icons
233
+ feather.replace();
234
+ </script>
235
+ </body>
236
+ </html>
value-mapper.html CHANGED
@@ -48,8 +48,8 @@
48
  <nav class="hidden md:flex space-x-8">
49
  <a href="index.html" class="nav-link active py-2 px-1 text-white">Home</a>
50
  <a href="value-mapper.html" class="nav-link py-2 px-1 text-white hover:text-primary transition-colors">Mapper</a>
51
- <a href="about.html" class="nav-link py-2 px-1 text-white hover:text-primary transition-colors">Scorecard</a>
52
- <a href="strategy.html" class="nav-link py-2 px-1 text-white hover:text-primary transition-colors">About</a>
53
  </nav>
54
  <!-- Theme Toggle -->
55
  <div class="flex items-center space-x-4">
@@ -72,8 +72,8 @@
72
  <div class="flex flex-col space-y-3">
73
  <a href="index.html" class="nav-link active py-2 px-1 text-white">Home</a>
74
  <a href="value-mapper.html" class="nav-link py-2 px-1 text-white hover:text-primary transition-colors">Mapper</a>
75
- <a href="about.html" class="nav-link py-2 px-1 text-white hover:text-primary transition-colors">Scorecard</a>
76
- <a href="strategy.html" class="nav-link py-2 px-1 text-white hover:text-primary transition-colors">About</a>
77
  </div>
78
  </div>
79
  </div>
 
48
  <nav class="hidden md:flex space-x-8">
49
  <a href="index.html" class="nav-link active py-2 px-1 text-white">Home</a>
50
  <a href="value-mapper.html" class="nav-link py-2 px-1 text-white hover:text-primary transition-colors">Mapper</a>
51
+ <a href="scorecard.html" class="nav-link py-2 px-1 text-white hover:text-primary transition-colors">Scorecard</a>
52
+ <a href="strategy.html" class="nav-link py-2 px-1 text-white hover:text-primary transition-colors">About</a>
53
  </nav>
54
  <!-- Theme Toggle -->
55
  <div class="flex items-center space-x-4">
 
72
  <div class="flex flex-col space-y-3">
73
  <a href="index.html" class="nav-link active py-2 px-1 text-white">Home</a>
74
  <a href="value-mapper.html" class="nav-link py-2 px-1 text-white hover:text-primary transition-colors">Mapper</a>
75
+ <a href="scorecard.html" class="nav-link py-2 px-1 text-white hover:text-primary transition-colors">Scorecard</a>
76
+ <a href="strategy.html" class="nav-link py-2 px-1 text-white hover:text-primary transition-colors">About</a>
77
  </div>
78
  </div>
79
  </div>