UI landing

libs/ui/src/lib/landing/LandingPage.tsx

@@ -12,6 +12,7 @@ import {
   Container,
   Divider,
   Drawer,
+  Grid,
   Group,
   Paper,
   Select,
@@ -886,15 +887,15 @@ 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 */}
+          <Grid.Col span={{ base: 12, md: 4 }}>
             <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">
@@ -937,9 +938,10 @@ function Faq() {
                 </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>
   );