Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

initial commit #58

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

initial commit #58

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
3 changes: 3 additions & 0 deletions src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,4 +66,7 @@ html{
::-webkit-scrollbar-thumb:hover {
background: #f769f7;
transition: background 0.3s ease-in-out;
}
.ReactCollapse--collapse {
transition: height 300ms;
}
4 changes: 2 additions & 2 deletions src/app/page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -23,7 +23,7 @@ export default function Home() {
<Sponsor />
<Partners />
<div className="relative">
<Accordion />
<Faq/>
<Footer />
</div>
</>
Expand Down
139 changes: 41 additions & 98 deletions src/components/FAQs/Accordion.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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="wrapper w-screen justify-center items-center bg-center text-white bg-cover mb-16 " id="faq" >
<div className="accordion">
<Title title={"FAQ"} className={"px-10 py-5"}/>
<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;
86 changes: 86 additions & 0 deletions src/components/FAQs/Faq.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
</>

);
}
4 changes: 4 additions & 0 deletions tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down