Faq n Footer

src/app/sanket/Faq.tsx

@@ -0,0 +1,154 @@
+'use client';
+import { useState } from "react";
+
+
+
+
+
+
+// list of all questions and answers for the FAQ section
+const questions = [
+    {
+        question: "Do you offer pick-up and delivery services?",
+        answer:
+            "Absolutely! We'll rescue your laundry from the wilds of your bedroom and return it fresh and folded.",
+    },
+    {
+        question: 'How do I schedule a pick-up?',
+        answer:
+            "Scheduling a pick-up is easy! Just visit our website or give us a call to book a time that works for you.",
+    },
+    {
+        question: "What types of laundry services do you offer?",
+        answer:
+            "We're not just laundry experts, we're laundry ninjas! Washing, drying, folding, even ironing if you dare!",
+    },
+    {
+        question: " How long does it take to get my laundry back?",
+        answer:
+            "Faster than it takes to find a matching sock! Typically 24-48 hours, depending on the complexity of your laundry saga.",
+    },
+    {
+        question: "What are your pricing options?",
+        answer:
+            "You will be billed monthly or annually, depending on your plan. You can cancel your subscription at any time.",
+    },
+    {
+        question: "Do you have any special instructions for preparing laundry?",
+        answer:
+            "Simply bag up your dirty laundry, and we'll take care of the rest! We'll handle stains and delicate fabrics with care.",
+    },
+    {
+        question: " Can I request special care for delicate items, like a spa day for my clothes?",
+        answer:
+            "Absolutely! Just let us know your preferences, and we'll ensure your delicate items are treated with extra TLC.",
+    },
+    {
+        question: "What safety measures do you have in place?",
+        answer:
+            "Your safety and hygiene are our top priorities. We adhere to strict cleanliness standards and offer contactless pick-up and delivery options for added peace of mind.",
+    },
+
+];
+
+
+const Faq = () => {
+    // state to toggle the answer display
+    const [question, setQuestion] = useState<number | null>(null);
+
+    // function to toggle the answer display
+    const toggle = (index: number) => {
+        if (question === index) {
+            setQuestion(null);
+        } else {
+            setQuestion(index);
+        }
+    };
+
+
+
+
+    return (
+        <main>
+            <section className="flex flex-col heroBg bg-[#000] gap-12 pb-[12rem]" id="faq">
+
+                <section className="flex flex-col   pb-[3rem]" id="faq">
+
+                    <div className="flex flex-col w-[100%] mx-auto mt-[3rem] text-center  ">
+                        <div className="w-[100%] mx-auto textJS text-[2.7rem] text-white">
+                            Frequentlty Asked Questions
+                        </div>
+                    </div>
+
+
+
+
+
+
+                </section>
+
+                <ul className="flex flex-col gap-8 w-[75%] mx-auto relative  z-20 hero-txt">
+                    {questions.map((q, index) => (
+                        <li key={q.question}>
+                            <div
+                                className={`${index !== -1 ? "rounded-[0.77075rem]  text-[#fff] bg-[#000] opacity-80 inset-shadow " : ""
+                                    } gap-[0.3rem] flex flex-col `}
+                            >
+                                <div
+                                    className="flex flex-col justify-between cursor-pointer border-gray-700 "
+                                    onClick={() => {
+                                        toggle(index);
+                                    }}
+                                    style={{
+                                        borderRadius: '0.4rem',
+
+                                        borderWidth: '0.06rem'
+
+                                    }}
+                                >
+
+                                    <div className="text-start ml-4 " >
+
+                                        <div className="text-start   flex flex-row justify-between " >
+                                            <div className=" text-[#fff] flex justify-center  w-[5%] font-bold mt-3">{`0${index + 1}`}</div>
+
+
+                                            <div className="flex w-[100%] flex-col"> <span className=" ml-6 text-[#fff]  mt-3"> {`${q.question}`}</span>
+                                                <div
+                                                    className={`text-start  transition-transform ease-out flex flex-row  duration-300 z-50 ${question === index
+                                                        ? "scale-100 translate-y-0   ml-6 py-[1rem] bg-opacity-0"
+                                                        : "scale-y-0 -translate-y-[50%] h-0"
+                                                        }`}
+
+                                                >
+
+                                                    <div className="flex ">{q.answer}</div>
+                                                </div></div>
+                                            <div
+
+                                                className={`float-right   h-[full] bg-black  relative   w-[full] transform ${question === index ? ' ' : ''}`}
+                                            >
+                                                {question != index ? (
+                                                    <h1 className="text-white bg-[#A962FF] px-4 text-[2rem]  h-full  flex justify-center"><span className=" ">+</span></h1>
+                                                ) : (
+                                                    <h1 className="  text-[2rem] bg-gray-700 px-5 text-white flex justify-center">-</h1>
+                                                )}
+
+                                            </div>
+                                        </div>
+
+                                    </div>
+
+
+                                </div >
+                            </div>
+                        </li >
+                    ))}
+                </ul >
+            </section>
+
+        </main>
+    )
+}
+
+export default Faq; 

