Faq Components in Shadcn-Ui library

import { WalletCards, ChevronDown, Wallet, File, LayoutGrid, Link2, Monitor } from "lucide-react"
import { Button } from "@/components/ui/button"
import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from "@/components/ui/card"

export function Faq1() {
  return (
    <div className="py-4 px-4">
        <Card className="mb-8 px-5 md:px-10">
            <CardHeader className="h-[280px] justify-center">
                <CardTitle className="text-3xl">Lets answer some questions</CardTitle>
                <CardDescription>Choose a category to quickly find the help you need</CardDescription>
            </CardHeader>
        </Card>
        <div className="flex flex-wrap -m-4">
            <div className="p-4 w-full md:w-1/4">
                <Card>
                    <CardHeader className="w-full p-2">
                        <Button variant="secondary" className="justify-start">
                            <WalletCards className="w-5 h-5 mr-2" /> Payment
                        </Button>
                        <Button variant="ghost" className="justify-start text-muted-foreground">
                            <Wallet className="w-5 h-5 mr-2" /> Subscriptions
                        </Button>
                        <Button variant="ghost" className="justify-start text-muted-foreground">
                            <File className="w-5 h-5 mr-2" /> Documentation
                        </Button>
                        <Button variant="ghost" className="justify-start text-muted-foreground">
                            <LayoutGrid className="w-5 h-5 mr-2" /> Tutorials
                        </Button>
                        <Button variant="ghost" className="justify-start text-muted-foreground">
                            <Link2  className="w-5 h-5 mr-2" /> APIs
                        </Button>
                        <Button variant="ghost" className="justify-start text-muted-foreground">
                            <Monitor className="w-5 h-5 mr-2" /> Product & Services
                        </Button>
                    </CardHeader>
                </Card>
            </div>
            <div className="p-4 w-full md:w-3/4">
                <div className="flex flex-wrap items-center">
                    <Button variant="secondary" size="lg" className="w-16 h-16">
                        <WalletCards className="w-8 h-8" />
                    </Button>
                    <Card className="border-none">
                        <CardHeader className="justify-center">
                            <CardTitle className="text-2xl">Payment</CardTitle>
                            <CardDescription>Monitor key metrics, check reporting and review insights</CardDescription>
                        </CardHeader>
                    </Card>
                </div>
                <Card className="mb-3">
                    <CardHeader className="flex-row items-center justify-between space-y-0 py-3 pl-6 pr-3 gap-2">
                        <CardTitle className="text-sm font-medium">Lorem ipsum dolor sit amet</CardTitle>
                        <Button variant="ghost" size="icon">
                            <ChevronDown />
                        </Button>
                    </CardHeader>
                </Card>
                <Card className="mb-3">
                    <CardHeader className="flex-row items-center justify-between space-y-0 py-3 pl-6 pr-3 gap-2">
                        <CardTitle className="text-sm font-medium">Lorem ipsum dolor sit amet</CardTitle>
                        <Button variant="ghost" size="icon">
                            <ChevronDown />
                        </Button>
                    </CardHeader>
                </Card>
                <Card className="mb-3">
                    <CardHeader className="flex-row items-center justify-between space-y-0 py-3 pl-6 pr-3 gap-2">
                        <CardTitle className="text-sm font-medium">Lorem ipsum dolor sit amet</CardTitle>
                        <Button variant="ghost" size="icon">
                            <ChevronDown />
                        </Button>
                    </CardHeader>
                </Card>
                <Card className="mb-3">
                    <CardHeader className="flex-row items-center justify-between space-y-0 py-3 pl-6 pr-3 gap-2">
                        <CardTitle className="text-sm font-medium">Lorem ipsum dolor sit amet</CardTitle>
                        <Button variant="ghost" size="icon">
                            <ChevronDown />
                        </Button>
                    </CardHeader>
                    <CardContent>
                        <CardDescription>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec urna lacus. Pellentesque in lacus eu est suscipit volutpat eu eget diam. Donec eget justo et diam condimentum bibendum. Donec convallis tellus sem, at lobortis nulla sagittis in. Proin facilisis a enim eget luctus. Sed et maximus libero. Nulla pellentesque imperdiet neque vitae fringilla.
                        </CardDescription>
                    </CardContent>
                </Card>
                <Card className="mb-3">
                    <CardHeader className="flex-row items-center justify-between space-y-0 py-3 pl-6 pr-3 gap-2">
                        <CardTitle className="text-sm font-medium">Lorem ipsum dolor sit amet</CardTitle>
                        <Button variant="ghost" size="icon">
                            <ChevronDown />
                        </Button>
                    </CardHeader>
                </Card>
                <Card>
                    <CardHeader className="flex-row items-center justify-between space-y-0 py-3 pl-6 pr-3 gap-2">
                        <CardTitle className="text-sm font-medium">Lorem ipsum dolor sit amet</CardTitle>
                        <Button variant="ghost" size="icon">
                            <ChevronDown />
                        </Button>
                    </CardHeader>
                </Card>
            </div>
        </div>
    </div>
  )
}