UI landing

This commit is contained in:
estifanos
2026-08-19 08:38:37 +00:00
parent 58f9dd7668
commit 2978690669

View File

@@ -12,6 +12,7 @@ import {
Container,
Divider,
Drawer,
Grid,
Group,
Paper,
Select,
@@ -886,60 +887,61 @@ function Faq() {
<Box id="faq" component="section" py={72} style={{ background: 'var(--mantine-color-default-hover)' }}>
<Container size="xl">
<SectionHeading title={t('landing.faq.title')} subtitle={t('landing.faq.eyebrow')} />
<SimpleGrid cols={{ base: 1, md: 12 }} spacing="xl">
<Grid gutter="xl">
{/* Left Column: Direct Support Box */}
<Paper
component={Stack}
gap="md"
p="xl"
radius="lg"
withBorder
style={{ gridColumn: 'span 4' }}
className="ema-landing-hover ema-contact-hq-card"
>
<ThemeIcon size={44} radius="lg" variant="light" color="emaPrimary">
<IconHelpCircle size={24} />
</ThemeIcon>
<Stack gap={4}>
<Text fw={700} fz="lg">
{t('landing.faq.eyebrow')}
</Text>
<Text fz="sm" c="dimmed" style={{ lineHeight: 1.6 }}>
{t('landing.faq.supportPrompt')}
</Text>
</Stack>
<Button
component="a"
href="#contact"
variant="filled"
color="emaPrimary"
leftSection={<IconMessage size={18} />}
radius="md"
<Grid.Col span={{ base: 12, md: 4 }}>
<Paper
component={Stack}
gap="md"
p="xl"
radius="lg"
withBorder
className="ema-landing-hover ema-contact-hq-card"
>
{t('landing.faq.contactSupport')}
</Button>
<Divider my={4} />
<Group gap="xs" align="center">
<ThemeIcon size={28} radius="xl" variant="light" color="emaTeal">
<IconPhone size={14} />
<ThemeIcon size={44} radius="lg" variant="light" color="emaPrimary">
<IconHelpCircle size={24} />
</ThemeIcon>
<Stack gap={0}>
<Text fz="xs" fw={700}>
{t('landing.footer.emergencyLabel')}
<Stack gap={4}>
<Text fw={700} fz="lg">
{t('landing.faq.eyebrow')}
</Text>
<Text fz="xs" c="dimmed" fw={600}>
{t('landing.footer.emergencyValue')}
<Text fz="sm" c="dimmed" style={{ lineHeight: 1.6 }}>
{t('landing.faq.supportPrompt')}
</Text>
</Stack>
</Group>
</Paper>
<Button
component="a"
href="#contact"
variant="filled"
color="emaPrimary"
leftSection={<IconMessage size={18} />}
radius="md"
>
{t('landing.faq.contactSupport')}
</Button>
<Divider my={4} />
<Group gap="xs" align="center">
<ThemeIcon size={28} radius="xl" variant="light" color="emaTeal">
<IconPhone size={14} />
</ThemeIcon>
<Stack gap={0}>
<Text fz="xs" fw={700}>
{t('landing.footer.emergencyLabel')}
</Text>
<Text fz="xs" c="dimmed" fw={600}>
{t('landing.footer.emergencyValue')}
</Text>
</Stack>
</Group>
</Paper>
</Grid.Col>
{/* Right Column: Accordion Cards */}
<Box style={{ gridColumn: 'span 8' }}>
<Grid.Col span={{ base: 12, md: 8 }}>
<Accordion variant="separated" radius="lg" className="ema-faq-accordion">
{FAQ_KEYS.map((key) => {
const Icon = FAQ_ICONS[key];
@@ -965,8 +967,8 @@ function Faq() {
);
})}
</Accordion>
</Box>
</SimpleGrid>
</Grid.Col>
</Grid>
</Container>
</Box>
);