initial commit

.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "<your_project_name>"
+  }
+}

.gitignore

@@ -0,0 +1,27 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+.env*
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+.vercel

README.md

@@ -0,0 +1,30 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/zeit/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on ZEIT Now
+
+The easiest way to deploy your Next.js app is to use the [ZEIT Now Platform](https://zeit.co/) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

app.json

@@ -0,0 +1,14 @@
+{
+  "name": "001-landing-next",
+  "description": "",
+  "formation": {
+    "web": {
+      "quantity": 1
+    }
+  },
+  "buildpacks": [
+    {
+      "url": "heroku/nodejs"
+    }
+  ]
+}

firebase.json

@@ -0,0 +1,10 @@
+{
+  "hosting": {
+    "public": "out",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ]
+  }
+}

jsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "baseUrl": "src"
+  }
+}

netlify.toml

@@ -0,0 +1,4 @@
+# netlify.toml
+[build]
+  command = "next build && next export"
+  publish = "out"

next-sitemap.js

@@ -0,0 +1,12 @@
+module.exports = {
+  siteUrl: 'https://startup-agency.vercel.app',
+  generateRobotsTxt: true,
+  // optional
+  // robotsTxtOptions: {
+  //   additionalSitemaps: [
+  //     'https://example.com/my-custom-sitemap-1.xml',
+  //     'https://example.com/my-custom-sitemap-2.xml',
+  //     'https://example.com/my-custom-sitemap-3.xml',
+  //   ],
+  // },
+};

next.config.js

@@ -0,0 +1,8 @@
+const withPlugins = require('next-compose-plugins');
+const optimizedImages = require('next-optimized-images');
+
+const nextConfiguration = {
+  target: 'serverless', //will output independent pages that don't require a monolithic server. It's only compatible with next start or Serverless deployment platforms (like ZEIT Now) — you cannot use the custom server API.
+};
+
+module.exports = withPlugins([optimizedImages], nextConfiguration);

package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@landing/013-next",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "serve": "next start",
+    "export": "next export",
+    "postbuild": "next-sitemap"
+  },
+  "dependencies": {
+    "@material-ui/core": "^4.11.3",
+    "next": "^10.0.5",
+    "next-compose-plugins": "^2.2.1",
+    "next-optimized-images": "^2.6.2",
+    "polished": "^4.0.5",
+    "rc-drawer": "^4.2.1",
+    "rc-tabs": "^11.7.3",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-ga": "^3.3.0",
+    "react-icons": "^4.1.0",
+    "react-masonry-component": "^6.2.1",
+    "react-scroll": "^1.8.1",
+    "react-stickynode": "^3.0.4",
+    "swiper": "^6.4.5",
+    "theme-ui": "^0.3.5"
+  },
+  "devDependencies": {
+    "imagemin-mozjpeg": "^9.0.0",
+    "imagemin-optipng": "^8.0.0",
+    "imagemin-svgo": "^8.0.0",
+    "next-sitemap": "^1.4.5"
+  }
+}

public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Sitemap: https://example.io/sitemap.xml

public/sitemap.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://leerob.iosrc//index</loc>
+  </url>
+</urlset>

src/analytics/index.js

@@ -0,0 +1,24 @@
+import ReactGA from 'react-ga';
+
+export const initGA = () => {
+  console.log('GA init');
+  ReactGA.initialize('UA-xxxxxxxxx-1');
+};
+
+export const logPageView = () => {
+  console.log(`Logging pageview for ${window.location.pathname}`);
+  ReactGA.set({ page: window.location.pathname });
+  ReactGA.pageview(window.location.pathname);
+};
+
+export const logEvent = (category = '', action = '') => {
+  if (category && action) {
+    ReactGA.event({ category, action });
+  }
+};
+
+export const logException = (description = '', fatal = false) => {
+  if (description) {
+    ReactGA.exception({ description, fatal });
+  }
+};

src/components/cards/blog-post.js

@@ -0,0 +1,107 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx, Box, Flex, Image, Heading, Text } from 'theme-ui';
+import { rgba } from 'polished';
+import { Link } from 'components/link';
+
+const BlogPost = ({ post }) => {
+  return (
+    <Box
+      as="article"
+      sx={styles.post}
+      className={`${post?.showDescription ? '' : 'no-description'} ${
+        !!post?.thumbnail ? '' : 'no-thumbnail'
+      }`}
+    >
+      {!!post?.thumbnail && (
+        <Flex as="figure" sx={styles.thumbnail}>
+          <Image src={post?.thumbnail} alt="post title" />
+        </Flex>
+      )}
+
+      <Box className="content">
+        <Heading as="h3" sx={styles.title}>
+          <Link path={post?.slug}>{post?.title}</Link>
+        </Heading>
+        {post?.showDescription && (
+          <Text as="p" sx={styles.description}>
+            {post?.description}
+          </Text>
+        )}
+      </Box>
+    </Box>
+  );
+};
+
+export default BlogPost;
+
+const styles = {
+  post: {
+    m: ['0 0 30px', null, null, '0 15px 30px'],
+    width: ['100%', null, null, 'calc(50% - 30px)', 'calc(33.33% - 30px)'],
+    ':last-child': {
+      mb: 0,
+    },
+    '&.no-thumbnail': {
+      '.content': {
+        backgroundColor: '#FBF5F1',
+        padding: '25px 25px 35px',
+        borderRadius: 5,
+      },
+    },
+    '&.no-description:not(.no-thumbnail)': {
+      figure: {
+        mb: 0,
+      },
+      '.content': {
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        right: 0,
+        bottom: 0,
+        display: 'flex',
+        alignItems: 'flex-end',
+        p: '0 11px 20px 20px',
+        zIndex: 0,
+        ':before': {
+          background:
+            'linear-gradient(180.06deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.71) 99.95%)',
+          borderRadius: 5,
+          content: `''`,
+          position: 'absolute',
+          left: 0,
+          top: 0,
+          right: 0,
+          bottom: 0,
+          zIndex: -1,
+          opacity: 0.9,
+        },
+        'h3 a': {
+          color: 'white',
+          textDecoration: 'none',
+        },
+      },
+    },
+  },
+  thumbnail: {
+    mb: [4],
+    img: {
+      borderRadius: 5,
+    },
+  },
+  title: {
+    fontWeight: 700,
+    fontSize: [2, null, null, 3, null, 4],
+    lineHeight: [1.5, null, null, null, null, 1.76],
+    letterSpacing: '-0.2px',
+    a: {
+      color: 'heading',
+      textDecoration: 'none',
+    },
+  },
+  description: {
+    color: rgba('#0F2137', 0.6),
+    lineHeight: 1.88,
+    mt: [2],
+  },
+};

src/components/cards/service.js

@@ -0,0 +1,53 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx, Box, Image, Text, Heading } from 'theme-ui';
+import { LearnMore } from 'components/link';
+
+const Service = ({ item }) => {
+  return (
+    <Box sx={styles.serviceItem}>
+      <Box as="figure" sx={styles.figure}>
+        <Image src={item?.icon} alt="icon" />
+      </Box>
+      <Box sx={styles.content}>
+        <Heading as="h3">{item?.title}</Heading>
+        <Text as="p">{item?.description}</Text>
+        {item?.moreLink && <LearnMore path={item?.moreLink} />}
+      </Box>
+    </Box>
+  );
+};
+
+export default Service;
+
+const styles = {
+  serviceItem: {
+    display: [null, null, null, null, null, 'flex'],
+    textAlign: ['center', null, null, null, null, 'left'],
+  },
+  figure: {
+    minWidth: [88, null, null, null, null, 70, 88],
+    mr: [null, null, null, null, null, 30],
+    mb: [2, null, null, null, null, 0],
+    img: {
+      maxWidth: [42, null, null, 60, 70, '100%'],
+    },
+  },
+  content: {
+    h3: {
+      color: 'heading',
+      fontWeight: 700,
+      fontFamily: 'body',
+      fontSize: [2, null, null, 17, 3],
+      lineHeight: [1.68],
+    },
+    p: {
+      fontSize: [1, null, null, null, 2],
+      lineHeight: [1.88],
+      mt: [2],
+    },
+    a: {
+      mt: [2, null, null, 3],
+    },
+  },
+};

src/components/cards/team-member.js

