FAQs

0import React, { useState } from "react";
1
2const MinusIcon = ({ className }) => {
3  return (
4    <svg
5      className={className}
6      xmlns="http://www.w3.org/2000/svg"
7      viewBox="0 0 24 24"
8    >
9      <path
10        fillRule="evenodd"
11        d="M3.75 12a.75.75 0 01.75-.75h15a.75.75 0 010 1.5h-15a.75.75 0 01-.75-.75z"
12        clipRule="evenodd"
13      />
14    </svg>
15  );
16};
17
18const data = {
19  subHeading: "FAQs",
20  title: "Frequently asked questions",
21  paragraph:
22    "Should you not locate your query's resolution here, kindly contact ourdedicated help team.",
23  items: [
24    {
25      question: "What variety of shipping methods do you provide?",
26      answer:
27        "We offer a plethora of shipping methods customized to your requirements and desires. Our adaptable delivery services ensure your purchases are securely and promptly delivered to you.",
28    },
29    {
30      question: "What is the typical delivery time for an order?",
31      answer:
32        "With swift order handling and expedited shipping times, we aim for optimal customer satisfaction. Our systematic logistics and dedicated team members strive to deliver your purchases in just a few business days.",
33    },
34    {
35      question: "What steps are necessary to alter an existing order?",
36      answer:
37        "Amending your current order is a straightforward and trouble-free process. Just get in touch with our customer support team, and they'll assist you with the necessary steps to seamlessly implement your changes.",
38    },
39  ],
40};
41
42export function Faqs1() {
43  const [activeIndices, setActiveIndices] = useState<number[]>([]);
44  const handleClick = (index) => {
45    if (activeIndices.includes(index)) {
46      setActiveIndices(activeIndices.filter((item) => item !== index));
47    } else {
48      setActiveIndices([...activeIndices, index]);
49    }
50  };
51
52  return (
53    <div className="mx-auto w-full max-w-md px-8 py-12 sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-7xl">
54      <div className="mx-auto mb-12 max-w-3xl text-center">
55        <p className="mb-1 truncate text-lg font-semibold capitalize text-sky-600">
56          {data.subHeading}
57        </p>
58        <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">
59          {data.title}
60        </h2>
61        <p className="text-lg text-slate-600 [text-wrap:balance]">
62          {data.paragraph}
63        </p>
64      </div>
65      <div className="mx-auto max-w-4xl space-y-8">
66        {data.items.map((item, index) => (
67          <div
68            key={index}
69            onClick={() => handleClick(index)}
70            className="cursor-pointer rounded-2xl border border-slate-200 bg-white p-6 ring-4 ring-slate-50"
71          >
72            <div className="flex justify-between gap-x-8">
73              <p className="text-lg font-semibold text-slate-900">
74                {item.question}
75              </p>
76              <div className="relative shrink-0">
77                <MinusIcon className="absolute inset-0 h-7 w-7 fill-slate-900" />
78                <MinusIcon
79                  className={`${
80                    activeIndices.includes(index) ? "rotate-0" : "rotate-90"
81                  } h-7 w-7 fill-slate-900 duration-300`}
82                />
83              </div>
84            </div>
85            <div
86              className={`${
87                activeIndices.includes(index) ? "max-h-96" : "max-h-0"
88              } overflow-hidden transition-[max-height] duration-500`}
89            >
90              <p className="pt-4 text-base text-slate-600">{item.answer}</p>
91            </div>
92          </div>
93        ))}
94      </div>
95    </div>
96  );
97}
98

