<file_sep>import React from "react";
import './Schedule.css'
import Footer from "../../components/Footer/Footer";
import foto from '../../assets/fotos/IGREJA.jpg'
import { height } from "@material-ui/system";


export default function Schedule(props) {
    return (
        <div className='containerSchedule'>
            <h1 className='titleSchedule'>PROGRAMAÇÃO</h1>


            <div className='mainSchedule'>
                <p>Confira nossa programação e fique por dentro das nossas novidades!</p>
                <a src='www.google.com.br' target='_blank'><img className='imgSchedule' src={foto} /></a>
            </div>


            <Footer />
        </div>
    )
}<file_sep>import React from "react";
import './Footer.css'
import wpp from '../../assets/images/sociaMedias/wpp.svg'
import insta from '../../assets/images/sociaMedias/insta.svg'
import youtube from '../../assets/images/sociaMedias/youtube.svg'
import facebook from '../../assets/images/sociaMedias/face.svg'

export default function Footer(props) {
    return (
        <div className='containerFooter'>
            <a href='' target='_blank'><img className='iconSocialFooter' src={wpp} /></a>
            <a href='https://www.instagram.com/idevangelho/?utm_medium=copy_link' target='_blank'><img className='iconSocialFooter' src={insta} /></a>
            <a href='https://www.youtube.com/channel/UCvm55wgtIh-CwKxIGs5FgfA' target='_blank'><img className='iconSocialFooter' src={youtube} /></a>
            <a href='https://www.facebook.com/search/top?q=igreja%20do%20evangelho' target='_blank'><img className='iconSocialFooter' src={facebook} /></a>
        </div>
    );
}<file_sep>import React from 'react'

export default function StatementFaith(props) {
    return (
        <div>
            <h1>Declaração de Fé</h1>
        </div>
    );
}<file_sep>import React from 'react'

export default function AboutUs(props) {
    return (
        <div>
            <h1>Qeum somos</h1>
        </div>
    );
}<file_sep>import React from 'react'

export default function Purposes(props) {
    return (
        <div>
            <h1>Propósitos</h1>
        </div>
    );
}<file_sep>import React from 'react'

export default function Ministries(props) {
    return (
        <div>
            <h1>Ministérios</h1>
        </div>
    );
}<file_sep>import React, { useState } from "react";
import CircularProgress from '@material-ui/core/CircularProgress/CircularProgress';


