This is a Nike-themed SPA built with React 19 & Vite, tailored for practicing Tailwind CSS 4.

Thanks @Adrian and JS Mastery Team for the awesome learning materails!

• Tailwind CSS 4
• React.js 19
• Framer Motion

👉 Mobile Responsive: the entire web app is responsive across various devices

👉 Theming: supported day and night themes

👉 Code Architecture & Reusability: component-oriented architecture

👉 Microanimations & Animated Sections: react to user input for smoother interaction; section animations use Framer Motion

👉 Complex Hero Section: a visually appealing hero section showcasing key elements

👉 Popular Products Showcase: a section highlighting popular Nike products

👉 Services & Quality: a section of services focused on delivering high-quality Nike products

👉 Special Offers: showcase special offers in an eye-catching manner

👉 Testimonials: a testimonials section for a captivating user experience

👉 Newsletter Integration: a newsletter section with Tailwind styling, encouraging user engagement

👉 Footer: a comprehensive footer section containing various links

Prerequisites:

• Git
• Node.js
• npm

Installation

Install the project dependencies:

npm install

Running the Project

npm start

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

npm run build

After build, serve the dist folder via a local web server or deploy it remotely.

Deploy the app under Docker locally

npm run deploy

Publishes the dist folder to a Docker container with an Nginx server.

Destroy a local deployment

npm run destroy

Desktop - White Theme

Desktop - Night Theme

Desktop - White Theme

Mobile Screens

White Theme

Night Theme