[FEAT]: Develop Full Resonate Landing Static Web Page #16
Conversation
… contribution guidelines
WalkthroughThis PR restructures the application into a complete landing page with multiple sections (Navbar, Hero, Features, TechStack, About, DownloadApp, Footer), adds smooth scrolling via Lenis and scroll-triggered animations via GSAP, and introduces three new npm dependencies for enhanced visual effects and icons. Changes
Sequence DiagramsequenceDiagram
participant App as App.js
participant Lenis as Lenis
participant RAF as requestAnimationFrame
participant DOM as DOM/ScrollTrigger
participant GSAP as GSAP
App->>Lenis: Initialize Lenis instance
Lenis-->>App: ScrollTrigger context ready
App->>RAF: Start animation loop
loop On Each Frame
RAF->>Lenis: lenis.raf(time)
Lenis->>DOM: Update scroll position
DOM->>GSAP: Trigger registered animations
GSAP->>DOM: Update element transforms
end
Note over GSAP: Animations registered for:<br/>Hero (heading, buttons, image)<br/>Features (per-item stagger)<br/>TechStack, About, DownloadApp
App->>App: useEffect cleanup
App->>Lenis: lenis.destroy()
App->>GSAP: ScrollTrigger.getAll().forEach(kill)
RAF-->>App: Stop animation loop
Estimated code review effort🎯 4 (Complex) | ⏱️ ~75 minutes
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 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: 6
🧹 Nitpick comments (8)
README.md (1)
1-92: Strong README overhaul; consider two small polish tweaks
- Wording: in Line 3, consider “open-source social voice platform” to match standard compound-adjective style.
- Project structure block (Lines 59–73): add a language to the fence (for example
```text) to satisfy markdownlint (MD040) and improve rendering.Example for the structure block:
-``` +```text src/ ...</blockquote></details> <details> <summary>src/components/Footer/Footer.css (1)</summary><blockquote> `1-42`: **Footer styles are clean; consider slightly larger icon hit areas** The layout/hover effects look good. If you want to nudge accessibility, consider increasing `.footer-socials a` width/height to ~40–44px to better match recommended touch target sizes. ```diff -.footer-socials a { - width: 30px; - height: 30px; +.footer-socials a { + width: 40px; + height: 40px;src/components/NavBar/Navbar.css (1)
1-105: Add focus styles for links/button to improve keyboard accessibilityNavbar visuals and responsiveness look solid. To help keyboard users, add explicit
:focus-visible(or:focus) styles for.nav-linkand.download-btn, not just:hover.For example:
.nav-link:hover { color: #FFC107; } + +.nav-link:focus-visible { + outline: 2px solid #FFC107; + outline-offset: 2px; +} .download-btn:hover { background-color: #ffca2c; transform: scale(1.05); } + +.download-btn:focus-visible { + outline: 2px solid #FFC107; + outline-offset: 2px; +}src/components/TechStack/TechStack.js (1)
1-24: TechStack component is straightforward; consider normalizing asset filenamesThe section markup and alt texts look good and match the CSS. As a small maintainability tweak, consider renaming
Flutter svg.png/Appwrite svg.pngto filenames without spaces (e.g.flutter-logo.png,appwrite-logo.png) and updating the imports accordingly—this tends to play nicer with tooling and shell usage over time.src/components/Features/Features.js (1)
5-30: Consider using unique images for each feature.All four features currently use the same image (
featureImage). While this may be intentional for the initial launch, consider using unique visuals for each feature to better illustrate their distinct functionality and improve visual variety.src/components/Hero/Hero.js (2)
4-4: Consider renaming the asset to avoid spaces in the filename.The image path contains a space (
resonate1 1.png), which can cause issues in some build systems, URLs, or deployment environments. Renaming toresonate1-1.pngorresonate1.pngwould be more robust.
16-16: Addtarget="_blank"andrel="noopener noreferrer"to the external link.For consistency with other external links in the codebase (e.g., Navbar.js uses these attributes for external links) and to prevent potential tabnabbing, consider adding these attributes.
- <p className="maintained-by">A Project Maintained by <a href="https://aossie.org" className="aossie-link">AOSSIE</a></p> + <p className="maintained-by">A Project Maintained by <a href="https://aossie.org" target="_blank" rel="noopener noreferrer" className="aossie-link">AOSSIE</a></p>src/App.js (1)
72-93: Consider null checks when querying child elements.If a
.feature-itemelement doesn't have.feature-imageor.feature-content h3children (e.g., due to future refactoring),querySelectorreturnsnull, and GSAP will silently skip the animation. This is acceptable behavior, but adding a guard could make debugging easier.gsap.utils.toArray('.feature-item').forEach((feature, i) => { const image = feature.querySelector('.feature-image'); const text = feature.querySelector('.feature-content h3'); + + if (!image || !text) return; const tl = gsap.timeline({
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (12)
package-lock.jsonis excluded by!**/package-lock.jsonpublic/resonate_logo_white.svgis excluded by!**/*.svgsrc/assets/Appwrite svg.pngis excluded by!**/*.pngsrc/assets/Button-1.pngis excluded by!**/*.pngsrc/assets/Button.pngis excluded by!**/*.pngsrc/assets/Flutter svg.pngis excluded by!**/*.pngsrc/assets/Group 35899.pngis excluded by!**/*.pngsrc/assets/Vector.pngis excluded by!**/*.pngsrc/assets/aossie_logo.pngis excluded by!**/*.pngsrc/assets/image 1.pngis excluded by!**/*.pngsrc/assets/resonate1 1.pngis excluded by!**/*.pngsrc/assets/resonate_logo_white.svgis excluded by!**/*.svg
📒 Files selected for processing (19)
README.md(1 hunks)package.json(1 hunks)public/index.html(2 hunks)src/App.css(1 hunks)src/App.js(1 hunks)src/components/About/About.css(1 hunks)src/components/About/About.js(1 hunks)src/components/DownloadApp/DownloadApp.css(1 hunks)src/components/DownloadApp/DownloadApp.js(1 hunks)src/components/Features/Features.css(1 hunks)src/components/Features/Features.js(1 hunks)src/components/Footer/Footer.css(1 hunks)src/components/Footer/Footer.js(1 hunks)src/components/Hero/Hero.css(1 hunks)src/components/Hero/Hero.js(1 hunks)src/components/NavBar/Navbar.css(1 hunks)src/components/NavBar/Navbar.js(1 hunks)src/components/TechStack/TechStack.css(1 hunks)src/components/TechStack/TechStack.js(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
src/App.js (7)
src/components/NavBar/Navbar.js (1)
Navbar(6-26)src/components/Hero/Hero.js (1)
Hero(6-36)src/components/Features/Features.js (1)
Features(32-47)src/components/TechStack/TechStack.js (1)
TechStack(6-22)src/components/About/About.js (1)
About(7-30)src/components/DownloadApp/DownloadApp.js (1)
DownloadApp(6-22)src/components/Footer/Footer.js (1)
Footer(5-21)
🪛 LanguageTool
README.md
[uncategorized] ~3-~3: If this is a compound adjective that modifies the following noun, use a hyphen.
Context: ...cial landing page for Resonate - an Open Source social voice platform maintained by [AO...
(EN_COMPOUND_ADJECTIVE_INTERNAL)
🪛 markdownlint-cli2 (0.18.1)
README.md
59-59: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
🔇 Additional comments (12)
public/index.html (1)
5-27: Branding/meta updates look good; confirm favicon assetThe new title/description are aligned with the landing page. Please just confirm
%PUBLIC_URL%/resonate_logo_white.svgexists inpublic/so the favicon doesn’t 404 in production.src/components/TechStack/TechStack.css (1)
1-41: Solid, simple styling for the tech stack sectionLayout, spacing, and logo sizing look good and should behave well across viewports given the flex-wrap.
src/components/Features/Features.css (1)
1-64: Features layout and responsive behavior look goodAlternating row layout, image treatment, and the mobile column fallback are coherent with a modern marketing page section.
package.json (1)
9-15: Dependency versions are current and compatibleThe specified versions for
gsap(^3.14.0),lenis(^1.3.15), andreact-icons(^5.5.0) are all at their latest releases and compatible with your React 18 / Create React App setup.src/components/About/About.css (1)
1-71: LGTM!The styling is well-structured with good use of flexbox layout, appropriate spacing, hover states, and mobile responsiveness. The breakpoint at 768px appropriately adjusts the layout for smaller screens.
src/App.css (1)
1-19: LGTM!The global styles provide a clean foundation with a proper CSS reset, modern font stack (Inter), and appropriate base layout for the app container. The font smoothing properties enhance text rendering across browsers.
src/components/DownloadApp/DownloadApp.css (1)
1-39: LGTM!The styling provides a clean, centered card design with appropriate spacing, responsive flex layout for store buttons, and a subtle hover effect that enhances user interaction.
src/components/Hero/Hero.js (1)
18-25: Buttons lack click handlers — verify if this is intentional.Both buttons are rendered without
onClickhandlers or navigation logic. If they're placeholders for future functionality, consider addingdisabledstate or TODO comments. If they should be functional:
- "Create/Join Room" might need to link to the app or a specific route.
- "Contribute to the Project" could link to the GitHub repository.
- <button className="btn btn-primary"> + <a href="#download-app" className="btn btn-primary"> Create/Join Room <FaArrowRight /> - </button> - <button className="btn btn-secondary"> + </a> + <a href="https://github.com/AOSSIE/Resonate" target="_blank" rel="noopener noreferrer" className="btn btn-secondary"> Contribute to the Project <FaGithub /> - </button> + </a>src/components/Hero/Hero.css (1)
1-112: Well-structured responsive layout.The CSS follows good practices with flexbox layout, proper use of
max-widthfor content containment, and a clean mobile breakpoint. The color palette is consistent and the overall styling aligns well with modern landing page patterns.src/App.js (3)
40-69: Hero animation is well-structured with proper sequencing.The staggered timeline approach for the hero section creates a polished entrance animation. The use of negative offsets (
"-=0.8") provides smooth overlap between animations.
169-174: Cleanup logic is mostly correct but incomplete.The cleanup properly destroys Lenis and kills all ScrollTrigger instances. However, as noted above, the
requestAnimationFrameloop should also be cancelled to fully prevent memory leaks.
176-186: Clean component composition.The component tree is well-organized with a logical ordering of sections. The modular approach with separate components for each section improves maintainability.
| function raf(time) { | ||
| lenis.raf(time); | ||
| requestAnimationFrame(raf); | ||
| } | ||
|
|
||
| requestAnimationFrame(raf); |
There was a problem hiding this comment.
Memory leak: requestAnimationFrame loop continues after unmount.
The recursive requestAnimationFrame loop is never cancelled in the cleanup function. While lenis.destroy() is called, the rAF callback continues to run and calls lenis.raf() on a destroyed instance, potentially causing errors or memory leaks.
Store the frame ID and cancel it during cleanup:
+ let rafId;
+
function raf(time) {
lenis.raf(time);
- requestAnimationFrame(raf);
+ rafId = requestAnimationFrame(raf);
}
- requestAnimationFrame(raf);
+ rafId = requestAnimationFrame(raf);
// ... animations ...
// Cleanup function
return () => {
+ cancelAnimationFrame(rafId);
lenis.destroy();
ScrollTrigger.getAll().forEach(t => t.kill());
};Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In src/App.js around lines 30 to 35, the recursive requestAnimationFrame loop is
started but never cancelled, so it continues after unmount and may call
lenis.raf on a destroyed instance; fix by storing the rAF id (e.g., let rafId =
requestAnimationFrame(raf)) and updating raf to reassign rafId each tick, then
in the component cleanup call cancelAnimationFrame(rafId) (and keep
lenis.destroy()) and optionally guard lenis.raf with a check that the lenis
instance still exists to prevent calls after destruction.
| <a href="mailto:contact@aossie.org"><FaEnvelope /></a> | ||
| <a href="https://gitlab.com/aossie"><SiGitlab /></a> | ||
| <a href="https://github.com/AOSSIE"><FaGithub /></a> | ||
| <a href="https://discord.gg/yourlink"><FaDiscord /></a> |
There was a problem hiding this comment.
Update the Discord invite link.
The Discord link currently uses a placeholder URL (https://discord.gg/yourlink) that won't work for users trying to join your community.
🤖 Prompt for AI Agents
In src/components/About/About.js at line 23 the Discord anchor uses a
placeholder URL ("https://discord.gg/yourlink"); replace that href with the real
Discord invite link (or read it from a config/prop or environment variable so it
can be changed without code edits) and ensure the value is a valid, well-formed
invite URL before deploying.
| <a href="#" className="store-btn"> | ||
| <img src={appStoreBtn} alt="Download on App Store" /> | ||
| </a> | ||
| <a href="#" className="store-btn"> | ||
| <img src={playStoreBtn} alt="Get it on Google Play" /> | ||
| </a> |
There was a problem hiding this comment.
Add actual app store URLs.
Both store button links use placeholder href="#" values, which means they won't navigate to the app stores when clicked. Update these with the actual App Store and Google Play URLs once the apps are published.
🤖 Prompt for AI Agents
In src/components/DownloadApp/DownloadApp.js around lines 12 to 17, the anchor
tags for the App Store and Google Play buttons use placeholder href="#" values;
replace these with the actual App Store and Google Play URLs (or configurable
env/props values) so the buttons navigate to the correct store pages. Update the
first anchor href to the App Store URL and the second to the Google Play URL, or
read them from a config/props so they can be set when the apps are published;
keep the existing className and img elements unchanged.
| <a href="#"><FaInstagram /></a> | ||
| <a href="#"><FaFacebookF /></a> | ||
| <a href="#"><FaTwitter /></a> | ||
| <a href="#"><FaLinkedinIn /></a> |
There was a problem hiding this comment.
Add actual social media URLs.
All social media links currently use placeholder href="#" values. Update these with the actual social media profile URLs for your organization.
🤖 Prompt for AI Agents
In src/components/Footer/Footer.js around lines 13 to 16 the social anchor tags
use placeholder href="#" values; replace each href with the actual organization
social profile URLs (e.g., Instagram, Facebook, Twitter, LinkedIn) ensuring they
are absolute URLs (https://...), keep existing icon components, and verify each
link opens in a new tab with rel="noopener noreferrer" if desired for external
links and update tests or snapshots accordingly.
| .btn:hover { | ||
| transform: scale(1.02); | ||
| } |
There was a problem hiding this comment.
Add focus styles for keyboard accessibility.
The buttons have hover states but lack corresponding focus styles for keyboard navigation. This is an accessibility concern for users who navigate via keyboard.
.btn:hover {
transform: scale(1.02);
}
+
+.btn:focus {
+ outline: 2px solid #1a1a1a;
+ outline-offset: 2px;
+}
+
+.btn:focus:not(:focus-visible) {
+ outline: none;
+}📝 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.
| .btn:hover { | |
| transform: scale(1.02); | |
| } | |
| .btn:hover { | |
| transform: scale(1.02); | |
| } | |
| .btn:focus { | |
| outline: 2px solid #1a1a1a; | |
| outline-offset: 2px; | |
| } | |
| .btn:focus:not(:focus-visible) { | |
| outline: none; | |
| } |
🤖 Prompt for AI Agents
In src/components/Hero/Hero.css around lines 86 to 88, the .btn rule adds a
hover transform but omits keyboard focus styles; add a matching :focus-visible
(and :focus fallback) rule that applies the same transform and a visible focus
outline or box-shadow for accessibility, ensure it uses the same transition
timing as hover and does not remove default focus unless replaced with an
accessible custom outline, and scope the selector to .btn:focus-visible (and
.btn:focus) so keyboard users receive the same visual feedback as mouse users.
| <a href="https://github.com/AOSSIE/Resonate" target="_blank" rel="noopener noreferrer" className="nav-link"> | ||
| <FaGithub size={20} /> | ||
| </a> | ||
| <button className="download-btn">Download Now</button> |
There was a problem hiding this comment.
Add functionality to the Download button.
The "Download Now" button currently has no onClick handler or link. Consider adding functionality to either navigate to the download section (e.g., using smooth scroll) or link to an external download page.
Would you like me to suggest an implementation that smoothly scrolls to the DownloadApp section when clicked?
🤖 Prompt for AI Agents
In src/components/NavBar/Navbar.js around line 21, the "Download Now" button
lacks an onClick or href so it does nothing; add functionality to either
navigate to the DownloadApp section via smooth scroll or link to an external
download URL. Implement by giving the button an onClick that finds the target
element (e.g., document.getElementById('download-app') or a React ref) and calls
scrollIntoView({ behavior: 'smooth' }); alternatively, use an anchor <a
href="https://example.com/download"> for external downloads; ensure the handler
is added in the component, the target section has the matching id, and include
an accessible aria-label and cursor styling.
1 participant
#15 This pull request is a major overhaul of the Resonate website, transforming it from a basic React template into a polished, feature-rich landing page for the open-source social voice platform. The update introduces a modern tech stack, new modular components, advanced animations, and an improved user experience. Key changes are grouped below by theme.
Demo
Project Structure & Documentation
README.mdto provide a comprehensive overview of Resonate, its features, tech stack, installation steps, project structure, and contribution guidelines.Tech Stack & Dependencies
gsap,lenis, andreact-iconstopackage.jsonfor animations, smooth scrolling, and icon support, respectively.UI/UX & Branding
public/index.htmlto use a custom favicon, improved meta description, and set a relevant page title for branding and SEO. [1] [2]App.cssto use the Inter font and modern layout practices.Component Architecture & Features
App.jsto use new modular components (Navbar,Hero,Features,TechStack,About,DownloadApp,Footer), and implemented GSAP-based section animations and Lenis smooth scrolling.Herosection with branding and call-to-action.Featuressection showcasing platform capabilities. [1] [2]TechStackandAboutsections highlighting technologies and the AOSSIE organization. [1] [2]DownloadAppsection with app store buttons. [1] [2]Footerwith social links and copyright. [1] [2]These changes collectively modernize the Resonate landing page, improve maintainability, and provide a strong foundation for further development.
Summary by CodeRabbit
Release Notes
New Features
Documentation
Style
✏️ Tip: You can customize this high-level summary in your review settings.