feat: implement Hero draft

src/components/Button/Button.tsx

@@ -0,0 +1,38 @@
+import styled from '@emotion/styled'
+import React from 'react'
+
+interface ButtonProps {
+  color?: 'black' | 'white'
+  fontSize?: string
+  padding?: string
+  children?: React.ReactNode
+}
+
+const StyledButton = styled.button<ButtonProps>`
+  background-color: ${(props) => (props.color === 'black' ? 'black' : 'white')};
+  color: ${(props) => (props.color === 'black' ? 'white' : 'black')};
+  font-size: ${(props) => props.fontSize || '14px'};
+  padding: ${(props) => props.padding || '10px 40px'};
+  border: 1px solid black;
+  cursor: pointer;
+  transition: 0.3s;
+
+  &:hover {
+    opacity: 0.8;
+  }
+`
+
+const Button: React.FC<ButtonProps> = ({
+  color,
+  fontSize,
+  padding,
+  children,
+}) => {
+  return (
+    <StyledButton color={color} fontSize={fontSize} padding={padding}>
+      {children}
+    </StyledButton>
+  )
+}
+
+export default Button

src/components/Button/index.ts

@@ -0,0 +1 @@
+export { default as Button } from './Button'

src/components/Hero/Hero.tsx

@@ -0,0 +1,24 @@
+import styled from '@emotion/styled'
+
+type Props = React.DetailedHTMLProps<
+  React.HTMLAttributes<HTMLDivElement>,
+  HTMLDivElement
+>
+
+export const Hero: React.FC = ({ children, ...props }: Props) => {
+  return <Container {...props}>{children}</Container>
+}
+
+const Container = styled.div`
+  h1 {
+    text-transform: uppercase;
+  }
+
+  h3 {
+    margin-bottom: 32px;
+  }
+
+  padding-bottom: 234px;
+`
+
+export default Hero

src/components/Hero/index.ts

@@ -0,0 +1 @@
+export { default as Hero } from './Hero'

src/components/Portfolio/Portfolio.tsx

@@ -0,0 +1,16 @@
+import styled from '@emotion/styled'
+
+type Props = React.DetailedHTMLProps<
+  React.HTMLAttributes<HTMLDivElement>,
+  HTMLDivElement
+>
+
+export const Portfolio: React.FC = ({ children, ...props }: Props) => {
+  return <Container {...props}>{children}</Container>
+}
+
+const Container = styled.div`
+  border-top: 1px solid rgba(0, 0, 0, 0.28);
+`
+
+export default Portfolio

src/components/Portfolio/index.ts

@@ -0,0 +1 @@
+export { default as Portfolio } from './Portfolio'

src/components/Tags/Tags.tsx

@@ -0,0 +1,40 @@
+import styled from '@emotion/styled'
+
+export type TagsProps = React.ComponentProps<typeof TagsContainer> & {
+  tags: string[]
+}
+
+const Tags: React.FC<TagsProps> = ({ tags, className, ...props }) => {
+  return tags?.length > 0 ? (
+    <TagsContainer className={className} {...props}>
+      {tags.map((tag, idx) => (
+        <Tag key={idx}>{tag}</Tag>
+      ))}
+    </TagsContainer>
+  ) : null
+}
+
+const TagsContainer = styled.div`
+  display: flex;
+  padding: 16px 0px;
+  align-items: flex-start;
+  gap: 16px;
+  align-self: stretch;
+  border-top: 1px solid rgba(0, 0, 0, 0.28);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.28);
+  margin-block: 16px;
+`
+
+const Tag = styled.div`
+  display: flex;
+  padding: 4px 12px;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+  font-size: 14px;
+  border-radius: 99px;
+  border: 1px solid #000;
+  background: #fff;
+`
+
+export default Tags

src/components/Tags/index.tsx

@@ -0,0 +1 @@
+export { default as Tags } from './Tags'

src/configs/ui.configs.ts

@@ -0,0 +1,5 @@
+export const uiConfigs = {
+  navbarRenderedHeight: 45,
+  maxContainerWidth: 1440,
+  articleRenderedMT: 45 * 2,
+}

src/containers/HomePage/HomePage.tsx

@@ -6,10 +6,11 @@ export type HomePageProps = React.DetailedHTMLProps<
   HTMLDivElement
 >
 
