Upload index.html

index.html

@@ -1622,6 +1622,249 @@
             background-clip: text;
         }
 
+        /* Competitors Section */
+        .competitors {
+            padding: 100px 0 110px;
+            background: var(--blue-900);
+            border-top: 1px solid var(--blue-600);
+            position: relative;
+            overflow: hidden;
+        }
+        .competitors::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background:
+                radial-gradient(ellipse 60% 40% at 20% 50%, rgba(200,150,12,0.04) 0%, transparent 50%),
+                radial-gradient(ellipse 60% 40% at 80% 50%, rgba(200,150,12,0.04) 0%, transparent 50%);
+            pointer-events: none;
+            z-index: 0;
+        }
+        .competitors .section-header {
+            display: flex;
+            align-items: center;
+            gap: 20px;
+            justify-content: center;
+            margin-bottom: 24px;
+            padding: 0 40px;
+            position: relative;
+            z-index: 1;
+        }
+        .competitors-intro {
+            font-size: 16px;
+            color: var(--blue-200);
+            text-align: center;
+            max-width: 500px;
+            margin: 0 auto 56px;
+            font-style: italic;
+            font-family: var(--font-display);
+            position: relative;
+            z-index: 1;
+        }
+        .competitor-grid {
+            display: flex;
+            gap: 32px;
+            justify-content: center;
+            flex-wrap: wrap;
+            position: relative;
+            z-index: 1;
+        }
+        .competitor-card {
+            position: relative;
+            background: linear-gradient(145deg, rgba(20,20,20,0.98) 0%, rgba(10,10,10,0.98) 100%);
+            background-color: var(--blue-900);
+            border: 1px solid rgba(255,255,255,0.08);
+            border-radius: 24px;
+            padding: 40px 36px 32px;
+            width: 280px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 20px;
+            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+            overflow: hidden;
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
+            cursor: pointer;
+        }
+        .competitor-glow {
+            position: absolute;
+            top: -50%;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 200%;
+            height: 200%;
+            background: radial-gradient(ellipse at center, rgba(200,150,12,0.08) 0%, transparent 60%);
+            opacity: 0;
+            transition: opacity 0.5s ease;
+            pointer-events: none;
+        }
+        .competitor-card:hover .competitor-glow {
+            opacity: 1;
+        }
+        .competitor-card::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            border-radius: 24px;
+            background: linear-gradient(120deg,
+                transparent 20%,
+                rgba(255,255,255,0.06) 50%,
+                transparent 80%);
+            background-size: 200% 100%;
+            opacity: 0;
+            transition: opacity 0.4s ease;
+            pointer-events: none;
+        }
+        .competitor-card:hover::before {
+            opacity: 1;
+            animation: cardShimmer 1.4s ease forwards;
+        }
+        .competitor-card:hover {
+            border-color: rgba(200,150,12,0.35);
+            transform: translateY(-12px) scale(1.03);
+            box-shadow:
+                0 0 0 1px rgba(200,150,12,0.15),
+                0 0 48px rgba(200,150,12,0.12),
+                0 32px 64px rgba(0,0,0,0.8),
+                inset 0 1px 0 rgba(255,255,255,0.15),
+                inset 0 -1px 0 rgba(255,255,255,0.04);
+        }
+        .competitor-avatar-wrap {
+            position: relative;
+            z-index: 1;
+        }
+        .competitor-avatar-ring {
+            position: relative;
+            width: 120px;
+            height: 120px;
+        }
+        .competitor-avatar-ring::before {
+            content: '';
+            position: absolute;
+            inset: -4px;
+            border-radius: 50%;
+            background: conic-gradient(
+                rgba(255,255,255,0) 0deg,
+                rgba(255,255,255,0) 200deg,
+                rgba(200,150,12,0.8) 270deg,
+                rgba(255,255,255,0) 340deg
+            );
+            opacity: 0;
+            transition: opacity 0.4s ease;
+            animation: logoSpin 4s linear infinite paused;
+        }
+        .competitor-card:hover .competitor-avatar-ring::before {
+            opacity: 1;
+            animation-play-state: running;
+        }
+        .competitor-avatar {
+            position: absolute;
+            inset: 0;
+            border-radius: 50%;
+            overflow: hidden;
+            border: 2px solid rgba(255,255,255,0.12);
+            box-shadow:
+                0 0 0 4px rgba(255,255,255,0.04),
+                0 8px 32px rgba(0,0,0,0.7);
+            transition: all 0.4s ease;
+        }
+        .competitor-card:hover .competitor-avatar {
+            border-color: rgba(200,150,12,0.5);
+            box-shadow:
+                0 0 0 4px rgba(200,150,12,0.1),
+                0 0 40px rgba(200,150,12,0.25),
+                0 8px 40px rgba(0,0,0,0.8);
+        }
+        .competitor-avatar img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+        .competitor-info {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 12px;
+            z-index: 1;
+        }
+        .competitor-info h3 {
+            font-family: var(--font-display);
+            font-size: 26px;
+            font-weight: 700;
+            font-style: italic;
+            letter-spacing: -0.02em;
+            background: var(--gold-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            color: unset;
+            margin: 0;
+        }
+        .competitor-link {
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            font-size: 13px;
+            color: var(--blue-200);
+            font-family: var(--font-mono);
+            transition: all 0.3s ease;
+        }
+        .competitor-link:hover {
+            color: var(--accent-bright);
+        }
+        .competitor-link svg {
+            opacity: 0.6;
+            transition: all 0.3s ease;
+        }
+        .competitor-link:hover svg {
+            opacity: 1;
+        }
+        .competitor-tag {
+            position: absolute;
+            top: 16px;
+            right: 16px;
+            background: rgba(200,150,12,0.15);
+            border: 1px solid rgba(200,150,12,0.25);
+            color: var(--accent-bright);
+            font-family: var(--font-mono);
+            font-size: 10px;
+            font-weight: 600;
+            letter-spacing: 0.08em;
+            text-transform: uppercase;
+            padding: 5px 10px;
+            border-radius: 6px;
+            z-index: 1;
+        }
+        .competitor-cta {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 16px;
+            margin-top: 64px;
+            position: relative;
+            z-index: 1;
+        }
+        .competitor-cta p {
+            font-size: 14px;
+            color: var(--blue-300);
+            font-family: var(--font-display);
+            font-style: italic;
+        }
+        .competitor-cta .btn {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            padding: 14px 28px;
+            font-size: 14px;
+        }
+        .competitor-cta .btn svg {
+            opacity: 0.7;
+        }
+
         /* Footer */
         footer p {
             font-size: 13px;
@@ -1639,6 +1882,10 @@
             .carousel-item { width: 110px; padding: 18px 12px; }
             .carousel-logo { width: 52px; height: 52px; }
             .carousel-name { font-size: 11px; }
+            .competitor-grid { flex-direction: column; align-items: center; }
+            .competitor-card { width: 260px; padding: 32px 24px 24px; }
+            .competitor-avatar-ring { width: 100px; height: 100px; }
+            .competitor-cta { margin-top: 48px; }
         }
 
 </style>
@@ -1875,6 +2122,58 @@
             </div>
             </div>
         </section>
+
+        <section class="competitors">
+            <div class="container">
+                <div class="section-header">
+                    <div class="section-rule"></div>
+                    <h2>Our Competitors</h2>
+                    <div class="section-rule"></div>
+                </div>
+                <p class="competitors-intro">These are the labs we're watching. The ones pushing the envelope. The ones we hope never exceed our compute budget.</p>
+                <div class="competitor-grid">
+                    <div class="competitor-card">
+                        <div class="competitor-glow"></div>
+                        <div class="competitor-avatar-wrap">
+                            <div class="competitor-avatar-ring">
+                                <div class="competitor-avatar">
+                                    <img src="cromia-competitor.png" alt="CromIA">
+                                </div>
+                            </div>
+                        </div>
+                        <div class="competitor-info">
+                            <h3>CromIA</h3>
+                            <a href="https://huggingface.co/CromIA" target="_blank" class="competitor-link">
+                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
+                                huggingface.co/CromIA
+                            </a>
+                        </div>
+                        <div class="competitor-tag">Watching</div>
+                    </div>
+                    <div class="competitor-card">
+                        <div class="competitor-glow"></div>
+                        <div class="competitor-avatar-wrap">
+                            <div class="competitor-avatar-ring">
+                                <div class="competitor-avatar">
+                                    <img src="lh-tech-ai-competitor.png" alt="LH Tech AI">
+                                </div>
+                            </div>
+                        </div>
+                        <div class="competitor-info">
+                            <h3>LH Tech AI</h3>
+                            <a href="https://huggingface.co/LH-Tech-AI" target="_blank" class="competitor-link">
+                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
+                                huggingface.co/LH-Tech-AI
+                            </a>
+                        </div>
+                        <div class="competitor-tag">Watching</div>
+                    </div>
+                </div>
+                <div class="competitor-cta">
+                    <p>Know another competitor we should be monitoring? <a href="https://huggingface.co/CompactAI/Discussions" target="_blank" class="competitor-link">Open a community discussion.</a></p>
+                </div>
+            </div>
+        </section>
         <script>
             (function() {
                 var track = document.getElementById('carouselTrack');