Landing Page Demo with Bootstrap

.storybook/webpack.config.js

@@ -10,20 +10,8 @@ module.exports = ({ config }) => {
   })
 
   config.module.rules.push({
-    test: /\.css$/,
-    use: [
-      {
-        loader: 'postcss-loader',
-        options: {
-          ident: 'postcss',
-          plugins: [
-            require('postcss-import'),
-            require('tailwindcss'),
-            require('autoprefixer')
-          ]
-        }
-      }
-    ],
+    test: /\.scss$/,
+    use: ['style-loader', 'css-loader', 'sass-loader'],
     include: path.resolve(__dirname, '../')
   })
 

components/Button.tsx

@@ -5,9 +5,7 @@ type Props = {
 }
 
 const Button = ({ text }: Props) => (
-  <button className="bg-blue-500 hover: bg-blue-700 text-white font-bold py-2 px-4 rounded ml-4 mt-4">
-    {text}
-  </button>
+  <button className="btn btn-primary">{text}</button>
 )
 
 export default Button

components/LandingNav.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react'
+import '../scss/navbar.scss'
+
+const LandingNav = () => {
+  return (
+    <nav className="navbar navbar-expand-lg navbar-light justify-content-between">
+      <a className="navbar-brand text-primary" href="#">
+        C0D3
+      </a>
+      <div className="" id="navbarNav">
+        <div className="navbar-nav collapse navbar-collapse">
+          <a className="nav-item nav-link active" href="#">
+            Home <span className="sr-only">(current)</span>
+          </a>
+          <a className="nav-item nav-link" href="#">
+            Why Us?
+          </a>
+          <a className="nav-item nav-link" href="#">
+            Journey
+          </a>
+          <a className="nav-item nav-link" href="#">
+            Contact Us
+          </a>
+        </div>
+      </div>
+      <div>
+        <button className="btn border mr-3">Login</button>
+        <button className="btn btn-primary">Join Waitlist</button>
+      </div>
+    </nav>
+  )
+}
+
+export default LandingNav

next.config.js

@@ -1,2 +1,2 @@
-const withCSS = require('@zeit/next-css')
-module.exports = withCSS({})
+const withSass = require('@zeit/next-sass')
+module.exports = withSass({})

package.json

@@ -12,9 +12,12 @@
     "type-check": "tsc"
   },
   "dependencies": {
-    "@zeit/next-css": "^1.0.1",
+    "@zeit/next-sass": "^1.0.1",
+    "bootstrap": "^4.4.1",
+    "identity-obj-proxy": "^3.0.0",
     "isomorphic-unfetch": "3.0.0",
     "next": "latest",
+    "node-sass": "^4.13.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0"
   },
@@ -30,7 +33,6 @@
     "@types/styled-jsx": "^2.2.8",
     "@typescript-eslint/eslint-plugin": "^2.17.0",
     "@typescript-eslint/parser": "^2.17.0",
-    "autoprefixer": "^9.7.4",
     "babel-jest": "^25.1.0",
     "babel-loader": "^8.0.6",
     "babel-preset-react-app": "^9.1.0",
@@ -39,12 +41,14 @@
     "eslint-plugin-prettier": "^3.1.2",
     "eslint-plugin-react": "^7.18.0",
     "jest": "^25.1.0",
-    "postcss-import": "^12.0.1",
-    "postcss-preset-env": "^6.7.0",
     "prettier": "^1.19.1",
     "react-test-renderer": "^16.12.0",
-    "tailwindcss": "^1.1.4",
     "typescript": "3.7.3"
   },
-  "license": "ISC"
+  "license": "ISC",
+  "jest": {
+    "moduleNameMapper": {
+      "\\.(css|scss)$": "identity-obj-proxy"
+    }
+  }
 }

pages/_app.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { AppProps } from 'next/app'
-import '../styles/tailwind.css'
+import '../scss/index.scss'
 
 function MyApp({ Component, pageProps }: AppProps) {
   return <Component {...pageProps} />

pages/index.tsx

@@ -1,7 +1,12 @@
 import * as React from 'react'
+import LandingNav from '../components/LandingNav'
 
 const IndexPage: React.FC = () => {
-  return <h1 className="text-purple-400">Under Construction</h1>
+  return (
+    <div>
+      <LandingNav />
+    </div>
+  )
 }
 
 export default IndexPage

scss/index.scss

@@ -0,0 +1,9 @@
+// Override default variables before the import
+$body-bg: #fff;
+
+$theme-colors: (
+  "primary": rgb(84,64,216)
+);
+
+// Import Bootstrap and its default variables
+@import '~bootstrap/scss/bootstrap.scss';

scss/navbar.scss

@@ -0,0 +1,4 @@
+.navbar-brand {
+  font-family: 'PT Mono', sans-serif;
+  font-size: 30px;
+}

stories/Button.stories.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { storiesOf } from '@storybook/react'
 import Button from '../components/Button'
-import '../styles/tailwind.css'
+import '../scss/index.scss'
 
 storiesOf('Button', module).add('with text', () => {
   return <Button text="Click Me" />