207 lines
9.4 KiB
TypeScript
207 lines
9.4 KiB
TypeScript
import type { LoaderFunctionArgs } from "@remix-run/node";
|
|
import { Link, useLoaderData } from "@remix-run/react";
|
|
import { Building2, Handshake, Mail, MapPin, Phone, Users2 } from "lucide-react";
|
|
import {
|
|
Accordion,
|
|
AccordionContent,
|
|
AccordionItem,
|
|
AccordionTrigger,
|
|
} from "~/components/ui/accordion";
|
|
import { Button } from "~/components/ui/button";
|
|
import { authenticator } from "~/sessions/auth.server";
|
|
import Footer from "./components/footer";
|
|
import HomeHeader from "./components/header";
|
|
|
|
export async function loader({ request }: LoaderFunctionArgs) {
|
|
const token = await authenticator.isAuthenticated(request);
|
|
const isLoggedIn = token !== null;
|
|
|
|
return { isLoggedIn };
|
|
}
|
|
|
|
export default function IndexPage() {
|
|
const data = useLoaderData<typeof loader>();
|
|
return (
|
|
<>
|
|
<HomeHeader isLoggedIn={data.isLoggedIn} />
|
|
<main>
|
|
<section className="~py-12/24 w-full bg-secondary" id="home">
|
|
<div className="container grid items-center justify-between gap-8 px-4 md:px-6 lg:grid-cols-2">
|
|
<img
|
|
src="/img/home/hero.svg"
|
|
width={800}
|
|
height={600}
|
|
alt="hero-image"
|
|
className="~w-72/[26rem] order-1 h-auto place-self-center rounded-xl object-cover lg:order-2 lg:place-self-end"
|
|
/>
|
|
<div className="order-2 space-y-4 lg:order-1">
|
|
<h1 className="~text-3xl/4xl font-bold tracking-tighter">
|
|
Koperasi Produksi Rejeki Berkah:{" "}
|
|
<span className="text-primary">Bersama Membangun Kesejahteraan</span>
|
|
</h1>
|
|
<p className="text-justify text-muted-foreground">
|
|
Bergabunglah menjadi bagian dari anggota yang kuat dan solid, yang berkomitmen pada
|
|
pengembangan ekonomi bersama melalui prinsip-prinsip koperasi.
|
|
</p>
|
|
<Button className="px-10" asChild>
|
|
<Link to="/auth/login">Mulai Sekarang</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section className="~py-12/24 container bg-white" id="about-us">
|
|
<div className="grid items-center justify-between gap-8 px-4 md:px-6 lg:grid-cols-2">
|
|
<img
|
|
src="/img/home/about-us.svg"
|
|
width={800}
|
|
height={600}
|
|
alt="about-image"
|
|
className="~w-72/96 mx-auto h-auto rounded-xl object-cover"
|
|
/>
|
|
<div className="space-y-3">
|
|
<h2 className="font-bold text-2xl tracking-tighter">Tentang Kami</h2>
|
|
<p className="font-semibold text-2xl text-primary uppercase">
|
|
Dari anggota, untuk dan oleh anggota
|
|
</p>
|
|
<p className="text-justify text-muted-foreground">
|
|
Koperasi Produksi Rejeki Berkah adalah koperasi yang bergerak dalam bidang produksi
|
|
dan distribusi hasil pertanian. Kami berkomitmen untuk memberikan kesejahteraan bagi
|
|
anggota koperasi dan masyarakat sekitar melalui prinsip-prinsip koperasi.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section className="~py-12/24 w-full bg-secondary" id="benefit">
|
|
<div className="container space-y-12">
|
|
<h2 className="text-center font-bold text-2xl tracking-tighter">
|
|
Mengapa Bergabung dengan Koperasi Kami?
|
|
</h2>
|
|
<div className="grid grid-cols-1 items-center gap-5 lg:grid-cols-3">
|
|
<div className="mx-auto flex max-w-sm flex-col items-center justify-center space-y-2">
|
|
<Users2 className="h-16 w-auto text-primary" />
|
|
<h3 className="font-semibold text-xl">Kesejahteraan Bersama</h3>
|
|
<p className="text-justify text-muted-foreground">
|
|
Dapatkan bagian dari keuntungan yang diperoleh koperasi.
|
|
</p>
|
|
</div>
|
|
<div className="mx-auto flex max-w-sm flex-col items-center justify-center space-y-2">
|
|
<Building2 className="h-16 w-auto text-primary" />
|
|
<h3 className="font-semibold text-xl">Keamanan dan Transparansi</h3>
|
|
<p className="text-justify text-muted-foreground">
|
|
Dengan teknologi terbaru, setiap transaksi dalam koperasi ini tercatat dengan aman
|
|
dan transparan.
|
|
</p>
|
|
</div>
|
|
<div className="mx-auto flex max-w-sm flex-col items-center justify-center space-y-2">
|
|
<Handshake className="h-16 w-auto text-primary" />
|
|
<h3 className="font-semibold text-xl">Dukungan untuk Usaha Anda</h3>
|
|
<p className="text-justify text-muted-foreground">
|
|
Dapatkan bantuan dan dukungan untuk memulai atau mengembangkan usaha Anda.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section className="~py-12/24 container bg-white" id="faq">
|
|
<div className="mx-auto max-w-2xl space-y-12">
|
|
<div className="space-y-4">
|
|
<h2 className="text-center font-bold text-2xl tracking-tighter">Pertanyaan Umum</h2>
|
|
<p className="text-center">
|
|
Kami telah mengumpulkan jawaban untuk pertanyaan yang sering diajukan oleh calon
|
|
anggota. Temukan informasi penting yang Anda butuhkan di sini.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<Accordion type="single" collapsible>
|
|
<AccordionItem value="item-1">
|
|
<AccordionTrigger>
|
|
Apakah koperasi ini menyediakan dukungan untuk anggota?
|
|
</AccordionTrigger>
|
|
<AccordionContent>
|
|
Tentu, kami menyediakan dukungan penuh untuk setiap anggota kami. Tim kami siap
|
|
membantu Anda dalam segala hal,
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
</Accordion>
|
|
<Accordion type="single" collapsible>
|
|
<AccordionItem value="item-2">
|
|
<AccordionTrigger>
|
|
Bagaimana cara saya bergabung menjadi anggota koperasi?
|
|
</AccordionTrigger>
|
|
<AccordionContent>
|
|
Tentu, kami menyediakan dukungan penuh untuk setiap anggota kami. Tim kami siap
|
|
membantu Anda dalam segala hal,
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
</Accordion>
|
|
<Accordion type="single" collapsible>
|
|
<AccordionItem value="item-3">
|
|
<AccordionTrigger>
|
|
Apakah koperasi ini menyediakan pinjaman bagi anggotanya?
|
|
</AccordionTrigger>
|
|
<AccordionContent>
|
|
Tentu, kami menyediakan dukungan penuh untuk setiap anggota kami. Tim kami siap
|
|
membantu Anda dalam segala hal,
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
</Accordion>
|
|
<Accordion type="single" collapsible>
|
|
<AccordionItem value="item-4">
|
|
<AccordionTrigger>Apakah ada biaya keanggotaan?</AccordionTrigger>
|
|
<AccordionContent>
|
|
Tentu, kami menyediakan dukungan penuh untuk setiap anggota kami. Tim kami siap
|
|
membantu Anda dalam segala hal,
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
</Accordion>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section className="~py-12/24 w-full bg-secondary" id="contact">
|
|
<div className="container space-y-12">
|
|
<div className="mx-auto max-w-2xl space-y-4">
|
|
<h2 className="text-center font-bold text-2xl tracking-tighter">Kontak Kami</h2>
|
|
<p className="text-center">
|
|
Hubungi kami untuk informasi lebih lanjut mengenai keanggotaan dan layanan yang kami
|
|
tawarkan. Tim kami siap membantu Anda untuk bergabung dan berkembang.
|
|
</p>
|
|
</div>
|
|
<div className="mx-auto grid max-w-5xl grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3 lg:gap-3">
|
|
<div className="flex max-w-sm gap-4">
|
|
<div className="h-fit rounded-full bg-white p-2">
|
|
<Phone className="~h-4/6 w-auto text-primary" />
|
|
</div>
|
|
<div>
|
|
<p className="font-semibold">Whatsapp</p>
|
|
<p className="mt-2">+1-940-394-2948</p>
|
|
<p>+1-389-385-3807</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex max-w-sm gap-4">
|
|
<div className="h-fit rounded-full bg-white p-2">
|
|
<Mail className="~h-4/6 w-auto text-primary" />
|
|
</div>
|
|
<div>
|
|
<p className="font-semibold">Email</p>
|
|
<p className="mt-2">support@brainwave.io</p>
|
|
<p>contact@brainwave.io</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex max-w-sm gap-4">
|
|
<div className="h-fit rounded-full bg-white p-2">
|
|
<MapPin className="~h-4/6 w-auto text-primary" />
|
|
</div>
|
|
<div>
|
|
<p className="font-semibold">Alamat</p>
|
|
<p className="mt-2">34 Madison Street, NY, USA 10005</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<Footer />
|
|
</>
|
|
);
|
|
}
|