fix #259 partially converting some of the components from headlessui to shadcn

app/(static)/alternatives/[slug]/page.tsx

@@ -12,6 +12,43 @@ import Testimonials from "@/components/web/testimonials/testimonials";
 import { getAlternative, getAlternatives } from "@/lib/content/alternative";
 import { constructMetadata } from "@/lib/utils";
 
+const faqs = [
+  {
+    question: "What is Papermark?",
+    answer:
+      "Papermark is a dynamic, open-source alternative to DocSend. It enables secure document sharing, tracking, and storage, providing users with real-time analytics. Like your Pitchdeck.",
+  },
+  {
+    question: "How can I use Papermark?",
+    answer:
+      "You can subscribe to one of our plans or use it for free and host it yourself. Simply visit our GitHub page, clone the repository, follow the setup instructions and start using Papermark. You can customize it according to your specific needs as it is open-source. https://github.com/mfts/papermark",
+  },
+  {
+    question: "Is Papermark free?",
+    answer:
+      "Yes, Papermark is completely open-source. This means you are free to use, modify, and distribute it as you see fit according to the terms of our license.",
+  },
+  {
+    question: "Can I add my custom domain to look professional?",
+    answer:
+      "Yes, with Papermark you can connect your custom domain and send your Pitchdeck or document via it. While continue tracking the analytics",
+  },
+  {
+    question: "How I can reach more investors with Papermark?",
+    answer:
+      "Papermark has recommendations for more similar investors for your specific startup build in.",
+  },
+  {
+    question: "How I can use Papermark as a VC?",
+    answer:
+      "You can use it to summarise and analyse data for different Pitchdecks",
+  },
+  {
+    question: "Can I contribute to the Papermark project?",
+    answer:
+      "Yes, contributions are welcome! Please visit our GitHub repository to learn about how you can contribute. Whether it's by improving the code, adding new features, or even reporting bugs, all contributions are appreciated. https://github.com/mfts/papermark",
+  },
+];
 export async function generateStaticParams() {
   const alternatives = await getAlternatives();
   return alternatives.map((alternative) => ({ slug: alternative.slug }));
@@ -290,7 +327,7 @@ export default async function AlternativePage({
           FAQ{" "}
           <span className="text-gray-500">{alternative.descriptionfaq}</span>
         </h2>
-        <FAQ />
+        <FAQ faqs={faqs}/>
       </div>
 
       {/* CTA */}

app/(static)/deck/components/DropdownProto.tsx

@@ -1,10 +1,16 @@
-import { Menu, Transition } from "@headlessui/react";
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
-import { Fragment, Dispatch, SetStateAction } from "react";
+import { Dispatch, SetStateAction, useState } from "react";
+import * as React from "react";
 
-function classNames(...classes: string[]) {
-  return classes.filter(Boolean).join(" ");
-}
+import { CheckIcon } from "lucide-react";
+
+import {
+  Select,
+  SelectContent,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+import { cn } from "@/lib/utils";
 
 interface DropDownProps {
   options: string[];
@@ -18,57 +24,29 @@ export default function DropDown({
   setOption,
 }: DropDownProps) {
   return (
-    <Menu as="div" className="relative block text-left w-full">
-      <div>
-        <Menu.Button className="inline-flex w-full justify-between items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-gray-400 font-light shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue">
-          {option}
-          <ChevronDownIcon
-            className="-mr-1 ml-2 h-5 w-5 ui-open:hidden"
-            aria-hidden="true"
-          />
-          <ChevronUpIcon
-            className="-mr-1 ml-2 h-5 w-5 hidden ui-open:block"
-            aria-hidden="true"
-          />
-        </Menu.Button>
-      </div>
-
-      <Transition
-        as={Fragment}
-        enter="transition ease-out duration-100"
-        enterFrom="transform opacity-0 scale-95"
-        enterTo="transform opacity-100 scale-100"
-        leave="transition ease-in duration-75"
-        leaveFrom="transform opacity-100 scale-100"
-        leaveTo="transform opacity-0 scale-95"
-      >
-        <Menu.Items
-          className="absolute left-0 z-10 mt-2 w-full origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
-          key={option}
-        >
-          <div className="">
-            {options.map((optionItem) => (
-              <Menu.Item key={optionItem}>
-                {({ active }) => (
-                  <button
-                    onClick={() => setOption(optionItem)}
-                    className={classNames(
-                      active ? "bg-gray-100 text-gray-900" : "text-gray-700",
-                      option === optionItem ? "bg-gray-200" : "",
-                      "px-4 py-2 text-sm w-full text-left flex items-center space-x-2 justify-between",
-                    )}
-                  >
-                    <span>{optionItem}</span>
-                    {option === optionItem ? (
-                      <CheckIcon className="w-4 h-4 text-bold" />
-                    ) : null}
-                  </button>
-                )}
-              </Menu.Item>
-            ))}
-          </div>
-        </Menu.Items>
-      </Transition>
-    </Menu>
+    <Select>
+      <SelectTrigger className="focus:ring-blue inline-flex w-full items-center justify-between rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-light text-gray-400 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2">
+        <SelectValue placeholder={option} />
+      </SelectTrigger>
+      <SelectContent>
+        {options.map((optionItem, index) => (
+          <button
+            onClick={() => {
+              setOption(optionItem);
+            }}
+            className={cn(
+              option === optionItem ? "bg-gray-200" : "hover:bg-gray-100",
+              "flex w-full items-center justify-between space-x-2 px-4 py-2 text-left text-sm",
+            )}
+            key={index}
+          >
+            <span>{optionItem}</span>
+            {option === optionItem ? (
+              <CheckIcon className="text-bold h-4 w-4" />
+            ) : null}
+          </button>
+        ))}
+      </SelectContent>
+    </Select>
   );
 }

app/(static)/investors/[slug]/page.tsx

@@ -1,29 +1,9 @@
 import Head from "next/head";
 import Link from "next/link";
 import { notFound } from "next/navigation";
-
-import { Disclosure } from "@headlessui/react";
-import { CheckIcon } from "lucide-react";
-import { XIcon } from "lucide-react";
-import {
-  RefreshCw as ArrowPathIcon,
-  GitPullRequestArrow as CloudArrowUpIcon,
-  Settings as Cog6ToothIcon,
-  Fingerprint as FingerPrintIcon,
-  Lock as LockClosedIcon,
-  Minus as MinusSmallIcon,
-  Plus as PlusSmallIcon,
-  HardDrive as ServerIcon,
-} from "lucide-react";
-
 import { Button } from "@/components/ui/button";
-import Footer from "@/components/web/footer";
-import { LogoCloud } from "@/components/web/landing-page/logo-cloud";
-import Navbar from "@/components/web/navbar";
 
 import { getInvestor } from "@/lib/content/investor";
-import { cn } from "@/lib/utils";
-import { classNames } from "@/lib/utils";
 
 export default async function InvestorPage({
   params,
@@ -274,7 +254,7 @@ export default async function InvestorPage({
                         x={86}
                       />
                     </svg>
-                    <blockquote className="text-balance text-xl font-medium leading-8 text-black text-gray-800 sm:text-2xl sm:leading-9">
+                    <blockquote className="text-balance text-xl font-medium leading-8 text-gray-800 sm:text-2xl sm:leading-9">
                       <p>
                         Papermark solved a big pain point for me. DocSend
                         monopoly will end soon!

components/ui/accordion.tsx

@@ -54,4 +54,4 @@ const AccordionContent = React.forwardRef<
 
 AccordionContent.displayName = AccordionPrimitive.Content.displayName;
 
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

components/web/alternatives/dropdownproto.tsx

@@ -1,11 +1,16 @@
-import { Dispatch, Fragment, SetStateAction } from "react";
+import { Dispatch, SetStateAction, useState } from "react";
+import * as React from "react";
 
-import { Menu, Transition } from "@headlessui/react";
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import { CheckIcon } from "lucide-react";
 
-function classNames(...classes: string[]) {
-  return classes.filter(Boolean).join(" ");
-}
+import {
+  Select,
+  SelectContent,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+import { cn } from "@/lib/utils";
 
 interface DropDownProps {
   options: string[];
@@ -19,57 +24,29 @@ export default function DropDown({
   setOption,
 }: DropDownProps) {
   return (
-    <Menu as="div" className="relative block w-full text-left">
-      <div>
-        <Menu.Button className="inline-flex w-full items-center justify-between rounded-md border border-black bg-white px-4 py-2 text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none">
-          {option}
-          <ChevronDownIcon
-            className="-mr-1 ml-2 h-5 w-5 ui-open:hidden"
-            aria-hidden="true"
-          />
-          <ChevronUpIcon
-            className="-mr-1 ml-2 hidden h-5 w-5 ui-open:block"
-            aria-hidden="true"
-          />
-        </Menu.Button>
-      </div>
-
-      <Transition
-        as={Fragment}
-        enter="transition ease-out duration-100"
-        enterFrom="transform opacity-0 scale-95"
-        enterTo="transform opacity-100 scale-100"
-        leave="transition ease-in duration-75"
-        leaveFrom="transform opacity-100 scale-100"
-        leaveTo="transform opacity-0 scale-95"
-      >
-        <Menu.Items
-          className="absolute left-0 z-10 mt-2 w-full origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
-          key={option}
-        >
-          <div className="">
-            {options.map((optionItem) => (
-              <Menu.Item key={optionItem}>
-                {({ active }) => (
-                  <button
-                    onClick={() => setOption(optionItem)}
-                    className={classNames(
-                      active ? "bg-gray-100 text-gray-900" : "text-gray-700",
-                      option === optionItem ? "bg-gray-200" : "",
-                      "flex w-full items-center justify-between space-x-2 px-4 py-2 text-left text-sm",
-                    )}
-                  >
-                    <span>{optionItem}</span>
-                    {option === optionItem ? (
-                      <CheckIcon className="text-bold h-4 w-4" />
-                    ) : null}
-                  </button>
-                )}
-              </Menu.Item>
-            ))}
-          </div>
-        </Menu.Items>
-      </Transition>
-    </Menu>
+    <Select>
+      <SelectTrigger className="focus:ring-blue inline-flex w-full items-center justify-between rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-light text-gray-400 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2">
+        <SelectValue placeholder={option} />
+      </SelectTrigger>
+      <SelectContent>
+        {options.map((optionItem, index) => (
+          <button
+            onClick={() => {
+              setOption(optionItem);
+            }}
+            className={cn(
+              option === optionItem ? "bg-gray-200" : "hover:bg-gray-100",
+              "flex w-full items-center justify-between space-x-2 px-4 py-2 text-left text-sm",
+            )}
+            key={index}
+          >
+            <span>{optionItem}</span>
+            {option === optionItem ? (
+              <CheckIcon className="text-bold h-4 w-4" />
+            ) : null}
+          </button>
+        ))}
+      </SelectContent>
+    </Select>
   );
 }