IssueFeat: Add a FAQ section. #481 fixed

src/app/page.tsx

@@ -11,6 +11,7 @@ import About from "@/components/shared/About";
 import Features from "@/components/shared/Features";
 import Review from "@/components/shared/customerreviews";
 import Contact from "@/components/shared/contactform";
+import FAQ from "@/components/shared/FAQ";
 export default function Home() {
   useEffect(() => {
     const lenis = new Lenis();
@@ -35,6 +36,7 @@ export default function Home() {
         <div className="flex w-full flex-col items-center justify-between pt-10" id="contact">
           <Contact />
         </div>
+        <FAQ />
       </div>
       <Footer />
       <ScrollToTopButton />

src/components/shared/FAQ.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import {faqs} from "@/utilstson/FAQ";
+
+interface FAQProps {
+    question: string;
+    answer: string;
+}
+
+export default function FAQ() {
+  return (
+    <>
+      <h1 className="text-4xl md:text-6xl font-bold text-center bg-clip-text text-transparent bg-gradient-to-b from-zinc-50 to-orange-500 bg-opacity-50 pb-2 pt-10">
+        FAQs
+      </h1>
+      <p className="mt-5 text-muted-foreground/75 text-center">Here are some of the basic FAQs for you to have a look at!</p>
+      <div className="px-16 pt-20 pb-32 md:px-64">
+        <Accordion type="single" collapsible className="w-full text-muted-foreground">
+            {faqs.map((faq: FAQProps, index: number) => (
+                <AccordionItem key={index} value={`item-${index}`}>
+                <AccordionTrigger>{faq.question}</AccordionTrigger>
+                <AccordionContent>{faq.answer}</AccordionContent>
+                </AccordionItem>
+            ))}
+        </Accordion>
+      </div>
+    </>
+  );
+}

src/components/shared/Footer.tsx

@@ -1,7 +1,30 @@
-import React from 'react';
+"use client";
+import React, {useEffect} from 'react';
 import Image from 'next/image';
 import Script from 'next/script';
 
+const GoogleTranslateComponent = () => {
+  useEffect(() => {
+    // Load the Google Translate script
+    const script = document.createElement('script');
+    script.src = "https://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate";
+    script.async = true;
+    document.body.appendChild(script);
+
+    // Define the Google Translate callback function
+    window.loadGoogleTranslate = () => {
+      new window.google.translate.TranslateElement({
+        pageLanguage: 'en'
+      }, 'google_element');
+    };
+
+    return () => {
+      // Clean up by removing the script
+      document.body.removeChild(script);
+    };
+  }, []);
+};
+
 const Footer: React.FC = () => {
   return (
     <footer className="bg-secondary border-t">

src/components/ui/accordion.tsx

@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

src/utilstson/FAQ.ts

@@ -0,0 +1,22 @@
+export const faqs = [
+    {
+        question: " What is Blox AI?",
+        answer: "Blox AI is an innovative platform designed to simplify the creation of flowcharts, diagrams, and rich documentation. It uses intuitive tools and the advanced capabilities of the Google Gemini AI model to enhance the visualization of complex processes and ideas."
+    },
+    {
+        question: "How does Blox AI work?",
+        answer: "Blox AI uses a combination of advanced AI algorithms and intuitive design tools to help users create flowcharts, diagrams, and rich documentation. The platform leverages the power of the Google Gemini AI model to provide real-time suggestions and recommendations to enhance the visual representation of complex processes and ideas."
+    },
+    {
+        question: "What are the key features of Blox AI?",
+        answer: "Blox AI offers a range of features to help users create flowcharts, diagrams, and rich documentation. Some of the key features include real-time suggestions and recommendations, advanced AI algorithms, intuitive design tools, collaboration tools, and integration with popular platforms like Google Drive and Microsoft Teams."
+    },
+    {
+        question: "Who can benefit from using Blox AI?",
+        answer: "Blox AI is designed to benefit a wide range of users, including students, educators, professionals, and teams. The platform is ideal for anyone who needs to create flowcharts, diagrams, and rich documentation to visualize complex processes and ideas."
+    },
+    {
+        question: "Can I collaborate with my team on Blox AI?",
+        answer: "Yes, Blox AI offers collaboration tools that allow you to work with your team in real-time. You can share your work with team members, leave comments, and make edits together to create flowcharts, diagrams, and rich documentation collaboratively."
+    }
+];