Skip to content

Commit d9371d0

Browse files
briandoyle81briandoyle81
authored
Merge pull request #1149 from onflow/brian-doyle/tweak-homepage
Tweak homepage to apply feedback
2 parents 93ca6fb + bfdb18b commit d9371d0

File tree

13 files changed

+109
-258
lines changed

13 files changed

+109
-258
lines changed

‎docusaurus.config.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -269,13 +269,13 @@ const config = {
269269
{
270270
to: 'build/flow',
271271
position: 'left',
272-
label: 'Build With Cadence',
272+
label: 'Cadence',
273273
activeBasePath: '/build',
274274
},
275275
{
276276
to: 'evm/about',
277277
position: 'left',
278-
label: 'Build With EVM',
278+
label: 'EVM',
279279
activeBasePath: '/evm',
280280
},
281281
{

‎src/components/ActionCard.tsx

+10-12
Original file line numberDiff line numberDiff line change
@@ -46,24 +46,22 @@ export const ActionCard: React.FC<ActionCardProps> = ({
4646
</div>
4747
)}
4848
{variant === 'horizontal' && (
49-
<div className="flex items-center gap-4 mb-4">
50-
<div
51-
className={`w-10 h-10 rounded-md flex items-center justify-center ${iconBg}`}
52-
>
53-
<Icon name={icon} />
49+
<>
50+
<div className="flex items-center gap-4">
51+
<div className={`shrink-0 w-10 h-10 rounded-md flex items-center justify-center ${iconBg}`}>
52+
<Icon name={icon} />
53+
</div>
54+
<h3 className="text-2xl font-semibold text-white mb-0">{heading}</h3>
5455
</div>
55-
<h3 className="text-xl font-semibold text-white">{heading}</h3>
56-
</div>
56+
<p className="text-base text-gray-100 mt-4">{description}</p>
57+
</>
5758
)}
5859
{variant !== 'horizontal' && (
5960
<div className={variant === 'overlay' ? 'mt-6' : ''}>
60-
<h3 className="text-xl font-semibold text-white mb-2">{heading}</h3>
61-
<p className="text-sm text-gray-100">{description}</p>
61+
<h3 className="text-2xl font-semibold text-white mb-2">{heading}</h3>
62+
<p className="text-base text-gray-100">{description}</p>
6263
</div>
6364
)}
64-
{variant === 'horizontal' && (
65-
<p className="text-sm text-gray-100">{description}</p>
66-
)}
6765
</div>
6866
</div>
6967
);

‎src/components/ActionCardGrid.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ interface ActionCardGridProps {
1717
iconColor?: string;
1818
cardColor?: string;
1919
icon?: string;
20+
variant?: 'horizontal' | 'default' | 'overlay';
2021
onClick?: () => void;
2122
}[];
2223
}[];
@@ -51,7 +52,7 @@ const ActionCardGrid: React.FC<ActionCardGridProps> = ({ title, sections, id, ic
5152
{sections.map((section, sectionIndex) => (
5253
<div key={sectionIndex} className="mb-12">
5354
{/* Section Title */}
54-
<h3 className="pl-8 text-2xl font-semibold text-white-300 mb-4">{section.title}</h3>
55+
<h3 className="pl-8 text-2xl font-semibold text-gray-900 dark:text-white mb-4">{section.title}</h3>
5556
{/* Cards Grid */}
5657
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 pl-8">
5758
{section.cards.map((card, cardIndex) => (
@@ -63,6 +64,7 @@ const ActionCardGrid: React.FC<ActionCardGridProps> = ({ title, sections, id, ic
6364
heading={card.heading}
6465
description={card.description}
6566
onClick={card.onClick}
67+
variant={card.variant}
6668
/>
6769
))}
6870
</div>

‎src/components/ConnectButton.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ const ConnectButton: React.FC = () => {
4343
if (!user.loggedIn) {
4444
return (
4545
<Button size="sm" className="mr-2" onClick={logIn}>
46-
Connect
46+
Sign In
4747
</Button>
4848
);
4949
}

‎src/css/custom.css

+2
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@
1010

1111
/* You can override the default Infima variables here. */
1212
:root {
13+
--ifm-font-family-base: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
14+
--ifm-font-family-monospace: 'IBM Plex Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
1315
--ifm-color-primary: #2e8555;
1416
--ifm-color-primary-dark: #29784c;
1517
--ifm-color-primary-darker: #277148;

‎src/ui/design-system/src/lib/Components/Button/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import ChevronRightIcon from '../../../../images/arrows/chevron-right-sm.svg';
44
import ExternalLinkIcon from '../../../../images/content/external-link-variant.svg';
55

66
const BASE_CLASSES =
7-
'inline-flex items-center justify-center font-semibold text-center border transition duration-200 cursor-pointer';
7+
'inline-flex items-center justify-center font-semibold text-center border transition duration-200 cursor-pointer font-display';
88

99
const VARIANTS = {
1010
black: {

‎src/ui/design-system/src/lib/Components/HomeNav/index.tsx

+7-27
Original file line numberDiff line numberDiff line change
@@ -9,39 +9,19 @@ const NAVIGATION_CARDS = [
99
iconColor: 'green' as const,
1010
cardColor: 'black' as const,
1111
href: '#Build',
12-
variant: 'overlay' as const,
12+
variant: 'horizontal' as const,
1313
icon: 'getting-started'
1414
},
1515
{
1616
heading: 'Grow',
1717
description:
18-
'Access builder credits, startup support, and connect with the Flow team in weekly office hours.',
19-
iconColor: 'blue' as const,
18+
'Access builder credits, startup support, and explore funding opportunities.',
19+
iconColor: 'purple' as const,
2020
cardColor: 'black' as const,
2121
href: '#Grow',
22-
variant: 'overlay' as const,
22+
variant: 'horizontal' as const,
2323
icon: 'grow'
2424
},
25-
{
26-
heading: 'Fund',
27-
description:
28-
'Explore funding opportunities through VCs, grants, and hackathons to bring your project to life.',
29-
iconColor: 'purple' as const,
30-
cardColor: 'black' as const,
31-
href: '#Fund',
32-
variant: 'overlay' as const,
33-
icon: 'fund'
34-
},
35-
{
36-
heading: 'Learn',
37-
description:
38-
'Learn the basics, dive into the Cadence smart contract language, or explore how to keep building on EVM with the advantages of Flow.',
39-
iconColor: 'teal' as const,
40-
cardColor: 'black' as const,
41-
href: '#Learn',
42-
variant: 'overlay' as const,
43-
icon: 'learn'
44-
},
4525
] as const;
4626

4727
export interface HomeNavProps {
@@ -54,10 +34,10 @@ export function HomeNav({
5434
return (
5535
<div className="relative p-8">
5636
<div className="relative pl-8">
57-
<div className="flex flex-col md:flex-row">
37+
<div className="flex flex-col md:flex-row items-center">
5838
{/* Left side - Title */}
59-
<div className="flex-1 basis-1/3 pr-8 flex items-center">
60-
<h1 className="text mb-8 max-w-full !text-3xl md:!text-6xl font-normal leading-[1.4]">
39+
<div className="flex-1 basis-1/3 pr-8">
40+
<h1 className="text mb-8 max-w-full !text-3xl md:!text-6xl font-normal font-['Inter'] leading-[1.4] md:mb-0">
6141
{title}
6242
</h1>
6343
</div>

‎src/ui/design-system/src/lib/Pages/HomePage/GridData/BuildGridData.tsx

+46-87
Original file line numberDiff line numberDiff line change
@@ -8,48 +8,57 @@ export const buildGridData = {
88
{
99
title: 'Getting Started',
1010
cards: [
11-
{
12-
heading: 'Why Flow?',
11+
{
12+
heading: 'Cadence',
1313
description:
14-
'Learn what led Dieter Shirley, Chief Architect of Flow and co-author of the ERC-721 NFT standard to lead the development of a new L1 blockchain.',
14+
'Learn why Dieter Shirley, co-author of the ERC-721 NFT standard, led the development of a new L1.',
1515
iconColor: 'green',
1616
cardColor: 'black',
17-
icon: 'why-flow',
17+
icon: 'flow-cadence',
18+
variant: 'horizontal',
1819
onClick: () => {
1920
window.location.href = 'build/flow';
2021
}
2122
},
2223
{
23-
heading: 'A Better Language',
24+
heading: 'EVM',
2425
description:
25-
'Cadence is a resource-oriented programming language that makes it easy to build secure, scalable, and composable applications.',
26+
'Deploy your Solidity contracts on Flow to get sub-cent transaction fees, sponsored gas, and the ability to scale to millions of users.',
2627
iconColor: 'green',
2728
cardColor: 'black',
28-
icon: 'flow-cadence',
29+
icon: 'evm-on-flow',
30+
variant: 'horizontal',
2931
onClick: () => {
30-
window.open('https://cadence-lang.org', '_blank');
32+
window.location.href = 'evm/about';
3133
}
3234
},
35+
],
36+
},
37+
{
38+
title: 'Learn Cadence',
39+
cards: [
3340
{
34-
heading: 'Flow EVM',
41+
heading: 'Hello World',
3542
description:
36-
'The future is here. Deploy your Solidity contracts on Flow to get sub-cent transaction fees, sponsored gas, and the ability to scale to millions of users.',
43+
'Build and deploy your first contract, connect to it from the frontend, and call your smart contract functions - all in less than 30 minutes.',
3744
iconColor: 'green',
3845
cardColor: 'black',
39-
icon: 'evm-on-flow',
46+
icon: 'hello-world',
47+
variant: 'horizontal',
4048
onClick: () => {
41-
window.location.href = 'evm/about';
49+
window.location.href = 'build/getting-started/contract-interaction';
4250
}
4351
},
4452
{
45-
heading: 'Hello World',
53+
heading: 'Cadence 101',
4654
description:
47-
'Build and deploy your first contract, connect to it from the frontend, and call your smart contract functions - all in less than 30 minutes.',
55+
'Cadence is a resource-oriented programming language that makes it easy to build secure, scalable, and composable applications.',
4856
iconColor: 'green',
4957
cardColor: 'black',
50-
icon: 'hello-world',
58+
icon: 'flow-cadence',
59+
variant: 'horizontal',
5160
onClick: () => {
52-
window.location.href = 'build/getting-started/contract-interaction';
61+
window.open('https://cadence-lang.org', '_blank');
5362
}
5463
},
5564
{
@@ -59,6 +68,7 @@ export const buildGridData = {
5968
iconColor: 'green',
6069
cardColor: 'black',
6170
icon: 'launch-a-token',
71+
variant: 'horizontal',
6272
onClick: () => {
6373
window.location.href = 'build/guides/fungible-token';
6474
}
@@ -70,21 +80,24 @@ export const buildGridData = {
7080
iconColor: 'green',
7181
cardColor: 'black',
7282
icon: 'create-an-nft',
83+
variant: 'horizontal',
7384
onClick: () => {
7485
window.location.href = 'build/guides/nft';
7586
}
7687
},
77-
// {
78-
// heading: 'Chat with Other Devs',
79-
// description:
80-
// 'Head over to Developer Chat on Discord to share what you\'re working on, get help, and chat with other developers.',
81-
// iconColor: 'green',
82-
// cardColor: 'black',
83-
// onClick: () => {
84-
// window.location.href = 'https://discord.com/channels/613813861610684416/1162086721471647874';
85-
// }
86-
// },
87-
],
88+
{
89+
heading: 'Build your App',
90+
description:
91+
'The Flow Client Library (FCL) JS is a package used to interact with user wallets and the Flow blockchain.',
92+
iconColor: 'green',
93+
cardColor: 'black',
94+
icon: 'flow-client-library',
95+
variant: 'horizontal',
96+
onClick: () => {
97+
window.location.href = 'tools/clients/fcl-js';
98+
}
99+
},
100+
]
88101
},
89102
{
90103
title: 'Supercharge Your App',
@@ -96,6 +109,7 @@ export const buildGridData = {
96109
iconColor: 'green',
97110
cardColor: 'black',
98111
icon: 'access-incredible-ip',
112+
variant: 'horizontal',
99113
onClick: () => {
100114
window.location.href = 'build/guides/account-linking-with-dapper';
101115
}
@@ -107,6 +121,7 @@ export const buildGridData = {
107121
iconColor: 'green',
108122
cardColor: 'black',
109123
icon: 'vrf---cadence',
124+
variant: 'horizontal',
110125
onClick: () => {
111126
window.location.href = 'build/advanced-concepts/randomness';
112127
}
@@ -118,6 +133,7 @@ export const buildGridData = {
118133
iconColor: 'green',
119134
cardColor: 'black',
120135
icon: 'vrf---evm',
136+
variant: 'horizontal',
121137
onClick: () => {
122138
window.location.href = 'evm/guides/vrf';
123139
}
@@ -129,6 +145,7 @@ export const buildGridData = {
129145
iconColor: 'green',
130146
cardColor: 'black',
131147
icon: 'account-abstraction',
148+
variant: 'horizontal',
132149
onClick: () => {
133150
window.location.href = 'build/guides/account-linking/child-accounts';
134151
}
@@ -140,6 +157,7 @@ export const buildGridData = {
140157
iconColor: 'green',
141158
cardColor: 'black',
142159
icon: 'batched-evm-transactions',
160+
variant: 'horizontal',
143161
onClick: () => {
144162
window.location.href = 'evm/cadence/batched-evm-transactions';
145163
}
@@ -151,71 +169,12 @@ export const buildGridData = {
151169
iconColor: 'green',
152170
cardColor: 'black',
153171
icon: 'cross-vm-bridge',
172+
variant: 'horizontal',
154173
onClick: () => {
155174
window.location.href = 'evm/cadence/vm-bridge';
156175
}
157176
},
158177
],
159178
},
160-
{
161-
title: 'Tools',
162-
cards: [
163-
{
164-
heading: 'Flow CLI',
165-
description:
166-
'The Flow Command Line Interface (CLI) is a powerful tool that enables developers to seamlessly interact with the Flow blockchain across various environments.',
167-
iconColor: 'green',
168-
cardColor: 'black',
169-
icon: 'flow-cli',
170-
onClick: () => {
171-
window.location.href = 'tools/flow-cli';
172-
}
173-
},
174-
{
175-
heading: 'Flow Emulator',
176-
description:
177-
'The Flow Emulator is a local blockchain environment that allows developers to test and develop their applications without the need to deploy to the mainnet or testnet.',
178-
iconColor: 'green',
179-
cardColor: 'black',
180-
icon: 'flow-emulator',
181-
onClick: () => {
182-
window.location.href = 'tools/emulator';
183-
}
184-
},
185-
{
186-
heading: 'Flow Client Library (FCL)',
187-
description:
188-
'The Flow Client Library (FCL) JS is a package used to interact with user wallets and the Flow blockchain.',
189-
iconColor: 'green',
190-
cardColor: 'black',
191-
icon: 'flow-client-library',
192-
onClick: () => {
193-
window.location.href = 'tools/clients/fcl-js';
194-
}
195-
},
196-
{
197-
heading: 'EVM Tools and Libraries',
198-
description:
199-
'Most of your favorite EVM tools and libraries are compatible with Flow. Learn how to work with Hardhat, Foundry, Wagmi, and more.',
200-
iconColor: 'green',
201-
cardColor: 'black',
202-
icon: 'evm-tools',
203-
onClick: () => {
204-
window.location.href = 'evm/guides/wagmi';
205-
}
206-
},
207-
{
208-
heading: 'Other Clients',
209-
description:
210-
'Additional clients are available for interacting with the Flow blockchain using a number of popular languages, including Go, Python, Ruby, and JavaScript.',
211-
iconColor: 'green',
212-
cardColor: 'black',
213-
icon: 'other-clients',
214-
onClick: () => {
215-
window.location.href = 'tools/clients';
216-
}
217-
}
218-
],
219-
},
220179
],
221180
};

0 commit comments

Comments
 (0)