export default function Loading(props) {

    return (
        <div style={{ position: 'absolute', display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100vh', backgroundColor: '#252526', }}>
            <CircularProgress style={{ color: 'white' }} />
        </div>
    );
}<file_sep>import React from 'react'
import './PrayForMe.css'
import Footer from '../../components/Footer/Footer';
import TextField from '@material-ui/core/TextField/TextField';


export default function PrayForMe(props) {



    return (
        <div className='containerPrayforMe'>
            <h1>ORE POR MIM</h1>
            <div className='mainPrayforMe'>
                <p>Precisa de oração? Preencha o formulário com seu pedido que vamos orar por você!</p>

                <TextField style={{ color: 'white' }} id="standard-basic" label="Nome" variant="standard" />
                <TextField id="standard-basic" label="Contato" variant="standard" />
                <TextField id="standard-basic" label="Pedido" variant="standard" />


                <label>
                    <p>Gostaria de ser contatado sobre o pedido?</p>
                    <div>
                        <input type='radio' name='pedidoContato' id='sim' checked />
                        <label for='sim'>Sim</label>
                    </div>
                    <div>
                        <input type='radio' name='pedidoContato' id='nao' />
                        <label for='nao'>Não</label>
                    </div>
                </label>

                <button>Enviar pedido</button>

                <h2>SALA DE ORAÇÃO</h2>
                <p>Sala online às quartas-feiras, às 21h. Acesse o link e participe ao vivo com nosso time do Ministério de Intercessão. Participe e seja abençoado!</p>
                <button>Acessar a sala</button>
            </div>
            <Footer />
        </div>
    );
}<file_sep>import React from 'react'
import './Header.css'
import logo from '../../assets/images/whiteLogo.svg'
import Menu from '../Menu/Menu'
import { Link } from 'react-router-dom'

const styleLogo = {
    width: '50px',
    zIndex: 50,
    paddingBottom: '1.1rem',
    paddingTop: '6px',
    paddingLeft: '10px',
    paddingRight: '6px ',
}

export default function Header(props) {
    return (
        <div className='containerHeader'>
            <Link to='/'><img src={logo} style={styleLogo} /></Link>
            <Menu />
        </div>
    );
}<file_sep>import React, { useState } from "react";
import './Hamburguer.css';

export default function Hamburguer(props) {

    const [isOpen, setIsOpen] = useState(false);

    return (
        <div className='containerHamburguer'>

            <ul className='itemsHamburguer'>
                <li>X</li>
                <li>Home</li>
                <li>Quem Somos</li>
                <li>Propósitos</li>
                <li>Declaração de Fé</li>
                <li>Ministérios</li>
                <li>Contatos</li>
            </ul>
        </div>
    )
}<file_sep>import React, { useState, useEffect } from "react";
import './Celebrations.css'
import Footer from "../../components/Footer/Footer";
import Loading from "../../components/Loading/Loading";

const objTeste = [
    { thumb: 'https://d1csarkz8obe9u.cloudfront.net/posterpreviews/church-youtube-thumbnail-template-design-7beb6c33baf72b81f4246accf906252c_screen.jpg?ts=1592922309', url: 'https://www.youtube.com/c/IgrejadoEvangelho/videos' },
    { thumb: 'https://d1csarkz8obe9u.cloudfront.net/posterpreviews/church-youtube-thumbnail-template-design-ed78d8ed72fd4763927211913ea989c3_screen.jpg?ts=1592504072', url: 'https://www.youtube.com/c/IgrejadoEvangelho/videos' },
    { thumb: 'https://d1csarkz8obe9u.cloudfront.net/posterpreviews/church-thumbnail-template-youtube-design-acd3f619ef8bbb7e02d933cbfb3e3128_screen.jpg?ts=1591258964', url: 'https://www.youtube.com/c/IgrejadoEvangelho/videos' },
    { thumb: 'https://d1csarkz8obe9u.cloudfront.net/posterpreviews/church-youtube-thumbnail-template-design-93e4a1c53fff4a23b6b75a7dbbd549ab_screen.jpg?ts=1591269057', url: 'https://www.youtube.com/c/IgrejadoEvangelho/videos' },
    { thumb: 'https://d1csarkz8obe9u.cloudfront.net/posterpreviews/church-youtube-thumbnail-template-design-1d68bc23861feca22ad0231618dfdda3_screen.jpg?ts=1592567148', url: 'https://www.youtube.com/c/IgrejadoEvangelho/videos' },
    { thumb: 'https://d1csarkz8obe9u.cloudfront.net/posterpreviews/church-youtube-thumbnail-template-design-7beb6c33baf72b81f4246accf906252c_screen.jpg?ts=1592922309', url: 'https://www.youtube.com/c/IgrejadoEvangelho/videos' },
    { thumb: 'https://d1csarkz8obe9u.cloudfront.net/posterpreviews/church-youtube-thumbnail-template-design-ed78d8ed72fd4763927211913ea989c3_screen.jpg?ts=1592504072', url: 'https://www.youtube.com/c/IgrejadoEvangelho/videos' },
    { thumb: 'https://d1csarkz8obe9u.cloudfront.net/posterpreviews/church-thumbnail-template-youtube-design-acd3f619ef8bbb7e02d933cbfb3e3128_screen.jpg?ts=1591258964', url: 'https://www.youtube.com/c/IgrejadoEvangelho/videos' },
    { thumb: 'https://d1csarkz8obe9u.cloudfront.net/posterpreviews/church-youtube-thumbnail-template-design-93e4a1c53fff4a23b6b75a7dbbd549ab_screen.jpg?ts=1591269057', url: 'https://www.youtube.com/c/IgrejadoEvangelho/videos' },
    { thumb: 'https://d1csarkz8obe9u.cloudfront.net/posterpreviews/church-youtube-thumbnail-template-design-1d68bc23861feca22ad0231618dfdda3_screen.jpg?ts=1592567148', url: 'https://www.youtube.com/c/IgrejadoEvangelho/videos' },
]

export default function Celebration(props) {

    const [list, setList] = useState([])

    useEffect(() => {
        setList(objTeste)
    }, [])


    return (
        <div className='containerCelebration'>
            <h1 className='titleCelebration'>CELEBRAÇÕES</h1>

            {list.length === 0 && typeof list.url === "string" ?
                <Loading />
                :
                <>
                    <div className='mainCelebration'>
                        <p> {list.length === 0 ? 'Não há vídeos dísponiveis :/' : 'Confira nossa programação e fique por dentro das nossas novidades!'}</p>

                        {list.map(item => (
                            <a href={item.url} target='_blank'> <img className='imgCelebration' src={item.thumb} /> </a>
                        ))}

                    </div>


                    <Footer />
                </>

            }

        </div>
    )
}<file_sep>import React, { useState, useEffect } from "react";
import './Conections.css'
import Footer from "../../components/Footer/Footer";
import Loading from '../../components/Loading/Loading';

const objTeste = [
    { title: 'Geral', date: 'Reunião quinta ás 20h', resp: 'Pr.Ildenor José', url: 'www.google.com.br' },
    { title: 'Geral', date: 'Reunião quinta ás 20h', resp: 'Pr.Ildenor José', url: 'www.google.com.br' },
    { title: 'Geral', date: 'Reunião quinta ás 20h', resp: 'Pr.Ildenor José', url: 'www.google.com.br' },
    { title: 'Geral', date: 'Reunião quinta ás 20h', resp: 'Pr.Ildenor José', url: 'www.google.com.br' },
    { title: 'Geral', date: 'Reunião quinta ás 20h', resp: 'Pr.Ildenor José', url: 'www.google.com.br' },
    { title: 'Geral', date: 'Reunião quinta ás 20h', resp: 'Pr.Ildenor José', url: 'www.google.com.br' },
    { title: 'Geral', date: 'Reunião quinta ás 20h', resp: 'Pr.Ildenor José', url: 'www.google.com.br' },
]

export default function Conections(props) {

    const [list, setList] = useState([])

    useEffect(() => {
        setList(objTeste)
    }, [])


    return (
        <div className='containerConections'>
            <h1 className='titleConections'>COLLEGE</h1>

            <div className='mainConections'>

                {list.length === 0 && typeof list.url === "string" ?
                    <Loading />
                    :
                    <>
                        <p>Nossas conexões acontecem, atualmente, online por videoconferências, em sua maioria, as quinta-feiras às 20h.
                            É nas conexões que nos conectamos para aprendermos mais sobre Jesus e Sua Palavra juntos em comunhão com um pequeno grupo.
                            Participe e  venha pertencer a uma das nossas conexões!<br />
                            Escolha abaixo a que mais se adequa a você:
                        </p>
                        {list.map((item, i) => (
                            <div className='descriptionConection'>
                                <h3>{`Conexão ${i + 1}`}</h3>
                                <p>{item.title}</p>
                                <p>{item.date}</p>
                                <p>{item.resp}</p>
                                <a style={{ textDecoration: 'none' }} href={item.url} target='_blank'><p className='btnConection'>Link da sala</p></a>
                            </div>
                        ))}

                    </>

                }



            </div>


            <Footer />


        </div>
    )
}<file_sep>import React, { useState, useEffect } from "react";
import './College.css'
import Footer from "../../components/Footer/Footer";
import Loading from '../../components/Loading/Loading';

const objTeste = [
    { title: 'Melhor Decisção', modules: ['Quém é Deus?', 'Quem sou eu?', 'Por que estou aqui?'], beginDate: '01/01/2021', endDate: '30/01/2021', hoursCourse: '15h', url: 'www.google.com.br', description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. " },
    { title: 'DNA', modules: ['Quém é Deus?', 'Quem sou eu?', 'Por que estou aqui?'], beginDate: '01/01/2021', endDate: '30/01/2021', hoursCourse: '15h', url: 'www.google.com.br', description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. " },
    { title: 'Quero Servir', modules: ['Quém é Deus?', 'Quem sou eu?', 'Por que estou aqui?'], beginDate: '01/01/2021', endDate: '30/01/2021', hoursCourse: '15h', url: 'www.google.com.br', description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. " },
    { title: 'Cultura da Honra', modules: ['Quém é Deus?', 'Quem sou eu?', 'Por que estou aqui?'], beginDate: '01/01/2021', endDate: '30/01/2021', hoursCourse: '15h', url: 'www.google.com.br', description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. " },
    { title: 'Tempo a sós com Deus', modules: ['Quém é Deus?', 'Quem sou eu?', 'Por que estou aqui?'], beginDate: '01/01/2021', endDate: '30/01/2021', hoursCourse: '15h', url: 'www.google.com.br', description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. " },
    { title: 'Vida Abençoada', modules: ['Quém é Deus?', 'Quem sou eu?', 'Por que estou aqui?'], beginDate: '01/01/2021', endDate: '30/01/2021', hoursCourse: '15h', url: 'www.google.com.br', description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. " },
    ,
]

export default function College(props) {

    const [list, setList] = useState([])

    useEffect(() => {
        setList(objTeste)
    }, [])


    return (
        <div className='containerCollege'>
            <h1 className='titleCollege'>COLLEGE</h1>

            <div className='mainCollege'>

                {list.length === 0 && typeof list.url === "string" ?
                    <Loading />
                    :
                    <>
                        <p>
                            O Evangelho College é o centro de capacitação ministerial da Igreja do Evangelho.
                            A cada ciclo o College oferece vários cursos que tem entre 5 e 6 módulos com aulas on-line ministradas ao vivo através do Google Meet com módulos e questões aplicadas pelo Google Classroom. Encontre um curso e estude com a gente!
                        </p>
                        {list.map((item, i) => (
                            <div className='descriptionCollege'>
                                <h3 style={{ textAlign: 'center' }} >{item.title}</h3>
                                <p>{item.description}</p>
                                <b>Módulos:</b>
                                {item.modules.map((item, i) => (<p>{`${i + 1} - ${item}`}</p>))}
                                <p><b>Ínicio e fim do curso: </b>{`${item.beginDate} á ${item.endDate}`}</p>
                                <p><b>Carga Horária:</b> {item.hoursCourse}</p>
                                <a style={{ textDecoration: 'none' }} href={item.url} target='_blank'><p className='btnCollege'>Quero me inscrever</p></a>
                            </div>
                        ))}

                    </>

                }



            </div>


            <Footer />


        </div>
    )
}<file_sep>import React from 'react'
import './Home.css';
import { Link } from 'react-router-dom';
import programacao from '../../assets/images/inciatialScreen/programacao.svg'
import celebracoes from '../../assets/images/inciatialScreen/celebracoes.svg'
import conexoes from '../../assets/images/inciatialScreen/conexoes.svg'
import college from '../../assets/images/inciatialScreen/college.svg'
import orePorMim from '../../assets/images/inciatialScreen/orePorMim.svg'
import contribuicao from '../../assets/images/inciatialScreen/contribuicao.svg'
import queroPertencer from '../../assets/images/inciatialScreen/queroPertencer.svg'
import missoes from '../../assets/images/inciatialScreen/missoes.svg'
import Footer from '../../components/Footer/Footer';

export default function Home(props) {
    return (
        <div className='containerHome'>
            <div className='titleHome'>
                <h1>BEM-VINDO À IDEVANGELHO </h1>
            </div>

            <div className='optionsMenu'>
                <div className='divOptionMenu'>
                    <Link to='/programacao'> <img src={programacao} className='IconOptionMenu' /></Link>
                    <p>PROGRAMAÇÃO</p>
                </div>

                <div className='divOptionMenu'>
                    <Link to='/celebracoes'> <img src={celebracoes} className='IconOptionMenu' /></Link>
                    <p>CELEBRAÇÕES</p>
                </div>

                <div className='divOptionMenu'>
                    <Link to='/conexoes'> <img src={conexoes} className='IconOptionMenu' /></Link>
                    <p>CONEXOES</p>
                </div>

                <div className='divOptionMenu'>
                    <Link to='/college'> <img src={college} className='IconOptionMenu' /></Link>
                    <p>COLLEGE</p>
                </div>

                <div className='divOptionMenu'>
                    <Link to='/orePorMim'> <img src={orePorMim} className='IconOptionMenu' /></Link>
                    <p>ORE POR MIM</p>
                </div>

                <div className='divOptionMenu'>
                    <Link to='/'> <img src={contribuicao} className='IconOptionMenu' /></Link>
                    <p>CONTRIBUIÇÃO</p>
                </div>

                <div className='divOptionMenu'>
                    <Link to='/'> <img src={queroPertencer} className='IconOptionMenu' /></Link>
                    <p>QUERO PERTENCER</p>
                </div>

                <div className='divOptionMenu'>
                    <Link to='/'> <img src={missoes} className='IconOptionMenu' /></Link>
                    <p>MISSÕES</p>
                </div>

            </div>

            <Footer />
        </div>
    );
}