FAQ

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { Badge } from "@/components/ui/badge";
import { buttonVariants } from "@/components/ui/button";

export default function Basic() {
  return (
    <section className="mx-auto max-w-7xl space-y-10 px-4 py-16">
      <div className="mx-auto max-w-xl text-center">
        <Badge variant="outline">Frequently Asked Questions</Badge>
        <h1 className="mt-4 text-balance text-3xl font-bold tracking-tighter md:text-4xl">
          Subscription & Billing FAQs
        </h1>
        <p className="mt-2 text-balance text-base text-muted-foreground">
          All your questions about subscriptions, payments, and billing cycles
          answered here.
        </p>
      </div>

      <Accordion
        type="single"
        collapsible
        className="mx-auto w-full max-w-md text-sm"
      >
        <AccordionItem value="item-1">
          <AccordionTrigger>
            How do I update my billing information?
          </AccordionTrigger>
          <AccordionContent className="text-muted-foreground">
            You can update your billing information through your account
            settings. Click on Billing and then Edit to enter your new billing
            details.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-2">
          <AccordionTrigger>
            What payment methods do you accept?
          </AccordionTrigger>
          <AccordionContent className="text-muted-foreground">
            We accept all major credit cards, PayPal, and various other payment
            methods depending on your location.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-3">
          <AccordionTrigger>
            Can I share projects with non-users?
          </AccordionTrigger>
          <AccordionContent className="text-muted-foreground">
            Yes, you can share projects with non-users in view-only mode via a
            shared link.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-4">
          <AccordionTrigger>
            How can I work on a project with my team?
          </AccordionTrigger>
          <AccordionContent className="text-muted-foreground">
            Our platform supports team collaboration. You can add team members
            to your projects from the dashboard.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-5">
          <AccordionTrigger>How often do you release updates?</AccordionTrigger>
          <AccordionContent className="text-muted-foreground">
            We release updates quarterly, with occasional minor updates for bug
            fixes and improvements.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-6">
          <AccordionTrigger>
            How can I learn about new features?
          </AccordionTrigger>
          <AccordionContent className="text-muted-foreground">
            Subscribe to our newsletter and check our blog for announcements on
            new features.
          </AccordionContent>
        </AccordionItem>
      </Accordion>

      <div className="text-center">
        <a href="#" className={buttonVariants()}>
          View all FAQs →
        </a>
      </div>
    </section>
  );
}

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { Badge } from "@/components/ui/badge";
import { buttonVariants } from "@/components/ui/button";

export default function Split() {
  return (
    <section className="mx-auto grid max-w-7xl grid-cols-1 gap-10 px-4 py-16 md:grid-cols-5">
      <div className="mx-auto max-w-xl md:col-span-2">
        <Badge variant="outline">Frequently Asked Questions</Badge>
        <h1 className="mt-4 text-balance text-3xl font-bold tracking-tighter md:text-4xl">
          Managing Your Account FAQs
        </h1>
        <p className="mb-4 mt-2 text-balance text-base text-muted-foreground">
          All your questions about subscriptions, payments, and billing cycles
          answered here.
        </p>
        <a href="#" className={buttonVariants({ size: "sm" })}>
          View all FAQs →
        </a>
      </div>

      <Accordion
        type="single"
        collapsible
        className="w-full text-base md:col-span-3"
      >
        <AccordionItem value="item-1">
          <AccordionTrigger>How do I reset my password?</AccordionTrigger>
          <AccordionContent className="text-muted-foreground">
            Click Forgot password on the login page and follow the instructions
            to reset your password via email.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-2">
          <AccordionTrigger>
            What payment methods do you accept?
          </AccordionTrigger>
          <AccordionContent className="text-muted-foreground">
            We accept all major credit cards, PayPal, and various other payment
            methods depending on your location.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-3">
          <AccordionTrigger>
            Can I share projects with non-users?
          </AccordionTrigger>
          <AccordionContent className="text-muted-foreground">
            Yes, you can share projects with non-users in view-only mode via a
            shared link.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-4">
          <AccordionTrigger>
            How can I work on a project with my team?
          </AccordionTrigger>
          <AccordionContent className="text-muted-foreground">
            Our platform supports team collaboration. You can add team members
            to your projects from the dashboard.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-5">
          <AccordionTrigger>How often do you release updates?</AccordionTrigger>
          <AccordionContent className="text-muted-foreground">
            We release updates quarterly, with occasional minor updates for bug
            fixes and improvements.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-6">
          <AccordionTrigger>
            How can I learn about new features?
          </AccordionTrigger>
          <AccordionContent className="text-muted-foreground">
            Subscribe to our newsletter and check our blog for announcements on
            new features.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-7">
          <AccordionTrigger>
            How can I work on a project with my team?
          </AccordionTrigger>
          <AccordionContent className="text-muted-foreground">
            Our platform supports team collaboration. You can add team members
            to your projects from the dashboard.
          </AccordionContent>
        </AccordionItem>
      </Accordion>
    </section>
  );
}

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { Badge } from "@/components/ui/badge";
import { buttonVariants } from "@/components/ui/button";

