-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcommunity.php
More file actions
191 lines (180 loc) · 14.5 KB
/
community.php
File metadata and controls
191 lines (180 loc) · 14.5 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
<?php
$page_title = 'Community - CodeMateRwa';
$page_description = 'Join our vibrant community of developers, designers, and tech enthusiasts in Rwanda.';
require_once 'includes/header.php';
// Sample community data - in a real implementation, this would come from a database
$communityMembers = [
['id' => 1, 'name' => 'Jean Paul', 'role' => 'Frontend Developer', 'avatar' => 'assets/images/content/1.jpeg', 'joined' => '2023-05-15'],
['id' => 2, 'name' => 'Marie Claire', 'role' => 'UI/UX Designer', 'avatar' => 'assets/images/content/2.jpeg', 'joined' => '2023-07-22'],
['id' => 3, 'name' => 'David Uwera', 'role' => 'Backend Engineer', 'avatar' => 'assets/images/content/3.jpeg', 'joined' => '2023-03-10'],
['id' => 4, 'name' => 'Grace Imanizi', 'role' => 'Project Manager', 'avatar' => 'assets/images/content/4.jpeg', 'joined' => '2023-09-05'],
['id' => 5, 'name' => 'Olivier Nshimiyimana', 'role' => 'DevOps Specialist', 'avatar' => 'assets/images/content/5.jpeg', 'joined' => '2023-11-18'],
['id' => 6, 'name' => 'Chantal Murekatete', 'role' => 'Data Scientist', 'avatar' => 'assets/images/content/6.jpeg', 'joined' => '2024-01-30']
];
$recentDiscussions = [
['id' => 1, 'title' => 'Best practices for responsive design in 2025', 'author' => 'Jean Paul', 'replies' => 24, 'views' => 156, 'last_activity' => '2 hours ago'],
['id' => 2, 'title' => 'Rwanda tech startup funding opportunities', 'author' => 'David Uwera', 'replies' => 18, 'views' => 98, 'last_activity' => '5 hours ago'],
['id' => 3, 'title' => 'How to implement secure authentication in web apps', 'author' => 'Marie Claire', 'replies' => 32, 'views' => 210, 'last_activity' => '1 day ago'],
['id' => 4, 'title' => 'CodeMateRwa hackathon announcement', 'author' => 'Grace Imanizi', 'replies' => 45, 'views' => 320, 'last_activity' => '1 day ago']
];
$upcomingEvents = [
['id' => 1, 'title' => 'Monthly Tech Meetup', 'date' => '2025-10-15', 'time' => '18:00', 'location' => 'Kigali Innovation City', 'attendees' => 42],
['id' => 2, 'title' => 'Web Development Workshop', 'date' => '2025-10-22', 'time' => '14:00', 'location' => 'Digital Kigali Hub', 'attendees' => 28],
['id' => 3, 'title' => 'AI in Business Conference', 'date' => '2025-11-05', 'time' => '09:00', 'location' => 'Kigali Convention Center', 'attendees' => 120]
];
?>
<section class="pt-16 px-6" style="background-color: #d7d9ceff;">
<div class="container mx-auto">
<!-- Hero Section -->
<div class="text-center mb-12">
<h1 class="text-4xl md:text-5xl font-extrabold mb-4" style="color: #13505bff;">CodeMateRwa Community</h1>
<p class="text-lg max-w-3xl mx-auto" style="color: #0c7489ff;">Connect with fellow developers, designers, and tech enthusiasts. Share knowledge, collaborate on projects, and grow together.</p>
<div class="mt-6">
<a href="#join-community" class="btn" style="background: linear-gradient(135deg, #119da4ff, #0c7489ff); color: #ffffff; padding: 12px 18px; border-radius: 10px; text-decoration: none;">Join Our Community</a>
</div>
</div>
<!-- Stats Section -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-12">
<div class="rounded-lg shadow p-5 text-center" style="background-color: #ffffff;">
<div class="text-3xl font-bold" style="color: #119da4ff;">1,240+</div>
<div style="color: #0c7489ff;">Members</div>
</div>
<div class="rounded-lg shadow p-5 text-center" style="background-color: #ffffff;">
<div class="text-3xl font-bold" style="color: #119da4ff;">86</div>
<div style="color: #0c7489ff;">Projects</div>
</div>
<div class="rounded-lg shadow p-5 text-center" style="background-color: #ffffff;">
<div class="text-3xl font-bold" style="color: #119da4ff;">24</div>
<div style="color: #0c7489ff;">Events</div>
</div>
<div class="rounded-lg shadow p-5 text-center" style="background-color: #ffffff;">
<div class="text-3xl font-bold" style="color: #119da4ff;">15</div>
<div style="color: #0c7489ff;">Countries</div>
</div>
</div>
<!-- Community Highlights -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
<!-- Recent Discussions -->
<div class="lg:col-span-2">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold" style="color: #13505bff;">Recent Discussions</h2>
<a href="#" class="hover:underline" style="color: #119da4ff;">View All</a>
</div>
<div class="rounded-lg shadow" style="background-color: #ffffff;">
<?php foreach ($recentDiscussions as $discussion): ?>
<div class="p-4 border-b transition-colors" style="border-color: #d7d9ceff; background-color: #ffffff;">
<h3 class="font-semibold text-lg"><a href="#" class="hover:text-blue-600" style="color: #0c7489ff;"><?= htmlspecialchars($discussion['title']) ?></a></h3>
<div class="flex flex-wrap items-center text-sm mt-2" style="color: #040404ff;">
<span>by <?= htmlspecialchars($discussion['author']) ?></span>
<span class="mx-2">•</span>
<span><?= $discussion['replies'] ?> replies</span>
<span class="mx-2">•</span>
<span><?= $discussion['views'] ?> views</span>
<span class="mx-2">•</span>
<span><?= $discussion['last_activity'] ?></span>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
<!-- Upcoming Events -->
<div>
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold" style="color: #13505bff;">Upcoming Events</h2>
<a href="#" class="hover:underline" style="color: #119da4ff;">View All</a>
</div>
<div class="space-y-4">
<?php foreach ($upcomingEvents as $event): ?>
<div class="rounded-lg shadow p-4 hover:shadow-md transition-shadow" style="background-color: #ffffff;">
<h3 class="font-semibold" style="color: #13505bff;"><?= htmlspecialchars($event['title']) ?></h3>
<div class="text-sm mt-2" style="color: #0c7489ff;">
<div class="flex items-center mt-1">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg>
<?= date('M j, Y', strtotime($event['date'])) ?> at <?= $event['time'] ?>
</div>
<div class="flex items-center mt-1">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
<?= htmlspecialchars($event['location']) ?>
</div>
<div class="flex items-center mt-1">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
</svg>
<?= $event['attendees'] ?> attending
</div>
</div>
<div class="mt-3">
<button class="text-sm px-3 py-1 rounded hover:bg-blue-200 transition-colors" style="background-color: #119da4ff; color: #ffffff;">RSVP</button>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
<!-- Community Members -->
<div class="mb-12">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold" style="color: #13505bff;">Active Community Members</h2>
<a href="#" class="hover:underline" style="color: #119da4ff;">View All</a>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
<?php foreach ($communityMembers as $member): ?>
<div class="rounded-lg shadow text-center p-4 hover:shadow-md transition-shadow" style="background-color: #ffffff;">
<img src="<?= htmlspecialchars($member['avatar']) ?>" alt="<?= htmlspecialchars($member['name']) ?>" class="w-16 h-16 rounded-full mx-auto object-cover">
<h3 class="font-semibold mt-3" style="color: #13505bff;"><?= htmlspecialchars($member['name']) ?></h3>
<p class="text-sm mt-1" style="color: #0c7489ff;"><?= htmlspecialchars($member['role']) ?></p>
<p class="text-xs mt-2" style="color: #040404ff;">Joined <?= date('M Y', strtotime($member['joined'])) ?></p>
</div>
<?php endforeach; ?>
</div>
</div>
<!-- Join Community Section -->
<div id="join-community" class="rounded-2xl p-8 text-white text-center mb-12" style="background: linear-gradient(135deg, #119da4ff, #0c7489ff);">
<h2 class="text-3xl font-bold mb-4">Become Part of Our Community</h2>
<p class="text-xl mb-6 max-w-2xl mx-auto">Connect with like-minded professionals, share your expertise, and grow your skills with CodeMateRwa.</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<a href="contact.php" class="font-semibold px-6 py-3 rounded-lg transition-colors" style="background-color: #ffffff; color: #13505bff;">Join Now</a>
<a href="#" class="font-semibold px-6 py-3 rounded-lg transition-colors" style="background-color: transparent; border: 2px solid #ffffff; color: #ffffff;">Learn More</a>
</div>
</div>
<!-- Community Benefits -->
<div class="mb-12">
<h2 class="text-2xl font-bold text-center mb-8" style="color: #13505bff;">Why Join Our Community?</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="rounded-lg shadow p-6 text-center" style="background-color: #ffffff;">
<div class="w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4" style="background-color: #d7d9ceff;">
<svg class="w-8 h-8" style="color: #119da4ff;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
</svg>
</div>
<h3 class="text-xl font-semibold mb-2" style="color: #13505bff;">Networking</h3>
<p class="" style="color: #0c7489ff;">Connect with professionals across various tech disciplines in Rwanda and beyond.</p>
</div>
<div class="rounded-lg shadow p-6 text-center" style="background-color: #ffffff;">
<div class="w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4" style="background-color: #d7d9ceff;">
<svg class="w-8 h-8" style="color: #0c7489ff;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
</svg>
</div>
<h3 class="text-xl font-semibold mb-2" style="color: #13505bff;">Knowledge Sharing</h3>
<p class="" style="color: #0c7489ff;">Learn from experts and share your own insights through discussions and workshops.</p>
</div>
<div class="rounded-lg shadow p-6 text-center" style="background-color: #ffffff;">
<div class="w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4" style="background-color: #d7d9ceff;">
<svg class="w-8 h-8" style="color: #13505bff;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
</svg>
</div>
<h3 class="text-xl font-semibold mb-2" style="color: #13505bff;">Career Opportunities</h3>
<p class="" style="color: #0c7489ff;">Access exclusive job postings and collaboration opportunities within our network.</p>
</div>
</div>
</div>
</div>
</section>
<?php require_once 'includes/footer.php'; ?>