From 3ff9c654f19730a2e0325f4c4278cb273824c0bd Mon Sep 17 00:00:00 2001 From: Ashwani Senapati Date: Sun, 2 Jun 2024 15:25:16 +0530 Subject: [PATCH] initial commit --- package-lock.json | 22 +++++ package.json | 1 + src/app/globals.css | 3 + src/app/page.js | 4 +- src/components/FAQs/Accordion.js | 139 +++++++++---------------------- src/components/FAQs/Faq.js | 86 +++++++++++++++++++ tailwind.config.js | 4 + 7 files changed, 159 insertions(+), 100 deletions(-) create mode 100644 src/components/FAQs/Faq.js diff --git a/package-lock.json b/package-lock.json index 94e3950..a426a13 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,7 @@ "postcss": "8.4.24", "prop-types": "^15.8.1", "react": "^18.2.0", + "react-collapse": "^5.1.1", "react-dom": "^18.2.0", "sharp": "^0.32.1", "tailwindcss": "3.3.2" @@ -3790,6 +3791,14 @@ "node": ">=0.10.0" } }, + "node_modules/react-collapse": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/react-collapse/-/react-collapse-5.1.1.tgz", + "integrity": "sha512-k6cd7csF1o9LBhQ4AGBIdxB60SUEUMQDAnL2z1YvYNr9KoKr+nDkhN6FK7uGaBd/rYrYfrMpzpmJEIeHRYogBw==", + "peerDependencies": { + "react": ">=16.3.0" + } + }, "node_modules/react-dom": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", @@ -4767,6 +4776,19 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/typescript": { + "version": "5.4.5", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz", + "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==", + "peer": true, + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=14.17" + } + }, "node_modules/uglify-js": { "version": "1.3.5", "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-1.3.5.tgz", diff --git a/package.json b/package.json index fba86cc..be8411c 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "postcss": "8.4.24", "prop-types": "^15.8.1", "react": "^18.2.0", + "react-collapse": "^5.1.1", "react-dom": "^18.2.0", "sharp": "^0.32.1", "tailwindcss": "3.3.2" diff --git a/src/app/globals.css b/src/app/globals.css index 81f4e51..dfce48d 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -66,4 +66,7 @@ html{ ::-webkit-scrollbar-thumb:hover { background: #f769f7; transition: background 0.3s ease-in-out; +} +.ReactCollapse--collapse { + transition: height 300ms; } \ No newline at end of file diff --git a/src/app/page.js b/src/app/page.js index 150aff3..ee514a3 100644 --- a/src/app/page.js +++ b/src/app/page.js @@ -1,4 +1,4 @@ -import Accordion from "@/components/FAQs/Accordion"; +import Faq from "@/components/FAQs/Faq"; import Hero from "@/components/Hero/Hero"; import Timeline from "@/components/Timeline/timeline"; import Statistics from "../components/suraj/Statistics"; @@ -23,7 +23,7 @@ export default function Home() {
- +
diff --git a/src/components/FAQs/Accordion.js b/src/components/FAQs/Accordion.js index 962294f..13e173b 100644 --- a/src/components/FAQs/Accordion.js +++ b/src/components/FAQs/Accordion.js @@ -1,107 +1,50 @@ "use client" -import React, { useState } from "react"; -import "./Accordion.css"; -import union1 from "./union1.svg"; -import Title from "../CommonComponent/Title/Title"; -import Image from "next/image"; - -function Accordion() { - const [show, setShow] = useState(null); - - const toggle = (i) => { - if (show == i) { - return setShow(null); - } - setShow(i); - }; - +import React,{useState} from 'react' +import {Collapse} from 'react-collapse'; +export default function Accordion(props) { + const [isOpen, setIsOpen] = useState(false); + const toggleAccordion = () => { + setIsOpen(!isOpen); + }; return ( <> -
-
- - <div className="line"> - <Image src={union1} alt="Image" className="img2"></Image> - </div> - - {data.map((item, i) => ( - <div key={i} className="item item-center ml-[2.8rem] mr-[2.8rem] mt-8 mb-4 bg-white/[0.1] shadow-[-3px_-2px_3px_0px_rgba(248,248,248,0.39)] rounded-[12px] " onClick={() => toggle(i)}> - - - <div className="title pl-[0.75rem] gap-5 isolate max-[326px]:h-14 mr-6 bg-transparent shadow-[-3px_-2px_3px_0px_rgba(248,248,248,0)] rounded-[12px] max-[512px]:pt-[8px] max-[512px]:pl-[10px] flex justify-between flex-row pr-3 cursor-pointer max-[420px]:gap-0 max-[420px]:pr-[0] max-[400px]:h-[0]" onClick={() => toggle(i)}> - - <span className="flex items-center py-4"> - <p className="faq text-sm sm:text-xl leading-[2.5rem] max-[512px]:leading-2 max-[720px]:leading-[2.5rem] max-[635px]:leading-[0rem] max-[512px]:text-[13px] max-[424px]:text-[10px] max-[342px]:leading-6 max-[342px]:text-[6.2px] font-bold"> - {"0" + item.id} + <div className="font-gvonz item item-center ml-[2.8rem] mr-[2.8rem] mt-8 mb-4 bg-white/[0.1] shadow-[-3px_-2px_3px_0px_rgba(248,248,248,0.39)] rounded-[12px]"> + <div + className="title pl-[0.75rem] gap-5 isolate max-[326px]:h-14 mr-6 bg-transparent shadow-[-3px_-2px_3px_0px_rgba(248,248,248,0)] rounded-[12px] max-[512px]:pt-[8px] max-[512px]:pl-[10px] flex justify-between flex-row pr-3 cursor-pointer max-[420px]:gap-0 max-[420px]:pr-[0] max-[400px]:h-[0]" + onClick={toggleAccordion} + > + <span className="flex items-center py-4"> + <p className="faq text-sm sm:text-xl leading-[2.5rem] max-[512px]:leading-2 max-[720px]:leading-[2.5rem] max-[635px]:leading-[0rem] max-[512px]:text-[13px] max-[424px]:text-[10px] max-[342px]:leading-6 max-[342px]:text-[6.2px] font-bold"> + {props.serial} </p> - - <p className=" text-sm sm:text-xl leading-[2.5rem] max-[512px]:leading-2 max-[720px]:leading-[2.5rem] max-[635px]:leading-[0rem] max-[512px]:text-[13px] max-[424px]:text-[10px] max-[342px]:leading-6 max-[342px]:text-[6.2px] font-bold ml-2"> - - {item.faq} + <p className=" text-sm sm:text-xl leading-[2.5rem] max-[512px]:leading-2 max-[720px]:leading-[2.5rem] max-[635px]:leading-[0rem] max-[512px]:text-[13px] max-[424px]:text-[10px] max-[342px]:leading-6 max-[342px]:text-[6.2px] font-bold ml-2"> + {props.question} </p> - </span> - <span - className={`cursor-pointer box-border flex flex-col justify-center text-4xl font-bold fill-white`} - + </span> + <span className="cursor-pointer box-border flex flex-col justify-center text-4xl font-bold fill-white"> + <svg + xmlns="http://www.w3.org/2000/svg" + height="48" + viewBox="0 -960 960 960" + width="48" > - {show !== i ? (<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M480-360 280-559h400L480-360Z"/></svg>) :(<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="m280-400 200-201 200 201H280Z"/></svg>)} - </span> - - </div> - <div className={show == i ? "answer show" : "answer" } > - {item.answer} - </div> + <path + d={ isOpen + ? "M480-600 280-401h400L480-600Z" + : "M480-360 280-559h400L480-360Z"} + + ></path> + </svg> + </span> </div> - ))} - </div> - </div> + <Collapse isOpened={isOpen}> + <div className="accordion-content overflow-hidden transition-max-height duration-300 ease-in-out bg-[#3f3949] text-sm sm:text-xl leading-[2.5rem] max-[512px]:leading-2 max-[720px]:leading-[2.5rem] max-[635px]:leading-[0rem] max-[512px]:text-[13px] max-[424px]:text-[10px] max-[342px]:leading-6 max-[342px]:text-[6.2px] rounded-b-[12px] pl-2 pr-2"> + {props.answer} + </div> + </Collapse> + + </div> + </> - ); + ) } - -const data = [ - { - id: 1, - faq: "What is a hackathon?", - answer: - "A hackathon is an invention marathon where you can work with people around the globe to build a project related to technology! It isn't about hacking into a system, it's instead about hacking something together and learning a great deal in the process.", - }, - { - id: 2, - faq: "Can we work on old or ongoing project?", - answer: - "No, you have to start from scratch. You can use open source libraries and frameworks.", - }, - { - id: 3, - faq: "How many members do we need in a team?", - answer: - "You can submit solo as well a team with at max 4 members can be formed.", - }, - { - id: 4, - faq: "Registration costs?", - answer: - "Nada.", - }, - { - id: 5, - faq: "Can I apply for multiple tracks?", - answer: - "Sure thing! Apply for all the tracks you want, like a kid in a candy store! 🏃🍭😄. Just make sure to be relevant.", - }, - { - id: 6, - faq: "Who can participate?", - answer: - "Everyone is welcome to participate, be it, students, professionals, or aliens from different planets!", - }, - { - id: 7, - faq: "Is physical presence required, or can we hack remotely?", - answer: - "Nah, no need for pants, go remote! 🏠😄", - }, -]; - -export default Accordion; diff --git a/src/components/FAQs/Faq.js b/src/components/FAQs/Faq.js new file mode 100644 index 0000000..083bdd9 --- /dev/null +++ b/src/components/FAQs/Faq.js @@ -0,0 +1,86 @@ +"use client" +import Accordion from "./Accordion"; +export default function Faq() { + const accordiondata = [ + { + serial: "01", + question: "What is a hackathon?", + answer: "A hackathon is an invention marathon where you can work with people around the globe to build a project related to technology! It isn't about hacking into a system, it's instead about hacking something together and learning a great deal in the process.", + }, + { + serial: "02", + question: "Can we work on old or ongoing projects?", + answer:"No, you have to start from scratch. You can use open source libraries and frameworks." + }, + { + serial: "03", + question: "How many members do we need in a team?", + answer:"You can submit solo as well a team with at max 4 members can be formed." + }, + { + serial: "04", + question: "Registration costs?", + answer:"Nada" + }, + { + serial: "05", + question: "Can I apply for multiple tracks?", + answer:"Sure thing! Apply for all the tracks you want, like a kid in a candy store! 🏃🍭😄. Just make sure to be relevant." + }, + { + serial: "06", + question: "Who can participate?", + answer:"Everyone is welcome to participate, be it, students, professionals, or aliens from different planets!" + }, + { + serial: "07", + question: "Is physical presence required, or can we hack remotely?", + answer:"Nah, no need for pants, go remote! 🏠😄" + }, + ]; + + + return ( + <> + <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide"></link> + <link href='https://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet'></link> + <div className="wrapper w-screen justify-center items-center bg-center text-white bg-customBg mb-16"> + <div className="accordion"> + <div className="flex justify-start px-10 py-5"> + <span className="flex flex-col justify-center items-center"> + <div className="font-gvonz font-light text-[#07D6D1] leading-normal smallmobile:text-md text-[16px] sm:text-[28px] md:text-[40px]"> + FAQ + </div> + <div className="md:pt-2 basis-[6px] w-[92%] bg-[#0C9794] relative -top-1 md:top-0"></div> + </span> + </div> + <div className="line"> + <svg + width="1535" + height="60" + viewBox="0 0 2130 60" + fill="none" + xmlns="http://www.w3.org/2000/svg" + > + <path + fillRule="evenodd" + clipRule="evenodd" + d="M519.901 60.705L662.24 1.77996V0.70483L2129.06 0.70496V3.70496L665.321 3.70483L521.602 63.201V63.705H520.384L519.084 64.2433L518.745 63.705L0.996826 63.705V60.705L519.901 60.705Z" + fill="#0C9794" + /> + </svg> + </div> + {accordiondata.map((data, index) => ( + <Accordion + key={index} + serial={data.serial} + question={data.question} + answer={data.answer} + /> + ))} + </div> + </div> + </> + + ); +} diff --git a/tailwind.config.js b/tailwind.config.js index 53cdc0a..5293746 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -4,11 +4,15 @@ module.exports = { "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", "./src/components/**/*.{js,ts,jsx,tsx,mdx}", "./src/app/**/*.{js,ts,jsx,tsx,mdx}", + "*", ], theme: { extend: { colors: { navbg: "rgba(18, 18, 18, 0.42)", + customBg:"#130d1d", + boxBg:"#1f1a27", + answerBg:"#3f3949" }, backdropBlur: { sm: "5px",