@@ -0,0 +1,70 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx, Flex, Box, Image, Text, Heading, Link } from 'theme-ui';
+import { FaTwitter, FaGithub, FaDribbble } from 'react-icons/fa';
+
+const TeamMember = ({ member }) => {
+  return (
+    <Box sx={styles.section}>
+      <Flex as="figure" sx={styles.avatar}>
+        <Image src={member?.avatar} alt={member?.name} />
+      </Flex>
+      <Box sx={styles.about}>
+        <Heading as="h3">{member?.name}</Heading>
+        <Text as="p">{member?.designation}</Text>
+        <Box sx={styles.socialLinks}>
+          {member?.socialLinks?.map((social, index) => (
+            <Link href={social?.link} key={index}>
+              {social?.name === 'twitter' && (
+                <FaTwitter size="18px" color="#55ACEE" />
+              )}
+              {social?.name === 'github' && (
+                <FaGithub size="18px" color="#161614" />
+              )}
+              {social?.name === 'dribbble' && (
+                <FaDribbble
+                  size="18px"
+                  color="#B2215A"
+                  style={{ backgroundColor: '#E74D89', borderRadius: 20 }}
+                />
+              )}
+            </Link>
+          ))}
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default TeamMember;
+
+const styles = {
+  avatar: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  about: {
+    mt: [4],
+    textAlign: ['center', null, null, 'left'],
+    h3: {
+      color: 'heading',
+      fontFamily: 'body',
+      fontSize: [3, null, 17, null, 4],
+    },
+    p: {
+      color: '#7589A1',
+      letterSpacing: '-0.2px',
+      mt: [2],
+    },
+  },
+  socialLinks: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: ['center', null, null, 'left'],
+    mt: [3],
+    a: {
+      display: 'inline-flex',
+      mr: [2],
+    },
+  },
+};

src/components/checkbox.js

@@ -0,0 +1,64 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import React from 'react';
+import { RiCheckboxBlankFill, RiCheckboxFill } from 'react-icons/ri';
+import { jsx, Flex } from 'theme-ui';
+import { rgba } from 'polished';
+
+const Checkbox = ({ id, label, onClick, checked, onChange, sx, ...props }) => {
+  return (
+    <Flex sx={styles.checkbox} className={checked ? 'checked' : ''}>
+      {checked ? (
+        <RiCheckboxFill size="24px" />
+      ) : (
+        <RiCheckboxBlankFill size="24px" />
+      )}
+      <input
+        id={id}
+        type="checkbox"
+        checked={checked ?? checked}
+        onChange={onChange}
+        {...props}
+      />
+      {label && <label htmlFor={id}>{label}</label>}
+    </Flex>
+  );
+};
+
+export default React.memo(Checkbox);
+
+const styles = {
+  checkbox: {
+    // backgroundColor: '#EFF3F7',
+    position: 'relative',
+    borderRadius: '4px',
+    alignItems: 'center',
+    svg: {
+      position: 'absolute',
+      borderRadius: 4,
+      left: 0,
+      top: '-5px',
+      path: {
+        color: '#EFF3F7',
+      },
+    },
+    input: {
+      position: 'absolute',
+      opacity: 0,
+      visibility: 'hidden',
+    },
+    label: {
+      cursor: 'pointer',
+      fontSize: '14px',
+      lineHeight: 1,
+      color: rgba('#9095AD', 0.9),
+      paddingLeft: 30,
+      zIndex: 10,
+    },
+    '&.checked': {
+      'svg path': {
+        color: 'secondary',
+      },
+    },
+  },
+};

src/components/drawer.js

@@ -0,0 +1,55 @@
+import React, { Fragment } from 'react';
+import { Box } from 'theme-ui';
+import RcDrawer from 'rc-drawer';
+
+const Drawer = ({
+  className,
+  children,
+  closeButton,
+  closeButtonStyle,
+  drawerHandler,
+  toggleHandler,
+  open,
+  width,
+  placement,
+  drawerStyle,
+  closeBtnStyle,
+  ...props
+}) => {
+  return (
+    <Fragment>
+      <RcDrawer
+        open={open}
+        onClose={toggleHandler}
+        className={`drawer ${className ? className : ''}`.trim()}
+        width={width}
+        placement={placement}
+        handler={false}
+        level={null}
+        duration="0.4s"
+        {...props}
+      >
+        {closeButton && (
+          <Box as="div" onClick={toggleHandler} sx={closeBtnStyle}>
+            {closeButton}
+          </Box>
+        )}
+        <Box sx={drawerStyle}>{children}</Box>
+      </RcDrawer>
+      <Box
+        className="drawer__handler"
+        style={{ display: 'inline-block' }}
+        onClick={toggleHandler}
+      >
+        {drawerHandler}
+      </Box>
+    </Fragment>
+  );
+};
+
+Drawer.defaultProps = {
+  width: '320px',
+  placement: 'left',
+};
+
+export default Drawer;

src/components/footer/footer.data.js

@@ -0,0 +1,138 @@
+import facebook from 'assets/images/icons/facebook.png';
+import twitter from 'assets/images/icons/twitter.png';
+import github from 'assets/images/icons/github.png';
+import dribbble from 'assets/images/icons/dribbble.png';
+
+export const menuItems = [
+  {
+    id: 2,
+    title: 'About Us',
+    items: [
+      {
+        path: '#!',
+        label: 'Home',
+      },
+      {
+        path: '#!',
+        label: 'Thamrin Founder',
+      },
+      {
+        path: '#!',
+        label: 'Why Us',
+      },
+      {
+        path: '#!',
+        label: 'Blog',
+      },
+    ],
+  },
+  {
+    id: 3,
+    title: 'Our Business Partner',
+    items: [
+      {
+        path: '#!',
+        label: 'Thamrin Brothers',
+      },
+      {
+        path: '#!',
+        label: 'Nusa Sarana Citra Bakti',
+      },
+      {
+        path: '#!',
+        label: 'Citra Lestari Mobilindo',
+      },
+      {
+        path: '#!',
+        label: 'Citra Thamrin Motor',
+      },
+      {
+        path: '#!',
+        label: 'Thamrin Citra Abadi',
+      },
+      {
+        path: '#!',
+        label: 'Musi Lestari Indo Makmur',
+      },
+      {
+        path: '#!',
+        label: 'Musi Indah Makmur',
+      },
+    ],
+  },
+  {
+    id: 4,
+    title: 'Our Business Partner',
+    items: [
+      {
+        path: '#!',
+        label: 'BPR Berkat Sejati',
+      },
+      {
+        path: '#!',
+        label: 'Citra Nusa Bakti',
+      },
+      {
+        path: '#!',
+        label: 'Regis Institut',
+      },
+      {
+        path: '#!',
+        label: 'Citra Mandiri Asih Sejati',
+      },
+      {
+        path: '#!',
+        label: 'Thamrin Homes',
+      },
+    ],
+  },
+  {
+    id: 5,
+    title: 'Connect',
+    items: [
+      {
+        path: '#!',
+        icon: facebook,
+        label: 'Facebook',
+      },
+      {
+        path: '#!',
+        icon: twitter,
+        label: 'Twitter',
+      },
+      {
+        path: '#!',
+        icon: github,
+        label: 'Github',
+      },
+      {
+        path: '#!',
+        icon: dribbble,
+        label: 'Dribbble',
+      },
+    ],
+  },
+];
+
+export const footerNav = [
+  {
+    path: '#!',
+    label: 'Home',
+  },
+  {
+    path: '#!',
+    label: 'Advertise',
+  },
+  {
+    path: '#!',
+    label: 'Supports',
+  },
+  {
+    path: '#!',
+    label: 'Marketing',
+  },
+  {
+    path: '#!',
+    label: 'FAQ',
+  },
+];

src/components/footer/footer.js

@@ -0,0 +1,102 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx, Box, Text, Container } from 'theme-ui';
+import Logo from 'components/logo';
+import { Link } from 'components/link';
+import Widget from './widget';
+import { menuItems } from './footer.data';
+import { rgba } from 'polished';
+
+export default function Footer() {
+  return (
+    <Box as="footer" sx={styles.footer}>
+      <Container>
+        <Box sx={styles.footerTopInner}>
+          <Box sx={styles.about}>
+            <Box sx={styles.logo}>
+              <Logo />
+            </Box>
+            <Box sx={styles.terms}>
+              <Link path="#!">Terms of use</Link>
+              <Text as="span">|</Text>
+              <Link path="#!">Privacy</Link>
+            </Box>
+            <Text as="p" sx={styles.copyright}>
+              Copyright by {new Date().getFullYear()} Thamrin Group
+            </Text>
+          </Box>
+          {menuItems.map(({ id, title, items }) => (
+            <Widget key={id} title={title} items={items} />
+          ))}
+        </Box>
+      </Container>
+    </Box>
+  );
+}
+
+const styles = {
+  footer: {
+    pt: [8],
+    pb: [8],
+  },
+  footerTopInner: {
+    gap: [30, null, 50, '20px 50px', 17, 50],
+    display: ['grid'],
+    gridTemplateColumns: [
+      'repeat(2, 1fr)',
+      null,
+      null,
+      'repeat(4, 1fr)',
+      'repeat(5, 1fr)',
+    ],
+  },
+  footerInner: {
+    borderTop: `1px solid #D9E0E7`,
+    display: ['block', null, 'flex'],
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: '35px 0 40px',
+  },
+  about: {
+    display: [null, null, null, 'grid', 'block'],
+    gridTemplateColumns: '205px 1fr 1fr',
+    alignItems: ['center'],
+    gridRow: ['3/4', null, '1/1', '3/4', 'unset'],
+    gridColumn: ['1/3', null, '1/2', '1/5', 'unset'],
+  },
+  logo: {
+    display: ['flex'],
+    justifyContent: ['center', null, null, 'unset'],
+    gridColumn: '1/2',
+  },
+  terms: {
+    display: ['flex'],
+    gridColumn: '3/4',
+    alignItems: ['center', null, null, null, 'flex-start', 'center'],
+    flexDirection: ['row', null, null, null, 'column', 'row'],
+    justifyContent: [
+      'center',
+      null,
+      'flex-start',
+      'center',
+      null,
+      'flex-start',
+    ],
+    mt: [4, null, null, 0, 4],
+    a: {
+      color: 'heading',
+    },
+    span: {
+      display: ['inline-flex', null, null, null, 'none', 'inline-flex'],
+      m: ['0 10px'],
+    },
+  },
+  copyright: {
+    color: rgba('#0F2137', 0.6),
+    fontSize: ['14px'],
+    mt: [3, null, null, -31, 3],
+    mr: [null, null, null, 'auto', 'unset'],
+    gridColumn: '2/3',
+    textAlign: ['center', null, 'left', 'center', 'left'],
+  },
+};

src/components/footer/widget.js

@@ -0,0 +1,51 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx, Box, Heading, Image } from 'theme-ui';
+import { Link } from 'components/link';
+import { rgba } from 'polished';
+
+const Widget = ({ title, items }) => {
+  return (
+    <Box sx={styles.footerWidget}>
+      <Heading as="h4">{title}</Heading>
+      <ul>
+        {items.map(({ path, label, icon }, i) => (
+          <li key={i}>
+            {icon && <Image src={icon} alt={label} />}
+            <Link path={path} key={i} label={label} variant="footer" />
+          </li>
+        ))}
+      </ul>
+    </Box>
+  );
+};
+
+export default Widget;
+
+const styles = {
+  footerWidget: {
+    h4: {
+      color: 'heading',
+      fontFamily: 'body',
+      fontSize: '18px',
+      fontWeight: 500,
+      lineHeight: 1.68,
+      letterSpacing: 'heading',
+    },
+    ul: {
+      listStyle: 'none',
+      margin: '28px 0 0',
+      padding: 0,
+      li: {
+        display: 'flex',
+        alignItems: 'center',
+        img: {
+          mr: '15px',
+        },
+      },
+      a: {
+        color: rgba('#02073E', 0.8),
+      },
+    },
+  },
+};

src/components/header/header.data.js

@@ -0,0 +1,26 @@
+export default [
+  {
+    path: 'home',
+    label: 'Home',
+  },
+  {
+    path: 'testimonials',
+    label: 'Business Partner',
+  },
+  {
+    path: 'team',
+    label: 'Team',
+  },
+  {
+    path: 'why-us',
+    label: 'Why Us',
+  },
+  {
+    path: 'blog',
+    label: 'Blog',
+  },
+  {
+    path: '',
+    label: '',
+  },
+];

src/components/header/header.js

