FAQs

import { cn } from '@/lib/utils';
import Heading from '@/components/ui/Heading';
import {
  IconMoodSmile,
  IconMessageCode,
  IconDeviceGamepad3,
  IconCloudLock,
  IconBlendMode,
  IconReceipt2,
} from '@tabler/icons-react';
export default function Page() {
  return (
    <div className="min-h-screen">
      <div className="relative mx-auto max-w-5xl px-4 py-10 md:py-40">
        <Heading as="h1" className="text-center">
          Frequently asked questions
        </Heading>
        <ul className="mt-12 grid gap-4 md:grid-cols-2">
          <FAQItem
            question="What is Nexus-Kit SasS?"
            icon={<IconMoodSmile size={20} />}
            answer="Nexus-Kit SasS is a powerful SaaS (Software as a Service) platform designed to streamline workflow automation, data integration, and scalable cloud-based solutions for businesses of all sizes."
          />
          <FAQItem
            question="How do I sign up for Nexus-Kit SasS?"
            icon={<IconMessageCode size={20} />}
            answer='You can sign up by visiting our official website, clicking "Get Started," and following the registration process. A free trial is available for new users.'
          />
          <FAQItem
            question="What are the system requirements?"
            icon={<IconDeviceGamepad3 size={20} />}
            answer="Nexus-Kit SasS is cloud-based, so it works on any modern web browser (Chrome, Firefox, Safari, Edge). No additional hardware or software installation is required."
          />
          <FAQItem
            question="Is my data secure with Nexus-Kit SasS?"
            icon={<IconCloudLock size={20} />}
            answer="Yes! We use enterprise-grade encryption (AES-256), regular backups, and comply with GDPR and SOC 2 standards to ensure maximum data security."
          />
          <FAQItem
            question="Can I integrate Nexus-Kit SasS with other tools?"
            icon={<IconBlendMode size={20} />}
            answer="Absolutely! Nexus-Kit Sass supports integrations with popular platforms like Slack, Salesforce, Zapier, and more via API or pre-built connectors."
          />
          <FAQItem
            question="What pricing plans are available?"
            icon={<IconReceipt2 size={20} />}
            answer="We offer flexible plans, including Free, Pro, and Enterprise tiers. Pricing depends on features, user count, and storage needs. Visit our Pricing page for details."
          />
        </ul>
      </div>
    </div>
  );
}

interface FAQItemProps {
  question: string;
  answer: string;
  icon?: React.ReactNode;
  className?: string;
}
function FAQItem({ className, question, answer, icon }: FAQItemProps) {
  return (
    <li className={cn('flex flex-col gap-2 md:flex-row', className)}>
      <div className="border-line flex size-9 shrink-0 items-center justify-center rounded border">{icon}</div>
      <div>
        <p className="mb-2 font-semibold">{question}</p>
        <div className="text-description">{answer}</div>
      </div>
    </li>
  );
}

import Heading from '@/components/ui/Heading';
import Accordion, { type AccordionItem } from '@/components/ui/Accordion';
import {
  IconMoodSmile,
  IconMessageCode,
  IconDeviceGamepad3,
  IconCloudLock,
  IconBlendMode,
  IconReceipt2,
} from '@tabler/icons-react';

const faqItems: AccordionItem[] = [
  {
    value: 'faq-1',
    title: (
      <div className="flex items-center gap-2">
        <div className="border-line flex size-9 items-center justify-center rounded border">
          <IconMoodSmile size={20} />
        </div>
        <span>What is Nexus-Kit SasS?</span>
      </div>
    ),
    content:
      'Nexus-Kit SasS is a powerful SaaS (Software as a Service) platform designed to streamline workflow automation, data integration, and scalable cloud-based solutions for businesses of all sizes.',
  },
  {
    value: 'faq-2',
    title: (
      <div className="flex items-center gap-2">
        <div className="border-line flex size-9 items-center justify-center rounded border">
          <IconMessageCode size={20} />
        </div>
        <span>How do I sign up for Nexus-Kit SasS?</span>
      </div>
    ),
    content:
      'You can sign up by visiting our official website, clicking "Get Started," and following the registration process. A free trial is available for new users.',
  },
  {
    value: 'faq-3',
    title: (
      <div className="flex items-center gap-2">
        <div className="border-line flex size-9 items-center justify-center rounded border">
          <IconDeviceGamepad3 size={20} />
        </div>
        <span>What are the system requirements?</span>
      </div>
    ),
    content:
      'Nexus-Kit SasS is cloud-based, so it works on any modern web browser (Chrome, Firefox, Safari, Edge). No additional hardware or software installation is required.',
  },
  {
    value: 'faq-4',
    title: (
      <div className="flex items-center gap-2">
        <div className="border-line flex size-9 items-center justify-center rounded border">
          <IconCloudLock size={20} />
        </div>
        <span>Is my data secure with Nexus-Kit SasS?</span>
      </div>
    ),
    content:
      'Yes! We use enterprise-grade encryption (AES-256), regular backups, and comply with GDPR and SOC 2 standards to ensure maximum data security.',
  },
  {
    value: 'faq-5',
    title: (
      <div className="flex items-center gap-2">
        <div className="border-line flex size-9 items-center justify-center rounded border">
          <IconBlendMode size={20} />
        </div>
        <span>Can I integrate Nexus-Kit SasS with other tools?</span>
      </div>
    ),
    content:
      'Absolutely! Nexus-Kit Sass supports integrations with popular platforms like Slack, Salesforce, Zapier, and more via API or pre-built connectors.',
  },
  {
    value: 'faq-6',
    title: (
      <div className="flex items-center gap-2">
        <div className="border-line flex size-9 items-center justify-center rounded border">
          <IconReceipt2 size={20} />
        </div>
        <span>What pricing plans are available?</span>
      </div>
    ),
    content:
      'We offer flexible plans, including Free, Pro, and Enterprise tiers. Pricing depends on features, user count, and storage needs. Visit our Pricing page for details.',
  },
];
export default function Page() {
  return (
    <div className="min-h-screen">
      <div className="relative mx-auto max-w-5xl px-4 py-10 md:py-40">
        <Heading as="h1" className="text-center">
          Frequently asked questions
        </Heading>
        <ul className="mx-auto mt-20 max-w-120">
          <Accordion
            className="[&_[data-node=accordion-content]]:text-description [&_[data-node=accordion-content]]:pl-11"
            type="multiple"
            items={faqItems}
          />
        </ul>
      </div>
    </div>
  );
}