Skip to content

Commit 30abc96

Browse files
pandu-apsispandu-apsis
authored
Merge pull request #57 from apsislabs/pandu/services2
Services page revamp
2 parents ce97bef + 903a589 commit 30abc96

File tree

4 files changed

+261
-103
lines changed

4 files changed

+261
-103
lines changed

‎src/components/ServicesSection.tsx‎

Lines changed: 115 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -1,115 +1,130 @@
1-
import dynamic from 'next/dynamic';
2-
import { ServiceRow } from "./ServiceRow";
1+
import dynamic from "next/dynamic";
32
import { StylizedSvg } from "./StylizedSvg";
3+
import { StageRow } from "./StageRow";
4+
import Link from "next/link";
45

5-
const DesignSvg = dynamic(() => import("/public/img/services/discovery.svg"), { ssr: false });
6-
const DevSvg = dynamic(() => import("/public/img/services/rocket.svg"), { ssr: false });
7-
const TeamSvg = dynamic(() => import("/public/img/services/team.svg"), { ssr: false });
8-
const ToolsSvg = dynamic(() => import("/public/img/services/tools.svg"), { ssr: false });
6+
7+
const StartUpSvg = dynamic(() => import("/public/img/home/startup.svg"), {
8+
ssr: false,
9+
});
10+
const StepUpSvg = dynamic(() => import("/public/img/home/stepup.svg"), {
11+
ssr: false,
12+
});
913

