Skip to content

Commit 6063dc6

Browse files
HarshCasperHarshCasper
authored
implement the welcome page (#22)
* get the base done * add proper design
1 parent 4ebb7bc commit 6063dc6

File tree

3 files changed

+165
-42
lines changed

3 files changed

+165
-42
lines changed

‎src/components/OverviewCards.tsx

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
import React from 'react';
2+
3+
interface OverviewCardProps {
4+
title: string;
5+
description: string | React.ReactNode;
6+
href: string;
7+
icon: string;
8+
}
9+
10+
const OverviewCard: React.FC<OverviewCardProps> = ({ title, description, href, icon }) => {
11+
return (
12+
<a href={href} className="service-box" style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
13+
<img src={icon} alt={`${title} icon`} width={40} height={40} style={{ marginBottom: '1rem' }} />
14+
<div className="service-box-content">
15+
<div className="service-box-title">{title}</div>
16+
<div className="service-box-description">{description}</div>
17+
</div>
18+
</a>
19+
);
20+
};
21+
22+
interface OverviewCardsProps {
23+
cards: OverviewCardProps[];
24+
}
25+
26+
export const OverviewCards: React.FC<OverviewCardsProps> = ({ cards }) => {
27+
return (
28+
<div className="service-grid">
29+
{cards.map((card, index) => (
30+
<OverviewCard key={index} {...card} />
31+
))}
32+
</div>
33+
);
34+
};
35+
36+
interface HeroCardProps {
37+
title: string;
38+
href?: string;
39+
}
40+
41+
const HeroCard: React.FC<HeroCardProps> = ({ title, href = "" }) => {
42+
const cardStyle = {
43+
display: 'flex',
44+
alignItems: 'center',
45+
justifyContent: 'center',
46+
minHeight: '200px',
47+
padding: '2rem',
48+
borderRadius: '0.75rem',
49+
background: ' #654fec',
50+
color: 'white',
51+
textDecoration: 'none',
52+
fontSize: '1.5rem',
53+
fontWeight: '600',
54+
textAlign: 'center' as const,
55+
transition: 'transform 0.2s ease',
56+
cursor: href ? 'pointer' : 'default'
57+
};
58+
59+
const hoverStyle = {
60+
':hover': {
61+
transform: href ? 'scale(1.02)' : 'none'
62+
}
63+
};
64+
65+
if (href) {
66+
return (
67+
<a href={href} style={cardStyle}>
68+
{title}
69+
</a>
70+
);
71+
}
72+
73+
return (
74+
<div style={cardStyle}>
75+
{title}
76+
</div>
77+
);
78+
};
79+
80+
interface HeroCardsProps {
81+
cards: HeroCardProps[];
82+
}
83+
84+
export const HeroCards: React.FC<HeroCardsProps> = ({ cards }) => {
85+
return (
86+
<div style={{
87+
display: 'grid',
88+
gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
89+
gap: '2rem',
90+
marginBottom: '3rem'
91+
}}>
92+
{cards.map((card, index) => (
93+
<HeroCard key={index} {...card} />
94+
))}
95+
</div>
96+
);
97+
};

‎src/content/docs/aws/index.md

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

‎src/content/docs/aws/index.mdx

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
---
2+
title: Welcome to LocalStack Docs
3+
description: Get started with LocalStack Docs.
4+
template: doc
5+
sidebar:
6+
label: Welcome
7+
order: 1
8+
---
9+
10+
import { OverviewCards, HeroCards } from '../../../components/OverviewCards';
11+
12+
<HeroCards
13+
cards={[
14+
{
15+
title: "Emulate AWS Services",
16+
href: "/aws/services"
17+
},
18+
{
19+
title: "Test Your AWS Apps",
20+
href: "/aws/capabilities"
21+
}
22+
]}
23+
client:load
24+
/>
25+
26+
## What would you like to do today?
27+
28+
<OverviewCards
29+
cards={[
30+
{
31+
title: "Getting Started",
32+
description: "Install and run LocalStack on your machine, and discover the benefits of local cloud development.",
33+
href: "/aws/getting-started",
34+
icon: "/images/aws/rocket.svg"
35+
},
36+
{
37+
title: "Local AWS Services",
38+
description: "Browse through the AWS Services that LocalStack supports & emulates in your development environment.",
39+
href: "/aws/services",
40+
icon: "/images/aws/integrations.svg"
41+
},
42+
{
43+
title: "Capabilities",
44+
description: "Learn about the LocalStack's capabilities and using them to accelerate your development workflow.",
45+
href: "/aws/capabilities",
46+
icon: "/images/aws/ci.svg"
47+
},
48+
{
49+
title: "Tooling",
50+
description: "Learn how LocalStack's Cloud Developer Tools can boost your development & testing efficiency.",
51+
href: "/aws/tooling",
52+
icon: "/images/aws/aws.svg"
53+
},
54+
{
55+
title: "Integrations",
56+
description: "Learn how to use LocalStack with your favorite cloud development tools, libraries & frameworks.",
57+
href: "/aws/integrations",
58+
icon: "/images/aws/tools.svg"
59+
},
60+
{
61+
title: "Enterprise",
62+
description: "Learn how LocalStack Enterprise provides additional security, flexibility, compliance & support.",
63+
href: "/aws/enterprise",
64+
icon: "/images/aws/understanding.svg"
65+
}
66+
]}
67+
client:load
68+
/>

0 commit comments

Comments
 (0)