@@ -0,0 +1,117 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx, Box, Container, Button } from 'theme-ui';
+import Sticky from 'react-stickynode';
+import Logo from 'components/logo';
+import { NavLink } from 'components/link';
+import { DrawerProvider } from 'contexts/drawer/drawer-provider';
+import NavbarDrawer from './navbar-drawer';
+import menuItems from './header.data';
+import Image from 'assets/images/White.png'
+export default function Header() {
+  return (
+    <DrawerProvider>
+      <Box sx={styles.headerWrapper}>
+        <Sticky enabled={true} top={0} activeClass="is-sticky" innerZ={100}>
+          <Box as="header" sx={styles.header}>
+            <Container>
+              <Box sx={styles.headerInner}>
+                <Logo sx={styles.logo} />
+                {/* <Image src={Image} /> */}
+                <Box as="nav" sx={styles.navbar} className="navbar">
+                  <Box as="ul" sx={styles.navList}>
+                    {menuItems.map(({ path, label }, i) => (
+                      <li key={i}>
+                        <NavLink path={path} label={label} />
+                      </li>
+                    ))}
+                  </Box>
+                </Box>
+                <NavbarDrawer />
+              </Box>
+            </Container>
+          </Box>
+        </Sticky>
+      </Box>
+    </DrawerProvider>
+  );
+}
+
+const styles = {
+  headerWrapper: {
+    backgroundColor: 'transparent',
+    '.is-sticky': {
+      header: {
+        backgroundColor: 'white',
+        boxShadow: '0 6px 13px rgba(38,78,118,0.1)',
+        paddingTop: '15px',
+        paddingBottom: '15px',
+      },
+    },
+  },
+  header: {
+    position: 'fixed',
+    left: 0,
+    right: 0,
+    py: 4,
+    transition: 'all 0.3s ease-in-out 0s',
+    '&.is-mobile-menu': {
+      backgroundColor: 'white',
+    },
+  },
+  headerInner: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  logo: {
+    mr: [null, null, null, null, 6, 12],
+  },
+  navbar: {
+    display: ['none', null, null, null, 'flex'],
+    alignItems: 'center',
+    flexGrow: 1,
+    // justifyContent: 'center',
+  },
+  navList: {
+    display: ['flex'],
+    listStyle: 'none',
+    // marginLeft: 'auto',
+    flexGrow: 1,
+    p: 0,
+    'li:last-child': {
+      ml: ['auto'],
+    },
+    '.nav-item': {
+      cursor: 'pointer',
+      fontWeight: 400,
+      padding: 0,
+      margin: [0, 0, 0, 0, '0 20px'],
+    },
+    '.active': {
+      color: 'primary',
+    },
+  },
+  getStartedDesktop: {
+    color: 'primary',
+    display: ['none', 'none', 'none', 'none', 'flex'],
+  },
+  getStartedMobile: {
+    color: 'primary',
+    fontSize: [1],
+    minHeight: 30,
+    m: ['0 15px 0 auto'],
+    padding: '0 11px',
+    display: ['flex', null, null, null, 'none'],
+  },
+  closeButton: {
+    height: '32px',
+    padding: '4px',
+    minHeight: 'auto',
+    width: '32px',
+    ml: '3px',
+    path: {
+      stroke: 'text',
+    },
+  },
+};

src/components/header/navbar-drawer.js

@@ -0,0 +1,142 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { IoMdMenu } from 'react-icons/io';
+import React, { useContext } from 'react';
+import { jsx, Box, Image } from 'theme-ui';
+import { Link } from 'react-scroll';
+import { DrawerContext } from 'contexts/drawer/drawer-context';
+import Drawer from 'components/drawer';
+import Logo from 'components/logo';
+import menuItems from './header.data';
+import close from 'assets/images/icons/close.png';
+
+const DrawerNav = () => {
+  const { state, dispatch } = useContext(DrawerContext);
+
+  // Toggle drawer
+  const toggleHandler = React.useCallback(() => {
+    dispatch({
+      type: 'TOGGLE',
+    });
+  }, [dispatch]);
+
+  return (
+    <Drawer
+      width="340px"
+      placement="right"
+      drawerHandler={
+        <Box sx={styles.handler}>
+          <IoMdMenu size="26px" />
+        </Box>
+      }
+      open={state?.isOpen}
+      toggleHandler={toggleHandler}
+      closeButton={
+        <button sx={styles.closeButton}>
+          <Image src={close} alt="close" />
+        </button>
+      }
+      maskStyle={styles.mask}
+      drawerStyle={styles.drawer}
+      closeBtnStyle={styles.close}
+    >
+      <Box sx={styles.wrapper}>
+        <Logo sx={styles.logo} />
+        <Box as="ul" sx={styles.navbar}>
+          {menuItems.map(({ path, label }, i) => (
+            <Box as="li" key={i}>
+              <Link
+                activeClass="active"
+                to={path}
+                spy={true}
+                smooth={true}
+                offset={-70}
+                duration={500}
+              >
+                {label}
+              </Link>
+            </Box>
+          ))}
+        </Box>
+      </Box>
+    </Drawer>
+  );
+};
+export default DrawerNav;
+
+const styles = {
+  handler: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: '0',
+    width: '26px',
+    cursor: 'pointer',
+    '@media screen and (min-width: 1024px)': {
+      display: 'none',
+    },
+  },
+  drawer: {
+    backgroundColor: 'white',
+    width: '100%',
+    height: '100%',
+    outline: 0,
+  },
+  mask: {
+    opacity: 0.2,
+  },
+  close: {
+    position: 'absolute',
+    top: 35,
+    right: 30,
+    zIndex: '1',
+  },
+  closeButton: {
+    alignItems: 'center',
+    backgroundColor: 'transparent',
+    border: 0,
+    cursor: 'pointer',
+    display: 'flex',
+    p: 0,
+  },
+  wrapper: {
+    height: '100%',
+    paddingTop: 30,
+    width: '100%',
+  },
+  logo: {
+    ml: 30,
+    mb: 45,
+  },
+  navbar: {
+    listStyle: 'none',
+    m: 0,
+    p: 0,
+    'li > a': {
+      backgroundColor: 'transparent',
+      color: 'heading',
+      display: 'flex',
+      alignItems: 'center',
+      minHeight: 44,
+      paddingLeft: 30,
+      position: 'relative',
+      transition: 'all 0.3s ease-in-out 0s',
+      '::before': {
+        backgroundColor: 'transparent',
+        content: `''`,
+        position: 'absolute',
+        height: '100%',
+        left: 0,
+        top: 0,
+        width: 2,
+        transition: 'all 0.3s ease-in-out 0s',
+      },
+    },
+    '.active': {
+      backgroundColor: '#F8F8F8',
+      '::before': {
+        backgroundColor: 'primary',
+      },
+    },
+  },
+};

src/components/icons/logo.js

