Skip to content

Commit 6043b7d

Browse files
VolkanSahVolkanSah
authored
Update index.html
1 parent 2f659c2 commit 6043b7d

1 file changed

Lines changed: 43 additions & 21 deletions

File tree

‎index.html‎

Lines changed: 43 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -44,10 +44,32 @@
4444
@apply px-8 py-3 rounded-full font-medium transition;
4545
}
4646
.btn-primary {
47-
@apply bg-green-accent text-white hover:bg-[#0a7238];
47+
@apply bg-green-accent text-white hover:bg-[#0a7238] ring-2 ring-green-500 ring-opacity-50 hover:ring-opacity-70;
4848
}
4949
.btn-secondary {
50-
@apply border-2 border-green-accent text-green-accent hover:bg-[#e6f4ed];
50+
@apply border-2 border-green-accent text-green-accent hover:bg-[#e6f4ed] ring-2 ring-green-500 ring-opacity-30 hover:ring-opacity-50;
51+
}
52+
.nav-link {
53+
@apply font-medium hover:text-green-600 transition relative;
54+
}
55+
.nav-link::after {
56+
content: '';
57+
position: absolute;
58+
bottom: -4px;
59+
left: 0;
60+
width: 0;
61+
height: 2px;
62+
background-color: #0d8c47;
63+
transition: width 0.3s ease;
64+
}
65+
.nav-link:hover::after {
66+
width: 100%;
67+
}
68+
.highlight-section {
69+
@apply bg-gradient-to-br from-white to-green-50;
70+
}
71+
.card-hover {
72+
@apply transition-transform duration-300 hover:-translate-y-2;
5173
}
5274
</style>
5375
</head>
@@ -59,11 +81,11 @@
5981
<span class="text-2xl font-bold">Mini<span class="green-accent">GreX</span></span>
6082
</div>
6183
<nav class="hidden md:flex space-x-8">
62-
<a href="#mission" class="font-medium hover:text-green-600 transition">Mission</a>
63-
<a href="#about" class="font-medium hover:text-green-600 transition">About</a>
64-
<a href="#offer" class="font-medium hover:text-green-600 transition">What We Offer</a>
65-
<a href="#join" class="font-medium hover:text-green-600 transition">Join Us</a>
66-
<a href="#legal" class="font-medium hover:text-green-600 transition">Legal</a>
84+
<a href="#mission" class="nav-link">Mission</a>
85+
<a href="#about" class="nav-link">About</a>
86+
<a href="#offer" class="nav-link">What We Offer</a>
87+
<a href="#join" class="nav-link">Join Us</a>
88+
<a href="#legal" class="nav-link">Legal</a>
6789
</nav>
6890
<button id="mobile-menu-toggle" class="md:hidden p-2">
6991
<i data-feather="menu"></i>
@@ -72,7 +94,7 @@
7294
</header>
7395

7496
<main class="flex-grow">
75-
<section class="py-20 px-4 flex items-center justify-center text-center bg-white">
97+
<section class="py-20 px-4 flex items-center justify-center text-center bg-white highlight-section">
7698
<div class="container mx-auto max-w-6xl" data-aos="fade-up">
7799
<h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight">
78100
Protecting <span class="green-accent">Truth</span> in<br>
@@ -82,8 +104,8 @@ <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight">
82104
Secure infrastructure for journalists and security professionals worldwide.
83105
</p>
84106
<div class="flex flex-col sm:flex-row justify-center gap-4">
85-
<a href="#join" class="btn btn-primary">Join Our Mission</a>
86-
<a href="#offer" class="btn btn-secondary">Our Offerings</a>
107+
<a href="#join" class="btn btn-primary shadow-lg hover:shadow-green-200">Join Our Mission</a>
108+
<a href="#offer" class="btn btn-secondary shadow-lg hover:shadow-green-100">Our Offerings</a>
87109
</div>
88110
</div>
89111
</section>
@@ -99,21 +121,21 @@ <h2 class="text-4xl font-bold mb-4">Our <span class="green-accent">Mission</span
99121
</p>
100122
</div>
101123
<div class="grid md:grid-cols-3 gap-8">
102-
<div class="p-6 border border-gray-200 rounded-lg flex flex-col items-center text-center bg-white" data-aos="fade-up" data-aos-delay="100">
124+
<div class="p-6 border border-gray-200 rounded-lg flex flex-col items-center text-center bg-white card-hover" data-aos="fade-up" data-aos-delay="100">
103125
<div class="text-green-accent mb-4">
104126
<i data-feather="shield" class="w-10 h-10"></i>
105127
</div>
106128
<h3 class="text-2xl font-bold mb-2">Security First</h3>
107129
<p class="text-gray-600">Tools designed for high-risk environments with privacy as the core principle.</p>
108130
</div>
109-
<div class="p-6 border border-gray-200 rounded-lg flex flex-col items-center text-center bg-white" data-aos="fade-up" data-aos-delay="200">
131+
<div class="p-6 border border-gray-200 rounded-lg flex flex-col items-center text-center bg-white card-hover" data-aos="fade-up" data-aos-delay="200">
110132
<div class="text-green-accent mb-4">
111133
<i data-feather="users" class="w-10 h-10"></i>
112134
</div>
113135
<h3 class="text-2xl font-bold mb-2">Community Driven</h3>
114136
<p class="text-gray-600">A collective of developers and specialists working together to enhance security.</p>
115137
</div>
116-
<div class="p-6 border border-gray-200 rounded-lg flex flex-col items-center text-center bg-white" data-aos="fade-up" data-aos-delay="300">
138+
<div class="p-6 border border-gray-200 rounded-lg flex flex-col items-center text-center bg-white card-hover" data-aos="fade-up" data-aos-delay="300">
117139
<div class="text-green-accent mb-4">
118140
<i data-feather="globe" class="w-10 h-10"></i>
119141
</div>
@@ -126,7 +148,7 @@ <h3 class="text-2xl font-bold mb-2">Global Impact</h3>
126148

127149
<div class="section-divider my-16"></div>
128150

129-
<section id="about" class="py-16 px-4 bg-white">
151+
<section id="about" class="py-16 px-4 bg-white highlight-section">
130152
<div class="container mx-auto max-w-6xl">
131153
<div class="text-center mb-12" data-aos="fade-up">
132154
<h2 class="text-4xl font-bold mb-4">Who <span class="green-accent">We Are</span></h2>
@@ -140,7 +162,7 @@ <h2 class="text-4xl font-bold mb-4">Who <span class="green-accent">We Are</span>
140162
Access to this organization is restricted to vetted individuals who align with our mission. Applications are reviewed on a case-by-case basis to ensure that our resources are used ethically and responsibly.
141163
</p>
142164
</div>
143-
<div class="bg-gray-100 p-8 rounded-lg shadow-sm border border-gray-200 flex flex-col justify-center" data-aos="fade-left">
165+
<div class="bg-gray-100 p-8 rounded-lg shadow-sm border border-gray-200 flex flex-col justify-center card-hover" data-aos="fade-left">
144166
<div class="flex items-center mb-6">
145167
<div class="mr-4 text-green-accent">
146168
<i data-feather="alert-triangle" class="w-10 h-10"></i>
@@ -166,21 +188,21 @@ <h3 class="text-2xl font-bold">We're Looking For</h3>
166188
<h2 class="text-4xl font-bold mb-4">What We <span class="green-accent">Offer</span></h2>
167189
</div>
168190
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
169-
<div class="p-6 border border-gray-200 rounded-lg flex flex-col items-center text-center bg-white" data-aos="fade-up">
191+
<div class="p-6 border border-gray-200 rounded-lg flex flex-col items-center text-center bg-white card-hover" data-aos="fade-up">
170192
<div class="text-green-accent mb-4">
171193
<i data-feather="lock" class="w-10 h-10"></i>
172194
</div>
173195
<h3 class="text-2xl font-bold mb-2">Secure Infrastructure</h3>
174196
<p class="text-gray-600">Tools and frameworks designed for high-risk environments with multiple layers of protection.</p>
175197
</div>
176-
<div class="p-6 border border-gray-200 rounded-lg flex flex-col items-center text-center bg-white" data-aos="fade-up" data-aos-delay="100">
198+
<div class="p-6 border border-gray-200 rounded-lg flex flex-col items-center text-center bg-white card-hover" data-aos="fade-up" data-aos-delay="100">
177199
<div class="text-green-accent mb-4">
178200
<i data-feather="git-merge" class="w-10 h-10"></i>
179201
</div>
180202
<h3 class="text-2xl font-bold mb-2">Collaborative Development</h3>
181203
<p class="text-gray-600">A community-driven approach to enhance security features and share knowledge.</p>
182204
</div>
183-
<div class="p-6 border border-gray-200 rounded-lg flex flex-col items-center text-center bg-white" data-aos="fade-up" data-aos-delay="200">
205+
<div class="p-6 border border-gray-200 rounded-lg flex flex-col items-center text-center bg-white card-hover" data-aos="fade-up" data-aos-delay="200">
184206
<div class="text-green-accent mb-4">
185207
<i data-feather="book-open" class="w-10 h-10"></i>
186208
</div>
@@ -193,14 +215,14 @@ <h3 class="text-2xl font-bold mb-2">Expertise Sharing</h3>
193215

194216
<div class="section-divider my-16"></div>
195217

196-
<section id="join" class="py-16 px-4 bg-white">
218+
<section id="join" class="py-16 px-4 bg-white highlight-section">
197219
<div class="container mx-auto max-w-6xl text-center">
198220
<div data-aos="fade-up">
199221
<h2 class="text-4xl font-bold mb-6">Join Our <span class="green-accent">Mission</span></h2>
200222
<p class="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
201223
If you share our vision and are interested in contributing to this initiative, we welcome your application.
202224
</p>
203-
<a href="#" class="btn btn-primary">Apply Now</a>
225+
<a href="#" class="btn btn-primary shadow-lg hover:shadow-green-200">Apply Now</a>
204226
</div>
205227
</div>
206228
</section>
@@ -220,7 +242,7 @@ <h3 class="text-2xl font-bold mb-2">Usage Policies</h3>
220242
<h3 class="text-2xl font-bold mb-2 mt-6">Allowed Use</h3>
221243
<ul class="text-gray-600 mb-4 list-disc pl-5">
222244
<li>Development of tools and systems that enhance security, protect freedom of expression, and support journalistic work.</li>
223-
<li>Usage by journalists, security professionals, and developers aligned with the project’s mission.</li>
245+
<li>Usage by journalists, security professionals, and developers aligned with the project's mission.</li>
224246
</ul>
225247
<h3 class="text-2xl font-bold mb-2 mt-6">Prohibited Use</h3>
226248
<ul class="text-gray-600 mb-4 list-disc pl-5">

0 commit comments

Comments
 (0)