chore: configure next.js with storybook, tailwind css & typescript

.czrc

+{
+  "path": "cz-conventional-changelog"
+}

.dockerignore

+/node_modules
+/build
+/.git
+/.next
+README.md
+Dockerfile
+*.log
+*.log*
+.vscode
+.DS_Store
+.gitignore
+.editorconfig
+.env
+.env.local
+.gitlab-ci.yml
+.eslintrc.js

.editorconfig

+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
\ No newline at end of file

.env.sample

+NEXT_PUBLIC_API_URL=http://localhost/api

.eslintrc.json

+{
+  "extends": [
+    "next/core-web-vitals",
+    "plugin:storybook/recommended"
+  ]
+}

.gitignore

+# 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
+*.pem
+
+# debug
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+# yarn
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.huskyrc

+{
+  "hooks": {
+    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS --extends @commitlint/config-conventional",
+    "pre-commit": "pretty-quick --staged"
+  }
+}

.prettierrc

+{
+  "jsxBracketSameLine": true,
+  "singleQuote": true,
+  "jsxSingleQuote": false,
+  "trailingComma": "none"
+}

.storybook/main.ts

+import type { StorybookConfig } from '@storybook/nextjs';
+import path from 'path';
+
+const config: StorybookConfig = {
+  stories: ['../components/**/*.stories.@(ts|tsx|js|jsx|mdx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions'
+  ],
+  webpackFinal: async (config) => {
+    if (config.resolve) {
+      config.resolve.alias = {
+        ...config.resolve.alias,
+        '@': path.resolve(__dirname, '../')
+      };
+    }
+    return config;
+  },
+  framework: {
+    name: '@storybook/nextjs',
+    options: {}
+  },
+  docs: {
+    autodocs: 'tag'
+  }
+};
+export default config;

.storybook/preview.ts

+import '@/styles/globals.css';
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i
+      }
+    }
+  }
+};
+
+export default preview;

.yarnrc.yml

+nodeLinker: node-modules

README.md

