Dis 31 landing page comments section

package.json

@@ -11,8 +11,9 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@mui/icons-material": "^6.4.5",
-    "@mui/material": "^6.4.5",
+    "@mui/icons-material": "^6.4.11",
+    "@mui/material": "^6.4.11",
+    "@mui/system": "^7.0.2",
     "next": "15.1.7",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"

src/components/features/TestimonialsSection.tsx

@@ -0,0 +1,72 @@
+// components/features/TestimonialsSection.tsx
+'use client';
+
+import { Box, Typography } from '@mui/material';
+import type { SxProps, Theme } from '@mui/system';
+import TestimonialCard from '@/components/ui/TestimonialCard';
+
+interface Testimonial {
+  name: string;
+  title: string;
+  quote: string;
+  margin: SxProps<Theme>;
+}
+
+const testimonials: Testimonial[] = [
+  {
+    quote: 'SmartAgent cut our missed calls by 80%. Lifesaver for my plumbing business!',
+    name: 'Josn',
+    title: 'CEO of ABC Company',
+    margin: { xs: 0, md: '72px 48px 120px 240px' },
+  },
+  {
+    quote: 'Automated follow-ups saved me 10+ hours a week managing rentals.',
+    name: 'Jena',
+    title: 'Rental Manager',
+    margin: { xs: 0, md: '72px 240px 120px 48px' },
+  },
+];
+
+export default function TestimonialsSection() {
+  return (
+    <Box sx={{ px: 2, py: 10, bgcolor: 'white' }}>
+      {/* Section Title */}
+      <Typography
+        sx={{
+          fontFamily: 'Roboto',
+          fontSize: '48px',
+          fontWeight: 900,
+          lineHeight: 1.17,
+          textAlign: 'center',
+          color: '#060606',
+          maxWidth: '864px',
+          mx: 'auto',
+          mt: '200px',
+          mb: '72px',
+        }}
+      >
+        Trusted by Small Businesses Like Yours
+      </Typography>
+
+      {/* Responsive Card Layout */}
+      <Box
+        display="flex"
+        flexDirection={{ xs: 'column', md: 'row' }}
+        alignItems="center"
+        justifyContent="center"
+        gap={{ xs: 4, md: 0 }}
+        sx={{ overflowX: 'auto' }}
+      >
+        {testimonials.map((item, idx) => (
+          <TestimonialCard
+            key={idx}
+            quote={item.quote}
+            name={item.name}
+            title={item.title}
+            sx={item.margin}
+          />
+        ))}
+      </Box>
+    </Box>
+  );
+}