MS
Mohammad Shero

Products - Copy this React, Tailwind Component to your project

Design a product showcase page in a clean and minimal Apple style. šŸ”¹ Layout (fixed): – Split the page into two columns: • Left column: Product text (small Apple logo, product name, short description, price, and a small icon row at the bottom). • Right column: Product carousel (image showcase). šŸ”¹ Product Carousel (right side): – Always show 3 product images at the same time, vertically aligned: • One main product in the center (large size, sharp, no blur). • One product above the main one (~65–70% size, with blur filter + lower opacity). • One product below the main one (same size and blur/opacity as the top one). – The entire product block should be centered and use around 60% of the page width. šŸ”¹ Animation behavior (every 2–3 seconds): – Perform a vertical circular rotation between the three products: • The product in the center moves down to the bottom position and gets blur + lower opacity. • The product at the top moves into the center and becomes sharp/high opacity with a scale animation. • The product at the bottom moves to the top and keeps the blur + low opacity. – Use smooth transitions (scale + opacity + blur animation). šŸ”¹ Text content updates (left column): – On each rotation, update the whole left column to reflect the current centered product: • Small Apple logo • Product name (large / bold) • Short description (regular weight) • Price (slightly larger) • A small row of icons below the price (social / actions) šŸ”¹ Background color: – The background color of the page must change with each rotation to match the color of the centered product (example: blue product → light blue background, pink product → light pink background, green product → light green background). šŸ”¹ General design rules: – Clean, calm and minimal (Apple Marketing style). – Use a light Sans Serif font (SF Pro / Inter). – No borders. – Add a very subtle box shadow only on the centered product to enhance depth. – Desktop first (responsive later). šŸ”¹ Example products (initial list): Apple AirPods Max – Blue Apple AirPods Max – Pink Apple AirPods Max – Green

Prompt
Component Preview

About

products - Showcase products in a clean, minimal style with a rotating carousel, dynamic text updates, and color-matching backgrounds.. Get component free!

Share

Last updated 1 month ago