Hugging Face's logo

Spaces:
DjayChucko
/
EnablingSales
Running

App Files
DjayChucko commited on
Commit
ece428b
·
verified ·
1 Parent(s): 24adc22

Create me a minisite with fully functioning navigation linking together the HTML code below:

Browse files

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scaleway Enablement Launchpad</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">

<script>
// Custom Tailwind Configuration for Branding
tailwind.config = {
theme: {
extend: {
colors: {
'sc-primary': '#521094', // Dark Purple
'sc-secondary': '#792DD4', // Lighter Purple
'sc-background': '#F1EEFC', // Very Light Purple/Off-White
'sc-accent1': '#0083E6', // Blue
'sc-accent2': '#03CFDA', // Cyan
},
fontFamily: {
sans: ['Inter', 'sans-serif'],
heading: ['"Space Grotesk"', 'sans-serif'],
}
}
}
}
</script>
<style>
body {
font-family: 'Inter', sans-serif;
min-height: 100vh;
display: flex;
flex-direction: column;
background-color: #F1EEFC;
}
</style>
</head>
<body class="text-gray-800">

<!-- Navigation Bar (Updated for four pages) -->
<header class="bg-white shadow-lg">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<!-- Logo/Site Title -->
<a href="index.html" class="text-2xl font-heading font-bold text-sc-primary">Sales Launchpad</a>
<!-- Navigation Links -->
<nav class="flex space-x-4">
<a href="index.html" class="text-sc-primary font-medium hover:text-sc-secondary transition duration-150 p-2 rounded-lg bg-sc-background">Home</a>
<a href="value-mapper.html" class="text-gray-600 font-medium hover:text-sc-primary transition duration-150 p-2 rounded-lg hover:bg-gray-100">Value Mapper</a>
<a href="about.html" class="text-gray-600 font-medium hover:text-sc-primary transition duration-150 p-2 rounded-lg hover:bg-gray-100">Onboarding</a>
<a href="strategy.html" class="text-gray-600 font-medium hover:text-sc-primary transition duration-150 p-2 rounded-lg hover:bg-gray-100">Strategy</a>
</nav>
</div>
</div>
</header>

<!-- Main Content Area: Launchpad -->
<main class="flex-grow py-12 md:py-20">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">

<!-- Hero Section (New Content) -->
<div class="text-center mb-12 bg-white p-8 rounded-2xl shadow-xl border-t-4 border-sc-primary">
<h1 class="text-4xl sm:text-5xl font-heading font-extrabold text-sc-primary mb-3 leading-tight">
Brought to you by Scaleway's Sales Enablement Team
</h1>
<p class="text-lg text-gray-700 max-w-2xl mx-auto mb-4">
To effectively target larger accounts, our focus has shifted to **Value-Centric selling**. This approach requires understanding the customer's strategic needs before presenting solutions.
</p>
<p class="text-lg text-gray-700 max-w-2xl mx-auto">
This launchpad provides the core tools and methodology you need to quantify value, manage complex opportunities, and accelerate your career.
</p>
</div>

<!-- Primary Navigation Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">

<!-- Card 1: Value Mapper -->
<a href="value-mapper.html" class="block">
<div class="bg-white p-8 rounded-xl shadow-2xl hover:shadow-sc-secondary/50 transition duration-300 transform hover:-translate-y-1 h-full border-b-4 border-sc-secondary">
<div class="text-sc-secondary mb-3">
<svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
</div>
<h2 class="text-2xl font-heading font-bold text-sc-primary mb-3">Pod Value Mapper</h2>
<p class="text-gray-600">
The dynamic tool for lead qualification. Select an industry to instantly generate target value drivers, discovery questions, and permission-based openers.
</p>
<span class="mt-4 inline-block font-semibold text-sc-secondary hover:text-sc-primary">
Launch Tool →
</span>
</div>
</a>

<!-- Card 2: Onboarding Journey (Links to about.html) -->
<a href="about.html" class="block">
<div class="bg-white p-8 rounded-xl shadow-2xl hover:shadow-sc-accent1/50 transition duration-300 transform hover:-translate-y-1 h-full border-b-4 border-sc-accent1">
<div class="text-sc-accent1 mb-3">
<svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.206 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.832 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.832 5 16.5 5s3.332.477 4.5 1.253v13C19.832 18.477 18.168 18 16.5 18s-3.332.477-4.5 1.253"></path></svg>
</div>
<h2 class="text-2xl font-heading font-bold text-sc-primary mb-3">Onboarding Journey</h2>
<p class="text-gray-600">
Review the comprehensive checklist for your first 30 days, key platforms, and the progression through the Sales Academy certification levels.
</p>
<span class="mt-4 inline-block font-semibold text-sc-accent1 hover:text-sc-primary">
View Roadmap →
</span>
</div>
</a>
</div>

