[ch68] Resolve conflicts after rebase

src/components/HomeSearchSection/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { useRouter } from 'next/router'
+
+const HomeSearchSection = () => {
+  const router = useRouter()
+
+  const onButtonClick = () => {
+    router.push('product-list')
+  }
+  return (
+    <section className="home-section">
+      <header className="home-section__header">
+        <h2 className="home-section__title">Sample 1</h2>
+        <p className="home-section__description">
+          This is a sample description
+        </p>
+      </header>
+      <div className="home-search">
+        <button className="home-search__button" onClick={onButtonClick}>
+          Search
+        </button>
+      </div>
+    </section>
+  )
+}
+export default HomeSearchSection

src/components/HomeSection/index.tsx

@@ -1,16 +1,10 @@
 import React from 'react'
+import HomeSearchSection from '../HomeSearchSection'
 
 const HomeSection = () => {
   return (
     <>
-      <section className="home-section">
-        <header className="home-section__header">
-          <h2 className="home-section__title">Sample 1</h2>
-          <p className="home-section__description">
-            This is a sample description
-          </p>
-        </header>
-      </section>
+      <HomeSearchSection />
       <section className="home-section home-section--dark">
         <header className="home-section__header">
           <h2 className="home-section__title">Sample 2</h2>

src/pages/product-list.tsx

@@ -0,0 +1,18 @@
+import Footer from '../components/Footer'
+import Navbar from '../components/Navbar'
+
+const ProductList = () => (
+  <div className="layout-sign-up">
+    <header>
+      <Navbar />
+    </header>
+    <main>
+      {/* TODO: Add component here */}
+    </main>
+    <footer>
+      <Footer />
+    </footer>
+  </div>
+)
+
+export default ProductList

src/styles/components/__components-dir.scss

@@ -2,5 +2,6 @@
 @import './navbar';
 @import './sidebar';
 @import './home-section';
+@import './home-search-section';
 @import './sign-up-form';
 @import './form';

src/styles/components/_home-search-section.scss

@@ -0,0 +1,12 @@
+.home-search {
+  @include flex-center();
+  @include respond-above('md') {
+    // TODO
+  }
+
+  &__button {
+    padding: rem(5px 10px);
+    border-radius: rem(3px);
+    text-decoration: none;
+  }
+}

src/styles/components/_home-section.scss

@@ -14,7 +14,7 @@
     height: rem(650px);
   }
 
-  @include respond-above('lg') {
+  @include respond-above('xl') {
     padding: rem(40px);
     height: rem(800px);
   }