Create Donation card with Vuejs on home page

app/Http/Controllers/Auth/ConfirmPasswordController.php

@@ -0,0 +1,40 @@
+<?php
+
+namespace App\Http\Controllers\Auth;
+
+use App\Http\Controllers\Controller;
+use App\Providers\RouteServiceProvider;
+use Illuminate\Foundation\Auth\ConfirmsPasswords;
+
+class ConfirmPasswordController extends Controller
+{
+    /*
+    |--------------------------------------------------------------------------
+    | Confirm Password Controller
+    |--------------------------------------------------------------------------
+    |
+    | This controller is responsible for handling password confirmations and
+    | uses a simple trait to include the behavior. You're free to explore
+    | this trait and override any functions that require customization.
+    |
+    */
+
+    use ConfirmsPasswords;
+
+    /**
+     * Where to redirect users when the intended url fails.
+     *
+     * @var string
+     */
+    protected $redirectTo = RouteServiceProvider::HOME;
+
+    /**
+     * Create a new controller instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        $this->middleware('auth');
+    }
+}

app/Http/Controllers/Auth/ForgotPasswordController.php

@@ -0,0 +1,22 @@
+<?php
+
+namespace App\Http\Controllers\Auth;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Foundation\Auth\SendsPasswordResetEmails;
+
+class ForgotPasswordController extends Controller
+{
+    /*
+    |--------------------------------------------------------------------------
+    | Password Reset Controller
+    |--------------------------------------------------------------------------
+    |
+    | This controller is responsible for handling password reset emails and
+    | includes a trait which assists in sending these notifications from
+    | your application to your users. Feel free to explore this trait.
+    |
+    */
+
+    use SendsPasswordResetEmails;
+}

app/Http/Controllers/Auth/LoginController.php

@@ -0,0 +1,40 @@
+<?php
+
+namespace App\Http\Controllers\Auth;
+
+use App\Http\Controllers\Controller;
+use App\Providers\RouteServiceProvider;
+use Illuminate\Foundation\Auth\AuthenticatesUsers;
+
+class LoginController extends Controller
+{
+    /*
+    |--------------------------------------------------------------------------
+    | Login Controller
+    |--------------------------------------------------------------------------
+    |
+    | This controller handles authenticating users for the application and
+    | redirecting them to your home screen. The controller uses a trait
+    | to conveniently provide its functionality to your applications.
+    |
+    */
+
+    use AuthenticatesUsers;
+
+    /**
+     * Where to redirect users after login.
+     *
+     * @var string
+     */
+    protected $redirectTo = RouteServiceProvider::HOME;
+
+    /**
+     * Create a new controller instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        $this->middleware('guest')->except('logout');
+    }
+}

app/Http/Controllers/Auth/RegisterController.php

@@ -0,0 +1,73 @@
+<?php
+
+namespace App\Http\Controllers\Auth;
+
+use App\Http\Controllers\Controller;
+use App\Providers\RouteServiceProvider;
+use App\User;
+use Illuminate\Foundation\Auth\RegistersUsers;
+use Illuminate\Support\Facades\Hash;
+use Illuminate\Support\Facades\Validator;
+
+class RegisterController extends Controller
+{
+    /*
+    |--------------------------------------------------------------------------
+    | Register Controller
+    |--------------------------------------------------------------------------
+    |
+    | This controller handles the registration of new users as well as their
+    | validation and creation. By default this controller uses a trait to
+    | provide this functionality without requiring any additional code.
+    |
+    */
+
+    use RegistersUsers;
+
+    /**
+     * Where to redirect users after registration.
+     *
+     * @var string
+     */
+    protected $redirectTo = RouteServiceProvider::HOME;
+
+    /**
+     * Create a new controller instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        $this->middleware('guest');
+    }
+
+    /**
+     * Get a validator for an incoming registration request.
+     *
+     * @param  array  $data
+     * @return \Illuminate\Contracts\Validation\Validator
+     */
+    protected function validator(array $data)
+    {
+        return Validator::make($data, [
+            'name' => ['required', 'string', 'max:255'],
+            'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
+            'password' => ['required', 'string', 'min:8', 'confirmed'],
+        ]);
+    }
+
+    /**
+     * Create a new user instance after a valid registration.
+     *
+     * @param  array  $data
+     * @return \App\User
+     */
+    protected function create(array $data)
+    {
+        return User::create([
+            'name' => $data['name'],
+            'email' => $data['email'],
+            'password' => Hash::make($data['password']),
+        ]);
+    }
+}

app/Http/Controllers/Auth/ResetPasswordController.php

@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Http\Controllers\Auth;
+
+use App\Http\Controllers\Controller;
+use App\Providers\RouteServiceProvider;
+use Illuminate\Foundation\Auth\ResetsPasswords;
+
+class ResetPasswordController extends Controller
+{
+    /*
+    |--------------------------------------------------------------------------
+    | Password Reset Controller
+    |--------------------------------------------------------------------------
+    |
+    | This controller is responsible for handling password reset requests
+    | and uses a simple trait to include this behavior. You're free to
+    | explore this trait and override any methods you wish to tweak.
+    |
+    */
+
+    use ResetsPasswords;
+
+    /**
+     * Where to redirect users after resetting their password.
+     *
+     * @var string
+     */
+    protected $redirectTo = RouteServiceProvider::HOME;
+}

