├── .env.example ├── .gitignore ├── .vscode └── extensions.json ├── README.md ├── index.html ├── jsconfig.json ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── favicon.ico └── images │ ├── samples │ └── v1 │ │ ├── authors │ │ └── sample.jpg │ │ ├── chapters │ │ └── ebook-cover.png │ │ ├── guarantee │ │ ├── 10-days.png │ │ ├── 15-days.png │ │ ├── 30-days.png │ │ └── 7-days.png │ │ └── heros │ │ ├── cover-ebook.png │ │ ├── cover.png │ │ ├── ebook-cover-2.png │ │ └── ebook-cover.png │ └── thumbs │ └── v1 │ ├── authors │ └── image-left.png │ ├── buy │ └── simple.png │ ├── chapters │ └── collapse.png │ ├── faq │ ├── collapse.png │ └── list.png │ ├── features │ ├── grid-3-old.png │ └── grid-3.png │ ├── guarantee │ ├── 10-days.png │ ├── 15-days.png │ ├── 30-days.png │ └── 7-days.png │ └── heroes │ ├── form-right.png │ ├── image-right.png │ └── video-center.png ├── src ├── App.vue ├── Assets │ └── logo.png ├── Components │ ├── Alert.vue │ ├── Blocks │ │ ├── Author │ │ │ ├── AuthorImageLeft.vue │ │ │ └── AuthorImageLeftOptions.vue │ │ ├── BlockGroup.vue │ │ ├── BlockPreviewer.vue │ │ ├── BlockWrapper.vue │ │ ├── Buy │ │ │ ├── BuySimple.vue │ │ │ └── BuySimpleOptions.vue │ │ ├── Chapters │ │ │ ├── ChaptersCollapse.vue │ │ │ └── ChaptersCollapseOptions.vue │ │ ├── FAQ │ │ │ ├── FAQCollapse.vue │ │ │ ├── FAQCollapseOptions.vue │ │ │ ├── FAQList.vue │ │ │ └── FAQListOptions.vue │ │ ├── Features │ │ │ ├── FeaturesGrid3.vue │ │ │ └── FeaturesGrid3Options.vue │ │ ├── Guarantees │ │ │ ├── Guarantee10Days.vue │ │ │ ├── Guarantee10DaysOptions.vue │ │ │ ├── Guarantee15Days.vue │ │ │ ├── Guarantee15DaysOptions.vue │ │ │ ├── Guarantee30Days.vue │ │ │ ├── Guarantee30DaysOptions.vue │ │ │ ├── Guarantee7Days.vue │ │ │ └── Guarantee7DaysOptions.vue │ │ └── Heroes │ │ │ ├── HeroFormLeft.vue │ │ │ ├── HeroFormLeftOptions.vue │ │ │ ├── HeroImageLeft.vue │ │ │ ├── HeroImageLeftOptions.vue │ │ │ ├── HeroVideoCenter.vue │ │ │ └── HeroVideoCenterOptions.vue │ ├── BreakPointHelper.vue │ ├── Icon.vue │ ├── ImageCard.vue │ ├── ImageSelect.vue │ ├── ImageSelectModal.vue │ ├── ImageUploadButton.vue │ └── Navbar.vue ├── Layouts │ ├── App.vue │ ├── Auth.vue │ ├── Builder.vue │ └── Marketing.vue ├── Pages │ ├── App │ │ ├── App.vue │ │ ├── Dashboard │ │ │ ├── Components │ │ │ │ └── LandingPageCard.vue │ │ │ └── Index.vue │ │ ├── ImageGallery │ │ │ └── Index.vue │ │ ├── LandingPages │ │ │ └── Create.vue │ │ └── PageBuilder │ │ │ ├── Builder.vue │ │ │ └── Preview.vue │ ├── Auth │ │ ├── Login.vue │ │ └── Register.vue │ └── Public │ │ ├── LandingPage │ │ └── View.vue │ │ └── Marketing │ │ └── Home.vue ├── Utils │ ├── action-types.js │ ├── api.js │ ├── blocks.js │ ├── middleware.js │ ├── mutation-types.js │ ├── router.js │ └── store.js ├── index.css └── main.js ├── tailwind.config.js └── vite.config.js /.env.example: -------------------------------------------------------------------------------- 1 | VITE_APP_ENV=local 2 | VITE_APP_DEBUG=true 3 | VITE_BACKEND_BASE_URL=http://localhost -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | .env -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["johnsoncodehk.volar"] 3 | } 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # EZ Landing Page Builder 2 | 3 | ## The app 4 | 5 | Simple web app to easily create landing pages by dragging and dropping prebuilt blocks. 6 | 7 | Each block makes available a set of options to easily customize its content. 8 | 9 | Users don't need to write a single line of code. 10 | 11 | ## Video demo (click to go to YouTube) 12 | 13 | [](https://www.youtube.com/watch?v=4MfJ4UAkQjg) 14 | 15 | ## The stack 16 | 17 | ### Frontend 18 | 19 | 1. [Vue.js 3](https://v3.vuejs.org/) + [Vuex 4](https://vuex.vuejs.org/) + [Vue Router 4](https://router.vuejs.org/) 20 | 2. [Vite.js](https://vitejs.dev/) 21 | 3. [Tailwind CSS 3](https://tailwindcss.com/) + [Daisy UI](https://daisyui.com/) 22 | 5. [Sortable.js](https://github.com/SortableJS/vue.draggable.next) 23 | 24 | ### Backend 25 | 26 | 1. [Laravel 8](https://laravel.com/docs/8.x) 27 | 2. [Laravel Sail](https://laravel.com/docs/8.x/sail) 28 | 3. [Laravel Sanctum](https://laravel.com/docs/8.x/sanctum) 29 | 4. [Laravel Fortify](https://laravel.com/docs/8.x/fortify) 30 | 31 | ## Setting up the backend 32 | 33 | 1. Clone the repo and navigate to the directory 34 | ``` 35 | git clone git@github.com:isaac-souza/pagebuilder-laravel.git 36 | cd pagebuilder-laravel 37 | ``` 38 | 2. Copy the sample .env file 39 | ``` 40 | cp .env.example .env 41 | ``` 42 | 3. Install the dependencies (requires at least PHP 8.0) 43 | ``` 44 | composer install 45 | ``` 46 | 4. Start Laravel Sail (needs Docker installed in your system) 47 | ``` 48 | vendor/bin/sail up 49 | ``` 50 | 5. Generate key, run the migrations and link the storage folder 51 | ``` 52 | vendor/bin/sail artisan key:generate 53 | vendor/bin/sail artisan migrate --seed 54 | vendor/bin/sail artisan storage:link 55 | ``` 56 | 6. Run the tests 57 | ``` 58 | vendor/bin/sail artisan test 59 | ``` 60 | 7. The backend should be available at 61 | ``` 62 | http://localhost 63 | ``` 64 | 65 | ## Setting up the frontend 66 | 67 | 1. Clone the repo and navigate to the directory 68 | ``` 69 | git clone git@github.com:isaac-souza/pagebuilder-vue3.git 70 | cd pagebuilder-vue3 71 | ``` 72 | 2. Install the dependencies 73 | ``` 74 | npm install 75 | ``` 76 | 3. Copy the sample .env file 77 | ``` 78 | cp .env.example .env 79 | ``` 80 | 4. Start the dev server 81 | ``` 82 | npm run dev 83 | ``` 84 | 5. The frontend should be available at 85 | ``` 86 | http://localhost:3000 87 | ``` 88 | 89 | ## Testing 90 | 91 | Now you should be able to go to http://localhost:3000, access the login page and sign in into the app 92 | 93 | ## My development environment 94 | 95 | OS: 96 | ``` 97 | No LSB modules are available. 98 | Distributor ID: Ubuntu 99 | Description: Ubuntu 18.04.6 LTS 100 | Release: 18.04 101 | Codename: bionic 102 | ``` 103 | 104 | Docker: 105 | ``` 106 | Docker version 20.10.12, build e91ed57 107 | ``` 108 | 109 | Docker-compose: 110 | ``` 111 | docker-compose version 1.29.2, build 5becea4c 112 | ``` 113 | 114 | PHP: 115 | ``` 116 | PHP 8.0.15 (cli) (built: Jan 29 2022 07:24:35) ( NTS ) 117 | Copyright (c) The PHP Group 118 | Zend Engine v4.0.15, Copyright (c) Zend Technologies 119 | with Zend OPcache v8.0.15, Copyright (c), by Zend Technologies 120 | ``` 121 | Composer 122 | ``` 123 | Composer version 2.1.6 2021-08-19 17:11:08 124 | ``` 125 | Node 126 | ``` 127 | v14.19.0 128 | ``` 129 | NPM 130 | ``` 131 | 6.14.16 132 | ``` -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 | 7 |18 | {{ block.data.description }} 19 |
20 |10 | {{ block.data.subtitle }} 11 |
12 |{{ chapter.description }}
21 |46 | {{ truncateText(chapter.title) }} 47 | | 48 |49 | 52 | | 53 |
{{ faq.answer }}
18 |45 | {{ truncateText(faq.question) }} 46 | | 47 |48 | 51 | | 52 |
{{ faq.answer }}
17 |45 | {{ truncateText(faq.question) }} 46 | | 47 |48 | 51 | | 52 |
16 | {{ item.description }} 17 |
18 |46 | {{ truncateText(feature.title) }} 47 | | 48 |49 | 52 | | 53 |
18 | {{ block.data.description }} 19 |
20 |18 | {{ block.data.description }} 19 |
20 |18 | {{ block.data.description }} 19 |
20 |18 | {{ block.data.description }} 19 |
20 |{{ nameClipped }}
5 |The easiest way to create a sleek landing page for your digital product.
13 | 14 |33 | It's never been easier to build a landing page to sell your digital products. 34 |
35 |62 | Check out our list of awesome features below. 63 |
64 |You build your page by simply dragging and dropping our premade blocks.
71 |You won't have to write a single line of code, it's all configuration driven.
78 |It's insanelly easy to customize any blocks with simple to adjust options.
85 |Our EasyMode allows you to create a whole page in 5 mins or less.
92 |Our blocks are prebuilt and ready to be used with minimal configuration.
99 |Integrate your page with the most common marketing automation tools.
106 |119 | Pricing to fit the needs of any companie size. 120 |
121 |130 | $5 131 |
132 |133 | / month 134 |
135 |137 | Ideal for Startups and Small Companies 138 |
139 |165 | $15 166 |
167 |168 | / month 169 |
170 |172 | Ideal for medium to larger businesses 173 |
174 |204 | $25 205 |
206 |207 | / month 208 |
209 |211 | Ideal for larger and enterprise companies 212 |
213 |246 | Use our award-winning tools to help you maximize your profits. We've uncovered the correct recipe for converting visitors into customers. 247 |
248 |263 | Got a Question? We have the answer 264 |
265 |270 | No need to spend extra money, we give you a subdomain for free. 271 |
272 |278 | No need to spend extra money, we give you a subdomain for free. 279 |
280 |286 | No need to spend extra money, we give you a subdomain for free. 287 |
288 |294 | No need to spend extra money, we give you a subdomain for free. 295 |
296 |Building Businesses
306 |310 | You will never go back to the old way of creating landing pages. 311 |
312 |Already have an account?
322 |
© 2022 EZ LandingPage
334 | 335 | 336 | Facebook 337 | 340 | 341 | 342 | Instagram 343 | 346 | 347 | 348 | Twitter 349 | 352 | 353 | 354 | GitHub 355 | 358 | 359 | 360 | Dribbble 361 | 364 | 365 | 366 |