From 2978690669f9cbb9c3bf37efe61e456359862334 Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Wed, 19 Aug 2026 08:38:37 +0000
Subject: [PATCH] UI landing

---
 libs/ui/src/lib/landing/LandingPage.tsx | 98 +++++++++++++------------
 1 file changed, 50 insertions(+), 48 deletions(-)

diff --git a/libs/ui/src/lib/landing/LandingPage.tsx b/libs/ui/src/lib/landing/LandingPage.tsx
index cdafc626d..1d1e01270 100644
--- a/libs/ui/src/lib/landing/LandingPage.tsx
+++ b/libs/ui/src/lib/landing/LandingPage.tsx
@@ -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>
   );