Implement AccordionItem component and FAQ section
Implemented a new AccordionItem component and a Frequently Asked Questions (FAQ) section on the website. The AccordionItem component is a reusable, customizable accordion-style UI element that can be used for compact, expandable content presentation. The FAQ section uses the AccordionItem to present a list of commonly asked questions and their answers, with a clean expand/collapse interaction for readability.
This commit is contained in:
Emil Gulamov
parent
da00757a63
commit
6eeb74c235
2 changed files with 142 additions and 0 deletions
84
src/components/FAQ.astro
Normal file
84
src/components/FAQ.astro
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
---
|
||||
// import necessary dependencies
|
||||
import AccordionItem from "./ui/blocks/AccordionItem.astro";
|
||||
|
||||
/* `subTitle` variable used to customise the sub-heading text. */
|
||||
const subTitle: string =
|
||||
"Ask us anything about our brand and products, and get factual responses.";
|
||||
|
||||
/*
|
||||
In the above, the subTitle attribute is a variables part of the FAQ component.
|
||||
*/
|
||||
|
||||
const faqs = [
|
||||
{
|
||||
id: "hs-basic-with-title-and-arrow-stretched-heading-one",
|
||||
collapseId: "hs-basic-with-title-and-arrow-stretched-collapse-one",
|
||||
heading: "What types of tools are included in the Starter Kit?",
|
||||
content:
|
||||
"The Starter Kit features essential hand and power tools for diverse DIY projects, including hammers, drills, screwdrivers, and a variety of fasteners. It's a curated selection to help beginners and experienced DIYers alike tackle most home improvement tasks.",
|
||||
},
|
||||
{
|
||||
id: "hs-basic-with-title-and-arrow-stretched-heading-two",
|
||||
collapseId: "hs-basic-with-title-and-arrow-stretched-collapse-two",
|
||||
heading: "Can I upgrade from the Starter Kit to the Professional Toolbox?",
|
||||
content:
|
||||
"Absolutely! You can upgrade to the Professional Toolbox at any time to access a wider range of high-quality tools, enjoy priority customer support, and receive exclusive content. Contact our support team for a seamless transition.",
|
||||
},
|
||||
{
|
||||
id: "hs-basic-with-title-and-arrow-stretched-heading-three",
|
||||
collapseId: "hs-basic-with-title-and-arrow-stretched-collapse-three",
|
||||
heading:
|
||||
"What discounts are available for bulk orders through the Professional Toolbox plan?",
|
||||
content:
|
||||
"Professional Toolbox members are entitled to exclusive discounts on bulk orders, the percentage of which may vary depending on the order volume. Get in touch with us to discuss your needs, and we'll provide a tailored discount structure.",
|
||||
},
|
||||
{
|
||||
id: "hs-basic-with-title-and-arrow-stretched-heading-four",
|
||||
collapseId: "hs-basic-with-title-and-arrow-stretched-collapse-four",
|
||||
heading: "What kind of customer support can I expect?",
|
||||
content:
|
||||
"All our customers receive dedicated email support. With the Starter Kit, you'll receive our standard support, while the Professional Toolbox plan upgrades you to priority support, meaning faster response times and specialized assistance.",
|
||||
},
|
||||
{
|
||||
id: "hs-basic-with-title-and-arrow-stretched-heading-five",
|
||||
collapseId: "hs-basic-with-title-and-arrow-stretched-collapse-five",
|
||||
heading: "How current are the online resources and tutorials?",
|
||||
content:
|
||||
"We regularly update our online resources and tutorials to reflect the latest trends in DIY and construction, as well as introductions to new tools and techniques. Our material aims to be comprehensive and user-friendly for all skill levels.",
|
||||
},
|
||||
{
|
||||
id: "hs-basic-with-title-and-arrow-stretched-heading-six",
|
||||
collapseId: "hs-basic-with-title-and-arrow-stretched-collapse-six",
|
||||
heading:
|
||||
"Does ScrewFast offer services for large-scale construction projects?",
|
||||
content:
|
||||
"Yes, our Enterprise Solutions are designed for larger companies requiring comprehensive services. We provide consultation, planning, and supply of high-grade tools and materials, as well as staffing solutions for substantial construction needs. Contact us for a customized quote.",
|
||||
},
|
||||
];
|
||||
---
|
||||
|
||||
<div class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
|
||||
<div class="grid gap-10 md:grid-cols-5">
|
||||
<div class="md:col-span-2">
|
||||
<div class="max-w-xs">
|
||||
<h2
|
||||
class="text-2xl font-bold text-neutral-800 dark:text-neutral-200 md:text-4xl md:leading-tight"
|
||||
>
|
||||
Frequently<br />asked questions
|
||||
</h2>
|
||||
<p class="mt-1 hidden text-neutral-600 dark:text-neutral-400 md:block">
|
||||
{subTitle}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="md:col-span-3">
|
||||
<div
|
||||
class="hs-accordion-group divide-y divide-neutral-200 dark:divide-neutral-700"
|
||||
>
|
||||
{faqs.map((faq, i) => <AccordionItem {...faq} first={i === 0} />)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
58
src/components/ui/blocks/AccordionItem.astro
Normal file
58
src/components/ui/blocks/AccordionItem.astro
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
---
|
||||
const { id, collapseId, heading, content, first } = Astro.props;
|
||||
|
||||
interface Props {
|
||||
id: string;
|
||||
collapseId: string;
|
||||
heading: string;
|
||||
content: string;
|
||||
first?: boolean;
|
||||
}
|
||||
---
|
||||
|
||||
<div
|
||||
class=`${first ? "hs-accordion pb-3 active" : "hs-accordion pt-6 pb-3"}`
|
||||
id={id}
|
||||
>
|
||||
<button
|
||||
class="hs-accordion-toggle group inline-flex w-full items-center justify-between gap-x-3 rounded-lg pb-3 text-start font-semibold text-neutral-800 outline-none ring-zinc-500 transition hover:text-neutral-500 focus-visible:ring dark:text-neutral-200 dark:hover:text-neutral-400 dark:focus:outline-none md:text-lg"
|
||||
aria-controls={collapseId}
|
||||
>
|
||||
{heading}
|
||||
<svg
|
||||
class="block h-5 w-5 flex-shrink-0 text-neutral-600 group-hover:text-neutral-500 hs-accordion-active:hidden dark:text-neutral-400"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg
|
||||
>
|
||||
<svg
|
||||
class="hidden h-5 w-5 flex-shrink-0 text-neutral-600 group-hover:text-neutral-500 hs-accordion-active:block dark:text-neutral-400"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"><path d="m18 15-6-6-6 6"></path></svg
|
||||
>
|
||||
</button>
|
||||
<div
|
||||
aria-labelledby={id}
|
||||
class=`${first
|
||||
? "hs-accordion-content w-full overflow-hidden transition-[height] duration-300"
|
||||
: "hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300"}`
|
||||
id={collapseId}
|
||||
class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300"
|
||||
aria-labelledby="hs-basic-with-title-and-arrow-stretched-heading-one"
|
||||
>
|
||||
<p class="text-neutral-600 dark:text-neutral-400">
|
||||
{content}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Add table
Reference in a new issue