Soma's Updated Work/Branch

package.json

@@ -14,6 +14,8 @@
     "react": "^17.0.2",
     "react-bootstrap": "^2.4.0",
     "react-dom": "^17.0.2",
+    "react-markdown": "^8.0.3",
+    "react-player": "^2.10.1",
     "react-router-dom": "^6.2.2",
     "react-scripts": "5.0.0",
     "sass": "^1.49.10",

src/App.js

@@ -9,7 +9,7 @@ import MiniVents from './minivents-page/MiniVents';
 import Labs from './labs-page/Labs';
 import FAQ from './faq-page/FAQ';
 import FilmContest from './filmcontest-page/FilmContest';
-import "monday-ui-react-core/dist/main.css"
+import Volunteer from './volunteer-page/Volunteer';
 
 function App() {
   return (
@@ -24,6 +24,7 @@ function App() {
         <Route path="faq" element={<FAQ />} />
         <Route path="careers" element={<Careers />} />
         <Route path="filmcontest" element={<FilmContest />} />
+        <Route path="volunteer" element={<Volunteer />} />
       </Routes>
       {/* <Home />
       <Contact />

src/careers-page/Careers.js

@@ -1,8 +1,30 @@
 import React, { Component } from 'react';
+import ReactMarkdown from "react-markdown";
+import Example from './Example.md'
+import NavbarGlobal from '../global-components/NavbarGlobal';
+import "./Careers.scss";
 
 class Careers extends Component {
+    constructor(props) {
+        super(props)
+        this.state = { content : "Hello"};
+    }
+
+    componentDidMount(){
+        fetch(Example)
+          .then((res) => res.text())
+          .then((text) => {
+            console.log(this.state.content)
+            this.setState({content: text});
+            console.log(this.state.content)
+          });
+    };
+
     render() {
-        return <div>Careers</div>
+        return <div>
+                    <NavbarGlobal />
+                    <ReactMarkdown className="carrer-container" children={this.state.content} />
+                </div>
     }
 }
 export default Careers;

src/careers-page/Careers.scss

@@ -0,0 +1,8 @@
+.carrer-container{
+   text-align: left;
+   padding-left: 10%;
+   padding-right: 10%;
+   font-family: 'Poppins';
+   padding-top: 50px;
+   background: linear-gradient(90deg, #E9AFFF 0%, #FFEDC4 98.65%);
+}

src/careers-page/Example.md

@@ -0,0 +1,88 @@
+# Basics of Markdown
+Markdown is the most popular markup language that can be used to format documents. It can be used to create *websites*,*ebooks*,*email*,*chats in discussions forums*.
+
+## Topics
+1. Paragraphs 
+
+    MD expects a full line space to show texts in a different line else it joins text in the same line.
+2.  Text decorations
+
+    MD can write **bold** texts, ~~italiic~~ *italic*  texts
+3. Headings
+    No of #'s represent the type of heading. Github will automatically add id's to headings, so the text will be automatically linked. 
+    ## This is h2
+    ### This is h3
+4. Links
+
+   [My Github](https://github.com/bhupendra1011 "all repos") account.[Bhupendra][1] github repo.
+
+5. Images
+    Images can be used just like links. ![Alt txt](img url)
+
+    !["cat Img"](http://placekitten.com/200/200)
+
+    Thumbnails images can also be used which links to larger image 
+    [<img src="http://placekitten.com/20/20">](http://placekitten.com/200/200)
+
+6. Ordered and Unordered Lists
+
+    Coding Best Practices:
+
+    * Keep code DRY
+    * Writing Unit Test cases
+    * Checking cross-browser support
+
+    Steps to merge branch:
+
+    1. Create a branch from feature
+    1. commit your changes
+    1. push your changes
+    1. raise a pull request
+
+7. Code Blocks
+
+    This is super helpful when posting any code snippet
+
+
+    ```js
+    const fn = () => alert("some fn");
+    ```
+
+
+
+
+    ```css
+    .hide {
+        display:none
+    }
+    ```
+
+
+    Also can show code difference
+
+
+    ```diff
+    var x = 10;
+    - const counter = 0;
+    + let counter = 0
+    ```
+
+
+
+8. Tables 
+
+    Tables can be generated with headings and text alignment option
+
+    |Stocks|Price|
+    |:-----:|------:|
+    |TCS|230|
+    |YES Bank|500|
+
+
+
+Cool Tips 
+
+ * [Grammarly](https://marketplace.visualstudio.com/items?itemName=znck.grammarly) extension can eliminate typo and grammar mistakes
+ * [ScreenTOGif](https://www.screentogif.com/) to record videos in GIF format
+ * Upload GIF's to [giphy](https://giphy.com/) to embed them into blog posts.
+ * [Stackedit](https://stackedit.io/) for Markdown Editing in Browser.

src/faq-page/FAQ.js

@@ -1,8 +1,96 @@
 import React, { Component } from 'react';
+import { Accordion } from 'react-bootstrap';
+import NavbarGlobal from '../global-components/NavbarGlobal';
+import './FAQ.scss'
+import FAQImage from '../images/FAQImage.jpg'
+
 
 class FAQ extends Component {
     render() {
-        return <div>FAQS</div>
+        return <div>
+            <NavbarGlobal/>
+            <div className='faq-header'>
+                <div className="faq-header-title">Frequently Asked Questions</div>
+                <img className="faq-image" src={FAQImage} />
+            </div>
+            <div className='faq-general'>
+                <div className='faq-general-heading'>General</div>
+                <div className='faq-general-questions'>
+                    <Accordion>
+                        <Accordion.Item eventKey="0">
+                            <Accordion.Header>When and where is the next edition of Scambi Festival taking place?</Accordion.Header>
+                            <Accordion.Body>
+                            Scambi Festival 2022 is taking place in the neighborhood of Pigna, Sanremo, Italy, from the 25th to the 28th of August 2022.
+                            </Accordion.Body>
+                        </Accordion.Item>
+                        <Accordion.Item eventKey="1">
+                            <Accordion.Header>
+                            I already know I cannot be in Sanremo from the 25th to the 28th of August 2022. Will I be able to follow the meetings online?
+                            </Accordion.Header>
+                            <Accordion.Body>
+                            Unfortunately, not. Virtual meetings deny the very definition of what we are working on. Physicality is a key factor in the 
+                            human exchange and mutual growth we are pursuing.
+                            </Accordion.Body>
+                        </Accordion.Item>
+                        <Accordion.Item eventKey="2">
+                            <Accordion.Header>
+                            Can’t wait to be there! Are there any accommodation solutions?
+                            </Accordion.Header>
+                            <Accordion.Body>
+                            It is too soon to know for sure, but we are working on offering low-cost accommodation solution to allow the 
+                            participation of everyone, no matter if local or coming from Tatooine.
+                            </Accordion.Body>
+                        </Accordion.Item>
+                        <Accordion.Item eventKey="3">
+                            <Accordion.Header>
+                            How much does the ticket cost?
+                            </Accordion.Header>
+                            <Accordion.Body>
+                            Nothing. Scambi aims to be accessible to everyone, literally: there are no age limits, no activities inaccessible
+                            to people with disabilities, and, of course, there is no fee.
+                            </Accordion.Body>
+                        </Accordion.Item>
+                        <Accordion.Item eventKey="4">
+                            <Accordion.Header>
+                            How cool! Can I work with you?
+                            </Accordion.Header>
+                            <Accordion.Body>
+                            We are always thrilled to welcome new people in our team! 
+                            Everything you need to know about this is <a href='/careers'>here</a>.
+                            </Accordion.Body>
+                        </Accordion.Item>
+                        <Accordion.Item eventKey="5">
+                            <Accordion.Header>
+                            Are the festival events being translated in English, too?
+                            </Accordion.Header>
+                            <Accordion.Body>
+                            Last year, they were not. We are working hard to ensure language will not be an 
+                            issue next time.
+                            </Accordion.Body>
+                        </Accordion.Item>
+                        <Accordion.Item eventKey="6">
+                            <Accordion.Header>
+                            How can I keep updated about your activities?
+                            </Accordion.Header>
+                            <Accordion.Body>
+                            There are many ways: you can subscribe to our newsletter, follow our social media 
+                            pages or directly contact us.
+                            </Accordion.Body>
+                        </Accordion.Item>
+                        <Accordion.Item eventKey="7">
+                            <Accordion.Header>
+                            I have a question still waiting for an answer!
+                            </Accordion.Header>
+                            <Accordion.Body>
+                            We are not as clever as Sheldon Cooper, but we promise to do our best to help you. 
+                            Either write a comment below, <a href='mailto:staff@scambi.org'>write us an email</a>, 
+                            or send us a message on <a href ='https://instagram.com/scambifestival'>social media</a>.
+                            </Accordion.Body>
+                        </Accordion.Item>
+                    </Accordion>
+                </div>
+            </div>
+        </div>
     }
 }
 

src/faq-page/FAQ.scss

@@ -0,0 +1,103 @@
+.faq-header{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    background: linear-gradient(90deg, #E9AFFF 0%, #FFEDC4 98.65%);
+    padding-top: 50px;
+    bottom: 50px;
+    z-index: -1;
+    position: relative;
+    .faq-header-title{
+        font-family: 'Londrina Solid';
+        font-weight: 400;
+        font-size: 50px;
+        line-height: 76px;
+        display: flex;
+        align-items: center;
+        text-align: center;
+        color: #323338;
+        // width: 50vw;
+    }
+    .faq-image{
+        width: 0%;
+    }
+}
+
+.faq-general{
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    padding-left: 15%;
+    padding-right: 15%;
+    .faq-general-heading{
+        font-family: 'Poppins';
+        font-weight: 600;
+        font-size: 24px;
+        line-height: 36px;
+        color: #000000;
+        display: flex;
+        justify-content: flex-start;
+        margin-bottom: 25px;
+    }
+    .faq-general-questions{
+        width: 100%;
+        font-family: 'Poppins';
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 24px;
+        color: #323338;
+    }
+}
+
+@media (min-width: 795px){
+    .faq-header{
+        bottom: 50px;
+        z-index: -1;
+        position: relative;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        background: linear-gradient(90deg, #E9AFFF 0%, #FFEDC4 98.65%);
+        .faq-header-title{
+            font-family: 'Londrina Solid';
+            font-weight: 400;
+            font-size: 64px;
+            line-height: 76px;
+            display: flex;
+            align-items: center;
+            text-align: center;
+            color: #323338;
+            width: 50vw;
+        }
+        .faq-image{
+            width: 50vw;
+        }
+    }
+
+    .faq-general{
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        padding-left: 15%;
+        padding-right: 15%;
+        padding-top: 0px;
+        .faq-general-heading{
+            font-family: 'Poppins';
+            font-weight: 600;
+            font-size: 24px;
+            line-height: 36px;
+            color: #000000;
+            display: flex;
+            justify-content: flex-start;
+            margin-bottom: 25px;
+        }
+        .faq-general-questions{
+            width: 100%;
+            font-family: 'Poppins';
+            font-weight: 400;
+            font-size: 16px;
+            line-height: 24px;
+            color: #323338;
+        }
+    }
+}

src/global-components/NavbarGlobal.js

@@ -22,9 +22,14 @@ class NavbarGlobal extends Component {
                                 <NavDropdown.Item href="/filmcontest">Film Contest</NavDropdown.Item>
                                 <NavDropdown.Item href="/minivents">Minivents</NavDropdown.Item>
                             </NavDropdown>
+                            <NavDropdown title="Support" id="basic-nav-dropdown">
+                                <NavDropdown.Item href="/donate">Donate</NavDropdown.Item>
+                                <NavDropdown.Item href="/volunteer">Volunteer</NavDropdown.Item>
+                                <NavDropdown.Item href="/join-team">Join Team</NavDropdown.Item>
+                            </NavDropdown>
                             <Nav.Link href="/blog" id="navbar-link">Blog</Nav.Link>
                             <Nav.Link href="/faq" id="navbar-link">FAQ</Nav.Link>
-                            <Nav.Link href="/rsvp" className='rsvp-button' id="navbar-link">RSVP</Nav.Link>
+                            <a href="/rsvp" className='rsvp-button'>Attend</a>
                         <NavDropdown title="Language" id="basic-nav-dropdown" className="justify-content-end">
                                 <NavDropdown.Item href="">English</NavDropdown.Item>
                                 <NavDropdown.Item href="">Italian</NavDropdown.Item>