Product Details - Copy this React, Tailwind Component to your project

Hero Section: Full width section with a high quality product image gallery (main image + thumbnails). Include a zoom feature on hover and image slider with navigation dots. Layout: Flexbox for responsive image arrangement. Product Details Section: Product Title: Centered, bold, and large font size. Product Description: Brief, concise text block with clear typography. Product Specifications: Bullet points for easy readability. Key Features Section: Highlight 3 4 key features with icons and short descriptions. Use a carousel if more than four features. Icons should be relevant and visually appealing. Ensure touch friendly swipe on mobile. Customer Reviews Section: Display 2 3 latest reviews with star ratings and user names. Overall rating display with average stars and total reviews. Include a "Write a Review" button. Call to Action (CTA) Section: Prominent "Add to Cart" button with contrasting color. Include a "Add to Wishlist" option. Price display: Large, bold, and above the CTA button. Footer Section: Quick links to customer service, returns, and shipping information. Color scheme: Dark background with light text for contrast. Responsive Design: Ensure all elements adjust for mobile viewing. Use media queries for different screen sizes. Optimize images and buttons for touch interaction. Color Scheme: Main colors: Neutral tones to highlight the product. Accent color for buttons and interactive elements. Consistent use of brand colors. Typography: Clean sans serif font for body text. Bold font for headings and titles. Proper hierarchy in font sizes. Spacing: Adequate padding around all elements. White space for readability and aesthetics. Consistent margins throughout the page. Interactive Elements: Hover effects on buttons and image thumbnails. Smooth transitions for image zoom and slider. Clear visual feedback for user interactions.