diff --git a/src/components/Header.css b/src/components/Header.css index 2c991e4..bcf5c1d 100644 --- a/src/components/Header.css +++ b/src/components/Header.css @@ -1,6 +1,3 @@ -.side-toggle { -} - .menu_icon [class*='menu_bar-'] { background: #ffffff; -webkit-transform: rotate(0deg); @@ -68,3 +65,8 @@ background-color: rgba(0, 0, 0, 0.5); z-index: 99; } + +.saburly-menu, +.headroom { + z-index: 9999; +} diff --git a/src/components/Header.js b/src/components/Header.js index 8bd15ff..8b03675 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -4,6 +4,8 @@ import LogoSaburly from '../images/saburly-logo-4.svg' import LogoSaburlyWhite from '../images/saburly-logo-white.svg' import Button from './Button' +import Headroom from 'react-headroom' + import './Header.css' let menuClasses = @@ -12,48 +14,50 @@ let menuClasses = class Header extends Component { render() { return ( -
- +
+ ) } } diff --git a/src/components/PageIntro.js b/src/components/PageIntro.js index cd23523..4de7c0c 100644 --- a/src/components/PageIntro.js +++ b/src/components/PageIntro.js @@ -4,15 +4,24 @@ import SectionIntro from './SectionIntro' import Button from './Button' const PageIntro = ({ ...props }) => ( -
+
+ + bg-saburly-white + +
{props.children} ( {props.image && ( Software Development Agency )}
- - bg-saburly-white - -
) diff --git a/src/components/SectionIntro.js b/src/components/SectionIntro.js index 6d60193..318f86f 100644 --- a/src/components/SectionIntro.js +++ b/src/components/SectionIntro.js @@ -26,8 +26,10 @@ const IntroDefault = ({ ...props }) => ( )} {props.text && (

{props.text}

diff --git a/src/components/Service.js b/src/components/Service.js index 28f7f19..b89cbde 100644 --- a/src/components/Service.js +++ b/src/components/Service.js @@ -9,7 +9,7 @@ const Service = ({ ...props }) => ( > {`${props.title} (
- High Quality Code + High Quality Code

High Quality Code

We have deep understanding of software engineering & computer @@ -27,7 +27,7 @@ const WorkStyle = ({ ...props }) => (

High Quality Code

Continuous delivery

@@ -43,7 +43,7 @@ const WorkStyle = ({ ...props }) => (
High Quality Code

Modern DevOps

@@ -56,7 +56,7 @@ const WorkStyle = ({ ...props }) => (

- High Quality Code + High Quality Code

Code Reviews

“Two Heads are Better Than One”. Code reviews are integrated part of @@ -68,7 +68,7 @@ const WorkStyle = ({ ...props }) => (

- High Quality Code + High Quality Code

UX testing/research

We know it takes more than just an user video or a survey to @@ -81,7 +81,7 @@ const WorkStyle = ({ ...props }) => (

High Quality Code

Unit & Integration testing

diff --git a/src/images/user-experience-design-agency.svg b/src/images/user-experience-design-agency.svg index 16c0c83..3ea7e26 100644 --- a/src/images/user-experience-design-agency.svg +++ b/src/images/user-experience-design-agency.svg @@ -1,5 +1,5 @@ - + user-experience-design-agency Created with Sketch. @@ -48,81 +48,89 @@ - + + + + + - + - + - + - + - + - + - + - + - - - + + + - + - + + + + + - + - - + + - + - + - + - - - - + + + + @@ -136,13 +144,14 @@ - - - - - + + + + + + - + @@ -159,58 +168,62 @@ - - - - + + + + - - - - + + + + - - - - - - + + + + + + - - - - - - - + + + + + + + - - + + - + - - - - - - - + + + - + + + + + + + + + - - + + - - - + + + diff --git a/src/images/web-development-company.svg b/src/images/web-development-company.svg index cbc52d3..72d53af 100644 --- a/src/images/web-development-company.svg +++ b/src/images/web-development-company.svg @@ -25,7 +25,7 @@ - + diff --git a/src/pages/index.js b/src/pages/index.js index 66ee8bb..dab0b63 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -75,7 +75,7 @@ const IndexPage = ({ ...props }) => ( standard text="More About What We Do" url="/services" - classes="mb-8 lg:mb-24 rounded-full hover:shadow-md text-grey-darker hover:shadow" + classes="font-medium mb-8 lg:mb-24 rounded-full hover:shadow-md text-grey-darker hover:shadow" />
@@ -107,7 +107,7 @@ const IndexPage = ({ ...props }) => ( filled text="Let's Get In Touch" url="/contact" - classes="text-white font-normal shadow hover:shadow-md rounded-full mt-2 font-light bg-teal hover:bg-teal-dark" + classes="text-white font-medium shadow hover:shadow-md rounded-full mt-2 font-light bg-teal hover:bg-teal-dark" /> diff --git a/src/pages/services.js b/src/pages/services.js index 47c6349..1897c78 100644 --- a/src/pages/services.js +++ b/src/pages/services.js @@ -112,22 +112,23 @@ const ServicesPage = () => ( Fullstack Web Development Agency

Emerging Technologies

- We harness a wide array of emerging technologies, such as AR/VR, AI - technologies, Machine Learning and Blockchain, pushing the - boundaries of user experience across physical and digital. Keeping - track of emerging technologies is important to us so that we can - deliver forward-thinking solutions, but we understand that - technologies as just tools. That's why we're keen on being framework - agnostic and selecting the best tools for your needs. Below are some - of the technologies that we're currently working with on a daily - basis. + We harness a wide array of emerging technologies, such as{' '} + AR/VR, AI technologies,{' '} + Machine Learning and Blockchain, + pushing the boundaries of user experience across physical and + digital. Keeping track of emerging technologies is important to us + so that we can deliver forward-thinking solutions, but we understand + that technologies as just tools. That's why we're keen on being + framework agnostic and selecting the best tools for your needs. + Below are some of the technologies that we're currently working with + on a daily basis.

diff --git a/src/styles/general.css b/src/styles/general.css index 686a3d5..dfb6604 100644 --- a/src/styles/general.css +++ b/src/styles/general.css @@ -122,3 +122,11 @@ body { .saburly-overlay-shadow { background-color: RGBA(0, 0, 0, 0.1); } + +.saburly-text-intro { + color: #1f2443; +} + +h2 span { + color: #5763ab; +} diff --git a/src/styles/index.css b/src/styles/index.css index 2322822..0138745 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -3370,6 +3370,10 @@ table { margin-left: 1px; } +.max-h-35 { + max-height: 35rem; +} + .max-h-xs { max-height: 20rem; } @@ -5774,6 +5778,18 @@ table { z-index: 50; } +.z--3 { + z-index: -3; +} + +.z--2 { + z-index: -2; +} + +.z--1 { + z-index: -1; +} + .z-auto { z-index: auto; } @@ -8508,6 +8524,10 @@ table { margin-left: 1px; } + .sm\:max-h-35 { + max-height: 35rem; + } + .sm\:max-h-xs { max-height: 20rem; } @@ -10896,6 +10916,18 @@ table { z-index: 50; } + .sm\:z--3 { + z-index: -3; + } + + .sm\:z--2 { + z-index: -2; + } + + .sm\:z--1 { + z-index: -1; + } + .sm\:z-auto { z-index: auto; } @@ -13631,6 +13663,10 @@ table { margin-left: 1px; } + .md\:max-h-35 { + max-height: 35rem; + } + .md\:max-h-xs { max-height: 20rem; } @@ -16019,6 +16055,18 @@ table { z-index: 50; } + .md\:z--3 { + z-index: -3; + } + + .md\:z--2 { + z-index: -2; + } + + .md\:z--1 { + z-index: -1; + } + .md\:z-auto { z-index: auto; } @@ -18754,6 +18802,10 @@ table { margin-left: 1px; } + .lg\:max-h-35 { + max-height: 35rem; + } + .lg\:max-h-xs { max-height: 20rem; } @@ -21142,6 +21194,18 @@ table { z-index: 50; } + .lg\:z--3 { + z-index: -3; + } + + .lg\:z--2 { + z-index: -2; + } + + .lg\:z--1 { + z-index: -1; + } + .lg\:z-auto { z-index: auto; } @@ -23877,6 +23941,10 @@ table { margin-left: 1px; } + .xl\:max-h-35 { + max-height: 35rem; + } + .xl\:max-h-xs { max-height: 20rem; } @@ -26265,6 +26333,18 @@ table { z-index: 50; } + .xl\:z--3 { + z-index: -3; + } + + .xl\:z--2 { + z-index: -2; + } + + .xl\:z--1 { + z-index: -1; + } + .xl\:z-auto { z-index: auto; } diff --git a/tailwind.config.js b/tailwind.config.js index fcca5b7..2198485 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -625,6 +625,7 @@ module.exports = { */ maxHeight: { + '35': '35rem', xs: '20rem', sm: '30rem', md: '40rem', @@ -770,6 +771,9 @@ module.exports = { */ zIndex: { + '-3': -3, + '-2': -2, + '-1': -1, auto: 'auto', '0': 0, '10': 10,