Skip to content

Commit 6542355

Browse files
webstackdevwebstackdev
committed
Update social network descriptions for footer in contact content collection to better reflect each network
1 parent 443f7c5 commit 6542355

3 files changed

Lines changed: 281 additions & 7 deletions

File tree

‎src/content/contact.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
"order": 1,
2929
"displayName": "GitHub",
3030
"iconName": "github",
31-
"blurb": "Follow our open-source projects"
31+
"blurb": "Explore our open-source tools and contributions"
3232
},
3333
{
3434
"network": "linkedin",
@@ -37,7 +37,7 @@
3737
"order": 2,
3838
"displayName": "LinkedIn",
3939
"iconName": "linkedin",
40-
"blurb": "Let's connect on LinkedIn"
40+
"blurb": "Connect for industry news and opportunities"
4141
},
4242
{
4343
"network": "x",
@@ -46,7 +46,7 @@
4646
"order": 3,
4747
"displayName": "X.com",
4848
"iconName": "x",
49-
"blurb": "Follow for interesting info and opinions on development"
49+
"blurb": "Quick takes on dev trends and engineering culture"
5050
},
5151
{
5252
"network": "codepen",
@@ -55,7 +55,7 @@
5555
"order": 4,
5656
"displayName": "CodePen",
5757
"iconName": "codepen",
58-
"blurb": "Share and modify our front-end test cases and code snippets"
58+
"blurb": "Interactive demos and front-end experiments"
5959
},
6060
{
6161
"network": "bluesky",
@@ -64,7 +64,7 @@
6464
"order": 5,
6565
"displayName": "BlueSky",
6666
"iconName": "bluesky",
67-
"blurb": "Share and modify our front-end test cases and code snippets"
67+
"blurb": "Join us on the open, decentralized social web"
6868
},
6969
{
7070
"network": "mastodon",
@@ -73,7 +73,7 @@
7373
"order": 6,
7474
"displayName": "Mastodon",
7575
"iconName": "mastodon",
76-
"blurb": "Share and modify our front-end test cases and code snippets"
76+
"blurb": "Find us in the fediverse for tech discussions"
7777
}
7878
]
7979
}

‎src/pages/hero.astro‎

