File size: 9,344 Bytes
599dfb7 4ac0152 599dfb7 4ac0152 599dfb7 4ac0152 599dfb7 fcc97a9 599dfb7 fcc97a9 acc1137 29fff97 fcc97a9 29fff97 fcc97a9 1050cbd fcc97a9 1050cbd fcc97a9 1050cbd fcc97a9 599dfb7 fcc97a9 599dfb7 fcc97a9 599dfb7 fcc97a9 599dfb7 fcc97a9 599dfb7 fcc97a9 da65ac5 fcc97a9 599dfb7 fcc97a9 599dfb7 fcc97a9 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TrustChain - Blockchain Certificate Verification</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Space Grotesk', sans-serif;
background-color: #f8fafc;
color: #1e293b;
}
.glow-text {
text-shadow: 0 0 10px rgba(74, 222, 128, 0.3);
}
.gradient-border {
border: 2px solid transparent;
background: linear-gradient(#f8fafc, #f8fafc) padding-box,
linear-gradient(to right, #10b981, #3b82f6) border-box;
}
.hover-scale {
transition: transform 0.3s ease;
}
.hover-scale:hover {
transform: scale(1.02);
}
</style>
</head>
<body class="min-h-screen">
<!-- Navigation -->
<nav class="gradient-border border-b-2 py-4 px-6 backdrop-blur-md">
<div class="max-w-7xl mx-auto flex justify-between items-center">
<a href="/" class="flex items-center space-x-2">
<i data-feather="shield" class="text-emerald-400"></i>
<span class="text-2xl font-bold glow-text">TrustChain</span>
</a>
<div class="hidden md:flex space-x-6">
<a href="/university" class="hover:text-emerald-400 transition-colors">
University Portal
</a>
<a href="/employer" class="hover:text-emerald-400 transition-colors">
Employer Portal
</a>
<a href="/verify" class="hover:text-emerald-400 transition-colors">
Verify Certificate
</a>
<a href="/about" class="hover:text-emerald-400 transition-colors">
About
</a>
<a href="/contact" class="hover:text-emerald-400 transition-colors">
Contact
</a>
</div>
<button class="md:hidden">
<i data-feather="menu"></i>
</button>
</div>
</nav>
<!-- Hero Section -->
<div class="max-w-7xl mx-auto px-4 py-12">
<div class="text-center mb-16">
<h1 class="text-5xl font-bold mb-6 glow-text">Decentralized Certificate Verification</h1>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
TrustChain provides tamper-proof academic credentials using blockchain technology,
ensuring instant verification and eliminating fraud.
</p>
<div class="mt-8 flex justify-center space-x-4">
<a href="/university" class="bg-emerald-500 hover:bg-emerald-600 text-white px-6 py-3 rounded-lg font-medium transition-colors hover-scale">
University Portal
</a>
<a href="/employer" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-medium transition-colors hover-scale">
Employer Portal
</a>
</div>
</div>
<!-- Features Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
<div class="bg-white p-6 rounded-xl hover-scale shadow-lg">
<div class="w-12 h-12 bg-emerald-500/20 rounded-full flex items-center justify-center mb-4">
<i data-feather="shield" class="text-emerald-400"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Immutable Records</h3>
<p class="text-gray-600">
Certificates stored on blockchain cannot be altered or forged, ensuring complete trust.
</p>
</div>
<div class="bg-white p-6 rounded-xl hover-scale shadow-lg">
<div class="w-12 h-12 bg-blue-500/20 rounded-full flex items-center justify-center mb-4">
<i data-feather="zap" class="text-blue-400"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Instant Verification</h3>
<p class="text-gray-600">
Employers can verify credentials in seconds with just a certificate ID or QR code scan.
</p>
</div>
<div class="bg-white p-6 rounded-xl hover-scale shadow-lg">
<div class="w-12 h-12 bg-purple-500/20 rounded-full flex items-center justify-center mb-4">
<i data-feather="lock" class="text-purple-400"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Student Privacy</h3>
<p class="text-gray-600">
Students control who can access their credentials through cryptographic permissions.
</p>
</div>
</div>
<!-- How It Works -->
<div class="bg-gradient-to-r from-gray-100 to-white p-8 rounded-2xl mb-16 shadow-lg">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-8 md:mb-0">
<h2 class="text-3xl font-bold mb-4">How It Works</h2>
<p class="text-gray-600 mb-6">
TrustChain revolutionizes academic credential verification by leveraging blockchain technology.
</p>
<ol class="space-y-4">
<li class="flex items-start space-x-3">
<div class="flex-shrink-0 bg-emerald-500/20 text-emerald-400 rounded-full w-6 h-6 flex items-center justify-center mt-1">
1
</div>
<span class="text-gray-600">University issues certificate on blockchain</span>
</li>
<li class="flex items-start space-x-3">
<div class="flex-shrink-0 bg-blue-500/20 text-blue-400 rounded-full w-6 h-6 flex items-center justify-center mt-1">
2
</div>
<span class="text-gray-600">Student receives digital certificate with unique ID</span>
</li>
<li class="flex items-start space-x-3">
<div class="flex-shrink-0 bg-purple-500/20 text-purple-400 rounded-full w-6 h-6 flex items-center justify-center mt-1">
3
</div>
<span class="text-gray-600">Employer verifies authenticity in seconds</span>
</li>
</ol>
</div>
<div class="md:w-1/2 flex justify-center">
<img src="http://static.photos/technology/640x360/42" alt="Blockchain technology" class="rounded-lg shadow-2xl max-w-full h-auto">
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="gradient-border border-t-2 py-6 px-6 mt-8">
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
<div>
<h3 class="text-lg font-semibold mb-4">TrustChain</h3>
<p class="text-gray-600">
Decentralized certificate verification powered by blockchain technology.
</p>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">Quick Links</h3>
<ul class="space-y-2">
<li><a href="/university" class="text-gray-600 hover:text-emerald-400">University Portal</a></li>
<li><a href="/employer" class="text-gray-600 hover:text-emerald-400">Employer Portal</a></li>
<li><a href="/about" class="text-gray-600 hover:text-emerald-400">About</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">Connect</h3>
<div class="flex space-x-4">
<a href="https://twitter.com/trustchain" class="text-gray-600 hover:text-emerald-400"><i data-feather="twitter"></i></a>
<a href="https://github.com/trustchain" class="text-gray-600 hover:text-emerald-400"><i data-feather="github"></i></a>
<a href="https://linkedin.com/company/trustchain" class="text-gray-600 hover:text-emerald-400"><i data-feather="linkedin"></i></a>
<a href="/contact" class="text-gray-600 hover:text-emerald-400"><i data-feather="mail"></i></a>
</div>
</div>
</div>
<div class="max-w-7xl mx-auto mt-8 pt-4 border-t border-gray-300 text-center text-gray-500">
<p>© 2023 TrustChain. All rights reserved.</p>
</div>
</footer>
<script>
// Initialize Feather Icons
feather.replace();
</script>
</body>
</html> |