Nike E-commerce website Used AI

Build About page with Parallax Scrolling
Fix some UI and complete the project

Setup New Route for /cloths

Added a dedicated route using react-router-dom.

Route: /cloths → renders <ClothsPage /> component.

Created ClothsPage Component

Converted static HTML structure of the Cloths page into a fully functional React component.

Used map() to render product cards dynamically for scalability.

Built Dynamic Product Cards

Implemented interactive image-switch-on-hover behavior.

The main product image dynamically updates when user hovers over thumbnails.

Applied original card styles to maintain 1:1 UI consistency with the old design.
Responsive Layout

Ensured the grid remains mobile-friendly using Bootstrap’s responsive grid system.

Cards stack properly on smaller screens while remaining centered.

Today I designed and integrated the Testimonial, FAQ, New Article, Newsletter, Call-to-Action, and Footer sections for the NIKE-themed React website using modern UI practices and Bootstrap 5.
FAQ Section
Created a two-column layout to answer frequently asked questions.
Clean typography and spacing.
Used Bootstrap Grid for responsive layout.
Book a Slot (CTA) Section
Integrated a visually strong call-to-action section with background image and text overlay.
Background image added using CSS.
Flex and Grid for text and button alignment.

Newsletter Section
Built a stylish newsletter subscription form.
Email input + Subscribe button.
Hover focus effect for form field using CSS.
Section centered on page with responsive behavior.

Footer Section
Completed the home page with a neat footer. Navigation links and social media icons.
Added Font Awesome for icons.
Custom color, spacing, and layout polish.

Feature Built: New Article Showcase Section
I introduced a rich, interactive “New Article” section that mimics a real product preview experience.

Here’s what was implemented:

A vertical image stack of five thumbnails using Flexbox — each image clickable.

On clicking any thumbnail, the main preview image updates dynamically, simulating a gallery.

Responsive layout — side-by-side on larger screens and stacked gracefully on mobile.
Feature Built: Customer Testimonial Carousel
Smooth Bootstrap carousel integration in React using indicators and slide animations.

Avatar-based user reviews with role titles like “UX Designer” and “Frontend Developer.”

Custom layout with rounded cards, spacing, and colored backgrounds to stay visually engaging.

Fully mobile-optimized — looks great on all screen sizes.
Centralized section heading and carousel dots for easy navigation.

1. Counter Section with Animation built the Counter Section

Integrated a scroll-triggered animation that increases numbers dynamically using useEffect and setInterval.

Used Bootstrap grid to maintain layout.

Counter values and icons match original (e.g., Total Sales, Happy Clients).

1. Product Cards Section Display cards in 2 rows. Maintain equal card heights and width Proper spacing, padding, and responsive behavior included. Used custom CSS along with Bootstrap for perfect alignment and scaling.

Features Implemented:
React-based circle menu with images rotating on button click.
Image slider that syncs with rotation and loops seamlessly.
Fully responsive layout, maintaining pixel-perfect fidelity with the original UI.
Button interactivity for previous/next transitions.

Project initialized using Vite + React

Created folder structure with /components, /assets, and public/Images

Set up Bootstrap and AOS for animations

Built responsive Navbar as a separate React component (Navbar.jsx)

Build Hero Section