diff --git a/public/index.html b/public/index.html index d732dbe..bdc94f4 100644 --- a/public/index.html +++ b/public/index.html @@ -2,6 +2,7 @@ + \ No newline at end of file diff --git a/src/components/home/call.js b/src/components/home/call.js new file mode 100644 index 0000000..224ced6 --- /dev/null +++ b/src/components/home/call.js @@ -0,0 +1,25 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +const Call = () => { + return ( +
+
+

+ GetStarted +

+

+ Excited about using RasterPlayground and visualise the world + efficiently?
Get started today by pressing the button below +

+
+ + See in action + +
+
+
+ ); +}; + +export default Call; diff --git a/src/components/home/feature.js b/src/components/home/feature.js new file mode 100644 index 0000000..daa9f29 --- /dev/null +++ b/src/components/home/feature.js @@ -0,0 +1,15 @@ +import React from 'react'; + +const Feature = ({ iconName, name, description }) => { + return ( +
+
+ {iconName} +
+

{name}

+

{description}

+
+ ); +}; + +export default Feature; diff --git a/src/components/home/features.js b/src/components/home/features.js new file mode 100644 index 0000000..4a1c475 --- /dev/null +++ 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 ( +
+
+

+ AwesomeFeatures +

+

+ RasterPlayground is packed with bunch of amazing features
to + help you visualise the world in a better way +

+
+ {features.map((feature, idx) => ( + + ))} +
+
+
+ ); +}; + +export default Features; diff --git a/src/components/home/home-top.js b/src/components/home/home-top.js new file mode 100644 index 0000000..fb7efd4 --- /dev/null +++ b/src/components/home/home-top.js @@ -0,0 +1,43 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +const HomeTop = () => { + return ( +
+
+
+
+

+ HelloWorld +

+

+ Raster Playground is a color playground to visualise the world in + a better way +

+
+ + See In Action + + + Demo + +
+
+
+ +
+
+
+
+ ); +}; + +export default HomeTop; diff --git a/src/components/home/main-footer.js b/src/components/home/main-footer.js new file mode 100644 index 0000000..640dc14 --- /dev/null +++ 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 ( + + ); +}; + +export default MainFooter; diff --git a/src/components/home/main-nav.js b/src/components/home/main-nav.js new file mode 100644 index 0000000..1ac34ee --- /dev/null +++ b/src/components/home/main-nav.js @@ -0,0 +1,21 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +const MainNav = () => { + return ( + + ); +}; + +export default MainNav; diff --git a/src/components/home/member.js b/src/components/home/member.js new file mode 100644 index 0000000..801559f --- /dev/null +++ b/src/components/home/member.js @@ -0,0 +1,15 @@ +import React from 'react'; + +const Member = ({ name, role, picName }) => { + return ( +
+
+ {picName} +
+

{name}

+
{role}
+
+ ); +}; + +export default Member; diff --git a/src/components/home/team.js b/src/components/home/team.js new file mode 100644 index 0000000..e342f14 --- /dev/null +++ b/src/components/home/team.js @@ -0,0 +1,26 @@ +import React from 'react'; +import Member from './member'; + +const Team = () => { + return ( +
+
+

+ GreatTeam +

+

+ Meet the team of creative individuals of BlueSkyAnalytics
+ that made this product happen for you +

+
+ + + + +
+
+
+ ); +}; + +export default Team; diff --git a/src/pages/home.js b/src/pages/home.js new file mode 100644 index 0000000..e1f2107 --- /dev/null +++ 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 ( +
+ + + + + + +
+ ); +}; + +export default Home; diff --git a/src/router.js b/src/router.js index 658fe54..d56ab4a 100644 --- 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() { {/* dynamic app route */} - - + + {/* Redirect to homepage when url is invalid */} } /> diff --git a/src/sass/_global.sass b/src/sass/_global.sass index 0323d52..fa625cc 100644 --- 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 \ No newline at end of file +a, a:hover + text-decoration: none diff --git a/src/sass/_home.sass b/src/sass/_home.sass new file mode 100644 index 0000000..42abf13 --- /dev/null +++ b/src/sass/_home.sass @@ -0,0 +1,208 @@ +$THEME-CLR: #fabc33 + +.home + background: #eee + +.main-nav + position: fixed + left: 0% + top: 0 + width: 100% + z-index: 10 + padding: 1rem + @include respond(phone) + padding: 8px + .nav-content + width: 100% + margin: auto + padding: 1.2rem + display: flex + justify-content: space-between + align-items: center + background: #fff + @include common-border-radius + @include common-box-shadow + @include respond(tab-port) + padding: 1rem +.home-top + position: relative + min-height: 900px + height: 100vh + background: $THEME-CLR + background-size: cover + background-repeat: no-repeat + clip-path: polygon(0 0, 100% 0, 100% 80%, 0% 100%) + @include respond(tab-land) + min-height: unset + height: unset + padding: 15rem 0 + clip-path: polygon(0 0, 100% 0, 100% 95%, 0% 100%) + @include respond(phone) + padding: 12rem 0 7rem 0 + .top-content + position: relative + display: grid + grid-template-columns: 48% 45% + align-items: center + justify-content: space-between + padding: 0rem 0 + min-height: 900px + height: 100vh + @include respond(tab-land) + display: unset + height: unset + min-height: unset + + .main-content + z-index: 2 + @include respond(tab-land) + margin-bottom: 5rem + @include respond(phone) + margin-bottom: 3rem + .top-msg + max-width: 650px + .action + display: flex + flex-wrap: wrap + a + @include respond(phone) + width: 100% + &:first-child + margin-right: 1.5rem + @include respond(phone) + margin: 0 0 1rem 0 + .visual + z-index: 2 + + img + width: 100% + z-index: 3 +.features + padding: 3rem 0 5rem 0 + text-align: center + background: #eee + .features-cont + margin-top: 5rem + display: grid + grid-template-columns: 1fr 1fr + grid-gap: 1.7rem + @include respond(phone) + grid-template-columns: 1fr + grid-gap: 1.5rem + margin-top: 4rem + .feature + background: #fff + @include common-border-radius + padding: 4rem + @include common-border-radius + text-align: left + @include common-box-shadow + @include respond(tab-port) + padding: 4rem 2rem + .feature-icon-cont + margin-bottom: 1.3rem + img + width: 3rem +.section-heading + position: relative + display: inline-block + margin-bottom: 2rem + &::after + content: '' + position: absolute + width: 5rem + background: #000 + height: 3px + top: 110% + left: 50% + transform: translate(-50%, 0%) +.section-heading-lft + &::after + background: #fff + left: 0% + transform: translate(0%, 0%) +.section-intro + color: #555 + @include respond(phone) + width: 95% + margin: auto + line-height: 1.6 + +.team + padding: 5rem 0 + background: $THEME-CLR + text-align: center + position: relative + + .team-members + display: grid + grid-template-columns: 1fr 1fr 1fr 1fr + align-items: center + grid-gap: 2rem + margin: 3rem auto 0 auto + @include respond(tab-port) + grid-template-columns: 1fr 1fr + grid-gap: 1rem + .member + background: #ffffff + padding: 10px 10px 20px 10px + @include common-border-radius + @include common-box-shadow + &:nth-child(2), &:nth-child(4) + margin-top: 3rem + @include respond(tab-port) + margin-top: 0 + + .img-cont + width: 100% + img + width: 100% + .member-name + text-transform: uppercase + padding: 1rem 0 5px 0 + color: #444 + .member-prof + color: grey + text-transform: uppercase +.call + padding: 5rem 0 + background: #fff + text-align: center + .content + margin-top: 3rem + +.main-footer + background: #000 + .upper + display: flex + justify-content: space-between + padding: 5rem 0 + @include respond(phone) + padding: 5rem 1rem + display: block + .row-1 + order: 2 + @include respond(phone) + margin-bottom: 3rem + .social-cont + margin-top: 1rem + .icon + margin-right: .5rem + width: 1.8rem + .row-2 + width: 40% + order: 1 + @include respond(phone) + width: 100% + .short-desc + margin-top: 1rem + color: #eee + + .lower + padding: 2rem 0 + border-top: 1px solid #444 + color: #eee + font-size: .8rem + text-align: + @include respond(phone) + padding: 2rem 1rem diff --git a/src/sass/_mixins.sass b/src/sass/_mixins.sass new file mode 100644 index 0000000..caeef00 --- /dev/null +++ b/src/sass/_mixins.sass @@ -0,0 +1,31 @@ + +// Mixin to write Media Queries + // Using em because of poor browser support for rem +@mixin respond($breakpoint) + @if $breakpoint == phone + @media (max-width: 40em) + // i.e 640px + @content + + @if $breakpoint == tab-port + @media (max-width: 55em) + // i.e 880px + @content + + @if $breakpoint == tab-land + @media (max-width: 75em) + // i.e 1200px + @content + + @if $breakpoint == big-desk + @media (min-width: 100em) + // i.e 1600px + @content + +// Mixin for Box Shadow +@mixin common-box-shadow + box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px + +// Mixin for Border Radius +@mixin common-border-radius + border-radius: 5px diff --git a/src/sass/_typography.sass b/src/sass/_typography.sass new file mode 100644 index 0000000..6e37c2e --- /dev/null +++ b/src/sass/_typography.sass @@ -0,0 +1,27 @@ +.heading + font-weight: 400 +.heading-lg + font-size: 5.5rem + @include respond(phone) + font-size: 4rem +.heading-med + font-size: 2.5rem + @include respond(phone) + font-size: 2rem +.heading-sm + font-size: 1.5rem + @include respond(phone) + font-size: 1.2rem +.heading-bold + font-weight: 600 +.para + line-height: 1.5 +.para-bg + font-size: 1.4rem + @include respond(phone) + font-size: 1.2rem +.para-med + font-size: 1.1rem + color: grey +.para-sm + font-size: .9rem diff --git a/src/sass/_utilities.sass b/src/sass/_utilities.sass new file mode 100644 index 0000000..c4ae87c --- /dev/null +++ b/src/sass/_utilities.sass @@ -0,0 +1,55 @@ + +.mb-bg + margin-bottom: 3rem +.mb-med + margin-bottom: 2rem +.mb-sm + margin-bottom: 1rem +.btn + font-family: 'Jost', sans-serif + font-weight: 600 + + border: 2px solid #333 + padding: 1rem 0rem + text-decoration: none + color: #333 + font-size: 1.2rem + width: 15rem + display: block + text-align: center + @include common-border-radius + @include respond(phone) + padding: 1.3rem 0 + +.btn-filled + background: #000 + border: 2px solid #000 + color: #fff + @include common-box-shadow + +.btn-white + border: 2px solid #fff + background: #fff + +.btn-sm + @include respond(tab-land) + font-size: 12px + padding: 10px 0 + width: 10rem + @include respond(phone) + width: 9rem + +.container + max-width: 75rem + width: 95% + margin: auto + +.text-lt + color: #fff +.text-bl + color: #333 !important +.text-gr + color: grey + +.m-auto + margin: auto diff --git a/src/sass/index.sass b/src/sass/index.sass index 98ca13f..2a9647a 100644 --- a/src/sass/index.sass +++ b/src/sass/index.sass @@ -1,3 +1,8 @@ +@import "_mixins.sass" +@import "_utilities.sass" +@import "_typography.sass" +@import "_utilities.sass" @import "_global.sass" @import "_app.sass" @import "_map.sass" +@import "_home.sass"