feat: add TabletInstallationSection component with responsive design and features

src/views/Landing/TabletInstallationSection.jsx

@@ -0,0 +1,178 @@
+import { Box, Container, Typography } from '@mui/joy'
+
+const TabletInstallationSection = () => {
+  return (
+    <Container maxWidth='xl' sx={{ py: { xs: 6, sm: 8, md: 12 } }}>
+      {/* Section Header */}
+      <Box textAlign='center' mb={{ xs: 6, md: 8 }} data-aos='fade-up'>
+        <Typography
+          level='h2'
+          sx={{
+            fontSize: { xs: 28, sm: 36, md: 42, lg: 48 },
+            fontWeight: 700,
+            mb: { xs: 2, md: 3 },
+            color: 'text.primary',
+            lineHeight: { xs: 1.2, md: 1.1 },
+            background:
+              'linear-gradient(135deg, var(--joy-palette-primary-500) 0%, var(--joy-palette-primary-600) 100%)',
+            backgroundClip: 'text',
+            WebkitBackgroundClip: 'text',
+            WebkitTextFillColor: 'transparent',
+            textAlign: 'center',
+          }}
+        >
+          Perfect for Tablet Installations
+        </Typography>
+        <Typography
+          level='body-lg'
+          sx={{
+            fontSize: { xs: 16, sm: 17, md: 18, lg: 19 },
+            color: 'text.secondary',
+            maxWidth: { xs: '100%', sm: 600, md: 700 },
+            mx: 'auto',
+            lineHeight: 1.6,
+            px: { xs: 1, sm: 0 },
+          }}
+        >
+          Mount Donetick on your tablet for easy family task management. Perfect
+          for kitchens, offices, or any shared space.
+        </Typography>
+      </Box>
+
+      {/* Tablet Image Section */}
+      <Box
+        data-aos='fade-up'
+        data-aos-duration='1000'
+        sx={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          mb: { xs: 4, md: 6 },
+        }}
+      >
+        <img
+          src='/assets/ipad_dashbard_calendar.png'
+          alt='DoneTick dashboard with calendar view showing task management interface'
+          style={{
+            maxWidth: '90%',
+            height: 'auto',
+            borderRadius: '24px',
+            border: '12px solid #2a2a2a',
+            boxShadow:
+              '0 25px 50px rgba(0, 0, 0, 0.25), 0 10px 20px rgba(0, 0, 0, 0.15)',
+          }}
+        />
+      </Box>
+
+      {/* Features Grid */}
+      <Box
+        data-aos='fade-up'
+        data-aos-delay='200'
+        sx={{
+          display: 'grid',
+          gridTemplateColumns: { xs: '1fr', md: 'repeat(3, 1fr)' },
+          gap: { xs: 3, md: 4 },
+          mt: { xs: 6, md: 8 },
+        }}
+      >
+        <Box
+          sx={{
+            textAlign: 'center',
+            p: { xs: 3, md: 4 },
+            borderRadius: '16px',
+            background: 'background.surface',
+            border: '1px solid',
+            borderColor: 'divider',
+          }}
+        >
+          <Typography
+            level='title-lg'
+            sx={{
+              mb: 2,
+              color: 'text.primary',
+              fontWeight: 600,
+            }}
+          >
+            Kitchen Ready
+          </Typography>
+          <Typography
+            level='body-md'
+            sx={{
+              color: 'text.secondary',
+              lineHeight: 1.6,
+            }}
+          >
+            Perfect for family chore tracking. Mount it in your kitchen for
+            everyone to see and update tasks easily.
+          </Typography>
+        </Box>
+
+        <Box
+          sx={{
+            textAlign: 'center',
+            p: { xs: 3, md: 4 },
+            borderRadius: '16px',
+            background: 'background.surface',
+            border: '1px solid',
+            borderColor: 'divider',
+          }}
+        >
+          <Typography
+            level='title-lg'
+            sx={{
+              mb: 2,
+              color: 'text.primary',
+              fontWeight: 600,
+            }}
+          >
+            Office Dashboard
+          </Typography>
+          <Typography
+            level='body-md'
+            sx={{
+              color: 'text.secondary',
+              lineHeight: 1.6,
+            }}
+          >
+            Transform any workspace with a dedicated task management display.
+            Great for team collaboration and productivity.
+          </Typography>
+        </Box>
+
+        <Box
+          sx={{
+            textAlign: 'center',
+            p: { xs: 3, md: 4 },
+            borderRadius: '16px',
+            background: 'background.surface',
+            border: '1px solid',
+            borderColor: 'divider',
+          }}
+        >
+          <Typography
+            level='title-lg'
+            sx={{
+              mb: 2,
+              color: 'text.primary',
+              fontWeight: 600,
+            }}
+          >
+            Always Accessible
+          </Typography>
+          <Typography
+            level='body-md'
+            sx={{
+              color: 'text.secondary',
+              lineHeight: 1.6,
+            }}
+          >
+            No need to reach for phones. With a mounted tablet, your task
+            management is always visible and touchable.
+          </Typography>
+        </Box>
+      </Box>
+    </Container>
+  )
+}
+
+export default TabletInstallationSection