Skip to content
This repository has been archived by the owner on May 12, 2024. It is now read-only.

Commit

Permalink
docs: added faqs
Browse files Browse the repository at this point in the history
  • Loading branch information
@Abh1noob
Abh1noob committed Feb 29, 2024
1 parent f3f4688 commit 97138e7
Show file tree
Hide file tree
Showing 2 changed files with 58 additions and 79 deletions.
4 changes: 3 additions & 1 deletion devsoc24-landing/src/components/LearnMoreBtn.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
"use client";
import { motion } from "framer-motion";
import styles from "@/styles/LearnMoreBtn.module.css";
import useGlitchStore from "@/store/store";

const LearnMoreBtn = (props: { link: string }) => {
const { showGlitch, setGlitch } = useGlitchStore();
return (
<>
<motion.a
href={props.link}
className={`${styles.btn} font-disket px-3 py-1 text-xl tracking-tighter`}
className={`${styles.btn} font-disket px-3 py-1 text-xl tracking-tighter z-50`}
whileHover={{ backgroundPosition: "-100%,100%" }}
>
Learn More
Expand Down
133 changes: 55 additions & 78 deletions devsoc24-landing/src/components/terminal/faqs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,111 +8,88 @@ import Draggable from "react-draggable";

const questions = [
{
question: "Is it free?",
question: "Is the hackathon free to attend?",
answer:
"Yes the hackathon is completely free for all those who wish to participate",
"Yes! DEVSOC'24 is completely free to attend thanks to our sponsors.",
},
{
question: "Is it long?",
answer: "longer than your....",
question: "What's the application process like?",
answer: `You are required to register for our event on DEVSOC registrations portal where you will be asked for basic details and for your github profile (if applicable). You're also required to register on VTOP under the "Event Registration" tab. You can simply search "DEVSOC" in the search tab and register for the same. Also join the discord link on the bottom right of this website.\nAfter registration you will be required to submit a document outlining the idea your team will be pursuing during the hackathon. Following the idea submission you will be eligible to attend the hackathon.`,
},
{
question: "Certificate?",
question: "How many team members do I need to have?",
answer:
"Certificate which is valued 100x your placement will be given to you",
"This hackathon is a team competition where you can have 2-4 members in your team. Most teams aim to have a mix of people with both design and developer skills.",
},
{
question: "Have any more queries?",
answer:
"If you have any further doubts, feel free to ask your doubts on our Discord server",
},
{
question:
"I don't have much experience with coding or tech events. Should I still participate?",
answer:
"We will be evaluating everyone based on different metrics. We'll take into account if you're a fresher and where you stand amongst your peers. If you don't have anything technical to add to your resume, this event is a great opportunity to lay a solid foundation for your tech journey. This hackathon will give you an opportunity to inteact with your seniors and gain valuable guidance. Basically, if you're interested in coding or tech events, you're more than welcome to participate!",
},
];

export default function FAQs() {
const [minimized, setMinimized] = useState(false);
const [maximized, setMaximized] = useState(false);
const [showModal, setShowModal] = useState(false);
const [modalContent, setModalContent] = useState(questions[0]?.answer);
// const { activeCard, setActiveCard } = useCloseStore();
// const { selectedComponent, setSelectedComponent } = useSelectedStore();

const handleMinimize = () => {
setMinimized(!minimized);
};

const handleMaximize = () => {
setMaximized(!maximized);
};

const toggleModal = () => {
setShowModal(!showModal);
};

return (
<div
className={`relative flex h-full w-full ${maximized ? "" : "pl-[30px] pt-[100px] md:pl-[60px]"}`}
className={`relative flex h-full w-full px-[50px] pt-[10px] md:pl-[60px]`}
>
<div>
{minimized ? (
<div
className="absolute flex h-[54px] w-[54px] items-center justify-center rounded-full border-2 border-[#a4a3a3] bg-[#757575] hover:cursor-pointer"
onClick={() => handleMinimize()}
>
{/* <Image src="Icon-notepad.svg" alt="Description of the image" width={40} height={100} className="" /> */}
</div>
) : (
questions.map((items, index) => (
<div className="flex flex-row flex-wrap gap-6">
{questions.map((items, index) => (
<Draggable handle=".drag-handle" bounds=".boundarybox" key={index}>
<div
className={` flex items-stretch flex-col max-h-[500px] h-fit pb-10 mb-10 border-2 bg-[#b2b2b2] md:w-[30vw] w-[90vw]`}
id={`${index}`}
>
<div className="drag-handle flex h-[25px] w-[100%] items-center justify-between border-b-2 bg-gradient-to-r from-blue-800 to-blue-600">
<span className="flex items-center pl-4 text-xs text-white">
<GiMoneyStack className="pr-2 text-2xl" /> DEVSOC&apos;24
</span>
<section className="flex">
<span className="mr-1 border-b-[2px] border-r-[2px] border-[#1e1e1e] bg-[#757575]">
<MdMinimize />
</span>
<span className="mr-1 border-b-[2px] border-r-[2px] border-[#1e1e1e] bg-[#757575]">
<BiWindow />
</span>
<span className="mr-1 border-b-[2px] border-r-[2px] border-[#1e1e1e] bg-[#757575]">
<IoMdClose />
</span>
</section>
</div>

<Draggable
handle=".drag-handle"
bounds=".boundarybox"
key={index}
<p className="w-[90%] pl-6 pt-6 ">{items.question}</p>
<button
className={`absolute bottom-2 right-2 self-end border-b-[3px] border-r-[3px] border-[#000000] bg-[#aaa9a9] text-sm transition ease-in-out hover:scale-[1.05] hover:duration-75 px-2`}
onClick={() => {
setModalContent(questions[index]?.answer);
toggleModal();
}}
>
<div
className={` flex min-w-[300px] flex-grow flex-col ${maximized ? "h-[90vh]" : "h-[100px] w-[30vw] pb-10"} mb-10 border-2 bg-[#b2b2b2] `}
id={`${index}`}
>
<div className="drag-handle flex h-[25px] w-[100%] items-center justify-between border-b-2 bg-gradient-to-r from-blue-800 to-blue-600">
<span className="flex items-center pl-4 text-xs text-white">
<GiMoneyStack className="pr-2 text-2xl" /> DEVSOC&apos;24
</span>
<section className="flex">
<span
className="mr-1 border-b-[2px] border-r-[2px] border-[#1e1e1e] bg-[#757575]"

>
<MdMinimize />
</span>
<span
className="mr-1 border-b-[2px] border-r-[2px] border-[#1e1e1e] bg-[#757575]"

>
<BiWindow />
</span>
<span
className="mr-1 border-b-[2px] border-r-[2px] border-[#1e1e1e] bg-[#757575]"

>
<IoMdClose />
</span>
</section>
</div>

<p className="w-[90%] pl-6 pt-6 ">{items.question}</p>
<button
className={`mr-2 h-6 w-24 self-end border-b-[3px] border-r-[3px] border-[#000000] bg-[#aaa9a9] text-sm transition ease-in-out hover:h-[26px] hover:w-[98px] hover:duration-75 md:mt-[4px]`}
onClick={() => {
setModalContent(questions[index]?.answer);
toggleModal();
}}
>
Select
</button>
</div>
</Draggable>

))
)}
Select
</button>
</div>
</Draggable>
))}
</div>
{showModal ? (
<>
<div className="fixed left-0 top-0 z-50 flex h-screen w-screen items-center justify-center bg-black/60">
<div className=" min-w-[4 0vw] relative left-0 top-0 z-50 flex h-fit min-h-[20vh] w-fit flex-col border-2 border-white bg-[#b2b2b2]">
<div className="fixed left-0 top-0 z-50 flex h-screen w-screen items-center justify-center bg-black/60 ">
<div className=" relative left-0 top-0 z-50 flex h-fit min-h-[20vh] w-fit min-w-[40vw] max-w-[90vw] flex-col border-2 border-white bg-[#b2b2b2] md:max-w-[50vw]">
<div className="flex h-[25px] w-[100%] items-center justify-between border-b-2 bg-gradient-to-r from-blue-800 to-blue-600">
<span className="flex items-center pl-4 text-xs text-white">
<GiMoneyStack className="pr-2 text-2xl" /> Answer
Expand Down

0 comments on commit 97138e7

Please sign in to comment.