From 31e4409e9ab9ed6969cfbdea678ec2bd555b8856 Mon Sep 17 00:00:00 2001 From: PrinceSachan Date: Tue, 15 Oct 2024 17:10:42 +0530 Subject: [PATCH] style: added more style to FAQ section --- package-lock.json | 16 --- package.json | 1 - src/components/FAQSection/index.jsx | 170 ++++++++++++++++++++++++++ src/components/Faqs.jsx | 151 ----------------------- src/pages/index.tsx | 4 +- tsconfig.json | 2 +- yarn.lock | 178 +++++++++++----------------- 7 files changed, 242 insertions(+), 280 deletions(-) create mode 100644 src/components/FAQSection/index.jsx delete mode 100644 src/components/Faqs.jsx diff --git a/package-lock.json b/package-lock.json index 1db2daf..6c076e0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,6 @@ "version": "0.1.0", "license": "MIT", "dependencies": { - "@headlessui/react": "^1.7.13", "@iconify/react": "^4.1.0", "@react-hook/intersection-observer": "^3.1.1", "@tailwindcss/forms": "^0.5.3", @@ -86,21 +85,6 @@ "url": "https://opencollective.com/eslint" } }, - "node_modules/@headlessui/react": { - "version": "1.7.16", - "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.16.tgz", - "integrity": "sha512-2MphIAZdSUacZBT6EXk8AJkj+EuvaaJbtCyHTJrPsz8inhzCl7qeNPI1uk1AUvCgWylVtdN8cVVmnhUDPxPy3g==", - "dependencies": { - "client-only": "^0.0.1" - }, - "engines": { - "node": ">=10" - }, - "peerDependencies": { - "react": "^16 || ^17 || ^18", - "react-dom": "^16 || ^17 || ^18" - } - }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.8", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz", diff --git a/package.json b/package.json index c721932..c3d7121 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,6 @@ }, "browserslist": "defaults, not ie <= 11", "dependencies": { - "@headlessui/react": "^1.7.13", "@iconify/react": "^4.1.0", "@react-hook/intersection-observer": "^3.1.1", "@tailwindcss/forms": "^0.5.3", diff --git a/src/components/FAQSection/index.jsx b/src/components/FAQSection/index.jsx new file mode 100644 index 0000000..ef64fd3 --- /dev/null +++ b/src/components/FAQSection/index.jsx @@ -0,0 +1,170 @@ +//imports +import Image from 'next/image' +import { Container } from '@/components/Container' +import backgroundImage from '@/images/background-faqs.jpg' +import Link from 'next/link'; +import { useState } from 'react'; + +// faqs +const faqs = [ + { + question: 'Does Responsively App render the page with the same engine as the browser?', + answer: 'No, Responsively App is built on top of Electron and uses Chromium as its rendering engine.', + }, + { + question: 'Does Responsively App accurately render as real devices?', + answer: + 'Responsively App tries to render pages as close as possible to real devices but it may not be 100% accurate.', + }, + { + question: 'Is Responsively App a good replacement for real devices?', + answer: + 'No, Responsively App is not a replacement for real devices. It is a tool that renders pages in viewport sizes of various devices, but it does not emulate their behavior.', + }, + { + question: 'Is Responsively App free?', + answer: + 'Yes, Responsively App is free to use and open source. You can find the source code on GitHub.', + }, + { + question: 'How do I report a bug?', + answer: ( + <> + Please open an issue on our{' '} + + GitHub repo + {' '} + and we'll look into it. + + ), + }, + { + question: 'How do I request a feature?', + answer: ( + <> + Please open an issue on our{' '} + + GitHub repo + {' '} + explainng your need and we'll look into it. + + ), + }, + { + question: 'How can I support Responsively App?', + answer: ( + <> + You can support in a lot of ways and we have details of in our{' '} + + Sponsorship + {' '} + page. + + ), + }, + { + question: 'How can I contribute to Responsively App?', + answer: ( + <> + Please checkout our{' '} + + GitHub repo + {' '} + for issues that needs help and give them a try. + + ), + }, +]; + +export default function FAQSection() { + const [openIndex, setOpenIndex] = useState(null) + + const toggleQuestion = (index) => { + setOpenIndex(openIndex === index ? null : index) + } + return ( + <> +
+ + +
+ {/* small screen */} +
+ FAQ +
+ {/* Large screen */} +
+ Frequently Asked Questions +
+
+ If you can't find what you're looking for, please open an issue on our{' '} + + GitHub + + . +
+
+
+ {faqs.map((question, index) => { + return ( +
+
+
toggleQuestion(index)} + > + {question.question} + + + + + +
+ {openIndex === index && ( +

+ {question.answer} +

+ )} +
+
+ ) + })} +
+ +
+ + ) +} \ No newline at end of file diff --git a/src/components/Faqs.jsx b/src/components/Faqs.jsx deleted file mode 100644 index 338fec0..0000000 --- a/src/components/Faqs.jsx +++ /dev/null @@ -1,151 +0,0 @@ -import Image from 'next/image' - -import { Container } from '@/components/Container' -import backgroundImage from '@/images/background-faqs.jpg' -import Link from 'next/link'; - -const faqs = [ - [ - { - question: 'Does Responsively App render the page with the same engine as the browser?', - answer: - 'No, Responsively App is built on top of Electron and uses Chromium as its rendering engine.', - }, - { - question: 'Does Responsively App accurately render as real devices?', - answer: - 'Responsively App tries to render pages as close as possible to real devices but it may not be 100% accurate.', - }, - { - question: 'Is Responsively App a good replacement for real devices?', - answer: - 'No, Responsively App is not a replacement for real devices. It is a tool that renders pages in viewport sizes of various devices, but it does not emulate their behavior.', - }, - ], - [ - { - question: 'Is Responsively App free?', - answer: - 'Yes, Responsively App is free to use and open source. You can find the source code on GitHub.', - }, - - { - question: 'How do I report a bug?', - answer: ( - <> - Please open an issue on our{' '} - - GitHub repo - {' '} - and we'll look into it. - - ), - }, - { - question: 'How do I request a feature?', - answer: ( - <> - Please open an issue on our{' '} - - GitHub repo - {' '} - explainng your need and we'll look into it. - - ), - }, - ], - [ - { - question: 'How can I support Responsively App?', - answer: ( - <> - You can support in a lot of ways and we have details of in our{' '} - - Sponsorship - {' '} - page. - - ), - }, - { - question: 'How can I contribute to Responsively App?', - answer: ( - <> - Please checkout our{' '} - - GitHub repo - {' '} - for issues that needs help and give them a try. - - ), - }, - ], -]; - -export function Faqs() { - return ( -
- - -
-

- Frequently asked questions -

-

- If you can’t find what you’re looking for, please open an issue on our{' '} - - GitHub - - . -

-
-
    - {faqs.map((column, columnIndex) => ( -
  • -
      - {column.map((faq, faqIndex) => ( -
    • -

      - {faq.question} -

      -

      {faq.answer}

      -
      • - ))} -
    -
    • - ))} -
- -
- ); -} diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 2bf0e22..c183743 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -4,13 +4,13 @@ import Image from 'next/image'; import backgroundSVG from '@/images/background-hero.svg'; import { CallToAction } from '@/components/CallToAction'; -import { Faqs } from '@/components/Faqs'; import { Footer } from '@/components/Footer'; import { Header } from '@/components/Header'; import { Hero } from '@/components/Hero'; import { PrimaryFeatures } from '@/components/PrimaryFeatures'; import { SecondaryFeatures } from '@/components/SecondaryFeatures'; import { Testimonials } from '@/components/Testimonials'; +import FAQSection from '@/components/FAQSection'; export default function Home() { return ( @@ -44,7 +44,7 @@ export default function Home() { - +