0import React, { useState } from "react";
1
2const MinusIcon = ({ className }) => {
3  return (
4    <svg
5      className={className}
6      xmlns="http://www.w3.org/2000/svg"
7      viewBox="0 0 24 24"
8    >
9      <path
10        fillRule="evenodd"
11        d="M3.75 12a.75.75 0 01.75-.75h15a.75.75 0 010 1.5h-15a.75.75 0 01-.75-.75z"
12        clipRule="evenodd"
13      />
14    </svg>
15  );
16};
17
18const data = {
19  title: "Frequently asked questions",
20  paragraph:
21    "The Frequently Asked Questions section aims to address your inquiries and provide in-depth information about our offerings and products.",
22  items: [
23    {
24      question: "What types of shipping methods are available?",
25      answer:
26        "We provide a broad spectrum of shipping methods tailored to suit your individual needs. Our flexible delivery services ensure the secure and timely arrival of your orders.",
27    },
28    {
29      question: "How much time does it typically take to deliver an order?",
30      answer:
31        "Our commitment to speedy order processing and expedited shipping schedules aims to enhance customer satisfaction. Our streamlined logistics and devoted team work towards ensuring your orders are delivered typically within a few working days.",
32    },
33    {
34      question: "How can I modify an existing order?",
35      answer:
36        "Making changes to your current order is an uncomplicated process. Simply contact our customer service team, and they will guide you through the process to make sure your adjustments are made efficiently.",
37    },
38    {
39      question: "Can I track my order?",
40      answer:
41        "Yes, you can track your order. Once your order is shipped, we provide you with a tracking number via email which you can use to check the status of your order at any time.",
42    },
43    {
44      question: "What is your return policy?",
45      answer:
46        "We strive to ensure complete customer satisfaction. If you're not fully satisfied with your purchase, you can return the item within 30 days from the date of receipt. For more details, please refer to our Return Policy page.",
47    },
48  ],
49};
50
51export function Faqs2() {
52  const [activeIndices, setActiveIndices] = useState<number[]>([]);
53  const handleClick = (index) => {
54    if (activeIndices.includes(index)) {
55      setActiveIndices(activeIndices.filter((item) => item !== index));
56    } else {
57      setActiveIndices([...activeIndices, index]);
58    }
59  };
60
61  return (
62    <div className="mx-auto w-full max-w-md px-8 py-12 sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-7xl">
63      <div className="mx-auto max-w-4xl">
64        <div className="mb-12 max-w-3xl">
65          <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">
66            {data.title}
67          </h2>
68          <p className="text-lg text-slate-600 [text-wrap:balance]">
69            {data.paragraph}
70          </p>
71        </div>
72        <div className="divide-y divide-slate-200">
73          {data.items.map((item, index) => (
74            <div
75              key={index}
76              onClick={() => handleClick(index)}
77              className="cursor-pointer py-8 pb-8 first:pt-0 last:pb-0"
78            >
79              <div className="flex justify-between gap-x-8">
80                <p className="text-lg font-semibold text-slate-900">
81                  {item.question}
82                </p>
83                <div className="relative shrink-0">
84                  <MinusIcon className="absolute inset-0 h-7 w-7 fill-slate-900" />
85                  <MinusIcon
86                    className={`${
87                      activeIndices.includes(index) ? "rotate-0" : "rotate-90"
88                    } h-7 w-7 fill-slate-900 duration-300`}
89                  />
90                </div>
91              </div>
92              <div
93                className={`${
94                  activeIndices.includes(index) ? "max-h-96" : "max-h-0"
95                } overflow-hidden transition-[max-height] duration-500`}
96              >
97                <p className="pt-4 text-base text-slate-600">{item.answer}</p>
98              </div>
99            </div>
100          ))}
101        </div>
102      </div>
103    </div>
104  );
105}
106

