import React from 'react';
import Link from 'next/link';
import { useTranslation } from 'next-i18next';

const RacialJustice = () => {
    const { t } = useTranslation('racialJustice');

    return (
        <section className="wpo-blog-single-section section-padding">
            <div className="container">
                <div className="row">
                    <div className="col-12">
                        <div className="wpo-blog-content">
                            <div className="post format-standard-image">
                                <div
                                    className="entry-media"
                                    style={{ width: "100%", height: "auto", overflow: "hidden" }}
                                >
                                    <img
                                        src="/images/racial-justice/section-1.webp"
                                        alt=""
                                    />
                                </div>
                                {/* <div className="entry-meta">
                                    <ul>
                                        <li>
                                            <i className="fi flaticon-user"></i> By{' '}
                                            <Link href="/blog-single/support-progressive-change">Jenny</Link>
                                        </li>
                                      
                                        <li>
                                            <i className="fi flaticon-calendar"></i> Jan 11, 2022
                                        </li>
                                    </ul>
                                </div> */}

                                <h2 className='mt-4'>{t("racialJustice.title")}</h2>

                                <p>{t("racialJustice.paragraph1")}</p>

                                <blockquote>{t("racialJustice.quote1")}</blockquote>

                                <p>{t("racialJustice.paragraph2")}</p>

                                <div className="gallery">
                                    <div>
                                        <img src="/images/racial-justice/section-2-1.webp" alt="" />
                                    </div>
                                    <div>
                                        <img src="/images/racial-justice/section-2-2.webp" alt="" />
                                    </div>
                                </div>
                                <p>{t("racialJustice.paragraph3")}</p>

                                <blockquote>{t("racialJustice.quote2")}</blockquote>

                                 <p>{t("racialJustice.paragraph4")}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
};

export default RacialJustice;