Files
react-test/docs/data/joy/getting-started/templates/framesx-web-blocks/blocks/HeroLeft09.tsx
how2ice 005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
init project
2025-12-12 14:26:25 +09:00

50 lines
1.3 KiB
TypeScript

import Button from '@mui/joy/Button';
import Link from '@mui/joy/Link';
import Typography from '@mui/joy/Typography';
import ArrowForward from '@mui/icons-material/ArrowForward';
import TwoSidedLayout from '../components/TwoSidedLayout';
export default function HeroLeft09() {
return (
<TwoSidedLayout reversed>
<Typography
level="h1"
sx={{
fontWeight: 'xl',
fontSize: 'clamp(1.875rem, 1.3636rem + 2.1818vw, 3rem)',
}}
>
A large headlinerer about our product features & services
</Typography>
<Typography
textColor="text.secondary"
sx={{ fontSize: 'lg', lineHeight: 'lg' }}
>
A descriptive secondary text placeholder. Use it to explain your business
offer better.
</Typography>
<Button
size="lg"
endDecorator={<ArrowForward fontSize="xl" />}
sx={{ mt: 2, mb: 1 }}
>
Get Started
</Button>
<Typography>
Already a member? <Link sx={{ fontWeight: 'lg' }}>Sign in</Link>
</Typography>
<Typography
level="body-xs"
sx={{
position: 'absolute',
top: '2rem',
left: '50%',
transform: 'translateX(-50%)',
}}
>
HeroLeft09
</Typography>
</TwoSidedLayout>
);
}