Spaces:

KloveAI
/

README

Running

App Files Files Community

SiennaClarke commited on Jan 9

Commit

bcc06a3

verified ·

1 Parent(s): 9959245

Update index.html

Browse files

Files changed (1) hide show

index.html +67 -86

index.html CHANGED Viewed

@@ -3,117 +3,97 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Klove AI | Enterprise Intelligence</title>
     <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">
     <style>
         :root {
-            --brand-primary: #3b82f6;
-            --brand-secondary: #60a5fa;
-            --bg-deep: #020617;
-            --surface-glass: rgba(15, 23, 42, 0.6);
-            --border-subtle: rgba(51, 65, 85, 0.4);
-            --text-high: #f8fafc;
-            --text-med: #94a3b8;
         }
-        /* Hugging Face Reset: Ensures the background covers the full iframe */
         html, body {
-            min-height: 100%;
-            background-color: var(--bg-deep);
         }
-        * { margin: 0; padding: 0; box-sizing: border-box; }
         body {
             font-family: 'Inter', system-ui, -apple-system, sans-serif;
-            color: var(--text-high);
             overflow-x: hidden;
             display: flex;
             flex-direction: column;
             align-items: center;
-            /* Adaptive Padding for HF */
-            padding: clamp(1rem, 5vw, 4rem);
-            background-image:
-                linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px),
-                linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px);
-            background-size: 40px 40px;
-        }
-        .glow {
-            position: fixed;
-            top: -10%;
-            left: 50%;
-            transform: translateX(-50%);
-            width: 100vw;
-            height: 60vh;
-            background: radial-gradient(circle, rgba(59, 130, 246, 0.12) 0%, transparent 70%);
-            z-index: -1;
-            pointer-events: none;
         }
         .enterprise-container {
-            max-width: 850px;
             width: 100%;
-            /* Fluid margin for HF compatibility */
-            margin: clamp(20px, 5vh, 60px) auto;
-            background: var(--surface-glass);
-            backdrop-filter: blur(12px);
-            -webkit-backdrop-filter: blur(12px);
-            border: 1px solid var(--border-subtle);
-            border-radius: 16px;
-            padding: clamp(30px, 8vw, 70px);
-            box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.7);
         }
         .badge {
             display: inline-flex;
             align-items: center;
-            background: rgba(59, 130, 246, 0.08);
-            color: var(--brand-secondary);
-            font-size: 0.7rem;
             font-weight: 700;
             text-transform: uppercase;
-            letter-spacing: 0.15em;
-            padding: 6px 14px;
-            border-radius: 4px;
-            border: 1px solid rgba(59, 130, 246, 0.2);
             margin-bottom: 32px;
         }
         .main-title {
-            font-size: clamp(2rem, 6vw, 3.2rem);
             font-weight: 800;
-            line-height: 1.15;
-            letter-spacing: -0.03em;
-            margin-bottom: 48px;
-            background: linear-gradient(180deg, #FFFFFF 30%, #94a3b8 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
         }
         .content-body {
-            font-size: clamp(1rem, 2vw, 1.125rem);
-            line-height: 1.8;
-            color: var(--text-med);
         }
         .section-block {
-            margin-bottom: 32px;
         }
         .section-label {
             display: block;
-            color: var(--text-high);
-            font-weight: 600;
-            font-size: 0.95rem;
-            margin-bottom: 8px;
-            letter-spacing: -0.01em;
         }
-        hr {
-            border: 0;
-            border-top: 1px solid var(--border-subtle);
-            margin: 48px 0 32px 0;
         }
         .footer-grid {
@@ -122,22 +102,26 @@
             align-items: center;
             flex-wrap: wrap;
             gap: 20px;
         }
         .nav-links a {
-            color: var(--text-med);
             text-decoration: none;
             font-size: 0.85rem;
             margin-right: 24px;
-            font-weight: 500;
-            transition: color 0.2s ease;
         }
-        .nav-links a:hover { color: var(--brand-secondary); }
         .legal-tag {
             font-size: 0.8rem;
-            color: rgba(148, 163, 184, 0.4);
         }
         @media (max-width: 600px) {
@@ -147,37 +131,34 @@
     </style>
 </head>
 <body>
-    <div class="glow"></div>
     <div class="enterprise-container">
-        <span class="badge">Strategic Genesis</span>
-        <h1 class="main-title">Klove AI:<br>The Intelligence Layer of the Modern Workforce.</h1>
         <div class="content-body">
             <div class="section-block">
-                <span class="section-label">The Insight</span>
-                <p>We recognized that professional potential should not be a mystery. It should not be left to chance, a keyword, or a biased glance. We saw an opportunity to look deeper—to find the signal in the noise and decode the fundamental essence of capability.</p>
             </div>
             <div class="section-block">
-                <span class="section-label">The Craft</span>
-                <p>We engineered a lens, not just a platform. By decoding the invisible threads between current skillsets and future potential, we combined proprietary intelligence with human-centric design to create a definitive foundation for growth.</p>
             </div>
             <div class="section-block">
-                <span class="section-label">The Purpose</span>
-                <p>Klove AI exists to transform professional uncertainty into a structured science. Because when the path is clear, the journey is no longer a challenge—it becomes an evolution.</p>
             </div>
         </div>
-        <hr>
         <div class="footer-grid">
             <div class="nav-links">
-                <a href="#">Platform</a>
                 <a href="#">LinkedIn</a>
-                <a href="#">Inquiries</a>
             </div>
             <div class="legal-tag">
                 &copy; 2026 Klove AI Systems Inc.

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Klove AI | Strategic Genesis</title>
     <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">
     <style>
         :root {
+            --brand-primary: #000000;
+            --brand-accent: #3b82f6;
+            --bg-white: #ffffff;
+            --surface-light: #f8fafc;
+            --border-bold: #000000;
+            --border-subtle: #e2e8f0;
+            --text-main: #000000;
+            --text-muted: #475569;
         }
+        /* Clean Reset for HF Environment */
         html, body {
+            min-height: 100vh;
+            background-color: var(--bg-white);
+            margin: 0;
+            padding: 0;
         }
+        * { box-sizing: border-box; }
         body {
             font-family: 'Inter', system-ui, -apple-system, sans-serif;
+            color: var(--text-main);
             overflow-x: hidden;
             display: flex;
             flex-direction: column;
             align-items: center;
+            padding: clamp(1.5rem, 5vw, 4rem);
+            -webkit-font-smoothing: antialiased;
         }
         .enterprise-container {
+            max-width: 800px;
             width: 100%;
+            margin: auto;
+            background: var(--bg-white);
+            padding: clamp(20px, 5vw, 60px);
         }
         .badge {
             display: inline-flex;
             align-items: center;
+            background: #000000;
+            color: #ffffff;
+            font-size: 0.65rem;
             font-weight: 700;
             text-transform: uppercase;
+            letter-spacing: 0.2em;
+            padding: 4px 12px;
+            border-radius: 2px;
             margin-bottom: 32px;
         }
         .main-title {
+            font-size: clamp(2.2rem, 6vw, 3.5rem);
             font-weight: 800;
+            line-height: 1.05;
+            letter-spacing: -0.04em;
+            margin-bottom: 56px;
+            color: var(--text-main);
         }
         .content-body {
+            font-size: clamp(1.05rem, 2vw, 1.2rem);
+            line-height: 1.7;
+            color: var(--text-main);
         }
         .section-block {
+            margin-bottom: 48px;
+            border-top: 1px solid var(--text-main);
+            padding-top: 24px;
         }
         .section-label {
             display: block;
+            color: var(--text-main);
+            font-weight: 800;
+            font-size: 0.85rem;
+            text-transform: uppercase;
+            margin-bottom: 16px;
+            letter-spacing: 0.05em;
         }
+        .section-text {
+            color: var(--text-muted);
+            font-weight: 450;
         }
         .footer-grid {
             align-items: center;
             flex-wrap: wrap;
             gap: 20px;
+            margin-top: 40px;
+            padding-top: 24px;
+            border-top: 1px solid var(--border-subtle);
         }
         .nav-links a {
+            color: var(--text-main);
             text-decoration: none;
             font-size: 0.85rem;
             margin-right: 24px;
+            font-weight: 600;
+            transition: opacity 0.2s ease;
         }
+        .nav-links a:hover { opacity: 0.6; }
         .legal-tag {
             font-size: 0.8rem;
+            font-weight: 500;
+            color: var(--text-muted);
         }
         @media (max-width: 600px) {
     </style>
 </head>
 <body>
     <div class="enterprise-container">
+        <span class="badge">Genesis</span>
+        <h1 class="main-title">Klove AI.<br>Engineering the Intelligence of Ambition.</h1>
         <div class="content-body">
             <div class="section-block">
+                <span class="section-label">01 / The Insight</span>
+                <p class="section-text">Professional potential is the most undervalued asset in the global economy. The challenge is rarely a lack of talent; it is a deficit of clarity. We saw an opportunity to look deeper—to find the signal in the noise and decode the fundamental essence of capability.</p>
             </div>
             <div class="section-block">
+                <span class="section-label">02 / The Craft</span>
+                <p class="section-text">We engineered a lens, not just a platform. By decoding the invisible threads between current skillsets and future potential, we combined proprietary intelligence with human-centric design to create a definitive foundation for professional trajectory.</p>
             </div>
             <div class="section-block">
+                <span class="section-label">03 / The Purpose</span>
+                <p class="section-text">Klove AI exists to transform uncertainty into a structured science. Because when the path is clear, the journey is no longer a challenge—it becomes an evolution.</p>
             </div>
         </div>
         <div class="footer-grid">
             <div class="nav-links">
+                <a href="#">Network</a>
                 <a href="#">LinkedIn</a>
+                <a href="#">Contact</a>
             </div>
             <div class="legal-tag">
                 &copy; 2026 Klove AI Systems Inc.