refactor: remove headers and add tagline and description with consisent and responsive design across pages#689
Open
reach2saksham wants to merge 1 commit intoAOSSIE-Org:mainfrom
Conversation
…ent and responsive design across pages
📝 WalkthroughWalkthroughAdds missing standardized page headings across multiple webpage sections (About, Projects, Apply, Ideas) and adjusts spacing and layout for improved visual hierarchy and consistency. Changes are primarily presentational, affecting styling and UI element positioning without altering core functionality. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
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.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/app/about/page.jsx (1)
213-226:⚠️ Potential issue | 🟠 MajorInvalid HTML:
<h5>cannot be nested inside<p>.The
<h5>element (lines 219-221) is placed inside the<motion.p>element. According to HTML specifications,<p>elements can only contain phrasing content, not block-level elements like headings. This will cause browsers to auto-close the<p>tag before the<h5>, resulting in broken layout and accessibility issues.🐛 Proposed fix: Restructure to use separate elements
{/* intro text */} <div className="mt-20 mb-12"> - <motion.p - className="text-base md:text-lg leading-relaxed text-zinc-600 dark:text-zinc-400 font-mono pt-5 mb-10 text-center" + <motion.div + className="pt-5 mb-10 text-center" initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.8, delay: 0.2 }} > <h5 className='font-bold text-3xl md:text-4xl text-zinc-900 dark:text-zinc-100 font-mono leading-tight mb-6 text-center'> - Get to know our <span className="text-[`#00843D`] dark:text-yellow-400">Community</span> - </h5> - <span className="text-[`#32a852`] font-bold">AOSSIE</span> (Australian Open - Source Software Innovation and Education) is a not-for-profit - organization dedicated to project-based innovation-focused and - research-intensive education. Our projects are free and open-source. - </motion.p> + Get to know our <span className="text-[`#00843D`] dark:text-yellow-400">Community</span> + </h5> + <p className="text-base md:text-lg leading-relaxed text-zinc-600 dark:text-zinc-400 font-mono text-center"> + <span className="text-[`#32a852`] font-bold">AOSSIE</span> (Australian Open + Source Software Innovation and Education) is a not-for-profit + organization dedicated to project-based innovation-focused and + research-intensive education. Our projects are free and open-source. + </p> + </motion.div> </div>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/app/about/page.jsx` around lines 213 - 226, The HTML is invalid because <h5> is nested inside <motion.p>; move the heading out of the paragraph and use separate elements (e.g., keep the animated block but change <motion.p> to a container like <motion.div> or place the <h5 className='font-bold text-3xl...'> before the <motion.p>), preserving the existing animation props (initial, animate, transition) and the paragraph text and classes (text-base md:text-lg ...). Ensure you update the component in page.jsx so the heading and paragraph are siblings rather than the heading being a child of the paragraph.
🧹 Nitpick comments (3)
src/components/ideas/IdeasHeader.jsx (1)
5-5: Unused import:Linkis imported but not used.The
Linkcomponent fromnext/linkis imported but not referenced anywhere in this file.🧹 Proposed fix
'use client' import { motion } from 'framer-motion' import { Container } from '@/components/shared/Container' -import Link from 'next/link'🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/ideas/IdeasHeader.jsx` at line 5, Remove the unused import by deleting the `import Link from 'next/link'` statement in IdeasHeader.jsx; locate the import at the top of the IdeasHeader component file and remove it (or replace it with any needed imports) so the `Link` symbol is not imported when unused.src/app/projects/page.jsx (2)
136-160: Remove unusedProjectSectioncomponent.The
ProjectSectioncomponent defined at lines 136-160 is dead code—it's never called within this file or imported elsewhere in the codebase. Remove it to reduce clutter.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/app/projects/page.jsx` around lines 136 - 160, The ProjectSection component is dead code; remove the entire ProjectSection function (the JSX block using motion.div and related JSX) from this file and also remove any now-unused imports it relied on (e.g., the motion import from 'framer-motion' if it is only used by ProjectSection) so there are no unused symbols left (refer to ProjectSection and motion).
32-134: Remove the unusedCardscomponent.The
Cardscomponent is defined but never used. It's not exported or instantiated anywhere in the file, and no other files import it. The projects are instead rendered using theCardProductcomponent. Removing this dead code reduces unnecessary complexity.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/app/projects/page.jsx` around lines 32 - 134, The Cards component (function name "Cards") is dead code — remove its entire definition from the file to avoid unused code; delete the Cards function block (including its internal JSX and related constants) and also remove any imports that become unused as a result (e.g., motion, MuiCard, CardContent, CardActions, Image, Typography, LinkIcon, FontAwesomeIcon, faGithub, faDiscord) while ensuring the active renderer (e.g., CardProduct) remains intact and all remaining imports are still referenced.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Outside diff comments:
In `@src/app/about/page.jsx`:
- Around line 213-226: The HTML is invalid because <h5> is nested inside
<motion.p>; move the heading out of the paragraph and use separate elements
(e.g., keep the animated block but change <motion.p> to a container like
<motion.div> or place the <h5 className='font-bold text-3xl...'> before the
<motion.p>), preserving the existing animation props (initial, animate,
transition) and the paragraph text and classes (text-base md:text-lg ...).
Ensure you update the component in page.jsx so the heading and paragraph are
siblings rather than the heading being a child of the paragraph.
---
Nitpick comments:
In `@src/app/projects/page.jsx`:
- Around line 136-160: The ProjectSection component is dead code; remove the
entire ProjectSection function (the JSX block using motion.div and related JSX)
from this file and also remove any now-unused imports it relied on (e.g., the
motion import from 'framer-motion' if it is only used by ProjectSection) so
there are no unused symbols left (refer to ProjectSection and motion).
- Around line 32-134: The Cards component (function name "Cards") is dead code —
remove its entire definition from the file to avoid unused code; delete the
Cards function block (including its internal JSX and related constants) and also
remove any imports that become unused as a result (e.g., motion, MuiCard,
CardContent, CardActions, Image, Typography, LinkIcon, FontAwesomeIcon,
faGithub, faDiscord) while ensuring the active renderer (e.g., CardProduct)
remains intact and all remaining imports are still referenced.
In `@src/components/ideas/IdeasHeader.jsx`:
- Line 5: Remove the unused import by deleting the `import Link from
'next/link'` statement in IdeasHeader.jsx; locate the import at the top of the
IdeasHeader component file and remove it (or replace it with any needed imports)
so the `Link` symbol is not imported when unused.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 695ea246-05af-4ef7-8d13-dfec107b0745
📒 Files selected for processing (4)
src/app/about/page.jsxsrc/app/projects/page.jsxsrc/components/apply/ApplyHeader.jsxsrc/components/ideas/IdeasHeader.jsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Addressed Issues:
Fixes #669
Removes unnecessary headings across pages, as the sticky navbar already fulfils its purpose. Introduces an energetiuc taglines along with short descriptions in pages without them. Hence, standardising the design with consistency.
Screenshots/Recordings:
Before:
After:
Before:
After:
Before:
After:
Before:
After:
Additional Notes:
AI Usage Disclosure:
We encourage contributors to use AI tools responsibly when creating Pull Requests. While AI can be a valuable aid, it is essential to ensure that your contributions meet the task requirements, build successfully, include relevant tests, and pass all linters. Submissions that do not meet these standards may be closed without warning to maintain the quality and integrity of the project. Please take the time to understand the changes you are proposing and their impact. AI slop is strongly discouraged and may lead to banning and blocking. Do not spam our repos with AI slop.
Check one of the checkboxes below:
I have used the following AI models and tools: TODO
Checklist