├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── assets
    │   └── logo.png
    ├── routers.js
    ├── main.js
    ├── components
    │   ├── AboutComponent.vue
    │   ├── FooterComponent.vue
    │   ├── CallToAction.vue
    │   ├── JumbotronComponent.vue
    │   ├── NavBar.vue
    │   └── CardsBox.vue
    └── App.vue
├── babel.config.js
├── vue.config.js
├── .gitignore
├── jsconfig.json
├── README.md
└── package.json


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rkshaon/vue3-landing-page/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rkshaon/vue3-landing-page/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/src/routers.js:
--------------------------------------------------------------------------------
1 | import { createWebHistory, createRouter } from 'vue-router'
2 | import NavBar from './components/NavBar.vue'
3 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | const { defineConfig } = require('@vue/cli-service')
2 | module.exports = defineConfig({
3 |   transpileDependencies: true
4 | })
5 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import "bootstrap/dist/css/bootstrap.min.css"
2 | 
3 | import { createApp } from 'vue'
4 | import App from './App.vue'
5 | 
6 | createApp(App).mount('#app')
7 | 
8 | import "bootstrap/dist/js/bootstrap.js"
9 | 


--------------------------------------------------------------------------------
/src/components/AboutComponent.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="container"></div>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |     name: 'AboutComponent'
 8 | }
 9 | </script>
10 | 
11 | <style scoped>
12 | </style>


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "module": "esnext",
 5 |     "baseUrl": "./",
 6 |     "moduleResolution": "node",
 7 |     "paths": {
 8 |       "@/*": [
 9 |         "src/*"
10 |       ]
11 |     },
12 |     "lib": [
13 |       "esnext",
14 |       "dom",
15 |       "dom.iterable",
16 |       "scripthost"
17 |     ]
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # landing-page
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/src/components/FooterComponent.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <!-- <div class="container"></div> -->
 3 |     <footer class="footer py-3 bg-light mt-5 bg-dark">
 4 |         <div class="container">
 5 |             <span class="text-white">
 6 |                 Place sticky footer
 7 |             </span>
 8 |         </div>
 9 |     </footer>
10 | </template>
11 | 
12 | <script>
13 | export default {
14 |     name: 'FooterComponent'
15 | }
16 | </script>
17 | 
18 | <style scoped></style>


--------------------------------------------------------------------------------
/src/components/CallToAction.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="container">
 3 |         <div class="row">
 4 |             <div class="col">
 5 |                 <div class="bg-secondary text-white my-3 py-3 card">
 6 |                     <div class="card-body">
 7 |                         This is call to action component.
 8 |                     </div>
 9 |                 </div>
10 |             </div>
11 |         </div>
12 |     </div>
13 | </template>
14 | 
15 | <script>
16 | export default {
17 |     name: 'CallToAction',
18 |     props: {
19 |         msg: String
20 |     }
21 | }
22 | </script>
23 | 
24 | <style scoped>
25 | </style>


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <NavBar />
 3 |   <JumbotronComponent />
 4 |   <CallToAction />
 5 |   <CardsBox />
 6 |   <FooterComponent />
 7 | </template>
 8 | 
 9 | <script>
10 | 
11 | import NavBar from './components/NavBar.vue'
12 | import JumbotronComponent from './components/JumbotronComponent.vue'
13 | import CallToAction from './components/CallToAction.vue'
14 | import CardsBox from './components/CardsBox.vue'
15 | import FooterComponent from './components/FooterComponent.vue'
16 | 
17 | export default {
18 |   name: 'App',
19 |   components: {
20 |     NavBar,
21 |     JumbotronComponent,
22 |     CallToAction,
23 |     CardsBox,
24 |     FooterComponent
25 |   }
26 | }
27 | </script>
28 | 
29 | <style>
30 | #app {
31 |   font-family: Avenir, Helvetica, Arial, sans-serif;
32 |   -webkit-font-smoothing: antialiased;
33 |   -moz-osx-font-smoothing: grayscale;
34 |   text-align: center;
35 |   color: #2c3e50;
36 | }
37 | </style>
38 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "landing-page",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "@popperjs/core": "^2.11.6",
12 |     "bootstrap": "^5.2.3",
13 |     "core-js": "^3.8.3",
14 |     "vue": "^3.2.13",
15 |     "vue-router": "^4.1.6"
16 |   },
17 |   "devDependencies": {
18 |     "@babel/core": "^7.12.16",
19 |     "@babel/eslint-parser": "^7.12.16",
20 |     "@vue/cli-plugin-babel": "~5.0.0",
21 |     "@vue/cli-plugin-eslint": "~5.0.0",
22 |     "@vue/cli-service": "~5.0.0",
23 |     "eslint": "^7.32.0",
24 |     "eslint-plugin-vue": "^8.0.3"
25 |   },
26 |   "eslintConfig": {
27 |     "root": true,
28 |     "env": {
29 |       "node": true
30 |     },
31 |     "extends": [
32 |       "plugin:vue/vue3-essential",
33 |       "eslint:recommended"
34 |     ],
35 |     "parserOptions": {
36 |       "parser": "@babel/eslint-parser"
37 |     },
38 |     "rules": {}
39 |   },
40 |   "browserslist": [
41 |     "> 1%",
42 |     "last 2 versions",
43 |     "not dead",
44 |     "not ie 11"
45 |   ]
46 | }
47 | 


