File size: 8,260 Bytes
fcc97a9 acc1137 fcc97a9 29fff97 da65ac5 fcc97a9 da65ac5 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 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About TrustChain</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 text-emerald-500">
About
</a>
</div>
<button class="md:hidden">
<i data-feather="menu"></i>
</button>
</div>
</nav>
<!-- Main Content -->
<div class="max-w-7xl mx-auto px-4 py-12">
<div class="text-center mb-16">
<h1 class="text-4xl font-bold mb-6 glow-text">About TrustChain</h1>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
Revolutionizing academic credential verification with blockchain technology.
</p>
</div>
<div class="flex flex-col md:flex-row items-center mb-16 gap-8">
<div class="md:w-1/2">
<img src="http://static.photos/technology/640x360/101" alt="About TrustChain" class="rounded-lg shadow-2xl w-full">
</div>
<div class="md:w-1/2">
<h2 class="text-3xl font-bold mb-6">Our Mission</h2>
<p class="text-gray-600 mb-6">
TrustChain was founded with the vision of eliminating credential fraud and simplifying the verification process for universities, students, and employers alike.
</p>
<p class="text-gray-600 mb-6">
By leveraging the power of blockchain technology, we provide a tamper-proof system for issuing, storing, and verifying academic credentials.
</p>
<div class="flex items-center space-x-4">
<div class="bg-emerald-500/20 text-emerald-400 p-3 rounded-lg">
<i data-feather="award" class="w-6 h-6"></i>
</div>
<div>
<h3 class="font-semibold">Trusted by 100+ Institutions</h3>
<p class="text-gray-500 text-sm">Worldwide adoption</p>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-2xl p-8 mb-16 shadow-lg">
<h2 class="text-3xl font-bold mb-8 text-center">The Team</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-gray-50 p-6 rounded-xl text-center hover-scale">
<div class="w-32 h-32 mx-auto mb-4 rounded-full overflow-hidden border-2 border-emerald-500">
<img src="http://static.photos/people/320x240/1" alt="Team member" class="w-full h-full object-cover">
</div>
<h3 class="text-xl font-semibold">Alex Chen</h3>
<p class="text-emerald-400 mb-2">Founder & CEO</p>
<p class="text-gray-600">Blockchain architect with 10+ years in decentralized systems</p>
</div>
<div class="bg-gray-50 p-6 rounded-xl text-center hover-scale">
<div class="w-32 h-32 mx-auto mb-4 rounded-full overflow-hidden border-2 border-blue-500">
<img src="http://static.photos/people/320x240/2" alt="Team member" class="w-full h-full object-cover">
</div>
<h3 class="text-xl font-semibold">Maria Rodriguez</h3>
<p class="text-blue-400 mb-2">Head of Product</p>
<p class="text-gray-600">EdTech specialist focused on credential verification</p>
</div>
<div class="bg-gray-50 p-6 rounded-xl text-center hover-scale">
<div class="w-32 h-32 mx-auto mb-4 rounded-full overflow-hidden border-2 border-purple-500">
<img src="http://static.photos/people/320x240/3" alt="Team member" class="w-full h-full object-cover">
</div>
<h3 class="text-xl font-semibold">James Wilson</h3>
<p class="text-purple-400 mb-2">CTO</p>
<p class="text-gray-600">Security expert and full-stack developer</p>
</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 text-emerald-500">About</a></li>
<li><a href="/contact" class="text-gray-600 hover:text-emerald-400">Contact</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> |