import React, { Component, } from 'react';
import {
  Col,
  Image,
  Media,
  Panel,
  Row,
} from 'react-bootstrap';

import { imagePath, } from '../util/imagePath';

export default class Home extends Component {
  render = () => {
    return (
      <Row>
        <Col 
          style={{alignItems: 'center', display: 'flex', justifyContent: 'center',}}
          lg={12} md={12} sm={12} xs={12}
        >
          <Image alt='' responsive src={imagePath('cqdb', 'src/assets/banner.png')} />
        </Col>
        <Col lg={12} md={12} sm={12} xs={12}>
          <Panel>
            <Media.Heading>Hello!</Media.Heading>
            <p>Welcome to the Crusaders Quest Database.</p>
          </Panel>
        </Col>
        <Col lg={4} md={6} sm={12} xs={12}>
          <Panel>
            <Media.Heading>Join the Discussion</Media.Heading>
            <Row>
              <Col
                style={{display: 'flex', justifyContent: 'center',}}
                lg={12} md={12} sm={12} xs={12}
              >
                <p>
                  <a href='https://discord.gg/WjEFnzC'>
                    <Image alt='' responsive src='https://discordapp.com/api/guilds/258167954913361930/embed.png?style=banner2' />
                  </a>
                </p>
              </Col>
              <Col
                style={{display: 'flex', justifyContent: 'center',}}
                lg={12} md={12} sm={12} xs={12}
              >
                <p>
                  <a href='https://discord.gg/6TRnyhj'>
                    <Image alt='' responsive src='https://discordapp.com/api/guilds/206599473282023424/embed.png?style=banner2' />
                  </a>
                </p>
              </Col>
            </Row>
          </Panel>
        </Col>
        <Col lg={8} md={6} sm={12} xs={12}>
          <Panel>
            <Media.Heading>
              <a href='https://github.com/Johj/fergus'>Fergus</a>
            </Media.Heading>
            <p>
              Have all the features of cqdb available inside your Discord server.
              Bot invitation link can be found <a href='https://goo.gl/nDluCQ'>here</a>.
            </p>
          </Panel>
        </Col>
      </Row>
    );
  }
}
@@ -1008,38 +1008,16 @@
       %3E%0A
-                %3Cp%3E%0A  
         
@@ -1072,34 +1072,32 @@
                 
-  
 %3CImage alt='' re
@@ -1084,32 +1084,51 @@
     %3CImage alt='
+cqdb Discord Server
 ' responsive src
@@ -1218,34 +1218,32 @@
                 
-  
 %3C/a%3E%0A           
@@ -1237,37 +1237,37 @@
 %3E%0A              
-  %3C/p
+%3C/Col
 %3E%0A              
@@ -1258,32 +1258,74 @@
 %3E%0A              
+%3CCol lg=%7B12%7D md=%7B12%7D sm=%7B12%7D xs=%7B12%7D%3E%3Cp /%3E
 %3C/Col%3E%0A         
@@ -1471,30 +1471,8 @@
   %3E%0A
-                %3Cp%3E%0A  
     
@@ -1531,34 +1531,32 @@
                 
-  
 %3CImage alt='' re
@@ -1543,32 +1543,62 @@
     %3CImage alt='
+Crusaders Quest Discord Server
 ' responsive src
@@ -1700,36 +1700,13 @@
     
-  
 %3C/a%3E%0A
-                %3C/p%3E%0A
     

Increase accessibility with alt text