File size: 9,106 Bytes
8497e21 63de090 8497e21 63de090 8497e21 41d1a8b 7f8a317 8497e21 |
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 |
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About - Mayar Science Lab</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#3B82F6',
secondary: '#10B981',
dark: '#1E293B',
light: '#F8FAFC',
}
}
}
}
</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;
}
</style>
</head>
<body class="bg-light text-dark">
<!-- Navbar -->
<nav class="fixed w-full z-50 bg-white/80 backdrop-blur-md shadow-sm">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0 flex items-center">
<div class="h-8 w-8 rounded-full bg-primary flex items-center justify-center">
<i data-feather="flask" class="text-white"></i>
</div>
<span class="ml-2 text-xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">Mayar Science Lab</span>
</div>
</div>
<div class="hidden md:flex items-center space-x-8">
<a href="index.html" class="text-dark hover:text-primary font-medium transition">Home</a>
<a href="machine-learning.html" class="text-dark hover:text-primary font-medium transition">Machine Learning</a>
<a href="index.html#research-areas" class="text-dark hover:text-primary font-medium transition">Data Science</a>
<a href="index.html#featured-research" class="text-dark hover:text-primary font-medium transition">Research</a>
<a href="https://www.surveymonkey.com/" target="_blank" class="text-dark hover:text-primary font-medium transition">Surveys</a>
<a href="about.html" class="text-primary font-medium">About</a>
<a href="contact.html" class="text-dark hover:text-primary font-medium transition">Contact</a>
</div>
<div class="md:hidden flex items-center">
<button id="mobile-menu-button" class="text-dark">
<i data-feather="menu"></i>
</button>
</div>
</div>
</div>
</nav>
<!-- Main Content -->
<div class="pt-32 pb-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl">About Us</h1>
<p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
Pioneering data science research since 2015
</p>
</div>
<div class="mt-16 grid gap-16 lg:grid-cols-2 lg:gap-8">
<div>
<h2 class="text-3xl font-bold">Our Story</h2>
<p class="mt-4 text-gray-600">
Founded by a group of passionate data scientists, Mayar Science Lab began as a small research initiative focused on machine learning applications. Over the years, we've grown into a leading interdisciplinary research center with collaborations across academia and industry.
</p>
<div class="mt-10">
<img src="http://static.photos/workspace/640x360/10" alt="Research lab" class="rounded-lg shadow-xl">
</div>
</div>
<div>
<h2 class="text-3xl font-bold">Our Mission</h2>
<p class="mt-4 text-gray-600">
To advance the frontiers of data science through rigorous research, innovative applications, and open collaboration. We believe in making data science accessible and impactful across all sectors of society.
</p>
<div class="mt-10">
<img src="http://static.photos/science/640x360/11" alt="Data visualization" class="rounded-lg shadow-xl">
</div>
</div>
</div>
<div class="mt-20">
<h2 class="text-3xl font-bold text-center">Our Values</h2>
<div class="mt-12 grid gap-8 md:grid-cols-3">
<div class="bg-white p-6 rounded-lg shadow-md">
<div class="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center">
<i data-feather="target" class="text-primary"></i>
</div>
<h3 class="mt-4 text-xl font-bold">Excellence</h3>
<p class="mt-2 text-gray-500">We pursue the highest standards in all our research and applications.</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-md">
<div class="h-12 w-12 rounded-full bg-secondary/10 flex items-center justify-center">
<i data-feather="users" class="text-secondary"></i>
</div>
<h3 class="mt-4 text-xl font-bold">Collaboration</h3>
<p class="mt-2 text-gray-500">We believe the best results come from working together.</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-md">
<div class="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center">
<i data-feather="compass" class="text-primary"></i>
</div>
<h3 class="mt-4 text-xl font-bold">Innovation</h3>
<p class="mt-2 text-gray-500">We constantly push boundaries to develop new methods and ideas.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-dark text-white">
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
<div class="col-span-2">
<div class="flex items-center">
<div class="h-8 w-8 rounded-full bg-primary flex items-center justify-center">
<i data-feather="flask" class="text-white"></i>
</div>
<span class="ml-2 text-xl font-bold">Mayar Data Science Lab</span>
</div>
<p class="mt-4 text-gray-300">
Advancing data science through innovative research, analytics, and collaboration.
</p>
</div>
<div>
<h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Explore</h3>
<ul class="mt-4 space-y-2">
<li><a href="about.html" class="text-gray-400 hover:text-white transition">About</a></li>
<li><a href="team.html" class="text-gray-400 hover:text-white transition">Team</a></li>
<li><a href="careers.html" class="text-gray-400 hover:text-white transition">Careers</a></li>
<li><a href="contact.html" class="text-gray-400 hover:text-white transition">Contact</a></li>
</ul>
</div>
<div>
<h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Connect</h3>
<ul class="mt-4 space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition">Twitter</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">LinkedIn</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">GitHub</a></li>
<li><a href="research.html" class="text-gray-400 hover:text-white transition">Publications</a></li>
</ul>
</div>
</div>
<div class="mt-12 border-t border-gray-700 pt-8 flex flex-col md:flex-row justify-between">
<p class="text-gray-400 text-sm">
© 2023 Mayar Science Lab. All rights reserved.
</p>
</div>
</div>
</footer>
<script>
feather.replace();
</script>
</body>
</html> |