Skip to content

Commit 32a6155

Browse files
yhakbaryhakbar
committed
fix: Fixing up the content a bit
1 parent 5a516ce commit 32a6155

File tree

1 file changed

+98
-41
lines changed

1 file changed

+98
-41
lines changed

‎docs-starlight/src/pages/index.astro

Lines changed: 98 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -42,71 +42,128 @@ import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
4242
</p>
4343
</div>
4444

45-
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 px-6 max-w-7xl mx-auto mb-16">
46-
<div class="feature-card bg-gray-100 dark:bg-gray-700 rounded-lg p-6 text-black dark:text-white h-full border border-gray-200 dark:border-gray-600 shadow-sm mt-4">
47-
<h3 class="text-xl font-semibold mb-3">Control Your Infrastructure</h3>
48-
<p class="font-semibold text-blue-600 dark:text-blue-400 mb-1">Limit Your Blast Radius 🎯</p>
49-
<p class="text-gray-600 dark:text-gray-300 mb-2 leading-relaxed">Break down your monolithic infrastructure to manageable units that are safe to update independently, and have their own state.</p>
45+
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-6 text-black dark:text-white h-full border border-gray-200 dark:border-gray-600 shadow-sm mt-4">
46+
<div class="text-center mb-6">
47+
<h3 class="text-2xl font-bold mb-2">Control Your Infrastructure</h3>
5048
</div>
51-
52-
<div class="feature-card bg-gray-100 dark:bg-gray-700 rounded-lg p-6 text-black dark:text-white h-full border border-gray-200 dark:border-gray-600 shadow-sm mt-4">
53-
<h3 class="text-xl font-semibold mb-3">Orchestrate Your Infrastructure</h3>
54-
<p class="text-gray-600 dark:text-gray-300 mb-2 leading-relaxed">Reject all-or-nothing updates. Control exactly what infrastructure is updated, how it gets updated, and in what order by taking advantage of stacks.</p>
49+
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
50+
<div class="feature-card text-left">
51+
<div class="font-bold text-lg mb-1">Limit Your Blast Radius</div>
52+
<div class="text-gray-700 dark:text-gray-200 mb-2 leading-relaxed">
53+
Break down your monolithic infrastructure to manageable <a href="#" class="text-blue-600 dark:text-blue-400 underline">units</a> that are safe to update independently, and have their own state.
54+
</div>
55+
</div>
56+
<div class="feature-card text-left">
57+
<div class="font-bold text-lg mb-1">Orchestrate Your Infrastructure</div>
58+
<div class="text-gray-700 dark:text-gray-200 mb-2 leading-relaxed">
59+
Reject all-or-nothing updates. Control exactly what infrastructure is updated, how it gets updated, and in what order by taking advantage of <a href="#" class="text-blue-600 dark:text-blue-400 underline">stacks</a>.
60+
</div>
61+
</div>
62+
<div class="feature-card text-left">
63+
<div class="font-bold text-lg mb-1">Automate You Backend Infrastructure</div>
64+
<div class="text-gray-700 dark:text-gray-200 mb-2 leading-relaxed">
65+
Ensure your entire team is using secure, consistent OpenTofu/Terraform <a href="#" class="text-blue-600 dark:text-blue-400 underline">state backend</a> configurations.
66+
</div>
67+
</div>
5568
</div>
69+
</div>
5670

