Implement free access to first block in each category with "Get Access" links for pro components

[michael-andreuzza]

Description:

We need to update the current Windstatic Pro site to allow users to access and copy the first block from every category for free. For the remaining blocks in each category, these should be locked with a clear call-to-action that encourages users to upgrade to the pro version.

Example from Tailwind UI

Requirements:

1. Free Block Access:
   • Allow users to freely view and copy the first block from every category.
   • Ensure that the free blocks are clearly marked to avoid confusion with a tag saying preview. ( see image on top )

Already done

2. Locked Blocks with CTA:
   • For all other blocks in each category, display a placeholder or overlay indicating that the block is locked.
   • Include a prominent "Get Access" link or button on these locked blocks.
   • The "Get Access" link should redirect users to the pricing page, encouraging them to upgrade to the pro version.

---

3. Technical Implementation:
   • Update the front-end logic to identify and unlock the first block in each category.
   • Implement a mechanism to lock the remaining blocks and insert the "Get Access" link/button.
   • Ensure that the "Get Access" links are correctly routed to the pricing page.

Acceptance Criteria:

• Users can successfully view and copy the first block in every category all the time.
• Locked blocks display a "Get Access" link that redirects to the pricing page.
• The feature should be tested across different devices and browsers to ensure compatibility.

Additional Notes:

• Consider adding analytics tracking ( umami events ) for clicks on the "Get Access" link to measure the effectiveness of this strategy in driving conversions. Important to be able to identify what page comes from.