Skip to content

Commit cf69076

Browse files
JelledbJelledb
committed
Refactor template import UI with steps & header spacing
1 parent 7323a3d commit cf69076

4 files changed

Lines changed: 133 additions & 122 deletions

File tree

‎website/src/app/features/platform-integration/platform-integration.component.html‎

Lines changed: 49 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -35,58 +35,64 @@ <h1 class="text-2xl lg:text-3xl font-bold text-slate-900">Integrate {{ platform.
3535
<div class="container mx-auto px-4 lg:px-8 py-8">
3636
<!-- Integration Guide + How To + Terraform Snippet Combined -->
3737
<div class="mb-8">
38-
<div class="grid grid-cols-1 md:grid-cols-[0.8fr_1.5fr] gap-6 items-start">
39-
<mst-card label="Quick Start" class="h-fit">
40-
<div class="px-5 py-6 max-w-none text-base" card-body>
41-
<h2 class="text-xl font-bold text-slate-900 mb-4 flex items-center gap-2">
42-
<i class="fa-solid fa-rocket text-primary-600"></i>
43-
Quick Start
44-
</h2>
45-
<div class="space-y-4">
46-
<div class="flex gap-3 items-start">
47-
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-primary-100 text-primary-600 flex items-center justify-center text-sm font-semibold">1</div>
48-
<div class="flex-1">
49-
<div class="text-slate-700 font-medium mb-1 text-base">Add the OpenTofu snippet</div>
50-
<div class="text-slate-600 text-sm">Copy the provided OpenTofu code from the right and add it to your infrastructure codebase.</div>
38+
<mst-card label="Quick Start" class="w-full">
39+
<div class="px-5 py-6 max-w-none text-base" card-body>
40+
<div class="grid grid-cols-1 md:grid-cols-[0.8fr_1.5fr] gap-6">
41+
<!-- Left Column: Quick Start Steps -->
42+
<div>
43+
<h2 class="text-xl font-bold text-slate-900 flex items-center gap-2 mb-4">
44+
<i class="fa-solid fa-rocket text-primary-600"></i>
45+
Quick Start with Code
46+
<span class="badge badge-primary text-xs font-semibold">Recommended</span>
47+
</h2>
48+
<div class="space-y-4">
49+
<div class="flex gap-3 items-start">
50+
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-primary-100 text-primary-600 flex items-center justify-center text-sm font-semibold">1</div>
51+
<div class="flex-1">
52+
<div class="text-slate-700 font-medium mb-1 text-base">Add the OpenTofu snippet</div>
53+
<div class="text-slate-600 text-sm">Copy the provided OpenTofu code from the right and add it to your infrastructure codebase.</div>
54+
</div>
5155
</div>
52-
</div>
53-
<div class="flex gap-3 items-start">
54-
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-primary-100 text-primary-600 flex items-center justify-center text-sm font-semibold">2</div>
55-
<div class="flex-1">
56-
<div class="text-slate-700 font-medium mb-1 text-base">Provider setup and configure variables</div>
57-
<div class="text-slate-600 text-sm">
58-
Ensure you enter your API key in the <span class="font-mono bg-slate-100 px-1 py-0.5 rounded text-sm">provider</span> block and update the required variables in the <span class="font-mono bg-slate-100 px-1 py-0.5 rounded text-sm">locals</span> block as needed for your environment.
56+
<div class="flex gap-3 items-start">
57+
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-primary-100 text-primary-600 flex items-center justify-center text-sm font-semibold">2</div>
58+
<div class="flex-1">
59+
<div class="text-slate-700 font-medium mb-1 text-base">Provider setup and configure variables</div>
60+
<div class="text-slate-600 text-sm">
61+
Ensure you enter your API key in the <span class="font-mono bg-slate-100 px-1 py-0.5 rounded text-sm">provider</span> block and update the required variables in the <span class="font-mono bg-slate-100 px-1 py-0.5 rounded text-sm">locals</span> block as needed for your environment.
62+
</div>
5963
</div>
6064
</div>
61-
</div>
62-
<div class="flex gap-3 items-start">
63-
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-primary-100 text-primary-600 flex items-center justify-center text-sm font-semibold">3</div>
64-
<div class="flex-1">
65-
<div class="text-slate-700 font-medium mb-1 text-base">Deploy with OpenTofu</div>
66-
<div class="text-slate-600 text-sm">Run <span class="font-mono bg-slate-100 px-1 py-0.5 rounded text-sm">tofu init</span>, <span class="font-mono bg-slate-100 px-1 py-0.5 rounded text-sm">tofu plan</span>, and <span class="font-mono bg-slate-100 px-1 py-0.5 rounded text-sm">tofu apply</span> to provision the integration.</div>
65+
<div class="flex gap-3 items-start">
66+
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-primary-100 text-primary-600 flex items-center justify-center text-sm font-semibold">3</div>
67+
<div class="flex-1">
68+
<div class="text-slate-700 font-medium mb-1 text-base">Deploy with OpenTofu</div>
69+
<div class="text-slate-600 text-sm">Run <span class="font-mono bg-slate-100 px-1 py-0.5 rounded text-sm">tofu init</span>, <span class="font-mono bg-slate-100 px-1 py-0.5 rounded text-sm">tofu plan</span>, and <span class="font-mono bg-slate-100 px-1 py-0.5 rounded text-sm">tofu apply</span> to provision the integration.</div>
70+
</div>
6771
</div>
68-
</div>
69-
<div class="flex gap-3 items-start">
70-
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-green-100 text-green-600 flex items-center justify-center text-base font-bold">✓</div>
71-
<div class="flex-1">
72-
<div class="text-slate-700 font-medium mb-1 text-base">Success!</div>
73-
<div class="text-slate-600 text-sm">The platform is now integrated and you can start using it to provision tenants, assign users and collect costs.</div>
72+
<div class="flex gap-3 items-start">
73+
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-green-100 text-green-600 flex items-center justify-center text-base font-bold">✓</div>
74+
<div class="flex-1">
75+
<div class="text-slate-700 font-medium mb-1 text-base">Success!</div>
76+
<div class="text-slate-600 text-sm">The platform is now integrated and you can start using it to provision tenants, assign users and collect costs.</div>
77+
</div>
7478
</div>
7579
</div>
7680
</div>
81+
82+
<!-- Right Column: Code -->
83+
<div class="relative w-full overflow-hidden">
84+
<button
85+
(click)="copyTerraform(platform.terraformSnippet!!)"
86+
class="absolute top-3 right-3 btn btn-xs btn-primary z-10 font-bold flex items-center gap-2"
87+
[class.btn-success]="copiedTerraform">
88+
<i class="fa-solid" [class.fa-check]="copiedTerraform" [class.fa-copy]="!copiedTerraform"></i>
89+
<span>{{ copiedTerraform ? 'Copied!' : 'Copy' }}</span>
90+
</button>
91+
<pre class="bg-slate-900 text-slate-100 p-2 md:p-3 rounded-xl border border-slate-200 overflow-x-auto text-xs md:text-sm mt-0 w-full whitespace-pre"><code class="language-hcl" highlight>{{ platform?.terraformSnippet }}</code></pre>
92+
</div>
7793
</div>
78-
</mst-card>
79-
<div class="relative w-full overflow-hidden">
80-
<button
81-
(click)="copyTerraform(platform.terraformSnippet!!)"
82-
class="absolute top-3 right-4 btn btn-xs btn-primary z-10 font-bold flex items-center gap-2"
83-
[class.btn-success]="copiedTerraform">
84-
<i class="fa-solid" [class.fa-check]="copiedTerraform" [class.fa-copy]="!copiedTerraform"></i>
85-
<span>{{ copiedTerraform ? 'Copied!' : 'Copy' }}</span>
86-
</button>
87-
<pre class="bg-slate-900 text-slate-100 p-2 md:p-3 rounded-xl border border-slate-200 overflow-x-auto text-xs md:text-sm mt-0 w-full whitespace-pre"><code class="language-hcl" highlight>{{ platform?.terraformSnippet }}</code></pre>
8894
</div>
89-
</div>
95+
</mst-card>
9096
</div>
9197
</div>
9298
</div>

0 commit comments

Comments
 (0)