57-
<div class="feature-card bg-gray-100 dark:bg-gray-700 rounded-lg p-6 text-black dark:text-white h-full border border-gray-200 dark:border-gray-600 shadow-sm mt-4">
58-
<h3 class="text-xl font-semibold mb-3">Automate Your Backend Infrastructure</h3>
59-
<p class="text-gray-600 dark:text-gray-300 mb-2 leading-relaxed">Ensure your entire team is using secure, consistent OpenTofu/Terraform state backend configurations.</p>
71+
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-6 text-black dark:text-white h-full border border-gray-200 dark:border-gray-600 shadow-sm mt-4">
72+
<div class="text-center mb-6">
73+
<h3 class="text-2xl font-bold mb-2">Reduce Code Repetition</h3>
6074
</div>
61-
62-
<div class="feature-card bg-gray-100 dark:bg-gray-700 rounded-lg p-6 text-black dark:text-white h-full border border-gray-200 dark:border-gray-600 shadow-sm mt-4">
63-
<h3 class="text-xl font-semibold mb-3">Reduce Code Repetition</h3>
64-
<p class="font-semibold text-blue-600 dark:text-blue-400 mb-1">Reuse Common Infrastructure Configurations</p>
65-
<p class="text-gray-600 dark:text-gray-300 mb-2 leading-relaxed">Define reusable infrastructure configurations once, and reference them wherever they're needed using includes.</p>
66-
<p class="font-semibold text-blue-600 dark:text-blue-400 mb-1 mt-4">Reuse Production-Ready Patterns</p>
67-
<p class="text-gray-600 dark:text-gray-300 mb-2 leading-relaxed">Leverage the special construct of the Terragrunt Stack to encapsulate higher level collections of infrastructure components as a unified stack.</p>
75+
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
76+
<div class="feature-card text-left">
77+
<div class="font-bold text-lg mb-1">Reuse Common Infrastructure Configurations</div>
78+
<div class="text-gray-700 dark:text-gray-200 mb-2 leading-relaxed">
79+
Define reusable infrastructure configurations once, and reference them wherever they're needed using <a href="#" class="text-blue-600 dark:text-blue-400 underline">includes</a>.
80+
</div>
81+
</div>
82+
<div class="feature-card text-left">
83+
<div class="font-bold text-lg mb-1"></div>
84+
<div class="text-gray-700 dark:text-gray-200 mb-2 leading-relaxed">
85+
</div>
86+
</div>
87+
<div class="feature-card text-left">
88+
<div class="font-bold text-lg mb-1">Reuse Production-Ready Patterns</div>
89+
<div class="text-gray-700 dark:text-gray-200 mb-2 leading-relaxed">
90+
Leverage the special construct of the <a href="#" class="text-blue-600 dark:text-blue-400 underline">Terragrunt Stack</a> to encapsulate higher level collections of infrastructure components as a unified stack.
91+
</div>
92+
</div>
6893
</div>
94+
</div>
6995

