import React, { Component } from 'react';
import './styles/aboutUs.css';
import aim from './images/aim.svg';
import member1 from './images/member1.jpg';
import member2 from './images/member2.jpg';
import member3 from './images/member3.jpg';
import member4 from './images/member4.jpg';
import { FaLinkedinIn, FaTwitter, FaGithub} from "react-icons/fa";
import { ImUsers } from "react-icons/im";
import { MdSubscriptions } from "react-icons/md";

class AboutUs extends Component {
    render() {
        return (
            <div className='about_us'>
                <section className='about_aim'>
                    <div className='container about_aim-container'>
                        <div className='about_aim-left'>
                            <img src={aim} height='400px'></img>
                        </div>
                        <div className='about_aim-right'>
                            <h2 className="gradient_text">ABOUT OUR AIM</h2>
                            <p>
                                We are a group of undergraduates who aim to implement an educational assistance which helps students to have summarized version of video lectures along with transcript where student can also search for specific topic and help them to clarify their educational doubts relevant to lecture topic and for further clarifications, give examples and links of relevant sites.
                            </p>
                            <div className='aim_cards'>
                                <article className='aim_card'>
                                    <span className='aim_icon'>
                                        <ImUsers/>
                                    </span>
                                    <h3>450 +</h3>
                                    <p>Subscribers</p>
                                </article>
                                <article className='aim_card'>
                                    <span className='aim_icon'>
                                        <MdSubscriptions/>
                                    </span>
                                    <h3>500 +</h3>
                                    <p>Videos</p>
                                </article>
                                <article className='aim_card'>
                                    <span className='aim_icon'>
                                        <MdSubscriptions/>
                                    </span>
                                    <h3>500 +</h3>
                                    <p>Videos</p>
                                </article>
                            </div>
                        </div>
                    </div>
                </section>
                <section className='team'>
                    <h2>OUR TEAM MEMBERS</h2>
                    <div className='container team_container'>
                        <article className='team_member'>
                            <div className='team_member-image'>
                                <img src={member1}  width='168px' height='200px'></img>
                            </div>
                            <div className='team_member-info'>
                                <h4>Tandin Wangchen</h4>
                                <p>Undergraduate</p>
                            </div>
                            <div className='team_member-socials'>
                                <a target='_blank'>
                                    <i><FaLinkedinIn/></i>
                                </a>
                                <a target='_blank'>
                                    <i><FaTwitter/></i>
                                </a>
                                <a target='_blank'>
                                    <i><FaGithub/></i>
                                </a>
                            </div>
                        </article>
                        <article className='team_member'>
                            <div className='team_member-image'>
                                <img src={member2} width='168px' height='200px'></img>
                            </div>
                            <div className='team_member-info'>
                                <h4>Navodya Pasqual</h4>
                                <p>Undergraduate</p>
                            </div>
                            <div className='team_member-socials'>
                            <a target='_blank'>
                                    <i><FaLinkedinIn/></i>
                                </a>
                                <a target='_blank'>
                                    <i><FaTwitter/></i>
                                </a>
                                <a target='_blank'>
                                    <i><FaGithub/></i>
                                </a>
                            </div>
                        </article>
                        <article className='team_member'>
                            <div className='team_member-image'>
                                <img src={member3}  width='168px' height='200px'></img>
                            </div>
                            <div className='team_member-info'>
                                <h4>Chaveena De Silva</h4>
                                <p>Undergraduate</p>
                            </div>
                            <div className='team_member-socials'>
                            <a target='_blank'>
                                    <i><FaLinkedinIn/></i>
                                </a>
                                <a target='_blank'>
                                    <i><FaTwitter/></i>
                                </a>
                                <a target='_blank'>
                                    <i><FaGithub/></i>
                                </a>
                            </div>
                        </article>
                        <article className='team_member'>
                            <div className='team_member-image'>
                                <img src={member4}  width='168px' height='200px'></img>
                            </div>
                            <div className='team_member-info'>
                                <h4>Thushan Walimuni</h4>
                                <p>Undergraduate</p>
                            </div>
                            <div className='team_member-socials'>
                            <a target='_blank'>
                                    <i><FaLinkedinIn/></i>
                                </a>
                                <a target='_blank'>
                                    <i><FaTwitter/></i>
                                </a>
                                <a target='_blank'>
                                    <i><FaGithub/></i>
                                </a>
                            </div>
                        </article>
                    </div>
                </section>
            </div>
        )
    }
}

export default AboutUs;