feat: homepage

@/components/ui/accordion.tsx

@@ -0,0 +1,56 @@
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+));
+AccordionItem.displayName = "AccordionItem";
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+));
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

app/routes/_index.tsx

@@ -1,5 +1,10 @@
 import type { MetaFunction } from "@remix-run/node";
-
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
 export const meta: MetaFunction = () => {
   return [
     { title: "New Remix App" },
@@ -9,33 +14,62 @@ export const meta: MetaFunction = () => {
 
 export default function Index() {
   return (
-    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
-      <h1>Welcome to Remix</h1>
-      <ul>
-        <li>
-          <a
-            target="_blank"
-            href="https://remix.run/tutorials/blog"
-            rel="noreferrer"
-          >
-            15m Quickstart Blog Tutorial
-          </a>
-        </li>
-        <li>
-          <a
-            target="_blank"
-            href="https://remix.run/tutorials/jokes"
-            rel="noreferrer"
-          >
-            Deep Dive Jokes App Tutorial
-          </a>
-        </li>
-        <li>
-          <a target="_blank" href="https://remix.run/docs" rel="noreferrer">
-            Remix Docs
-          </a>
-        </li>
-      </ul>
+    <div className="">
+      <div className="flex justify-center items-center p-11 text-4xl font-extrabold lg:text-5xl italic antialiased tracking-wide">
+        <h1 className="text-cyan-500">{"Teknum's Open Collective"}</h1>
+      </div>
+
+      <div className="flex justify-center items-center">
+        <Accordion type="single" collapsible className="w-96">
+          <AccordionItem value="why-we-build-this">
+            <AccordionTrigger>Why we build this?</AccordionTrigger>
+            <AccordionContent className="mx-5">
+              <p className="my-3">
+                Being an open source community that hosts out own stuff (like{" "}
+                <a href="https://github.com/teknologi-umum/pesto">Pesto</a>,{" "}
+                <a href="https://github.com/teknologi-umum/pesto">Graphene</a>,
+                and <a href="https://github.com/teknologi-umum/bot">some</a>{" "}
+                <a href="https://github.com/teknologi-umum/botnet">Telegram</a>{" "}
+                <a href="https://github.com/teknologi-umum/captcha">bots</a>)
+                and someone {"else's"} stuff (like Verdaccio, Bagetter,
+                Libreddit) definitely cost some money, since {"we'll"} need to
+                rent some servers, and most of the time, one server is not
+                enough. Not just that, we also hosts a yearly community meetup
+                called{" "}
+                <a href="https://conference.teknologiumum.com">TeknumConf</a>,
+                which also cost some money and {"it's"} a lot expensive compared
+                to just renting servers. To make everything runs on the day to
+                day basis where people can access our service for free and
+                attend to TeknumConf event with minimum entrance fee, we setup a
+                few places where people can donate their money to us. We ended
+                up having{" "}
+                <a href="https://github.com/sponsors/teknologi-umum">
+                  GitHub Sponsor
+                </a>{" "}
+                and <a href="https://saweria.co/teknologiumum">Saweria</a> page.
+              </p>
+
+              <p className="my-3">
+                On the internet, where most people are donating with USD, they
+                use a platform called{" "}
+                <a href="https://opencollective.com/">OpenCollective</a> where
+                you can do money management publicly. Using OpenCollective also
+                means that {"we'll"} have to shutdown any other donation funnels
+                and just use OpenCollective alone. Sadly, that {"doesn't"} work
+                with us. People that interact with the community only able to
+                donate with IDR, which on OpenCollective, {"there's"} no actual
+                fiscal host that would be compatible to us.
+              </p>
+
+              <p className="my-3">
+                We are an open source community, we want to uphold our value of
+                openness and we want to guarantee that the donations being made
+                is used properly.
+              </p>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </div>
     </div>
   );
 }

package.json

@@ -14,6 +14,7 @@
     "format": "prettier --write ."
   },
   "dependencies": {
+    "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",