Skip to content

Commit

Permalink
fix: styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@gagdiez
gagdiez committed Oct 7, 2024
1 parent 0e8d7f7 commit 7479108
Show file tree
Hide file tree
Showing 5 changed files with 187 additions and 191 deletions.
172 changes: 85 additions & 87 deletions src/components/home/ChainAbstraction/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,96 +9,94 @@ export const ChainAbstraction = () => {
const deviceType = useDeviceType();

return (
<>
<Flex
stack
gap="l"
gapPhone="xl"
gapTablet="xl"
style={{ padding: '0.5rem', flexGrow: 1, justifyContent: 'space-between' }}
<Flex
stack
gap="l"
gapPhone="xl"
gapTablet="xl"
justify='space-between'
style={{ padding: '0.5rem', flex: "auto" }}
>
<Grid
columns="542px minmax(0, 1fr)"
gap="2xl"
gapPhone="m"
gapTablet="m"
columnsTablet="minmax(0, 1fr)"
columnsPhone="minmax(0, 1fr)"
>
<Grid
columns="542px minmax(0, 1fr)"
gap="2xl"
gapPhone="m"
gapTablet="m"
columnsTablet="minmax(0, 1fr)"
columnsPhone="minmax(0, 1fr)"
>
<Flex stack gap="m">
<Text as="h1" style={{ fontWeight: 'normal' }}>
{' '}
The Account Model Built for Abstraction{' '}
</Text>
<Text size="text-l" style={{ fontWeight: 'lighter' }}>
Built-in named accounts, a rich key system, and contracts that are wallets
</Text>
</Flex>
<Flex stack gap="m" style={{ justifyContent: 'center', textAlign: 'center' }}>
<UserCheck fill="var(--green11)" size="s" style={{ height: '95px' }} />
<Button
iconLeft={<BookOpenText fill="bold" />}
href="/documentation/concepts/protocol/account-model"
label="Read on Account Model"
/>
</Flex>
</Grid>
<Flex stack gap="m">
<Text as="h1" style={{ fontWeight: 'normal' }}>
The Account Model Built for Abstraction
</Text>
<Text size="text-l" style={{ fontWeight: 'lighter' }}>
Built-in named accounts, a rich key system, and contracts that are wallets
</Text>
</Flex>
<Flex stack gap="m" style={{ justifyContent: 'center', textAlign: 'center' }}>
<UserCheck fill="var(--green11)" size="s" style={{ height: '95px' }} />
<Button
iconLeft={<BookOpenText fill="bold" />}
href="/documentation/concepts/protocol/account-model"
label="Read on Account Model"
/>
</Flex>
</Grid>

<Grid
columns="minmax(0, 1fr) 542px"
gap="2xl"
gapPhone="m"
gapTablet="m"
columnsTablet="minmax(0, 1fr)"
columnsPhone="minmax(0, 1fr)"
style={{ margin: deviceType != 'desktop' ? '24px 0' : '0' }}
>
<Flex stack gap="m" style={{ justifyContent: 'center', gridRowEnd: deviceType == 'desktop' ? 'auto' : '3' }}>
<GasPump fill="var(--red9)" size="s" style={{ height: '95px' }} />
<Button
iconLeft={<BookOpenText fill="bold" />}
href="/documentation/concepts/abstraction/relayers"
label="Discover Gas Relayers"
/>
</Flex>
<Flex stack gap="m" justify="space-between">
<Text as="h1" style={{ fontWeight: 'normal' }}>
Easily Cover your Users&apos; Transactions
</Text>
<Text size="text-l" style={{ fontWeight: 'lighter' }}>
Built-in meta-transactions enable your users to enjoy your application, without handling funds
</Text>
</Flex>
</Grid>
<Grid
columns="minmax(0, 1fr) 542px"
gap="2xl"
gapPhone="m"
gapTablet="m"
columnsTablet="minmax(0, 1fr)"
columnsPhone="minmax(0, 1fr)"
style={{ margin: deviceType != 'desktop' ? '24px 0' : '0' }}
>
<Flex stack gap="m" style={{ justifyContent: 'center', gridRowEnd: deviceType == 'desktop' ? 'auto' : '3' }}>
<GasPump fill="var(--red9)" size="s" style={{ height: '95px' }} />
<Button
iconLeft={<BookOpenText fill="bold" />}
href="/documentation/concepts/abstraction/relayers"
label="Discover Gas Relayers"
/>
</Flex>
<Flex stack gap="m" justify="space-between">
<Text as="h1" style={{ fontWeight: 'normal' }}>
Easily Cover your Users&apos; Transactions
</Text>
<Text size="text-l" style={{ fontWeight: 'lighter' }}>
Built-in meta-transactions enable your users to enjoy your application, without handling funds
</Text>
</Flex>
</Grid>

<Grid
columns="542px minmax(0, 1fr)"
gap="2xl"
gapPhone="m"
gapTablet="m"
columnsTablet="minmax(0, 1fr)"
columnsPhone="minmax(0, 1fr)"
>
<Flex stack gap="m" style={{ textAlign: 'left' }}>
<Text as="h1" style={{ fontWeight: 'normal' }}>
{' '}
Control Accounts Across Multiple Chains{' '}
</Text>
<Text size="text-l" style={{ fontWeight: 'lighter' }}>
Near accounts can sign transactions for chains like Ethereum, Bitcoin or Doge
</Text>
</Flex>
<Flex stack gap="m" style={{ justifyContent: 'center', textAlign: 'center' }}>
<Signature fill="var(--violet8)" size="s" style={{ height: '95px' }} />
<Grid
columns="542px minmax(0, 1fr)"
gap="2xl"
gapPhone="m"
gapTablet="m"
columnsTablet="minmax(0, 1fr)"
columnsPhone="minmax(0, 1fr)"
>
<Flex stack gap="m" style={{ textAlign: 'left' }}>
<Text as="h1" style={{ fontWeight: 'normal' }}>
{' '}
Control Accounts Across Multiple Chains{' '}
</Text>
<Text size="text-l" style={{ fontWeight: 'lighter' }}>
Near accounts can sign transactions for chains like Ethereum, Bitcoin or Doge
</Text>
</Flex>
<Flex stack gap="m" style={{ justifyContent: 'center', textAlign: 'center' }}>
<Signature fill="var(--violet8)" size="s" style={{ height: '95px' }} />

<Button
iconLeft={<BookOpenText fill="bold" />}
href="/documentation/build/chain-abstraction/chain-signatures/getting-started"
label="Discover Chain Signatures"
/>
</Flex>
</Grid>
</Flex>
</>
<Button
iconLeft={<BookOpenText fill="bold" />}
href="/documentation/build/chain-abstraction/chain-signatures/getting-started"
label="Discover Chain Signatures"
/>
</Flex>
</Grid>
</Flex>
);
};
15 changes: 7 additions & 8 deletions src/components/home/Contracts/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,27 +81,26 @@ export const Contracts = () => {
const [language, setLanguage] = useState('js');

return (
<>
<Flex stack justify='space-between' style={{ flex: "auto", padding: ".5rem" }}>
<Grid
columns="55% minmax(0, 45%)"
gap="xl"
columnsPhone="minmax(0, 1fr)"
columnsTablet="minmax(0, 1fr)"
style={{ flexGrow: 1, padding: '0.5rem' }}
style={{ flexGrow: 1 }}
>
<Flex stack style={{ justifyContent: 'space-between' }}>
<Flex stack justify='space-between'>
<Flex stack gap="m">
<Text as="h1" style={{ fontWeight: 'normal' }}>
{' '}
Building Contracts Has Never Been Easier{' '}
Building Contracts Has Never Been Easier
</Text>
<Text size="text-l" style={{ fontWeight: 'lighter' }}>
Develop, test and deploy contracts using the stack you already know and love
</Text>
</Flex>

<Tabs.Root value={language}>
<Tabs.List style={{ marginBottom: 'var(--gap-s)', fontSize: 'small' }}>
<Tabs.List style={{ fontSize: 'small' }}>
<Tabs.Trigger onClick={() => setLanguage('js')} value="js">
🌐 Javascript
</Tabs.Trigger>
Expand All @@ -120,7 +119,7 @@ export const Contracts = () => {
</Flex>

<Tabs.Root value={language}>
<Flex stack style={{ flexGrow: 1, justifyContent: 'space-between' }}>
<Flex stack justify='space-between' style={{ flexGrow: 1 }}>
<Tabs.Content value="js">
<Title> One Command Setup </Title>
<Code code={`npx create-near-app@latest`} language="bash" />
Expand Down Expand Up @@ -151,6 +150,6 @@ export const Contracts = () => {
label="Start Now"
style={{ marginTop: 'var(--gap-m)' }}
/>
</>
</Flex>
);
};
Loading

0 comments on commit 7479108

Please sign in to comment.