+# Nextjs Starter Template
+
+## Tools Configured
+
+- Next.js
+- React Storybook
+- Typescript
+- Tailwind CSS
+- yarn 4
+- Commitizen
+- Editorconfig
+- Eslint
+- Prettier
+- Husky (to lint commit messages)
+
+## Important Notes
+
+- Install Yarn using `corepack enable`
+- Set yarn version to latest using `yarn set version stable`
+- Install dependencies using `yarn install`
+- Install commitizen globally `npm install -g commitizen`
+- Then, use `git cz` or `cz` to commit changes
+- Commit messages must follow [angular conventional commit
+  standards](https://github.com/conventional-changelog/commitlint)
+- Install prettier extension in editor. Enable "Format on save" option.
+- Install editorconfig extension in editor.
+- All files will be formatted using prettier before commit
+
+### Development Server
+
+```bash
+yarn dev
+```
+
+### Build Task
+
+```bash
+yarn build
+```
+
+### Production Server
+
+```bash
+yarn start
+```
+
+### Run Storybook
+
+```bash
+yarn storybook
+```
+
+### Build Static Storybook
+
+```bash
+yarn build-storybook
+```

app/another/page.tsx

+import Button from '@/components/button';
+
+const AnotherPage = () => {
+  return (
+    <div className="container m-auto">
+      <center className="p-10">
+        <h3 className="text-3xl text-gray-600 font-semibold mb-5 px-5">
+          You&lsquo;ve landed on another page
+        </h3>
+        <Button href="/" size="lg">
+          Navigate home page
+        </Button>
+      </center>
+    </div>
+  );
+};
+
+export default AnotherPage;

app/layout.tsx

+import '@/styles/globals.css';
+
+interface LayoutProps {
+  children: React.ReactNode;
+}
+
+export default function RootLayout({ children }: LayoutProps) {
+  return (
+    <html>
+      <head>
+        <meta content="width=device-width, initial-scale=1" name="viewport" />
+        <link rel="icon" href="/favicon.ico" />
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}

app/not-found.tsx

+import PageNotFound from '@/components/layout/page-not-found';
+
+export default PageNotFound;

app/page.tsx

+import Button from '@/components/button';
+import Image from 'next/image';
+
+const HomePage = () => {
+  return (
+    <center className="py-10">
+      <Image
+        src="/img/nextjs.svg"
+        alt="Next.js"
+        width={512}
+        height={103}
+        className="w-60 mb-4"
+      />
+      <h3 className="text-3xl text-gray-600 font-semibold mb-5 px-5">
+        Welcome to Next.js starter template
+      </h3>
+      <div className="bg-gray-100 p-5 mb-10">
+        <p className="mb-3 text-gray-400 font-semibold">
+          This template is built with
+        </p>
+        <div className="flex justify-center gap-5">
+          <Image
+            src="/img/tailwind.svg"
+            alt="Tailwind CSS"
+            width={512}
+            height={63}
+            className="w-40"
+          />
+          <Image
+            src="/img/typescript.svg"
+            alt="TypeScript"
+            width={284}
+            height={70}
+            className="w-24"
+          />
+        </div>
+      </div>
+      <Button href="/another" size="lg">
+        Navigate to another page
+      </Button>
+    </center>
+  );
+};
+
+export default HomePage;

components/base/typography.stories.tsx

+export default {
+  title: 'Basic/Typography'
+};
+
+export const TitleAndParagraph = () => (
+  <div className="container">
+    <div className="flex flex-col gap-4 mb-5">
+      <h1 className="text-6xl font-bold">Heading 1</h1>
+      <h2 className="text-5xl font-bold">Heading 2</h2>
+      <h3 className="text-4xl font-bold">Heading 3</h3>
+      <h4 className="text-3xl font-bold">Heading 4</h4>
+      <h5 className="text-2xl font-bold">Heading 5</h5>
+      <h6 className="text-xl font-bold">Heading 6</h6>
+    </div>
+    <p>
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo et quae
+      consequuntur voluptatum quibusdam, autem velit quidem laborum, dignissimos
+      doloremque ullam eos fugit repellendus maiores eveniet repellat dolor eius
+      perspiciatis? Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+    </p>
+    <p>
+      Quasi aliquam impedit magnam tempora doloribus voluptatibus, at ea dolores
+      facilis et quod hic, cumque repellendus quidem expedita explicabo
+      architecto, possimus minima!
+    </p>
+  </div>
+);

components/button/button.stories.tsx

+import React from 'react';
+import Button from './';
+
+export default {
+  title: 'Basic/Button',
+  component: Button
+};
+
+interface TemplateProps {
+  variant: 'primary' | 'secondary' | 'link';
+}
+
+const Template = ({ variant }: TemplateProps) => {
+  return (
+    <div>
+      <h6 className="mb-2 font-semibold">Size</h6>
+      <div className="flex gap-5 mb-4">
+        <Button variant={variant} size="sm">
+          Small button
+        </Button>
+        <Button variant={variant}>Medium button</Button>
+        <Button variant={variant} size="lg">
+          Large button
+        </Button>
+        <Button variant={variant} href="/" size="sm">
+          Small Anchor
+        </Button>
+        <Button variant={variant} href="/">
+          Medium Anchor
+        </Button>
+        <Button variant={variant} href="/" size="lg">
+          Large Anchor
+        </Button>
+      </div>
+      <h6 className="mb-2 font-semibold">Loading</h6>
+      <div className="flex gap-5 mb-4">
+        <Button variant={variant} size="sm" loading>
+          Small button
+        </Button>
+        <Button variant={variant} loading>
+          Medium button
+        </Button>
+        <Button variant={variant} size="lg" loading>
+          Large button
+        </Button>
+        <Button variant={variant} href="/" size="sm" loading>
+          Small Anchor
+        </Button>
+        <Button variant={variant} href="/" loading>
+          Medium Anchor
+        </Button>
+        <Button variant={variant} href="/" size="lg" loading>
+          Large Anchor
+        </Button>
+      </div>
+      <h6 className="mb-2 font-semibold">Disabled</h6>
+      <div className="flex gap-5 mb-4">
+        <Button variant={variant} size="sm" disabled>
+          Small button
+        </Button>
+        <Button variant={variant} disabled>
+          Medium button
+        </Button>
+        <Button variant={variant} size="lg" disabled>
+          Large button
+        </Button>
+      </div>
+      <h6 className="mb-2 font-semibold">Disabled & Loading</h6>
+      <div className="flex gap-5 mb-4">
+        <Button variant={variant} size="sm" loading disabled>
+          Small button
+        </Button>
+        <Button variant={variant} loading disabled>
+          Medium button
+        </Button>
+        <Button variant={variant} size="lg" loading disabled>
+          Large button
+        </Button>
+      </div>
+      <h6 className="mb-2 font-semibold">Multiline</h6>
+      <div className="flex gap-5 mb-4">
+        <Button variant={variant} size="sm">
+          Lorem ipsum dolor sit <br /> amet consectetur adipisicing elit. <br />{' '}
+          Quas exercitationem unde voluptate iure dolore laudantium.
+        </Button>
+        <Button variant={variant}>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. <br /> Quas
+          exercitationem unde voluptate iure dolore laudantium.
+        </Button>
+        <Button variant={variant} size="lg">
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. <br /> Quas
+          exercitationem unde voluptate iure dolore laudantium.
+        </Button>
+      </div>
+      <br />
+      <div className="flex gap-5 mb-4">
+        <Button variant={variant} size="sm" loading>
+          Lorem ipsum dolor sit <br /> amet consectetur adipisicing elit. <br />{' '}
+          Quas exercitationem unde voluptate iure dolore laudantium.
+        </Button>
+        <Button variant={variant} loading>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. <br /> Quas
+          exercitationem unde voluptate iure dolore laudantium.
+        </Button>
+        <Button variant={variant} size="lg" loading>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. <br /> Quas
+          exercitationem unde voluptate iure dolore laudantium.
+        </Button>
+      </div>
+      <h6 className="mb-2 font-semibold">Block</h6>
+      <div className="flex flex-col gap-5">
+        <Button variant={variant} size="sm" block>
+          Small button
+        </Button>
+        <Button variant={variant} block>
+          Medium button
+        </Button>
+        <Button variant={variant} size="lg" block>
+          Large button
+        </Button>
+        <Button variant={variant} size="sm" block loading>
+          Small button
+        </Button>
+        <Button variant={variant} block loading>
+          Medium button
+        </Button>
+        <Button variant={variant} size="lg" block loading>
+          Large button
+        </Button>
+        <Button variant={variant} size="sm" block loading disabled>
+          Small button
+        </Button>
+        <Button variant={variant} block loading disabled>
+          Medium button
+        </Button>
+        <Button variant={variant} size="lg" block loading disabled>
+          Small button
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export const Primary = {
+  render: () => <Template variant="primary" />
+};
+export const Secondary = {
+  render: () => <Template variant="secondary" />
+};
+export const Link = {
+  render: () => <Template variant="link" />
+};

components/button/index.tsx

+import cn from 'classnames';
+import Link from 'next/link';
+
+interface ButtonProps extends React.HTMLAttributes<HTMLElement> {
+  variant?: 'default' | 'primary' | 'secondary' | 'link';
+  size?: 'sm' | 'md' | 'lg';
+  block?: boolean;
+  loading?: boolean;
+  disabled?: boolean;
+  href?: string;
+  children: React.ReactNode;
+}
+
+export default function Button({
+  variant = 'primary',
+  size = 'md',
+  block = false,
+  loading = false,
+  disabled = false,
+  href,
+  children,
+  ...rest
+}: ButtonProps) {
+  const classNames = cn('inline-flex items-center transition-colors', {
+    'px-4 py-2': variant !== 'link',
+    'text-light': variant !== 'link',
+    'font-semibold': variant !== 'link',
+    /** backgrounds */
+    'bg-gray-200': disabled && variant !== 'link',
+    'bg-primary hover:bg-primary-light': !disabled && variant === 'primary',
+    'bg-secondary hover:bg-secondary-light':
+      !disabled && variant === 'secondary',
+    /** text */
+    'text-gray-400': disabled,
+    'text-sm': size === 'sm',
+    'text-base': size === 'md',
+    'text-lg': size === 'lg',
+    /** block */
+    'w-full justify-center': block
+  });
+
+  return typeof href === 'string' ? (
+    <Link href={href} className={classNames} {...rest}>
+      {children}
+      {loading && <Loader />}
+    </Link>
+  ) : (
+    <button disabled={disabled} className={classNames} {...rest}>
+      {children}
+      {loading && <Loader />}
+    </button>
+  );
+}
+
+function Loader() {
+  return (
+    <span className="rounded-full h-5 w-5 border-2 border-b-transparent border-current animate-spin ms-1" />
+  );
+}

components/layout/page-not-found/index.tsx

+import Image from 'next/image';
+import Button from '@/components/button';
+import FourOhFour from './img/404.png';
+
+export default function PageNotFound() {
+  return (
+    <div className="flex flex-col justify-center items-center">
+      <Image src={FourOhFour} alt="404, Page Not Found!" />
+      <Button href="/">Back to Home</Button>
+    </div>
+  );
+}

components/layout/page-not-found/page-not-found.stories.tsx

+import PageNotFoundComponent from './';
+
+export default {
+  title: 'Layout/PageNotFound',
+  component: PageNotFoundComponent,
+  parameters: {
+    layout: 'fullscreen'
+  }
+};
+
+export const PageNotFound = {};

components/layout/page-not-found/styles.module.scss

+@use '@styles/vars.scss';
+
+.notFound {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 10vh 1em;
+  box-sizing: border-box;
+  h2 {
+    font-size: 10em;
+    font-weight: 100;
+    line-height: 0.8;
+    margin: 0;
+    color: #1ea7fd;
+  }
+  a {
+    margin-top: 2em;
+  }
+}
+@include vars.mQuery(xl) {
+  .notFound {
+    font-size: 0.9em;
+  }
+}

next-env.d.ts

+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

+module.exports = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 's3-ap-southeast-1.amazonaws.com'
+      }
+    ],
+    imageSizes: [64, 128, 256, 576, 768, 992, 1200, 1600, 1920, 2048, 3840]
+  },
+  webpack: (config, { isServer }) => {
+    if (process.env.ANALYZE && !isServer) {
+      const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+      config.plugins.push(
+        new BundleAnalyzerPlugin({
+          analyzerMode: 'server',
+          analyzerPort: 8888,
+          openAnalyzer: true
+        })
+      );
+    }
+    return config;
+  },
+  async rewrites() {
+    return [
+      {
+        source: '/api/:path*',
+        destination: `${process.env.NEXT_PUBLIC_API_URL}/:path*`
+      }
+    ];
+  },
+  poweredByHeader: false,
+  compress: false
+};

