Skip to content

added Support Us #720

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
hiranya25 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

added Support Us #720

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 15 additions & 11 deletions src/app/about/page.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,14 +104,14 @@ export default function About() {
// ── gradient fill factory ────────────────────────────────────────────────
const getGradient = (ctx, chartArea) => {
const gradient = ctx.createLinearGradient(0, chartArea.top, 0, chartArea.bottom);
gradient.addColorStop(0, 'rgba(0,132,61,0.35)');
gradient.addColorStop(0, 'rgba(0,132,61,0.35)');
gradient.addColorStop(0.5, 'rgba(0,132,61,0.12)');
gradient.addColorStop(1, 'rgba(0,132,61,0.0)');
gradient.addColorStop(1, 'rgba(0,132,61,0.0)');
return gradient;
};

const rawData = [4, 8, 12, 9, 9, 11, 8, 6, 18, 22];
const labels = ['2016', '2017', '2018', '2019', '2020', '2021', '2022', '2023', '2024', '2025'];
const labels = ['2016', '2017', '2018', '2019', '2020', '2021', '2022', '2023', '2024', '2025'];

const data = {
labels,
Expand Down Expand Up @@ -216,13 +216,17 @@ export default function About() {
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>
<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>
Comment on lines +219 to +221
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Apr 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Avoid invalid heading-inside-paragraph nesting.

<h5> is nested inside <motion.p>, which is invalid HTML and can lead to hydration/DOM mismatch behavior.

💡 Proposed fix 
-            <motion.p
+            <motion.div
               className="text-base md:text-lg leading-relaxed text-zinc-600 dark:text-zinc-400 font-mono 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.
-              <br />
-              <Link href="https://opencollective.com/aossie" target="_blank" rel="noopener noreferrer" className="inline-block mt-4 text-[`#00843D`] dark:text-yellow-400 font-bold hover:underline">
-                Support our work on Open Collective →
-              </Link>
-            </motion.p>
+              <p>
+                <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.
+                <br />
+                <Link href="https://opencollective.com/aossie" target="_blank" rel="noopener noreferrer" className="inline-block mt-4 text-[`#00843D`] dark:text-yellow-400 font-bold hover:underline">
+                  Support our work on Open Collective →
+                </Link>
+              </p>
+            </motion.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 219 - 221, The <h5> heading is currently
nested inside a <motion.p> which produces invalid HTML; change the container
element used in the animation so headings are not children of a paragraph—e.g.,
replace the <motion.p> wrapper that contains the <h5> with a <motion.div> (or
move the <h5> out of the <motion.p>) in the component rendering the "Get to know
our Community" block so the <h5> is not inside a paragraph.

<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.
<br />
<Link href="https://opencollective.com/aossie" target="_blank" rel="noopener noreferrer" className="inline-block mt-4 text-[#00843D] dark:text-yellow-400 font-bold hover:underline">
Support our work on Open Collective →
</Link>
Comment on lines +227 to +229
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Apr 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Verify Link usage/import in About page
rg -n -C2 "import Link from 'next/link'|<Link\\b" src/app/about/page.jsx

Repository: AOSSIE-Org/Website

Length of output: 457

🏁 Script executed:

head -30 src/app/about/page.jsx

Repository: AOSSIE-Org/Website

Length of output: 956

Add missing Link import from Next.js.

The <Link> component is used at lines 227-229 but next/link is not imported. This will cause an undefined identifier error at build time.

Suggested fix 
 import React from 'react';
+import Link from 'next/link';
 import { Line } from 'react-chartjs-2';
🤖 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 227 - 229, The file uses the Next.js
<Link> component (seen in the JSX block with className and href
"https://opencollective.com/aossie") but does not import it; add the missing
import for Link from 'next/link' at the top of the module so the Link identifier
is defined (e.g., add an import statement for Link before the component
definition where the JSX uses Link).

</motion.p>
</div>

Expand Down Expand Up @@ -259,12 +263,12 @@ export default function About() {
}}
>
{[
{ value: stats.years, label: 'years' },
{ value: stats.projects, label: 'projects' },
{ value: 203, label: 'repos' },
{ value: '88', label: 'mentors' },
{ value: stats.years, label: 'years' },
{ value: stats.projects, label: 'projects' },
{ value: 203, label: 'repos' },
{ value: '88', label: 'mentors' },
{ value: `${stats.contributors}+`, label: 'contributors' },
{ value: '7500+', label: 'community members' },
{ value: '7500+', label: 'community members' },
].map((item, index) => (
<motion.div
key={index}
Expand Down
205 changes: 110 additions & 95 deletions src/app/page.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ export default function Home() {

{/* Main Content */}
<div className="flex flex-col lg:flex-row relative z-10 mb-16 gap-12 items-center">
<motion.div
<motion.div
initial={{ opacity: 0, scale: 0.5 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.8 }}
Expand All @@ -63,15 +63,15 @@ export default function Home() {
</motion.div>
<div className="flex-1 w-full lg:pl-4">
<div className="max-w-2xl mx-auto lg:mx-0">
<motion.h1
<motion.h1
initial={{ opacity: 0, x: 50 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.8, delay: 0.2 }}
className="font-mono text-5xl sm:text-6xl md:text-7xl font-extrabold tracking-tight text-[#00843d] md:text-[#FED41E] dark:text-[#FED41E] md:dark:text-black leading-tight relative lg:-top-[30px] text-center lg:text-left"
>
We Innovate <br /> We Educate
</motion.h1>
<motion.p
<motion.p
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.8, delay: 0.4 }}
Expand All @@ -82,7 +82,7 @@ export default function Home() {
provides a resource-efficient channel to transfer knowledge and
achieve innovation and education.
</motion.p>
<motion.div
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.6 }}
Expand Down Expand Up @@ -142,114 +142,129 @@ export default function Home() {
>
<FontAwesomeIcon icon={faYoutube} size="2xl" />
</Link>

</motion.div>
<motion.div
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.8 }}
className="mt-12 mx-4 md:mx-0 md:mt-8 text-center lg:text-left relative lg:top-[20px]"
>
<Link href="/about" className="group relative inline-block text-lg">
<span className="relative z-10 block overflow-hidden rounded-lg border-2 border-gray-900 px-5 py-3 transition-colors duration-300 ease-in-out group-hover:text-white dark:group-hover:text-black">
<span className="absolute inset-0 h-full w-full rounded-lg bg-white px-5 py-3"></span>
<span className="absolute left-0 -ml-2 h-48 w-72 origin-top-right -translate-x-full translate-y-12 -rotate-90 bg-[#00843D] transition-all duration-300 ease-in-out group-hover:-rotate-180 dark:bg-yellow-400"></span>
<span className="relative font-mono text-xl font-black tracking-tighter">
Learn More About Us
<div className="flex flex-wrap gap-4 justify-center lg:justify-start">
<Link href="/about" className="group relative inline-block text-lg">
<span className="relative z-10 block overflow-hidden rounded-lg border-2 border-gray-900 px-5 py-3 transition-colors duration-300 ease-in-out group-hover:text-white dark:group-hover:text-black">
<span className="absolute inset-0 h-full w-full rounded-lg bg-white px-5 py-3"></span>
<span className="absolute left-0 -ml-2 h-48 w-72 origin-top-right -translate-x-full translate-y-12 -rotate-90 bg-[#00843D] transition-all duration-300 ease-in-out group-hover:-rotate-180 dark:bg-yellow-400"></span>
<span className="relative font-mono text-xl font-black tracking-tighter">
Learn More About Us
</span>
</span>
</span>
<span
className="absolute bottom-0 right-0 mb-3 mr-2 h-14 w-full rounded-lg bg-[#00843D] transition-all duration-200 ease-linear group-hover:m-0 dark:bg-yellow-400"
data-rounded="rounded-lg"
></span>
</Link>
<span
className="absolute bottom-0 right-0 mb-3 mr-2 h-14 w-full rounded-lg bg-[#00843D] transition-all duration-200 ease-linear group-hover:m-0 dark:bg-yellow-400"
data-rounded="rounded-lg"
></span>
</Link>
<Link href="https://opencollective.com/aossie" target="_blank" rel="noopener noreferrer" className="group relative inline-block text-lg">
<span className="relative z-10 block overflow-hidden rounded-lg border-2 border-gray-900 px-5 py-3 transition-colors duration-300 ease-in-out group-hover:text-white dark:group-hover:text-black">
<span className="absolute inset-0 h-full w-full rounded-lg bg-white px-5 py-3"></span>
<span className="absolute left-0 -ml-2 h-48 w-72 origin-top-right -translate-x-full translate-y-12 -rotate-90 bg-[#00843D] transition-all duration-300 ease-in-out group-hover:-rotate-180 dark:bg-yellow-400"></span>
<span className="relative font-mono text-xl font-black tracking-tighter">
Support Our Work
</span>
</span>
<span
className="absolute bottom-0 right-0 mb-3 mr-2 h-14 w-full rounded-lg bg-[#00843D] transition-all duration-200 ease-linear group-hover:m-0 dark:bg-yellow-400"
data-rounded="rounded-lg"
></span>
</Link>
</div>
</motion.div>
</div>
</div>
</div>
</div>
</Container.Outer>

<Stats />

{/* Projects Section */}
<Container className="mt-24 mb-20">
<div className="space-y-10 ">
<div className="flex text-center items-center justify-center">
<div className=" relative top-2 hidden h-12 w-12 translate-x-px transform items-center justify-center rounded-full bg-[#00843D] p-2 dark:bg-yellow-400 md:flex">
<svg
aria-hidden="true"
role="img"
className="scale-125 font-extrabold text-white dark:text-black"
viewBox="0 0 24 24"
width="24"
height="24"
fill="currentColor"
>
<path d="M7.25 6a.75.75 0 00-.75.75v7.5a.75.75 0 001.5 0v-7.5A.75.75 0 007.25 6zM12 6a.75.75 0 00-.75.75v4.5a.75.75 0 001.5 0v-4.5A.75.75 0 0012 6zm4 .75a.75.75 0 011.5 0v9.5a.75.75 0 01-1.5 0v-9.5z"></path>
<path
fillRule="evenodd"
d="M3.75 2A1.75 1.75 0 002 3.75v16.5c0 .966.784 1.75 1.75 1.75h16.5A1.75 1.75 0 0022 20.25V3.75A1.75 1.75 0 0020.25 2H3.75zM3.5 3.75a.25.25 0 01.25-.25h16.5a.25.25 0 01.25.25v16.5a.25.25 0 01-.25.25H3.75a.25.25 0 01-.25-.25V3.75z"
></path>
</svg>
</div>
<div className="col-span-8 mt-3 self-center lg:col-start-2">
<h1 className="font-mono pl-3 text-5xl font-black capitalize tracking-tighter text-zinc-800 dark:text-white">
Our Projects
</h1>
</div>
</div>
<Stats />

<p className=" font-mono text-lg text-zinc-600 dark:text-zinc-400 text-center ">
Our Projects span a wide range of themes, such as:
open money; decentralized economic and financial stability;
trust; education; sustainability; communication; governance and management;
and user-empowering sunny tools.
</p>
</div>
<div className="mt-10">
<Container.Inner>
<div className="grid grid-cols-1 gap-x-12 gap-y-16 sm:grid-cols-2 lg:grid-cols-3 justify-items-center">
{randomProjects.map((project) => (
<div key={project.name} className="w-full max-w-[18rem] sm:max-w-none">
<CardEffect
heading={project.name}
logo={project.logo}
content={project.description}
/>
</div>
))}
</div>
</Container.Inner>
{/* Projects Section */}
<Container className="mt-24 mb-20">
<div className="space-y-10 ">
<div className="flex text-center items-center justify-center">
<div className=" relative top-2 hidden h-12 w-12 translate-x-px transform items-center justify-center rounded-full bg-[#00843D] p-2 dark:bg-yellow-400 md:flex">
<svg
aria-hidden="true"
role="img"
className="scale-125 font-extrabold text-white dark:text-black"
viewBox="0 0 24 24"
width="24"
height="24"
fill="currentColor"
>
<path d="M7.25 6a.75.75 0 00-.75.75v7.5a.75.75 0 001.5 0v-7.5A.75.75 0 007.25 6zM12 6a.75.75 0 00-.75.75v4.5a.75.75 0 001.5 0v-4.5A.75.75 0 0012 6zm4 .75a.75.75 0 011.5 0v9.5a.75.75 0 01-1.5 0v-9.5z"></path>
<path
fillRule="evenodd"
d="M3.75 2A1.75 1.75 0 002 3.75v16.5c0 .966.784 1.75 1.75 1.75h16.5A1.75 1.75 0 0022 20.25V3.75A1.75 1.75 0 0020.25 2H3.75zM3.5 3.75a.25.25 0 01.25-.25h16.5a.25.25 0 01.25.25v16.5a.25.25 0 01-.25.25H3.75a.25.25 0 01-.25-.25V3.75z"
></path>
</svg>
</div>
<div className="col-span-8 mt-3 self-center lg:col-start-2">
<h1 className="font-mono pl-3 text-5xl font-black capitalize tracking-tighter text-zinc-800 dark:text-white">
Our Projects
</h1>
</div>
</div>
<div className="mt-12 text-center">
<Link
target="_blank"
className="group relative inline-flex items-center overflow-hidden rounded-lg bg-[#00843D] px-8 py-3 text-white focus:outline-none active:bg-[#00843D] dark:bg-yellow-400 dark:text-zinc-900"
href="/projects"
>
<span className="absolute right-0 flex-shrink-0 translate-x-full rounded-full border border-current bg-white p-1 text-black transition-transform group-hover:-translate-x-4">
<svg
className="h-5 w-5"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M17 8l4 4m0 0l-4 4m4-4H3"

<p className=" font-mono text-lg text-zinc-600 dark:text-zinc-400 text-center ">
Our Projects span a wide range of themes, such as:
open money; decentralized economic and financial stability;
trust; education; sustainability; communication; governance and management;
and user-empowering sunny tools.
</p>
</div>
<div className="mt-10">
<Container.Inner>
<div className="grid grid-cols-1 gap-x-12 gap-y-16 sm:grid-cols-2 lg:grid-cols-3 justify-items-center">
{randomProjects.map((project) => (
<div key={project.name} className="w-full max-w-[18rem] sm:max-w-none">
<CardEffect
heading={project.name}
logo={project.logo}
content={project.description}
/>
</svg>
</span>
<span className="font-mono font-semibold transition-all group-hover:mr-6">
View All Projects
</span>
</Link>
</div>
</Container>
</div>
))}
</div>
</Container.Inner>
</div>
<div className="mt-12 text-center">
<Link
target="_blank"
className="group relative inline-flex items-center overflow-hidden rounded-lg bg-[#00843D] px-8 py-3 text-white focus:outline-none active:bg-[#00843D] dark:bg-yellow-400 dark:text-zinc-900"
href="/projects"
>
Comment on lines +241 to +245
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Apr 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Verify internal links opening in new tabs within Home page
rg -n -C3 'href="/projects"|target="_blank"' src/app/page.jsx

Repository: AOSSIE-Org/Website

Length of output: 3957

Remove target="_blank" from internal /projects link.

The /projects route is internal to the app, so target="_blank" forces an unnecessary new tab and breaks expected in-app navigation behavior. This differs from external links elsewhere on the page which correctly use target="_blank".

Fix 
           <Link
-            target="_blank"
             className="group relative inline-flex items-center overflow-hidden rounded-lg bg-[`#00843D`] px-8 py-3 text-white focus:outline-none active:bg-[`#00843D`] dark:bg-yellow-400 dark:text-zinc-900"
             href="/projects"
           >
📝 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.

Suggested change
<Link
target="_blank"
className="group relative inline-flex items-center overflow-hidden rounded-lg bg-[#00843D] px-8 py-3 text-white focus:outline-none active:bg-[#00843D] dark:bg-yellow-400 dark:text-zinc-900"
href="/projects"
>
<Link
className="group relative inline-flex items-center overflow-hidden rounded-lg bg-[`#00843D`] px-8 py-3 text-white focus:outline-none active:bg-[`#00843D`] dark:bg-yellow-400 dark:text-zinc-900"
href="/projects"
>
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/app/page.jsx` around lines 241 - 245, Remove the target="_blank"
attribute from the Link component that renders the internal route (the Link with
href="/projects") so it behaves as an in-app navigation link; locate the Link
element in src/app/page.jsx (the component using Link with className="group
relative inline-flex ...") and delete the target prop, leaving other props
(href, className, etc.) intact.

<span className="absolute right-0 flex-shrink-0 translate-x-full rounded-full border border-current bg-white p-1 text-black transition-transform group-hover:-translate-x-4">
<svg
className="h-5 w-5"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M17 8l4 4m0 0l-4 4m4-4H3"
/>
</svg>
</span>
<span className="font-mono font-semibold transition-all group-hover:mr-6">
View All Projects
</span>
</Link>
</div>
</Container>


<Container.Outer className="mt-28">
Expand Down
6 changes: 6 additions & 0 deletions src/components/apply/ApplyHeader.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,12 @@ export function ApplyHeader({ children }) {
<p className='text-zinc-600 dark:text-zinc-400 text-lg font-mono leading-8 max-w-4xl text-center'>
Our application timeline is your step-by-step guide to becoming a part of our open-source community and contributing to projects that are shaping the future of technology. From submitting your proposal to final evaluations, we&apos;ll walk you through the process every step of the way. Don&apos;t miss this opportunity to be a part of something great and apply now!
</p>
<p className='text-zinc-500 dark:text-zinc-500 text-sm font-mono mt-4'>
Want to help us keep these projects free and open-source?{' '}
<Link href="https://opencollective.com/aossie" target="_blank" rel="noopener noreferrer" className="text-[#00843D] dark:text-yellow-400 font-bold hover:underline">
Support us on Open Collective
</Link>
Comment on lines +49 to +53
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Apr 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Verify Link usage/import in ApplyHeader
rg -n -C2 "import Link from 'next/link'|<Link\\b" src/components/apply/ApplyHeader.jsx

Repository: AOSSIE-Org/Website

Length of output: 533

Import Link from next/link before using it.

The <Link> component is used at line 51, but next/link is not imported in this file. This will cause a build failure.

Proposed fix 
 import { useRef, useMemo } from 'react'
 import { useInView } from 'framer-motion'
 import { Container } from '@/components/shared/Container'
 import { motion, useScroll, useTransform } from 'framer-motion'
+import Link from 'next/link'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/components/apply/ApplyHeader.jsx` around lines 49 - 53, The file uses the
Next.js Link component in the ApplyHeader component (the <Link> element near the
Open Collective callout) but never imports it; add an import for Link from
"next/link" at the top of ApplyHeader.jsx (alongside other imports) so the Link
symbol is defined and the component builds correctly.

</p>
</motion.div>

{/* Horizontal Timeline Steps */}
Expand Down
Loading