0import React from "react";
1
2const RocketLaunchIcon = ({ className }) => (
3  <svg
4    className={className}
5    aria-hidden="true"
6    viewBox="0 0 24 24"
7    xmlns="http://www.w3.org/2000/svg"
8  >
9    <path
10      fillRule="evenodd"
11      clipRule="evenodd"
12      d="M9.315 7.58365C12.1956 3.88296 16.6946 1.50021 21.75 1.5C21.9489 1.49999 22.1397 1.57901 22.2803 1.71966C22.421 1.86031 22.5 2.05108 22.5 2.25C22.5 7.30564 20.1173 11.805 16.4165 14.6859C16.4715 15.0329 16.5 15.3883 16.5 15.75C16.5 19.4779 13.4779 22.5 9.75 22.5C9.33579 22.5 9 22.1642 9 21.75V17.6185C8.99075 17.6118 8.98163 17.6049 8.97264 17.5978C8.02063 16.8429 7.15799 15.9803 6.40312 15.0282C6.39577 15.019 6.38866 15.0096 6.38179 15H2.25C1.83579 15 1.5 14.6642 1.5 14.25C1.5 10.5221 4.52208 7.5 8.25 7.5C8.61198 7.5 8.96772 7.52856 9.315 7.58365ZM15 6.75C13.7574 6.75 12.75 7.75736 12.75 9C12.75 10.2426 13.7574 11.25 15 11.25C16.2426 11.25 17.25 10.2426 17.25 9C17.25 7.75736 16.2426 6.75 15 6.75Z"
13    />
14    <path d="M5.26036 17.2418C5.59237 16.9942 5.66074 16.5242 5.41306 16.1922C5.16539 15.8602 4.69546 15.7918 4.36345 16.0395C3.08209 16.9954 2.25 18.5256 2.25 20.2499C2.25 20.5255 2.27129 20.7966 2.31246 21.0615C2.36259 21.3842 2.61574 21.6373 2.93842 21.6875C3.20336 21.7286 3.47445 21.7499 3.75 21.7499C5.47434 21.7499 7.00452 20.9178 7.9604 19.6365C8.20808 19.3045 8.13971 18.8345 7.8077 18.5869C7.47569 18.3392 7.00576 18.4075 6.75809 18.7396C6.07313 19.6577 4.98081 20.2499 3.75 20.2499C3.75 19.0191 4.34218 17.9268 5.26036 17.2418Z" />
15  </svg>
16);
17
18const CommisionIcon = ({ className }) => {
19  return (
20    <svg
21      xmlns="http://www.w3.org/2000/svg"
22      viewBox="0 0 24 24"
23      preserveAspectRatio="xMidYMid meet"
24      className={className}
25    >
26      <path d="M12 7.5C10.7574 7.5 9.75 8.50736 9.75 9.75C9.75 10.9926 10.7574 12 12 12C13.2426 12 14.25 10.9926 14.25 9.75C14.25 8.50736 13.2426 7.5 12 7.5Z" />
27      <path
28        fillRule="evenodd"
29        clipRule="evenodd"
30        d="M1.5 4.875C1.5 3.83947 2.33947 3 3.375 3H20.625C21.6605 3 22.5 3.83947 22.5 4.875V14.625C22.5 15.6605 21.6605 16.5 20.625 16.5H3.375C2.33947 16.5 1.5 15.6605 1.5 14.625V4.875ZM8.25 9.75C8.25 7.67893 9.92893 6 12 6C14.0711 6 15.75 7.67893 15.75 9.75C15.75 11.8211 14.0711 13.5 12 13.5C9.92893 13.5 8.25 11.8211 8.25 9.75ZM18.75 9C18.3358 9 18 9.33579 18 9.75V9.7575C18 10.1717 18.3358 10.5075 18.75 10.5075H18.7575C19.1717 10.5075 19.5075 10.1717 19.5075 9.7575V9.75C19.5075 9.33579 19.1717 9 18.7575 9H18.75ZM4.5 9.75C4.5 9.33579 4.83579 9 5.25 9H5.2575C5.67171 9 6.0075 9.33579 6.0075 9.75V9.7575C6.0075 10.1717 5.67171 10.5075 5.2575 10.5075H5.25C4.83579 10.5075 4.5 10.1717 4.5 9.7575V9.75Z"
31      />
32      <path d="M2.25 18C1.83579 18 1.5 18.3358 1.5 18.75C1.5 19.1642 1.83579 19.5 2.25 19.5C7.65005 19.5 12.8802 20.2222 17.8498 21.5749C19.0404 21.899 20.25 21.0168 20.25 19.7551V18.75C20.25 18.3358 19.9142 18 19.5 18H2.25Z" />
33    </svg>
34  );
35};
36
37const StreamlineIcon = ({ className }) => {
38  return (
39    <svg
40      xmlns="http://www.w3.org/2000/svg"
41      viewBox="0 0 24 24"
42      preserveAspectRatio="xMidYMid meet"
43      className={className}
44    >
45      <path d="M21 4.78125V6.75C21 8.56289 16.9701 10.0312 12 10.0312C7.02991 10.0312 3 8.56289 3 6.75V4.78125C3 2.96836 7.02991 1.5 12 1.5C16.9701 1.5 21 2.96836 21 4.78125ZM18.7982 10.3061C19.6339 10.0025 20.4013 9.61289 21 9.13301V13.3125C21 15.1254 16.9701 16.5938 12 16.5938C7.02991 16.5938 3 15.1254 3 13.3125V9.13301C3.59866 9.61699 4.36607 10.0025 5.20179 10.3061C7.0058 10.9623 9.40848 11.3438 12 11.3438C14.5915 11.3438 16.9942 10.9623 18.7982 10.3061ZM3 15.6955C3.59866 16.1795 4.36607 16.565 5.20179 16.8686C7.0058 17.5248 9.40848 17.9062 12 17.9062C14.5915 17.9062 16.9942 17.5248 18.7982 16.8686C19.6339 16.565 20.4013 16.1754 21 15.6955V19.2188C21 21.0316 16.9701 22.5 12 22.5C7.02991 22.5 3 21.0316 3 19.2188V15.6955Z" />
46    </svg>
47  );
48};
49
50const BellSnoozeIcon = ({ className }) => (
51  <svg
52    className={className}
53    aria-hidden="true"
54    viewBox="0 0 24 24"
55    xmlns="http://www.w3.org/2000/svg"
56  >
57    <path
58      fillRule="evenodd"
59      clipRule="evenodd"
60      d="M12 2.25C8.27215 2.25 5.25012 5.27197 5.25001 8.9998L5.24981 9.75C5.24981 11.8731 4.44879 13.8074 3.13126 15.2699C2.96476 15.4547 2.90073 15.71 2.96033 15.9516C3.01992 16.1931 3.19539 16.3893 3.42875 16.4755C4.97287 17.0455 6.58934 17.4659 8.2604 17.7192C8.25351 17.812 8.25001 17.9056 8.25001 18C8.25001 20.0711 9.92894 21.75 12 21.75C14.0711 21.75 15.75 20.0711 15.75 18C15.75 17.9056 15.7465 17.812 15.7396 17.7192C17.4105 17.4659 19.0269 17.0455 20.5709 16.4755C20.8042 16.3893 20.9797 16.1931 21.0393 15.9516C21.0989 15.71 21.0349 15.4547 20.8684 15.2699C19.5508 13.8074 18.7498 11.8731 18.7498 9.75V9.04919L18.75 9C18.75 5.27208 15.7279 2.25 12 2.25ZM9.75001 18C9.75001 17.9662 9.75075 17.9326 9.75221 17.8993C10.4927 17.966 11.2424 18 11.9998 18C12.7574 18 13.5072 17.9659 14.2478 17.8992C14.2493 17.9326 14.25 17.9662 14.25 18C14.25 19.2426 13.2427 20.25 12 20.25C10.7574 20.25 9.75001 19.2426 9.75001 18ZM10.5 7.5C10.0858 7.5 9.75 7.83579 9.75 8.25C9.75 8.66421 10.0858 9 10.5 9H12.0986L9.87596 12.334C9.72253 12.5641 9.70823 12.86 9.83874 13.1039C9.96926 13.3478 10.2234 13.5 10.5 13.5H13.5C13.9142 13.5 14.25 13.1642 14.25 12.75C14.25 12.3358 13.9142 12 13.5 12H11.9014L14.124 8.66603C14.2775 8.43588 14.2918 8.13997 14.1613 7.89611C14.0307 7.65224 13.7766 7.5 13.5 7.5H10.5Z"
61    />
62  </svg>
63);
64
65const BoostIcon = ({ className }) => {
66  return (
67    <svg
68      xmlns="http://www.w3.org/2000/svg"
69      viewBox="0 0 24 24"
70      preserveAspectRatio="xMidYMid meet"
71      className={className}
72    >
73      <path d="M6 3C4.34315 3 3 4.34315 3 6V8.25C3 9.90685 4.34315 11.25 6 11.25H8.25C9.90685 11.25 11.25 9.90685 11.25 8.25V6C11.25 4.34315 9.90685 3 8.25 3H6Z" />
74      <path d="M15.75 3C14.0931 3 12.75 4.34315 12.75 6V8.25C12.75 9.90685 14.0931 11.25 15.75 11.25H18C19.6569 11.25 21 9.90685 21 8.25V6C21 4.34315 19.6569 3 18 3H15.75Z" />
75      <path d="M6 12.75C4.34315 12.75 3 14.0931 3 15.75V18C3 19.6569 4.34315 21 6 21H8.25C9.90685 21 11.25 19.6569 11.25 18V15.75C11.25 14.0931 9.90685 12.75 8.25 12.75H6Z" />
76      <path d="M17.625 13.5C17.625 13.0858 17.2892 12.75 16.875 12.75C16.4608 12.75 16.125 13.0858 16.125 13.5V16.125H13.5C13.0858 16.125 12.75 16.4608 12.75 16.875C12.75 17.2892 13.0858 17.625 13.5 17.625H16.125V20.25C16.125 20.6642 16.4608 21 16.875 21C17.2892 21 17.625 20.6642 17.625 20.25V17.625H20.25C20.6642 17.625 21 17.2892 21 16.875C21 16.4608 20.6642 16.125 20.25 16.125H17.625V13.5Z" />
77    </svg>
78  );
79};
80
81const ToolsIcon = ({ className }) => {
82  return (
83    <svg
84      xmlns="http://www.w3.org/2000/svg"
85      viewBox="0 0 24 24"
86      preserveAspectRatio="xMidYMid meet"
87      className={className}
88    >
89      <path
90        fillRule="evenodd"
91        clipRule="evenodd"
92        d="M12 6.75C12 3.85051 14.3505 1.5 17.25 1.5C17.7791 1.5 18.2913 1.57852 18.7747 1.72505C19.027 1.80151 19.2206 2.00479 19.2847 2.26048C19.3488 2.51618 19.2739 2.78674 19.0875 2.97313L15.7688 6.29183C15.8305 6.76741 16.0438 7.22581 16.409 7.59099C16.7742 7.95617 17.2326 8.16947 17.7082 8.23117L21.0269 4.91247C21.2133 4.72608 21.4838 4.65122 21.7395 4.7153C21.9952 4.77938 22.1985 4.97299 22.275 5.22526C22.4215 5.7087 22.5 6.22086 22.5 6.75C22.5 9.64949 20.1495 12 17.25 12C17.0995 12 16.9503 11.9936 16.8027 11.9812C15.7855 11.8952 14.9338 12.0816 14.4944 12.6151L7.34327 21.2987C6.71684 22.0593 5.78308 22.5 4.79769 22.5C2.97642 22.5 1.5 21.0236 1.5 19.2023C1.5 18.2169 1.94067 17.2832 2.70132 16.6567L11.3849 9.50557C11.9184 9.06623 12.1048 8.21453 12.0188 7.19728C12.0064 7.04968 12 6.9005 12 6.75ZM4.11723 19.125C4.11723 18.7108 4.45302 18.375 4.86723 18.375H4.87473C5.28895 18.375 5.62473 18.7108 5.62473 19.125V19.1325C5.62473 19.5468 5.28895 19.8825 4.87473 19.8825H4.86723C4.45302 19.8825 4.11723 19.5468 4.11723 19.1325V19.125Z"
93      />
94      <path d="M10.076 8.64031L7.87502 6.43936V4.87502C7.87502 4.61157 7.73679 4.36744 7.51089 4.2319L3.76089 1.9819C3.46578 1.80483 3.08804 1.85133 2.84469 2.09469L2.09469 2.84469C1.85133 3.08804 1.80483 3.46578 1.9819 3.76089L4.2319 7.51089C4.36744 7.73679 4.61157 7.87502 4.87502 7.87502H6.43936L8.50138 9.93704L10.076 8.64031Z" />
95      <path
96        fillRule="evenodd"
97        clipRule="evenodd"
98        d="M12.5559 17.3287L16.7386 21.5114C18.0567 22.8294 20.1936 22.8294 21.5116 21.5114C22.8296 20.1934 22.8296 18.0565 21.5116 16.7385L18.206 13.4328C17.8937 13.4771 17.5746 13.5 17.2501 13.5C17.0574 13.5 16.866 13.4918 16.6765 13.4758C16.2822 13.4425 15.994 13.4696 15.8089 13.5177C15.7053 13.5446 15.6574 13.5713 15.6419 13.5814L12.5559 17.3287ZM15.9698 15.9697C16.2627 15.6768 16.7375 15.6768 17.0304 15.9697L18.9054 17.8447C19.1983 18.1376 19.1983 18.6124 18.9054 18.9053C18.6125 19.1982 18.1377 19.1982 17.8448 18.9053L15.9698 17.0303C15.6769 16.7374 15.6769 16.2626 15.9698 15.9697Z"
99      />
100    </svg>
101  );
102};
103
104const data = {
105  subHeading: "FAQs",
106  title: "Frequently asked questions",
107  paragraph:
108    "We understand that you might have questions about using Jettwave for your brand's needs. Our FAQ section is designed to address those queries and give you a comprehensive understanding of our services",
109  items: [
110    {
111      question: "What features support efficient project management?",
112      answer:
113        "Our platform helps streamline your project management process and keep track of tasks, deadlines, and progress with ease.",
114      Icon: RocketLaunchIcon,
115    },
116    {
117      question: "How does your platform ensure seamless communication?",
118      answer:
119        "Our platform facilitates smooth communication within your team and with clients through integrated messaging and collaboration tools.",
120      Icon: CommisionIcon,
121    },
122    {
123      question:
124        "What capabilities does the platform provide for intelligent automation?",
125      answer:
126        "Our platform allows you to automate repetitive and time-consuming tasks to improve productivity and free up valuable time for more important work.",
127      Icon: StreamlineIcon,
128    },
129    {
130      question: "What security measures does the platform incorporate?",
131      answer:
132        "We ensure the safety and confidentiality of your data with advanced security features and robust privacy protocols.",
133      Icon: BellSnoozeIcon,
134    },
135    {
136      question: "Does the platform provide any customization options?",
137      answer:
138        "Yes, you can tailor the platform to your specific needs with customizable features, layouts, and branding elements.",
139      Icon: BoostIcon,
140    },
141    {
142      question: "What reporting and analytics does the platform provide?",
143      answer:
144        "Our platform provides comprehensive reports and analytics to help you gain valuable insights into your business performance and make informed decisions.",
145      Icon: ToolsIcon,
146    },
147  ],
148};
149
150export function Faqs3() {
151  return (
152    <div className="mx-auto w-full max-w-md px-8 py-12 sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-7xl">
153      <p className="mb-1 truncate text-lg font-semibold capitalize text-sky-600">
154        {data.subHeading}
155      </p>
156      <div className="mb-12 max-w-3xl">
157        <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">
158          {data.title}
159        </h2>
160        <p className="text-lg text-slate-600 [text-wrap:balance]">
161          {data.paragraph}
162        </p>
163      </div>
164
165      <div className="grid grid-cols-1 gap-x-8 gap-y-12 md:grid-cols-2 xl:grid-cols-3">
166        {data.items.map(({ question, answer, Icon }, index: number) => {
167          return (
168            <div key={index} className="flex flex-col gap-y-5">
169              <div className="relative m-[3px] h-12 w-12 shrink-0 overflow-hidden rounded-xl border border-sky-200 bg-white p-2.5 ring-[3px] ring-sky-100">
170                <Icon className="relative h-full w-full fill-sky-600" />
171              </div>
172              <div>
173                <p className="mb-1 text-lg font-bold text-slate-900 [text-wrap:balance] first-letter:uppercase">
174                  {question}
175                </p>
176                <p className="text-base text-slate-600 [text-wrap:balance]">
177                  {answer}
178                </p>
179              </div>
180            </div>
181          );
182        })}
183      </div>
184    </div>
185  );
186}
187

