Making our CTA buttons the same v2 #141
Conversation
WalkthroughThe recent updates involve aesthetic and functional tweaks to the buttons within the website's home and call-to-action sections. Specifically, the "Demo" and "Book a demo" buttons have been redesigned, with changes to their CSS classes, inline styling, and destination URLs. Changes
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Review Status
Actionable comments generated: 2
Configuration used: CodeRabbit UI
Files ignored due to path filters (1)
public/themes/bimbala/mix-manifest.jsonis excluded by:!**/*.json
Files selected for processing (2)
- resources/views/themes/bimbala/home.blade.php (1 hunks)
- resources/views/themes/bimbala/partials/cta.blade.php (1 hunks)
Additional comments: 2
resources/views/themes/bimbala/home.blade.php (2)
- 11-11: The "Demo" button has been updated with new classes and hover effects. Verify that the new styles are consistent with the application's design system and that the hover effects are accessible, meaning they should be distinguishable for users with visual impairments.
Verification successful
The search results from the executed script confirm that the styles
bg-purple-600,hover:bg-purple-700,hover:border-purple-700, andhover:text-whiteare defined in theapp.cssfile within thepublic/themes/bimbala/cssdirectory. This indicates that the new button styles are indeed part of the application's stylesheet.However, the output does not provide direct information about accessibility concerns, such as contrast ratios, which are important for users with visual impairments. Accessibility often requires manual checking or the use of specialized tools to ensure compliance with standards like WCAG (Web Content Accessibility Guidelines).
Based on the information provided, the new styles for the "Demo" button are verified to be included in the application's stylesheet, but accessibility verification would require additional steps not covered by the script output.
* 12-12: The "Book a demo" button has been updated similarly to the "Demo" button. In addition to the previous checks, ensure that the `href` attribute's value, which is a URL to an external service (Calendly), is correct and that the service is operational and configured for the application's use.Scripts Executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Verify that the new button styles are defined in the style sheets and check for accessibility concerns. rg --type css "bg-purple-600|hover:bg-purple-700|hover:border-purple-700|hover:text-white"Length of output: 93540
Verification successful
The verification script has confirmed that the external Calendly link is operational, as indicated by the HTTP status code
200, which means OK. This suggests that the URL is correctly pointing to an active Calendly page configured for the application's use.Scripts Executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Verify that the external Calendly link is operational and configured correctly. curl -o /dev/null -s -w "%{http_code}\n" https://calendly.com/bimbalacom/30minLength of output: 84
| @@ -12,10 +12,10 @@ | |||
| </div> | |||
| </div> | |||
| <div class="relative flex flex-col w-full px-4 mt-10 leading-6 text-left md:flex-row lg:w-5/12 xl:w-1/2 justifty-end"> | |||
| <a href="https://board.bimbala.com/" class="inline-flex items-center justify-center w-full h-16 px-10 py-0 mb-8 text-xl font-semibold text-center text-white no-underline align-middle bg-green-400 border border-transparent border-solid rounded-full cursor-pointer select-none md:mb-0 md:mr-8 md:w-auto lg:px-7 xl:px-10 hover:bg-green-500 focus:shadow-xs focus:no-underline"> | |||
| <a href="https://board.bimbala.com/" class="inline-flex items-center justify-center w-full h-16 px-10 py-0 mb-8 text-xl font-semibold md:mb-0 md:mr-8 md:w-auto lg:px-7 xl:px-10 text-white text-center bg-purple-600 border border-transparent border-solid rounded-md select-none sm:mb-0 sm:w-auto hover:bg-purple-700 hover:border-purple-700 hover:text-white"> | |||
There was a problem hiding this comment.
The purple doesn't stand out on purple background here.
| @@ -8,8 +8,8 @@ | |||
| <h1 class="text-4xl font-bold text-white lg:text-6xl xl:text-6xl">{{ theme('home_headline') }}</h1> | |||
| <p class="text-base text-blue-200 lg:text-xl">{{ theme('home_subheadline') }} {{-- - {{ theme('home_description') }} --}}</p> | |||
| <div class="flex flex-col items-center w-full mb-10 sm:flex-row sm:mb-20"> | |||
| <a href="{{ theme('home_cta_url') }}" class="w-full px-8 py-3 text-lg text-center bg-purple-900 text-white transition duration-150 ease-in-out sm:w-auto focus:outline-none rounded">Demo </a> | |||
| <a href="https://calendly.com/bimbalacom/30min" class="w-full px-8 py-3 mt-5 ml-3 text-lg text-center text-white transition duration-150 ease-in-out bg-transparent border border-white sm:ml-6 sm:w-auto sm:mt-0 focus:outline-none hover:bg-white hover:text-blue-700 rounded">Book a demo</a> | |||
| <a href="{{ theme('home_cta_url') }}" class="w-full px-8 py-3 mb-6 text-white text-center bg-purple-600 border border-transparent border-solid rounded-md select-none sm:mb-0 sm:w-auto hover:bg-purple-700 hover:border-purple-700 hover:text-white">Demo</a> | |||
There was a problem hiding this comment.
It looks too bright to me. Let's get back to the old purple opacity.
Description
We have different types of buttons in both places, at least not they are the same.
Type of change
Please delete options that are not relevant.
How Has This Been Tested?
Summary by CodeRabbit