feat: design and implement Zplit landing page #4
Conversation
WalkthroughA complete landing page for the Zplit project is added, comprising an HTML page structure with responsive navbar, hero section, features, and workflow sections; a dark-themed CSS stylesheet with responsive design and interactive states; a JavaScript file handling mobile menu toggle and smooth anchor link scrolling; and an Android App Links configuration file. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 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: 7
🧹 Nitpick comments (4)
website/script.js (1)
31-31: Extract magic number to a constant or use CSS media query matching.The hardcoded
768breakpoint should match the CSS media query breakpoint. Consider extracting it to a constant or usingwindow.matchMediafor consistency.+ const MOBILE_BREAKPOINT = 768; + // Smooth scrolling for anchor links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { target.scrollIntoView({ behavior: 'smooth' }); // Close mobile menu if open - if (window.innerWidth <= 768 && navLinks.style.display === 'flex') { + if (window.innerWidth <= MOBILE_BREAKPOINT && navLinks.classList.contains('mobile-open')) { - navLinks.style.display = 'none'; + navLinks.classList.remove('mobile-open'); } } }); });website/styles.css (2)
21-27: Reconsideroverflow-x: hiddenon the body element.While
overflow-x: hidden(line 26) prevents horizontal scrolling, it can cause accessibility issues by hiding content that overflows horizontally, making it inaccessible to keyboard and screen reader users. Consider fixing the root cause of horizontal overflow instead.
207-226: Add standard property fallbacks for webkit-specific gradient text effects.The gradient text effects use
-webkit-background-clipand-webkit-text-fill-colorwithout standard fallbacks. While these are well-supported, adding fallbacks improves compatibility..hero h1 { font-size: 72px; line-height: 1.05; margin-bottom: 32px; color: var(--text-color); font-weight: 700; letter-spacing: -2px; background: linear-gradient(to bottom, #FFFFFF, #D1D5DB); + background-clip: text; -webkit-background-clip: text; + color: transparent; -webkit-text-fill-color: transparent; } .hero h1 span { color: var(--primary-color); background: linear-gradient(to right, #10B981, #6EE7B7); + background-clip: text; -webkit-background-clip: text; + color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 20px rgba(16, 185, 129, 0.3)); }website/index.html (1)
4-14: Consider adding additional meta tags for better SEO and social sharing.The page would benefit from Open Graph and Twitter Card meta tags for better social media preview, as well as a favicon.
Add these meta tags in the
<head>:<!-- Favicon --> <link rel="icon" type="image/png" href="/favicon.png"> <!-- Open Graph / Facebook --> <meta property="og:type" content="website"> <meta property="og:url" content="https://yourdomain.com/"> <meta property="og:title" content="Zplit - Decentralized Expense Splitting"> <meta property="og:description" content="Privacy-focused, offline-first, decentralized expense splitting app."> <meta property="og:image" content="https://yourdomain.com/og-image.png"> <!-- Twitter --> <meta property="twitter:card" content="summary_large_image"> <meta property="twitter:url" content="https://yourdomain.com/"> <meta property="twitter:title" content="Zplit - Decentralized Expense Splitting"> <meta property="twitter:description" content="Privacy-focused, offline-first, decentralized expense splitting app."> <meta property="twitter:image" content="https://yourdomain.com/twitter-image.png">
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
website/.well-known/assetlinks.json(1 hunks)website/index.html(1 hunks)website/script.js(1 hunks)website/styles.css(1 hunks)
🔇 Additional comments (4)
website/styles.css (2)
266-270: LGTM! Clean responsive grid implementation.The feature grid uses
auto-fitwithminmaxfor a responsive layout that adapts well to different screen sizes.
445-500: Well-structured responsive breakpoints.The media queries appropriately handle tablet and mobile layouts, with sensible fallbacks for smaller screens.
website/index.html (2)
25-29: Good accessibility practice with aria-label on menu toggle.The
aria-label="Toggle Menu"on the hamburger button is properly implemented for screen reader accessibility.
60-144: Well-structured features section with clear value propositions.The features section effectively communicates the key differentiators of Zplit with appropriate icons and descriptions. The grid layout will work well responsively.
| [ | ||
| { | ||
| "relation": ["delegate_permission/common.handle_all_urls"], | ||
| "target": { | ||
| "namespace": "android_app", | ||
| "package_name": "com.stabilitynexus.zplit", | ||
| "sha256_cert_fingerprints": | ||
| ["FA:C6:17:45:DC:09:03:78:6F:B9:ED:E6:2A:96:2B:39:9F:73:48:F0:BB:6F:89:9B:83:32:66:75:91:03:3B:9C"] | ||
| } | ||
| } | ||
| ] |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# Search for keystore/signing configuration files
find . -type f \( -name "*.keystore" -o -name "*.jks" -o -name "*.p12" -o -name "*.pfx" \) 2>/dev/null | head -20Repository: StabilityNexus/Zplit
Length of output: 46
🏁 Script executed:
# Search for references to the package name in the codebase
rg "com\.stabilitynexus\.zplit" --type-add="json:*.json" -t json -A 3 -B 3Repository: StabilityNexus/Zplit
Length of output: 46
🏁 Script executed:
# Look for signing or keystore configuration in build files
rg -i "signing|keystore|certificate|sha256" --type-add="gradle:*.gradle" --type-add="gradle:*.gradle.kts" -t gradle -l | head -10Repository: StabilityNexus/Zplit
Length of output: 92
🏁 Script executed:
# Check for other assetlinks.json files
find . -name "assetlinks.json" -type fRepository: StabilityNexus/Zplit
Length of output: 101
🏁 Script executed:
# Validate the fingerprint format (should be valid hex with colons)
python3 << 'EOF'
fingerprint = "FA:C6:17:45:DC:09:03:78:6F:B9:ED:E6:2A:96:2B:39:9F:73:48:F0:BB:6F:89:9B:83:32:66:75:91:03:3B:9C"
parts = fingerprint.split(":")
print(f"Fingerprint format validation:")
print(f" Total parts: {len(parts)}")
print(f" Expected for SHA256: 32 parts")
print(f" All parts are 2-char hex: {all(len(p) == 2 and all(c in '0123456789ABCDEFabcdef' for c in p) for p in parts)}")
print(f" Format is valid: {len(parts) == 32 and all(len(p) == 2 and all(c in '0123456789ABCDEFabcdef' for c in p) for p in parts)}")
EOFRepository: StabilityNexus/Zplit
Length of output: 201
🏁 Script executed:
cat -n android/app/build.gradle.ktsRepository: StabilityNexus/Zplit
Length of output: 1753
Update the package name in assetlinks.json to match the app's applicationId.
The assetlinks.json references com.stabilitynexus.zplit, but the app's actual applicationId in android/app/build.gradle.kts is com.example.zplit (line 24). This mismatch will prevent Android App Links from working. Update the package_name to match your configured applicationId before verifying the certificate fingerprint. Additionally, the release build currently uses debug signing keys (line 37)—add proper signing configuration for production.
🤖 Prompt for AI Agents
In website/.well-known/assetlinks.json around lines 1 to 11, the package_name is
set to com.stabilitynexus.zplit but the app's applicationId is
com.example.zplit; update package_name to com.example.zplit to match
android/app/build.gradle.kts (line 24), confirm the SHA-256 fingerprint is the
release key you will use, and ensure the Android release build uses production
signing keys instead of debug keys (fix signing config in
android/app/build.gradle.kts around line 37) before verifying App Links.
| <link rel="preconnect" href="https://fonts.googleapis.com"> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | ||
| <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | ||
| <link rel="manifest" href="/manifest.json"> |
There was a problem hiding this comment.
Missing manifest.json file.
The HTML references /manifest.json but this file is not included in the PR. This will result in a 404 error.
Do you want me to generate a basic web app manifest file for you, or will you be adding it separately?
🤖 Prompt for AI Agents
In website/index.html around line 13, the page links to /manifest.json but that
file is missing causing a 404; add a new manifest.json at the project root (or
adjust the link to the correct path) containing basic required fields (name,
short_name, start_url, scope, display, icons array with at least one icon entry
and sizes/type, background_color, theme_color) so browsers can load the PWA
manifest; commit the manifest.json and ensure the href in index.html points to
its correct location.
| <div class="nav-links"> | ||
| <a href="#features">Features</a> | ||
| <a href="#workflow">How it Works</a> | ||
| <a href="#download" class="btn btn-primary">Download App</a> |
There was a problem hiding this comment.
"Download App" and "Get Early Access" links point to non-existent anchor.
Both CTA buttons link to #download, but there's no corresponding download section on the page. This creates a broken user experience.
Consider either:
- Adding a download section with app store links, or
- Updating the links to point to a relevant destination (e.g., GitHub releases, waitlist form)
Also applies to: 40-41
🤖 Prompt for AI Agents
In website/index.html around lines 23 (and also lines 40-41), both CTA anchors
point to a non-existent "#download" anchor; fix by either adding a corresponding
download section with app store links and an id="download" element or update the
hrefs to point to an appropriate destination (e.g., a GitHub releases URL or a
waitlist/signup page). Ensure the chosen destination is live, update all CTA
links consistently, and if adding a section include clear app store buttons and
an id attribute matching the CTA href.
| <polyline points="19 12 12 19 5 12"></polyline> | ||
| </svg> | ||
| </a> | ||
| <a href="https://github.com/Jitmisra/Zplit" target="_blank" class="btn btn-secondary"> |
There was a problem hiding this comment.
Inconsistent GitHub repository URL.
The "View Source" link points to https://github.com/Jitmisra/Zplit, but the PR description and footer links (line 181) reference https://github.com/StabilityNexus/Zplit. Ensure the correct repository URL is used.
Apply this diff if StabilityNexus is the correct organization:
- <a href="https://github.com/Jitmisra/Zplit" target="_blank" class="btn btn-secondary">
+ <a href="https://github.com/StabilityNexus/Zplit" target="_blank" class="btn btn-secondary">📝 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.
| <a href="https://github.com/Jitmisra/Zplit" target="_blank" class="btn btn-secondary"> | |
| <a href="https://github.com/StabilityNexus/Zplit" target="_blank" class="btn btn-secondary"> |
🤖 Prompt for AI Agents
In website/index.html around line 48, the "View Source" anchor href points to
https://github.com/Jitmisra/Zplit which is inconsistent with other references;
update the href to the correct repository URL
(https://github.com/StabilityNexus/Zplit) so all GitHub links match, and verify
target and class attributes remain unchanged.
| <h4>Project</h4> | ||
| <a href="https://github.com/StabilityNexus/Zplit">GitHub Repository</a> | ||
| <a href="https://github.com/StabilityNexus/Zplit/issues">Contribute</a> | ||
| <a href="#">Documentation</a> |
There was a problem hiding this comment.
Broken documentation link.
The "Documentation" link in the footer points to #, which is a placeholder. Either remove this link or update it with the correct documentation URL.
🤖 Prompt for AI Agents
In website/index.html around line 183, the footer's "Documentation" anchor
currently points to a placeholder href="#" which is broken; update the anchor to
either remove the link entirely or replace the href with the correct
documentation URL (e.g., /docs or the external docs site) and ensure the anchor
uses a valid absolute or relative URL and includes target="_blank" and
rel="noopener" if it opens externally.
| const menuToggle = document.querySelector('.menu-toggle'); | ||
| const navLinks = document.querySelector('.nav-links'); |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Add null check for navLinks before using it in the event handler.
If .nav-links doesn't exist in the DOM, navLinks will be null, and the code inside the click handler (line 7) will throw an error when trying to access navLinks.style.display.
Apply this diff:
const menuToggle = document.querySelector('.menu-toggle');
const navLinks = document.querySelector('.nav-links');
if (menuToggle) {
menuToggle.addEventListener('click', () => {
+ if (!navLinks) return;
navLinks.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex';Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In website/script.js around lines 2 to 3, navLinks may be null if the .nav-links
element is absent; update the click handler to guard against that by checking
navLinks before accessing its style (e.g., return early or skip the toggle when
navLinks is falsy) so the event handler safely no-ops when the element is
missing.
| menuToggle.addEventListener('click', () => { | ||
| navLinks.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex'; | ||
| if (navLinks.style.display === 'flex') { | ||
| navLinks.style.flexDirection = 'column'; | ||
| navLinks.style.position = 'absolute'; | ||
| navLinks.style.top = '70px'; | ||
| navLinks.style.left = '0'; | ||
| navLinks.style.width = '100%'; | ||
| navLinks.style.backgroundColor = 'white'; | ||
| navLinks.style.padding = '20px'; | ||
| navLinks.style.boxShadow = '0 4px 6px rgba(0,0,0,0.1)'; | ||
| } | ||
| }); |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Refactor to use CSS classes instead of inline styles.
Setting inline styles in JavaScript (lines 7-16) makes the code harder to maintain and overrides CSS specificity. The white background on line 14 also conflicts with your dark theme.
Consider adding a CSS class in styles.css:
.nav-links.mobile-open {
display: flex !important;
flex-direction: column;
position: absolute;
top: 70px;
left: 0;
width: 100%;
background-color: var(--surface-color);
padding: 20px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}Then simplify the JavaScript:
- menuToggle.addEventListener('click', () => {
- navLinks.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex';
- if (navLinks.style.display === 'flex') {
- navLinks.style.flexDirection = 'column';
- navLinks.style.position = 'absolute';
- navLinks.style.top = '70px';
- navLinks.style.left = '0';
- navLinks.style.width = '100%';
- navLinks.style.backgroundColor = 'white';
- navLinks.style.padding = '20px';
- navLinks.style.boxShadow = '0 4px 6px rgba(0,0,0,0.1)';
- }
+ menuToggle.addEventListener('click', () => {
+ navLinks.classList.toggle('mobile-open');
});🤖 Prompt for AI Agents
In website/script.js around lines 6 to 18, the click handler sets multiple
inline styles (lines 7–16) which is hard to maintain and conflicts with theming;
remove those inline style assignments and instead toggle a CSS class (e.g.
"mobile-open") on the navLinks element. Add the class definition to styles.css
with the mobile layout rules (display:flex, flex-direction:column,
position:absolute, top:70px, left:0, width:100%, padding:20px, box-shadow) and
use background-color: var(--surface-color) instead of white; ensure base CSS
hides nav links on mobile and the new class forces display for open state (use
specificity or !important only if necessary). Finally, update the JS handler to
only toggle navLinks.classList.toggle('mobile-open') and remove all inline style
changes.
|
team name bigbull |
1 participant
Monosnap.screencast.2025-12-13.12-53-02.mp4
#3
Summary by CodeRabbit
Release Notes
✏️ Tip: You can customize this high-level summary in your review settings.