|
2 | 2 | /** |
3 | 3 | * Backstage IDP Implementation section of the homepage |
4 | 4 | */ |
| 5 | +import { Image } from 'astro:assets' |
| 6 | +import backstageBackground from '@assets/images/backstage-background.jpg' |
| 7 | +
|
| 8 | +type IconKey = keyof typeof svgPath |
| 9 | +export interface Props { |
| 10 | + pretitle: string |
| 11 | + description: string |
| 12 | + benefits: { |
| 13 | + title: string |
| 14 | + quantifier: string |
| 15 | + }[] |
| 16 | + features: { |
| 17 | + title: string |
| 18 | + description: string |
| 19 | + icon: IconKey |
| 20 | + }[] |
| 21 | +} |
| 22 | +
|
| 23 | +const { pretitle, title, description, benefits, features } = Astro.props as Props |
| 24 | +
|
| 25 | +const svgPath = { |
| 26 | + 'left-justified': 'M4 6h16M4 12h16M4 18h7', |
| 27 | + 'clipboard': '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', |
| 28 | + 'lightning-bolt': 'M13 10V3L4 14h7v7l9-11h-7z', |
| 29 | + 'graph': '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', |
| 30 | +} as const |
| 31 | +
|
| 32 | +const visibleBenefits = benefits.slice(0, 3) |
| 33 | +const visibleFeatures = features.slice(0, 4) |
5 | 34 | --- |
6 | 35 |
|
7 | 36 | <section class="container mx-auto px-4 sm:px-6 lg:px-8 py-16" aria-labelledby="backstage-title"> |
8 | | - <div class="space-y-6"> |
9 | | - <p class="text-xs font-bold text-primary uppercase tracking-widest">Backstage IDP Implementation</p> |
| 37 | + <div class="mb-8 space-y-2"> |
| 38 | + <p class="text-md font-bold text-primary uppercase tracking-widest">{pretitle}</p> |
| 39 | + <h2 id="backstage-title" class="text-3xl md:text-4xl font-black text-content leading-tight"> |
| 40 | + Give your developers <span class="text-primary">superpowers</span> |
| 41 | + </h2> |
10 | 42 | </div> |
11 | 43 | <div class="grid grid-cols-1 lg:grid-cols-5 gap-8"> |
12 | 44 | <!-- Left column: headline + image --> |
13 | 45 | <div class="lg:col-span-2 space-y-6"> |
14 | | - <h2 id="backstage-title" class="text-3xl md:text-4xl font-black text-content leading-tight"> |
15 | | - Give your developers <span class="text-primary">superpowers</span> |
16 | | - </h2> |
17 | | - <p class="text-lg text-content-offset leading-relaxed"> |
18 | | - Backstage is Spotify's open-source internal developer portal. I customize and deploy it |
19 | | - for your team—starting small, proving value fast, then scaling across your organization. |
20 | | - </p> |
| 46 | + <p class="text-lg text-content-offset leading-relaxed">{description}</p> |
21 | 47 |
|
22 | | - <!-- Image placeholder --> |
23 | | - <div class="aspect-square bg-page-offset rounded-2xl border-2 border-dashed border-trim flex items-center justify-center"> |
24 | | - <span class="text-content-offset text-sm">Image Placeholder</span> |
| 48 | + <!-- Image --> |
| 49 | + <div class="aspect-square bg-page-offset rounded-2xl border-2 border-dashed border-trim overflow-hidden"> |
| 50 | + <Image |
| 51 | + src={backstageBackground} |
| 52 | + alt="Backstage interface preview" |
| 53 | + class="h-full w-full object-cover" |
| 54 | + /> |
25 | 55 | </div> |
26 | 56 | </div> |
27 | 57 |
|
28 | 58 | <!-- Right column: feature cards + stats --> |
29 | 59 | <div class="lg:col-span-3 space-y-6"> |
30 | 60 | <!-- Stats row --> |
31 | 61 | <div class="grid grid-cols-3 gap-4"> |
32 | | - <div class="bg-content text-page-base rounded-xl p-4 text-center"> |
33 | | - <p class="text-3xl font-black">70%</p> |
34 | | - <p class="text-xs text-page-base/70">Less time to first deploy</p> |
35 | | - </div> |
36 | | - <div class="bg-content text-page-base rounded-xl p-4 text-center"> |
37 | | - <p class="text-3xl font-black">4 wks</p> |
38 | | - <p class="text-xs text-page-base/70">Pilot app live</p> |
39 | | - </div> |
40 | | - <div class="bg-content text-page-base rounded-xl p-4 text-center"> |
41 | | - <p class="text-3xl font-black">0</p> |
42 | | - <p class="text-xs text-page-base/70">Ops tickets for deploys</p> |
43 | | - </div> |
| 62 | + {visibleBenefits.map((benefit) => ( |
| 63 | + <div class="bg-content text-page-base rounded-xl p-4 text-center"> |
| 64 | + <p class="text-3xl font-black">{benefit.quantifier}</p> |
| 65 | + <p class="text-xs text-page-base/70">{benefit.title}</p> |
| 66 | + </div> |
| 67 | + ))} |
44 | 68 | </div> |
45 | 69 |
|
46 | 70 | <!-- Feature cards --> |
47 | 71 | <div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> |
48 | | - <div class="bg-page-offset p-6 rounded-xl border border-trim"> |
49 | | - <div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center mb-4"> |
50 | | - <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> |
51 | | - </div> |
52 | | - <p class="font-bold text-content mb-1">Service Catalog</p> |
53 | | - <p class="text-sm text-content-offset">One place to find every service, API, and resource—with owners and docs attached.</p> |
54 | | - </div> |
55 | | - |
56 | | - <div class="bg-page-offset p-6 rounded-xl border border-trim"> |
57 | | - <div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center mb-4"> |
58 | | - <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> |
59 | | - </div> |
60 | | - <p class="font-bold text-content mb-1">Software Templates</p> |
61 | | - <p class="text-sm text-content-offset">Scaffold new projects with CI/CD, tests, and cloud infra baked in from day one.</p> |
62 | | - </div> |
63 | | - |
64 | | - <div class="bg-page-offset p-6 rounded-xl border border-trim"> |
65 | | - <div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center mb-4"> |
66 | | - <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> |
67 | | - </div> |
68 | | - <p class="font-bold text-content mb-1">CI/CD & Cloud Migration</p> |
69 | | - <p class="text-sm text-content-offset">Lift-and-shift or re-architect—either way, your pipelines will be rock solid.</p> |
70 | | - </div> |
71 | | - |
72 | | - <div class="bg-page-offset p-6 rounded-xl border border-trim"> |
73 | | - <div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center mb-4"> |
74 | | - <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> |
| 72 | + {visibleFeatures.map((feature) => ( |
| 73 | + <div class="bg-page-offset p-6 rounded-xl border border-trim"> |
| 74 | + <div class="flex items-center gap-3 mb-4"> |
| 75 | + <div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center"> |
| 76 | + <svg |
| 77 | + class="w-5 h-5 text-primary" |
| 78 | + fill="none" |
| 79 | + stroke="currentColor" |
| 80 | + viewBox="0 0 24 24" |
| 81 | + aria-hidden="true" |
| 82 | + > |
| 83 | + <path |
| 84 | + stroke-linecap="round" |
| 85 | + stroke-linejoin="round" |
| 86 | + stroke-width="2" |
| 87 | + d={svgPath[feature.icon]} |
| 88 | + ></path> |
| 89 | + </svg> |
| 90 | + </div> |
| 91 | + <span class="font-bold text-content-active">{feature.title}</span> |
| 92 | + </div> |
| 93 | + <p class="text-sm text-content">{feature.description}</p> |
75 | 94 | </div> |
76 | | - <p class="font-bold text-content mb-1">Observability Plug-ins</p> |
77 | | - <p class="text-sm text-content-offset">Surface logs, metrics, and traces right inside the portal—no context switching.</p> |
78 | | - </div> |
| 95 | + ))} |
79 | 96 | </div> |
80 | 97 |
|
81 | 98 | <!-- CTA --> |
|
0 commit comments