--------------------------------------------------------------------------------
/src/components/JumbotronComponent.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <div class="row">
 4 |       <div class="col-md-7">
 5 |         <img src="https://picsum.photos/id/237/600/400" alt="">
 6 |       </div>
 7 |       <div class="col-md-5">
 8 |         <h1 class="font-weight-light">Tagline</h1>
 9 |         <p class="mt-4">Paragraphs are the building blocks of papers. Many students define paragraphs in terms of length: a paragraph is a group of at least five sentences, a paragraph is half a page long, etc. In reality, though, the unity and coherence of ideas among sentences is what constitutes a paragraph. A paragraph is defined as “a group of sentences or a single sentence that forms a unit” (Lunsford and Connors 116). Length and appearance do not determine whether a section in a paper is a paragraph. For instance, in some styles of writing, particularly journalistic styles, a paragraph can be just one sentence long. Ultimately, a paragraph is a sentence or group of sentences that support one main idea. In this handout, we will refer to this as the “controlling idea,” because it controls what happens in the rest of the paragraph.</p>
10 |         <button class="btn btn-primary">Call to action!</button>
11 |       </div>
12 |     </div>
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 | export default {
18 |   name: 'JumbotronComponent',
19 |   props: {
20 |     msg: String
21 |   }
22 | }
23 | </script>
24 | 
25 | <!-- Add "scoped" attribute to limit CSS to this component only -->
26 | <style scoped>
27 | </style>
28 | 


--------------------------------------------------------------------------------
/src/components/NavBar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
 3 |   <div class="container-fluid">
 4 |     <a class="navbar-brand" href="#">Navbar</a>
 5 |     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
 6 |       <span class="navbar-toggler-icon"></span>
 7 |     </button>
 8 |     <div class="collapse navbar-collapse" id="navbarSupportedContent">
 9 |       <ul class="navbar-nav me-auto mb-2 mb-lg-0">
10 |         <li class="nav-item">
11 |           <a class="nav-link active" aria-current="page" href="#">Home</a>
12 |         </li>
13 |         <li class="nav-item">
14 |           <a class="nav-link" href="#">About</a>
15 |         </li>
16 |         <li class="nav-item dropdown">
17 |           <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
18 |             Dropdown
19 |           </a>
20 |           <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
21 |             <li><a class="dropdown-item" href="#">Action</a></li>
22 |             <li><a class="dropdown-item" href="#">Another action</a></li>
23 |             <li><hr class="dropdown-divider"></li>
24 |             <li><a class="dropdown-item" href="#">Something else here</a></li>
25 |           </ul>
26 |         </li>
27 |         <li class="nav-item">
28 |           <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
29 |         </li>
30 |       </ul>
31 |       <form class="d-flex">
32 |         <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
33 |         <button class="btn btn-outline-success" type="submit">Search</button>
34 |       </form>
35 |     </div>
36 |   </div>
37 | </nav>
38 | </template>
39 | 
40 | <script>
41 | export default {
42 |   name: 'NavBar',
43 |   props: {
44 |     msg: String
45 |   }
46 | }
47 | </script>
48 | 
49 | <!-- Add "scoped" attribute to limit CSS to this component only -->
50 | <style scoped>
51 | </style>
52 | 


--------------------------------------------------------------------------------
/src/components/CardsBox.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="container">
 3 |         <div class="row">
 4 |             <div class="col-md-4">
 5 |                 <div class="card" style="width: 18rem;">
 6 |                     <img class="card-img-top" src="https://picsum.photos/id/200/320/200" alt="Card image cap">
 7 |                     <div class="card-body">
 8 |                         <h5 class="card-title">Card title</h5>
 9 |                         <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
10 |                             content.</p>
11 |                         <a href="#" class="btn btn-primary">Go somewhere</a>
12 |                     </div>
13 |                 </div>
14 |             </div>
15 |             <div class="col-md-4">
16 |                 <div class="card" style="width: 18rem;">
17 |                     <img class="card-img-top" src="https://picsum.photos/id/201/320/200" alt="Card image cap">
18 |                     <div class="card-body">
19 |                         <h5 class="card-title">Card title</h5>
20 |                         <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
21 |                             content.</p>
22 |                         <a href="#" class="btn btn-primary">Go somewhere</a>
23 |                     </div>
24 |                 </div>
25 |             </div>
26 |             <div class="col-md-4">
27 |                 <div class="card" style="width: 18rem;">
28 |                     <img class="card-img-top" src="https://picsum.photos/id/203/320/200" alt="Card image cap">
29 |                     <div class="card-body">
30 |                         <h5 class="card-title">Card title</h5>
31 |                         <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
32 |                             content.</p>
33 |                         <a href="#" class="btn btn-primary">Go somewhere</a>
34 |                     </div>
35 |                 </div>
36 |             </div>
37 |         </div>
38 |     </div>
39 | </template>
40 | 
41 | <script>
42 | export default {
43 |     name: 'CardsBox'
44 | }
45 | </script>
46 | 
47 | <style scoped>
48 | </style>


--------------------------------------------------------------------------------