ui: add faq page

frontend/nextjs/package.json

@@ -13,6 +13,7 @@
     "@auth/firebase-adapter": "^1.0.6",
     "@hookform/resolvers": "^3.3.2",
     "@mantine/hooks": "^7.2.2",
+    "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-icons": "^1.3.0",

frontend/nextjs/src/app/(with wallet)/_components/page-links.ts

@@ -10,10 +10,10 @@ export const PROFILE_PAGE = (uid:string) => `/dapp/profile/${uid}`
 export const NOTIFICATIONS_PAGE = "/dapp/notifications"
 export const CREATE_A_POST_PAGE = "/dapp/p/create"
 
-export const WELCOME_PAGE = "/welcome"
-export const FAQ_PAGE = "/faq"
-export const HELP_PAGE = "/help"
-export const PRIVACY_POLICY_PAGE = "/privacy-policy"
+export const WELCOME_PAGE = "/"
+export const FAQ_PAGE = "/dapp/faq"
+export const HELP_PAGE = "/dapp/help"
+export const PRIVACY_POLICY_PAGE = "/dapp/privacy-policy"
 export const ONBOARDING_PAGE = (stage?: | 2 | 3 | 4) =>  "/onboarding" + (stage ? `/${stage}` : "")
 
 export const primaryNavigationLinks = [

frontend/nextjs/src/app/(with wallet)/_components/sidebar.tsx

@@ -72,8 +72,8 @@ export function Sidebar({ className }: SidebarProps) {
                         </h2>
                         <div className="space-y-0">
                             {resourcesLinks.map((link, key) => (
-                                <Button variant="link" key={`primary-nav-${key}`} className="w-full text-sm font-normal py-0 h-9 text-muted justify-start" asChild>
-                                    <Link href={link.href} className={`${ isPageActive(pathname, link.href, user?.uid, link.title) ? "text-accent-3 font-semibold": "text-muted"}`}>
+                                <Button variant="link" key={`primary-nav-${key}`} className="w-full text-sm font-normal py-0 h-9 justify-start" asChild>
+                                    <Link href={link.href} className={`${ isPageActive(pathname, link.href, user?.uid, link.title) ? "!text-accent-3 font-semibold" : "text-muted"}`}>
                                         {link.title}
                                     </Link>
                                 </Button>

frontend/nextjs/src/app/(with wallet)/dapp/(resources)/faq/layout.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { ScrollArea } from '@/components/ui/scroll-area'
+
+type Props = {
+    children: React.ReactNode
+}
+
+const Layout = ({children}: Props) => {
+    return (
+        <div className="grid grid-cols-1 md:grid-cols-6 col-span-4">
+            <div className="h-full px-4 py-6 lg:px-6 col-span-1 md:col-span-6 md:border-x">
+                <ScrollArea className="h-[90vh] w-full">
+                    {children}
+                </ScrollArea>
+            </div>
+        </div>
+    )
+}
+
+export default Layout

frontend/nextjs/src/app/(with wallet)/dapp/(resources)/faq/page.tsx

@@ -0,0 +1,60 @@
+"use client";
+import { Button } from "@/components/ui/button";
+import { Search } from "@/components/ui/forms/search";
+import React from "react";
+import { HiMiniAdjustmentsVertical } from "react-icons/hi2";
+import { ExpertTicket, ExptListing, UserProfile } from "@/lib/types";
+import ExpertHubCard from "@/components/ui/expert-hub-card";
+import useBackend from "@/lib/hooks/useBackend";
+import InfiniteScroll from "@/components/ui/infinite-scroller";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion"
+
+const FaqPage = () => {
+  const { fetchExptListings } = useBackend();
+  const [filters, setFilters] = React.useState<Record<string, any>>({});
+
+  const dummyFaqs = [
+    {
+      question: 'What is MEMM?',
+      answer: 'MEMM! is a blockchain-powered mentorship platform designed to connect mentors and learners across various industries. It leverages decentralized technology to foster a secure, transparent, and rewarding mentorship experience.'
+    },
+    {
+      question: 'How does the reputation system work?',
+      answer: 'MEMM! is a blockchain-powered mentorship platform designed to connect mentors and learners across various industries. It leverages decentralized technology to foster a secure, transparent, and rewarding mentorship experience.'
+    },
+    {
+      question: 'What are EXPT Tokens?',
+      answer: 'MEMM! is a blockchain-powered mentorship platform designed to connect mentors and learners across various industries. It leverages decentralized technology to foster a secure, transparent, and rewarding mentorship experience.'
+    },
+    {
+      question: 'How can I earn EXPT Tokens?',
+      answer: 'MEMM! is a blockchain-powered mentorship platform designed to connect mentors and learners across various industries. It leverages decentralized technology to foster a secure, transparent, and rewarding mentorship experience.'
+    },
+    {
+      question: 'How do I become a expert on MEMM?',
+      answer: 'MEMM! is a blockchain-powered mentorship platform designed to connect mentors and learners across various industries. It leverages decentralized technology to foster a secure, transparent, and rewarding mentorship experience.'
+    },
+  ]
+
+  return (
+    <div className="col-span-4">
+      <h4 className='text-xl md:text-xl font-semibold tracking-wider mb-8'>Frequently Asked Questions  </h4>
+      <Accordion type="single" collapsible className="flex flex-col gap-2">
+      {
+        dummyFaqs.map((faq, key) => <AccordionItem value={`faq-key-${key}`} key={`faq-yey-${key}`}>
+        <AccordionTrigger>{faq.question}</AccordionTrigger>
+        <AccordionContent>{faq.answer}</AccordionContent>
+      </AccordionItem>)
+      }
+
+      </Accordion>
+    </div>
+  );
+};
+
+export default FaqPage;

frontend/nextjs/src/app/(with wallet)/dapp/(resources)/help/layout.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { ScrollArea } from '@/components/ui/scroll-area'
+
+type Props = {
+    children: React.ReactNode
+}
+
+const Layout = ({children}: Props) => {
+    return (
+        <div className="grid grid-cols-1 md:grid-cols-6 col-span-4">
+            <div className="h-full px-4 py-6 lg:px-6 col-span-1 md:col-span-6 md:border-x">
+                <ScrollArea className="h-[90vh] w-full">
+                    {children}
+                </ScrollArea>
+            </div>
+        </div>
+    )
+}
+
+export default Layout

frontend/nextjs/src/app/(with wallet)/dapp/(resources)/help/page.tsx

@@ -0,0 +1,22 @@
+"use client";
+import { Button } from "@/components/ui/button";
+import { Search } from "@/components/ui/forms/search";
+import React from "react";
+import { HiMiniAdjustmentsVertical } from "react-icons/hi2";
+import { ExpertTicket, ExptListing, UserProfile } from "@/lib/types";
+import ExpertHubCard from "@/components/ui/expert-hub-card";
+import useBackend from "@/lib/hooks/useBackend";
+import InfiniteScroll from "@/components/ui/infinite-scroller";
+
+const HelpPage = () => {
+  const { fetchExptListings } = useBackend();
+  const [filters, setFilters] = React.useState<Record<string, any>>({});
+
+  return (
+    <div className="col-span-4">
+      faqs...
+    </div>
+  );
+};
+
+export default HelpPage;

frontend/nextjs/src/app/(with wallet)/dapp/(resources)/privacy-policy/layout.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { ScrollArea } from '@/components/ui/scroll-area'
+
+type Props = {
+    children: React.ReactNode
+}
+
+const Layout = ({children}: Props) => {
+    return (
+        <div className="grid grid-cols-1 md:grid-cols-6 col-span-4">
+            <div className="h-full px-4 py-6 lg:px-6 col-span-1 md:col-span-6 md:border-x">
+                <ScrollArea className="h-[90vh] w-full">
+                    {children}
+                </ScrollArea>
+            </div>
+        </div>
+    )
+}
+
+export default Layout

frontend/nextjs/src/app/(with wallet)/dapp/(resources)/privacy-policy/page.tsx

@@ -0,0 +1,22 @@
+"use client";
+import { Button } from "@/components/ui/button";
+import { Search } from "@/components/ui/forms/search";
+import React from "react";
+import { HiMiniAdjustmentsVertical } from "react-icons/hi2";
+import { ExpertTicket, ExptListing, UserProfile } from "@/lib/types";
+import ExpertHubCard from "@/components/ui/expert-hub-card";
+import useBackend from "@/lib/hooks/useBackend";
+import InfiniteScroll from "@/components/ui/infinite-scroller";
+
+const PrivacyPolicyPage = () => {
+  const { fetchExptListings } = useBackend();
+  const [filters, setFilters] = React.useState<Record<string, any>>({});
+
+  return (
+    <div className="col-span-4">
+      faqs...
+    </div>
+  );
+};
+
+export default PrivacyPolicyPage;

frontend/nextjs/src/components/ui/accordion.tsx

@@ -0,0 +1,58 @@
+"use client"
+
+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 bg-accent-shade border-none rounded-md px-8", 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 border-12 border-red-200 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 }