Nike Landing Page

Description

This project is a modern, responsive landing page for Nike, built using React and Vite. It showcases the power of combining fast development with Vite, the flexibility of React, and the utility-first approach of Tailwind CSS to create a sleek and performant web experience.

Visit the live site: https://nike-landing-page-chi.vercel.app/

Features

• ⚡ Lightning fast loading with Vite
• 🎨 Responsive design using Tailwind CSS
• 🖥️ Modern UI showcasing Nike products
• 📱 Mobile-friendly layout
• 🔧 Easy to customize and extend

Technologies Used

• React - A JavaScript library for building user interfaces
• Vite - Next Generation Frontend Tooling
• Tailwind CSS - A utility-first CSS framework
• Vercel - Platform for deploying and hosting

Prerequisites

• Node.js (v14 or later)
• npm or yarn

Installation

1. Clone the repository:

   git clone https://github.com/yusrilprayoga-code/nike-landing-page.git
   cd nike-landing-page
   

2. Install dependencies:

   npm install
   

   or

   yarn install
   

3. Run the development server:

   npm run dev
   

   or

   yarn dev
   

4. Open http://localhost:5173 in your browser to see the application.

Usage

Customizing Content

1. Navigate to the src/components directory.
2. Edit the React components to update the content and structure.

Modifying Styles

1. Tailwind classes can be modified directly in the component files.
2. For custom styles, edit the src/index.css file.

Adding New Sections

1. Create a new component in the src/components directory.
2. Import and add the component to src/App.jsx.

Deploying

This project is set up for easy deployment on Vercel:

1. Push your changes to your GitHub repository.
2. Connect your repository to Vercel.
3. Vercel will automatically deploy your site on every push to the main branch.

Project Structure

├── public/         # Static assets
├── src/
│   ├── components/ # React components
│   ├── assets/     # Images and other assets
│   ├── App.jsx     # Main App component
│   └── index.css   # Global styles and Tailwind directives
├── index.html      # Entry HTML file
├── vite.config.js  # Vite configuration
├── tailwind.config.js # Tailwind CSS configuration
└── README.md       # This file

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is open source and available under the MIT License.

Acknowledgements

• Nike for the inspiration and branding elements
• Vite Documentation for the excellent guides
• Tailwind CSS Documentation for comprehensive utility class references
• React Documentation for React guides and references

Developed with ❤️ by Yusril Prayoga.