<!-- Strategy Link -->
<div class="text-center mt-12">
<a href="strategy.html" class="text-lg font-semibold text-sc-primary hover:text-sc-secondary transition duration-150">
<span class="mr-2">📚</span> Read the Full Value-Centric Sales Strategy
</a>
</div>

</div>
</main>

<!-- Footer -->
<footer class="bg-white border-t border-gray-200 mt-12 py-6">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center text-gray-500 text-sm">
© 2025 Sales Enablement. Scaleway.com
</div>
</footer>

</body>
</html>

Files changed (3) hide show
  1. README.md +8 -5
  2. index.html +276 -18
  3. value-mapper.html +58 -0
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Valuevortex Navigator
3
- emoji: 🏢
4
- colorFrom: yellow
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: ValueVortex Navigator 🌀
3
+ colorFrom: pink
4
+ colorTo: purple
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,277 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
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 - Your strategic sales companion">
7
+ <title>ValueVortex Navigator | Home</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">
39
+ <!-- Header -->
40
+ <header class="sticky top-0 z-50 bg-white/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
+ <div class="w-10 h-10 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
46
+ <i data-feather="compass" class="text-white"></i>
47
+ </div>
48
+ <span class="text-xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">ValueVortex</span>
49
+ </a>
50
+
51
+ <!-- Desktop Navigation -->
52
+ <nav class="hidden md:flex space-x-8">
53
+ <a href="index.html" class="nav-link active py-2 px-1">Home</a>
54
+ <a href="value-mapper.html" class="nav-link py-2 px-1 hover:text-primary transition-colors">Value Mapper</a>
55
+ <a href="about.html" class="nav-link py-2 px-1 hover:text-primary transition-colors">Onboarding</a>
56
+ <a href="strategy.html" class="nav-link py-2 px-1 hover:text-primary transition-colors">Strategy</a>
57
+ </nav>
58
+
59
+ <!-- Theme Toggle -->
60
+ <div class="flex items-center space-x-4">
61
+ <button id="themeToggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
62
+ <i data-feather="moon" class="hidden dark:block"></i>
63
+ <i data-feather="sun" class="block dark:hidden"></i>
64
+ </button>
65
+
66
+ <!-- Mobile Menu Button -->
67
+ <button id="mobileMenuButton" class="md:hidden flex flex-col space-y-1.5 p-2">
68
+ <span class="hamburger-line"></span>
69
+ <span class="hamburger-line"></span>
70
+ <span class="hamburger-line"></span>
71
+ </button>
72
+ </div>
73
+ </div>
74
+
75
+ <!-- Mobile Navigation -->
76
+ <div id="mobileMenu" class="hidden md:hidden py-4 border-t mt-3">
77
+ <div class="flex flex-col space-y-3">
78
+ <a href="index.html" class="nav-link active py-2 px-1">Home</a>
79
+ <a href="value-mapper.html" class="nav-link py-2 px-1 hover:text-primary transition-colors">Value Mapper</a>
80
+ <a href="about.html" class="nav-link py-2 px-1 hover:text-primary transition-colors">Onboarding</a>
81
+ <a href="strategy.html" class="nav-link py-2 px-1 hover:text-primary transition-colors">Strategy</a>
82
+ </div>
83
+ </div>
84
+ </div>
85
+ </header>
86
+
87
+ <!-- Hero Section -->
88
+ <section class="flex-grow">
89
+ <div class="container mx-auto px-4 py-16 md:py-24">
90
+ <div class="flex flex-col md:flex-row items-center">
91
+ <div class="md:w-1/2 mb-12 md:mb-0">
92
+ <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">
93
+ Navigate <span class="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">Sales Success</span> with Precision
94
+ </h1>
95
+ <p class="text-lg mb-8 text-gray-600 dark:text-gray-300">
96
+ ValueVortex Navigator equips your team with strategic tools to qualify leads, onboard effectively, and implement winning sales strategies.
97
+ </p>
98
+ <div class="flex space-x-4">
99
+ <a href="value-mapper.html" class="bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-lg font-medium transition-colors shadow-md">
100
+ Start Mapping Values
101
+ </a>
102
+ <a href="#features" class="border border-primary text-primary hover:bg-primary/10 px-6 py-3 rounded-lg font-medium transition-colors">
103
+ Explore Features
104
+ </a>
105
+ </div>
106
+ </div>
107
+ <div class="md:w-1/2 flex justify-center">
108
+ <div class="relative w-full max-w-md">
109
+ <div class="absolute -top-6 -left-6 w-32 h-32 rounded-full bg-secondary/20 blur-xl"></div>
110
+ <div class="absolute -bottom-6 -right-6 w-32 h-32 rounded-full bg-primary/20 blur-xl"></div>
111
+ <img src="http://static.photos/technology/1024x576/42" alt="Sales Strategy" class="relative rounded-2xl shadow-xl border border-gray-200 dark:border-gray-700">
112
+ </div>
113
+ </div>
114
+ </div>
115
+ </div>
116
+ </section>
117
+
118
+ <!-- Features Section -->
119
+ <section id="features" class="py-16 bg-gray-100 dark:bg-gray-800/50">
120
+ <div class="container mx-auto px-4">
121
+ <h2 class="text-3xl font-bold text-center mb-12">Our Strategic Toolkit</h2>
122
+
123
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
124
+ <!-- Card 1 -->
125
+ <a href="value-mapper.html" class="bg-white dark:bg-gray-700 rounded-xl p-6 shadow-md card-hover">
126
+ <div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
127
+ <i data-feather="map" class="text-primary"></i>
128
+ </div>
129
+ <h3 class="text-xl font-semibold mb-2">Value Mapper</h3>
130
+ <p class="text-gray-600 dark:text-gray-300">Qualify leads effectively by mapping their values to your solutions.</p>
131
+ </a>
132
+
133
+ <!-- Card 2 -->
134
+ <a href="about.html" class="bg-white dark:bg-gray-700 rounded-xl p-6 shadow-md card-hover">
135
+ <div class="w-12 h-12 rounded-lg bg-secondary/10 flex items-center justify-center mb-4">
136
+ <i data-feather="users" class="text-secondary"></i>
137
+ </div>
138
+ <h3 class="text-xl font-semibold mb-2">Onboarding</h3>
139
+ <p class="text-gray-600 dark:text-gray-300">Streamline your team's onboarding with our comprehensive resources.</p>
140
+ </a>
141
+
142
+ <!-- Card 3 -->
143
+ <a href="strategy.html" class="bg-white dark:bg-gray-700 rounded-xl p-6 shadow-md card-hover">
144
+ <div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
145
+ <i data-feather="trending-up" class="text-primary"></i>
146
+ </div>
147
+ <h3 class="text-xl font-semibold mb-2">Sales Strategy</h3>
148
+ <p class="text-gray-600 dark:text-gray-300">Implement our proven value-centric sales methodology.</p>
149
+ </a>
150
+
151
+ <!-- Card 4 -->
152
+ <div class="bg-white dark:bg-gray-700 rounded-xl p-6 shadow-md card-hover">
153
+ <div class="w-12 h-12 rounded-lg bg-secondary/10 flex items-center justify-center mb-4">
154
+ <i data-feather="bar-chart-2" class="text-secondary"></i>
155
+ </div>
156
+ <h3 class="text-xl font-semibold mb-2">Performance Analytics</h3>
157
+ <p class="text-gray-600 dark:text-gray-300">Track and optimize your sales performance with real-time insights.</p>
158
+ </div>
159
+ </div>
160
+ </div>
161
+ </section>
162
+
163
+ <!-- CTA Section -->
164
+ <section class="py-16 bg-gradient-to-r from-primary to-secondary">
165
+ <div class="container mx-auto px-4 text-center">
166
+ <h2 class="text-3xl font-bold text-white mb-6">Ready to Transform Your Sales Approach?</h2>
167
+ <p class="text-white/90 mb-8 max-w-2xl mx-auto">
168
+ Join hundreds of sales professionals who have revolutionized their pipeline with ValueVortex Navigator.
169
+ </p>
170
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
171
+ <a href="value-mapper.html" class="bg-white text-primary hover:bg-gray-100 px-8 py-3 rounded-lg font-medium transition-colors shadow-lg">
172
+ Get Started Now
173
+ </a>
174
+ <a href="about.html" class="bg-transparent border-2 border-white text-white hover:bg-white/10 px-8 py-3 rounded-lg font-medium transition-colors">
175
+ Learn More
176
+ </a>
177
+ </div>
178
+ </div>
179
+ </section>
180
+
181
+ <!-- Footer -->
182
+ <footer class="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700">
183
+ <div class="container mx-auto px-4 py-8">
184
+ <div class="flex flex-col md:flex-row justify-between items-center">
185
+ <div class="mb-6 md:mb-0">
186
+ <a href="index.html" class="flex items-center space-x-2">
187
+ <div class="w-8 h-8 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
188
+ <i data-feather="compass" class="text-white"></i>
189
+ </div>
190
+ <span class="text-lg font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">ValueVortex</span>
191
+ </a>
192
+ <p class="text-gray-600 dark:text-gray-300 mt-2 text-sm">
193
+ Navigating your sales success since 2023
194
+ </p>
195
+ </div>
196
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-8">
197
+ <div>
198
+ <h3 class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-4">Resources</h3>
199
+ <ul class="space-y-2">
200
+ <li><a href="about.html" class="text-gray-600 dark:text-gray-300 hover:text-primary transition-colors">Onboarding</a></li>
201
+ <li><a href="strategy.html" class="text-gray-600 dark:text-gray-300 hover:text-primary transition-colors">Strategy</a></li>
202
+ <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary transition-colors">Blog</a></li>
203
+ </ul>
204
+ </div>
205
+ <div>
206
+ <h3 class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-4">Company</h3>
207
+ <ul class="space-y-2">
208
+ <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary transition-colors">About</a></li>
209
+ <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary transition-colors">Careers</a></li>
210
+ <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary transition-colors">Contact</a></li>
211
+ </ul>
212
+ </div>
213
+ <div class="col-span-2 md:col-span-1">
214
+ <h3 class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-4">Connect</h3>
215
+ <div class="flex space-x-4">
216
+ <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary transition-colors">
217
+ <i data-feather="twitter"></i>
218
+ </a>
219
+ <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary transition-colors">
220
+ <i data-feather="linkedin"></i>
221
+ </a>
222
+ <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary transition-colors">
223
+ <i data-feather="github"></i>
224
+ </a>
225
+ </div>
226
+ </div>
227
+ </div>
228
+ </div>
229
+ <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">
230
+ <p>&copy; 2023 ValueVortex Navigator. All rights reserved.</p>
231
+ </div>
232
+ </div>
233
+ </footer>
234
+
235
+ <script>
236
+ // Mobile Menu Toggle
237
+ const mobileMenuButton = document.getElementById('mobileMenuButton');
238
+ const mobileMenu = document.getElementById('mobileMenu');
239
+
240
+ mobileMenuButton.addEventListener('click', () => {
241
+ mobileMenu.classList.toggle('hidden');
242
+ mobileMenuButton.classList.toggle('open');
243
+ });
244
+
245
+ // Theme Toggle
246
+ const themeToggle = document.getElementById('themeToggle');
247
+ const html = document.documentElement;
248
+
249
+ themeToggle.addEventListener('click', () => {
250
+ html.classList.toggle('dark');
251
+ localStorage.theme = html.classList.contains('dark') ? 'dark' : 'light';
252
+ });
253
+
254
+ // Set initial theme
255
+ if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
256
+ html.classList.add('dark');
257
+ } else {
258
+ html.classList.remove('dark');
259
+ }
260
+
261
+ // Set active nav link
262
+ const currentPage = window.location.pathname.split('/').pop() || 'index.html';
263
+ document.querySelectorAll('.nav-link').forEach(link => {
264
+ const linkHref = link.getAttribute('href');
265
+ if ((currentPage === 'index.html' && linkHref === 'index.html') ||
266
+ (currentPage !== 'index.html' && linkHref === currentPage)) {
267
+ link.classList.add('active');
268
+ } else {
269
+ link.classList.remove('active');
270
+ }
271
+ });
272
+
273
+ // Feather Icons
274
+ feather.replace();
275
+ </script>
276
+ </body>
277
  </html>
