diff --git a/components/row-events.js b/components/row-events.js
index 6a3ae1bca..44cca0abb 100644
--- a/components/row-events.js
+++ b/components/row-events.js
@@ -1,10 +1,25 @@
import React from 'react';
-import { Card, Icon } from 'semantic-ui-react';
+import { Card, Icon, Image } from 'semantic-ui-react';
import format from 'date-fns/format';
+import PropTypes from 'prop-types';
+
+const extractImage = input => {
+ let src = '';
+ if (input) {
+ const regex = /<img.*?src=['"](.*?)['"]/;
+ src = regex.exec(input)[1];
+ }
+ return src;
+};
const RowEvent = props => {
return (
- <Card fluid raised target="_blank" href={props.link}>
+ <Card fluid={props.fluid} raised centered target="_blank" href={props.link}>
+ {props.description ? (
+ <Image src={extractImage(props.description)} />
+ ) : (
+ <div />
+ )}
<Card.Content>
<Card.Header>{props.name}</Card.Header>
<div className="card_venue">
@@ -46,4 +61,12 @@ const RowEvent = props => {
);
};
+RowEvent.defaultProps = {
+ fluid: false,
+};
+
+RowEvent.propTypes = {
+ fluid: PropTypes.bool,
+};
+
export default RowEvent;
diff --git a/pages/events.js b/pages/events.js
index 4643fcf8b..57b73ab02 100644
--- a/pages/events.js
+++ b/pages/events.js
@@ -65,6 +65,7 @@ class Events extends React.Component {
venue={event.venue}
link={event.link}
status={event.status}
+ fluid={true}
/>
</Card.Group>
))}
@@ -84,6 +85,7 @@ class Events extends React.Component {
venue={event.venue}
link={event.link}
status={event.status}
+ fluid={true}
/>
</Card.Group>
))}
diff --git a/pages/index.js b/pages/index.js
index 4023f81ca..d0bb6fe55 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,8 +1,69 @@
import React from 'react';
+import Link from 'next/link';
+import { Card, Button, Divider } from 'semantic-ui-react';
+import { indexPageMeetupURL, reverseProxyCORS } from '../utils/urls';
+import RowEvent from '../components/row-events';
import publicPage from '../hocs/public-page';
+const indexPageLearns = [
+ {
+ link: '#',
+ title: 'ReactJS',
+ subject: 'Frontend Web Development',
+ image: '',
+ },
+ {
+ link: '#',
+ title: 'Laravel',
+ subject: 'Backend Web Development',
+ image: '',
+ },
+ {
+ link: '#',
+ title: 'Go',
+ subject: 'Programming Language',
+ image: '',
+ },
+ {
+ link: '#',
+ title: 'Security',
+ subject: 'Networking',
+ image: '',
+ },
+ {
+ link: '#',
+ title: 'Blockchain',
+ subject: 'Distributed Computing',
+ image: '',
+ },
+ {
+ link: '#',
+ title: 'Android',
+ subject: 'Mobile Development',
+ image: '',
+ },
+];
+
class Home extends React.Component {
+ state = {
+ indexPageEvent: '',
+ };
+
+ async componentDidMount() {
+ try {
+ const requestEvent = await fetch(
+ `${reverseProxyCORS}${indexPageMeetupURL}`,
+ );
+ const requestEventJson = await requestEvent.json();
+ await this.setState({
+ indexPageEvent: requestEventJson[0],
+ });
+ } catch (err) {
+ console.log(err);
+ }
+ }
+
render() {
return (
<div>
@@ -10,27 +71,151 @@ class Home extends React.Component {
<section className="about">
<div className="about__container">
<div className="about__content">
- <img src="/static/banner.png" alt="words" />
+ <img src="/static/banner1280x370.png" alt="words" />
+ </div>
+ <h1 className="about__tag">
+ On a mission to improve the state of tech in India
+ </h1>
+ </div>
+ <Divider section />
+ </section>
+ <section className="learn">
+ <div className="container">
+ <h2 className="titles">Open Source Learing Guides</h2>
+ <h3 className="taglines">
+ Our guides are crowd-sourced recommendations of free online
+ resource to learn any technology
+ </h3>
+ <div className="content">
+ <Card.Group itemsPerRow={3} stackable textAlign={'center'}>
+ {indexPageLearns.map(learn => (
+ <Card
+ raised
+ key={learn.title}
+ href={learn.link}
+ header={learn.title}
+ meta={learn.subject}
+ />
+ ))}
+ </Card.Group>
+ </div>
+ <Link href={'/learn'}>
+ <Button basic color="grey">
+ SEE ALL AVAILABLE GUIDES
+ </Button>
+ </Link>
+ </div>
+ </section>
+ <Divider section />
+ <section className="space">
+ <div className="container">
+ <h2 className="titles">Off line Co-Learning Spaces</h2>
+ <h3 className="taglines">
+ Physical spaces where you can come down to engage in self
+ learing, peer-learning and collaboration.
+ </h3>
+ <div className="space-content">
+ <div className="space_content_info">
+ These are dynamic learning environment where everyone learns
+ at their own pace and compliments each other. We also organize
+ weekly group activities like Open source evenings, casual
+ hackathons etc.
+ </div>
+ <img
+ className="space_content_info"
+ src="https://static.vecteezy.com/system/resources/thumbnails/000/139/966/small/free-office-workspace-vector.png"
+ />
</div>
+ <Link href={'/learn'}>
+ <Button basic color="grey">
+ LEARN MORE ABOUT HACKERSPACE
+ </Button>
+ </Link>
+ </div>
+ </section>
+ <Divider section />
+ <section className="events">
+ <div className="container">
+ <h2 className="titles">Online & Offline Events</h2>
+ <h3 className="taglines">
+ We do frequent online and offline events, covering broad range
+ of topics.
+ </h3>
+ <div className="content">
+ {this.state.indexPageEvent ? (
+ <RowEvent
+ key={this.state.indexPageEvent.id}
+ name={this.state.indexPageEvent.name}
+ description={this.state.indexPageEvent.description}
+ yesCount={this.state.indexPageEvent.yes_rsvp_count}
+ time={this.state.indexPageEvent.time}
+ venue={this.state.indexPageEvent.venue}
+ link={this.state.indexPageEvent.link}
+ status={this.state.indexPageEvent.status}
+ />
+ ) : (
+ <div />
+ )}
+ </div>
+ <Link href={'/events'}>
+ <Button basic color="grey">
+ VIEW ALL EVENTS
+ </Button>
+ </Link>
</div>
</section>
</main>
<style jsx>{`
+ main {
+ background-color: #ffffff;
+ }
.about {
- background-color: #fff;
+ background-color: #f4f7fb;
position: relative;
+ text-align: center;
}
.about__container {
- max-width: 1280px;
+ padding-bottom: 30px;
min-height: calc(100vh - 260px);
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
+ flex-direction: column;
}
.about__content img {
width: 100%;
}
+ .about__tag {
+ font-size: 2.5em;
+ }
+ .container {
+ background-color: #ffffff;
+ text-align: center;
+ padding: 60px;
+ }
+ .taglines {
+ padding-bottom: 20px;
+ }
+ .content {
+ padding-bottom: 50px;
+ }
+ .space-content {
+ display: flex;
+ flex-wrap: wrap-reverse
+ flex-wrap: wrap;
+ justify-content: center;
+ align-content: center;
+ align-items: center;
+ }
+ .space_content_info {
+ order: 0;
+ flex: 0 1 auto;
+ align-self: center;
+ max-width: 600px;
+ padding-left: 30px;
+ padding-right: 30px;
+ }
`}</style>
</div>
);
diff --git a/static/banner1280x370.png b/static/banner1280x370.png
new file mode 100644
index 000000000..d1fb5275e
Binary files /dev/null and b/static/banner1280x370.png differ
diff --git a/static/learnIcons/android.png b/static/learnIcons/android.png
new file mode 100644
index 000000000..d82f4a8ea
Binary files /dev/null and b/static/learnIcons/android.png differ
diff --git a/static/learnIcons/blockchain.png b/static/learnIcons/blockchain.png
new file mode 100644
index 000000000..a0c1e1ef1
Binary files /dev/null and b/static/learnIcons/blockchain.png differ
diff --git a/static/learnIcons/go.png b/static/learnIcons/go.png
new file mode 100644
index 000000000..02a757e7b
Binary files /dev/null and b/static/learnIcons/go.png differ
diff --git a/static/learnIcons/laravel.png b/static/learnIcons/laravel.png
new file mode 100644
index 000000000..cf2d069de
Binary files /dev/null and b/static/learnIcons/laravel.png differ
diff --git a/static/learnIcons/react.png b/static/learnIcons/react.png
new file mode 100644
index 000000000..aef26a251
Binary files /dev/null and b/static/learnIcons/react.png differ
diff --git a/static/learnIcons/security.png b/static/learnIcons/security.png
new file mode 100644
index 000000000..167ebee02
Binary files /dev/null and b/static/learnIcons/security.png differ
diff --git a/utils/urls.js b/utils/urls.js
index 068bd6d45..c6fac13a6 100644
--- a/utils/urls.js
+++ b/utils/urls.js
@@ -4,4 +4,7 @@ export const pastEventsMeetupURL =
export const futureEventsMeetupURL =
'https://api.meetup.com/coderplex/events?only=id%2Cname%2Ctime%2Cyes_rsvp_count%2Cdescription%2Cvenue%2Cstatus%2Clink';
+export const indexPageMeetupURL =
+ 'https://api.meetup.com/coderplex/events?scroll=future_or_past&photo-host=public&page=1&sig_id=216741149&only=id%2Ctime%2Cyes_rsvp_count%2Cvenue%2Clink%2Cstatus%2Cname%2Cdescription&sig=fabc8645c9e317083cc1f29ff0e8292b88b5e515';
+
export const reverseProxyCORS = 'https://cors.now.sh/';