@@ -0,0 +1,119 @@
+import React from 'react';
+
+const Logo = ({ white, ...props }) => {
+  return (
+    <svg viewBox="0 0 185.92 36.62" width={185.92} height={36.62} {...props}>
+      <defs>
+        <linearGradient
+          id="prefix__b"
+          x1={16.08}
+          y1={-16.52}
+          x2={10.26}
+          y2={20.44}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset={0} stopColor="#0096d9" />
+          <stop offset={1} stopColor="#00c198" />
+        </linearGradient>
+        <linearGradient
+          id="prefix__c"
+          x1={8.95}
+          y1={13.48}
+          x2={18.28}
+          y2={32.02}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset={0} stopColor="#002dd9" />
+          <stop offset={1} stopColor="#00b2ab" />
+        </linearGradient>
+        <linearGradient
+          id="prefix__a"
+          x1={23.33}
+          y1={-3.39}
+          x2={5.66}
+          y2={37.65}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset={0} stopColor="#3482c0" />
+          <stop offset={0.45} stopColor="#96bede" />
+          <stop offset={0.83} stopColor="#e1edf6" />
+          <stop offset={1} stopColor="#fff" />
+        </linearGradient>
+        <linearGradient
+          id="prefix__d"
+          x1={21.64}
+          y1={1.42}
+          x2={6.63}
+          y2={30.44}
+          xlinkHref="#prefix__a"
+        />
+        <linearGradient
+          id="prefix__e"
+          x1={25.15}
+          y1={3.24}
+          x2={10.14}
+          y2={32.25}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset={0} stopColor="#569fa1" />
+          <stop offset={0.36} stopColor="#97c4c5" />
+          <stop offset={0.8} stopColor="#e2eeef" />
+          <stop offset={1} stopColor="#fff" />
+        </linearGradient>
+        <radialGradient
+          id="prefix__f"
+          cx={21.16}
+          cy={32.05}
+          r={27.25}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset={0} stopColor="#ff0" />
+          <stop offset={1} />
+        </radialGradient>
+      </defs>
+      <g data-name="Layer 2">
+        <g data-name="Layer 1">
+          <path
+            d="M39.64 22.9h2.85a1.86 1.86 0 00.9 1.4 3.67 3.67 0 002 .53 3.33 3.33 0 001.9-.5A1.5 1.5 0 0048 23a1.32 1.32 0 00-.54-1.1 4.91 4.91 0 00-1.83-.71l-1.84-.4Q40 20 40 16.9a3.81 3.81 0 011.5-3.13 6.14 6.14 0 013.89-1.19 6.07 6.07 0 013.89 1.16 3.86 3.86 0 011.5 3.08H48a1.77 1.77 0 00-.79-1.4 3 3 0 00-1.82-.52 3 3 0 00-1.77.48 1.49 1.49 0 00-.66 1.26 1.25 1.25 0 00.53 1.05 5.29 5.29 0 001.77.68l1.71.36A6.18 6.18 0 0150 20.14a3.42 3.42 0 011 2.56 3.93 3.93 0 01-1.55 3.3 6.63 6.63 0 01-4.17 1.2 6.65 6.65 0 01-4.06-1.2 3.9 3.9 0 01-1.58-3.1zM53.33 14h2.85v2.42h1.93v2.18h-1.93v5c0 .78.41 1.18 1.23 1.18a4.44 4.44 0 00.69-.05v2.1a6.12 6.12 0 01-1.36.11 4.1 4.1 0 01-2.63-.66 2.74 2.74 0 01-.78-2.2V18.6h-1.48v-2.15h1.48zm10.29 11a2.39 2.39 0 001.6-.55 1.74 1.74 0 00.66-1.39v-.76l-2.2.13a2.3 2.3 0 00-1.24.4 1.09 1.09 0 00-.43.9 1.1 1.1 0 00.44.93 1.83 1.83 0 001.17.34zm-.94 2.06a3.6 3.6 0 01-2.51-.89 2.92 2.92 0 01-1-2.28 2.68 2.68 0 011-2.24 5.43 5.43 0 013-.93l2.63-.15v-.7a1.4 1.4 0 00-.47-1.13 1.91 1.91 0 00-1.28-.41 2.2 2.2 0 00-1.28.35 1.44 1.44 0 00-.6.95h-2.53A3.21 3.21 0 0161 17.17a5.31 5.31 0 013.29-1 5.05 5.05 0 013.23 1 3.09 3.09 0 011.21 2.54v7.2h-2.8v-1.6h-.06a3.08 3.08 0 01-1.3 1.3 3.89 3.89 0 01-1.89.47zm7.85-.16V16.45h2.76v1.88h.06a2.86 2.86 0 01.91-1.52 2.43 2.43 0 011.58-.53 2.88 2.88 0 01.81.11v2.51a2.79 2.79 0 00-1-.17 2.16 2.16 0 00-1.64.62 2.39 2.39 0 00-.59 1.72v5.85zm8-12.89h2.85v2.42h1.94v2.17h-1.89v5c0 .78.41 1.18 1.23 1.18a4.68 4.68 0 00.7-.05v2.1A6.24 6.24 0 0182 27a4.15 4.15 0 01-2.64-.66 2.74 2.74 0 01-.78-2.2V18.6h-1.47v-2.15h1.47zm16 2.42v10.49h-2.69V25h-.06a3.07 3.07 0 01-3.13 2.08 3.71 3.71 0 01-2.75-1 4 4 0 01-1-2.87v-6.76h2.85v6.15a2.28 2.28 0 00.5 1.59 1.86 1.86 0 001.45.55 1.9 1.9 0 001.51-.63 2.4 2.4 0 00.55-1.67v-6zm8-.17a3.79 3.79 0 013.14 1.44 6.14 6.14 0 011.15 4 6.33 6.33 0 01-1.13 4 4.1 4.1 0 01-5.09.92 3.15 3.15 0 01-1.27-1.41h-.03v5.17h-2.85V16.45h2.81v1.82h.06a3.35 3.35 0 011.27-1.46 3.7 3.7 0 011.97-.53zm-1 8.51a2 2 0 001.77-.77 3.71 3.71 0 00.63-2.27 3.67 3.67 0 00-.63-2.26 2 2 0 00-1.69-.85 2 2 0 00-1.68.86 3.6 3.6 0 00-.64 2.25 3.73 3.73 0 00.63 2.27 2 2 0 001.69.79zm22.07-.32v2.45h-9.11V12.82h3v11.65zm5.55.55a2.39 2.39 0 001.6-.55 1.74 1.74 0 00.66-1.39v-.76l-2.2.13a2.3 2.3 0 00-1.24.4 1.09 1.09 0 00-.43.9 1.1 1.1 0 00.44.93 1.83 1.83 0 001.25.34zm-.94 2.06a3.59 3.59 0 01-2.51-.89 2.92 2.92 0 01-1-2.28 2.68 2.68 0 011-2.24 5.43 5.43 0 013-.93l2.63-.15v-.7a1.43 1.43 0 00-.47-1.13 1.91 1.91 0 00-1.28-.41 2.18 2.18 0 00-1.28.35 1.44 1.44 0 00-.6.95h-2.61a3.21 3.21 0 011.32-2.48 5.31 5.31 0 013.29-1 5.07 5.07 0 013.23 1 3.09 3.09 0 011.21 2.54v7.2h-2.76v-1.58h-.06a3.08 3.08 0 01-1.3 1.3 3.89 3.89 0 01-1.73.47zm7.85-.16V16.45h2.76v1.86h.18a3.26 3.26 0 011.25-1.52 3.6 3.6 0 012-.54 3.46 3.46 0 012.68 1 4.12 4.12 0 011 2.88v6.75H143v-6.12a2.31 2.31 0 00-.49-1.59 1.83 1.83 0 00-1.44-.55 2 2 0 00-1.52.63 2.39 2.39 0 00-.57 1.66v6zm15.41.16a3.75 3.75 0 01-3.11-1.45 6.21 6.21 0 01-1.15-4 6.11 6.11 0 011.15-3.93 3.79 3.79 0 013.13-1.45 3.53 3.53 0 012 .54 3.17 3.17 0 011.25 1.42v-5.37h2.86v14.1h-2.82v-1.8h-.05a3.09 3.09 0 01-1.26 1.42 3.67 3.67 0 01-1.92.54zm1-8.51a2 2 0 00-1.7.84 3.75 3.75 0 00-.61 2.27 3.76 3.76 0 00.61 2.28 2.15 2.15 0 003.39 0 3.72 3.72 0 00.63-2.28 3.67 3.67 0 00-.63-2.26 2 2 0 00-1.64-.83zm7.11 8.35V16.45h2.85v10.47zm2.51-12.05a1.52 1.52 0 01-1.09.42 1.49 1.49 0 01-1.08-.42 1.44 1.44 0 01-.44-1 1.38 1.38 0 01.44-1 1.46 1.46 0 011.08-.43 1.49 1.49 0 011.09.43 1.38 1.38 0 01.44 1 1.44 1.44 0 01-.39 1.02zm2.24 12.05V16.45h2.76v1.86h.06a3.26 3.26 0 011.25-1.52 3.6 3.6 0 012-.54 3.44 3.44 0 012.68 1 4.07 4.07 0 01.95 2.88v6.75h-2.85v-6.12a2.31 2.31 0 00-.49-1.59 1.79 1.79 0 00-1.43-.55 2 2 0 00-1.53.63 2.43 2.43 0 00-.56 1.66v6zm16.36-2.23a2.05 2.05 0 001.7-.8 3.48 3.48 0 00.64-2.23 3.6 3.6 0 00-.64-2.25 2 2 0 00-1.7-.84 2 2 0 00-1.68.84 3.69 3.69 0 00-.61 2.25 3.6 3.6 0 00.61 2.23 2 2 0 001.73.82zm-.05 6.17a5.84 5.84 0 01-3.36-.9 3.19 3.19 0 01-1.48-2.3h2.79a1.54 1.54 0 00.74.88 2.8 2.8 0 001.39.34 2.41 2.41 0 001.69-.56 1.85 1.85 0 00.61-1.47V25H183a3 3 0 01-1.24 1.37 3.89 3.89 0 01-2 .51 3.8 3.8 0 01-3.09-1.41 5.88 5.88 0 01-1.15-3.84 6.06 6.06 0 011.15-3.92 3.82 3.82 0 013.14-1.44 3.59 3.59 0 012 .54 3.37 3.37 0 011.27 1.45v-1.81h2.82v10.32a3.58 3.58 0 01-1.44 3 6 6 0 01-3.77 1.09z"
+            fill={white ? 'white' : '#0f2137'}
+          />
+          <path
+            d="M19.8.53A15.73 15.73 0 004.65 26.89L22.17 9.37A5.29 5.29 0 0019.8.53z"
+            fill="url(#prefix__b)"
+          />
+          <path
+            d="M6.65 36.09A15.73 15.73 0 0021.81 9.73L4.29 27.25a5.28 5.28 0 002.36 8.84z"
+            fill="url(#prefix__c)"
+          />
+          <path
+            d="M21.81 9.73L4.29 27.25a5.28 5.28 0 002.36 8.84 15.72 15.72 0 005.75.44c-7.68-7.39 9.41-26.8 9.41-26.8z"
+            style={{
+              mixBlendMode: 'multiply',
+            }}
+            fill="url(#prefix__a)"
+          />
+          <g
+            style={{
+              mixBlendMode: 'multiply',
+            }}
+          >
+            <path
+              d="M6.33 36c-2.49-7.7 12.45-23.21 15.09-25.87L4.29 27.25A5.28 5.28 0 006.33 36z"
+              fill="url(#prefix__d)"
+            />
+            <path d="M21.75 9.79l.06-.06z" fill="url(#prefix__e)" />
+          </g>
+          <path
+            d="M23.45 7.29L4.64 26.88 22.17 9.37a5.14 5.14 0 001.28-2.08z"
+            style={{
+              mixBlendMode: 'screen',
+            }}
+            fill="url(#prefix__f)"
+          />
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+export default Logo;

src/components/image.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Image as Img } from 'theme-ui';
+
+export default function Image({ src, ...rest }) {
+  return <Img src={src} {...rest} />;
+}

src/components/input.js

@@ -0,0 +1,26 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx, Input as InputField } from 'theme-ui';
+import { rgba } from 'polished';
+
+const Input = ({ ...props }) => {
+  return <InputField sx={styles.input} {...props} />;
+};
+
+export default Input;
+
+const styles = {
+  input: {
+    backgroundColor: '#EFF3F7',
+    borderRadius: '5px',
+    fontFamily: 'body',
+    flexGrow: 1,
+    p: ['0 24px'],
+    height: 'auto',
+    minHeight: '60px',
+    width: 'auto',
+    '::placeholder': {
+      color: rgba('#02073E', 0.4),
+    },
+  },
+};

src/components/layout.js

@@ -0,0 +1,27 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx, Flex } from 'theme-ui';
+import React from 'react';
+import Header from './header/header';
+import Footer from './footer/footer';
+export default function Layout({ children }) {
+  return (
+    <Flex
+      sx={{
+        minHeight: '100vh',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+      }}
+    >
+      <Header />
+      <main
+        sx={{
+          variant: 'layout.main',
+        }}
+      >
+        {children}
+      </main>
+      <Footer />
+    </Flex>
+  );
+}

src/components/link.js

@@ -0,0 +1,61 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import NextLink from 'next/link';
+import { jsx, Link as A } from 'theme-ui';
+import { Link as MenuLink } from 'react-scroll';
+import { HiOutlineChevronRight } from 'react-icons/hi';
+
+export function NavLink({ path, label, children, ...rest }) {
+  return (
+    <MenuLink
+      to={path}
+      spy={true}
+      offset={-70}
+      smooth={true}
+      duration={500}
+      className="nav-item"
+      activeClass="active"
+      {...rest}
+    >
+      {label}
+    </MenuLink>
+  );
+}
+
+export function Link({ path, label, children, ...rest }) {
+  return (
+    <NextLink href={path}>
+      <A {...rest}>{children ? children : label}</A>
+    </NextLink>
+  );
+}
+
+export function LearnMore({ path, label, children, ...rest }) {
+  return (
+    <NextLink href={path}>
+      <A sx={styles.learnMore} {...rest}>
+        {label ?? 'Learn More'} <HiOutlineChevronRight />
+      </A>
+    </NextLink>
+  );
+}
+
+const styles = {
+  learnMore: {
+    color: 'link',
+    cursor: 'pointer',
+    fontSize: [1, 1, 1, 2],
+    fontWeight: 500,
+    display: 'inline-flex',
+    alignItems: 'center',
+    svg: {
+      transition: 'margin-left 0.3s ease-in-out 0s',
+      ml: '3px',
+    },
+    ':hover': {
+      svg: {
+        ml: '5px',
+      },
+    },
+  },
+};

src/components/logo.js

@@ -0,0 +1,24 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from 'theme-ui';
+import { Link } from 'components/link';
+import LogoSvg from 'components/icons/logo';
+
+export default function Logo({ isSticky, footer, ...props }) {
+  return (
+    <Link path="/" sx={styles.logo} {...props}>
+      <LogoSvg />
+    </Link>
+  );
+}
+const styles = {
+  logo: {
+    alignItems: 'center',
+    cursor: 'pointer',
+    display: 'inline-flex',
+    svg: {
+      height: 'auto',
+      width: [128, null, '100%'],
+    },
+  },
+};

src/components/section-heading.js

@@ -0,0 +1,43 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx, Box, Heading, Text } from 'theme-ui';
+
+const SectionHeading = ({ title, description, ...props }) => {
+  return (
+    <Box sx={styles.heading} {...props}>
+      <Heading sx={styles.title}>{title}</Heading>
+      <Text as="p" sx={styles.description}>
+        {description}
+      </Text>
+    </Box>
+  );
+};
+
+export default SectionHeading;
+
+const styles = {
+  heading: {
+    textAlign: 'center',
+    maxWidth: 660,
+    margin: ['0 auto 60px'],
+  },
+  title: {
+    fontFamily: 'heading',
+    fontWeight: 700,
+    fontSize: [5, null, null, 26, null, 30, 9],
+    lineHeight: [1.33, 1.33, 1.48],
+    letterSpacing: ['-0.5px', null, null, null, null, null, '-1px'],
+    img: {
+      ml: ['15px'],
+      position: 'relative',
+      top: '8px',
+    },
+  },
+  description: {
+    color: 'heading',
+    fontSize: [1, null, null, 2],
+    lineHeight: [1.58, 1.58, 1.58, 2.2],
+    maxWidth: ['none', 'none', 'none', 'none', 490],
+    margin: '15px auto 0',
+  },
+};

