Applicants project grants mobile sections

src/components/UI/Layout.tsx

@@ -1,20 +1,9 @@
-import { Container } from '@chakra-ui/react';
+import { Container, ContainerProps } from '@chakra-ui/react';
 import { FC } from 'react';
 
-interface Props {
-  bgGradient?: string;
-  h?: string;
-}
-
-export const Layout: FC<Props> = ({ bgGradient, children, h }) => {
+export const Layout: FC<ContainerProps> = ({ children, ...props }) => {
   return (
-    <Container
-      bgGradient={bgGradient}
-      h={h}
-      maxW={{ base: 'container.mobile', md: '600px' }}
-      px={5}
-      py={3}
-    >
+    <Container maxW={{ base: 'container.mobile', md: '600px' }} px={5} py={3} {...props}>
       {children}
     </Container>
   );

src/components/UI/NavMobile.tsx

@@ -1,7 +1,7 @@
 import { Box, Flex, IconButton, Menu, MenuButton } from '@chakra-ui/react';
 import Image from 'next/image';
 import { FC } from 'react';
-import logoSrc from '../../public/esp-logo.svg';
+import logoSrc from '../../public/images/esp-logo.svg';
 import { HamburgerIcon } from './icons';
 
 export const NavMobile: FC = () => {
@@ -17,8 +17,8 @@ export const NavMobile: FC = () => {
           <MenuButton
             as={IconButton}
             aria-label='Menu'
-            icon={<HamburgerIcon h='25px' w='32px' color='brand.accent' />}
             background='none'
+            icon={<HamburgerIcon h='25px' w='32px' color='brand.accent' />}
           />
         </Menu>
       </Box>

src/components/UI/PageText.tsx

@@ -1,9 +1,15 @@
-import { Text } from '@chakra-ui/react';
+import { Text, TextProps } from '@chakra-ui/react';
 import { FC } from 'react';
 
-export const PageText: FC = ({ children }) => {
+export const PageText: FC<TextProps> = ({ children, ...props }) => {
   return (
-    <Text color='brand.paragraph' fontSize='paragraph' fontWeight={300} lineHeight='24px'>
+    <Text
+      color='brand.paragraph'
+      fontSize='paragraph'
+      fontWeight={300}
+      lineHeight='24px'
+      {...props}
+    >
       {children}
     </Text>
   );

src/components/UI/headings/PageHeading.tsx

@@ -0,0 +1,17 @@
+import { Heading, HeadingProps } from '@chakra-ui/react';
+import { FC } from 'react';
+
+export const PageHeading: FC<HeadingProps> = ({ children, ...props }) => {
+  return (
+    <Heading
+      as='h1'
+      color='brand.heading'
+      fontSize='h1'
+      fontWeight={200}
+      lineHeight='48px'
+      {...props}
+    >
+      {children}
+    </Heading>
+  );
+};

src/components/UI/headings/PageSection.tsx

@@ -0,0 +1,19 @@
+import { Heading, HeadingProps } from '@chakra-ui/react';
+import { FC } from 'react';
+
+export const PageSection: FC<HeadingProps> = ({ children, ...props }) => {
+  return (
+    <Heading
+      as='h3'
+      color='#e44550'
+      fontSize='22px'
+      fontWeight={700}
+      lineHeight='29px'
+      textAlign='center'
+      variant='page-section'
+      {...props}
+    >
+      {children}
+    </Heading>
+  );
+};

src/components/UI/headings/PageSubheading.tsx

@@ -0,0 +1,18 @@
+import { Heading, HeadingProps } from '@chakra-ui/react';
+import { FC } from 'react';
+
+export const PageSubheading: FC<HeadingProps> = ({ children, ...props }) => {
+  return (
+    <Heading
+      as='h2'
+      color='brand.heading'
+      fontSize='h2'
+      fontWeight={400}
+      lineHeight='29px'
+      textAlign='center'
+      {...props}
+    >
+      {children}
+    </Heading>
+  );
+};

src/components/UI/headings/index.ts

@@ -0,0 +1,3 @@
+export { PageHeading } from './PageHeading';
+export { PageSection } from './PageSection';
+export { PageSubheading } from './PageSubheading';

src/components/UI/index.ts

@@ -1,5 +1,5 @@
+export { PageHeading, PageSection, PageSubheading } from './headings';
 export { Layout } from './Layout';
 export { NavMobile } from './NavMobile';
-export { PageHeading } from './PageHeading';
 export { PageText } from './PageText';
 export { PlaceholderImage } from './PlaceholderImage';

src/global.css

@@ -0,0 +1,9 @@
+@font-face {
+  font-family: 'Maison Neue Mono';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('./public/fonts/MaisonNeueMono-Bold.ttf') format('truetype'),
+    url('./public/fonts/MaisonNeueMono-Bold.woff2') format('woff2'),
+    url('./public/fonts/MaisonNeueMono-Bold.woff') format('woff');
+}

src/pages/_app.tsx

@@ -1,7 +1,10 @@
+import { ChakraProvider } from '@chakra-ui/react';
 import '@fontsource/libre-franklin/200.css';
 import '@fontsource/libre-franklin/300.css';
-import { ChakraProvider } from '@chakra-ui/react';
+import '@fontsource/libre-franklin/400.css';
+import '@fontsource/libre-franklin/700.css';
 import type { AppProps } from 'next/app';
+import '../global.css';
 import theme from '../theme';
 
 function MyApp({ Component, pageProps }: AppProps) {