Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nishkarsh25/mylandingpage
MyLandingPage is a React-based landing page template designed to showcase a fictitious web hosting service called Hosterr. It provides a visually appealing layout with a header, body, and footer components, each serving specific purposes to engage users and encourage them to sign up for the service.
https://github.com/nishkarsh25/mylandingpage
javascript reactjs tailwindcss usestate-hook
Last synced: about 1 month ago
JSON representation
MyLandingPage is a React-based landing page template designed to showcase a fictitious web hosting service called Hosterr. It provides a visually appealing layout with a header, body, and footer components, each serving specific purposes to engage users and encourage them to sign up for the service.
- Host: GitHub
- URL: https://github.com/nishkarsh25/mylandingpage
- Owner: nishkarsh25
- License: bsd-3-clause
- Created: 2024-03-24T14:48:44.000Z (11 months ago)
- Default Branch: master
- Last Pushed: 2024-08-20T19:25:03.000Z (6 months ago)
- Last Synced: 2024-11-21T11:08:19.486Z (3 months ago)
- Topics: javascript, reactjs, tailwindcss, usestate-hook
- Language: JavaScript
- Homepage: https://mylandingpage-9ruc.onrender.com/
- Size: 57.6 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# MyLandingPage
MyLandingPage is a React-based landing page template designed to showcase a fictitious web hosting service called Hosterr. It provides a visually appealing layout with a header, body, and footer components, each serving specific purposes to engage users and encourage them to sign up for the service.
## Features
### Header
The header section consists of the following elements:
- **Company Logo:** Displayed prominently at the top-left corner, providing brand recognition.
- **Call-to-Action Button:** A button labeled "Hosterr is hiring" designed to attract potential employees or collaborators.
- **Navigation Links:** Links to different sections of the website, such as Plans, Find Domain, and Why Hosterr.
- **Sign In/Join WaitList:** Options for users to sign in or join the waitlist. The "Join WaitList" button serves as the primary call-to-action for new users.
### Body
The body section serves as the main content area of the landing page, featuring:
- **Hero Section:** A visually striking section showcasing the main value proposition of Hosterr. It includes an image depicting website hosting services and a concise headline promoting the ease and speed of website hosting.
- **Description:** A brief description highlighting the key benefits of using Hosterr, such as quick setup and competitive pricing.
- **Email Subscription Form:** A form where users can enter their email addresses to join the waitlist. It features an input field for email addresses and a "Join Waitlist" button for submission.
- **No Spam Disclaimer:** A statement reassuring users that their email addresses will not be used for spam and that they can unsubscribe at any time.
### Footer
The footer section is designed to provide additional information and contact options:
- **Social Media Links:** Links to Hosterr's social media profiles on Facebook, Instagram, and Twitter, enabling users to stay connected and engaged.
- **Contact Option:** An option for users to talk to a specialist if they have any questions or need assistance. It includes an avatar image and a link to initiate contact.
## Live Demo
You can try out the live demo of the app [here](https://mylandingpage-9ruc.onrender.com).
## Screenshots
# GIF's
## Installation
To run this project locally, follow these steps:
1. Clone the repository:
```
https://github.com/nishkarsh25/MyLandingPage.git
```
2. Navigate to the project directory:
```
cd MyLandingPage
```
3. Install dependencies:
```
npm create vite@latest
https://tailwindcss.com/docs/installation/using-postcss
```
4. Start the development server:
```
npm run dev
```
5. Open [http://localhost:5173](http://localhost:5173) to view it in the browser.
## Technologies Used
MyLandingPage utilizes the following technologies:
- **React:** A JavaScript library for building user interfaces.
- **Tailwind CSS:** A utility-first CSS framework for styling, enabling rapid UI development.
- **React Icons:** A library of popular icons as React components, used for displaying icons throughout the application.
## Folder Structure
The project directory structure is organized as follows:
```
MyLandingPage/
│
├── public/
│ ├── assets/
│ │ ├── Blue Shape.svg
│ │ ├── Pink Shape.svg
│ │ ├── Purple Shape.svg
│ │ ├── Hero Image (Model).png
│ │ ├── Checkmark.svg
│ │ ├── Help Avatar.svg
│ │ └── Logo.svg
│ └── index.html
│
├── src/
│ ├── Components/
│ │ ├── Header.jsx
│ │ ├── Body.jsx
│ │ └── Footer.jsx
│ ├── App.jsx
│ └── index.js
│
├── screenshots/
│ ├── screenshot.png
│ └── demo.gif
│
├── .gitignore
├── package-lock.json
├── package.json
└── README.md
```
## React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
## Contributing
Contributions are welcome! If you'd like to contribute to this project, please follow these steps:
1. **Fork the Repository**.
2. **Create a New Branch** (`git checkout -b feature/your-feature-name`).
3. **Make Your Changes**.
4. **Commit Your Changes** (`git commit -am 'Add some feature'`).
5. **Push to the Branch** (`git push origin feature/your-feature-name`).
6. **Create a New Pull Request**.
## License
This project is licensed under the [The 3-Clause BSD License](LICENSE).
## Author
- **Nishkarsh Gupta**
- GitHub: [nishkarsh25](https://github.com/nishkash25)
- Email: [email protected]