-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
217 lines (202 loc) · 11.2 KB
/
index.html
File metadata and controls
217 lines (202 loc) · 11.2 KB
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
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Red Cross Philippines - Save Lives. Join the Red Cross.</title>
<meta name="description" content="Join the Philippine Red Cross and be part of a humanitarian movement that saves lives and builds resilient communities across the Philippines.">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'red-cross-blue': '#002888',
'red-cross-red': '#E3000E',
'red-cross-light-blue': '#e6f0ff',
'red-cross-secondary-blue': '#1a4ba8'
},
fontFamily: {
'inter': ['Inter', 'sans-serif']
}
}
}
}
</script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body class="min-h-screen bg-gray-50">
<!-- Navigation -->
<nav class="bg-white shadow-lg fixed top-0 left-0 right-0 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<!-- Logo -->
<div class="flex items-center space-x-3">
<img src="https://redcross.org.ph/wp-content/themes/yootheme/cache/Logo-2x2-1-03f043e8.png" alt="Red Cross Philippines Logo" class="w-10 h-10">
<span class="text-xl font-bold text-red-cross-blue">
Red Cross Philippines
</span>
</div>
<!-- Navigation Links -->
<div class="hidden md:flex space-x-8">
<a href="index.html" class="bg-red-cross-light-blue text-red-cross-blue px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200">
Home
</a>
<a href="login.html" class="text-gray-600 hover:text-red-cross-blue hover:bg-gray-100 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200">
Login
</a>
<a href="register.html" class="text-gray-600 hover:text-red-cross-blue hover:bg-gray-100 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200">
Register
</a>
</div>
<!-- Mobile menu button -->
<div class="md:hidden">
<button type="button" class="text-gray-600 hover:text-red-cross-blue focus:outline-none focus:text-red-cross-blue" onclick="toggleMobileMenu()">
<i class="fas fa-bars text-xl"></i>
</button>
</div>
</div>
<!-- Mobile menu -->
<div id="mobileMenu" class="md:hidden hidden">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-white border-t">
<a href="index.html" class="bg-red-cross-light-blue text-red-cross-blue block px-3 py-2 rounded-md text-base font-medium">
Home
</a>
<a href="login.html" class="text-gray-600 hover:text-red-cross-blue hover:bg-gray-100 block px-3 py-2 rounded-md text-base font-medium">
Login
</a>
<a href="register.html" class="text-gray-600 hover:text-red-cross-blue hover:bg-gray-100 block px-3 py-2 rounded-md text-base font-medium">
Register
</a>
</div>
</div>
</div>
</nav>
<!-- Main Content -->
<div class="pt-16">
<!-- Hero Banner -->
<section class="hero-gradient min-h-screen flex items-center justify-center relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-red-cross-light-blue/50 to-white/50"></div>
<div class="relative z-10 text-center max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<h1 class="text-3xl md:text-5xl font-bold text-gray-800 mb-6 leading-tight">
Save Lives. Join the Red Cross.
</h1>
<p class="text-lg md:text-xl text-gray-700 mb-8 max-w-3xl mx-auto leading-relaxed">
We take pride in urging all Filipinos to take part in the heroism of the Philippine Red Cross
by becoming a full-fledged member, volunteer, or donor.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="register.html" class="bg-red-cross-red text-white px-8 py-4 rounded-lg text-lg font-semibold hover:bg-red-700 transition-all duration-300 transform hover:-translate-y-1 hover:shadow-xl">
JOIN US
</a>
<a href="login.html" class="bg-white text-red-cross-blue px-8 py-4 rounded-lg text-lg font-semibold border-2 border-red-cross-blue hover:bg-red-cross-light-blue transition-all duration-300">
LOGIN
</a>
</div>
</div>
</section>
<!-- Features Section -->
<section class="py-16 bg-white">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">
Why Join the Red Cross?
</h2>
<p class="text-lg text-gray-600 max-w-2xl mx-auto">
Be part of a humanitarian movement that saves lives and builds resilient communities across the Philippines.
</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="text-center p-6">
<div class="w-16 h-16 bg-red-cross-light-blue rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-heart text-red-cross-blue text-2xl"></i>
</div>
<h3 class="text-xl font-semibold text-gray-800 mb-3">Save Lives</h3>
<p class="text-gray-600">
Join emergency response teams and provide critical aid during disasters and emergencies.
</p>
</div>
<div class="text-center p-6">
<div class="w-16 h-16 bg-red-cross-light-blue rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-users text-red-cross-blue text-2xl"></i>
</div>
<h3 class="text-xl font-semibold text-gray-800 mb-3">Build Community</h3>
<p class="text-gray-600">
Connect with like-minded individuals and contribute to building resilient communities.
</p>
</div>
<div class="text-center p-6">
<div class="w-16 h-16 bg-red-cross-light-blue rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-graduation-cap text-red-cross-blue text-2xl"></i>
</div>
<h3 class="text-xl font-semibold text-gray-800 mb-3">Learn & Grow</h3>
<p class="text-gray-600">
Gain valuable skills in first aid, disaster preparedness, and humanitarian work.
</p>
</div>
</div>
</div>
</section>
<!-- Security Features -->
<section class="py-16 bg-gray-50">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-gray-800 mb-4">
Your Data is Protected
</h2>
<p class="text-lg text-gray-600">
We use industry-leading security measures to protect your personal information.
</p>
</div>
<div class="grid md:grid-cols-2 gap-6">
<div class="flex items-start space-x-3">
<i class="fas fa-shield-alt text-red-cross-blue text-xl mt-1"></i>
<div>
<h3 class="font-semibold text-gray-800 mb-1">256-bit SSL Encryption</h3>
<p class="text-gray-600 text-sm">All personal data is encrypted and protected</p>
</div>
</div>
<div class="flex items-start space-x-3">
<i class="fas fa-lock text-red-cross-blue text-xl mt-1"></i>
<div>
<h3 class="font-semibold text-gray-800 mb-1">Data Privacy Act Compliant</h3>
<p class="text-gray-600 text-sm">Compliant with Philippine Data Privacy Act (RA 10173)</p>
</div>
</div>
<div class="flex items-start space-x-3">
<i class="fas fa-user-shield text-red-cross-blue text-xl mt-1"></i>
<div>
<h3 class="font-semibold text-gray-800 mb-1">Zero Data Sharing</h3>
<p class="text-gray-600 text-sm">No data sharing with third parties without consent</p>
</div>
</div>
<div class="flex items-start space-x-3">
<i class="fas fa-server text-red-cross-blue text-xl mt-1"></i>
<div>
<h3 class="font-semibold text-gray-800 mb-1">24/7 Monitoring</h3>
<p class="text-gray-600 text-sm">Secure servers with continuous monitoring</p>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-16 bg-red-cross-blue text-white">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-3xl font-bold mb-4">Ready to Make a Difference?</h2>
<p class="text-xl mb-8 opacity-90">
Join thousands of Filipinos who are already making a positive impact in their communities.
</p>
<a href="register.html" class="bg-red-cross-red text-white px-8 py-4 rounded-lg text-lg font-semibold hover:bg-red-700 transition-all duration-300 inline-block">
Start Your Journey Today
</a>
</div>
</section>
</div>
<script src="script.js"></script>
<script src="admin.js"></script>
</body>
</html>