-export const HomePage: React.FC<HomePageProps> = ({ ...props }) => {
-  return <Root {...props}>IFT</Root>
+export const HomePage: React.FC<HomePageProps> = ({ children, ...props }) => {
+  return <Root {...props}>{children}</Root>
 }
 
 const Root = styled.div`
   width: 100%;
+  padding: 16px;
 `

src/pages/_app.tsx

@@ -0,0 +1,103 @@
+import { uiConfigs } from '@/configs/ui.configs'
+import { DefaultLayout } from '@/layouts/DefaultLayout'
+import { css, Global } from '@emotion/react'
+import { NextComponentType, NextPageContext } from 'next'
+import type { AppProps } from 'next/app'
+import Head from 'next/head'
+import { ReactNode } from 'react'
+
+type NextLayoutComponentType<P = {}> = NextComponentType<
+  NextPageContext,
+  any,
+  P
+> & {
+  getLayout?: (page: ReactNode) => ReactNode
+}
+
+type AppLayoutProps<P = {}> = AppProps & {
+  Component: NextLayoutComponentType
+}
+
+export default function App({ Component, pageProps }: AppLayoutProps) {
+  const getLayout =
+    Component.getLayout ||
+    ((page: ReactNode) => <DefaultLayout>{page}</DefaultLayout>)
+
+  return (
+    <>
+      <Head>
+        <title>IFT</title>
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
+        />
+      </Head>
+      <Global
+        styles={css`
+          @font-face {
+            font-family: 'Helvetica';
+            src: local('fonts/Helvetica.ttf') format('ttf');
+          }
+
+          html,
+          body {
+            background: white;
+            color: black;
+            margin: 0;
+            width: 100%;
+            height: 100%;
+            font-family: 'Helvetica';
+
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+          }
+
+          #__next {
+            max-width: ${uiConfigs.maxContainerWidth}px;
+            margin-left: auto;
+            margin-right: auto;
+          }
+
+          a,
+          a:visited,
+          a:hover,
+          a:active,
+          a:focus {
+            color: black;
+          }
+
+          h1,
+          h2,
+          h3,
+          h4,
+          h5,
+          h6,
+          p {
+            margin: 0;
+            padding: 0;
+            word-break: keep-all;
+          }
+
+          h1 {
+            font-size: 112px;
+            font-weight: 400;
+            line-height: 116px;
+          }
+
+          h2 {
+            font-size: 52px;
+            font-weight: 400;
+            line-height: 130%;
+          }
+
+          h3 {
+            font-size: 36px;
+            font-weight: 400;
+            line-height: normal;
+          }
+        `}
+      />
+      {getLayout(<Component {...pageProps} />)}
+    </>
+  )
+}

src/pages/_document.tsx

@@ -0,0 +1,14 @@
+import { Head, Html, Main, NextScript } from 'next/document'
+
+export default function Document() {
+  return (
+    <Html lang="en" data-theme="light">
+      <Head></Head>
+
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}

src/pages/index.mdx

@@ -0,0 +1,22 @@
+import { SEO } from '@/components/SEO'
+import { Tags } from '@/components/Tags'
+import { HomePage } from '@/containers/Homepage'
+import { Button } from '@/components/Button'
+import { Hero } from '@/components/Hero'
+import { Portfolio } from '@/components/Portfolio'
+
+<SEO />
+
+<HomePage>
+<Hero>
+    # Institute of Free <br /> Technology
+
+    <Tags tags={['Mission', 'Program details', 'Contact']} />
+
+    ### We enable entrepreneurship. Building and investing in great technology companies globally and providing a unique blend of operational support and capital.
+    <Button color="black">Explore our Ecosystem</Button>
+
+</Hero>
+
+<Portfolio></Portfolio>
+</HomePage>

src/pages/test.mdx

@@ -1,11 +0,0 @@
-# Welcome to my MDX page!
- 
-This is some **bold** and _italics_ text.
- 
-This is a list in markdown:
- 
-- One
-- Two
-- Three
- 
-Checkout my React component:

src/pages/test.tsx

@@ -1,6 +1,7 @@
+import { SEO } from '@/components/SEO'
+import { HomePage } from '@/containers/HomePage'
 import { MDXRemote, MDXRemoteSerializeResult } from 'next-mdx-remote'
 import { serialize } from 'next-mdx-remote/serialize'
-import SEO from '../components/SEO/SEO'
 import { DefaultLayout } from '../layouts/DefaultLayout'
 
 interface Props {
@@ -11,6 +12,7 @@ const Page = ({ mdxSource }: Props) => {
   return (
     <>
       <SEO />
+      <HomePage />
       <MDXRemote {...mdxSource} />
     </>
   )