74 lines
3.1 KiB
JavaScript
74 lines
3.1 KiB
JavaScript
import { Link } from "@inertiajs/react";
|
|
import React from "react";
|
|
import { AiOutlineInstagram } from "react-icons/ai";
|
|
const Landing = () => {
|
|
return (
|
|
<div className="flex flex-col w-full min-h-[100dvh] py-12">
|
|
{/* <PlayMusic /> */}
|
|
<img
|
|
className="fixed -z-10 opacity-50 blur-xs top-0 w-full h-full object-cover"
|
|
src="/assets/images/bglanding.png"
|
|
alt=""
|
|
/>
|
|
<div className="flex flex-col h-full flex-1 max-w-[1000px] px-6 mx-auto md:justify-center md:items-center">
|
|
<div className="flex flex-col w-[90%] md:w-[90%] h-[400px] justify-end">
|
|
<h1 className="text-2xl font-bold">Rumah Baca Kita</h1>
|
|
<div className="bg-white border-2 px-4 py-3 rounded-lg mt-3 md:w-[50%]">
|
|
<p>
|
|
<span className="text-blue-500 font-semibold">
|
|
Rumah Baca Kita
|
|
</span>{" "}
|
|
merupakan sebuah tempat yang menyediakan jasa secara
|
|
gratis untuk anak-anak bisa membaca, belajar, dan
|
|
bermain. Rumah Baca Kita berlokasi di kabupaten
|
|
Banyuwang, Jawa Timur
|
|
</p>
|
|
|
|
<div className="flex items-center mt-4 gap-2">
|
|
<AiOutlineInstagram size={24} />
|
|
<p>rumahbacakitabwi</p>
|
|
</div>
|
|
</div>
|
|
<Link href="/login">
|
|
<button className="btn btn-primary w-fit mt-6">
|
|
Masuk disini
|
|
</button>
|
|
</Link>
|
|
</div>
|
|
<div className="flex flex-col w-full mx-auto">
|
|
<h1 className="text-2xl text-center py-3 font-bold">
|
|
Modul Pembelajaran
|
|
</h1>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 mt-6 md:px-12 gap-4">
|
|
<CardService
|
|
title="Berhitung"
|
|
icon="/assets/images/berhitung.png"
|
|
/>
|
|
<CardService
|
|
title="Membaca"
|
|
icon="/assets/images/membaca.png"
|
|
/>
|
|
<CardService
|
|
title="Tebak Gambar"
|
|
icon="/assets/images/kuis.png"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const CardService = ({ title, icon }) => {
|
|
return (
|
|
<Link href="/user">
|
|
<div className="flex flex-row p-4 bg-white/70 backdrop-blur-sm rounded-lg border-2 items-center gap-3">
|
|
<img className="w-24 h-24 object-cover" src={icon} alt="ic" />
|
|
<h1 className="text-lg font-bold">{title}</h1>
|
|
</div>
|
|
</Link>
|
|
);
|
|
};
|
|
|
|
export default Landing;
|