feat:Design Minimal Website for Zplit #3 #15
Conversation
WalkthroughThis pull request establishes a static landing page for Zplit with asset verification configuration. Changes include Android app verification via assetlinks.json, a complete HTML landing page with sections for navigation, hero, features, screenshots, and call-to-action, and a comprehensive CSS design system with responsive layouts. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 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: 3
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (3)
.well-known/assetlinks.json(1 hunks)index.html(1 hunks)styles.css(1 hunks)
🔇 Additional comments (8)
index.html (3)
28-29: Replace download button placeholders with actual app store links.The download buttons currently link to "#" (lines 28-29 and 112-113). Ensure these are updated with actual App Store and Google Play links before release.
Also applies to: 112-113
1-12: Google Fonts preconnect improves performance.Good use of preconnect and prefetch for Google Fonts to optimize loading. The font weight selection (300–700) provides good flexibility for the design system.
22-32: Well-structured hero section.Semantic HTML with clear hierarchy. The section is appropriately padded to account for the fixed navigation (verified by styles.css showing
padding: 160px 0 100px).styles.css (5)
285-326: Verify WCAG color contrast for CTA section white text on green gradient.The CTA section uses white text on a gradient from #2D5016 (forest green) to #4A7C2A (lighter forest green). Visually, these dark green colors should provide strong contrast with white text. WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. The CTA title (line 293) is 48px and bold, well above the large text threshold, so it requires only 3:1 contrast.
However, please verify the exact contrast ratio for white on #4A7C2A to ensure it meets the 4.5:1 minimum for normal text elements elsewhere in the CTA section (the description and button text). The darker green (#2D5016) will have excellent contrast with white.
You can verify this using WebAIM's Contrast Checker or similar tools. Test both
#FFFFFFon#2D5016and#FFFFFFon#4A7C2Ato confirm both exceed 4.5:1 for normal text.
1-14: Well-organized color palette with good semantic naming.The CSS variable definitions are clear and maintainable. The color choices (forest green accents with monochromatic base) align well with the PR design notes about minimalist aesthetics with forest green accents.
38-62: Fixed navigation with backdrop blur is a polished detail.The use of
backdrop-filter: blur(10px)creates a modern glassmorphism effect while maintaining the fixed position. The z-index of 1000 ensures it stays above content, and the semi-transparent background (#FFFFFF at 95% opacity) with border is a good design choice. Ensure testing on older browsers confirms fallback behavior (browsers without backdrop filter support will just show the semi-transparent white).Test in browsers without backdrop-filter support (check browser compatibility) to confirm the semi-transparent background alone is acceptable as a fallback.
359-430: Responsive breakpoints are well-implemented.Good media queries at 768px (tablet) and 480px (mobile) with appropriate font size reductions and grid adjustments. Mobile-first approach with progressive enhancement is well-executed.
102-134: Button hover states are smooth and polished.The button styling includes nice details:
transform: translateY(-2px)for subtle lift on hover, smooth transitions (0.3s ease), and appropriate box-shadow values. The primary/secondary variant approach with different hover behaviors is clean.
| [ | ||
| { | ||
| "relation": ["delegate_permission/common.handle_all_urls"], | ||
| "target": { | ||
| "namespace": "android_app", | ||
| "package_name": "com.zplit.app", | ||
| "sha256_cert_fingerprints": [ | ||
| "REPLACE_WITH_YOUR_SHA256_FINGERPRINT" | ||
| ] | ||
| } | ||
| } | ||
| ] |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, let's locate and examine the assetlinks.json file
find . -name "assetlinks.json" -type f 2>/dev/nullRepository: StabilityNexus/Zplit
Length of output: 93
🏁 Script executed:
# Also check if .well-known directory exists
ls -la .well-known/ 2>/dev/null || echo "Directory not found"Repository: StabilityNexus/Zplit
Length of output: 239
🏁 Script executed:
# Search for any references to SHA256 fingerprints in the repo
rg "sha256_cert_fingerprints|SHA256.*FINGERPRINT" --type jsonRepository: StabilityNexus/Zplit
Length of output: 46
🏁 Script executed:
# Read the actual contents of the assetlinks.json file
cat -n .well-known/assetlinks.jsonRepository: StabilityNexus/Zplit
Length of output: 417
Replace placeholder SHA256 fingerprint before deployment.
The sha256_cert_fingerprints field on line 8 requires the actual SHA256 fingerprint of your app's signing certificate. The placeholder prevents Android App Links verification from functioning. If you're using EAS Build, run eas credentials -p android and copy the fingerprint value listed under SHA256 Fingerprint. Otherwise, if you're using Play App Signing, find the correct Digital Asset Links JSON snippet in your Play Console developer account under Release > Setup > App signing.
🤖 Prompt for AI Agents
.well-known/assetlinks.json lines 1-12: the sha256_cert_fingerprints entry
contains a placeholder value which breaks Android App Links verification;
replace "REPLACE_WITH_YOUR_SHA256_FINGERPRINT" with the actual SHA-256
fingerprint of your app signing certificate (obtain via `eas credentials -p
android` under SHA256 Fingerprint or from Play Console > Release > Setup > App
signing if using Play App Signing), save the file, and redeploy the hosted
assetlinks.json so Android can verify the app links.
| <!-- Footer --> | ||
| <footer class="footer"> | ||
| <div class="container"> | ||
| <p class="footer-text">© 2024 Zplit. All rights reserved.</p> |
There was a problem hiding this comment.
Update copyright year to 2025.
The copyright notice on line 121 should reflect the current year.
- <p class="footer-text">© 2024 Zplit. All rights reserved.</p>
+ <p class="footer-text">© 2025 Zplit. All rights reserved.</p>Alternatively, consider using a dynamic year via JavaScript if the website will be long-lived: <script>document.write(new Date().getFullYear())</script>
📝 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.
| <p class="footer-text">© 2024 Zplit. All rights reserved.</p> | |
| <p class="footer-text">© 2025 Zplit. All rights reserved.</p> |
🤖 Prompt for AI Agents
In index.html around line 121, update the static copyright year from 2024 to
2025 in the paragraph text; alternatively, replace the hardcoded year with a
small inline script that writes the current year (e.g., document.write(new
Date().getFullYear())) so the site stays up-to-date automatically.
| <div class="container"> | ||
| <p class="footer-text">© 2024 Zplit. All rights reserved.</p> | ||
| <div class="footer-links"> | ||
| <a href="/.well-known/assetlinks.json" class="footer-link" style="display: none;">Asset Links</a> |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Remove unnecessary hidden footer link to assetlinks.json.
The assetlinks.json file is a machine-readable Android configuration file and should not appear in the HTML footer, hidden or visible. Removing this element simplifies the HTML and better separates concerns.
<div class="footer-links">
- <a href="/.well-known/assetlinks.json" class="footer-link" style="display: none;">Asset Links</a>
</div>Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In index.html around line 123, remove the unnecessary hidden footer anchor
linking to /.well-known/assetlinks.json; delete the entire <a
href="/.well-known/assetlinks.json" class="footer-link" style="display:
none;">Asset Links</a> element so the machine-readable assetlinks.json is not
referenced in the HTML footer, ensure no other HTML references to that file
remain, and run a quick HTML lint/format after removal.
|
Closing as #10 was chosen for the issue instead. Thank you for your contribution |
2 participants
index.html — Main HTML structure with:
Fixed navigation with "Zplit" logo
Hero section with app name and tagline "Split Expenses. Not Friendships."
Features section (3 value propositions)
Screenshots section (3 placeholder boxes)
How It Works section (3-step process)
CTA section with download buttons
Footer
styles.css — Styling with:
Color palette:
Background: #FFFFFF (white) and #F8F9FA (light gray)
Text: #1A1A1A (dark gray), #6B6B6B (medium gray)
Accent green: #2D5016 (forest green) and #4A7C2A (lighter variant)
Inter font (sans-serif)
Responsive design for mobile, tablet, and desktop
Hover effects and transitions
.well-known/assetlinks.json — Deep-linking configuration for Android App Links (hidden from main navigation)
Design Features:
Minimalist aesthetic with ample white space
Monochromatic base with forest green accents
High contrast typography
Flat UI elements with subtle shadows
Fully responsive (mobile-first)
Smooth scroll and hover interactions
Fast-loading (no external dependencies except Google Fonts)
Summary by CodeRabbit
New Features
Chores
✏️ Tip: You can customize this high-level summary in your review settings.