export default function TwoColumns() {
  return (
    <section className="mx-auto max-w-5xl space-y-10 px-4 py-16">
      <div className="mx-auto max-w-xl text-center">
        <Badge variant="outline">Frequently Asked Questions</Badge>
        <h1 className="mt-4 text-balance text-3xl font-bold tracking-tighter md:text-4xl">
          Subscription & Billing FAQs
        </h1>
        <p className="mt-2 text-balance text-base text-muted-foreground">
          All your questions about subscriptions, payments, and billing cycles
          answered here.
        </p>
      </div>

      <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
        <Accordion
          type="single"
          collapsible
          className="w-full rounded border text-sm"
        >
          <AccordionItem className="px-4 last:border-b-0" value="item-1">
            <AccordionTrigger>
              How do I update my billing information?
            </AccordionTrigger>
            <AccordionContent className="text-muted-foreground">
              You can update your billing information through your account
              settings. Click on Billing and then Edit to enter your new billing
              details.
            </AccordionContent>
          </AccordionItem>
          <AccordionItem className="px-4 last:border-b-0" value="item-2">
            <AccordionTrigger>
              What payment methods do you accept?
            </AccordionTrigger>
            <AccordionContent className="text-muted-foreground">
              We accept all major credit cards, PayPal, and various other
              payment methods depending on your location.
            </AccordionContent>
          </AccordionItem>
          <AccordionItem className="px-4 last:border-b-0" value="item-3">
            <AccordionTrigger>
              Can I share projects with non-users?
            </AccordionTrigger>
            <AccordionContent className="text-muted-foreground">
              Yes, you can share projects with non-users in view-only mode via a
              shared link.
            </AccordionContent>
          </AccordionItem>
          <AccordionItem className="px-4 last:border-b-0" value="item-4">
            <AccordionTrigger>
              How can I work on a project with my team?
            </AccordionTrigger>
            <AccordionContent className="text-muted-foreground">
              Our platform supports team collaboration. You can add team members
              to your projects from the dashboard.
            </AccordionContent>
          </AccordionItem>
          <AccordionItem className="px-4 last:border-b-0" value="item-5">
            <AccordionTrigger>
              How often do you release updates?
            </AccordionTrigger>
            <AccordionContent className="text-muted-foreground">
              We release updates quarterly, with occasional minor updates for
              bug fixes and improvements.
            </AccordionContent>
          </AccordionItem>
          <AccordionItem className="px-4 last:border-b-0" value="item-6">
            <AccordionTrigger>
              How can I learn about new features?
            </AccordionTrigger>
            <AccordionContent className="text-muted-foreground">
              Subscribe to our newsletter and check our blog for announcements
              on new features.
            </AccordionContent>
          </AccordionItem>
        </Accordion>
        <Accordion
          type="single"
          collapsible
          className="w-full rounded border text-sm"
        >
          <AccordionItem className="px-4 last:border-b-0" value="item-1">
            <AccordionTrigger>
              How do I update my billing information?
            </AccordionTrigger>
            <AccordionContent className="text-muted-foreground">
              You can update your billing information through your account
              settings. Click on Billing and then Edit to enter your new billing
              details.
            </AccordionContent>
          </AccordionItem>
          <AccordionItem className="px-4 last:border-b-0" value="item-2">
            <AccordionTrigger>
              What payment methods do you accept?
            </AccordionTrigger>
            <AccordionContent className="text-muted-foreground">
              We accept all major credit cards, PayPal, and various other
              payment methods depending on your location.
            </AccordionContent>
          </AccordionItem>
          <AccordionItem className="px-4 last:border-b-0" value="item-3">
            <AccordionTrigger>
              Can I share projects with non-users?
            </AccordionTrigger>
            <AccordionContent className="text-muted-foreground">
              Yes, you can share projects with non-users in view-only mode via a
              shared link.
            </AccordionContent>
          </AccordionItem>
          <AccordionItem className="px-4 last:border-b-0" value="item-4">
            <AccordionTrigger>
              How can I work on a project with my team?
            </AccordionTrigger>
            <AccordionContent className="text-muted-foreground">
              Our platform supports team collaboration. You can add team members
              to your projects from the dashboard.
            </AccordionContent>
          </AccordionItem>
          <AccordionItem className="px-4 last:border-b-0" value="item-5">
            <AccordionTrigger>
              How often do you release updates?
            </AccordionTrigger>
            <AccordionContent className="text-muted-foreground">
              We release updates quarterly, with occasional minor updates for
              bug fixes and improvements.
            </AccordionContent>
          </AccordionItem>
          <AccordionItem className="px-4 last:border-b-0" value="item-6">
            <AccordionTrigger>
              How can I learn about new features?
            </AccordionTrigger>
            <AccordionContent className="text-muted-foreground">
              Subscribe to our newsletter and check our blog for announcements
              on new features.
            </AccordionContent>
          </AccordionItem>
        </Accordion>
      </div>

      <div className="text-center">
        <a href="#" className={buttonVariants()}>
          View all FAQs →
        </a>
      </div>
    </section>
  );
}

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { Avatar, AvatarImage } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { buttonVariants } from "@/components/ui/button";

