Skip to content

Commit efdeeab

Browse files
webstackdevwebstackdev
committed
Spacing adjustments on home page
1 parent aa91f6d commit efdeeab

4 files changed

Lines changed: 127 additions & 128 deletions

File tree

‎src/components/Home/Backstage/index.astro‎

Lines changed: 63 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -33,76 +33,74 @@ const visibleBenefits = benefits.slice(0, 3)
3333
const visibleFeatures = features.slice(0, 4)
3434
---
3535

36-
<section class="container mx-auto px-4 sm:px-6 lg:px-8 py-16" aria-labelledby="backstage-title">
37-
<div class="grid grid-cols-1 lg:grid-cols-5 gap-8">
38-
<!-- Left column: headline + image -->
39-
<div class="lg:col-span-2 space-y-4">
40-
<p class="font-bold text-primary uppercase tracking-widest">{pretitle}</p>
41-
<h2 id="backstage-title" class="text-3xl md:text-4xl font-black text-content leading-tight">
42-
Give your developers <span class="text-primary">superpowers</span>
43-
</h2>
44-
<p class="text-lg text-content-offset leading-relaxed">{description}</p>
45-
<!-- Image -->
46-
<div class="mt-8">
47-
<Image
48-
src={backstageBackground}
49-
alt="Backstage interface preview"
50-
class="h-auto w-full object-contain"
51-
/>
52-
</div>
36+
<div class="grid grid-cols-1 lg:grid-cols-5 gap-8">
37+
<!-- Left column: headline + image -->
38+
<div class="lg:col-span-2 space-y-4">
39+
<p class="font-bold text-primary uppercase tracking-widest">{pretitle}</p>
40+
<h2 id="backstage-title" class="text-3xl md:text-4xl font-black text-content leading-tight">
41+
Give your developers <span class="text-primary">superpowers</span>
42+
</h2>
43+
<p class="text-lg text-content-offset leading-relaxed">{description}</p>
44+
<!-- Image -->
45+
<div class="mt-8">
46+
<Image
47+
src={backstageBackground}
48+
alt="Backstage interface preview"
49+
class="h-auto w-full object-contain"
50+
/>
5351
</div>
52+
</div>
5453

55-
<!-- Right column: feature cards + stats -->
56-
<div class="lg:col-span-3 space-y-6">
57-
<!-- Stats row -->
58-
<div class="grid grid-cols-3 gap-4">
59-
{visibleBenefits.map((benefit) => (
60-
<div class="bg-content text-page-base rounded-xl p-4 text-center">
61-
<p class="text-3xl font-black">{benefit.quantifier}</p>
62-
<p class="text-xs text-page-base/70">{benefit.title}</p>
63-
</div>
64-
))}
65-
</div>
54+
<!-- Right column: feature cards + stats -->
55+
<div class="lg:col-span-3 space-y-6">
56+
<!-- Stats row -->
57+
<div class="grid grid-cols-3 gap-4">
58+
{visibleBenefits.map((benefit) => (
59+
<div class="bg-content text-page-base rounded-xl p-4 text-center">
60+
<p class="text-3xl font-black">{benefit.quantifier}</p>
61+
<p class="text-xs text-page-base/70">{benefit.title}</p>
62+
</div>
63+
))}
64+
</div>
6665

67-
<!-- Feature cards -->
68-
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
69-
{visibleFeatures.map((feature) => (
70-
<div class="bg-page-offset p-6 rounded-xl border border-trim">
71-
<div class="flex items-center gap-3 mb-4">
72-
<div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center">
73-
<svg
74-
class="w-5 h-5 text-primary"
75-
fill="none"
76-
stroke="currentColor"
77-
viewBox="0 0 24 24"
78-
aria-hidden="true"
79-
>
80-
<path
81-
stroke-linecap="round"
82-
stroke-linejoin="round"
83-
stroke-width="2"
84-
d={svgPath[feature.icon]}
85-
></path>
86-
</svg>
87-
</div>
88-
<span class="font-bold text-content-active">{feature.title}</span>
66+
<!-- Feature cards -->
67+
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
68+
{visibleFeatures.map((feature) => (
69+
<div class="bg-page-offset p-6 rounded-xl border border-trim">
70+
<div class="flex items-center gap-3 mb-4">
71+
<div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center">
72+
<svg
73+
class="w-5 h-5 text-primary"
74+
fill="none"
75+
stroke="currentColor"
76+
viewBox="0 0 24 24"
77+
aria-hidden="true"
78+
>
79+
<path
80+
stroke-linecap="round"
81+
stroke-linejoin="round"
82+
stroke-width="2"
83+
d={svgPath[feature.icon]}
84+
></path>
85+
</svg>
8986
</div>
90-
<p class="text-sm text-content">{feature.description}</p>
87+
<span class="font-bold text-content-active">{feature.title}</span>
9188
</div>
92-
))}
93-
</div>
89+
<p class="text-sm text-content">{feature.description}</p>
90+
</div>
91+
))}
92+
</div>
9493

