professor1345/hoobank

HooBank Page with Vite

This HooBank project is a landing page template designed to showcase various sections like Navbar, Next, Stats, Business, Billing, CardDeal, FeedBack, Clients, Service, and Footer. The project utilizes Tailwind CSS for styling and Vite for fast and efficient development.

Table of Contents

• Getting Started
• Folder Structure
• Components
• Styles
• Customization
• Contributing

Getting Started

1. Clone the repository:

   git clone https://github.com/Professor1345/Hoobank.git

2. Install dependencies:

   cd Hoobank
   npm install

3. Run the development server with Vite:

   npm run dev

   Open http://localhost:3000 in your browser to view the app.

Folder Structure

The project structure is organized as follows:

react-landing-page/
│
├── public/
│   ├── index.html
│   └── ...
│
├── src/
│   ├── components/
│   │   ├── Billing.js
│   │   ├── Business.js
│   │   ├── CardDeal.js
│   │   ├── Clients.js
│   │   ├── FeedBack.js
│   │   ├── Footer.js
│   │   ├── Navbar.js
│   │   ├── Next.js
│   │   ├── Service.js
│   │   └── Stats.js
│   │
│   ├── style/
│   │   └── tailwind.css
│   │
│   ├── App.js
│   └── main.js
│
├── ...
├── tailwind.config.js
├── vite.config.js
└── ...

Components

The project consists of various components responsible for different sections of the landing page. Here is a brief overview of each component:

• Billing: Section related to billing information.
• Business: Section showcasing business-related content.
• CardDeal: Component representing a deal card.
• Clients: Section displaying client information.
• FeedBack: Section for showcasing feedback and testimonials.
• Footer: The footer component.
• Navbar: Navigation bar for the landing page.
• Next: Section related to the "Hero" part of the page.
• Service: Section highlighting services.
• Stats: Component for displaying statistical information.

Styles

Tailwind CSS is used for styling the components. The styles are organized into specific sections based on the components they apply to. The global styles, keyframes animations, gradient styles, and custom classes are defined in the style/tailwind.css file.

Customization

Feel free to customize the content and styles based on your project requirements. Tailwind CSS classes make it easy to modify colors, margins, paddings, and other styles. Refer to the Tailwind CSS documentation for customization options.

Contributing

If you find any issues or have suggestions for improvement, feel free to open an issue or create a pull request. Contributions are always welcome!