Lines changed: 274 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,3 +89,277 @@ const path = '/hero/'
8989
</div>
9090
</div>
9191
</section>
92+
93+
<!-- ============================================================
94+
VARIATION 1: "Journey" style - Visual timeline approach
95+
============================================================ -->
96+
<section class="container mx-auto px-4 sm:px-6 lg:px-8 py-16" aria-labelledby="backstage-v1-title">
97+
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
98+
<!-- Image placeholder -->
99+
<div class="order-2 lg:order-1">
100+
<div class="aspect-[4/3] bg-page-base-offset rounded-2xl border-2 border-dashed border-trim flex items-center justify-center">
101+
<span class="text-content-offset text-sm">Image Placeholder</span>
102+
</div>
103+
</div>
104+
105+
<!-- Content -->
106+
<div class="order-1 lg:order-2 space-y-6">
107+
<p class="text-xs font-bold text-primary uppercase tracking-widest">Internal Developer Platform</p>
108+
<h2 id="backstage-v1-title" class="text-3xl md:text-4xl font-black text-content leading-tight">
109+
From one app to a
110+
<span class="text-primary">self-service platform</span>
111+
</h2>
112+
<p class="text-lg text-content-offset leading-relaxed">
113+
I help teams adopt Backstage incrementally—starting with your most painful app, not a
114+
big-bang rewrite. We'll modernize CI/CD, add observability, and give developers a
115+
portal where they can deploy without waiting on ops.
116+
</p>
117+
118+
<!-- Journey steps -->
119+
<div class="space-y-4 pt-4">
120+
<div class="flex items-start gap-4">
121+
<div class="w-10 h-10 rounded-full bg-primary text-page-base flex items-center justify-center font-bold shrink-0">1</div>
122+
<div>
123+
<p class="font-bold text-content">Discovery & Pilot App</p>
124+
<p class="text-sm text-content-offset">Map your pain points; pick one app to prove the pattern.</p>
125+
</div>
126+
</div>
127+
<div class="flex items-start gap-4">
128+
<div class="w-10 h-10 rounded-full bg-primary text-page-base flex items-center justify-center font-bold shrink-0">2</div>
129+
<div>
130+
<p class="font-bold text-content">Golden Path & Templates</p>
131+
<p class="text-sm text-content-offset">CI/CD, testing, cloud deploy—all baked into reusable scaffolds.</p>
132+
</div>
133+
</div>
134+
<div class="flex items-start gap-4">
135+
<div class="w-10 h-10 rounded-full bg-primary text-page-base flex items-center justify-center font-bold shrink-0">3</div>
136+
<div>
137+
<p class="font-bold text-content">Backstage Catalog & Self-Service</p>
138+
<p class="text-sm text-content-offset">Developers browse, create, and deploy without tickets.</p>
139+
</div>
140+
</div>
141+
<div class="flex items-start gap-4">
142+
<div class="w-10 h-10 rounded-full bg-primary text-page-base flex items-center justify-center font-bold shrink-0">4</div>
143+
<div>
144+
<p class="font-bold text-content">Expand Across the Portfolio</p>
145+
<p class="text-sm text-content-offset">Roll the pattern out to more apps as confidence grows.</p>
146+
</div>
147+
</div>
148+
</div>
149+
150+
<a href="/contact" class="inline-flex items-center gap-2 bg-primary hover:bg-primary-offset text-page-base font-bold px-6 py-3 rounded-full transition-colors">
151+
Start the conversation
152+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
153+
</a>
154+
</div>
155+
</div>
156+
</section>
157+
<!--
158+
IMAGE PROMPT (Variation 1):
159+
A clean, modern isometric illustration showing a journey from chaos to order. On the left,
160+
a tangled mess of servers, pipelines, and confused developers. A glowing path leads right
161+
toward an organized Backstage portal interface with a catalog grid, happy developers
162+
browsing services, and one-click deploy buttons. Color palette: deep navy background,
163+
cyan/teal accent highlights, white and soft gray UI elements. Style: flat vector with
164+
subtle gradients, no outlines, tech-forward and approachable. Aspect ratio 4:3.
165+
-->
166+
167+
168+
<!-- ============================================================
169+
VARIATION 2: "Before/After" split-screen approach
170+
============================================================ -->
171+
<section class="bg-page-base-offset py-16" aria-labelledby="backstage-v2-title">
172+
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
173+
<header class="text-center max-w-3xl mx-auto mb-12">
174+
<p class="text-xs font-bold text-primary uppercase tracking-widest mb-4">Backstage IDP Consulting</p>
175+
<h2 id="backstage-v2-title" class="text-3xl md:text-4xl font-black text-content leading-tight mb-4">
176+
What if developers could <span class="text-primary">ship without waiting?</span>
177+
</h2>
178+
<p class="text-lg text-content-offset">
179+
I partner with engineering teams to stand up Backstage—Spotify's open-source developer
180+
portal—so your devs get self-service deploys, a living service catalog, and golden-path
181+
templates that actually work.
182+
</p>
183+
</header>
184+
185+
<!-- Before/After cards -->
186+
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
187+
<!-- Before -->
188+
<div class="bg-page-base rounded-2xl border border-trim p-8 shadow-sm">
189+
<p class="text-xs font-bold text-red-600 uppercase tracking-widest mb-4">Before</p>
190+
<ul class="space-y-3">
191+
<li class="flex items-start gap-3">
192+
<span class="text-red-500 mt-1">✕</span>
193+
<span class="text-content-offset">Tickets to ops for every deploy</span>
194+
</li>
195+
<li class="flex items-start gap-3">
196+
<span class="text-red-500 mt-1">✕</span>
197+
<span class="text-content-offset">Tribal knowledge locked in Slack threads</span>
198+
</li>
199+
<li class="flex items-start gap-3">
200+
<span class="text-red-500 mt-1">✕</span>
201+
<span class="text-content-offset">Inconsistent CI/CD across projects</span>
202+
</li>
203+
<li class="flex items-start gap-3">
204+
<span class="text-red-500 mt-1">✕</span>
205+
<span class="text-content-offset">Legacy apps nobody wants to touch</span>
206+
</li>
207+
<li class="flex items-start gap-3">
208+
<span class="text-red-500 mt-1">✕</span>
209+
<span class="text-content-offset">"Who owns this service?" is a mystery</span>
210+
</li>
211+
</ul>
212+
</div>
213+
214+
<!-- After -->
215+
<div class="bg-page-base rounded-2xl border border-primary p-8 shadow-sm">
216+
<p class="text-xs font-bold text-primary uppercase tracking-widest mb-4">After</p>
217+
<ul class="space-y-3">
218+
<li class="flex items-start gap-3">
219+
<span class="text-primary mt-1">✓</span>
220+
<span class="text-content-offset">One-click deploys from a portal</span>
221+
</li>
222+
<li class="flex items-start gap-3">
223+
<span class="text-primary mt-1">✓</span>
224+
<span class="text-content-offset">Docs live next to services in the catalog</span>
225+
</li>
226+
<li class="flex items-start gap-3">
227+
<span class="text-primary mt-1">✓</span>
228+
<span class="text-content-offset">Golden-path templates enforce best practices</span>
229+
</li>
230+
<li class="flex items-start gap-3">
231+
<span class="text-primary mt-1">✓</span>
232+
<span class="text-content-offset">Incremental modernization, not big-bang rewrites</span>
233+
</li>
234+
<li class="flex items-start gap-3">
235+
<span class="text-primary mt-1">✓</span>
236+
<span class="text-content-offset">Clear ownership and dependency maps</span>
237+
</li>
238+
</ul>
239+
</div>
240+
</div>
241+
242+
<!-- Image placeholder -->
243+
<div class="aspect-[21/9] bg-page-base rounded-2xl border-2 border-dashed border-trim flex items-center justify-center mb-8">
244+
<span class="text-content-offset text-sm">Image Placeholder</span>
245+
</div>
246+
247+
<div class="text-center">
248+
<a href="/contact" class="inline-flex items-center gap-2 bg-primary hover:bg-primary-offset text-page-base font-bold px-8 py-4 rounded-full transition-colors text-lg">
249+
Book a free discovery call
250+
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
251+
</a>
252+
</div>
253+
</div>
254+
</section>
255+
<!--
256+
IMAGE PROMPT (Variation 2):
257+
A wide cinematic split-screen illustration (21:9 aspect ratio). Left half shows a
258+
stressed developer surrounded by sticky notes, multiple terminal windows with errors,
259+
and a tangle of cloud service logos connected by messy lines. Right half shows the same
260+
developer relaxed at a clean desk, looking at a polished Backstage UI with a service
261+
catalog, green deploy status badges, and a clear dependency graph. A glowing vertical
262+
divider separates the two halves. Color palette: muted grays and reds on the "before"
263+
side, vibrant teals and greens on the "after" side. Style: modern flat illustration with
264+
soft shadows, friendly and professional.
265+
-->
266+
267+
268+
<!-- ============================================================
269+
VARIATION 3: "Features + Stats" dashboard-inspired layout
270+
============================================================ -->
271+
<section class="container mx-auto px-4 sm:px-6 lg:px-8 py-16" aria-labelledby="backstage-v3-title">
272+
<div class="grid grid-cols-1 lg:grid-cols-5 gap-8">
273+
<!-- Left column: headline + image -->
274+
<div class="lg:col-span-2 space-y-6">
275+
<p class="text-xs font-bold text-primary uppercase tracking-widest">Backstage IDP Implementation</p>
276+
<h2 id="backstage-v3-title" class="text-3xl md:text-4xl font-black text-content leading-tight">
277+
Give your developers <span class="text-primary">superpowers</span>
278+
</h2>
279+
<p class="text-lg text-content-offset leading-relaxed">
280+
Backstage is Spotify's open-source internal developer portal. I customize and deploy it
281+
for your team—starting small, proving value fast, then scaling across your organization.
282+
</p>
283+
284+
<!-- Image placeholder -->
285+
<div class="aspect-square bg-page-base-offset rounded-2xl border-2 border-dashed border-trim flex items-center justify-center">
286+
<span class="text-content-offset text-sm">Image Placeholder</span>
287+
</div>
288+
</div>
289+
290+
<!-- Right column: feature cards + stats -->
291+
<div class="lg:col-span-3 space-y-6">
292+
<!-- Stats row -->
293+
<div class="grid grid-cols-3 gap-4">
294+
<div class="bg-content text-page-base rounded-xl p-4 text-center">
295+
<p class="text-3xl font-black">70%</p>
296+
<p class="text-xs text-page-base/70">Less time to first deploy</p>
297+
</div>
298+
<div class="bg-content text-page-base rounded-xl p-4 text-center">
299+
<p class="text-3xl font-black">4 wks</p>
300+
<p class="text-xs text-page-base/70">Pilot app live</p>
301+
</div>
302+
<div class="bg-content text-page-base rounded-xl p-4 text-center">
303+
<p class="text-3xl font-black">0</p>
304+
<p class="text-xs text-page-base/70">Ops tickets for deploys</p>
305+
</div>
306+
</div>
307+
308+
<!-- Feature cards -->
309+
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
310+
<div class="bg-page-base-offset p-6 rounded-xl border border-trim">
311+
<div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
312+
<svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7"></path></svg>
313+
</div>
314+
<p class="font-bold text-content mb-1">Service Catalog</p>
315+
<p class="text-sm text-content-offset">One place to find every service, API, and resource—with owners and docs attached.</p>
316+
</div>
317+
318+
<div class="bg-page-base-offset p-6 rounded-xl border border-trim">
319+
<div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
320+
<svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path></svg>
321+
</div>
322+
<p class="font-bold text-content mb-1">Software Templates</p>
323+
<p class="text-sm text-content-offset">Scaffold new projects with CI/CD, tests, and cloud infra baked in from day one.</p>
324+
</div>
325+
326+
<div class="bg-page-base-offset p-6 rounded-xl border border-trim">
327+
<div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
328+
<svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
329+
</div>
330+
<p class="font-bold text-content mb-1">CI/CD & Cloud Migration</p>
331+
<p class="text-sm text-content-offset">Lift-and-shift or re-architect—either way, your pipelines will be rock solid.</p>
332+
</div>
333+
334+
<div class="bg-page-base-offset p-6 rounded-xl border border-trim">
335+
<div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
336+
<svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
337+
</div>
338+
<p class="font-bold text-content mb-1">Observability Plug-ins</p>
339+
<p class="text-sm text-content-offset">Surface logs, metrics, and traces right inside the portal—no context switching.</p>
340+
</div>
341+
</div>
342+
343+
<!-- CTA -->
344+
<div class="bg-primary/5 border border-primary/20 rounded-xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
345+
<p class="text-content font-medium">Ready to see what Backstage can do for your team?</p>
346+
<a href="/contact" class="inline-flex items-center gap-2 bg-primary hover:bg-primary-offset text-page-base font-bold px-6 py-3 rounded-full transition-colors whitespace-nowrap">
347+
Let's talk
348+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
349+
</a>
350+
</div>
351+
</div>
352+
</div>
353+
</section>
354+
<!--
355+
IMAGE PROMPT (Variation 3):
356+
A square (1:1) hero illustration of a stylized developer portal dashboard. The main focus
357+
is a Backstage-style UI showing a service catalog with colorful service cards, a sidebar
358+
navigation, and a prominent "Create New Service" button glowing with an inviting highlight.
359+
Around the edges, small icons float: a rocket (deploy), a wrench (tooling), a graph
360+
(observability), and a puzzle piece (plugins). The background is a soft gradient from
361+
dark navy to deep purple. Style: clean vector art with gentle gradients, rounded corners,
362+
modern SaaS aesthetic. No photorealism—keep it illustrative and friendly.
363+
-->
364+
365+
</BaseLayout>

‎src/pages/index.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ const path = '/'
134134
technical infrastructure.
135135
</p>
136136
</header>
137-
<Testimonials limit={3} />
137+
<Testimonials />
138138
</div>
139139
</section>
140140

0 commit comments

Comments
 (0)