Skip to content
This repository has been archived by the owner on Dec 17, 2023. It is now read-only.

Commit

Permalink
moved eventbadging content to its component, created placeholder home…
Browse files Browse the repository at this point in the history 
…page
  • Loading branch information
@kaxada
kaxada committed Nov 15, 2023
1 parent 1ad1273 commit 7ddbcdc
Show file tree
Hide file tree
Showing 4 changed files with 155 additions and 106 deletions.
110 changes: 104 additions & 6 deletions src/pages/EventBadging/EventBadging.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,111 @@
import { SubmitEvent, Header, Footer } from "../../components";
import React from "react";
import { Header, Footer } from "../../components";
import "./EventBadging.scss";
import { Link } from "react-router-dom";

import {
pendingBadge,
passingBadge,
silverBadge,
goldBadge,
eventBadging,
DEIBadgingLogo,
award,
heroOne,
} from "../../assets/images";

import { Faq } from "../../components";
import { faqData } from "../../components/faq/FAQData";

const EventBadging = () => {
return (
<>
<Header pathName="Event Badging" />
<h1>Apply For Badge</h1>
<SubmitEvent />
<div className="home">
<Header pathName="Home" />
<div
className="hero-section"
style={{
backgroundImage: `url(${heroOne})`,
backgroundRepeat: "no-repeat",
backgroundSize: "cover",
}}
>
<div className="hero-section-text">
<div className="hero-main">
<img src={DEIBadgingLogo} alt="DEI Badging Logo" />
<div className="hero-main-text">
<p>
The primary motivation to apply for a CHAOSS D&I event or
project Badge, is for the badge itself! The awarded event or
project can show the open source community that they foster
healthy D&I practices with a CHAOSS badge.{" "}
</p>
</div>
<div className="hero-main-buttons">
<button className="button badged-event" type="button">
<Link className="link" to="/badged-events">
Badged Events
</Link>
</button>

<button className="button apply" type="button">
<Link className="link" to="/apply">
Apply for a Badge
</Link>
</button>
</div>
</div>
<div className="hero-logo">
<img src={award} alt="rect" />
</div>
</div>
</div>
<div className="section-4">
<div className="badging-level">
<h2>Badging Levels</h2>
<p>
The primary motivation to apply for a CHAOSS D&I event or project
Badge, is for the badge itself! The awarded event or project can
show the open source community that they foster healthy D&I
practices with a CHAOSS badge{" "}
</p>
</div>
<div className="badging-image-container">
<img src={goldBadge} alt="gold" />
<img src={silverBadge} alt="gold" />
<img src={passingBadge} alt="gold" />
<img src={pendingBadge} alt="gold" />
</div>
</div>
<div className="section-5 ">
<div className="event-badging">
<h2>Event Badging</h2>
<p>
The goal of the Diversity & Inclusion Badging Program is to
encourage events to obtain D&I badges for reasons of leadership,
self-reflection, and self-improvement on issues critical to building
the Internet as a social good.
</p>
</div>

<div className="event-badging-image">
<img src={eventBadging} alt="Event badging" />
</div>
</div>
<div className="section-6">
<div className="faq-container" id="faqs">
<div className="title">
<h2>FAQ</h2>
</div>

<div className="faqs">
{faqData.map(({ question, answer }, id) => {
return <Faq key={id} question={question} answer={answer} />;
})}
</div>
</div>
</div>
<Footer />
</>
</div>
);
};

Expand Down
4 changes: 4 additions & 0 deletions src/pages/Home/Home.scss → src/pages/EventBadging/EventBadging.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,10 @@ $background-color_1: transparent;
display: flex;
}

.home {
display: block;
}

a {
text-decoration: none;
color: $color_1;
Expand Down
34 changes: 34 additions & 0 deletions src/pages/Home/Home.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
.homepage {
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.button-container {
display: flex;
flex-direction: column;
}

.button {
margin: 5px;
padding: 10px 20px;
background-color: #3498db;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}

.button:hover {
background-color: #2980b9;
}

@media (width >= 768px) {
.button-container {
flex-direction: row;
}
}
113 changes: 13 additions & 100 deletions src/pages/Home/Home.js
View file
Original file line number Diff line number Diff line change
@@ -1,111 +1,24 @@
import React from "react";
import { Header, Footer } from "../../components";
import "./Home.scss";
import { Link } from "react-router-dom";

import {
pendingBadge,
passingBadge,
silverBadge,
goldBadge,
eventBadging,
DEIBadgingLogo,
award,
heroOne,
} from "../../assets/images";

import { Faq } from "../../components";
import { faqData } from "../../components/faq/FAQData";
import "./Home.css";
import { Header, Footer } from "../../components";

const Home = () => {
return (
<div className="home">
<Header pathName="Home" />
<div
className="hero-section"
style={{
backgroundImage: `url(${heroOne})`,
backgroundRepeat: "no-repeat",
backgroundSize: "cover",
}}
>
<div className="hero-section-text">
<div className="hero-main">
<img src={DEIBadgingLogo} alt="DEI Badging Logo" />
<div className="hero-main-text">
<p>
The primary motivation to apply for a CHAOSS D&I event or
project Badge, is for the badge itself! The awarded event or
project can show the open source community that they foster
healthy D&I practices with a CHAOSS badge.{" "}
</p>
</div>
<div className="hero-main-buttons">
<button className="button badged-event" type="button">
<Link className="link" to="/badged-events">
Badged Events
</Link>
</button>

<button className="button apply" type="button">
<Link className="link" to="/apply">
Apply for a Badge
</Link>
</button>
</div>
</div>
<div className="hero-logo">
<img src={award} alt="rect" />
</div>
</div>
</div>
<div className="section-4">
<div className="badging-level">
<h2>Badging Levels</h2>
<p>
The primary motivation to apply for a CHAOSS D&I event or project
Badge, is for the badge itself! The awarded event or project can
show the open source community that they foster healthy D&I
practices with a CHAOSS badge{" "}
</p>
</div>
<div className="badging-image-container">
<img src={goldBadge} alt="gold" />
<img src={silverBadge} alt="gold" />
<img src={passingBadge} alt="gold" />
<img src={pendingBadge} alt="gold" />
</div>
</div>
<div className="section-5 ">
<div className="event-badging">
<h2>Event Badging</h2>
<p>
The goal of the Diversity & Inclusion Badging Program is to
encourage events to obtain D&I badges for reasons of leadership,
self-reflection, and self-improvement on issues critical to building
the Internet as a social good.
</p>
</div>

<div className="event-badging-image">
<img src={eventBadging} alt="Event badging" />
</div>
</div>
<div className="section-6">
<div className="faq-container" id="faqs">
<div className="title">
<h2>FAQ</h2>
</div>

<div className="faqs">
{faqData.map(({ question, answer }, id) => {
return <Faq key={id} question={question} answer={answer} />;
})}
</div>
<>
<Header />
<div className="homepage">
<div className="button-container">
<button className="button">
<Link to="/event">Event Badging</Link>
</button>
<button className="button">
<Link to="/project">Project Badging</Link>
</button>
</div>
</div>
<Footer />
</div>
</>
);
};

Expand Down

0 comments on commit 7ddbcdc

Please sign in to comment.