सेवाएँ
Services Grid
A three-column grid of services, each an icon, a title and a line of copy.
#services#grid#icons
6 फ्रेमवर्कशुरुआती
Loading…
A questions-and-answers block scoped to one service, built on native disclosure.
<!--
<details> and <summary>, not a div with a click handler. The browser already
gives this the disclosure role, the expanded state, Enter/Space, and - the
part hand-rolled accordions almost always miss - find-in-page: Chrome and
Safari open a closed <details> when the search lands inside it. A JS accordion
hides that text from Ctrl+F entirely.
The shared name attribute makes the group exclusive natively: opening one
closes the rest, with no script at all. Drop it for a multi-open FAQ.
Scoped to one service on purpose - the questions are "how long is the sprint",
not "how do I reset my password", so this sits on the service page rather
than in a global FAQ nobody scrolls to.
-->
<section class="svc-faq" aria-labelledby="svc-faq-title">
<h2 class="svc-faq__title" id="svc-faq-title">Questions about the sprint</h2>
<div class="svc-faq__items">
<details class="svc-faq__item" name="service-faq" open>
<summary class="svc-faq__q">
What happens if you tell us not to build it?
<svg class="svc-faq__chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
<path d="m6 9 6 6 6-6" />
</svg>
</summary>
<p class="svc-faq__a">
You still get the research, the prototype and the reasoning. Roughly one sprint in six
ends that way, and it is the cheapest outcome on offer.
</p>
</details>
<details class="svc-faq__item" name="service-faq">
<summary class="svc-faq__q">
Who needs to be available from our side?
<svg class="svc-faq__chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
<path d="m6 9 6 6 6-6" />
</svg>
</summary>
<p class="svc-faq__a">
One decision-maker for two hours a week, and whoever knows the current system best for
a single afternoon.
</p>
</details>
<details class="svc-faq__item" name="service-faq">
<summary class="svc-faq__q">
Can the sprint roll straight into delivery?
<svg class="svc-faq__chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
<path d="m6 9 6 6 6-6" />
</svg>
</summary>
<p class="svc-faq__a">
Yes, and about half do. The backlog is sized for your team, so it is equally usable if
you take it in-house.
</p>
</details>
</div>
</section>| Prop | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
titleआवश्यक | string | - | कार्ड की हेडिंग टेक्स्ट। |
itemsआवश्यक | FaqItem[] | - | रेंडर की जाने वाली आइटम की सूची। |
defaultOpenId | string | - | माउंट पर खुले रहने वाले आइटम की id। |
allowMultiple | boolean | false | एक साथ एक से ज़्यादा आइटम खोलने देता है। |
groupName | string | 'service-faq' | एक्सक्लूसिव ग्रुप का स्कोप तय करता है। पेज पर हर अकॉर्डियन के लिए यूनीक वैल्यू दें। |
className | string | - | रूट एलिमेंट पर मर्ज होने वाली अतिरिक्त क्लासेज़। |
`<details>` and `<summary>`, not a div with a click handler. The browser already brings the disclosure role, the expanded state, Enter and Space - and find-in-page, which is the part hand-rolled accordions almost always lose: Chrome and Safari open a closed `<details>` when Ctrl+F lands inside it, whereas a JS accordion hides that text from the browser's own search. The shared `name` attribute makes the group exclusive natively, so `allowMultiple` is implemented by simply dropping it - and the whole thing stays a Server Component with no JavaScript at all. Give each FAQ on a page its own `groupName`, or two accordions will close each other's answers. Scope the questions to the service ("how long is the sprint"), not the product - a global FAQ is a different component in a different place.