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-helmet": "^5.2.0",
"react-responsive-mixin": "^0.4.0",
"react-typed": "^1.0.9",
"slideout": "^1.0.1",
"tiny-slider": "^2.8.3",
"tiny-slider-react": "0.3.4",
"typeface-quicksand": "^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": [
"gatsby"

4
src/components/Header.js
View File

@@ -7,7 +7,7 @@ import Button from './Button'
import './Header.css'
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 {
render() {
@@ -43,7 +43,7 @@ class Header extends Component {
<Button
text="Contact"
standard
classes="rounded-full font-medium text-black hover:shadow"
classes="rounded-full font-medium text-black-light hover:shadow"
url="/contact"
/>
</ul>

2
src/components/PageIntro.js
View File

@@ -30,7 +30,7 @@ const PageIntro = ({ ...props }) => (
{props.image && (
<img
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"
/>
)}

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 SectionIntro from '../components/SectionIntro'
const AboutPage = () => (
<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"
/>
import IntroImage from '../images/saburly-web-agency-group.jpg'
<section className="container mx-auto my-12 p-4">
<SectionIntro
headline="Meaning of Saburly"
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."
/>
</section>
class AboutPage extends Component {
componentDidMount() {
let tiltjs = require('vanilla-tilt')
tiltjs.init(document.querySelector('.postImgContainer'), {
max: 25,
speed: 400,
})
}
<section className="container mx-auto my-12 p-4">
<SectionIntro
headline="Our goal is long-term engagement"
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>
)
render() {
return (
<div>
<PageIntro
headline="Founded by developers"
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"
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

89
src/pages/contact.js
View File

@@ -11,57 +11,15 @@ import FormImage from '../images/contact-web-consultancy.svg'
const ContactPage = () => (
<div>
<PageIntro
intro="Contact"
headline="Where to find us"
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"
headline="Let's discover possibilities"
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"
sectionClasses="lg:mb-8"
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">
<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="rounded overflow-hidden shadow">
<img className="w-full" src={Stockholm} alt="Stockholm City" />
@@ -103,6 +61,47 @@ const ContactPage = () => (
</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>
</section>

10
src/pages/index.js
View File

@@ -7,6 +7,7 @@ import Service from '../components/Service'
import PageIntro from '../components/PageIntro'
import InfoBox from '../components/InfoBox'
import Technologies from '../components/Technologies'
import Typed from 'react-typed'
import ImgIntro from '../images/web-development-services-agency.svg'
import ImgDesign from '../images/ux-ui-design-company.svg'
@@ -26,17 +27,16 @@ const IndexPage = ({ ...props }) => (
buttonText="Let's Connect"
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"
intro="Welcome To Saburly"
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."
image={ImgIntro}
imgClasses="-mb-20 md:-mt-12"
/>
<Typed strings={['Here you can find anything']} typeSpeed={40} />
<main>
<section className="container mx-auto max-w-lg text-center my-12 p-4">
<SectionIntro
intro="What We Do"
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."
/>
@@ -76,7 +76,6 @@ const IndexPage = ({ ...props }) => (
<section className="container mx-auto max-w-lg text-center p-4 my-12">
<SectionIntro
intro="Clients"
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"
/>
@@ -107,10 +106,7 @@ const IndexPage = ({ ...props }) => (
</section>
<section className="text-center p-8 relative bg-saburly-lighter">
<SectionIntro
intro="Blog & Social Media"
headline="Occasionally we find the time to publish"
/>
<SectionIntro headline="Occasionally we find the time to publish" />
<div className="container mx-auto w-full md:flex md:flex-wrap items-stretch w-full">
{props.data.allWordpressPost.edges.map(({ node }) => (
<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>
<PageIntro
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"
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}
imgClasses="-mb-20 lg:-mt-12"
imgClasses="-mb-20 lg:-mt-12 md:p-10"
/>
<section className="px-4 py-16">
<div className="container mx-auto">

18
src/styles/general.css
View File

@@ -8,27 +8,17 @@
}
.bg-saburly-lighter {
background: rgba(235, 235, 234, 0.4);
background: RGBA(248, 248, 248, 1);
}
.bg-saburly-light {
background: linear-gradient(
90deg,
rgba(235, 235, 234, 0.4) 0%,
rgba(235, 235, 234, 0.4) 49%,
rgba(235, 235, 234, 0.4) 100%
);
background: #f8f8f8;
}
.bg-saburly-light-header {
background: #393990;
@media (min-width: 992px) {
background: linear-gradient(
90deg,
rgba(235, 235, 234, 0.4) 0%,
rgba(235, 235, 234, 0.4) 49%,
rgba(235, 235, 234, 0.4) 100%
);
background: RGBA(248, 248, 248, 1);
}
}
@@ -37,7 +27,7 @@
background: linear-gradient(
180deg,
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 (
<main>
<PageIntro
intro="Blog"
headline="We are busy coding"
text="but occasionally we find the time to have fun & publish stuff"
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"
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:
version "1.1.1"
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"
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:
version "0.0.4"
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"
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:
version "2.1.0"
resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd"
@@ -3393,7 +3412,7 @@ fb-watchman@^2.0.0:
dependencies:
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"
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
dependencies:
@@ -4445,6 +4464,10 @@ hoek@4.x.x:
version "4.2.1"
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:
version "2.5.5"
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"
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:
version "15.6.2"
resolved "https://registry.yarnpkg.com/react/-/react-15.6.2.tgz#dba0434ab439cfe82f108f0f511663908179aa72"
@@ -8967,6 +8998,23 @@ style-loader@^0.13.0:
dependencies:
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:
version "1.0.3"
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"
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:
version "0.0.6"
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"
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:
version "1.1.2"
resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"