Skip to content

Commit 078a7c0

Browse files
VolkanSahVolkanSah
authored
Create index.html
0 parents  commit 078a7c0

1 file changed

Lines changed: 317 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 317 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,317 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>MiniGreX - Secure Infrastructure for Press Freedom</title>
7+
<script src="https://cdn.tailwindcss.com"></script>
8+
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
9+
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
10+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11+
<script src="https://unpkg.com/feather-icons"></script>
12+
<style>
13+
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
14+
body {
15+
font-family: 'Space Grotesk', sans-serif;
16+
background-color: #ffffff;
17+
color: #111827;
18+
}
19+
.green-accent {
20+
color: #10b981;
21+
}
22+
.bg-green-accent {
23+
background-color: #10b981;
24+
}
25+
.border-green-accent {
26+
border-color: #10b981;
27+
}
28+
.hover\:bg-green-accent:hover {
29+
background-color: #10b981;
30+
}
31+
.hover\:text-white:hover {
32+
color: #ffffff;
33+
}
34+
.logo {
35+
width: 40px;
36+
height: 40px;
37+
background-color: #10b981;
38+
border-radius: 50%;
39+
display: flex;
40+
align-items: center;
41+
justify-content: center;
42+
color: white;
43+
font-weight: bold;
44+
font-size: 20px;
45+
}
46+
.section-divider {
47+
height: 1px;
48+
background: linear-gradient(90deg, transparent, #10b981, transparent);
49+
}
50+
</style>
51+
</head>
52+
<body class="min-h-screen flex flex-col">
53+
<header class="sticky top-0 z-50 bg-white shadow-sm">
54+
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
55+
<div class="flex items-center space-x-2">
56+
<div class="logo">M</div>
57+
<span class="text-xl font-bold">Mini<span class="green-accent">GreX</span></span>
58+
</div>
59+
<nav class="hidden md:flex space-x-8">
60+
<a href="#mission" class="font-medium hover:text-green-600 transition">Mission</a>
61+
<a href="#about" class="font-medium hover:text-green-600 transition">About</a>
62+
<a href="#offer" class="font-medium hover:text-green-600 transition">What We Offer</a>
63+
<a href="#join" class="font-medium hover:text-green-600 transition">Join Us</a>
64+
<a href="#legal" class="font-medium hover:text-green-600 transition">Legal</a>
65+
</nav>
66+
<button class="md:hidden">
67+
<i data-feather="menu"></i>
68+
</button>
69+
</div>
70+
</header>
71+
72+
<main class="flex-grow">
73+
<!-- Hero Section -->
74+
<section class="py-20 px-4">
75+
<div class="container mx-auto text-center" data-aos="fade-up">
76+
<h1 class="text-4xl md:text-6xl font-bold mb-6">
77+
Protecting <span class="green-accent">Truth</span> in<br>
78+
Challenging Environments
79+
</h1>
80+
<p class="text-xl md:text-2xl text-gray-600 max-w-3xl mx-auto mb-10">
81+
Secure infrastructure for journalists and security professionals worldwide
82+
</p>
83+
<div class="flex flex-col sm:flex-row justify-center gap-4">
84+
<a href="#join" class="px-8 py-3 bg-green-600 text-white font-medium rounded-md hover:bg-green-700 transition">
85+
Join Our Mission
86+
</a>
87+
<a href="#offer" class="px-8 py-3 border-2 border-green-600 text-green-600 font-medium rounded-md hover:bg-green-50 transition">
88+
Our Offerings
89+
</a>
90+
</div>
91+
</div>
92+
</section>
93+
94+
<div class="section-divider my-16"></div>
95+
96+
<!-- Mission Section -->
97+
<section id="mission" class="py-16 px-4">
98+
<div class="container mx-auto max-w-4xl">
99+
<div class="text-center mb-12" data-aos="fade-up">
100+
<h2 class="text-3xl font-bold mb-4">Our <span class="green-accent">Mission</span></h2>
101+
<p class="text-xl text-gray-600">
102+
To support journalists, whistleblowers, and security developers with secure and reliable web-infrastructure, ensuring that free and unbiased information continues to thrive.
103+
</p>
104+
</div>
105+
<div class="grid md:grid-cols-3 gap-8">
106+
<div class="p-6 border border-gray-200 rounded-lg" data-aos="fade-up" data-aos-delay="100">
107+
<div class="text-green-600 mb-4">
108+
<i data-feather="shield" class="w-8 h-8"></i>
109+
</div>
110+
<h3 class="text-xl font-bold mb-2">Security First</h3>
111+
<p class="text-gray-600">Tools designed for high-risk environments with privacy as the core principle.</p>
112+
</div>
113+
<div class="p-6 border border-gray-200 rounded-lg" data-aos="fade-up" data-aos-delay="200">
114+
<div class="text-green-600 mb-4">
115+
<i data-feather="users" class="w-8 h-8"></i>
116+
</div>
117+
<h3 class="text-xl font-bold mb-2">Community Driven</h3>
118+
<p class="text-gray-600">A collective of developers and specialists working together to enhance security.</p>
119+
</div>
120+
<div class="p-6 border border-gray-200 rounded-lg" data-aos="fade-up" data-aos-delay="300">
121+
<div class="text-green-600 mb-4">
122+
<i data-feather="globe" class="w-8 h-8"></i>
123+
</div>
124+
<h3 class="text-xl font-bold mb-2">Global Impact</h3>
125+
<p class="text-gray-600">Supporting press freedom and transparency worldwide.</p>
126+
</div>
127+
</div>
128+
</div>
129+
</section>
130+
131+
<div class="section-divider my-16"></div>
132+
133+
<!-- About Section -->
134+
<section id="about" class="py-16 px-4 bg-gray-50">
135+
<div class="container mx-auto max-w-4xl">
136+
<div class="text-center mb-12" data-aos="fade-up">
137+
<h2 class="text-3xl font-bold mb-4">Who <span class="green-accent">We Are</span></h2>
138+
</div>
139+
<div class="grid md:grid-cols-2 gap-8 items-center">
140+
<div data-aos="fade-right">
141+
<p class="text-lg text-gray-600 mb-6">
142+
MiniGreX is a collective of developers, security specialists, and advocates for press freedom. Together, we design and maintain tools that prioritize security, privacy, and ease of use.
143+
</p>
144+
<p class="text-lg text-gray-600">
145+
Access to this organization is restricted to vetted individuals who align with our mission. Applications are reviewed to ensure our resources are used ethically and responsibly.
146+
</p>
147+
</div>
148+
<div class="bg-white p-8 rounded-lg shadow-sm border border-gray-200" data-aos="fade-left">
149+
<div class="flex items-center mb-6">
150+
<div class="mr-4 text-green-600">
151+
<i data-feather="alert-triangle" class="w-8 h-8"></i>
152+
</div>
153+
<h3 class="text-xl font-bold">We're Looking For</h3>
154+
</div>
155+
<p class="text-gray-600 mb-4">
156+
Beta Testers with Security Skills to help improve our tools and infrastructure.
157+
</p>
158+
<p class="text-sm text-gray-500">
159+
Secure Contact: MiniGreX [at] proton.me
160+
</p>
161+
</div>
162+
</div>
163+
</div>
164+
</section>
165+
166+
<div class="section-divider my-16"></div>
167+
168+
<!-- Offer Section -->
169+
<section id="offer" class="py-16 px-4">
170+
<div class="container mx-auto max-w-4xl">
171+
<div class="text-center mb-12" data-aos="fade-up">
172+
<h2 class="text-3xl font-bold mb-4">What We <span class="green-accent">Offer</span></h2>
173+
</div>
174+
<div class="space-y-8">
175+
<div class="p-6 border border-gray-200 rounded-lg flex items-start" data-aos="fade-up">
176+
<div class="mr-6 text-green-600">
177+
<i data-feather="lock" class="w-8 h-8"></i>
178+
</div>
179+
<div>
180+
<h3 class="text-xl font-bold mb-2">Secure Infrastructure</h3>
181+
<p class="text-gray-600">Tools and frameworks designed for high-risk environments with multiple layers of protection.</p>
182+
</div>
183+
</div>
184+
<div class="p-6 border border-gray-200 rounded-lg flex items-start" data-aos="fade-up" data-aos-delay="100">
185+
<div class="mr-6 text-green-600">
186+
<i data-feather="git-merge" class="w-8 h-8"></i>
187+
</div>
188+
<div>
189+
<h3 class="text-xl font-bold mb-2">Collaborative Development</h3>
190+
<p class="text-gray-600">A community-driven approach to enhance security features and share knowledge.</p>
191+
</div>
192+
</div>
193+
<div class="p-6 border border-gray-200 rounded-lg flex items-start" data-aos="fade-up" data-aos-delay="200">
194+
<div class="mr-6 text-green-600">
195+
<i data-feather="book-open" class="w-8 h-8"></i>
196+
</div>
197+
<div>
198+
<h3 class="text-xl font-bold mb-2">Expertise Sharing</h3>
199+
<p class="text-gray-600">Resources and guidance for those working at the intersection of journalism and security.</p>
200+
</div>
201+
</div>
202+
</div>
203+
</div>
204+
</section>
205+
206+
<div class="section-divider my-16"></div>
207+
208+
<!-- Join Section -->
209+
<section id="join" class="py-16 px-4 bg-gray-50">
210+
<div class="container mx-auto max-w-2xl text-center">
211+
<div data-aos="fade-up">
212+
<h2 class="text-3xl font-bold mb-6">Join Our <span class="green-accent">Mission</span></h2>
213+
<p class="text-xl text-gray-600 mb-8">
214+
If you share our vision and are interested in contributing to this initiative, we welcome your application.
215+
</p>
216+
<a href="#" class="px-8 py-3 bg-green-600 text-white font-medium rounded-md hover:bg-green-700 transition inline-block">
217+
Apply Now
218+
</a>
219+
</div>
220+
</div>
221+
</section>
222+
223+
<div class="section-divider my-16"></div>
224+
225+
<!-- Legal Section -->
226+
<section id="legal" class="py-16 px-4">
227+
<div class="container mx-auto max-w-4xl">
228+
<div class="text-center mb-12" data-aos="fade-up">
229+
<h2 class="text-3xl font-bold mb-4">Legal <span class="green-accent">Notice</span></h2>
230+
</div>
231+
<div class="prose prose-green max-w-none" data-aos="fade-up">
232+
<h3 class="text-xl font-bold mb-2">Usage Policies</h3>
233+
<p class="text-gray-600 mb-4">
234+
MiniGreX is built to support press freedom and the protection of fundamental rights. Misuse of this software for purposes contrary to these principles is strictly prohibited.
235+
</p>
236+
<h3 class="text-xl font-bold mb-2 mt-6">Allowed Use</h3>
237+
<ul class="text-gray-600 mb-4 list-disc pl-5">
238+
<li>Development of tools that enhance security and protect freedom of expression</li>
239+
<li>Usage by journalists, security professionals, and aligned developers</li>
240+
</ul>
241+
<h3 class="text-xl font-bold mb-2 mt-6">Prohibited Use</h3>
242+
<ul class="text-gray-600 mb-4 list-disc pl-5">
243+
<li>Illegal surveillance or suppression of information</li>
244+
<li>Violation of human rights or actions undermining press freedom</li>
245+
</ul>
246+
<p class="text-sm text-gray-500 mt-8">
247+
By using or contributing to MiniGreX, you acknowledge and agree to these terms.
248+
</p>
249+
</div>
250+
</div>
251+
</section>
252+
</main>
253+
254+
<footer class="bg-gray-900 text-white py-12 px-4">
255+
<div class="container mx-auto">
256+
<div class="flex flex-col md:flex-row justify-between items-center">
257+
<div class="mb-6 md:mb-0">
258+
<div class="flex items-center space-x-2">
259+
<div class="logo">M</div>
260+
<span class="text-xl font-bold">Mini<span class="text-green-400">GreX</span></span>
261+
</div>
262+
<p class="text-gray-400 mt-2">Secure infrastructure for press freedom</p>
263+
</div>
264+
<div class="flex space-x-6">
265+
<a href="#" class="text-gray-400 hover:text-white transition">
266+
<i data-feather="github"></i>
267+
</a>
268+
<a href="#" class="text-gray-400 hover:text-white transition">
269+
<i data-feather="twitter"></i>
270+
</a>
271+
<a href="#" class="text-gray-400 hover:text-white transition">
272+
<i data-feather="mail"></i>
273+
</a>
274+
</div>
275+
</div>
276+
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400 text-sm">
277+
<p>© 2023 MiniGreX Organization. All rights reserved.</p>
278+
</div>
279+
</div>
280+
</footer>
281+
282+
<script>
283+
AOS.init({
284+
duration: 800,
285+
once: true
286+
});
287+
feather.replace();
288+
289+
// Mobile menu toggle
290+
const mobileMenuButton = document.querySelector('button.md\\:hidden');
291+
const mobileMenu = document.createElement('div');
292+
mobileMenu.className = 'fixed inset-0 bg-white z-50 flex flex-col items-center justify-center hidden';
293+
mobileMenu.innerHTML = `
294+
<button class="absolute top-4 right-4 p-2">
295+
<i data-feather="x" class="w-6 h-6"></i>
296+
</button>
297+
<nav class="flex flex-col items-center space-y-8">
298+
<a href="#mission" class="text-2xl font-medium hover:text-green-600 transition">Mission</a>
299+
<a href="#about" class="text-2xl font-medium hover:text-green-600 transition">About</a>
300+
<a href="#offer" class="text-2xl font-medium hover:text-green-600 transition">What We Offer</a>
301+
<a href="#join" class="text-2xl font-medium hover:text-green-600 transition">Join Us</a>
302+
<a href="#legal" class="text-2xl font-medium hover:text-green-600 transition">Legal</a>
303+
</nav>
304+
`;
305+
document.body.appendChild(mobileMenu);
306+
307+
mobileMenuButton.addEventListener('click', () => {
308+
mobileMenu.classList.remove('hidden');
309+
feather.replace();
310+
const closeButton = mobileMenu.querySelector('button');
311+
closeButton.addEventListener('click', () => {
312+
mobileMenu.classList.add('hidden');
313+
});
314+
});
315+
</script>
316+
</body>
317+
</html>

0 commit comments

Comments
 (0)