109 lines
3.8 KiB
Plaintext
109 lines
3.8 KiB
Plaintext
---
|
|
import BasicLayout from "@/layouts/BasicLayout.astro";
|
|
import { getRelativeLocaleUrl } from "astro:i18n";
|
|
|
|
const startLink = getRelativeLocaleUrl("th", "start");
|
|
---
|
|
|
|
<BasicLayout>
|
|
<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>
|
|
<a href="#what">อะไร</a>
|
|
•
|
|
<a href="#why">ทำไม</a>
|
|
•
|
|
<a href={startLink} class="font-bold">เริ่มเลยดีกว่า</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>
|
|
</main>
|
|
<footer class="text-center py-4 bg-slate-800 text-white">
|
|
<div>
|
|
<a href={getRelativeLocaleUrl("th", "contents")}>สารบัญ</a>
|
|
•
|
|
<a href={getRelativeLocaleUrl("th", "privacy")}
|
|
>นโยบายความเป็นส่วนตัว</a
|
|
>
|
|
</div>
|
|
<p>
|
|
ทำด้วย ♥ จาก <a
|
|
href="https://github.com/lines-of-codes/"
|
|
target="_blank">lines-of-codes</a
|
|
>
|
|
</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>
|