95-
<!-- CTA -->
96-
<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">
97-
<p class="text-content font-medium">Ready to see what Backstage can do for your team?</p>
98-
<a
99-
href="/contact"
100-
class="relative 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 focus-visible:outline-none after:pointer-events-none after:absolute after:-inset-1 after:rounded-none after:content-[''] focus-visible:after:border-2 focus-visible:after:border-spotlight"
101-
>
102-
Let's talk
103-
<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>
104-
</a>
105-
</div>
94+
<!-- CTA -->
95+
<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">
96+
<p class="text-content font-medium">Ready to see what Backstage can do for your team?</p>
97+
<a
98+
href="/contact"
99+
class="relative 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 focus-visible:outline-none after:pointer-events-none after:absolute after:-inset-1 after:rounded-none after:content-[''] focus-visible:after:border-2 focus-visible:after:border-spotlight"
100+
>
101+
Let's talk
102+
<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>
103+
</a>
106104
</div>
107105
</div>
108-
</section>
106+
</div>

‎src/components/Home/ReadMore/index.astro‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
---
2+
/**
3+
* Read More button component for the home page
4+
*/
5+
---
6+
7+
<div class="text-center mt-10">
8+
<a
9+
href="/articles"
10+
class="inline-flex items-center px-6 py-3 border border-primary text-primary font-semibold rounded-lg hover:bg-spotlight hover:text-white transition-all duration-200"
11+
>
12+
Read More Articles
13+
<svg
14+
class="ml-2 w-4 h-4"
15+
fill="none"
16+
stroke="currentColor"
17+
viewBox="0 0 24 24"
18+
aria-hidden="true"
19+
focusable="false"
20+
>
21+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"
22+
></path>
23+
</svg>
24+
</a>
25+
</div>

‎src/components/Home/Skills/index.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const { title, skills } = Astro.props as Props
2323
>
2424
<h2
2525
id="home-technologies-title"
26-
class="font-sans text-lg font-bold text-primary uppercase tracking-widest mb-2"
26+
class="font-sans text-lg font-bold text-primary uppercase tracking-widest mb-4"
2727
>
2828
{title}
2929
</h2>

‎src/pages/index.astro‎

Lines changed: 38 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const skills = await getCollection('tags', ({ data }) => data.isSkill === true)
1919
<BaseLayout description={pageDescription} pageTitle={pageTitle} path={'/'}>
2020
<!-- Hero Section -->
2121
<section
22-
class={sectionClasses}
22+
class:list={[sectionClasses]}
2323
aria-labelledby="home-hero-title"
2424
>
2525
<Hero
@@ -30,7 +30,7 @@ const skills = await getCollection('tags', ({ data }) => data.isSkill === true)
3030

3131
<!-- Intro Section -->
3232
<section
33-
class={sectionClasses}
33+
class:list={[sectionClasses]}
3434
aria-labelledby="home-about-title"
3535
>
3636
<Intro
@@ -58,7 +58,7 @@ const skills = await getCollection('tags', ({ data }) => data.isSkill === true)
5858
</section>
5959

6060
<!-- Turn-Key Backstage IDP Implementation -->
61-
<section class={sectionClasses} aria-labelledby="backstage-title">
61+
<section class:list={[sectionClasses]} aria-labelledby="backstage-title">
6262
<Backstage
6363
pretitle="Backstage IDP Implementation"
6464
description="Backstage is Spotify's open-source internal developer portal. I customize and deploy it for your team—starting small, proving value fast, then scaling across your organization."
@@ -102,51 +102,31 @@ const skills = await getCollection('tags', ({ data }) => data.isSkill === true)
102102
</section>
103103

