Enhance landing page with modern UI and interactive features#14
Enhance landing page with modern UI and interactive features#14ankitkr104 wants to merge 2 commits intoAOSSIE-Org:mainfrom
Conversation
- Add fixed navigation bar with glass morphism effect - Implement responsive hero section with gradient text - Create interactive feature demonstrations - Add real-time statistics dashboard (time on page, clicks, scroll progress) - Implement theme switcher with dark/light mode toggle - Add working utilities (copy URL, share page, download info) - Optimize mobile experience with hamburger menu - Improve card layouts with CSS Grid (no horizontal scrolling) - Add smooth scrolling and notification system - Include custom background image support - Enhance accessibility and responsive design Features added: Fixed navbar with smooth navigation Modern hero section with feature cards Interactive demos and working buttons Live stats dashboard Theme switching functionality Mobile-optimized responsive design Toast notification system Accessibility improvements
📝 WalkthroughWalkthroughThe index.html landing page underwent a visual and structural redesign, introducing a fixed navigation bar with mobile drawer, hero section with feature cards, multiple anchored sections, responsive grid layouts, and interactive JavaScript features like mobile menu toggles and smooth scrolling. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
Tip Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord. 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: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
index.html (1)
379-477:⚠️ Potential issue | 🟡 MinorDuplicate CSS rules within the same media query.
There are conflicting declarations for
header,h1, and.taglinewithin the@media (max-width: 768px)block:
header: Lines 404-407 vs 465-468 (different padding values)h1: Lines 380-382 (font-size: 32px) vs 470-473 (font-size: 48px).tagline: Lines 384-386 (font-size: 16px) vs 475-477 (font-size: 20px)The later declarations override the earlier ones, making the earlier rules dead code. Consolidate these to avoid confusion.
🔧 Consolidate duplicate rules
Remove the earlier duplicate rules (lines 380-386 and 404-407) and keep only the later ones, or determine which values are intended and remove the duplicates entirely.
`@media` (max-width: 768px) { - h1 { - font-size: 32px; - } - - .tagline { - font-size: 16px; - } - .demo-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; } /* ... other rules ... */ - - header { - padding: 150px 20px 60px; - min-height: 75vh; - } /* ... keep the later header, h1, tagline rules at lines 465-477 ... */ }
🤖 Fix all issues with AI agents
In `@index.html`:
- Around line 553-556: Navbar GitHub anchor (the <a> element with classes
"nav-link nav-github" and href
"https://github.com/ankitkr104/SocialShareButton") uses a personal fork; update
its href to the organization repo URL
("https://github.com/AOSSIE-Org/SocialShareButton") and ensure the CTA button's
href (the other GitHub link referenced elsewhere in the page) is changed to the
same organization URL so both links are consistent.
- Around line 559-563: Replace the non-interactive <div class="nav-toggle"> with
an element that supports accessibility attributes (e.g., add role="button",
tabindex="0", aria-label="Toggle navigation", and aria-expanded="false" to the
element with class "nav-toggle"), ensure the corresponding .nav-menu has
id="nav-menu", and update the JS handler for nav-toggle (the event listener for
the element referenced as navToggle) to toggle aria-expanded between
"true"/"false" when activating the menu and to toggle the same CSS active
classes on navToggle and navMenu so keyboard and screen reader users can operate
the hamburger.
🧹 Nitpick comments (4)
index.html (4)
18-24: Redundant background properties and cryptic image filename.The
backgroundshorthand on line 18 already setsno-repeat center center fixed, making lines 20-22 redundant. Additionally, the image filename (1a20a0c3fd5129b8be5fa15e37a4d0d6.jpg) is a hash that makes maintenance difficult—consider using a descriptive name likehero-background.jpg.♻️ Suggested cleanup
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; - background: url('public/1a20a0c3fd5129b8be5fa15e37a4d0d6.jpg') no-repeat center center fixed; + background: url('public/hero-background.jpg') no-repeat center center fixed; background-size: cover; - background-attachment: fixed; - background-position: center center; - background-repeat: no-repeat; - image-rendering: -webkit-optimize-contrast; - image-rendering: crisp-edges; min-height: 100vh; padding: 20px; position: relative; }
258-260: Consider using viewport-relative units for consistency.The
margin-top: 350pxis a fixed value, but the header usesmin-height: 85vh. On varying viewport heights, this could cause visual misalignment. Consider usingcalc()or viewport units for better responsiveness.♻️ Example using calc
.demo-section:first-of-type { - margin-top: 350px; + margin-top: calc(85vh - 200px); }
927-942: Move navigation code insideDOMContentLoadedfor consistency.The navigation toggle code (lines 927-942) runs outside the
DOMContentLoadedcallback, unlike the SocialShareButton initialization. While this works because the script is at the bottom of the body, it's inconsistent and could cause null reference errors if the script is moved. Wrap this code inside the existingDOMContentLoadedhandler for robustness.♻️ Proposed fix
Move lines 927-956 inside the
DOMContentLoadedcallback:document.addEventListener('DOMContentLoaded', function() { // ... existing SocialShareButton initializations ... + + // Mobile Navigation Toggle + const navToggle = document.querySelector('.nav-toggle'); + const navMenu = document.querySelector('.nav-menu'); + + navToggle.addEventListener('click', () => { + navToggle.classList.toggle('active'); + navMenu.classList.toggle('active'); + }); + + // Close mobile menu when clicking on a link + document.querySelectorAll('.nav-link').forEach(link => { + link.addEventListener('click', () => { + navToggle.classList.remove('active'); + navMenu.classList.remove('active'); + }); + }); + + // 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', + block: 'start' + }); + } + }); + }); }); - - // Mobile Navigation Toggle - const navToggle = document.querySelector('.nav-toggle'); - // ... rest of code removed from here ...
944-956: Add defensive check for empty or invalid href values.If any anchor has
href="#"(a common placeholder pattern),document.querySelector('#')will throw aSyntaxError. Add validation before querying.🛡️ Proposed defensive fix
document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { - e.preventDefault(); - const target = document.querySelector(this.getAttribute('href')); - if (target) { + const href = this.getAttribute('href'); + if (href && href.length > 1) { + e.preventDefault(); + const target = document.querySelector(href); + if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); + } } }); });
|
it's looking fantastic but before doing this, first discuss how to enhance the frontend, either by creating a proper Figma file or by generating AI-based preview images in issue section. regarding your pr, i will review it after we resolve #17 also you remove some of elements without any reason. |
|
@ankitkr104 could you suggest some marketing strategies for our button project as it seems little bit underrated one. prefer to manually visit sites for content rather than querying to llms. |
* Corrected Cleanup logic for interval code Path * Code rabbit review * lint error resolved * minor changes * Indentation error resolve * docs: add preact wrapper lifecycle comments * fix: prevent stale props in preact init * remove JSDoc from preact wrapper * feat: add analytics options to preact wrapper * fix: avoid stringifying analytics plugins
|
Please resolve the merge conflicts before review. Your PR will only be reviewed by a maintainer after all conflicts have been resolved. 📺 Watch this video to understand why conflicts occur and how to resolve them: |
github-actions
Bot
added
size/XS
|
see #119 |
2 participants
Features added:
Fixed navbar with smooth navigation
Modern hero section with feature cards
Interactive demos and working buttons
Live stats dashboard
Theme switching functionality
Mobile-optimized responsive design
Toast notification system
Accessibility improvements
Summary by CodeRabbit
New Features
Style
✏️ Tip: You can customize this high-level summary in your review settings.
issue: #13