Skip to content

Commit c71a1a3

Browse files
WilliamRagstadWilliamRagstad
committed
Improve FAQ with Web X related content
1 parent 5c16cbd commit c71a1a3

File tree

1 file changed

+141
-89
lines changed

1 file changed

+141
-89
lines changed

‎src/components/FAQ.jsx

Lines changed: 141 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -2,99 +2,151 @@ import { useState } from "react";
22
import { motion } from "framer-motion";
33

44
const FAQData = [
5-
{
6-
question: "Can I upgrade or downgrade my plan at any time?",
7-
answer:
8-
"Yes, you can easily upgrade or downgrade your plan at any time. Simply navigate to the account settings in your dashboard and choose the desired plan. The changes will be reflected immediately, and any adjustments in pricing will be applied on your next billing cycle. Our support team is more than happy to provide guidance and recommendations.",
9-
},
10-
{
11-
question: "How to claim your 25% discount offer?",
12-
answer:
13-
"To claim your 25% discount, simply sign up for an account and enter the promotional code at checkout. The discount will be applied automatically to your purchase.",
14-
},
15-
{
16-
question: "What's your refund policy?",
17-
answer:
18-
"We offer a 30-day money-back guarantee on all our plans. If you're not satisfied with our product, simply contact our support team within 30 days of purchase for a full refund.",
19-
},
20-
{
21-
question: "How to get support for the product?",
22-
answer:
23-
"Our dedicated support team is here to help. You can reach out to us through the contact form on our website, send an email, or engage with us via live chat. We'll be happy to assist you with any questions or concerns you may have",
24-
},
5+
{
6+
question: "How is Web X different from other frameworks?",
7+
answer: `Web X stands out due to its HTML-first methodology, the use of TypeScript, and its execution on an efficient Rust-based runtime.
8+
This combination offers a unique blend of simplicity, performance, and advanced hypermedia support not commonly found in other frameworks.
9+
This allows developers to create web applications and APIs using a familiar and straightforward approach.`,
10+
links: [
11+
{ text: "TypeScript", url: "https://www.typescriptlang.org/" },
12+
{ text: "Rust", url: "https://www.rust-lang.org/" }
13+
]
14+
},
15+
{
16+
question: "Is Web X limited to only HTML?",
17+
answer: `No, Web X is a versatile framework that can be used with any MIME-and structured data format, including HTML, CSS, XML, JSON, and more.
18+
Its flexible and adaptable design allows you to process many different data formats, making it suitable for a wide range of applications.
19+
Web X follows an HTML-first approach for ease of use and simplicity but allow users to define parsers for other data formats.`,
20+
links: [
21+
{ text: "MIME types", url: "https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types" },
22+
{ text: "Structured data", url: "https://en.wikipedia.org/wiki/Structured_data" },
23+
{ text: "Parsers", url: "https://en.wikipedia.org/wiki/Parsing" }
24+
]
25+
},
26+
{
27+
question: "Why should I choose Web X over Node.js or Deno?",
28+
answer: `Node.js and Deno are not designed specifically for web development, whereas Web X is designed to be perfect.
29+
Web X is a lightweight, easy-to-use language and framework for building web applications and APIs with TypeScript.
30+
Web X is built on top of the Deno core runtime, while also offering a more streamlined and developer-friendly experience.`,
31+
links: [
32+
{ text: "Node.js", url: "https://nodejs.org/" },
33+
{ text: "Deno", url: "https://deno.land/" },
34+
{ text: "Performance Comparison", url: "https://medium.com/deno-the-complete-reference/deno-vs-node-js-performance-comparison-for-file-server-9af26133c800" }
35+
]
36+
},
37+
{
38+
question: "Does Web X have a package manager?",
39+
answer: `Almost, Web X integrates smoothly with JSR similar to Deno, allowing you to use a vast ecosystem of packages and plugins available for JavaScript and TypeScript.
40+
This ensures you can extend the functionality of your Web X applications easily.
41+
However, Web X does not have a built-in package manager for handlers and models as of yet.`,
42+
links: [
43+
{ text: "JavaScript registry (JSR)", url: "https://jsr.io/" },
44+
{ text: "Deno Third Party Modules", url: "https://docs.deno.com/runtime/manual/basics/modules/#using-third-party-modules-and-libraries-with-deno" }
45+
]
46+
},
47+
{
48+
question: "How does Web X handle real-time data and WebSocket?",
49+
answer: `Web X provides a WebSocket API that allows you to create real-time, bidirectional communication between clients and servers.
50+
The API directly binds to a native Rust WebSocket library, ensuring high performance and reliability.
51+
Web X also supports server-sent events (SSE) for one-way communication from the server to the client.`,
52+
links: [
53+
{ text: "WebSocket API", url: "https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API" },
54+
{ text: "Server-Sent Events (SSE)", url: "https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events" },
55+
{ text: "Rust WebSocket library", url: "https://crates.io/crates/tungstenite" }
56+
]
57+
},
2558
];
2659

