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

Restructuring and styling services and index pages

Browse Source
This commit is contained in:
Moris Zen
2018-08-08 18:10:40 +02:00
parent 53e87a903b
commit 955b05667e
12 changed files with 419 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/pages/index.js
View File

@@ -36,7 +36,7 @@ const IndexPage = ({ ...props }) => (
<main>
<section className="container mx-auto max-w-lg text-center my-12 p-4">
<SectionIntro
intro="What We Offer"
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."
/>
@@ -114,12 +114,12 @@ const IndexPage = ({ ...props }) => (
/>
</section>
<section className="text-center p-8 relative bg-saburly-fadeout-up">
<section className="text-center p-8 relative bg-saburly-fadeout">
<SectionIntro
intro="Blog & Social Media"
headline="Occasionally we find the time to have fun and publish"
/>
<div className="container mx-auto p-4 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 }) => (
<div key={node.id} className="md:w-1/2 p-2">
<Card

145
src/pages/services.js
View File

@@ -7,8 +7,9 @@ import WorkStyle from '../components/WorkStyle'
import Technologies from '../components/Technologies'
import FullstackDev from '../images/fullstack-web-development.svg'
import WebdevServices from '../images/web-development-services.svg'
import WebdevServices from '../images/web-development-services-company.svg'
import UXdesign from '../images/ux-ui-design-services.svg'
import HowWeWork from '../images/how-we-work.svg'
const ServicesPage = () => (
<div>
@@ -24,33 +25,75 @@ const ServicesPage = () => (
image={WebdevServices}
imgClasses="-mb-16 md:-mt-6"
/>
<section className="relative">
<section className="py-16">
<div className="container mx-auto">
<SectionIntro
classes="text-center"
headline="Full-stack software development"
/>
<div className="flex">
<div className="lg:flex">
<SectionIntro
classes="max-w-lg"
headline="Design services"
text="At Saburly, we offer consistent quality that extends to every section of the application development. Our approach is simple: focus on how users might use the product
in the best way possible. The solutions are usually shaped
through iterative processes of research, prototyping and
testing. All devices and screen sizes are welcome
here."
>
<div className="my-4">
<h3 className="font-medium text-black">
Conceptualization & Branding
</h3>
<p className="font-light leading-normal text-black-light">
Before our designers work on visual details, we start off by
creating a clear understanding of the problem that you're trying
to solve with the project. After collecting and analyzing data,
we develop concept that becomes a guideline for the design.
</p>
</div>
<div className="my-4">
<h3 className="font-medium text-black">UX & UI Design</h3>
<p className="font-light leading-normal text-black-light">
We love to design pixel-perfect products that are easy to use
and delightful to interact with. From User-Flows, Lo-Fi & Hi-Fi
Wireframes and Prototypes to polished slick end-products, we
create digital experiences that stand out. This is done through
our human-centered UI/UI approach where the main goal is to
effectively communicate the functionality of your product to its
target audience.
</p>
</div>
</SectionIntro>
<img
src={UXdesign}
className="-mt-12"
alt="User Experience Design Agency"
/>
</div>
</div>
</section>
<section className="relative bg-saburly-lighter py-16">
<div className="container mx-auto">
<div className="lg:flex">
<img
src={FullstackDev}
className="w-full md:max-w-md mx-auto text-center content-center align-center p-8 -mb-16"
className="w-full md:max-w-md mx-auto text-center content-center align-center p-8"
alt="Fullstack Web Development Agency"
/>
<div>
<div className="border rounded p-4 my-4">
<h3 className="opacity-30">Web Development</h3>
<p className="font-light leading-normal opacity-70 mt-4">
<SectionIntro
headline="Full-stack software development"
text="From infrastructure to AI, we develop data-driven Full-Stack applications for both custom software and third party solutions."
/>
<div className="my-4">
<h3 className="font-medium text-black">Web development</h3>
<p className="font-light leading-normal text-black-light">
We offer full-cycle web development services for the connected
world. Our talented developers work with popular languages and
are up to speed with cutting edge trends. The solutions provided
are both for custom web development solutions and extensions for
third party solutions.
are up to speed with cutting edge trends.
</p>
</div>
<div className="border rounded p-4 my-4">
<h3 className="opacity-30">Mobile & Desktop applications</h3>
<p className="font-light leading-normal opacity-70 mt-4">
<div className="my-4">
<h3 className="font-medium text-black">Mobile & desktop apps</h3>
<p className="font-light leading-normal text-black-light">
Building competitive applications these days is challenging, but
we believe that we have what it takes for both native languages
and hybrid solutions. Native mobile solutions for iOS are built
@@ -59,24 +102,26 @@ const ServicesPage = () => (
Electron to build cross-platform apps.
</p>
</div>
<div className="border rounded p-4 my-4">
<h3 className="opacity-30">AI & Blockchain</h3>
<p className="font-light leading-normal opacity-70 mt-4">
Building competitive applications these days is challenging, but
we believe that we have what it takes for both native languages
and hybrid solutions. Native mobile solutions for iOS are built
with Swift & Objective-C and Android solutions are built with
Java & Kotlin. We love using technologies like React Native and
Electron to build cross-platform apps.
<div className="my-4">
<h3 className="font-medium text-black">DevOps</h3>
<p className="font-light leading-normal text-black-light">
Our DevOps team has experience working with the world leading
hosting providers such as AWS and Google Cloud Platform. We
offer setups and automation to support delivery across all our
applications. We use the most up-to-date tools to enable stable
and predictable processes of continuous delivery.
</p>
</div>
</div>
</div>
<div className="border rounded p-4 my-4">
<h3 className="opacity-30">Technologies</h3>
<p className="font-light leading-normal opacity-70 mt-4">
Keeping track of emerging technologies is important to us so that we
can deliver forward-thinking solutions, but we understand that
<div className="p-8 my-4 bg-white border-bottom-saburly">
<h3 className="font-medium text-black">Emerging Technologies</h3>
<p className="font-light text-black-light leading-normal">
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
@@ -87,33 +132,19 @@ const ServicesPage = () => (
</div>
</section>
<section className="bg-saburly-fadeout-up">
<div className="container mx-auto">
<div className="md:flex">
<SectionIntro
classes="max-w-lg"
headline="UX & UI Design"
text="At Saburly, we offer consistent quality that extends to every section of the application development. All devices and screen sizes are welcome
here."
>
<p className="font-light leading-normal opacity-70 mt-4">
Our approach is simple: focus on how users might use the product
in the best way possible.. The solutions are usually shaped
through iterative processes of research, prototyping and testing.
</p>
</SectionIntro>
<img src={UXdesign} alt="User Experience Design Agency" />
</div>
</div>
</section>
<div className="bg-saburly-fadeout-up p-4">
<section className="container mx-auto mt-8 max-w-lg text-center">
<div className="py-16 bg-saburly-fadeout">
<div className="container mx-auto lg:flex">
<SectionIntro
headline="How We Work"
text="We are helping everything from Fortune 500 companies to startups and tailor our processes based on your scale and needs. We collaborate closely with our clients at each step of the development process and make sure that the solutions deliver great value and meets your specific business requirements"
headline="Flexible Workflow"
text="We are helping everything from Fortune 500 companies to startups
and tailor our processes based on your scale and needs. We
collaborate closely with our clients at each step of the
development process and make sure that the solutions deliver great
value and meets your specific business requirements"
classes="container mx-auto"
/>
</section>
<img src={HowWeWork} className="lg:-mt-12" alt="DevOps Agency" />
</div>
<WorkStyle />
</div>
</div>