Skip to content

Commit 35ad859

Browse files
yhakbaryhakbar
committed
fix: Adding some basic content
1 parent e3098d5 commit 35ad859

File tree

3 files changed

+257
-17
lines changed

3 files changed

+257
-17
lines changed

‎docs-starlight/src/content/docs/index.mdx

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎docs-starlight/src/layouts/BaseLayout.astro

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
---
2+
interface Props {
3+
title: string;
4+
}
5+
6+
const { title } = Astro.props;
7+
---
8+
<!doctype html>
9+
<html lang="en">
10+
<head>
11+
<meta charset="UTF-8" />
12+
<meta name="description" content="Terragrunt Homepage" />
13+
<meta name="viewport" content="width=device-width" />
14+
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
15+
<meta name="generator" content={Astro.generator} />
16+
<title>{title}</title>
17+
</head>
18+
<body class="bg-white text-gray-900 antialiased">
19+
<slot />
20+
</body>
21+
</html>

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

Lines changed: 236 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,236 @@
1+
---
2+
import BaseLayout from '../layouts/BaseLayout.astro';
3+
4+
const pageTitle = "Terragrunt by Gruntwork | Flexible IaC that Scales";
5+
6+
// Placeholder data for logos - replace with actual image paths or SVG components
7+
const companyLogos = [
8+
{ name: "Company A", placeholder: "bg-gray-300", alt: "Logo for Company A" },
9+
{ name: "Company B", placeholder: "bg-gray-400", alt: "Logo for Company B" },
10+
{ name: "Company C", placeholder: "bg-gray-500", alt: "Logo for Company C" },
11+
{ name: "Company D", placeholder: "bg-gray-300", alt: "Logo for Company D" },
12+
{ name: "Company E", placeholder: "bg-gray-400", alt: "Logo for Company E" },
13+
{ name: "Company F", placeholder: "bg-gray-500", alt: "Logo for Company F" },
14+
{ name: "Company G", placeholder: "bg-gray-300", alt: "Logo for Company G" },
15+
];
16+
---
17+
<BaseLayout title={pageTitle}>
18+
19+
{/* Navbar Section */}
20+
<header class="bg-white shadow-sm sticky top-0 z-50">
21+
{/* Apply container centering and padding to the nav element itself */}
22+
<nav class="container mx-auto px-4 sm:px-6 lg:px-8 py-3 flex items-center justify-between">
23+
{/* Logo */}
24+
<a href="/" class="flex items-center space-x-2 flex-shrink-0" aria-label="Terragrunt Homepage">
25+
{/* Placeholder Logo SVG: Explicit height and width */}
26+
<svg class="h-8 w-8 text-blue-600 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd"></path></svg>
27+
<span class="font-bold text-xl text-gray-800">Terragrunt <span class="text-gray-500 font-normal text-sm">by Gruntwork</span></span>
28+
</a>
29+
30+
{/* Navigation Links & Actions */}
31+
{/* Added min-w-0 to prevent flex item overflow issues on very small screens if needed */}
32+
<div class="flex items-center space-x-3 sm:space-x-4 lg:space-x-6 min-w-0">
33+
{/* Search Placeholder Button */}
34+
<button class="text-gray-500 hover:text-gray-700 hidden md:block p-1 flex-shrink-0" aria-label="Search (coming soon)">
35+
{/* Search Icon: Explicit height and width */}
36+
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
37+
</button>
38+
{/* GitHub Stars Link */}
39+
<a href="https://github.com/gruntwork-io/terragrunt" target="_blank" rel="noopener noreferrer" class="text-gray-600 hover:text-gray-900 flex items-center space-x-1 flex-shrink-0" aria-label="View Terragrunt on GitHub">
40+
{/* GitHub Icon: Explicit height and width */}
41+
<svg class="h-5 w-5 flex-shrink-0" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true"> <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/> </svg>
42+
<span class="hidden sm:inline text-sm">Stars</span>
43+
{/* Placeholder for star count */}
44+
</a>
45+
{/* Discord Link */}
46+
<a href="https://discord.gg/gruntwork" target="_blank" rel="noopener noreferrer" class="text-gray-600 hover:text-gray-900 p-1 flex-shrink-0" aria-label="Join the Gruntwork Discord">
47+
{/* Discord Icon: Explicit height and width */}
48+
<svg class="h-5 w-5 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M19.54 0c1.356 0 2.46 1.104 2.46 2.472v21.528l-2.58-2.28-1.452-1.344-1.536-1.428.636 2.22h-13.608c-1.356 0-2.46-1.104-2.46-2.472v-16.224c0-1.368 1.104-2.472 2.46-2.472h16.08zm-4.632 15.672c2.652-.084 3.672-1.824 3.672-1.824 0-3.864-1.728-6.996-1.728-6.996-1.728-1.296-3.372-1.26-3.372-1.26l-.168.192c2.04.624 2.988 1.524 2.988 1.524-1.248-.684-2.472-1.02-3.612-1.152-.864-.096-1.692-.072-2.424.024l-.204.048c-.612.168-1.2.396-1.74.696-.6.348-1.164.78-1.644 1.284-.528.54-1.008 1.14-1.38 1.788-.42.744-.708 1.548-.828 2.388-.168 1.032-.048 2.076.18 3.084.228 1.008.636 1.956 1.224 2.808.588.84 1.32 1.584 2.16 2.208.84.624 1.764 1.116 2.724 1.476l.072.024c.132.024.264.048.396.06.252.036.504.06.768.072.264.012.528.012.78.012.144 0 .288-.012.432-.012.648-.048 1.284-.144 1.872-.288.816-.192 1.572-.48 2.244-.84.564-.312 1.056-.708 1.464-1.164.384-.432.696-.912.924-1.428.228-.492.372-1.008.444-1.536.06-.528.072-1.056.024-1.572l-.048-.276zm-8.232-1.488c0 .84-.708 1.524-1.572 1.524-.864 0-1.572-.684-1.572-1.524 0-.84.708-1.524 1.572-1.524.864 0 1.572.684 1.572 1.524zm4.98 0c0 .84-.708 1.524-1.572 1.524-.864 0-1.572-.684-1.572-1.524 0-.84.708-1.524 1.572-1.524.864 0 1.572.684 1.572 1.524z"/></svg>
49+
</a>
50+
{/* Commercial Links */}
51+
{/* Added flex-shrink-0 to prevent shrinking on small screens */}
52+
<a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-800 hidden lg:block flex-shrink-0 whitespace-nowrap">Automate your pipeline*</a>
53+
<a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-800 hidden lg:block flex-shrink-0 whitespace-nowrap">Support*</a>
54+
</div>
55+
</nav>
56+
</header>
57+
58+
<main>
59+
{/* Hero Section */}
60+
<section class="bg-gradient-to-b from-white to-gray-50 pt-20 pb-24 sm:pt-28 sm:pb-32 text-center">
61+
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
62+
<h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold text-gray-900 tracking-tight leading-tight">
63+
Flexible IaC that scales
64+
</h1>
65+
<p class="mt-6 max-w-3xl mx-auto text-lg sm:text-xl md:text-2xl text-gray-600 leading-relaxed">
66+
Production-grade infrastructure tooling for OpenTofu/Terraform from the DevOps experts at Gruntwork.
67+
</p>
68+
<div class="mt-10 flex flex-col sm:flex-row justify-center items-center space-y-4 sm:space-y-0 sm:space-x-4">
69+
<a
70+
href="https://terragrunt.gruntwork.io/docs/getting-started/quick-start/"
71+
target="_blank"
72+
rel="noopener noreferrer"
73+
class="inline-block w-full sm:w-auto bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-8 rounded-lg text-lg shadow-md hover:shadow-lg transition-all duration-300 ease-in-out transform hover:-translate-y-1"
74+
aria-label="Quick Start Guide"
75+
>
76+
Quick Start
77+
</a>
78+
<a
79+
href="https://terragrunt.gruntwork.io/docs/"
80+
target="_blank"
81+
rel="noopener noreferrer"
82+
class="inline-block w-full sm:w-auto bg-white hover:bg-gray-100 text-blue-600 font-semibold py-3 px-8 rounded-lg text-lg shadow-md hover:shadow-lg border border-gray-300 transition-all duration-300 ease-in-out"
83+
aria-label="View Documentation"
84+
>
85+
Docs
86+
</a>
87+
</div>
88+
</div>
89+
</section>
90+
91+
{/* Logo Bar Section */}
92+
<section class="bg-gray-50 py-12 sm:py-16">
93+
<div class="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
94+
<h2 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-8">
95+
Orchestrating infrastructure at
96+
</h2>
97+
<div class="flex flex-wrap justify-center items-center gap-8 sm:gap-10 lg:gap-12">
98+
{/* Updated logo placeholders: Use img tag structure, constrain height, auto width */}
99+
{companyLogos.map(logo => (
100+
<div class="flex justify-center items-center h-10 sm:h-12 px-2" title={logo.name}>
101+
{/* Placeholder - Replace with actual <img> tag */}
102+
{/* <img src="/path/to/logo.svg" alt={logo.alt} class="h-full w-auto max-w-full object-contain" /> */}
103+
<div class={`h-full w-24 sm:w-32 ${logo.placeholder} rounded flex items-center justify-center text-xs text-white font-medium opacity-60 hover:opacity-100 transition-opacity`}>
104+
{logo.name}
105+
</div>
106+
</div>
107+
))}
108+
</div>
109+
</div>
110+
</section>
111+
112+
{/* Feature Sections */}
113+
<section class="py-16 sm:py-24 bg-white">
114+
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
115+
116+
{/* Section: Best Way */}
117+
<div class="text-center max-w-3xl mx-auto mb-16 sm:mb-20">
118+
<h2 class="text-3xl sm:text-4xl font-extrabold text-gray-900 tracking-tight mb-4">
119+
The Best Way to Manage Infrastructure at Scale
120+
</h2>
121+
<p class="text-lg sm:text-xl text-gray-600 leading-relaxed">
122+
Organically shaped by years of solving scaling problems for organizations managing massive OpenTofu/Terraform infrastructure estates.
123+
</p>
124+
</div>
125+
126+
{/* Feature Grid/List */}
127+
{/* Increased gap for better spacing */}
128+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10 lg:gap-14">
129+
130+
{/* Feature: Control */}
131+
<div class="space-y-3">
132+
<h3 class="text-xl font-semibold text-gray-900">Control Your Infrastructure</h3>
133+
<p class="text-gray-600 leading-relaxed"> {/* Added leading-relaxed */}
134+
Limit Your Blast Radius 🎯 <br/>
135+
Break down your monolithic infrastructure to manageable units that are safe to update independently, and have their own state.
136+
</p>
137+
</div>
138+
139+
{/* Feature: Orchestrate */}
140+
<div class="space-y-3">
141+
<h3 class="text-xl font-semibold text-gray-900">Orchestrate Your Infrastructure</h3>
142+
<p class="text-gray-600 leading-relaxed"> {/* Added leading-relaxed */}
143+
Reject all-or-nothing updates. Control exactly what infrastructure is updated, how it gets updated, and in what order by taking advantage of stacks.
144+
</p>
145+
</div>
146+
147+
{/* Feature: Automate Backend */}
148+
<div class="space-y-3">
149+
<h3 class="text-xl font-semibold text-gray-900">Automate Your Backend Infrastructure</h3>
150+
<p class="text-gray-600 leading-relaxed"> {/* Added leading-relaxed */}
151+
Ensure your entire team is using secure, consistent OpenTofu/Terraform state backend configurations.
152+
</p>
153+
</div>
154+
155+
{/* Feature: DRY */}
156+
<div class="space-y-5">
157+
<h3 class="text-xl font-semibold text-gray-900">Reduce Code Duplication</h3>
158+
<div class="space-y-4 pl-4 border-l-2 border-blue-200"> {/* Increased space-y */}
159+
<h4 class="font-medium text-gray-800">Includes</h4>
160+
<p class="text-gray-600 text-sm leading-relaxed">Define reusable infrastructure configurations once, and reference them wherever they’re needed using includes.</p>
161+
<h4 class="font-medium text-gray-800">Reuse Production-Ready Patterns</h4>
162+
<p class="text-gray-600 text-sm leading-relaxed">Leverage the special construct of the Terragrunt Stack to encapsulate higher level collections of infrastructure components as a unified stack.</p>
163+
<h4 class="font-medium text-gray-800">Out of the Box Self-Service</h4>
164+
<p class="text-gray-600 text-sm leading-relaxed">Maintain and expose an infrastructure catalog that your engineers can consume on demand. Make the easiest way to provision infrastructure the right way.</p>
165+
</div>
166+
</div>
167+
168+
{/* Feature: Consistency & Safety */}
169+
<div class="space-y-5">
170+
<h3 class="text-xl font-semibold text-gray-900">Codify Tribal Knowledge</h3>
171+
<div class="space-y-4 pl-4 border-l-2 border-blue-200"> {/* Increased space-y */}
172+
<h4 class="font-medium text-gray-800">Automate Operational Tasks Using Hooks</h4>
173+
<p class="text-gray-600 text-sm 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>
174+
<h4 class="font-medium text-gray-800">Handle Expected Errors</h4>
175+
<p class="text-gray-600 text-sm 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>
176+
<h4 class="font-medium text-gray-800">Integrate Early and Often</h4>
177+
<p class="text-gray-600 text-sm 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>
178+
</div>
179+
</div>
180+
181+
{/* Empty div to push the last item if needed on certain grid layouts, or remove if layout adjusts well */}
182+
<div class="hidden lg:block"></div>
183+
184+
</div>
185+
</div>
186+
</section>
187+
188+
{/* Upsell Section */}
189+
<section class="bg-gradient-to-b from-gray-50 to-white py-16 sm:py-24">
190+
<div class="container mx-auto px-4 sm:px-6 lg:px-8 max-w-4xl text-center">
191+
<h2 class="text-3xl sm:text-4xl font-extrabold text-gray-900 tracking-tight mb-4">
192+
Supercharge Terragrunt for your Organization
193+
</h2>
194+
<p class="text-lg sm:text-xl text-gray-600 leading-relaxed mb-12">
195+
Buy a subscription to Gruntwork services to get a platform team for your platform team. Trade money for time, and focus your engineering efforts on the work that delivers value to your organization.
196+
</p>
197+
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 text-left">
198+
{/* Added hover effect and slightly more padding */}
199+
<div class="bg-white p-6 md:p-8 rounded-lg shadow-md hover:shadow-lg transition-shadow border border-gray-200">
200+
<h3 class="text-xl font-semibold text-gray-900 mb-3">Automate your CI/CD</h3>
201+
<p class="text-gray-600 leading-relaxed"> {/* Added leading-relaxed */}
202+
Gruntwork Pipelines is an out-of-the-box, best practices, secure CI/CD pipeline, built for Terragrunt, by the creators of Terragrunt.
203+
</p>
204+
{/* Optional: Add a link */}
205+
{/* <a href="#" class="text-blue-600 hover:text-blue-800 font-medium mt-4 inline-block">Learn More &rarr;</a> */}
206+
</div>
207+
{/* Added hover effect and slightly more padding */}
208+
<div class="bg-white p-6 md:p-8 rounded-lg shadow-md hover:shadow-lg transition-shadow border border-gray-200">
209+
<h3 class="text-xl font-semibold text-gray-900 mb-3">Keep your IaC Fresh</h3>
210+
<p class="text-gray-600 leading-relaxed"> {/* Added leading-relaxed */}
211+
Gruntwork Patcher is a dependency management tool that keeps your OpenTofu/Terraform modules up to date, even through breaking changes.
212+
</p>
213+
{/* Optional: Add a link */}
214+
{/* <a href="#" class="text-blue-600 hover:text-blue-800 font-medium mt-4 inline-block">Learn More &rarr;</a> */}
215+
</div>
216+
</div>
217+
</div>
218+
</section>
219+
220+
</main>
221+
222+
{/* Footer Section */}
223+
<footer class="bg-gray-100 border-t border-gray-200 py-8">
224+
<div class="container mx-auto px-4 sm:px-6 lg:px-8 text-center text-gray-500 text-sm">
225+
From the DevOps Experts at <a href="https://gruntwork.io/" target="_blank" rel="noopener noreferrer" class="text-blue-600 hover:text-blue-800 font-medium">Gruntwork</a>
226+
</div>
227+
</footer>
228+
229+
</BaseLayout>
230+
231+
<style is:global>
232+
/* Minor global adjustments if needed */
233+
html {
234+
scroll-padding-top: 80px; /* Adjust based on sticky header height */
235+
}
236+
</style>

0 commit comments

Comments
 (0)