70-
<div class="feature-card bg-gray-100 dark:bg-gray-700 rounded-lg p-6 text-black dark:text-white h-full border border-gray-200 dark:border-gray-600 shadow-sm mt-4">
71-
<h3 class="text-xl font-semibold mb-3">Consistency and Safety</h3>
72-
<p class="font-semibold text-blue-600 dark:text-blue-400 mb-1">Codify Tribal Knowledge</p>
73-
<p class="font-semibold text-blue-600 dark:text-blue-400 mb-1 mt-4">Automate Operational Tasks Using Hooks</p>
74-
<p class="text-gray-600 dark:text-gray-300 mb-2 leading-relaxed">Don't ask that your engineers remember to do things before/after updating IaC, codify those tasks with hooks so that they're done automatically.</p>
75-
<p class="font-semibold text-blue-600 dark:text-blue-400 mb-1 mt-4">Handle Expected Errors</p>
76-
<p class="text-gray-600 dark:text-gray-300 mb-2 leading-relaxed">Your engineers know that networks can be flaky, and cloud providers aren't perfect. Automatically handle the errors they produce using built-in error handling.</p>
77-
<p class="font-semibold text-blue-600 dark:text-blue-400 mb-1 mt-4">Integrate Early and Often</p>
78-
<p class="text-gray-600 dark:text-gray-300 mb-2 leading-relaxed">Get your engineers on the same page. Keep them all working on a consistent, unified codebase, but gradually roll out new features using feature flags.</p>
96+
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-6 text-black dark:text-white h-full border border-gray-200 dark:border-gray-600 shadow-sm mt-4">
97+
<div class="text-center mb-6">
98+
<h3 class="text-2xl font-bold mb-2">Codify Tribal Knowledge</h3>
7999
</div>
100+
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
101+
<div class="feature-card text-left">
102+
<div class="font-bold text-lg mb-1">Automate Operational Tasks Using Hooks</div>
103+
<div class="text-gray-700 dark:text-gray-200 mb-2 leading-relaxed">
104+
Don't ask that your engineers remember to do things before/after updating IaC, codify those tasks with <a href="#" class="text-blue-600 dark:text-blue-400 underline">hooks</a> so that they're done automatically.
105+
</div>
106+
</div>
107+
<div class="feature-card text-left">
108+
<div class="font-bold text-lg mb-1">Handle Expected Errors</div>
109+
<div class="text-gray-700 dark:text-gray-200 mb-2 leading-relaxed">
110+
Your engineers know that networks can be flaky, and cloud providers aren't perfect. Automatically handle the errors they produce using <a href="#" class="text-blue-600 dark:text-blue-400 underline">built-in error handling</a>.
111+
</div>
112+
</div>
113+
<div class="feature-card text-left">
114+
<div class="font-bold text-lg mb-1">Integrate Early and Often</div>
115+
<div class="text-gray-700 dark:text-gray-200 mb-2 leading-relaxed">
116+
Get your engineers on the same page. Keep them all working on a consistent, unified codebase, but gradually roll out new features using <a href="#" class="text-blue-600 dark:text-blue-400 underline">feature flags</a>.
117+
</div>
118+
</div>
119+
</div>
120+
</div>
80121

81-
<div class="feature-card bg-gray-100 dark:bg-gray-700 rounded-lg p-6 text-black dark:text-white h-full border border-gray-200 dark:border-gray-600 shadow-sm mt-4">
82-
<h3 class="text-xl font-semibold mb-3">Enable Self-Service</h3>
83-
<p class="font-semibold text-blue-600 dark:text-blue-400 mb-1">Leverage a Proven Infrastructure Catalog</p>
84-
<p class="text-gray-600 dark:text-gray-300 mb-2 leading-relaxed">Catalog your infrastructure patterns for reuse across your organization using the catalog TUI.</p>
85-
<p class="font-semibold text-blue-600 dark:text-blue-400 mb-1 mt-4">Empower All Your Engineers</p>
86-
<p class="text-gray-600 dark:text-gray-300 mb-2 leading-relaxed">Design opinionated templates that allow your engineers to scaffold exactly the right infrastructure they need.</p>
122+
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-6 text-black dark:text-white h-full border border-gray-200 dark:border-gray-600 shadow-sm mt-4">
123+
<div class="text-center mb-6">
124+
<h3 class="text-2xl font-bold mb-2">Enable Self-Service</h3>
125+
</div>
126+
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
127+
<div class="feature-card text-left">
128+
<div class="font-bold text-lg mb-1">Leverage a Proven Infrastructure Catalog</div>
129+
<div class="text-gray-700 dark:text-gray-200 mb-2 leading-relaxed">
130+
Catalog your infrastructure patterns for reuse across your organization using the <a href="#" class="text-blue-600 dark:text-blue-400 underline">catalog TUI</a>.
131+
</div>
132+
</div>
133+
<div class="feature-card text-left">
134+
<div class="font-bold text-lg mb-1"></div>
135+
<div class="text-gray-700 dark:text-gray-200 mb-2 leading-relaxed">
136+
</div>
137+
</div>
138+
<div class="feature-card text-left">
139+
<div class="font-bold text-lg mb-1">Design Opinionated Templates</div>
140+
<div class="text-gray-700 dark:text-gray-200 mb-2 leading-relaxed">
141+
Provide templates that guide engineers to <a href="#" class="text-blue-600 dark:text-blue-400 underline">scaffold</a> exactly the right infrastructure they need, following best practices by default.
142+
</div>
143+
</div>
87144
</div>
88145
</div>
89146