1014
export const ServicesSection = () => {
1115
return (
1216
<>
13-
<ServiceRow
14-
listColumns
15-
variant="blue"
16-
title="Software &amp; Devops"
17-
img={<StylizedSvg variant="blue" SvgComponent={DevSvg} />}
18-
alt="Image of a Laptop for Software & Devops"
19-
content={
20-
<p>
21-
Our bread and butter; as a team we have almost 40 years experience
22-
building software of all sorts: front-end, back-end, you name it. If
23-
you can dream it up, we can help you{" "}
24-
<strong>build it, deploy it, and scale it</strong> to tens of
25-
thousands of happy users.
26-
</p>
27-
}
28-
listItems={[
29-
"Web sites & apps",
30-
"iOS & Android",
31-
"HIPAA-compliant solutions",
32-
"Infrastructure management",
33-
"Continuous integration",
34-
"Third-Party Integrations",
17+
<StageRow
18+
title="Start up"
19+
subtitle="From vision to viable product"
20+
explainer="We help early-stage teams get from concept to launch-ready, with compliance and scalability in mind."
21+
services={[
22+
<span>
23+
<strong>MVP development</strong> – Ship production-grade web +
24+
mobile apps quickly without cutting corners.
25+
</span>,
26+
<span>
27+
<strong>Prototyping & proof of concept</strong> – Validate ideas and
28+
secure early investment.
29+
</span>,
30+
<span>
31+
<strong>Regulated industry launches</strong> – Build in compliance
32+
from day one for health, fintech, legal, and other regulated
33+
sectors.
34+
</span>,
3535
]}
36-
/>
37-
38-
<ServiceRow
39-
listColumns
40-
reverse
41-
variant="pink"
42-
title="Design &amp; Discovery"
43-
img={<StylizedSvg variant="pink" SvgComponent={DesignSvg} />}
44-
alt="Image of a lightbulb for Design & Discovery"
45-
content={
46-
<p>
47-
Every project starts with a robust process of design and discovery
48-
to ensure not only that we know your requirements backwards and
49-
forwards, but also to ensure <em>you</em> know exactly what we're
50-
going to build.
51-
</p>
52-
}
53-
listItems={[
54-
"Requirements analysis",
55-
"Project design",
56-
"UI & UX Solutions",
36+
whyUs={[
37+
<span>
38+
Only <strong>senior, self-directed developers</strong> — no juniors
39+
to manage or babysit.
40+
</span>,
41+
<span>
42+
<strong>~85% FTE output in just 20 hrs/week</strong> — faster
43+
results, lower burn.
44+
</span>,
45+
<span>
46+
<strong>Developer’s developer</strong> — respected by technical
47+
teams, we stay in our lane and integrate cleanly.
48+
</span>,
5749
]}
58-
/>
59-
60-
<ServiceRow
61-
listColumns
62-
variant="green"
63-
title="Our favorite tools"
64-
img={<StylizedSvg variant="green" SvgComponent={ToolsSvg} />}
65-
alt="Image of a Phone for our favorite tools"
66-
content={
67-
<p>
68-
Our motto is "when in doubt, get a taco." Our second motto, though,
69-
is{" "}
70-
<a href="/blog/2024/11/25/easy-to-fire/">
71-
<strong>"be easy to hire and easy to fire."</strong>
72-
</a>{" "}
73-
We're comfortable working in most tech stacks, but there are a few
74-
that we tend to favor. These represent{" "}
75-
<strong>widely used industry standards</strong>, so when it's time
76-
for us to part ways you won't have any trouble finding devs to take
77-
over.
78-
</p>
50+
footer={
51+
<>
52+
Apsis helped careviso launch a HIPAA-compliant MVP that contributed
53+
to securing <strong>$17M in Series B funding.</strong> See the{" "}
54+
<Link href="#">story</Link>.
55+
</>
7956
}
80-
listItems={[
81-
"Ruby on Rails",
82-
"React",
83-
"JVM & Spring Framework",
84-
"Amazon Web Services",
85-
"PostgreSQL, SQLServer, MySQL",
57+
variant="blue"
58+
/>
59+
<StageRow
60+
image={<StylizedSvg variant="green" SvgComponent={StartUpSvg} />}
61+
title="Scale up"
62+
subtitle="Accelerate growth and output without adding management overhead"
63+
explainer="We plug into growing teams to help them clear backlogs, hit ambitious deadlines, and scale systems — without the cost and ramp time of full-time hires."
64+
services={[
65+
<span>
66+
<strong>Senior dev augmentation</strong> – Augment capacity with
67+
proven developers delivering enterprise-grade results.
68+
</span>,
69+
<span>
70+
<strong>Backlog clearance & roadmap acceleration</strong> – Free
71+
your team for critical-path work.
72+
</span>,
73+
<span>
74+
<strong>System & architecture optimization</strong> – Improve
75+
performance, scalability, and reliability.
76+
</span>,
8677
]}
78+
whyUs={[
79+
<span>
80+
<strong>Instant impact</strong> — no onboarding lag; we integrate
81+
into workflows from day one.
82+
</span>,
83+
<span>
84+
<strong>Operational efficiency</strong> — our small, nimble team
85+
delivers more with less bureaucracy.
86+
</span>,
87+
<span>
88+
<strong>Flexible engagement</strong> — we scale up or down with your
89+
needs.
90+
</span>,
91+
]}
92+
variant="green"
8793
/>
88-
89-
<ServiceRow
90-
listColumns
91-
variant="gold"
92-
reverse
93-
title="How we work"
94-
img={<StylizedSvg variant="gold" SvgComponent={TeamSvg} />}
95-
alt="Image of a piece of paper for how we work"
96-
content={
97-
<p>
98-
At Apsis, we work within a framework we call{" "}
99-
<strong>"almost agile"</strong> &mdash; a setup that helps us remain
100-
responsive to your particular project's needs. For any project, no
101-
matter how small you can expect to work with a{" "}
102-
<strong>single point of contact</strong> who will manage at least
103-
one other dev to provide a flexible team capable of tackling your
104-
requirements.
105-
</p>
106-
}
107-
listItems={[
108-
"Team augmentation",
109-
"Embedded engineers",
110-
"Standalone projects",
111-
"Small teams",
94+
<StageRow
95+
image={<StylizedSvg variant="pink" SvgComponent={StepUpSvg} />}
96+
title="Step up"
97+
subtitle="Level up your product and processes with emerging tech"
98+
explainer="We help established teams integrate AI, streamline workflows, and evolve infrastructure to stay ahead of the market."
99+
services={[
100+
<span>
101+
<strong>AI feature development</strong> – Embed LLMs and AI
102+
capabilities securely and responsibly.
103+
</span>,
104+
<span>
105+
<strong>System integrations & workflow automation</strong> – Connect
106+
platforms, APIs, and data sources.
107+
</span>,
108+
<span>
109+
<strong>DevOps & infrastructure evolution</strong> – CI/CD
110+
pipelines, cloud optimization, and environment management.
111+
</span>,
112112
]}
113+
whyUs={[
114+
<span>
115+
<strong>AI experience baked in</strong> — from embedding AI in MVPs
116+
to building advanced, secure AI-powered features.
117+
</span>,
118+
<span>
119+
Proven in <strong>high-stakes, regulated industries</strong> — we
120+
protect data and compliance.
121+
</span>,
122+
<span>
123+
<strong>Rapid iteration</strong> — deploy, learn, and evolve in
124+
weeks, not months.
125+
</span>,
126+
]}
127+
variant="pink"
113128
/>
114129
</>
115130
);

‎src/components/StageRow.tsx‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import React from "react";
2+
import { Section } from "./Section";
3+
import styles from "styles/components/StageRow.module.scss";
4+
import { CheckList } from "./CheckList";
5+
import { ArrowRightIcon } from "lucide-react";
6+
import { ColorVariant } from "lib/types";
7+
import clsx from "clsx";
8+
import dynamic from "next/dynamic";
9+
import { StylizedSvg } from "./StylizedSvg";
10+
// import Link from "next/link";
11+
12+
const ScaleUpSvg = dynamic(() => import("/public/img/home/scaleup.svg"), { ssr: false });
13+
const StartUpSvg = dynamic(() => import("/public/img/home/startup.svg"), { ssr: false });
14+
const StepUpSvg = dynamic(() => import("/public/img/home/stepup.svg"), { ssr: false });
15+
16+
export const StageRow: React.FC<{
17+
image?: React.ReactNode;
18+
title: React.ReactNode;
19+
subtitle: React.ReactNode;
20+
explainer: React.ReactNode;
21+
services: React.ReactNode[];
22+
whyUs: React.ReactNode[];
23+
footer?: React.ReactNode;
24+
variant: ColorVariant;
25+
}> = ({ image, title, subtitle, variant, explainer, services, whyUs, footer }) => {
26+
return <>
27+
{image && (
28+
<div className={styles.stage_row__image_container}>
29+
{image}
30+
</div>
31+
)}
32+
<Section spaced narrow guides={false}>
33+
<div className={styles[`stage_row--${variant}`]}>
34+
<h3 className={styles.stage_row__title}>{title}</h3>
35+
<h4 className={styles.stage_row__subtitle}>{subtitle}</h4>
36+
<div className="typography">
37+
<p className="lead">
38+
{explainer}
39+
</p>
40+
</div>
41+
<div className={styles.stage_row__lists}>
42+
<div>
43+
<h4 className={styles.stage_row__list_heading}>Core services</h4>
44+
<CheckList
45+
columns={false}
46+
listItems={services}
47+
icon={ArrowRightIcon}
48+
variant={variant}
49+
/>
50+
</div>
51+
<div>
52+
<h4 className={styles.stage_row__list_heading}>Why Apsis?</h4>
53+
<CheckList
54+
columns={false}
55+
listItems={whyUs}
56+
icon={ArrowRightIcon}
57+
variant={variant}
58+
/>
59+
</div>
60+
</div>
61+
{footer && (
62+
<div className={clsx(styles.stage_row__footer, "typography")}>
63+
<p>
64+
{footer}
65+
</p>
66+
</div>
67+
)}
68+
</div>
69+
</Section>
70+
</>;
71+
}

‎src/pages/services.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -79,9 +79,8 @@ const ServicesPage: NextPage<{ cta: CtaProps }> = ({ cta }) => {
7979
</div>
8080
</Section>
8181

82-
<Section spaced guides={false}>
83-
<ServicesSection />
84-
</Section>
82+
<ServicesSection />
83+
8584
</SiteLayout>
8685
</>
8786
);

‎src/styles/components/StageRow.module.scss‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
@use 'styles/vars';
2+
3+
$variant_colors: (
4+
"blue": var(--apsis_blue),
5+
"pink": var(--apsis_fuschia),
6+
"green": var(--apsis_green),
7+
"gold": var(--apsis_orange),
8+
);
9+
10+
.stage_row {
11+
&__title {
12+
font-size: var(--font_size_h3);
13+
text-wrap: balance;
14+
font-weight: 700;
15+
font-family: var(--serif);
16+
margin-bottom: var(--space-2xs);
17+
18+
@media(min-width: vars.$tablet) {
19+
text-align: center;
20+
}
21+
}
22+
23+
&__subtitle {
24+
font-size: var(--font_size_h5);
25+
text-wrap: balance;
26+
font-weight: 500;
27+
font-style: italic;
28+
font-family: var(--serif);
29+
margin-bottom: var(--space-l);
30+
line-height: 1.5;
31+
32+
@media(min-width: vars.$tablet) {
33+
text-align: center;
34+
}
35+
}
36+
37+
&__image_container {
38+
width: 200px;
39+
margin: var(--space-s) auto;
40+
}
41+
42+
@each $variant, $color in $variant_colors {
43+
&--#{$variant} {
44+
.stage_row__title {
45+
color: $color;
46+
}
47+
}
48+
}
49+
50+
&__lists {
51+
display: flex;
52+
flex-direction: column;
53+
gap: var(--space-s);
54+
margin-top: var(--space-l);
55+
56+
> * {
57+
width: 100%;
58+
}
59+
60+
@media(min-width: vars.$tablet) {
61+
flex-direction: row;
62+
}
63+
}
64+
65+
&__list_heading {
66+
margin-bottom: var(--space-2xs);
67+
}
68+
69+
&__footer {
70+
font-style: italic;
71+
margin-top: var(--space-l);
72+
}
73+
}

0 commit comments

Comments
 (0)