0import React, { useState } from "react";
1import Link from "next/link";
2
3const MinusIcon = ({ className }) => {
4  return (
5    <svg
6      className={className}
7      xmlns="http://www.w3.org/2000/svg"
8      viewBox="0 0 24 24"
9    >
10      <path
11        fillRule="evenodd"
12        d="M3.75 12a.75.75 0 01.75-.75h15a.75.75 0 010 1.5h-15a.75.75 0 01-.75-.75z"
13        clipRule="evenodd"
14      />
15    </svg>
16  );
17};
18
19const data = {
20  title: "FAQs",
21  paragraph:
22    "Our Frequently Asked Questions section is dedicated to addressing your inquiries and providing detailed insights into our services and products.",
23  items: [
24    {
25      question: "What shipping methods are at my disposal?",
26      answer:
27        "We accommodate a wide range of shipping options designed to meet your specific needs. Rely on our adjustable delivery services for a secure and prompt delivery of your items.",
28    },
29    {
30      question: "What is the expected delivery time for my order?",
31      answer:
32        "Our efficient order processing and quick shipping schedules are aimed at providing the best customer experience. Thanks to our efficient logistics system and committed team, your orders typically reach you within a few business days.",
33    },
34    {
35      question: "How can I make alterations to my order?",
36      answer:
37        "Changing your current order is a simple and stress-free task. You just need to connect with our customer service team, who will guide you through the process to incorporate your changes seamlessly.",
38    },
39    {
40      question: "Is there an option to expedite shipping?",
41      answer:
42        "Absolutely, we do provide an expedited shipping option for customers who require their items urgently. Additional charges may apply for this service.",
43    },
44  ],
45  button1: { label: "Learn more", link: "#" },
46  button2: { label: "Start now", link: "#" },
47};
48
49export function Faqs4() {
50  const [activeIndices, setActiveIndices] = useState<number[]>([]);
51  const handleClick = (index) => {
52    if (activeIndices.includes(index)) {
53      setActiveIndices(activeIndices.filter((item) => item !== index));
54    } else {
55      setActiveIndices([...activeIndices, index]);
56    }
57  };
58
59  return (
60    <div className="mx-auto w-full max-w-md px-8 py-12 sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-7xl">
61      <div className="flex gap-x-20 gap-y-12 max-lg:flex-col">
62        <div className="flex max-w-md shrink-0 flex-col gap-y-6">
63          <div className="max-w-3xl">
64            <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">
65              {data.title}
66            </h2>
67            <p className="text-lg text-slate-600 [text-wrap:balance]">
68              {data.paragraph}
69            </p>
70          </div>
71          <div className="flex flex-wrap gap-4">
72            <Link
73              role="button"
74              href={data.button1.link}
75              className="h-fit w-fit select-none whitespace-nowrap rounded-lg bg-slate-800 px-6 py-2.5 text-base text-slate-100 outline-sky-700 duration-75 hover:bg-slate-900 active:scale-95 disabled:pointer-events-none disabled:bg-sky-800/50"
76            >
77              {data.button1.label}
78            </Link>
79            <Link
80              role="button"
81              href={data.button2.link}
82              className="h-fit w-fit select-none whitespace-nowrap rounded-lg bg-slate-800 px-6 py-2.5 text-base text-slate-100 outline-sky-700 duration-75 hover:bg-slate-900 active:scale-95 disabled:pointer-events-none disabled:bg-sky-800/50"
83            >
84              {data.button2.label}
85            </Link>
86          </div>
87        </div>
88        <div>
89          <div className="space-y-6 rounded-3xl border border-slate-200 bg-white p-6 ring-4 ring-slate-50 max-sm:contents">
90            {data.items.map((item, index) => (
91              <div
92                key={index}
93                onClick={() => handleClick(index)}
94                className="cursor-pointer overflow-hidden rounded-2xl bg-sky-50 ring-1 ring-inset ring-sky-200"
95              >
96                <div className="flex justify-between gap-x-8 bg-sky-600 p-6">
97                  <p className="text-lg font-semibold text-slate-50">
98                    {item.question}
99                  </p>
100                  <div className="relative shrink-0">
101                    <MinusIcon className="absolute inset-0 h-7 w-7 fill-slate-50" />
102                    <MinusIcon
103                      className={`${
104                        activeIndices.includes(index) ? "rotate-0" : "rotate-90"
105                      } h-7 w-7 fill-slate-50 duration-300`}
106                    />
107                  </div>
108                </div>
109
110                <div
111                  className={`${
112                    activeIndices.includes(index) ? "max-h-40" : "max-h-0"
113                  } overflow-hidden transition-[max-height] duration-500`}
114                >
115                  <p className="p-6 text-base text-slate-600">{item.answer}</p>
116                </div>
117              </div>
118            ))}
119          </div>
120        </div>
121      </div>
122    </div>
123  );
124}
125