app/Http/Controllers/Auth/VerificationController.php

@@ -0,0 +1,42 @@
+<?php
+
+namespace App\Http\Controllers\Auth;
+
+use App\Http\Controllers\Controller;
+use App\Providers\RouteServiceProvider;
+use Illuminate\Foundation\Auth\VerifiesEmails;
+
+class VerificationController extends Controller
+{
+    /*
+    |--------------------------------------------------------------------------
+    | Email Verification Controller
+    |--------------------------------------------------------------------------
+    |
+    | This controller is responsible for handling email verification for any
+    | user that recently registered with the application. Emails may also
+    | be re-sent if the user didn't receive the original email message.
+    |
+    */
+
+    use VerifiesEmails;
+
+    /**
+     * Where to redirect users after verification.
+     *
+     * @var string
+     */
+    protected $redirectTo = RouteServiceProvider::HOME;
+
+    /**
+     * Create a new controller instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        $this->middleware('auth');
+        $this->middleware('signed')->only('verify');
+        $this->middleware('throttle:6,1')->only('verify', 'resend');
+    }
+}

app/Http/Controllers/DonationController.php

@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class DonationController extends Controller
+{
+    public function index(Request $request)
+    {
+        return view('donate');
+    }
+}

app/Http/Controllers/HomeController.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class HomeController extends Controller
+{
+    /**
+     * Create a new controller instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        $this->middleware('auth');
+    }
+
+    /**
+     * Show the application dashboard.
+     *
+     * @return \Illuminate\Contracts\Support\Renderable
+     */
+    public function index()
+    {
+        return view('home');
+    }
+}

composer.json

@@ -14,7 +14,8 @@
         "guzzlehttp/guzzle": "^6.3",
         "iyzico/iyzipay-php": "^2.0",
         "laravel/framework": "^7.0",
