Sticky Header Dialog

1import { Button } from "@/components/ui/button";
2import {
3  ResponsiveDialog,
4  ResponsiveDialogClose,
5  ResponsiveDialogContent,
6  ResponsiveDialogDescription,
7  ResponsiveDialogFooter,
8  ResponsiveDialogHeader,
9  ResponsiveDialogTitle,
10  ResponsiveDialogTrigger,
11} from "@/components/ui/revola";
12 
13export default function StickyHeaderDialog() {
14  return (
15    <ResponsiveDialog>
16      <ResponsiveDialogTrigger asChild>
17        <Button variant="outline" className="h-12 rounded-full px-6 capitalize">
18          Sticky Header
19        </Button>
20      </ResponsiveDialogTrigger>
21      <ResponsiveDialogContent className="flex max-h-[min(640px,80dvh)] flex-col gap-0 overflow-hidden">
22        <ResponsiveDialogHeader className="contents space-y-0 text-left">
23          <ResponsiveDialogTitle className="border-b px-6 pb-4 text-base md:py-4">
24            Frequently Asked Questions (FAQ)
25          </ResponsiveDialogTitle>
26          <div className="overflow-y-auto">
27            <ResponsiveDialogDescription asChild>
28              <div className="px-6 py-4">
29                <div className="space-y-4 [&_strong]:font-semibold [&_strong]:text-foreground">
30                  <div className="space-y-1">
31                    <p>
32                      <strong>Account Management</strong>
33                    </p>
34                    <p>
35                      Navigate to the registration page, provide required information, and verify your email address.
36                      You can sign up using your email or through social media platforms.
37                    </p>
38                  </div>
39                  <div className="space-y-1">
40                    <p>
41                      <strong>Password Reset Process</strong>
42                    </p>
43                    <p>
44                      Users can reset their password through the account settings page. Click &quot;Forgot
45                      Password&quot; and follow the email verification steps to regain account access quickly and
46                      securely.
47                    </p>
48                  </div>
49                  <div className="space-y-1">
50                    <p>
51                      <strong>Service Pricing Tiers</strong>
52                    </p>
53                    <p>
54                      We offer three primary subscription levels designed to meet diverse user needs: Basic (free with
55                      limited features), Professional (monthly fee with comprehensive access), and Enterprise (custom
56// … truncated