104104
<!-- Skills/Technologies Preview -->
105-
<section class:list={[sectionClasses, 'hidden md:block']} aria-labelledby="home-technologies-title">
105+
<section
106+
class:list={[sectionClasses, 'hidden md:block']}
107+
aria-labelledby="home-technologies-title"
108+
>
106109
<Skills skills={skills} title="Technologies & Expertise" />
107110
</section>
108111

109112
<!-- Latest Articles Section -->
110-
<section class={sectionClasses} aria-labelledby="home-latest-insights-title">
111-
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
112-
<header class="text-center mb-12">
113-
<h2 id="home-latest-insights-title" class="text-3xl md:text-4xl font-bold mb-4">
114-
Latest Insights
115-
</h2>
116-
<p class="text-xl text-content-active max-w-3xl mx-auto">
117-
Stay up-to-date with the latest trends, best practices, and insights in software
118-
development and platform engineering.
119-
</p>
120-
</header>
121-
122-
<Carousel
123-
title="Latest Insights"
124-
titleHref="/articles"
125-
variant="suggested"
126-
limit={3}
127-
type="articles"
128-
/>
129-
130-
<div class="text-center mt-10">
131-
<a
132-
href="/articles"
133-
class="inline-flex items-center px-6 py-3 border border-primary text-primary font-semibold rounded-lg hover:bg-spotlight hover:text-white transition-all duration-200"
134-
>
135-
Read More Articles
136-
<svg
137-
class="ml-2 w-4 h-4"
138-
fill="none"
139-
stroke="currentColor"
140-
viewBox="0 0 24 24"
141-
aria-hidden="true"
142-
focusable="false"
143-
>
144-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"
145-
></path>
146-
</svg>
147-
</a>
148-
</div>
149-
</div>
113+
<section
114+
class:list={[sectionClasses]}
115+
aria-labelledby="carousel-articles-suggested-all-title"
116+
>
117+
<h2
118+
id="carousel-articles-suggested-all-title"
119+
class="font-sans text-lg font-bold text-primary uppercase tracking-widest mb-4"
120+
>
121+
Latest Insights
122+
</h2>
123+
<Carousel
124+
titleHref="/articles"
125+
variant="suggested"
126+
type="articles"
127+
classes="md:px-16"
128+
showReadMore={true}
129+
/>
150130
</section>
151131

152132
<!-- Testimonials Section -->
@@ -159,26 +139,22 @@ const skills = await getCollection('tags', ({ data }) => data.isSkill === true)
159139
/>
160140

161141
<!-- Primary CTA Section -->
162-
<section class={sectionClasses}>
163-
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
164-
<Contact
165-
title="Ready to Transform Your Development Process?"
166-
description="Let's discuss how platform engineering and modern cloud architecture can accelerate your team's productivity and scale your business. I'd love to hear about your challenges and explore how we can solve them together."
167-
primaryLink={{ href: '/contact', text: 'Start a Conversation' }}
168-
secondaryLink={{ href: '/services', text: 'Explore Services' }}
169-
/>
170-
</div>
142+
<section class:list={[sectionClasses]}>
143+
<Contact
144+
title="Ready to Transform Your Development Process?"
145+
description="Let's discuss how platform engineering and modern cloud architecture can accelerate your team's productivity and scale your business. I'd love to hear about your challenges and explore how we can solve them together."
146+
primaryLink={{ href: '/contact', text: 'Start a Conversation' }}
147+
secondaryLink={{ href: '/services', text: 'Explore Services' }}
148+
/>
171149
</section>
172150

173151
<!-- Newsletter Signup Section -->
174-
<section class={sectionClasses}>
175-
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
176-
<Newsletter
177-
title="Stay Connected"
178-
description="Get the latest insights on platform engineering, cloud architecture, and developer productivity delivered to your inbox. No spam, just valuable content for technical leaders."
179-
placeholder="Enter your email address"
180-
buttonText="Subscribe"
181-
/>
182-
</div>
152+
<section class:list={[sectionClasses]}>
153+
<Newsletter
154+
title="Stay Connected"
155+
description="Get the latest insights on platform engineering, cloud architecture, and developer productivity delivered to your inbox. No spam, just valuable content for technical leaders."
156+
placeholder="Enter your email address"
157+
buttonText="Subscribe"
158+
/>
183159
</section>
184160
</BaseLayout>

0 commit comments

Comments
 (0)