src/components/seo.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import Head from 'next/head';
+
+export default function SEO({
+  description = 'startup landing descriptions',
+  author = 'RedQ, Inc',
+  meta,
+  title = 'startup landing title',
+}) {
+  const metaData = [
+    {
+      name: `description`,
+      content: description,
+    },
+    {
+      property: `og:title`,
+      content: title,
+    },
+    {
+      property: `og:description`,
+      content: description,
+    },
+    {
+      property: `og:type`,
+      content: `website`,
+    },
+    {
+      name: `twitter:card`,
+      content: `summary`,
+    },
+    {
+      name: `twitter:creator`,
+      content: author,
+    },
+    {
+      name: `twitter:title`,
+      content: title,
+    },
+    {
+      name: `twitter:description`,
+      content: description,
+    },
+  ].concat(meta);
+  return (
+    <Head>
+      <title>{title}</title>
+      {metaData.map(({ name, content }, i) => (
+        <meta key={i} name={name} content={content} />
+      ))}
+    </Head>
+  );
+}
+
+SEO.defaultProps = {
+  lang: `en`,
+  meta: [],
+  description: ``,
+};

src/contexts/drawer/drawer-context.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const DrawerContext = createContext({});

src/contexts/drawer/drawer-provider.js

@@ -0,0 +1,25 @@
+import React, { useReducer } from 'react';
+import { DrawerContext } from './drawer-context';
+const initialState = {
+  isOpen: false,
+};
+
+function reducer(state, action) {
+  switch (action.type) {
+    case 'TOGGLE':
+      return {
+        ...state,
+        isOpen: !state.isOpen,
+      };
+    default:
+      return state;
+  }
+}
+export const DrawerProvider = ({ children }) => {
+  const [state, dispatch] = useReducer(reducer, initialState);
+  return (
+    <DrawerContext.Provider value={{ state, dispatch }}>
+      {children}
+    </DrawerContext.Provider>
+  );
+};

src/pages/_app.js

@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+import Router from 'next/router';
+import { initGA, logPageView } from 'analytics';
+import 'rc-tabs/assets/index.css';
+import 'swiper/swiper-bundle.min.css';
+import 'rc-drawer/assets/index.css';
+
+export default function CustomApp({ Component, pageProps }) {
+  useEffect(() => {
+    initGA();
+    logPageView();
+    Router.events.on('routeChangeComplete', logPageView);
+  }, []);
+
+  return <Component {...pageProps} />;
+}

src/pages/_document.js

@@ -0,0 +1,27 @@
+import Document, { Html, Head, Main, NextScript } from 'next/document';
+
+class CustomDocument extends Document {
+  static async getInitialProps(ctx) {
+    const initialProps = await Document.getInitialProps(ctx);
+    return { ...initialProps };
+  }
+
+  render() {
+    return (
+      <Html lang="en-US">
+        <Head>
+          <link
+            rel="stylesheet"
+            href="https://fonts.googleapis.com/css2?family=B612:ital,wght@0,400;0,700;1,400;1,700&family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap"
+          />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
+
+export default CustomDocument;

src/pages/index.js

@@ -0,0 +1,32 @@
+import { ThemeProvider } from 'theme-ui';
+import theme from 'theme';
+import SEO from 'components/seo';
+import Layout from 'components/layout';
+import Banner from 'sections/home';
+import Services from 'sections/services';
+import Testimonials from 'sections/business-partner';
+import OurTeam from 'sections/our-team';
+import OtherServices from 'sections/core-value';
+import WhyUs from 'sections/why-us';
+import SubscribeUs from 'sections/subscribe-us';
+import Blog from 'sections/blog';
+
+export default function IndexPage() {
+  return (
+    <ThemeProvider theme={theme}>
+      <Layout>
+        <SEO
+          title="Thamrin Group"
+        />
+        <Banner />
+        <OtherServices />
+        <Testimonials />
+        {/* <Services /> */}
+        <OurTeam />
+        <WhyUs />
+        <Blog />
+        {/* <SubscribeUs /> */}
+      </Layout>
+    </ThemeProvider>
+  );
+}

src/sections/blog.js

@@ -0,0 +1,87 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx, Box, Container } from 'theme-ui';
+import Masonry from 'react-masonry-component';
+import SectionHeading from 'components/section-heading';
+import BlogPost from 'components/cards/blog-post';
+import thumb1 from 'assets/images/blog/1.png';
+import thumb2 from 'assets/images/blog/2.png';
+import thumb3 from 'assets/images/blog/3.png';
+import thumb4 from 'assets/images/blog/4.png';
+
+const data = [
+  {
+    id: 1,
+    slug: '#how-to',
+    thumbnail: thumb1,
+    showDescription: true,
+    title: `How to work with prototype design with adobe xd featuring tools`,
+    description: `The 2019 Innovation by Design Awards honor the designers and businesses solving the problems of today and tomorrow. It is one of the most sought-after design`,
+  },
+  {
+    id: 2,
+    slug: '#how-to',
+    thumbnail: null,
+    showDescription: false,
+    title: `Anti bias receives honorable gift mention at Fast Company’s most Innovation by Design Awards`,
+    description: `The 2019 Innovation by Design Awards honor the designers and businesses solving the problems of today and tomorrow. It is one of the most sought-after design`,
+  },
+  {
+    id: 3,
+    slug: '#how-to',
+    thumbnail: thumb3,
+    showDescription: false,
+    title: `Multiple task wireframing with team management perform better`,
+    description: `The 2019 Innovation by Design Awards honor the designers and businesses solving the problems of today and tomorrow. It is one of the most sought-after design`,
+  },
+  {
+    id: 4,
+    slug: '#how-to',
+    thumbnail: thumb2,
+    showDescription: true,
+    title: `Multiple art board prototype with Figma`,
+    description: `Beyond launched anti bias, a Chrome extension that replaces LinkedIn profile photos`,
+  },
+  {
+    id: 5,
+    slug: '#how-to',
+    thumbnail: thumb4,
+    showDescription: false,
+    title: `Team presentation with latest user interface & experience reach more`,
+    description: `The 2019 Innovation by Design Awards honor the designers and businesses solving the problems of today and tomorrow. It is one of the most sought-after design`,
+  },
+];
+
+const masonryOptions = { originTop: true };
+
+const Blog = () => {
+  return (
+    <Box as="section" id="blog" sx={styles.section}>
+      <Container>
+        <SectionHeading
+          sx={styles.heading}
+          title="Popular blog post we update everyday"
+          description="Focus only on the meaning, we take care of the design. As soon as the meeting end you can export in one click."
+        />
+        <Masonry options={masonryOptions} sx={styles.postContainer}>
+          {data?.map((post) => (
+            <BlogPost key={post.id} post={post} />
+          ))}
+        </Masonry>
+      </Container>
+    </Box>
+  );
+};
+
+export default Blog;
+
+const styles = {
+  section: {
+    pt: [8, null, null, 9, null, 11],
+    pb: [8, null, null, 9, null, 11],
+    position: 'relative',
+  },
+  heading: {
+    mb: [6, 6, 7, 11],
+  },
+};

src/sections/business-partner.js

@@ -0,0 +1,124 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx, Box, Container, Image, Text } from 'theme-ui';
+import SectionHeading from 'components/section-heading';
+import Tabs, { TabPane } from 'rc-tabs';
+import { rgba } from 'polished';
+import quote from 'assets/images/icons/quote.png';
+import yamaha from 'assets/images/logos/yamaha.png';
+import suzuki from 'assets/images/logos/suzuki.png';
+import hino from 'assets/images/logos/hino.png';
+import mercedes from 'assets/images/logos/mercedes.png';
+import dribbble from 'assets/images/logos/dribbble.png';
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Card from '@material-ui/core/Card';
+import CardActionArea from '@material-ui/core/CardActionArea';
+import CardActions from '@material-ui/core/CardActions';
+import CardContent from '@material-ui/core/CardContent';
+import CardMedia from '@material-ui/core/CardMedia';
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
+import Paper from '@material-ui/core/Paper';
+import Grid from '@material-ui/core/Grid';
+
+const useStyles = makeStyles({
+  root: {
+    maxWidth: 600,
+    flexGrow: 1,
+  },
+});
+
+const Testimonials = () => {
+  const classes = useStyles();
+  return (
+    <Box as="section" id="testimonials" sx={styles.section}>
+      <Container>
+        <SectionHeading
+          sx={styles.heading}
+          title="Our Business Partner"
+        />
+        
+      </Container>
+    </Box>
+  );
+};
+
+export default Testimonials;
+const styles = {
+  section: {
+    backgroundColor: rgba('#FFF5ED', 0.5),
+    pt: [7, null, null, 9, null, 10, 11],
+    pb: [9, null, null, 10, 11],
+  },
+  tabs: {
+    border: 0,
+    flexDirection: ['column-reverse', null, null, null, null, 'column'],
+    '.rc-tabs-nav': {
+      mt: [8, null, null, 9, 11],
+    },
+    '.rc-tabs-nav-wrap': {
+      borderTop: `1px solid ${rgba('#01070D', 0.1)}`,
+      justifyContent: 'center',
+    },
+    '.rc-tabs-tab': {
+      backgroundColor: 'transparent',
+      // m: ['0 45px'],
+    },
+    '.rc-tabs-tab-btn': {
+      display: 'flex',
+      alignItems: 'center',
+      lineHeight: 1,
+      outline: 0,
+      img: {
+        outline: 0,
+        maxWidth: [50, 65, null, 110, '80%', '100%'],
+        m: ['0 auto'],
+      },
+    },
+    '.rc-tabs-nav-list': {
+      flexGrow: 1,
+      justifyContent: 'space-evenly',
+      pt: [4, null, null, 7, 9],
+    },
+    '.rc-tabs-tabpane': {
+      outline: 0,
+      blockquote: {
+        fontFamily: 'heading',
+        fontWeight: 400,
+        fontSize: [2, null, null, 3, 4, 6],
+        lineHeight: [1.87, null, null, 2.08],
+        position: 'relative',
+        maxWidth: 846,
+        margin: '0px auto',
+        pt: ['12px', null, null, '17px', '13px'],
+        pl: [35, 35, 35, 10, 11],
+        ':before': {
+          background: `url(${quote}) no-repeat`,
+          content: `''`,
+          position: 'absolute',
+          width: 128,
+          height: 43,
+          left: ['-31px', null, null, '-16px', '-7px', 0],
+          top: ['1px', '1px', '1px', 0],
+          backgroundSize: ['75%', null, null, '100%'],
+        },
+      },
+      span: {
+        color: '#7E8896',
+        fontFamily: 'body',
+        display: 'flex',
+        fontWeight: 500,
+        fontSize: [0, 1, 1, 2],
+        lineHeight: 2.5,
+        mt: [1, null, null, 3],
+      },
+    },
+    '.rc-tabs-ink-bar': {
+      top: 0,
+      height: 2,
+      backgroundColor: '#A17857',
+      borderRadius: 5,
+    },
+  },
+};

src/sections/core-value.js

@@ -0,0 +1,88 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx, Box, Container } from 'theme-ui';
+import SectionHeading from 'components/section-heading';
+import Service from 'components/cards/service';
+import core1 from 'assets/images/icons/core1.png';
+import core2 from 'assets/images/icons/core2.png';
+import core3 from 'assets/images/icons/core3.png';
+import core4 from 'assets/images/icons/core4.png';
+import core5 from 'assets/images/icons/core5.png';
+
+const data = [
+  {
+    id: 1,
+    icon: core1,
+    title: 'INTEGRITY',
+    description: `Get your info tests delivered at home collect a sample from the your progress tests.`,
+  },
+  {
+    id: 2,
+    icon: core2,
+    title: 'CUSTOMER FOCUS',
+    description: `Get your info tests delivered at home collect a sample from the your progress tests.`,
+  },
+  {
+    id: 3,
+    icon: core3,
+    title: 'COMMUNICATION',
+    description: `Get your info tests delivered at home collect a sample from the your progress tests.`,
+  },
+  {
+    id: 4,
+    icon: core4,
+    title: 'CONTINUOUS IMPROVEMENT',
+    description: `Get your info tests delivered at home collect a sample from the your progress tests.`,
+  },
+  {
+    id: 6,
+    icon: core5,
+    title: 'TEAMWORK',
+    description: `Get your info tests delivered at home collect a sample from the your progress tests.`,
+  },
+];
+
+const OtherServices = () => {
+  return (
+    <Box as="section" sx={styles.section}>
+      <Container>
+        <SectionHeading
+          sx={styles.heading}
+          title="Core Value Thamrin Group"
+        />
+        <Box sx={styles.contentWrapper}>
+          {data?.map((item) => (
+            <Service key={item.id} item={item} />
+          ))}
+        </Box>
+      </Container>
+    </Box>
+  );
+};
+export default OtherServices;
+
+const styles = {
+  section: {
+    backgroundColor: '#F9FAFC',
+    pt: [9, 9, 9, 11],
+    pb: [9, 9, 9, 12, 12, 14],
+  },
+  heading: {
+    mb: [6, null, null, 8, 9, null, 13],
+    p: {
+      maxWidth: 500,
+      margin: '10px auto 0',
+    },
+  },
+  contentWrapper: {
+    gap: ['30px 30px', '30px 30px', '30px 30px', '80px 30px'],
+    display: 'grid',
+    justifyContent: ['center', 'center', 'center', 'unset'],
+    gridTemplateColumns: [
+      'repeat(1, 285px)',
+      'repeat(1, 325px)',
+      'repeat(1, 285px)',
+      'repeat(3, 1fr)',
+    ],
+  },
+};

