Files
movetolinux/src/pages/th/index.astro
T

136 lines
5.1 KiB
Plaintext

---
import BasicLayout from "@/layouts/BasicLayout.astro";
import { getRelativeLocaleUrl } from "astro:i18n";
const startLink = getRelativeLocaleUrl("th", "start");
---
<BasicLayout title="ย้ายไป Linux">
<header
class="min-h-[50vh] flex justify-center items-center flex-col gap-2 bg-amber-50 dark:bg-amber-950"
>
<h1
class="text-5xl leading-14 font-bold bg-gradient-to-r from-amber-700 to-amber-900 dark:from-amber-400 dark:to-amber-600 bg-clip-text text-transparent"
>
ย้ายไป Linux
</h1>
<p>เว็บไซต์นี้จะช่วยให้คุณเรียนรู้และติดตั้ง Linux</p>
<div class="text-center">
<a href="#what">อะไร</a>
&bull;
<a href="#why">ทำไม</a>
&bull;
<a href={startLink} class="font-bold">เริ่มเลยดีกว่า</a><br />
<a href="/th/apps">แอพลิเคชั่นบน Linux</a>
</div>
</header>
<main>
<section id="what" class="border-t-2 border-amber-900">
<h2 class="text-blue-900 dark:text-blue-200">Linux คืออะไร</h2>
<p>
Linux เป็น<i>ครอบครัว</i>ของระบบปฏิบัติการที่มีแกนกลางเดียวกัน
โดยแกนกลางที่ว่า นั้นมีชื่อว่าเคอร์เนล (Kernel)
</p>
</section>
<section id="why">
<h2 class="mb-2 text-violet-900 dark:text-violet-200">
เหตุผลในการย้ายไป Linux
</h2>
<div class="grid grid-cols-2 gap-4 lg:max-w-[50vw]">
<div class="card">
<h3>ฟรี</h3>
<p>ซอฟท์แวร์ฟรีและเสรี สร้างอิสรภาพให้อุปกรณ์ของคุณ</p>
</div>
<div class="card">
<h3>ประสิทธิภาพ</h3>
<p>
ฟื้นคืนชีพอุปกรณ์เก่าของคุณ
และให้อุปกรณ์ปัจจุบันทำได้มากขึ้น
</p>
</div>
<div class="card">
<h3>อยู่ในการควบคุม</h3>
<p>
ควบคุมสิ่งที่อยู่บนอุปกรณ์ของคุณ ปรับแต่งให้ตรงสเป็ค
ให้อุปกรณ์เป็นของคุณอย่างแท้จริง
</p>
</div>
<div class="card">
<h3>ความเป็นส่วนตัว</h3>
<p>
เลือกว่าคุณต้องการที่จะแบ่งปันข้อมูลมากแค่ใหนเพื่อปรับปรุงซอฟท์แวร์ที่คุณใช้
</p>
</div>
</div>
</section>
<section id="start">
<h2 class="text-green-900 dark:text-green-200 mb-2">
หากคุณอยากลองแล้ว...
</h2>
<p>กดปุ่มด้านล่างเพื่อเริ่มต้นการผจญภัยในดินแดนเพนกวินได้เลย</p>
<a href={startLink} class="button mt-4">เริ่มต้นเลย!</a>
</section>
<section id="incorrect">
<h2 class="text-red-900 dark:text-red-300 mb-2">
พบเจอข้อมูลที่ไม่ถูกต้องรึเปล่า
</h2>
<p class="max-w-[50vw] text-center">
เว็บไซต์นี้ไม่สมบูรณ์แบบ หากคุณเจอข้อมูลใดที่ล้าสมัย ไม่ถูกต้อง
หรืออาจถูกเข้าใจผิด โปรดส่งอีเมลไปยัง
<code>linesofcodes at dailitation dot xyz</code> (<a
href="https://keys.openpgp.org/vks/v1/by-fingerprint/8A487B532BEF7B324339AC1CFBE9E5E346F3DDE8"
target="_blank"
rel="noopener">คีย์เข้ารหัส PGP</a
>)
</p>
</section>
</main>
<footer class="text-center py-4 bg-slate-800 text-white">
<div>
<a href={getRelativeLocaleUrl("th", "contents")}>สารบัญ</a>
&bull;
<a href={getRelativeLocaleUrl("th", "privacy")}
>นโยบายความเป็นส่วนตัว</a
>
&bull;
<a
href="https://gitskette.dailitation.xyz/linesofcodes/movetolinux"
target="_blank"
rel="noopener noreferrer"
>
โค้ด
</a>
</div>
<p>
ทำด้วย &hearts; จาก <a
href="https://github.com/lines-of-codes/"
target="_blank">lines-of-codes</a
>
</p>
<p class="text-gray-400">
เว็บไซต์อยู่ภายใต้สัญญาอนุญาต MIT; เนื้อหาข้อความส่วนใหญ่อยู่ภายใต้
CC-BY-SA 4.0
</p>
</footer>
</BasicLayout>
<style>
@reference "@/styles/global.css";
a:not(.button) {
@apply underline;
}
h2 {
@apply text-4xl font-bold;
}
h3 {
@apply text-3xl font-semibold;
}
section {
@apply flex justify-center items-center flex-col p-12;
}
</style>