website refactor
This commit is contained in:
@@ -3,10 +3,10 @@
|
||||
import React from 'react';
|
||||
import { Button } from '@/ui/Button';
|
||||
import { Glow } from '@/ui/Glow';
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Container } from '@/ui/Container';
|
||||
import { Heading } from '@/ui/Heading';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
|
||||
interface HomeHeaderProps {
|
||||
title: string;
|
||||
@@ -34,16 +34,16 @@ export function HomeHeader({
|
||||
secondaryAction,
|
||||
}: HomeHeaderProps) {
|
||||
return (
|
||||
<Box as="header" position="relative" overflow="hidden" bg="graphite-black" py={{ base: 24, lg: 32 }} borderBottom borderColor="border-gray">
|
||||
<Stack as="header" position="relative" overflow="hidden" bg="graphite-black" py={{ base: 24, lg: 32 }} borderBottom borderColor="border-gray">
|
||||
<Glow color="primary" size="xl" position="top-right" opacity={0.1} />
|
||||
|
||||
<Container>
|
||||
<Box maxWidth="4xl">
|
||||
<Box display="flex" alignItems="center" gap={3} borderLeft borderStyle="solid" borderWidth="2px" borderColor="primary-accent" bg="primary-accent/5" px={4} py={1} mb={8}>
|
||||
<Stack maxWidth="4xl" fullWidth>
|
||||
<Stack direction="row" align="center" gap={3} borderLeft borderStyle="solid" borderWidth="2px" borderColor="primary-accent" bg="primary-accent/5" px={4} py={1} mb={8}>
|
||||
<Text size="xs" weight="bold" uppercase letterSpacing="0.3em" color="text-primary-accent">
|
||||
{subtitle}
|
||||
</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
<Heading
|
||||
level={1}
|
||||
@@ -57,13 +57,13 @@ export function HomeHeader({
|
||||
{title}
|
||||
</Heading>
|
||||
|
||||
<Box borderLeft borderStyle="solid" borderColor="border-gray" pl={8} mb={12} maxWidth="2xl">
|
||||
<Stack borderLeft borderStyle="solid" borderColor="border-gray" pl={8} mb={12} maxWidth="2xl">
|
||||
<Text size="lg" color="text-gray-400" leading="relaxed" opacity={0.8}>
|
||||
{description}
|
||||
</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
<Box display="flex" flexDirection={{ base: 'col', sm: 'row' }} gap={4}>
|
||||
<Stack direction={{ base: 'col', md: 'row' }} gap={4}>
|
||||
<Button
|
||||
as="a"
|
||||
href={primaryAction.href}
|
||||
@@ -87,9 +87,9 @@ export function HomeHeader({
|
||||
>
|
||||
{secondaryAction.label}
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Container>
|
||||
</Box>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user