Spaces:

Luvinnme
/

ovelx-space

Running

App Files Files Community

Luvinnme commited on Sep 22

Commit

e0733c6

verified ·

1 Parent(s): e548e93

Build SkillChain, a decentralized learning-to-earn platform where:

Browse files

Learners own their progress & skills as NFTs (Soulbound Tokens = non-transferable).

Proof-of-Learning is recorded on blockchain → impossible to fake certificates.

Learn-to-Earn: Learners get crypto rewards or tokens for completing verified skill modules.

DAO-based education governance: The community votes on what courses matter (future of jobs).

Skill Economy: Employers, startups, or DAOs can recruit directly from the blockchain skill records.

🔑 Features

🎓 Decentralized Courses: Hosted by creators/educators, validated by peer reviews.

🏅 Skill NFTs / Soulbound Tokens: Certificates that are locked to your wallet.

💰 Crypto Incentives: Complete challenges → earn tokens → exchange or reinvest in advanced learning.

🗳️ DAO Governance: Learners + educators vote on new skill programs, making education future-proof.

🔍 Transparent Resume: Employers instantly verify your blockchain-based skills, no need for CV inflation.
- Initial Deployment

Files changed (3) hide show

README.md +7 -5
index.html +329 -18
prompts.txt +23 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Ovelx Space
-emoji: 📉
-colorFrom: purple
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: ovelx-space
+emoji: 🐳
+colorFrom: green
+colorTo: red
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,330 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SkillChain | Decentralized Learn-to-Earn Platform</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: #0f172a;
+            color: #f8fafc;
+        }
+        .gradient-text {
+            background: linear-gradient(90deg, #3b82f6, #8b5cf6);
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+        }
+        .glass-card {
+            background: rgba(15, 23, 42, 0.7);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+    </style>
+</head>
+<body class="min-h-screen">
+    <!-- Hero Section with Vanta.js Globe -->
+    <div id="hero" class="relative h-screen flex items-center justify-center overflow-hidden">
+        <div class="absolute inset-0 z-0" id="vanta-globe"></div>
+        <div class="container mx-auto px-6 z-10 text-center">
+            <h1 class="text-5xl md:text-7xl font-bold mb-6 gradient-text" data-aos="fade-down">
+                SkillChain
+            </h1>
+            <p class="text-xl md:text-2xl text-gray-300 mb-10 max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="200">
+                The decentralized learn-to-earn platform where your skills become verifiable NFTs
+            </p>
+            <div class="flex flex-col sm:flex-row gap-4 justify-center" data-aos="fade-up" data-aos-delay="400">
+                <a href="#features" class="px-8 py-3 bg-indigo-600 hover:bg-indigo-700 rounded-full font-medium transition-all">
+                    Explore Features
+                </a>
+                <a href="#how-it-works" class="px-8 py-3 border border-indigo-400 hover:bg-indigo-900/30 rounded-full font-medium transition-all">
+                    How It Works
+                </a>
+            </div>
+        </div>
+        <div class="absolute bottom-10 left-0 right-0 flex justify-center">
+            <a href="#features" class="animate-bounce">
+                <i data-feather="chevron-down" class="text-gray-300 w-10 h-10"></i>
+            </a>
+        </div>
+    </div>
+    <!-- Features Section -->
+    <section id="features" class="py-20 bg-gradient-to-b from-slate-900 to-slate-800">
+        <div class="container mx-auto px-6">
+            <div class="text-center mb-16" data-aos="fade-up">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4">Revolutionizing Education</h2>
+                <p class="text-gray-400 max-w-2xl mx-auto">
+                    SkillChain combines blockchain technology with education to create a transparent, rewarding learning ecosystem
+                </p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+                <!-- Feature 1 -->
+                <div class="glass-card p-8 rounded-xl" data-aos="fade-up" data-aos-delay="100">
+                    <div class="w-14 h-14 bg-indigo-900/50 rounded-lg flex items-center justify-center mb-6">
+                        <i data-feather="book" class="w-6 h-6 text-indigo-400"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-3">Decentralized Courses</h3>
+                    <p class="text-gray-400">
+                        Peer-reviewed courses hosted by educators worldwide, free from centralized control
+                    </p>
+                </div>
+                <!-- Feature 2 -->
+                <div class="glass-card p-8 rounded-xl" data-aos="fade-up" data-aos-delay="200">
+                    <div class="w-14 h-14 bg-indigo-900/50 rounded-lg flex items-center justify-center mb-6">
+                        <i data-feather="award" class="w-6 h-6 text-indigo-400"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-3">Skill NFTs</h3>
+                    <p class="text-gray-400">
+                        Soulbound tokens that represent your verified skills, permanently tied to your wallet
+                    </p>
+                </div>
+                <!-- Feature 3 -->
+                <div class="glass-card p-8 rounded-xl" data-aos="fade-up" data-aos-delay="300">
+                    <div class="w-14 h-14 bg-indigo-900/50 rounded-lg flex items-center justify-center mb-6">
+                        <i data-feather="dollar-sign" class="w-6 h-6 text-indigo-400"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-3">Learn-to-Earn</h3>
+                    <p class="text-gray-400">
+                        Earn crypto rewards for completing courses and demonstrating your skills
+                    </p>
+                </div>
+                <!-- Feature 4 -->
+                <div class="glass-card p-8 rounded-xl" data-aos="fade-up" data-aos-delay="400">
+                    <div class="w-14 h-14 bg-indigo-900/50 rounded-lg flex items-center justify-center mb-6">
+                        <i data-feather="users" class="w-6 h-6 text-indigo-400"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-3">DAO Governance</h3>
+                    <p class="text-gray-400">
+                        Community-driven decisions on course offerings, rewards, and platform evolution
+                    </p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- How It Works Section -->
+    <section id="how-it-works" class="py-20 bg-slate-800">
+        <div class="container mx-auto px-6">
+            <div class="text-center mb-16" data-aos="fade-up">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4">How SkillChain Works</h2>
+                <p class="text-gray-400 max-w-2xl mx-auto">
+                    A simple three-step process to transform your learning into verifiable assets
+                </p>
+            </div>
+            <div class="flex flex-col lg:flex-row items-center justify-between gap-12">
+                <!-- Step 1 -->
+                <div class="flex-1 text-center" data-aos="fade-right">
+                    <div class="relative mb-8">
+                        <div class="w-24 h-24 bg-indigo-900/30 rounded-full flex items-center justify-center mx-auto">
+                            <span class="text-3xl font-bold gradient-text">1</span>
+                        </div>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-3">Choose Your Course</h3>
+                    <p class="text-gray-400 max-w-md mx-auto">
+                        Browse our decentralized marketplace of peer-reviewed courses across various disciplines
+                    </p>
+                </div>
+                <!-- Arrow -->
+                <div class="hidden lg:block" data-aos="fade-up">
+                    <i data-feather="arrow-right" class="w-12 h-12 text-indigo-400"></i>
+                </div>
+                <!-- Step 2 -->
+                <div class="flex-1 text-center" data-aos="fade-up">
+                    <div class="relative mb-8">
+                        <div class="w-24 h-24 bg-indigo-900/30 rounded-full flex items-center justify-center mx-auto">
+                            <span class="text-3xl font-bold gradient-text">2</span>
+                        </div>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-3">Learn & Complete Challenges</h3>
+                    <p class="text-gray-400 max-w-md mx-auto">
+                        Engage with interactive content and complete verifiable skill challenges
+                    </p>
+                </div>
+                <!-- Arrow -->
+                <div class="hidden lg:block" data-aos="fade-up">
+                    <i data-feather="arrow-right" class="w-12 h-12 text-indigo-400"></i>
+                </div>
+                <!-- Step 3 -->
+                <div class="flex-1 text-center" data-aos="fade-left">
+                    <div class="relative mb-8">
+                        <div class="w-24 h-24 bg-indigo-900/30 rounded-full flex items-center justify-center mx-auto">
+                            <span class="text-3xl font-bold gradient-text">3</span>
+                        </div>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-3">Earn & Showcase</h3>
+                    <p class="text-gray-400 max-w-md mx-auto">
+                        Receive crypto rewards and immutable Skill NFTs for your verified achievements
+                    </p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Testimonials -->
+    <section class="py-20 bg-gradient-to-b from-slate-800 to-slate-900">
+        <div class="container mx-auto px-6">
+            <div class="text-center mb-16" data-aos="fade-up">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4">What Our Community Says</h2>
+                <p class="text-gray-400 max-w-2xl mx-auto">
+                    Hear from learners and educators transforming their futures with SkillChain
+                </p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <!-- Testimonial 1 -->
+                <div class="glass-card p-8 rounded-xl" data-aos="fade-up" data-aos-delay="100">
+                    <div class="flex items-center mb-6">
+                        <img src="http://static.photos/people/200x200/1" alt="User" class="w-12 h-12 rounded-full mr-4">
+                        <div>
+                            <h4 class="font-semibold">Sarah K.</h4>
+                            <p class="text-sm text-indigo-400">Web3 Developer</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-300">
+                        "SkillChain helped me transition careers by providing verifiable blockchain credentials that employers actually trust."
+                    </p>
+                </div>
+                <!-- Testimonial 2 -->
+                <div class="glass-card p-8 rounded-xl" data-aos="fade-up" data-aos-delay="200">
+                    <div class="flex items-center mb-6">
+                        <img src="http://static.photos/people/200x200/2" alt="User" class="w-12 h-12 rounded-full mr-4">
+                        <div>
+                            <h4 class="font-semibold">Michael T.</h4>
+                            <p class="text-sm text-indigo-400">Educator</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-300">
+                        "As an educator, I love being able to create courses and get directly rewarded by the community for my contributions."
+                    </p>
+                </div>
+                <!-- Testimonial 3 -->
+                <div class="glass-card p-8 rounded-xl" data-aos="fade-up" data-aos-delay="300">
+                    <div class="flex items-center mb-6">
+                        <img src="http://static.photos/people/200x200/3" alt="User" class="w-12 h-12 rounded-full mr-4">
+                        <div>
+                            <h4 class="font-semibold">David L.</h4>
+                            <p class="text-sm text-indigo-400">HR Director</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-300">
+                        "Hiring through SkillChain's verified skill records has saved us countless hours in vetting candidates' qualifications."
+                    </p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- CTA Section -->
+    <section class="py-20 bg-slate-900">
+        <div class="container mx-auto px-6 text-center">
+            <div class="max-w-3xl mx-auto" data-aos="fade-up">
+                <h2 class="text-3xl md:text-4xl font-bold mb-6">Join the Education Revolution</h2>
+                <p class="text-xl text-gray-400 mb-10">
+                    Be part of the future where learning is transparent, rewarding, and owned by you
+                </p>
+                <div class="flex flex-col sm:flex-row gap-4 justify-center">
+                    <a href="#" class="px-8 py-4 bg-indigo-600 hover:bg-indigo-700 rounded-full font-medium transition-all text-lg">
+                        Get Started
+                    </a>
+                    <a href="#" class="px-8 py-4 border border-indigo-400 hover:bg-indigo-900/30 rounded-full font-medium transition-all text-lg">
+                        Explore Courses
+                    </a>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="bg-slate-900 border-t border-slate-800 py-12">
+        <div class="container mx-auto px-6">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+                <div>
+                    <h3 class="text-xl font-bold mb-4 gradient-text">SkillChain</h3>
+                    <p class="text-gray-400">
+                        The decentralized learn-to-earn platform for the future of education
+                    </p>
+                </div>
+                <div>
+                    <h4 class="font-semibold mb-4">Platform</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">Courses</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">Rewards</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">Governance</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">Marketplace</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="font-semibold mb-4">Resources</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">Whitepaper</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="font-semibold mb-4">Connect</h4>
+                    <div class="flex space-x-4">
+                        <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="twitter"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="discord"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="github"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="telegram"></i></a>
+                    </div>
+                </div>
+            </div>
+            <div class="border-t border-slate-800 mt-12 pt-8 text-center text-gray-500">
+                <p>© 2023 SkillChain. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Initialize Vanta.js globe
+        VANTA.GLOBE({
+            el: "#vanta-globe",
+            mouseControls: true,
+            touchControls: true,
+            gyroControls: false,
+            minHeight: 200.00,
+            minWidth: 200.00,
+            scale: 1.00,
+            scaleMobile: 1.00,
+            color: 0x3b82f6,
+            backgroundColor: 0x0f172a,
+            size: 0.8
+        });
+        // Initialize AOS
+        AOS.init({
+            duration: 800,
+            easing: 'ease-in-out',
+            once: true
+        });
+        // Initialize Feather Icons
+        feather.replace();
+    </script>
+</body>
 </html>

prompts.txt ADDED Viewed

	@@ -0,0 +1,23 @@

+Build SkillChain, a decentralized learning-to-earn platform where:
+Learners own their progress & skills as NFTs (Soulbound Tokens = non-transferable).
+Proof-of-Learning is recorded on blockchain → impossible to fake certificates.
+Learn-to-Earn: Learners get crypto rewards or tokens for completing verified skill modules.
+DAO-based education governance: The community votes on what courses matter (future of jobs).
+Skill Economy: Employers, startups, or DAOs can recruit directly from the blockchain skill records.
+🔑 Features
+🎓 Decentralized Courses: Hosted by creators/educators, validated by peer reviews.
+🏅 Skill NFTs / Soulbound Tokens: Certificates that are locked to your wallet.
+💰 Crypto Incentives: Complete challenges → earn tokens → exchange or reinvest in advanced learning.
+🗳️ DAO Governance: Learners + educators vote on new skill programs, making education future-proof.
+🔍 Transparent Resume: Employers instantly verify your blockchain-based skills, no need for CV inflation.