Project taikai page

https://taikai.network/ethireland/hackathons/ethdubs2024/projects/clwv16yw10314uy01ostce6wq/idea

Plutus Website Creation using WebStudio (Best Tool)

Overview

For the record webstudio tool have saved us alot of time to buil and deploy our landing page, part of the bounty goals in ETHDublin hackathon. This guide explains how we utilized the WebStudio tool to easily generate the Plutus webpage. WebStudio is a powerful web design tool that allows users to create and customize websites with ease, using a visual editor and pre-built components.

Steps to Create the Webpage

1. Accessing WebStudio

First, visit WebStudio and log in to your account. If you don't have an account, you will need to sign up for one.

2. Starting a New Project

Once logged in, start a new project by clicking the "New Project" button. Give your project a name, for instance, "Plutus Website."

3. Setting Up the Page

In the project dashboard, set up the basic structure of your webpage. Define the main sections of your site:

• Navigation Bar
• Hero Section
• Features Section
• Testimonials Section
• Footer Section

4. Adding and Customizing Components

Use the drag-and-drop interface to add various components to your webpage. Customize each component using the properties panel.

Navigation Bar

• Add a navigation bar component.
• Upload your logo using the image component.
• Add navigation links and buttons as needed.

Hero Section

• Add a hero section with a large title, subtitle, and a call-to-action button.
• Customize the background, text colors, and fonts.

Features Section

• Add a features section to highlight the key benefits of Plutus.
• Use columns to organize feature descriptions and icons.

Footer Section

• Add a footer section with relevant links and contact information.

5. Styling and Design

Apply custom styles using the styling panel. WebStudio supports CSS and offers a variety of built-in styles to enhance the look and feel of your site.

Example CSS

html {
    scroll-behavior: smooth;
}
* { 
    box-sizing: border-box; 
}
body {
    margin: 0;
}
.bg-gray-100 {
    background-color: rgb(249, 250, 251);
}
.text-indigo-950 {
    color: rgb(30, 27, 75);
}
.font-medium {
    font-weight: 500;
}
.shadow-md {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}