Add minimal static website for Zplit #6
Conversation
WalkthroughIntroduces a static website for Zplit featuring a multi-section landing page with Tailwind CSS styling and a green color palette. Adds Android Deep Link asset links configuration to enable app link routing. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes
Poem
Pre-merge checks and finishing touches✅ Passed checks (5 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (4)
zplit-website/index.html (4)
30-40: Add mobile menu implementation.The navbar hides navigation links on mobile (
hidden md:flex) but provides no mobile menu alternative (e.g., hamburger icon, offcanvas menu, or collapsible nav). Users on mobile devices will see no navigation links at all.Implement a mobile menu toggle, either:
- A hamburger icon that toggles a collapsible menu, or
- A bottom navigation bar (if appropriate for the design)
This ensures navigation is accessible on all screen sizes and improves the mobile user experience.
Please clarify the mobile navigation requirement and confirm the intended UX for mobile users.
1-26: Consider moving Tailwind to a build process for production.Using Tailwind CSS via CDN (line 9) is convenient for prototyping but introduces performance and maintainability concerns in production:
- Larger bundle size (full Tailwind framework + custom config inline)
- No tree-shaking or unused CSS removal
- Configuration mixed in HTML rather than a dedicated config file
For better performance and maintainability, migrate to a build-time Tailwind setup (e.g.,
tailwindcssCLI or via a bundler like webpack/Vite). This will:
- Reduce CSS payload significantly
- Allow proper configuration management
- Enable caching and optimization
Would you like me to provide a configuration example for migrating to a build-process Tailwind setup?
157-162: Replace placeholder footer links with proper URLs or hide them.Footer links (Privacy, Terms, Contact at lines 159–161) use
href="#", which will navigate to the top of the page when clicked. If these pages don't exist yet, either:
- Replace
#with actual URLs (e.g.,/privacy.html), or- Temporarily disable the links to avoid confusion:
- <a href="#" class="hover:underline">Privacy</a> - <a href="#" class="hover:underline">Terms</a> - <a href="#" class="hover:underline">Contact</a> + <a class="text-gray-400 cursor-not-allowed">Privacy</a> + <a class="text-gray-400 cursor-not-allowed">Terms</a> + <a class="text-gray-400 cursor-not-allowed">Contact</a>Alternatively, create placeholder pages and link them properly.
53-58: Ensure CTA links have proper destinations.The "Get the App" and "Learn More" buttons use fragment identifiers (
#download,#features) which work for in-page navigation. If "Get the App" is intended to link to an app store, update the href to the correct Play Store or App Store URL:- <a href="#download" class="bg-primary text-white px-6 py-3 rounded-lg text-sm font-medium hover:opacity-90"> + <a href="https://play.google.com/store/apps/details?id=com.zplit.app" target="_blank" rel="noopener noreferrer" class="bg-primary text-white px-6 py-3 rounded-lg text-sm font-medium hover:opacity-90"> Get the App </a>This ensures users can directly access the app store rather than scrolling to the download section.
Please confirm the intended destination for the "Get the App" CTA and verify the Play Store URL is correct.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
assets/img-2.pngis excluded by!**/*.pngassets/img-3.pngis excluded by!**/*.png
📒 Files selected for processing (2)
zplit-website/.well-known/assetlinks.json(1 hunks)zplit-website/index.html(1 hunks)
🔇 Additional comments (1)
zplit-website/index.html (1)
62-67: Verify asset path resolution.Images are referenced with relative paths like
../assets/img-3.png. Verify that:
- The
assetsdirectory exists at the correct path relative to the deployedindex.htmlfile.- The file structure matches the expected deployment layout.
- All asset files are included in the repository and deployment.
If the website is served from a subdirectory or via a CDN, relative paths may break. Consider using absolute paths or a build-time asset bundling solution.
Please confirm the intended file structure and that all assets are present in the repository.
| "sha256_cert_fingerprints": [ | ||
| "..." | ||
| ] |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, let's check if the file exists and read its full content
cat -n zplit-website/.well-known/assetlinks.jsonRepository: StabilityNexus/Zplit
Length of output: 460
🏁 Script executed:
# Check the overall structure and context of the project
ls -la zplit-website/.well-known/Repository: StabilityNexus/Zplit
Length of output: 236
🏁 Script executed:
# Search for any related documentation or comments about the certificate fingerprint
rg -i "fingerprint|keytool|assetlinks" zplit-website/ --type json --type md --type txtRepository: StabilityNexus/Zplit
Length of output: 46
Replace placeholder SHA-256 certificate fingerprint before merging.
The assetlinks.json file contains a placeholder "..." for the SHA-256 cert fingerprint. This must be replaced with the actual certificate fingerprint from your app's keystore before Android can verify the asset links.
To obtain the correct fingerprint:
keytool -list -v -keystore your-keystore.jks -alias your-key-aliasUpdate the file with the actual 40-character SHA-256 hash (without colons).
🤖 Prompt for AI Agents
In zplit-website/.well-known/assetlinks.json around lines 9 to 11, the
sha256_cert_fingerprints array contains a placeholder "..." that must be
replaced with your app signing certificate's actual 40-character SHA-256
fingerprint (no colons) before merging; run keytool -list -v -keystore
your-keystore.jks -alias your-key-alias to get the SHA-256 value, copy the
fingerprint (strip any colons), replace the "..." entry with that exact hash
string, and ensure the JSON remains valid (quotes and commas intact).
|
|
||
| <!-- App Mockup Placeholder --> | ||
| <div class="flex justify-center"> | ||
| <div class="w-74 h-[450px] bg-white rounded-3xl shadow-xl flex items-center justify-center text-gray-400"> |
There was a problem hiding this comment.
Fix invalid Tailwind width class.
Line 64 uses w-74, which is not a valid Tailwind class. Tailwind's default width scale uses multiples of 0.25rem (4px): w-64, w-72, w-80, etc.
Replace w-74 with a valid class like w-72 or w-64:
- <div class="w-74 h-[450px] bg-white rounded-3xl shadow-xl flex items-center justify-center text-gray-400">
+ <div class="w-72 h-[450px] bg-white rounded-3xl shadow-xl flex items-center justify-center text-gray-400">📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div class="w-74 h-[450px] bg-white rounded-3xl shadow-xl flex items-center justify-center text-gray-400"> | |
| <div class="w-72 h-[450px] bg-white rounded-3xl shadow-xl flex items-center justify-center text-gray-400"> |
🤖 Prompt for AI Agents
In zplit-website/index.html around line 64, the element uses an invalid Tailwind
class `w-74`; replace it with a valid width class such as `w-72` or `w-64`
(choose the width that matches the intended layout) so the Tailwind utility is
recognized and the component renders correctly.
| <div class="p-6 bg-softgray rounded-xl"> | ||
| <h3 class="font-medium text-darkgreen">Instant Splits</h3> | ||
| <p class="mt-2 text-sm text-gray-600">Split expenses in seconds with no math hassle.</p> | ||
| <img src="../assets/HOW-1.webp" alt="" class=" "> |
There was a problem hiding this comment.
Add descriptive alt text to images for accessibility and SEO.
Images at lines 80, 85, 90, and 95 have empty alt attributes, which breaks accessibility for screen reader users and misses SEO opportunities. Each image should have a brief, descriptive alt text that conveys the content or purpose.
Apply this diff to add meaningful alt text:
- <img src="../assets/HOW-1.webp" alt="" class=" ">
+ <img src="../assets/HOW-1.webp" alt="Instant split calculation illustration" class="">- <img src="../assets/htw-4.webp" alt="">
+ <img src="../assets/htw-4.webp" alt="Transparent expense tracking illustration">- <img src="../assets/htw-3.webp" alt="">
+ <img src="../assets/htw-3.webp" alt="Group expense splitting illustration">- <img src="../assets/htw-1.webp" alt="">
+ <img src="../assets/htw-1.webp" alt="Security and privacy protection illustration">Also applies to: 85-85, 90-90, 95-95
🤖 Prompt for AI Agents
In zplit-website/index.html around lines 80, 85, 90 and 95, several <img> tags
have empty alt attributes; update each img to include concise, descriptive alt
text that accurately describes the image content or purpose (e.g., "Diagram of
HOW process", "HOW step 2 illustration", "HOW step 3 illustration", "HOW step 4
illustration" or specific descriptions based on the actual images). Ensure the
alt text is short (a few words) and meaningful for screen readers and SEO, and
avoid redundant phrases like "image of" or decorative text if the image is
purely decorative use alt="" explicitly only if it conveys no information.
| <button class="bg-primary text-white px-8 py-3 rounded-lg text-sm font-medium"> | ||
| <a href="#" class="block"> | ||
| Download for Android | ||
| </a> | ||
| </button> | ||
| <button class="border border-primary text-primary px-8 py-3 rounded-lg text-sm font-medium"> | ||
| iOS Coming Soon | ||
| </button> |
There was a problem hiding this comment.
Fix incorrect semantic HTML nesting and non-functional button.
Two issues:
- Lines 142–146: A
<button>element should not wrap an<a>tag. This creates invalid nested interactive elements and confuses assistive technologies. Either use a<button>with click handler or use an<a>styled as a button. - Line 148: The "iOS Coming Soon" button has no
hreforonclick, so it appears interactive but has no action. This may confuse users.
Apply this diff to fix semantic HTML and clarify button intent:
- <button class="bg-primary text-white px-8 py-3 rounded-lg text-sm font-medium">
- <a href="#" class="block">
+ <a href="#" class="bg-primary text-white px-8 py-3 rounded-lg text-sm font-medium inline-block">
Download for Android
- </a>
- </button>
- <button class="border border-primary text-primary px-8 py-3 rounded-lg text-sm font-medium">
+ </a>
+ <span class="border border-primary text-primary px-8 py-3 rounded-lg text-sm font-medium inline-block cursor-not-allowed opacity-60">
iOS Coming Soon
- </button>
+ </span>Alternatively, if you prefer <button> elements, add onclick handlers or use an <a> styled as a button.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <button class="bg-primary text-white px-8 py-3 rounded-lg text-sm font-medium"> | |
| <a href="#" class="block"> | |
| Download for Android | |
| </a> | |
| </button> | |
| <button class="border border-primary text-primary px-8 py-3 rounded-lg text-sm font-medium"> | |
| iOS Coming Soon | |
| </button> | |
| <a href="#" class="bg-primary text-white px-8 py-3 rounded-lg text-sm font-medium inline-block"> | |
| Download for Android | |
| </a> | |
| <span class="border border-primary text-primary px-8 py-3 rounded-lg text-sm font-medium inline-block cursor-not-allowed opacity-60"> | |
| iOS Coming Soon | |
| </span> |
🤖 Prompt for AI Agents
In zplit-website/index.html around lines 142 to 149, the markup nests an <a>
inside a <button> and leaves the "iOS Coming Soon" control non-functional;
replace the button that wraps the anchor with an <a> element styled like the
primary button and give it the download URL (or proper href) so it functions as
a link, and for the "iOS Coming Soon" control either convert it to a
non-interactive element (e.g., a <span> or <button disabled>) with clear
aria-label/text indicating it’s unavailable or add a no-op onclick that opens a
tooltip/modal—ensuring interactive elements are not nested and all apparent
controls have appropriate behavior and accessibility attributes.
1 participant
What this PR does
Why this is needed
Zplit requires a static site to:
Testing
Closes #3
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.