AA
Ahmed Abdo

Rewards Section - Copy this React, Tailwind Component to your project

Prompt: Create a Rewards Section for a gaming website using React and TailwindCSS. The section should replicate the provided design, including colors, layout, and interactive elements. The section must include the following: 1. Overall Layout: A dark themed background with a gradient effect. A title section that reads "ALPHA Rewards" with a smaller "See in Action" link beside it. A subheading that shows the current reward level and a description with large, bold text for the reward details (e.g., "200 SAND"). 2. Reward Progress Levels: A horizontal progress bar showing different levels from Level 1 to Level 5. Each level is visually represented by a line or dot with a subtle animation when a level is completed or available. Below the progress bar, there should be reward cards for each level with images, descriptions, and icons representing different rewards (e.g., "Alpha Gate", "Alpha Sword"). 3. Reward Cards: Create cards for each reward with the following: An image of the reward item (e.g., a chest or NFT item) with a glowing border effect. Text descriptions showing the reward details (e.g., "200 SAND" or "100 SAND + 1 NFT"). A lock icon overlay for rewards that are not yet unlocked, with a hover effect that shows "Unlock" or "More Info". 4. Side Information Panel: On the right side, include a notification box that states "Alpha Season 1 is now closed" with a small description. Include social media icons (e.g., Discord, Twitter) to encourage users to stay in touch, styled with a hover effect. 5. Claim Button and Total Rewards: At the bottom right corner, add a "Maximum Total Reward" section with a large, bold text displaying the total possible reward (e.g., "1,000 SAND"). Below it, a "Claim" button that is initially disabled (grayed out), with a tooltip or hover effect that indicates the requirements to claim the reward. 6. Styling and Effects: Use TailwindCSS for styling with custom utilities for gradients, shadows, and hover effects. Utilize React Spring or Framer Motion for smooth animations, such as fading, sliding, and hover interactions. Add a parallax effect for background images and a subtle glow animation for reward icons when hovered over. 7. Responsive Design: Ensure the entire section is fully responsive on both desktop and mobile views. Adjust the layout for smaller screens to stack elements vertically or use a carousel for reward cards. 8. File Structure: components/: Contains RewardSection, RewardCard, ProgressLevel, InfoPanel, and ClaimButton. assets/: Store images and icons for the rewards and social media links. App.js: Main entry point to render the section.

Prompt
Component Preview

About

RewardsSection - Features a dark gradient background, progress levels, reward cards, and a claim button. Built with React and Tailwind. Get component free!

Share

Last updated 1 month ago