// Home.js
import React from 'react';
// Import CSS file for component styles
import './App.css'; 

const Home = () => {
    return (
        <div className="home">
            <div className="container">
                <h2>Welcome to Environmental Protection</h2>
                <p>Our mission is to protect and preserve the
                    environment for future generations. We believe
                    that every individual has a role to play in
                    safeguarding our planet, and together, we can
                    make a significant impact.
                </p>
                <p>At Environmental Protection, we strive to:</p>
                <ul>
                    <li>Raise awareness about environmental issues
                        and their implications for both current and
                        future generations.
                    </li>
                    <li>Promote sustainable practices that minimize
                        harm to the environment and promote biodiversity.
                    </li>
                    <li>Advocate for policies and initiatives that
                        prioritize environmental conservation and address
                        pressing environmental challenges.
                    </li>
                    <li>Empower individuals and communities to take
                        meaningful action towards a more sustainable
                        and environmentally conscious future.
                    </li>
                </ul>
                <p>By fostering a sense of responsibility and
                    collective action, we aim to create a world
                    where the natural beauty and resources of
                    our planet are cherished and protected for
                    generations to come.
                </p>
                <button className="action-button">Get Involved</button>
            </div>
        </div>
    );
}

export default Home;

// Header.js
import React from 'react';
import { Link } from 'react-router-dom';
import { CSSTransition }
    from 'react-transition-group';


const Header = () => {
    return (
        <CSSTransition in={true} appear={true}
            timeout={500} classNames="fade">
            <header className="header">
                <div className="container">
                    <h1 className="logo">
                        Environmental Protection</h1>
                    <nav className="nav">
                        <ul>
                            <li><Link to="/"
                                className="link">Home</Link></li>
                            <li><Link to="/campaigns"
                                className="link">Campaigns</Link></li>
                            <li><Link to="/take-action"
                                className="link">Take Action</Link></li>
                            <li><Link to="/resources"
                                className="link">Resources</Link></li>
                        </ul>
                    </nav>
                </div>
            </header>
        </CSSTransition>
    );
}

export default Header;

// Campaigns.js
import React from 'react';
// Import CSS file for component styles
import './App.css';

const Campaigns = () => {
    return (
        <div className="campaigns">
            <div className="container">
                <h2>Current Campaigns</h2>
                <div className="campaign">
                    <h3>Campaign Title 1</h3>
                    <p>Description of Campaign 1...</p>
                </div>
                <div className="campaign">
                    <h3>Campaign Title 2</h3>
                    <p>Description of Campaign 2...</p>
                </div>
            </div>
        </div>
    );
}

export default Campaigns;

// Footer.js
import React from 'react';
import './App.css';

const Footer = () => {
    return (
        <footer className="footer">
            <div className="container">
                <div className="footer-content">
                    <div className="contact-info">
                        <h3>Contact Us</h3>
                        <p>Email: info@example.com</p>
                        <p>Phone: 123-456-7890</p>
                    </div>
                    <div className="social-media">
                        <h3>Connect With Us</h3>
                        <ul>
                            <li>
                                <a href="https://facebook.com">Facebook</a>
                            </li>
                            <li>
                                <a href="https://twitter.com">Twitter</a>
                            </li>
                            <li>
                                <a href="https://instagram.com">Instagram
                                </a></li>
                        </ul>
                    </div>
                </div>
                <div className="copyright">
                    <p>© 2024 Environmental Protection.
                        All rights reserved.</p>
                </div>
            </div>
        </footer>
    );
}

export default Footer;

// Resources.js
import React from 'react';
import './App.css';

const Resources = () => {
    return (
        <div className="resources">
            <div className="container">
                <h2>Educational Resources</h2>
                <div className="resource">
                    <h3>Resource Title 1</h3>
                    <p>Description of Resource 1...</p>
                </div>
                <div className="resource">
                    <h3>Resource Title 2</h3>
                    <p>Description of Resource 2...</p>
                </div>
            </div>
        </div>
    );
}

export default Resources;

// TakeAction.js
import React from 'react';
import './App.css';

const TakeAction = () => {
    return (
        <div className="take-action">
            <div className="container">
                <h2>Take Action</h2>
                <p>Here are some ways you can get involved:</p>
                <ul>
                    <li>Sign petitions</li>
                    <li>Volunteer for events</li>
                    <li>Donate to support our cause</li>
                </ul>
            </div>
        </div>
    );
}

export default TakeAction;

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';


import Header from './Header';
import Home from './Home';
import Campaigns from './Campaign';
import TakeAction from './TakeAction';
import Resources from './Resources';
import Footer from './Footer';
import './App.css';

function App() {
    return (
        <Router>
            <div className="App">
                <Header />
                <Routes>
                    <Route path="/"
                        element={<Home />} />
                    <Route path="/campaigns"
                        element={<Campaigns />} />
                    <Route path="/take-action"
                        element={<TakeAction />} />
                    <Route path="/resources"
                        element={<Resources />} />
                </Routes>
                <Footer />
            </div>
        </Router>

    );
}

export default App;