Welcome to the Vue School Test Project! This is a Content Management System (CMS) designed to help you manage and update the content of your website effortlessly.
Before diving into the details, here's a video guide that walks you through the process of using the CMS:
The Vue School Test Project is a comprehensive CMS made with Storyblok that allows you to easily update various sections of your website, including the Hero section, Statistics, and Pricing Cards. With intuitive controls, you can make changes swiftly without any technical hassles.
To begin using the Vue School Test Project, follow these steps:
- Clone the repository to your local machine.
- Navigate to the project directory.
- Install
mkcert
- Create SSH for localhost via
mkcert localhost
- Install dependencies by running
bun install
. - Once installation is complete, start the development server with
bun run dev
.
The Hero section is the focal point of your website, grabbing visitors' attention. Here's how you can update its content:
-
Access CMS Dashboard: Log in to the admin panel of your website.
-
Navigate to Hero Section: Locate the Hero block. It's under the Page->General->Body.
-
Edit Content: You'll find fields for the main heading (title), paragraph, and Call to Action (CTA). Simply modify the text in these fields to reflect your desired changes.
-
Save Changes: After editing, save the changes to update the Hero section on your live website.
The Statistics section showcases key metrics or achievements. Here's how you can manage it:
-
Access CMS Dashboard: Log in to the admin panel.
-
Find Statistics Section: Locate the FirstSection block. It's under the Page->General->Body.
-
Edit Content: Update the Statistics data such as value, icon and text to reflect the latest information.
-
Save Changes: Don't forget to save your edits to ensure they appear correctly on the website.
Pricing Cards display various subscription plans or service offerings. Here's how to manage them:
-
Access CMS Dashboard: Log in to the admin panel.
-
Navigate to Pricing Cards: Locate the SecondSection block. It's under the Page->General->Body.
-
Edit Pricing Information: Modify the details of each pricing card, including icon, plan name and features.
-
Save Changes: Save your changes to update the pricing information on the website.
A special thank you to Vue School for providing the opportunity to take this test and for their dedication to educating developers in the Vue.js ecosystem. ❤️