-        "laravel/tinker": "^2.0"
+        "laravel/tinker": "^2.0",
+        "laravel/ui": "^2.0"
     },
     "require-dev": {
         "facade/ignition": "^2.0",

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "e82746c9f0a6b64c7fc556e15766ab8a",
+    "content-hash": "3c8c87be7e4bc22d08441bd151d1521b",
     "packages": [
         {
             "name": "asm89/stack-cors",
@@ -993,6 +993,61 @@
             ],
             "time": "2020-04-07T15:01:31+00:00"
         },
+        {
+            "name": "laravel/ui",
+            "version": "v2.0.3",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/laravel/ui.git",
+                "reference": "15368c5328efb7ce94f35ca750acde9b496ab1b1"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/laravel/ui/zipball/15368c5328efb7ce94f35ca750acde9b496ab1b1",
+                "reference": "15368c5328efb7ce94f35ca750acde9b496ab1b1",
+                "shasum": ""
+            },
+            "require": {
+                "illuminate/console": "^7.0",
+                "illuminate/filesystem": "^7.0",
+                "illuminate/support": "^7.0",
+                "php": "^7.2.5"
+            },
+            "require-dev": {
+                "mockery/mockery": "^1.0",
+                "phpunit/phpunit": "^8.0"
+            },
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "providers": [
+                        "Laravel\\Ui\\UiServiceProvider"
+                    ]
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Laravel\\Ui\\": "src/",
+                    "Illuminate\\Foundation\\Auth\\": "auth-backend/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Taylor Otwell",
+                    "email": "taylor@laravel.com"
+                }
+            ],
+            "description": "Laravel UI utilities and presets.",
+            "keywords": [
+                "laravel",
+                "ui"
+            ],
+            "time": "2020-04-29T15:06:45+00:00"
+        },
         {
             "name": "league/commonmark",
             "version": "1.4.3",

database/migrations/2014_10_12_100000_create_password_resets_table.php

@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class CreatePasswordResetsTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('password_resets', function (Blueprint $table) {
+            $table->string('email')->index();
+            $table->string('token');
+            $table->timestamp('created_at')->nullable();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('password_resets');
+    }
+}

package-lock.json

@@ -1248,72 +1248,47 @@
             "dev": true
         },
         "adjust-sourcemap-loader": {
-            "version": "2.0.0",
-            "resolved": "https://registry.npmjs.org/adjust-sourcemap-loader/-/adjust-sourcemap-loader-2.0.0.tgz",
-            "integrity": "sha512-4hFsTsn58+YjrU9qKzML2JSSDqKvN8mUGQ0nNIrfPi8hmIONT4L3uUaT6MKdMsZ9AjsU6D2xDkZxCkbQPxChrA==",
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/adjust-sourcemap-loader/-/adjust-sourcemap-loader-1.2.0.tgz",
+            "integrity": "sha512-958oaHHVEXMvsY7v7cC5gEkNIcoaAVIhZ4mBReYVZJOTP9IgKmzLjIOhTtzpLMu+qriXvLsVjJ155EeInp45IQ==",
             "dev": true,
             "requires": {
-                "assert": "1.4.1",
-                "camelcase": "5.0.0",
-                "loader-utils": "1.2.3",
-                "object-path": "0.11.4",
-                "regex-parser": "2.2.10"
+                "assert": "^1.3.0",
+                "camelcase": "^1.2.1",
+                "loader-utils": "^1.1.0",
+                "lodash.assign": "^4.0.1",
+                "lodash.defaults": "^3.1.2",
+                "object-path": "^0.9.2",
+                "regex-parser": "^2.2.9"
             },
             "dependencies": {
-                "assert": {
-                    "version": "1.4.1",
-                    "resolved": "https://registry.npmjs.org/assert/-/assert-1.4.1.tgz",
-                    "integrity": "sha1-mZEtWRg2tab1s0XA8H7vwI/GXZE=",
-                    "dev": true,
-                    "requires": {
-                        "util": "0.10.3"
-                    }
-                },
                 "camelcase": {
-                    "version": "5.0.0",
-                    "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.0.0.tgz",
-                    "integrity": "sha512-faqwZqnWxbxn+F1d399ygeamQNy3lPp/H9H6rNrqYh4FSVCtcY+3cub1MxA8o9mDd55mM8Aghuu/kuyYA6VTsA==",
-                    "dev": true
-                },
-                "emojis-list": {
-                    "version": "2.1.0",
-                    "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz",
-                    "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=",
+                    "version": "1.2.1",
+                    "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.2.1.tgz",
+                    "integrity": "sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk=",
                     "dev": true
                 },
-                "inherits": {
-                    "version": "2.0.1",
-                    "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-                    "integrity": "sha1-sX0I0ya0Qj5Wjv9xn5GwscvfafE=",
-                    "dev": true
-                },
-                "json5": {
-                    "version": "1.0.1",
-                    "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-                    "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
-                    "dev": true,
-                    "requires": {
-                        "minimist": "^1.2.0"
-                    }
-                },
-                "loader-utils": {
-                    "version": "1.2.3",
-                    "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz",
-                    "integrity": "sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==",
-                    "dev": true,
-                    "requires": {
-                        "big.js": "^5.2.2",
-                        "emojis-list": "^2.0.0",
-                        "json5": "^1.0.1"
-                    }
-                },
-                "util": {
-                    "version": "0.10.3",
-                    "resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz",
-                    "integrity": "sha1-evsa/lCAUkZInj23/g7TeTNqwPk=",
+                "lodash.defaults": {
+                    "version": "3.1.2",
+                    "resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-3.1.2.tgz",
+                    "integrity": "sha1-xzCLGNv4vJNy1wGnNJPGEZK9Liw=",
                     "dev": true,
                     "requires": {
-                        "inherits": "2.0.1"
+                        "lodash.assign": "^3.0.0",
+                        "lodash.restparam": "^3.0.0"
+                    },
+                    "dependencies": {
+                        "lodash.assign": {
+                            "version": "3.2.0",
+                            "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-3.2.0.tgz",
+                            "integrity": "sha1-POnwI0tLIiPilrj6CsH+6OvKZPo=",
+                            "dev": true,
+                            "requires": {
+                                "lodash._baseassign": "^3.0.0",
+                                "lodash._createassigner": "^3.0.0",
+                                "lodash.keys": "^3.0.0"
+                            }
+                        }
                     }
                 }
             }
@@ -1421,12 +1396,6 @@
                 "sprintf-js": "~1.0.2"
             }
         },
-        "arity-n": {
-            "version": "1.0.4",
-            "resolved": "https://registry.npmjs.org/arity-n/-/arity-n-1.0.4.tgz",
-            "integrity": "sha1-2edrEXM+CFacCEeuezmyhgswt0U=",
-            "dev": true
-        },
         "arr-diff": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
@@ -1826,6 +1795,12 @@
             "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
             "dev": true
         },
+        "bootstrap": {
+            "version": "4.5.0",
+            "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.0.tgz",
+            "integrity": "sha512-Z93QoXvodoVslA+PWNdk23Hze4RBYIkpb5h8I2HY2Tu2h7A0LpAgLcyrhrSUyo2/Oxm2l1fRZPs1e5hnxnliXA==",
+            "dev": true
+        },
         "brace-expansion": {
             "version": "1.1.11",
             "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -2374,15 +2349,6 @@
             "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==",
             "dev": true
         },
-        "compose-function": {
-            "version": "3.0.3",
-            "resolved": "https://registry.npmjs.org/compose-function/-/compose-function-3.0.3.tgz",
-            "integrity": "sha1-ntZ18TzFRQHTCVCkhv9qe6OrGF8=",
-            "dev": true,
-            "requires": {
-                "arity-n": "^1.0.4"
-            }
-        },
         "compressible": {
             "version": "2.0.18",
             "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
@@ -2910,15 +2876,11 @@
             "integrity": "sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=",
             "dev": true
         },