src/sections/home.js

@@ -0,0 +1,79 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx, Box, Container, Button, Image } from 'theme-ui';
+import { rgba } from 'polished';
+import SectionHeading from 'components/section-heading';
+import illustration from 'assets/images/welcome.png';
+
+const Banner = () => {
+  return (
+    <Box as="section" id="home" sx={styles.section}>
+      <Container  style={{width:"1700px"}}>
+        <Box sx={styles.contentWrapper}>
+          <SectionHeading
+            sx={styles.heading}
+            title="Selamat Datang di Thamrin Group"
+          />
+          <Box as="figure" sx={styles.illustration}>
+            <Image src={illustration} alt="illustration"/>
+          </Box>
+        </Box>
+      </Container>
+    </Box>
+  );
+};
+
+export default Banner;
+
+const styles = {
+  section: {
+    position: 'relative',
+    pt: [105, null, null, 140, 15, null, 170],
+    pb: [8, null, null, 0],
+    zIndex: 0,
+    ':before': {
+      backgroundColor: rgba('#FFF5ED', 0.5),
+      content: ['none', null, null, `''`],
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      bottom: 0,
+      height: 72,
+      zIndex: -1,
+    },
+  },
+  contentWrapper: {
+    display: 'flex',
+    alignItems: 'center',
+    flexDirection: 'column',
+    justifyContent: 'flex-end',
+  },
+  heading: {
+    mb: [30],
+    maxWidth: [null, null, null, 500, 560, 730],
+    h2: {
+      fontSize: [8, null, null, 8, 9, 10, 11],
+      lineHeight: [1.57],
+    },
+    p: {
+      fontSize: [1, null, null, 3],
+      lineHeight: [1.87, null, null, 2.33],
+    },
+  },
+  illustration: {
+    display: ['block', null, null, 'flex'],
+    position: 'relative',
+    img: {
+      display: ['none', null, null, 'block'],
+      maxWidth: ['90%'],
+      m: ['0 auto'],
+    },
+  },
+  buttonWrapper: {
+    textAlign: ['center'],
+    position: ['static', null, null, 'absolute'],
+    left: '50%',
+    top: 0,
+    transform: ['unset', null, null, 'translateX(-50%)'],
+  },
+};

src/sections/our-team.js

@@ -0,0 +1,322 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { useRef, useState, useEffect } from 'react';
+import { jsx, Box, Container, Image } from 'theme-ui';
+import SwiperCore, { Navigation, Pagination } from 'swiper';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import SectionHeading from 'components/section-heading';
+import TeamMember from 'components/cards/team-member';
+
+import avatar1 from 'assets/images/team/member1.png';
+import avatar2 from 'assets/images/team/member2.png';
+import avatar3 from 'assets/images/team/member3.png';
+import avatar4 from 'assets/images/team/member4.png';
+import arrowRight from 'assets/images/icons/arrow-right.png';
+
+SwiperCore.use([Navigation, Pagination]);
+
+const data = [
+  {
+    id: 1,
+    avatar: avatar1,
+    name: 'Emmalee Mclain',
+    designation: 'Product Designer',
+    socialLinks: [
+      {
+        name: 'twitter',
+        link: 'http://twitter.com',
+      },
+      {
+        name: 'github',
+        link: 'http://github.com',
+      },
+      {
+        name: 'dribbble',
+        link: 'http://dribbble.com',
+      },
+    ],
+  },
+  {
+    id: 2,
+    avatar: avatar2,
+    name: 'Daisy Morgan',
+    designation: 'Lead developer',
+    socialLinks: [
+      {
+        name: 'twitter',
+        link: 'http://twitter.com',
+      },
+      {
+        name: 'dribbble',
+        link: 'http://dribbble.com',
+      },
+    ],
+  },
+  {
+    id: 3,
+    avatar: avatar3,
+    name: 'Ariyanna Hicks',
+    designation: 'Experience Designer',
+    socialLinks: [
+      {
+        name: 'twitter',
+        link: 'http://twitter.com',
+      },
+      {
+        name: 'github',
+        link: 'http://github.com',
+      },
+    ],
+  },
+  {
+    id: 4,
+    avatar: avatar4,
+    name: 'Yamilet Hooker',
+    designation: 'User interface designer',
+    socialLinks: [
+      {
+        name: 'twitter',
+        link: 'http://twitter.com',
+      },
+      {
+        name: 'github',
+        link: 'http://github.com',
+      },
+      {
+        name: 'dribbble',
+        link: 'http://dribbble.com',
+      },
+    ],
+  },
+  {
+    id: 5,
+    avatar: avatar1,
+    name: 'Emmalee Mclain',
+    designation: 'Product Designer',
+    socialLinks: [
+      {
+        name: 'twitter',
+        link: 'http://twitter.com',
+      },
+      {
+        name: 'github',
+        link: 'http://github.com',
+      },
+      {
+        name: 'dribbble',
+        link: 'http://dribbble.com',
+      },
+    ],
+  },
+  {
+    id: 6,
+    avatar: avatar2,
+    name: 'Daisy Morgan',
+    designation: 'Lead developer',
+    socialLinks: [
+      {
+        name: 'twitter',
+        link: 'http://twitter.com',
+      },
+      {
+        name: 'dribbble',
+        link: 'http://dribbble.com',
+      },
+    ],
+  },
+  {
+    id: 7,
+    avatar: avatar3,
+    name: 'Ariyanna Hicks',
+    designation: 'Experience Designer',
+    socialLinks: [
+      {
+        name: 'twitter',
+        link: 'http://twitter.com',
+      },
+      {
+        name: 'github',
+        link: 'http://github.com',
+      },
+    ],
+  },
+  {
+    id: 8,
+    avatar: avatar4,
+    name: 'Yamilet Hooker',
+    designation: 'User interface designer',
+    socialLinks: [
+      {
+        name: 'twitter',
+        link: 'http://twitter.com',
+      },
+      {
+        name: 'github',
+        link: 'http://github.com',
+      },
+      {
+        name: 'dribbble',
+        link: 'http://dribbble.com',
+      },
+    ],
+  },
+];
+
+const OurTeam = () => {
+  const swiperRef = useRef(null);
+  const containerRef = useRef(null);
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [containerOffset, setContainerOffset] = useState({
+    left: null,
+    top: null,
+  });
+
+  const isEnd = swiperRef?.current?.swiper?.isEnd;
+
+  const handlePrev = () => {
+    swiperRef?.current?.swiper?.slidePrev();
+    setInterval(() => {
+      setCurrentIndex(swiperRef?.current?.swiper?.activeIndex);
+    }, 100);
+
+    clearInterval();
+  };
+  const handleNext = () => {
+    swiperRef?.current?.swiper?.slideNext();
+    setInterval(() => {
+      setCurrentIndex(swiperRef?.current?.swiper?.activeIndex);
+    }, 100);
+
+    clearInterval();
+  };
+
+  useEffect(() => {
+    setContainerOffset({
+      left: containerRef.current.offsetLeft,
+      top: containerRef.current.offsetTop,
+    });
+  }, [containerRef]);
+
+  const breakpoints = {
+    0: {
+      slidesPerView: 1,
+      spaceBetween: 0,
+    },
+    768: {
+      slidesPerView: 3,
+      spaceBetween: 30,
+    },
+    1024: {
+      slidesPerView: 4,
+      spaceBetween: 30,
+    },
+    1601: {
+      slidesPerView: 5,
+      spaceBetween: 30,
+    },
+  };
+
+  return (
+    <Box as="section" id="team" sx={styles.section}>
+      <Container ref={containerRef}>
+        <SectionHeading
+          sx={styles.heading}
+          title="Thamrin Group Founder"
+          // description="Build an incredible workplace and grow your business with Gusto’s all-in-one platform with amazing contents."
+        />
+      </Container>
+      <Box
+        sx={{
+          ml: currentIndex === 0 ? containerOffset?.left : 0,
+          ...styles.teamWrapper,
+        }}
+      >
+        {currentIndex !== 0 && (
+          <button
+            onClick={handlePrev}
+            className="swiper-arrow swiper-arrow-left"
+          >
+            <Image src={arrowRight} alt="arrow left" />
+          </button>
+        )}
+        {!isEnd && (
+          <button
+            className="swiper-arrow swiper-arrow-right"
+            onClick={handleNext}
+          >
+            <Image src={arrowRight} alt="arrow right" />
+          </button>
+        )}
+
+        <Swiper
+          ref={swiperRef}
+          spaceBetween={30}
+          watchSlidesVisibility={true}
+          slidesPerView={5}
+          breakpoints={breakpoints}
+        >
+          {data?.map((item) => (
+            <SwiperSlide key={item.id}>
+              <TeamMember member={item} />
+            </SwiperSlide>
+          ))}
+        </Swiper>
+      </Box>
+    </Box>
+  );
+};
+
+export default OurTeam;
+
+const styles = {
+  section: {
+    pt: [11],
+    pb: [11, null, null, 12, null, 14],
+  },
+  heading: {
+    p: {
+      maxWidth: 500,
+      m: '10px auto 0',
+    },
+  },
+  teamWrapper: {
+    position: 'relative',
+    pl: [6],
+    pr: [6, null, null, 0],
+    transition: '0.3s ease-in-out 0s',
+    '.swiper-arrow': {
+      backgroundColor: '#fff',
+      border: 0,
+      cursor: 'pointer',
+      padding: 0,
+      display: 'flex',
+      width: [30, null, null, null, 40, 60],
+      height: [30, null, null, null, 40, 60],
+      alignItems: 'center',
+      justifyContent: 'center',
+      boxShadow: '0px 7px 14px rgba(25, 60, 101, 0.06)',
+      borderRadius: '50%',
+      position: 'absolute',
+      zIndex: 2,
+      top: 'calc(50% - 40px)',
+      transform: 'translateY(-50%)',
+      outline: 0,
+      img: {
+        maxWidth: [8, 10, null, null, '100%'],
+      },
+    },
+    '.swiper-arrow-left': {
+      left: [3, null, null, null, 20, 50],
+      img: {
+        transform: 'rotate(180deg)',
+        marginLeft: '-4px',
+      },
+    },
+    '.swiper-arrow-right': {
+      right: [3, null, null, null, 20, 50],
+      img: {
+        marginRight: '-4px',
+      },
+    },
+  },
+};

