senaduka/old-v2-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adding about us page styling and images

Browse Source
This commit is contained in:
Moris Zen
2018-08-23 22:00:23 +02:00
parent 96b6375740
commit 29b668b2e1
11 changed files with 152 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@@ -15,12 +15,14 @@
"react-headroom": "^2.2.2", "react-headroom": "^2.2.2",
"react-helmet": "^5.2.0", "react-helmet": "^5.2.0",
"react-responsive-mixin": "^0.4.0", "react-responsive-mixin": "^0.4.0",
"react-typed": "^1.0.9",
"slideout": "^1.0.1", "slideout": "^1.0.1",
"tiny-slider": "^2.8.3", "tiny-slider": "^2.8.3",
"tiny-slider-react": "0.3.4", "tiny-slider-react": "0.3.4",
"typeface-quicksand": "^0.0.54", "typeface-quicksand": "^0.0.54",
"typeface-roboto": "^0.0.54", "typeface-roboto": "^0.0.54",
"typeface-roboto-condensed": "^0.0.54" "typeface-roboto-condensed": "^0.0.54",
"vanilla-tilt": "^1.4.1"
}, },
"keywords": [ "keywords": [
"gatsby" "gatsby"

4
src/components/Header.js
View File

@@ -7,7 +7,7 @@ import Button from './Button'
import './Header.css' import './Header.css'
let menuClasses = let menuClasses =
'no-underline mt-4 lg:inline-block opacity-80 text-black font-medium lg:mt-0 hover:opacity-100 uppercase mr-4' 'no-underline mt-4 lg:inline-block text-black-light font-medium lg:mt-0 hover:opacity-70 uppercase mr-4'
class Header extends Component { class Header extends Component {
render() { render() {
@@ -43,7 +43,7 @@ class Header extends Component {
<Button <Button
text="Contact" text="Contact"
standard standard
classes="rounded-full font-medium text-black hover:shadow" classes="rounded-full font-medium text-black-light hover:shadow"
url="/contact" url="/contact"
/> />
</ul> </ul>

2
src/components/PageIntro.js
View File

@@ -30,7 +30,7 @@ const PageIntro = ({ ...props }) => (
{props.image && ( {props.image && (
<img <img
src={props.image} src={props.image}
className={`${props.imgClasses} md:max-w-md mx-auto lg:p-8 z-10`} className={`${props.imgClasses} md:max-h-sm md:max-w-md mx-auto z-10`}
alt="Software Development Agency" alt="Software Development Agency"
/> />
)} )}

BIN
src/images/saburly-web-agency-group.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 430 KiB

60
src/pages/about.js
View File

@@ -1,31 +1,45 @@
import React from 'react' import React, { Component } from 'react'
import PageIntro from '../components/PageIntro' import PageIntro from '../components/PageIntro'
import SectionIntro from '../components/SectionIntro' import SectionIntro from '../components/SectionIntro'
const AboutPage = () => ( import IntroImage from '../images/saburly-web-agency-group.jpg'
<div>
<PageIntro
intro="About Us"
headline="Founded by software engineers"
text="focused on creating solutions that make valuable impact"
sectionClasses="mb-16 lg:mb-8"
/>
<section className="container mx-auto my-12 p-4"> class AboutPage extends Component {
<SectionIntro componentDidMount() {
headline="Meaning of Saburly" let tiltjs = require('vanilla-tilt')
text="Cillum non quis aliquip ullamco consectetur ullamco voluptate ad enim qui voluptate officia qui. Ut duis consectetur consectetur culpa sint proident irure magna ipsum. Consectetur magna exercitation sunt Lorem amet quis." tiltjs.init(document.querySelector('.postImgContainer'), {
/> max: 25,
</section> speed: 400,
})
}
<section className="container mx-auto my-12 p-4"> render() {
<SectionIntro return (
headline="Our goal is long-term engagement" <div>
text="We are a small company with a personal touch that knows our stuff. Our people have T-shaped profiles which means that they combine a deep specialism with a broad range of knowledge and skills." <PageIntro
/> headline="Founded by developers"
</section> text="Saburly was born in 2017 by experienced developers. We know the challenges and pitfalls when creating modern software. Focused on creating solutions that make valuable impact"
</div> image={IntroImage}
) imgClasses="border-white border-8 rounded postImgContainer -mb-12"
/>
<section className="container mx-auto my-12 p-4">
<SectionIntro
headline="Meaning of Saburly"
text="Patience = Our goal is long-term engagement."
/>
</section>
<section className="container mx-auto my-12 p-4">
<SectionIntro
headline="The Team"
text="We are a small company with a personal touch that knows our stuff. Our people have T-shaped profiles which means that they combine a deep specialism with a broad range of knowledge and skills."
/>
</section>
</div>
)
}
}
export default AboutPage export default AboutPage

89
src/pages/contact.js
View File

@@ -11,57 +11,15 @@ import FormImage from '../images/contact-web-consultancy.svg'
const ContactPage = () => ( const ContactPage = () => (
<div> <div>
<PageIntro <PageIntro
intro="Contact" headline="Let's discover possibilities"
headline="Where to find us" text="We are always on a lookout for exciting challenges. Feel free to contact us if you want to start something great or just find out more about what we do"
text="We are always on a lookout for exciting challenges and new contacts. If you want to start something great or just find out more about what we do, send us a message. Reinventing your presence in the connected world is just a few characters away"
sectionClasses="lg:mb-8" sectionClasses="lg:mb-8"
image={ContactImage} image={ContactImage}
imgClasses="-mb-20 lg:-mt-12" imgClasses="-mb-20 lg:-mt-12 tilted md:p-10"
/> />
<section className="container mx-auto my-12 p-4"> <section className="container mx-auto my-12 p-4">
<div className="md:flex"> <div className="md:flex">
<div className="p-2 text-center">
<div className="rounded overflow-hidden shadow">
<img className="w-full" src={Sarajevo} alt="Sarajevo City" />
<div className="px-6 py-4">
<div className="uppercase font-medium text-xl mb-6">
office in Sarajevo
</div>
<div className="md:flex text-left justify-around text-base">
<div>
<h4 className="text-black">Adress</h4>
<p className="text-black-light">
Saburly d.o.o <br />
Hakije Turajlica 2 <br />
71 000 Sarajevo <br />
Bosnia & Herzegovina <br />
</p>
</div>
<div>
<h4 className="text-black">Contact</h4>
<p className="text-black-light">
Phone:{' '}
<a
className="text-purple-dark hover:text-purple-light no-underline"
href="tel:+38761909238"
>
+38761909238
</a>{' '}
<br />
E-mail:{' '}
<a
className="text-purple-dark hover:text-purple-light no-underline"
href="mailto:bosnia@saburly.com"
>
bosnia@saburly.com
</a>{' '}
</p>
</div>
</div>
</div>
</div>
</div>
<div className="p-2 text-center"> <div className="p-2 text-center">
<div className="rounded overflow-hidden shadow"> <div className="rounded overflow-hidden shadow">
<img className="w-full" src={Stockholm} alt="Stockholm City" /> <img className="w-full" src={Stockholm} alt="Stockholm City" />
@@ -103,6 +61,47 @@ const ContactPage = () => (
</div> </div>
</div> </div>
</div> </div>
<div className="p-2 text-center">
<div className="rounded overflow-hidden shadow">
<img className="w-full" src={Sarajevo} alt="Sarajevo City" />
<div className="px-6 py-4">
<div className="uppercase font-medium text-xl mb-6">
office in Sarajevo
</div>
<div className="md:flex text-left justify-around text-base">
<div>
<h4 className="text-black">Adress</h4>
<p className="text-black-light">
Saburly d.o.o <br />
Hakije Turajlica 2 <br />
71 000 Sarajevo <br />
Bosnia & Herzegovina <br />
</p>
</div>
<div>
<h4 className="text-black">Contact</h4>
<p className="text-black-light">
Phone:{' '}
<a
className="text-purple-dark hover:text-purple-light no-underline"
href="tel:+38761909238"
>
+38761909238
</a>{' '}
<br />
E-mail:{' '}
<a
className="text-purple-dark hover:text-purple-light no-underline"
href="mailto:bosnia@saburly.com"
>
bosnia@saburly.com
</a>{' '}
</p>
</div>
</div>
</div>
</div>
</div>
</div> </div>
</section> </section>

10
src/pages/index.js
View File

@@ -7,6 +7,7 @@ import Service from '../components/Service'
import PageIntro from '../components/PageIntro' import PageIntro from '../components/PageIntro'
import InfoBox from '../components/InfoBox' import InfoBox from '../components/InfoBox'
import Technologies from '../components/Technologies' import Technologies from '../components/Technologies'
import Typed from 'react-typed'
import ImgIntro from '../images/web-development-services-agency.svg' import ImgIntro from '../images/web-development-services-agency.svg'
import ImgDesign from '../images/ux-ui-design-company.svg' import ImgDesign from '../images/ux-ui-design-company.svg'
@@ -26,17 +27,16 @@ const IndexPage = ({ ...props }) => (
buttonText="Let's Connect" buttonText="Let's Connect"
url="/contact" url="/contact"
buttonClasses="text-white font-normal shadow hover:shadow-md rounded-full mt-4 font-light bg-teal hover:bg-teal-dark mb-20" buttonClasses="text-white font-normal shadow hover:shadow-md rounded-full mt-4 font-light bg-teal hover:bg-teal-dark mb-20"
intro="Welcome To Saburly"
headline="We build delightful software" headline="We build delightful software"
text="We're a team of experienced, creative and passionate engineers. Our mission is to make you stand out and gain competitive advantages with the help of modern technologies." text="We're a team of experienced, creative and passionate engineers. Our mission is to make you stand out and gain competitive advantages with the help of modern technologies."
image={ImgIntro} image={ImgIntro}
imgClasses="-mb-20 md:-mt-12" imgClasses="-mb-20 md:-mt-12"
/> />
<Typed strings={['Here you can find anything']} typeSpeed={40} />
<main> <main>
<section className="container mx-auto max-w-lg text-center my-12 p-4"> <section className="container mx-auto max-w-lg text-center my-12 p-4">
<SectionIntro <SectionIntro
intro="What We Do"
headline="Because great code makes our heart pound" headline="Because great code makes our heart pound"
text="We have a deep passion for cutting edge technologies and incredible user experiences. Our experienced engineers deliver custom end-to-end software solutions daily and can even help you with initial analysis, architecture design, testing and deployments." text="We have a deep passion for cutting edge technologies and incredible user experiences. Our experienced engineers deliver custom end-to-end software solutions daily and can even help you with initial analysis, architecture design, testing and deployments."
/> />
@@ -76,7 +76,6 @@ const IndexPage = ({ ...props }) => (
<section className="container mx-auto max-w-lg text-center p-4 my-12"> <section className="container mx-auto max-w-lg text-center p-4 my-12">
<SectionIntro <SectionIntro
intro="Clients"
headline="With ambitious projects comes great responsibility" headline="With ambitious projects comes great responsibility"
text="By thinking big, designing smart and developing fast, we have helped organizations of various sizes bring life to ideas and existing products. We're now eager to hear what challenges you have for us" text="By thinking big, designing smart and developing fast, we have helped organizations of various sizes bring life to ideas and existing products. We're now eager to hear what challenges you have for us"
/> />
@@ -107,10 +106,7 @@ const IndexPage = ({ ...props }) => (
</section> </section>
<section className="text-center p-8 relative bg-saburly-lighter"> <section className="text-center p-8 relative bg-saburly-lighter">
<SectionIntro <SectionIntro headline="Occasionally we find the time to publish" />
intro="Blog & Social Media"
headline="Occasionally we find the time to publish"
/>
<div className="container mx-auto w-full md:flex md:flex-wrap items-stretch w-full"> <div className="container mx-auto w-full md:flex md:flex-wrap items-stretch w-full">
{props.data.allWordpressPost.edges.map(({ node }) => ( {props.data.allWordpressPost.edges.map(({ node }) => (
<div key={node.id} className="md:w-1/2 p-2"> <div key={node.id} className="md:w-1/2 p-2">

3
src/pages/services.js
View File

@@ -15,11 +15,10 @@ const ServicesPage = () => (
<div> <div>
<PageIntro <PageIntro
buttonClasses="text-white font-normal shadow hover:shadow-md rounded-full mt-4 font-light bg-teal hover:bg-teal-dark mb-20" buttonClasses="text-white font-normal shadow hover:shadow-md rounded-full mt-4 font-light bg-teal hover:bg-teal-dark mb-20"
intro="What We Do"
headline="Agile Practitioners" headline="Agile Practitioners"
text="At Saburly we embrace Agile’s methodologies for every project and business environment, no matter the size, scale, or complexity. Our flexible processes ensure high productivity and we know how to balance between cost, time and quality." text="At Saburly we embrace Agile’s methodologies for every project and business environment, no matter the size, scale, or complexity. Our flexible processes ensure high productivity and we know how to balance between cost, time and quality."
image={WebdevServices} image={WebdevServices}
imgClasses="-mb-20 lg:-mt-12" imgClasses="-mb-20 lg:-mt-12 md:p-10"
/> />
<section className="px-4 py-16"> <section className="px-4 py-16">
<div className="container mx-auto"> <div className="container mx-auto">

18
src/styles/general.css
View File

@@ -8,27 +8,17 @@
} }
.bg-saburly-lighter { .bg-saburly-lighter {
background: rgba(235, 235, 234, 0.4); background: RGBA(248, 248, 248, 1);
} }
.bg-saburly-light { .bg-saburly-light {
background: linear-gradient( background: #f8f8f8;
90deg,
rgba(235, 235, 234, 0.4) 0%,
rgba(235, 235, 234, 0.4) 49%,
rgba(235, 235, 234, 0.4) 100%
);
} }
.bg-saburly-light-header { .bg-saburly-light-header {
background: #393990; background: #393990;
@media (min-width: 992px) { @media (min-width: 992px) {
background: linear-gradient( background: RGBA(248, 248, 248, 1);
90deg,
rgba(235, 235, 234, 0.4) 0%,
rgba(235, 235, 234, 0.4) 49%,
rgba(235, 235, 234, 0.4) 100%
);
} }
} }
@@ -37,7 +27,7 @@
background: linear-gradient( background: linear-gradient(
180deg, 180deg,
rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 0%,
rgba(235, 235, 234, 0.4) 100% rgba(248, 248, 248, 1) 100%
); );
} }

1
src/templates/blog.js
View File

@@ -10,7 +10,6 @@ class Blog extends Component {
return ( return (
<main> <main>
<PageIntro <PageIntro
intro="Blog"
headline="We are busy coding" headline="We are busy coding"
text="but occasionally we find the time to have fun & publish stuff" text="but occasionally we find the time to have fun & publish stuff"
sectionClasses="mb-16 lg:mb-4" sectionClasses="mb-16 lg:mb-4"

58
yarn.lock
View File

@@ -1691,6 +1691,13 @@ buffer@^4.3.0, buffer@^4.9.0:
ieee754 "^1.1.4" ieee754 "^1.1.4"
isarray "^1.0.0" isarray "^1.0.0"
buffer@^5.0.3:
version "5.2.0"
resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.2.0.tgz#53cf98241100099e9eeae20ee6d51d21b16e541e"
dependencies:
base64-js "^1.0.2"
ieee754 "^1.1.4"
builtin-modules@^1.0.0: builtin-modules@^1.0.0:
version "1.1.1" version "1.1.1"
resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f" resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
@@ -2344,6 +2351,10 @@ css-color-function@^1.2.0:
debug "^3.1.0" debug "^3.1.0"
rgb "~0.1.0" rgb "~0.1.0"
css-color-keywords@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
css-color-names@0.0.4: css-color-names@0.0.4:
version "0.0.4" version "0.0.4"
resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0" resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
@@ -2382,6 +2393,14 @@ css-selector-tokenizer@^0.7.0:
fastparse "^1.1.1" fastparse "^1.1.1"
regexpu-core "^1.0.0" regexpu-core "^1.0.0"
css-to-react-native@^2.0.3:
version "2.2.1"
resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.2.1.tgz#7f3f4c95de65501b8720c87bf0caf1f39073b88e"
dependencies:
css-color-keywords "^1.0.0"
fbjs "^0.8.5"
postcss-value-parser "^3.3.0"
css-what@2.1: css-what@2.1:
version "2.1.0" version "2.1.0"
resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd" resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd"
@@ -3393,7 +3412,7 @@ fb-watchman@^2.0.0:
dependencies: dependencies:
bser "^2.0.0" bser "^2.0.0"
fbjs@^0.8.14, fbjs@^0.8.9: fbjs@^0.8.14, fbjs@^0.8.5, fbjs@^0.8.9:
version "0.8.17" version "0.8.17"
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd" resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
dependencies: dependencies:
@@ -4445,6 +4464,10 @@ hoek@4.x.x:
version "4.2.1" version "4.2.1"
resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.1.tgz#9634502aa12c445dd5a7c5734b572bb8738aacbb" resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.1.tgz#9634502aa12c445dd5a7c5734b572bb8738aacbb"
hoist-non-react-statics@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz#aa448cf0986d55cc40773b17174b7dd066cb7cfb"
hoist-non-react-statics@^2.5.0: hoist-non-react-statics@^2.5.0:
version "2.5.5" version "2.5.5"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
@@ -7693,6 +7716,14 @@ react-side-effect@^1.1.0:
exenv "^1.2.1" exenv "^1.2.1"
shallowequal "^1.0.1" shallowequal "^1.0.1"
react-typed@^1.0.9:
version "1.0.9"
resolved "https://registry.yarnpkg.com/react-typed/-/react-typed-1.0.9.tgz#ad06dc0c7283b1869b9f0e012244ab3eb1a03be1"
dependencies:
prop-types "^15.6.0"
styled-components "^2.2.4"
typed.js "^2.0.6"
react@^15.6.0: react@^15.6.0:
version "15.6.2" version "15.6.2"
resolved "https://registry.yarnpkg.com/react/-/react-15.6.2.tgz#dba0434ab439cfe82f108f0f511663908179aa72" resolved "https://registry.yarnpkg.com/react/-/react-15.6.2.tgz#dba0434ab439cfe82f108f0f511663908179aa72"
@@ -8967,6 +8998,23 @@ style-loader@^0.13.0:
dependencies: dependencies:
loader-utils "^1.0.2" loader-utils "^1.0.2"
styled-components@^2.2.4:
version "2.4.1"
resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-2.4.1.tgz#663bd0485d4b6ab46f946210dc03d2398d1ade74"
dependencies:
buffer "^5.0.3"
css-to-react-native "^2.0.3"
fbjs "^0.8.9"
hoist-non-react-statics "^1.2.0"
is-plain-object "^2.0.1"
prop-types "^15.5.4"
stylis "^3.4.0"
supports-color "^3.2.3"
stylis@^3.4.0:
version "3.5.3"
resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.3.tgz#99fdc46afba6af4deff570825994181a5e6ce546"
sum-up@^1.0.1: sum-up@^1.0.1:
version "1.0.3" version "1.0.3"
resolved "https://registry.yarnpkg.com/sum-up/-/sum-up-1.0.3.tgz#1c661f667057f63bcb7875aa1438bc162525156e" resolved "https://registry.yarnpkg.com/sum-up/-/sum-up-1.0.3.tgz#1c661f667057f63bcb7875aa1438bc162525156e"
@@ -9319,6 +9367,10 @@ type-of@^2.0.1:
version "2.0.1" version "2.0.1"
resolved "https://registry.yarnpkg.com/type-of/-/type-of-2.0.1.tgz#e72a1741896568e9f628378d816d6912f7f23972" resolved "https://registry.yarnpkg.com/type-of/-/type-of-2.0.1.tgz#e72a1741896568e9f628378d816d6912f7f23972"
typed.js@^2.0.6:
version "2.0.9"
resolved "https://registry.yarnpkg.com/typed.js/-/typed.js-2.0.9.tgz#2e4e590466938ecb2ef5ec966a79b2d9381495ff"
typedarray@^0.0.6: typedarray@^0.0.6:
version "0.0.6" version "0.0.6"
resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
@@ -9568,6 +9620,10 @@ value-equal@^0.4.0:
version "0.4.0" version "0.4.0"
resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-0.4.0.tgz#c5bdd2f54ee093c04839d71ce2e4758a6890abc7" resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-0.4.0.tgz#c5bdd2f54ee093c04839d71ce2e4758a6890abc7"
vanilla-tilt@^1.4.1:
version "1.4.1"
resolved "https://registry.yarnpkg.com/vanilla-tilt/-/vanilla-tilt-1.4.1.tgz#7dae5fe5904c160140b92e586a1ddd81c93bc4a9"
vary@~1.1.2: vary@~1.1.2:
version "1.1.2" version "1.1.2"
resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc" resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"