blueskyanalytics · rammcodes · Jan 31, 2021 · Feb 1, 2021 · Feb 1, 2021 · Feb 1, 2021
diff --git a/public/index.html b/public/index.html
@@ -2,6 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" /> 
     <link
       rel="apple-touch-icon"
       sizes="180x180"

diff --git a/src/assets/jpg/person.jpg b/src/assets/jpg/person.jpg
diff --git a/src/assets/png/github-ico.png b/src/assets/png/github-ico.png
diff --git a/src/assets/png/insta-ico.png b/src/assets/png/insta-ico.png
diff --git a/src/assets/png/linkedin-ico.png b/src/assets/png/linkedin-ico.png
diff --git a/src/assets/png/raster-mock-ipad.png b/src/assets/png/raster-mock-ipad.png
diff --git a/src/assets/png/twitter-ico.png b/src/assets/png/twitter-ico.png
diff --git a/src/assets/png/yt-ico.png b/src/assets/png/yt-ico.png
diff --git a/src/assets/svg/cpu.svg b/src/assets/svg/cpu.svg
diff --git a/src/components/home/call.js b/src/components/home/call.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const Call = () => {
+  return (
+    <section className="call">
+      <div className="container">
+        <h2 className="heading heading-med section-heading">
+          <span className="heading-bold">Get</span>Started
+        </h2>
+        <p className="para-med section-intro">
+          Excited about using RasterPlayground and visualise the world
+          efficiently? <br /> Get started today by pressing the button below
+        </p>
+        <div className="content">
+          <Link to="/main" className="btn btn-filled m-auto">
+            See in action
+          </Link>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Call;
diff --git a/src/components/home/feature.js b/src/components/home/feature.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+const Feature = ({ iconName, name, description }) => {
+  return (
+    <div className="feature">
+      <div className="feature-icon-cont">
+        <img src={require(`../../assets/svg/${iconName}`).default} alt={iconName} />
+      </div>
+      <h4 className="heading heading-sm heading-bold mb-sm">{name}</h4>
+      <p className="para para-med">{description}</p>
+    </div>
+  );
+};
+
+export default Feature;
diff --git a/src/components/home/features.js b/src/components/home/features.js
@@ -0,0 +1,69 @@
+import React from 'react';
+import Feature from './feature';
+
+const features = [
+  {
+    iconName: 'cpu.svg',
+    name: 'Feature 1',
+    description: `Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ab
+    reprehenderit numquam`,
+  },
+  {
+    iconName: 'cpu.svg',
+    name: 'Feature 2',
+    description: `Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ab
+    reprehenderit numquam`,
+  },
+  {
+    iconName: 'cpu.svg',
+    name: 'Feature 3',
+    description: `Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ab
+    reprehenderit numquam`,
+  },
+  {
+    iconName: 'cpu.svg',
+    name: 'Feature 4',
+    description: `Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ab
+    reprehenderit numquam`,
+  },
+  {
+    iconName: 'cpu.svg',
+    name: 'Feature 5',
+    description: `Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ab
+    reprehenderit numquam`,
+  },
+  {
+    iconName: 'cpu.svg',
+    name: 'Feature 6',
+    description: `Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ab
+    reprehenderit numquam`,
+  },
+];
+
+const Features = () => {
+  return (
+    <section className="features">
+      <div className="container">
+        <h2 className="heading heading-med section-heading">
+          <span className="heading-bold">Awesome</span>Features
+        </h2>
+        <p className="para-med section-intro">
+          RasterPlayground is packed with bunch of amazing features <br /> to
+          help you visualise the world in a better way
+        </p>
+        <div className="features-cont">
+          {features.map((feature, idx) => (
+            <Feature
+              key={idx}
+              name={feature.name}
+              description={feature.description}
+              iconName={feature.iconName}
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Features;
diff --git a/src/components/home/home-top.js b/src/components/home/home-top.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const HomeTop = () => {
+  return (
+    <header className="home-top">
+      <div className="container">
+        <div className="top-content">
+          <div className="main-content">
+            <h1 className="heading heading-lg mb-sm">
+              <span className="heading-bold">Hello</span>World
+            </h1>
+            <p className="para para-bg mb-bg top-msg">
+              Raster Playground is a color playground to visualise the world in
+              a better way
+            </p>
+            <div className="action">
+              <Link to="/main" className="btn btn-filled">
+                See In Action
+              </Link>
+              <a
+                href="https://youtube.com"
+                target="_blank"
+                rel="noreferrer"
+                className="btn btn-white"
+              >
+                Demo
+              </a>
+            </div>
+          </div>
+          <div className="visual">
+            <img
+              src={require('../../assets/png/raster-mock-ipad.png').default}
+              alt=""
+            />
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export default HomeTop;
diff --git a/src/components/home/main-footer.js b/src/components/home/main-footer.js
@@ -0,0 +1,64 @@
+import React from 'react';
+
+const socials = [
+  {
+    url: 'https://github.com',
+    iconName: 'github-ico.png',
+  },
+  {
+    url: 'https://linkedin.com',
+    iconName: 'linkedin-ico.png',
+  },
+  {
+    url: 'https://twitter.com',
+    iconName: 'twitter-ico.png',
+  },
+  {
+    url: 'https://instagram.com',
+    iconName: 'insta-ico.png',
+  },
+  {
+    url: 'https://youtube.com',
+    iconName: 'yt-ico.png',
+  },
+];
+
+const MainFooter = () => {
+  return (
+    <footer className="main-footer">
+      <div className="container">
+        <div className="upper">
+          <div className="row row-1">
+            <h2 className="heading heading-sm text-lt">
+              <span className="heading-bold">Find</span>Us
+            </h2>
+            <div className="social-cont">
+              {socials.map((item, idx) => (
+                <a key={idx} target="_blank" rel="noreferrer" href={item.url}>
+                  <img
+                    className="icon"
+                    src={require(`../../assets/png/${item.iconName}`).default}
+                    alt=""
+                  />
+                </a>
+              ))}
+            </div>
+          </div>
+          <div className="row row-2">
+            <h4 className="heading heading-sm text-lt">
+              <span className="heading-bold">Raster</span>Playground
+            </h4>
+            <p className="para para-sm short-desc">
+              Raster Playground is a color playground to visualise the world in
+              a better way made by people at BlueSkyAnalytics
+            </p>
+          </div>
+        </div>
+
+        <div className="lower">&copy; Copyright 2021. Made in India</div>
+      </div>
+    </footer>
+  );
+};
+
+export default MainFooter;
diff --git a/src/components/home/main-nav.js b/src/components/home/main-nav.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const MainNav = () => {
+  return (
+    <nav className="main-nav">
+      <div className="nav-content">
+        <h2 className="logo-cont heading heading-sm">
+          <span className="heading-bold">Raster</span>Playground
+        </h2>
+        <div className="nav-actions">
+          <Link to="/main" className="btn btn-filled btn-sm">
+            See in Action
+          </Link>
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default MainNav;
diff --git a/src/components/home/member.js b/src/components/home/member.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+const Member = ({ name, role, picName }) => {
+  return (
+    <div className="member">
+      <div className="img-cont">
+        <img src={require(`../../assets/jpg/${picName}`).default} alt={picName} />
+      </div>
+      <h4 className="member-name">{name}</h4>
+      <h6 className="member-prof">{role}</h6>
+    </div>
+  );
+};
+
+export default Member;
diff --git a/src/components/home/team.js b/src/components/home/team.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import Member from './member';
+
+const Team = () => {
+  return (
+    <section className="team">
+      <div className="container">
+        <h2 className="heading heading-med section-heading">
+          <span className="heading-bold">Great</span>Team
+        </h2>
+        <p className="para-med section-intro text-bl">
+          Meet the team of creative individuals of BlueSkyAnalytics <br />
+          that made this product happen for you
+        </p>
+        <div className="team-members">
+          <Member name="Srijit" role="Developer" picName={'person.jpg'} />
+          <Member name="Hanumanth" role="Developer" picName={'person.jpg'} />
+          <Member name="Kshitij" role="Developer" picName={'person.jpg'} />
+          <Member name="Harsha" role="Developer" picName={'person.jpg'} />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Team;
diff --git a/src/pages/home.js b/src/pages/home.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import MainNav from '../components/home/main-nav';
+import MainFooter from '../components/home/main-footer';
+import HomeTop from '../components/home/home-top';
+import Features from '../components/home/features';
+import Team from 'components/home/team';
+import Call from '../components/home/call';
+
+const Home = () => {
+  return (
+    <div className="home">
+      <MainNav />
+      <HomeTop />
+      <Features />
+      <Team />
+      <Call />
+      <MainFooter />
+    </div>
+  );
+};
+
+export default Home;
diff --git a/src/router.js b/src/router.js
@@ -7,6 +7,7 @@ import {
 } from 'react-router-dom';
 import { QueryParamProvider } from 'use-query-params';
 
+import Home from './pages/home';
 const MainApp = lazy(() => import('pages/main'));
 
 const renderLoader = () => <></>;
@@ -19,8 +20,8 @@ export default function RouterApp() {
           <Suspense fallback={renderLoader()}>
             <Switch>
               {/* dynamic app route */}
-              <Route path="/" exact component={MainApp} />
-
+              <Route path="/" exact component={Home} />
+              <Route path="/main" exact component={MainApp} />
               {/* Redirect to homepage when url is invalid */}
               <Route render={() => <Redirect to={{ pathname: '/' }} />} />
             </Switch>

diff --git a/src/sass/_global.sass b/src/sass/_global.sass
@@ -1,17 +1,28 @@
-@import url('https://fonts.googleapis.com/css2?family=Jost:wght@100;200;300;400;500;700&display=swap');
-@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
+@import url('https://fonts.googleapis.com/css2?family=Jost:wght@100;200;300;400;500;700&display=swap')
+@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css')
 
 *
     outline: none
-    font-family: 'Jost', sans-serif;
+    margin: 0
+    padding: 0
+    box-sizing: border-box
+    font-family: 'Jost', sans-serif
 
 body, html
     padding: 0
     margin: 0
+    overflow-x: hidden
+
+html
+    font-size: 16px
+    @include respond(tab-land)
+        font-size: 15px
+    @include respond(tab-port)
+        font-size: 14px
+    @include respond(big-desk)
+        font-size: 17px
 
 #root
-    width: 100vw
-    height: 100vh
     background: var(--start-screen-bg-color)
 
 .ol-zoom
@@ -21,5 +32,5 @@ body, html
 p
     margin: 0
 
-a, a:hover 
-	text-decoration: none
+a, a:hover
+    text-decoration: none