An open API service indexing awesome lists of open source software.

https://github.com/taijulaman/classroom

Welcome to the Classroom Website project, a modern and responsive educational platform showcasing courses, reviews, and contact sections. This website is built with React.js and styled using Tailwind CSS, ensuring a clean and dynamic user experience.
https://github.com/taijulaman/classroom

aos-animation open-source react-vite tailwindcss

Last synced: about 1 month ago
JSON representation

Welcome to the Classroom Website project, a modern and responsive educational platform showcasing courses, reviews, and contact sections. This website is built with React.js and styled using Tailwind CSS, ensuring a clean and dynamic user experience.

Awesome Lists containing this project

README

          

# 📚 Classroom Website

Welcome to the **Classroom Website** project, a modern and responsive educational platform showcasing courses, reviews, and contact sections. This website is built with **React.js** and styled using **Tailwind CSS**, ensuring a clean and dynamic user experience.

---

---

## 📝 **Features**

- **Responsive Design**: Fully optimized for mobile, tablet, and desktop devices.
- **Course Listings**: Interactive cards displaying different courses with hover effects.
- **Customer Reviews**: Review cards showcasing testimonials with ratings.
- **Contact Form**: User-friendly contact form with input fields for name, email, and number.
- **Smooth Animations**: Animations powered by **AOS (Animate On Scroll)** for better user experience.
- **Modern Footer**: Quick navigation links, services, and contact information.

---

## 📁 **Project Structure**

```plaintext
├── public/ # Images
│ ├── about.png
│ ├── avatar1.png
│ ├── avatar2.png
│ ├── avatar3.png

src/

├── layout/ # Reusable components
│ ├── Heading.jsx # Section headings
│ ├── Button.jsx # Custom button component
│ ├── CoursesCard.jsx
│ └── ReviewCard.jsx

├── components/ # Main sections
│ ├── Courses.jsx # Courses section
│ ├── Reviews.jsx # Customer reviews section
│ └── Contact.jsx # Contact form section

├── App.js # Main App component
├── index.js # React DOM entry point
└── tailwind.config.js # Tailwind CSS configuration
```

---

## 🛠️ **Technologies Used**

- **React.js**: Component-based architecture for building the UI.
- **Tailwind CSS**: Utility-first CSS framework for fast styling.
- **AOS Library**: Animate On Scroll for smooth animations.
- **React Icons**: Collection of modern icons for UI enhancement.

---

## 🔧 **Setup Instructions**

Follow the steps below to get the project up and running on your local machine:

### 1. **Clone the Repository**
```bash
git clone https://github.com/TAIJULAMAN/classroom.git
cd classroom-website
```

### 2. **Install Dependencies**
Make sure you have **Node.js** and **npm** installed on your machine.

```bash
npm install
```

### 3. **Run the Development Server**
```bash
npm start
```

The project will be available at:
👉 `http://localhost:5173/`

---

## 🌐 **Deployment**

To deploy the project, use services like **Netlify**, **Vercel**, or **GitHub Pages**.

For example, with **Vercel**:
1. Install Vercel CLI:
```bash
npm install -g vercel
```
2. Deploy:
```bash
vercel
```

---

---

## 👨‍💻 **Contributing**

Contributions are always welcome!
Feel free to open an issue or submit a pull request.

### Steps to Contribute:
1. Fork the repository.
2. Create a new branch:
```bash
git checkout -b feature/your-feature-name
```
3. Make your changes and commit:
```bash
git commit -m "Add: Your feature description"
```
4. Push your changes:
```bash
git push origin feature/your-feature-name
```
5. Submit a pull request.

---

## 🛡️ **License**

This project is open-source and available under the **MIT License**.
Feel free to use, modify, and distribute this project.

---

## 📞 **Contact**

If you have any questions, feedback, or suggestions, feel free to reach out:

- 📧 **Email**: mdshahamanpatwary@email.com

---

Happy Coding! 🎉 🚀
Developed with ❤️ by **Md Shah Aman Patwary**