package.json

+{
+  "name": "nextjs-starter-template",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "analyze": "cross-env ANALYZE=true next build"
+  },
+  "dependencies": {
+    "@types/node": "^20.11.0",
+    "@types/react": "^18.2.47",
+    "autoprefixer": "^10.4.16",
+    "classnames": "^2.5.1",
+    "css-loader": "^6.8.1",
+    "next": "^14.0.4",
+    "next-images": "^1.8.5",
+    "normalize.css": "^8.0.1",
+    "postcss": "^8.4.33",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sharp": "^0.33.1",
+    "style-loader": "^3.3.3",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.3.3"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^18.4.3",
+    "@commitlint/config-conventional": "^18.4.3",
+    "@storybook/addon-essentials": "^7.6.7",
+    "@storybook/addon-interactions": "7.6.7",
+    "@storybook/addon-links": "^7.6.7",
+    "@storybook/addon-onboarding": "1.0.10",
+    "@storybook/blocks": "7.6.7",
+    "@storybook/nextjs": "^7.6.7",
+    "@storybook/react": "7.6.7",
+    "@storybook/test": "7.6.7",
+    "@types/eslint": "^8",
+    "babel-loader": "^9.1.3",
+    "cross-env": "^7.0.3",
+    "cz-conventional-changelog": "^3.3.0",
+    "eslint": "^8.56.0",
+    "eslint-config-next": "^14.0.4",
+    "eslint-plugin-storybook": "^0.6.15",
+    "husky": "^8.0.3",
+    "prettier": "^3.1.1",
+    "pretty-quick": "^3.1.3",
+    "storybook": "^7.6.7",
+    "webpack-bundle-analyzer": "^4.10.1"
+  },
+  "packageManager": "yarn@4.0.2"
+}

