Merge pull request #229 from cratebind/docs/marketing-home-page-setup

Docs/marketing home page setup
cratebind · Jul 20, 2022 · 3b578f3 · 3b578f3 · vercel · Jul 20, 2022
2 parents 4a88df7 + 2c206ba
commit 3b578f3
Show file tree

Hide file tree

Showing 17 changed files with 87 additions and 30 deletions.
diff --git a/docs/components/homepage-components/HomeBody.tsx b/docs/components/homepage-components/HomeBody.tsx
@@ -47,7 +47,7 @@ const SubContainer = styled(Flex)`
 `;
 
 const SubHeading = styled(Heading)`
-  font-family: tiempos;
+  font-family: Tiempos-Headline;
   font-size: 38px;
   font-weight: 400;
   color: #fff;
@@ -100,15 +100,20 @@ export default function HomeBody() {
           <Box className="mx-12 mt-8 sm:mt-32 mb-24 lg:m-24">
             <Heading
               as="h3"
-              fontFamily="tiempos"
+              fontFamily="Tiempos-Headline"
               fontSize="46px"
               fontWeight="400"
               lineHeight="1"
             >
               Your new favorite React component library
             </Heading>
-            <div className="my-8 sm:my-16">
-              <Text color="secondary" fontSize="lg" lineHeight="26px">
+            <div className="my-8 sm:mt-6 sm:mb-16">
+              <Text
+                color="secondary"
+                fontSize="lg"
+                lineHeight="26px"
+                fontFamily="Roboto"
+              >
                 Professionally designed and built by a team of React developers
                 and product designers—Minerva gives you the components needed to
                 start building your React app stat.{' '}
@@ -192,13 +197,13 @@ export default function HomeBody() {
           <Heading
             as="h4"
             fontSize="46px"
-            mb="2"
+            mb="4"
             fontWeight="400"
-            fontFamily="tiempos"
+            fontFamily="Tiempos-Headline"
           >
             Accessibility for all
           </Heading>
-          <Text color="secondary" fontSize="lg">
+          <Text color="secondary" fontSize="lg" fontFamily="Roboto">
             We believe that accessible apps should be the standard. In this
             library, we try to leverage the great work in Reach UI as a
             foundation for making our components as WAI-ARIA compliant as
@@ -255,14 +260,14 @@ export default function HomeBody() {
           <Heading
             as="h4"
             fontSize="46px"
-            mb="2"
+            mb="6"
             fontWeight="400"
-            fontFamily="tiempos"
+            fontFamily="Tiempos-Headline"
             lineHeight="1"
           >
             Built by developers, for developers
           </Heading>
-          <Text color="secondary" fontSize="lg">
+          <Text color="secondary" fontSize="lg" fontFamily="Roboto">
             Whether you’re working on a solo project and need components with
             solid design, or you’re building an app for a client and need to
             move faster using a reliable component foundation—Minerva UI was
@@ -271,7 +276,11 @@ export default function HomeBody() {
           <Button variant="tertiary" mb="8" mt="6" minWidth="140px">
             Learn more
           </Button>
-          <Flex width="100%" mt="8" className="flex-col-reverse md:flex-row">
+          <Flex
+            width="100%"
+            mt="8"
+            className="flex-col-reverse md:flex-row md:flex-row-reverse lg:flex-row"
+          >
             <SnippetContainer width="100%" mr="8">
               <CodeSnippet
                 snippetBackground="#1F1B29"
@@ -281,7 +290,7 @@ export default function HomeBody() {
               </CodeSnippet>
             </SnippetContainer>
 
-            <Box width="100%" className="ml-0 mb-4 md:ml-12 md:mt-0">
+            <Box width="100%" className="ml-0 mb-4 lg:ml-12 md:mt-0">
               <Box shadow="lg" borderRadius="md" p="2" maxWidth="264px">
                 <Image
                   src="mountain_sky.png"
@@ -323,14 +332,14 @@ export default function HomeBody() {
           <Heading
             as="h4"
             fontSize="46px"
-            mb="2"
+            mb="6"
             fontWeight="400"
-            fontFamily="tiempos"
+            fontFamily="Tiempos-Headline"
             lineHeight="1"
           >
             Delightfully designed
           </Heading>
-          <Text color="secondary" fontSize="lg">
+          <Text color="secondary" fontSize="lg" fontFamily="Roboto">
             Backed by simple, clean code, each component has a corresponding
             element in our Figma design system allowing product designers and
             developers to make product magic happen with the tiniest margin of
@@ -339,10 +348,10 @@ export default function HomeBody() {
           <Button variant="tertiary" mb="8" mt="6" minWidth="140px">
             Check out the Figma components
           </Button>
-          <Flex width="100%" mt="8" className="flex-col md:flex-row">
+          <Flex width="100%" mt="8" className="flex-col lg:flex-row">
             <TableExample />
 
-            <SnippetContainer width="100%" className="ml-0 mt-4 md:ml-8 mt-0">
+            <SnippetContainer width="100%" className="ml-0 mt-4 lg:ml-8 lg:mt-0">
               <CodeSnippet
                 snippetBackground="#F7F4FF"
                 style={{ fontSize: '12px' }}
@@ -366,13 +375,14 @@ export default function HomeBody() {
             fontSize="46px"
             mb="2"
             fontWeight="400"
-            fontFamily="tiempos"
+            fontFamily="Tiempos-Headline"
           >
             Globally themed
           </Heading>
           <Text
             color="secondary"
             fontSize="lg"
+            fontFamily="Roboto"
           >{`Each component is styled, giving you the opportunity to start your project quickly. Using our >defaultTheme<, you’re able to overwrite and manually style each component in the library as needed.`}</Text>
           <Button variant="tertiary" mb="8" mt="6" minWidth="140px">
             Learn more
@@ -405,17 +415,31 @@ export default function HomeBody() {
                   <Heading as="h4" fontSize="sm" fontWeight="500" mt="2">
                     Can Coffee Make You a Better Developer?
                   </Heading>
-                  <Text fontSize="sm" my="4" lineHeight="20px" fontWeight="300">
+                  <Text
+                    fontSize="sm"
+                    my="4"
+                    lineHeight="20px"
+                    fontWeight="300"
+                    fontFamily="Roboto Condensed"
+                  >
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                     Vestibulum id ante vitae eros suscipit pulvinar.
                   </Text>
                   <Flex alignItems="center">
                     <Image src="jonathan_profile.png" alt="Jonathan avatar" />
                     <Box ml="4">
-                      <Text fontSize="xs" lineHeight="20px">
+                      <Text
+                        fontSize="xs"
+                        lineHeight="20px"
+                        fontFamily="Roboto Condensed"
+                      >
                         Jonathan Reinink
                       </Text>
-                      <Text fontSize="xs" lineHeight="20px">
+                      <Text
+                        fontSize="xs"
+                        lineHeight="20px"
+                        fontFamily="Roboto Condensed"
+                      >
                         Aug 18
                       </Text>
                     </Box>
@@ -439,27 +463,27 @@ export default function HomeBody() {
             fontSize="46px"
             mb="2"
             fontWeight="400"
-            fontFamily="tiempos"
+            fontFamily="Tiempos-Headline"
           >
             Fully customizable
           </Heading>
-          <Text color="secondary" fontSize="lg">
+          <Text color="secondary" fontSize="lg" fontFamily="Roboto">
             Minerva UI is built to give the developers flexibility and speed.
             Our components are unopinionated, allowing you to build custom
             designs without excess CSS.
           </Text>
           <Button variant="tertiary" mb="8" mt="6" minWidth="140px">
             Learn more
           </Button>
-          <Flex width="100%" mt="8" className="flex-col md:flex-row">
+          <Flex width="100%" mt="8" className="flex-col lg:flex-row">
             <TableExample />
             <SnippetContainer
               width="100%"
-              className="ml-0 mt-4 md:ml-8 md:mt-0"
+              className="ml-0 mt-4 lg:ml-8 lg:mt-0"
             >
               <CodeSnippet
                 snippetBackground="#F7F4FF"
-                style={{ fontSize: '12px' }}
+                style={{ fontSize: '12px', fontFamily: 'Roboto Mono' }}
               >
                 {snippetText}
               </CodeSnippet>

diff --git a/docs/components/homepage-components/TableExample.tsx b/docs/components/homepage-components/TableExample.tsx
@@ -61,6 +61,16 @@ const TableRowSection = () => (
         Tag Label
       </Tag>
     </TableCell>
+    <TableCell style={{ paddingLeft: '8px' }}>
+      <Text fontSize="xs" lineHeight="20px">
+        Admin
+      </Text>
+    </TableCell>
+    <TableCell style={{ paddingLeft: '8px' }}>
+      <Text fontSize="xs" lineHeight="20px" color="#651FFF" fontWeight="bold">
+        Edit
+      </Text>
+    </TableCell>
   </TableRow>
 );
 
@@ -70,11 +80,24 @@ export default function TableExample() {
       <Table>
         <TableHeader>
           <TableRow>
-            <TableHeaderCell>Name</TableHeaderCell>
-            <TableHeaderCell style={{ minWidth: '160px' }}>Job</TableHeaderCell>
-            <TableHeaderCell style={{ paddingLeft: '8px' }}>
+            <TableHeaderCell style={{ fontFamily: 'Roboto Condensed' }}>
+              Name
+            </TableHeaderCell>
+            <TableHeaderCell
+              style={{ minWidth: '160px', fontFamily: 'Roboto Condensed' }}
+            >
+              Job
+            </TableHeaderCell>
+            <TableHeaderCell
+              style={{ paddingLeft: '8px', fontFamily: 'Roboto Condensed' }}
+            >
               Status
             </TableHeaderCell>
+            <TableHeaderCell
+              style={{ paddingLeft: '8px', fontFamily: 'Roboto Condensed' }}
+            >
+              Role
+            </TableHeaderCell>
           </TableRow>
         </TableHeader>
         <TableBody>

diff --git a/docs/global.css b/docs/global.css
@@ -47,3 +47,9 @@ input[type='color']::-webkit-color-swatch {
 .DocSearch-Search-Icon {
   color: #bab9bd !important;
 }
+
+@font-face {
+  font-family: 'Tiempos-Headline';
+  font-style: normal;
+  src: url('/fonts/TiemposHeadline-Regular.otf') format('opentype');
+}
diff --git a/docs/pages/_app.tsx b/docs/pages/_app.tsx
@@ -100,6 +100,10 @@ export default function CustomApp({ Component, pageProps }) {
         href="https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap"
         rel="stylesheet"
       />
+      <link
+        href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
+        rel="stylesheet"
+      />
       <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js" />
       <Component {...pageProps} />
     </CustomThemeProvider>

diff --git a/docs/public/fonts/TiemposHeadline-Black.otf b/docs/public/fonts/TiemposHeadline-Black.otf
diff --git a/docs/public/fonts/TiemposHeadline-BlackItalic.otf b/docs/public/fonts/TiemposHeadline-BlackItalic.otf
diff --git a/docs/public/fonts/TiemposHeadline-Bold.otf b/docs/public/fonts/TiemposHeadline-Bold.otf
diff --git a/docs/public/fonts/TiemposHeadline-BoldItalic.otf b/docs/public/fonts/TiemposHeadline-BoldItalic.otf
diff --git a/docs/public/fonts/TiemposHeadline-Light.otf b/docs/public/fonts/TiemposHeadline-Light.otf
diff --git a/docs/public/fonts/TiemposHeadline-LightItalic.otf b/docs/public/fonts/TiemposHeadline-LightItalic.otf
diff --git a/docs/public/fonts/TiemposHeadline-Medium.otf b/docs/public/fonts/TiemposHeadline-Medium.otf
diff --git a/docs/public/fonts/TiemposHeadline-MediumItalic.otf b/docs/public/fonts/TiemposHeadline-MediumItalic.otf
diff --git a/docs/public/fonts/TiemposHeadline-Regular.otf b/docs/public/fonts/TiemposHeadline-Regular.otf
diff --git a/docs/public/fonts/TiemposHeadline-RegularItalic.otf b/docs/public/fonts/TiemposHeadline-RegularItalic.otf
diff --git a/docs/public/fonts/TiemposHeadline-Semibold.otf b/docs/public/fonts/TiemposHeadline-Semibold.otf
diff --git a/docs/public/fonts/TiemposHeadline-SemiboldItalic.otf b/docs/public/fonts/TiemposHeadline-SemiboldItalic.otf
diff --git a/docs/theme/styles.css b/docs/theme/styles.css
@@ -145,4 +145,4 @@ input[type='search']::-webkit-search-results-decoration {
   bottom: 0;
   left: 0;
   right: 0;
-}
+}