coderplex-org · vinaypuppal · Nov 2, 2017 · Oct 25, 2017 · Oct 25, 2017 · Oct 25, 2017
diff --git a/components/common-banner.js b/components/common-banner.js
@@ -0,0 +1,23 @@
+import React from 'react';
+
+export default props => (
+  <div>
+    <div className="root">
+      <h1 className="headline">{props.pageTitle}</h1>
+      <h2>{props.pageSubTitle}</h2>
+    </div>
+    <style jsx>{`
+      .root {
+        background-color: #f4f7fb;
+        min-height: 200px;
+        text-align: center;
+      }
+      .headline {
+        padding-top: 20px;
+        font-size: 4em;
+        color: #df1cb5;
+        font-weight: 900;
+      }
+    `}</style>
+  </div>
+);
diff --git a/components/header.js b/components/header.js
@@ -47,8 +47,8 @@ export default props => {
     },
     {
       title: 'Blog',
-      path: 'https://medium.com/coderplex',
-      external: true,
+      path: 'https://coderplex.org/blog',
+      external: false,
     },
   ];
   return (
@@ -144,7 +144,7 @@ export default props => {
         }
         .nav__link--active {
           color: #444;
-          border-bottom: 2px solid #314159;
+          border-bottom: 2px solid #d900e4;
           pointer-events: none;
         }
         @media (max-width: 700px) {

diff --git a/components/icon.js b/components/icon.js
diff --git a/components/icons.js b/components/icons.js
@@ -0,0 +1,102 @@
+import React from 'react';
+
+export const UnderConstructionSVG = props => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <path
+      fill="#6B4841"
+      d="M79.448 247.172h35.31v-35.31h-35.31v35.31zm317.793 0h35.31v-35.31h-35.31v35.31zm17.656-176.551c-6.179 0-12.359-1.766-17.655-5.297v40.607h35.31V65.324c-5.297 3.531-11.476 5.297-17.655 5.297m-317.794 0c-6.179 0-12.359-1.766-17.655-5.297v40.607h35.31V65.324c-5.296 3.531-11.475 5.297-17.655 5.297"
+    />
+    <path fill="#556080" d="M0 211.862h512V105.931H0v105.931z" />
+    <path
+      fill="#E15649"
+      d="M132.414 35.31c0-19.421-15.89-35.31-35.31-35.31s-35.31 15.89-35.31 35.31 15.89 35.31 35.31 35.31 35.31-15.889 35.31-35.31"
+    />
+    <path
+      fill="#6B4841"
+      d="M79.448 512h35.31V353.103h-35.31V512zm317.793 0h35.31V353.103h-35.31V512z"
+    />
+    <path fill="#4C2C28" d="M114.759 467.862h282.483v-52.966H114.759v52.966z" />
+    <path
+      fill="#ECBA16"
+      d="M67.972 105.931L0 173.903v37.959h87.393l105.931-105.931H67.972zm143.89 105.931h124.469l105.931-105.931H317.793L211.862 211.862z"
+    />
+    <path
+      fill="#556080"
+      d="M336.331 211.862H460.8l50.317-50.317v-55.614h-69.738L336.331 211.862z"
+    />
+    <path fill="#ECBA16" d="M512 211.862v-50.317l-50.317 50.317H512z" />
+    <path fill="#556080" d="M0 353.103h512V247.172H0v105.931z" />
+    <path
+      fill="#ECBA16"
+      d="M67.972 247.172L0 315.145v37.959h87.393l105.931-105.931H67.972zm143.89 105.931h124.469l105.931-105.931H317.793L211.862 353.103z"
+    />
+    <path
+      fill="#556080"
+      d="M336.331 353.103H460.8l50.317-50.317v-55.614h-69.738L336.331 353.103z"
+    />
+    <path fill="#ECBA16" d="M512 353.103v-50.317l-50.317 50.317H512z" />
+    <path
+      fill="#E15649"
+      d="M379.586 35.31c0-19.421 15.89-35.31 35.31-35.31 19.421 0 35.31 15.89 35.31 35.31s-15.89 35.31-35.31 35.31c-19.42.001-35.31-15.889-35.31-35.31"
+    />
+    <style jsx>{`
+      svg {
+        width: ${props.size};
+        height: ${props.size};
+      }
+    `}</style>
+  </svg>
+);
+
+export const LaravelSVG = props => (
+  <svg
+    version="1.1"
+    id="Layer_1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 700 700"
+  >
+    <path
+      fill="#FB503B"
+      d="M556.8,344.2c-2.9-3.2-42.3-52.6-49.3-61c-7-8.4-10.3-6.9-14.6-6.2s-54.2,9-60,10c-5.8,1-9.4,3.3-5.9,8.3
+      c3.2,4.4,36,51,43.2,61.2l-130.5,31.3L236.1,214.3c-4.1-6.1-5-8.3-14.4-7.8c-9.4,0.4-81.4,6.4-86.5,6.8c-5.1,0.4-10.8,2.7-5.6,14.8
+      c5.1,12.1,86.9,188.3,89.2,193.4c2.3,5.1,8.2,13.4,22.1,10.1c14.2-3.4,63.5-16.3,90.4-23.3c14.2,25.8,43.3,78,48.6,85.5
+      c7.2,10,12.1,8.3,23.1,5c8.6-2.6,134.4-47.8,140.1-50.2c5.7-2.3,9.2-4,5.3-9.7c-2.8-4.2-36-48.6-53.4-71.9
+      c11.9-3.2,54.2-14.4,58.8-15.7C559,350,559.7,347.4,556.8,344.2z M319.6,392.7c-1.6,0.3-74.6,17.8-78.5,18.7
+      c-3.9,0.9-3.9,0.4-4.3-0.9c-0.4-1.3-86.9-179.6-88.1-181.8c-1.2-2.2-1.1-4,0-4c1.1,0,69-6.1,71.4-6.2s2.1,0.4,3,1.9
+      c0,0,95.7,165.2,97.4,168.1C322.2,391.5,321.2,392.4,319.6,392.7z M525.7,431.3c1.2,1.8,2.3,3-1.3,4.3c-3.7,1.3-123.7,41.8-126,42.8
+      c-2.3,1-4.2,1.3-7.2-3s-42-71.9-42-71.9l127.2-33.1c3.2-1,4.2-1.7,6.2,1.5S524.5,429.5,525.7,431.3z M533.8,341
+      c-2.9,0.6-49.6,12.2-49.6,12.2l-38.2-52.4c-1.1-1.5-2-3,0.7-3.4c2.7-0.4,46.1-8.2,48-8.6c2-0.4,3.7-1,6.1,2.3
+      c2.4,3.3,35.4,45.1,36.7,46.7C538.8,339.4,536.7,340.4,533.8,341z"
+    />
+    <style jsx>{`
+      svg {
+        width: ${props.size};
+        height: ${props.size};
+      }
+    `}</style>
+  </svg>
+);
+
+export const ReactSVG = props => (
+  <svg
+    id="Layer_1"
+    data-name="Layer 1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 823.85795 733"
+  >
+    <path
+      d="M677.3796,237.5782v-.00013q-13.15347-4.51184-26.52168-8.35682,2.2162-9.00546,4.09815-18.08832c20.07545-97.45293,6.9495-175.96071-37.87563-201.8043C574.10386-15.45755,503.81433,10.386,432.82482,72.16188q-10.49272,9.15182-20.513,18.8248-6.70815-6.42994-13.651-12.60818c-74.39859-66.06005-148.97227-93.89436-193.75-67.97423-42.93648,24.85548-55.65406,98.66342-37.5803,191.01912q2.69729,13.71891,6.08893,27.28742c-10.55176,2.99712-20.74263,6.19108-30.49228,9.58925C55.70506,268.70848,0,316.37033,0,365.80411c0,51.06,59.796,102.27313,150.64951,133.32334q11.05033,3.759,22.27764,6.96393-3.64625,14.61321-6.47177,29.4132c-17.23148,90.75134-3.77376,162.80916,39.04973,187.51155,44.23076,25.50438,118.46536-.71107,190.75293-63.898q8.57022-7.49254,17.19138-15.84583,10.8498,10.46823,22.27032,20.3197c70.01968,60.25168,139.17161,84.58221,181.9586,59.81425,44.19066-25.581,58.549-102.99126,39.90285-197.17376q-2.13293-10.79053-4.94043-22.02241,7.82091-2.308,15.32089-4.78369C762.41022,468.13563,823.858,417.546,823.858,365.80425,823.858,316.19178,766.35894,268.20914,677.3796,237.5782ZM455.93017,98.71275c60.82417-52.934,117.67049-73.83348,143.5724-58.89543h.00007c27.58633,15.9116,38.31685,80.072,20.98329,164.213q-1.70415,8.22186-3.70447,16.37829A843.11184,843.11184,0,0,0,506.62552,203.0058c-22.63859-32.23516-46.09393-61.54615-69.6405-86.91573Q446.24028,107.16747,455.93017,98.71275ZM243.25691,408.03318q11.17562,21.58674,23.35692,42.63018,12.4265,21.46008,25.86547,42.30946a749.41279,749.41279,0,0,1-75.92641-12.20726C223.8269,457.27737,232.789,432.86312,243.25691,408.03318Zm-.0401-82.7737c-10.24913-24.30852-19.018-48.20874-26.17895-71.28855,23.50634-5.26129,48.57329-9.56006,74.69032-12.82331q-13.1139,20.4542-25.25653,41.50721Q254.34864,303.68289,243.21681,325.25948ZM261.9249,366.65q16.266-33.856,35.04269-66.41735v.00731q18.75838-32.54479,39.94668-63.59526c24.50177-1.85227,49.62338-2.82209,75.01843-2.82209,25.50817,0,50.66256.97714,75.15708,2.844q20.95959,30.97974,39.695,63.38007,18.82881,32.46544,35.51663,66.10381-16.50682,33.96338-35.39993,66.68714l-.00366.00007q-18.71978,32.51932-39.52367,63.77022c-24.44345,1.7466-49.70364,2.64707-75.44509,2.64707-25.63571,0-50.575-.79833-74.5919-2.35527q-21.33273-31.16146-40.26388-63.86883Q278.245,400.51974,261.9249,366.65Zm295.46159,83.76919q12.43081-21.55706,23.8929-43.65115h.00007a747.44376,747.44376,0,0,1,27.66653,72.4735,746.90393,746.90393,0,0,1-76.85248,13.10041Q545.15579,471.63431,557.38649,450.41918ZM580.944,325.28495Q569.52351,303.615,557.24445,282.4141v.00007q-12.081-20.868-25.05238-41.20092c26.2884,3.31791,51.472,7.72974,75.12057,13.1296A750.753,750.753,0,0,1,580.944,325.28495ZM412.32291,141.25908A752.67935,752.67935,0,0,1,460.805,199.78624q-48.65887-2.29927-97.37267-.02188C379.43872,178.65711,395.83523,159.04842,412.32291,141.25908ZM222.5434,40.86376C250.10793,24.9084,311.05246,47.66,375.2895,104.696c4.10546,3.64609,8.22921,7.46354,12.36021,11.41226a843.39474,843.39474,0,0,0-70.18008,86.8501A859.96423,859.96423,0,0,0,207.53247,220.044q-3.15066-12.6187-5.66241-25.38408v.00359C186.38506,115.5322,196.667,55.84191,222.5434,40.86376ZM182.3707,472.19q-10.24566-2.93259-20.33792-6.3661c-40.17271-13.73122-73.34857-31.57522-96.0893-51.04533-20.43275-17.50133-30.75117-34.875-30.75117-48.97441,0-29.99646,44.72664-68.26231,119.3222-94.26995q14.04424-4.87509,28.35573-8.922A844.0802,844.0802,0,0,0,223.02473,366.661,856.90089,856.90089,0,0,0,182.3707,472.19ZM373.09815,632.61472c-31.96537,27.94364-63.99632,47.76386-92.22443,57.736l-.00366-.00013c-25.36593,8.95844-45.56892,9.21367-57.7797,2.17319-25.98942-14.9856-36.78916-72.84909-22.05526-150.45626q2.62813-13.75741,6.01605-27.35312c33.74463,7.46354,71.0989,12.83435,111.02376,16.07206a856.43741,856.43741,0,0,0,70.71972,87.37518Q381.12547,625.58012,373.09815,632.61472Zm40.19824-39.779c-16.68093-18.00074-33.318-37.90848-49.56871-59.322q23.65952.92986,48.20142.93338,25.19087,0,49.73277-1.10475A748.43012,748.43012,0,0,1,413.2964,592.83569Zm213.71969,48.96723c-4.90764,26.44873-14.774,44.0814-26.97381,51.14381-25.96389,15.02922-81.49033-4.50652-141.36655-56.0333q-10.29837-8.85989-20.71716-18.88671c23.21474-25.3914,46.41485-54.91026,69.05717-87.68879,39.83-3.53291,77.45769-9.31215,111.58149-17.19849q2.51586,10.17258,4.45924,19.92955v-.00013C631.3003,574.71465,632.47794,612.3679,627.01609,641.80291Zm29.87976-175.78216h-.00359c-4.50293,1.49124-9.12622,2.93148-13.837,4.3279-10.42787-33.00808-24.50177-68.10909-41.71868-104.36958a825.689,825.689,0,0,0,40.09617-102.84915c8.42612,2.44291,16.60791,5.01338,24.4908,7.72974,76.24,26.241,122.74232,65.0464,122.74232,94.94445C788.6659,397.65278,738.44091,438.99953,656.89585,466.02076Z"
+      fill="#00D1FF"
+    />
+    <path
+      d="M411.929,292.23677a73.56917,73.56917,0,1,1-73.56735,73.56735A73.56713,73.56713,0,0,1,411.929,292.23677"
+      fill="#00D1FF"
+    />
+    <style jsx>{`
+      svg {
+        width: ${props.size};
+        height: ${props.size};
+      }
+    `}</style>
+  </svg>
+);
diff --git a/components/accord-guide.js → components/learn-components/accord-guide.js b/components/accord-guide.js → components/learn-components/accord-guide.js
diff --git a/components/row-contributors.js → ...ents/learn-components/row-contributors.js b/components/row-contributors.js → ...ents/learn-components/row-contributors.js
diff --git a/components/learn-components/subject-banner.js b/components/learn-components/subject-banner.js
@@ -0,0 +1,37 @@
+import React from 'react';
+
+export default props => (
+  <div>
+    <div className="header">
+      <div className={`logo ${props.logo}`} />
+      <div className="headline">{props.subject}</div>
+    </div>
+    <style jsx>{`
+      .header {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-content: center;
+        align-items: center;
+        background-color: #f4f7fb;
+        min-height: 200px;
+      }
+      .logo {
+        order: 1;
+        flex: 0 1 auto;
+        align-self: auto;
+        font-size: 4.5em;
+        padding-right: 30px;
+      }
+      .headline {
+        order: 2;
+        flex: 0 1 auto;
+        align-self: auto;
+        font-size: 5em;
+        text-align: center;
+        text-transform: capitalize;
+      }
+    `}</style>
+  </div>
+);
diff --git a/components/subscribe.js b/components/subscribe.js
@@ -68,7 +68,7 @@ class Subscribe extends Component {
           <div>
             <h3 className="taglines">
               We are constanly updating our platform.<br />If you would like to
-              stay informed about our updates, drop you email.
+              stay informed about our updates, drop your email.
             </h3>
             <div className="update_content">
               {this.state.subscriberEmailPosted ? (

diff --git a/components/top-banner.js b/components/top-banner.js
diff --git a/pages/events.js b/pages/events.js
@@ -3,7 +3,7 @@ import fetch from 'isomorphic-unfetch';
 import { Card, Divider, Dimmer, Loader } from 'semantic-ui-react';
 
 import publicPage from '../hocs/public-page';
-import TopBanner from '../components/top-banner';
+import CommonBanner from '../components/common-banner';
 import { baseEventsURL, futureEventsURL, pastEventsURL } from '../utils/urls';
 import RowEvent from '../components/row-events';
 
@@ -14,6 +14,7 @@ class Events extends React.Component {
     fetchError: null,
     loading: true,
   };
+
   async componentDidMount() {
     try {
       const pastEvents = await fetch(
@@ -44,6 +45,7 @@ class Events extends React.Component {
       });
     }
   }
+
   renderEvents() {
     if (this.state.fetchError) {
       return <div>{this.state.fetchError}</div>;
@@ -96,10 +98,11 @@ class Events extends React.Component {
       </div>
     );
   }
+
   render() {
     return (
       <div>
-        <TopBanner
+        <CommonBanner
           pageTitle="Events"
           pageSubTitle="Because you cannot change the world alone"
         />

diff --git a/pages/index.js b/pages/index.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import Link from 'next/link';
+
 import { Card, Button, Divider, Grid, Segment } from 'semantic-ui-react';
 import { baseEventsURL, indexPageEventURL } from '../utils/urls';
 import RowEvent from '../components/row-events';
@@ -8,46 +9,40 @@ import Subscribe from '../components/subscribe';
 
 const indexPageLearns = [
   {
-    link:
-      'https://github.com/coderplex/learn/blob/master/web-dev/Frontend/Libraries%20%26%20Frameworks/Learn-React.md',
+    subjectId: 'react',
+    url: 'learn/react',
     title: 'ReactJS',
     subject: 'Frontend Web Development',
-    image: '',
   },
   {
-    link:
-      'https://github.com/coderplex/learn/blob/master/web-dev/Backend/Learn-Laravel.md',
+    subjectId: 'laravel',
+    url: 'learn/laravel',
     title: 'Laravel',
     subject: 'Backend Web Development',
-    image: '',
   },
   {
-    link:
-      'https://github.com/coderplex/learn/blob/master/programming-languages/Go/learn-go.md',
+    subjectId: 'go',
+    url: 'learn/go',
     title: 'Go',
     subject: 'Programming Language',
-    image: '',
   },
   {
-    link:
-      'https://github.com/coderplex/learn/blob/master/computer-science/Learn-CS.md',
+    subjectId: 'introductiontoCS',
+    url: 'learn/introductiontoCS',
     title: 'Introduction to C.S',
     subject: 'Computer Science',
-    image: '',
   },
   {
-    link:
-      'https://github.com/coderplex/learn/blob/master/Blockchain/blockchain-basics.md',
+    subjectId: 'blockchain',
+    url: 'learn/blockchain',
     title: 'Blockchain',
     subject: 'Decentralized Systems',
-    image: '',
   },
   {
-    link:
-      'https://github.com/coderplex/learn/blob/master/mobile-dev/Android/learn-android.md',
+    subjectId: 'android',
+    url: 'learn/android',
     title: 'Android',
     subject: 'Mobile Development',
-    image: '',
   },
 ];
 
@@ -93,13 +88,13 @@ class Home extends React.Component {
               <div className="content">
                 <Card.Group itemsPerRow={3} stackable>
                   {indexPageLearns.map(learn => (
-                    <Card
-                      key={learn.title}
-                      href={learn.link}
-                      target="_blank"
-                      header={learn.title}
-                      meta={learn.subject}
-                    />
+                    <Link
+                      href={`/learn/subject?id=${learn.subjectId}`}
+                      as={learn.url}
+                      key={learn.url}
+                    >
+                      <Card header={learn.title} meta={learn.subject} />
+                    </Link>
                   ))}
                 </Card.Group>
               </div>