Skip to content

Landing page from a Figma project. App Build with React and Tailwind

License

Notifications You must be signed in to change notification settings

JuanPabloDiaz/landingZone

Repository files navigation

Landing Zone 🚀

This is a landing page for a company that offers services for the development of web applications, mobile applications, and software development.

Description 💡

This project was created with the purpose of practicing the use of Tailwind CSS and the use of React. The design and images were based on a Figma project.

demo Figma repo

Project Structure for React App

The idea of this graph is to show how you can structure files by using folders

├── node_modules (.gitignore)
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── src
│   ├── assets
│   │   │   ├── images
│   │   │   └── logo.svg
│   ├── components
│   │   ├── Hero.jsx
│   │   ├── Services.jsx
│   │   ├── Services-info.jsx
│   │   ├── About.jsx
│   │   ├── Testimonials.jsx
│   │   ├── Projects.jsx
│   │   ├── Team.jsx
│   │   ├── Company.jsx
│   │   └── Footer.jsx
│   ├── index.css
│   ├── index.js
│   └── App.jsx
├── .gitignore
├── package-lock.json
├── package.json
├── tailwind.config.js
└── README.md

Desktop View 🖥️

iPad view 📱

Mobile view 📱

Lighthouse Score 🚀

Features:

  • Responsive design: this project adapts to any screen size, ensuring a consistent and enjoyable experience for all users.
  • Sleek and modern UI: Tailwind CSS provides a beautiful and intuitive user interface.

Built With 🔑

This project was bootstrapped with Create React App.

React Tailwind-CSS

Here's a closer look at the tech stack:

  • Front-End: React.js & Tailwind CSS
  • Back-End: N/A
  • Deployment: Vercel

Get started 🛠️

To get started with this landing page, simply clone the repository and follow the setup instructions. You'll be up and running in no time!

Setup 📋

  1. Clone the repo
  2. Install dependencies
    npm install
  3. Start the project
    npm start
  4. Open http://localhost:3000/ with your browser to see the result.

Available Scripts

In the project directory, you can run:

  • npm start
  • npm test
  • npm run build
  • npm run eject
  • npm run lighthouse

Contribution 🤝

All contributions are welcome. Please read the CONTRIBUTING guidelines for details on our code of conduct, and the process for submitting pull requests.

Contributors

License 📜

Landing Zone is licensed under the MIT License.

I hope you enjoy using the 25 + 5 Clock!

Other Projects 🚀

Contact 📞

Acknowledgments 📚

Resources list that I find helpful and would like to give credit to.

(👆 Top 👆)

About

Landing page from a Figma project. App Build with React and Tailwind

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks