Spaces:

CrucibleLab
/

README

Running

App Files Files Community

Steelskull commited on Jun 4

Commit

a264adb

verified ·

1 Parent(s): 09ba04e

Update README.md

Browse files

Files changed (1) hide show

README.md +897 -1

README.md CHANGED Viewed

@@ -7,4 +7,900 @@ sdk: static
 pinned: false
 ---
-Edit this `README.md` markdown file to author your organization card.

 pinned: false
 ---
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Crucible Labs - Where Steel Meets Stars</title>
+    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@300;400;500;600;700&family=Bebas+Neue&display=swap" rel="stylesheet">
+    <style>
+        /* Reset and Base Styles */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        :root {
+            /* Steel's Colors */
+            --steel-primary: #D4A574;
+            --steel-secondary: #B8860B;
+            --steel-accent: #FFD700;
+            --steel-dark: #8B6914;
+            /* Tarek's Colors */
+            --tarek-primary: #00CED1;
+            --tarek-secondary: #4682B4;
+            --tarek-accent: #00FFFF;
+            --tarek-dark: #191970;
+            /* Shared Colors */
+            --bg-primary: #0A0A0F;
+            --bg-secondary: #141420;
+            --text-primary: #FFFFFF;
+            --text-secondary: #B0B0B0;
+            --border-glow: rgba(255, 255, 255, 0.1);
+        }
+        body {
+            font-family: 'Space Grotesk', sans-serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.6;
+            overflow-x: hidden;
+            position: relative;
+        }
+        /* Animated Background */
+        body::before {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background:
+                radial-gradient(circle at 20% 50%, rgba(212, 165, 116, 0.1) 0%, transparent 40%),
+                radial-gradient(circle at 80% 50%, rgba(0, 206, 209, 0.1) 0%, transparent 40%);
+            pointer-events: none;
+            z-index: -2;
+        }
+        /* Particle Animation Background */
+        .particles {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            z-index: -1;
+        }
+        .particle {
+            position: absolute;
+            width: 2px;
+            height: 2px;
+            border-radius: 50%;
+            opacity: 0;
+            animation: float 15s infinite;
+        }
+        .particle.steel {
+            background: var(--steel-accent);
+            box-shadow: 0 0 6px var(--steel-accent);
+        }
+        .particle.tarek {
+            background: var(--tarek-accent);
+            box-shadow: 0 0 6px var(--tarek-accent);
+        }
+        @keyframes float {
+            0%, 100% {
+                opacity: 0;
+                transform: translateY(100vh) scale(0);
+            }
+            10% {
+                opacity: 1;
+                transform: translateY(90vh) scale(1);
+            }
+            90% {
+                opacity: 1;
+                transform: translateY(10vh) scale(1);
+            }
+        }
+        /* Header Styles */
+        .header {
+            position: relative;
+            padding: 60px 0;
+            text-align: center;
+            background: linear-gradient(180deg, rgba(20, 20, 32, 0.8) 0%, rgba(10, 10, 15, 0.8) 100%);
+            border-bottom: 2px solid transparent;
+            background-clip: padding-box;
+            overflow: hidden;
+        }
+        .header::before {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 2px;
+            background: linear-gradient(90deg, var(--steel-primary) 0%, var(--tarek-primary) 100%);
+            animation: borderFlow 3s ease-in-out infinite;
+        }
+        @keyframes borderFlow {
+            0%, 100% { transform: translateX(-100%); }
+            50% { transform: translateX(100%); }
+        }
+        .logo-container {
+            display: inline-block;
+            position: relative;
+            margin-bottom: 30px;
+        }
+        .logo {
+            font-family: 'Bebas Neue', cursive;
+            font-size: 5rem;
+            font-weight: 900;
+            letter-spacing: 0.1em;
+            position: relative;
+            display: inline-block;
+        }
+        .logo-steel {
+            background: linear-gradient(135deg, var(--steel-primary) 0%, var(--steel-accent) 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            text-shadow: 0 0 30px rgba(212, 165, 116, 0.5);
+        }
+        .logo-tarek {
+            background: linear-gradient(135deg, var(--tarek-primary) 0%, var(--tarek-accent) 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            text-shadow: 0 0 30px rgba(0, 206, 209, 0.5);
+        }
+        .tagline {
+            font-size: 1.2rem;
+            color: var(--text-secondary);
+            margin-top: 10px;
+            letter-spacing: 0.2em;
+            text-transform: uppercase;
+        }
+        /* Navigation */
+        .nav {
+            position: sticky;
+            top: 0;
+            background: rgba(10, 10, 15, 0.95);
+            backdrop-filter: blur(10px);
+            padding: 20px 0;
+            z-index: 1000;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .nav-container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 20px;
+            display: flex;
+            justify-content: center;
+            gap: 40px;
+            flex-wrap: wrap;
+        }
+        .nav-link {
+            color: var(--text-secondary);
+            text-decoration: none;
+            font-weight: 500;
+            text-transform: uppercase;
+            letter-spacing: 0.1em;
+            position: relative;
+            transition: all 0.3s ease;
+            padding: 5px 10px;
+        }
+        .nav-link::before {
+            content: '';
+            position: absolute;
+            bottom: -5px;
+            left: 0;
+            width: 0;
+            height: 2px;
+            background: linear-gradient(90deg, var(--steel-primary) 0%, var(--tarek-primary) 100%);
+            transition: width 0.3s ease;
+        }
+        .nav-link:hover {
+            color: var(--text-primary);
+        }
+        .nav-link:hover::before {
+            width: 100%;
+        }
+        /* Container */
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 60px 20px;
+        }
+        /* Section Styles */
+        .section {
+            margin-bottom: 100px;
+            opacity: 0;
+            transform: translateY(30px);
+            animation: fadeInUp 0.8s ease forwards;
+        }
+        @keyframes fadeInUp {
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        .section-title {
+            font-family: 'Orbitron', sans-serif;
+            font-size: 3rem;
+            margin-bottom: 40px;
+            text-align: center;
+            position: relative;
+            display: inline-block;
+            width: 100%;
+        }
+        .section-title span {
+            position: relative;
+            z-index: 1;
+        }
+        .section-title::before,
+        .section-title::after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            width: 100px;
+            height: 1px;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3));
+        }
+        .section-title::before {
+            left: 20%;
+        }
+        .section-title::after {
+            right: 20%;
+            background: linear-gradient(90deg, rgba(255, 255, 255, 0.3), transparent);
+        }
+        /* About Section */
+        .about-content {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 60px;
+            align-items: center;
+        }
+        .about-text {
+            font-size: 1.1rem;
+            line-height: 1.8;
+            color: var(--text-secondary);
+        }
+        .about-visual {
+            position: relative;
+            height: 400px;
+            background: radial-gradient(circle at center, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .fusion-orb {
+            width: 200px;
+            height: 200px;
+            position: relative;
+            animation: pulse 4s ease-in-out infinite;
+        }
+        .fusion-orb::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 50%;
+            height: 100%;
+            background: radial-gradient(circle at left center, var(--steel-primary) 0%, transparent 70%);
+            filter: blur(20px);
+        }
+        .fusion-orb::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: 50%;
+            height: 100%;
+            background: radial-gradient(circle at right center, var(--tarek-primary) 0%, transparent 70%);
+            filter: blur(20px);
+        }
+        @keyframes pulse {
+            0%, 100% { transform: scale(1); }
+            50% { transform: scale(1.1); }
+        }
+        /* Models Section */
+        .models-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+            gap: 30px;
+            margin-top: 40px;
+        }
+        .model-card {
+            background: rgba(20, 20, 32, 0.6);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 15px;
+            padding: 30px;
+            position: relative;
+            overflow: hidden;
+            transition: all 0.3s ease;
+            cursor: pointer;
+        }
+        .model-card::before {
+            content: '';
+            position: absolute;
+            top: -2px;
+            left: -2px;
+            right: -2px;
+            bottom: -2px;
+            background: linear-gradient(135deg, var(--steel-primary), var(--tarek-primary));
+            border-radius: 15px;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+            z-index: -1;
+        }
+        .model-card:hover {
+            transform: translateY(-5px);
+        }
+        .model-card:hover::before {
+            opacity: 1;
+        }
+        .model-card-inner {
+            position: relative;
+            background: var(--bg-secondary);
+            border-radius: 13px;
+            padding: 25px;
+            height: 100%;
+        }
+        .model-name {
+            font-family: 'Orbitron', sans-serif;
+            font-size: 1.5rem;
+            margin-bottom: 15px;
+            background: linear-gradient(135deg, var(--steel-accent), var(--tarek-accent));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        .model-description {
+            color: var(--text-secondary);
+            margin-bottom: 20px;
+            line-height: 1.6;
+        }
+        .model-stats {
+            display: flex;
+            gap: 20px;
+            margin-top: auto;
+        }
+        .stat {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        .stat-value {
+            font-family: 'Orbitron', sans-serif;
+            font-size: 1.2rem;
+            color: var(--text-primary);
+        }
+        .stat-label {
+            font-size: 0.8rem;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+        }
+        /* Team Section */
+        .team-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+            gap: 60px;
+            margin-top: 60px;
+        }
+        .team-member {
+            position: relative;
+            padding: 40px;
+            border-radius: 20px;
+            overflow: hidden;
+            transition: all 0.3s ease;
+        }
+        /* Steel's Card Style */
+        .team-member.steel {
+            background: linear-gradient(135deg, rgba(212, 165, 116, 0.1) 0%, rgba(139, 105, 20, 0.05) 100%);
+            border: 2px solid var(--steel-dark);
+            box-shadow: 0 0 30px rgba(212, 165, 116, 0.2);
+        }
+        .team-member.steel::before {
+            content: '';
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: radial-gradient(circle, rgba(255, 215, 0, 0.1) 0%, transparent 70%);
+            animation: rotate 20s linear infinite;
+        }
+        /* Tarek's Card Style */
+        .team-member.tarek {
+            background: linear-gradient(135deg, rgba(0, 206, 209, 0.1) 0%, rgba(25, 25, 112, 0.05) 100%);
+            border: 2px solid var(--tarek-dark);
+            box-shadow: 0 0 30px rgba(0, 206, 209, 0.2);
+        }
+        .team-member.tarek::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><circle cx="50" cy="50" r="2" fill="rgba(0,255,255,0.5)"/><circle cx="150" cy="150" r="2" fill="rgba(0,255,255,0.5)"/><circle cx="100" cy="100" r="3" fill="rgba(0,206,209,0.7)"/></svg>') repeat;
+            animation: twinkle 3s ease-in-out infinite;
+        }
+        @keyframes rotate {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+        }
+        @keyframes twinkle {
+            0%, 100% { opacity: 0.3; }
+            50% { opacity: 1; }
+        }
+        .member-content {
+            position: relative;
+            z-index: 1;
+        }
+        .member-avatar {
+            width: 120px;
+            height: 120px;
+            border-radius: 50%;
+            margin-bottom: 20px;
+            position: relative;
+            overflow: hidden;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-family: 'Bebas Neue', cursive;
+            font-size: 3rem;
+        }
+        .member-avatar img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+        .steel .member-avatar {
+            background: linear-gradient(135deg, var(--steel-primary), var(--steel-dark));
+            box-shadow: 0 0 30px rgba(212, 165, 116, 0.5);
+            color: var(--bg-primary);
+        }
+        .tarek .member-avatar {
+            background: linear-gradient(135deg, var(--tarek-primary), var(--tarek-dark));
+            box-shadow: 0 0 30px rgba(0, 206, 209, 0.5);
+            color: var(--bg-primary);
+        }
+        .member-name {
+            font-family: 'Orbitron', sans-serif;
+            font-size: 2rem;
+            margin-bottom: 10px;
+        }
+        .steel .member-name {
+            color: var(--steel-accent);
+            text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
+        }
+        .tarek .member-name {
+            color: var(--tarek-accent);
+            text-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
+        }
+        .member-role {
+            color: var(--text-secondary);
+            margin-bottom: 20px;
+            text-transform: uppercase;
+            letter-spacing: 0.1em;
+        }
+        .member-bio {
+            line-height: 1.8;
+            color: var(--text-secondary);
+            margin-bottom: 20px;
+        }
+        .member-links {
+            display: flex;
+            gap: 15px;
+        }
+        .member-link {
+            padding: 8px 20px;
+            border-radius: 25px;
+            text-decoration: none;
+            font-weight: 500;
+            transition: all 0.3s ease;
+        }
+        .steel .member-link {
+            background: rgba(212, 165, 116, 0.2);
+            color: var(--steel-accent);
+            border: 1px solid var(--steel-primary);
+        }
+        .steel .member-link:hover {
+            background: rgba(212, 165, 116, 0.3);
+            box-shadow: 0 0 15px rgba(212, 165, 116, 0.5);
+        }
+        .tarek .member-link {
+            background: rgba(0, 206, 209, 0.2);
+            color: var(--tarek-accent);
+            border: 1px solid var(--tarek-primary);
+        }
+        .tarek .member-link:hover {
+            background: rgba(0, 206, 209, 0.3);
+            box-shadow: 0 0 15px rgba(0, 206, 209, 0.5);
+        }
+        /* Community Section */
+        .community-content {
+            text-align: center;
+            max-width: 800px;
+            margin: 0 auto;
+        }
+        .community-stats {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 40px;
+            margin: 60px 0;
+        }
+        .community-stat {
+            padding: 30px;
+            background: rgba(20, 20, 32, 0.6);
+            border-radius: 15px;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            transition: all 0.3s ease;
+        }
+        .community-stat:hover {
+            transform: translateY(-5px);
+            border-color: rgba(255, 255, 255, 0.2);
+        }
+        .stat-number {
+            font-family: 'Orbitron', sans-serif;
+            font-size: 3rem;
+            font-weight: 700;
+            background: linear-gradient(135deg, var(--steel-primary), var(--tarek-primary));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        .join-button {
+            display: inline-block;
+            padding: 15px 40px;
+            font-family: 'Orbitron', sans-serif;
+            font-size: 1.2rem;
+            font-weight: 600;
+            text-decoration: none;
+            color: var(--text-primary);
+            background: linear-gradient(135deg, var(--steel-primary), var(--tarek-primary));
+            border-radius: 50px;
+            position: relative;
+            overflow: hidden;
+            transition: all 0.3s ease;
+            margin-top: 40px;
+        }
+        .join-button:hover {
+            transform: scale(1.05);
+            box-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
+        }
+        .join-button::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: rgba(255, 255, 255, 0.3);
+            transition: left 0.5s ease;
+        }
+        .join-button:hover::before {
+            left: 100%;
+        }
+        /* Footer */
+        .footer {
+            background: rgba(10, 10, 15, 0.9);
+            padding: 40px 0;
+            text-align: center;
+            border-top: 1px solid rgba(255, 255, 255, 0.1);
+            margin-top: 100px;
+        }
+        .footer-text {
+            color: var(--text-secondary);
+            margin-bottom: 20px;
+        }
+        .footer-links {
+            display: flex;
+            justify-content: center;
+            gap: 30px;
+            flex-wrap: wrap;
+        }
+        .footer-link {
+            color: var(--text-secondary);
+            text-decoration: none;
+            transition: color 0.3s ease;
+        }
+        .footer-link:hover {
+            color: var(--text-primary);
+        }
+        /* Responsive Design */
+        @media (max-width: 768px) {
+            .logo {
+                font-size: 3rem;
+            }
+            .section-title {
+                font-size: 2rem;
+            }
+            .about-content {
+                grid-template-columns: 1fr;
+                gap: 40px;
+            }
+            .models-grid,
+            .team-grid {
+                grid-template-columns: 1fr;
+            }
+            .community-stats {
+                grid-template-columns: 1fr;
+                gap: 20px;
+            }
+            .nav-container {
+                gap: 20px;
+            }
+        }
+        /* Featured Models Banner */
+        .featured-banner {
+            background: linear-gradient(135deg, rgba(212, 165, 116, 0.1), rgba(0, 206, 209, 0.1));
+            border: 2px solid transparent;
+            background-clip: padding-box;
+            border-radius: 20px;
+            padding: 40px;
+            margin-bottom: 60px;
+            position: relative;
+            overflow: hidden;
+        }
+        .featured-banner::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            border-radius: 20px;
+            padding: 2px;
+            background: linear-gradient(135deg, var(--steel-primary), var(--tarek-primary));
+            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+            -webkit-mask-composite: xor;
+            mask-composite: exclude;
+        }
+        .featured-title {
+            font-family: 'Orbitron', sans-serif;
+            font-size: 2rem;
+            text-align: center;
+            margin-bottom: 30px;
+            background: linear-gradient(135deg, var(--steel-accent), var(--tarek-accent));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+    </style>
+</head>
+<body>
+    <!-- Particle Background -->
+    <div class="particles" id="particles"></div>
+    <!-- Header -->
+    <header class="header">
+        <div class="logo-container">
+            <h1 class="logo">
+                <span class="logo-steel">CRUCIBLE</span>
+                <span class="logo-tarek">LABS</span>
+            </h1>
+        </div>
+    </header>
+    <!-- Main Content -->
+    <main class="container">
+        <!-- About Section -->
+        <section id="about" class="section">
+            <h2 class="section-title"><span>About Crucible Labs</span></h2>
+            <div class="about-content">
+                <div class="about-text">
+                    <p>Welcome to Crucible Labs, where the belief is that the best ideas come from the crucible of collaboration.</p>
+                </div>
+                <div class="about-visual">
+                    <div class="fusion-orb"></div>
+                </div>
+            </div>
+        </section>
+        <!-- Featured Models -->
+        <section id="featured" class="section">
+            <div class="featured-banner">
+                <h3 class="featured-title">🔥 Featured Experiments 🌟</h3>
+                <div class="models-grid">
+                    <!--<div class="model-card">
+                        <div class="model-card-inner">
+                            <h4 class="model-name"> </h4>
+                            <p class="model-description"> </p>
+                            <div class="model-stats">
+                                <div class="stat">
+                                    <span class="stat-value"> </span>
+                                    <span class="stat-label">Parameters</span>
+                                </div>
+                                <div class="stat">
+                                    <span class="stat-value"> </span>
+                                    <span class="stat-label"> </span>
+                                </div>
+                                <div class="stat">
+                                    <span class="stat-value">12K</span>
+                                    <span class="stat-label">Downloads</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="model-card">
+                        <div class="model-card-inner">
+                            <h4 class="model-name"> </h4>
+                            <p class="model-description"> </p>
+                            <div class="model-stats">
+                                <div class="stat">
+                                    <span class="stat-value"> </span>
+                                    <span class="stat-label">Parameters</span>
+                                </div>
+                                <div class="stat">
+                                    <span class="stat-value"> </span>
+                                    <span class="stat-label">Rating</span>
+                                </div>
+                                <div class="stat">
+                                    <span class="stat-value"> </span>
+                                    <span class="stat-label">Downloads</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>-->
+                </div>
+            </div>
+        </section>
+        <!-- Models Section -->
+        <section id="models" class="section">
+            <h2 class="section-title"><span>Our Models</span></h2>
+            <div class="models-grid">
+                <!--<div class="model-card">
+                    <div class="model-card-inner">
+                        <h4 class="model-name"> </h4>
+                        <p class="model-description"> </p>
+                        <div class="model-stats">
+                            <div class="stat">
+                                <span class="stat-value"> </span>
+                                <span class="stat-label">Parameters</span>
+                            </div>
+                            <div class="stat">
+                                <span class="stat-value"> </span>
+                                <span class="stat-label">Rating</span>
+                            </div>
+                            <div class="stat">
+                                <span class="stat-value"> </span>
+                                <span class="stat-label">Downloads</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="model-card">
+                    <div class="model-card-inner">
+                        <h4 class="model-name"> </h4>
+                        <p class="model-description"> </p>
+                        <div class="model-stats">
+                            <div class="stat">
+                                <span class="stat-value"> </span>
+                                <span class="stat-label">Parameters</span>
+                            </div>
+                            <div class="stat">
+                                <span class="stat-value"> </span>
+                                <span class="stat-label">Rating</span>
+                            </div>
+                            <div class="stat">
+                                <span class="stat-value"> </span>
+                                <span class="stat-label">Downloads</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="model-card">
+                    <div class="model-card-inner">
+                        <h4 class="model-name"> </h4>
+                        <p class="model-description"> </p>
+                        <div class="model-stats">
+                            <div class="stat">
+                                <span class="stat-value"> </span>
+                                <span class="stat-label"> </span>
+                            </div>
+                            <div class="stat">
+                                <span class="stat-value"> </span>
+                                <span class="stat-label">Rating</span>
+                            </div>
+                            <div class="stat">
+                                <span class="stat-value"> </span>
+                                <span class="stat-label"> </span>
+                            </div>
+                        </div>
+                    </div>
+                </div>-->
+            </div>
+        </section>
+        <!-- Team Section -->
+        <section id="team" class="section">
+            <h2 class="section-title"><span>Team</span></h2>
+            <div class="team-grid">
+                <div class="team-member steel">
+                    <div class="member-content">
+                        <div class="member-avatar">
+                            <img src="https://cdn-avatars.huggingface.co/v1/production/uploads/64545af5ec40bbbd01242ca6/0DigVMV0L5YCnyluoEOiX.jpeg" alt="Steelskull">
+                        </div>
+                        <h3 class="member-name">Steelskull</h3>
+                        <p class="member-role">Paramancer</p>
+                        <p class="member-bio">
+                        </p>
+                        <div class="member-links">
+                            <a href="https://huggingface.co/Steelskull" class="member-link" target="_blank">HuggingFace</a>
+                            <a href="https://ko-fi.com/steelskull" class="member-link" target="_blank">Ko-fi</a>
+                        </div>
+                    </div>
+                </div>
+                <div class="team-member tarek">
+                    <div class="member-content">
+                        <div class="member-avatar">T</div>
+                        <h3 class="member-name">Tarek07</h3>
+                        <p class="member-role">Mad-Lad</p>
+                        <p class="member-bio">
+                        </p>
+                        <div class="member-links">
+                            <a href="https://huggingface.co/Tarek07" class="member-link" target="_blank">HuggingFace</a>
+                            <a href="https://ko-fi.com/tarek07" class="member-link" target="_blank">Ko-fi</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+    <!-- Footer -->
+    <footer class="footer">
+        <p class="footer-text">© 2025 Crucible Labs. Forged with passion, powered by innovation.</p>
+    </footer>
+    <script>
+        // Create particle effect
+        function createParticles() {
+            const particlesContainer = document.getElementById('particles');
+            const particleCount = 50;
+            for (let i = 0; i < particleCount; i++) {
+                const particle = document.createElement('div');
+                particle.className = `particle ${Math.random() > 0.5 ? 'steel' : 'tarek'}`;
+                particle.style.left = Math.random() * 100 + '%';
+                particle.style.animationDelay = Math.random() * 15 + 's';
+                particle.style.animationDuration = (15 + Math.random() * 10) + 's';
+                particlesContainer.appendChild(particle);
+            }
+        }
+        // Smooth scrolling for navigation links
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                const target = document.querySelector(this.getAttribute('href'));
+                if (target) {
+                    target.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'start'
+                    });
+                }
+            });
+        });
+        // Intersection Observer for fade-in animations
+        const observerOptions = {
+            threshold: 0.1,
+            rootMargin: '0px 0px -100px 0px'
+        };
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.style.animationDelay = '0.2s';
+                    entry.target.style.animationPlayState = 'running';
+                }
+            });
+        }, observerOptions);
+        // Observe all sections
+        document.querySelectorAll('.section').forEach(section => {
+            section.style.animationPlayState = 'paused';
+            observer.observe(section);
+        });
+        // Initialize particles
+        createParticles();
+        // Add hover effect to model cards
+        document.querySelectorAll('.model-card').forEach(card => {
+            card.addEventListener('mouseenter', function() {
+                this.style.transform = 'translateY(-10px) scale(1.02)';
+            });
+            card.addEventListener('mouseleave', function() {
+                this.style.transform = 'translateY(0) scale(1)';
+            });
+        });
+    </script>
+</body>
+</html>