export default function WithContact() {
  return (
    <section className="mx-auto max-w-7xl space-y-6 px-4 py-16">
      <div className="mx-auto max-w-xl text-center">
        <Badge variant="outline">Frequently Asked Questions</Badge>
        <h1 className="mt-4 text-balance text-3xl font-bold tracking-tighter md:text-4xl">
          Features and Services FAQs
        </h1>
        <p className="mt-2 text-balance text-base text-muted-foreground">
          Discover the full range of features and services we offer and how to
          use them.
        </p>
      </div>

      <Accordion
        type="single"
        collapsible
        className="mx-auto w-full max-w-md space-y-6 text-sm"
      >
        <AccordionItem className="rounded border bg-muted px-4" value="item-1">
          <AccordionTrigger>
            How do I update my billing information?
          </AccordionTrigger>
          <AccordionContent className="text-muted-foreground">
            You can update your billing information through your account
            settings. Click on Billing and then Edit to enter your new billing
            details.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem className="rounded border bg-muted px-4" value="item-2">
          <AccordionTrigger>
            What payment methods do you accept?
          </AccordionTrigger>
          <AccordionContent className="text-muted-foreground">
            We accept all major credit cards, PayPal, and various other payment
            methods depending on your location.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem className="rounded border bg-muted px-4" value="item-3">
          <AccordionTrigger>
            Can I share projects with non-users?
          </AccordionTrigger>
          <AccordionContent className="text-muted-foreground">
            Yes, you can share projects with non-users in view-only mode via a
            shared link.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem className="rounded border bg-muted px-4" value="item-4">
          <AccordionTrigger>
            How can I work on a project with my team?
          </AccordionTrigger>
          <AccordionContent className="text-muted-foreground">
            Our platform supports team collaboration. You can add team members
            to your projects from the dashboard.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem className="rounded border bg-muted px-4" value="item-5">
          <AccordionTrigger>How often do you release updates?</AccordionTrigger>
          <AccordionContent className="text-muted-foreground">
            We release updates quarterly, with occasional minor updates for bug
            fixes and improvements.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem className="rounded border bg-muted px-4" value="item-6">
          <AccordionTrigger>
            How can I learn about new features?
          </AccordionTrigger>
          <AccordionContent className="text-muted-foreground">
            Subscribe to our newsletter and check our blog for announcements on
            new features.
          </AccordionContent>
        </AccordionItem>
      </Accordion>

      <div className="mx-auto max-w-md space-y-4 rounded border bg-muted p-4">
        <div className="flex items-center justify-between gap-4">
          <div className="z-0 flex items-center -space-x-4 *:ring-3 *:ring-primary-foreground">
            <Avatar className="z-30 size-12">
              <AvatarImage src="/avatars/avatar-09.webp" />
            </Avatar>
            <Avatar className="z-20 size-10">
              <AvatarImage src="/avatars/avatar-07.webp" />
            </Avatar>
            <Avatar className="z-10 size-8">
              <AvatarImage src="/avatars/avatar-08.webp" />
            </Avatar>
            <Avatar className="z-0 size-6">
              <AvatarImage src="/avatars/avatar-10.webp" />
            </Avatar>
          </div>
          <a
            href="#"
            className={buttonVariants({ variant: "outline", size: "sm" })}
          >
            Contact Us
          </a>
        </div>
        <div>
          <h3 className="text-sm font-semibold">Have more questions?</h3>
          <p className="text-balance text-sm text-muted-foreground">
            Contact our support team with any questions you may have.
          </p>
        </div>
      </div>
    </section>
  );
}