postcss.config.js

+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

public/img/nextjs.svg

+<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512 103.22"><path d="M340.36.04h89.18V16.5h-35.38v86.6h-17.69V16.5h-36.11V.04zM503.8 70.86c-.19-1.82-1.03-3.25-2.49-4.27-1.48-1.03-3.38-1.54-5.72-1.54-1.64 0-3.05.25-4.23.74-1.17.49-2.08 1.15-2.71 1.99-.62.84-.93 1.8-.96 2.87 0 .9.22 1.68.64 2.33.42.66.98 1.22 1.71 1.67.72.46 1.52.83 2.4 1.14.89.31 1.77.57 2.66.78l4.09 1c1.64.38 3.23.89 4.76 1.54 1.52.64 2.9 1.45 4.11 2.43 1.21.98 2.17 2.16 2.87 3.54.71 1.39 1.07 3.01 1.07 4.87 0 2.52-.65 4.73-1.95 6.64-1.31 1.9-3.19 3.39-5.66 4.46-2.46 1.07-5.43 1.61-8.93 1.61-3.38 0-6.33-.52-8.81-1.56-2.49-1.03-4.44-2.54-5.84-4.52-1.4-1.99-2.15-4.41-2.26-7.26h7.76c.11 1.49.59 2.73 1.41 3.74.82.99 1.9 1.72 3.22 2.22 1.33.48 2.82.73 4.46.73 1.71 0 3.22-.26 4.53-.77 1.29-.51 2.31-1.21 3.04-2.14.75-.9 1.12-1.98 1.13-3.21-.01-1.12-.35-2.05-.99-2.79-.66-.73-1.57-1.34-2.74-1.84-1.17-.49-2.54-.94-4.1-1.33l-4.96-1.25c-3.58-.91-6.42-2.3-8.5-4.15-2.08-1.86-3.11-4.31-3.11-7.39 0-2.53.69-4.75 2.1-6.65 1.39-1.9 3.29-3.38 5.7-4.43 2.42-1.06 5.15-1.58 8.2-1.58 3.09 0 5.8.52 8.14 1.58 2.33 1.05 4.17 2.51 5.5 4.38s2.02 4 2.06 6.42h-7.6zm-40.09-11.8h7.84v30.19c-.01 2.78-.61 5.15-1.79 7.15-1.18 2-2.83 3.52-4.93 4.59-2.1 1.07-4.56 1.61-7.35 1.61-2.55 0-4.84-.46-6.88-1.36-2.04-.9-3.66-2.24-4.84-4.01-1.2-1.78-1.79-3.98-1.79-6.63h7.85c.01 1.16.28 2.16.78 3 .5.84 1.2 1.48 2.08 1.93.9.45 1.94.67 3.1.67 1.26 0 2.33-.26 3.21-.79.87-.52 1.55-1.3 2.01-2.34.46-1.03.7-2.3.71-3.82V59.06zm-30.19 43.41c-1.3 0-2.4-.45-3.32-1.35-.92-.89-1.38-1.98-1.37-3.27-.01-1.25.45-2.32 1.37-3.22.92-.9 2.02-1.35 3.32-1.35 1.25 0 2.34.45 3.26 1.35.93.9 1.4 1.97 1.41 3.22-.01.85-.22 1.63-.66 2.33-.44.71-1 1.26-1.71 1.67-.7.41-1.46.62-2.3.62zm-329-.14L22.11 0H0v103.06h17.69V22.03l65.22 81.07h110.78V86.64H122.2v-27.2h57.49V42.98H122.2V16.5h71.49V.04h-89.18V16.5h.01v85.83zM261.98 73.7l-11.6-14.42-35.37 43.94h23.21l23.76-29.52zM238.22.09h-23.15l82.92 103.05h23.21l-41.46-51.49L321.14.16 297.99.2l-29.84 37.06L238.22.09z"/></svg>