0import React from "react";
1
2const CurrencyDollarIcon = ({ className }) => (
3  <svg
4    className={className}
5    aria-hidden="true"
6    viewBox="0 0 24 24"
7    xmlns="http://www.w3.org/2000/svg"
8  >
9    <path d="M10.4636 8.74626C10.6908 8.56577 10.9607 8.43451 11.25 8.35249V11.1474C10.9552 11.0637 10.686 10.9304 10.4636 10.7537C10.0699 10.441 9.91752 10.073 9.91752 9.75C9.91752 9.42705 10.0699 9.05904 10.4636 8.74626Z" />
10    <path d="M12.75 15.6616V12.8383C13.0972 12.9228 13.4138 13.0658 13.6713 13.259C14.0978 13.5788 14.25 13.9448 14.25 14.25C14.25 14.5551 14.0978 14.9211 13.6713 15.241C13.4138 15.4342 13.0972 15.5772 12.75 15.6616Z" />
11    <path
12      fillRule="evenodd"
13      clipRule="evenodd"
14      d="M12 2.25C6.61522 2.25 2.25 6.61522 2.25 12C2.25 17.3848 6.61522 21.75 12 21.75C17.3848 21.75 21.75 17.3848 21.75 12C21.75 6.61522 17.3848 2.25 12 2.25ZM12.75 6C12.75 5.58579 12.4142 5.25 12 5.25C11.5858 5.25 11.25 5.58579 11.25 6V6.81563C10.6231 6.92669 10.0253 7.17873 9.53058 7.57176C8.81822 8.13765 8.41752 8.9213 8.41752 9.75C8.41752 10.5787 8.81822 11.3623 9.53058 11.9282C10.033 12.3274 10.6327 12.575 11.25 12.6843V15.6616C10.9028 15.5771 10.5864 15.4341 10.3289 15.241L9.45001 14.5818C9.11865 14.3333 8.64854 14.4004 8.40001 14.7318C8.15147 15.0631 8.21862 15.5332 8.54999 15.7818L9.42886 16.441C9.96206 16.8409 10.5979 17.0856 11.25 17.1903V18C11.25 18.4142 11.5858 18.75 12 18.75C12.4142 18.75 12.75 18.4142 12.75 18V17.1904C13.4021 17.0856 14.0381 16.8409 14.5714 16.441C15.3164 15.8821 15.75 15.0965 15.75 14.25C15.75 13.4034 15.3164 12.6178 14.5714 12.059C14.0381 11.659 13.4021 11.4143 12.75 11.3096V8.35257C13.0392 8.4346 13.309 8.56583 13.5361 8.74626L13.951 9.07585C14.2753 9.3335 14.7471 9.27944 15.0048 8.95511C15.2624 8.63078 15.2084 8.15899 14.884 7.90135L14.4691 7.57176C13.9745 7.17879 13.3768 6.92677 12.75 6.81567V6Z"
15    />
16  </svg>
17);
18const Dice4Icon = ({ className }) => (
19  <svg
20    className={className}
21    aria-hidden="true"
22    viewBox="0 0 24 24"
23    xmlns="http://www.w3.org/2000/svg"
24  >
25    <path
26      fillRule="evenodd"
27      clipRule="evenodd"
28      d="M6.21429 3C4.43909 3 3 4.43909 3 6.21429V17.7857C3 19.5609 4.43909 21 6.21429 21H17.7857C19.5609 21 21 19.5609 21 17.7857V6.21429C21 4.43909 19.5609 3 17.7857 3H6.21429ZM17.1247 8.41538C17.1247 9.26747 16.434 9.95823 15.5819 9.95823C14.7298 9.95823 14.0391 9.26747 14.0391 8.41538C14.0391 7.56328 14.7298 6.87252 15.5819 6.87252C16.434 6.87252 17.1247 7.56328 17.1247 8.41538ZM15.5819 17.1276C16.434 17.1276 17.1247 16.4369 17.1247 15.5847C17.1247 14.7326 16.434 14.0419 15.5819 14.0419C14.7298 14.0419 14.0391 14.7326 14.0391 15.5847C14.0391 16.4369 14.7298 17.1276 15.5819 17.1276ZM9.96099 8.41538C9.96099 9.26747 9.27022 9.95823 8.41813 9.95823C7.56603 9.95823 6.87527 9.26747 6.87527 8.41538C6.87527 7.56328 7.56603 6.87252 8.41813 6.87252C9.27022 6.87252 9.96099 7.56328 9.96099 8.41538ZM8.41813 17.1276C9.27022 17.1276 9.96099 16.4369 9.96099 15.5847C9.96099 14.7326 9.27022 14.0419 8.41813 14.0419C7.56603 14.0419 6.87527 14.7326 6.87527 15.5847C6.87527 16.4369 7.56603 17.1276 8.41813 17.1276Z"
29    />
30  </svg>
31);
32const ExclamationShieldIcon = ({ className }) => (
33  <svg
34    className={className}
35    aria-hidden="true"
36    viewBox="0 0 24 24"
37    xmlns="http://www.w3.org/2000/svg"
38  >
39    <path
40      fillRule="evenodd"
41      clipRule="evenodd"
42      d="M11.4843 2.16971C11.7735 1.89578 12.2265 1.89578 12.5157 2.16971C14.5325 4.07968 17.2538 5.25001 20.25 5.25001C20.2977 5.25001 20.3453 5.24972 20.3928 5.24913C20.7202 5.24506 21.0123 5.45381 21.1146 5.76482C21.5271 7.01958 21.75 8.35954 21.75 9.75006C21.75 15.6921 17.6859 20.683 12.1869 22.0983C12.0643 22.1299 11.9357 22.1299 11.8131 22.0983C6.31406 20.683 2.25 15.6921 2.25 9.75006C2.25 8.35954 2.47287 7.01958 2.88541 5.76482C2.98767 5.45381 3.27984 5.24506 3.60721 5.24913C3.65473 5.24972 3.70233 5.25001 3.75 5.25001C6.74624 5.25001 9.46752 4.07968 11.4843 2.16971ZM12 8.25C12.4142 8.25 12.75 8.58579 12.75 9V12.75C12.75 13.1642 12.4142 13.5 12 13.5C11.5858 13.5 11.25 13.1642 11.25 12.75V9C11.25 8.58579 11.5858 8.25 12 8.25ZM12 15C11.5858 15 11.25 15.3358 11.25 15.75V15.7575C11.25 16.1717 11.5858 16.5075 12 16.5075H12.0075C12.4217 16.5075 12.7575 16.1717 12.7575 15.7575V15.75C12.7575 15.3358 12.4217 15 12.0075 15H12Z"
43    />
44  </svg>
45);
46const GiftIcon = ({ className }) => (
47  <svg
48    className={className}
49    aria-hidden="true"
50    viewBox="0 0 24 24"
51    xmlns="http://www.w3.org/2000/svg"
52  >
53    <path d="M9.375 3C8.33947 3 7.5 3.83947 7.5 4.875C7.5 5.91053 8.33947 6.75 9.375 6.75H11.25V11.25H3.375C2.33947 11.25 1.5 10.4105 1.5 9.375V8.625C1.5 7.58947 2.33947 6.75 3.375 6.75H6.56833C6.20935 6.21371 6 5.5688 6 4.875C6 3.01104 7.51104 1.5 9.375 1.5C10.4352 1.5 11.3813 1.98888 12 2.7535C12.6187 1.98888 13.5648 1.5 14.625 1.5C16.489 1.5 18 3.01104 18 4.875C18 5.5688 17.7906 6.21371 17.4317 6.75H21.375C22.4105 6.75 23.25 7.58947 23.25 8.625V9.375C23.25 10.4105 22.4105 11.25 21.375 11.25H12.75V6.75H14.625C15.6605 6.75 16.5 5.91053 16.5 4.875C16.5 3.83947 15.6605 3 14.625 3C13.5895 3 12.75 3.83947 12.75 4.875V6.75H11.25V4.875C11.25 3.83947 10.4105 3 9.375 3Z" />
54    <path d="M11.25 12.75H3V19.5C3 20.7426 4.00736 21.75 5.25 21.75H11.25V12.75Z" />
55    <path d="M12.75 12.75V21.75H19.5C20.7426 21.75 21.75 20.7426 21.75 19.5V12.75H12.75Z" />
56  </svg>
57);
58
59const data = {
60  subHeading: "FAQs",
61  title: "Frequently asked questions",
62  paragraph:
63    "Our Frequently Asked Questions (FAQ) section is curated to respond to those questions and provide you with an extensive insight into our offerings.",
64  items: [
65    {
66      question:
67        "Which features of your platform aid in effective project management?",
68      answer:
69        "Our platform is equipped to simplify your project management process, ensuring easy monitoring of tasks, deadlines, and progress.",
70      Icon: CurrencyDollarIcon,
71    },
72    {
73      question: "How does your platform enhance communication?",
74      answer:
75        "We enable effortless communication amongst team members and clients with our integrated messaging and collaboration tools.",
76      Icon: Dice4Icon,
77    },
78    {
79      question: "What intelligent automation features does the platform offer?",
80      answer:
81        "Our platform provides automation features that take care of repetitive and time-consuming tasks, improving productivity and leaving more time for crucial work.",
82      Icon: ExclamationShieldIcon,
83    },
84    {
85      question: "What measures are taken to secure data on the platform?",
86      answer:
87        "Your data's safety and confidentiality are our priority. We have implemented advanced security features and strict privacy protocols to ensure this.",
88      Icon: GiftIcon,
89    },
90  ],
91};
92
93export function Faqs5() {
94  return (
95    <div className="mx-auto w-full max-w-md px-8 py-12 sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-7xl">
96      <div className="mx-auto mb-12 max-w-3xl text-center">
97        <p className="mb-1 truncate text-lg font-semibold capitalize text-sky-600">
98          {data.subHeading}
99        </p>
100        <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">
101          {data.title}
102        </h2>
103        <p className="text-lg text-slate-600 [text-wrap:balance]">
104          {data.paragraph}
105        </p>
106      </div>
107      <div className="mx-auto grid max-w-5xl grid-cols-1 gap-8 md:grid-cols-2">
108        {data.items.map(({ question, answer, Icon }, index: number) => {
109          return (
110            <div
111              key={index}
112              className="flex flex-col gap-y-5 rounded-3xl border border-slate-200 bg-white p-6 ring-4 ring-slate-50"
113            >
114              <div className="relative m-[3px] h-12 w-12 shrink-0 overflow-hidden rounded-xl border border-sky-200 bg-white p-2.5 ring-[3px] ring-sky-100">
115                <Icon className="relative h-full w-full fill-sky-600" />
116              </div>
117              <div>
118                <p className="mb-1 text-lg font-bold text-slate-900 first-letter:uppercase">
119                  {question}
120                </p>
121                <p className="text-base text-slate-600">{answer}</p>
122              </div>
123            </div>
124          );
125        })}
126      </div>
127    </div>
128  );
129}
130