Skip to content

Commit 92f136e

Browse files
yokoberekyokoberek
committed
feat: add Open Source link to the header navigation
1 parent 6e04fb5 commit 92f136e

2 files changed

Lines changed: 341 additions & 0 deletions

File tree

‎src/components/Header.astro‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,13 @@ import Link from "./Link.astro";
2929
>
3030
Tentang
3131
</Link>
32+
<Link
33+
href="/open-source"
34+
class="text-sm hover:text-primary"
35+
activeClass="font-medium border-b-2 border-slate-600"
36+
>
37+
Open Source
38+
</Link>
3239
<Link
3340
href="/kontribusi"
3441
class="text-sm hover:text-primary"

‎src/pages/open-source.astro‎

Lines changed: 334 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,334 @@
1+
---
2+
import { Image } from "astro:assets";
3+
import HeroImage from "@/assets/images/home-open-source-ilustration.svg";
4+
5+
import Layout from "@/layouts/Layout.astro";
6+
import Link from "@/components/Link.astro";
7+
8+
import { Button } from "@/components/ui/button";
9+
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
10+
11+
import { ArrowRight, Code, Globe, Lightbulb, Users, Zap } from "lucide-react";
12+
---
13+
14+
<Layout
15+
title="Open Source"
16+
description="Kami percaya pada kekuatan kolaborasi berbasis open source dan kami berkomitmen memajukan ekosistem teknologi di Tanah Papua."
17+
>
18+
<div class="min-h-screen bg-white">
19+
{/* Hero Section */}
20+
<section class="bg-slate-50 py-12 md:py-24">
21+
<div class="max-w-screen-xl mx-auto px-4 md:px-8">
22+
<div class="mx-auto max-w-3xl space-y-4 text-center">
23+
<h1 class="text-4xl font-bold tracking-tighter sm:text-5xl">
24+
Open Source untuk Papua
25+
</h1>
26+
<p class="text-gray-500 md:text-xl/relaxed">
27+
Memahami konsep Open Source dan mengapa kolaborasi berbasis Open
28+
Source penting untuk Tanah Papua
29+
</p>
30+
</div>
31+
</div>
32+
</section>
33+
34+
{/* What is Open Source Section */}
35+
<section class="py-12 md:py-24">
36+
<div class="max-w-screen-xl mx-auto px-4 md:px-8">
37+
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
38+
<div class="space-y-6">
39+
<h2 class="text-3xl font-bold tracking-tighter">
40+
Apa itu Open Source?
41+
</h2>
42+
<p class="text-gray-500 md:text-lg/relaxed">
43+
Open Source adalah pendekatan pengembangan perangkat lunak yang
44+
menekankan pada keterbukaan kode sumber, kolaborasi, dan berbagi
45+
pengetahuan. Perangkat lunak open source adalah program komputer
46+
yang kode sumbernya tersedia untuk umum dan dapat diakses,
47+
dimodifikasi, dan didistribusikan oleh siapa saja.
48+
</p>
49+
<p class="text-gray-500 md:text-lg/relaxed">
50+
Prinsip utama open source adalah transparansi, kolaborasi, dan
51+
kebebasan untuk menggunakan, mempelajari, memodifikasi, dan
52+
mendistribusikan perangkat lunak. Pendekatan ini memungkinkan
53+
pengembang dari seluruh dunia untuk bekerja sama, berbagi
54+
pengetahuan, dan membangun solusi yang lebih baik.
55+
</p>
56+
</div>
57+
<div class="hidden lg:block">
58+
<Image
59+
src={HeroImage}
60+
alt="Hero - Open Source Ilustration"
61+
width={600}
62+
height={400}
63+
class="rounded-lg object-cover mx-auto"
64+
/>
65+
</div>
66+
</div>
67+
</div>
68+
</section>
69+
70+
{/* Benefits of Open Source */}
71+
<section class="bg-slate-50 py-12 md:py-24">
72+
<div class="max-w-screen-xl mx-auto px-4 md:px-8 space-y-12">
73+
<div class="space-y-4 text-center">
74+
<h2 class="text-3xl font-bold tracking-tighter sm:text-4xl">
75+
Manfaat Open Source
76+
</h2>
77+
<p class="mx-auto max-w-[700px] text-gray-500 md:text-lg/relaxed">
78+
Open Source menawarkan berbagai keuntungan yang mendukung inovasi,
79+
kolaborasi, dan pembangunan kapasitas
80+
</p>
81+
</div>
82+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
83+
<Card className="bg-white">
84+
<CardHeader className="pb-2">
85+
<div
86+
class="flex items-center justify-center w-12 h-12 rounded-full bg-primary/10 text-primary mb-4"
87+
>
88+
<Code className="h-6 w-6" />
89+
</div>
90+
<CardTitle>Transparansi</CardTitle>
91+
</CardHeader>
92+
<CardContent>
93+
<p class="text-gray-500">
94+
Kode sumber yang terbuka memungkinkan siapa saja untuk
95+
memeriksa, memahami, dan mempelajari cara kerja perangkat lunak,
96+
meningkatkan kepercayaan dan keamanan.
97+
</p>
98+
</CardContent>
99+
</Card>
100+
<Card className="bg-white">
101+
<CardHeader className="pb-2">
102+
<div
103+
class="flex items-center justify-center w-12 h-12 rounded-full bg-primary/10 text-primary mb-4"
104+
>
105+
<Users className="h-6 w-6" />
106+
</div>
107+
<CardTitle>Kolaborasi</CardTitle>
108+
</CardHeader>
109+
<CardContent>
110+
<p class="text-gray-500">
111+
Memungkinkan pengembang dari berbagai latar belakang dan lokasi
112+
untuk bekerja sama, berbagi pengetahuan, dan membangun solusi
113+
yang lebih baik.
114+
</p>
115+
</CardContent>
116+
</Card>
117+
<Card className="bg-white">
118+
<CardHeader className="pb-2">
119+
<div
120+
class="flex items-center justify-center w-12 h-12 rounded-full bg-primary/10 text-primary mb-4"
121+
>
122+
<Zap className="h-6 w-6" />
123+
</div>
124+
<CardTitle>Inovasi</CardTitle>
125+
</CardHeader>
126+
<CardContent>
127+
<p class="text-gray-500">
128+
Mendorong inovasi melalui berbagi ide, eksperimen, dan
129+
pengembangan berkelanjutan yang melibatkan komunitas yang
130+
beragam.
131+
</p>
132+
</CardContent>
133+
</Card>
134+
<Card className="bg-white">
135+
<CardHeader className="pb-2">
136+
<div
137+
class="flex items-center justify-center w-12 h-12 rounded-full bg-primary/10 text-primary mb-4"
138+
>
139+
<Globe className="h-6 w-6" />
140+
</div>
141+
<CardTitle>Aksesibilitas</CardTitle>
142+
</CardHeader>
143+
<CardContent>
144+
<p class="text-gray-500">
145+
Mendemokratisasi akses ke teknologi dengan menghilangkan
146+
hambatan finansial dan teknis, memungkinkan lebih banyak orang
147+
untuk menggunakan dan berkontribusi.
148+
</p>
149+
</CardContent>
150+
</Card>
151+
<Card className="bg-white">
152+
<CardHeader className="pb-2">
153+
<div
154+
class="flex items-center justify-center w-12 h-12 rounded-full bg-primary/10 text-primary mb-4"
155+
>
156+
<Lightbulb className="h-6 w-6" />
157+
</div>
158+
<CardTitle>Pembelajaran</CardTitle>
159+
</CardHeader>
160+
<CardContent>
161+
<p class="text-gray-500">
162+
Menyediakan sumber belajar yang berharga bagi pengembang pemula
163+
dan berpengalaman untuk meningkatkan keterampilan dan
164+
pengetahuan mereka.
165+
</p>
166+
</CardContent>
167+
</Card>
168+
<Card className="bg-white">
169+
<CardHeader className="pb-2">
170+
<div
171+
class="flex items-center justify-center w-12 h-12 rounded-full bg-primary/10 text-primary mb-4"
172+
>
173+
<Users className="h-6 w-6" />
174+
</div>
175+
<CardTitle>Keberlanjutan</CardTitle>
176+
</CardHeader>
177+
<CardContent>
178+
<p class="text-gray-500">
179+
Memastikan keberlanjutan proyek melalui dukungan komunitas,
180+
bahkan ketika individu atau organisasi tertentu tidak lagi
181+
terlibat.
182+
</p>
183+
</CardContent>
184+
</Card>
185+
</div>
186+
</div>
187+
</section>
188+
189+
{/* Why Open Source for Papua */}
190+
<section class="py-12 md:py-24">
191+
<div class="max-w-screen-xl mx-auto px-4 md:px-8">
192+
<div class="mx-auto max-w-3xl space-y-8">
193+
<h2 class="text-3xl font-bold tracking-tighter text-center">
194+
Mengapa Kolaborasi Open Source untuk Tanah Papua?
195+
</h2>
196+
<p class="text-gray-500 md:text-lg/relaxed">
197+
Tanah Papua memiliki keunikan geografis, budaya, dan tantangan
198+
pembangunan yang memerlukan solusi teknologi yang disesuaikan dengan
199+
konteks lokal. Kolaborasi berbasis open source menawarkan pendekatan
200+
yang ideal untuk mengembangkan solusi teknologi yang relevan dan
201+
berkelanjutan untuk Papua.
202+
</p>
203+
<div class="space-y-6 mt-8">
204+
<div class="bg-slate-50 p-6 rounded-lg">
205+
<h3 class="text-xl font-bold mb-3">
206+
Pemberdayaan Masyarakat Lokal
207+
</h3>
208+
<p class="text-gray-500">
209+
Open source memungkinkan masyarakat Papua untuk tidak hanya
210+
menjadi pengguna teknologi, tetapi juga menjadi pengembang dan
211+
kontributor aktif. Ini memberdayakan masyarakat lokal untuk
212+
mengembangkan solusi yang sesuai dengan kebutuhan mereka
213+
sendiri.
214+
</p>
215+
</div>
216+
<div class="bg-slate-50 p-6 rounded-lg">
217+
<h3 class="text-xl font-bold mb-3">
218+
Pelestarian Budaya dan Bahasa
219+
</h3>
220+
<p class="text-gray-500">
221+
Papua memiliki kekayaan budaya dan bahasa yang luar biasa.
222+
Proyek open source dapat membantu mendokumentasikan,
223+
melestarikan, dan mempromosikan warisan budaya ini melalui
224+
aplikasi, kamus digital, dan platform pembelajaran bahasa.
225+
</p>
226+
</div>
227+
<div class="bg-slate-50 p-6 rounded-lg">
228+
<h3 class="text-xl font-bold mb-3">
229+
Mengatasi Kesenjangan Digital
230+
</h3>
231+
<p class="text-gray-500">
232+
Dengan mengurangi hambatan akses ke teknologi, open source dapat
233+
membantu mengatasi kesenjangan digital di Papua, memastikan
234+
bahwa manfaat teknologi dapat dirasakan oleh semua lapisan
235+
masyarakat.
236+
</p>
237+
</div>
238+
<div class="bg-slate-50 p-6 rounded-lg">
239+
<h3 class="text-xl font-bold mb-3">Kolaborasi Tanpa Batas</h3>
240+
<p class="text-gray-500">
241+
Open source memungkinkan kolaborasi antara pengembang lokal di
242+
Papua dengan komunitas global, membuka peluang untuk berbagi
243+
pengetahuan, pengalaman, dan sumber daya yang dapat mempercepat
244+
perkembangan teknologi di wilayah ini.
245+
</p>
246+
</div>
247+
</div>
248+
</div>
249+
</div>
250+
</section>
251+
252+
{/* Impact Section */}
253+
<section class="bg-slate-50 py-12 md:py-24">
254+
<div class="max-w-screen-xl mx-auto px-4 md:px-8">
255+
<div class="mx-auto max-w-3xl space-y-8">
256+
<h2 class="text-3xl font-bold tracking-tighter text-center">
257+
Dampak yang Diharapkan
258+
</h2>
259+
<p class="text-gray-500 md:text-lg/relaxed">
260+
Melalui kolaborasi open source, kami berharap dapat menciptakan
261+
dampak positif yang berkelanjutan bagi masyarakat Papua dalam
262+
berbagai aspek:
263+
</p>
264+
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8">
265+
<div class="bg-white p-6 rounded-lg border">
266+
<h3 class="text-xl font-bold mb-3">Solusi Teknologi Lokal</h3>
267+
<p class="text-gray-500">
268+
Mengembangkan aplikasi dan platform yang dirancang khusus untuk
269+
mengatasi tantangan unik di Papua, dengan fokus pada kebutuhan
270+
dan konteks lokal yang spesifik.
271+
</p>
272+
</div>
273+
<div class="bg-white p-6 rounded-lg border">
274+
<h3 class="text-xl font-bold mb-3">Infrastruktur Digital</h3>
275+
<p class="text-gray-500">
276+
Membangun infrastruktur digital yang dapat berfungsi dalam
277+
berbagai kondisi, mendukung akses ke layanan penting, dan
278+
memperkuat fondasi untuk pengembangan ekonomi digital yang
279+
inklusif.
280+
</p>
281+
</div>
282+
<div class="bg-white p-6 rounded-lg border">
283+
<h3 class="text-xl font-bold mb-3">Pelestarian Budaya Digital</h3>
284+
<p class="text-gray-500">
285+
Menciptakan platform dan alat digital untuk mendokumentasikan
286+
dan melestarikan bahasa, seni, dan pengetahuan tradisional
287+
Papua, memastikan keberlanjutannya di era digital.
288+
</p>
289+
</div>
290+
<div class="bg-white p-6 rounded-lg border">
291+
<h3 class="text-xl font-bold mb-3">Inovasi Lintas Sektor</h3>
292+
<p class="text-gray-500">
293+
Mendorong inovasi teknologi yang mengatasi tantangan di berbagai
294+
sektor melalui pendekatan kolaboratif yang melibatkan berbagai
295+
pemangku kepentingan.
296+
</p>
297+
</div>
298+
</div>
299+
</div>
300+
</div>
301+
</section>
302+
303+
{/* CTA Section */}
304+
<section class="py-12 md:py-24">
305+
<div class="max-w-screen-xl mx-auto px-4 md:px-8">
306+
<div class="mx-auto max-w-3xl space-y-6 text-center">
307+
<h2 class="text-3xl font-bold tracking-tighter sm:text-4xl">
308+
Bergabung dalam Perjalanan Open Source
309+
</h2>
310+
<p class="text-gray-500 md:text-lg/relaxed">
311+
Jadilah bagian dari gerakan open source untuk memajukan teknologi di
312+
Tanah Papua. Bersama-sama, kita dapat menciptakan solusi teknologi
313+
yang berdampak positif dan berkelanjutan.
314+
</p>
315+
<div class="flex flex-col sm:flex-row justify-center gap-4 mt-6">
316+
<Button size="lg" variant="default" className="h-12">
317+
<Link href="/kontribusi">Mulai Berkontribusi</Link>
318+
</Button>
319+
<Button size="lg" variant="outline" className="h-12">
320+
<Link
321+
href="https://github.com/papua-opensource"
322+
target="_blank"
323+
class="flex items-center gap-2"
324+
>
325+
<span>Lihat Proyek Kami</span>
326+
<ArrowRight className="h-4 w-4" />
327+
</Link>
328+
</Button>
329+
</div>
330+
</div>
331+
</div>
332+
</section>
333+
</div>
334+
</Layout>

0 commit comments

Comments
 (0)