feat: tablet about

Fixing Typescript "Cannot find module" for svg assets:
[svgr d.ts](gregberge/svgr#551 (comment))

declarations.d.ts

@@ -0,0 +1,9 @@
+declare module '*.svg?url' {
+  import type { ComponentType, SVGProps } from 'react';
+
+  type SvgComponent = ComponentType<SVGProps>;
+
+  const Svg: SvgComponent;
+
+  export = Svg;
+}

next.config.js

@@ -4,8 +4,14 @@ const nextConfig = {
     config.module.rules.push({
       test: /\.svg$/i,
       issuer: /\.[jt]sx?$/,
+      resourceQuery: { not: [/url/] }, // exclude react component if *.svg?url
       use: ['@svgr/webpack'],
     });
+    config.module.rules.push({
+      test: /\.svg$/i,
+      type: 'asset',
+      resourceQuery: /url/, // *.svg?url
+    });
 
     return config;
   },

src/features/About.tsx

@@ -1,50 +1,118 @@
 import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
 import React from 'react';
 
 import mobileEnjoyablePlaceSm from '@/assets/homepage/enjoyable-place-mobile.jpg';
 import mobileEnjoyablePlaceMd from '@/assets/homepage/enjoyable-place-mobile@2x.jpg';
+import tabletEnjoyablePlaceSm from '@/assets/homepage/enjoyable-place-tablet.jpg';
+import tabletEnjoyablePlaceMd from '@/assets/homepage/enjoyable-place-tablet@2x.jpg';
 import mobileLocallySourceSm from '@/assets/homepage/locally-sourced-mobile.jpg';
 import mobileLocallySourceMd from '@/assets/homepage/locally-sourced-mobile@2x.jpg';
+import tabletLocallySourceSm from '@/assets/homepage/locally-sourced-tablet.jpg';
+import tabletLocallySourceMd from '@/assets/homepage/locally-sourced-tablet@2x.jpg';
+import patternCurveTopLeft from '@/assets/patterns/pattern-curve-top-left.svg?url';
+import patternCurveTopRight from '@/assets/patterns/pattern-curve-top-right.svg?url';
+import patternLines from '@/assets/patterns/pattern-lines.svg?url';
 
 import InfoCard from './InfoCard';
 
+const StyledBox = styled(Box)(({ theme }) => ({
+  [theme.breakpoints.up('tablet')]: {
+    position: 'relative',
+    '&::before, &::after': {
+      content: '""',
+      width: 895, // default svg width
+      height: 320, // default svg height
+      backgroundImage: `url(${patternCurveTopRight})`,
+      position: 'absolute',
+      top: 196,
+      left: -516, // svgWidth - (tabletSize / 2) + adjustment
+      zIndex: 1,
+    },
+    '&::after': {
+      backgroundImage: `url(${patternCurveTopLeft})`,
+      top: 'revert',
+      left: 'revert',
+      // left: 384,
+      right: -511, // svgWidth - (tabletSize / 2)
+      bottom: -118, // Last InfoCard bottom margin
+    },
+    '.bg-pattern::after': {
+      content: '""',
+      width: 160, // default svg width
+      height: 76, // default svg height
+      backgroundImage: `url(${patternLines})`,
+      position: 'absolute',
+      top: 228,
+      left: 471,
+      zIndex: 5,
+    },
+  },
+}));
 
 const About: React.FC = () => {
+  const enjoyablePlace = {
+    title: 'Enjoyable place for all the family',
+    description: `
+      Our relaxed surroundings make dining with us a great experience for everyone. We can even arrange 
+      a tour of the farm before your meal.
+    `,
+    img: {
+      src: mobileEnjoyablePlaceSm.src,
+      alt: 'Country landscape',
+      sources: [
+        {
+          srcSet: tabletEnjoyablePlaceMd.src,
+          media: '(min-width: 900px)',
+        },
+        {
+          srcSet: tabletEnjoyablePlaceSm.src,
+          media: '(min-width: 768px)',
+        },
+        {
+          srcSet: mobileEnjoyablePlaceMd.src,
+          media: '(min-width: 400px)',
+        },
+      ],
+    },
+  };
+  const locallySourcedFood = {
+    title: 'The most locally sourced food',
+    description: `
+      All our ingredients come directly from our farm or local fishery. So you can be  sure that you're eating
+      the freshest, most sustainable food.
+    `,
+    img: {
+      src: mobileLocallySourceSm.src,
+      alt: 'Country landscape',
+      sources: [
+        {
+          srcSet: tabletLocallySourceMd.src,
+          media: '(min-width: 900px)',
+        },
+        {
+          srcSet: tabletLocallySourceSm.src,
+          media: '(min-width: 768px)',
+        },
+        {
+          srcSet: mobileLocallySourceMd.src,
+          media: '(min-width: 400px)',
+        },
+      ],
+    },
+  };
+
   return (
-    <Box>
+    <StyledBox>
       <InfoCard
-        sx={{ marginTop: '-72px' }}
-        title="Enjoyable place for all the family"
-        description={`
-            Our relaxed surroundings make dining with us a great experience for everyone. We can even arrange 
-            a tour of the farm before your meal.
-          `}
-        img={{
-          src: mobileEnjoyablePlaceSm.src,
-          alt: 'Country landscape',
-          sources: [{
-            srcSet: mobileEnjoyablePlaceMd.src,
-            media: '(min-width: 400px)',
-          }],
+        sx={{
+          marginTop: { mobile: '-72px', tablet: '-96px' },
         }}
+        {...enjoyablePlace}
       />
 
-      <InfoCard
-        title="The most locally sourced food"
-        description={`
-            All our ingredients come directly from our farm or local fishery. So you can be  sure that you're eating
-            the freshest, most sustainable food.
-          `}
-        img={{
-          src: mobileLocallySourceSm.src,
-          alt: 'Country landscape',
-          sources: [{
-            srcSet: mobileLocallySourceMd.src,
-            media: '(min-width: 400px)',
-          }],
-        }}
-      />
-    </Box>
+      <InfoCard className="bg-pattern" {...locallySourcedFood} />
+    </StyledBox>
   );
 };
 

src/features/InfoCard.tsx

@@ -13,10 +13,10 @@ type Props = CardProps & {
   img: {
     src: string;
     alt: string;
-    sources: [{
+    sources: {
       srcSet: string;
       media: string;
-    }]
+    }[]
   }
 }
 
@@ -25,18 +25,33 @@ const StyledCard = styled(Card)(({ theme }) => ({
   marginBottom: 101,
   overflow: 'revert', // Prevent square box shadow
   position: 'relative',
-  zIndex: 5,
+
+  [theme.breakpoints.up('tablet')]: {
+    marginInline: 'auto',
+    marginBottom: 118,
+    maxWidth: 573,
+  },
 }));
 
-const StyledCardMedia = styled(CardMedia)(() => ({
+const StyledCardMedia = styled(CardMedia)(({ theme }) => ({
   boxShadow: '0 75px 100px -50px rgba(56, 66, 85, 0.5)',
+  position: 'relative',
+  zIndex: 5,
+  [theme.breakpoints.up('tablet')]: {
+  },
 })) as typeof CardMedia;
 
-const StyledCardContent = styled(CardContent)(() => ({
+const StyledCardContent = styled(CardContent)(({ theme }) => ({
   padding: 'revert',
   '&:last-child': {
     padding: 'revert',
   },
+
+  [theme.breakpoints.up('tablet')]: {
+    maxWidth: 457,
+    marginInline: 'auto',
+    // paddingInline: 12,
+  },
 }));
 
 const InfoCard: React.FC<Props> = ({ img, title, description, ...props }) => {
@@ -49,23 +64,30 @@ const InfoCard: React.FC<Props> = ({ img, title, description, ...props }) => {
         <StyledCardMedia component="img" src={img.src} alt={img.alt} />
       </picture>
 
-      <Container sx={{ marginTop: 6.375, textAlign: 'center' }} disableGutters>
+      <Container
+        sx={{
+          marginTop: { mobile: 6.375, tablet: 7 },
+          textAlign: 'center',
+        }}
+        disableGutters
+      >
         <StyledCardContent>
           <Typography
             variant="h2"
-            fontSize={{ mobile: '2rem' }}
-            lineHeight={{ mobile: '2.5rem' }}
-            letterSpacing={{ mobile: '-0.003rem' }}
-            px={{ mobile: 4 }}
-            mt={{ mobile: 4.5 }}
-            mb={{ mobile: 1.625 }}
+            fontSize={{ mobile: '2rem', tablet: '3rem' }}
+            lineHeight={{ mobile: '2.5rem', tablet: '3rem' }}
+            letterSpacing={{ mobile: '-0.003rem', tablet: '-0.031rem' }}
+            px={{ mobile: 4, tablet: 4.25 }}
+            mt={{ mobile: 4.5, tablet: 4.875 }}
+            mb={{ mobile: 1.625, tablet: 3.375 }}
           >
             {title}
           </Typography>
 
           <Typography
             variant="body2"
-            lineHeight={{ mobile: '1.625rem' }}
+            fontSize={{ tablet: '1.25rem' }}
+            lineHeight={{ mobile: '1.625rem', tablet: '1.875rem' }}
           >
             {description}
           </Typography>

tsconfig.json

@@ -21,6 +21,6 @@
       "@features/*": ["features/*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["next-env.d.ts", "declarations.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]
 }