src/app/sanket/footer.js

@@ -0,0 +1,55 @@
+"use client";
+import React from "react";
+
+import Link from "next/link";
+import Image from 'next/image';
+
+export function Footer() {
+    return (
+        <div className="bg-[#0D0D0D] w-full">
+            <div className="md:h-[20rem] sm:h-[15rem] h-[10rem] bg-[#0D0D0D] flex flex-col w-[80%] m-auto pt-8">
+
+                <div className="flex flex-row h-2/3 w-full bg-green border-b-[0.09rem] border-b-[#3f3f3f] ">
+                    <div className="logo w-1/3 ">
+                        <div className="relative  lg:w-[57%] md:w-[67%] sm:w-[75%] w-[80%]   h-[100%] my-auto justify-center m-auto ">
+                            <Image
+                                src="/footer/webwizfooter.png"
+                                alt="GIF"
+                                layout="fill"
+                                objectFit="contain"
+                                className="rounded-lg"
+                            />
+                        </div>
+                    </div>
+                    <div className="text w-2/3 bg-[#0D0D0D] flex flex-row  text-[#A962FF] justify-between my-auto flex-wrap sm:gap-8 gap-3 sm:text-[1rem] text-[0.7rem] sm:font-bold font-semibold ">
+                        <span className=" "><Link href={'/about'}>About</Link></span>
+                        <span className=""><Link href={'/project'}>Project</Link></span>
+                        <span className=""><Link href={'/team'}>Team</Link></span>
+                        <span className=""><Link href={'/events'}>Events</Link></span>
+                        <span className=""><Link href={'/contactus'}>Contact us</Link></span>
+                    </div>
+                </div>
+
+                <div className="h-1/3">
+                    <div className="  flex flex-row justify-between  w-full h-full  ">
+                        <span className="text-[#A962FF] font-extralight  md:text-[1rem] text-[0.8rem]   md:mt-[3rem] sm:mt-[2rem] mt-[1rem]">Webwiz &#169; All rights reserved.</span>
+
+
+                        <div className="relative  md:mt-[3rem] sm:mt-[1.4rem] mt-[1rem] lg:w-[33%] md:w-[22%]  w-[21%]  lg:h-[23%] md:h-[18%] h-[52%]  justify-center flex flex-row ">
+                            <Link href={'/linkedin'}>
+                                <Image
+                                    src="/footer/linkedin.png"
+                                    alt="GIF"
+                                    layout="fill"
+                                    objectFit="contain"
+                                    className="rounded-lg float-right"
+                                /></Link>
+                        </div>
+
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    );
+}

src/app/sanket/page.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Footer } from './footer'
+import Faq from './Faq'
+function page() {
+    return (
+        <div>
+            <Faq />
+            <Footer />
+        </div>
+    );
+}
+
+export default page;