src/sections/services.js

@@ -0,0 +1,74 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx, Box, Container } from 'theme-ui';
+import { rgba } from 'polished';
+import SectionHeading from 'components/section-heading';
+import Service from 'components/cards/service';
+import icon1 from 'assets/images/icons/service1.png';
+import icon2 from 'assets/images/icons/service2.png';
+import icon3 from 'assets/images/icons/service3.png';
+
+const data = [
+  {
+    id: 1,
+    icon: icon1,
+    title: 'Marketing & advertising',
+    description: `Get your info tests delivered at home collect a sample from the your progress tests.`,
+  },
+  {
+    id: 3,
+    icon: icon2,
+    title: 'Ultimate development',
+    description: `Get your info tests delivered at home collect a sample from the your progress tests.`,
+  },
+  {
+    id: 4,
+    icon: icon3,
+    title: 'Business Enterprise',
+    description: `Get your info tests delivered at home collect a sample from the your progress tests.`,
+  },
+];
+
+const Services = () => {
+  return (
+    <Box as="section" id="services" sx={styles.section}>
+      <Container>
+        <SectionHeading
+          sx={styles.heading}
+          title="Grow your startup with our Service"
+          description="Build an incredible workplace and grow your business with Gusto’s all-in-one platform with amazing contents."
+        />
+        <Box sx={styles.contentWrapper}>
+          {data?.map((item) => (
+            <Service key={item.id} item={item} />
+          ))}
+        </Box>
+      </Container>
+    </Box>
+  );
+};
+
+export default Services;
+
+const styles = {
+  section: {
+    backgroundColor: rgba('#FFF5ED', 0.5),
+    pt: [11, 11, 11, 12, 12, 12, 14],
+    pb: [7, 7, 7, 9, 9, 10, 11],
+  },
+  heading: {
+    maxWidth: [null, null, null, 455, 660],
+    mb: [6, null, null, 8, null, 9, 13],
+  },
+  contentWrapper: {
+    gap: 30,
+    display: 'grid',
+    justifyContent: ['center', null, null, 'unset'],
+    gridTemplateColumns: [
+      'repeat(1, 285px)',
+      'repeat(1, 325px)',
+      'repeat(1, 285px)',
+      'repeat(3, 1fr)',
+    ],
+  },
+};

src/sections/subscribe-us.js

@@ -0,0 +1,143 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { useState, useCallback } from 'react';
+import { jsx, Box, Container, Button, Flex, Checkbox, Label } from 'theme-ui';
+import { rgba } from 'polished';
+import SectionHeading from 'components/section-heading';
+import Input from 'components/input';
+import illustration from 'assets/images/subscribe-bg.png';
+
+const SubscribeUs = () => {
+  const [checked, setChecked] = useState(false);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    console.log('submitted.');
+  };
+
+  const handleCheckbox = useCallback(() => {
+    setChecked(!checked);
+  }, [checked]);
+
+  return (
+    <Box as="section" sx={styles.section} variant="section.subscribe">
+      <Container>
+        <Box sx={styles.contentWrapper}>
+          <SectionHeading
+            sx={styles.heading}
+            title="Like our service? Subscribe us"
+            description="We have more than thousand of creative entrepreneurs and stat joining our business"
+          />
+          <Box as="form" sx={styles.subscribe} onSubmit={handleSubmit}>
+            <Flex sx={styles.inputGroup}>
+              <Label htmlFor="email" variant="styles.srOnly">
+                Email
+              </Label>
+              <Input
+                id="email"
+                type="email"
+                className="email-input"
+                placeholder="Enter Email address"
+              />
+              <Button variant="secondary">Subscribe</Button>
+            </Flex>
+            <Box sx={styles.checkbox}>
+              <Label htmlFor="no_spam" className={checked ? 'checked' : ''}>
+                <Checkbox
+                  id="no_spam"
+                  onChange={handleCheckbox}
+                  defaultChecked={checked}
+                />
+                Don’t provide any promotional message.
+              </Label>
+              {/* <Checkbox
+                id="no_spam"
+                checked={checked}
+                onChange={handleCheckbox}
+                label="Don’t provide any promotional message."
+              /> */}
+            </Box>
+          </Box>
+        </Box>
+      </Container>
+    </Box>
+  );
+};
+
+export default SubscribeUs;
+
+const styles = {
+  section: {
+    background: [
+      'none',
+      null,
+      null,
+      `#F8F0EA url(${illustration}) no-repeat center bottom / contain`,
+    ],
+    pt: [8, null, null, null, 10],
+    pb: [8, null, null, 9, 11],
+  },
+  contentWrapper: {
+    backgroundColor: '#fff',
+    borderRadius: 15,
+    p: [null, null, null, '40px 110px 50px', '50px 50px', '40px'],
+    gap: '50px',
+    display: ['block', null, 'grid', 'block', 'grid'],
+    alignItems: 'center',
+    gridTemplateColumns: ['repeat(2, 1fr)'],
+  },
+  heading: {
+    textAlign: ['center', null, 'left', 'center', 'left'],
+    mb: ['30px', null, null, null, 0],
+    ml: 0,
+    h2: {
+      fontSize: [6, null, null, null, null, 8, 9],
+    },
+    p: {
+      lineHeight: 1.87,
+      marginTop: 1,
+      ml: ['auto', null, null, null, 0],
+      mr: ['auto', null, null, null, 0],
+      maxWidth: 420,
+    },
+  },
+  subscribe: {
+    '.email-input': {
+      mr: [0, null, null, '15px'],
+      minHeight: ['50px', '50px', '60px'],
+    },
+    button: {
+      minHeight: ['50px', '50px', '60px'],
+      fontSize: ['14px', '14px', '16px'],
+      mt: ['15px', null, null, 0],
+    },
+  },
+  inputGroup: {
+    flexDirection: ['column', null, null, 'row'],
+  },
+  checkbox: {
+    mt: ['24px'],
+    label: {
+      display: 'flex',
+      alignItems: 'center',
+      cursor: 'pointer',
+      fontSize: '14px',
+      fontWeight: 400,
+      lineHeight: 1.14,
+      color: rgba('#9095AD', 0.9),
+      zIndex: 10,
+      svg: {
+        path: {
+          fill: '#EFF3F7',
+        },
+      },
+      '&.checked': {
+        svg: {
+          path: {
+            fill: 'primary',
+          },
+        },
+      },
+    },
+  },
+};

src/sections/why-us.js

@@ -0,0 +1,191 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx, Box, Container, Heading, Text, Image } from 'theme-ui';
+import Tabs, { TabPane } from 'rc-tabs';
+import { RiCheckboxCircleFill } from 'react-icons/ri';
+import { rgba } from 'polished';
+import { LearnMore } from 'components/link';
+import tabImage1 from 'assets/images/tab-illustration-1.png';
+
+const data = [
+  {
+    id: 1,
+    tabTitle: 'Why you choose our service?',
+    title: `We will turn your idea in the successful business model framework`,
+    description: `Get your tests delivered at let home collect sample from the victory of the managements that supplies best design system guidelines ever.`,
+    moreLink: '#explore-more',
+    image: tabImage1,
+    list: [
+      'Medical and vision',
+      'Life insurance',
+      'HSAs and FSAs',
+      'Commuter benefits',
+    ],
+  },
+  {
+    id: 2,
+    tabTitle: 'What’s our business promise?',
+    title: `We will turn your idea in the successful business model framework`,
+    description: `Get your tests delivered at let home collect sample from the victory of the managements that supplies best design system guidelines ever.`,
+    moreLink: '#explore-more',
+    image: tabImage1,
+    list: [
+      'Medical and vision',
+      'Life insurance',
+      'HSAs and FSAs',
+      'Commuter benefits',
+    ],
+  },
+  {
+    id: 3,
+    tabTitle: 'What’s our role model plan?',
+    title: `We will turn your idea in the successful business model framework`,
+    description: `Get your tests delivered at let home collect sample from the victory of the managements that supplies best design system guidelines ever.`,
+    moreLink: '#explore-more',
+    image: tabImage1,
+    list: [
+      'Medical and vision',
+      'Life insurance',
+      'HSAs and FSAs',
+      'Commuter benefits',
+    ],
+  },
+];
+
+const WhyUs = () => {
+  return (
+    <Box as="section" id="why-us" sx={styles.section}>
+      <Container>
+        <Tabs sx={styles.tabs} animated={{ tabPane: true }}>
+          {data?.map((item) => (
+            <TabPane
+              key={item.id}
+              tab={<Heading as="h4">{item.tabTitle}</Heading>}
+            >
+              <Box>
+                <Heading>{item.title}</Heading>
+                <Text as="p" sx={styles.description}>
+                  {item.description}
+                </Text>
+                <Box sx={styles.list}>
+                  {item.list.map((item, i) => (
+                    <Box key={i} className="list-item">
+                      <RiCheckboxCircleFill
+                        color="#3FDBB1"
+                        size="20px"
+                        sx={{ mr: 2 }}
+                      />
+                      <span>{item}</span>
+                    </Box>
+                  ))}
+                </Box>
+                <Box sx={styles.learnMore}>
+                  <LearnMore path={item.moreLink} label="Explore more" />
+                </Box>
+              </Box>
+              <Box sx={styles.illustration}>
+                <Image src={item.image} alt="illustration" />
+              </Box>
+            </TabPane>
+          ))}
+        </Tabs>
+      </Container>
+    </Box>
+  );
+};
+
+export default WhyUs;
+
+const styles = {
+  section: {
+    pt: [11, null, null, 12],
+    pb: [8, null, null, 9, null, 11],
+  },
+  tabs: {
+    border: 0,
+    '.rc-tabs-nav': {
+      mb: [8, null, null, 9, 10, 9, 12],
+    },
+    '.rc-tabs-nav-wrap': {
+      borderBottom: `1px solid ${rgba('#01070D', 0.1)}`,
+      justifyContent: 'center',
+    },
+    '.rc-tabs-nav-list': {
+      flexGrow: 1,
+      justifyContent: 'space-evenly',
+      pb: [3, null, null, 5, null, 6],
+    },
+    '.rc-tabs-tab-btn': {
+      outline: 0,
+      alignItems: 'center',
+      img: {
+        outline: 0,
+      },
+    },
+    '.rc-tabs-tab': {
+      backgroundColor: 'transparent',
+      // m: ['0 45px'],
+      h4: {
+        fontFamily: 'body',
+        fontSize: [0, null, null, 17, null, null, 4],
+        fontWeight: 700,
+        lineHeight: 1.5,
+        textAlign: ['center', null, null, null, 'left'],
+        whiteSpace: ['break-spaces', null, null, null, 'unset'],
+      },
+    },
+    '.rc-tabs-tabpane': {
+      display: ['flex', null, null, 'grid'],
+      flexDirection: ['column-reverse', null, null, 'unset'],
+      alignItems: 'center',
+      justifyContent: 'center',
+      gridTemplateColumns: [null, null, null, '0.9fr 1.1fr'],
+      outline: 0,
+      gap: [5, null, null, 11],
+      h2: {
+        color: 'heading',
+        fontSize: [24, null, null, 6, 26, 8, 40],
+        fontWeight: 700,
+        lineHeight: [1.45, null, null, 1.5],
+        letterSpacing: [null, null, null, '0.5px', null, '-1px'],
+        textAlign: ['center', null, null, 'left'],
+      },
+      p: {
+        color: 'textSecondary',
+        fontSize: [1, null, null, 2, 17],
+        lineHeight: [1.87, null, null, 2, 2.48],
+        textAlign: ['center', null, null, 'left'],
+        mt: [4],
+      },
+      '.list-item': {
+        fontSize: [0, null, null, 1, 2],
+        fontWeight: 500,
+        lineHeight: [2.8],
+        display: 'flex',
+        alignItems: 'center',
+      },
+    },
+  },
+  list: {
+    mt: [5],
+    display: 'grid',
+    justifyContent: ['center', null, null, 'unset'],
+    gridTemplateColumns: ['repeat(2, 164px)', null, null, 'repeat(2, 180px)'],
+  },
+  learnMore: {
+    mt: [4],
+    textAlign: ['center', null, null, 'left'],
+    a: {
+      fontSize: [null, null, null, 1, 2],
+    },
+  },
+  illustration: {
+    display: ['flex'],
+    alignItems: 'center',
+    justifyContent: 'center',
+    textAlign: [null, null, null, null, null, 'center'],
+    img: {
+      maxWidth: ['65%', null, null, '100%', null, '90%', '100%'],
+    },
+  },
+};

