Integrate React components and update homepage layout: added Hero, Feature, Stats, Pricing, FAQ, Contact, and Footer sections; updated global styles and dependencies for React support.

2026-04-21 10:11:13 +02:00
parent 54590826c7
commit ccd1cc46dc
19 changed files with 2416 additions and 498 deletions
--- a/src/components/faq7.tsx
+++ b/src/components/faq7.tsx
@@ -0,0 +1,82 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const faqs = [
+  {
+    question: "What is a FAQ and why is it important?",
+    answer:
+      "FAQ stands for Frequently Asked Questions. It is a list that provides answers to common questions people may have about a specific product, service, or topic.",
+  },
+  {
+    question: "Why should I use a FAQ on my website or app?",
+    answer:
+      "Utilizing a FAQ section on your website or app is a practical way to offer instant assistance to your users or customers. Instead of waiting for customer support responses, they can find quick answers to commonly asked questions. ",
+  },
+  {
+    question: "How do I effectively create a FAQ section?",
+    answer:
+      "Creating a FAQ section starts with gathering the most frequent questions you receive from your users or customers. Once you have a list, you need to write clear, detailed, and helpful answers to each question.",
+  },
+  {
+    question: "What are the benefits of having a well-maintained FAQ section?",
+    answer:
+      "There are numerous advantages to maintaining a robust FAQ section. Firstly, it provides immediate answers to common queries, which improves the user experience.",
+  },
+  {
+    question: "How do I effectively create a FAQ section?",
+    answer:
+      "Creating a FAQ section starts with gathering the most frequent questions you receive from your users or customers. Once you have a list, you need to write clear, detailed, and helpful answers to each question.",
+  },
+];
+
+interface Faq7Props {
+  className?: string;
+}
+
+const Faq7 = ({ className }: Faq7Props) => {
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container">
+        <div className="mx-auto grid max-w-7xl gap-10 md:grid-cols-2">
+          <div className="flex flex-col gap-6">
+            <h2 className="text-4xl font-semibold">
+              Need Help?
+              <br />
+              <span className="text-muted-foreground/70">
+                We&apos;re here to assist.
+              </span>
+            </h2>
+            <p className="text-lg text-muted-foreground md:text-xl">
+              Still have questions? Feel free to contact our friendly
+              <a href="#" className="mx-1 whitespace-nowrap underline">
+                support team
+              </a>
+              specialists.
+            </p>
+            <Button size="lg" variant="outline" className="w-fit">
+              View all FAQs
+            </Button>
+          </div>
+          <Accordion type="multiple">
+            {faqs.map((faq, index) => (
+              <AccordionItem key={index} value={`item-${index}`}>
+                <AccordionTrigger className="text-left">
+                  {faq.question}
+                </AccordionTrigger>
+                <AccordionContent>{faq.answer}</AccordionContent>
+              </AccordionItem>
+            ))}
+          </Accordion>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Faq7 };