eny.space Landingpage
feat(faq): add faq section
+114
+110
app/components/faq/faq-section.tsx
+110
app/components/faq/faq-section.tsx
···
1
+
"use client";
2
+
3
+
import { useState } from "react";
4
+
import { Heading } from "@/components/heading";
5
+
import { Paragraph } from "@/components/paragraph";
6
+
import { MinusIcon, PlusIcon } from "lucide-react";
7
+
8
+
type FaqItem = {
9
+
id: string;
10
+
question: string;
11
+
answer: string;
12
+
};
13
+
14
+
const FAQ_ITEMS: FaqItem[] = [
15
+
{
16
+
id: "web3-vs-traditional",
17
+
question: "Why is your Web3 hosting better than traditional hosting?",
18
+
answer:
19
+
"Unlike traditional hosting, eny.space offers decentralized infrastructure designed for uptime, security, and scalability. Your projects are backed by blockchain-based guarantees, reducing single points of failure and giving you the resilience you need to grow.",
20
+
},
21
+
{
22
+
id: "choose-plan",
23
+
question: "How do I know which pricing plan is right for me?",
24
+
answer:
25
+
"Start with the plan that matches your expected storage and traffic. You can upgrade at any time without downtime, and our team can help you right-size based on your current and projected usage.",
26
+
},
27
+
{
28
+
id: "secure-platform",
29
+
question: "What makes your platform secure for hosting my Web3 project?",
30
+
answer:
31
+
"We combine audited smart contract infrastructure with strong network isolation, encryption in transit and at rest, and continuous monitoring. This layered approach helps protect your data and on-chain assets from common attack vectors.",
32
+
},
33
+
{
34
+
id: "switch-plans",
35
+
question: "Can I switch plans later if my needs change?",
36
+
answer:
37
+
"Yes. You can move between plans at any time. Billing is prorated, and your deployments stay online during the switch so you can scale up or down without interruptions.",
38
+
},
39
+
{
40
+
id: "time-to-deploy",
41
+
question: "How soon can I deploy my Web3 project on eny.space?",
42
+
answer:
43
+
"Most teams deploy in minutes. Connect your wallet or Git repository, choose a plan, and follow the guided setup. Our onboarding flow is optimized so you can go from zero to live as quickly as possible.",
44
+
},
45
+
];
46
+
47
+
export function FAQSection() {
48
+
const [openId, setOpenId] = useState<string | null>(FAQ_ITEMS[0]?.id ?? null);
49
+
50
+
return (
51
+
<section className="relative w-full bg-neutral-950 px-4 py-20 sm:px-6 sm:py-24">
52
+
<div className="mx-auto max-w-4xl text-center">
53
+
<Heading
54
+
as="h2"
55
+
className="text-2xl font-semibold tracking-tight text-white sm:text-3xl md:text-4xl"
56
+
>
57
+
Frequently Asked Questions
58
+
</Heading>
59
+
<Paragraph className="mt-4 text-sm text-white/70 sm:text-base">
60
+
All the details you need about the product and billing. If you can't
61
+
find what you're looking for, feel free to{" "}
62
+
<span className="font-semibold text-white">
63
+
reach out to our friendly team
64
+
</span>
65
+
.
66
+
</Paragraph>
67
+
</div>
68
+
69
+
<div className="mx-auto mt-10 max-w-3xl space-y-3 sm:mt-12">
70
+
{FAQ_ITEMS.map((item) => {
71
+
const isOpen = openId === item.id;
72
+
73
+
return (
74
+
<div
75
+
key={item.id}
76
+
className={[
77
+
"overflow-hidden rounded-2xl border border-white/10 bg-neutral-900/40 transition-colors",
78
+
isOpen ? "bg-neutral-900/80" : "hover:bg-neutral-900/60",
79
+
].join(" ")}
80
+
>
81
+
<button
82
+
type="button"
83
+
onClick={() => setOpenId(isOpen ? null : item.id)}
84
+
className="flex w-full items-center justify-between gap-4 px-5 py-4 text-left"
85
+
aria-expanded={isOpen}
86
+
>
87
+
<span className="text-sm font-medium text-white sm:text-base">
88
+
{item.question}
89
+
</span>
90
+
<span className="flex size-7 items-center justify-center rounded-full bg-white/8 text-white">
91
+
{isOpen ? (
92
+
<MinusIcon className="size-4" aria-hidden />
93
+
) : (
94
+
<PlusIcon className="size-4" aria-hidden />
95
+
)}
96
+
</span>
97
+
</button>
98
+
99
+
{isOpen && (
100
+
<div className="border-t border-white/10 px-5 pb-5 pt-3 text-sm text-white/75">
101
+
{item.answer}
102
+
</div>
103
+
)}
104
+
</div>
105
+
);
106
+
})}
107
+
</div>
108
+
</section>
109
+
);
110
+
}
+2
app/page.tsx
+2
app/page.tsx
···
3
3
import { FeaturesSection } from "@/components/features";
4
4
import { PricingSection } from "@/components/pricing";
5
5
import { TestimonialsSection } from "@/components/testimonials";
6
+
import { FAQSection } from "@/components/faq";
6
7
7
8
export default function Page() {
8
9
return (
···
12
13
<FeaturesSection />
13
14
<PricingSection />
14
15
<TestimonialsSection />
16
+
<FAQSection />
15
17
</>
16
18
);
17
19
}