Skip to content

Commit

Permalink
Merge pull request #104 from derangeddk/revops-services
Browse files Browse the repository at this point in the history 
Revamped revops page and revops services
  • Loading branch information
@maceq687
maceq687 authored Sep 10, 2024
2 parents 4718401 + 6bb3fee commit 677f5f1
Show file tree
Hide file tree
Showing 19 changed files with 769 additions and 535 deletions.
1 change: 1 addition & 0 deletions _includes/menu_links.html
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<a href="/">home</a>
<a href="/the-team">the team</a>
<a href="/cases">cases</a>
<a href="/revops">RevOps</a>
185 changes: 120 additions & 65 deletions _layouts/services.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,11 +40,15 @@
.header {
grid-template-columns: 1fr;
}
.header h1 {
margin-top: 4px;
font-size: 2em;
}
}
</style>
<section class="header">
<a href="/" class="logo">deranged</a>
<h1><a href="/revops#expertise">RevOps services</a></h1>
<h1><a href="/revops#services">RevOps services</a></h1>
</section>

<style>
Expand All @@ -53,7 +57,6 @@ <h1><a href="/revops#expertise">RevOps services</a></h1>
flex-direction: column;
align-items: flex-start;
text-align: left;
margin-bottom: 4em;
}

main .header-overlay,
Expand All @@ -65,90 +68,113 @@ <h1><a href="/revops#expertise">RevOps services</a></h1>
main .header-overlay {
position: absolute;
overflow: hidden;
margin-left: 100px;
background-color: #ecf0f1;
opacity: 0.6;
opacity: 0.5;
}
main .header-image {
object-fit: cover;
-webkit-filter: blur(1px);
filter: blur(1px);
opacity: 0.5;
filter: blur(2px);
opacity: 0.4;
}
main h1 {
text-align: left;
margin: 2em;
margin-left: 175px;
margin-bottom: 1em;
margin: 1.5em;
margin-left: 25px;
margin-right: 25px;
font-size: 4em;
font-weight: bold;
z-index: 1;
}
main section > .image-wrapper {
margin-left: 175px;
max-width: 650px;
main .flex-row {
display: flex;
width: 100%;
justify-content: center;
padding-top: 1.5em;
}
main .section-top {
display: flex;
align-items: center;
width: 1000px;
margin-top: 0;
padding-top: 1em;
}
main section > .image-wrapper > img {
main .section-top img {
max-height: 300px;
max-width: 600px;
padding-right: 2em;
}
main section > ul {
margin-left: 175px;
main section > .h2-wrapper {
display: flex;
flex-direction: row;
align-items: center;
}
main section > h2 {
main section h2 {
margin-bottom: 1em;
margin-top: 2em;
padding-right: 25px;
font-size: 2em;
font-weight: 200;
margin-left: 175px;
margin-top: 1em;
font-size: 2.1em;
font-weight: 900;
position: relative;
max-width: 700px;
color: #ecf0f1;
color: #2c3e50;
z-index: 2;
}
main section > h2:before {
content: "";
main section .h2-icon {
background: #2c3e50;
background-image: linear-gradient(40deg, #2c3e50 30%, #455d75 90%);
width: calc(100% + 25px);
max-width: 750px;
position: absolute;
top: -0.25em;
bottom: -0.25em;
left: 0;
z-index: -1;
transform: translate(-25px, -2px) rotate(-0.5deg);
}
main section > p,
main section > ul {
margin-left: 175px;
border-radius: 100%;
margin-right: 15px;
height: 60px;
width: 60px;
padding: 8px;
}
main section {
background-color: #fff;
width: 950px;
padding-left: 2em;
padding-right: 2em;
padding-bottom: 1em;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
main img.side-image {
object-fit: contain;
width: 40vw;
max-width: 650px;
margin-left: 1.2em;
margin-right: 1.2em;
}
main > section {
width: 100%;
box-sizing: border-box;
.contact {
display: flex;
background: #2c3e50;
background-image: linear-gradient(145deg, #2c3e50 30%, #1b2b3a 90%);
color: #eaf1f7;
font-size: 0.8em;
width: 100vw;
margin-left: -15px;
margin-right: -15px;
margin-top: 1em;
margin-bottom: -100px;
padding: 50px 50px 50px 70px;
}
.contact .side-explanation {
padding: 15px;
}
main p.sidenote {
background: #ecf0f1;
border: 1px solid #070d14;
font-size: 0.8em;
padding: 25px;
max-width: 650px;
margin-left: 175px;
color: white;
background-image: linear-gradient(40deg, #2c3e50 30%, #455d75 90%);
font-size: 1.1em;
padding: 20px;
}

@media (max-width: 1100px) {
main h1 {
margin-left: 20px;
main {
padding-bottom: 20px;
}
main section > h2 {
main h1 {
margin-left: 20px;
}
main section > p {
margin-left: 20px;
main section {
margin-left: 0;
}
main .header-overlay,
main .header-image {
Expand All @@ -157,15 +183,32 @@ <h1><a href="/revops#expertise">RevOps services</a></h1>
main .header-overlay {
margin-left: -15px;
}
main section > .image-wrapper,
main section > ul,
main section > p.sidenote {
margin-left: 20px;
main .section-top {
flex-wrap: wrap;
justify-content: center;
}
main .section-top img {
padding-right: 0;
}
main .flex-row {
flex-wrap: wrap;
padding-top: 1em;
}
main img.side-image {
order: 2;
padding: 1em;
height: 300px;
width: 450px;
max-width: 100vw;
}
.contact {
margin-bottom: -20px;
}
}
@media (max-width: 950px) {
main h1 {
font-size: 3.5em;
margin: 1em;
}
main h1 br {
display: none;
Expand All @@ -174,28 +217,37 @@ <h1><a href="/revops#expertise">RevOps services</a></h1>
main .header-image {
height: 240px;
}
main section > .image-wrapper > img {
main .section-top img {
max-height: 200px;
max-width: 400px;
}
.contact {
padding: 30px;
flex-wrap: wrap;
}
}
@media (max-width: 600px) {
main h1 {
font-size: 3em;
font-size: 2.5em;
}
main .header-overlay,
main .header-image {
display: none;
}
main section > .image-wrapper > img {
main .section-top img {
max-width: 400px;
}
main section .h2-icon {
width: 40px;
height: 40px;
padding: 5px;
}
}
@media (max-width: 450px) {
main {
font-size: 1.1em;
}
main section > .image-wrapper > img {
main .section-top img {
max-width: 200px;
}
}
Expand All @@ -206,15 +258,18 @@ <h1><a href="/revops#expertise">RevOps services</a></h1>
</style>

<main>
<div class="header-overlay" style="background-color: {{ page.color }};">
<img src="{{ page.header-img }}" class="header-image" alt="" />
<div class="flex-row">
<div class="header-overlay" style="background-color: {{ page.color }};">
<img src="{{ page.header-img }}" class="header-image" alt="" />
</div>
<h1>{{ page.title }}</h1>
</div>
<h1>{{ page.title }}</h1>
<section>
<div class="image-wrapper">
<div class="flex-row">
<section class="section-top">
<img src="{{ page.icon }}" alt="{{ page.alt }}" />
</div>
</section>
<div>{{ page.top-section }}</div>
</section>
</div>
{{ content }}
</main>

Expand Down
100 changes: 100 additions & 0 deletions _services/automation.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
---
layout: services
name: automation
title: Automation services
icon: "/img/RevOps.svg"
alt: "burning stopwatch"
meta: "Unlock your business's potential with tailored automation. We streamline operations using HubSpot, Pipedrive, Zapier, and AI, driving revenue growth while reducing manual tasks efficiently."
excerpt: "Unlock tailored business process automation strategies to help your business drive sustainable growth through the power of automation. We work with you to identify bottlenecks and resolve them using powerful automation tools like HubSpot, Pipedrive and Zapier."
header-img: "/img/blank-notepad.jpg"
top-section: "<p>Automation isn’t a one-size-fits-all solution, a tailored strategy will help your business unlock its full potential.</p>
<p>That’s where our Business Process Automation expertise makes all the difference.</p>"
---

<div class="flex-row">
<section>
<div class="h2-wrapper">
<img src="/img/build-icon.svg" class="h2-icon" />
<h2>Our Services</h2>
</div>
<p>
Whether you’re automating from scratch or looking to refine your existing
business automations, our team seamlessly integrates with your business to
identify bottlenecks and resolve them through analysis, automations and
AI.
</p>
<p>Our services include:</p>
<ul>
<li>Business Process Automation</li>
<li>Sales Process Automation</li>
<li>Marketing Automation</li>
<li>Customer Success Optimization</li>
<li>CRM Automation</li>
</ul>
<p>
Our automation services focus on key components of your tech stack, and
getting them to work together through the use of Automation tools such as
Customer Relationship Management (CRM) Systems Pipedrive and HubSpot,
Marketing Automation Platforms like HubSpot Marketing Hub, Sales
Automation Tools like Pipedrive’s Sales Automation System, Workflow
Automation Platforms like Zapier, Email and Communication Automation tools
like Pipedrive’s Campaigns feature and HubSpot’s Workflow Automations, and
more.
</p>
<p>
By leveraging these advanced technologies we streamline your business
processes, reduce manual tasks, and drive sustainable growth—saving you
valuable time and resources.
</p>
</section>
<img class="side-image" src="/img/meeting-room-original.jpg" />
</div>

<div class="flex-row">
<img class="side-image" src="/img/business-man-away.jpg" />
<section>
<div class="h2-wrapper">
<img src="/img/explore-icon.svg" class="h2-icon" />
<h2>Why choose us</h2>
</div>
<p>
We work directly with you and your teams to understand your businesses
unique goals and identify opportunities for automation that can streamline
operations and drive growth.
</p>
<p>
We have run, and automated, our own successful companies - we know
firsthand the common pitfalls businesses encounter. Our expertise allows
us to help you avoid those obstacles through smart automation strategies.
</p>
<p>
We have certified technical expertise in automation platforms such as
<a href="/hubspot">HubSpot</a>, <a href="/pipedrive">Pipedrive</a>, and
other leading systems. Through these partnerships, we implement custom
automation solutions tailored to your business needs
</p>
<p>
We specialise in working with startups and scaleups and understand the
importance of early growth stages. We’ll help you build a scalable
automation framework that ensures long-term success and sustainable
growth.
</p>
<p>
Plug and Play Expertise. We hit the ground running, quickly integrating
into new companies and optimizing business processes through automation.
Our ability to automate and streamline processes helps you achieve results
fast.
</p>
<p>
Partnering with us means turning your revenue goals into efficient,
automated workflows. Our team will swiftly implement these strategies,
streamlining your operations through automation.
</p>
<p>
We also offer <a href="/">DevOps services</a> so should you require
technical leadership, technical counseling or pair programming and
coaching we are your dev team.
</p>
<p class="sidenote">Let's start building your business...</p>
</section>
</div>
Loading

0 comments on commit 677f5f1

Please sign in to comment.