public/img/tailwind.svg

+<svg width="512" height="63.478" viewBox="0 0 512 63.478" xmlns="http://www.w3.org/2000/svg"><path d="M52.898 0C38.792 0 29.976 7.053 26.45 21.16c5.29-7.054 11.462-9.699 18.515-7.935 4.024 1.005 6.9 3.926 10.084 7.157 5.186 5.264 11.189 11.357 24.3 11.357 14.106 0 22.922-7.053 26.449-21.16-5.29 7.054-11.462 9.699-18.515 7.935-4.024-1.005-6.9-3.926-10.084-7.157C72.012 6.093 66.01 0 52.898 0zM26.45 31.739c-14.106 0-22.922 7.053-26.449 21.16 5.29-7.054 11.461-9.699 18.514-7.935 4.025 1.007 6.9 3.926 10.084 7.157 5.186 5.264 11.19 11.357 24.3 11.357 14.107 0 22.923-7.053 26.45-21.16-5.29 7.054-11.462 9.699-18.515 7.935-4.024-1.005-6.9-3.926-10.084-7.156-5.186-5.265-11.189-11.358-24.3-11.358z" fill="#38bdf8"/><path d="M158.687 26.747h-9.231v17.868c0 4.765 3.126 4.69 9.231 4.392v7.222c-12.358 1.489-17.272-1.936-17.272-11.614V26.747h-6.85v-7.743h6.85v-10l8.04-2.382v12.382h9.232zm35.192-7.743h8.04V56.23h-8.04v-5.36c-2.83 3.945-7.222 6.328-13.03 6.328-10.124 0-18.537-8.562-18.537-19.58 0-11.093 8.413-19.58 18.538-19.58 5.807 0 10.2 2.382 13.029 6.253zM182.115 49.53c6.7 0 11.764-4.989 11.764-11.912s-5.063-11.912-11.764-11.912-11.763 4.988-11.763 11.912 5.063 11.912 11.763 11.912zm33.205-36.11c-2.83 0-5.137-2.383-5.137-5.138a5.147 5.147 0 0 1 5.137-5.137 5.147 5.147 0 0 1 5.137 5.137c0 2.755-2.308 5.138-5.137 5.138zm-4.02 42.808V19.004h8.04V56.23zm17.346 0V1.881h8.041v54.348zm60.23-37.225h8.487L285.675 56.23h-7.892l-7.743-25.09-7.817 25.09h-7.891l-11.689-37.225h8.487l7.222 25.685 7.817-25.685h7.668l7.743 25.685zm18.464-5.583c-2.83 0-5.137-2.383-5.137-5.138a5.147 5.147 0 0 1 5.137-5.137 5.147 5.147 0 0 1 5.137 5.137c0 2.755-2.308 5.138-5.137 5.138zm-4.02 42.808V19.004h8.04V56.23zm36.926-38.193c8.339 0 14.295 5.659 14.295 15.337v22.856h-8.04V34.192c0-5.658-3.277-8.636-8.34-8.636-5.285 0-9.454 3.127-9.454 10.72V56.23h-8.04V19.004h8.04v4.765c2.457-3.871 6.477-5.733 11.54-5.733zM392.66 4.114h8.04V56.23h-8.04v-5.36c-2.83 3.945-7.222 6.328-13.029 6.328-10.125 0-18.538-8.562-18.538-19.58 0-11.093 8.413-19.58 18.538-19.58 5.807 0 10.2 2.382 13.029 6.253zM380.896 49.53c6.7 0 11.763-4.989 11.763-11.912s-5.063-11.912-11.763-11.912-11.763 4.988-11.763 11.912 5.062 11.912 11.763 11.912zm46.754 7.668c-11.242 0-19.654-8.562-19.654-19.58 0-11.093 8.412-19.58 19.654-19.58 7.296 0 13.625 3.796 16.603 9.603l-6.924 4.02c-1.638-3.498-5.286-5.732-9.753-5.732-6.552 0-11.54 4.988-11.54 11.689s4.988 11.688 11.54 11.688c4.467 0 8.115-2.308 9.902-5.732l6.923 3.945c-3.126 5.882-9.455 9.679-16.75 9.679zm30.003-27.919c0 6.775 20.027 2.68 20.027 16.454 0 7.445-6.477 11.465-14.517 11.465-7.445 0-12.806-3.35-15.188-8.71l6.924-4.021c1.191 3.35 4.169 5.36 8.264 5.36 3.573 0 6.328-1.19 6.328-4.169 0-6.626-20.027-2.903-20.027-16.23 0-6.998 6.03-11.39 13.624-11.39 6.105 0 11.168 2.828 13.773 7.742l-6.774 3.797c-1.34-2.903-3.946-4.244-6.999-4.244-2.903 0-5.435 1.266-5.435 3.946zm34.322 0c0 6.775 20.027 2.68 20.027 16.454 0 7.445-6.477 11.465-14.518 11.465-7.445 0-12.805-3.35-15.188-8.71l6.924-4.021c1.191 3.35 4.17 5.36 8.264 5.36 3.574 0 6.328-1.19 6.328-4.169 0-6.626-20.027-2.903-20.027-16.23 0-6.998 6.03-11.39 13.625-11.39 6.104 0 11.167 2.828 13.773 7.742l-6.775 3.797c-1.34-2.903-3.946-4.244-6.998-4.244-2.904 0-5.435 1.266-5.435 3.946z" fill="#0f172a"/></svg>