2760
export const FAQ = () => (
28-
<section className="relative -mt-8 sm:mt-0 pt-12 sm:pt-16 pb-16 bg-blueGray-50 overflow-hidden">
29-
<div className="absolute -top-10" id="FAQ" />
30-
<motion.div
31-
initial={{ opacity: 0 }}
32-
whileInView={{ opacity: 1 }}
33-
viewport={{ once: true }}
34-
transition={{ duration: 0.5, delay: 0.2 }}
35-
>
36-
<div className="relative z-10 container px-2 sm:px-8 lg:px-4 mx-auto w-11/12 sm:w-full">
37-
<div className="md:max-w-4xl mx-auto">
38-
<p className="mb-7 block-subtitle text-center">Have any questions?</p>
39-
<h2 className="mb-16 block-big-title text-center">
40-
Frequently Asked Questions
41-
</h2>
42-
<div className="mb-11 flex flex-wrap -m-1">
43-
{FAQData.map((item, index) => (
44-
<div className="w-full p-1" key={`${item.question}-${index}`}>
45-
<FAQBox
46-
title={item.question}
47-
content={item.answer}
48-
key={`${item.question}-${item.answer}`}
49-
defaultOpen={index === 0}
50-
/>
51-
</div>
52-
))}
53-
</div>
54-
</div>
55-
</div>
56-
</motion.div>
57-
</section>
61+
<section className="relative -mt-8 sm:mt-0 pt-12 sm:pt-16 pb-16 bg-blueGray-50 overflow-hidden">
62+
<div className="absolute -top-10" id="FAQ" />
63+
<motion.div
64+
initial={{ opacity: 0 }}
65+
whileInView={{ opacity: 1 }}
66+
viewport={{ once: true }}
67+
transition={{ duration: 0.5, delay: 0.2 }}
68+
>
69+
<div className="relative z-10 container px-2 sm:px-8 lg:px-4 mx-auto w-11/12 sm:w-full">
70+
<div className="md:max-w-4xl mx-auto">
71+
<p className="mb-7 block-subtitle text-center">Have any questions?</p>
72+
<h2 className="mb-16 block-big-title text-center">
73+
Frequently Asked Questions
74+
</h2>
75+
<div className="mb-11 flex flex-wrap -m-1">
76+
{FAQData.map((item, index) => (
77+
<div className="w-full p-1" key={`${item.question}-${index}`}>
78+
<FAQBox
79+
title={item.question}
80+
content={item.answer}
81+
key={`${item.question}-${item.answer}`}
82+
links={item.links}
83+
defaultOpen={index === 0}
84+
/>
85+
</div>
86+
))}
87+
</div>
88+
</div>
89+
</div>
90+
</motion.div>
91+
</section>
5892
);
5993