-        "d": {
-            "version": "1.0.1",
-            "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz",
-            "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==",
-            "dev": true,
-            "requires": {
-                "es5-ext": "^0.10.50",
-                "type": "^1.0.1"
-            }
+        "de-indent": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
+            "integrity": "sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=",
+            "dev": true
         },
         "debug": {
             "version": "3.1.0",
@@ -3374,38 +3336,6 @@
                 "is-symbol": "^1.0.2"
             }
         },
-        "es5-ext": {
-            "version": "0.10.53",
-            "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.53.tgz",
-            "integrity": "sha512-Xs2Stw6NiNHWypzRTY1MtaG/uJlwCk8kH81920ma8mvN8Xq1gsfhZvpkImLQArw8AHnv8MT2I45J3c0R8slE+Q==",
-            "dev": true,
-            "requires": {
-                "es6-iterator": "~2.0.3",
-                "es6-symbol": "~3.1.3",
-                "next-tick": "~1.0.0"
-            }
-        },
-        "es6-iterator": {
-            "version": "2.0.3",
-            "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
-            "integrity": "sha1-p96IkUGgWpSwhUQDstCg+/qY87c=",
-            "dev": true,
-            "requires": {
-                "d": "1",
-                "es5-ext": "^0.10.35",
-                "es6-symbol": "^3.1.1"
-            }
-        },
-        "es6-symbol": {
-            "version": "3.1.3",
-            "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.3.tgz",
-            "integrity": "sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==",
-            "dev": true,
-            "requires": {
-                "d": "^1.0.1",
-                "ext": "^1.1.2"
-            }
-        },
         "es6-templates": {
             "version": "0.2.3",
             "resolved": "https://registry.npmjs.org/es6-templates/-/es6-templates-0.2.3.tgz",
@@ -3676,23 +3606,6 @@
                 }
             }
         },
-        "ext": {
-            "version": "1.4.0",
-            "resolved": "https://registry.npmjs.org/ext/-/ext-1.4.0.tgz",
-            "integrity": "sha512-Key5NIsUxdqKg3vIsdw9dSuXpPCQ297y6wBjL30edxwPgt2E44WcWBZey/ZvUc6sERLTxKdyCu4gZFmUbk1Q7A==",
-            "dev": true,
-            "requires": {
-                "type": "^2.0.0"
-            },
-            "dependencies": {
-                "type": {
-                    "version": "2.0.0",
-                    "resolved": "https://registry.npmjs.org/type/-/type-2.0.0.tgz",
-                    "integrity": "sha512-KBt58xCHry4Cejnc2ISQAF7QY+ORngsWfxezO68+12hKV6lQY8P/psIkcbjeHWn7MqcgciWJyCCevFMJdIXpow==",
-                    "dev": true
-                }
-            }
-        },
         "extend-shallow": {
             "version": "3.0.2",
             "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
@@ -5101,6 +5014,12 @@
                 }
             }
         },
+        "jquery": {
+            "version": "3.5.1",
+            "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.5.1.tgz",
+            "integrity": "sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg==",
+            "dev": true
+        },
         "js-tokens": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -5303,12 +5222,98 @@
             "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==",
             "dev": true
         },
+        "lodash._baseassign": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/lodash._baseassign/-/lodash._baseassign-3.2.0.tgz",
+            "integrity": "sha1-jDigmVAPIVrQnlnxci/QxSv+Ck4=",
+            "dev": true,
+            "requires": {
+                "lodash._basecopy": "^3.0.0",
+                "lodash.keys": "^3.0.0"
+            }
+        },
+        "lodash._basecopy": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz",
+            "integrity": "sha1-jaDmqHbPNEwK2KVIghEd08XHyjY=",
+            "dev": true
+        },
+        "lodash._bindcallback": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/lodash._bindcallback/-/lodash._bindcallback-3.0.1.tgz",
+            "integrity": "sha1-5THCdkTPi1epnhftlbNcdIeJOS4=",
+            "dev": true
+        },
+        "lodash._createassigner": {
+            "version": "3.1.1",
+            "resolved": "https://registry.npmjs.org/lodash._createassigner/-/lodash._createassigner-3.1.1.tgz",
+            "integrity": "sha1-g4pbri/aymOsIt7o4Z+k5taXCxE=",
+            "dev": true,
+            "requires": {
+                "lodash._bindcallback": "^3.0.0",
+                "lodash._isiterateecall": "^3.0.0",
+                "lodash.restparam": "^3.0.0"
+            }
+        },
+        "lodash._getnative": {
+            "version": "3.9.1",
+            "resolved": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.1.tgz",
+            "integrity": "sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U=",
+            "dev": true
+        },
+        "lodash._isiterateecall": {
+            "version": "3.0.9",
+            "resolved": "https://registry.npmjs.org/lodash._isiterateecall/-/lodash._isiterateecall-3.0.9.tgz",
+            "integrity": "sha1-UgOte6Ql+uhCRg5pbbnPPmqsBXw=",
+            "dev": true
+        },
+        "lodash.assign": {
+            "version": "4.2.0",
+            "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
+            "integrity": "sha1-DZnzzNem0mHRm9rrkkUAXShYCOc=",
+            "dev": true
+        },
+        "lodash.defaults": {
+            "version": "4.2.0",
+            "resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz",
+            "integrity": "sha1-0JF4cW/+pN3p5ft7N/bwgCJ0WAw=",
+            "dev": true
+        },
+        "lodash.isarguments": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz",
+            "integrity": "sha1-L1c9hcaiQon/AGY7SRwdM4/zRYo=",
+            "dev": true
+        },
+        "lodash.isarray": {
+            "version": "3.0.4",
+            "resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.4.tgz",
+            "integrity": "sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U=",
+            "dev": true
+        },
+        "lodash.keys": {
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.1.2.tgz",
+            "integrity": "sha1-TbwEcrFWvlCgsoaFXRvQsMZWCYo=",
+            "dev": true,
+            "requires": {
+                "lodash._getnative": "^3.0.0",
+                "lodash.isarguments": "^3.0.0",
+                "lodash.isarray": "^3.0.0"
+            }
+        },
         "lodash.memoize": {
             "version": "4.1.2",
             "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
             "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=",
             "dev": true
         },
