Vue School Test Project

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.

Video Guide

Before diving into the details, here's a video guide that walks you through the process of using the CMS:

Table of Contents

• Overview
• Installation
• Usage
  • Updating Hero Section
  • Managing Statistics
  • Managing Pricing Cards
• Thank You

Overview

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.

Installation

To begin using the Vue School Test Project, follow these steps:

1. Clone the repository to your local machine.
2. Navigate to the project directory.
3. Install mkcert
4. Create SSH for localhost via mkcert localhost
5. Install dependencies by running bun install.
6. Once installation is complete, start the development server with bun run dev.

Usage

Updating Hero Section

The Hero section is the focal point of your website, grabbing visitors' attention. Here's how you can update its content:

1. Access CMS Dashboard: Log in to the admin panel of your website.

2. Navigate to Hero Section: Locate the Hero block. It's under the Page->General->Body.

3. 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.

4. Save Changes: After editing, save the changes to update the Hero section on your live website.

Managing Statistics

The Statistics section showcases key metrics or achievements. Here's how you can manage it:

1. Access CMS Dashboard: Log in to the admin panel.

2. Find Statistics Section: Locate the FirstSection block. It's under the Page->General->Body.

3. Edit Content: Update the Statistics data such as value, icon and text to reflect the latest information.

4. Save Changes: Don't forget to save your edits to ensure they appear correctly on the website.

Managing Pricing Cards

Pricing Cards display various subscription plans or service offerings. Here's how to manage them:

1. Access CMS Dashboard: Log in to the admin panel.

2. Navigate to Pricing Cards: Locate the SecondSection block. It's under the Page->General->Body.

3. Edit Pricing Information: Modify the details of each pricing card, including icon, plan name and features.

4. Save Changes: Save your changes to update the pricing information on the website.

Thank You

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. ❤️