src/theme/index.js

@@ -0,0 +1,339 @@
+export default {
+  // example colors with dark mode
+  colors: {
+    text: '#343D48', // body color and primary color
+    textSecondary: '#02073E', // secondary body color
+    heading: '#0F2137', // primary heading color
+    headingSecondary: '#343D48', // heading color
+    background: '#FFFFFF', // body background color
+    backgroundSecondary: '#F9FBFD', // secondary background color
+    borderColor: '#F3F4F5', // border color
+    primary: '#0A8080', // primary button and link color
+    secondary: '#DB4A87', // secondary color - can be used for hover states
+    muted: '#7B8188', // muted color
+    accent: '#609', // a contrast color for emphasizing UI
+    dark: '#10132D',
+    link: '#4F96FF', // default link color
+
+    // highlight	a background color for highlighting text
+    modes: {
+      dark: {
+        text: '#fff',
+        background: '#000',
+        primary: '#0cf',
+        secondary: '#09c',
+        muted: '#111',
+      },
+    },
+  },
+  fonts: {
+    body: 'DM Sans',
+    // body:
+    //   'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
+    heading: 'B612, sans-serif',
+    monospace: 'Menlo, monospace',
+  },
+  fontSizes: [
+    12, // 0
+    14, // 1
+    16, // 2
+    18, // 3
+    20, // 4
+    22, // 5
+    24, // 6
+    28, // 7
+    32, // 8
+    36, // 9
+    42, // 10
+    48, // 11
+    52, // 12
+    64, //13
+  ],
+  fontWeights: {
+    body: 'normal',
+    // body: 400,
+    heading: 500,
+    // heading: 700,
+    bold: 700,
+  },
+  lineHeights: {
+    body: 1.5,
+    // body: 1.5,
+    heading: 1.25,
+    // heading: 1.125,
+  },
+  letterSpacings: {
+    body: 'normal',
+    caps: '0.2em',
+    heading: '-0.5px',
+  },
+  space: [
+    0, //0
+    5, //1
+    10, //2
+    15, //3
+    20, //4
+    25, //5
+    30, //6
+    40, //7
+    50, //8
+    60, //9
+    70, //10
+    80, //11
+    100, //12
+    120, //13
+    130, //14
+    150, //15
+  ],
+  sizes: {},
+  breakpoints: [
+    '480px',
+    '640px',
+    '768px',
+    '1024px',
+    '1200px',
+    '1367px',
+    '1440px',
+    '1600px',
+  ],
+  // variants can use custom, user-defined names
+  layout: {
+    container: {
+      maxWidth: ['100%', null, null, null, '970px', '1140px', '1260px'],
+      paddingLeft: [3, 6],
+      paddingRight: [3, 6],
+      m: '0 auto',
+    },
+    toolbar: {
+      display: 'flex',
+      alignItems: 'center',
+      // justifyContent: 'space-between',
+    },
+    main: {},
+    footer: {},
+  },
+  section: {
+    banner: {},
+  },
+  text: {
+    heading: {
+      fontFamily: 'heading',
+      lineHeight: 'heading',
+      fontWeight: 'heading',
+    },
+    heroTitle: {
+      fontSize: [4, null, null, 5, null, 5, 6],
+      fontWeight: 700,
+      letterSpacing: 'heading',
+      lineHeight: [1.4, null, null, null, null, null, 1.57],
+    },
+  },
+  links: {
+    bold: {
+      fontWeight: 'bold',
+    },
+    logo: {
+      display: 'inline-flex',
+    },
+    learnMore: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      textDecoration: 'none',
+      fontWeight: 700,
+      color: 'primary',
+    },
+    nav: {
+      display: ['none', null, 'inline-flex'],
+      p: 2,
+    },
+    footer: {
+      display: 'flex',
+      px: 0,
+      color: 'inherit',
+      textDecoration: 'none',
+      fontSize: '14px',
+      lineHeight: 2.5,
+    },
+  },
+  images: {
+    avatar: {
+      width: 48,
+      height: 48,
+      borderRadius: 99999,
+    },
+  },
+  // variants for buttons
+  buttons: {
+    menu: {
+      display: ['block', null, null, null, 'none'],
+      svg: {
+        width: '32px',
+      },
+    },
+    default: {
+      backgroundColor: 'transparent',
+      fontFamily: 'body',
+      fontWeight: 'bold',
+      borderRadius: '5px',
+      cursor: 'pointer',
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      transition: '0.3s ease-in-out 0s',
+      whiteSpace: 'nowrap',
+    },
+    primary: {
+      variant: 'buttons.default',
+      color: 'white',
+      bg: 'primary',
+      minHeight: ['50px', null, null, null, null, '60px'],
+      padding: ['0 25px', null, null, '0 30px'],
+      '&:hover': {
+        bg: 'dark',
+      },
+    },
+    primaryMd: {
+      variant: 'buttons.primary',
+      minHeight: '50px',
+      px: '25px',
+    },
+    secondary: {
+      variant: 'buttons.primary',
+      color: 'white',
+      bg: 'secondary',
+    },
+    muted: {
+      variant: 'buttons.default',
+      backgroundColor: '#EDF0F2',
+      color: 'text',
+      ':hover': {
+        backgroundColor: 'primary',
+        color: '#fff',
+      },
+    },
+    white: {
+      variant: 'buttons.default',
+      backgroundColor: 'white',
+      color: '#020718',
+    },
+    text: {
+      variant: 'buttons.default',
+      color: 'text',
+    },
+  },
+  cards: {
+    primary: {
+      padding: 2,
+      borderRadius: 4,
+      // boxShadow: '0 0 4px 1px rgba(0, 0, 0, 0.5)',
+    },
+    offer: {
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center',
+      flex: ['1 1 calc(50% - 16px)', '1 1 20%'],
+      minHeight: 130,
+      m: 2,
+      background: '#FFFFFF',
+      border: '1px solid #EDEFF6',
+      borderRadius: 5,
+    },
+    featureCard: {
+      display: 'flex',
+      alignItems: ['center', 'flex-start'],
+      flexDirection: ['column', 'row'],
+      p: [0, 3],
+    },
+  },
+  forms: {
+    label: {
+      fontSize: 1,
+      fontWeight: 'bold',
+    },
+    input: {
+      borderRadius: 8,
+      borderColor: 'borderColor',
+      height: 60,
+      '&:focus': {
+        borderColor: 'primary',
+        boxShadow: (t) => `0 0 0 2px ${t.colors.primary}`,
+        outline: 'none',
+      },
+    },
+  },
+
+  badges: {
+    primary: {
+      color: 'background',
+      bg: '#28A5FF',
+      borderRadius: 30,
+      p: '3px 11px',
+      fontSize: 1,
+      letterSpacing: '-0.5px',
+    },
+    outline: {
+      color: 'primary',
+      bg: 'transparent',
+      boxShadow: 'inset 0 0 0 1px',
+    },
+  },
+
+  styles: {
+    // To add base, top-level styles to the <body> element, use theme.styles.root.
+    root: {
+      fontFamily: 'body',
+      lineHeight: 'body',
+      fontWeight: 'body',
+    },
+    // h1-h6 Heading styles
+    h1: {
+      // fontFamily: 'none',
+      // variant: 'text.heading',
+      // fontSize: 6,
+    },
+    h2: {
+      // fontFamily: 'none',
+      // variant: 'text.heading',
+      // fontSize: 5,
+    },
+    h3: {
+      variant: 'text.heading',
+      fontSize: 4,
+    },
+    h4: {
+      variant: 'text.heading',
+      fontSize: 3,
+    },
+    h5: {
+      variant: 'text.heading',
+      fontSize: 2,
+    },
+    h6: {
+      variant: 'text.heading',
+      fontSize: 1,
+    },
+    // Divider styles
+    hr: {
+      border: 0,
+      borderBottom: '1px solid',
+      borderColor: '#D9E0E7',
+    },
+    // also you can use other HTML elements style here
+    ul: {
+      listStyle: 'none',
+    },
+    srOnly: {
+      border: '0 !important',
+      clip: 'rect(1px, 1px, 1px, 1px) !important',
+      clipPath: 'inset(50%) !important',
+      height: '1px !important',
+      margin: '-1px !important',
+      overflow: 'hidden !important',
+      padding: '0 !important',
+      position: 'absolute !important',
+      width: '1px !important',
+      whiteSpace: 'nowrap !important',
+    },
+  },
+};

vercel.json

@@ -0,0 +1,7 @@
+{
+  "build": {
+    "env": {
+
+    }
+  }
+}