+        "lodash.restparam": {
+            "version": "3.6.1",
+            "resolved": "https://registry.npmjs.org/lodash.restparam/-/lodash.restparam-3.6.1.tgz",
+            "integrity": "sha1-k2pOMJ7zMKdkXtQUWYbIWuWyCAU=",
+            "dev": true
+        },
         "lodash.uniq": {
             "version": "4.5.0",
             "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
@@ -5723,12 +5728,6 @@
             "integrity": "sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==",
             "dev": true
         },
-        "next-tick": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz",
-            "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw=",
-            "dev": true
-        },
         "nice-try": {
             "version": "1.0.5",
             "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
@@ -5935,9 +5934,9 @@
             "dev": true
         },
         "object-path": {
-            "version": "0.11.4",
-            "resolved": "https://registry.npmjs.org/object-path/-/object-path-0.11.4.tgz",
-            "integrity": "sha1-NwrnUvvzfePqcKhhwju6iRVpGUk=",
+            "version": "0.9.2",
+            "resolved": "https://registry.npmjs.org/object-path/-/object-path-0.9.2.tgz",
+            "integrity": "sha1-D9mnT8X60a45aLWGvaXGMr1sBaU=",
             "dev": true
         },
         "object-visit": {
@@ -6372,6 +6371,12 @@
                 "find-up": "^2.1.0"
             }
         },
+        "popper.js": {
+            "version": "1.16.1",
+            "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+            "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
+            "dev": true
+        },
         "portfinder": {
             "version": "1.0.26",
             "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.26.tgz",
@@ -7487,74 +7492,27 @@
             "dev": true
         },
         "resolve-url-loader": {
-            "version": "3.1.1",
-            "resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-3.1.1.tgz",
-            "integrity": "sha512-K1N5xUjj7v0l2j/3Sgs5b8CjrrgtC70SmdCuZiJ8tSyb5J+uk3FoeZ4b7yTnH6j7ngI+Bc5bldHJIa8hYdu2gQ==",
+            "version": "2.3.2",
+            "resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-2.3.2.tgz",
+            "integrity": "sha512-sc/UVgiADdoTc+4cGPB7cUCnlEkzlxD1NXHw4oa9qA0fp30H8mAQ2ePJBP9MQ029DUuhEPouhNdvzT37pBCV0g==",
             "dev": true,
             "requires": {
-                "adjust-sourcemap-loader": "2.0.0",
-                "camelcase": "5.3.1",
-                "compose-function": "3.0.3",
-                "convert-source-map": "1.7.0",
-                "es6-iterator": "2.0.3",
-                "loader-utils": "1.2.3",
-                "postcss": "7.0.21",
-                "rework": "1.0.1",
-                "rework-visit": "1.0.0",
-                "source-map": "0.6.1"
+                "adjust-sourcemap-loader": "^1.1.0",
+                "camelcase": "^4.1.0",
+                "convert-source-map": "^1.5.1",
+                "loader-utils": "^1.1.0",
+                "lodash.defaults": "^4.0.0",
+                "rework": "^1.0.1",
+                "rework-visit": "^1.0.0",
+                "source-map": "^0.5.7",
+                "urix": "^0.1.0"
             },
             "dependencies": {
-                "emojis-list": {
-                    "version": "2.1.0",
-                    "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz",
-                    "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=",
-                    "dev": true
-                },
-                "json5": {
-                    "version": "1.0.1",
-                    "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-                    "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
-                    "dev": true,
-                    "requires": {
-                        "minimist": "^1.2.0"
-                    }
-                },
-                "loader-utils": {
-                    "version": "1.2.3",
-                    "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz",
-                    "integrity": "sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==",
-                    "dev": true,
-                    "requires": {
-                        "big.js": "^5.2.2",
-                        "emojis-list": "^2.0.0",
-                        "json5": "^1.0.1"
-                    }
-                },
-                "postcss": {
-                    "version": "7.0.21",
-                    "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.21.tgz",
-                    "integrity": "sha512-uIFtJElxJo29QC753JzhidoAhvp/e/Exezkdhfmt8AymWT6/5B7W1WmponYWkHk2eg6sONyTch0A3nkMPun3SQ==",
-                    "dev": true,
-                    "requires": {
-                        "chalk": "^2.4.2",
-                        "source-map": "^0.6.1",
-                        "supports-color": "^6.1.0"
-                    }
-                },
-                "source-map": {
-                    "version": "0.6.1",
-                    "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-                    "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+                "camelcase": {
+                    "version": "4.1.0",
+                    "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-4.1.0.tgz",
+                    "integrity": "sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0=",
                     "dev": true
-                },
-                "supports-color": {
-                    "version": "6.1.0",
-                    "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-                    "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-                    "dev": true,
-                    "requires": {
-                        "has-flag": "^3.0.0"
-                    }
                 }
             }
         },
@@ -8785,12 +8743,6 @@
             "integrity": "sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY=",
             "dev": true
         },