import { Badge } from "@/components/ui/badge";
import { buttonVariants } from "@/components/ui/button";

export default function Simple() {
  return (
    <section className="mx-auto max-w-5xl px-4 py-24">
      <div className="max-w-xl md:col-span-2">
        <Badge variant="outline">Frequently Asked Questions</Badge>
        <h1 className="mt-4 text-balance text-3xl font-bold tracking-tighter md:text-4xl">
          Managing Your Account FAQs
        </h1>
        <p className="mb-4 mt-2 text-balance text-base text-muted-foreground">
          All your questions about subscriptions, payments, and billing cycles
          answered here.
        </p>
        <a href="#" className={buttonVariants({ size: "sm" })}>
          View all FAQs →
        </a>
      </div>

      <dl className="mt-12 grid gap-8 text-sm lg:grid-cols-2">
        <div>
          <dt className="text-base font-medium">
            How do I update my billing information?
          </dt>
          <dd className="mt-2 text-muted-foreground">
            You can update your billing information through your account
            settings. Navigate to Billing and then Edit to enter your new
            details.
          </dd>
        </div>
        <div>
          <dt className="text-base font-medium">
            What payment methods do you accept?
          </dt>
          <dd className="mt-2 text-muted-foreground">
            We accept all major credit cards, PayPal, and various other payment
            methods depending on your location.
          </dd>
        </div>
        <div>
          <dt className="text-base font-medium">Can I delete my account?</dt>
          <dd className="mt-2 text-muted-foreground">
            Yes, you can request account deletion by contacting our support team
            with your account details.
          </dd>
        </div>
        <div>
          <dt className="text-base font-medium">
            How can I share feedback about the platform?
          </dt>
          <dd className="mt-2 text-muted-foreground">
            We love hearing from our users! Please use the feedback form in the
            settings menu to share your thoughts.
          </dd>
        </div>
        <div>
          <dt className="text-base font-medium">How do you protect my data?</dt>
          <dd className="mt-2 text-muted-foreground">
            We use industry-standard encryption and security practices to ensure
            your data is protected.
          </dd>
        </div>
        <div>
          <dt className="text-base font-medium">
            What do I do if I encounter a bug?
          </dt>
          <dd className="mt-2 text-muted-foreground">
            Please report any bugs through our support ticket system, including
            as much detail as possible about the issue.
          </dd>
        </div>
        <div>
          <dt className="text-base font-medium">
            How do I access premium features?
          </dt>
          <dd className="mt-2 text-muted-foreground">
            Premium features are available to our subscribers. You can upgrade
            your account from the billing section.
          </dd>
        </div>
        <div>
          <dt className="text-base font-medium">
            Do you offer any training sessions?
          </dt>
          <dd className="mt-2 text-muted-foreground">
            Yes, we offer webinars and online training sessions. Check our
            resources page for the schedule.
          </dd>
        </div>
        <div>
          <dt className="text-base font-medium">
            Can I share projects with non-users?
          </dt>
          <dd className="mt-2 text-muted-foreground">
            Yes, you can share projects with non-users in view-only mode via a
            shared link.
          </dd>
        </div>
        <div>
          <dt className="text-base font-medium">
            How can I suggest a new feature?
          </dt>
          <dd className="mt-2 text-muted-foreground">
            We are always looking for ways to improve! Please submit your
            feature suggestions through our feedback form or directly contact
            our product team.
          </dd>
        </div>
      </dl>
    </section>
  );
}