Hugging Face's logo

Spaces:
KloveAI
/
README
Running

App Files Community
SiennaClarke commited on
Commit
76638da
·
verified ·
1 Parent(s): f421d8b

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +111 -106
index.html CHANGED
@@ -3,159 +3,164 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>About | Klove AI</title>
7
- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
8
  <style>
9
  :root {
10
- --primary-color: #007bff;
11
- --bg-dark: #0f172a;
12
- --text-main: #f8fafc;
13
- --text-dim: #94a3b8;
14
- --card-bg: rgba(30, 41, 59, 0.7);
 
 
15
  }
16
 
17
- * {
18
- margin: 0;
19
- padding: 0;
20
- box-sizing: border-box;
21
- }
22
 
23
  body {
24
- font-family: 'Inter', sans-serif;
25
- background-color: var(--bg-dark);
26
- background-image: radial-gradient(circle at top right, #1e293b, #0f172a);
27
- color: var(--text-main);
28
  display: flex;
29
- justify-content: center;
30
  align-items: center;
31
- min-height: 100vh;
32
- padding: 20px;
33
- }
34
-
35
- .container {
36
- max-width: 800px;
37
- width: 100%;
38
- background: var(--card-bg);
39
- backdrop-filter: blur(12px);
40
- border: 1px solid rgba(255, 255, 255, 0.1);
41
- border-radius: 24px;
42
- padding: 60px 40px;
43
- box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
44
- animation: fadeIn 1s ease-out;
45
- }
46
-
47
- @keyframes fadeIn {
48
- from { opacity: 0; transform: translateY(20px); }
49
- to { opacity: 1; transform: translateY(0); }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
50
  }
51
 
52
- .header {
53
- text-align: center;
 
 
 
54
  margin-bottom: 40px;
55
- }
56
-
57
- .brand-name {
58
- font-size: 2.5rem;
59
- font-weight: 700;
60
- letter-spacing: -1px;
61
- background: linear-gradient(to right, #60a5fa, #3b82f6);
62
  -webkit-background-clip: text;
63
  -webkit-text-fill-color: transparent;
64
  }
65
 
66
- .content {
 
67
  line-height: 1.8;
68
- font-size: 1.1rem;
69
- text-align: justify;
70
- font-weight: 300;
71
- color: var(--text-main);
72
  }
73
 
74
- .content p {
75
- margin-bottom: 24px;
76
  }
77
 
78
- .content strong {
79
- color: var(--primary-color);
80
  font-weight: 600;
81
  }
82
 
83
- hr {
84
- border: 0;
85
- height: 1px;
86
- background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
87
- margin: 40px 0;
 
 
88
  }
89
 
90
- .footer {
91
- text-align: center;
92
- }
93
-
94
- .links {
95
- margin-bottom: 20px;
96
- }
97
-
98
- .links a {
99
- color: var(--text-dim);
100
  text-decoration: none;
101
- margin: 0 12px;
102
- font-weight: 500;
103
  font-size: 0.9rem;
104
- transition: all 0.3s ease;
 
105
  }
106
 
107
- .links a:hover {
108
- color: var(--primary-color);
109
- text-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
110
  }
111
 
112
- .copyright {
 
113
  font-size: 0.85rem;
114
- color: var(--text-dim);
115
- letter-spacing: 0.5px;
116
- }
117
-
118
- .copyright strong {
119
- color: #cbd5e1;
120
  }
121
 
122
- /* Responsive Tweaks */
123
- @media (max-width: 640px) {
124
- .container { padding: 40px 20px; }
125
- .brand-name { font-size: 2rem; }
126
- .links a { display: block; margin: 10px 0; }
127
  }
128
  </style>
129
  </head>
130
  <body>
131
 
132
- <div class="container">
133
- <header class="header">
134
- <h1 class="brand-name">Klove AI</h1>
135
- </header>
 
136
 
137
- <article class="content">
138
  <p>
139
- The inception of <strong>Klove AI</strong> was driven by a single observation: the modern professional landscape had become too complex for traditional navigation. While talent is universal, the clarity required to bridge the gap between current skills and future potential was not. The founders envisioned a "Career Intelligence" layer—a sophisticated, data-driven compass that could decode the shifting demands of the global market.
140
  </p>
141
 
142
  <p>
143
- By leveraging advanced neural architectures, Klove AI moved beyond static resumes to understand the living architecture of human competencies. The company was built to transform the uncertainty of career growth into a structured science, providing individuals with the clarity needed to navigate their professional journeys with precision. Today, Klove AI stands as the silent infrastructure for human advancement, ensuring that ambition is always met with an intelligent path forward.
144
  </p>
145
- </article>
146
-
147
- <hr />
148
 
149
- <footer class="footer">
150
- <div class="links">
151
- <a href="https://klove.ai">Official Website</a>
152
- <a href="https://linkedin.com/company/klove-ai">LinkedIn</a>
153
- <a href="mailto:hello@klove.ai">Contact Inquiries</a>
154
  </div>
155
- <p class="copyright">
156
- <strong>Klove AI &copy; 2026</strong> | Advancing Professional Potential
157
- </p>
158
- </footer>
159
  </div>
160
 
161
  </body>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Enterprise Intelligence | Klove AI</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
8
  <style>
9
  :root {
10
+ --brand-primary: #3b82f6;
11
+ --brand-secondary: #60a5fa;
12
+ --bg-deep: #020617;
13
+ --surface-glass: rgba(15, 23, 42, 0.8);
14
+ --border-subtle: rgba(51, 65, 85, 0.5);
15
+ --text-high: #f8fafc;
16
+ --text-med: #94a3b8;
17
  }
18
 
19
+ * { margin: 0; padding: 0; box-sizing: border-box; }
 
 
 
 
20
 
21
  body {
22
+ font-family: 'Inter', system-ui, -apple-system, sans-serif;
23
+ background-color: var(--bg-deep);
24
+ color: var(--text-high);
25
+ overflow-x: hidden;
26
  display: flex;
27
+ flex-direction: column;
28
  align-items: center;
29
+ /* Intelligence Grid Pattern */
30
+ background-image:
31
+ linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px),
32
+ linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px);
33
+ background-size: 40px 40px;
34
+ }
35
+
36
+ /* Hero Glow Effect */
37
+ .glow {
38
+ position: fixed;
39
+ top: -10%;
40
+ left: 50%;
41
+ transform: translateX(-50%);
42
+ width: 80vw;
43
+ height: 50vh;
44
+ background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 70%);
45
+ z-index: -1;
46
+ pointer-events: none;
47
+ }
48
+
49
+ .enterprise-container {
50
+ max-width: 900px;
51
+ width: 90%;
52
+ margin: 100px 0;
53
+ background: var(--surface-glass);
54
+ border: 1px solid var(--border-subtle);
55
+ border-radius: 12px;
56
+ padding: 80px 60px;
57
+ box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.8);
58
+ position: relative;
59
+ }
60
+
61
+ .badge {
62
+ display: inline-block;
63
+ background: rgba(59, 130, 246, 0.1);
64
+ color: var(--brand-secondary);
65
+ font-size: 0.75rem;
66
+ font-weight: 600;
67
+ text-transform: uppercase;
68
+ letter-spacing: 0.1em;
69
+ padding: 6px 16px;
70
+ border-radius: 100px;
71
+ border: 1px solid rgba(59, 130, 246, 0.2);
72
+ margin-bottom: 24px;
73
  }
