Skip to content

refactor(architecture,ui): upgrade website to Next.js 16 App Router, redesign Hero & Projects sections - #737

Merged
Zahnentferner merged 1 commit into
AOSSIE-Org:mainfrom
reach2saksham:kickstart
Jul 31, 2026
Merged

refactor(architecture,ui): upgrade website to Next.js 16 App Router, redesign Hero & Projects sections#737
Zahnentferner merged 1 commit into
AOSSIE-Org:mainfrom
reach2saksham:kickstart

Conversation

@reach2saksham

@reach2saksham reach2saksham commented Jul 31, 2026 •
edited
Loading

Copy link
Copy Markdown
Member

Summary

This PR upgrades the AOSSIE website to the modern Next.js 16 (App Router) architecture aligned with Template-Repo-NextJS, featuring React 19, Tailwind CSS v4, next-intl (i18n), and next-themes.

It introduces a completely redesigned, responsive Hero Section and an interactive, animated Projects Showcase Section.

Screenshots/Recordings:

TODO: If applicable, add screenshots or recordings that demonstrate the interface before and after the changes.

2026-07-31.06-54-18.mp4

The Dark Mode + i18n/l10n, all works perfectly along with the above

Key Feature Highlights

1. Hero Section Redesign

  • Typography & Animations: Modern entrance animations (animate-hero-title, animate-hero-subtext, animate-hero-badge) with brand-highlighted founding year badge (2016).
  • Interactive Navigation: Floating "Learn More →" call-to-action pill leading to project offerings.
  • Canvas Viewport: Dedicated container reserved for central visual/interactive animation assets.
  • Sticky Navbar: Clean, glassmorphic backdrop-blur navbar featuring an interactive language switcher dropdown and multi-state theme toggle (theme-icon-invert).

2. Projects Section Redesign

  • Framer Motion Animations: Interactive project grid supporting smooth multi-phase scroll-linked layout transitions (scatter, line, circle, bottom-strip).
  • Brand SVG Assets: Sourced official vector SVGs from public/brand/project_svgs/.
  • Dark Mode SVG Inversion: Theme-aware SVG logo styling (theme-icon-invert) ensuring dark fill logos (e.g. Resonate) smoothly transition to crisp white in dark mode.
  • Interactive Custom Cursor: Real-time cursor tracking and hover state micro-interactions.