-        "type": {
-            "version": "1.2.0",
-            "resolved": "https://registry.npmjs.org/type/-/type-1.2.0.tgz",
-            "integrity": "sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==",
-            "dev": true
-        },
         "type-is": {
             "version": "1.6.18",
             "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
@@ -9099,6 +9051,12 @@
             "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==",
             "dev": true
         },
+        "vue": {
+            "version": "2.6.11",
+            "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.11.tgz",
+            "integrity": "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ==",
+            "dev": true
+        },
         "vue-hot-reload-api": {
             "version": "2.3.4",
             "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
@@ -9128,6 +9086,16 @@
                 "loader-utils": "^1.0.2"
             }
         },
+        "vue-template-compiler": {
+            "version": "2.6.11",
+            "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.11.tgz",
+            "integrity": "sha512-KIq15bvQDrcCjpGjrAhx4mUlyyHfdmTaoNfeoATHLAiWB+MU3cx4lOzMwrnUh9cCxy0Lt1T11hAFY6TQgroUAA==",
+            "dev": true,
+            "requires": {
+                "de-indent": "^1.0.2",
+                "he": "^1.1.0"
+            }
+        },
         "vue-template-es2015-compiler": {
             "version": "1.9.1",
             "resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",

package.json

@@ -11,11 +11,16 @@
     },
     "devDependencies": {
         "axios": "^0.19",
+        "bootstrap": "^4.0.0",
         "cross-env": "^7.0",
+        "jquery": "^3.2",
         "laravel-mix": "^5.0.1",
         "lodash": "^4.17.13",
-        "resolve-url-loader": "^3.1.0",
-        "sass": "^1.15.2",
-        "sass-loader": "^8.0.0"
+        "popper.js": "^1.12",
+        "resolve-url-loader": "^2.3.1",
+        "sass": "^1.20.1",
+        "sass-loader": "^8.0.0",
+        "vue": "^2.5.17",
+        "vue-template-compiler": "^2.6.10"
     }
 }

public/js/app.js.LICENSE.txt

@@ -0,0 +1,70 @@
+/*!
+  * Bootstrap v4.5.0 (https://getbootstrap.com/)
+  * Copyright 2011-2020 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
+  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+  */
+
+/*!
+ * Sizzle CSS Selector Engine v2.3.5
+ * https://sizzlejs.com/
+ *
+ * Copyright JS Foundation and other contributors
+ * Released under the MIT license
+ * https://js.foundation/
+ *
+ * Date: 2020-03-14
+ */
+
+/*!
+ * Vue.js v2.6.11
+ * (c) 2014-2019 Evan You
+ * Released under the MIT License.
+ */
+
+/*!
+ * jQuery JavaScript Library v3.5.1
+ * https://jquery.com/
+ *
+ * Includes Sizzle.js
+ * https://sizzlejs.com/
+ *
+ * Copyright JS Foundation and other contributors
+ * Released under the MIT license
+ * https://jquery.org/license
+ *
+ * Date: 2020-05-04T22:49Z
+ */
+
+/**
+ * @license
+ * Lodash <https://lodash.com/>
+ * Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
+ * Released under MIT license <https://lodash.com/license>
+ * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
+ * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+ */
+
+/**!
+ * @fileOverview Kickass library to create and place poppers near their reference elements.
+ * @version 1.16.1
+ * @license
+ * Copyright (c) 2016 Federico Zivolo and contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */

public/mix-manifest.json

@@ -0,0 +1,4 @@
+{
+    "/js/app.js": "/js/app.js?id=752a125965afecb67512",
+    "/css/app.css": "/css/app.css?id=36412c9f34a08f26af3c"
+}

resources/js/app.js