74
 
75
+ .main-title {
76
+ font-size: clamp(2.5rem, 5vw, 3.5rem);
77
+ font-weight: 800;
78
+ line-height: 1.1;
79
+ letter-spacing: -0.03em;
80
  margin-bottom: 40px;
81
+ background: linear-gradient(180deg, #FFFFFF 0%, #94a3b8 100%);
 
 
 
 
 
 
82
  -webkit-background-clip: text;
83
  -webkit-text-fill-color: transparent;
84
  }
85
 
86
+ .content-body {
87
+ font-size: 1.125rem;
88
  line-height: 1.8;
89
+ color: var(--text-med);
90
+ font-weight: 400;
 
 
91
  }
92
 
93
+ .content-body p {
94
+ margin-bottom: 30px;
95
  }
96
 
97
+ .content-body strong {
98
+ color: var(--text-high);
99
  font-weight: 600;
100
  }
101
 
102
+ /* Sophisticated Footer */
103
+ .footer-grid {
104
+ display: grid;
105
+ grid-template-columns: 1fr 1fr;
106
+ margin-top: 60px;
107
+ padding-top: 40px;
108
+ border-top: 1px solid var(--border-subtle);
109
  }
110
 
111
+ .nav-links a {
112
+ color: var(--text-med);
 
 
 
 
 
 
 
 
113
  text-decoration: none;
 
 
114
  font-size: 0.9rem;
115
+ margin-right: 24px;
116
+ transition: color 0.2s ease;
117
  }
118
 
119
+ .nav-links a:hover {
120
+ color: var(--brand-secondary);
 
121
  }
122
 
123
+ .legal-tag {
124
+ text-align: right;
125
  font-size: 0.85rem;
126
+ color: rgba(148, 163, 184, 0.5);
 
 
 
 
 
127
  }
128
 
129
+ @media (max-width: 768px) {
130
+ .enterprise-container { padding: 40px 24px; margin: 40px 0; }
131
+ .footer-grid { grid-template-columns: 1fr; gap: 20px; text-align: center; }
132
+ .legal-tag { text-align: center; }
 
133
  }
134
  </style>
135
  </head>
136
  <body>
137
 
138
+ <div class="glow"></div>
139
+
140
+ <div class="enterprise-container">
141
+ <span class="badge">Operational Intelligence</span>
142
+ <h1 class="main-title">Klove AI:<br>The Infrastructure of Professional Potential.</h1>
143
 
144
+ <div class="content-body">
145
  <p>
146
+ The inception of <strong>Klove AI</strong> was driven by a single observation: the modern professional landscape had become too complex for traditional navigation. While talent is universal, the clarity required to bridge the gap between current skills and future potential was not.
147
  </p>
148
 
149
  <p>
150
+ By leveraging proprietary neural architectures, we moved beyond static resumes to decode the living architecture of human competencies. Our mission is to transform the uncertainty of career growth into a structured science—providing the silent infrastructure that ensures ambition is always met with an intelligent path forward.
151
  </p>
152
+ </div>
 
 
153
 
154
+ <div class="footer-grid">
155
+ <div class="nav-links">
156
+ <a href="#">Platform</a>
157
+ <a href="#">LinkedIn</a>
158
+ <a href="#">Contact</a>
159
  </div>
160
+ <div class="legal-tag">
161
+ &copy; 2026 Klove AI Systems Inc. All Rights Reserved.
162
+ </div>
163
+ </div>
164
  </div>
165
 
166
  </body>