首頁建置與部份顯示模組拆開

Laravel預設仍是使用npm，若不使用npm的情況下，會造成在跑 `yarn run dev`
的時候，中間有環節會呼叫npm時會出錯。
另外在使用 `npm run dev`
時發現會覆蓋掉有被git算上的前端部屬用的檔案，故修改.gitignore將這些檔案脫離。

.gitignore

@@ -1,6 +1,9 @@
 /node_modules
 /public/hot
 /public/storage
+/public/js
+/public/css
+/public/fonts
 /storage/*.key
 /vendor
 /.idea

package.json

@@ -13,10 +13,12 @@
         "axios": "^0.18",
         "bootstrap": "^4.0.0",
         "cross-env": "^5.1",
+        "font-awesome": "^4.7.0",
         "jquery": "^3.2",
         "laravel-mix": "^2.0",
         "lodash": "^4.17.4",
         "popper.js": "^1.12",
         "vue": "^2.5.7"
-    }
+    },
+    "dependencies": {}
 }

readme.md

@@ -5,9 +5,7 @@
         sudo apt install php mysql-server phpmyadmin php-mbstring php-xml php-zip curl wget libpng-dev
         curl -sS https://getcomposer.org/installer | sudo php -- --install-dir=/usr/local/bin --filename=composer
         sudo cat /etc/mysql/debian.cnf #查詢系統內定的MySQL預設帳號密碼
-        curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
+        sudo apt update && apt install nodejs npm
-        echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
-        sudo apt update && apt install nodejs yarn
 
 ## 專案參數與環境重建
 當你Clone下來的專案，因為有git採用了 `.gitignore` 機制，比較敏感的參數（像是APP_KEY、資料庫帳密等）與共用的函式庫檔案不會包含進來，必須在自己這邊重建。
@@ -22,7 +20,7 @@
     $ composer install
 
 ### 3. 安裝前端相關函式庫
-    $ yarn install
+    $ npm install
 
 ### 4. 設定 .env 檔
 將 `.env.example` 複製成 `.env`。
@@ -35,9 +33,13 @@
 這個專案有包含資料庫遷移(Migration)，所以只要下：
 
     $ php artisan migrate
-    
+
 就可以了，資料表都會自動產生
 
+### 7. 重建前端部屬用檔案
+
+    $ npm run dev
+
 ## 執行此專案
 ### 快速啟動
     $ php artisan serve

resources/assets/sass/app.scss

@@ -7,6 +7,8 @@
 
 // Bootstrap
 @import '~bootstrap/scss/bootstrap';
+@import '~font-awesome/scss/font-awesome';
+$fa-font-path: "/fonts" !default;
 
 .navbar-laravel {
   background-color: #fff;

resources/views/auth/login.blade.php

@@ -1,7 +1,7 @@
 @extends('layouts.app')
 
 @section('content')
-<div class="container">
+<div class="container py-4">
     <div class="row justify-content-center">
         <div class="col-md-8">
             <div class="card">

resources/views/auth/passwords/email.blade.php

@@ -1,7 +1,7 @@
 @extends('layouts.app')
 
 @section('content')
-<div class="container">
+<div class="container py-4">
     <div class="row justify-content-center">
         <div class="col-md-8">
             <div class="card">

resources/views/auth/passwords/reset.blade.php

@@ -1,7 +1,7 @@
 @extends('layouts.app')
 
 @section('content')
-<div class="container">
+<div class="container py-4">
     <div class="row justify-content-center">
         <div class="col-md-8">
             <div class="card">

resources/views/auth/register.blade.php

@@ -1,7 +1,7 @@
 @extends('layouts.app')
 
 @section('content')
-<div class="container">
+<div class="container py-4">
     <div class="row justify-content-center">
         <div class="col-md-8">
             <div class="card">

resources/views/home/index.blade.php

@@ -3,6 +3,60 @@
 @section('title', config('app.name', 'Laravel'))
 
 @section('content')
-    <button class="btn btn-primary">我想成為KOL</button>
+<main role="main">
-    <button class="btn btn-primary">我想成為品牌/代理商</button>
+    <section class="jumbotron text-center">
+        <div class="container">
+            <h1 class="jumbotron-heading">不只幫您找好KOL</h1>
+            <p class="lead text-muted">讓您輕鬆管理預算、掌握專案流程</p>
+            <h1 class="jumbotron-heading">不只幫您找好廠商</h1>
+            <p class="lead text-muted">讓您與廠商溝通無障礙、完美結案</p>
+            <form>
+                <div class="form-group">
+                    <input class="form-control" type="search" placeholder="Search" aria-label="Search">
+                    <button class="btn btn-outline-success" type="submit">Search</button>
+                </div>
+            </form>
+
+            <!-- <p>
+                <a href="#" class="btn btn-primary my-2">Main call to action</a>
+                <a href="#" class="btn btn-secondary my-2">Secondary action</a>
+            </p> -->
+        </div>
+    </section>
+    <section>
+        <div class="container">
+            <div class="row">
+                <div class="col-sm-3">
+                    <h2>我是廠商</h2>
+                    <ul>
+                        <li>KOL搜尋</li>
+                        <li>我的最愛KOL</li>
+                        <li>發案管理</li>
+                        <li>合作廠商</li>
+                        <li>結案管理</li>
+                    </ul>
+                    <button class="btn btn-primary">我想成為KOL</button>
+                </div>
+                <div class="col-sm-3">
+                    <h2>我是KOL</h2>
+                    <ul>
+                        <li>案件通知</li>
+                        <li>合作廠商</li>
+                        <li>執行管理</li>
+                        <li>發布管理</li>
+                        <li>結案管理</li>
+                    </ul>
+                    <button class="btn btn-primary">我想成為品牌/代理商</button>
+                </div>
+                <div class="col-sm">
+                    <h2>公告區</h2>
+                    <ul>
+                        <li></li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </section>
+
+</main>
 @endsection

resources/views/layouts/app.blade.php

@@ -45,9 +45,13 @@
             </div>
         </nav>
 
-        <main class="py-4">
+        <main>
             @yield('content')
         </main>
+
+        <footer>
+            @include('layouts.partials.footer')
+        </footer>
     </div>
 </body>
 </html>

resources/views/layouts/partials/auth-navbar-item.blade.php

@@ -1,12 +1,15 @@
 <!-- Authentication Links -->
 @guest
     <li class="nav-item">
-        <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
+        <a class="nav-link" href="{{ route('login') }}">登入</a>
     </li>
     <li class="nav-item">
-        <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
+        <a class="nav-link" href="{{ route('register') }}">註冊</a>
     </li>
     <li class="nav-item">
+        <a class="nav-link" href="{{ route('register') }}">捷徑</a>
+    </li>
+    <!-- <li class="nav-item">
         <a class="nav-link" href="/receiver/login">KOL登入<span class="sr-only">(current)</span></a>
     </li>
     <li class="nav-item">
@@ -14,7 +17,7 @@
     </li>
     <li class="nav-item">
         <a class="nav-link" href="#">後台登入</a>
-    </li>
+    </li> -->
 @else
     <li class="nav-item dropdown">
         <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>

resources/views/layouts/partials/footer.blade.php

@@ -0,0 +1,30 @@
+<hr>
+<div class="container">
+    <div class="row">
+        <div class="col-sm-2">
+            <h2>關於我們</h2>
+            <ul>
+                <li>關於</li>
+                <li>行銷知識</li>
+                <li>合作提案</li>
+                <li>聯絡我們</li>
+            </ul>
+        </div>
+        <div class="col-sm-2">
+            <h2>服務條款</h2>
+            <ul>
+                <li>隱私政策</li>
+                <li>網站條款</li>
+                <li>常見問題</li>
+            </ul>
+        </div>
+        <div class="col-sm-2">
+            <h2>服務聯盟</h2>
+            <ul>
+                <li>開箱王</li>
+                <li>BVG</li>
+                <li>凱曜網路</li>
+            </ul>
+        </div>
+    </div>
+</div>

webpack.mix.js

@@ -12,4 +12,6 @@ let mix = require('laravel-mix');
  */
 
 mix.js('resources/assets/js/app.js', 'public/js')
-   .sass('resources/assets/sass/app.scss', 'public/css');
+   .sass('resources/assets/sass/app.scss', 'public/css')
+   .copy('node_modules/font-awesome/fonts', 'public/fonts')
+   .sourceMaps();