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

Enhance/code of conduct #308

Merged
merged 3 commits into from
Oct 29, 2024
Merged

Enhance/code of conduct #308

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f6f9ed6
fixed mail text
Sawan-Kushwah Oct 28, 2024
522c889
Merge branch 'main' of github.com:Bitbox-Connect/Bitbox
Sawan-Kushwah Oct 28, 2024
35abffe
added beautiful code of conduct page with improve code structure
Sawan-Kushwah Oct 28, 2024
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
131 changes: 77 additions & 54 deletions client/src/component/Footers/Codeofconduct.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,62 +1,85 @@
import '../../css/Main.css';
import PropTypes from 'prop-types';

const CodeOfConduct = () => {

const codeOfConductItems = [
{
id: 1,
title: "Respect and Courtesy",
content:
"Respect the opinions of others and refrain from using offensive language. Treat fellow participants with courtesy and respect, regardless of their background.",
},
{
id: 2,
title: "Punctuality",
content:
"Punctuality is key. Ensure you are present on time for all scheduled activities. Late arrivals may result in missed opportunities and important announcements.",
},
{
id: 3,
title: "Guideline Adherence",
content:
"Follow the guidelines for participation strictly. Any misconduct or deviation from the rules may lead to disqualification from the event or program.",
},
{
id: 4,
title: "Positive Attitude",
content:
"Maintain a constructive and positive attitude throughout the program. We encourage participants to collaborate and learn from each other.",
},
{
id: 5,
title: "Confidentiality",
content:
"Do not share sensitive or confidential information of the program without proper authorization. Be mindful of the security and privacy of data.",
},

];


const CodeOfConduct = (props) => {
return (
<div>
<div className="container codeofconduct-container">
<h2 className='text-center Heading-Page my-3'>Code Of Conduct</h2>
<div className="cont-box">
<div className="contents">
<div className="position-relative m-2 p-2 fs-5">
Once you have created a username for yourself, maintain the same throughout the program. If any participant changes his/her username, then the username which is not registered with the organizing committee will cease to be a part of the program.
<span className="position-absolute top-0 start-0 translate-middle badge rounded-pill bg-primary border">
1
</span>
</div>
</div>
</div>
<div className="cont-box">
<div className="contents">
<div className="position-relative m-2 p-2 fs-5">
Once you have created a username for yourself, maintain the same throughout the program. If any participant changes his/her username, then the username which is not registered with the organizing committee will cease to be a part of the program.
<span className="position-absolute top-0 start-0 translate-middle badge rounded-pill bg-primary border">
2
</span>
</div>
</div>
</div>
<div className="cont-box">
<div className="contents">
<div className="position-relative m-2 p-2 fs-5">
Once you have created a username for yourself, maintain the same throughout the program. If any participant changes his/her username, then the username which is not registered with the organizing committee will cease to be a part of the program.
<span className="position-absolute top-0 start-0 translate-middle badge rounded-pill bg-primary border">
3
</span>
</div>
</div>
</div>
<div className="cont-box">
<div className="contents ">
<div className="position-relative m-2 p-2 fs-5">
Once you have created a username for yourself, maintain the same throughout the program. If any participant changes his/her username, then the username which is not registered with the organizing committee will cease to be a part of the program.
<span className="position-absolute top-0 start-0 translate-middle badge rounded-pill bg-primary border">
4
</span>
</div>
</div>
</div>
<div className="cont-box">
<div className="contents ">
<div className="position-relative p-2 fs-5">
Once you have created a username for yourself, maintain the same throughout the program. If any participant changes his/her username, then the username which is not registered with the organizing committee will cease to be a part of the program.
<span className="position-absolute top-0 start-0 translate-middle badge rounded-pill bg-primary border">
5
</span>
<div className={`min-h-screen mt-16 py-10 ${props.mode === 'dark' ? 'bg-gray-900' : 'bg-gray-100'}`}>
<div className="container mx-auto px-4 sm:px-8 lg:px-16">
{/* Main Section Heading */}
<h1 className={`text-center text-4xl font-bold mb-6 ${props.mode === 'dark' ? 'text-white' : 'text-gray-900'}`}>
Program Code of Conduct
</h1>
{/* Subtitle */}
<h2 className={`text-center text-2xl font-semibold mb-8 ${props.mode === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
Please adhere to the following guidelines for a smooth and productive event
</h2>

{/* Flex container for the blocks */}
<div className="flex flex-wrap -mx-4">
{codeOfConductItems.map((item) => (
<div key={item.id} className={`w-full md:w-1/2 px-4 mb-8 ${item.id === 5 ? 'w-full' : 'w-1/2'}`}>
<div
className={`relative rounded-lg p-6 shadow-lg transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-101 cursor-pointer
${props.mode === 'dark' ? 'bg-gray-800 hover:bg-gray-700 hover:shadow-2xl' : 'bg-white hover:bg-gray-50 hover:shadow-2xl'}`}
>
{/* Item Heading */}
<h3 className={`text-xl font-semibold mb-2 ${props.mode === 'dark' ? 'text-white' : 'text-gray-900'}`}>
{item.title}
</h3>
{/* Item Content */}
<p
className={`text-lg leading-relaxed ${props.mode === 'dark' ? 'text-gray-300' : 'text-gray-700'
}`}
>
{item.content}
</p>
{/* Badge */}
<span
className={`absolute top-0 left-0 -translate-x-1/2 -translate-y-1/2 rounded-full w-10 h-10 flex items-center justify-center border-2 shadow-md ${props.mode === 'dark' ? 'bg-blue-500 text-white border-gray-800' : 'bg-blue-600 text-white border-white'
}`}
>
{item.id}
</span>
</div>
</div>
</div>
))}
</div>

</div>
</div>
)
Expand All @@ -65,6 +88,6 @@ const CodeOfConduct = () => {
CodeOfConduct.propTypes = {
showAlert: PropTypes.func,
mode: PropTypes.string,
};
};

export default CodeOfConduct
Loading