i18n, Branding & Compliance

  • i18n & Font Loading: Localized dynamic route group src/app/[locale]/ with next-intl, async generateLocaleMetadata, and Noto_Sans_Devanagari font fallback for Hindi script.
  • Path Aliases: Standardized all imports to use @/* path aliases across components, routes, and configs.
  • Branding Assets: Consolidated brand guidelines and vectors inside public/brand/ and public/brand/icons/.
  • CI/CD & Governance: Pinned GitHub Actions to full 40-character SHAs (ci.yml, nextjs.yml), added .coderabbit.yml, AGENTS.md, COPYRIGHT.md (2026), and Contributors.md.

Verification

  • npm run build: Compiled successfully with Turbopack in 1.55s (TypeScript checked cleanly).
  • npm run lint: Clean ESLint check with 0 errors and 0 warnings.

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:

  • This PR does not contain AI-generated code at all.
  • This PR contains AI-generated code. I have read the AI Usage Policy and this PR complies with this policy. I have tested the code locally and I am responsible for it.

I have used the following AI models and tools: TODO

Checklist

  • My PR addresses a single issue, fixes a single bug or makes a single improvement.
  • My code follows the project's code style and conventions
  • If applicable, I have made corresponding changes or additions to the documentation
  • If applicable, I have made corresponding changes or additions to tests
  • My changes generate no new warnings or errors
  • I have joined the Discord server and I will share a link to this PR with the project maintainers there
  • I have read the Contribution Guidelines
  • Once I submit my PR, CodeRabbit AI will automatically review it and I will address CodeRabbit's comments.
  • I have filled this PR template completely and carefully, and I understand that my PR may be closed without review otherwise.

@reach2saksham reach2saksham self-assigned this Jul 31, 2026
@reach2saksham reach2saksham added documentation Improvements or additions to documentation enhancement New feature or request gsoc labels Jul 31, 2026
@coderabbitai

coderabbitai Bot commented Jul 31, 2026 •
edited
Loading

Copy link
Copy Markdown

Important

Review skipped

Too many files!

This PR contains 139 files, which is 39 over the limit of 100.

To get a review, narrow the scope:
• coderabbit review --committed # exclude uncommitted changes
• coderabbit review --dir # limit to a subdirectory
• coderabbit review --base # compare against a closer base

Upgrade to a paid plan to raise the limit.

This review couldn't start because sufficient usage credits or metered capacity aren't available. Add credits or update usage-based reviews in the billing tab, then retry.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: f93c2df7-9595-4c26-8e7f-f00e96acce01

📥 Commits

Reviewing files that changed from the base of the PR and between 895772c and ffb3db5.

⛔ Files ignored due to path filters (70)
  • package-lock.json is excluded by !**/package-lock.json
  • public/Agora.png is excluded by !**/*.png
  • public/Djed.png is excluded by !**/*.png
  • public/Pictopy.png is excluded by !**/*.png
  • public/Resonate.png is excluded by !**/*.png
  • public/SSS.png is excluded by !**/*.png
  • public/brand/icons/aossie_logo.svg is excluded by !**/*.svg
  • public/brand/icons/aossie_secondary_logo.svg is excluded by !**/*.svg
  • public/brand/icons/discord.svg is excluded by !**/*.svg
  • public/brand/icons/favicon.ico is excluded by !**/*.ico
  • public/brand/icons/file.svg is excluded by !**/*.svg
  • public/brand/icons/github.svg is excluded by !**/*.svg
  • public/brand/icons/globe.svg is excluded by !**/*.svg
  • public/brand/icons/instagram.svg is excluded by !**/*.svg
  • public/brand/icons/linkedin.svg is excluded by !**/*.svg
  • public/brand/icons/mail.svg is excluded by !**/*.svg
  • public/brand/icons/moon.svg is excluded by !**/*.svg
  • public/brand/icons/stability.svg is excluded by !**/*.svg
  • public/brand/icons/sun.svg is excluded by !**/*.svg
  • public/brand/icons/twitter.svg is excluded by !**/*.svg
  • public/brand/icons/window.svg is excluded by !**/*.svg
  • public/brand/icons/youtube.svg is excluded by !**/*.svg
  • public/brand/project_svgs/dit_logo.svg is excluded by !**/*.svg
  • public/brand/project_svgs/djed_alliance.svg is excluded by !**/*.svg
  • public/brand/project_svgs/fate_logo.svg is excluded by !**/*.svg
  • public/brand/project_svgs/resonate_logo.svg is excluded by !**/*.svg
  • public/brand/project_svgs/skills_logo.svg is excluded by !**/*.svg
  • public/brand/project_svgs/stability_nexus.svg is excluded by !**/*.svg
  • public/brand/project_svgs/stablepay_logo.svg is excluded by !**/*.svg
  • public/brand/project_svgs/tnt_logo.svg is excluded by !**/*.svg
  • public/contribution-dark.png is excluded by !**/*.png
  • public/contribution.png is excluded by !**/*.png
  • public/default.png is excluded by !**/*.png
  • public/ele1.svg is excluded by !**/*.svg
  • public/ele2.svg is excluded by !**/*.svg
  • public/ele3.svg is excluded by !**/*.svg
  • public/ele4.svg is excluded by !**/*.svg
  • public/ele5.svg is excluded by !**/*.svg
  • public/google-logo.png is excluded by !**/*.png
  • public/gsoc-logo-ideas.png is excluded by !**/*.png
  • public/journey-dark.png is excluded by !**/*.png
  • public/logo.png is excluded by !**/*.png
  • public/logo1.png is excluded by !**/*.png
  • src/images/Agora.png is excluded by !**/*.png
  • src/images/Carbon.png is excluded by !**/*.png
  • src/images/DevrAILogo.png is excluded by !**/*.png
  • src/images/Djed.png is excluded by !**/*.png
  • src/images/Djed.svg is excluded by !**/*.svg
  • src/images/DjedAlliance.png is excluded by !**/*.png
  • src/images/EllenaLogo.svg is excluded by !**/*.svg
  • src/images/LibrEdLogo.png is excluded by !**/*.png
  • src/images/MindTheWordLogo.png is excluded by !**/*.png
  • src/images/NeuroTrackLogo.svg is excluded by !**/*.svg
  • src/images/OpenChatLogo.svg is excluded by !**/*.svg
  • src/images/OrgExplorerLogo.svg is excluded by !**/*.svg
  • src/images/Pictopy.png is excluded by !**/*.png
  • src/images/ReinLogo.svg is excluded by !**/*.svg
  • src/images/Resonate.png is excluded by !**/*.png
  • src/images/SSS.png is excluded by !**/*.png
  • src/images/SkeptikLogo.png is excluded by !**/*.png
  • src/images/StabilityNexus.png is excluded by !**/*.png
  • src/images/StarcrossLogo.png is excluded by !**/*.png
  • src/images/background-dark.png is excluded by !**/*.png
  • src/images/background.png is excluded by !**/*.png
  • src/images/default.png is excluded by !**/*.png
  • src/images/logo.svg is excluded by !**/*.svg
  • src/images/logo1.png is excluded by !**/*.png
  • src/images/logo_black.png is excluded by !**/*.png
  • src/images/monumento.png is excluded by !**/*.png
  • src/images/scholar.png is excluded by !**/*.png
📒 Files selected for processing (139)
  • .coderabbit.yml
  • .eslintrc.json
  • .github/workflows/ci.yml
  • .github/workflows/label-merge-conflicts.yml
  • .github/workflows/nextjs.yml
  • .github/workflows/rebuild-on-ideas-update.yml
  • .gitignore
  • AGENTS.md
  • CLAUDE.md
  • COPYRIGHT.md
  • Contributors.md
  • DCO.md
  • License.md
  • README.md
  • eslint.config.mjs
  • jsconfig.json
  • next.config.mjs
  • next.config.ts
  • package.json
  • postcss.config.js
  • postcss.config.mjs
  • prettier.config.js
  • public/.well-known/ai-plugin.json
  • public/.well-known/assetlinks.json
  • public/brand/Brand.md
  • public/llms.txt
  • public/robots.txt
  • src/app/[locale]/error.tsx
  • src/app/[locale]/globals.css
  • src/app/[locale]/layout.tsx
  • src/app/[locale]/not-found.tsx
  • src/app/[locale]/page.tsx
  • src/app/about/page.jsx
  • src/app/api/stats/route.js
  • src/app/apply/page.jsx
  • src/app/ideas/2022/agora-blockchain/page.mdx
  • src/app/ideas/2022/agora-vote-android/page.mdx
  • src/app/ideas/2022/agora-vote-ios/page.mdx
  • src/app/ideas/2022/aossie-scholar/page.mdx
  • src/app/ideas/2022/monumento/page.mdx
  • src/app/ideas/2022/p2p-messaging-flutter/page.mdx
  • src/app/ideas/2022/social-street-smart-large/page.mdx
  • src/app/ideas/2022/social-street-smart-medium/page.mdx
  • src/app/ideas/2023/agora-blockchain/page.mdx
  • src/app/ideas/2023/agora-vote-android/page.mdx
  • src/app/ideas/2023/agora-vote-ios/page.mdx
  • src/app/ideas/2023/eduAid/page.mdx
  • src/app/ideas/2023/monumento-iPad/page.mdx
  • src/app/ideas/2023/monumento/page.mdx
  • src/app/ideas/2023/openChat/page.mdx
  • src/app/ideas/2023/p2p-messaging-flutter/page.mdx
  • src/app/ideas/2023/resonate/page.mdx
  • src/app/ideas/2023/social-street-smart-large/page.mdx
  • src/app/ideas/2023/social-street-smart-medium/page.mdx
  • src/app/ideas/2024/Pictopy/page.mdx
  • src/app/ideas/2024/agora-api/page.mdx
  • src/app/ideas/2024/agora-blockchain/page.mdx
  • src/app/ideas/2024/agora-library/page.mdx
  • src/app/ideas/2024/agora-vote-android/page.mdx
  • src/app/ideas/2024/agora-vote-ios/page.mdx
  • src/app/ideas/2024/djed/page.mdx
  • src/app/ideas/2024/eduAid/page.mdx
  • src/app/ideas/2024/monumento-iPad/page.mdx
  • src/app/ideas/2024/monumento/page.mdx
  • src/app/ideas/2024/resonate-ios/page.mdx
  • src/app/ideas/2024/resonate-ui/page.mdx
  • src/app/ideas/2024/resonate/page.mdx
  • src/app/ideas/2024/slagora/page.mdx
  • src/app/ideas/2024/social-street-smart/page.mdx
  • src/app/ideas/2025/agora-blockchain/page.mdx
  • src/app/ideas/2025/babynest/page.mdx
  • src/app/ideas/2025/debate-ai/page.mdx
  • src/app/ideas/2025/devr-ai/page.mdx
  • src/app/ideas/2025/docPilot/page.mdx
  • src/app/ideas/2025/eduaid/page.mdx
  • src/app/ideas/2025/ell-ena/page.mdx
  • src/app/ideas/2025/inpact/page.mdx
  • src/app/ideas/2025/monumento/page.mdx
  • src/app/ideas/2025/neurotrack/page.mdx
  • src/app/ideas/2025/perspective/page.mdx
  • src/app/ideas/2025/pictopy/page.mdx
  • src/app/ideas/2025/resoante/page.mdx
  • src/app/ideas/[year]/[slug]/not-found.jsx
  • src/app/ideas/[year]/[slug]/page.jsx
  • src/app/ideas/[year]/page.jsx
  • src/app/ideas/page.jsx
  • src/app/layout.jsx
  • src/app/page.jsx
  • src/app/projects/[slug]/page.jsx
  • src/app/projects/page.jsx
  • src/app/sitemap.ts
  • src/components/GSoC.tsx
  • src/components/Hero.tsx
  • src/components/LanguageSwitcher.tsx
  • src/components/Navbar.tsx
  • src/components/Projects.tsx
  • src/components/ThemeToggle.tsx
  • src/components/about/Journey.jsx
  • src/components/about/Team.jsx
  • src/components/about/Timeline.jsx
  • src/components/about/TimelineElement.jsx
  • src/components/apply/ApplyHeader.jsx
  • src/components/home/CardEffect.jsx
  • src/components/home/CardHome.jsx
  • src/components/home/CardProject.jsx
  • src/components/home/Stats.jsx
  • src/components/ideas/IdeaCard.jsx
  • src/components/ideas/IdeaLayout.jsx
  • src/components/ideas/IdeasDisplay.jsx
  • src/components/ideas/IdeasHeader.jsx
  • src/components/ideas/IdeasList.jsx
  • src/components/products/CardProduct.jsx
  • src/components/products/ProductsHeader.jsx
  • src/components/providers/lenis-provider.tsx
  • src/components/providers/theme-provider.tsx
  • src/components/shared/Banner.jsx
  • src/components/shared/Card.jsx
  • src/components/shared/Container.jsx
  • src/components/shared/ContainerPattern.jsx
  • src/components/shared/Footer.jsx
  • src/components/shared/Header.jsx
  • src/components/shared/Pattern.jsx
  • src/components/shared/Prose.jsx
  • src/components/shared/SectionHeading.jsx
  • src/config/languages.ts
  • src/helper/fetchGitHubIdeas.js
  • src/helper/projects.js
  • src/i18n/metadata.ts
  • src/i18n/navigation.ts
  • src/i18n/request.ts
  • src/i18n/routing.ts
  • src/lib/ideas.js
  • src/mdx-components.js
  • src/messages/en.json
  • src/messages/hi.json
  • src/proxy.ts
  • src/style/tailwind.css
  • tailwind.config.js
  • tsconfig.json

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@socket-security

socket-security Bot commented Jul 31, 2026

Copy link
Copy Markdown

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff Package Supply Chain
Security		 Vulnerability Quality Maintenance License
Updatednext@​14.1.3 ⏵ 16.2.1164 +19100 +7590 -399 +4970
Updatedeslint-config-next@​14.1.3 ⏵ 16.2.1199 +110067 +298100
Updated@​swc/​helpers@​0.5.2 ⏵ 0.5.23100 +11007284 -3100
Added@​types/​react-dom@​19.2.31001007584100
Updated@​types/​react@​18.0.27 ⏵ 19.2.17100 +110079 +192 -2100
Updated@​types/​node@​18.11.18 ⏵ 20.19.4310010081 -196100
Addednext-themes@​0.4.61001009882100
Updatedtailwindcss@​3.2.4 ⏵ 4.3.3100 +310084 -498100
Updatedreact@​18.2.0 ⏵ 19.2.4100 +11008497100
Updatedtypescript@​4.9.4 ⏵ 5.9.3100 +110090100 +190
Updatedreact-dom@​18.2.0 ⏵ 19.2.4100 +110092 +198100
Addednext-intl@​4.13.41001009396100
Addedlenis@​1.3.2510010010096100
Updatedframer-motion@​12.30.0 ⏵ 12.43.099100100 +196100
Updatedeslint@​8.26.0 ⏵ 9.39.59710010097 +47100
Added@​tailwindcss/​postcss@​4.3.39910010098100

View full report

@socket-security

socket-security Bot commented Jul 31, 2026

Copy link
Copy Markdown

Warning

Review the following alerts detected in dependencies.

According to your organization's Security Policy, it is recommended to resolve "Warn" alerts. Learn more about Socket for GitHub.

Action Severity Alert  (click "▶" to expand/collapse)
Warn High
Obfuscated code: npm es-abstract is 90.0% likely obfuscated

Confidence: 0.90

Location: Package overview

From: package-lock.json → npm/eslint-config-next@16.2.11 → npm/es-abstract@1.24.2

ℹ Read more on: This package | This alert | What is obfuscated code?

Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev.

Suggestion: Packages should not obfuscate their code. Consider not using packages with obfuscated code.

Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/es-abstract@1.24.2. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

Warn High
Obfuscated code: npm eslint-plugin-react is 90.0% likely obfuscated

Confidence: 0.90

Location: Package overview

From: package-lock.json → npm/eslint-config-next@16.2.11 → npm/eslint-plugin-react@7.37.5

ℹ Read more on: This package | This alert | What is obfuscated code?

Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev.

Suggestion: Packages should not obfuscate their code. Consider not using packages with obfuscated code.

Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/eslint-plugin-react@7.37.5. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

View full report

@Zahnentferner
Zahnentferner merged commit 69e23a1 into AOSSIE-Org:main Jul 31, 2026
4 checks passed
@reach2saksham

reach2saksham commented Jul 31, 2026

Copy link
Copy Markdown
Member Author

@coderabbitai review

@coderabbitai

coderabbitai Bot commented Jul 31, 2026 •
edited
Loading

Copy link
Copy Markdown
✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@Zahnentferner Zahnentferner Zahnentferner approved these changes

Assignees

@reach2saksham reach2saksham

Labels

documentation Improvements or additions to documentation enhancement New feature or request gsoc

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@reach2saksham @Zahnentferner