90-
<div class="bg-black dark:bg-gray-900 py-16 px-6 text-center mt-8">
91-
<h2 class="text-4xl font-bold mb-4 text-white dark:text-white">Supercharge Terragrunt for your Organization</h2>
92-
<p class="text-gray-300 dark:text-gray-300 mb-12 text-lg">
147+
<div class="text-black dark:text-white py-16 px-6 text-center mt-8">
148+
<h2 class="text-4xl font-bold mb-4">Supercharge Terragrunt for your Organization</h2>
149+
<p class="mb-12 text-lg">
93150
A Gruntwork subscription provides a suite of tools to accelerate your adoption of Terragrunt and deliver best-practice end-to-end infrastructure.
94151
</p>
95152
<div class="flex flex-wrap gap-8 justify-center max-w-7xl mx-auto">
96-
<div class="commercial-card bg-gray-800 dark:bg-gray-800 rounded-lg p-6 text-left flex-1 min-w-[300px] max-w-[450px] border border-gray-700 dark:border-gray-700 shadow-lg mt-4">
153+
<div class="commercial-card rounded-lg p-6 text-left flex-1 min-w-[300px] max-w-[450px] border border-gray-700 dark:border-gray-700 shadow-lg mt-4">
97154
<div class="text-blue-500 dark:text-blue-400 mb-4">
98155
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
99156
</div>
100157
<h3 class="text-xl font-semibold mb-3 text-white dark:text-white">Automate your CI/CD</h3>
101-
<p class="text-gray-300 dark:text-gray-300 mb-6 leading-relaxed">Gruntwork Pipelines is an out-of-the-box, best practices, secure CI/CD pipeline, built for Terragrunt, by the creators of Terragrunt.</p>
158+
<p class="mb-6 leading-relaxed">Gruntwork Pipelines is an out-of-the-box, best practices, secure CI/CD pipeline, built for Terragrunt, by the creators of Terragrunt.</p>
102159
<a href="https://www.gruntwork.io/platform/pipelines" class="inline-block px-4 py-2 bg-transparent text-blue-500 dark:text-blue-400 border border-blue-500 dark:border-blue-400 rounded font-medium transition-all duration-200 hover:bg-blue-500 hover:text-black dark:hover:bg-blue-400 dark:hover:text-white">Learn More →</a>
103160
</div>
104-
<div class="commercial-card bg-gray-800 dark:bg-gray-800 rounded-lg p-6 text-left flex-1 min-w-[300px] max-w-[450px] border border-gray-700 dark:border-gray-700 shadow-lg mt-4">
161+
<div class="commercial-card rounded-lg p-6 text-left flex-1 min-w-[300px] max-w-[450px] border border-gray-700 dark:border-gray-700 shadow-lg mt-4">
105162
<div class="text-blue-500 dark:text-blue-400 mb-4">
106163
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
107164
</div>
108165
<h3 class="text-xl font-semibold mb-3 text-white dark:text-white">Keep your IaC Fresh</h3>
109-
<p class="text-gray-300 dark:text-gray-300 mb-6 leading-relaxed">Gruntwork Patcher is a dependency management tool that keeps your OpenTofu/Terraform modules up to date, even through breaking changes.</p>
166+
<p class="mb-6 leading-relaxed">Gruntwork Patcher is a dependency management tool that keeps your OpenTofu/Terraform modules up to date, even through breaking changes.</p>
110167
<a href="https://www.gruntwork.io/platform/patcher" class="inline-block px-4 py-2 bg-transparent text-blue-500 dark:text-blue-400 border border-blue-500 dark:border-blue-400 rounded font-medium transition-all duration-200 hover:bg-blue-500 hover:text-black dark:hover:bg-blue-400 dark:hover:text-white">Learn More →</a>
111168
</div>
112169
</div>

0 commit comments

Comments
 (0)