Skip to content

Commit d5ee197

Browse files
ShaiahWrenShaiahWren
committed
match content and styling to galaxy.ansible.com
Issue: AAH-2172
1 parent b34a7e4 commit d5ee197

File tree

2 files changed

+122
-26
lines changed

2 files changed

+122
-26
lines changed

‎src/components/cards/landing-page-card.tsx

+20-6
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Card, CardBody, CardHeader, CardTitle } from '@patternfly/react-core';
1+
import { Card, CardBody, CardHeader, Title } from '@patternfly/react-core';
22
import * as React from 'react';
33

44
interface IProps {
@@ -10,12 +10,26 @@ export const LandingPageCard = ({ title, body }: IProps) => {
1010
return (
1111
<Card
1212
className='landing-page-card'
13-
style={{ margin: '0 0 24px 24px', flex: '30%' }}
13+
style={{
14+
margin: '0 0 24px 24px',
15+
flex: '30%',
16+
borderTop: '3px solid #39a5dc',
17+
}}
1418
>
15-
<CardHeader>
16-
<CardTitle>{title}</CardTitle>
17-
</CardHeader>
18-
<CardBody>{body}</CardBody>
19+
{' '}
20+
<div
21+
style={{
22+
border: 0,
23+
borderBottom: '1px solid #d1d1d1',
24+
}}
25+
>
26+
<CardHeader>
27+
<Title headingLevel='h1' size='2xl'>
28+
{title}
29+
</Title>
30+
</CardHeader>
31+
</div>
32+
<CardBody style={{ marginTop: '24px' }}>{body}</CardBody>
1933
</Card>
2034
);
2135
};

‎src/containers/landing/landing-page.tsx

+102-20
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { t } from '@lingui/macro';
2+
import { Title } from '@patternfly/react-core';
23
import * as React from 'react';
34
import {
45
AlertList,
@@ -35,6 +36,11 @@ export class LandingPage extends React.Component<RouteProps, IState> {
3536
></AlertList>
3637
<BaseHeader title={t`Home`} />
3738
<Main>
39+
<Title
40+
style={{ margin: '8px 0 24px 0' }}
41+
headingLevel='h1'
42+
size='2xl'
43+
>{t`Welcome to Beta Galaxy`}</Title>
3844
<div
3945
style={{
4046
display: 'flex',
@@ -45,30 +51,106 @@ export class LandingPage extends React.Component<RouteProps, IState> {
4551
>
4652
<LandingPageCard
4753
title={t`Download`}
48-
body={<React.Fragment><p>{t`Jump-start your automation project with great content from the Ansible community. Galaxy provides pre-packaged units of work known to Ansible as roles and collections.`}</p><br/>
49-
50-
<p>{t`Content from roles and collections can be referenced in Ansible PlayBooks and immediately put to work. You'll find content for provisioning infrastructure, deploying applications, and all of the tasks you do everyday.`} </p><br/>
51-
52-
<p>{t`Use the <Search page> to find content for your project, then download them onto your Ansible host using <ansible-galaxy>, the command line tool that comes bundled with Ansible.`}</p></React.Fragment>}
53-
54-
54+
body={
55+
<React.Fragment>
56+
<p>{t`Jump-start your automation project with great content from the Ansible community. Galaxy provides pre-packaged units of work known to Ansible as roles and collections.`}</p>
57+
<br />
58+
59+
<p>
60+
{t`Content from roles and collections can be referenced in Ansible PlayBooks and immediately put to work. You'll find content for provisioning infrastructure, deploying applications, and all of the tasks you do everyday.`}{' '}
61+
</p>
62+
<br />
63+
64+
<p>
65+
{t`Use the`}{' '}
66+
<a href='https://galaxy.ansible.com/search?deprecated=false&keywords=&order_by=-relevance'>{t`Search page`}</a>{' '}
67+
{t`to find content for your project, then download them onto your Ansible host using`}{' '}
68+
<a
69+
href='https://docs.ansible.com/ansible/latest/reference_appendices/galaxy.html#the-command-line-tool'
70+
target='_blanck'
71+
>{t`ansible-galaxy`}</a>
72+
{t`, the command line tool that comes bundled with Ansible.`}
73+
</p>
74+
</React.Fragment>
75+
}
5576
/>
56-
<LandingPageCard
77+
<LandingPageCard
5778
title={t`Share`}
58-
body={<React.Fragment><p>{t`Help other Ansible users by sharing the awesome roles and collections you create.`}</p><br/>
59-
<p>{t`Maybe you have automation for installing and configuring a popular software package, or for deploying software built by your company. Whatever it is, use Galaxy to share it with the community.`}</p><br/>
60-
61-
62-
<p>{t`Red Hat is working on exciting new Ansible content development capabilities within the context of <Project Wisdom> to help other automators build Ansible content. Your roles and collections may be used as training data for a machine learning model that provides Ansible automation content recommendations. If you have concerns, please contact the Ansible team at <ansible-content-ai@redhat.com>.`}</p></React.Fragment>}
63-
64-
79+
body={
80+
<React.Fragment>
81+
<p>{t`Help other Ansible users by sharing the awesome roles and collections you create.`}</p>
82+
<br />
83+
<p>{t`Maybe you have automation for installing and configuring a popular software package, or for deploying software built by your company. Whatever it is, use Galaxy to share it with the community.`}</p>
84+
<br />
85+
86+
<p>
87+
{t`Red Hat is working on exciting new Ansible content development capabilities within the context of`}{' '}
88+
<a
89+
href='https://www.redhat.com/en/engage/project-wisdom?extIdCarryOver=true&sc_cid=701f2000001OH6uAAG'
90+
target='_blank'
91+
rel='noopener noreferrer'
92+
>{t`Project Wisdom`}</a>{' '}
93+
{t`to help other automators build Ansible content. Your roles and collections may be used as training data for a machine learning model that provides Ansible automation content recommendations. If you have concerns, please contact the Ansible team at`}{' '}
94+
<a href='mailto:ansible-content-ai@redhat.com'>{t`ansible-content-ai@redhat.com`}</a>
95+
</p>
96+
</React.Fragment>
97+
}
6598
/>
66-
<LandingPageCard
99+
<LandingPageCard
67100
title={t`Featured`}
68-
body={<React.Fragment><p>{t`Jump-start your automation project with great content from the Ansible community. Galaxy provides pre-packaged units of work known to Ansible as roles and collections.`}</p><br/>
69-
70-
<p>{t`Content from roles and collections can be referenced in Ansible PlayBooks and immediately put to work. You'll find content for provisioning infrastructure, deploying applications, and all of the tasks you do everyday.`} </p><br/>
71-
<p>{t`Use the Search page to find content for your project, then download them onto your Ansible host using ansible-galaxy, the command line tool that comes bundled with Ansible.`}</p></React.Fragment>}
101+
body={
102+
<React.Fragment>
103+
<b>
104+
<p>{t`AnsibleFest`}</p>
105+
</b>
106+
<br />
107+
<p>
108+
<a href='https://www.redhat.com/en/summit/ansiblefest?intcmp=7013a0000034lvmAAA'>
109+
<img
110+
width='100%'
111+
alt='Ansible Fest at Red Hat Summit May 23rd to 25th 2023'
112+
src='https://www.ansible.com/hubfs/rh-2023-summit-ansiblefest-ansible-galaxy-site-200x200.png'
113+
/>
114+
</a>
115+
</p>
116+
<hr
117+
style={{
118+
boxSizing: 'content-box',
119+
height: 0,
120+
marginTop: 20,
121+
marginBottom: 20,
122+
border: 0,
123+
borderTop: '1px solid #f1f1f1',
124+
}}
125+
/>
126+
<p>
127+
<b>
128+
{t`Extend the power of Ansible to your entire team.`}{' '}
129+
</b>
130+
</p>
131+
<br />
132+
<p>{t`Try Red Hat Ansible Automation Platform`}</p>
133+
<br />
134+
<p>
135+
<a
136+
href='https://www.redhat.com/en/technologies/management/ansible/try-it?sc_cid=7013a0000030vCCAAY'
137+
target='_blank'
138+
rel='noreferrer'
139+
>{t`Get the trial`}</a>
140+
</p>
141+
</React.Fragment>
142+
}
143+
/>
144+
<LandingPageCard
145+
title={t`Terms of Use`}
146+
body={
147+
<React.Fragment>
148+
<p>
149+
{t`Please see our`}{' '}
150+
<a href='https://www.redhat.com/en/about/terms-use'>{t`Terms of Use`}</a>
151+
</p>
152+
</React.Fragment>
153+
}
72154
/>
73155
</div>
74156
</Main>

0 commit comments

Comments
 (0)