@@ -1 +1,32 @@
+/**
+ * First we will load all of this project's JavaScript dependencies which
+ * includes Vue and other libraries. It is a great starting point when
+ * building robust, powerful web applications using Vue and Laravel.
+ */
+
 require('./bootstrap');
+
+window.Vue = require('vue');
+
+/**
+ * The following block of code may be used to automatically register your
+ * Vue components. It will recursively scan this directory for the Vue
+ * components and automatically register them with their "basename".
+ *
+ * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
+ */
+
+// const files = require.context('./', true, /\.vue$/i)
+// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
+
+Vue.component('donation-card', require('./components/DonationCard.vue').default);
+
+/**
+ * Next, we will create a fresh Vue application instance and attach it to
+ * the page. Then, you may begin adding components to this application
+ * or customize the JavaScript scaffolding to fit your unique needs.
+ */
+
+const app = new Vue({
+    el: '#app',
+});

resources/js/bootstrap.js

@@ -1,5 +1,18 @@
 window._ = require('lodash');
 
+/**
+ * We'll load jQuery and the Bootstrap jQuery plugin which provides support
+ * for JavaScript based Bootstrap features such as modals and tabs. This
+ * code may be modified to fit the specific needs of your application.
+ */
+
+try {
+    window.Popper = require('popper.js').default;
+    window.$ = window.jQuery = require('jquery');
+
+    require('bootstrap');
+} catch (e) {}
+
 /**
  * We'll load the axios HTTP library which allows us to easily issue requests
  * to our Laravel back-end. This library automatically handles sending the

resources/js/components/DonationCard.vue

@@ -0,0 +1,268 @@
+<template>
+  <div class="card">
+    <div class="card-header">Donate</div>
+
+    <div class="card-body">
+      <form method="POST" action>
+        <div class="form-group row">
+          <label for="currency" class="col-md-4 col-form-label text-md-right">Donation currency</label>
+
+          <div class="col-md-8">
+            <div class="row">
+              <div class="col" v-for="currencyItem in currencies" :key="currencyItem.code">
+                <button
+                  type="button"
+                  class="btn btn-block"
+                  :class="{'btn-primary':currency==currencyItem.code, 'btn-outline-primary':currency!=currencyItem.code}"
+                  @click="currency=currencyItem.code"
+                >{{currencyItem.symbol}} | {{currencyItem.name}}</button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="form-group row">
+          <label for="frequency" class="col-md-4 col-form-label text-md-right">Donation frequency</label>
+
+          <div class="col-md-8">
+            <div class="row">
+              <div class="col" v-for="frequencyItem in frequencies" :key="frequencyItem.code">
+                <button
+                  type="button"
+                  class="btn btn-block"
+                  :class="{'btn-primary':frequency==frequencyItem.code, 'btn-outline-primary':frequency!=frequencyItem.code}"
+                  @click="frequency=frequencyItem.code"
+                >{{frequencyItem.name}}</button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="form-group row">
+          <label for="donationPackage" class="col-md-4 col-form-label text-md-right">Donation amount</label>
+
+          <div class="col-md-8">
+            <div class="row">
+              <div
+                class="col-6"
+                v-for="donationPackageItem in donationPackages"
+                :key="donationPackageItem.id"
+              >
+                <button
+                  type="button"
+                  class="btn btn-block mb-2"
+                  :class="{'btn-primary':donationPackage==donationPackageItem.id, 'btn-outline-primary':donationPackage!=donationPackageItem.id}"
+                  @click="setDonationPackage(donationPackageItem.id)"
+                >
+                  <span>{{activeCurrency.symbol}}</span>
+                  <span v-if="frequency=='once'">{{donationPackageItem.once_amount}}</span>
+                  <span v-else-if="frequency=='monthly'">{{donationPackageItem.monthly_amount}} /mo</span>
+                  <span
+                    v-else-if="frequency=='annually'"
+                  >{{donationPackageItem.annually_amount}} /yr</span>
+
+                  <br />
+                  <small>{{donationPackageItem.name}}</small>
+                </button>
+              </div>
+              <div class="col-6">
+                <button
+                  type="button"
+                  class="btn btn-block mb-2"
+                  :class="{'btn-primary':donationPackage==null, 'btn-outline-primary':donationPackage!=null}"
+                  @click="setDonationPackage(null)"
+                >
+                  <small>other</small>
+                  <br />
+
+                  <div class="input-group mb-3">
+                    <div class="input-group-prepend">
+                      <span class="input-group-text">{{activeCurrency.symbol}}</span>
+                    </div>
+                    <input
+                      type="number"
+                      class="form-control"
+                      aria-label="Amount"
+                      v-model.number="amount"
+                      @keypress="onlyNumber"
+                    />
+                    <div
+                      class="input-group-append"
+                      v-if="frequency=='monthly' || frequency=='annually'"
+                    >
+                      <span v-if="frequency=='monthly'" class="input-group-text">/mo</span>
+                      <span v-else-if="frequency=='annually'" class="input-group-text">/yr</span>
+                    </div>
+                  </div>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- <div class="form-group row">
+          <label for="email" class="col-md-4 col-form-label text-md-right">E-Mail Address</label>
+
+          <div class="col-md-6">
+            <input
+              id="email"
+              type="email"
+              class="form-control is-invalid"
+              name="email"
+              required
+              autocomplete="email"
+              autofocus
+            />
+            <span class="invalid-feedback" role="alert">
+              <strong>Sample error</strong>
+            </span>
+          </div>
+        </div>
+
+        <div class="form-group row">
+          <label for="password" class="col-md-4 col-form-label text-md-right">Password</label>
+
+          <div class="col-md-6">
+            <input
+              id="password"
+              type="password"
+              class="form-control"
+              name="password"
+              required
+              autocomplete="current-password"
+            />
+          </div>
+        </div>
+
+        <div class="form-group row">
+          <div class="col-md-6 offset-md-4">
+            <div class="form-check">
+              <input class="form-check-input" type="checkbox" name="remember" id="remember" />
+              <label class="form-check-label" for="remember">Remember Me</label>
+            </div>
+          </div>
+        </div>-->
+
+        <div class="form-group row mb-0">
+          <div class="col-md-8 offset-md-4">
+            <button type="submit" class="btn btn-primary btn-lg">Donate {{amountText}}</button>
+
+            <!-- <a class="btn btn-link" href="#">Forgot Your Password?</a> -->
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      currency: "USD",
+      frequency: "monthly",
+      donationPackage: 4,
+      amount: 25,
+      currencies: [
+        { name: "USD", code: "USD", symbol: "$" },
+        { name: "EUR", code: "EUR", symbol: "€" },
+        { name: "TRY", code: "TRY", symbol: "₺" }
+      ],
+      frequencies: [
+        { name: "once", code: "once" },
+        { name: "monthly", code: "monthly" },
+        { name: "annually", code: "annually" }
+      ],
+      donationPackages: [
+        {
+          id: 1,
+          name: "Super Major Donor",
+          once_amount: 2500,
+          monthly_amount: 250,
+          annually_amount: 2500
+        },
+        {
+          id: 2,
+          name: "Major Donor",
+          once_amount: 1000,
+          monthly_amount: 100,
+          annually_amount: 1000
+        },
+        {
+          id: 3,
+          name: "Rare Earths Level",
+          once_amount: 500,
+          monthly_amount: 50,
+          annually_amount: 500
+        },
+        {
+          id: 4,
+          name: "Titanium Level",
+          once_amount: 250,
+          monthly_amount: 25,
+          annually_amount: 250
+        },
+        {
+          id: 5,
+          name: "Gold Level",
+          once_amount: 100,
+          monthly_amount: 10,
+          annually_amount: 100
+        },
+        {
+          id: 6,
+          name: "Copper Level",
+          once_amount: 50,
+          monthly_amount: 5,
+          annually_amount: 50
+        }
+      ]
+    };
+  },
+  computed: {
+    activeCurrency() {
+      const itemIndex = this.currencies.findIndex(
+        item => item.code === this.currency
+      );
+      if (itemIndex === -1) return false;
+      return this.currencies[itemIndex];
+    },
+    amountText() {
+      var text = this.activeCurrency.symbol + this.amount;
+      if (this.frequency == "monthly") {
+        text = text + "/mo";
+      } else if (this.frequency == "annually") {
+        text = text + "/yr";
+      }
+      return text;
+    }
+  },
+  methods: {
+    setDonationPackage(id) {
+      this.donationPackage = id;
+      const itemIndex = this.donationPackages.findIndex(item => item.id === id);
+      if (itemIndex !== -1) {
+        if (this.frequency == "once") {
+          this.amount = this.donationPackages[itemIndex].once_amount;
+        } else if (this.frequency == "monthly") {
+          this.amount = this.donationPackages[itemIndex].monthly_amount;
+        } else if (this.frequency == "annually") {
+          this.amount = this.donationPackages[itemIndex].annually_amount;
+        }
+      }
+    },
+    onlyNumber($event) {
+      //console.log($event.keyCode); //keyCodes value
+      let keyCode = $event.keyCode ? $event.keyCode : $event.which;
+      if ((keyCode < 48 || keyCode > 57) && keyCode !== 46) {
+        // 46 is dot
+        $event.preventDefault();
+      }
+    }
+  },
+  watch: {
+    amount() {
+      if (this.amount < 1) {
+        this.amount = 5;
+      }
+    }
+  }
+};
+</script>

resources/js/components/ExampleComponent.vue

@@ -0,0 +1,23 @@
+<template>
+    <div class="container">
+        <div class="row justify-content-center">
+            <div class="col-md-8">
+                <div class="card">
+                    <div class="card-header">Example Component</div>
+
+                    <div class="card-body">
+                        I'm an example component.
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        mounted() {
+            console.log('Component mounted.')
+        }
+    }
+</script>

resources/sass/_variables.scss

@@ -0,0 +1,22 @@
+// Body
+$body-bg: #f8fafc;
+
+// Typography
+$font-family-sans-serif: "Liberation Sans",