feat: setup faqs

apps/web/src/views/home/components/Faqs.tsx

@@ -0,0 +1,113 @@
+import Link from "next/link";
+import {
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel,
+} from "@headlessui/react";
+import { HiMiniMinusSmall, HiMiniPlusSmall } from "react-icons/hi2";
+
+const LORUM_IPSUM =
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.";
+
+const faqs = [
+  {
+    question: "Why make an open source Trello?",
+    answer: LORUM_IPSUM,
+  },
+  {
+    question: "What's the difference between Kan and Trello?",
+    answer: LORUM_IPSUM,
+  },
+  {
+    question: "How is the project funded?",
+    answer: LORUM_IPSUM,
+  },
+  {
+    question: "How do I import my Trello boards?",
+    answer: LORUM_IPSUM,
+  },
+  {
+    question: "How do I get a custom URL?",
+    answer: LORUM_IPSUM,
+  },
+  {
+    question: "Do you offer a free plan?",
+    answer: LORUM_IPSUM,
+  },
+  {
+    question: "What license are you using?",
+    answer: LORUM_IPSUM,
+  },
+  {
+    question: "How do I invite team members?",
+    answer: LORUM_IPSUM,
+  },
+  {
+    question: "How do I self-host?",
+    answer: LORUM_IPSUM,
+  },
+];
+
+const Faqs = () => {
+  return (
+    <div className="mx-auto max-w-[900px] px-4 pb-12">
+      <div className="flex flex-col items-center justify-center pb-12">
+        <div className="flex items-center gap-2 rounded-full border bg-light-50 px-4 py-1 text-center text-xs text-light-1000 dark:border-dark-300 dark:bg-dark-50 dark:text-dark-900 lg:text-sm">
+          <p>FAQs</p>
+        </div>
+
+        <p className="mt-2 text-center text-3xl font-bold text-light-1000 dark:text-dark-1000 lg:text-4xl">
+          Questions?
+        </p>
+        <p className="text:md mt-3 max-w-[600px] text-center text-dark-900 lg:text-lg">
+          Find answers to common questions about the project. Can't find what
+          you're looking for? Feel free to{" "}
+          <Link href="mailto:support@kan.bn" className="underline">
+            contact us
+          </Link>
+          .
+        </p>
+      </div>
+      <div className="rounded-2xl bg-light-50 ring-1 ring-light-300 dark:bg-dark-50 dark:ring-dark-400">
+        <div className="mx-auto max-w-7xl px-6 py-20 lg:px-16">
+          <div className="mx-auto max-w-4xl">
+            <dl className="divide-y divide-light-300 dark:divide-dark-600">
+              {faqs.map((faq) => (
+                <Disclosure
+                  key={faq.question}
+                  as="div"
+                  className="py-6 first:pt-0 last:pb-0"
+                >
+                  <dt>
+                    <DisclosureButton className="group flex w-full items-start justify-between text-left text-light-1000 dark:text-dark-1000">
+                      <span className="text-base/7 font-semibold">
+                        {faq.question}
+                      </span>
+                      <span className="ml-6 flex h-7 items-center">
+                        <HiMiniPlusSmall
+                          aria-hidden="true"
+                          className="size-6 group-data-[open]:hidden"
+                        />
+                        <HiMiniMinusSmall
+                          aria-hidden="true"
+                          className="size-6 group-[&:not([data-open])]:hidden"
+                        />
+                      </span>
+                    </DisclosureButton>
+                  </dt>
+                  <DisclosurePanel as="dd" className="mt-2 pr-12">
+                    <p className="text-[15px] leading-[1.7rem] text-light-800 dark:text-dark-600">
+                      {faq.answer}
+                    </p>
+                  </DisclosurePanel>
+                </Disclosure>
+              ))}
+            </dl>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Faqs;

apps/web/src/views/home/components/Features.tsx

@@ -40,7 +40,7 @@ const FeatureItem = ({
   return (
     <div
       onMouseEnter={handleMouseEnter}
-      className="group relative flex aspect-square h-auto w-full flex-col items-center justify-center overflow-hidden rounded-3xl border border-light-200 bg-light-50 dark:border-dark-200 dark:bg-dark-50 md:h-56 md:w-56"
+      className="group relative flex aspect-square w-full flex-col items-center justify-center overflow-hidden rounded-3xl border border-light-200 bg-light-50 p-2 dark:border-dark-200 dark:bg-dark-50"
     >
       <div className="absolute left-8 top-8 h-2 w-2 rounded-full bg-light-200 dark:bg-dark-200" />
       <div className="absolute right-8 top-8 h-2 w-2 rounded-full bg-light-200 dark:bg-dark-200" />
@@ -55,7 +55,7 @@ const FeatureItem = ({
         <p className="text-sm font-bold text-light-1000 dark:text-dark-1000 sm:transition-opacity sm:duration-200 sm:group-hover:opacity-0">
           {feature.title}
         </p>
-        <p className="mt-2 text-sm text-light-950 dark:text-dark-900 sm:absolute sm:inset-0 sm:mt-0 sm:opacity-0 sm:transition-opacity sm:duration-200 sm:group-hover:opacity-100">
+        <p className="max mt-2 text-sm text-light-950 dark:text-dark-900 sm:absolute sm:inset-0 sm:mt-0 sm:opacity-0 sm:transition-opacity sm:duration-200 sm:group-hover:opacity-100">
           {feature.description}
         </p>
       </div>
@@ -125,20 +125,18 @@ const Features = ({ theme }: { theme: "light" | "dark" }) => {
         </div>
 
         <p className="mt-2 text-center text-3xl font-bold text-light-1000 dark:text-dark-1000 lg:text-4xl">
-          Kanban simplified
+          Kanban reimagined
         </p>
         <p className="text-md mt-3 max-w-[600px] text-center text-dark-900 lg:text-lg">
           Simple, visual task management that just works. Drag and drop cards,
           collaborate with your team, and get more done.
         </p>
-        <div className="mt-16 grid w-full grid-cols-1 gap-6 [mask-image:linear-gradient(to_bottom,black_92%,transparent_100%)] sm:grid-cols-2 md:grid-cols-3 md:[mask-image:linear-gradient(to_bottom,black_85%,transparent_100%)] lg:grid-cols-4 lg:[mask-image:linear-gradient(to_bottom,black_85%,transparent_100%)]">
-          {features.map((feature, index) => {
-            return (
-              <div className="aspect-square w-full" key={`feature-${index}`}>
-                <FeatureItem feature={feature} />
-              </div>
-            );
-          })}
+        <div className="mx-auto mt-16 w-full max-w-7xl">
+          <div className="grid w-full grid-cols-1 gap-4 [mask-image:linear-gradient(to_bottom,black_92%,transparent_100%)] sm:grid-cols-2 md:grid-cols-3 md:[mask-image:linear-gradient(to_bottom,black_85%,transparent_100%)] lg:grid-cols-4 lg:[mask-image:linear-gradient(to_bottom,black_85%,transparent_100%)]">
+            {features.map((feature, index) => (
+              <FeatureItem key={`feature-${index}`} feature={feature} />
+            ))}
+          </div>
         </div>
 
         <div>

apps/web/src/views/home/index.tsx

@@ -8,6 +8,7 @@ import PatternedBackground from "~/components/PatternedBackground";
 import { env } from "~/env";
 import { useTheme } from "~/providers/theme";
 import { api } from "~/utils/api";
+import FAQs from "./components/Faqs";
 import Features from "./components/Features";
 import Footer from "./components/Footer";
 import Header from "./components/Header";
@@ -104,6 +105,10 @@ export default function HomeView() {
               <div id="pricing" className="absolute -top-20" />
               <Pricing />
             </div>
+            <div className="relative pt-10">
+              <div id="faq" className="absolute -top-20" />
+              <FAQs />
+            </div>
           </div>
         </div>
         <Footer />