60-
const FAQBox = ({ defaultOpen, title, content }) => {
61-
const [isOpen, setIsOpen] = useState(defaultOpen);
94+
const FAQBox = ({ defaultOpen, title, content, links }) => {
95+
const [isOpen, setIsOpen] = useState(defaultOpen);
6296

63-
return (
64-
<div
65-
className="pt-2 sm:pt-6 pb-2 px-3 sm:px-8 rounded-3xl bg-bgDark3 main-border-gray-darker mb-4 relative hover:bg-bgDark3Hover cursor-pointer transition"
66-
onClick={() => setIsOpen(!isOpen)}
67-
>
68-
<div className="flex flex-col p-2 justify-center items-start">
69-
<h3 className=" content-title pt-3 sm:pt-0 pr-8 sm:pr-0">{title}</h3>
70-
<p
71-
className={`text-secondaryText pt-4 transition-height duration-300 overflow-hidden ${
72-
isOpen ? "max-h-96" : "max-h-0"
73-
}`}
74-
>
75-
{content}
76-
</p>
77-
</div>
78-
<div className="absolute top-6 right-4 sm:top-8 sm:right-8">
79-
<svg
80-
width="28px"
81-
height="30px"
82-
viewBox="0 0 20 20"
83-
fill="none"
84-
xmlns="http://www.w3.org/2000/svg"
85-
className={`transition-all duration-500 ${
86-
isOpen ? "rotate-[180deg]" : "rotate-[270deg]"
87-
}`}
88-
>
89-
<path
90-
d="M4.16732 12.5L10.0007 6.66667L15.834 12.5"
91-
stroke="#4F46E5"
92-
strokeWidth="2"
93-
strokeLinecap="round"
94-
strokeLinejoin="round"
95-
></path>
96-
</svg>
97-
</div>
98-
</div>
99-
);
97+
return (
98+
<div
99+
className="pt-2 sm:pt-6 pb-2 px-3 sm:px-8 rounded-3xl bg-bgDark3 main-border-gray-darker mb-4 relative hover:bg-bgDark3Hover cursor-pointer transition"
100+
onClick={() => setIsOpen(!isOpen)}
101+
>
102+
<div className="flex flex-col p-2 justify-center items-start">
103+
<h3 className=" content-title pt-3 sm:pt-0 pr-8 sm:pr-0">{title}</h3>
104+
<p
105+
className={`text-secondaryText pt-4 transition-height duration-300 overflow-hidden ${isOpen ? "max-h-96" : "max-h-0"
106+
}`}
107+
>
108+
{content}
109+
{links.length > 0 && (
110+
<div className="mt-4">
111+
Read more about:{" "}
112+
{links.map((link, index) => (
113+
<>
114+
<a
115+
key={`${link}-${index}`}
116+
href={link.url}
117+
target="_blank"
118+
className="text-primaryText hover:underline"
119+
>
120+
{link.text}
121+
</a>
122+
{index < links.length - 1 && (
123+
<span className="mr-2">,</span>
124+
)}
125+
</>
126+
))}
127+
</div>
128+
)}
129+
</p>
130+
</div>
131+
<div className="absolute top-6 right-4 sm:top-8 sm:right-8">
132+
<svg
133+
width="28px"
134+
height="30px"
135+
viewBox="0 0 20 20"
136+
fill="none"
137+
xmlns="http://www.w3.org/2000/svg"
138+
className={`transition-all duration-500 ${isOpen ? "rotate-[180deg]" : "rotate-[270deg]"
139+
}`}
140+
>
141+
<path
142+
d="M4.16732 12.5L10.0007 6.66667L15.834 12.5"
143+
stroke="#4F46E5"
144+
strokeWidth="2"
145+
strokeLinecap="round"
146+
strokeLinejoin="round"
147+
></path>
148+
</svg>
149+
</div>
150+
</div>
151+
);
100152
};

0 commit comments

Comments
 (0)