public/img/typescript.svg

+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="logo-typescript" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 283.09 69.57">
+  <g fill="#007ACC">
+    <path d="M34.98 7.56H20.43v45.07h-5.91V7.56H0V2.21h34.98V7.56z"/>
+    <path d="M57.94 16.63L41.38 58.39c-2.95 7.45-7.1 11.18-12.45 11.18 -1.5 0-2.75-0.15-3.76-0.46v-5.17c1.24 0.42 2.38 0.63 3.41 0.63 2.91 0 5.09-1.73 6.54-5.2l2.88-6.82L23.94 16.63h6.4l9.74 27.7c0.12 0.35 0.36 1.27 0.74 2.74h0.21c0.12-0.56 0.35-1.45 0.7-2.67l10.23-27.77H57.94z"/>
+    <path d="M67.37 47.43h-0.14v21.76h-5.77V16.63h5.77v6.33h0.14c2.84-4.78 6.98-7.17 12.45-7.17 4.64 0 8.26 1.61 10.86 4.83 2.6 3.22 3.9 7.54 3.9 12.96 0 6.02-1.46 10.85-4.39 14.47 -2.93 3.62-6.94 5.43-12.02 5.43C73.5 53.47 69.9 51.46 67.37 47.43zM67.23 32.91v5.03c0 2.98 0.97 5.5 2.9 7.58s4.39 3.11 7.37 3.11c3.49 0 6.23-1.34 8.21-4.01 1.98-2.67 2.97-6.39 2.97-11.14 0-4.01-0.93-7.15-2.78-9.42 -1.85-2.27-4.36-3.41-7.52-3.41 -3.35 0-6.05 1.17-8.09 3.5C68.25 26.47 67.23 29.39 67.23 32.91z"/>
+    <path d="M129.56 36.07h-25.42c0.09 4.01 1.17 7.1 3.23 9.28 2.06 2.18 4.9 3.27 8.51 3.27 4.05 0 7.78-1.34 11.18-4.01v5.41c-3.16 2.3-7.35 3.45-12.55 3.45 -5.09 0-9.08-1.63-11.99-4.9 -2.91-3.27-4.36-7.87-4.36-13.8 0-5.6 1.59-10.17 4.76-13.69 3.18-3.53 7.12-5.29 11.83-5.29s8.35 1.52 10.93 4.57c2.58 3.05 3.87 7.28 3.87 12.69V36.07zM123.65 31.18c-0.02-3.33-0.83-5.92-2.41-7.77 -1.58-1.85-3.78-2.78-6.59-2.78 -2.72 0-5.03 0.97-6.93 2.92 -1.9 1.95-3.07 4.49-3.52 7.63H123.65z"/>
+    <path d="M134.6 50.59v-6.96c0.73 0.7 1.6 1.34 2.62 1.9 1.02 0.56 2.09 1.04 3.22 1.42s2.26 0.69 3.39 0.9c1.14 0.21 2.19 0.32 3.15 0.32 3.32 0 5.81-0.67 7.45-2.02 1.64-1.35 2.46-3.29 2.46-5.82 0-1.36-0.27-2.54-0.82-3.55 -0.55-1.01-1.3-1.93-2.27-2.76s-2.11-1.63-3.43-2.39c-1.32-0.76-2.74-1.56-4.26-2.41 -1.61-0.89-3.11-1.79-4.5-2.71 -1.39-0.91-2.61-1.92-3.63-3.02 -1.03-1.1-1.84-2.35-2.43-3.74 -0.59-1.39-0.88-3.03-0.88-4.9 0-2.3 0.46-4.29 1.38-5.99 0.92-1.7 2.13-3.1 3.64-4.2 1.5-1.1 3.21-1.92 5.13-2.46 1.92-0.54 3.88-0.81 5.87-0.81 4.55 0 7.86 0.6 9.94 1.79v6.64c-2.72-2.06-6.22-3.09-10.49-3.09 -1.18 0-2.36 0.14-3.54 0.4 -1.18 0.27-2.23 0.71-3.15 1.32 -0.92 0.61-1.67 1.39-2.25 2.36 -0.58 0.96-0.87 2.13-0.87 3.52 0 1.29 0.22 2.4 0.66 3.34 0.44 0.94 1.09 1.79 1.95 2.57 0.86 0.77 1.9 1.52 3.14 2.25 1.23 0.73 2.65 1.52 4.26 2.39 1.65 0.89 3.22 1.83 4.7 2.81s2.78 2.07 3.89 3.27c1.11 1.2 2 2.52 2.65 3.97 0.65 1.45 0.98 3.12 0.98 4.99 0 2.48-0.45 4.59-1.33 6.31 -0.89 1.72-2.09 3.12-3.6 4.2 -1.51 1.08-3.25 1.86-5.23 2.34 -1.97 0.48-4.05 0.72-6.24 0.72 -0.73 0-1.63-0.06-2.7-0.19s-2.17-0.32-3.28-0.56c-1.12-0.25-2.17-0.55-3.17-0.91C136 51.44 135.21 51.03 134.6 50.59z"/>
+    <path d="M193.25 50.98c-2.77 1.66-6.05 2.5-9.84 2.5 -5.13 0-9.28-1.67-12.43-5.01s-4.73-7.67-4.73-12.99c0-5.93 1.7-10.69 5.1-14.29 3.4-3.6 7.93-5.4 13.61-5.4 3.16 0 5.95 0.59 8.37 1.76v5.91c-2.67-1.88-5.53-2.81-8.58-2.81 -3.68 0-6.7 1.32-9.05 3.96s-3.53 6.1-3.53 10.39c0 4.22 1.11 7.55 3.32 9.98s5.19 3.66 8.91 3.66c3.14 0 6.09-1.04 8.86-3.13V50.98z"/>
+    <path d="M215.56 22.46c-1.01-0.77-2.46-1.16-4.36-1.16 -2.46 0-4.52 1.16-6.17 3.48s-2.48 5.48-2.48 9.49v18.35h-5.77v-36h5.77v7.42h0.14c0.82-2.53 2.07-4.51 3.76-5.92 1.69-1.42 3.57-2.13 5.66-2.13 1.5 0 2.65 0.16 3.45 0.49V22.46z"/>
+    <path d="M222.18 7.49c-1.03 0-1.91-0.35-2.64-1.05s-1.09-1.59-1.09-2.67c0-1.08 0.36-1.97 1.09-2.69 0.73-0.71 1.61-1.07 2.64-1.07 1.05 0 1.95 0.36 2.69 1.07 0.74 0.72 1.11 1.61 1.11 2.69 0 1.03-0.37 1.91-1.11 2.64C224.13 7.12 223.23 7.49 222.18 7.49zM224.99 52.63h-5.77v-36h5.77V52.63z"/>
+    <path d="M234.29 47.43h-0.14v21.76h-5.77V16.63h5.77v6.33h0.14c2.84-4.78 6.98-7.17 12.45-7.17 4.64 0 8.26 1.61 10.86 4.83 2.6 3.22 3.9 7.54 3.9 12.96 0 6.02-1.46 10.85-4.39 14.47s-6.94 5.43-12.02 5.43C240.42 53.47 236.82 51.46 234.29 47.43zM234.15 32.91v5.03c0 2.98 0.97 5.5 2.9 7.58s4.39 3.11 7.37 3.11c3.49 0 6.23-1.34 8.21-4.01s2.97-6.39 2.97-11.14c0-4.01-0.93-7.15-2.78-9.42 -1.85-2.27-4.36-3.41-7.52-3.41 -3.35 0-6.05 1.17-8.09 3.5C235.17 26.47 234.15 29.39 234.15 32.91z"/>
+    <path d="M283.09 52.28c-1.36 0.75-3.15 1.12-5.38 1.12 -6.3 0-9.46-3.52-9.46-10.55v-21.3h-6.19v-4.92h6.19V7.84l5.77-1.86v10.65h9.07v4.92h-9.07v20.28c0 2.41 0.41 4.14 1.23 5.17s2.18 1.55 4.08 1.55c1.45 0 2.71-0.4 3.76-1.2V52.28z"/>
+  </g>
+</svg>

styles/globals.css

+@tailwind base;
+@tailwind components;
+@tailwind utilities;

tailwind.config.ts

+import type { Config } from 'tailwindcss';
+import colors from 'tailwindcss/colors';
+
+const config: Config = {
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+    './app/**/*.{js,ts,jsx,tsx,mdx}'
+  ],
+  theme: {
+    colors: {
+      ...colors,
+      primary: {
+        DEFAULT: 'hsl(340, 76%, 47%)',
+        light: 'hsl(340, 76%, 57%)',
+        dark: 'hsl(340, 76%, 37%)'
+      },
+      secondary: {
+        DEFAULT: 'hsl(205, 76%, 47%)',
+        light: 'hsl(205, 76%, 57%)',
+        dark: 'hsl(205, 76%, 37%)'
+      },
+      light: '#f4f4f4',
+      dark: '#222222'
+    },
+    extend: {
+      backgroundImage: {
+        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+        'gradient-conic':
+          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))'
+      }
+    }
+  },
+  plugins: []
+};
+export default config;

tsconfig.json

+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}