diff --git a/app/components/faqaccordian.jsx/Faq.html b/app/components/faqaccordian.jsx/Faq.html new file mode 100644 index 0000000..6613682 --- /dev/null +++ b/app/components/faqaccordian.jsx/Faq.html @@ -0,0 +1,98 @@ + + + + + + + Accordion + + + + + +

FAQ's

+ +
+
+

What is TTURL?

+ +
+
+

It is a shortening web service, which provides short aliases for redirection of long URLs.

+
+
+ +
+
+

What are the benefits of TTURL?

+ +
+
+

It performs much better in search engines, looks more trustworthy, and makes sharing easier.

+
+
+ +
+
+

Is TTURL safe to use?

+ +
+
+

Yes, TTURL is safe to use. It employs algorithms to detect and block links that lead to known spam or malicious sites.

+
+
+ +
+
+

Can TTURL expire after some time?

+ +
+
+

No, most links created with TTURL do not expire unless manually deleted or removed by the service.

+
+
+ +
+
+

Is TTURL free to use?

+ +
+
+

Yes, TTURL is a free service for creating shortened URLs.

+
+
+ +
+
+

How can I customize my TTURL links?

+ +
+
+

Once you've created a shortened link, you can customize its alias by choosing your own custom keyword for easy identification.

+
+
+ +
+
+

How long does it take for my TTURL link to be active?

+ +
+
+

Once you create a TTURL link, it becomes active immediately. You can share it and track clicks right away.

+
+
+ +
+
+

Are there any limitations on the number of URLs I can shorten?

+ +
+
+

No, there is no limitations , you can shorten as many link as you want.

+
+
+ + + + + diff --git a/app/components/faqaccordian.jsx/faq.css b/app/components/faqaccordian.jsx/faq.css new file mode 100644 index 0000000..b558bc5 --- /dev/null +++ b/app/components/faqaccordian.jsx/faq.css @@ -0,0 +1,43 @@ +body{ + background-color: black; + padding: 40px; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + line-height: 1.5rem; +} + + .accordion { + background-color:rgb(11, 11, 11); + padding: 4px 16px; + margin-bottom: 14px; + cursor: pointer; + border-radius: 3px; + box-shadow: 1px 1px 5px rgb(79, 52, 218); + cursor: pointer; + + } + + .question { + display: flex; + align-items: center; + justify-content: space-between; + + } + + .icon{ + margin-right: 15px; + transition: transform 0.4s; + + } + + .icon.active{ + transform: rotate(180deg); /*rotate value*/ + } + + .answer{ + color: rgb(240, 255, 255); + max-height: 0; + overflow: hidden; + transition: max-height 0.4s; + } + + \ No newline at end of file diff --git a/app/components/faqaccordian.jsx/faqpg.js b/app/components/faqaccordian.jsx/faqpg.js new file mode 100644 index 0000000..b33f417 --- /dev/null +++ b/app/components/faqaccordian.jsx/faqpg.js @@ -0,0 +1,32 @@ +import React, { useState } from 'react'; +import './FAQAccordion.css'; + +const FAQAccordion = ({ faqs }) => { + + const [activeIndex, setActiveIndex] = useState(null); + + const handleToggle = (index) => { + // If the clicked index is already active, collapse it, otherwise open it + setActiveIndex(activeIndex === index ? null : index); + }; + + return ( +
+ {faqs.map((faq, index) => ( +
+
handleToggle(index)}> + {activeIndex === index ? '-' : '+'} {/* Toggle icon */} +
+
handleToggle(index)}> + {faq.question} +
+
+ {faq.answer} +
+
+ ))} +
+ ); +}; + +export default FAQAccordion;