value-mapper.html ADDED
@@ -0,0 +1,58 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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 - Value Mapping Tool">
7
+ <title>ValueVortex Navigator | Value Mapper</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-[1.02] hover:shadow-lg;
32
+ }
33
+ .hamburger-line {
34
+ @apply w-6 h-0.5 bg-current transition-all duration-300;
35
+ }
36
+ .slider-thumb::-webkit-slider-thumb {
37
+ @apply appearance-none w-5 h-5 rounded-full bg-primary cursor-pointer;
38
+ }
39
+ </style>
40
+ </head>
41
+ <body class="bg-gray-50 dark:bg-dark text-gray-800 dark:text-gray-200 min-h-screen flex flex-col">
42
+ <!-- Header -->
43
+ <header class="sticky top-0 z-50 bg-white/80 dark:bg-dark/80 backdrop-blur-md shadow-sm">
44
+ <div class="container mx-auto px-4 py-3">
45
+ <div class="flex justify-between items-center">
46
+ <!-- Logo -->
47
+ <a href="index.html" class="flex items-center space-x-2">
48
+ <div class="w-10 h-10 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
49
+ <i data-feather="compass" class="text-white"></i>
50
+ </div>
51
+ <span class="text-xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">ValueVortex</span>
52
+ </a>
53
+
54
+ <!-- Desktop Navigation -->
55
+ <nav class="hidden md:flex space-x-8">
56
+ <
57
+ </body>
58
+ </html>